Add Widescreen button*

*Primarily adds a Widescreen button to replace a native iOS fullscreen feature. (Due to it being disabled now)

Also available by holding shift and pressing the fullscreen button on desktop.

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/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/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/player/PlayerPart.tsx

@@ -1,8 +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";
@@ -26,6 +27,21 @@ export function PlayerPart(props: PlayerPartProps) {
     /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}
@@ -122,7 +138,15 @@ 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">
@@ -133,6 +157,8 @@ export function PlayerPart(props: PlayerPartProps) {
               (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>
             {/* Disable for iOS PWA */}