From 410494d1ae98f807ae05ab1f01861d5358342af2 Mon Sep 17 00:00:00 2001
From: Sanjay B <sanjaybhangar@gmail.com>
Date: Tue, 26 Oct 2021 18:34:08 +0530
Subject: [PATCH] slightly weird things to make play button work in safari

---
 app/static/js/film.js   | 54 ++++++++++++++++++++++++++---------------
 app/templates/film.html | 14 +++++++++--
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/app/static/js/film.js b/app/static/js/film.js
index 027c175..cf4415e 100644
--- a/app/static/js/film.js
+++ b/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 a laptop)
+    document.getElementById('timeline-video').style.display = 'none'
     if (!video) {
         video = document.createElement('video')
         video.classList.add('player')
@@ -32,32 +37,29 @@ 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 enterFullscreen(event) {
+        //     console.log('enter fullscreen called')
+        //     video.removeEventListener('play', enterFullscreen)
+
+        //     // setTimeout(() => {
+        //     //     video.style.display = 'block'
+        //     // }, 150)
+        // }
+        // video.addEventListener('play', enterFullscreen);
+        
+        function onFullscreenChange (event) {
+            if (document.fullscreenElement === null || document.webkitFullscreenElement === null) {
                 continueTimecode = video.currentTime
                 video.remove()
-                if (document.fullscreenElement) {
+                document.getElementById('timeline-video').style.display = 'block'
+                if (document.fullscreenElement || document.webkitFullscreenElement) {
                     document.exitFullscreen();
                 }
                 video = null
             }
-        });
+        }
+        video.addEventListener('webkitfullscreenchange', onFullscreenChange)
+        video.addEventListener('fullscreenchange', onFullscreenChange)
         video.addEventListener('pause', event => {
         })
         video.addEventListener('ended', event => {
@@ -69,5 +71,17 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
             video = null
         });
         video.play()
+        video.style.display = 'block'
+        if (video.webkitRequestFullscreen) {
+            console.log('webkitRequestFullscreen exists')
+            video.webkitRequestFullscreen()
+        } else {
+            video.requestFullscreen().catch(err => {
+                console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
+                video.remove()
+                video = null
+            });
+        }
+        
     }
 })
diff --git a/app/templates/film.html b/app/templates/film.html
index 2896ab5..315e5cf 100755
--- a/app/templates/film.html
+++ b/app/templates/film.html
@@ -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>