Cam reset (ohcnetwork#6286)

yogeshbhutkar · Sep 15, 2023 · 0167315 · 0167315
1 parent 6b8f706
commit 0167315
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/Common/hooks/useHLSPlayer.ts b/src/Common/hooks/useHLSPlayer.ts
@@ -4,7 +4,7 @@ import { IOptions } from "./useMSEplayer";
 export const useHLSPLayer = (ref: ReactPlayer | null) => {
   const startStream = ({ onSuccess, onError }: IOptions = {}) => {
     try {
-      ref && ref.forceUpdate();
+      ref?.setState({ url: ref?.props.url + "&t=" + Date.now() });
       onSuccess && onSuccess(undefined);
     } catch (err) {
       onError && onError(err);

diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx
@@ -56,6 +56,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
   const [precision, setPrecision] = useState(1);
   const [cameraState, setCameraState] = useState<PTZState | null>(null);
   const [isFullscreen, setFullscreen] = useFullscreen();
+  const [videoStartTime, setVideoStartTime] = useState<Date | null>(null);
   const authUser = useAuthUser();
 
   useEffect(() => {
@@ -197,6 +198,16 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
     dispatch,
   });
 
+  const calculateVideoLiveDelay = () => {
+    const video = liveFeedPlayerRef.current as HTMLVideoElement;
+    if (!video || !videoStartTime) return 0;
+
+    const timeDifference =
+      (new Date().getTime() - videoStartTime.getTime()) / 1000;
+
+    return timeDifference - video.currentTime;
+  };
+
   const getBedPresets = async (asset: any) => {
     if (asset.id && bed) {
       const bedAssets = await dispatch(listAssetBeds({ asset: asset.id, bed }));
@@ -240,7 +251,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
   }, []);
 
   useEffect(() => {
-    if (streamStatus === StreamStatus.Playing) {
+    if (!currentPreset && streamStatus === StreamStatus.Playing) {
       setLoading(CAMERA_STATES.MOVING.GENERIC);
       const preset =
         bedPresets?.find(
@@ -296,6 +307,7 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
     },
     reset: () => {
       setStreamStatus(StreamStatus.Loading);
+      setVideoStartTime(null);
       startStream({
         onSuccess: () => setStreamStatus(StreamStatus.Playing),
         onError: () => setStreamStatus(StreamStatus.Offline),
@@ -437,10 +449,16 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
             playsinline={true}
             playing={true}
             muted={true}
+            onPlay={() => {
+              setVideoStartTime(() => new Date());
+            }}
             width="100%"
             height="100%"
             onBuffer={() => {
-              setStreamStatus(StreamStatus.Loading);
+              const delay = calculateVideoLiveDelay();
+              if (delay > 5) {
+                setStreamStatus(StreamStatus.Loading);
+              }
             }}
             onError={(e: any, _: any, hlsInstance: any) => {
               if (e === "hlsError") {
@@ -459,6 +477,15 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
             muted
             playsInline
             className="max-h-full max-w-full"
+            onPlay={() => {
+              setVideoStartTime(() => new Date());
+            }}
+            onWaiting={() => {
+              const delay = calculateVideoLiveDelay();
+              if (delay > 5) {
+                setStreamStatus(StreamStatus.Loading);
+              }
+            }}
             ref={liveFeedPlayerRef as any}
           />
         )}
@@ -506,7 +533,6 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
         <div className="absolute right-8 top-8 z-10 flex flex-col gap-4">
           {["fullScreen", "reset", "updatePreset", "zoomIn", "zoomOut"].map(
             (button, index) => {
-              if (isIOS && button === "reset") return null;
               const option = cameraPTZ.find(
                 (option) => option.action === button
               );
@@ -531,6 +557,13 @@ export const Feed: React.FC<IFeedProps> = ({ consultationId, facilityId }) => {
             clickAction={() => cameraPTZ[4].callback()}
           />
         </div>
+        {streamStatus === StreamStatus.Playing &&
+          calculateVideoLiveDelay() > 3 && (
+            <div className="absolute left-8 top-8 z-10 flex items-center gap-2 rounded-3xl bg-red-400 px-3 py-1.5 text-xs font-semibold text-gray-100">
+              <CareIcon className="care-l-wifi-slash h-4 w-4" />
+              <span>Slow Network Detected</span>
+            </div>
+          )}
         <div className="absolute bottom-8 left-8 z-10 grid grid-flow-col grid-rows-3 gap-1">
           {[
             false,