tuikit-atomicx-vue3 3.4.2 → 4.3.1

package/src/components/LiveView/PlayerControl/utils/domHelpers.ts

@@ -143,3 +143,67 @@ export class EventListenerManager {
     return this.listeners.size;
   }
 }
+
+/**
+ * Wait for video element to be mounted in DOM
+ * @param timeout Maximum wait time in milliseconds
+ * @returns Promise that resolves with video element or null if timeout
+ */
+export const waitForVideoMounted = (timeout = 3000): Promise<HTMLVideoElement | null> => {
+  return new Promise((resolve) => {
+    const container = document.querySelector('#atomicx-live-stream-content');
+    if (!container) {
+      resolve(null);
+      return;
+    }
+
+    let timeoutId: number | null = null;
+    
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeName === 'VIDEO') {
+              const video = node as HTMLVideoElement;
+              
+              // Temporarily remove volumechange listener to prevent syncVolumeState interference
+              const originalVolumeHandler = (video as any).onvolumechange;
+              (video as any).onvolumechange = null;
+              
+              const handleLoadedData = () => {
+                if (timeoutId) clearTimeout(timeoutId);
+                observer.disconnect();
+                video.removeEventListener('loadeddata', handleLoadedData);
+                setTimeout(() => {
+                  (video as any).onvolumechange = originalVolumeHandler;
+                }, 100);
+                resolve(video);
+              };
+              
+              if (video.readyState >= 2) {
+                if (timeoutId) clearTimeout(timeoutId);
+                observer.disconnect();
+                setTimeout(() => {
+                  (video as any).onvolumechange = originalVolumeHandler;
+                }, 100);
+                resolve(video);
+              } else {
+                video.addEventListener('loadeddata', handleLoadedData, { once: true });
+              }
+            }
+          });
+        }
+      }
+    });
+
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+    });
+
+    timeoutId = window.setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, timeout);
+  });
+};

package/src/components/LiveView/i18n/en-US/index.ts

@@ -7,8 +7,8 @@ export const resource = {
   'Exit Picture in Picture': 'Exit Picture in Picture',
   'Fullscreen': 'Fullscreen',
   'Exit Fullscreen': 'Exit Fullscreen',
-  'Mute': 'Mute',
-  'Unmute': 'Unmute',
+  'Open Speaker': 'Open Speaker',
+  'Close Speaker': 'Close Speaker',
   'The system does not support picture-in-picture mode': 'The system does not support picture-in-picture mode',
   'co-Hosting': 'co-Hosting',
   'In battle': 'In battle',

package/src/components/LiveView/i18n/zh-CN/index.ts

@@ -7,8 +7,8 @@ export const resource = {
   'Exit Picture in Picture': '退出画中画',
   'Fullscreen': '全屏',
   'Exit Fullscreen': '退出全屏',
-  'Mute': '静音',
-  'Unmute': '取消静音',
+  'Open Speaker': '取消静音',
+  'Close Speaker': '静音',
   'The system does not support picture-in-picture mode': '系统不支持画中画模式',
   'co-Hosting': '连线中',
   'In battle': 'PK中',

package/src/components/LiveView/index.vue

@@ -57,7 +57,7 @@
 import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots, type ComputedRef, Teleport } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveSeatState } from '../../states/LiveSeatState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
 import { getContentSize } from '../../utils/domOperation';
 import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
@@ -70,7 +70,7 @@ import { usePlayerControlState } from './PlayerControl';
 const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 
 const slots = useSlots();
 

package/src/components/MicButton/index.vue

@@ -2,7 +2,7 @@
   <div class="mic-button-container">
     <div class="mic-button" :class="{ 'disabled': !hasPublishAudioPermission }" @click="handleClick">
       <audio-icon
-        :audio-volume="audioVolume"
+        :audio-volume="currentMicVolume"
         :is-muted="isMuted"
         :is-disabled="!hasPublishAudioPermission"
       />
@@ -19,7 +19,7 @@ import { DeviceStatus, DeviceError } from '../../types';
 import AudioIcon from './AudioIcon.vue';
 
 const {
-  audioVolume,
+  currentMicVolume,
   hasPublishAudioPermission,
   microphoneStatus,
   microphoneLastError,
@@ -60,4 +60,4 @@ async function handleClick() {
     }
   }
 }
-</style>
+</style>

package/src/components/StreamMixer/LocalMixer/index.vue

@@ -32,15 +32,15 @@ import TUIRoomEngine, {
 } from '@tencentcloud/tuiroom-engine-js';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useRoomEngine } from '../../../hooks/useRoomEngine';
-import { useLiveState } from '../../../states/LiveState';
+import { useLiveListState } from '../../../states/LiveListState';
 import { useVideoMixerState } from '../../../states/VideoMixerState';
-import { LiveStatus, LiveOrientation } from '../../../types';
+import { LiveOrientation } from '../../../types';
 import { debounce } from '../../../utils/utils';
 import MixerControl from './MixerControl.vue';
 
 const { t } = useUIKit();
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 
 const mixControlRef = ref<InstanceType<typeof MixerControl> | null>(null);
 const { publishVideoQuality, activeMediaSource, enableLocalVideoMixer, mediaSourceList } = useVideoMixerState();
@@ -54,8 +54,6 @@ const currentLiveOrientation = computed(() => {
   return LiveOrientation.Portrait;
 });
 
-const { localLiveStatus } = useLiveState();
-
 const roomEngine = useRoomEngine();
 const localMixerRef = ref();
 
@@ -217,12 +215,12 @@ onMounted(() => {
     getMixControlStyle();
   });
 
-  watch(localLiveStatus, async (newVal) => {
+  watch(() => currentLive.value?.liveId, async (newVal) => {
     const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-    if (newVal === LiveStatus.Live) {
+    if (newVal) {
       await mediaSourceManager?.startPublish();
     }
-    if (newVal === LiveStatus.IDLE) {
+    if (!newVal) {
       await mediaSourceManager?.stopPublish();
     }
   });

package/src/components/StreamView/Layout/CustomLayout.vue

@@ -28,11 +28,11 @@ import useUserState from '../../../states/UserState/index';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
 import { useRoomState } from '../../../states/RoomState';
 import useLoginState from '../../../states/LoginState';
-import useLiveState from '../../../states/LiveState';
+import { useLiveListState } from '../../../states/LiveListState';
 
 const { userList, localUser, userListOnSeat } = useUserState();
 const { currentRoom } = useRoomState();
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { loginUserInfo } = useLoginState();
 
 const emits = defineEmits(['stream-view-dblclick']);

package/src/components/StreamView/Layout/FloatLayout.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="float-layout-container" ref="streamListContainerRef">
-    <div class="float-layout" ref="streamListRef" :style="streamListStyle">
+  <div ref="streamListContainerRef" class="float-layout-container">
+    <div
+      ref="streamListRef"
+      class="float-layout"
+      :style="streamListStyle"
+    >
       <div class="main-view">
         <stream-region :user-info="mainUserInfo" :stream-type="mainStreamType">
           <template #streamViewUI="slotProps">
@@ -8,7 +12,11 @@
           </template>
         </stream-region>
       </div>
-      <div class="float-view" v-if="floatUserInfo" :style="getFloatStyle()">
+      <div
+        v-if="floatUserInfo"
+        class="float-view"
+        :style="getFloatStyle()"
+      >
         <stream-region :user-info="floatUserInfo" :stream-type="TUIVideoStreamType.kCameraStream">
           <template #streamViewUI="slotProps">
             <slot name="streamViewUI" v-bind="slotProps" />
@@ -20,16 +28,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref, Ref, onMounted, onBeforeUnmount } from 'vue';
-import StreamRegion from '../common/StreamRegion';
+import type { Ref } from 'vue';
+import { computed, watch, ref, onMounted, onBeforeUnmount } from 'vue';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
-import { UserInfo, DeviceStatus, LiveStatus, SeatStatus} from '../../../types';
-import useUserState from '../../../states/UserState/index';
-import useLiveState from '../../../states/LiveState';
 import useRoomEngine from '../../../hooks/useRoomEngine';
+import { useLiveListState } from '../../../states/LiveListState';
+import useUserState from '../../../states/UserState/index';
+import { DeviceStatus, SeatStatus } from '../../../types';
+import StreamRegion from '../common/StreamRegion';
+import type { UserInfo } from '../../../types';
 
 const { userList, localUser, userListWithVideo } = useUserState();
-const { currentLive, localLiveStatus } = useLiveState();
+const { currentLive, localLiveStatus } = useLiveListState();
 const roomEngine = useRoomEngine();
 
 // 定义props
@@ -42,10 +52,10 @@ const props = withDefaults(defineProps<{
     top: '20px',
     right: '20px',
     width: '160px',
-    height: '160px'
+    height: '160px',
   })),
   filterFn: () => true,
-  sortFn: () => 0
+  sortFn: () => 0,
 });
 
 const streamListContainerRef = ref();
@@ -62,9 +72,7 @@ function stringToNumber(str: string) {
 const encodeWidth = 1920;
 const encodeHeight = 1080;
 
-const toLayoutRadio = computed(() => {
-  return stringToNumber(streamListStyle.value.width) / encodeWidth;
-})
+const toLayoutRadio = computed(() => stringToNumber(streamListStyle.value.width) / encodeWidth);
 
 async function handleFloatContainerLayout() {
   if (!streamListContainerRef.value) {
@@ -121,16 +129,13 @@ const mainUserInfo = computed(() => {
   return filterAndSortUserList.value[0];
 });
 
-const mainStreamType = computed(() => {
-  return mainUserInfo.value.screenStatus === DeviceStatus.On ? TUIVideoStreamType.kScreenStream : TUIVideoStreamType.kCameraStream;
-});
+const mainStreamType = computed(() => mainUserInfo.value.screenStatus === DeviceStatus.On ? TUIVideoStreamType.kScreenStream : TUIVideoStreamType.kCameraStream);
 
 const floatUserInfo = computed(() => {
   if (mainStreamType.value === TUIVideoStreamType.kScreenStream) {
     return filterAndSortUserList.value.find(userInfo => userInfo.cameraStatus === DeviceStatus.On);
-  } else {
-    return filterAndSortUserList.value.find(userInfo => userInfo.cameraStatus === DeviceStatus.On && userInfo.userId !== mainUserInfo.value?.userId);
   }
+  return filterAndSortUserList.value.find(userInfo => userInfo.cameraStatus === DeviceStatus.On && userInfo.userId !== mainUserInfo.value?.userId);
 });
 
 if (localUser.value?.userId === currentLive.value?.liveOwner.userId) {
@@ -139,20 +144,20 @@ if (localUser.value?.userId === currentLive.value?.liveOwner.userId) {
       return null;
     }
     return {
-      "LocationX": 1540,                   // 以画面左上角为原点的 x 坐标
-      "LocationY": 20,                  // 以画面左上角为原点的 y 坐标
-      "ImageWidth": 360,               // 调整后的画面宽度
-      "ImageHeight": 202,               // 调整后的画面高度
-      "ZOrder": 1,                      // 画面层级
-      "StreamType": TUIVideoStreamType.kCameraStream,                  // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
-      "Member_Account": floatUserInfo.value?.userId,     // 该路流的用户ID
-      "BackgroundImageUrl": "",
-      "RoomId": currentLive.value?.liveId,
-      "BackgroundColor": "0x1F212C",
-    }
+      LocationX: 1540, // 以画面左上角为原点的 x 坐标
+      LocationY: 20, // 以画面左上角为原点的 y 坐标
+      ImageWidth: 360, // 调整后的画面宽度
+      ImageHeight: 202, // 调整后的画面高度
+      ZOrder: 1, // 画面层级
+      StreamType: TUIVideoStreamType.kCameraStream, // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
+      Member_Account: floatUserInfo.value?.userId, // 该路流的用户ID
+      BackgroundImageUrl: '',
+      RoomId: currentLive.value?.liveId,
+      BackgroundColor: '0x1F212C',
+    };
   });
 
-  const layoutConfig = computed(() => {
+  const layoutConfig = computed(() =>
     // const userOnSeatListConfig = userListOnSeat.value.map(user => {
     //   return {
     //     "LocationX": 0,                   // 以画面左上角为原点的 x 坐标
@@ -165,56 +170,56 @@ if (localUser.value?.userId === currentLive.value?.liveOwner.userId) {
     //     "RoomId": user.roomId,
     //   }
     // });
-    return {
+    ({
       // 设置画布大小
-      "VideoEncode": {
-        "Width": encodeWidth,
-        "Height": encodeHeight,
+      VideoEncode: {
+        Width: encodeWidth,
+        Height: encodeHeight,
       },
-      "LayoutMode": 1000, // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
+      LayoutMode: 1000, // 0~9 内置布局模板， 1000自定义布局， 只有1000时候才能修改LayoutInfo,目前只支持 0 和 1000
       // 设置画面布局
-      "LayoutInfo": {
-        "LayoutList": floatLayoutConfig.value ? [floatLayoutConfig.value] : [],
-        "MaxUserLayout": {
-          "ZOrder": 0,        //层级
-          "StreamType": mainStreamType.value,    // 0为摄像头， 1为屏幕共享
-          "Member_Account": mainUserInfo.value.userId,
-          "BackgroundImageUrl": "", //可以设置看看，可能在最大画面时候没作用
-          "RoomId": currentLive.value?.liveId,
-          "BackgroundColor":"0x1F212C",
-          "LocationX": 0,                   // 以画面左上角为原点的 x 坐标
-          "LocationY": 0,                  // 以画面左上角为原点的 y 坐标
-          "ImageWidth": encodeWidth,               // 调整后的画面宽度
-          "ImageHeight": encodeHeight,
-          "RenderMode": mainStreamType.value === TUIVideoStreamType.kScreenStream ? 2 : 0,
+      LayoutInfo: {
+        LayoutList: floatLayoutConfig.value ? [floatLayoutConfig.value] : [],
+        MaxUserLayout: {
+          ZOrder: 0, // 层级
+          StreamType: mainStreamType.value, // 0为摄像头， 1为屏幕共享
+          Member_Account: mainUserInfo.value.userId,
+          BackgroundImageUrl: '', // 可以设置看看，可能在最大画面时候没作用
+          RoomId: currentLive.value?.liveId,
+          BackgroundColor: '0x1F212C',
+          LocationX: 0, // 以画面左上角为原点的 x 坐标
+          LocationY: 0, // 以画面左上角为原点的 y 坐标
+          ImageWidth: encodeWidth, // 调整后的画面宽度
+          ImageHeight: encodeHeight,
+          RenderMode: mainStreamType.value === TUIVideoStreamType.kScreenStream ? 2 : 0,
         },
       },
-    }
-  });
-
-  watch(() => layoutConfig.value, async (newVal, oldVal) => {
-    console.error('lixin-debug mix watch layoutConfig change 111', JSON.stringify(newVal), JSON.stringify(oldVal));
-    if (localLiveStatus.value !== LiveStatus.Live || JSON.stringify(newVal) === JSON.stringify(oldVal)) {
-      return;
-    }
-    const liveLayoutManager = roomEngine.instance?.getLiveLayoutManager();
-    console.error('lixin-debug mix setLiveStreamLayoutInfo 111', newVal);
-    await liveLayoutManager?.setLiveStreamLayoutInfo(currentLive.value?.liveId as string, JSON.stringify(newVal));
-  }, { immediate: true, deep: true })
-
-  watch(() => [localLiveStatus.value, localUser.value?.seatStatus], async ([newlocalLiveStatus, newSeatStatus], [oldlocalLiveStatus, oldSeatStatus]) => {
-    console.error('lixin-debug mix localLiveStatus 222', newlocalLiveStatus, oldlocalLiveStatus, newSeatStatus, oldSeatStatus);
-    if (newlocalLiveStatus === oldlocalLiveStatus && newSeatStatus === oldSeatStatus) {
-      return;
-    }
-    if (newlocalLiveStatus === LiveStatus.Live && newSeatStatus === SeatStatus.On && localUser.value.userId === currentLive.value?.liveOwner.userId) {
-      setTimeout( async () => {
-        const liveLayoutManager = roomEngine.instance?.getLiveLayoutManager();
-        console.error('lixin-debug mix setLiveStreamLayoutInfo 222', layoutConfig.value);
-        await liveLayoutManager?.setLiveStreamLayoutInfo(currentLive.value?.liveId as string, JSON.stringify(layoutConfig.value));
-      }, 1000)
-    }
-  })
+    }),
+  );
+
+  // watch(() => layoutConfig.value, async (newVal, oldVal) => {
+  //   console.error('lixin-debug mix watch layoutConfig change 111', JSON.stringify(newVal), JSON.stringify(oldVal));
+  //   if (localLiveStatus.value !== LiveStatus.Live || JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+  //     return;
+  //   }
+  //   const liveLayoutManager = roomEngine.instance?.getLiveLayoutManager();
+  //   console.error('lixin-debug mix setLiveStreamLayoutInfo 111', newVal);
+  //   await liveLayoutManager?.setLiveStreamLayoutInfo(currentLive.value?.liveId as string, JSON.stringify(newVal));
+  // }, { immediate: true, deep: true });
+
+  // watch(() => [localLiveStatus.value, localUser.value?.seatStatus], async ([newlocalLiveStatus, newSeatStatus], [oldlocalLiveStatus, oldSeatStatus]) => {
+  //   console.error('lixin-debug mix localLiveStatus 222', newlocalLiveStatus, oldlocalLiveStatus, newSeatStatus, oldSeatStatus);
+  //   if (newlocalLiveStatus === oldlocalLiveStatus && newSeatStatus === oldSeatStatus) {
+  //     return;
+  //   }
+  //   if (newlocalLiveStatus === LiveStatus.Live && newSeatStatus === SeatStatus.On && localUser.value.userId === currentLive.value?.liveOwner.userId) {
+  //     setTimeout( async () => {
+  //       const liveLayoutManager = roomEngine.instance?.getLiveLayoutManager();
+  //       console.error('lixin-debug mix setLiveStreamLayoutInfo 222', layoutConfig.value);
+  //       await liveLayoutManager?.setLiveStreamLayoutInfo(currentLive.value?.liveId as string, JSON.stringify(layoutConfig.value));
+  //     }, 1000)
+  //   }
+  // })
 
   // todo1: 摄像头和屏幕分享同时关闭的时候，应该如何处理
   // todo2: 观众上麦之后需要混观众的音频流
@@ -224,12 +229,12 @@ const getFloatStyle = () => {
   const { top, right, bottom, left, width, height } = JSON.parse(props.config);
 
   return {
-    width: stringToNumber(width) * toLayoutRadio.value + 'px',
-    height: stringToNumber(height) * toLayoutRadio.value + 'px',
-    ...(top !== undefined ? { top: stringToNumber(top) * toLayoutRadio.value + 'px' } : {}),
-    ...(right !== undefined ? { right: stringToNumber(right) * toLayoutRadio.value + 'px' } : {}),
-    ...(bottom !== undefined ? { bottom: stringToNumber(bottom) * toLayoutRadio.value + 'px' } : {}),
-    ...(left !== undefined ? { left: stringToNumber(left) * toLayoutRadio.value + 'px' } : {})
+    width: `${stringToNumber(width) * toLayoutRadio.value}px`,
+    height: `${stringToNumber(height) * toLayoutRadio.value}px`,
+    ...(top !== undefined ? { top: `${stringToNumber(top) * toLayoutRadio.value}px` } : {}),
+    ...(right !== undefined ? { right: `${stringToNumber(right) * toLayoutRadio.value}px` } : {}),
+    ...(bottom !== undefined ? { bottom: `${stringToNumber(bottom) * toLayoutRadio.value}px` } : {}),
+    ...(left !== undefined ? { left: `${stringToNumber(left) * toLayoutRadio.value}px` } : {}),
   };
 };
 
@@ -341,4 +346,4 @@ const getFloatStyle = () => {
   text-overflow: ellipsis;
 }
 </style>
-../../../states/LiveState
+../../../states/LiveListState

package/src/components/StreamView/index.vue

@@ -1,40 +1,54 @@
 <template>
-  <FloatLayout v-if="mode === 'float'" :config="config" :filter-fn="filterFn" :sort-fn="sortFn">
+  <FloatLayout
+    v-if="mode === 'float'"
+    :config="config"
+    :filter-fn="filterFn"
+    :sort-fn="sortFn"
+  >
     <template #streamViewUI="slotProps">
       <slot name="streamViewUI" v-bind="slotProps" />
     </template>
   </FloatLayout>
-  <GridLayout v-if="mode === 'grid'" :config="config" :filter-fn="filterFn" :sort-fn="sortFn">
+  <GridLayout
+    v-if="mode === 'grid'"
+    :config="config"
+    :filter-fn="filterFn"
+    :sort-fn="sortFn"
+  >
     <template #streamViewUI="slotProps">
       <slot name="streamViewUI" v-bind="slotProps" />
     </template>
   </GridLayout>
-  <CustomLayout v-if="mode === 'custom'" :config="config" :filter-fn="filterFn" :sort-fn="sortFn">
+  <CustomLayout
+    v-if="mode === 'custom'"
+    :config="config"
+    :filter-fn="filterFn"
+    :sort-fn="sortFn"
+  >
     <template #streamViewUI="slotProps">
       <slot name="streamViewUI" v-bind="slotProps" />
     </template>
   </CustomLayout>
-  <MeetingLayout v-if="mode === 'meeting'" :config="config" :filter-fn="filterFn" :sort-fn="sortFn">
+  <MeetingLayout
+    v-if="mode === 'meeting'"
+    :config="config"
+    :filter-fn="filterFn"
+    :sort-fn="sortFn"
+  >
     <template #streamViewUI="slotProps">
       <slot name="streamViewUI" v-bind="slotProps" />
     </template>
   </MeetingLayout>
-  <MixLayout v-if="mixUserInfo">
-    <template #streamViewUI="slotProps">
-      <slot name="streamViewUI" v-bind="slotProps" />
-    </template>
-  </MixLayout>
 </template>
 
 <script lang="ts" setup>
 import { defineProps, computed } from 'vue';
-import { UserInfo } from '../../types';
+import { innerUserStore } from '../../states/UserState/store';
+import CustomLayout from './Layout/CustomLayout.vue';
 import FloatLayout from './Layout/FloatLayout.vue';
 import GridLayout from './Layout/GridLayout.vue';
-import CustomLayout from './Layout/CustomLayout.vue';
-import MixLayout from './Layout/MixLayout.vue';
 import MeetingLayout from './Layout/MeetingLayout.vue';
-import { innerUserStore } from '../../states/UserState/store';
+import type { UserInfo } from '../../types';
 
 const mixUserInfo = computed(() => innerUserStore.mixUserInfo);
 
@@ -48,7 +62,7 @@ withDefaults(defineProps<Props>(), {
   mode: 'grid',
   config: '',
   filterFn: () => true,
-  sortFn: () => 0
+  sortFn: () => 0,
 });
 </script>