Allow tap to toggle controls so zooming still works

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
+      }
     />
   );
 }

web/src/views/live/LiveCameraView.tsx

@@ -28,6 +28,7 @@ import React, {
 } from "react";
 import {
   isDesktop,
+  isIOS,
   isMobile,
   isSafari,
   useMobileOrientation,
@@ -189,20 +190,22 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
             <div
               className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
             >
-              <CameraFeatureToggle
-                className="p-2 md:p-0"
-                variant={fullscreen ? "overlay" : "primary"}
-                Icon={fullscreen ? FaCompress : FaExpand}
-                isActive={fullscreen}
-                title={fullscreen ? "Close" : "Fullscreen"}
-                onClick={() => {
-                  if (fullscreen) {
-                    document.exitFullscreen();
-                  } else {
-                    mainRef.current?.requestFullscreen();
-                  }
-                }}
-              />
+              {!isIOS && (
+                <CameraFeatureToggle
+                  className="p-2 md:p-0"
+                  variant={fullscreen ? "overlay" : "primary"}
+                  Icon={fullscreen ? FaCompress : FaExpand}
+                  isActive={fullscreen}
+                  title={fullscreen ? "Close" : "Fullscreen"}
+                  onClick={() => {
+                    if (fullscreen) {
+                      document.exitFullscreen();
+                    } else {
+                      mainRef.current?.requestFullscreen();
+                    }
+                  }}
+                />
+              )}
               {window.isSecureContext && (
                 <CameraFeatureToggle
                   className="p-2 md:p-0"
@@ -286,6 +289,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
               cameraConfig={camera}
               playAudio={audio}
               micEnabled={mic}
+              iOSCompatFullScreen={isIOS}
               preferredLiveMode={preferredLiveMode}
             />
           </div>