From 45b3544bc8246f49bd9113b0d9bea6936adc0ad1 Mon Sep 17 00:00:00 2001 From: rithviknishad Date: Wed, 10 Jul 2024 18:11:53 +0530 Subject: [PATCH 01/18] Enhancements to Camera Feed Component --- src/CAREUI/display/NetworkSignal.tsx | 2 +- src/CAREUI/interactive/KeyboardShortcut.tsx | 2 +- src/Components/CameraFeed/AssetBedSelect.tsx | 86 +++++---- src/Components/CameraFeed/CameraFeed.tsx | 45 ++++- .../CameraFeed/CameraFeedWithBedPresets.tsx | 1 + src/Components/CameraFeed/FeedButton.tsx | 5 +- .../ConsultationFeedTab.tsx | 179 +++++++++--------- .../Facility/ConsultationDetails/index.tsx | 2 +- 8 files changed, 179 insertions(+), 143 deletions(-) diff --git a/src/CAREUI/display/NetworkSignal.tsx b/src/CAREUI/display/NetworkSignal.tsx index 91ce6b58b4c..d241a37674a 100644 --- a/src/CAREUI/display/NetworkSignal.tsx +++ b/src/CAREUI/display/NetworkSignal.tsx @@ -45,7 +45,7 @@ export default function NetworkSignal({ strength, children }: Props) { i === 2 && "h-[15px]", // Whether to infill with strength color or not - strength > i ? "bg-current" : "bg-zinc-600", + strength > i ? "bg-current" : "bg-zinc-500/30", )} /> )) diff --git a/src/CAREUI/interactive/KeyboardShortcut.tsx b/src/CAREUI/interactive/KeyboardShortcut.tsx index 06ce149fb51..fe19ce1eb88 100644 --- a/src/CAREUI/interactive/KeyboardShortcut.tsx +++ b/src/CAREUI/interactive/KeyboardShortcut.tsx @@ -25,7 +25,7 @@ export default function KeyboardShortcut(props: Props) { )} > {props.helpText} - + {getShortcutKeyDescription(props.shortcut).join(" + ")} diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx index 3d7b7ab0951..29bcc31ab96 100644 --- a/src/Components/CameraFeed/AssetBedSelect.tsx +++ b/src/Components/CameraFeed/AssetBedSelect.tsx @@ -3,8 +3,10 @@ import { AssetBedModel } from "../Assets/AssetTypes"; import { Listbox, Transition } from "@headlessui/react"; import CareIcon from "../../CAREUI/icons/CareIcon"; import { classNames } from "../../Utils/utils"; +import { dropdownOptionClassNames } from "../Form/MultiSelectMenuV2"; interface Props { + disabled?: boolean; options: AssetBedModel[]; value?: AssetBedModel; label?: (value: AssetBedModel) => string; @@ -15,23 +17,31 @@ export default function CameraPresetSelect(props: Props) { const label = props.label ?? defaultLabel; return ( <> -
- {/* Desktop View */} + {/* Desktop View */} +
{props.options .slice(0, props.options.length > 5 ? 4 : 5) - .map((option) => ( - - ))} + .map((option) => { + const selected = props.value?.id === option.id; + + return ( + + ); + })} {props.options.length > 5 && ( )}
+ + {/* Mobile View */}
- {/* Mobile View */}
@@ -62,16 +73,17 @@ export const CameraPresetDropdown = (
+ classNames( + "relative flex min-w-40 max-w-56 items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap rounded border px-1.5 py-1 pr-8 text-left text-sm font-medium transition-all duration-500 ease-in-out", + selected ? "border-current" : "border-zinc-300 text-zinc-500", + open && "rounded-b-none ring-1 ring-gray-400", + ) + } > {options.length === 0 @@ -80,38 +92,32 @@ export const CameraPresetDropdown = ( ? label(selected) : props.placeholder} + {selected && ( + + )} - + {options?.map((obj) => ( - `relative cursor-default select-none px-2 py-1 ${ - active ? "bg-zinc-700 text-white" : "text-zinc-400" - }` + className={(args) => + classNames(dropdownOptionClassNames(args), "px-2 py-1.5") } value={obj} > - {({ selected }) => ( - <> - - {label(obj)} - - - )} + {label(obj)} ))} diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx index 64b37587cb9..47f421ed2bb 100644 --- a/src/Components/CameraFeed/CameraFeed.tsx +++ b/src/Components/CameraFeed/CameraFeed.tsx @@ -10,7 +10,6 @@ import FeedNetworkSignal from "./FeedNetworkSignal"; import NoFeedAvailable from "./NoFeedAvailable"; import FeedControls from "./FeedControls"; import FeedWatermark from "./FeedWatermark"; -import CareIcon from "../../CAREUI/icons/CareIcon"; import useFullscreen from "../../Common/hooks/useFullscreen"; interface Props { @@ -96,23 +95,49 @@ export default function CameraFeed(props: Props) {
-
- {props.children} +
{ + if (player.status !== "playing") { + return "bg-zinc-700 text-zinc-400"; + } + + if (isFullscreen) { + return "bg-zinc-900 text-white"; + } + + return "bg-zinc-100 to-zinc-800"; + })(), + )} + > +
+ {props.children} +
- - + {props.asset.name} {!isIOS && ( -
+
{loading ? ( diff --git a/src/Components/CameraFeed/FeedButton.tsx b/src/Components/CameraFeed/FeedButton.tsx index f0e568d4ad4..1269aff01ac 100644 --- a/src/Components/CameraFeed/FeedButton.tsx +++ b/src/Components/CameraFeed/FeedButton.tsx @@ -34,7 +34,10 @@ export default function FeedButton(props: Props) { shortcut={props.shortcut} onTrigger={props.onTrigger} helpText={props.helpText} - tooltipClassName={props.tooltipClassName} + tooltipClassName={classNames( + props.tooltipClassName, + "hidden lg:inline-flex", + )} > {child} diff --git a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx index 378f16eb7ed..ecc25b210bd 100644 --- a/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx +++ b/src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx @@ -8,7 +8,6 @@ import Loading from "../../Common/Loading"; import AssetBedSelect from "../../CameraFeed/AssetBedSelect"; import { triggerGoal } from "../../../Integrations/Plausible"; import useAuthUser from "../../../Common/hooks/useAuthUser"; -import PageTitle from "../../Common/PageTitle"; import useSlug from "../../../Common/hooks/useSlug"; import CareIcon from "../../../CAREUI/icons/CareIcon"; import ButtonV2 from "../../Common/components/ButtonV2"; @@ -18,6 +17,8 @@ import useOperateCamera, { import request from "../../../Utils/request/request"; import { classNames, isIOS } from "../../../Utils/utils"; import ConfirmDialog from "../../Common/ConfirmDialog"; +import useBreakpoints from "../../../Common/hooks/useBreakpoints"; +import { Warn } from "../../../Utils/Notifications"; export const ConsultationFeedTab = (props: ConsultationTabProps) => { const authUser = useAuthUser(); @@ -33,6 +34,18 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => { const [key, setKey] = useState(0); const divRef = useRef(); + const suggestOptimalExperience = useBreakpoints({ default: true, sm: false }); + + useEffect(() => { + if (suggestOptimalExperience) { + Warn({ + msg: isIOS + ? "For optimal viewing experience, ensure auto-rotate is enabled in your device settings." + : "For optimal viewing experience, consider rotating your device.", + }); + } + }, []); + const operate = useOperateCamera(asset?.id ?? "", true); const { data, loading, refetch } = useQuery(routes.listAssetBeds, { @@ -108,97 +121,85 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => { onConfirm={handleUpdatePreset} /> -
- - - - For better experience, rotate your device. - -
- setHasMoved(true)} - onReset={() => { - if (isIOS) { - setKey(key + 1); - } - }} - 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", - }); - }} - > -
- {presets ? ( - <> - obj.meta.preset_name} - value={preset} - onChange={(value) => { - triggerGoal("Camera Preset Clicked", { - presetName: preset?.meta?.preset_name, - consultationId: props.consultationId, - userId: authUser.id, - result: "success", - }); - setHasMoved(false); - setPreset(value); - }} +
+ setHasMoved(true)} + onReset={() => { + if (isIOS) { + setKey(key + 1); + } + }} + 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", + }); + }} + > +
+ {presets ? ( + <> + obj.meta.preset_name} + value={preset} + onChange={(value) => { + triggerGoal("Camera Preset Clicked", { + presetName: preset?.meta?.preset_name, + consultationId: props.consultationId, + userId: authUser.id, + result: "success", + }); + setHasMoved(false); + setPreset(value); + }} + /> + {isUpdatingPreset ? ( + - {isUpdatingPreset ? ( + ) : ( + setShowPresetSaveConfirmation(true)} + > - ) : ( - setShowPresetSaveConfirmation(true)} - > - - - )} - - ) : ( - loading presets... - )} -
- -
+ + )} + + ) : ( + loading presets... + )} +
+
); diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx index e46db70189a..5d007343769 100644 --- a/src/Components/Facility/ConsultationDetails/index.tsx +++ b/src/Components/Facility/ConsultationDetails/index.tsx @@ -215,7 +215,7 @@ export const ConsultationDetails = (props: any) => { return (
-
+