inl-ui 0.1.36 → 0.1.38

package/dist/components/index.cjs

@@ -8715,6 +8715,10 @@ const props$8 = {
   baseUrl: {
     type: String,
     default: ""
+  },
+  domId: {
+    type: String,
+    default: ""
   }
 };
 const VideoPlayerV2 = vue.defineComponent({
@@ -8722,7 +8726,7 @@ const VideoPlayerV2 = vue.defineComponent({
   emits: ["changeStream"],
   setup(_prop, _context) {
     let play;
-    const uuid = UUID();
+    const uuid = _prop.domId;
     const videoFull = id => {
       const elm = document.getElementById(`videoPlayer_${uuid}`);
       if (elm.requestFullScreen) {
@@ -8732,11 +8736,13 @@ const VideoPlayerV2 = vue.defineComponent({
       } else if (elm.webkitRequestFullScreen) {
         elm.webkitRequestFullScreen();
       }
-      setTimeout(() => {
-        window.onresize = () => {
-          _context.emit("changeStream");
-        };
-      }, 500);
+      if (videoInfo2.value.brandTypeCode !== "MP4") {
+        setTimeout(() => {
+          window.onresize = () => {
+            _context.emit("changeStream");
+          };
+        }, 500);
+      }
     };
     const videoInfo2 = vue.ref({});
     const stopPlay = () => {
@@ -8766,14 +8772,6 @@ const VideoPlayerV2 = vue.defineComponent({
         }
       });
     };
-    const stopV = id => {
-      const videoElement = document.getElementById(id);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.removeAttribute("src");
-        videoElement.load();
-      }
-    };
     const releaseUrl = vue.ref("");
     const release = async () => {
       const res = await axios__default["default"].get(releaseUrl.value);
@@ -8823,7 +8821,6 @@ const VideoPlayerV2 = vue.defineComponent({
     };
     vue.watch([() => _prop.camera, () => _prop.cameraConfig], ([camera, cameraConfig]) => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
       getVideoDetail(camera);
     }, {
       immediate: true,
@@ -8831,26 +8828,27 @@ const VideoPlayerV2 = vue.defineComponent({
     });
     vue.onBeforeUnmount(() => {
       stopPlay();
-      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.src = null;
-        videoElement.srcObject = null;
-        videoElement.remove();
-      }
     });
-    return () => videoInfo2.value.brandTypeCode !== "MP4" ? vue.createVNode("video", {
-      "id": `videoPlayer_${uuid}`,
-      "class": `videoComponent ${_prop.fill}`,
-      "muted": true,
-      "autoplay": true
-    }, null) : vue.createVNode("video", {
-      "class": "videoComponent fill",
-      "src": videoInfo2.value.mp4ResourcesPath,
-      "autoplay": true,
-      "loop": true,
-      "muted": true
-    }, null);
+    const renderVideo = () => {
+      if (videoInfo2.value.brandTypeCode === "MP4") {
+        return vue.createVNode("video", {
+          "id": `mp4Player_${uuid}`,
+          "class": "videoComponent fill",
+          "src": videoInfo2.value.mp4ResourcesPath,
+          "autoplay": true,
+          "loop": true,
+          "muted": true
+        }, null);
+      } else {
+        return vue.createVNode("video", {
+          "id": `videoPlayer_${uuid}`,
+          "class": `videoComponent ${_prop.fill}`,
+          "muted": true,
+          "autoplay": true
+        }, null);
+      }
+    };
+    return () => vue.createVNode(vue.Fragment, null, [renderVideo()]);
   }
 });
 var videoPlayerV2 = installComponent(VideoPlayerV2, "video-player-v2");
@@ -9204,6 +9202,7 @@ const VideoBoxV2 = vue.defineComponent({
       signal: 28
     }]];
     const infos = vue.ref([]);
+    const uuid = vue.ref(UUID());
     vue.onMounted(() => {
       showInfo.value = _prop.showInfo;
     });
@@ -9250,12 +9249,12 @@ const VideoBoxV2 = vue.defineComponent({
         }
       });
     };
-    const getVideoParams = async uuid => {
+    const getVideoParams = async uuid2 => {
       const arr = infos.value.map(info => {
         return {};
       });
       const res = await axios__default["default"].post("/api/vms/v1/cameraRelThing/getByParam", {
-        cameraUuid: uuid
+        cameraUuid: uuid2
       }, {
         headers: {
           token: sessionStorage.getItem("token")
@@ -9280,7 +9279,7 @@ const VideoBoxV2 = vue.defineComponent({
         }
       });
       camera.value = res.data.data;
-      streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
+      streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
     };
     let timeout;
     vue.ref(true);
@@ -9288,6 +9287,7 @@ const VideoBoxV2 = vue.defineComponent({
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
         const fillVal = localStorage.getItem(val);
@@ -9305,25 +9305,27 @@ const VideoBoxV2 = vue.defineComponent({
           token: sessionStorage.getItem("token") || ""
         },
         params: {
-          uuid: camera.value.uuid,
+          uuid: camera.value?.uuid,
           chosenStreamType: code
         }
       });
       cameraConfig.value.webrtcTemplateMerged = res.data.data[0];
     };
     return () => vue.createVNode("div", {
+      "id": "videoBox_" + uuid.value,
       "class": ["videoBox", _prop.alarm ? "alarm" : ""]
-    }, [vue.createVNode(VideoPlayerV2, {
+    }, [camera.value ? vue.createVNode(VideoPlayerV2, {
       "ref": player,
+      "domId": uuid.value,
       "camera": camera.value,
       "cameraConfig": cameraConfig.value,
       "fill": fill.value,
       "onChangeStream": () => {
         cameraConfig.value = {
-          streamType: streamHistory.value || camera.value.streamType
+          streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null), camera.value.brandTypeCode !== "MP4" && showInfo.value ? vue.createVNode("div", {
+    }, null) : "", showInfo.value ? vue.createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -9344,7 +9346,7 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
       "class": "tool"
     }, [_prop.btns.map(btn => {
-      if (!(camera.value.brandTypeCode === "MP4" && btn !== "close" && btn !== "look")) {
+      if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {
           case "fill":
             return vue.createVNode("img", {
@@ -9352,10 +9354,10 @@ const VideoBoxV2 = vue.defineComponent({
               "onClick": e => {
                 if (fill.value === "fill") {
                   fill.value = "contain";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 } else {
                   fill.value = "fill";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 }
               },
               "src": "/micro-assets/inl/video/controls/fill.svg"
@@ -9493,13 +9495,13 @@ const PollingPlay = vue.defineComponent({
       fullScreen: false,
       name: ""
     });
-    const setCurrentVideos = team => {
+    const setCurrentVideos = async team => {
       data.name = team.pollingGroupName;
       data.showType = `type${team.amount}`;
-      data.pointList.length = 0;
+      data.pointList = [];
       for (let i = 0; i < parseInt(team.amount, 10); i++) {
         const video = team.monitorPointPoList[i];
-        data.pointList.push(video?.cameraUuid || {});
+        data.pointList.push(video?.cameraUuid || "");
       }
     };
     const findShouldPlay = () => {
@@ -9585,16 +9587,18 @@ const PollingPlay = vue.defineComponent({
     }, null), "\u5168\u5C4F\u663E\u793A"])]) : "", vue.createVNode("div", {
       "id": "grid",
       "class": ["grid", data.showType, data.fullScreen ? "full" : ""]
-    }, [data.pointList.map((item, index) => vue.createVNode("div", {
-      "class": "video"
-    }, [_props.version === "V2" ? vue.createVNode(VideoBoxV2, {
-      "camera": item,
-      "btns": _props.btns,
-      "alarm": alarmList.value[index]
-    }, null) : vue.createVNode(VideoBox, {
-      "camera": item,
-      "btns": _props.btns
-    }, null)]))])]);
+    }, [data.pointList.map((item, index) => {
+      return vue.createVNode("div", {
+        "class": "video"
+      }, [_props.version === "V2" ? vue.createVNode(VideoBoxV2, {
+        "camera": item,
+        "btns": _props.btns,
+        "alarm": alarmList.value[index]
+      }, null) : vue.createVNode(VideoBox, {
+        "camera": item,
+        "btns": _props.btns
+      }, null)]);
+    })])]);
   }
 });
 var pollingPlay = installComponent(PollingPlay, "polling-play");

package/dist/components/index.d.ts

@@ -472,6 +472,10 @@ declare const _default$a: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    domId: {
+        type: StringConstructor;
+        default: string;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "changeStream"[], "changeStream", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     camera: {
         require: boolean;
@@ -493,6 +497,10 @@ declare const _default$a: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    domId: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
     onChangeStream?: ((...args: any[]) => any) | undefined;
 }, {
@@ -500,6 +508,7 @@ declare const _default$a: vue.DefineComponent<{
     cameraConfig: Record<string, any>;
     token: string;
     baseUrl: string;
+    domId: string;
 }, {}>;
 
 interface videoInfo {

package/dist/components/index.js

@@ -8704,6 +8704,10 @@ const props$8 = {
   baseUrl: {
     type: String,
     default: ""
+  },
+  domId: {
+    type: String,
+    default: ""
   }
 };
 const VideoPlayerV2 = defineComponent({
@@ -8711,7 +8715,7 @@ const VideoPlayerV2 = defineComponent({
   emits: ["changeStream"],
   setup(_prop, _context) {
     let play;
-    const uuid = UUID();
+    const uuid = _prop.domId;
     const videoFull = id => {
       const elm = document.getElementById(`videoPlayer_${uuid}`);
       if (elm.requestFullScreen) {
@@ -8721,11 +8725,13 @@ const VideoPlayerV2 = defineComponent({
       } else if (elm.webkitRequestFullScreen) {
         elm.webkitRequestFullScreen();
       }
-      setTimeout(() => {
-        window.onresize = () => {
-          _context.emit("changeStream");
-        };
-      }, 500);
+      if (videoInfo2.value.brandTypeCode !== "MP4") {
+        setTimeout(() => {
+          window.onresize = () => {
+            _context.emit("changeStream");
+          };
+        }, 500);
+      }
     };
     const videoInfo2 = ref({});
     const stopPlay = () => {
@@ -8755,14 +8761,6 @@ const VideoPlayerV2 = defineComponent({
         }
       });
     };
-    const stopV = id => {
-      const videoElement = document.getElementById(id);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.removeAttribute("src");
-        videoElement.load();
-      }
-    };
     const releaseUrl = ref("");
     const release = async () => {
       const res = await axios$2.get(releaseUrl.value);
@@ -8812,7 +8810,6 @@ const VideoPlayerV2 = defineComponent({
     };
     watch([() => _prop.camera, () => _prop.cameraConfig], ([camera, cameraConfig]) => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
       getVideoDetail(camera);
     }, {
       immediate: true,
@@ -8820,26 +8817,27 @@ const VideoPlayerV2 = defineComponent({
     });
     onBeforeUnmount(() => {
       stopPlay();
-      const videoElement = document.getElementById(`videoPlayer_${uuid}`);
-      if (videoElement) {
-        videoElement.pause();
-        videoElement.src = null;
-        videoElement.srcObject = null;
-        videoElement.remove();
-      }
     });
-    return () => videoInfo2.value.brandTypeCode !== "MP4" ? createVNode("video", {
-      "id": `videoPlayer_${uuid}`,
-      "class": `videoComponent ${_prop.fill}`,
-      "muted": true,
-      "autoplay": true
-    }, null) : createVNode("video", {
-      "class": "videoComponent fill",
-      "src": videoInfo2.value.mp4ResourcesPath,
-      "autoplay": true,
-      "loop": true,
-      "muted": true
-    }, null);
+    const renderVideo = () => {
+      if (videoInfo2.value.brandTypeCode === "MP4") {
+        return createVNode("video", {
+          "id": `mp4Player_${uuid}`,
+          "class": "videoComponent fill",
+          "src": videoInfo2.value.mp4ResourcesPath,
+          "autoplay": true,
+          "loop": true,
+          "muted": true
+        }, null);
+      } else {
+        return createVNode("video", {
+          "id": `videoPlayer_${uuid}`,
+          "class": `videoComponent ${_prop.fill}`,
+          "muted": true,
+          "autoplay": true
+        }, null);
+      }
+    };
+    return () => createVNode(Fragment, null, [renderVideo()]);
   }
 });
 var videoPlayerV2 = installComponent(VideoPlayerV2, "video-player-v2");
@@ -9193,6 +9191,7 @@ const VideoBoxV2 = defineComponent({
       signal: 28
     }]];
     const infos = ref([]);
+    const uuid = ref(UUID());
     onMounted(() => {
       showInfo.value = _prop.showInfo;
     });
@@ -9239,12 +9238,12 @@ const VideoBoxV2 = defineComponent({
         }
       });
     };
-    const getVideoParams = async uuid => {
+    const getVideoParams = async uuid2 => {
       const arr = infos.value.map(info => {
         return {};
       });
       const res = await axios$2.post("/api/vms/v1/cameraRelThing/getByParam", {
-        cameraUuid: uuid
+        cameraUuid: uuid2
       }, {
         headers: {
           token: sessionStorage.getItem("token")
@@ -9269,7 +9268,7 @@ const VideoBoxV2 = defineComponent({
         }
       });
       camera.value = res.data.data;
-      streams.value = JSON.parse(camera.value.brandTypePo?.streamTypeDict || "[]");
+      streams.value = JSON.parse(camera.value?.brandTypePo?.streamTypeDict || "[]");
     };
     let timeout;
     ref(true);
@@ -9277,6 +9276,7 @@ const VideoBoxV2 = defineComponent({
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
         const fillVal = localStorage.getItem(val);
@@ -9294,25 +9294,27 @@ const VideoBoxV2 = defineComponent({
           token: sessionStorage.getItem("token") || ""
         },
         params: {
-          uuid: camera.value.uuid,
+          uuid: camera.value?.uuid,
           chosenStreamType: code
         }
       });
       cameraConfig.value.webrtcTemplateMerged = res.data.data[0];
     };
     return () => createVNode("div", {
+      "id": "videoBox_" + uuid.value,
       "class": ["videoBox", _prop.alarm ? "alarm" : ""]
-    }, [createVNode(VideoPlayerV2, {
+    }, [camera.value ? createVNode(VideoPlayerV2, {
       "ref": player,
+      "domId": uuid.value,
       "camera": camera.value,
       "cameraConfig": cameraConfig.value,
       "fill": fill.value,
       "onChangeStream": () => {
         cameraConfig.value = {
-          streamType: streamHistory.value || camera.value.streamType
+          streamType: streamHistory.value || camera.value?.streamType
         };
       }
-    }, null), camera.value.brandTypeCode !== "MP4" && showInfo.value ? createVNode("div", {
+    }, null) : "", showInfo.value ? createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -9333,7 +9335,7 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
       "class": "tool"
     }, [_prop.btns.map(btn => {
-      if (!(camera.value.brandTypeCode === "MP4" && btn !== "close" && btn !== "look")) {
+      if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {
           case "fill":
             return createVNode("img", {
@@ -9341,10 +9343,10 @@ const VideoBoxV2 = defineComponent({
               "onClick": e => {
                 if (fill.value === "fill") {
                   fill.value = "contain";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 } else {
                   fill.value = "fill";
-                  localStorage.setItem(camera.value.uuid, fill.value);
+                  localStorage.setItem(camera.value?.uuid, fill.value);
                 }
               },
               "src": "/micro-assets/inl/video/controls/fill.svg"
@@ -9482,13 +9484,13 @@ const PollingPlay = defineComponent({
       fullScreen: false,
       name: ""
     });
-    const setCurrentVideos = team => {
+    const setCurrentVideos = async team => {
       data.name = team.pollingGroupName;
       data.showType = `type${team.amount}`;
-      data.pointList.length = 0;
+      data.pointList = [];
       for (let i = 0; i < parseInt(team.amount, 10); i++) {
         const video = team.monitorPointPoList[i];
-        data.pointList.push(video?.cameraUuid || {});
+        data.pointList.push(video?.cameraUuid || "");
       }
     };
     const findShouldPlay = () => {
@@ -9574,16 +9576,18 @@ const PollingPlay = defineComponent({
     }, null), "\u5168\u5C4F\u663E\u793A"])]) : "", createVNode("div", {
       "id": "grid",
       "class": ["grid", data.showType, data.fullScreen ? "full" : ""]
-    }, [data.pointList.map((item, index) => createVNode("div", {
-      "class": "video"
-    }, [_props.version === "V2" ? createVNode(VideoBoxV2, {
-      "camera": item,
-      "btns": _props.btns,
-      "alarm": alarmList.value[index]
-    }, null) : createVNode(VideoBox, {
-      "camera": item,
-      "btns": _props.btns
-    }, null)]))])]);
+    }, [data.pointList.map((item, index) => {
+      return createVNode("div", {
+        "class": "video"
+      }, [_props.version === "V2" ? createVNode(VideoBoxV2, {
+        "camera": item,
+        "btns": _props.btns,
+        "alarm": alarmList.value[index]
+      }, null) : createVNode(VideoBox, {
+        "camera": item,
+        "btns": _props.btns
+      }, null)]);
+    })])]);
   }
 });
 var pollingPlay = installComponent(PollingPlay, "polling-play");