tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/src/components/Search/SearchResults/SearchResultsItem/User/User.vue

@@ -68,5 +68,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './User.scss';
+@use './User.scss';
 </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/StreamMixer/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { LiveCoreView } from '../LiveCoreView';
+import { LiveCoreView } from '../LiveView';
 import LocalMixer from './LocalMixer/index.vue';
 </script>
 

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>
 

package/src/components/StreamView/manager/mediaManager.ts

@@ -1,6 +1,6 @@
+import { watch } from 'vue';
 import TUIRoomEngine, {
   TUIRoomEvents,
-  TUIChangeReason,
   TUIVideoStreamType,
   TRTCVideoStreamType,
   TRTCVideoFillMode,
@@ -9,23 +9,23 @@ import TUIRoomEngine, {
   TRTCVideoResolution,
   TRTCVideoResolutionMode,
 } from '@tencentcloud/tuiroom-engine-js';
-import { isMobile } from '../../../utils/environment';
+import useRoomEngine from '../../../hooks/useRoomEngine';
+import { useLiveListState } from '../../../states/LiveListState';
 import useUserState from '../../../states/UserState/index';
 import { innerUserStore } from '../../../states/UserState/store';
-import { DeviceStatus, LiveStatus, StreamPlayStatus } from '../../../types';
-import useRoomEngine from '../../../hooks/useRoomEngine';
-import useLiveState from '../../../states/LiveState';
 import { useVideoMixerState } from '../../../states/VideoMixerState';
-import { watch } from 'vue';
+import { DeviceStatus, StreamPlayStatus } from '../../../types';
+import { isMobile } from '../../../utils/environment';
+import type {
+  TUIChangeReason } from '@tencentcloud/tuiroom-engine-js';
 
 const { localUser } = useUserState();
 const { isVideoMixerEnabled } = useVideoMixerState();
-const { localLiveStatus } = useLiveState();
 const roomEngine = useRoomEngine();
 const playDomMap = new Map<string, Map<HTMLElement, TUIVideoStreamType>>();
 
 // todo: 这里退出房间之后需要清空
-function setPlayDomMap(params1: {userId: string, streamType: TUIVideoStreamType}, params2: {view: HTMLElement, streamType: TUIVideoStreamType}) {
+function setPlayDomMap(params1: { userId: string; streamType: TUIVideoStreamType }, params2: { view: HTMLElement; streamType: TUIVideoStreamType }) {
   const playDomInfo = playDomMap.get(`${params1.userId}-${params1.streamType}`);
   if (!playDomInfo) {
     playDomMap.set(`${params1.userId}-${params1.streamType}`, new Map());
@@ -33,27 +33,23 @@ function setPlayDomMap(params1: {userId: string, streamType: TUIVideoStreamType}
   playDomMap.get(`${params1.userId}-${params1.streamType}`)?.set(params2.view, params2.streamType);
 }
 
-function getPlayDomMap(params: {userId: string, streamType: TUIVideoStreamType}) {
+function getPlayDomMap(params: { userId: string; streamType: TUIVideoStreamType }) {
   return playDomMap.get(`${params.userId}-${params.streamType}`);
 }
 
-watch(localLiveStatus, (newVal) => {
-  if (newVal === LiveStatus.IDLE) {
-    playDomMap.clear();
-  }
-});
-
-function updateStreamPlayStatus(params: {userId: string, streamType: TUIVideoStreamType, playStatus: StreamPlayStatus}) {
+function updateStreamPlayStatus(params: { userId: string; streamType: TUIVideoStreamType; playStatus: StreamPlayStatus }) {
   if (params.userId === 'local_fake_user') {
     return;
   }
   const { userId, streamType, playStatus } = params;
-  const assignObj = streamType === TUIVideoStreamType.kScreenStream ? {
-    screenPlayStatus: playStatus
-  } : {
-    cameraPlayStatus: playStatus
-  }
-  innerUserStore.updateUserInfo({ userId, ...assignObj })
+  const assignObj = streamType === TUIVideoStreamType.kScreenStream
+    ? {
+      screenPlayStatus: playStatus,
+    }
+    : {
+      cameraPlayStatus: playStatus,
+    };
+  innerUserStore.updateUserInfo({ userId, ...assignObj });
 }
 
 interface ObserverData {
@@ -97,7 +93,7 @@ export class MediaManager {
       userId,
       streamType,
       view,
-      observerViewInVisible
+      observerViewInVisible,
     );
     // if (userId.indexOf('livekit_') !== 0) {
     //   const hasVideo =
@@ -120,7 +116,7 @@ export class MediaManager {
       Object.assign(this.observerDataMap.get(view) || {}, {
         userId,
         streamType,
-      })
+      }),
     );
     this.intersectionObserver?.observe(view);
 
@@ -164,8 +160,8 @@ export class MediaManager {
 
   private initIntersectionObserver() {
     if (
-      !this.intersectionObserver ||
-      document.getElementById('roomContainer') !== this.observerRoot
+      !this.intersectionObserver
+      || document.getElementById('roomContainer') !== this.observerRoot
     ) {
       const observerRoot = document.getElementById('roomContainer');
       this.intersectionObserver = new IntersectionObserver(
@@ -173,7 +169,7 @@ export class MediaManager {
         {
           root: observerRoot,
           rootMargin: '0px',
-        }
+        },
       );
       this.observerDataMap = new Map();
       this.observerRoot = observerRoot;
@@ -200,11 +196,11 @@ export class MediaManager {
       } else {
         observerData.isIntersection = false;
         const isContinuePlay = Array.from(
-          playDomInfo?.keys() || []
+          playDomInfo?.keys() || [],
         ).find(
           item =>
-            !this.observerDataMap.get(item) ||
-            this.observerDataMap.get(item)?.isIntersection
+            !this.observerDataMap.get(item)
+            || this.observerDataMap.get(item)?.isIntersection,
         );
         if (!isContinuePlay) {
           this.doStopPlayVideo({ userId, streamType });
@@ -238,14 +234,14 @@ export class MediaManager {
       return;
     }
     const playStreamType = this.getPlayStreamType(userId, streamType);
-    const viewIdList = Array.from(playDomInfo.keys()).map(item => {
+    const viewIdList = Array.from(playDomInfo.keys()).map((item) => {
       if (item instanceof HTMLElement) {
         return item?.id;
       }
       return item;
     });
 
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Loading })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Loading });
     if (userId === localUser.value?.userId) {
       if (streamType === TUIVideoStreamType.kCameraStream) {
         if (isVideoMixerEnabled.value) {
@@ -284,7 +280,7 @@ export class MediaManager {
         streamType: playStreamType,
       });
     }
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Playing })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Playing });
   }
 
   private async setVideoRenderParams(options: {
@@ -294,8 +290,8 @@ export class MediaManager {
     const { userId, streamType } = options;
     if (userId !== localUser.value?.userId) {
       const trtcCloud = roomEngine.instance?.getTRTCCloud();
-      const trtcStreamType =
-        streamType === TUIVideoStreamType.kScreenStream
+      const trtcStreamType
+        = streamType === TUIVideoStreamType.kScreenStream
           ? TRTCVideoStreamType.TRTCVideoStreamTypeSub
           : TRTCVideoStreamType.TRTCVideoStreamTypeBig;
       // todo: 确认这里的 cdn 流渲染模式
@@ -334,10 +330,10 @@ export class MediaManager {
     if (userId === localUser.value?.userId && isVideoMixerEnabled.value) {
       return;
     }
-    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Stopped })
+    updateStreamPlayStatus({ userId, streamType, playStatus: StreamPlayStatus.Stopped });
     if (
-      userId === localUser.value?.userId &&
-      streamType === TUIVideoStreamType.kCameraStream
+      userId === localUser.value?.userId
+      && streamType === TUIVideoStreamType.kCameraStream
     ) {
       roomEngine.instance?.setLocalVideoView({ view: null });
     } else {
@@ -412,11 +408,11 @@ export class MediaManager {
     TUIRoomEngine.once('ready', () => {
       roomEngine.instance?.on(
         TUIRoomEvents.onUserVideoStateChanged,
-        this.onUserVideoStateChanged.bind(this)
+        this.onUserVideoStateChanged.bind(this),
       );
       roomEngine.instance?.on(
         TUIRoomEvents.onUserAudioStateChanged,
-        this.onUserAudioStateChanged.bind(this)
+        this.onUserAudioStateChanged.bind(this),
       );
     });
   }
@@ -424,11 +420,11 @@ export class MediaManager {
   private unbindRoomEngineEvents() {
     roomEngine.instance?.off(
       TUIRoomEvents.onUserVideoStateChanged,
-      this.onUserVideoStateChanged
+      this.onUserVideoStateChanged,
     );
     roomEngine.instance?.off(
       TUIRoomEvents.onUserAudioStateChanged,
-      this.onUserAudioStateChanged
+      this.onUserAudioStateChanged,
     );
   }
 }