Camera Feed: Improve watermark and preset sizes in mobile view (#7935)

* Camera Feed: Improve watermark and preset sizes in mobile view

* adds notification and correct sizes

* decrease watermark opacity to 20

* fixed width for preset sizes

* add warning for char. limit of preset name

* add banding for mobile landscape view to maintain aspect ratio and fit feed content

* min width for preset buttons

* improve responsiveness

src/CAREUI/display/NetworkSignal.tsx

@@ -19,7 +19,7 @@ export default function NetworkSignal({ strength, children }: Props) {
   return (
     <div
       className={classNames(
-        "flex items-center", // Strength colors
+        "relative flex items-center", // Strength colors
         strength === 0 && "text-danger-500",
         strength === 1 && "text-danger-500",
         strength === 2 && "text-warning-500",
@@ -50,6 +50,12 @@ export default function NetworkSignal({ strength, children }: Props) {
             />
           ))
         )}
+        {!!strength && strength < 2 && (
+          <CareIcon
+            icon="l-exclamation-circle"
+            className="absolute left-0.5 top-0 animate-pulse text-sm text-danger-500"
+          />
+        )}
       </div>
       {children}
     </div>

src/Components/Assets/configure/CameraConfigure.tsx

@@ -7,6 +7,7 @@ import { getCameraConfig } from "../../../Utils/transformUtils";
 import { Submit } from "../../Common/components/ButtonV2";
 import TextFormField from "../../Form/FormFields/TextFormField";
 import Card from "../../../CAREUI/display/Card";
+import { FieldErrorText } from "../../Form/FormFields/FormField";
 
 interface CameraConfigureProps {
   asset: AssetData;
@@ -59,8 +60,14 @@ export default function CameraConfigure(props: CameraConfigureProps) {
                 value={newPreset}
                 className="mt-1"
                 onChange={(e) => setNewPreset(e.value)}
-                error=""
+                errorClassName="hidden"
               />
+              {newPreset.length > 12 && (
+                <FieldErrorText
+                  error="It is advisable to keep preset name below 12 characters"
+                  className="!text-warning-500"
+                />
+              )}
             </div>
           </div>
           <div className="mt-4 flex justify-end">

src/Components/CameraFeed/AssetBedSelect.tsx

@@ -15,28 +15,32 @@ export default function CameraPresetSelect(props: Props) {
   const label = props.label ?? defaultLabel;
   return (
     <>
-      <div className="hidden gap-2 whitespace-nowrap pr-2 md:flex">
+      <div className="hidden gap-4 whitespace-nowrap pr-2 lg:flex lg:gap-2">
         {/* Desktop View */}
         {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",
+                "min-w-16 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-0.5 text-base 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",
+                  : "border-zinc-700 font-medium text-zinc-300",
               )}
               onClick={() => props.onChange?.(option)}
             >
               {label(option)}
             </button>
           ))}
         {props.options.length > 5 && (
-          <CameraPresetDropdown {...props} options={props.options.slice(4)} />
+          <CameraPresetDropdown
+            {...props}
+            options={props.options.slice(4)}
+            value={props.options.slice(4).find((o) => o.id === props.value?.id)}
+          />
         )}
       </div>
-      <div className="md:hidden">
+      <div className="w-full lg:hidden">
         {/* Mobile View */}
         <CameraPresetDropdown {...props} />
       </div>
@@ -54,17 +58,19 @@ export const CameraPresetDropdown = (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-left 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={classNames(
-              "block truncate",
-              !selected && "text-gray-500",
-            )}
-          >
+        <Listbox.Button
+          className={classNames(
+            "relative min-w-32 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-0.5 pr-8 text-left text-base transition-all duration-200 ease-in-out hover:bg-zinc-600 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700",
+            selected
+              ? "border-white bg-zinc-100 font-bold text-black"
+              : "border-zinc-700 font-medium text-zinc-300",
+          )}
+        >
+          <span className="block truncate">
             {selected ? label(selected) : "Select 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" />
+          <span className="pointer-events-none absolute inset-y-0 right-0 mr-1 mt-1 flex items-center">
+            <CareIcon icon="l-angle-down" className="text-xl text-zinc-400" />
           </span>
         </Listbox.Button>
         <Transition
@@ -73,7 +79,7 @@ export const CameraPresetDropdown = (props: Props) => {
           leaveFrom="opacity-100"
           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">
+          <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 md:max-h-60">
             {options?.map((obj) => (
               <Listbox.Option
                 key={obj.id}
@@ -87,7 +93,7 @@ export const CameraPresetDropdown = (props: Props) => {
                 {({ selected }) => (
                   <>
                     <span
-                      className={`block truncate text-xs md:text-sm ${
+                      className={`block truncate text-sm md:text-base ${
                         selected ? "font-bold text-white" : "font-normal"
                       }`}
                     >

src/Components/CameraFeed/CameraFeed.tsx

@@ -96,13 +96,13 @@ export default function CameraFeed(props: Props) {
           props.className,
         )}
       >
-        <div className="flex items-center justify-between bg-zinc-900 px-4 py-0.5">
+        <div className="flex items-center justify-between bg-zinc-900 px-4 py-1.5 md:py-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">
+            <span className="text-base font-semibold text-white">
               <CareIcon
                 icon="l-video"
-                className="hidden pr-2 text-base text-zinc-400 md:inline-block"
+                className="hidden pr-2 text-lg text-zinc-400 md:inline-block"
               />
               {props.asset.name}
             </span>
@@ -170,7 +170,7 @@ export default function CameraFeed(props: Props) {
           ) : (
             <video
               onContextMenu={(e) => e.preventDefault()}
-              className="absolute inset-0 w-full"
+              className="absolute inset-x-0 mx-auto aspect-video max-h-screen w-full"
               id="mse-video"
               autoPlay
               muted

src/Components/CameraFeed/FeedWatermark.tsx

@@ -8,12 +8,12 @@ export default function FeedWatermark() {
       <Watermark className="left-1/3 top-1/3 -translate-x-1/2 -translate-y-1/2">
         {me.username}
       </Watermark>
-      <Watermark className="right-1/3 top-1/3 -translate-y-1/2 translate-x-1/2">
+      {/* <Watermark className="right-1/3 top-1/3 -translate-y-1/2 translate-x-1/2">
         {me.username}
       </Watermark>
       <Watermark className="bottom-1/3 left-1/3 -translate-x-1/2 translate-y-1/2">
         {me.username}
-      </Watermark>
+      </Watermark> */}
       <Watermark className="bottom-1/3 right-1/3 translate-x-1/2 translate-y-1/2">
         {me.username}
       </Watermark>
@@ -47,7 +47,7 @@ const Watermark = (props: { children: string; className: string }) => {
   return (
     <span
       ref={ref}
-      className={`absolute z-10 text-2xl font-bold text-white/30 ${props.className}`}
+      className={`absolute z-10 font-bold text-white/20 md:text-2xl ${props.className}`}
     >
       {props.children}
     </span>

src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx

@@ -100,6 +100,10 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
         hideBack={true}
         focusOnLoad={false}
       />
+      <span className="mb-2 flex rounded-lg border border-warning-400 bg-warning-100 px-2 py-1 text-sm font-medium text-warning-700 sm:hidden">
+        <CareIcon icon="l-exclamation-triangle" className="pr-2 text-base" />
+        For better experience, rotate your device.
+      </span>
       <div ref={divRef}>
         <CameraFeed
           asset={asset}
@@ -161,7 +165,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
                     <CareIcon
                       icon="l-save"
                       className={classNames(
-                        "text-base",
+                        "text-lg",
                         hasMoved ? "text-gray-200" : "text-gray-500",
                       )}
                     />