<!DOCTYPE html>

<head>
    <link rel="shortcut icon" type="image/x-icon" href="/output-onlinepngtools.png" />
    <title>Room: <%=roomId%>
    </title>
    <script>

        let chat_message = (userId, message, time) => {
            message = message.replace(/>/g, '&gt;')
                .replace(/</g, '&lt;')
                .replace(/"/g, '&quot;')
                .replace("@" + userId, '<span style="background-color:rgb(121, 196, 224)">' + "@" + userId + "</span>")
            //.replace(/>/g, '&gt;')
            //.replace(/</g, '&lt;')
            //.replace(/"/g, '&quot;')
            document.getElementById('chat').innerHTML += '<span class="chatmessage">' + time + ` <span class="chatuser" style='color:blue;'>${userId}: </span>${message}` + "</span><br>";
        };

        document.addEventListener('DOMContentLoaded', () => {
            setInterval(() => {
                document.getElementById('clock').innerHTML = new Date().toTimeString().slice(0, 8)
            }, 1000);

            chat_message('Admin', 'This is chat! Welcome :)', new Date().toTimeString().slice(0, 8))
        });
    </script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="/style.css">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<html>

<body>
    <div id="mobile" style="display: none;">No support for less that 1279px screen.</div>
    <nav id="nav" class="navbar navbar-dark bg-dark">
        <div class="cont" style="min-width: 100%;justify-content: space-between;">
            <a class="navbar-brand" href="https://github.com/reuzun/watchOnline" target="_blank">
                <img src="/output-onlinepngtools.png" width="40" height="40" class="d-inline-block align-top"
                    alt="Logo">
                <span id="brandname">
                    WatchOnline/<%=roomId%>
                </span>
            </a>
            <span id="quote" style="color:white;font-size: 20px;padding-right: 7%;">
                “Be yourself; everyone else is already taken.”
                ― Oscar Wilde
            </span>
            <span id="clock" class="noselect" style="color:white;font-size: 20px;">00.00.00</span>
        </div>

    </nav>

    <div class="cont" style="padding-top: 2%;">
        <!-- Left part -- Playlist Section -- -->
        <button id="showplaylist"
            style="display:none;position: absolute;top: 500px;left: -10px;height: 90px;border-radius: 50px;padding-right: 1px;font-weight: bolder;background-color: rgb(61, 53, 53);color: whitesmoke;">><br>><br>></button>
        <div id="leftpart">
            <fieldset style="margin-top: 4%;">
                <legend>Playlist <button id="playlisthide" class="btn btn-dark" style="float: right;">Hide</button>
                </legend>
                <table class="table">
                    <thead>
                        <tr>
                            <th style="width: 11%;">#</th>
                            <th style="width: 89%;">Video</th>
                            <!--<th scope="col"><button>Hide</button></th>-->
                        </tr>
                    </thead>
                    <tbody id="playlist">
                    </tbody>
                </table>
            </fieldset>
        </div>
        <!-- Middle part -- Player Section -- -->
        <div id="middlepart">
            <div class="cont rightside" style="flex-direction: column;">
                <div id="topbuttons" class="input-group mb-3">
                    <input id="link" type="text" class="form-control" placeholder="Video Link" aria-label="Video Link"
                        aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button id="submit" class="btn btn-dark" type="button">Play Video</button>
                        <button id="submitqueue" class="btn btn-light btn-outline-dark" type="button">Queue
                            Video</button>
                        <button id="skipvideo"
                            style="margin-top:75px;position: absolute;  background-color: transparent; color:coral; display: none;"
                            class="btn btn-light btn-outline-dark" type="button">Skip
                            Video</button>
                    </div>
                </div>

                <div id="videoContainer" class="noselect">
                    <div id="player"></div>
                </div>
            </div>
        </div>
        <!-- Right part -- Chat Section -- -->
        <div id="rightpart">
            <div class="cont" style="flex-direction: column;">
                <div id="chat" readonly class="form-control">
                </div>
                <div id="peoplelist"
                    style="position: absolute;opacity: 0;margin-top:-400px;float:right;z-index: -1;color:bisque">
                </div>

                <div id="peoplelistchat" class="peopleonchat"></div>



                <div class="input-group mb-3">
                    <input id="message" type="text" class="form-control" placeholder="Message!" aria-label="Message!"
                        aria-describedby="basic-addon2">

                    <div class="input-group-append">
                        <button id="chatsubmit" class="btn btn-dark" type="button">Send</button>
                        <button id="people" class="btn btn-dark" style="float:right;"><i class="fa fa-users"
                                aria-hidden="true"></i></button>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <div id="footer">
        <footer class="bg-dark text-center text-white">
            <!-- Grid container -->
            <div class="container p-4">
                <!--Grid row-->
                <div class="row">
                    <!--Grid column-->
                    <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                        <h5 class="text-uppercase">What is WatchOnline</h5>

                        <p>
                            This is a website that you can watch youtube videos with your friends simultaneously.<br>
                            For communication you can use side links
                        </p>
                    </div>
                    <!--Grid column-->

                    <!--Grid column-->
                    <div class="col-lg-6 col-md-6 mb-4 mb-md-0">
                        <h5 class="text-uppercase">Links</h5>

                        <ul class="list-unstyled mb-0">
                            <li>
                                <!-- Github -->
                                <a class="btn btn-outline-light btn-floating m-1 iconlink"
                                    href="https://www.github.com/reuzun/watchOnline" target="_blank" role="button"><i
                                        class="fab fa-github"></i>Github</a>
                            </li>
                            <li>
                                <a class="btn btn-outline-light btn-floating m-1 iconlink"
                                    href="https://www.github.com/reuzun/watchOnline" target="_blank" role="button"><i
                                        class="fa fa-envelope"></i>Mail</a>
                            </li>
                        </ul>
                    </div>
                    <!--Grid column-->

                </div>
                <!--Grid row-->
            </div>
            <!-- Grid container -->

            <!-- Copyright -->
            <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
                © 2021 Copyright:
                <span class="text-white" href="#">WatchOnline</span>
            </div>
            <!-- Copyright -->
        </footer>
    </div>


    <!-- Client-Server communication script -->
    <script src="/socket.io/socket.io.js"></script>
    <script type="module">

        var myRoomId = '<%=roomId%>';
        const socket = io.connect(`${'<%=URL%>'}`); // Our server.js portnumber
        let currentVideoId = "<%=videoId%>"

        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var lastTime = 0;
        var player;
        window.onYouTubeIframeAPIReady = function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '100%',
                width: '100%',
                videoId: "<%=videoId%>",
                playerVars: {
                    'playsinline': 1
                },
                events: {
                    'onReady': (event) => {
                        setTimeout(() => event.target.playVideo(), 100);
                        setInterval(() => {
                            if (player.getPlayerState() == 2) return;
                            let time = player.getCurrentTime();
                            lastTime = time;
                        }, 250)
                    },
                    'onStateChange': (event) => {
                        if (!isSeekedLately && !isStatusChangedLately) {
                            if (Math.abs(lastTime - player.getCurrentTime()) > 2) {
                                let time = player.getCurrentTime();
                                socket.emit('clientSeek', time);
                            }
                            else if (event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.BUFFERING) {
                                socket.emit('statusChanged', 1, myRoomId)
                            }
                            else if (event.data == YT.PlayerState.ENDED) {
                                socket.emit('videoEnded');
                            }
                            else {
                                socket.emit('statusChanged', 0, myRoomId);
                            }
                        }
                    }
                }
            });
        }

        let userId = undefined;

        // Security for changing local storage!
        window.addEventListener("storage", function () {
            localStorage.setItem("userId", userId);
        }, false);

        // Connection - Initting part
        socket.on('connected', (str, id) => {
            if (localStorage.getItem("userId")) {
                userId = localStorage.getItem("userId");
            } else {
                localStorage.setItem("userId", id);
                userId = id;
            }
            socket.emit("save", myRoomId, userId);
        });

        socket.on("disconnection", (params) => {
            chat_message("Admin", "User " + params[0] + " has disconnected.", new Date().toTimeString().slice(0, 8))
        });


        socket.on('getCurrent', (userIdToApply, id) => {
            socket.emit('roomEnterSeek', player.getCurrentTime(), player.getVideoUrl(), playlistData_client, userIdToApply, id, isLoop)
        })

        socket.on("newusermessage", (params) => {
            if (userId == params[0]) return
            chat_message("Admin", "User " + params[0] + " has connected the room.", new Date().toTimeString().slice(0, 8))
        })

        let playlistInitFlag = true;
        socket.on('init', async (params) => {
            if (userId != params[3]) {
                //chat_message("Admin", params[3] + " has joined the room.", new Date().toTimeString().slice(0, 8))
                return // Not best practice there should be a way just to send a particular socket.
            }
            if (!playlistInitFlag) return
            isLoop = params[4];
            playlistInitFlag = false;
            let time = params[0];
            let vid = params[1];
            let playlist = params[2];
            let link = vid.substring(vid.lastIndexOf("=") + 1, vid.length)

            setTimeout(() => {
                player.loadVideoById(link, time);
                window.history.pushState("", "", link);
            }, 2500)

            for (let i = 0; i < playlist.length; i++) {
                let videoName = await getVideoName(playlist[i]);
                addTr(playlistTbody, (playlistData_client.length + 1), videoName)
                playlistData_client.push(playlist[i]);
            }

            if (playlistData_client.length > 0)
                skipVideoButton.style.display = "block";

        })

        // Chat Part

        function setCaretPosition(elemId, caretPos) {
            var el = document.getElementById(elemId);

            el.value = el.value;
            // ^ this is used to not only get "focus", but
            // to make sure we don't have it everything -selected-
            // (it causes an issue in chrome, and having it doesn't hurt any other browser)

            if (el !== null) {

                if (el.createTextRange) {
                    var range = el.createTextRange();
                    range.move('character', caretPos);
                    range.select();
                    return true;
                }

                else {
                    // (el.selectionStart === 0 added for Firefox bug)
                    if (el.selectionStart || el.selectionStart === 0) {
                        el.focus();
                        el.setSelectionRange(caretPos, caretPos);
                        return true;
                    }

                    else { // fail city, fortunately this never happens (as far as I've tested) :)
                        el.focus();
                        return false;
                    }
                }
            }
        }

        function scrollToBottom(id) {
            var div = document.getElementById(id);
            div.scrollTop = div.scrollHeight - div.clientHeight;
        }

        socket.on('newMessage', (msg) => {
            msg = JSON.parse(msg);
            if (msg.message.includes("@" + userId)) {
                msg.message = msg.message.replace(/>/g, '&gt;')
                    .replace(/</g, '&lt;')
                    .replace(/"/g, '&quot;')
                //.replace("@" + userId, '<span style="background-color:rgb(121, 196, 224)">' +  "@" + userId + "</span>")
            }
            msg.time = new Date().toTimeString().slice(0, 8);
            chat_message(msg.sender, msg.message, msg.time);
            scrollToBottom("chat")
            if (userId != msg.sender)
                new Audio(`${'<%=URL%>'}` + "/notificationsound.mp3").play();
        });

        let chatSubmit = document.getElementById('chatsubmit');
        let chatSubmitFunc = () => {
            let messageTxt = document.getElementById('message').value;
            if (messageTxt.length == 0) return;
            socket.emit("message", userId, messageTxt, new Date().toTimeString().slice(0, 8))
            messageTxt = document.getElementById('message').value = "";
        };
        chatSubmit.onclick = () => {
            chatSubmitFunc();
        }

        let indx_chatpeople = 0;
        let flag_chatpeople = false;

        document.getElementById('message').onkeyup = (keyboardEvent) => {
            keyboardEvent.preventDefault();
            if (keyboardEvent.keyCode == 13) {
                if (flag_chatpeople) {
                    let sbstr = document.getElementById('message').value.substring(document.getElementById('message').value.lastIndexOf("@"), document.getElementById('message').value.length);
                    console.log(sbstr);
                    let change = document.getElementsByClassName("selectedchat")[0].innerHTML;
                    document.getElementById("message").value = document.getElementById("message").value.replace(sbstr, "@" + change + " ")
                    flag_chatpeople = false;
                    peoplelistchat.style.display = "none";
                    peoplelistchat.innerHTML = "";
                    return;
                }
                flag_chatpeople = false;
                peoplelistchat.style.display = "none";
                peoplelistchat.innerHTML = "";
                let messageTxt = document.getElementById('message')
                if (document.activeElement == messageTxt) {
                    chatSubmitFunc();
                }
            }
            if (keyboardEvent.keyCode == 38) { // Up button
                //let carFunc = ()=>
                setCaretPosition("message", document.getElementById("message").value.length)
                //setTimeout(carFunc, 100);
                keyboardEvent.preventDefault();
                if (indx_chatpeople == 0) return;
                indx_chatpeople--;
                renderUserChat(filteredUsersOfRoom, false, true)
                adjustScrollOfPeopleListChat();
            }
            if (keyboardEvent.keyCode == 40) { // Down button
                //let carFunc2 = ()=>
                setCaretPosition("message", document.getElementById("message").value.length)
                //setTimeout(carFunc2, 100);
                if (indx_chatpeople == filteredUsersOfRoom.length - 1) return;
                indx_chatpeople++;
                renderUserChat(filteredUsersOfRoom, false, true)
                adjustScrollOfPeopleListChat();
            }
        };

        let adjustScrollOfPeopleListChat = () => {
            var rect2 = document.getElementById("peoplelistchat").getBoundingClientRect();
            var rect = document.getElementsByClassName("selectedchat")[0].getBoundingClientRect();
            console.log(rect2.top, rect2.right, rect2.bottom, rect2.left);
            console.log(rect.top, rect.right, rect.bottom, rect.left);
            console.log("------");
            // Scroll Down
            let elem = document.getElementById("peoplelistchat");
            if (rect.top > rect2.bottom - 30) {
                elem.scroll(0, elem.scrollTop + 30)
            }
            // Scroll up
            else if (rect.top < rect2.top + 30) {
                document.getElementById("peoplelistchat")
                elem.scroll(0, elem.scrollTop - 30)
            }
        }

        let setpeoplelistchatarea = () => {
            var rect = document.getElementById("message").getBoundingClientRect();
            document.getElementById("peoplelistchat").style.top = (rect.top - 150).toString() + "px";
            document.getElementById("peoplelistchat").style.left = (rect.left).toString() + "px";
            document.getElementById("peoplelistchat").style.bottom = (rect.left).toString() + "px";
            document.getElementById("peoplelistchat").style.right = (rect.right).toString() + "px";
        }

        window.addEventListener("resize", () => {
            setpeoplelistchatarea();
        }, false)

        document.getElementById("message").oninput = (inputEvent) => {
            if (inputEvent.data == "@") {

                setpeoplelistchatarea();

                socket.emit("getPeopleListforchat")
                flag_chatpeople = true;
                return;
            }
            else if (inputEvent.data == " ") {
                document.getElementById("peoplelistchat").scroll(0, 0)
                peoplelistchat.style.display = "none";
                peoplelistchat.innerHTML = "";
                flag_chatpeople = false;
                indx_chatpeople = 0;
            }
            else if (inputEvent.data == null) { // Backspace
                if (document.getElementById('message').value[document.getElementById('message').value.length - 1] == "@") {
                    peoplelistchat.style.display = "block";
                    flag_chatpeople = true;
                }
                if (!document.getElementById('message').value.includes("@")) {
                    document.getElementById("peoplelistchat").scroll(0, 0)
                    peoplelistchat.style.display = "none";
                    peoplelistchat.innerHTML = "";
                    flag_chatpeople = false;
                    indx_chatpeople = 0;
                }

            }
            if (flag_chatpeople) {
                let search = document.getElementById('message').value.substring(document.getElementById('message').value.lastIndexOf("@") + 1, document.getElementById('message').value.length)
                //if(search.length == 0)return;

                peoplelistchat.innerHTML = "";

                let j = 0;
                filteredUsersOfRoom = [];
                for (let i = 0; i < usersOfRoom.length; i++) {
                    if (usersOfRoom[i].toString().startsWith(search)) {
                        filteredUsersOfRoom[j++] = usersOfRoom[i].toString();
                    }
                }
                renderUserChat(filteredUsersOfRoom, true)
                console.log("worked");
            }
        }

        let asd = true;
        let renderUserChat = (people, isFilter, flag) => {
            let indx_usage = isFilter ? 0 : indx_chatpeople;
            people = people.filter(function (element) {
                return element !== undefined;
            });
            peoplelistchat.innerHTML = "";
            if (isFilter) indx_chatpeople = 0;
            for (let i = 0; i < people.length; i++) {
                if (!isFilter && !flag) usersOfRoom[i] = people[i].toString();
                if (i == indx_usage)
                    peoplelistchat.innerHTML += `<span class="selectedchat">${people[i]}</span>` + "<br>";
                else
                    peoplelistchat.innerHTML += people[i] + "<br>";
            }
            peoplelistchat.style.display = "block";
            if (asd) {
                for (let i = 0; i < people.length; i++) {
                    filteredUsersOfRoom[i] = usersOfRoom[i].toString();
                }
                asd = false;
            }
        };

        let usersOfRoom = [];
        let filteredUsersOfRoom = [];
        socket.on("listforchat", (people) => {
            asd = true;
            peoplelistchat.innerHTML = "";
            renderUserChat(people);
        })

        // Player - User Movement Part

        let isStatusChangedLately = false;
        socket.on("statusChange", (status) => {
            if (player) {
                if (status == 0) {
                    player.pauseVideo();
                }
                else if (status == 1) {
                    player.playVideo();
                }
                isStatusChangedLately = true;
            }
            setTimeout(() => {
                isStatusChangedLately = false;
            }, 150);

        });

        let isSeekedLately = false;
        socket.on("seek", (time) => {
            player.seekTo(time);
            isSeekedLately = true;
            setTimeout(() => {
                isSeekedLately = false;
            }, 150);
        });

        socket.on("videoEnd", () => {
            playNextVideo();
        })



        let submit = document.getElementById("submit");
        submit.onclick = () => {
            let link = document.getElementById("link").value;
            link = link.substring(link.lastIndexOf("=") + 1, link.length)
            socket.emit('videoChange', link);
        }

        socket.on("newVideo", (data) => {
            let link = data[0];
            player.loadVideoById(link);
            window.history.pushState("", "", link);
            if (isLoop) {
                isLoop = false;
                chat_message('Admin', `Loop disabled.`, new Date().toTimeString().slice(0, 8))
                scrollToBottom("chat")
            }
        });


        function firstFunctionEver(peopleLi) {
            var element = document.querySelector("#peoplelist");
            if (peopleLi.style.opacity == 0) {
                //console.log("if");
                //element.style.visibility = 'visible';
                element.style.opacity = '1';
                peopleLi.style.backgroundColor = "#293009"
                if (showplaylist.style.display == "none")
                    element.style.margin = "0px 0px 0px 180px"
                else
                    element.style.margin = "0px 0px -135px 250px"
                element.style.height = "410px"
                element.style.borderRadius = "75px"
                element.style.zIndex = "121212121";
            }
            else {
                //console.log("else");
                //element.style.visibility = "hidden";
                element.style.opacity = '0';
                element.padding = '0';
                peopleLi.style.backgroundColor = "green"
                if (showplaylist.style.display == "none")
                    element.style.margin = "0px 0px -410px 180px "
                else
                    element.style.margin = "0px 0px -545px 250px "
                element.style.height = "0px"
                element.style.borderRadius = "-40px"
                element.style.zIndex = "-1"
                //setTimeout(()=>{element.style.zIndex = "-1"}, 2000)
            }
        }

        let peopleBtn = document.getElementById("people");
        peopleBtn.onclick = () => {
            socket.emit("getPeopleList");
        };

        socket.on("list", async (people) => {
            let peopleStr = "";
            for (let i = 0; i < people.length; i++)
                peopleStr += people[i] + "<br>";
            let peopleLi = document.getElementById('peoplelist');
            peopleLi.innerHTML = peopleStr;
            firstFunctionEver(peopleLi);
        })

        function asyncPeopleList(people) {
            for (let i = 0; i < people.length; i++) {
                roomPeople.push(people[i])
            }
            return roomPeople;
        }


        const playlistData_client = [];
        let playlistTbody = document.getElementById('playlist');
        let getVideoName = async (link) => {
            let ans = "";
            await fetch(`https://www.youtube.com/oembed?url=${link}&format=json`)
                .then(response => response.json())
                .then(data => ans = data.title);
            return ans;
        }
        let addTr = (elem, no, link) => {
            elem.innerHTML += `<tr>
                            <td>${no}</td>
                            <td>${link}</td>
                            
                        </tr>`;
        };
        let queueBtn = document.getElementById('submitqueue');
        queueBtn.onclick = async () => {
            let link = document.getElementById("link").value;
            //playlistData_client.push(link);
            let videoName = await getVideoName(link);
            //addTr(playlistTbody, "->", videoName)
            socket.emit('queue', link, videoName);
        };

        socket.on("queueReq", (params) => {
            let link = params[0];
            let videoName = params[1];
            addTr(playlistTbody, (playlistData_client.length + 1), videoName)
            playlistData_client.push(link);
            skipVideoButton.style.display = "block";
        })


        let skipVideoButton = document.getElementById('skipvideo');
        skipVideoButton.onclick = () => {
            if (playlistData_client.length == 0) return;
            socket.emit("skipVideo");
        };

        socket.on("playNextVideo", () => {
            if (isLoop) {
                isLoop = false;
                chat_message('Admin', `Loop disabled.`, new Date().toTimeString().slice(0, 8))
            }
            playNextVideo();
        });

        let playNextVideo = () => {
            if (isLoop) {
                let link = player.getVideoUrl();
                link = link.substring(link.lastIndexOf("=") + 1, link.length)
                player.loadVideoById(link);
            } else {
                let link = playlistData_client.shift();
                link = link.substring(link.lastIndexOf("=") + 1, link.length)
                window.history.pushState("", "", link);
                player.loadVideoById(link);
                // Rerendering could be done. Since when u remove child
                // the next videos number becomes 2 instead of 2
                playlistTbody.removeChild(playlistTbody.getElementsByTagName('tr')[0]);
                if (playlistData_client.length == 0)
                    skipVideoButton.style.display = "none";
            }
        }



        let showplaylist = document.getElementById("showplaylist");
        showplaylist.onmouseenter = () => {
            showplaylist.style.left = "0px";
        }
        showplaylist.onmouseleave = () => {
            showplaylist.style.left = "-10px";
        }
        let hideBtn = document.getElementById("playlisthide");
        let videoContainer = document.getElementById("videoContainer")
        let middlepart = document.getElementById("middlepart");
        let leftPart = document.getElementById("leftpart");
        let contRightSideOfMiddlePart = document.getElementsByClassName("cont rightside")[0];
        let chat = document.getElementById('chat');
        let topbuttons = document.getElementById('topbuttons');
        let oldStyle = [];
        hideBtn.onclick = () => {

            // Deep copying.
            oldStyle.push(JSON.parse(JSON.stringify(showplaylist.style)).display);
            oldStyle.push(JSON.parse(JSON.stringify(contRightSideOfMiddlePart.style)).width);
            oldStyle.push(JSON.parse(JSON.stringify(middlepart.style)).width);
            oldStyle.push(JSON.parse(JSON.stringify(leftPart.style)).display);
            oldStyle.push(JSON.parse(JSON.stringify(videoContainer.style)).height);
            oldStyle.push(JSON.parse(JSON.stringify(videoContainer.style)).width);
            oldStyle.push(JSON.parse(JSON.stringify(chat.style)).height);
            oldStyle.push(JSON.parse(JSON.stringify(chat.style)).width);

            document.querySelector("#peoplelist").style.margin = "0px 0px -135px 250px"

            showplaylist.style.display = "block";
            contRightSideOfMiddlePart.style.width = "1350px";
            middlepart.style.width = "1350px";
            leftPart.style.display = "none";
            videoContainer.style.height = "640px"
            videoContainer.style.width = "100%"
            chat.style.height = "600px";
            chat.style.width = "450px";
            chat.style.maxWidth = "450px";
            topbuttons.style.display = "none";

            setpeoplelistchatarea();

        }
        showplaylist.onclick = () => {
            document.querySelector("#peoplelist").style.margin = "0px 0px 0px 180px"
            showplaylist.style.display = "none";
            showplaylist.style.display = oldStyle.shift();
            contRightSideOfMiddlePart.style.width = oldStyle.shift();
            middlepart.style.width = oldStyle.shift();
            leftPart.style.display = oldStyle.shift();
            videoContainer.style.height = oldStyle.shift();
            videoContainer.style.width = oldStyle.shift();
            chat.style.height = oldStyle.shift();
            chat.style.width = oldStyle.shift();
            chat.style.maxWidth = "400px";
            topbuttons.style.display = "flex";

            setpeoplelistchatarea();

        };

        let isLoop = false;
        socket.on("loop", (params) => {
            if (!isLoop)
                chat_message('Admin', `Loop enabled by ${params[0]}`, new Date().toTimeString().slice(0, 8))
            else
                chat_message('Admin', `Loop disabled by ${params[0]}`, new Date().toTimeString().slice(0, 8))
            isLoop = !isLoop;
            scrollToBottom("chat")
        })




    </script>


</body>

</html>