Disable fullscreen on iOSish platforms

Re #43
readium · Dec 10, 2024 · e5a01c4 · e5a01c4
1 parent 044992f
commit e5a01c4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/src/components/FullscreenAction.tsx b/src/components/FullscreenAction.tsx
@@ -15,6 +15,7 @@ import { ActionComponentVariant, ActionKeys, IActionComponent } from "./Template
 
 import { useAppDispatch } from "@/lib/hooks";
 import { setHovering } from "@/lib/readerReducer";
+import { isIOSish } from "@/helpers/keyboard/getPlatform";
 
 export const FullscreenAction: React.FC<IActionComponent> = ({ variant }) => {
   // Note: Not using React Aria ToggleButton here as fullscreen is quite
@@ -30,36 +31,38 @@ export const FullscreenAction: React.FC<IActionComponent> = ({ variant }) => {
     // TODO: fix hover state on exit, if even possible w/o a lot of getting around…
   };
 
+  // Per React doc/principles this isn’t common but FullScreen is quite an edge case cos’ of iPadOS…
+  // And Actions is still a work in progress, with opportunities to rewrite/refactor
+  // Note we don’t check window.matchMedia("(display-mode: standalone)").matches as this is not a PWA yet
+  // And more values here: https://web.dev/learn/pwa/detection
+  if (!document.fullscreenEnabled || isIOSish()) return null;
+
   if (variant && variant === ActionComponentVariant.menu) {
     return(
       <>
-      { document.fullscreenEnabled 
-      ? <OverflowMenuItem 
-          label={ Locale.reader.fullscreen.trigger }
-          SVG={ FullscreenCorners } 
-          shortcut={ RSPrefs.actions.fullscreen.shortcut }
-          onActionCallback={ fs.handleFullscreen } 
-          id={ ActionKeys.fullscreen }
-        />
+      <OverflowMenuItem 
+        label={ Locale.reader.fullscreen.trigger }
+        SVG={ FullscreenCorners } 
+        shortcut={ RSPrefs.actions.fullscreen.shortcut }
+        onActionCallback={ fs.handleFullscreen } 
+        id={ ActionKeys.fullscreen }
+      />
       : <></>
-      }
       </>
     )
   } else {
     return(
       <>
-      { document.fullscreenEnabled 
-      ? <ActionIcon 
-          className={ readerSharedUI.iconCompSm }
-          visibility={ RSPrefs.actions[ActionKeys.fullscreen].visibility }  
-          ariaLabel={ fs.isFullscreen ? Locale.reader.fullscreen.close : Locale.reader.fullscreen.trigger }
-          SVG={ fs.isFullscreen ? FullscreenExit : FullscreenCorners } 
-          placement="bottom" 
-          tooltipLabel={ Locale.reader.fullscreen.tooltip } 
-          onPressCallback={ handlePress } 
-        />
-        : <></> 
-      }
+      <ActionIcon 
+        className={ readerSharedUI.iconCompSm }
+        visibility={ RSPrefs.actions[ActionKeys.fullscreen].visibility }  
+        ariaLabel={ fs.isFullscreen ? Locale.reader.fullscreen.close : Locale.reader.fullscreen.trigger }
+        SVG={ fs.isFullscreen ? FullscreenExit : FullscreenCorners } 
+        placement="bottom" 
+        tooltipLabel={ Locale.reader.fullscreen.tooltip } 
+        onPressCallback={ handlePress } 
+      />
+      : <></> 
       </>
     )
   }

diff --git a/src/helpers/keyboard/getPlatform.ts b/src/helpers/keyboard/getPlatform.ts
@@ -35,4 +35,18 @@ export const isMacish = () => {
   const MacOSPattern = /mac|ipod|iphone|ipad/i;
   const platform = getPlatform();
   return MacOSPattern.test(platform);
+}
+
+// Stopgap measure for fullscreen on iPadOS, do not use elsewhere
+export const isIOSish = () => {
+  const AppleMobilePattern = /ipod|iphone|ipad/i;
+  const platform = getPlatform();
+  if (AppleMobilePattern.test(platform)) {
+    return true;
+  } else {
+    // “Desktop-class” iPadOS
+    return navigator.maxTouchPoints 
+        && navigator.maxTouchPoints > 2 
+        && navigator.userAgent.includes("Mac");
+  }
 }