From 8fba4f271dd05ebfc68947eae7e4f3b22696f650 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Fri, 3 Nov 2023 17:40:27 +0530
Subject: [PATCH] Refactor middleware hostname in Feed component

---
 src/Common/hooks/useMSEplayer.ts              |  2 ++
 .../Assets/AssetType/ONVIFCamera.tsx          | 12 +++++----
 .../Facility/Consultations/Feed.tsx           | 27 ++++++++++++++-----
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/Common/hooks/useMSEplayer.ts b/src/Common/hooks/useMSEplayer.ts
index fcbf216ed6a..4d1bb36b9ac 100644
--- a/src/Common/hooks/useMSEplayer.ts
+++ b/src/Common/hooks/useMSEplayer.ts
@@ -20,6 +20,8 @@ interface UseMSEMediaPlayerOption {
 export interface ICameraAssetState {
   id: string;
   accessKey: string;
+  middleware_address: string;
+  location_middleware: string;
 }
 
 export enum StreamStatus {
diff --git a/src/Components/Assets/AssetType/ONVIFCamera.tsx b/src/Components/Assets/AssetType/ONVIFCamera.tsx
index 4a3e475419e..44d4d372d73 100644
--- a/src/Components/Assets/AssetType/ONVIFCamera.tsx
+++ b/src/Components/Assets/AssetType/ONVIFCamera.tsx
@@ -53,6 +53,11 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
     }
   }, [facility, facilityId]);
 
+  const fallbackMiddleware =
+    asset?.location_object?.middleware_address || facilityMiddlewareHostname;
+
+  const currentMiddleware = middlewareHostname || fallbackMiddleware;
+
   useEffect(() => {
     if (asset) {
       setAssetType(asset?.asset_class);
@@ -105,7 +110,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
     try {
       setLoadingAddPreset(true);
       const presetData = await axios.get(
-        `https://${facilityMiddlewareHostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`
+        `https://${currentMiddleware}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`
       );
 
       const { res } = await request(routes.createAssetBed, {
@@ -136,9 +141,6 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   };
   if (isLoading || loading || !facility) return <Loading />;
 
-  const fallbackMiddleware =
-    asset?.location_object?.middleware_address || facilityMiddlewareHostname;
-
   return (
     <div className="space-y-6">
       {["DistrictAdmin", "StateAdmin"].includes(authUser.user_type) && (
@@ -223,7 +225,7 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
           addPreset={addPreset}
           isLoading={loadingAddPreset}
           refreshPresetsHash={refreshPresetsHash}
-          facilityMiddlewareHostname={facilityMiddlewareHostname}
+          facilityMiddlewareHostname={currentMiddleware}
         />
       ) : null}
     </div>
diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
index 31691c736f4..3448d85a6a2 100644
--- a/src/Components/Facility/Consultations/Feed.tsx
+++ b/src/Components/Facility/Consultations/Feed.tsx
@@ -48,8 +48,11 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
   const [cameraAsset, setCameraAsset] = useState<ICameraAssetState>({
     id: "",
     accessKey: "",
+    middleware_address: "",
+    location_middleware: "",
   });
-  const [cameraMiddlewareHostname, setCameraMiddlewareHostname] = useState("");
+  const [facilityMiddlewareHostname, setFacilityMiddlewareHostname] =
+    useState("");
   const [cameraConfig, setCameraConfig] = useState<any>({});
   const [isLoading, setIsLoading] = useState(true);
   const [bedPresets, setBedPresets] = useState<any>([]);
@@ -66,13 +69,19 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
       const res = await dispatch(getPermittedFacility(facilityId));
 
       if (res.status === 200 && res.data) {
-        setCameraMiddlewareHostname(res.data.middleware_address);
+        setFacilityMiddlewareHostname(res.data.middleware_address);
       }
     };
 
     if (facilityId) fetchFacility();
   }, [dispatch, facilityId]);
 
+  const fallbackMiddleware =
+    cameraAsset.location_middleware || facilityMiddlewareHostname;
+
+  const currentMiddleware =
+    cameraAsset.middleware_address || fallbackMiddleware;
+
   useEffect(() => {
     if (cameraState) {
       setCameraState({
@@ -130,6 +139,12 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
             setCameraAsset({
               id: bedAssets.data.results[0].asset_object.id,
               accessKey: config[2] || "",
+              middleware_address:
+                bedAssets.data.results[0].asset_object?.meta
+                  ?.middleware_hostname,
+              location_middleware:
+                bedAssets.data.results[0].asset_object.location_object
+                  ?.middleware_address,
             });
             setCameraConfig(bedAssets.data.results[0].meta);
             setCameraState({
@@ -170,8 +185,8 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
   );
 
   const url = !isIOS
-    ? `wss://${cameraMiddlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`
-    : `https://${cameraMiddlewareHostname}/stream/${cameraAsset?.accessKey}/channel/0/hls/live/index.m3u8?uuid=${cameraAsset?.accessKey}&channel=0`;
+    ? `wss://${currentMiddleware}/stream/${cameraAsset?.accessKey}/channel/0/mse?uuid=${cameraAsset?.accessKey}&channel=0`
+    : `https://${currentMiddleware}/stream/${cameraAsset?.accessKey}/channel/0/hls/live/index.m3u8?uuid=${cameraAsset?.accessKey}&channel=0`;
 
   const {
     startStream,
@@ -182,7 +197,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
     : // eslint-disable-next-line react-hooks/rules-of-hooks
       useMSEMediaPlayer({
         config: {
-          middlewareHostname: cameraMiddlewareHostname,
+          middlewareHostname: currentMiddleware,
           ...cameraAsset,
         },
         url,
@@ -229,7 +244,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
       });
       getBedPresets(cameraAsset);
     }
-  }, [cameraAsset, cameraMiddlewareHostname]);
+  }, [cameraAsset, currentMiddleware]);
 
   useEffect(() => {
     let tId: any;