credit to

sussy-code#89

src/components/Icon.tsx

@@ -68,6 +68,8 @@ export enum Icons {
   BRUSH = "brush",
   UPLOAD = "upload",
   WEB = "web",
+  SHRINK = "shrink",
+  STRETCH = "stretch",
 }
 
 export interface IconProps {
@@ -153,6 +155,8 @@ const iconList: Record<Icons, string> = {
   <path d="M22.0182 15.0781C20.9582 15.403 18.7915 16.0311 16.4781 16.4781C16.0311 18.7915 15.403 20.9581 15.0781 22.0182L15.0702 22.044C18.4002 21.0274 21.0274 18.4002 22.044 15.0702L22.0182 15.0781Z" fill="currentColor"/>
   <path d="M1.6103 13.323C1.64665 13.3277 1.67628 13.3327 1.68611 13.3349C1.69472 13.337 1.70821 13.3406 1.7131 13.3419L1.72391 13.345L1.72973 13.3468L1.73585 13.3487L1.74098 13.3503C1.7381 13.3494 1.67976 13.3348 1.6103 13.323Z" fill="currentColor"/>
   </svg>`,
+  shrink: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8l-144 0c-13.3 0-24-10.7-24-24l0-144c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272l144 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z"/></svg>`,
+  stretch: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M344 0L488 0c13.3 0 24 10.7 24 24l0 144c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512L24 512c-13.3 0-24-10.7-24-24L0 344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z"/></svg>`,
 };
 
 function ChromeCastButton() {

src/components/buttons/IosPwaLimitations.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable no-alert */
+import { Icon, Icons } from "../Icon";
+
+function IosPwaLimitations() {
+  const showAlert = () => {
+    alert(
+      "Due to Apple’s limitations, Picture-in-Picture (PiP) and Fullscreen are disabled on iOS PWAs. Use the browser vertion to re-enable these features.\n" +
+        "Tip: To hide the iOS home indicator, use guided access within the PWA!",
+    );
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={showAlert}
+      className="tabbable p-2 rounded-full hover:bg-video-buttonBackground hover:bg-opacity-50 transition-transform duration-100 flex items-center gap-3 active:scale-110 active:bg-opacity-75 active:text-white"
+    >
+      <Icon className="text-2xl" icon={Icons.CIRCLE_QUESTION} />
+    </button>
+  );
+}
+
+export default IosPwaLimitations;

src/components/layout/Navigation.tsx

@@ -47,14 +47,14 @@ export function Navigation(props: NavigationProps) {
 
       {/* backgrounds - these are seperate because of z-index issues */}
       <div
-        className="fixed z-[20] pointer-events-none left-0 right-0 top-0 min-h-[150px]"
+        className="top-content fixed z-[20] pointer-events-none left-0 right-0 top-0 min-h-[150px]"
         style={{
           top: `${bannerHeight}px`,
         }}
       >
         <div
           className={classNames(
-            "fixed left-0 right-0 h-20 flex items-center",
+            "fixed left-0 right-0 top-0 flex items-center",
             props.doBackground
               ? "bg-background-main border-b border-utils-divider border-opacity-50"
               : null,
@@ -78,7 +78,7 @@ export function Navigation(props: NavigationProps) {
 
       {/* content */}
       <div
-        className="fixed pointer-events-none left-0 right-0 z-[60] top-0 min-h-[150px]"
+        className="top-content fixed pointer-events-none left-0 right-0 z-[60] top-0 min-h-[150px]"
         style={{
           top: `${bannerHeight}px`,
         }}

src/components/player/base/TopControls.tsx

@@ -44,7 +44,7 @@ export function TopControls(props: {
         <Transition
           animation="slide-down"
           show={props.show}
-          className="text-white"
+          className="top-content text-white"
         >
           {props.children}
         </Transition>

src/pages/parts/home/HeroPart.tsx

@@ -39,20 +39,30 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
     },
     [setShowBg, setIsSticky],
   );
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
 
-  const { width: windowWidth } = useWindowSize();
+  // Detect if running as a PWA on iOS
+  const isIOSPWA =
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) &&
+    window.matchMedia("(display-mode: standalone)").matches;
 
-  const topSpacing = 16;
+  const topSpacing = isIOSPWA ? 60 : 16;
   const [stickyOffset, setStickyOffset] = useState(topSpacing);
+
+  const isLandscape = windowHeight < windowWidth && isIOSPWA;
+  const adjustedOffset = isLandscape
+    ? -40 // landscape
+    : 0; // portrait
+
   useEffect(() => {
-    if (windowWidth > 1200) {
+    if (windowWidth > 1280) {
       // On large screens the bar goes inline with the nav elements
       setStickyOffset(topSpacing);
     } else {
       // On smaller screens the bar goes below the nav elements
-      setStickyOffset(topSpacing + 60);
+      setStickyOffset(topSpacing + 60 + adjustedOffset);
     }
-  }, [windowWidth]);
+  }, [adjustedOffset, topSpacing, windowWidth]);
 
   const time = getTimeOfDay(new Date());
   const title = randomT(`home.titles.${time}`);

src/pages/parts/player/PlayerPart.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 
+import IosPwaLimitations from "@/components/buttons/IosPwaLimitations";
 import { BrandPill } from "@/components/layout/BrandPill";
 import { Player } from "@/components/player";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
@@ -20,6 +21,11 @@ export function PlayerPart(props: PlayerPartProps) {
   const { isMobile } = useIsMobile();
   const isLoading = usePlayerStore((s) => s.mediaPlaying.isLoading);
 
+  // Detect if running as a PWA on iOS
+  const isIOSPWA =
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) &&
+    window.matchMedia("(display-mode: standalone)").matches;
+
   return (
     <Player.Container onLoad={props.onLoad} showingControls={showTargets}>
       {props.children}
@@ -122,12 +128,25 @@ export function PlayerPart(props: PlayerPartProps) {
         <div className="grid grid-cols-[2.5rem,1fr,2.5rem] gap-3 lg:hidden">
           <div />
           <div className="flex justify-center space-x-3">
-            {status === playerStatus.PLAYING ? <Player.Pip /> : null}
+            {/* Disable PiP for iOS PWA */}
+            {!isIOSPWA &&
+              (status === playerStatus.PLAYING ? <Player.Pip /> : null)}
             <Player.Episodes />
             {status === playerStatus.PLAYING ? <Player.Settings /> : null}
           </div>
           <div>
-            <Player.Fullscreen />
+            {/* Disable for iOS PWA */}
+            {!isIOSPWA && (
+              <div>
+                <Player.Fullscreen />
+              </div>
+            )}
+            {/* Add info for iOS PWA */}
+            {isIOSPWA && (
+              <div>
+                <IosPwaLimitations />
+              </div>
+            )}
           </div>
         </div>
       </Player.BottomControls>