0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request 'slightly weird things to make play button work in safari' (#27) from debug-safari into main

Browse source 
Reviewed-on: 0x2620/aab21#27
This commit is contained in:
sanj 2021-10-27 08:56:38 +00:00
commit 2521c1c8a9
2 changed files with 43 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/static/js/film.js
View file

@ -21,6 +21,11 @@ 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')
@ -32,42 +37,47 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
if (continueTimecode) {
video.currentTime = continueTimecode
}
function enterFullscreen(event) {
video.removeEventListener('play', enterFullscreen);
if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else {
video.requestFullscreen().catch(err => {
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
video.remove()
video = null
});
}
setTimeout(() => {
video.style.display = 'block'
}, 150)
}
video.addEventListener('play', enterFullscreen);
video.addEventListener('fullscreenchange', event => {
if (document.fullscreenElement === null) {
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();
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()
} else {
video.requestFullscreen().catch(err => {
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
video.remove()
video = null
});
}
}
})

14
app/templates/film.html
View file

@ -32,8 +32,18 @@ body {
</div>
</div>
<div class="video-block">
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" poster="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" autoplay loop muted playsinline></video>
<div class="video-block">
<video
id="timeline-video"
src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4"
poster="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg"
autoplay
loop
muted
playsinline>
</video>
</div>
<div class="summary-block">
<p>{{ film.data.summary|safe }}</p>