Merge branch 'dev_ft' into 'main_dev'

fix: 单个视频切换视频源，切换后未播放为新的视频源

See merge request yunteng/thingskit-view!183

 <template>
-  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
+  <div class="go-content-box" :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px' }">
     <video
       crossOrigin="anonymous"
       :id="`my-player`"
@@ -9,7 +9,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch, unref } from 'vue'
+import { onMounted, ref, onUnmounted, watch, unref, PropType } from 'vue'
 import videojs from 'video.js'
 import 'videojs-flvjs-es6'
 import type { VideoJsPlayerOptions } from 'video.js'
@@ -19,6 +19,7 @@ import { isShareMode } from '@/views/share/hook'
 import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
 import { useFingerprint } from '@/utils/external/useFingerprint'
 import { GetResult } from '@fingerprintjs/fingerprintjs'
+import { VideoPlayerTypeEnum } from '../config'
 
 const props = defineProps({
   sourceSrc: {
@@ -33,23 +34,11 @@ const props = defineProps({
   avatar: {
     type: String
   },
-  w: {
-    type: Number,
-    default: 300
-  },
-  h: {
-    type: Number,
-    default: 300
+  baseSize: {
+    type: Object as PropType<{ w: number; h: number }>
   }
 })
 
-enum VideoPlayerType {
-  m3u8 = 'application/x-mpegURL',
-  mp4 = 'video/mp4',
-  webm = 'video/webm',
-  flv = 'video/x-flv'
-}
-
 const isRtspProtocol = (url: string) => {
   const reg = /^rtsp:\/\//g
   return reg.test(url)
@@ -58,15 +47,15 @@ const isRtspProtocol = (url: string) => {
 const getVideoTypeByUrl = (url = '') => {
   try {
     const { protocol, pathname } = new URL(url)
-    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
+    if (protocol.startsWith('rtsp:')) return VideoPlayerTypeEnum.flv
     const reg = /[^.]\w*$/
     const mathValue = pathname.match(reg) || []
-    const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm'
-    const type = VideoPlayerType[ext]
-    return type ? type : VideoPlayerType.webm
+    const ext = (mathValue[0] as keyof typeof VideoPlayerTypeEnum) || 'webm'
+    const type = VideoPlayerTypeEnum[ext]
+    return type ? type : VideoPlayerTypeEnum.webm
   } catch (error) {
     console.error(error)
-    return VideoPlayerType.webm
+    return VideoPlayerTypeEnum.webm
   }
 }
 
@@ -82,11 +71,9 @@ const fingerprintResult = ref<Nullable<GetResult>>(null)
 const options: VideoJsPlayerOptions & Recordable = {
   language: 'zh-CN', // 设置语言
   controls: true, // 是否显示控制条
-  // preload: 'auto', // 预加载
   autoplay: props.autoPlay ? true : false, // 是否自动播放
   fluid: false, // 自适应宽高
   poster: props?.avatar || '',
-  // src: getSource() || '', // 要嵌入的视频源的源 URL
   sources: [],
   muted: props.autoPlay ? true : false,
   userActions: {
@@ -107,6 +94,7 @@ const options: VideoJsPlayerOptions & Recordable = {
 }
 
 const { getResult } = useFingerprint()
+
 async function getSource() {
   fingerprintResult.value = await getResult()
   let src = props.sourceSrc || ''
@@ -144,11 +132,11 @@ const initVideo = async () => {
 
 watch(
   () => props.sourceSrc,
-  async (newData: any) => {
+  async () => {
+    videoPlayer?.src('')
     const result = await getSource()
-    // props.sourceSrc = newData
-    if(props.autoPlay){
-      videoPlayer?.src(result) as any
+    if (props.autoPlay) {
+      videoPlayer?.src(result)
       videoPlayer?.play()
     }
   },
@@ -157,6 +145,20 @@ watch(
   }
 )
 
+watch(
+  () => props.autoPlay,
+  async (newData: boolean) => {
+    if (newData) {
+      handleVideoPlay()
+    } else {
+      videoPlayer?.pause()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
 onMounted(() => {
   initVideo()
 })
@@ -171,8 +173,8 @@ onUnmounted(() => {
 //播放
 const handleVideoPlay = () => videoPlayer?.play()
 
+//暂停和销毁
 const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
-//暂停
 defineExpose({
   handleVideoPlay,
   handleVideoDispose

@@ -8,10 +8,30 @@ export enum sourceTypeEnum {
   PLATFORM = 'platform'
 }
 
+export enum VideoPlayerTypeEnum {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+  flv = 'video/x-flv'
+}
+
+export interface videoListInterface {
+  name: string
+  accessMode: number
+  id: string
+  videoUrl: string
+  label: string
+  value: string
+}
+
+export enum AccessMode {
+  ManuallyEnter = 0,
+  Streaming = 1
+}
+
 export const option = {
-  url:'',
   dataset: '',
-  autoplay: false,
+  autoplay: true,
   poster: '',
   sourceType: 'custom',
   organization: ''

@@ -9,7 +9,7 @@
       <setting-item>
         <n-radio-group @update:value="handleChecked" v-model:value="optionData.sourceType" name="radiogroup">
           <n-space>
-            <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :value="item.value">
+            <n-radio v-for="(item, index) in sourceTypes" :key="item.value + index" :value="item.value">
               {{ item.label }}
             </n-radio>
           </n-space>
@@ -40,7 +40,7 @@
       <setting-item>
         <n-select
           @update:value="handleSelect"
-          v-model:value="optionData.dataset"
+          v-model:value="url"
           :options="videoOptions"
           placeholder="请选择视频地址"
         />
@@ -56,21 +56,12 @@
 
 <script setup lang="ts">
 import { PropType, ref, onMounted } from 'vue'
-import { option, sourceTypeEnum } from './config'
+import { AccessMode, option, sourceTypeEnum, videoListInterface } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { NTreeSelect } from 'naive-ui'
 import { getOrganizationList, getVideoList, getVideoUrl } from '@/api/external/common/index'
 import { TKUpload } from '@/components/external/Common/TKUpload'
 
-interface videoListIF {
-  name: string
-  accessMode: number
-  id: string
-  videoUrl: string
-  label: string
-  value: string
-}
-
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
@@ -91,7 +82,9 @@ const sourceTypes = [
 
 const originationOption = ref([])
 
-const videoOptions = ref<videoListIF[]>([])
+const url = ref('')
+
+const videoOptions = ref<videoListInterface[]>([])
 
 const getOriginationList = async () => {
   const res = await getOrganizationList()
@@ -106,9 +99,9 @@ const handleUpdateTreeValue = (value: string) => {
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
   if (!res) return
-  videoOptions.value = res?.data?.map((item: videoListIF) => ({
+  videoOptions.value = res?.data?.map((item: videoListInterface) => ({
     label: item.name,
-    value: item.accessMode === 1 ? item.id : item.videoUrl,
+    value: item.accessMode === AccessMode.Streaming ? item.id : item.videoUrl,
     id: item.id,
     accessMode: item.accessMode
   }))
@@ -118,7 +111,7 @@ const getVideoUrlById = async (id: string) => {
   const res = await getVideoUrl(id)
   if (!res) return
   const { url } = res.data
-  props.optionData.url = url
+  props.optionData.dataset = url
 }
 
 const handleChecked = (value: string) => {
@@ -128,13 +121,13 @@ const handleChecked = (value: string) => {
   }
 }
 
-const handleSelect = (_: string, e: videoListIF) => {
-  const { accessMode, id } = e
+const handleSelect = (_: string, e: videoListInterface) => {
+  const { accessMode, id, value } = e
   //1表示，需要从服务端调取接口换取播放的地址，0则不需要
-  if (accessMode === 1) {
+  if (accessMode === AccessMode.Streaming) {
     getVideoUrlById(id)
   } else {
-    props.optionData.url = ''
+    props.optionData.dataset = value as string
   }
 }
 

 <template>
   <div>
-    <VideoPlay :w="w" :h="h" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
+    <VideoPlay :baseSize="{ w, h }" :sourceSrc="option.dataset" :autoPlay="option.autoplay" :avatar="option.poster" />
   </div>
 </template>
 <script setup lang="ts">
@@ -18,22 +18,18 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { autoplay, dataset, poster, url } = toRefs(props.chartConfig.option)
+const { autoplay, dataset, poster } = toRefs(props.chartConfig.option as typeof configOption)
 
 const option = shallowReactive({
   dataset: configOption.dataset,
   poster: configOption.poster,
-  autoplay:configOption.autoplay
+  autoplay: configOption.autoplay
 })
 
 watch(
   () => dataset?.value,
   (newData: string) => {
-    if (url?.value) {
-      option.dataset = url?.value
-    } else {
-      option.dataset = newData
-    }
+    option.dataset = newData
   },
   {
     immediate: true
@@ -41,19 +37,10 @@ watch(
 )
 
 watch(
-  () => poster?.value,
-  (newData: string) => {
-    option.poster = newData
-  },
-  {
-    immediate: true
-  }
-)
-
-watch(
-  () => autoplay?.value,
-  (newData:boolean) => {
-    option.autoplay = newData
+  () => [poster.value, autoplay.value],
+  newData => {
+    option.poster = newData.at(-2) as string
+    option.autoplay = newData.at(-1) as boolean
   },
   {
     immediate: true