iOS PWA improvments

index.html

@@ -21,6 +21,8 @@
   <meta name="theme-color" content="#120f1d" />
 
   <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
   <link rel="apple-touch-startup-image"
     media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
     href="/splash_screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png">

src/assets/css/index.css

@@ -35,6 +35,10 @@ html[data-no-scroll], html[data-no-scroll] body {
   overflow: hidden;
 }
 
+.top-content {
+  padding-top: calc(env(safe-area-inset-top) - 20px);
+}
+
 .roll {
   animation: roll 1s;
 }

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/atoms/Widescreen.tsx

@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+import { Icons } from "@/components/Icon";
+import { VideoPlayerButton } from "@/components/player/internals/Button";
+
+export function Widescreen() {
+  // Add widescreen status
+  const [isWideScreen, setIsWideScreen] = useState(false);
+
+  return (
+    <VideoPlayerButton
+      icon={isWideScreen ? Icons.SHRINK : Icons.STRETCH}
+      className="text-white"
+      onClick={() => {
+        const videoElement = document.getElementById("video-element");
+        if (videoElement) {
+          videoElement.classList.toggle("object-cover");
+          setIsWideScreen(!isWideScreen);
+        }
+      }}
+    />
+  );
+}

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/components/player/internals/VideoContainer.tsx

@@ -101,6 +101,7 @@ function VideoElement() {
 
   return (
     <video
+      id="video-element"
       className="absolute inset-0 w-full h-screen bg-black"
       autoPlay
       playsInline

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,7 +1,9 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 
+import IosPwaLimitations from "@/components/buttons/IosPwaLimitations";
 import { BrandPill } from "@/components/layout/BrandPill";
 import { Player } from "@/components/player";
+import { Widescreen } from "@/components/player/atoms/Widescreen";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
@@ -20,6 +22,26 @@ 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;
+
+  // Detect if Shift key is being held
+  const [isShifting, setIsShifting] = useState(false);
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Shift") {
+      setIsShifting(true);
+    }
+  });
+
+  document.addEventListener("keyup", (event) => {
+    if (event.key === "Shift") {
+      setIsShifting(false);
+    }
+  });
+
   return (
     <Player.Container onLoad={props.onLoad} showingControls={showTargets}>
       {props.children}
@@ -116,18 +138,41 @@ export function PlayerPart(props: PlayerPartProps) {
                 <Player.Settings />
               </>
             ) : null}
-            <Player.Fullscreen />
+            {/* Fullscreen on when not shifting */}
+            {!isShifting && <Player.Fullscreen />}
+
+            {/* Expand button visible when shifting */}
+            {isShifting && (
+              <div>
+                <Widescreen />
+              </div>
+            )}
           </div>
         </div>
         <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}
+            {/* Expand button for iOS PWA only */}
+            {isIOSPWA && status === playerStatus.PLAYING && <Widescreen />}
           </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>