zorn-js/src/functions/buttons.js

const video = document.querySelector('.plyx-player')
const videoContainer = document.querySelector('.video-container')

function AddControls() {
    var add_controls = `
    <div oncontextmenu="return false;" class="plyx-player-controls">
        <div class="row-2">
            <div class="video-progress">
                <progress id="progress-bar" value="0" min="0"></progress>
                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
                <div class="seek-tooltip" id="seek-tooltip">00:00</div>
            </div>
        </div>
        <div class="row-1">
            <div class="row-1-start">
                <button id="play-pause"><i class="fa-solid fa-play"></i></button>
                <button id="skip-back"><i class="fa-solid fa-arrow-rotate-left"></i></button>
                <button id="skip-forth"><i class="fa-solid fa-arrow-rotate-right"></i></button>
                <input class="volume" id="volume" value="1" type="range" max="1" min="0" step="0.01">
                <div class="volume-controls">
                <button data-title="Mute (m)" class="volume-button" id="volume-button"><i class="fa-solid fa-volume-high"></i></button>
                </div>
            </div>
            <div class="row-1-end">
                <div class="time">
                <time id="time-elapsed">00:00</time>
                <span> / </span>
                <time id="duration">00:00</time>
                </div>
                <button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
            </div>
        </div>
    </div>
    `
    video.insertAdjacentHTML("afterend", add_controls);
    video.setAttribute("oncontextmenu", "return false")
}

function Util() {
    const videoControls = document.querySelector('.plyx-player-controls')
    // Play/Plause
    const Button_PlayPause = document.querySelector('.plyx-player-controls #play-pause')

    Button_PlayPause.addEventListener('click', Toggle_PlayPause)
    video.addEventListener('click', Toggle_PlayPause)
    video.addEventListener('play', Update_PlayPauseButton)
    video.addEventListener('pause', Update_PlayPauseButton)

    function Toggle_PlayPause() {
        if (video.paused || video.ended) {
            video.play()
        }
        else {
            video.pause()
        }
    }

    function Update_PlayPauseButton() {    
        if (video.paused) {
            Button_PlayPause.setAttribute('data-title', 'Play (k)')
            Button_PlayPause.innerHTML = `<i class="fa-solid fa-play"></i>`
        } else {
            Button_PlayPause.setAttribute('data-title', 'Pause (k)')
            Button_PlayPause.innerHTML = `<i class="fa-solid fa-pause"></i>`
        }
    }

    // Fullscreen
    const Button_Fullscreen = document.getElementById('fullscreen');
    function Toggle_Fullscreen() {
        if (document.fullscreenElement) {document.exitFullscreen()} 
        else if (document.webkitFullscreenElement) {document.webkitExitFullscreen()}
        else if (videoContainer.webkitRequestFullscreen) {videoContainer.webkitRequestFullscreen()}
        else {videoContainer.requestFullscreen()}
    }

    Button_Fullscreen.onclick = Toggle_Fullscreen;
    function Update_FullscreenButton() {
        if (document.fullscreenElement) {
            Button_Fullscreen.setAttribute('data-title', 'Exit full screen (f)')
            Button_Fullscreen.innerHTML = `<i class="fa-solid fa-compress"></i>`
        } else {
            Button_Fullscreen.setAttribute('data-title', 'Full screen (f)')
            Button_Fullscreen.innerHTML = `<i class="fa-solid fa-expand"></i>`
        }
    }

    videoContainer.addEventListener('fullscreenchange', Update_FullscreenButton);

    // Skip Back or Forth
    const Button_SkipBack = document.querySelector('.plyx-player-controls #skip-back')
    const Button_SkipForth = document.querySelector('.plyx-player-controls #skip-forth')

    Button_SkipBack.addEventListener('click', Toggle_SkipBack)
    Button_SkipForth.addEventListener('click', Toggle_SkipForth)

    function Toggle_SkipBack() {Skip(-10)}
    function Toggle_SkipForth() {Skip(10)}

    function Skip(value) {
        video.currentTime += value;
    }

    // Volume (Also the slider)
    const Button_Volume = document.getElementById('volume-button')
    const volume = document.getElementById('volume')
    function Update_Volme() {
        if (video.muted) {
            video.muted = false
        }
        video.volume = volume.value
    }

    volume.addEventListener('input', Update_Volme)

    function Update_Volume_Icon() {
        Button_Volume.setAttribute('data-title', 'Mute (m)')

        if (video.muted || video.volume === 0) {
            Button_Volume.innerHTML = `<i class="fa-solid fa-volume-slash"></i>`
            Button_Volume.setAttribute('data-title', 'Unmute (m)')
        } else if (video.volume > 0 && video.volume <= 0.5) {
            Button_Volume.innerHTML = `<i class="fa-solid fa-volume-low"></i>`
        } else {
            Button_Volume.innerHTML = `<i class="fa-solid fa-volume-high"></i>`
        }
    }

    video.addEventListener('volumechange', Update_Volume_Icon)

    function Toggle_Mute() {
        video.muted = !video.muted;

        if (video.muted) {
            volume.setAttribute('data-volume', volume.value)
            volume.value = 0;
        } else {
            volume.value = volume.dataset.volume
        }
    }
    Button_Volume.addEventListener('click', Toggle_Mute)

    // Keyboard Shortcuts
    function keyboardShortcuts(event) {
        const { key } = event;
        switch(key) {
            case 'k':
            Toggle_PlayPause();
            if (video.paused) {
                Show_Controls();
            } else {
              setTimeout(() => {
                Hide_Controls();
              }, 2000);
            }
            break;
            case 'm':
            Toggle_Mute();
            break;
            case 'f':
            Toggle_Fullscreen();
            break;
            case 'j':
            Toggle_SkipBack();
            break;
            case 'l':
            Toggle_SkipForth();
            break;
        }
    }
    document.addEventListener('keyup', keyboardShortcuts);

    // Auto Hide Controls
    function Hide_Controls() {
        if (video.paused) {
            return
        }
        
        videoControls.classList.add('hide')
    }
    
    // Show_Controls displays the video controls
    function Show_Controls() {
        videoControls.classList.remove('hide')
    }
    video.addEventListener('mouseenter', Show_Controls)
    video.addEventListener('mouseleave', Hide_Controls)
    videoControls.addEventListener('mouseenter', Show_Controls)
    videoControls.addEventListener('mouseleave', Hide_Controls)

    var mouseTimer = null, cursorVisible = true

    function disappearCursor() {
        mouseTimer = null
        document.body.style.cursor = "none"
        cursorVisible = false
        Hide_Controls()
    }

    document.onmousemove = function() {
        if (mouseTimer) {
            window.clearTimeout(mouseTimer);
            Show_Controls();
        }
        if (!cursorVisible) {
            document.body.style.cursor = "default"
            cursorVisible = true
        }
        mouseTimer = window.setTimeout(disappearCursor, 1500)
    }
}


export {AddControls, Util}