添加内容

src/views/remote/videoCall/videoInfo.vue

@@ -16,21 +16,30 @@
             </a-space>
         </div>
 <!--      其余的视频窗口-->
-        <video-slider class="mb-3 px-4"></video-slider>
+        <video-slider class="mb-3 px-4" :id-set="userVideoContainerSet.onTopUserSet"></video-slider>
 <!--        放大的窗口-->
-        <video-tools class="px-4"></video-tools>
+        <video-tools :id="userVideoContainerSet.inCenter" class="px-4"></video-tools>
     </div>
 </template>
 
 <script setup lang="ts">
 import VideoSlider from './videoSlider.vue'
 import VideoTools from './videoTools.vue'
-import {useAnyR} from "AnyR/index";
 import {allOtherChattersIdSet} from "AnyR/states/chatChannelStates";
+import {computed, ref, onMounted} from "vue";
 
+const inCenterUserVideoId = ref('');
 
-const AnyR = useAnyR()
+onMounted(function () {
+  inCenterUserVideoId.value = allOtherChattersIdSet.value[0];
+})
 
+const userVideoContainerSet = computed(function () {
+  return {
+    onTopUserSet: allOtherChattersIdSet.value.filter((a: any) => a!==inCenterUserVideoId.value),
+    inCenter: inCenterUserVideoId.value
+  }
+})
 
 const videoTitle = ref('2024-02-17 10:22:23远程协助事件')
 </script>

src/views/remote/videoCall/videoSlider.vue

@@ -4,7 +4,7 @@
         <div class="cursor-pointer" @click="slideLeft"><icon-left /></div>
         <div class="slider-container mb-1">
             <a-space class="slider-content overflow-y-hidden" :size="8" :style="sliderStyles">
-                <video-item class="slider-item" v-for="item in 10"></video-item>
+                <video-item class="slider-item" v-for="item in ps.idSet" :key="item" :is-self="false" :id="item"></video-item>
             </a-space>
         </div>
         <!-- 往右 -->
@@ -16,6 +16,10 @@
 import VideoItem from './videoItem.vue'
 import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
 
+const ps = defineProps<{
+  idSet: Array<any>
+}>()
+
 const sliderWidth = ref(150) //滑块宽度
 const slidePosition = ref(0) //初始位置
 const slideDistance = 150 // 滑动距离

src/views/remote/videoCall/videoTools.vue

 <template>
     <div>
-        <div class="relative mb-4">
+        <div class="relative mb-4" style="height: 300px" :id="`RemoteVideo${ps.id}`">
             <div class="absolute flex justify-between items-center p-1 t-0 l-0 w-full z-10">
                 <div class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">吴彦谦</div>
                 <div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
@@ -44,6 +44,10 @@
 <script setup lang="ts">
 import {useAnyR} from "AnyR/index";
 
+const ps = defineProps<{
+  id: any
+}>()
+
 const AnyR = useAnyR();
 
 function hangupCall() {