Revamp media player

package.json

@@ -78,7 +78,6 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^8.0.7",
     "react-pdf": "^9.1.0",
-    "react-player": "^2.16.0",
     "react-redux": "^8.1.1",
     "react-webcam": "^7.2.0",
     "redux": "^4.2.1",
@@ -161,4 +160,4 @@
     "node": ">=20.12.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/Components/Assets/AssetType/ONVIFCamera.tsx

@@ -16,6 +16,7 @@ import routes from "../../../Redux/api";
 import useQuery from "../../../Utils/request/useQuery";
 
 import CareIcon from "../../../CAREUI/icons/CareIcon";
+import useOperateCamera from "../../CameraFeed/useOperateCamera";
 
 interface Props {
   assetId: string;
@@ -47,6 +48,8 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
   });
   const authUser = useAuthUser();
 
+  const { operate } = useOperateCamera(assetId ?? "", true);
+
   useEffect(() => {
     if (asset) {
       setAssetType(asset?.asset_class);
@@ -92,21 +95,14 @@ const ONVIFCamera = ({ assetId, facilityId, asset, onUpdated }: Props) => {
 
   const addPreset = async (e: SyntheticEvent) => {
     e.preventDefault();
-    const config = getCameraConfig(asset as AssetData);
     const data = {
       bed_id: bed.id,
       preset_name: newPreset,
     };
     try {
       setLoadingAddPreset(true);
 
-      const response = await fetch(
-        `https://${resolvedMiddleware?.hostname}/status?hostname=${config.hostname}&port=${config.port}&username=${config.username}&password=${config.password}`,
-      );
-      if (!response.ok) {
-        throw new Error("Network error");
-      }
-      const presetData = await response.json();
+      const { data: presetData } = await operate({ type: "get_status" });
 
       const { res } = await request(routes.createAssetBed, {
         body: {

src/Components/Assets/configure/CameraConfigure.tsx

@@ -1,6 +1,6 @@
 import { SyntheticEvent } from "react";
 import { AssetData } from "../AssetTypes";
-import LiveFeed from "../../Facility/Consultations/LiveFeed";
+import CameraFeedOld from "../../CameraFeed/CameraFeedOld";
 import { BedSelect } from "../../Common/BedSelect";
 import { BedModel } from "../../Facility/models";
 import { getCameraConfig } from "../../../Utils/transformUtils";
@@ -76,7 +76,7 @@ export default function CameraConfigure(props: CameraConfigureProps) {
         </form>
       </Card>
       <Card className="mt-4">
-        <LiveFeed
+        <CameraFeedOld
           middlewareHostname={facilityMiddlewareHostname}
           asset={getCameraConfig(asset)}
           showRefreshButton={true}