Initial commit.

www/js/channel/chat.js

@@ -0,0 +1,149 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024  Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+
+class chatBox{
+    constructor(client){
+        //Client Object
+        this.client = client
+
+        //Booleans
+        this.aspectLock = true;
+
+        //clickDragger object
+        this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-drag-handle", "#chat-panel-div", "#chat-panel-user-count");
+
+        //Element Nodes
+        this.chatPanel = document.querySelector("#chat-panel-div");
+        this.chatBuffer = document.querySelector("#chat-panel-buffer-div");
+        this.chatPrompt = document.querySelector("#chat-panel-prompt");
+        this.sendButton = document.querySelector("#chat-panel-send-button");
+        this.highLevel = document.querySelector("#chat-panel-high-level-select");
+        //Seems weird to stick this in here, but the split is dictated by chat width :P
+        this.aspectLockIcon = document.querySelector("#media-panel-aspect-lock-icon");
+        this.hideChatIcon = document.querySelector("#chat-panel-div-hide");
+        this.showChatIcon = document.querySelector("#media-panel-show-chat-icon");
+
+        //Setup functions
+        this.setupInput();
+        this.defineListeners();
+        this.sizeToAspect();
+    }
+
+    setupInput(){
+        //Chat bar
+        this.chatPrompt.addEventListener("keydown", this.send.bind(this));
+        this.sendButton.addEventListener("click", this.send.bind(this));
+
+        //Header icons
+        this.aspectLockIcon.addEventListener("click", this.lockAspect.bind(this));
+        this.showChatIcon.addEventListener("click", ()=>{this.toggleUI()});
+        this.hideChatIcon.addEventListener("click", ()=>{this.toggleUI()});
+
+        //Clickdragger/Resize
+        this.clickDragger.handle.addEventListener("mousedown", this.unlockAspect.bind(this));
+        window.addEventListener("resize", this.resizeAspect.bind(this));
+    }
+
+    defineListeners(){
+        this.client.socket.on("chat-message", (data) => {
+            this.displayChat(data);
+        });
+    }
+
+    lockAspect(event){
+        //prevent the user from breaking shit :P
+        if(this.chatPanel.style.display != "none"){
+            this.aspectLock = true;
+            this.aspectLockIcon.style.display = "none";
+            this.sizeToAspect();
+        }
+    }
+
+    unlockAspect(event){
+        this.aspectLock = false;
+        this.aspectLockIcon.style.display = "inline";
+    }
+
+    resizeAspect(event){
+        if(this.aspectLock){
+            this.sizeToAspect();
+        }
+    }
+
+    sizeToAspect(){
+        if(this.chatPanel.style.display != "none"){
+            var targetVidWidth = this.client.player.getRatio() * this.chatPanel.getBoundingClientRect().height;
+
+            this.chatPanel.style.width = `${(document.body.getBoundingClientRect().width - targetVidWidth)}px`;
+
+            //Fix busted layout
+            var pageBreak = document.body.scrollWidth - document.body.getBoundingClientRect().width;
+            this.chatPanel.style.width = `${this.chatPanel.getBoundingClientRect().width + pageBreak}px`;
+        }
+    } 
+
+    toggleUI(show = this.chatPanel.style.display == "none"){
+        if(show){
+            this.chatPanel.style.display = "flex";
+            this.showChatIcon.style.display = "none";
+            this.client.player.hideVideoIcon.style.display = "flex";
+        }else{
+            this.chatPanel.style.display = "none";
+            this.showChatIcon.style.display = "flex";
+            this.client.player.hideVideoIcon.style.display = "none";
+        }
+    }
+
+    displayChat(chat){
+        //Create chat-entry span
+        var chatEntry = document.createElement('span');
+        chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${chat.user}`);
+
+        //Create high-level label
+        var highLevel = document.createElement('p');
+        highLevel.classList.add("chat-panel-buffer","chat-entry-high-level");
+        highLevel.innerHTML = `${chat.high}`;
+        chatEntry.appendChild(highLevel);
+
+        //Create username label
+        var userLabel = document.createElement('p');
+        userLabel.classList.add("chat-panel-buffer","chat-entry-username");
+
+        //Create color span
+        var colorSpan = document.createElement('span');
+        colorSpan.classList.add(this.client.userList.colorMap.get(chat.user));
+        colorSpan.innerHTML = `${chat.user}`;
+        userLabel.innerHTML = `${colorSpan.outerHTML}: `;
+
+        chatEntry.appendChild(userLabel);
+
+        //Create chat body
+        var chatBody = document.createElement('p');
+        chatBody.classList.add("chat-panel-buffer","chat-entry-body");
+        chatBody.innerHTML = chat.msg;
+        chatEntry.appendChild(chatBody);
+
+        this.chatBuffer.appendChild(chatEntry);
+    }
+
+    async send(event){
+        if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
+            this.client.socket.emit("chat-message",{msg: this.chatPrompt.value, high: this.highLevel.value});
+            this.chatPrompt.value = "";
+        }
+    }
+
+}