From fe36bd04b1011c8bd274bf24db6186945b3eaf69 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Thu, 7 Sep 2023 15:18:28 +0530
Subject: [PATCH] Fix fullscreen button for IOS (#6225)

* Fix fullscreen button for IOS

* Fix fullscreen
---
 src/Common/hooks/useFullscreen.ts              | 18 ++++++++++++++++--
 src/Common/hooks/useMessageListener.ts         |  6 +++---
 .../Facility/ConsultationDetails.tsx           |  8 ++++----
 src/Components/Facility/Consultations/Feed.tsx |  9 ++++++++-
 src/Components/Facility/DischargeModal.tsx     |  2 +-
 5 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/Common/hooks/useFullscreen.ts b/src/Common/hooks/useFullscreen.ts
index e409af1174c..f00dbfb0c5b 100644
--- 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
index eb5673da7fc..9dba3a18e58 100644
--- 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
index 30cbd1afdb7..194d6629fc8 100644
--- 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
index caca55102ca..07fd6f31739 100644
--- 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
index 5e13b038bab..8376a0ad299 100644
--- 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" });