@yimou6/common-ui 1.6.2 → 1.6.4

package/es/components/live-player/src/ysPlayer.vue.d.ts

@@ -33,6 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     width: import("vue").Ref<number, number>;
     height: import("vue").Ref<number, number>;
     ratio: number;
+    isCurrentFullscreen: boolean;
     debounce: (func: Function, wait: number) => (this: any, ...args: any[]) => void;
     debouncedResize: (this: any, ...args: any[]) => void;
     play: (options?: Record<string, any>) => void;

package/es/components/live-player/src/ysPlayer.vue2.mjs

@@ -7,7 +7,8 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 const _hoisted_1 = {
   key: 0,
-  class: "i-player__error"
+  class: "i-player__error",
+  style: { "color": "red", "font-weight": "bold" }
 };
 const PLAYER_TEMPLATE = "5f295a9341a74d439b5d69374c90d501";
 var _sfc_main = /* @__PURE__ */ defineComponent({
@@ -31,6 +32,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const ysRef = shallowRef();
     const { width, height } = useElementSize(ysRef);
     let ratio = 16 / 9;
+    let isCurrentFullscreen = false;
     onMounted(() => play());
     __expose({ play, destroy, resize });
     function debounce(func, wait) {
@@ -44,12 +46,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const debouncedResize = debounce(resize, 300);
     watch(
       () => [width.value, height.value, ratio],
-      () => debouncedResize()
+      () => {
+        if (!isCurrentFullscreen) {
+          debouncedResize();
+        }
+      }
     );
     function play(options) {
       props.debug && console.log("play", options);
       if (!props.accessToken) {
-        errorMsg = `params 'accessToken' is not fount`;
+        errorMsg = `params 'accessToken' is not found`;
       } else {
         const url = formatterUrl();
         if (url) {
@@ -75,7 +81,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           calculatedHeight = height.value;
           calculatedWidth = calculatedHeight * ratio;
         }
-        playerInstance == null ? void 0 : playerInstance.resize(calculatedWidth, calculatedHeight);
+        props.debug && console.log("playerInstance", playerInstance);
+        if (playerInstance.resize) {
+          playerInstance.resize(calculatedWidth, calculatedHeight);
+        } else {
+          const dom = document.getElementById(id);
+          if (dom) {
+            dom.style.width = `${calculatedWidth}px`;
+            dom.style.height = `${calculatedHeight}px`;
+          }
+        }
       }
     }
     __name(resize, "resize");
@@ -91,11 +106,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         // @ts-ignore
         loggerOptions: {
           name: "YSPLAYER",
-          level: "ERROR",
+          level: props.debug ? "DEBUG" : "ERROR",
           showTime: true
         },
         ...options
       });
+      playerInstance.eventEmitter.on("fullscreen", (args) => {
+        props.debug && console.log("fullscreen", args);
+        isCurrentFullscreen = true;
+      });
+      playerInstance.eventEmitter.on("exitFullscreen", (args) => {
+        props.debug && console.log("exitFullscreen", args);
+        isCurrentFullscreen = false;
+      });
       playerInstance.eventEmitter.on("destroy", (args) => {
         props.debug && console.log("destroy", args);
       });
@@ -121,7 +144,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           const quality = props.quality === "" || props.quality === "hd" ? "hd." : "";
           return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;
         } else {
-          errorMsg = `params 'deviceSerial' or 'channel' is not fount`;
+          errorMsg = `params 'deviceSerial' or 'channel' is not found`;
           return "";
         }
       }

package/es/components/live-player/src/ysPlayer.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ysPlayer.vue2.mjs","sources":["../../../../../../../packages/components/live-player/src/ysPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useElementSize } from '@vueuse/core';\n  import EZUIKit from 'ezuikit-js';\n  import { nextTick, onMounted, shallowRef, watch } from 'vue';\n  import { uuid } from './live-player';\n  // 萤石云播放器\n  defineOptions({\n    name: 'YsPlayer',\n  });\n\n  // 传值方式\n  // 1、传url、accessToken\n  // 2、传deviceSerial、channel、accessToken\n  const props = defineProps<{\n    // 播放地址\n    // 高清：ezopen://open.ys7.com/${设备序列号}/${通道号}.hd.live\n    // 流畅：ezopen://open.ys7.com/${设备序列号}/${通道号}.live\n    url?: string;\n    // 设备序列号\n    deviceSerial?: string;\n    // 通道号\n    channel?: number;\n    // 清晰度,默认为空，也表示高清\n    // hd：高清；sd：流畅\n    quality?: 'hd' | 'sd' | '';\n    accessToken: string;\n    debug?: boolean;\n  }>();\n\n  // 播放器模板ID\n  // 可在萤石云控制台查看、修改、获取\n  // 位置：云直播-轻应用-特致珈默认模板\n  const PLAYER_TEMPLATE = '5f295a9341a74d439b5d69374c90d501';\n  const id = uuid();\n  let playerInstance: any = null;\n  let errorMsg = '';\n  const ysRef = shallowRef();\n  const { width, height } = useElementSize(ysRef);\n  let ratio = 16 / 9;\n\n  onMounted(() => play());\n\n  defineExpose({ play, destroy, resize });\n\n  // 防抖函数\n  function debounce(func: Function, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> | null = null;\n    return function (this: any, ...args: any[]) {\n      if (timeout) clearTimeout(timeout);\n      timeout = setTimeout(() => func.apply(this, args), wait);\n    };\n  }\n\n  // 加上防抖的 resize 函数\n  const debouncedResize = debounce(resize, 300);\n\n  watch(\n    () => [width.value, height.value, ratio],\n    () => debouncedResize(),\n  );\n\n  function play(options?: Record<string, any>) {\n    props.debug && console.log('play', options);\n    if (!props.accessToken) {\n      errorMsg = `params 'accessToken' is not fount`;\n    } else {\n      const url = formatterUrl();\n      if (url) {\n        createPlayerDom();\n        nextTick(() => createPlayer(options));\n      }\n    }\n  }\n  function destroy() {\n    if (playerInstance) {\n      playerInstance.destroy();\n      playerInstance = null;\n      removePlayerDom();\n    }\n  }\n  function resize() {\n    // 根据播放器宽高比，设置播放器高度\n    if (width.value > 0 && height.value > 0) {\n      let calculatedWidth = width.value;\n      let calculatedHeight = calculatedWidth / ratio;\n      if (calculatedHeight > height.value) {\n        calculatedHeight = height.value;\n        calculatedWidth = calculatedHeight * ratio;\n      }\n      playerInstance?.resize(calculatedWidth, calculatedHeight);\n    }\n  }\n\n  /**\n   * 创建萤石云播放器实例，播放萤石云直播流\n   */\n  function createPlayer(options?: Record<string, any>) {\n    playerInstance = new EZUIKit.EZUIKitPlayer({\n      id,\n      url: formatterUrl(),\n      accessToken: props.accessToken,\n      template: PLAYER_TEMPLATE,\n      width: width.value,\n      height: height.value,\n      audio: 1,\n      // @ts-ignore\n      loggerOptions: {\n        name: 'YSPLAYER',\n        level: 'ERROR',\n        showTime: true,\n      },\n      ...options,\n    });\n\n    playerInstance.eventEmitter.on('destroy', (args: any) => {\n      props.debug && console.log('destroy', args);\n    });\n    playerInstance.eventEmitter.on('init', (args: any) => {\n      props.debug && console.log('init', args);\n    });\n    playerInstance.eventEmitter.on('play', (args: any) => {\n      props.debug && console.log('play', args);\n    });\n    playerInstance.eventEmitter.on('videoInfo', (args: any) => {\n      const { width: w, height: h } = args;\n      // 计算播放器宽高比\n      if (w && h) {\n        ratio = w / h;\n      }\n    });\n  }\n\n  function formatterUrl(): string {\n    if (props.url) {\n      return props.url;\n    } else {\n      if (props.deviceSerial && props.channel) {\n        const quality = props.quality === '' || props.quality === 'hd' ? 'hd.' : '';\n        return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;\n      } else {\n        errorMsg = `params 'deviceSerial' or 'channel' is not fount`;\n        return '';\n      }\n    }\n  }\n\n  // 移除播放器DOM\n  function removePlayerDom() {\n    const dom = document.getElementById(id);\n    dom && dom.remove();\n  }\n  // 创建播放器DOM\n  function createPlayerDom() {\n    if (!errorMsg) {\n      removePlayerDom();\n      const dom = document.createElement('div');\n      dom.id = id;\n      dom.style.width = '100%';\n      dom.style.height = '100%';\n      ysRef.value?.appendChild(dom);\n    }\n  }\n</script>\n\n<template>\n  <div ref=\"ysRef\" class=\"i-player-bg i-player-container\">\n    <div v-if=\"errorMsg\" class=\"i-player__error\">{{ errorMsg }}</div>\n  </div>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ysPlayer.vue2.mjs","sources":["../../../../../../../packages/components/live-player/src/ysPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useElementSize } from '@vueuse/core';\n  import EZUIKit from 'ezuikit-js';\n  import { nextTick, onMounted, shallowRef, watch } from 'vue';\n  import { uuid } from './live-player';\n  // 萤石云播放器\n  defineOptions({\n    name: 'YsPlayer',\n  });\n\n  // 传值方式\n  // 1、传url、accessToken\n  // 2、传deviceSerial、channel、accessToken\n  const props = defineProps<{\n    // 播放地址\n    // 高清：ezopen://open.ys7.com/${设备序列号}/${通道号}.hd.live\n    // 流畅：ezopen://open.ys7.com/${设备序列号}/${通道号}.live\n    url?: string;\n    // 设备序列号\n    deviceSerial?: string;\n    // 通道号\n    channel?: number;\n    // 清晰度,默认为空，也表示高清\n    // hd：高清；sd：流畅\n    quality?: 'hd' | 'sd' | '';\n    accessToken: string;\n    debug?: boolean;\n  }>();\n\n  // 播放器模板ID\n  // 可在萤石云控制台查看、修改、获取\n  // 位置：云直播-轻应用-特致珈默认模板\n  const PLAYER_TEMPLATE = '5f295a9341a74d439b5d69374c90d501';\n  const id = uuid();\n  let playerInstance: any = null;\n  let errorMsg = '';\n  const ysRef = shallowRef();\n  const { width, height } = useElementSize(ysRef);\n  let ratio = 16 / 9;\n  let isCurrentFullscreen = false;\n\n  onMounted(() => play());\n\n  defineExpose({ play, destroy, resize });\n\n  // 防抖函数\n  function debounce(func: Function, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> | null = null;\n    return function (this: any, ...args: any[]) {\n      if (timeout) clearTimeout(timeout);\n      timeout = setTimeout(() => func.apply(this, args), wait);\n    };\n  }\n\n  // 加上防抖的 resize 函数\n  const debouncedResize = debounce(resize, 300);\n\n  watch(\n    () => [width.value, height.value, ratio],\n    () => {\n      if (!isCurrentFullscreen) {\n        debouncedResize();\n      }\n    },\n  );\n\n  function play(options?: Record<string, any>) {\n    props.debug && console.log('play', options);\n    if (!props.accessToken) {\n      errorMsg = `params 'accessToken' is not found`;\n    } else {\n      const url = formatterUrl();\n      if (url) {\n        createPlayerDom();\n        nextTick(() => createPlayer(options));\n      }\n    }\n  }\n  function destroy() {\n    if (playerInstance) {\n      playerInstance.destroy();\n      playerInstance = null;\n      removePlayerDom();\n    }\n  }\n  function resize() {\n    // 根据播放器宽高比，设置播放器高度\n    if (width.value > 0 && height.value > 0) {\n      let calculatedWidth = width.value;\n      let calculatedHeight = calculatedWidth / ratio;\n      if (calculatedHeight > height.value) {\n        calculatedHeight = height.value;\n        calculatedWidth = calculatedHeight * ratio;\n      }\n      props.debug && console.log('playerInstance', playerInstance);\n      if (playerInstance.resize) {\n        playerInstance.resize(calculatedWidth, calculatedHeight);\n      } else {\n        const dom = document.getElementById(id);\n        if (dom) {\n          dom.style.width = `${calculatedWidth}px`;\n          dom.style.height = `${calculatedHeight}px`;\n        }\n      }\n    }\n  }\n\n  /**\n   * 创建萤石云播放器实例，播放萤石云直播流\n   */\n  function createPlayer(options?: Record<string, any>) {\n    playerInstance = new EZUIKit.EZUIKitPlayer({\n      id,\n      url: formatterUrl(),\n      accessToken: props.accessToken,\n      template: PLAYER_TEMPLATE,\n      width: width.value,\n      height: height.value,\n      audio: 1,\n      // @ts-ignore\n      loggerOptions: {\n        name: 'YSPLAYER',\n        level: props.debug ? 'DEBUG' : 'ERROR',\n        showTime: true,\n      },\n      ...options,\n    });\n\n    playerInstance.eventEmitter.on('fullscreen', (args: any) => {\n      props.debug && console.log('fullscreen', args);\n      isCurrentFullscreen = true;\n    });\n    playerInstance.eventEmitter.on('exitFullscreen', (args: any) => {\n      props.debug && console.log('exitFullscreen', args);\n      isCurrentFullscreen = false;\n    });\n    playerInstance.eventEmitter.on('destroy', (args: any) => {\n      props.debug && console.log('destroy', args);\n    });\n    playerInstance.eventEmitter.on('init', (args: any) => {\n      props.debug && console.log('init', args);\n    });\n    playerInstance.eventEmitter.on('play', (args: any) => {\n      props.debug && console.log('play', args);\n    });\n    playerInstance.eventEmitter.on('videoInfo', (args: any) => {\n      const { width: w, height: h } = args;\n      // 计算播放器宽高比\n      if (w && h) {\n        ratio = w / h;\n      }\n    });\n  }\n\n  function formatterUrl(): string {\n    if (props.url) {\n      return props.url;\n    } else {\n      if (props.deviceSerial && props.channel) {\n        const quality = props.quality === '' || props.quality === 'hd' ? 'hd.' : '';\n        return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;\n      } else {\n        errorMsg = `params 'deviceSerial' or 'channel' is not found`;\n        return '';\n      }\n    }\n  }\n\n  // 移除播放器DOM\n  function removePlayerDom() {\n    const dom = document.getElementById(id);\n    dom && dom.remove();\n  }\n  // 创建播放器DOM\n  function createPlayerDom() {\n    if (!errorMsg) {\n      removePlayerDom();\n      const dom = document.createElement('div');\n      dom.id = id;\n      dom.style.width = '100%';\n      dom.style.height = '100%';\n      ysRef.value?.appendChild(dom);\n    }\n  }\n</script>\n\n<template>\n  <div ref=\"ysRef\" class=\"i-player-bg i-player-container\">\n    <div v-if=\"errorMsg\" class=\"i-player__error\" style=\"color: red; font-weight: bold\">\n      {{ errorMsg }}\n    </div>\n  </div>\n</template>\n"],"names":[],"mappings":"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"}

package/lib/components/live-player/src/ysPlayer.vue.d.ts

@@ -33,6 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     width: import("vue").Ref<number, number>;
     height: import("vue").Ref<number, number>;
     ratio: number;
+    isCurrentFullscreen: boolean;
     debounce: (func: Function, wait: number) => (this: any, ...args: any[]) => void;
     debouncedResize: (this: any, ...args: any[]) => void;
     play: (options?: Record<string, any>) => void;

package/lib/components/live-player/src/ysPlayer.vue2.js

@@ -11,7 +11,8 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 const _hoisted_1 = {
   key: 0,
-  class: "i-player__error"
+  class: "i-player__error",
+  style: { "color": "red", "font-weight": "bold" }
 };
 const PLAYER_TEMPLATE = "5f295a9341a74d439b5d69374c90d501";
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -35,6 +36,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const ysRef = vue.shallowRef();
     const { width, height } = core.useElementSize(ysRef);
     let ratio = 16 / 9;
+    let isCurrentFullscreen = false;
     vue.onMounted(() => play());
     __expose({ play, destroy, resize });
     function debounce(func, wait) {
@@ -48,12 +50,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const debouncedResize = debounce(resize, 300);
     vue.watch(
       () => [width.value, height.value, ratio],
-      () => debouncedResize()
+      () => {
+        if (!isCurrentFullscreen) {
+          debouncedResize();
+        }
+      }
     );
     function play(options) {
       props.debug && console.log("play", options);
       if (!props.accessToken) {
-        errorMsg = `params 'accessToken' is not fount`;
+        errorMsg = `params 'accessToken' is not found`;
       } else {
         const url = formatterUrl();
         if (url) {
@@ -79,7 +85,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           calculatedHeight = height.value;
           calculatedWidth = calculatedHeight * ratio;
         }
-        playerInstance == null ? void 0 : playerInstance.resize(calculatedWidth, calculatedHeight);
+        props.debug && console.log("playerInstance", playerInstance);
+        if (playerInstance.resize) {
+          playerInstance.resize(calculatedWidth, calculatedHeight);
+        } else {
+          const dom = document.getElementById(id);
+          if (dom) {
+            dom.style.width = `${calculatedWidth}px`;
+            dom.style.height = `${calculatedHeight}px`;
+          }
+        }
       }
     }
     __name(resize, "resize");
@@ -95,11 +110,19 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         // @ts-ignore
         loggerOptions: {
           name: "YSPLAYER",
-          level: "ERROR",
+          level: props.debug ? "DEBUG" : "ERROR",
           showTime: true
         },
         ...options
       });
+      playerInstance.eventEmitter.on("fullscreen", (args) => {
+        props.debug && console.log("fullscreen", args);
+        isCurrentFullscreen = true;
+      });
+      playerInstance.eventEmitter.on("exitFullscreen", (args) => {
+        props.debug && console.log("exitFullscreen", args);
+        isCurrentFullscreen = false;
+      });
       playerInstance.eventEmitter.on("destroy", (args) => {
         props.debug && console.log("destroy", args);
       });
@@ -125,7 +148,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           const quality = props.quality === "" || props.quality === "hd" ? "hd." : "";
           return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;
         } else {
-          errorMsg = `params 'deviceSerial' or 'channel' is not fount`;
+          errorMsg = `params 'deviceSerial' or 'channel' is not found`;
           return "";
         }
       }

package/lib/components/live-player/src/ysPlayer.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ysPlayer.vue2.js","sources":["../../../../../../../packages/components/live-player/src/ysPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useElementSize } from '@vueuse/core';\n  import EZUIKit from 'ezuikit-js';\n  import { nextTick, onMounted, shallowRef, watch } from 'vue';\n  import { uuid } from './live-player';\n  // 萤石云播放器\n  defineOptions({\n    name: 'YsPlayer',\n  });\n\n  // 传值方式\n  // 1、传url、accessToken\n  // 2、传deviceSerial、channel、accessToken\n  const props = defineProps<{\n    // 播放地址\n    // 高清：ezopen://open.ys7.com/${设备序列号}/${通道号}.hd.live\n    // 流畅：ezopen://open.ys7.com/${设备序列号}/${通道号}.live\n    url?: string;\n    // 设备序列号\n    deviceSerial?: string;\n    // 通道号\n    channel?: number;\n    // 清晰度,默认为空，也表示高清\n    // hd：高清；sd：流畅\n    quality?: 'hd' | 'sd' | '';\n    accessToken: string;\n    debug?: boolean;\n  }>();\n\n  // 播放器模板ID\n  // 可在萤石云控制台查看、修改、获取\n  // 位置：云直播-轻应用-特致珈默认模板\n  const PLAYER_TEMPLATE = '5f295a9341a74d439b5d69374c90d501';\n  const id = uuid();\n  let playerInstance: any = null;\n  let errorMsg = '';\n  const ysRef = shallowRef();\n  const { width, height } = useElementSize(ysRef);\n  let ratio = 16 / 9;\n\n  onMounted(() => play());\n\n  defineExpose({ play, destroy, resize });\n\n  // 防抖函数\n  function debounce(func: Function, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> | null = null;\n    return function (this: any, ...args: any[]) {\n      if (timeout) clearTimeout(timeout);\n      timeout = setTimeout(() => func.apply(this, args), wait);\n    };\n  }\n\n  // 加上防抖的 resize 函数\n  const debouncedResize = debounce(resize, 300);\n\n  watch(\n    () => [width.value, height.value, ratio],\n    () => debouncedResize(),\n  );\n\n  function play(options?: Record<string, any>) {\n    props.debug && console.log('play', options);\n    if (!props.accessToken) {\n      errorMsg = `params 'accessToken' is not fount`;\n    } else {\n      const url = formatterUrl();\n      if (url) {\n        createPlayerDom();\n        nextTick(() => createPlayer(options));\n      }\n    }\n  }\n  function destroy() {\n    if (playerInstance) {\n      playerInstance.destroy();\n      playerInstance = null;\n      removePlayerDom();\n    }\n  }\n  function resize() {\n    // 根据播放器宽高比，设置播放器高度\n    if (width.value > 0 && height.value > 0) {\n      let calculatedWidth = width.value;\n      let calculatedHeight = calculatedWidth / ratio;\n      if (calculatedHeight > height.value) {\n        calculatedHeight = height.value;\n        calculatedWidth = calculatedHeight * ratio;\n      }\n      playerInstance?.resize(calculatedWidth, calculatedHeight);\n    }\n  }\n\n  /**\n   * 创建萤石云播放器实例，播放萤石云直播流\n   */\n  function createPlayer(options?: Record<string, any>) {\n    playerInstance = new EZUIKit.EZUIKitPlayer({\n      id,\n      url: formatterUrl(),\n      accessToken: props.accessToken,\n      template: PLAYER_TEMPLATE,\n      width: width.value,\n      height: height.value,\n      audio: 1,\n      // @ts-ignore\n      loggerOptions: {\n        name: 'YSPLAYER',\n        level: 'ERROR',\n        showTime: true,\n      },\n      ...options,\n    });\n\n    playerInstance.eventEmitter.on('destroy', (args: any) => {\n      props.debug && console.log('destroy', args);\n    });\n    playerInstance.eventEmitter.on('init', (args: any) => {\n      props.debug && console.log('init', args);\n    });\n    playerInstance.eventEmitter.on('play', (args: any) => {\n      props.debug && console.log('play', args);\n    });\n    playerInstance.eventEmitter.on('videoInfo', (args: any) => {\n      const { width: w, height: h } = args;\n      // 计算播放器宽高比\n      if (w && h) {\n        ratio = w / h;\n      }\n    });\n  }\n\n  function formatterUrl(): string {\n    if (props.url) {\n      return props.url;\n    } else {\n      if (props.deviceSerial && props.channel) {\n        const quality = props.quality === '' || props.quality === 'hd' ? 'hd.' : '';\n        return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;\n      } else {\n        errorMsg = `params 'deviceSerial' or 'channel' is not fount`;\n        return '';\n      }\n    }\n  }\n\n  // 移除播放器DOM\n  function removePlayerDom() {\n    const dom = document.getElementById(id);\n    dom && dom.remove();\n  }\n  // 创建播放器DOM\n  function createPlayerDom() {\n    if (!errorMsg) {\n      removePlayerDom();\n      const dom = document.createElement('div');\n      dom.id = id;\n      dom.style.width = '100%';\n      dom.style.height = '100%';\n      ysRef.value?.appendChild(dom);\n    }\n  }\n</script>\n\n<template>\n  <div ref=\"ysRef\" class=\"i-player-bg i-player-container\">\n    <div v-if=\"errorMsg\" class=\"i-player__error\">{{ errorMsg }}</div>\n  </div>\n</template>\n"],"names":["uuid","shallowRef","useElementSize","onMounted","watch","nextTick"],"mappings":"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"}
+{"version":3,"file":"ysPlayer.vue2.js","sources":["../../../../../../../packages/components/live-player/src/ysPlayer.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useElementSize } from '@vueuse/core';\n  import EZUIKit from 'ezuikit-js';\n  import { nextTick, onMounted, shallowRef, watch } from 'vue';\n  import { uuid } from './live-player';\n  // 萤石云播放器\n  defineOptions({\n    name: 'YsPlayer',\n  });\n\n  // 传值方式\n  // 1、传url、accessToken\n  // 2、传deviceSerial、channel、accessToken\n  const props = defineProps<{\n    // 播放地址\n    // 高清：ezopen://open.ys7.com/${设备序列号}/${通道号}.hd.live\n    // 流畅：ezopen://open.ys7.com/${设备序列号}/${通道号}.live\n    url?: string;\n    // 设备序列号\n    deviceSerial?: string;\n    // 通道号\n    channel?: number;\n    // 清晰度,默认为空，也表示高清\n    // hd：高清；sd：流畅\n    quality?: 'hd' | 'sd' | '';\n    accessToken: string;\n    debug?: boolean;\n  }>();\n\n  // 播放器模板ID\n  // 可在萤石云控制台查看、修改、获取\n  // 位置：云直播-轻应用-特致珈默认模板\n  const PLAYER_TEMPLATE = '5f295a9341a74d439b5d69374c90d501';\n  const id = uuid();\n  let playerInstance: any = null;\n  let errorMsg = '';\n  const ysRef = shallowRef();\n  const { width, height } = useElementSize(ysRef);\n  let ratio = 16 / 9;\n  let isCurrentFullscreen = false;\n\n  onMounted(() => play());\n\n  defineExpose({ play, destroy, resize });\n\n  // 防抖函数\n  function debounce(func: Function, wait: number) {\n    let timeout: ReturnType<typeof setTimeout> | null = null;\n    return function (this: any, ...args: any[]) {\n      if (timeout) clearTimeout(timeout);\n      timeout = setTimeout(() => func.apply(this, args), wait);\n    };\n  }\n\n  // 加上防抖的 resize 函数\n  const debouncedResize = debounce(resize, 300);\n\n  watch(\n    () => [width.value, height.value, ratio],\n    () => {\n      if (!isCurrentFullscreen) {\n        debouncedResize();\n      }\n    },\n  );\n\n  function play(options?: Record<string, any>) {\n    props.debug && console.log('play', options);\n    if (!props.accessToken) {\n      errorMsg = `params 'accessToken' is not found`;\n    } else {\n      const url = formatterUrl();\n      if (url) {\n        createPlayerDom();\n        nextTick(() => createPlayer(options));\n      }\n    }\n  }\n  function destroy() {\n    if (playerInstance) {\n      playerInstance.destroy();\n      playerInstance = null;\n      removePlayerDom();\n    }\n  }\n  function resize() {\n    // 根据播放器宽高比，设置播放器高度\n    if (width.value > 0 && height.value > 0) {\n      let calculatedWidth = width.value;\n      let calculatedHeight = calculatedWidth / ratio;\n      if (calculatedHeight > height.value) {\n        calculatedHeight = height.value;\n        calculatedWidth = calculatedHeight * ratio;\n      }\n      props.debug && console.log('playerInstance', playerInstance);\n      if (playerInstance.resize) {\n        playerInstance.resize(calculatedWidth, calculatedHeight);\n      } else {\n        const dom = document.getElementById(id);\n        if (dom) {\n          dom.style.width = `${calculatedWidth}px`;\n          dom.style.height = `${calculatedHeight}px`;\n        }\n      }\n    }\n  }\n\n  /**\n   * 创建萤石云播放器实例，播放萤石云直播流\n   */\n  function createPlayer(options?: Record<string, any>) {\n    playerInstance = new EZUIKit.EZUIKitPlayer({\n      id,\n      url: formatterUrl(),\n      accessToken: props.accessToken,\n      template: PLAYER_TEMPLATE,\n      width: width.value,\n      height: height.value,\n      audio: 1,\n      // @ts-ignore\n      loggerOptions: {\n        name: 'YSPLAYER',\n        level: props.debug ? 'DEBUG' : 'ERROR',\n        showTime: true,\n      },\n      ...options,\n    });\n\n    playerInstance.eventEmitter.on('fullscreen', (args: any) => {\n      props.debug && console.log('fullscreen', args);\n      isCurrentFullscreen = true;\n    });\n    playerInstance.eventEmitter.on('exitFullscreen', (args: any) => {\n      props.debug && console.log('exitFullscreen', args);\n      isCurrentFullscreen = false;\n    });\n    playerInstance.eventEmitter.on('destroy', (args: any) => {\n      props.debug && console.log('destroy', args);\n    });\n    playerInstance.eventEmitter.on('init', (args: any) => {\n      props.debug && console.log('init', args);\n    });\n    playerInstance.eventEmitter.on('play', (args: any) => {\n      props.debug && console.log('play', args);\n    });\n    playerInstance.eventEmitter.on('videoInfo', (args: any) => {\n      const { width: w, height: h } = args;\n      // 计算播放器宽高比\n      if (w && h) {\n        ratio = w / h;\n      }\n    });\n  }\n\n  function formatterUrl(): string {\n    if (props.url) {\n      return props.url;\n    } else {\n      if (props.deviceSerial && props.channel) {\n        const quality = props.quality === '' || props.quality === 'hd' ? 'hd.' : '';\n        return `ezopen://open.ys7.com/${props.deviceSerial}/${props.channel}.${quality}live`;\n      } else {\n        errorMsg = `params 'deviceSerial' or 'channel' is not found`;\n        return '';\n      }\n    }\n  }\n\n  // 移除播放器DOM\n  function removePlayerDom() {\n    const dom = document.getElementById(id);\n    dom && dom.remove();\n  }\n  // 创建播放器DOM\n  function createPlayerDom() {\n    if (!errorMsg) {\n      removePlayerDom();\n      const dom = document.createElement('div');\n      dom.id = id;\n      dom.style.width = '100%';\n      dom.style.height = '100%';\n      ysRef.value?.appendChild(dom);\n    }\n  }\n</script>\n\n<template>\n  <div ref=\"ysRef\" class=\"i-player-bg i-player-container\">\n    <div v-if=\"errorMsg\" class=\"i-player__error\" style=\"color: red; font-weight: bold\">\n      {{ errorMsg }}\n    </div>\n  </div>\n</template>\n"],"names":["uuid","shallowRef","useElementSize","onMounted","watch","nextTick"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yimou6/common-ui",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "Vue3 Component Library",
   "license": "MIT",
   "author": "yimou6",