fix fullscreen issues with iOS devices

src/CAREUI/misc/Fullscreen.tsx

@@ -5,17 +5,25 @@ interface Props {
   fullscreenClassName?: string;
   children: React.ReactNode;
   fullscreen: boolean;
-  onExit: () => void;
+  onExit: (reason?: "DEVICE_UNSUPPORTED") => void;
 }
 
 export default function Fullscreen(props: Props) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
     if (props.fullscreen) {
-      ref.current?.requestFullscreen();
+      if (ref.current.requestFullscreen) {
+        ref.current.requestFullscreen();
+      } else {
+        props.onExit("DEVICE_UNSUPPORTED");
+      }
     } else {
-      document.exitFullscreen();
+      document.exitFullscreen?.();
     }
   }, [props.fullscreen]);
 
@@ -27,6 +35,7 @@ export default function Fullscreen(props: Props) {
     };
 
     document.addEventListener("fullscreenchange", listener);
+
     return () => {
       document.removeEventListener("fullscreenchange", listener);
     };

src/Components/CameraFeed/CameraFeed.tsx

@@ -12,6 +12,7 @@ import FeedControls from "./FeedControls";
 import Fullscreen from "../../CAREUI/misc/Fullscreen";
 import FeedWatermark from "./FeedWatermark";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import { Error } from "../../Utils/Notifications";
 
 interface Props {
   children?: React.ReactNode;
@@ -89,7 +90,20 @@ export default function CameraFeed(props: Props) {
     initializeStream();
   };
   return (
-    <Fullscreen fullscreen={isFullscreen} onExit={() => setFullscreen(false)}>
+    <Fullscreen
+      fullscreen={isFullscreen}
+      onExit={(reason) => {
+        setFullscreen(false);
+
+        if (reason === "DEVICE_UNSUPPORTED") {
+          // iOS webkit allows only video/iframe elements to call full-screen
+          // APIs. But we need to show controls too, not just the video element.
+          Error({
+            msg: "This device does not support viewing this content in full-screen.",
+          });
+        }
+      }}
+    >
       <div
         className={classNames(
           "flex flex-col overflow-clip rounded-xl bg-black md:max-h-screen",