WebUI Fixes (#10481)

* Update previews on the hour

* Allow tap to toggle controls so zooming still works

* Use hash location insteaad of state for live camera view

* Add typing

web/src/components/player/LivePlayer.tsx

@@ -21,6 +21,7 @@ type LivePlayerProps = {
   windowVisible?: boolean;
   playAudio?: boolean;
   micEnabled?: boolean; // only webrtc supports mic
+  iOSCompatFullScreen?: boolean;
   onClick?: () => void;
 };
 
@@ -32,6 +33,7 @@ export default function LivePlayer({
   windowVisible = true,
   playAudio = false,
   micEnabled = false,
+  iOSCompatFullScreen = false,
   onClick,
 }: LivePlayerProps) {
   // camera activity
@@ -100,6 +102,7 @@ export default function LivePlayer({
         playbackEnabled={cameraActive}
         audioEnabled={playAudio}
         microphoneEnabled={micEnabled}
+        iOSCompatFullScreen={iOSCompatFullScreen}
         onPlaying={() => setLiveReady(true)}
       />
     );

web/src/components/player/WebRTCPlayer.tsx

@@ -1,5 +1,5 @@
 import { baseUrl } from "@/api/baseUrl";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 type WebRtcPlayerProps = {
   className?: string;
@@ -7,6 +7,7 @@ type WebRtcPlayerProps = {
   playbackEnabled?: boolean;
   audioEnabled?: boolean;
   microphoneEnabled?: boolean;
+  iOSCompatFullScreen?: boolean; // ios doesn't support fullscreen divs so we must support the video element
   onPlaying?: () => void;
 };
 
@@ -16,6 +17,7 @@ export default function WebRtcPlayer({
   playbackEnabled = true,
   audioEnabled = false,
   microphoneEnabled = false,
+  iOSCompatFullScreen = false,
   onPlaying,
 }: WebRtcPlayerProps) {
   // metadata
@@ -170,14 +172,23 @@ export default function WebRtcPlayer({
     microphoneEnabled,
   ]);
 
+  // ios compat
+  const [iOSCompatControls, setiOSCompatControls] = useState(false);
+
   return (
     <video
       ref={videoRef}
       className={className}
+      controls={iOSCompatControls}
       autoPlay
       playsInline
       muted={!audioEnabled}
       onLoadedData={onPlaying}
+      onClick={
+        iOSCompatFullScreen
+          ? () => setiOSCompatControls(!iOSCompatControls)
+          : undefined
+      }
     />
   );
 }