class VideoPlayer {
    constructor( video ) {
        this.fullscreenStatus = false;
        this.video = document.getElementById("video");
        this.playerContainer = document.getElementById("playerContainer");
        this.pausePlayBtn = document.getElementById("pauseplay");
        this.volBar = document.getElementById("volBar");
        this.volIco = document.getElementById('volIco')
        this.fullscreenBtn = document.getElementById('fullscreen');
        this.elapsed = document.getElementById('durationElapsed');
        this.total = document.getElementById('durationTotal');
        this.trackBar = document.getElementById("trackBar");
    }
    init() {
        this.pausePlayBtn.innerHTML = '\u23F5\uFE0E';
        this.fullscreenBtn.innerHTML = '\u26F6\uFE0E'
        this.volIco.innerHTML = '\u266A\uFE0E'
        this.total.innerHTML =
            Math.floor(this.video.duration % 3600 / 60).toString().padStart(2,'0') + ":" +
            Math.floor(this.video.duration % 60).toString().padStart(2,'0');
        this.elapsed.innerHTML = "0:00";
        this.pausePlayBtn.addEventListener('click', ( event ) => player.pausePlay( event.target.innerHTML ) );
        this.volBar.addEventListener( "change", ( event )=> player.changeVol( event.currentTarget.value ) );
        this.fullscreenBtn.addEventListener( 'click', () => player.fullscreen( player.playerContainer ) );
    }
    updateTrackbar() {
        this.trackBar.style.width = parseInt(( this.video.currentTime / this.video.duration ) * 100 ) + "%";
        this.elapsed.innerHTML =
            Math.floor(this.video.currentTime % 3600 / 60).toString().padStart(2,'0') + ":" +
            Math.floor(this.video.currentTime % 60).toString().padStart(2,'0');
    }
    pausePlay( value ) {
        switch( value ) {
            // Play Button
            case '\u23F5\uFE0E':
                this.play();
                break;
            // Pause Button
            case '\u23F8\uFE0E':
                this.pause()
                break;
        }
    };
    pause() {
        this.video.pause();
        this.pausePlayBtn.innerHTML = '\u23F5\uFE0E';
        this.intervalID = 0;
    };
    play() {
        this.video.play();
        this.pausePlayBtn.innerHTML = '\u23F8\uFE0E';
        this.intervalID = window.setInterval(() => this.updateTrackbar(), 500)
    };
    changeVol( newVolume ) {
        this.video.volume = newVolume / 100;
    }
    fullscreen( element ) {
        if( this.fullscreenStatus === false ) {
            element.requestFullscreen({navigationUI:'show'}).catch((e) => {
                alert(`Could not enter fullscreen: ${e.message} (${e.name})`);
            });
            this.fullscreenStatus = true;
        }
        else {
            document.exitFullscreen().catch((e) => {
                alert(`Could not exit fullscreen: ${e.message} (${e.name})`);
            });
            this.fullscreenStatus = false;
        }
    }
}

let player = new VideoPlayer();
player.init();