Merge branch 'develop' into fix-6436

package.json

@@ -86,7 +86,7 @@
     "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^13.0.1",
     "react-markdown": "^8.0.7",
-    "react-player": "^2.12.0",
+    "react-player": "^2.13.0",
     "react-qr-reader": "^2.2.1",
     "react-redux": "^8.1.1",
     "react-transition-group": "^4.4.5",

src/Common/hooks/useMSEplayer.ts

@@ -208,6 +208,9 @@ export const useMSEMediaPlayer = ({
                 readPacket(event.data);
               }
             };
+            ws.onerror = function (event) {
+              onError && onError(event);
+            };
           },
           false
         );

src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.tsx

@@ -1,9 +1,12 @@
 import { ConsultationTabProps } from "./index";
 import PrescriptionAdministrationsTable from "../../Medicine/PrescriptionAdministrationsTable";
+import PageTitle from "../../Common/PageHeadTitle";
 
 export const ConsultationMedicinesTab = (props: ConsultationTabProps) => {
   return (
     <div className="my-4 flex flex-col gap-16">
+      {/* eslint-disable-next-line i18next/no-literal-string */}
+      <PageTitle title="Medicines" />
       <PrescriptionAdministrationsTable
         consultation_id={props.consultationId}
         readonly={!!props.consultationData.discharge_date}

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<IFeedProps> = ({ consultationId, facilityId }) => {
   const [cameraState, setCameraState] = useState<PTZState | null>(null);
   const [isFullscreen, setFullscreen] = useFullscreen();
   const [videoStartTime, setVideoStartTime] = useState<Date | null>(null);
+  const [statusReported, setStatusReported] = useState(false);
   const authUser = useAuthUser();
 
   useEffect(() => {
@@ -232,13 +234,32 @@ export const Feed: React.FC<IFeedProps> = ({ 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<IFeedProps> = ({ consultationId, facilityId }) => {
                 STATUS: <span className="text-red-600">OFFLINE</span>
               </p>
               <p className="font-semibold ">Feed is currently not live.</p>
-              <p className="font-semibold ">
-                Click refresh button to try again.
+              <p className="font-semibold ">Trying to connect... </p>
+              <p className="mt-2 flex justify-center">
+                <Spinner circle={{ fill: "none" }} />
               </p>
             </div>
           )}

src/Components/Facility/Consultations/components/LinePlot.tsx

@@ -1,4 +1,32 @@
-import ReactECharts from "echarts-for-react";
+import ReactEchartsCore from "echarts-for-react/lib/core";
+import { BarChart, LineChart } from "echarts/charts";
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+} from "echarts/components";
+
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+]);
 
 export const LinePlot = (props: any) => {
   const {
@@ -197,7 +225,8 @@ export const LinePlot = (props: any) => {
   }
 
   return (
-    <ReactECharts
+    <ReactEchartsCore
+      echarts={echarts}
       option={generalOptions}
       className={props.classes}
       lazyUpdate={props.type === "WAVEFORM"}

src/Components/Facility/Consultations/components/StackedLinePlot.tsx

@@ -1,5 +1,32 @@
-import ReactECharts from "echarts-for-react";
+import ReactEchartsCore from "echarts-for-react/lib/core";
+import { BarChart, LineChart } from "echarts/charts";
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+} from "echarts/components";
 
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+]);
 const COLORS = ["#B13F3C", "#2F8B35", "#44327A", "#B19D3C"];
 
 export const StackedLinePlot = (props: any) => {
@@ -81,5 +108,5 @@ export const StackedLinePlot = (props: any) => {
     },
     series: series,
   };
-  return <ReactECharts option={generalOptions} />;
+  return <ReactEchartsCore echarts={echarts} option={generalOptions} />;
 };