Orient live camera feed for best screen fit when in fullscreen mode (#…

…16947)

* Change orientation in fullscreen to best fit video

* Refactor effect to simplify, add more comments

web/src/views/live/LiveCameraView.tsx

@@ -362,6 +362,28 @@ export default function LiveCameraView({
     }
   }, [fullscreen, isPortrait, cameraAspectRatio, containerAspectRatio]);
 
+  // On mobile devices that support it, try to orient screen
+  // to best fit the camera feed in fullscreen mode
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const screenOrientation = screen.orientation as any;
+    if (!screenOrientation.lock || !screenOrientation.unlock) {
+      // Browser does not support ScreenOrientation APIs that we need
+      return;
+    }
+
+    if (fullscreen) {
+      const orientationForBestFit =
+        cameraAspectRatio > 1 ? "landscape" : "portrait";
+
+      // If the current device doesn't support locking orientation,
+      // this promise will reject with an error that we can ignore
+      screenOrientation.lock(orientationForBestFit).catch(() => {});
+    }
+
+    return () => screenOrientation.unlock();
+  }, [fullscreen, cameraAspectRatio]);
+
   const handleError = useCallback(
     (e: LivePlayerError) => {
       if (e) {