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;
        this.syncLock = true;
        
        //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-paragraph");
        this.showVideoIcon = document.querySelector("#chat-panel-show-video-icon");
        this.hideVideoIcon = document.querySelector("#media-panel-div-toggle-icon");
        this.syncIcon = document.querySelector("#media-panel-sync-icon");
        this.cinemaModeIcon = document.querySelector("#media-panel-cinema-mode-icon");
        this.flipYIcon = document.querySelector("#media-panel-flip-vertical-icon")
        this.flipXIcon = document.querySelector("#media-panel-flip-horizontal-icon")
        this.reloadIcon = document.querySelector("#media-panel-reload-icon");

        //Numbers
        this.syncTolerance = 0.4;
        this.syncDelta = 6;

        //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
        //Don't bind these, they want an argument that isn't an event :P
        this.showVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
        this.hideVideoIcon.addEventListener("click", ()=>{this.toggleVideo()});
        this.syncIcon.addEventListener("click", this.lockSync.bind(this));
        this.cinemaModeIcon.addEventListener("click", ()=>{this.toggleCinemaMode()});
        this.flipYIcon.addEventListener('click', this.flipY.bind(this));
        this.flipXIcon.addEventListener('click', this.flipX.bind(this));
        this.reloadIcon.addEventListener("click", this.reload.bind(this));
    }

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

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

        //Lock synchronization since everyone starts at 0, and update the UI
        this.lockSync();

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

    sync(data){
        if(this.mediaHandler != null){
            //Get timestamp
            const timestamp = data.timestamp;
            //Get difference between server and local timestamp
            const difference = Math.abs(timestamp - this.mediaHandler.getTimestamp());

            //Check if timestamp evenly devides into sync delta, effectively only checking for sync every X seconds
            //Check if the difference between timestamps is larger than the sync tolerance
            //Lastly, check to make sure we have sync lock
            if(timestamp % this.syncDelta == 0 && difference > this.syncTolerance && this.syncLock){
                //If we need to sync, then sync the video!
                this.mediaHandler.sync(timestamp);
            }

            //Collect last timestamp
            this.mediaHandler.lastTimestamp = timestamp;
        }
    }

    reload(){
        if(this.mediaHandler != null){
            this.mediaHandler.reload();
        }
    }

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

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

        //Re-lock sync since we're probably gonna start new media soon anywho, and we need to update the UI anywho
        this.lockSync();
    }

    lockSync(){
        //Enable syncing
        this.syncLock = true;

        if(this.mediaHandler != null && this.mediaHandler.type != null){
            //Light up the sync icon to show that we're actively synchronized
            this.syncIcon.classList.add('positive');

            //Sync to last timestamp
            this.mediaHandler.sync();

            //Play
            this.mediaHandler.play();
        }else{
            //Unlight the sync icon since there is nothing to sync
            this.syncIcon.classList.remove('positive');
        }
    }

    unlockSync(){
        //Unlight the sync icon since we're no longer actively synced
        this.syncIcon.classList.remove('positive');

        //Disable syncing
        this.syncLock = false;
    }

    flipX(){
        //I'm lazy
        const transform = this.videoContainer.style.transform;

        //If we we're specifically set to un-mirrored
        if(transform.match("scaleX(1)")){
            //mirror it
            this.videoContainer.style.transfrom = transform.replace('scaleX(1)', 'scaleX(-1)');
        //If we're currently mirrored
        }else if(transform.match("scaleX(-1)")){
            //Un-mirror
            this.videoContainer.style.transfrom = transform.replace('scaleX(-1)', 'scaleX(1)');
        //Otherwise, if it's untouched
        }else{
            //Mirror it
            this.videoContainer.style.transform += 'scaleX(-1)';
        }
    }

    flipY(){
        //I'm lazy
        const transform = this.videoContainer.style.transform;

        //If we we're specifically set to un-mirrored
        if(transform.match("scaleY(1)")){
            //mirror it
            this.videoContainer.style.transfrom = transform.replace('scaleY(1)', 'scaleY(-1)');
        //If we're currently mirrored
        }else if(transform.match("scaleY(-1)")){
            //Un-mirror
            this.videoContainer.style.transfrom = transform.replace('scaleY(-1)', 'scaleY(1)');
        //Otherwise, if it's untouched
        }else{
            //Mirror it
            this.videoContainer.style.transform += 'scaleY(-1)';
        }
    }

    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.flexBasis = "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();
        }
    }
}