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

Reviewed-on: 0x2620/aab21#27

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,42 +37,47 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
         if (continueTimecode) {
             video.currentTime = continueTimecode
         }
-        function enterFullscreen(event) {
+
-            video.removeEventListener('play', enterFullscreen);
+        function onFullscreenChange (event) {
-            if (video.webkitRequestFullscreen) {
+            if (document.fullscreenElement === null || document.webkitFullscreenElement === null) {
-                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) {
                 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
+            });
+        }        
     }
 })

app/templates/film.html

@@ -33,7 +33,17 @@ body {
 				
 		</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>
+					
+			<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>