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/player.js
+++ b/www/js/channel/player.js
@ -0,0 +1,97 @@
+/*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 player{
+    constructor (client){
+        //client obj
+        this.client = client;
+
+        //booleans
+        this.onUI = false;
+        
+        //timers
+        this.uiTimer = setTimeout(this.toggleUI.bind(this), 1500, false);
+
+        //elements
+        this.playerDiv = document.querySelector("#media-panel-div");
+        this.navBar = document.querySelector("#navbar");
+        this.video = document.querySelector("#media-panel-video");
+        this.uiBar = document.querySelector("#media-panel-head-div");
+        this.showVideoIcon = document.querySelector("#chat-panel-show-video-icon");
+        this.hideVideoIcon = document.querySelector("#media-panel-div-toggle-icon");
+        this.cinemaModeIcon = document.querySelector("#media-panel-cinema-mode-icon");
+
+        //run setup functions
+        this.setupInput();
+    }
+
+    setupInput(){
+        //UIBar Movement Detection
+        this.playerDiv.addEventListener("mousemove", this.popUI.bind(this));
+        this.uiBar.addEventListener("mouseenter", ()=>{this.setOnUI(true)});
+        this.uiBar.addEventListener("mouseleave", ()=>{this.setOnUI(false)});
+
+        //UIBar/header icons
+        this.showVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
+        this.hideVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
+        this.cinemaModeIcon.addEventListener("click", ()=>{this.toggleCinemaMode()});
+    }
+
+    popUI(event){
+        this.toggleUI(true);
+        clearTimeout(this.uiTimer);
+        if(!this.onUI){
+            this.uiTimer = setTimeout(this.toggleUI.bind(this), 1500, false);
+        }
+    }
+
+    toggleUI(show = this.uiBar.style.display == "none"){
+        this.uiBar.style.display = show ? "flex" : "none";
+    }
+
+    toggleVideo(show = this.playerDiv.style.display == "none"){
+        if(show){
+            this.playerDiv.style.display = "flex";
+            this.showVideoIcon.style.display = "none";
+            this.client.chatBox.hideChatIcon.style.display = "flex";
+            //Lock the chat to aspect ratio of the video, to make sure the chat width isn't breaking shit
+            this.client.chatBox.lockAspect();
+        }else{
+            this.playerDiv.style.display = "none";
+            this.showVideoIcon.style.display = "flex";
+            this.client.chatBox.hideChatIcon.style.display = "none";
+            //Need to clear the width from the split, or else it doesn't display properly
+            this.client.chatBox.chatPanel.style.width = "100%";
+        }
+    }
+
+    toggleCinemaMode(cinema = this.navBar.style.display == "none"){
+        if(cinema){
+            this.navBar.style.display = "flex";
+        }else{
+            this.navBar.style.display = "none";
+        }
+    }
+
+    setOnUI(onUI){
+        this.onUI = onUI;
+        this.popUI();
+    }
+
+    getRatio(){
+        return this.video.videoWidth / this.video.videoHeight;
+    }
+}