Merge branch 'develop' into rithviknishad/feat/camera-feed-watermark

coronasafe · May 28, 2024 · 0644de8 · 0644de8
2 parents 068445a + 828cd50
commit 0644de8
Show file tree

Hide file tree

Showing 17 changed files with 1,340 additions and 226 deletions.
diff --git a/src/Common/constants.tsx b/src/Common/constants.tsx
@@ -1308,7 +1308,7 @@ export const CONSENT_PATIENT_CODE_STATUS_CHOICES = [
   { id: 1, text: "Do Not Hospitalise (DNH)" },
   { id: 2, text: "Do Not Resuscitate (DNR)" },
   { id: 3, text: "Comfort Care Only" },
-  { id: 4, text: "Active treatment (Default)" },
+  { id: 4, text: "Active treatment" },
 ];
 export const OCCUPATION_TYPES = [
   {

diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -2,6 +2,7 @@ import { Fragment } from "react";
 import { AssetBedModel } from "../Assets/AssetTypes";
 import { Listbox, Transition } from "@headlessui/react";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import { classNames } from "../../Utils/utils";
 
 interface Props {
   options: AssetBedModel[];
@@ -10,7 +11,40 @@ interface Props {
   onChange?: (value: AssetBedModel) => void;
 }
 
-export default function AssetBedSelect(props: Props) {
+export default function CameraPresetSelect(props: Props) {
+  const label = props.label ?? defaultLabel;
+  return (
+    <>
+      <div className="hidden gap-2 whitespace-nowrap pr-2 md:flex">
+        {props.options
+          .slice(0, props.options.length > 5 ? 4 : 5)
+          .map((option) => (
+            <button
+              className={classNames(
+                "rounded-xl border px-2 py-0.5 text-xs transition-all duration-200 ease-in-out hover:bg-zinc-600",
+                props.value?.id === option.id
+                  ? "border-white bg-zinc-100 font-bold text-black"
+                  : "border-white/50 text-zinc-100",
+              )}
+              onClick={() => props.onChange?.(option)}
+            >
+              {label(option)}
+            </button>
+          ))}
+        {/* Desktop View */}
+        {props.options.length > 5 && (
+          <ShowMoreDropdown {...props} options={props.options.slice(4)} />
+        )}
+      </div>
+      <div className="md:hidden">
+        {/* Mobile View */}
+        <ShowMoreDropdown {...props} />
+      </div>
+    </>
+  );
+}
+
+const ShowMoreDropdown = (props: Props) => {
   const selected = props.value;
 
   const options = props.options.filter(({ meta }) => meta.type !== "boundary");
@@ -20,7 +54,7 @@ export default function AssetBedSelect(props: Props) {
   return (
     <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">
+        <Listbox.Button className="relative w-full cursor-default pr-6 text-right text-xs text-white focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 sm:text-sm md:pl-2">
           <span className="block truncate">
             {selected ? label(selected) : "No Preset"}
           </span>
@@ -63,7 +97,7 @@ export default function AssetBedSelect(props: Props) {
       </div>
     </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
@@ -11,6 +11,7 @@ import NoFeedAvailable from "./NoFeedAvailable";
 import FeedControls from "./FeedControls";
 import Fullscreen from "../../CAREUI/misc/Fullscreen";
 import FeedWatermark from "./FeedWatermark";
+import CareIcon from "../../CAREUI/icons/CareIcon";
 
 interface Props {
   children?: React.ReactNode;
@@ -96,8 +97,13 @@ export default function CameraFeed(props: Props) {
         )}
       >
         <div className="flex items-center justify-between bg-zinc-900 px-4 py-0.5">
-          <div className="flex items-center gap-1 md:gap-2">
+          {props.children}
+          <div className="flex w-full items-center justify-end gap-1 md:gap-4">
             <span className="text-xs font-semibold text-white md:text-sm">
+              <CareIcon
+                icon="l-video"
+                className="hidden pr-2 text-base text-zinc-400 md:inline-block"
+              />
               {props.asset.name}
             </span>
             <div className={state === "loading" ? "animate-pulse" : ""}>
@@ -109,7 +115,6 @@ export default function CameraFeed(props: Props) {
               />
             </div>
           </div>
-          {props.children}
         </div>
 
         <div className="group relative aspect-video">

diff --git a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx
@@ -120,7 +120,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
             });
           }}
         >
-          <div className="flex w-36 items-center justify-end md:w-64">
+          <div className="flex items-center">
             {presets ? (
               <>
                 <AssetBedSelect
@@ -141,27 +141,30 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
                 {isUpdatingPreset ? (
                   <CareIcon
                     icon="l-spinner"
-                    className="animate-spin text-base text-zinc-500 md:mx-2"
+                    className="animate-spin text-base text-zinc-300 md:mx-2"
                   />
                 ) : (
                   <ButtonV2
                     size="small"
                     variant="secondary"
                     disabled={!hasMoved}
-                    className="disabled:bg-transparent disabled:text-zinc-700"
+                    className="hover:bg-zinc-700 disabled:bg-transparent"
                     ghost
                     tooltip={
                       hasMoved
-                        ? "Save current position to preset"
+                        ? "Save current position to selected preset"
                         : "Change camera position to update preset"
                     }
-                    tooltipClassName={classNames(
-                      "translate-y-8 text-xs",
-                      hasMoved ? "-translate-x-20" : "-translate-x-28",
-                    )}
+                    tooltipClassName="translate-y-8 text-xs"
                     onClick={handleUpdatePreset}
                   >
-                    <CareIcon icon="l-save" className="text-base" />
+                    <CareIcon
+                      icon="l-save"
+                      className={classNames(
+                        "text-base",
+                        hasMoved ? "text-gray-200" : "text-gray-500",
+                      )}
+                    />
                   </ButtonV2>
                 )}
               </>