Remove asset detail popup in asset configure's camera feed (#8855)

ohcnetwork · Oct 22, 2024 · b1a1fad · b1a1fad
1 parent 5b3a86a
commit b1a1fad
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
@@ -12,7 +12,7 @@ import useFullscreen from "../../Common/hooks/useFullscreen";
 import useBreakpoints from "../../Common/hooks/useBreakpoints";
 import { GetPresetsResponse } from "./routes";
 import VideoPlayer from "./videoPlayer";
-import MonitorAssetPopover from "../Common/MonitorAssetPopover";
+import AssetInfoPopover from "../Common/AssetInfoPopover";
 
 interface Props {
   children?: React.ReactNode;
@@ -28,6 +28,7 @@ interface Props {
   shortcutsDisabled?: boolean;
   onMove?: () => void;
   operate: ReturnType<typeof useOperateCamera>["operate"];
+  hideAssetInfo?: boolean;
 }
 
 export default function CameraFeed(props: Props) {
@@ -183,15 +184,18 @@ export default function CameraFeed(props: Props) {
             {props.children}
           </div>
           <div className="flex w-full flex-col items-end justify-end md:flex-row md:items-center md:gap-4">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-bold md:text-sm">
-                {props.asset.name}
-              </span>
-              <MonitorAssetPopover
-                asset={props.asset}
-                className="absolute z-[100] mt-2 w-56 -translate-x-full -translate-y-4 rounded-md bg-white md:w-[350px] md:-translate-x-full md:-translate-y-2"
-              />
-            </div>
+            {!props.hideAssetInfo && (
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-bold md:text-sm">
+                  {props.asset.name}
+                </span>
+                <AssetInfoPopover
+                  asset={props.asset}
+                  className="absolute z-[100] mt-2 w-56 -translate-x-full -translate-y-4 rounded-md bg-white md:w-[350px] md:-translate-x-full md:-translate-y-2"
+                />
+              </div>
+            )}
+
             {!isIOS && (
               <div
                 className={classNames(

diff --git a/src/Components/CameraFeed/ConfigureCamera.tsx b/src/Components/CameraFeed/ConfigureCamera.tsx
@@ -106,7 +106,12 @@ export default function ConfigureCamera(props: Props) {
   if (!["DistrictAdmin", "StateAdmin"].includes(authUser.user_type)) {
     return (
       <div className="w-full overflow-hidden rounded-lg bg-white shadow">
-        <CameraFeed asset={props.asset} key={key} operate={operate} />
+        <CameraFeed
+          asset={props.asset}
+          key={key}
+          operate={operate}
+          hideAssetInfo
+        />
       </div>
     );
   }
@@ -246,6 +251,7 @@ export default function ConfigureCamera(props: Props) {
                 );
               }
             }}
+            hideAssetInfo
           >
             <div className="flex items-center gap-2">
               <Listbox

diff --git a/...Components/Common/MonitorAssetPopover.tsx → src/Components/Common/AssetInfoPopover.tsx b/...Components/Common/MonitorAssetPopover.tsx → src/Components/Common/AssetInfoPopover.tsx
@@ -1,6 +1,6 @@
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { AssetData, assetClassProps } from "../Assets/AssetTypes";
-import ButtonV2 from "../Common/components/ButtonV2";
+import ButtonV2 from "./components/ButtonV2";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 import {
@@ -10,15 +10,12 @@ import {
   Transition,
 } from "@headlessui/react";
 
-interface MonitorAssetPopoverProps {
+interface AssetInfoPopoverProps {
   asset?: AssetData;
   className?: string;
 }
 
-const MonitorAssetPopover = ({
-  asset,
-  className,
-}: MonitorAssetPopoverProps) => {
+const AssetInfoPopover = ({ asset, className }: AssetInfoPopoverProps) => {
   const { t } = useTranslation();
 
   return (
@@ -87,4 +84,4 @@ const MonitorAssetPopover = ({
   );
 };
 
-export default MonitorAssetPopover;
+export default AssetInfoPopover;
diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
@@ -1,5 +1,5 @@
 import { AssetData } from "../Assets/AssetTypes";
-import MonitorAssetPopover from "../Common/MonitorAssetPopover";
+import AssetInfoPopover from "../Common/AssetInfoPopover";
 
 interface IVitalsMonitorFooterProps {
   asset?: AssetData;
@@ -9,7 +9,7 @@ const VitalsMonitorFooter = ({ asset }: IVitalsMonitorFooterProps) => {
   return (
     <div className="flex w-full items-center gap-2 text-xs tracking-wide md:text-sm">
       <p className="text-secondary-500">{asset?.name}</p>
-      <MonitorAssetPopover
+      <AssetInfoPopover
         asset={asset}
         className="absolute z-[100] mt-2 w-56 -translate-x-1/3 translate-y-[-280px] rounded-md bg-white md:w-[350px] md:-translate-y-full md:translate-x-6"
       />