From abc15787387cdf09022da41e641eb5e623f2c614 Mon Sep 17 00:00:00 2001
From: Jetske <to_jetske@hotmail.com>
Date: Thu, 21 Nov 2024 13:54:47 +0100
Subject: [PATCH 1/2] Fullscreen button added to gloss detail #1369

---
 .../templates/dictionary/gloss_detail.html    | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/signbank/dictionary/templates/dictionary/gloss_detail.html b/signbank/dictionary/templates/dictionary/gloss_detail.html
index 9d6264c45..56d635b9f 100755
--- a/signbank/dictionary/templates/dictionary/gloss_detail.html
+++ b/signbank/dictionary/templates/dictionary/gloss_detail.html
@@ -230,6 +230,64 @@
             restart_video(right);
         }
 
+        function openFullscreen() {
+            // Get the videos with IDs videoplayer_[direction]
+            const videoIds = ['videoplayer_left', 'videoplayer_middle', 'videoplayer_right']; 
+            let activeVideo = null;
+
+            // Loop through the video IDs and check which one is active
+            videoIds.forEach(id => {
+                const video = document.getElementById(id);
+                if (video && window.getComputedStyle(video).display !== 'none') { 
+                    console.log('Found active video:', video);
+                    activeVideo = video;
+                }
+            });
+
+            if (activeVideo) {
+
+                // turn on controls in fullscreen
+                activeVideo.controls = true;
+                // activate fullscreen mode
+                if (activeVideo.requestFullscreen) {
+                    activeVideo.requestFullscreen();
+                } else if (activeVideo.mozRequestFullScreen) { // Firefox
+                    activeVideo.mozRequestFullScreen();
+                } else if (activeVideo.webkitRequestFullscreen) { // Chrome, Safari, and Opera
+                    activeVideo.webkitRequestFullscreen();
+                } else if (activeVideo.msRequestFullscreen) { // IE/Edge
+                    activeVideo.msRequestFullscreen();
+                }
+            } 
+            // on exit fullscreen mode, reset each video
+            document.addEventListener('fullscreenchange', resetVideos);
+            document.addEventListener('webkitfullscreenchange', resetVideos); // For Safari
+            document.addEventListener('mozfullscreenchange', resetVideos); // For Firefox
+            document.addEventListener('MSFullscreenChange', resetVideos); // For IE/Edge
+        }
+
+        function resetVideos() {
+            if (!document.fullscreenElement && !document.webkitFullscreenElement && 
+                !document.mozFullScreenElement && !document.msFullscreenElement) {
+                
+                // Get the videos with IDs videoplayer_[direction]
+                const videoIds = ['videoplayer_middle', 'videoplayer_left', 'videoplayer_right'];
+                videoIds.forEach(id => {
+                    const video = document.getElementById(id);
+                    if (video) {
+                        video.controls = false; 
+                        video.currentTime = 0; 
+                    }
+                });
+
+                // Remove fullscreen event listeners when exiting fullscreen
+                document.removeEventListener('fullscreenchange', resetVideos);
+                document.removeEventListener('webkitfullscreenchange', resetVideos);
+                document.removeEventListener('mozfullscreenchange', resetVideos);
+                document.removeEventListener('MSFullscreenChange', resetVideos);
+            }
+        }
+
         // This script gets minimal pairs data and displays it as table rows
         $(document).ready(function() {
             lookup = "#header_mp_rows";
@@ -811,6 +869,8 @@ <h4>{% trans "Sign" %}: {{annotation}}</h4>
                 style="font-size:16px;background-color:transparent;"><span class="glyphicon glyphicon-play"></span></button>
         <button class="btn" id="pause_perspective" onclick="pause_perspective();"
                 style="font-size:16px;background-color:transparent;"><span class="glyphicon glyphicon-pause"></span></button>
+        <button class="btn" id="fullscreen_perspective" onclick="openFullscreen();"
+                style="font-size:16px;background-color:transparent;"><span class="glyphicon glyphicon-fullscreen"></span></button>
         </div>
         <br>
     {% else %}

From 91d2ac99b2da04572e96d70ba88c20681506ee32 Mon Sep 17 00:00:00 2001
From: Jetske <to_jetske@hotmail.com>
Date: Thu, 21 Nov 2024 14:00:11 +0100
Subject: [PATCH 2/2] Remove console log #1369

---
 signbank/dictionary/templates/dictionary/gloss_detail.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/signbank/dictionary/templates/dictionary/gloss_detail.html b/signbank/dictionary/templates/dictionary/gloss_detail.html
index 56d635b9f..73744bc8c 100755
--- a/signbank/dictionary/templates/dictionary/gloss_detail.html
+++ b/signbank/dictionary/templates/dictionary/gloss_detail.html
@@ -239,7 +239,6 @@
             videoIds.forEach(id => {
                 const video = document.getElementById(id);
                 if (video && window.getComputedStyle(video).display !== 'none') { 
-                    console.log('Found active video:', video);
                     activeVideo = video;
                 }
             });