From 0a4ee4cc51d065ae010c136b5e7909fa24cfd2db Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Fri, 30 May 2025 15:32:57 +1000
Subject: [PATCH] Add fullscreen button

---
 .../links/mini_apps/image_gallery.html        | 100 +++++++++++++++++-
 1 file changed, 98 insertions(+), 2 deletions(-)

diff --git a/links/templates/links/mini_apps/image_gallery.html b/links/templates/links/mini_apps/image_gallery.html
index a4d36a0..0842221 100644
--- a/links/templates/links/mini_apps/image_gallery.html
+++ b/links/templates/links/mini_apps/image_gallery.html
@@ -274,6 +274,35 @@
         border: 1px solid rgba(255, 255, 255, 0.1);
     }
 
+    .fullscreen-btn {
+        position: absolute;
+        bottom: 30px;
+        right: 90px;
+        width: 50px;
+        height: 50px;
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(10px);
+        border-radius: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 12;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        transition: transform 0.3s ease;
+    }
+
+    .fullscreen-btn:hover {
+        transform: scale(1.1);
+        background: rgba(50, 50, 50, 0.7);
+    }
+
+    .fullscreen-btn i {
+        font-size: 20px;
+        color: white;
+        transition: transform 0.3s ease;
+    }
+
     .progress-bar {
         position: absolute;
         bottom: 0;
@@ -352,6 +381,12 @@
             bottom: 150px;
         }
 
+        .fullscreen-btn {
+            top: 20px;
+            left: 20px;
+            width: 40px;
+            height: 40px;
+        }
 
         .back-button {
             right: 30px;
@@ -367,6 +402,9 @@
 <div class="app-container">
     <div class="progress-bar"></div>
     <div class="slideshow-container" id="slideshow"></div>
+    <div class="fullscreen-btn" id="fullscreenBtn">
+        <i class="fas fa-expand"></i>
+    </div>
     <div class="control-toggle" id="controlToggle">
         <i class="fas fa-cog"></i>
     </div>
@@ -439,7 +477,8 @@
         timerDisplay: document.getElementById('timer'),
         progressBar: document.querySelector('.progress-bar'),
         controlToggle: document.getElementById('controlToggle'),
-        controlPanel: document.getElementById('controlPanel')
+        controlPanel: document.getElementById('controlPanel'),
+        fullscreenBtn: document.getElementById('fullscreenBtn')
     };
 
     // Initialize application
@@ -450,7 +489,7 @@
         dom.intervalInput.addEventListener('change', updateInterval);
         dom.nextBtn.addEventListener('click', loadNextImage);
         dom.controlToggle.addEventListener('click', toggleControls);
-
+        dom.fullscreenBtn.addEventListener('click', toggleFullscreen);
 
         // Load first image
         loadNextImage();
@@ -539,6 +578,42 @@
         dom.controlToggle.classList.toggle('active');
     }
 
+    // Toggle fullscreen mode
+    function toggleFullscreen() {
+        if (!document.fullscreenElement &&    // standard property
+            !document.mozFullScreenElement && // Firefox
+            !document.webkitFullscreenElement && // Chrome, Safari and Opera
+            !document.msFullscreenElement) {  // IE/Edge
+
+            // Enter fullscreen
+            const docElem = document.documentElement;
+            if (docElem.requestFullscreen) {
+                docElem.requestFullscreen();
+            } else if (docElem.mozRequestFullScreen) { // Firefox
+                docElem.mozRequestFullScreen();
+            } else if (docElem.webkitRequestFullscreen) { // Chrome, Safari and Opera
+                docElem.webkitRequestFullscreen();
+            } else if (docElem.msRequestFullscreen) { // IE/Edge
+                docElem.msRequestFullscreen();
+            }
+            dom.fullscreenBtn.querySelector('i').classList.remove('fa-expand');
+            dom.fullscreenBtn.querySelector('i').classList.add('fa-compress');
+        } else {
+            // Exit fullscreen
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) { // Firefox
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) { // IE/Edge
+                document.msExitFullscreen();
+            }
+            dom.fullscreenBtn.querySelector('i').classList.remove('fa-compress');
+            dom.fullscreenBtn.querySelector('i').classList.add('fa-expand');
+        }
+    }
+
     // Get random image ID (between 1000-1084)
     function getRandomImageId() {
         return Math.floor(Math.random() * 85) + 1000;
@@ -618,5 +693,26 @@
 
     // Initialize app when page loads
     window.addEventListener('DOMContentLoaded', initApp);
+
+    // Listen for fullscreen changes to update button icon
+    document.addEventListener('fullscreenchange', updateFullscreenButtonIcon);
+    document.addEventListener('webkitfullscreenchange', updateFullscreenButtonIcon);
+    document.addEventListener('mozfullscreenchange', updateFullscreenButtonIcon);
+    document.addEventListener('MSFullscreenChange', updateFullscreenButtonIcon);
+
+    function updateFullscreenButtonIcon() {
+        if (document.fullscreenElement ||
+            document.webkitFullscreenElement ||
+            document.mozFullScreenElement ||
+            document.msFullscreenElement) {
+            // If in fullscreen
+            dom.fullscreenBtn.querySelector('i').classList.remove('fa-expand');
+            dom.fullscreenBtn.querySelector('i').classList.add('fa-compress');
+        } else {
+            // If not in fullscreen
+            dom.fullscreenBtn.querySelector('i').classList.remove('fa-compress');
+            dom.fullscreenBtn.querySelector('i').classList.add('fa-expand');
+        }
+    }
 </script>
 {% endblock %}