diff --git a/src/Common/hooks/useMSEplayer.ts b/src/Common/hooks/useMSEplayer.ts index b14f94a6a43..fcbf216ed6a 100644 --- a/src/Common/hooks/useMSEplayer.ts +++ b/src/Common/hooks/useMSEplayer.ts @@ -208,6 +208,9 @@ export const useMSEMediaPlayer = ({ readPacket(event.data); } }; + ws.onerror = function (event) { + onError && onError(event); + }; }, false ); diff --git a/src/Components/Facility/Consultations/Feed.tsx b/src/Components/Facility/Consultations/Feed.tsx index 75ab72d168c..31691c736f4 100644 --- a/src/Components/Facility/Consultations/Feed.tsx +++ b/src/Components/Facility/Consultations/Feed.tsx @@ -32,6 +32,7 @@ import useKeyboardShortcut from "use-keyboard-shortcut"; import useFullscreen from "../../../Common/hooks/useFullscreen.js"; import { triggerGoal } from "../../../Integrations/Plausible.js"; import useAuthUser from "../../../Common/hooks/useAuthUser.js"; +import Spinner from "../../Common/Spinner.js"; interface IFeedProps { facilityId: string; @@ -57,6 +58,7 @@ export const Feed: React.FC = ({ consultationId, facilityId }) => { const [cameraState, setCameraState] = useState(null); const [isFullscreen, setFullscreen] = useFullscreen(); const [videoStartTime, setVideoStartTime] = useState(null); + const [statusReported, setStatusReported] = useState(false); const authUser = useAuthUser(); useEffect(() => { @@ -232,13 +234,32 @@ export const Feed: React.FC = ({ consultationId, facilityId }) => { useEffect(() => { let tId: any; if (streamStatus !== StreamStatus.Playing) { - setStreamStatus(StreamStatus.Loading); + if (streamStatus !== StreamStatus.Offline) { + setStreamStatus(StreamStatus.Loading); + } tId = setTimeout(() => { startStream({ onSuccess: () => setStreamStatus(StreamStatus.Playing), - onError: () => setStreamStatus(StreamStatus.Offline), + onError: () => { + setStreamStatus(StreamStatus.Offline); + if (!statusReported) { + triggerGoal("Camera Feed Viewed", { + consultationId, + userId: authUser.id, + result: "error", + }); + setStatusReported(true); + } + }, }); }, 100); + } else if (!statusReported) { + triggerGoal("Camera Feed Viewed", { + consultationId, + userId: authUser.id, + result: "success", + }); + setStatusReported(true); } return () => { @@ -505,8 +526,9 @@ export const Feed: React.FC = ({ consultationId, facilityId }) => { STATUS: OFFLINE

Feed is currently not live.

-

- Click refresh button to try again. +

Trying to connect...

+

+

)}