Update index.js

index.js

@@ -20,6 +20,9 @@
   var minAngle = parseFloat(getScriptQueryParam("minAngle")) || 0;
   var maxAngle = parseFloat(getScriptQueryParam("maxAngle")) || 90;
 
+  // Detect if the device is iOS.
+  var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
   // Inject CSS styles into the document head.
   var styleEl = document.createElement('style');
   styleEl.textContent = `
@@ -30,6 +33,16 @@
       height: 0;
       padding-bottom: 100%;
     }
+    /* When in fake fullscreen mode (iOS fallback) */
+    #ply-widget-container.fake-fullscreen {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100vw !important;
+      height: 100vh !important;
+      padding-bottom: 0 !important;
+      z-index: 9999 !important;
+    }
     /* GIF Preview styling */
     #gif-preview-container {
       position: absolute;
@@ -82,8 +95,8 @@
     #menu-content {
       display: none;
       position: absolute;
-      top: 62px;
-      right: 70px;
+      top: 72px;
+      right: 15px;
       background: #FFFEF4;
       border: 1px solid #474558;
       border-radius: 5px;
@@ -184,30 +197,44 @@
         document.exitFullscreen();
       }
     }
+    // Remove fake-fullscreen class (for iOS) if present.
+    widgetContainer.classList.remove('fake-fullscreen');
     viewerContainer.style.display = 'none';
     gifPreview.style.display = 'block';
   });
 
-  // Fullscreen toggle: toggle fullscreen on the widget container.
+  // Fullscreen toggle: use native Fullscreen API if available; otherwise, for iOS, toggle a CSS-based fullscreen.
   fullscreenToggle.addEventListener('click', function() {
-    if (!document.fullscreenElement) {
-      if (widgetContainer.requestFullscreen) {
-        widgetContainer.requestFullscreen();
-      } else if (widgetContainer.webkitRequestFullscreen) {
-        widgetContainer.webkitRequestFullscreen();
-      } else if (widgetContainer.mozRequestFullScreen) {
-        widgetContainer.mozRequestFullScreen();
-      } else if (widgetContainer.msRequestFullscreen) {
-        widgetContainer.msRequestFullscreen();
+    if (isIOS) {
+      // Toggle fake fullscreen via CSS on iOS.
+      if (!widgetContainer.classList.contains('fake-fullscreen')) {
+        widgetContainer.classList.add('fake-fullscreen');
+      } else {
+        widgetContainer.classList.remove('fake-fullscreen');
       }
+      // Update icon based on state.
+      fullscreenToggle.textContent = widgetContainer.classList.contains('fake-fullscreen') ? '⇲' : '⇱';
     } else {
-      if (document.exitFullscreen) {
-        document.exitFullscreen();
+      // Non-iOS: use standard Fullscreen API.
+      if (!document.fullscreenElement) {
+        if (widgetContainer.requestFullscreen) {
+          widgetContainer.requestFullscreen();
+        } else if (widgetContainer.webkitRequestFullscreen) {
+          widgetContainer.webkitRequestFullscreen();
+        } else if (widgetContainer.mozRequestFullScreen) {
+          widgetContainer.mozRequestFullScreen();
+        } else if (widgetContainer.msRequestFullscreen) {
+          widgetContainer.msRequestFullscreen();
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
       }
     }
   });
 
-  // Update the fullscreen button icon on fullscreen change.
+  // Update the fullscreen button icon on fullscreen change (for non-iOS browsers).
   document.addEventListener('fullscreenchange', function() {
     if (document.fullscreenElement === widgetContainer) {
       fullscreenToggle.textContent = '⇲';