Fix fullscreen button for IOS (ohcnetwork#6225)

* Fix fullscreen button for IOS * Fix fullscreen
yogeshbhutkar · Sep 7, 2023 · fe36bd0 · fe36bd0
1 parent 995f4d7
commit fe36bd0
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/src/Common/hooks/useFullscreen.ts b/src/Common/hooks/useFullscreen.ts
@@ -18,11 +18,25 @@ export default function useFullscreen(): [
       document.removeEventListener("fullscreenchange", onFullscreenChange);
   }, []);
 
+  function openFullscreen(elem: HTMLElement) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (elem.webkitEnterFullscreen) elem.webkitEnterFullscreen(); // Safari
+    else elem.requestFullscreen();
+  }
+
+  function exitFullscreen(elem: HTMLElement) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (elem.webkitExitFullscreen) elem.webkitExitFullscreen(); // Safari
+    else document.exitFullscreen();
+  }
+
   const setFullscreen = (value: boolean, element?: HTMLElement) => {
     const fullscreenElement = element ?? document.documentElement;
 
-    if (value) fullscreenElement.requestFullscreen();
-    else document.exitFullscreen();
+    if (value) openFullscreen(fullscreenElement);
+    else exitFullscreen(fullscreenElement);
   };
 
   return [isFullscreen, setFullscreen];

diff --git a/src/Common/hooks/useMessageListener.ts b/src/Common/hooks/useMessageListener.ts
@@ -5,12 +5,12 @@ type onMessage = (data: any) => void;
 export const useMessageListener = (onMessage: onMessage) => {
   useEffect(() => {
     const handleMessage = (e: MessageEvent) => {
-      onMessage(e.data);
+      onMessage?.(e.data);
     };
-    navigator.serviceWorker.addEventListener("message", handleMessage);
+    navigator.serviceWorker?.addEventListener?.("message", handleMessage);
 
     return () => {
-      navigator.serviceWorker.removeEventListener("message", handleMessage);
+      navigator.serviceWorker?.removeEventListener?.("message", handleMessage);
     };
   });
 };
diff --git a/src/Components/Facility/ConsultationDetails.tsx b/src/Components/Facility/ConsultationDetails.tsx
@@ -120,10 +120,10 @@ export const ConsultationDetails = (props: any) => {
       ]);
 
       const { middleware_address } = facilityRes.data as FacilityModel;
-      const assetBeds = assetBedRes.data.results as AssetBedModel[];
+      const assetBeds = assetBedRes?.data?.results as AssetBedModel[];
 
-      const monitorBedData = assetBeds.find(
-        (i) => i.asset_object.asset_class === AssetClass.HL7MONITOR
+      const monitorBedData = assetBeds?.find(
+        (i) => i.asset_object?.asset_class === AssetClass.HL7MONITOR
       );
       setMonitorBedData(monitorBedData);
       const assetDataForMonitor = monitorBedData?.asset_object;
@@ -146,7 +146,7 @@ export const ConsultationDetails = (props: any) => {
           bed_object: consultationData?.current_bed?.bed_object,
         } as AssetBedModel;
       } else {
-        ventilatorBedData = assetBeds.find(
+        ventilatorBedData = assetBeds?.find(
           (i) => i.asset_object.asset_class === AssetClass.VENTILATOR
         );
       }

diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
@@ -98,7 +98,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
     async (status: statusType) => {
       setIsLoading(true);
       const res = await dispatch(getConsultation(consultationId));
-      if (!status.aborted && res.data) {
+      if (!status.aborted && res?.data) {
         const consultation = res.data as ConsultationModel;
         const consultationBedId = consultation.current_bed?.bed_object?.id;
         if (consultationBedId) {
@@ -302,6 +302,12 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
       });
     },
     fullScreen: () => {
+      if (isIOS) {
+        const element = document.querySelector("video");
+        if (!element) return;
+        setFullscreen(true, element as HTMLElement);
+        return;
+      }
       if (!liveFeedPlayerRef.current) return;
       setFullscreen(
         !isFullscreen,
@@ -500,6 +506,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
         <div className="absolute right-8 top-8 z-10 flex flex-col gap-4">
           {["fullScreen", "reset", "updatePreset", "zoomIn", "zoomOut"].map(
             (button, index) => {
+              if (isIOS && button === "reset") return null;
               const option = cameraPTZ.find(
                 (option) => option.action === button
               );

diff --git a/src/Components/Facility/DischargeModal.tsx b/src/Components/Facility/DischargeModal.tsx
@@ -87,7 +87,7 @@ const DischargeModal = ({
       })
     );
 
-    if (res.data?.results?.length) {
+    if (res?.data?.results?.length > 0) {
       setLatestClaim(res.data.results[0]);
       if (isCreateClaimLoading)
         Notification.Success({ msg: "Fetched Claim Approval Results" });