inl-ui 0.1.130 → 0.1.131

package/dist/components/index.cjs

@@ -9703,6 +9703,7 @@ const VideoBoxV2 = vue.defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = vue.ref();
     const player = vue.ref();
     const cameraConfig = vue.ref({});
     const streamHistory = vue.ref("");
@@ -9994,6 +9995,15 @@ const VideoBoxV2 = vue.defineComponent({
     };
     let Mqtt = null;
     const topic = vue.ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = core.useFullscreen(videoBoxRef);
+    vue.watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
     const initMqtt = async ip => {
       Mqtt = await useMqtt();
       topic.value = `vlm/${ip}`;
@@ -10035,7 +10045,7 @@ const VideoBoxV2 = vue.defineComponent({
         textBox.style.position = "absolute";
         textBox.style.width = "100%";
         textBox.style.left = "0";
-        textBox.style.zIndex = "999";
+        textBox.style.zIndex = "1000";
         textBox.style.pointerEvents = "none";
         box.appendChild(textBox);
       }
@@ -10046,6 +10056,20 @@ const VideoBoxV2 = vue.defineComponent({
         height: box.offsetHeight
       };
     };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
     let drawCleanTimer = null;
     const drawFlog = data => {
       let {
@@ -10070,12 +10094,12 @@ const VideoBoxV2 = vue.defineComponent({
         });
       }
       if (data.text) {
-        const fontSize = 14;
+        const fontSize = 16 * width / 800;
         const margin = 10;
         const marginTop = height * 0.1 + margin;
         textBox2.innerHTML = data.text;
         textBox2.style.top = marginTop + "px";
-        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
         textBox2.style.color = data.text_color || "red";
         textBox2.style.fontSize = `${fontSize}px`;
         textBox2.style.padding = `${margin}px`;
@@ -10114,7 +10138,8 @@ const VideoBoxV2 = vue.defineComponent({
     });
     return () => vue.createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? vue.createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -10157,7 +10182,7 @@ const VideoBoxV2 = vue.defineComponent({
       }, [vue.createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), vue.createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), vue.createVNode("div", null, [info.unit])]);
-    })]) : "", vue.createVNode("div", {
+    })]) : "", vue.withDirectives(vue.createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [vue.createVNode("div", {
@@ -10303,7 +10328,7 @@ const VideoBoxV2 = vue.defineComponent({
             return vue.createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -10316,7 +10341,7 @@ const VideoBoxV2 = vue.defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vue.vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

package/dist/components/index.js

@@ -9674,6 +9674,7 @@ const VideoBoxV2 = defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = ref();
     const player = ref();
     const cameraConfig = ref({});
     const streamHistory = ref("");
@@ -9965,6 +9966,15 @@ const VideoBoxV2 = defineComponent({
     };
     let Mqtt = null;
     const topic = ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = useFullscreen(videoBoxRef);
+    watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
     const initMqtt = async ip => {
       Mqtt = await useMqtt();
       topic.value = `vlm/${ip}`;
@@ -10006,7 +10016,7 @@ const VideoBoxV2 = defineComponent({
         textBox.style.position = "absolute";
         textBox.style.width = "100%";
         textBox.style.left = "0";
-        textBox.style.zIndex = "999";
+        textBox.style.zIndex = "1000";
         textBox.style.pointerEvents = "none";
         box.appendChild(textBox);
       }
@@ -10017,6 +10027,20 @@ const VideoBoxV2 = defineComponent({
         height: box.offsetHeight
       };
     };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
     let drawCleanTimer = null;
     const drawFlog = data => {
       let {
@@ -10041,12 +10065,12 @@ const VideoBoxV2 = defineComponent({
         });
       }
       if (data.text) {
-        const fontSize = 14;
+        const fontSize = 16 * width / 800;
         const margin = 10;
         const marginTop = height * 0.1 + margin;
         textBox2.innerHTML = data.text;
         textBox2.style.top = marginTop + "px";
-        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
         textBox2.style.color = data.text_color || "red";
         textBox2.style.fontSize = `${fontSize}px`;
         textBox2.style.padding = `${margin}px`;
@@ -10085,7 +10109,8 @@ const VideoBoxV2 = defineComponent({
     });
     return () => createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -10128,7 +10153,7 @@ const VideoBoxV2 = defineComponent({
       }, [createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), createVNode("div", null, [info.unit])]);
-    })]) : "", createVNode("div", {
+    })]) : "", withDirectives(createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [createVNode("div", {
@@ -10274,7 +10299,7 @@ const VideoBoxV2 = defineComponent({
             return createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -10287,7 +10312,7 @@ const VideoBoxV2 = defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

package/dist/index.cjs

@@ -45,7 +45,7 @@ var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var mqtt__default = /*#__PURE__*/_interopDefaultLegacy(mqtt);
 
-var version = "0.1.130";
+var version = "0.1.131";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -10689,6 +10689,7 @@ const VideoBoxV2 = vue.defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = vue.ref();
     const player = vue.ref();
     const cameraConfig = vue.ref({});
     const streamHistory = vue.ref("");
@@ -10980,6 +10981,15 @@ const VideoBoxV2 = vue.defineComponent({
     };
     let Mqtt = null;
     const topic = vue.ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = core.useFullscreen(videoBoxRef);
+    vue.watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
     const initMqtt = async ip => {
       Mqtt = await useMqtt();
       topic.value = `vlm/${ip}`;
@@ -11021,7 +11031,7 @@ const VideoBoxV2 = vue.defineComponent({
         textBox.style.position = "absolute";
         textBox.style.width = "100%";
         textBox.style.left = "0";
-        textBox.style.zIndex = "999";
+        textBox.style.zIndex = "1000";
         textBox.style.pointerEvents = "none";
         box.appendChild(textBox);
       }
@@ -11032,6 +11042,20 @@ const VideoBoxV2 = vue.defineComponent({
         height: box.offsetHeight
       };
     };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
     let drawCleanTimer = null;
     const drawFlog = data => {
       let {
@@ -11056,12 +11080,12 @@ const VideoBoxV2 = vue.defineComponent({
         });
       }
       if (data.text) {
-        const fontSize = 14;
+        const fontSize = 16 * width / 800;
         const margin = 10;
         const marginTop = height * 0.1 + margin;
         textBox2.innerHTML = data.text;
         textBox2.style.top = marginTop + "px";
-        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
         textBox2.style.color = data.text_color || "red";
         textBox2.style.fontSize = `${fontSize}px`;
         textBox2.style.padding = `${margin}px`;
@@ -11100,7 +11124,8 @@ const VideoBoxV2 = vue.defineComponent({
     });
     return () => vue.createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? vue.createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -11143,7 +11168,7 @@ const VideoBoxV2 = vue.defineComponent({
       }, [vue.createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), vue.createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), vue.createVNode("div", null, [info.unit])]);
-    })]) : "", vue.createVNode("div", {
+    })]) : "", vue.withDirectives(vue.createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [vue.createVNode("div", {
@@ -11289,7 +11314,7 @@ const VideoBoxV2 = vue.defineComponent({
             return vue.createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -11302,7 +11327,7 @@ const VideoBoxV2 = vue.defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vue.vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

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.130";
+var version = "0.1.131";
 
 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.130";
+var version = "0.1.131";
 
 const setTheme = theme => {
   if (theme === "dark") {
@@ -10658,6 +10658,7 @@ const VideoBoxV2 = defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = ref();
     const player = ref();
     const cameraConfig = ref({});
     const streamHistory = ref("");
@@ -10949,6 +10950,15 @@ const VideoBoxV2 = defineComponent({
     };
     let Mqtt = null;
     const topic = ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = useFullscreen(videoBoxRef);
+    watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
     const initMqtt = async ip => {
       Mqtt = await useMqtt();
       topic.value = `vlm/${ip}`;
@@ -10990,7 +11000,7 @@ const VideoBoxV2 = defineComponent({
         textBox.style.position = "absolute";
         textBox.style.width = "100%";
         textBox.style.left = "0";
-        textBox.style.zIndex = "999";
+        textBox.style.zIndex = "1000";
         textBox.style.pointerEvents = "none";
         box.appendChild(textBox);
       }
@@ -11001,6 +11011,20 @@ const VideoBoxV2 = defineComponent({
         height: box.offsetHeight
       };
     };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
     let drawCleanTimer = null;
     const drawFlog = data => {
       let {
@@ -11025,12 +11049,12 @@ const VideoBoxV2 = defineComponent({
         });
       }
       if (data.text) {
-        const fontSize = 14;
+        const fontSize = 16 * width / 800;
         const margin = 10;
         const marginTop = height * 0.1 + margin;
         textBox2.innerHTML = data.text;
         textBox2.style.top = marginTop + "px";
-        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
         textBox2.style.color = data.text_color || "red";
         textBox2.style.fontSize = `${fontSize}px`;
         textBox2.style.padding = `${margin}px`;
@@ -11069,7 +11093,8 @@ const VideoBoxV2 = defineComponent({
     });
     return () => createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -11112,7 +11137,7 @@ const VideoBoxV2 = defineComponent({
       }, [createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), createVNode("div", null, [info.unit])]);
-    })]) : "", createVNode("div", {
+    })]) : "", withDirectives(createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [createVNode("div", {
@@ -11258,7 +11283,7 @@ const VideoBoxV2 = defineComponent({
             return createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -11271,7 +11296,7 @@ const VideoBoxV2 = defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

package/dist/video/index.cjs

@@ -6742,6 +6742,7 @@ const VideoBoxV2 = vue.defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = vue.ref();
     const player = vue.ref();
     const cameraConfig = vue.ref({});
     const streamHistory = vue.ref("");
@@ -7033,6 +7034,15 @@ const VideoBoxV2 = vue.defineComponent({
     };
     let Mqtt = null;
     const topic = vue.ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = core.useFullscreen(videoBoxRef);
+    vue.watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
     const initMqtt = async ip => {
       Mqtt = await useMqtt();
       topic.value = `vlm/${ip}`;
@@ -7074,7 +7084,7 @@ const VideoBoxV2 = vue.defineComponent({
         textBox.style.position = "absolute";
         textBox.style.width = "100%";
         textBox.style.left = "0";
-        textBox.style.zIndex = "999";
+        textBox.style.zIndex = "1000";
         textBox.style.pointerEvents = "none";
         box.appendChild(textBox);
       }
@@ -7085,6 +7095,20 @@ const VideoBoxV2 = vue.defineComponent({
         height: box.offsetHeight
       };
     };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
     let drawCleanTimer = null;
     const drawFlog = data => {
       let {
@@ -7109,12 +7133,12 @@ const VideoBoxV2 = vue.defineComponent({
         });
       }
       if (data.text) {
-        const fontSize = 14;
+        const fontSize = 16 * width / 800;
         const margin = 10;
         const marginTop = height * 0.1 + margin;
         textBox2.innerHTML = data.text;
         textBox2.style.top = marginTop + "px";
-        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
         textBox2.style.color = data.text_color || "red";
         textBox2.style.fontSize = `${fontSize}px`;
         textBox2.style.padding = `${margin}px`;
@@ -7153,7 +7177,8 @@ const VideoBoxV2 = vue.defineComponent({
     });
     return () => vue.createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? vue.createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -7196,7 +7221,7 @@ const VideoBoxV2 = vue.defineComponent({
       }, [vue.createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), vue.createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), vue.createVNode("div", null, [info.unit])]);
-    })]) : "", vue.createVNode("div", {
+    })]) : "", vue.withDirectives(vue.createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [vue.createVNode("div", {
@@ -7342,7 +7367,7 @@ const VideoBoxV2 = vue.defineComponent({
             return vue.createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -7355,7 +7380,7 @@ const VideoBoxV2 = vue.defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vue.vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

package/dist/video/index.js

@@ -1,7 +1,7 @@
 import { ref, defineComponent, reactive, watchEffect, watch, onBeforeUnmount, createVNode, Fragment, toRefs, resolveComponent, onMounted, withDirectives, vShow, isVNode, computed, shallowRef, onBeforeMount, nextTick } from 'vue';
 import { SearchOutlined, FullscreenOutlined, createFromIconfontCN } from '@ant-design/icons-vue';
 import axios$2 from 'axios';
-import { resolveRef } from '@vueuse/core';
+import { resolveRef, useFullscreen } from '@vueuse/core';
 import { cloneDeep } from 'lodash';
 import mqtt from 'mqtt';
 import { useRouter } from 'vue-router';
@@ -6715,6 +6715,7 @@ const VideoBoxV2 = defineComponent({
   },
   emits: ["close", "change"],
   setup(_prop, _context) {
+    const videoBoxRef = ref();
     const player = ref();
     const cameraConfig = ref({});
     const streamHistory = ref("");
@@ -7006,6 +7007,15 @@ const VideoBoxV2 = defineComponent({
     };
     let Mqtt = null;
     const topic = ref("");
+    const {
+      isFullscreen,
+      enter,
+      exit,
+      toggle
+    } = useFullscreen(videoBoxRef);
+    watch(() => isFullscreen.value, val => {
+      clearFlogCanvas();
+    });
     const initMqtt = async ip => {
       Mqtt = await useMqtt();
       topic.value = `vlm/${ip}`;
@@ -7047,7 +7057,7 @@ const VideoBoxV2 = defineComponent({
         textBox.style.position = "absolute";
         textBox.style.width = "100%";
         textBox.style.left = "0";
-        textBox.style.zIndex = "999";
+        textBox.style.zIndex = "1000";
         textBox.style.pointerEvents = "none";
         box.appendChild(textBox);
       }
@@ -7058,6 +7068,20 @@ const VideoBoxV2 = defineComponent({
         height: box.offsetHeight
       };
     };
+    const clearFlogCanvas = () => {
+      if (canvasDom) {
+        canvasDom.remove();
+        canvasDom = null;
+      }
+      if (textBox) {
+        textBox.remove();
+        textBox = null;
+      }
+      if (drawCleanTimer) {
+        clearTimeout(drawCleanTimer);
+        drawCleanTimer = null;
+      }
+    };
     let drawCleanTimer = null;
     const drawFlog = data => {
       let {
@@ -7082,12 +7106,12 @@ const VideoBoxV2 = defineComponent({
         });
       }
       if (data.text) {
-        const fontSize = 14;
+        const fontSize = 16 * width / 800;
         const margin = 10;
         const marginTop = height * 0.1 + margin;
         textBox2.innerHTML = data.text;
         textBox2.style.top = marginTop + "px";
-        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        textBox2.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
         textBox2.style.color = data.text_color || "red";
         textBox2.style.fontSize = `${fontSize}px`;
         textBox2.style.padding = `${margin}px`;
@@ -7126,7 +7150,8 @@ const VideoBoxV2 = defineComponent({
     });
     return () => createVNode("div", {
       "id": "videoBox_" + uuid.value,
-      "class": ["videoBox", _prop.alarm ? "alarm" : ""]
+      "class": ["videoBox", _prop.alarm ? "alarm" : ""],
+      "ref": videoBoxRef
     }, [camera.value ? createVNode(VideoPlayerV2, {
       "ref": player,
       "domId": uuid.value,
@@ -7169,7 +7194,7 @@ const VideoBoxV2 = defineComponent({
       }, [createVNode("div", null, [info.name ? `${info.name}\uFF1A` : ""]), createVNode("div", {
         "class": "value"
       }, [info.displayValue && info.displayValue !== "null" ? info.displayValue + " " : ""]), createVNode("div", null, [info.unit])]);
-    })]) : "", createVNode("div", {
+    })]) : "", withDirectives(createVNode("div", {
       "class": "footer-min",
       "id": "footer_" + uuid.value
     }, [createVNode("div", {
@@ -7315,7 +7340,7 @@ const VideoBoxV2 = defineComponent({
             return createVNode("img", {
               "onClick": e => {
                 e.stopPropagation();
-                player.value.videoFull();
+                toggle();
               },
               "src": "/micro-assets/inl/video/putUp.png"
             }, null);
@@ -7328,7 +7353,7 @@ const VideoBoxV2 = defineComponent({
             }, null);
         }
       }
-    })])]), renderChangeCamera()]);
+    })])]), [[vShow, !isFullscreen.value]]), renderChangeCamera()]);
   }
 });
 var VideoBoxV2$1 = installComponent(VideoBoxV2, "video-box-v2");

package/package.json

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