Adds support for "Still watching" prompt to prevent users from idling when watching stream

src/CAREUI/misc/RemainingTime.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function RemainingTime({ time }: { time: number }) {
+  const [remaining, setRemaining] = React.useState(time - new Date().getTime());
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setRemaining(time - new Date().getTime());
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [time]);
+
+  return `${Math.max(remaining / 1e3, 0).toFixed(0)}s.`;
+}

src/Common/hooks/useConfig.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from "react";
+import { StillWatchingConfig } from "../../Components/CameraFeed/StillWatching";
 
 export const AppConfigContext = createContext<IConfig | null>(null);
 
@@ -83,8 +84,17 @@ export interface IConfig {
    * Env to toggle peacetime and wartime shifting
    */
   wartime_shifting: boolean;
+
+  /**
+   * The interval at which the JWT access token is refreshed in milliseconds.
+   */
   jwt_token_refresh_interval?: number;
 
+  /**
+   * Configurations related to the `StillWatching` component.
+   */
+  still_watching?: StillWatchingConfig;
+
   /*
    * Minimum date for a possible consultation encounter.
    */

src/Components/CameraFeed/CentralLiveMonitoring/index.tsx

@@ -8,6 +8,7 @@ import Fullscreen from "../../../CAREUI/misc/Fullscreen";
 import useBreakpoints from "../../../Common/hooks/useBreakpoints";
 import { useQueryParams } from "raviger";
 import LiveMonitoringFilters from "./LiveMonitoringFilters";
+import StillWatching from "../StillWatching";
 
 export default function CentralLiveMonitoring(props: { facilityId: string }) {
   const [isFullscreen, setFullscreen] = useState(false);
@@ -59,19 +60,21 @@ export default function CentralLiveMonitoring(props: { facilityId: string }) {
           No Camera present in this location or facility.
         </div>
       ) : (
-        <Fullscreen
-          fullscreenClassName="h-screen overflow-auto"
-          fullscreen={isFullscreen}
-          onExit={() => setFullscreen(false)}
-        >
-          <div className="mt-1 grid grid-cols-1 place-content-center gap-1 lg:grid-cols-2 3xl:grid-cols-3">
-            {data.results.map((asset) => (
-              <div className="text-clip" key={asset.id}>
-                <LocationFeedTile asset={asset} />
-              </div>
-            ))}
-          </div>
-        </Fullscreen>
+        <StillWatching>
+          <Fullscreen
+            fullscreenClassName="h-screen overflow-auto"
+            fullscreen={isFullscreen}
+            onExit={() => setFullscreen(false)}
+          >
+            <div className="mt-1 grid grid-cols-1 place-content-center gap-1 lg:grid-cols-2 3xl:grid-cols-3">
+              {data.results.map((asset) => (
+                <div className="text-clip" key={asset.id}>
+                  <LocationFeedTile asset={asset} />
+                </div>
+              ))}
+            </div>
+          </Fullscreen>
+        </StillWatching>
       )}
     </Page>
   );

src/Components/CameraFeed/StillWatching.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useState } from "react";
+import ConfirmDialog from "../Common/ConfirmDialog";
+import ButtonV2 from "../Common/components/ButtonV2";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import { useTranslation } from "react-i18next";
+import useConfig from "../../Common/hooks/useConfig";
+import RemainingTime from "../../CAREUI/misc/RemainingTime";
+
+export type StillWatchingConfig = {
+  idleTimeout?: number;
+  promptDuration?: number;
+};
+
+const DEFAULT_CONFIG = {
+  idleTimeout: 3 * 60e3,
+  promptDuration: 30e3,
+} satisfies StillWatchingConfig;
+
+type State = "watching" | "prompted" | "timed-out";
+
+const useStillWatching = (config: StillWatchingConfig) => {
+  const { idleTimeout, promptDuration } = { ...DEFAULT_CONFIG, ...config };
+
+  const [state, setState] = useState<State>("watching");
+  const [sequence, setSequence] = useState(1);
+
+  const getNextTimeout = useCallback(() => {
+    return (
+      new Date().getTime() +
+      (idleTimeout + promptDuration) * Math.min(sequence, 3)
+    );
+  }, [sequence, idleTimeout, promptDuration]);
+
+  const [timeoutOn, setTimeoutOn] = useState(getNextTimeout);
+
+  useEffect(() => {
+    setTimeoutOn(getNextTimeout());
+  }, [getNextTimeout]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const remainingTime = timeoutOn - new Date().getTime();
+
+      if (remainingTime < 0) {
+        setState("timed-out");
+        clearInterval(interval);
+        return;
+      }
+      if (remainingTime < promptDuration) {
+        setState("prompted");
+        return;
+      }
+
+      setState("watching");
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeoutOn, state, promptDuration]);
+
+  return {
+    state,
+    timeoutOn,
+    reset: (hardReset?: boolean) => {
+      if (hardReset) {
+        setSequence((seq) => seq + 1);
+        return;
+      }
+
+      if (state === "watching") {
+        setTimeoutOn(getNextTimeout());
+      }
+    },
+  };
+};
+
+export default function StillWatching(props: { children: React.ReactNode }) {
+  const { t } = useTranslation();
+  const { still_watching: config = {} } = useConfig();
+  const { state, timeoutOn, reset } = useStillWatching(config);
+
+  return (
+    <div onClick={() => reset()}>
+      <ConfirmDialog
+        show={state === "prompted"}
+        title={t("are_you_still_watching")}
+        description={t("stream_stop_due_to_inativity")}
+        action={
+          <>
+            <CareIcon icon="l-play-circle" className="text-lg" />
+            {t("continue_watching")} (<RemainingTime time={timeoutOn} />)
+          </>
+        }
+        onConfirm={() => reset(true)}
+        onClose={() => reset(true)}
+      />
+      {state === "timed-out" ? (
+        <div className="flex h-[50vh] w-full flex-col items-center justify-center gap-4 rounded-lg border-4 border-dashed border-secondary-400">
+          <span className="text-xl font-bold text-secondary-700">
+            {t("stream_stopped_due_to_inativity")}
+          </span>
+          <ButtonV2 onClick={() => reset(true)}>
+            <CareIcon icon="l-play-circle" className="text-lg" />
+            {t("resume")}
+          </ButtonV2>
+        </div>
+      ) : (
+        props.children
+      )}
+    </div>
+  );
+}

src/Components/Facility/ConsultationDetails/ConsultationFeedTab.tsx

@@ -21,6 +21,7 @@ import useBreakpoints from "../../../Common/hooks/useBreakpoints";
 import { Warn } from "../../../Utils/Notifications";
 import { useTranslation } from "react-i18next";
 import { GetStatusResponse } from "../../CameraFeed/routes";
+import StillWatching from "../../CameraFeed/StillWatching";
 
 export const ConsultationFeedTab = (props: ConsultationTabProps) => {
   const { t } = useTranslation();
@@ -148,7 +149,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
   const cannotSaveToPreset = !hasMoved || !preset?.id;
 
   return (
-    <>
+    <StillWatching>
       <ConfirmDialog
         title="Update Preset"
         description="Are you sure you want to update this preset to the current location?"
@@ -257,7 +258,7 @@ export const ConsultationFeedTab = (props: ConsultationTabProps) => {
           </div>
         </CameraFeed>
       </div>
-    </>
+    </StillWatching>
   );
 };
 

src/Locale/en/Asset.json

@@ -11,5 +11,10 @@
   "update_asset_service_record": "Update Asset Service Record",
   "eg_details_on_functionality_service_etc": "Eg. Details on functionality, service, etc.",
   "updating": "Updating",
-  "update": "Update"
-}
+  "update": "Update",
+  "are_you_still_watching": "Are you still watching?",
+  "stream_stop_due_to_inativity": "The live feed will stop streaming due to inactivity",
+  "stream_stopped_due_to_inativity": "The live feed has stopped streaming due to inactivity",
+  "continue_watching": "Continue watching",
+  "resume": "Resume"
+}