tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.8

package/src/components/Search/SearchAdvanced/Slider/Slider.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchSlider {
   width: 100%;
   padding: 8px 0;
@@ -44,4 +41,4 @@
       transform: translate(-50%, -50%) scale(1.2);
     }
   }
-} 
+}

package/src/components/Search/SearchAdvanced/Slider/Slider.vue

@@ -78,5 +78,5 @@ const handleStart = (type: 'min' | 'max', e: MouseEvent | TouchEvent) => {
 </script>
 
 <style lang="scss" module>
-@import './Slider.scss';
+@use './Slider.scss';
 </style>

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchUserAdvanced {
   padding: 10px 20px;
   background-color: var(--bg-color-operate);
@@ -306,4 +303,4 @@
   cursor: pointer;
   background: var(--text-color-link);
   color: #fff;
-} 
+}

package/src/components/Search/SearchAdvanced/UserAdvanced/UserAdvanced.vue

@@ -378,5 +378,5 @@ const getGenderText = (gender: string) => {
 </script>
 
 <style lang="scss" module>
-@import './UserAdvanced.scss';
+@use './UserAdvanced.scss';
 </style>

package/src/components/Search/SearchBar/SearchBar.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchBar {
   display: flex;
   align-items: center;
@@ -27,7 +24,7 @@
 
     .tui-input {
       width: 100%;
-      
+
       .tui-input__native-input {
         height: 40px;
         padding: 8px 12px 8px 40px;
@@ -91,7 +88,7 @@
 
     .clearIcon {
       color: var(--text-color-disabled);
-      
+
       &:hover {
         color: var(--text-color-secondary);
       }
@@ -117,4 +114,4 @@
   &--h5 {
     padding: 10px;
   }
-} 
+}

package/src/components/Search/SearchBar/SearchBar.vue

@@ -128,5 +128,5 @@ const handleClear = () => {
 </script>
 
 <style lang="scss" module>
-@import './SearchBar.scss';
+@use './SearchBar.scss';
 </style>

package/src/components/Search/SearchResults/EmptyResult/EmptyResult.vue

@@ -28,5 +28,5 @@ const text = computed(() => props.text || t('Search.status.noContent'));
 </script>
 
 <style lang="scss" module>
-@import './EmptyResult.scss';
+@use './EmptyResult.scss';
 </style>

package/src/components/Search/SearchResults/Loading/Loading.vue

@@ -13,5 +13,5 @@ const props = defineProps<ILoadingProps>();
 </script>
 
 <style lang="scss" module>
-@import './Loading.scss';
+@use './Loading.scss';
 </style>

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

@@ -396,5 +396,5 @@ const generateKey = (type: SearchType, item: SearchResultItemType, index: number
 </script>
 
 <style lang="scss" module>
-@import './SearchResults.scss';
+@use './SearchResults.scss';
 </style>

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

@@ -54,5 +54,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './Conversation.scss';
+@use './Conversation.scss';
 </style>

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

@@ -35,5 +35,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './Group.scss';
+@use './Group.scss';
 </style>

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

@@ -259,5 +259,5 @@ const handleClick = () => {
 </script>
 
 <style lang="scss" module>
-@import './Message.scss';
+@use './Message.scss';
 </style>

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

@@ -59,5 +59,5 @@ const props = withDefaults(defineProps<ISearchResultsItemProps>(), {
 </script>
 
 <style lang="scss" module>
-@import './SearchResultsItem.scss';
+@use './SearchResultsItem.scss';
 </style>

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/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>