Added Assetinfo to Camera Feed

- Moved VitalsMonitorAssetPopover to Common (renamed to MonitorAssetPopover, making it a reusable component) - Added className as a prop for styling PopoverPanel - Moved the styling specific to Vitals Popover (position on screen) to the class name - Using the same prop for positioning Popover for Camera feed page - Added Asset information Popover to Camera Feed page
ohcnetwork · Sep 25, 2024 · 84ab7fb · 84ab7fb
1 parent 09fa1f0
commit 84ab7fb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
@@ -12,6 +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";
 
 interface Props {
   children?: React.ReactNode;
@@ -185,6 +186,10 @@ export default function CameraFeed(props: Props) {
             <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"
+            />
             {!isIOS && (
               <div
                 className={classNames(

diff --git a/...talsMonitor/VitalsMonitorAssetPopover.tsx → ...Components/Common/MonitorAssetPopover.tsx b/...talsMonitor/VitalsMonitorAssetPopover.tsx → ...Components/Common/MonitorAssetPopover.tsx
@@ -10,13 +10,15 @@ import {
   Transition,
 } from "@headlessui/react";
 
-interface VitalsMonitorAssetPopoverProps {
+interface MonitorAssetPopoverProps {
   asset?: AssetData;
+  className?: string;
 }
 
-const VitalsMonitorAssetPopover = ({
+const MonitorAssetPopover = ({
   asset,
-}: VitalsMonitorAssetPopoverProps) => {
+  className,
+}: MonitorAssetPopoverProps) => {
   const { t } = useTranslation();
 
   return (
@@ -35,9 +37,9 @@ const VitalsMonitorAssetPopover = ({
         leaveFrom="opacity-100 translate-y-0"
         leaveTo="opacity-0 translate-y-1"
       >
-        <PopoverPanel 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">
+        <PopoverPanel className={className}>
           <div className="flex flex-col gap-3 p-5">
-            <div className="flex items-center gap-2 text-lg font-bold">
+            <div className="flex items-center gap-2 text-lg font-bold text-black">
               <CareIcon
                 icon={
                   (
@@ -51,13 +53,17 @@ const VitalsMonitorAssetPopover = ({
               <p>{asset?.name}</p>
             </div>
             <div className="flex flex-col gap-1">
-              <p className="text-sm md:text-base">Middleware Hostname:</p>
+              <p className="text-sm text-black md:text-base">
+                Middleware Hostname:
+              </p>
               <p className="break-words text-secondary-600">
                 {asset?.resolved_middleware?.hostname}
               </p>
             </div>
             <div className="flex flex-col gap-1">
-              <p className="text-sm md:text-base">Local IP Address:</p>
+              <p className="text-sm text-black md:text-base">
+                Local IP Address:
+              </p>
               <p className="break-words text-secondary-600">
                 {asset?.meta?.local_ip_address}
               </p>
@@ -81,4 +87,4 @@ const VitalsMonitorAssetPopover = ({
   );
 };
 
-export default VitalsMonitorAssetPopover;
+export default MonitorAssetPopover;
diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
@@ -1,5 +1,5 @@
 import { AssetData } from "../Assets/AssetTypes";
-import VitalsMonitorAssetPopover from "./VitalsMonitorAssetPopover";
+import MonitorAssetPopover from "../Common/MonitorAssetPopover";
 
 interface IVitalsMonitorFooterProps {
   asset?: AssetData;
@@ -9,7 +9,10 @@ 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>
-      <VitalsMonitorAssetPopover asset={asset} />
+      <MonitorAssetPopover
+        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"
+      />
     </div>
   );
 };