inl-ui 0.1.39 → 0.1.41

package/dist/components/index.cjs

@@ -9302,7 +9302,9 @@ const VideoBoxV2 = vue.defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       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";
@@ -9310,6 +9312,9 @@ const VideoBoxV2 = vue.defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -9317,15 +9322,23 @@ const VideoBoxV2 = vue.defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       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 thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -9335,7 +9348,6 @@ const VideoBoxV2 = vue.defineComponent({
       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";
     };
@@ -9345,17 +9357,24 @@ const VideoBoxV2 = vue.defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -9430,7 +9449,8 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("div", {
       "class": "name-min"
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/components/index.js

@@ -9291,7 +9291,9 @@ const VideoBoxV2 = defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       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";
@@ -9299,6 +9301,9 @@ const VideoBoxV2 = defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -9306,15 +9311,23 @@ const VideoBoxV2 = defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       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 thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -9324,7 +9337,6 @@ const VideoBoxV2 = defineComponent({
       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";
     };
@@ -9334,17 +9346,24 @@ const VideoBoxV2 = defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -9419,7 +9438,8 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("div", {
       "class": "name-min"
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/hooks/index.cjs

@@ -6156,6 +6156,7 @@ function useRouteActive() {
   return isActive;
 }
 
+exports.WebRtcMt = WebRtcMt;
 exports.playOneWebRtcMt = playOneWebRtcMt;
 exports.useCacheExclude = useCacheExclude;
 exports.useEvent = useEvent;

package/dist/hooks/index.d.ts

@@ -116,7 +116,62 @@ type RequetFunction = (...args: any[]) => any;
  */
 declare function usePoolingReq(reqFn: RequetFunction, isInterval?: MaybeComputedRef<Boolean>, interval?: number): void;
 
+interface PlayVideoArgs {
+    videoElm: string;
+    videoDom?: Document;
+    mediaServerAddr: string;
+    cameraUserName: string;
+    cameraPwd: string;
+    cameraIp: string;
+    cameraRtspPort: string;
+    cameraChannel: string;
+    cameraStream: string;
+    addRtspProxyUrl: string;
+}
+interface EndpointConfig {
+    debug: boolean;
+    simulcast: boolean;
+    useCamera: boolean;
+    audioEnable: boolean;
+    videoEnable: boolean;
+    recvOnly: boolean;
+}
+interface WebRtc {
+    el?: HTMLElement;
+    w?: number;
+    h?: number;
+    autoPlay?: boolean;
+    plays: PlayVideoArgs | Array<PlayVideoArgs>;
+    endpointConfig?: EndpointConfig;
+}
 declare const playOneWebRtcMt: (uuid: string, domId: string, dom?: Document, token?: string) => Promise<any>;
+declare class WebRtcMt {
+    constructor(opt: WebRtc);
+    private opt;
+    private dom;
+    p_player: any;
+    protected playerMap: Map<any, any>;
+    protected streamMap: Map<any, any>;
+    protected mediaServerAddrMap: Map<any, any>;
+    protected config: {
+        w: number;
+        h: number;
+        endpointConfig: {};
+    };
+    protected createRtspUrl(plays: any): {
+        stream: string;
+        addRtspProxyUrl: any;
+        sdpUrl: any;
+    };
+    protected init(opt: WebRtc): void;
+    protected createVideo(plays: PlayVideoArgs): Promise<unknown>;
+    log(type: "err" | "info" | "warn", text: string): void;
+    stopPlay(id?: string): void;
+    protected playEvent(player: any, videoElm: string, sdpUrl: string): void;
+    protected rePlay(videoElm?: string): void;
+    protected play(videoElm: string): void;
+    startPlay(plays: PlayVideoArgs): void;
+}
 
 interface useSelectVo<T> {
     onSelect: (record: T, selected: boolean) => void;
@@ -138,4 +193,4 @@ declare const useTableSelec: <T>(key?: Key) => useSelectVo<T>;
  */
 declare function useRouteActive(): vue.Ref<boolean>;
 
-export { playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };
+export { WebRtcMt, playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };

package/dist/hooks/index.js

@@ -6147,4 +6147,4 @@ function useRouteActive() {
   return isActive;
 }
 
-export { playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };
+export { WebRtcMt, playOneWebRtcMt, useCacheExclude, useEvent, useModalVisible, useNow, usePoolingReq, useQianKunState, useQiankunStateValue, useRouteActive, useTableList, useTableSelec, useZoomAdaptation };

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.38";
+var version = "0.1.40";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -6865,6 +6865,7 @@ var hooks = /*#__PURE__*/Object.freeze({
   useZoomAdaptation: useZoomAdaptation,
   usePoolingReq: usePoolingReq,
   playOneWebRtcMt: playOneWebRtcMt,
+  WebRtcMt: WebRtcMt$1,
   useTableSelec: useTableSelec,
   useRouteActive: useRouteActive
 });
@@ -10305,7 +10306,9 @@ const VideoBoxV2 = vue.defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       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";
@@ -10313,6 +10316,9 @@ const VideoBoxV2 = vue.defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -10320,15 +10326,23 @@ const VideoBoxV2 = vue.defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       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 thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -10338,7 +10352,6 @@ const VideoBoxV2 = vue.defineComponent({
       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";
     };
@@ -10348,17 +10361,24 @@ const VideoBoxV2 = vue.defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -10433,7 +10453,8 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("div", {
       "class": "name-min"
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

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.38";
+var version = "0.1.40";
 
 declare const _default$p: {
     set(theme: string): void;
@@ -492,6 +492,8 @@ declare const hooks_useEvent: typeof useEvent;
 declare const hooks_useZoomAdaptation: typeof useZoomAdaptation;
 declare const hooks_usePoolingReq: typeof usePoolingReq;
 declare const hooks_playOneWebRtcMt: typeof playOneWebRtcMt;
+type hooks_WebRtcMt = WebRtcMt;
+declare const hooks_WebRtcMt: typeof WebRtcMt;
 declare const hooks_useTableSelec: typeof useTableSelec;
 declare const hooks_useRouteActive: typeof useRouteActive;
 declare namespace hooks {
@@ -506,6 +508,7 @@ declare namespace hooks {
     hooks_useZoomAdaptation as useZoomAdaptation,
     hooks_usePoolingReq as usePoolingReq,
     hooks_playOneWebRtcMt as playOneWebRtcMt,
+    hooks_WebRtcMt as WebRtcMt,
     hooks_useTableSelec as useTableSelec,
     hooks_useRouteActive as useRouteActive,
   };

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.38";
+var version = "0.1.40";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -6834,6 +6834,7 @@ var hooks = /*#__PURE__*/Object.freeze({
   useZoomAdaptation: useZoomAdaptation,
   usePoolingReq: usePoolingReq,
   playOneWebRtcMt: playOneWebRtcMt,
+  WebRtcMt: WebRtcMt$1,
   useTableSelec: useTableSelec,
   useRouteActive: useRouteActive
 });
@@ -10274,7 +10275,9 @@ const VideoBoxV2 = defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       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";
@@ -10282,6 +10285,9 @@ const VideoBoxV2 = defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -10289,15 +10295,23 @@ const VideoBoxV2 = defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       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 thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -10307,7 +10321,6 @@ const VideoBoxV2 = defineComponent({
       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";
     };
@@ -10317,17 +10330,24 @@ const VideoBoxV2 = defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -10402,7 +10422,8 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("div", {
       "class": "name-min"
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/video/index.cjs

@@ -6493,7 +6493,9 @@ const VideoBoxV2 = vue.defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       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";
@@ -6501,6 +6503,9 @@ const VideoBoxV2 = vue.defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -6508,15 +6513,23 @@ const VideoBoxV2 = vue.defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       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 thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -6526,7 +6539,6 @@ const VideoBoxV2 = vue.defineComponent({
       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";
     };
@@ -6536,17 +6548,24 @@ const VideoBoxV2 = vue.defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = vue.ref("fill");
     vue.watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -6621,7 +6640,8 @@ const VideoBoxV2 = vue.defineComponent({
     }, [vue.createVNode("div", {
       "class": "name-min"
     }, [vue.createVNode("span", null, [camera.value?.name])]), vue.createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/dist/video/index.js

@@ -6484,7 +6484,9 @@ const VideoBoxV2 = defineComponent({
       top: 0
     };
     let mousedownEvent;
-    const mousemoveFun = mousemoveEvent => {
+    let mousemoveEvent;
+    const mousemoveFun = e => {
+      mousemoveEvent = e;
       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";
@@ -6492,6 +6494,9 @@ const VideoBoxV2 = defineComponent({
     };
     const mousedownFun = e => {
       mousedownEvent = e;
+      if (mousedownEvent.target.localName !== "video") {
+        return;
+      }
       begin.left = Number(playerDom.style.left.split("px")[0]);
       begin.top = Number(playerDom.style.top.split("px")[0]);
       newDiv = document.createElement("div");
@@ -6499,15 +6504,23 @@ const VideoBoxV2 = defineComponent({
       newDiv.style.left = mousedownEvent.offsetX + begin.left + "px";
       newDiv.style.top = mousedownEvent.offsetY + begin.top + "px";
       boxDom.appendChild(newDiv);
+      const thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "none";
       playerDom?.addEventListener("mousemove", mousemoveFun);
     };
     const mouseupFun = mouseupEvent => {
+      const tempDiv = document.getElementById("tempDiv");
+      if (!tempDiv) {
+        return;
+      }
       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 thumbnailDom = document.getElementById("thumbnail_" + uuid.value);
+      thumbnailDom.style.display = "inline";
+      const scaleX = Math.abs(mousemoveEvent.pageX - mousedownEvent.pageX) / boxDom.offsetWidth;
+      const scaleY = Math.abs(mousemoveEvent.pageY - mousedownEvent.pageY) / boxDom.offsetHeight;
+      const playerLeft = Math.min(mousedownEvent.offsetX, mousemoveEvent.offsetX) * -1 / scaleX;
+      const playerTop = Math.min(mousedownEvent.offsetY, mousemoveEvent.offsetY) * -1 / scaleY;
       const playerWidth = playerDom.offsetWidth / scaleX;
       const playerHeight = playerDom.offsetHeight / scaleY;
       playerDom.style.left = playerLeft + "px";
@@ -6517,7 +6530,6 @@ const VideoBoxV2 = defineComponent({
       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";
     };
@@ -6527,17 +6539,24 @@ const VideoBoxV2 = defineComponent({
       if (magnifyBtn.value) {
         magnifyBtn.value = !magnifyBtn.value;
         playerDom?.removeEventListener("mousedown", mousedownFun);
-        playerDom?.removeEventListener("mouseup", mouseupFun);
+        document?.removeEventListener("mouseup", mouseupFun);
         resetZoom();
         return;
       }
       magnifyBtn.value = !magnifyBtn.value;
-      playerDom?.addEventListener("mousedown", mousedownFun);
-      playerDom?.addEventListener("mouseup", mouseupFun);
+      playerDom?.addEventListener("mousedown", mousedownFun, {
+        capture: true
+      });
+      document?.addEventListener("mouseup", mouseupFun, {
+        capture: true
+      });
     };
     const fill = ref("fill");
     watch(() => _prop.camera, val => {
       if (val && Object.keys(val).length != 0) {
+        if (magnifyBtn.value) {
+          setZoom();
+        }
         camera.value = void 0;
         getVideoParams(val);
         getVideoDetail(val);
@@ -6612,7 +6631,8 @@ const VideoBoxV2 = defineComponent({
     }, [createVNode("div", {
       "class": "name-min"
     }, [createVNode("span", null, [camera.value?.name])]), createVNode("div", {
-      "class": "tool"
+      "class": "tool",
+      "onClick": () => {}
     }, [_prop.btns.map(btn => {
       if (!(camera.value?.brandTypeCode === "MP4" && btn !== "close" && btn !== "fullScreen" && btn !== "look")) {
         switch (btn) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inl-ui",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "description": "工业 pc ui库",
   "main": "dist/index.cjs",
   "module": "dist/index.js",