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

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUI.vue

@@ -96,7 +96,7 @@ const props = withDefaults(defineProps<ConversationPreviewUIProps>(), {
 });
 
 const emit = defineEmits<{
-  select: [conversation: ConversationModel];
+  selectConversation: [conversation: ConversationModel];
 }>();
 
 const { activeConversation, setActiveConversation } = useConversationListState();
@@ -120,7 +120,7 @@ watch(isHovered, (newValue) => {
 });
 
 const handleClick = () => {
-  emit('select', props.conversation);
+  emit('selectConversation', props.conversation);
   setActiveConversation(props.conversation.conversationID);
 };
 
@@ -130,5 +130,5 @@ const handleCloseActionsModal = () => {
 </script>
 
 <style lang="scss" module>
-@import './ConversationPreview.scss';
+@use './ConversationPreview.scss';
 </style>

package/src/components/ConversationList/ConversationPreview/ConversationPreviewUnread.vue

@@ -30,5 +30,5 @@ const isUnreadMarked = computed(() => props.conversation?.markList?.includes(TUI
 </script>
 
 <style lang="scss" module>
-@import './ConversationPreview.scss';
+@use './ConversationPreview.scss';
 </style>

package/src/components/ConversationList/ConversationSearch/ConversationSearch.vue

@@ -188,5 +188,5 @@ watch(keyword, handleSearchChange, { immediate: true });
 </script>
 
 <style lang="scss" module>
-@import './ConversationSearch.scss';
+@use './ConversationSearch.scss';
 </style>

package/src/components/LiveAudienceList/LiveAudienceList.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
     <div
-      v-if="loginUserInfo && localLiveStatus === LiveStatus.Live && !isOwner"
+      v-if="loginUserInfo && currentLive?.liveId && !isOwner"
       class="viewer-item current-user-item"
     >
       <span class="rank">-</span>
@@ -75,12 +75,11 @@ import type { CSSProperties } from 'vue';
 import { computed, defineProps, ref, onMounted, onUnmounted } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
-import { LiveStatus } from '../../types';
+import { Avatar } from '../Avatar';
 import UserActionMenu from './UserActionMenu.vue';
 import type { AudienceInfo } from '../../types';
-import { Avatar } from '../Avatar';
 
 const { t } = useUIKit();
 const currentViewerTarget = ref<HTMLElement | null>(null);
@@ -92,7 +91,7 @@ const props = defineProps<{
 }>();
 const { loginUserInfo } = useLoginState();
 const { audienceList, audienceCount, fetchAudienceList } = useLiveAudienceState();
-const { localLiveStatus, currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 
 const getRankClass = (rank: number) => {
   switch (rank) {

package/src/components/LiveAudienceList/LiveAudienceListH5.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { CSSProperties, computed, defineProps, ref } from 'vue';
 import { useLoginState } from '../../states/LoginState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
 import { type AudienceInfo } from '../../types';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
@@ -38,7 +38,7 @@ const props = defineProps<{
 }>();
 const { loginUserInfo } = useLoginState();
 const { audienceList, audienceCount } = useLiveAudienceState();
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 
 const showActionMenu = ref(false);
 const selectedViewer = ref<AudienceInfo | null>(null);

package/src/components/LiveAudienceList/UserActionMenu.vue

@@ -37,8 +37,9 @@ import { computed, defineProps, defineEmits, ref, onMounted, onUnmounted } from
 import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import { useCoGuestState } from '../../states/CoGuestState';
 import { useLiveAudienceState } from '../../states/LiveAudienceState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
+import { useLiveSeatState } from '../../states/LiveSeatState';
 import { Avatar } from '../Avatar';
 
 const { t } = useUIKit();
@@ -57,18 +58,9 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 const props = defineProps<Props>();
-const { currentLive } = useLiveState();
-const {
-  userListInCoGuest,
-  receivedCoGuestUserList,
-  sentCoGuestUserList,
-  availableCoGuestUserList,
-  sendCoGuestRequest,
-  cancelCoGuestRequest,
-  acceptCoGuestRequest,
-  rejectCoGuestRequest,
-  disconnect,
-} = useCoGuestState();
+const { currentLive } = useLiveListState();
+const { connected } = useCoGuestState();
+const { kickUserOutOfSeat } = useLiveSeatState();
 const { disableSendMessage, audienceList, kickUserOutOfRoom } = useLiveAudienceState();
 const { loginUserInfo } = useLoginState();
 const currentUserInfo = computed(() => audienceList.value.find(user => user.userId === props.userId));
@@ -78,10 +70,7 @@ const actions = computed(() => {
   if (!isOwner.value) {
     return [];
   }
-  const isInCoGuest = userListInCoGuest.value.some(user => user.userId === props.userId);
-  const isSentCoGuest = sentCoGuestUserList.value.some(user => user.userId === props.userId);
-  const isAvailableCoGuest = availableCoGuestUserList.value.some(user => user.userId === props.userId);
-  const isReceivedCoGuest = receivedCoGuestUserList.value.some(user => user.userId === props.userId);
+  const isInCoGuest = connected.value.some(user => user.userId === props.userId);
   const isDisableSendMessage = currentUserInfo.value?.isMessageDisabled;
   if (!isDisableSendMessage) {
     tempActions.push({
@@ -98,38 +87,8 @@ const actions = computed(() => {
     });
   }
   if (isInCoGuest) {
-    tempActions.push({ label: t('Kick out'), action: 'disconnect', actionFn: () => disconnect(props.userId) });
+    tempActions.push({ label: t('Kick out'), action: 'disconnect', actionFn: () => kickUserOutOfSeat({ userId: props.userId }) });
   }
-  // if (isAvailableCoGuest) {
-  //   tempActions.push({
-  //     label: t('Invite to seat'),
-  //     action: 'takeSeat',
-  //     actionFn: () =>
-  //       sendCoGuestRequest({
-  //         userId: props.userId,
-  //         seatIndex: -1,
-  //       }),
-  //   });
-  // }
-  // if (isSentCoGuest) {
-  //   tempActions.push({
-  //     label: t('Cancel invitation'),
-  //     action: 'cancelCoGuestRequest',
-  //     actionFn: () => cancelCoGuestRequest({ userId: props.userId }),
-  //   });
-  // }
-  // if (isReceivedCoGuest) {
-  //   tempActions.push({
-  //     label: t('Accept invitation'),
-  //     action: 'acceptCoGuestRequest',
-  //     actionFn: () => acceptCoGuestRequest({ userId: props.userId }),
-  //   });
-  //   tempActions.push({
-  //     label: t('Reject invitation'),
-  //     action: 'rejectCoGuestRequest',
-  //     actionFn: () => rejectCoGuestRequest({ userId: props.userId }),
-  //   });
-  // }
   tempActions.push({
     label: t('Kick out of room'),
     action: 'kickUserOutOfRoom',

package/src/components/LiveList/LiveList.vue

@@ -39,11 +39,11 @@
 <script lang="ts" setup>
 import { ref, computed, defineEmits, watch } from 'vue';
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 import type { LiveInfo } from '../../types';
-const { liveList, currentCursor, fetchLiveList } = useLiveState();
+const { liveList, liveListCursor, fetchLiveList } = useLiveListState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
 const props = defineProps({
@@ -57,7 +57,7 @@ const scrollContainerRef = ref<HTMLElement | null>(null);
 const liveListItemsRef = ref<HTMLElement | null>(null);
  
 const isLoadingMore = ref(false);
-const hasMoreLive = computed(() => currentCursor.value !== '');
+const hasMoreLive = computed(() => liveListCursor.value !== '');
 
 const liveItemWidth = ref('356px');
 const liveItemHeight = ref('270px');
@@ -71,7 +71,7 @@ watch(
   async (user) => {
     if (user && user.userId) {
       isLoadingMore.value = true;
-      currentCursor.value = '';
+      liveListCursor.value = '';
       liveList.value.length = 0;
       await fetchLiveList({});
       isLoadingMore.value = false;
@@ -128,7 +128,7 @@ async function fetchMoreLives() {
   }
   try {
     isLoadingMore.value = true;
-    await fetchLiveList({ cursor: currentCursor.value });
+    await fetchLiveList({ cursor: liveListCursor.value });
   } finally {
     isLoadingMore.value = false;
   }

package/src/components/LiveList/LiveListH5.vue

@@ -55,13 +55,13 @@
 <script lang="ts" setup>
 import { ref, watch, computed, defineEmits, onMounted, onUnmounted } from 'vue';
 import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { useLoginState } from '../../states/LoginState';
 import { Avatar } from '../Avatar';
 import type { LiveInfo } from '../../types';
 import PullToRefresh from './pullToRefresh.vue';
 
-const { liveList, currentCursor, fetchLiveList } = useLiveState();
+const { liveList, liveListCursor, fetchLiveList } = useLiveListState();
 const { loginUserInfo } = useLoginState();
 const { t } = useUIKit();
 const showLiveList = ref<LiveInfo[]>([]);
@@ -70,7 +70,7 @@ const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.
 const scrollContainerRef = ref<HTMLElement | null>(null);
 
 const isLoadingMore = ref(false);
-const hasMoreLive = computed(() => currentCursor.value !== '');
+const hasMoreLive = computed(() => liveListCursor.value !== '');
 
 const liveItemWidth = ref('168px');
 const liveItemHeight = ref('262px');
@@ -84,7 +84,7 @@ watch(
   async user => {
     if (user && user.userId) {
       isLoadingMore.value = true;
-      currentCursor.value = '';
+      liveListCursor.value = '';
       liveList.value.length = 0;
       await fetchLiveList({});
       showLiveList.value = liveList.value.slice();
@@ -109,7 +109,7 @@ watch(scrollContainerRef, () => {
 async function handleRefresh(completeRefresh: (success?: boolean) => void) {
   try {
     isLoadingMore.value = true;
-    currentCursor.value = '';
+    liveListCursor.value = '';
     liveList.value.length = 0;
     await fetchLiveList({});
     showLiveList.value = liveList.value.slice();
@@ -131,7 +131,7 @@ async function fetchMoreLives() {
   }
   try {
     isLoadingMore.value = true;
-    await fetchLiveList({ cursor: currentCursor.value });
+    await fetchLiveList({ cursor: liveListCursor.value });
     showLiveList.value = liveList.value.slice();
   } finally {
     isLoadingMore.value = false;

package/src/components/LiveScenePanel/index.vue

@@ -45,12 +45,12 @@ import MaterialRenameDialog from './MaterialRenameDialog.vue';
 import MaterialItem from './MaterialItem.vue';
 import { useVideoMixerState } from '../../states/VideoMixerState';
 import { useDeviceState } from '../../states/DeviceState';
-import { useLiveState } from '../../states/LiveState';
+import { useLiveListState } from '../../states/LiveListState';
 import { getNanoId } from '../../utils/utils';
 import { LiveOrientation, MediaSource } from '../../types';
 const { t } = useUIKit();
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { mediaSourceList, publishVideoQuality, addMediaSource, updateMediaSource, clearMediaSource } = useVideoMixerState();
 const { getCameraList } = useDeviceState();
 

package/src/components/LiveView/CoreViewDecorate/BattleDecorate.vue

@@ -11,7 +11,7 @@
     <div :class="['battle-time-container', { 'more-top': showPkBar }]">
       <div class="battle-time-background"></div>
       <div class="battle-time-content">
-        <span class="battle-status">{{ t('In battle') }}</span>
+        <IconTime size="16" />
         <span class="battle-time">{{ time }}</span>
       </div>
     </div>
@@ -28,13 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { IconPK, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { TUILiveBattleManagerEvents, TUIBattleStoppedReason } from '@tencentcloud/tuiroom-engine-js';
-import { ref, computed, watch, Ref, onMounted, onUnmounted, nextTick } from 'vue';
-import { CoHostLayoutTemplate } from '../../../types';
+import { IconPK, IconTime, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, computed, watch, Ref, onMounted, onUnmounted } from 'vue';
+import { BattleEndedReason, BattleEvent, BattleInfo, CoHostLayoutTemplate } from '../../../types';
 import { useBattleState } from '../../../states/BattleState';
 import { useLiveSeatState } from '../../../states/LiveSeatState';
-import { useLiveState } from '../../../states/LiveState';
+import { useLiveListState } from '../../../states/LiveListState';
 import { convertSecondsToHMS } from '../../../utils/utils';
 import defeatResult from '../assets/img/defeat.png';
 import victoryResult from '../assets/img/victory.png';
@@ -44,7 +43,7 @@ import blueBkgSvg from '../assets/svg/blueBkg.svg';
 import vSvg from '../assets/svg/v.svg';
 import sSvg from '../assets/svg/s.svg';
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { currentBattleInfo, battleUsers, battleScore, subscribeEvent, unsubscribeEvent} = useBattleState();
 const { seatList } = useLiveSeatState();
 const { t } = useUIKit();
@@ -133,7 +132,7 @@ function convertToTwoDigits(value: number) {
 const time = computed(() => {
   const { minutes, seconds } = convertSecondsToHMS(leftBattleTime.value);
   if (minutes <= 0 && seconds <= 0) {
-    return '00:00';
+    return t('Battle ended');
   }
   return `${convertToTwoDigits(minutes)}:${convertToTwoDigits(seconds)}`;
 });
@@ -141,7 +140,7 @@ const time = computed(() => {
 const showBattleResult = ref(false);
 const battleResultImg = ref(drawResult);
 
-function handleBattleEnded(eventInfo: { battleId: string; reason: TUIBattleStoppedReason }) {
+function handleBattleEnded(eventInfo: { battleInfo: BattleInfo; reason: BattleEndedReason }) {
   stopTimer();
   showBattleResult.value = true;
   const maxScore = Math.max(...[...battleScore.value.values()]);
@@ -163,11 +162,11 @@ function handleBattleEnded(eventInfo: { battleId: string; reason: TUIBattleStopp
 }
 
 onMounted(() => {
-  subscribeEvent(TUILiveBattleManagerEvents.onBattleEnded, handleBattleEnded);
+  subscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);
 });
 
 onUnmounted(() => {
-  unsubscribeEvent(TUILiveBattleManagerEvents.onBattleEnded, handleBattleEnded);
+  unsubscribeEvent(BattleEvent.onBattleEnded, handleBattleEnded);
 });
 </script>
 
@@ -252,10 +251,6 @@ onUnmounted(() => {
     line-height: 20px;
     gap: 4px;
     transform: translateY(-2px);
-
-    .battle-time {
-      width: 30px;
-    }
   }
 }
 

package/src/components/LiveView/CoreViewDecorate/BattleUserDecorate.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { SeatUserInfo, CoHostLayoutTemplate } from '../../../types';
 import { useBattleState } from '../../../states/BattleState';
-import { useLiveState } from '../../../states/LiveState';
+import { useLiveListState } from '../../../states/LiveListState';
 import { useCoHostState } from '../../../states/CoHostState';
 import { ref, computed, watch } from 'vue';
 import BattleTopBadge from '../assets/svg/BattleTopBadge.svg';
@@ -44,7 +44,7 @@ const props = defineProps<{
   }}>;
 }>();
 
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const { connected } = useCoHostState();
 const { currentBattleInfo, battleScore } = useBattleState();
 

package/src/components/LiveView/DefaultStreamViewUI.vue

@@ -17,7 +17,7 @@
       </div>
     </template>
     <div v-if="!userInfo.userId" class="empty-position">
-      <span class="text" :title="t('Waiting for connection')" v-if="localCoGuestStatus === CoGuestStatus.Connected">{{ t('Waiting for connection') }}</span>
+      <span class="text" :title="t('Waiting for connection')" v-if="connected.some(item => item.userId === loginUserInfo?.userId)">{{ t('Waiting for connection') }}</span>
       <span class="text" :title="t('Waiting for connection')" v-else>{{ t('Waiting for connection') }}</span>
     </div>
   </div>
@@ -25,11 +25,12 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, nextTick, onUnmounted } from 'vue';
-import { DeviceStatus, SeatUserInfo, CoGuestStatus } from '../../types';
+import { DeviceStatus, SeatUserInfo } from '../../types';
 import { useCoGuestState } from '../../states/CoGuestState';
 import { Avatar } from '../Avatar';
 import AudioIcon from '../../baseComp/AudioIcon.vue';
 import { useLiveSeatState } from '../../states/LiveSeatState';
+import { useLoginState } from '../../states/LoginState';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 interface Props {
@@ -48,7 +49,8 @@ const props = defineProps<Props>();
 const { t } = useUIKit();
 const canvasRef = ref<HTMLCanvasElement | null>(null);
 
-const { localCoGuestStatus } = useCoGuestState();
+const { loginUserInfo } = useLoginState();
+const { connected } = useCoGuestState();
 const { speakingUsers, seatList } = useLiveSeatState();
 
 const seatListWithUser = computed(() => {