Added Asset Info Popover to Camera Feed in Consultation Page

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(

src/Components/VitalsMonitor/VitalsMonitorAssetPopover.tsx → 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">
+                {t("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">
+                {t("local_ipaddress")}:
+              </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;

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>
   );
 };

src/Locale/en/Common.json

@@ -230,5 +230,7 @@
   "SORT_OPTIONS__name": "Patient name A-Z",
   "SORT_OPTIONS__-name": "Patient name Z-A",
   "SORT_OPTIONS__bed__name": "Bed No. 1-N",
-  "SORT_OPTIONS__-bed__name": "Bed No. N-1"
+  "SORT_OPTIONS__-bed__name": "Bed No. N-1",
+  "middleware_hostname": "Middleware Hostname",
+  "local_ipaddress": "Local IP Address"
 }

src/Locale/hi/Common.json

@@ -219,5 +219,7 @@
   "SORT_OPTIONS__name": "मरीज़ का नाम AZ",
   "SORT_OPTIONS__-name": "मरीज का नाम ZA",
   "SORT_OPTIONS__bed__name": "बिस्तर नं. 1-एन",
-  "SORT_OPTIONS__-bed__name": "बिस्तर संख्या एन-1"
+  "SORT_OPTIONS__-bed__name": "बिस्तर संख्या एन-1",
+  "middleware_hostname": "मिडलवेयर होस्टनाम",
+  "local_ipaddress": "स्थानीय आईपी पता"
 }

src/Locale/kn/Common.json

@@ -219,5 +219,7 @@
   "SORT_OPTIONS__name": "ರೋಗಿಯ ಹೆಸರು AZ",
   "SORT_OPTIONS__-name": "ರೋಗಿಯ ಹೆಸರು ZA",
   "SORT_OPTIONS__bed__name": "ಹಾಸಿಗೆ ಸಂಖ್ಯೆ 1-N",
-  "SORT_OPTIONS__-bed__name": "ಹಾಸಿಗೆ ಸಂಖ್ಯೆ N-1"
+  "SORT_OPTIONS__-bed__name": "ಹಾಸಿಗೆ ಸಂಖ್ಯೆ N-1",
+  "middleware_hostname": "ಮಿಡಲ್ವೇರ್ ಹೋಸ್ಟ್ ಹೆಸರು",
+  "local_ipaddress": "ಸ್ಥಳೀಯ IP ವಿಳಾಸ"
 }

src/Locale/ml/Common.json

@@ -219,5 +219,7 @@
   "SORT_OPTIONS__name": "രോഗിയുടെ പേര് AZ",
   "SORT_OPTIONS__-name": "രോഗിയുടെ പേര് ZA",
   "SORT_OPTIONS__bed__name": "ബെഡ് നമ്പർ 1-N",
-  "SORT_OPTIONS__-bed__name": "കിടക്ക നമ്പർ N-1"
+  "SORT_OPTIONS__-bed__name": "കിടക്ക നമ്പർ N-1",
+  "middleware_hostname": "മിഡിൽവെയർ ഹോസ്റ്റ്നാമം",
+  "local_ipaddress": "പ്രാദേശിക ഐപി വിലാസം"
 }

src/Locale/ta/Common.json

@@ -219,5 +219,7 @@
   "SORT_OPTIONS__name": "நோயாளியின் பெயர் AZ",
   "SORT_OPTIONS__-name": "நோயாளியின் பெயர் ZA",
   "SORT_OPTIONS__bed__name": "படுக்கை எண் 1-N",
-  "SORT_OPTIONS__-bed__name": "படுக்கை எண். N-1"
+  "SORT_OPTIONS__-bed__name": "படுக்கை எண். N-1",
+  "middleware_hostname": "மிடில்வேர் ஹோஸ்ட்பெயர்",
+  "local_ipaddress": "உள்ளூர் ஐபி முகவரி"
 }