inl-ui 0.1.37 → 0.1.39

package/dist/index.cjs

@@ -45,7 +45,7 @@ var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var EZUIKit__default = /*#__PURE__*/_interopDefaultLegacy(EZUIKit);
 
-var version = "0.1.36";
+var version = "0.1.38";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -9775,14 +9775,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);
@@ -9832,7 +9824,6 @@ const VideoPlayerV2 = vue.defineComponent({
     };
     vue.watch([() => _prop.camera, () => _prop.cameraConfig], ([camera, cameraConfig]) => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
       getVideoDetail(camera);
     }, {
       immediate: true,
@@ -9840,27 +9831,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", {
-      "id": `videoPlayer_${uuid}`,
-      "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");
@@ -10165,7 +10156,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -10188,6 +10179,7 @@ const VideoBoxV2 = vue.defineComponent({
     const streamHistory = vue.ref("");
     const streams = vue.ref([]);
     const showInfo = vue.ref(true);
+    const magnifyBtn = vue.ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -10214,7 +10206,7 @@ const VideoBoxV2 = vue.defineComponent({
       signal: 28
     }]];
     const infos = vue.ref([]);
-    const uuid = UUID();
+    const uuid = vue.ref(UUID());
     vue.onMounted(() => {
       showInfo.value = _prop.showInfo;
     });
@@ -10291,14 +10283,83 @@ 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);
     vue.onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     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);
@@ -10316,27 +10377,44 @@ 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,
+      "id": "videoBox_" + uuid.value,
       "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+    }, [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
+        };
+      }
+    }, null) : "", magnifyBtn.value ? vue.createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
     }, [vue.createVNode(VideoPlayerV2, {
       "ref": player,
-      "domId": uuid,
+      "domId": UUID(),
       "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), showInfo.value ? vue.createVNode("div", {
+    }, null), vue.createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? vue.createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -10357,7 +10435,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 !== "fullScreen" && btn !== "look")) {
+      if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {
           case "fill":
             return vue.createVNode("img", {
@@ -10365,10 +10443,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"
@@ -10398,6 +10476,14 @@ const VideoBoxV2 = vue.defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return vue.createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return vue.createVNode(vue.resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",
@@ -10506,13 +10592,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 = () => {
@@ -10598,16 +10684,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/index.d.ts

@@ -11,7 +11,7 @@ import { Key } from 'ant-design-vue/lib/table/interface';
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
 import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
 
-var version = "0.1.36";
+var version = "0.1.38";
 
 declare const _default$p: {
     set(theme: string): void;

package/dist/index.js

@@ -14,7 +14,7 @@ import { XPopup, CommentBlock, setAxiosOption } from '@sszj-temp/mobile';
 import { marked } from 'marked';
 import '@sszj-temp/mobile/style.css';
 
-var version = "0.1.36";
+var version = "0.1.38";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -9744,14 +9744,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);
@@ -9801,7 +9793,6 @@ const VideoPlayerV2 = defineComponent({
     };
     watch([() => _prop.camera, () => _prop.cameraConfig], ([camera, cameraConfig]) => {
       stopPlay();
-      stopV(`videoPlayer_${uuid}`);
       getVideoDetail(camera);
     }, {
       immediate: true,
@@ -9809,27 +9800,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", {
-      "id": `videoPlayer_${uuid}`,
-      "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");
@@ -10134,7 +10125,7 @@ const props$6 = {
   // },
   btns: {
     type: Array,
-    default: ["fill", "look", "stream", "direction", "fullScreen", "close"]
+    default: ["fill", "look", "stream", "magnify", "direction", "fullScreen", "close"]
   },
   alarm: {
     default: false,
@@ -10157,6 +10148,7 @@ const VideoBoxV2 = defineComponent({
     const streamHistory = ref("");
     const streams = ref([]);
     const showInfo = ref(true);
+    const magnifyBtn = ref(false);
     const videoBtns = [[{
       text: "lup",
       signal: 25
@@ -10183,7 +10175,7 @@ const VideoBoxV2 = defineComponent({
       signal: 28
     }]];
     const infos = ref([]);
-    const uuid = UUID();
+    const uuid = ref(UUID());
     onMounted(() => {
       showInfo.value = _prop.showInfo;
     });
@@ -10260,14 +10252,83 @@ 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);
     onBeforeUnmount(() => {});
+    const resetZoom = () => {
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom?.remove();
+      const dom = document.getElementById("videoPlayer_" + uuid.value);
+      dom.style.left = "0px";
+      dom.style.top = "0px";
+      dom.style.width = "100%";
+      dom.style.height = "100%";
+    };
+    let boxDom;
+    let playerDom;
+    let newDiv;
+    let begin = {
+      left: 0,
+      top: 0
+    };
+    let mousedownEvent;
+    const mousemoveFun = mousemoveEvent => {
+      newDiv.style.width = Math.abs(mousemoveEvent.offsetX - mousedownEvent.offsetX) - 3 + "px";
+      newDiv.style.height = Math.abs(mousemoveEvent.offsetY - mousedownEvent.offsetY) - 3 + "px";
+      newDiv.style.left = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) + begin.left + "px";
+      newDiv.style.top = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) + begin.top + "px";
+    };
+    const mousedownFun = e => {
+      mousedownEvent = e;
+      begin.left = Number(playerDom.style.left.split("px")[0]);
+      begin.top = Number(playerDom.style.top.split("px")[0]);
+      newDiv = document.createElement("div");
+      newDiv.id = "tempDiv";
+      newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
+      newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
+      boxDom.appendChild(newDiv);
+      playerDom?.addEventListener("mousemove", mousemoveFun);
+    };
+    const mouseupFun = mouseupEvent => {
+      playerDom?.removeEventListener("mousemove", mousemoveFun);
+      newDiv.remove();
+      const scaleX = Math.abs(mouseupEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mouseupEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mouseupEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mouseupEvent.offsetY) * -1 / scaleY;
+      const playerWidth = playerDom.offsetWidth / scaleX;
+      const playerHeight = playerDom.offsetHeight / scaleY;
+      playerDom.style.left = playerLeft + "px";
+      playerDom.style.top = playerTop + "px";
+      playerDom.style.width = playerWidth + "px";
+      playerDom.style.height = playerHeight + "px";
+      const chooseFieldDom = document.getElementById("chooseField_" + uuid.value);
+      chooseFieldDom.style.width = chooseFieldDom.offsetWidth * scaleX + "px";
+      chooseFieldDom.style.height = chooseFieldDom.offsetHeight * scaleY + "px";
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      chooseFieldDom.style.left = thumbnailDom.offsetWidth * -1 * playerLeft / playerWidth + "px";
+      chooseFieldDom.style.top = thumbnailDom.offsetHeight * -1 * playerTop / playerHeight + "px";
+    };
+    const setZoom = async () => {
+      boxDom = document.getElementById("videoBox_" + uuid.value);
+      playerDom = document.getElementById("videoPlayer_" + uuid.value);
+      if (magnifyBtn.value) {
+        magnifyBtn.value = !magnifyBtn.value;
+        playerDom?.removeEventListener("mousedown", mousedownFun);
+        playerDom?.removeEventListener("mouseup", mouseupFun);
+        resetZoom();
+        return;
+      }
+      magnifyBtn.value = !magnifyBtn.value;
+      playerDom?.addEventListener("mousedown", mousedownFun);
+      playerDom?.addEventListener("mouseup", mouseupFun);
+    };
     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);
@@ -10285,27 +10346,44 @@ 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,
+      "id": "videoBox_" + uuid.value,
       "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+    }, [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
+        };
+      }
+    }, null) : "", magnifyBtn.value ? createVNode("div", {
+      "class": "thumbnail",
+      "id": "thumbnail_" + uuid.value
     }, [createVNode(VideoPlayerV2, {
       "ref": player,
-      "domId": uuid,
+      "domId": UUID(),
       "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), showInfo.value ? createVNode("div", {
+    }, null), createVNode("div", {
+      "class": "chooseField",
+      "id": "chooseField_" + uuid.value
+    }, null)]) : "", showInfo.value ? createVNode("div", {
       "class": "selectFields"
     }, [[0, 1, 2, 3, 4, 5].map(index => {
       let info = {};
@@ -10326,7 +10404,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 !== "fullScreen" && btn !== "look")) {
+      if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {
           case "fill":
             return createVNode("img", {
@@ -10334,10 +10412,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"
@@ -10367,6 +10445,14 @@ const VideoBoxV2 = defineComponent({
                 "src": "/micro-assets/inl/video/stream.png"
               }, null)]
             });
+          case "magnify":
+            return createVNode("img", {
+              "title": "\u653E\u5927",
+              "onClick": e => {
+                setZoom();
+              },
+              "src": "/micro-assets/inl/video/controls/magnify.svg"
+            }, null);
           case "direction":
             return createVNode(resolveComponent("a-popover"), {
               "title": "\u63A7\u5236\u5668",
@@ -10475,13 +10561,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 = () => {
@@ -10567,16 +10653,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");