/*
    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
    Copyright (C) 2023 metamuffin <metamuffin.org>
*/

globalThis.addEventListener("load", () => {
    for (const e of document.getElementsByTagName("video"))
        patch_video(e)
})

function patch_video(e) {
    // move the video to a div
    const d = document.createElement("div")
    const p = e.parentElement
    p.removeChild(e)
    d.appendChild(e)
    p.prepend(d)

    e.removeAttribute("controls")
    d.classList.add("js-player")

    const controls = document.createElement("div")
    controls.classList.add("controls")

    const pause_button = document.createElement("button")
    pause_button.textContent = "|>"

    const fullscreen_button = document.createElement("button")
    fullscreen_button.style.float = "right"
    fullscreen_button.textContent = "X"

    const pri = document.createElement("div")
    pri.classList.add("pri")
    const pri_current = document.createElement("div")
    pri_current.style.width = "0px"
    pri_current.classList.add("pri-current")
    pri.append(pri_current)

    controls.append(pause_button, pri, fullscreen_button)
    d.append(controls)


    e.onloadedmetadata = () => {

    }
    e.ondurationchange = () => {

    }
    e.ontimeupdate = () => {
        pri_current.style.width = (e.currentTime / e.duration * 100) + "%"
    }
    e.onplay = () => {
        pause_button.textContent = "..."
    }
    e.onwaiting = () => {
        pause_button.textContent = "..."
    }
    e.onplaying = () => {
        pause_button.textContent = "||"
    }
    e.onpause = () => {
        pause_button.textContent = "|>"
    }
    const toggle_playing = () => e.paused ? e.play() : e.pause()

    mouse_idle(e, 1000, idle => {
        controls.style.opacity = idle ? 0 : 1
        e.style.cursor = idle ? "none" : "default"
    })

    e.addEventListener("click", toggle_playing)
    pause_button.addEventListener("click", toggle_playing)
    fullscreen_button.addEventListener("click", () => {
        if (document.fullscreenElement) document.exitFullscreen()
        else document.documentElement.requestFullscreen()
    })
    document.body.addEventListener("keypress", k => {
        if (k.code == "Period") e.seekToNextFrame()
        if (k.code == "Space") toggle_playing()
    })
}

function mouse_idle(e, timeout, cb) {
    let ct;
    let idle = false
    e.onmouseleave = () => { clearTimeout(ct) }
    e.onmousemove = () => {
        clearTimeout(ct)
        if (idle) {
            idle = false
            cb(idle)
        }
        ct = setTimeout(() => {
            idle = true
            cb(idle)
        }, timeout)
    }
}