njpma/app/static/js/film.js

var videoExtension
var continueTimecode

function setVideoSrc(video, src) {
    var ext
    if (!videoExtension) {
        [
            ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
            ['video/webm; codecs="vp8, vorbis"', '.webm'],
        ].forEach(opt => {
            if (videoExtension) { return }
            if (video.canPlayType(opt[0]).replace('no', '')) {
                videoExtension = opt[1]
            }
        })
    }
    video.src = src.replace('.webm', videoExtension)
}
var video

document.querySelector('a#play-fullscreen').addEventListener('click', event => {
    event.preventDefault()
    event.stopPropagation()
    
    // For some unknown reason, we need to set the timeline-video to display:none
    // when playing the film in fullscreen, otherwise the fullscreen video
    // shows a black screen on Safari (15.0.2 on an m1 laptop)
    document.getElementById('timeline-video').style.display = 'none'
    if (!video) {
        video = document.createElement('video')
        video.classList.add('player')
        video.classList.add('fullscreen')
        //setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
        video.src = `${film.prefix}/stream/${film.id}.mp4`
        video.controls = true
        video.controlsList = 'nodownload'
        document.querySelector('main').appendChild(video)
        video.style.display = 'none'
        if (continueTimecode) {
            video.currentTime = continueTimecode
        }

        function onFullscreenChange (event) {
            if (document.fullscreenElement === null || document.webkitFullscreenElement === null) {
                continueTimecode = video.currentTime
                video.remove()
                document.getElementById('timeline-video').style.display = 'block'
                if (document.fullscreenElement) {
                    document.exitFullscreen()
                }
                if (document.webkitFullscreenElement) {
                    document.webkitExitFullscreen()
                }
                video = null
            }
        }
        video.addEventListener('webkitfullscreenchange', onFullscreenChange)
        video.addEventListener('fullscreenchange', onFullscreenChange)
        video.addEventListener('pause', event => {
        })
        video.addEventListener('ended', event => {
            continueTimecode = 0
            video.remove()
            document.getElementById('timeline-video').style.display = 'block'
            if (document.webkitFullscreenElement) {
                document.webkitExitFullscreen()
            }
            if (document.fullscreenElement) {
                document.exitFullscreen();
            }
            video = null
        })
        video.play()
        video.style.display = 'block'
        if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen({navigationUI: 'hide'})
        } else {
            video.requestFullscreen({navigationUI: 'hide'}).catch(err => {
                console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
                video.remove()
                video = null
            });
        }
    }
})