Merge branch 'fix/data-board-video-component' into 'main_dev'

fix: 修复看板管理通过平台获取播放视频

See merge request yunteng/thingskit-front!840

@@ -2,17 +2,23 @@
   import { isNumber } from 'lodash';
   import { isNumber } from 'lodash';
   import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
   import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
   import 'video.js/dist/video-js.css';
   import 'video.js/dist/video-js.css';
-  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { computed, CSSProperties, onMounted, onUnmounted, ref, toRaw, unref } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
   import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
   import { isShareMode } from '/@/views/sys/share/hook';
   import { isShareMode } from '/@/views/sys/share/hook';
   import 'videojs-flvjs-es6';
   import 'videojs-flvjs-es6';
   const { prefixCls } = useDesign('basic-video-play');
   const { prefixCls } = useDesign('basic-video-play');
 
 
-  const props = defineProps<{
-    options?: VideoJsPlayerOptions;
-    withToken?: boolean;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      options?: VideoJsPlayerOptions;
+      withToken?: boolean;
+      immediateInitOnMounted?: boolean;
+    }>(),
+    {
+      immediateInitOnMounted: true,
+    }
+  );
 
 
   const emit = defineEmits<{
   const emit = defineEmits<{
     (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
     (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
@@ -68,8 +74,18 @@
     });
     });
   };
   };
 
 
+  const customInit = (getOptionsFn: (optios: VideoJsPlayerOptions) => VideoJsPlayerOptions) => {
+    return (videoPlayInstance.value = videoJs(
+      unref(videoPlayEl)!,
+      getOptionsFn(toRaw(unref(getOptions))),
+      () => {
+        emit('ready', unref(videoPlayInstance));
+      }
+    ));
+  };
+
   onMounted(() => {
   onMounted(() => {
-    init();
+    props.immediateInitOnMounted && init();
   });
   });
 
 
   onUnmounted(() => {
   onUnmounted(() => {
@@ -79,6 +95,7 @@
   });
   });
 
 
   defineExpose({
   defineExpose({
+    customInit,
     reloadPlayer: init,
     reloadPlayer: init,
     getInstance: () => unref(videoPlayInstance),
     getInstance: () => unref(videoPlayInstance),
   });
   });

@@ -42,17 +42,17 @@
 
 
   const handleGetVideoPlayUrl = async () => {
   const handleGetVideoPlayUrl = async () => {
     try {
     try {
-      const instance = unref(basicVideoPlayEl)?.getInstance();
       const { config } = props;
       const { config } = props;
       const { option } = config;
       const { option } = config;
       const { videoConfig, uuid } = option || {};
       const { videoConfig, uuid } = option || {};
       if (!uuid) return;
       if (!uuid) return;
       const { url, id, accessMode } = videoConfig || {};
       const { url, id, accessMode } = videoConfig || {};
-      const type = getVideoTypeByUrl(url!);
+      let type = getVideoTypeByUrl(url!);
       let playUrl = url;
       let playUrl = url;
       if (accessMode === AccessMode.Streaming && id) {
       if (accessMode === AccessMode.Streaming && id) {
         const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!);
         const { data: { url } = { url: '' } } = await getStreamingPlayUrl(id!);
         playUrl = url;
         playUrl = url;
+        playUrl && (type = getVideoTypeByUrl(playUrl!));
       }
       }
 
 
       if (isRtspProtocol(url!)) {
       if (isRtspProtocol(url!)) {
@@ -60,10 +60,6 @@
         const { visitorId } = result;
         const { visitorId } = result;
         playUrl = getFlvPlayUrl(playUrl!, visitorId);
         playUrl = getFlvPlayUrl(playUrl!, visitorId);
         withToken.value = true;
         withToken.value = true;
-
-        (instance!.options_ as any).flvjs.config.headers = {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-        };
       }
       }
 
 
       playSource.value = {
       playSource.value = {
@@ -71,7 +67,17 @@
         type,
         type,
       };
       };
 
 
-      instance?.src(toRaw(unref(playSource)));
+      const instance = unref(basicVideoPlayEl)?.customInit((options) => {
+        withToken.value = true;
+
+        if (unref(withToken)) {
+          (options as any).flvjs.config.headers = {
+            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+          };
+        }
+        return { ...options, sources: [toRaw(unref(playSource))] } as VideoJsPlayerOptions;
+      });
+
       instance?.play();
       instance?.play();
     } finally {
     } finally {
       loading.value = false;
       loading.value = false;
@@ -80,8 +86,19 @@
 
 
   const handleSelectPreview = () => {
   const handleSelectPreview = () => {
     loading.value = false;
     loading.value = false;
-    const instance = unref(basicVideoPlayEl)?.getInstance();
-    instance?.src({ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay });
+    const instance = unref(basicVideoPlayEl)?.customInit((options) => {
+      withToken.value = true;
+
+      if (unref(withToken)) {
+        (options as any).flvjs.config.headers = {
+          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+        };
+      }
+      return {
+        ...options,
+        sources: [{ type: getVideoTypeByUrl(exampleVideoPlay), src: exampleVideoPlay }],
+      } as VideoJsPlayerOptions;
+    });
     instance?.play();
     instance?.play();
   };
   };
 
 
@@ -103,7 +120,12 @@
 <template>
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center p-2">
   <main class="w-full h-full flex flex-col justify-center items-center p-2">
     <Spin :spinning="loading" wrapper-class-name="video-spin">
     <Spin :spinning="loading" wrapper-class-name="video-spin">
-      <BasicVideoPlay ref="basicVideoPlayEl" :options="getOptions" :with-token="withToken" />
+      <BasicVideoPlay
+        ref="basicVideoPlayEl"
+        :options="getOptions"
+        :with-token="withToken"
+        :immediateInitOnMounted="false"
+      />
     </Spin>
     </Spin>
   </main>
   </main>
 </template>
 </template>