97 lines
3.5 KiB
JavaScript
97 lines
3.5 KiB
JavaScript
/*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.checkVisibility()){
|
|
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.checkVisibility()){
|
|
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;
|
|
}
|
|
} |