Initial commit.

2024-11-15 17:44:03 -05:00 · 2024-11-15 17:44:03 -05:00 · f0c91b4e55
commit f0c91b4e55
78 changed files with 5054 additions and 0 deletions
--- a/www/js/channel/userlist.js
+++ b/www/js/channel/userlist.js
@ -0,0 +1,107 @@
+/*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 userList{
+    constructor(client){
+        //Client object
+        this.client = client
+
+        //Click Dragger Object
+        this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-users-drag-handle", "#chat-panel-users-div");
+        
+        //Strings
+        this.userColors = [
+            "userlist-color0",
+            "userlist-color1",
+            "userlist-color2",
+            "userlist-color3", 
+            "userlist-color4",
+            "userlist-color5",
+            "userlist-color6"];
+        
+        //Maps
+        this.colorMap = new Map();
+
+        //Element Nodes
+        this.userDiv = document.querySelector("#chat-panel-users-div");
+        this.userList = document.querySelector("#chat-panel-users-list-div");
+        this.userCount = document.querySelector("#chat-panel-user-count");
+        this.toggleIcon = document.querySelector("#chat-panel-users-toggle");
+
+        //Call setup functions
+        this.setupInput();
+        this.defineListeners();
+    }
+
+    //Setup functions
+    setupInput(){
+        this.toggleIcon.addEventListener("click", ()=>{this.toggleUI()});
+        this.userCount.addEventListener("click", ()=>{this.toggleUI()});
+    }
+
+    defineListeners(){
+        this.client.socket.on('user-list', (data) => {
+            this.updateList(data);
+        });
+    }
+
+    updateList(list){
+        //Clear list and set user count
+        this.userCount.textContent = list.length == 1 ? '1 User' : `${list.length} Users`;
+        this.userList.innerHTML = null;
+
+        //create a new map
+        var newMap = new Map();
+
+        //for each user
+        list.forEach((user) => {
+            //randomly pick a color
+            var color = this.userColors[Math.floor(Math.random()*this.userColors.length)]
+
+            //if this user was in the previous colormap
+            if(this.colorMap.get(user) != null){
+                //Override with previous color
+                color = this.colorMap.get(user);
+            }
+
+            newMap.set(user, color);
+            this.renderUser(user, color);
+        });
+
+        this.colorMap = newMap;
+    }
+
+    renderUser(user, color){
+        var userEntry = document.createElement('p');
+
+        userEntry.innerText = user;
+        userEntry.id = `user-entry-${user}`;
+        userEntry.classList.add("chat-panel-users","user-entry",color);
+
+        this.userList.appendChild(userEntry);
+    }
+
+    toggleUI(show = this.userDiv.style.display == "none"){
+        if(show){
+            this.userDiv.style.display = "flex";
+            this.toggleIcon.classList.replace("bi-caret-left-fill","bi-caret-down-fill");
+        }else{
+            this.userDiv.style.display = "none";
+            this.toggleIcon.classList.replace("bi-caret-down-fill","bi-caret-left-fill");
+        }
+    }
+
+}