canopy/www/js/channel/player.js

/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024-2025 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.videoContainer = document.querySelector("#media-panel-video-container")
        this.navBar = document.querySelector("#navbar");
        this.uiBar = document.querySelector("#media-panel-head-div");
        this.title = document.querySelector("#media-panel-title-span");
        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();
        this.defineListeners();
    }

    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()});
    }

    defineListeners(){
        this.client.socket.on("play", this.play.bind(this));
        this.client.socket.on("sync", this.sync.bind(this));
        this.client.socket.on("end", this.end.bind(this));
    }

    play(data){
        //If we have an active media handler
        if(this.mediaHandler != null){
            //End the media handler
            this.mediaHandler.end();
        }

        //Ignore null media
        if(data.media == null){
            //Set null handler
            this.mediaHandler = new nullHandler(client, this);
        //Otherwise
        }else{
            //If we have a raw-file compatible source
            if(data.media.type == 'ia' || data.media.type == 'raw'){
                //Create a new raw file handler for it
                this.mediaHandler = new rawFileHandler(client, this, data.media);
                //Sync to time stamp
                this.mediaHandler.sync(data.timestamp);
            }else{
                this.mediaHandler = new nullHandler(client, this);
            }
        }

        //Re-size to aspect since video may now be a different size
        this.client.chatBox.resizeAspect();
    }

    end(){
        //Call the media handler finisher
        this.mediaHandler.end();

        //Replace it with a null handler
        this.mediaHandler = new nullHandler(client, this);
    }

    sync(data){
        this.mediaHandler.sync(data.timestamp);
    }

    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";
        }

        //Resize the video if we're aspect locked
        this.client.chatBox.resizeAspect();
    }

    setOnUI(onUI){
        this.onUI = onUI;
        this.popUI();
    }

    //This way other classes don't need to worry about media handler
    getRatio(){
        //If we have no media handler
        if(this.mediaHandler == null){
            //Return a 4/3 aspect to get a decent chat size
            return 4/3;
        }else{
            return this.mediaHandler.getRatio();
        }
    }
}