Migrate Consultation Camera Feed to use newer camera feed components (#…

…7654) * Migrate consultation feed to use newer camera feed components * remove console logs * adds plausible tracking * remove unused code * Revert "remove unused code" This reverts commit ab47c1c. * fix responsiveness and full screen issues * Adds support for updating presets in consultation camera feed * disable update preset if camera not moved * fix loading state issue * revert unintended changes * fix responsiveness of tooltip
ohcnetwork · May 22, 2024 · 9194091 · 9194091
1 parent b39b28f
commit 9194091
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 103 deletions.
diff --git a/src/Common/hooks/useMSEplayer.ts b/src/Common/hooks/useMSEplayer.ts
@@ -149,7 +149,6 @@ export const useMSEMediaPlayer = ({
             const ws = wsRef.current;
             ws.binaryType = "arraybuffer";
             ws.onopen = function (_event) {
-              console.log("Connected to ws");
               onSuccess && onSuccess(undefined);
             };
             ws.onmessage = function (event) {

diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -1,39 +1,28 @@
 import { Fragment } from "react";
-import useSlug from "../../Common/hooks/useSlug";
-import routes from "../../Redux/api";
-import useQuery from "../../Utils/request/useQuery";
-import { AssetBedModel, AssetData } from "../Assets/AssetTypes";
-import { BedModel } from "../Facility/models";
+import { AssetBedModel } from "../Assets/AssetTypes";
 import { Listbox, Transition } from "@headlessui/react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 
 interface Props {
-  asset?: AssetData;
-  bed?: BedModel;
+  options: AssetBedModel[];
   value?: AssetBedModel;
+  label?: (value: AssetBedModel) => string;
   onChange?: (value: AssetBedModel) => void;
 }
 
 export default function AssetBedSelect(props: Props) {
-  const facility = useSlug("facility");
+  const selected = props.value;
 
-  const { data, loading } = useQuery(routes.listAssetBeds, {
-    query: {
-      limit: 100,
-      facility,
-      asset: props.asset?.id,
-      bed: props.bed?.id,
-    },
-  });
+  const options = props.options.filter(({ meta }) => meta.type !== "boundary");
 
-  const selected = props.value;
+  const label = props.label ?? defaultLabel;
 
   return (
-    <Listbox value={selected} onChange={props.onChange} disabled={loading}>
-      <div className="relative">
+    <Listbox value={selected} onChange={props.onChange}>
+      <div className="relative flex-1">
         <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 +35,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 +52,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>
                   </>
                 )}
@@ -75,3 +64,7 @@ export default function AssetBedSelect(props: Props) {
     </Listbox>
   );
 }
+
+const defaultLabel = ({ bed_object, meta }: AssetBedModel) => {
+  return `${bed_object.name}: ${meta.preset_name}`;
+};
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
@@ -24,6 +24,7 @@ interface Props {
   // Controls
   constrolsDisabled?: boolean;
   shortcutsDisabled?: boolean;
+  onMove?: () => void;
 }
 
 export default function CameraFeed(props: Props) {
@@ -76,7 +77,7 @@ export default function CameraFeed(props: Props) {
       },
       onError: props.onStreamError,
     });
-  }, [player.initializeStream, props.onStreamSuccess, props.onStreamError]);
+  }, [player.initializeStream]);
 
   // Start stream on mount
   useEffect(() => initializeStream(), [initializeStream]);
@@ -90,7 +91,7 @@ export default function CameraFeed(props: Props) {
     <Fullscreen fullscreen={isFullscreen} onExit={() => setFullscreen(false)}>
       <div
         className={classNames(
-          "flex flex-col overflow-clip rounded-xl bg-black",
+          "flex max-h-screen flex-col overflow-clip rounded-xl bg-black",
           props.className,
         )}
       >
@@ -180,6 +181,7 @@ export default function CameraFeed(props: Props) {
               setFullscreen={setFullscreen}
               onReset={resetStream}
               onMove={async (data) => {
+                props.onMove?.();
                 setState("moving");
                 const { res } = await operate({ type: "relative_move", data });
                 setTimeout(() => {

diff --git a/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx b/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
@@ -2,14 +2,22 @@ import { useState } from "react";
 import { AssetBedModel, AssetData } from "../Assets/AssetTypes";
 import CameraFeed from "./CameraFeed";
 import AssetBedSelect from "./AssetBedSelect";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import useSlug from "../../Common/hooks/useSlug";
 
 interface Props {
   asset: AssetData;
 }
 
 export default function LocationFeedTile(props: Props) {
+  const facility = useSlug("facility");
   const [preset, setPreset] = useState<AssetBedModel>();
 
+  const { data, loading } = useQuery(routes.listAssetBeds, {
+    query: { limit: 100, facility, asset: props.asset?.id },
+  });
+
   return (
     <CameraFeed
       asset={props.asset}
@@ -18,11 +26,15 @@ export default function LocationFeedTile(props: Props) {
       shortcutsDisabled
     >
       <div className="w-64">
-        <AssetBedSelect
-          asset={props.asset}
-          value={preset}
-          onChange={setPreset}
-        />
+        {loading ? (
+          <span>loading presets...</span>
+        ) : (
+          <AssetBedSelect
+            options={data?.results ?? []}
+            value={preset}
+            onChange={setPreset}
+          />
+        )}
       </div>
     </CameraFeed>
   );

diff --git a/src/Components/CameraFeed/FeedControls.tsx b/src/Components/CameraFeed/FeedControls.tsx
@@ -87,6 +87,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Up"
               shortcut={Shortcuts.MoveUp}
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 md:translate-y-0"
             >
               <CareIcon icon="l-triangle" className="rotate-0" />
             </FeedButton>
@@ -102,6 +103,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Left"
               shortcut={Shortcuts.MoveLeft}
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 -translate-x-1 md:translate-x-0 md:translate-y-0"
             >
               <CareIcon icon="l-triangle" className="-rotate-90" />
             </FeedButton>
@@ -114,6 +116,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               shortcut={Shortcuts.TogglePrecision}
               className="font-bold"
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 -translate-x-20 md:translate-x-0 md:translate-y-0"
             >
               {precision}x
             </FeedButton>
@@ -125,6 +128,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Right"
               shortcut={Shortcuts.MoveRight}
               shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="-translate-y-20 -translate-x-2 md:translate-x-0 md:translate-y-0"
             >
               <CareIcon icon="l-triangle" className="rotate-90" />
             </FeedButton>
@@ -142,7 +146,7 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
               helpText="Down"
               shortcut={Shortcuts.MoveDown}
               shortcutsDisabled={shortcutsDisabled}
-              tooltipClassName="tooltip-top"
+              tooltipClassName="-translate-y-20 -translate-x-2 md:-translate-x-14"
             >
               <CareIcon icon="l-triangle" className="rotate-180" />
             </FeedButton>
@@ -185,16 +189,6 @@ export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
           >
             <CareIcon icon="l-redo" />
           </FeedButton>
-          {/* TODO: implement this when this is used in where presets can be saved. */}
-          {/* <FeedButton
-                shortcut={Shortcuts.SavePreset}
-                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-                helpText="Save current view to preset"
-                onTrigger={() => console.error("Not implemented")}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon icon="l-save" />
-              </FeedButton> */}
           <FeedButton
             shortcut={Shortcuts.Fullscreen}
             tooltipClassName="tooltip-left translate-y-2 translate-x-1"

diff --git a/src/Components/CameraFeed/FeedNetworkSignal.tsx b/src/Components/CameraFeed/FeedNetworkSignal.tsx
@@ -25,7 +25,7 @@ export default function FeedNetworkSignal(props: Props) {
       if (-5 > delay || delay > 5) {
         props.onReset();
       }
-    }, 500);
+    }, 1000);
 
     return () => {
       clearInterval(interval);

diff --git a/src/Components/Common/PageTitle.tsx b/src/Components/Common/PageTitle.tsx
@@ -47,7 +47,7 @@ export default function PageTitle({
 
   useEffect(() => {
     if (divRef.current && focusOnLoad) {
-      divRef.current.scrollIntoView();
+      divRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [divRef, focusOnLoad]);