stash

src/CAREUI/interactive/KeyboardShortcut.tsx

@@ -0,0 +1,49 @@
+import useKeyboardShortcut from "use-keyboard-shortcut";
+import { classNames, isAppleDevice } from "../../Utils/utils";
+
+interface Props {
+  children: React.ReactNode;
+  shortcut: string[];
+  onTrigger: () => void;
+  shortcutSeperator?: string;
+  helpText?: string;
+  tooltipClassName?: string;
+}
+
+export default function KeyboardShortcut(props: Props) {
+  useKeyboardShortcut(props.shortcut, props.onTrigger, {
+    overrideSystem: true,
+  });
+
+  return (
+    <div className="tooltip">
+      {props.children}
+      <span
+        className={classNames(
+          "tooltip-text flex items-center gap-0.5 text-xs",
+          props.tooltipClassName || "tooltip-bottom"
+        )}
+      >
+        <span className="px-1 font-bold">{props.helpText}</span>
+        <kbd className="hidden items-center px-1.5 font-sans font-medium text-zinc-300 shadow md:inline-flex">
+          {getShortcutKeyDescription(props.shortcut).join(" + ")}
+        </kbd>
+      </span>
+    </div>
+  );
+}
+
+const SHORTCUT_KEY_MAP = {
+  Meta: "⌘",
+  Shift: "⇧Shift",
+  Alt: "⌥Alt",
+  Control: isAppleDevice ? "⌃Ctrl" : "Ctrl",
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+} as Record<string, string>;
+
+export const getShortcutKeyDescription = (shortcut: string[]) => {
+  return shortcut.map((key) => SHORTCUT_KEY_MAP[key] || key);
+};

src/CAREUI/misc/Fullscreen.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+
+interface Props {
+  children: React.ReactNode;
+  fullscreen: boolean;
+  onExit: () => void;
+}
+
+export default function Fullscreen({ children, fullscreen, onExit }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (fullscreen) {
+      ref.current?.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  }, [fullscreen]);
+
+  useEffect(() => {
+    const listener = () => {
+      if (!document.fullscreenElement) {
+        onExit();
+      }
+    };
+
+    document.addEventListener("fullscreenchange", listener);
+    return () => {
+      document.removeEventListener("fullscreenchange", listener);
+    };
+  }, [onExit]);
+
+  return <div ref={ref}>{children}</div>;
+}

src/Components/Assets/AssetTypes.tsx

@@ -12,6 +12,7 @@ export interface AssetLocationObject {
     id: string;
     name: string;
   };
+  middleware_address?: string;
 }
 
 export enum AssetType {

src/Components/Facility/Consultations/Feed.tsx

@@ -581,7 +581,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
               );
             }
           )}
-          <div className="hideonmobilescreen pl-3">
+          <div className="hidden pl-3 md:block">
             <FeedCameraPTZHelpButton cameraPTZ={cameraPTZ} />
           </div>
         </div>

src/Components/Facility/Consultations/LiveFeed.tsx

@@ -454,7 +454,7 @@ const LiveFeed = (props: any) => {
                   </button>
                 );
               })}
-              <div className="hideonmobilescreen pl-3">
+              <div className="hidden pl-3 md:block">
                 <FeedCameraPTZHelpButton cameraPTZ={cameraPTZ} />
               </div>
             </div>

src/Components/Facility/FacilityHome.tsx

@@ -622,7 +622,11 @@ export const FacilityHome = (props: any) => {
                 ghost
                 border
                 className="mt-2 flex w-full flex-row justify-center md:w-auto"
-                onClick={() => navigate(`/facility/${facilityId}/livefeed`)}
+                onClick={() =>
+                  navigate(
+                    `/facility/${facilityId}/location/09ab6e88-9132-434a-b8ab-b342b10e7bef/feed`
+                  )
+                }
               >
                 <CareIcon icon="l-video" className="text-lg" />
                 <span>Live Monitoring</span>