@tencentcloud/roomkit-electron-vue3 2.7.1 → 2.8.1

package/src/TUIRoom/components/{RoomContent → Stream/common}/StreamList/index.vue

@@ -14,15 +14,14 @@
       @wheel="handleWheel"
     >
       <StreamRegion
-        v-for="streamInfo in streamInfoList"
+        v-for="streamInfo in validStreamInfoList"
         class="stream-list-item"
         :key="`${streamInfo.userId}_${streamInfo.streamType}`"
-        @room-dblclick="$emit('room-dblclick', streamInfo)"
         :streamInfo="streamInfo"
         :style="streamStyle"
-        :isNeedPlayStream="isNeedPlayStream"
-        :observerViewInVisible="observerViewInVisible"
-        :isEnlarge="false"
+        :streamPlayMode="streamPlayMode"
+        :streamPlayQuality="streamPlayQuality"
+        @stream-view-dblclick="handleStreamDblClick"
       />
     </div>
   </div>
@@ -30,7 +29,6 @@
 
 <script setup lang="ts">
 import {
-  withDefaults,
   defineProps,
   ref,
   watch,
@@ -38,56 +36,73 @@ import {
   onMounted,
   onBeforeUnmount,
   defineEmits,
+  nextTick,
 } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import StreamRegion from '../StreamRegion/index.vue';
-import { StreamInfo } from '../../../stores/room';
-import { isPC } from '../../../utils/environment';
+import { StreamInfo } from '../../../../stores/room';
+import { isPC } from '../../../../utils/environment';
+import {
+  StreamPlayMode,
+  StreamPlayQuality,
+} from '../../../../services/manager/mediaManager';
+import { getContentSize } from '../../../../utils/domOperation';
+import { isUndefined } from '../../../../utils/utils';
 
-defineEmits(['room-dblclick']);
+const emits = defineEmits(['stream-view-dblclick']);
+const singleStreamMargin = isPC ? 8 : 4;
 
 interface Props {
-  streamInfoList: StreamInfo[];
+  streamInfoList?: StreamInfo[];
+  column: number;
+  row: number;
+  fillMode?: 'fill' | 'contain';
   aspectRatio?: string;
-  horizontalCount: number;
-  verticalCount: number;
-  isNeedPlayStream?: boolean;
-  observerViewInVisible?: boolean;
+  streamPlayQuality?: StreamPlayQuality;
+  streamPlayMode?: StreamPlayMode;
 }
-const props = withDefaults(defineProps<Props>(), {
-  isNeedPlayStream: true,
-});
 
+const props = defineProps<Props>();
 const streamListContainerRef = ref();
 const streamListRef = ref();
 
-const currentPageIndex = ref(0);
-const maxCountEveryPage = computed(
-  () => props.horizontalCount * props.verticalCount
-);
-const isGridLayout = computed(
-  () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
+const isEqualPointsLayout = computed(
+  () => props.column !== Infinity && props.row !== Infinity
 );
+const isHorizontalInfinityLayout = computed(() => props.column === Infinity);
+const isVerticalInfinityLayout = computed(() => props.row === Infinity);
 
 watch(
-  () => props.streamInfoList.length,
-  (val, oldVal) => {
-    if (oldVal === 0) {
-      handleLayout();
-    }
-    if (
-      isGridLayout.value &&
-      currentPageIndex.value > Math.ceil(val / maxCountEveryPage.value) - 1
-    ) {
-      currentPageIndex.value = Math.ceil(val / maxCountEveryPage.value) - 1;
-      handleEqualPointsLayout();
-    }
-  }
+  () => [props.column, props.row],
+  async () => {
+    await nextTick();
+    handleLayout();
+  },
+  { immediate: true }
 );
 
-// Single video stream window margin size
-const singleStreamMargin = isPC ? 8 : 4;
+const validStreamInfoList = computed(() => {
+  return props.streamInfoList?.filter(
+    item => item && item.userId && !isUndefined(item.streamType)
+  );
+});
 
+function handleLayout() {
+  if (isHorizontalInfinityLayout.value) {
+    handleHorizontalInfinityLayout();
+    return;
+  }
+  if (isVerticalInfinityLayout.value) {
+    handleVerticalInfinityLayout();
+    return;
+  }
+  if (isEqualPointsLayout.value) {
+    handleEqualPointsLayout();
+    return;
+  }
+}
+
+// Single video stream window margin size
 const streamListStyle: Ref<Record<string, any>> = ref({
   width: '0',
   height: '0',
@@ -110,35 +125,24 @@ const heightRatio: ComputedRef<number> = computed(() => {
   }
   return Number(props.aspectRatio.split(':')[1]);
 });
-
 /**
  * Handle nine-pattern layout
  **/
 async function handleEqualPointsLayout() {
-  // The number of stream windows on the current page
-  const number =
-    currentPageIndex.value > 0
-      ? maxCountEveryPage.value
-      : props.streamInfoList.slice(0, maxCountEveryPage.value).length;
-  if (number <= 0 || !streamListContainerRef.value) {
+  if (!props.streamInfoList || !streamListContainerRef.value) {
     return;
   }
   const containerRect = streamListContainerRef.value.getBoundingClientRect();
   const containerWidth = Math.floor(containerRect.width);
   const containerHeight = Math.floor(containerRect.height);
-  // The actual width and height of the container is offsetWidth/offsetHeight minus the size of padding
-  const horizontalStreamNumber = props.horizontalCount;
-  const verticalStreamNumber = props.verticalCount;
   // Subtract the margin size of a single video stream to ensure that the ratio of width and height is 16:9
   const contentWidth =
-    (containerWidth - horizontalStreamNumber * singleStreamMargin) /
-    horizontalStreamNumber;
+    (containerWidth - props.column * singleStreamMargin) / props.column;
   const contentHeight =
-    (containerHeight - verticalStreamNumber * singleStreamMargin) /
-    verticalStreamNumber;
+    (containerHeight - props.row * singleStreamMargin) / props.row;
 
-  let width = containerWidth;
-  let height = containerWidth;
+  let width = contentWidth;
+  let height = contentHeight;
   if (widthRatio.value && heightRatio.value) {
     const scaleWidth = contentWidth / widthRatio.value;
     const scaleHeight = contentHeight / heightRatio.value;
@@ -154,35 +158,8 @@ async function handleEqualPointsLayout() {
   streamStyle.value.width = `${width}px`;
   streamStyle.value.height = `${height}px`;
 
-  streamListStyle.value.width = `${horizontalStreamNumber * (width + singleStreamMargin)}px`;
-  streamListStyle.value.height = `${verticalStreamNumber * (height + singleStreamMargin)}px`;
-}
-
-function getContentSize(element: HTMLElement) {
-  const computedStyle = getComputedStyle(element);
-
-  const paddingTop = Number(computedStyle.paddingTop.replace('px', ''));
-  const paddingBottom = Number(computedStyle.paddingBottom.replace('px', ''));
-  const borderTop = Number(computedStyle.borderTopWidth.replace('px', ''));
-  const borderBottom = Number(
-    computedStyle.borderBottomWidth.replace('px', '')
-  );
-
-  const paddingLeft = Number(computedStyle.paddingLeft.replace('px', ''));
-  const paddingRight = Number(computedStyle.paddingRight.replace('px', ''));
-  const borderLeft = Number(computedStyle.borderLeftWidth.replace('px', ''));
-  const borderRight = Number(computedStyle.borderRightWidth.replace('px', ''));
-
-  const contentWidth =
-    element.offsetWidth - paddingLeft - paddingRight - borderLeft - borderRight;
-  const contentHeight =
-    element.offsetHeight -
-    paddingTop -
-    paddingBottom -
-    borderTop -
-    borderBottom;
-
-  return { width: contentWidth, height: contentHeight };
+  streamListStyle.value.width = `${props.column * (width + singleStreamMargin)}px`;
+  streamListStyle.value.height = `${props.row * (height + singleStreamMargin)}px`;
 }
 
 // Handles an unlimited number of streams horizontally
@@ -190,7 +167,7 @@ function handleHorizontalInfinityLayout() {
   streamListStyle.value = {};
 
   const contentHeight = getContentSize(streamListContainerRef.value).height;
-  const contentWidth = (contentHeight * 16) / 9;
+  const contentWidth = (contentHeight * widthRatio.value) / heightRatio.value;
   streamStyle.value.width = `${contentWidth}px`;
   streamStyle.value.height = `${contentHeight}px`;
 }
@@ -200,52 +177,15 @@ function handleVerticalInfinityLayout() {
   streamListStyle.value = {};
 
   const contentWidth = getContentSize(streamListContainerRef.value).width;
-  const contentHeight = (contentWidth * 9) / 16;
+  const contentHeight = (contentWidth * heightRatio.value) / widthRatio.value;
   streamStyle.value.width = `${contentWidth}px`;
   streamStyle.value.height = `${contentHeight}px`;
 }
 
-const isHorizontalInfinityLayout = computed(
-  () => props.horizontalCount === Infinity
-);
-const isVerticalInfinityLayout = computed(
-  () => props.verticalCount === Infinity
-);
-const isEqualPointsLayout = computed(
-  () => props.horizontalCount !== Infinity && props.verticalCount !== Infinity
-);
-
-function handleLayout() {
-  if (isHorizontalInfinityLayout.value) {
-    handleHorizontalInfinityLayout();
-    return;
-  }
-  if (isVerticalInfinityLayout.value) {
-    handleVerticalInfinityLayout();
-    return;
-  }
-  if (isEqualPointsLayout.value) {
-    handleEqualPointsLayout();
-    return;
-  }
+function handleStreamDblClick(streamInfo: StreamInfo) {
+  emits('stream-view-dblclick', streamInfo);
 }
 
-onMounted(() => {
-  handleLayout();
-});
-
-watch(
-  () => [
-    props.horizontalCount,
-    props.verticalCount,
-    props.streamInfoList.length,
-  ],
-  () => {
-    handleLayout();
-  },
-  { immediate: true }
-);
-
 const resizeObserver = new ResizeObserver(() => {
   handleLayout();
 });
@@ -284,6 +224,11 @@ function handleWheel(event: WheelEvent) {
 }
 
 .horizontal-infinity-layout {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
   .stream-list {
     display: flex;
     max-width: 100%;
@@ -305,6 +250,11 @@ function handleWheel(event: WheelEvent) {
 }
 
 .vertical-infinity-layout {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
   .stream-list {
     max-width: 100%;
     max-height: 100%;

package/src/TUIRoom/components/{RoomContent/StreamRegion → Stream/common}/StreamPlay/index.vue

@@ -20,6 +20,10 @@ import {
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
 import { StreamInfo, useRoomStore } from '../../../../stores/room';
 import { roomService } from '../../../../services/roomService';
+import {
+  StreamPlayMode,
+  StreamPlayQuality,
+} from '../../../../services/manager/mediaManager';
 import { useBasicStore } from '../../../../stores/basic';
 import { storeToRefs } from 'pinia';
 import { getNanoId } from '../../../../utils/utils';
@@ -32,12 +36,12 @@ const { defaultStreamType, streamInfoObj } = storeToRefs(roomStore);
 
 interface Props {
   streamInfo: StreamInfo;
-  isEnlarge: boolean;
-  isNeedPlayStream?: boolean;
-  observerViewInVisible?: boolean;
+  streamPlayQuality?: StreamPlayQuality;
+  streamPlayMode?: StreamPlayMode;
 }
 const props = withDefaults(defineProps<Props>(), {
-  isNeedPlayStream: true,
+  streamPlayQuality: StreamPlayQuality.Default,
+  streamPlayMode: StreamPlayMode.PLAY,
 });
 
 const playRegionDomRef = ref();
@@ -45,6 +49,11 @@ const nanoId = getNanoId(5);
 const playRegionDomId = computed(
   () => `${props.streamInfo.userId}_${props.streamInfo.streamType}_${nanoId}`
 );
+const isNeedPlayStream = computed(
+  () =>
+    props.streamPlayMode !== StreamPlayMode.STOP &&
+    props.streamInfo.hasVideoStream
+);
 
 // The stream type to be pulled from the remote user
 const streamTypeToFetch = computed(() => {
@@ -53,9 +62,15 @@ const streamTypeToFetch = computed(() => {
   if (streamType === TUIVideoStreamType.kScreenStream) {
     return TUIVideoStreamType.kScreenStream;
   }
-  if (props.isEnlarge || userId === localUserId) {
+  if (
+    props.streamPlayQuality === StreamPlayQuality.HIGH ||
+    userId === localUserId
+  ) {
     return TUIVideoStreamType.kCameraStream;
   }
+  if (props.streamPlayQuality === StreamPlayQuality.LOW) {
+    return TUIVideoStreamType.kCameraStreamLow;
+  }
   return defaultStreamType.value;
 });
 
@@ -69,12 +84,13 @@ async function startPlayVideo() {
     return;
   }
   await nextTick();
-  if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+  if (isNeedPlayStream.value) {
     await mediaManager.startPlayVideo({
       userId: props.streamInfo.userId,
       streamType: streamTypeToFetch.value,
       view: playRegionDomRef.value,
-      observerViewInVisible: props.observerViewInVisible,
+      observerViewInVisible:
+        props.streamPlayMode === StreamPlayMode.PLAY_IN_VISIBLE,
     });
   }
 }
@@ -91,8 +107,7 @@ watch(
   () => [
     props.streamInfo.userId,
     props.streamInfo.streamType,
-    props.streamInfo.hasVideoStream,
-    props.isNeedPlayStream,
+    isNeedPlayStream.value,
   ],
   async (val, oldVal) => {
     const [oldUserId, oldStreamType] = oldVal;
@@ -107,7 +122,7 @@ watch(
         view: playRegionDomRef.value,
       });
     }
-    if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+    if (isNeedPlayStream.value) {
       await startPlayVideo();
     } else {
       await stopPlayVideo();
@@ -118,20 +133,20 @@ watch(
 watch(
   () => streamTypeToFetch,
   async () => {
-    if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+    if (isNeedPlayStream.value) {
       await startPlayVideo();
     }
   }
 );
 
 onMounted(async () => {
-  if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+  if (isNeedPlayStream.value) {
     await startPlayVideo();
   }
 });
 
 onBeforeUnmount(async () => {
-  if (props.isNeedPlayStream && props.streamInfo.hasVideoStream) {
+  if (isNeedPlayStream.value) {
     await stopPlayVideo();
   }
 });

package/src/TUIRoom/components/{RoomContent → Stream/common}/StreamRegion/index.vue

@@ -2,26 +2,17 @@
   <div class="stream-region-container" ref="streamRegionContainerRef">
     <div
       class="stream-region"
-      @dblclick="$emit('room-dblclick')"
-      v-dbl-touch="
-        () => {
-          $emit('room-dblclick');
-        }
-      "
+      @stream-view-dblclick="handleStreamDblClick"
+      v-dbl-touch="handleStreamDblClick"
       :style="streamStyle"
     >
-      <LocalScreenView
-        v-if="isLocalScreen"
-        :streamInfo="streamInfo"
-        :isMiniRegion="!isEnlarge"
-      />
+      <LocalScreenView v-if="isLocalScreen" :streamInfo="streamInfo" />
       <template v-else>
         <StreamPlay
           v-touch-scale="props.supportTouchScale"
           :streamInfo="streamInfo"
-          :isEnlarge="isEnlarge"
-          :isNeedPlayStream="isNeedPlayStream"
-          :observerViewInVisible="observerViewInVisible"
+          :stream-play-mode="streamPlayMode"
+          :stream-play-quality="streamPlayQuality"
         />
         <StreamCover :streamInfo="streamInfo" />
       </template>
@@ -35,34 +26,34 @@ import {
   defineProps,
   computed,
   defineEmits,
-  withDefaults,
   onMounted,
   onBeforeUnmount,
 } from 'vue';
 import type { ComputedRef } from 'vue';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
-import StreamPlay from './StreamPlay/index.vue';
-import StreamCover from './StreamCover/index.vue';
-import LocalScreenView from './LocalScreenView/index.vue';
-import { StreamInfo } from '../../../stores/room';
-import { useBasicStore } from '../../../stores/basic';
-import vDblTouch from '../../../directives/vDblTouch';
-import vTouchScale from '../../../directives/vTouchScale';
+import StreamPlay from '../StreamPlay/index.vue';
+import StreamCover from '../StreamCover/index.vue';
+import LocalScreenView from '../LocalScreenView/index.vue';
+import { StreamInfo } from '../../../../stores/room';
+import { useBasicStore } from '../../../../stores/basic';
+import vDblTouch from '../../../../directives/vDblTouch';
+import vTouchScale from '../../../../directives/vTouchScale';
+import {
+  StreamPlayMode,
+  StreamPlayQuality,
+} from '../../../../services/manager/mediaManager';
+import { getContentSize } from '../../../../utils/domOperation';
 
 interface Props {
   streamInfo: StreamInfo;
-  isEnlarge?: boolean;
+  streamPlayQuality?: StreamPlayQuality;
+  streamPlayMode?: StreamPlayMode;
   aspectRatio?: string;
-  isNeedPlayStream?: boolean;
-  observerViewInVisible?: boolean;
   supportTouchScale?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  isEnlarge: false,
-  isNeedPlayStream: true,
-});
-defineEmits(['room-dblclick']);
+const props = defineProps<Props>();
+const emits = defineEmits(['stream-view-dblclick']);
 
 const basicStore = useBasicStore();
 
@@ -93,8 +84,8 @@ function handleStreamRegionSize() {
   if (!streamRegionContainerRef.value) {
     return;
   }
-  const containerWidth = streamRegionContainerRef.value.offsetWidth;
-  const containerHeight = streamRegionContainerRef.value.offsetHeight;
+  const containerWidth = getContentSize(streamRegionContainerRef.value).width;
+  const containerHeight = getContentSize(streamRegionContainerRef.value).height;
   let width = containerWidth;
   let height = containerHeight;
   if (widthRatio.value && heightRatio.value) {
@@ -113,6 +104,10 @@ function handleStreamRegionSize() {
   streamStyle.value.height = `${height}px`;
 }
 
+function handleStreamDblClick() {
+  emits('stream-view-dblclick', props.streamInfo);
+}
+
 const ro = new ResizeObserver(() => {
   handleStreamRegionSize();
 });

package/src/TUIRoom/components/common/base/Swiper.vue

@@ -7,7 +7,7 @@
       @touchmove="handleTouchMoveThrottle"
       @touchend="handleTouchEnd"
     >
-      <slot></slot>
+      <slot v-if="swiperMounted"></slot>
     </div>
     <div v-if="swiperItemNumber > 1" class="swiper-dot-container">
       <div
@@ -21,7 +21,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, provide, computed, defineProps, defineEmits, watch } from 'vue';
+import {
+  ref,
+  provide,
+  computed,
+  defineProps,
+  defineEmits,
+  watch,
+  onMounted,
+  onUnmounted,
+} from 'vue';
 import { throttle } from '../../../utils/utils';
 
 const props = defineProps<{
@@ -48,6 +57,14 @@ watch(activeSwiperIndex, () => {
   emits('change', activeSwiperIndex.value);
 });
 
+const swiperMounted = ref(false);
+onMounted(() => {
+  swiperMounted.value = true;
+});
+onUnmounted(() => {
+  swiperMounted.value = false;
+});
+
 provide('swiper', {
   activeSwiperIndex,
   swiperRef,
@@ -106,10 +123,7 @@ function handleTouchEnd(event: TouchEvent) {
   }
   isInOnceTouch = false;
   const offsetX = event.changedTouches[0].pageX - touchData.x;
-  if (
-    Math.abs(event.changedTouches[0].pageX - touchData.x) >
-    swiperRef.value.offsetWidth / 5
-  ) {
+  if (Math.abs(offsetX) > swiperRef.value.offsetWidth / 5) {
     if (offsetX < 0 && activeSwiperIndex.value < swiperItemNumber.value - 1) {
       activeSwiperIndex.value = activeSwiperIndex.value + 1;
     }

package/src/TUIRoom/components/{AITools → common/widgets/AITools}/AISubtitles.vue

@@ -16,7 +16,7 @@ import {
   MetricsKey,
   roomService,
   SubtitleMessage,
-} from '../../services';
+} from '../../../../services/index.ts';
 
 const subtitleMessages = ref<Record<string, SubtitleMessage>>({});
 const subtitleLines = computed(() => {
@@ -32,7 +32,7 @@ const handleAISubtitles = (data?: AITaskEvent[AI_TASK.TRANSCRIPTION_TASK]) => {
 };
 
 onMounted(() => {
-  roomService.dataReportManager.reportCount(MetricsKey.AITask);
+  roomService.dataReportManager.reportCount(MetricsKey.aiTask);
   roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, handleAISubtitles);
 });
 

package/src/TUIRoom/components/{AITools → common/widgets/AITools}/AITranscription.vue

@@ -35,8 +35,8 @@ import {
   AI_TASK,
   SubtitleMessage,
   MetricsKey,
-} from '../../services';
-import { formatTimestampToTime } from '../../utils/utils.ts';
+} from '../../../../services/index.ts';
+import { formatTimestampToTime } from '../../../../utils/utils.ts';
 
 const conversationContainerRef = ref<HTMLElement>();
 const isUserScrolling = ref(false);
@@ -116,7 +116,7 @@ const handleAITranscriptionTask = async (data?: {
   rawTranscribedMessageList.value = [...data.transcribedMessageList];
 };
 onMounted(() => {
-  roomService.dataReportManager.reportCount(MetricsKey.AITask);
+  roomService.dataReportManager.reportCount(MetricsKey.aiTask);
   roomService.aiTask.on(AI_TASK.TRANSCRIPTION_TASK, handleAITranscriptionTask);
 });
 onUnmounted(() => {

package/src/TUIRoom/conference.ts

@@ -11,6 +11,8 @@ import {
 import { TUIRoomEngine } from './index';
 import logger from './utils/common/logger';
 import { toTargetTheme } from './utils/common';
+import { StreamInfo, UserInfo } from './stores/room';
+import { Comparator } from './utils/utils';
 
 export enum RoomEvent {
   ROOM_START = 'RoomStart',
@@ -85,6 +87,10 @@ interface IConference {
   hideFeatureButton: (name: FeatureButton) => void;
 
   replaceFriendList: (userList: Array<any>) => void;
+
+  setUserListSortComparator: (comparator: Comparator<UserInfo>) => void;
+
+  setStreamListSortComparator: (comparator: Comparator<StreamInfo>) => void;
 }
 class Conference implements IConference {
   public login(params: {
@@ -182,6 +188,14 @@ class Conference implements IConference {
   public replaceFriendList(userList: Array<any>) {
     return roomService.scheduleConferenceManager.replaceFriendList(userList);
   }
+
+  public setUserListSortComparator(comparator: Comparator<UserInfo>) {
+    roomService.userManager.setUserListSortComparator(comparator);
+  }
+
+  public setStreamListSortComparator(comparator: Comparator<StreamInfo>) {
+    roomService.userManager.setStreamListSortComparator(comparator);
+  }
 }
 
 export const conference = new Conference();