add video fallback

app/static/js/film.js

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

app/templates/film.html

@@ -34,7 +34,15 @@ body {
 		</div>	
 		<div class="video-block">	
 			<img src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" class="video-fallback-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>
+			<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>