add widescreen button hold feat

hold the fullscreen button to switch to the widescreen button.

src/assets/locales/en.json

@@ -604,7 +604,7 @@
             "tips": {
                 "1": "Tap the gear icon to switch sources!",
                 "2": "Tap the title to copy the link!",
-                "3": "Hold SHIFT for widescreen instead of fullscreen!",
+                "3": "Tap and hold or hold SHIFT to show widescreen button instead of fullscreen!",
                 "4": "Some sources work better than others!",
                 "5": "Get the extension for more sources!",
                 "6": "Hold bookmarks to edit or delete them!",

src/pages/parts/player/PlayerPart.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 
 import IosPwaLimitations from "@/components/buttons/IosPwaLimitations";
 import { BrandPill } from "@/components/layout/BrandPill";
@@ -31,8 +31,9 @@ export function PlayerPart(props: PlayerPartProps) {
   const isIOSPWA =
     isIOS && window.matchMedia("(display-mode: standalone)").matches;
 
-  // Detect if Shift key is being held
   const [isShifting, setIsShifting] = useState(false);
+  const [isHoldingFullscreen, setIsHoldingFullscreen] = useState(false);
+  const holdTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   document.addEventListener("keydown", (event) => {
     if (event.key === "Shift") {
@@ -46,6 +47,24 @@ export function PlayerPart(props: PlayerPartProps) {
     }
   });
 
+  const handleTouchStart = () => {
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+    }
+    holdTimeoutRef.current = setTimeout(() => {
+      setIsHoldingFullscreen(true);
+    }, 100);
+  };
+
+  const handleTouchEnd = () => {
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+    }
+    holdTimeoutRef.current = setTimeout(() => {
+      setIsHoldingFullscreen(false);
+    }, 1000);
+  };
+
   const skiptime = useSkipTime();
 
   return (
@@ -176,7 +195,16 @@ export function PlayerPart(props: PlayerPartProps) {
           </div>
           <div>
             {/* iOS PWA */}
-            {!isIOSPWA && <Player.Fullscreen />}
+            {!isIOSPWA && (
+              <div
+                onTouchStart={handleTouchStart}
+                onTouchEnd={handleTouchEnd}
+                className="select-none touch-none"
+                style={{ WebkitTapHighlightColor: "transparent" }}
+              >
+                {isHoldingFullscreen ? <Widescreen /> : <Player.Fullscreen />}
+              </div>
+            )}
             {isIOSPWA && status === playerStatus.PLAYING && <Widescreen />}
           </div>
         </div>