From 84ab7fbd4547d167e528af8e45b519574ff1277e Mon Sep 17 00:00:00 2001
From: Jacobjohnjeevan <mail@jacobjeevan.me>
Date: Wed, 25 Sep 2024 10:09:06 +0530
Subject: [PATCH] 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
---
 src/Components/CameraFeed/CameraFeed.tsx      |  5 +++++
 .../MonitorAssetPopover.tsx}                  | 22 ++++++++++++-------
 .../VitalsMonitor/VitalsMonitorFooter.tsx     |  7 ++++--
 3 files changed, 24 insertions(+), 10 deletions(-)
 rename src/Components/{VitalsMonitor/VitalsMonitorAssetPopover.tsx => Common/MonitorAssetPopover.tsx} (82%)

diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index 863a6bbac8a..832d1f1a10b 100644
--- 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/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx b/src/Components/Common/MonitorAssetPopover.tsx
similarity index 82%
rename from src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
rename to src/Components/Common/MonitorAssetPopover.tsx
index 7ee5bf6c898..0e0a344e146 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx
+++ b/src/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
index 906495b93b5..1c669cd5bbf 100644
--- 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>
   );
 };