perf: usage video.js refactor camera manage preview video modal

@@ -3,117 +3,63 @@
     <BasicModal
       v-bind="$attrs"
       width="55rem"
+      destroyOnClose
       :height="heightNum"
       @register="register"
       title="视频预览"
-      @cancel="handleCancel"
       :showOkBtn="false"
+      @cancel="handleCancel"
     >
-      <div class="video-sty">
-        <div>
-          <videoPlay
-            v-if="showVideo"
-            ref="video"
-            style="display: inline-block; width: 100%"
-            v-bind="options"
-          />
-        </div>
+      <div class="flex items-center justify-center bg-dark-900 w-full h-full min-h-52">
+        <BasicVideoPlay v-if="showVideo" :options="options" />
       </div>
-      <!-- <div
-        class="bg-black h-80 text-light-50 w-full h-full flex justify-center items-center"
-        v-if="!showVideo"
-      >
-        视频播放出错啦!
-      </div> -->
     </BasicModal>
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, nextTick, reactive } from 'vue';
+  import { ref, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
-  import { videoPlay } from 'vue3-video-play'; // 引入组件
-  import 'vue3-video-play/dist/style.css'; // 引入css
-  import { AccessMode, MediaType } from './config.data';
+  import { BasicVideoPlay, getVideoTypeByUrl } from '/@/components/Video';
+  import { AccessMode } from './config.data';
   import { getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { VideoJsPlayerOptions } from 'video.js';
 
   const heightNum = ref(800);
   const showVideo = ref(false);
-  const options = reactive({
-    width: '800px',
-    height: '450px',
-    color: '#409eff',
-    muted: false, //静音
-    webFullScreen: false,
-    autoPlay: true, //自动播放
-    currentTime: 0,
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    ligthOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制器
-    title: '', //视频名称
-    type: 'm3u8',
-    src: '', //视频源
-    controlBtns: [
-      'audioTrack',
-      'quality',
-      'speedRate',
-      'volume',
-      'setting',
-      'pip',
-      'pageFullScreen',
-      'fullScreen',
-    ],
+  const options = reactive<VideoJsPlayerOptions>({
+    width: '100%' as unknown as number,
+    height: '100%' as unknown as number,
+    autoplay: true,
   });
-  const video: any = ref(null);
 
-  nextTick(() => {
-    console.log(video.value);
-  });
-
-  const getMediaType = (suffix: string) => {
-    return suffix === MediaType.M3U8 ? suffix : `video/${suffix}`;
+  const setSources = (url: string) => {
+    options.sources = [
+      {
+        src: url,
+        type: getVideoTypeByUrl(url),
+      },
+    ];
   };
 
   const [register] = useModalInner(
     async (data: { record: CameraModel | StreamingManageRecord }) => {
-      let reg = /(?:.*)(?<=\.)/;
       const { record } = data;
       if (record.accessMode === AccessMode.ManuallyEnter) {
         if ((record as CameraModel).videoUrl) {
-          const type = (record as CameraModel).videoUrl.replace(reg, '');
-          showVideo.value = true;
-          options.type = getMediaType(type);
-          options.src = (record as CameraModel).videoUrl;
-          options.autoPlay = true;
+          setSources((record as CameraModel).videoUrl);
         }
       } else {
         try {
           const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
-          showVideo.value = true;
-          options.src = url;
-          const type = (url as CameraModel).videoUrl.replace(reg, '');
-          options.type = getMediaType(type);
-        } catch (error) {
-        } finally {
-          showVideo.value = true;
-        }
+          setSources(url);
+        } catch (error) {}
       }
+      showVideo.value = true;
     }
   );
 
   const handleCancel = () => {
-    //关闭暂停播放视频
-    options.src = '';
-    video.value.pause();
+    showVideo.value = false;
   };
 </script>
-<style>
-  .video-sty {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>