perf(external/Composes): 摄像头新增视频标题

@@ -15,6 +15,12 @@ const props = defineProps({
   sourceSrc: {
     type: String
   },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
   w: {
     type: Number,
     default: 300
@@ -41,7 +47,8 @@ const options: VideoJsPlayerOptions = {
   preload: 'auto', // 预加载
   autoplay: true, // 是否自动播放
   fluid: false, // 自适应宽高
-  src: props.sourceSrc, // 要嵌入的视频源的源 URL
+  poster: props?.avatar || '',
+  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
   muted: true,
   userActions: {
     hotkeys: true

@@ -2,7 +2,17 @@
   <div class="banner-box" ref="root">
     <div class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
-        <CameraItem ref="cameraRef" :key="item + index" :sourceSrc="item.url" :w="w" :h="h" :index="index" />
+        <CameraItem
+          ref="cameraRef"
+          :name="item.name"
+          :avatar="item.avatar"
+          :key="item + index"
+          :sourceSrc="item.url"
+          :w="w"
+          :h="h"
+          :index="index"
+        />
+        <span class="video-title">{{ item.name }}</span>
       </div>
     </div>
     <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
@@ -37,46 +47,48 @@ let interval = ref(4000)
 
 const computedFunc = (initial: number, source: any) => {
   if (initial < 0) initial = 0
-  let len = source.length,
-    temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
-    temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
-    temp3 = initial,
-    temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
-    temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
-  return source.map((item: any, index: number) => {
-    let transform = `translate(-50%, -50%) scale(0.7)`,
-      zIndex = 0,
-      className = 'slide'
-    switch (index) {
-      case temp3:
-        transform = `translate(-50%, -50%) scale(1)`
-        className = ['slide', 'activate'] as any
-        zIndex = 3
-        break
-      case temp1:
-        transform = `translate(-80%, -50%) scale(0.7)`
-        zIndex = 1
-        break
-      case temp5:
-        transform = `translate(100%, -50%) scale(0.7)`
-        zIndex = 1
-        break
-      case temp2:
-        transform = `translate(-100%, -50%) scale(0.85)`
-        zIndex = 2
-        break
-      case temp4:
-        transform = `translate(58%, -50%) scale(0.85)`
-        zIndex = 2
-        break
-    }
-    item.sty = {
-      transform,
-      zIndex
-    }
-    item.className = className
-    return item
-  })
+  if (Array.isArray(source)) {
+    let len = source.length,
+      temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
+      temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
+      temp3 = initial,
+      temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
+      temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
+    return source?.map((item: any, index: number) => {
+      let transform = `translate(-50%, -50%) scale(0.7)`,
+        zIndex = 0,
+        className = 'slide'
+      switch (index) {
+        case temp3:
+          transform = `translate(-50%, -50%) scale(1)`
+          className = ['slide', 'activate'] as any
+          zIndex = 3
+          break
+        case temp1:
+          transform = `translate(-80%, -50%) scale(0.7)`
+          zIndex = 1
+          break
+        case temp5:
+          transform = `translate(100%, -50%) scale(0.7)`
+          zIndex = 1
+          break
+        case temp2:
+          transform = `translate(-100%, -50%) scale(0.85)`
+          zIndex = 2
+          break
+        case temp4:
+          transform = `translate(58%, -50%) scale(0.85)`
+          zIndex = 2
+          break
+      }
+      item.sty = {
+        transform,
+        zIndex
+      }
+      item.className = className
+      return item
+    })
+  }
 }
 
 watch(
@@ -156,6 +168,15 @@ function changeSlide(dir: string) {
       transform: translate(-50%, -50%);
       transition: 0.5s;
       box-shadow: 0 0 4px black;
+      .video-title {
+        width: v-bind('w+"px"');
+        font-size: 30px;
+        color: white;
+        position: absolute;
+        bottom: 6%;
+        left: 10%;
+        z-index: 999;
+      }
     }
   }
   .arrow {