@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/RoomContent/StreamContainer/useStreamContainerHooks.ts

@@ -1,153 +1,123 @@
-import { watch } from 'vue';
-import useGetRoomEngine from '../../../hooks/useRoomEngine';
-import {  useRoomStore } from '../../../stores/room';
-import  { TUIChangeReason, TUIMediaDeviceType,  TUIUserInfo } from '@tencentcloud/tuiroom-engine-electron';
-import TUIMessage from '../../common/base/Message/index';
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { useRoomStore, StreamInfo } from '../../../stores/room';
+import { TRTCVolumeInfo } from '@tencentcloud/tuiroom-engine-electron';
 import { useI18n } from '../../../locales';
 import { useBasicStore } from '../../../stores/basic';
-import { MESSAGE_DURATION } from '../../../constants/message';
 import { storeToRefs } from 'pinia';
-import { isMobile, isWeChat } from '../../../utils/environment';
-import logger from '../../../utils/common/logger';
-import { SMALL_VIDEO_ENC_PARAM } from '../../../constants/room';
-import useDeviceManager from '../../../hooks/useDeviceManager';
-
-const logPrefix = '[StreamContainer]';
+import { throttle } from '../../../utils/utils';
+import { LAYOUT } from '../../../constants/render';
 
 export default function useStreamContainer() {
   /** --- The following processing stream events ---- **/
-  const roomEngine = useGetRoomEngine();
   const basicStore = useBasicStore();
   const roomStore = useRoomStore();
+  const { layout } = storeToRefs(basicStore);
+  const { localStream } = storeToRefs(roomStore);
   const { t } = useI18n();
-  const { deviceManager } = useDeviceManager();
-
-  const onRemoteUserEnterRoom = (eventInfo: { userInfo: TUIUserInfo }) => {
-    roomStore.addRemoteUser(eventInfo.userInfo);
-  };
 
-  const onRemoteUserLeaveRoom = (eventInfo: { userInfo: TUIUserInfo }) => {
-    roomStore.removeRemoteUser(eventInfo.userInfo.userId);
-  };
+  const currentRemoteSpeakerUserId: Ref<string> = ref('');
+  const currentSpeakerUserId: Ref<string> = ref('');
 
-  const onSeatListChanged = (eventInfo: { seatList: any[], seatedList: any[], leftList: any[] }) => {
-    const { seatedList, leftList } = eventInfo;
-    roomStore.updateOnSeatList(seatedList, leftList);
-  };
+  // Calculate the userId of the loudest speaker in the room
+  // Calculate the userId of the remote user who speaks the loudest in the current room.
+  function handleUserVoiceVolume(userVolumeList: Array<TRTCVolumeInfo>) {
+    const localUserVolume = {
+      userId: basicStore.userId,
+      volume: 0,
+    };
+    const largestRemoteUserVolume = {
+      userId: '',
+      volume: 0,
+    };
+    userVolumeList.forEach((item: TRTCVolumeInfo) => {
+      if (
+        item.userId === basicStore.userId &&
+        localStream.value.hasAudioStream
+      ) {
+        localUserVolume.volume = item.volume;
+      } else if (
+        item.userId !== basicStore.userId &&
+        roomStore.userInfoObj[item.userId]?.hasAudioStream
+      ) {
+        const { userId, volume } = item;
+        if (volume > largestRemoteUserVolume.volume) {
+          largestRemoteUserVolume.userId = userId;
+          largestRemoteUserVolume.volume = volume;
+        }
+      }
+    });
 
-  const onUserAudioStateChanged = (eventInfo: {
-    userId: string,
-    hasAudio: boolean,
-    reason: TUIChangeReason,
-  }) => {
-    const { userId, hasAudio, reason } = eventInfo;
-    roomStore.updateUserAudioState(userId, hasAudio);
-    if (userId === basicStore.userId && !hasAudio && reason === TUIChangeReason.kChangedByAdmin) {
-      TUIMessage({
-        type: 'warning',
-        message: t('Your microphone has been turned off'),
-        duration: MESSAGE_DURATION.NORMAL,
-      });
-      /**
-       * When the host turns on a full ban, the microphone of a single person is turned on
-       * and off separately, and the microphone status of the corresponding user is inoperable at this time
-       **/
-      roomStore.setCanControlSelfAudio(!roomStore.isMicrophoneDisableForAllUser);
-    }
-  };
-  const {
-    isDefaultOpenCamera,
-    isDefaultOpenMicrophone,
-  } = storeToRefs(roomStore);
+    const largestUserVolume =
+      localUserVolume.volume > largestRemoteUserVolume.volume
+        ? localUserVolume
+        : largestRemoteUserVolume;
 
-  watch(isDefaultOpenCamera, async (val) => {
-    if (val) {
-      /**
-       * Turn on the local camera
-       *
-       **/
-      if (isWeChat) {
-        await roomEngine.instance?.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-        });
-        // @ts-ignore
-        await roomEngine.instance?.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera });
-      } else if (isMobile) {
-        const previewDom = document?.getElementById(`${roomStore.localStream.userId}_${roomStore.localStream.streamType}`);
-        if (!previewDom) {
-          logger.error(`${logPrefix}watch isDefaultOpenCamera:`, isDefaultOpenCamera, previewDom);
-          return;
+    if (currentRemoteSpeakerUserId.value) {
+      const lastRemoteSpeakerUserVolumeInfo = userVolumeList.find(
+        (item: TRTCVolumeInfo) =>
+          item.userId === currentRemoteSpeakerUserId.value
+      );
+      if (
+        !lastRemoteSpeakerUserVolumeInfo ||
+        lastRemoteSpeakerUserVolumeInfo.volume === 0
+      ) {
+        if (largestRemoteUserVolume.volume > 0) {
+          currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
         }
-        await roomEngine.instance?.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-        });
-        const trtcCloud = roomEngine.instance?.getTRTCCloud();
-        trtcCloud?.enableSmallVideoStream(false, SMALL_VIDEO_ENC_PARAM);
-        // @ts-ignore
-        await roomEngine.instance?.openLocalCamera({ isFrontCamera: basicStore.isFrontCamera });
-        return;
-      } else {
-        const previewDom = document?.getElementById(`${roomStore.localStream.userId}_${roomStore.localStream.streamType}`);
-        if (!previewDom) {
-          logger.error(`${logPrefix}watch isDefaultOpenCamera:`, isDefaultOpenCamera, previewDom);
-          return;
-        }
-        /**
-         * Set device id
-         *
-        **/
-        if (!roomStore.currentCameraId) {
-          const cameraList = await deviceManager.instance?.getDevicesList({
-            type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
-          });
-          if (cameraList && cameraList.length > 0) {
-            roomStore.setCurrentCameraId(cameraList[0].deviceId);
-          }
-        }
-        await deviceManager.instance?.setCurrentDevice({
-          type: TUIMediaDeviceType.kMediaDeviceTypeVideoCamera,
-          deviceId: roomStore.currentCameraId,
-        });
-        /**
-         * Turn on the local camera
-         *
-        **/
-        await roomEngine.instance?.setLocalVideoView({
-          view: `${roomStore.localStream.userId}_${roomStore.localStream.streamType}`,
-        });
-        await roomEngine.instance?.openLocalCamera();
+      }
+    } else {
+      if (largestRemoteUserVolume.volume > 0) {
+        currentRemoteSpeakerUserId.value = largestRemoteUserVolume.userId;
       }
     }
-  }, {immediate: true});
 
-  watch(isDefaultOpenMicrophone, async (val) => {
-    if (val) {
-      await roomEngine.instance?.unmuteLocalAudio();
-      if (!basicStore.isOpenMic) {
-        roomEngine.instance?.openLocalMicrophone();
-        basicStore.setIsOpenMic(true);
-      }
-      if (!isWeChat && !isMobile) {
-        const microphoneList = await roomEngine.instance?.getMicDevicesList();
-        const speakerList = await roomEngine.instance?.getSpeakerDevicesList();
-        if (microphoneList?.length === 0 || speakerList?.length === 0) return;
-        if (!roomStore.currentMicrophoneId && microphoneList.length > 0) {
-          roomStore.setCurrentMicrophoneId(microphoneList[0].deviceId);
-        }
-        if (!roomStore.currentSpeakerId && speakerList.length > 0) {
-          roomStore.setCurrentSpeakerId(speakerList[0].deviceId);
+    if (currentSpeakerUserId.value) {
+      const lastSpeakerUserVolumeInfo: TRTCVolumeInfo | undefined =
+        userVolumeList.find(
+          (item: TRTCVolumeInfo) => item.userId === currentSpeakerUserId.value
+        );
+      if (
+        !lastSpeakerUserVolumeInfo ||
+        lastSpeakerUserVolumeInfo.volume === 0
+      ) {
+        if (largestUserVolume.volume > 0) {
+          currentSpeakerUserId.value = largestUserVolume.userId;
         }
-        await roomEngine.instance?.setCurrentMicDevice({ deviceId: roomStore.currentMicrophoneId });
       }
     } else {
-      await roomEngine.instance?.muteLocalAudio();
+      if (largestUserVolume.volume > 0) {
+        currentSpeakerUserId.value = largestUserVolume.userId;
+      }
     }
-  }, {immediate: true});
+  }
+
+  const handleUserVoiceVolumeThrottle = throttle(handleUserVoiceVolume, 1000);
+
+  // volume change
+  const onUserVoiceVolumeChanged = (eventInfo: { userVolumeList: any[] }) => {
+    const { userVolumeList } = eventInfo;
+    if (layout.value === LAYOUT.LARGE_SMALL_WINDOW) {
+      handleUserVoiceVolumeThrottle(userVolumeList);
+    }
+  };
+
+  const isSameStream = (
+    stream1: StreamInfo | null,
+    stream2: StreamInfo | null
+  ) =>
+    `${stream1?.userId}_${stream1?.streamType}` ===
+    `${stream2?.userId}_${stream2?.streamType}`;
+
+  const getStreamKey = (stream: StreamInfo | null) =>
+    `${stream?.userId}_${stream?.streamType}`;
+
   return {
-    onRemoteUserEnterRoom,
-    onRemoteUserLeaveRoom,
-    onSeatListChanged,
-    onUserAudioStateChanged,
+    currentRemoteSpeakerUserId,
+    currentSpeakerUserId,
+    onUserVoiceVolumeChanged,
+    isSameStream,
+    getStreamKey,
     t,
   };
 }

package/src/TUIRoom/components/RoomContent/StreamList/index.vue

@@ -0,0 +1,301 @@
+<template>
+  <div
+    ref="streamListContainerRef"
+    :class="{
+      'horizontal-infinity-layout': isHorizontalInfinityLayout,
+      'vertical-infinity-layout': isVerticalInfinityLayout,
+      'equal-points-layout': isEqualPointsLayout,
+    }"
+  >
+    <div
+      class="stream-list"
+      ref="streamListRef"
+      :style="streamListStyle"
+      @wheel="handleWheel"
+    >
+      <StreamRegion
+        v-for="streamInfo in streamInfoList"
+        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"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  withDefaults,
+  defineProps,
+  ref,
+  watch,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  defineEmits,
+} from 'vue';
+import type { Ref, ComputedRef } from 'vue';
+import StreamRegion from '../StreamRegion/index.vue';
+import { StreamInfo } from '../../../stores/room';
+import { isPC } from '../../../utils/environment';
+
+defineEmits(['room-dblclick']);
+
+interface Props {
+  streamInfoList: StreamInfo[];
+  aspectRatio?: string;
+  horizontalCount: number;
+  verticalCount: number;
+  isNeedPlayStream?: boolean;
+  observerViewInVisible?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  isNeedPlayStream: true,
+});
+
+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
+);
+
+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();
+    }
+  }
+);
+
+// Single video stream window margin size
+const singleStreamMargin = isPC ? 8 : 4;
+
+const streamListStyle: Ref<Record<string, any>> = ref({
+  width: '0',
+  height: '0',
+});
+const streamStyle: Ref<Record<string, any>> = ref({
+  width: '0',
+  height: '0',
+  '--stream-margin': `${singleStreamMargin / 2}px`,
+});
+
+const widthRatio: ComputedRef<number> = computed(() => {
+  if (!props.aspectRatio || props.aspectRatio?.indexOf(':') < 0) {
+    return 0;
+  }
+  return Number(props.aspectRatio?.split(':')[0]);
+});
+const heightRatio: ComputedRef<number> = computed(() => {
+  if (!props.aspectRatio || props.aspectRatio.indexOf(':') < 0) {
+    return 0;
+  }
+  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) {
+    return;
+  }
+  const containerWidth = streamListContainerRef.value?.offsetWidth;
+  const containerHeight = streamListContainerRef.value?.offsetHeight;
+  // 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;
+  const contentHeight =
+    (containerHeight - verticalStreamNumber * singleStreamMargin) /
+    verticalStreamNumber;
+
+  let width = containerWidth;
+  let height = containerWidth;
+  if (widthRatio.value && heightRatio.value) {
+    const scaleWidth = contentWidth / widthRatio.value;
+    const scaleHeight = contentHeight / heightRatio.value;
+    if (scaleWidth > scaleHeight) {
+      width = (contentHeight / heightRatio.value) * widthRatio.value;
+      height = contentHeight;
+    }
+    if (scaleWidth <= scaleHeight) {
+      width = contentWidth;
+      height = (contentWidth / widthRatio.value) * heightRatio.value;
+    }
+  }
+  streamStyle.value.width = `${width}px`;
+  streamStyle.value.height = `${height}px`;
+
+  streamListStyle.value.width = `${horizontalStreamNumber * (width + singleStreamMargin)}px`;
+  streamListStyle.value.height = `${verticalStreamNumber * (height + singleStreamMargin)}px`;
+}
+
+// Handles an unlimited number of streams horizontally
+function handleHorizontalInfinityLayout() {
+  streamListStyle.value = {};
+  const containerHeight = streamListRef.value!.offsetHeight;
+  const contentHeight = containerHeight;
+  const contentWidth = (containerHeight * 16) / 9;
+
+  streamStyle.value.width = `${contentWidth}px`;
+  streamStyle.value.height = `${contentHeight}px`;
+}
+
+// Handles an infinite number of streams in the vertical direction
+function handleVerticalInfinityLayout() {
+  streamListStyle.value = {};
+  const containerWidth = streamListRef.value!.offsetWidth;
+  const contentWidth = containerWidth;
+  const contentHeight = (containerWidth * 9) / 16;
+
+  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;
+  }
+}
+
+onMounted(() => {
+  handleLayout();
+});
+
+watch(
+  () => [
+    props.horizontalCount,
+    props.verticalCount,
+    props.streamInfoList.length,
+  ],
+  () => {
+    handleLayout();
+  },
+  { immediate: true }
+);
+
+const resizeObserver = new ResizeObserver(() => {
+  handleLayout();
+});
+
+onMounted(() => {
+  resizeObserver.observe(streamListContainerRef.value);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver.unobserve(streamListContainerRef.value);
+});
+
+// Handle top layout horizontal sliding
+function handleWheel(event: WheelEvent) {
+  streamListContainerRef.value.scrollLeft += event.deltaY;
+}
+</script>
+
+<style lang="scss" scoped>
+.equal-points-layout {
+  display: flex;
+  place-content: center center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .stream-list {
+    display: flex;
+    flex-wrap: wrap;
+    place-content: flex-start flex-start;
+
+    .stream-list-item {
+      margin: var(--stream-margin);
+    }
+  }
+}
+
+.horizontal-infinity-layout {
+  .stream-list {
+    display: flex;
+    max-width: 100%;
+    max-height: 100%;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .stream-list-item {
+    &:not(:first-child) {
+      margin-left: 14px;
+    }
+  }
+}
+
+.vertical-infinity-layout {
+  .stream-list {
+    max-width: 100%;
+    max-height: 100%;
+    padding: 10px 0;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .stream-list-item {
+    &:not(:first-child) {
+      margin-top: 14px;
+    }
+  }
+}
+</style>