-23

src/components/buttons/IosPwaLimitations.tsx

reviewed

··· 1 1 - /* eslint-disable no-alert */ 2 2 - import { Icon, Icons } from "../Icon"; 3 3 - 4 4 - function IosPwaLimitations() { 5 5 - const showAlert = () => { 6 6 - alert( 7 7 - "Due to Apple’s limitations, Picture-in-Picture (PiP) and Fullscreen are disabled on iOS PWAs. Use the browser version to re-enable these features.\n" + 8 8 - "Tip: To hide the iOS home indicator, use guided access within the PWA!", 9 9 - ); 10 10 - }; 11 11 - 12 12 - return ( 13 13 - <button 14 14 - type="button" 15 15 - onClick={showAlert} 16 16 - 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" 17 17 - > 18 18 - <Icon className="text-2xl" icon={Icons.CIRCLE_QUESTION} /> 19 19 - </button> 20 20 - ); 21 21 - } 22 22 - 23 23 - export default IosPwaLimitations;

+7 -8

src/pages/parts/player/PlayerPart.tsx

reviewed

··· 1 1 import { ReactNode, useRef, useState } from "react"; 2 2 3 3 - import IosPwaLimitations from "@/components/buttons/IosPwaLimitations"; 4 3 import { BrandPill } from "@/components/layout/BrandPill"; 5 4 import { Player } from "@/components/player"; 6 5 import { SkipIntroButton } from "@/components/player/atoms/SkipIntroButton"; ··· 37 36 const inControl = !enabled || isHost; 38 37 39 38 const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); 40 40 - const isIOSPWA = 41 41 - isIOS && window.matchMedia("(display-mode: standalone)").matches; 39 39 + const isPWA = window.matchMedia("(display-mode: standalone)").matches; 42 40 43 41 const [isShifting, setIsShifting] = useState(false); 44 42 const [isHoldingFullscreen, setIsHoldingFullscreen] = useState(false); ··· 204 202 <div /> 205 203 <div className="flex justify-center space-x-3"> 206 204 {/* Disable PiP for iOS PWA */} 207 207 - {!isIOSPWA && status === playerStatus.PLAYING && <Player.Pip />} 205 205 + {!isPWA && !isIOS && status === playerStatus.PLAYING && ( 206 206 + <Player.Pip /> 207 207 + )} 208 208 <Player.Episodes inControl={inControl} /> 209 209 {status === playerStatus.PLAYING ? ( 210 210 <div className="hidden ssm:block"> ··· 212 212 </div> 213 213 ) : null} 214 214 <Player.Settings /> 215 215 - {isIOSPWA && <IosPwaLimitations />} 216 215 </div> 217 216 <div> 218 218 - {/* iOS PWA */} 219 219 - {!isIOSPWA && ( 217 217 + {isPWA && status === playerStatus.PLAYING ? ( 218 218 + <Widescreen /> 219 219 + ) : ( 220 220 <div 221 221 onTouchStart={handleTouchStart} 222 222 onTouchEnd={handleTouchEnd} ··· 226 226 {isHoldingFullscreen ? <Widescreen /> : <Player.Fullscreen />} 227 227 </div> 228 228 )} 229 229 - {isIOSPWA && status === playerStatus.PLAYING && <Widescreen />} 230 229 </div> 231 230 </div> 232 231 </Player.BottomControls>