inl-ui 0.1.130 → 0.1.132

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}`;
@@ -10008,15 +10018,27 @@ const VideoBoxV2 = vue.defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await vue.nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -10035,7 +10057,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,14 +10068,31 @@ 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 => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -10070,12 +10109,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`;
@@ -10095,7 +10134,7 @@ const VideoBoxV2 = vue.defineComponent({
     const vlmSwitchKey = vue.computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    vue.watchEffect(() => {
+    vue.watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -10105,7 +10144,10 @@ const VideoBoxV2 = vue.defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();
@@ -10114,7 +10156,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 +10200,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 +10346,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 +10359,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}`;
@@ -9979,15 +9989,27 @@ const VideoBoxV2 = defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -10006,7 +10028,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,14 +10039,31 @@ 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 => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -10041,12 +10080,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`;
@@ -10066,7 +10105,7 @@ const VideoBoxV2 = defineComponent({
     const vlmSwitchKey = computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    watchEffect(() => {
+    watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -10076,7 +10115,10 @@ const VideoBoxV2 = defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();
@@ -10085,7 +10127,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 +10171,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 +10317,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 +10330,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}`;
@@ -10994,15 +11004,27 @@ const VideoBoxV2 = vue.defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await vue.nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -11021,7 +11043,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,14 +11054,31 @@ 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 => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -11056,12 +11095,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`;
@@ -11081,7 +11120,7 @@ const VideoBoxV2 = vue.defineComponent({
     const vlmSwitchKey = vue.computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    vue.watchEffect(() => {
+    vue.watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -11091,7 +11130,10 @@ const VideoBoxV2 = vue.defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();
@@ -11100,7 +11142,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 +11186,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 +11332,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 +11345,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}`;
@@ -10963,15 +10973,27 @@ const VideoBoxV2 = defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -10990,7 +11012,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,14 +11023,31 @@ 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 => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -11025,12 +11064,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`;
@@ -11050,7 +11089,7 @@ const VideoBoxV2 = defineComponent({
     const vlmSwitchKey = computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    watchEffect(() => {
+    watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -11060,7 +11099,10 @@ const VideoBoxV2 = defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();
@@ -11069,7 +11111,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 +11155,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 +11301,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 +11314,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}`;
@@ -7047,15 +7057,27 @@ const VideoBoxV2 = vue.defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await vue.nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -7074,7 +7096,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,14 +7107,31 @@ 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 => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -7109,12 +7148,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`;
@@ -7134,7 +7173,7 @@ const VideoBoxV2 = vue.defineComponent({
     const vlmSwitchKey = vue.computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    vue.watchEffect(() => {
+    vue.watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -7144,7 +7183,10 @@ const VideoBoxV2 = vue.defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();
@@ -7153,7 +7195,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 +7239,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 +7385,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 +7398,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 { ref, defineComponent, reactive, watchEffect, watch, onBeforeUnmount, createVNode, Fragment, toRefs, resolveComponent, onMounted, withDirectives, vShow, isVNode, computed, nextTick, shallowRef, onBeforeMount } 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}`;
@@ -7020,15 +7030,27 @@ const VideoBoxV2 = defineComponent({
       });
       Mqtt.on("message", onMtMessageFn);
     };
-    const onMtMessageFn = (topic2, message2) => {
+    const onMtMessageFn = (topicStr, message2) => {
+      if (topicStr !== topic.value) {
+        return;
+      }
       const msg = new TextDecoder("utf-8").decode(message2);
       console.log("msg", JSON.parse(msg));
       drawFlog(JSON.parse(msg));
     };
     let canvasDom = null;
     let textBox = null;
-    const createFlogCanvas = () => {
+    const createFlogCanvas = async () => {
+      await nextTick();
       const box = document.getElementById("videoBox_" + uuid.value);
+      if (!box) {
+        return {
+          canvas: null,
+          textBox: null,
+          width: 0,
+          height: 0
+        };
+      }
       if (!canvasDom) {
         canvasDom = document.createElement("canvas");
         canvasDom.id = "canvas_" + uuid.value;
@@ -7047,7 +7069,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,14 +7080,31 @@ 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 => {
+    const drawFlog = async data => {
       let {
         canvasDom: canvasDom2,
         width,
         height,
         textBox: textBox2
-      } = createFlogCanvas();
+      } = await createFlogCanvas();
+      if (!canvasDom2) {
+        return;
+      }
       const ctx = canvasDom2.getContext("2d");
       if (drawCleanTimer) {
         clearTimeout(drawCleanTimer);
@@ -7082,12 +7121,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`;
@@ -7107,7 +7146,7 @@ const VideoBoxV2 = defineComponent({
     const vlmSwitchKey = computed(() => {
       return `showVlmInfo_${camera.value?.uuid}`;
     });
-    watchEffect(() => {
+    watchEffect(async () => {
       if (showVlmInfo.value) {
         localStorage.removeItem(vlmSwitchKey.value);
       } else {
@@ -7117,7 +7156,10 @@ const VideoBoxV2 = defineComponent({
           textBox: textBox2,
           width,
           height
-        } = createFlogCanvas();
+        } = await createFlogCanvas();
+        if (!canvasDom2) {
+          return;
+        }
         const ctx = canvasDom2.getContext("2d");
         clearTimeout(drawCleanTimer);
         removeTxtBox();
@@ -7126,7 +7168,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 +7212,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 +7358,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 +7371,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.132",
   "description": "工业 pc ui库",
   "main": "dist/index.cjs",
   "module": "dist/index.js",