Merge pull request #8152 from coronasafe/staging

src/CAREUI/display/NetworkSignal.tsx

@@ -26,7 +26,7 @@ export default function NetworkSignal({ strength, children }: Props) {
         strength === 3 && "text-primary-500",
       )}
     >
-      <div className="flex items-end gap-0.5 p-2">
+      <div className="flex items-end gap-0.5 p-1.5 md:p-2">
         {strength === undefined ? (
           <CareIcon
             icon="l-exclamation-triangle"
@@ -53,7 +53,7 @@ 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"
+            className="absolute left-0.5 top-0.5 animate-pulse text-xs text-danger-500 md:top-0 md:text-sm"
           />
         )}
       </div>

src/Common/hooks/useFullscreen.ts

@@ -5,10 +5,7 @@ interface HTMLElementWithFullscreen extends HTMLElement {
   webkitExitFullscreen?: () => void;
 }
 
-export default function useFullscreen(): [
-  boolean,
-  (value: boolean, element?: HTMLElement) => void,
-] {
+export default function useFullscreen() {
   const [isFullscreen, _setIsFullscreen] = useState(
     !!document.fullscreenElement,
   );
@@ -39,12 +36,22 @@ export default function useFullscreen(): [
     else document.exitFullscreen();
   }
 
-  const setFullscreen = (value: boolean, element?: HTMLElement) => {
+  const setFullscreen = (
+    value: boolean,
+    element?: HTMLElement,
+    enterLandscape?: boolean,
+  ) => {
     const fullscreenElement = element ?? document.documentElement;
 
-    if (value) openFullscreen(fullscreenElement);
-    else exitFullscreen(fullscreenElement);
+    if (value) {
+      openFullscreen(fullscreenElement);
+      if (enterLandscape) {
+        (screen.orientation as any)?.lock?.("landscape");
+      }
+    } else {
+      exitFullscreen(fullscreenElement);
+    }
   };
 
-  return [isFullscreen, setFullscreen];
+  return [isFullscreen, setFullscreen] as const;
 }

src/Components/ABDM/ABHAProfileModal.tsx

@@ -67,64 +67,17 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
       }
       show={show}
       onClose={onClose}
+      className="max-w-[500px]"
+      fixedWidth={false}
     >
       <div
         ref={printRef}
         id="section-to-print"
-        className="print flex items-center justify-around border-black p-4 print:w-full print:border"
+        className="print flex flex-col gap-4 border-black sm:flex-row print:w-full print:border"
       >
-        <>
-          <div className="flex flex-col items-center justify-evenly">
-            <div className="flex items-center justify-evenly gap-2 text-lg font-semibold">
-              {abha?.name ? (
-                <span> {abha?.name}</span>
-              ) : (
-                <>
-                  <span> {abha?.first_name}</span>
-                  <span> {abha?.middle_name} </span>
-                  <span> {abha?.last_name} </span>
-                </>
-              )}
-            </div>
-            <span className="font-bold">{abha?.abha_number}</span>
-            {abha?.health_id && (
-              <div className="flex items-center gap-1 font-bold">
-                <span>{abha.health_id.split("@")[0]}</span>
-                {/* <span className="text-gray-700 text-sm">@</span>
-                <span>{abha.health_id.split("@")[1] || "care"}</span> */}
-              </div>
-            )}
-            <div className="mt-2 flex flex-col">
-              {abha?.gender && (
-                <p className="text-sm text-gray-600">
-                  Gender:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.gender}
-                  </span>
-                </p>
-              )}
-              {abha?.date_of_birth && (
-                <p className="text-sm text-gray-600">
-                  DOB:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.date_of_birth}
-                  </span>
-                </p>
-              )}
-              {abha?.email && (
-                <p className="text-sm text-gray-600">
-                  Email:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.email}
-                  </span>
-                </p>
-              )}
-            </div>
-          </div>
-        </>
-        <>
+        <div className="flex-1 sm:aspect-square sm:h-40 sm:flex-auto">
           <QRCode
-            className="border border-black p-1"
+            className="h-full w-full border border-black p-1"
             value={JSON.stringify({
               hidn: abha?.abha_number,
               phr: abha?.health_id,
@@ -136,10 +89,32 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
               "dist name": abha?.district,
             })}
           />
-        </>
+        </div>
+        <div className="flex flex-wrap gap-4">
+          {[
+            {
+              label: "Name",
+              value:
+                abha?.name ||
+                `${abha?.first_name} ${abha?.middle_name} ${abha?.last_name}`,
+            },
+            { label: "DOB", value: abha?.date_of_birth },
+            { label: "Gender", value: abha?.gender },
+            { label: "ABHA Number", value: abha?.abha_number },
+            { label: "ABHA ID", value: abha?.health_id?.split("@")[0] },
+            { label: "Email", value: abha?.email },
+          ].map((item, index) =>
+            item.value ? (
+              <div key={index}>
+                <div className="text-xs text-gray-700">{item.label}</div>
+                <div>{item.value}</div>
+              </div>
+            ) : null,
+          )}
+        </div>
       </div>
 
-      <div className="mt-4 flex flex-col text-sm text-gray-700">
+      <div className="mt-4 flex flex-col text-xs text-gray-700">
         {abha?.created_date && (
           <div className="flex items-center gap-1">
             <span className="">Created On: </span>

src/Components/CameraFeed/AssetBedSelect.tsx

@@ -67,10 +67,10 @@ export const CameraPresetDropdown = (
       <div className="relative flex-1">
         <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",
+            "relative min-w-32 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-1 pr-8 text-left text-sm font-medium 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 md:py-0.5 md:text-base",
             selected
-              ? "border-white bg-zinc-100 font-bold text-black"
-              : "border-zinc-700 font-medium text-zinc-300",
+              ? "border-zinc-700 bg-zinc-700/50 text-white md:font-bold"
+              : "border-zinc-700  text-zinc-300",
           )}
         >
           <span className="block truncate">

src/Components/CameraFeed/CameraFeed.tsx

@@ -9,10 +9,9 @@ import FeedAlert, { FeedAlertState } from "./FeedAlert";
 import FeedNetworkSignal from "./FeedNetworkSignal";
 import NoFeedAvailable from "./NoFeedAvailable";
 import FeedControls from "./FeedControls";
-import Fullscreen from "../../CAREUI/misc/Fullscreen";
 import FeedWatermark from "./FeedWatermark";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { Error } from "../../Utils/Notifications";
+import useFullscreen from "../../Common/hooks/useFullscreen";
 
 interface Props {
   children?: React.ReactNode;
@@ -33,12 +32,13 @@ interface Props {
 
 export default function CameraFeed(props: Props) {
   const playerRef = useRef<HTMLVideoElement | ReactPlayer | null>(null);
+  const playerWrapperRef = useRef<HTMLDivElement>(null);
   const streamUrl = getStreamUrl(props.asset);
 
   const player = usePlayer(streamUrl, playerRef);
   const operate = useOperateCamera(props.asset.id, props.silent);
 
-  const [isFullscreen, setFullscreen] = useState(false);
+  const [isFullscreen, setFullscreen] = useFullscreen();
   const [state, setState] = useState<FeedAlertState>();
   useEffect(() => setState(player.status), [player.status, setState]);
 
@@ -91,32 +91,20 @@ export default function CameraFeed(props: Props) {
     props.onReset?.();
     initializeStream();
   };
+
   return (
-    <Fullscreen
-      fullscreen={isFullscreen}
-      onExit={(reason) => {
-        setFullscreen(false);
-
-        if (reason === "DEVICE_UNSUPPORTED") {
-          // iOS webkit allows only video/iframe elements to call full-screen
-          // APIs. But we need to show controls too, not just the video element.
-          Error({
-            msg: "This device does not support viewing this content in full-screen.",
-          });
-        }
-      }}
-    >
+    <div ref={playerWrapperRef} className="flex flex-col justify-center">
       <div
         className={classNames(
-          "flex flex-col overflow-clip rounded-xl bg-black md:max-h-screen",
+          "flex flex-col justify-center overflow-hidden rounded-xl bg-black md:max-h-screen",
           props.className,
           isAppleDevice && isFullscreen && "px-20",
         )}
       >
-        <div className="flex items-center justify-between bg-zinc-900 px-4 py-1.5 md:py-2">
+        <div className="flex items-center justify-between bg-zinc-900 px-4 pt-1 md:py-2">
           {props.children}
-          <div className="flex w-full items-center justify-end gap-1 md:gap-4">
-            <span className="text-base font-semibold text-white">
+          <div className="flex w-full flex-col items-end justify-end md:flex-row md:items-center md:gap-4">
+            <span className="text-xs font-semibold text-white md:text-base">
               <CareIcon
                 icon="l-video"
                 className="hidden pr-2 text-lg text-zinc-400 md:inline-block"
@@ -206,7 +194,32 @@ export default function CameraFeed(props: Props) {
             <FeedControls
               shortcutsDisabled={props.shortcutsDisabled}
               isFullscreen={isFullscreen}
-              setFullscreen={setFullscreen}
+              setFullscreen={(value) => {
+                if (!value) {
+                  setFullscreen(false);
+                  return;
+                }
+
+                if (isIOS) {
+                  const element = document.querySelector("video");
+                  if (!element) {
+                    return;
+                  }
+                  setFullscreen(true, element, true);
+                  return;
+                }
+
+                if (!playerRef.current) {
+                  return;
+                }
+
+                setFullscreen(
+                  true,
+                  playerWrapperRef.current ||
+                    (playerRef.current as HTMLElement),
+                  true,
+                );
+              }}
               onReset={resetStream}
               onMove={async (data) => {
                 props.onMove?.();
@@ -223,6 +236,6 @@ export default function CameraFeed(props: Props) {
           )}
         </div>
       </div>
-    </Fullscreen>
+    </div>
   );
 }

src/Components/CameraFeed/FeedNetworkSignal.tsx

@@ -34,7 +34,7 @@ export default function FeedNetworkSignal(props: Props) {
 
   return (
     <NetworkSignal strength={getStrength(props.status, videoDelay)}>
-      <span className="w-14 text-xs font-bold leading-none tracking-wide">
+      <span className="text-xs font-bold leading-none tracking-wide md:w-14">
         {videoDelay ? (
           `${(videoDelay * 1e3) | 1} ms`
         ) : (

src/Components/CameraFeed/FeedWatermark.tsx

@@ -47,7 +47,7 @@ const Watermark = (props: { children: string; className: string }) => {
   return (
     <span
       ref={ref}
-      className={`absolute z-10 font-bold text-white/20 md:text-2xl ${props.className}`}
+      className={`absolute z-10 text-sm font-bold text-white/20 md:text-2xl ${props.className}`}
     >
       {props.children}
     </span>

src/Components/Common/FacilitySelect.tsx

@@ -17,7 +17,7 @@ interface FacilitySelectProps {
   district?: string;
   state?: string;
   showAll?: boolean;
-  showNOptions?: number;
+  showNOptions?: number | undefined;
   freeText?: boolean;
   selected?: FacilityModel | FacilityModel[] | null;
   setSelected: (selected: FacilityModel | FacilityModel[] | null) => void;
@@ -34,7 +34,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
     searchAll,
     disabled = false,
     showAll = true,
-    showNOptions = 10,
+    showNOptions,
     className = "",
     facilityType,
     district,
@@ -65,6 +65,7 @@ export const FacilitySelect = (props: FacilitySelectProps) => {
         data?.results?.push({
           name: text,
         });
+
       return data?.results;
     },
     [searchAll, showAll, facilityType, district, exclude_user, freeText],