Migrate Consultation Camera Feed to use newer camera feed components

src/Components/CameraFeed/AssetBedSelect.tsx

@@ -28,12 +28,20 @@ export default function AssetBedSelect(props: Props) {
 
   const selected = props.value;
 
+  const label = (obj: AssetBedModel) => {
+    return props.bed
+      ? obj.meta.preset_name
+      : `${obj.bed_object.name}: ${obj.meta.preset_name}`;
+  };
+
+  const options = data?.results.filter(({ meta }) => meta.type !== "boundary");
+
   return (
     <Listbox value={selected} onChange={props.onChange} disabled={loading}>
       <div className="relative">
         <Listbox.Button className="relative w-full cursor-default pr-6 text-right text-xs text-zinc-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 sm:text-sm">
           <span className="block truncate">
-            {selected?.bed_object.name ?? "No Preset"}
+            {selected ? label(selected) : "No Preset"}
           </span>
           <span className="pointer-events-none absolute inset-y-0 right-0 mt-1 flex items-center">
             <CareIcon icon="l-angle-down" className="text-lg text-zinc-500" />
@@ -46,7 +54,7 @@ export default function AssetBedSelect(props: Props) {
           leaveTo="opacity-0"
         >
           <Listbox.Options className="absolute z-20 mt-1 max-h-48 w-full overflow-auto rounded-b-lg bg-zinc-900/75 py-1 text-base shadow-lg ring-1 ring-white/5 backdrop-blur-sm focus:outline-none sm:text-sm md:max-h-60">
-            {data?.results.map((obj) => (
+            {options?.map((obj) => (
               <Listbox.Option
                 key={obj.id}
                 className={({ active }) =>
@@ -63,7 +71,7 @@ export default function AssetBedSelect(props: Props) {
                         selected ? "font-bold text-white" : "font-normal"
                       }`}
                     >
-                      {obj.bed_object.name}: {obj.meta.preset_name}
+                      {label(obj)}
                     </span>
                   </>
                 )}

src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx

@@ -1,10 +1,48 @@
-import { lazy } from "react";
-import { Feed } from "../Consultations/Feed";
+import { lazy, useState } from "react";
 import { ConsultationTabProps } from "./index";
+import { AssetBedModel, AssetData } from "../../Assets/AssetTypes";
+import routes from "../../../Redux/api";
+import useQuery from "../../../Utils/request/useQuery";
+import CameraFeed from "../../CameraFeed/CameraFeed";
+import Loading from "../../Common/Loading";
+import AssetBedSelect from "../../CameraFeed/AssetBedSelect";
+import { triggerGoal } from "../../../Integrations/Plausible";
+import useAuthUser from "../../../Common/hooks/useAuthUser";
 
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
 
 export const ConsultationFeedTab = (props: ConsultationTabProps) => {
+  const authUser = useAuthUser();
+  const bed = props.consultationData.current_bed?.bed_object;
+
+  const [asset, setAsset] = useState<AssetData>();
+  const [preset, setPreset] = useState<AssetBedModel>();
+
+  const { loading } = useQuery(routes.listAssetBeds, {
+    query: { bed: bed?.id },
+    prefetch: !!bed,
+    onResponse: ({ data }) => {
+      if (!data) {
+        return;
+      }
+
+      const preset = data.results.find(
+        (obj) =>
+          obj.asset_object.meta?.asset_type === "CAMERA" &&
+          obj.meta.type !== "boundary",
+      );
+
+      if (preset) {
+        setPreset(preset);
+        setAsset(preset.asset_object);
+      }
+    },
+  });
+
+  if (!bed) {
+    return <span>No bed allocated</span>;
+  }
+
   return (
     <div>
       <PageTitle
@@ -13,10 +51,46 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
         hideBack={true}
         focusOnLoad={true}
       />
-      <Feed
-        facilityId={props.facilityId}
-        consultationId={props.consultationId}
-      />
+      {loading || !asset ? (
+        <Loading />
+      ) : (
+        <CameraFeed
+          asset={asset}
+          silent
+          preset={preset?.meta.position}
+          onStreamError={() => {
+            triggerGoal("Camera Feed Viewed", {
+              consultationId: props.consultationId,
+              userId: authUser.id,
+              result: "error",
+            });
+          }}
+          onStreamSuccess={() => {
+            triggerGoal("Camera Feed Viewed", {
+              consultationId: props.consultationId,
+              userId: authUser.id,
+              result: "success",
+            });
+          }}
+        >
+          <div className="w-64">
+            <AssetBedSelect
+              asset={asset}
+              bed={bed}
+              value={preset}
+              onChange={(value) => {
+                triggerGoal("Camera Preset Clicked", {
+                  presetName: preset?.meta?.preset_name,
+                  consultationId: props.consultationId,
+                  userId: authUser.id,
+                  result: "success",
+                });
+                setPreset(value);
+              }}
+            />
+          </div>
+        </CameraFeed>
+      )}
     </div>
   );
 };

src/Components/Facility/ConsultationDetails/index.tsx

@@ -208,57 +208,6 @@ export const ConsultationDetails = (props: any) => {
       selected === true ? "border-primary-500 text-primary-600 border-b-2" : ""
     }`;
 
-  // const ShowDiagnosis = ({
-  //   diagnoses = [],
-  //   label = "Diagnosis",
-  //   nshow = 2,
-  // }: {
-  //   diagnoses: ICD11DiagnosisModel[] | undefined;
-  //   label: string;
-  //   nshow?: number;
-  // }) => {
-  //   const [showMore, setShowMore] = useState(false);
-
-  //   return diagnoses.length ? (
-  //     <div className="w-full text-sm">
-  //       <p className="font-semibold leading-relaxed">{label}</p>
-  //       {diagnoses.slice(0, !showMore ? nshow : undefined).map((diagnosis) =>
-  //         diagnosis.id === consultationData.icd11_principal_diagnosis ? (
-  //           <div className="relative flex items-center gap-2">
-  //             <p>{diagnosis.label}</p>
-  //             <div>
-  //               <ToolTip text="Principal Diagnosis" position="BOTTOM">
-  //                 <CareIcon icon="l-stethoscope" className="rounded-lg bg-primary-500 p-1 text-2xl text-white"/>
-  //               </ToolTip>
-  //             </div>
-  //           </div>
-  //         ) : (
-  //           <p>{diagnosis.label}</p>
-  //         )
-  //       )}
-  //       {diagnoses.length > nshow && (
-  //         <>
-  //           {!showMore ? (
-  //             <a
-  //               onClick={() => setShowMore(true)}
-  //               className="cursor-pointer text-sm text-blue-600 hover:text-blue-300"
-  //             >
-  //               show more
-  //             </a>
-  //           ) : (
-  //             <a
-  //               onClick={() => setShowMore(false)}
-  //               className="cursor-pointer text-sm text-blue-600 hover:text-blue-300"
-  //             >
-  //               show less
-  //             </a>
-  //           )}
-  //         </>
-  //       )}
-  //     </div>
-  //   ) : null;
-  // };
-
   return (
     <div>
       <div className="px-2 pb-2">