tuikit-atomicx-vue3 3.4.1 → 3.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "3.4.1",
+  "version": "3.4.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -52,7 +52,7 @@
     "@tencentcloud/chat": "^3.5.8",
     "@tencentcloud/chat-uikit-engine": "~2.5.6",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.4.0",
+    "@tencentcloud/tuiroom-engine-js": "~3.4.2",
     "@tencentcloud/uikit-base-component-vue3": "1.1.0",
     "vue": "^3.4.21"
   },

package/src/components/CoHostPanel/BattlePanel.vue

@@ -120,7 +120,7 @@ const handleSendBattleRequest = async (user: SeatUserInfo) => {
     switch (result.get(user.liveId)) {
       case TUIConnectionCode.TUIConnectionCodeSuccess:
         pkUserIds.add(user.userId);
-        TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Battle invitation sent to user', { userName: user.userName }) });
+        TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Battle invitation sent to user', { userName: user.userName || user.userId }) });
         break;
       case TUIConnectionCode.TUIConnectionCodeRoomNotExist:
         TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed, Room not exist') });
@@ -191,13 +191,13 @@ const handleCoHostRequestRejected = ({ invitee }: { invitee: SeatUserInfo }) =>
     return;
   }
   pkUserIds.delete(invitee.userId);
-  TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: invitee.userName }) });
+  TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: invitee.userName || invitee.userId }) });
 };
 
 const handleCoHostRequestTimeout = ({ inviter, invitee }: { inviter: SeatUserInfo; invitee: SeatUserInfo }) => {
   if (inviter.userId === loginUserInfo.value?.userId && pkUserIds.has(invitee.userId)) {
     pkUserIds.delete(invitee.userId);
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request timeout for user', { userName: invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request timeout for user', { userName: invitee.userName || invitee.userId}) });
   }
 };
 

package/src/components/CoHostPanel/CoHostPanel.vue

@@ -57,6 +57,7 @@ import { computed, ref, watch } from 'vue';
 import { useUIKit, TUIDialog, IconClose, IconLiveSetting } from '@tencentcloud/uikit-base-component-vue3';
 import { useBattleState } from '../../states/BattleState';
 import { useCoHostState } from '../../states/CoHostState';
+import { useLoginState } from '../../states/LoginState';
 import { CoHostStatus, CoHostLayoutTemplate } from '../../types';
 import BattlePanel from './BattlePanel.vue';
 import ConfigSettingPanel from './ConfigSettingPanel.vue';
@@ -66,8 +67,9 @@ const { t } = useUIKit();
 const props = defineProps<{
   visible: boolean;
 }>();
+const { loginUserInfo } = useLoginState();
 const { coHostStatus } = useCoHostState();
-const { currentBattleInfo } = useBattleState();
+const { battleUsers } = useBattleState();
 const emit = defineEmits(['update:visible']);
 const close = () => {
   emit('update:visible', false);
@@ -75,7 +77,7 @@ const close = () => {
 const activeTab = ref('battleTab');
 const settingVisible = ref(false);
 const inConnection = computed(() => coHostStatus.value === CoHostStatus.Connected);
-const inPk = computed(() => currentBattleInfo.value?.battleId !== undefined);
+const inPk = computed(() => battleUsers.value.some(user => user.userId === loginUserInfo.value?.userId));
 
 const title = computed(() => {
   if (inPk.value) {
@@ -99,7 +101,13 @@ const handleSettingConfirm = (form: {
 }) => {
   configForm.value = form;
 };
-
+watch(inConnection, (newVal) => {
+  if (newVal && !inPk.value) {
+    activeTab.value = 'coHostTab';
+  }
+}, {
+  immediate: true,
+});
 watch(inPk, (newVal, oldVal) => {
   if (newVal) {
     emit('update:visible', false);

package/src/components/CoHostPanel/ConnectionPanel.vue

@@ -173,7 +173,7 @@ const handleSendCoHostRequest = async (user: SeatUserInfo) => {
     });
     if (result.get(user.liveId) === TUIConnectionCode.TUIConnectionCodeSuccess) {
       sentCoHostRequestUserList.value.add(user.userId);
-      TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Co-host invitation sent to user', { userName: user.userName }) });
+      TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Co-host invitation sent to user', { userName: user.userName || user.userId }) });
     } else {
       switch (result.get(user.liveId)) {
         case TUIConnectionCode.TUIConnectionCodeRoomNotExist:
@@ -248,14 +248,14 @@ const handleCoHostRequestAccepted = ({ invitee }: { invitee: SeatUserInfo }) =>
 
 const handleCoHostRequestRejected = ({ invitee }: { invitee: SeatUserInfo }) => {
   if (sentCoHostRequestUserList.value.has(invitee.userId)) {
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request rejected by user', { userName: invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request rejected by user', { userName: invitee.userName || invitee.userId }) });
     sentCoHostRequestUserList.value.delete(invitee.userId);
   }
 };
 
 const handleCoHostRequestTimeout = ({ inviter, invitee }: { inviter: SeatUserInfo; invitee: SeatUserInfo }) => {
   if (inviter.userId === loginUserInfo.value?.userId && sentCoHostRequestUserList.value.has(invitee.userId)) {
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request timeout for user', { userName: invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Co-host request timeout for user', { userName: invitee.userName || invitee.userId }) });
     sentCoHostRequestUserList.value.delete(invitee.userId);
   }
 };
@@ -268,7 +268,7 @@ const onBattleRequestAccept = (eventInfo: { battleInfo: TUIBattleInfo, inviter:
 
 const onBattleRequestRejected = (eventInfo: { battleInfo: TUIBattleInfo, inviter: TUIBattleUser, invitee: TUIBattleUser }) => {
   if (eventInfo.inviter.userId === loginUserInfo.value?.userId) {
-    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: eventInfo.invitee.userName }) });
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: eventInfo.invitee.userName || eventInfo.invitee.userId }) });
     battleRequestList.value.delete(eventInfo.invitee.userId);
   }
 };

package/src/components/{LiveCoreView → LiveView}/CoreViewDecorate/BattleUserDecorate.vue

@@ -9,11 +9,14 @@
       :style="item.region"
     >
       <div class="battle-decorate" v-if="getBattleLevel(item.userInfo.userId) > 0">
-        <div class="battle-badge-container" :class="getBattleLevel(item.userInfo.userId) === 1 ? 'top-badge' : 'ordinary-badge'">
-          <img :src="getBattleLevel(item.userInfo.userId) === 1 ? BattleTopBadge : BattleOrdinaryBadge" alt="battle-badge" class="battle-badge" />
+        <span class="battle-score-value" v-if="!battleScore?.has(item.userInfo.userId)">{{ t('Connecting') }}</span>
+        <template v-else>
+          <div class="battle-badge-container" :class="getBattleLevel(item.userInfo.userId) === 1 ? 'top-badge' : 'ordinary-badge'">
+            <img :src="getBattleLevel(item.userInfo.userId) === 1 ? BattleTopBadge : BattleOrdinaryBadge" alt="battle-badge" class="battle-badge" />
           <span class="battle-level">{{ getBattleLevel(item.userInfo.userId) }}</span>
-        </div>
-        <span class="battle-score-value">{{ battleScore?.get(item.userInfo.userId) || 0 }}</span>
+          </div>
+          <span class="battle-score-value">{{ battleScore?.get(item.userInfo.userId) || 0 }}</span>
+        </template>
       </div>
     </div>
   </div>
@@ -23,10 +26,13 @@
 import { SeatUserInfo, CoHostLayoutTemplate } from '../../../types';
 import { useBattleState } from '../../../states/BattleState';
 import { useLiveState } from '../../../states/LiveState';
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { TUILiveBattleManagerEvents } from '@tencentcloud/tuiroom-engine-js';
+import { useCoHostState } from '../../../states/CoHostState';
+import { ref, computed, watch } from 'vue';
 import BattleTopBadge from '../assets/svg/BattleTopBadge.svg';
 import BattleOrdinaryBadge from '../assets/svg/BattleOrdinaryBadge.svg';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { t } = useUIKit();
 
 const props = defineProps<{
   seatListWithRealSize: Array<{ userInfo: SeatUserInfo; region: {
@@ -39,15 +45,16 @@ const props = defineProps<{
 }>();
 
 const { currentLive } = useLiveState();
-const { battleUsers, battleScore, subscribeEvent, unsubscribeEvent } = useBattleState();
+const { connected } = useCoHostState();
+const { currentBattleInfo, battleScore } = useBattleState();
 
 const isInBattle = ref(false);
 
 const showBattleUserDecorate = computed(() => {
-  const showUserDecorateInGrid = currentLive.value?.layoutTemplate === CoHostLayoutTemplate.HostDynamicGrid && battleUsers.value.length > 2;
+  const showUserDecorateInGrid = currentLive.value?.layoutTemplate === CoHostLayoutTemplate.HostDynamicGrid;
   const showUserDecorateIn1v6 = currentLive.value?.layoutTemplate === CoHostLayoutTemplate.HostDynamic1v6;
   const showUserDecorate = showUserDecorateInGrid || showUserDecorateIn1v6;
-  return props.seatListWithRealSize.length > 0 && isInBattle.value && showUserDecorate;
+  return props.seatListWithRealSize.length > 0 && isInBattle.value && showUserDecorate && connected.value.length > 2;
 });
 
 const currentBattleScoreList = computed(() => {
@@ -58,25 +65,17 @@ function getBattleLevel(userId: string) {
   return currentBattleScoreList.value.indexOf(battleScore.value.get(userId) || 0) + 1;
 };
 
-function handleBattleStarted() {
-  isInBattle.value = true;
-}
-
-function handleBattleEnded() {
-  setTimeout(() => {
-    isInBattle.value = false;
-  }, 5000);
-}
-
-onMounted(() => {
-  subscribeEvent(TUILiveBattleManagerEvents.onBattleStarted, handleBattleStarted);
-  subscribeEvent(TUILiveBattleManagerEvents.onBattleEnded, handleBattleEnded);
-});
-
-onUnmounted(() => {
-  unsubscribeEvent(TUILiveBattleManagerEvents.onBattleStarted, handleBattleStarted);
-  unsubscribeEvent(TUILiveBattleManagerEvents.onBattleEnded, handleBattleEnded);
-});
+let battleTimer: NodeJS.Timeout | null = null;
+watch(() => currentBattleInfo.value?.battleId, (newVal) => {
+  if(newVal !== null && newVal !== undefined) {
+    isInBattle.value = true;
+  } else {
+    if(battleTimer) return;
+    battleTimer = setTimeout(() => {
+      isInBattle.value = false;
+    }, 5000);
+  }
+}, { immediate: true });
 
 </script>
 
@@ -103,6 +102,7 @@ onUnmounted(() => {
     padding: 4px;
     background-color: rgba(15, 16, 20, 0.4);
     border-radius: 24px;
+    color: var(--text-color-primary);
     .battle-badge-container {
       display: flex;
       align-items: center;
@@ -135,7 +135,6 @@ onUnmounted(() => {
     .battle-score-value {
       font-size: 12px;
       font-weight: 500;
-      color: #fff;
     }
   }
 </style>

package/src/components/{LiveCoreView → LiveView}/i18n/en-US/index.ts

@@ -16,4 +16,5 @@ export const resource = {
   '540P': '540P',
   '720P': '720P',
   '1080P': '1080P',
+  'Connecting': 'Connecting',
 };

package/src/components/{LiveCoreView → LiveView}/i18n/zh-CN/index.ts

@@ -16,4 +16,5 @@ export const resource = {
   '540P': '标清',
   '720P': '高清',
   '1080P': '超清',
+  'Connecting': '连线中',
 };

package/src/components/{LiveCoreView → LiveView}/index.ts

@@ -1,9 +1,12 @@
 import { addI18n } from '../../i18n';
 import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
 import { enUSResource, zhCNResource } from './i18n';
-import LiveCoreView from './index.vue';
+import LiveViewComponent from './index.vue';
 
 addI18n('en-US', { translation: enUSResource });
 addI18n('zh-CN', { translation: zhCNResource });
 
-export { LiveCoreView, DefaultStreamViewUI };
+const LiveCoreView = LiveViewComponent;
+const LiveView = LiveViewComponent;
+
+export { LiveCoreView, LiveView, DefaultStreamViewUI };

package/src/components/{LiveCoreView → LiveView}/index.vue

@@ -80,7 +80,7 @@ const { loginUserInfo } = useLoginState();
 const isPlayedVideo = ref(false);
 const isMounted = ref(false);
 const isAlignCenter = computed(() => {
-  if (!isInStreamMixerComp.value && isPortraitContainer.value && widthRatio.value < heightRatio.value) {
+  if (!isInStreamMixerComp.value && isPortraitContainer.value && widthRatio.value < heightRatio.value && isMobile) {
     return false;
   }
   return true;

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/rtc/index.ts

@@ -7,7 +7,7 @@ import { CameraButton as CameraButtonComponent } from '../components/CameraButto
 import { CoGuestPanel as CoGuestPanelComponent } from '../components/CoGuestPanel';
 import { CoHostPanel as CoHostPanelComponent } from '../components/CoHostPanel';
 import { LiveAudienceList as LiveAudienceListComponent } from '../components/LiveAudienceList';
-import { LiveCoreView as LiveCoreViewComponent } from '../components/LiveCoreView';
+import { LiveCoreView, LiveView } from '../components/LiveView';
 import { LiveList as LiveListComponent } from '../components/LiveList';
 import { LiveMonitorView as LiveMonitorViewComponent } from '../components/LiveMonitorView';
 import { LiveScenePanel as LiveScenePanelComponent } from '../components/LiveScenePanel';
@@ -36,7 +36,6 @@ RTCLoginServer.getInstance().init();
 
 const BarrageList = BarrageListComponent;
 const BarrageInput = BarrageInputComponent;
-const LiveCoreView = LiveCoreViewComponent;
 const StreamMixer = StreamMixerComponent;
 const LiveScenePanel = LiveScenePanelComponent;
 const LiveAudienceList = LiveAudienceListComponent;
@@ -70,6 +69,7 @@ export {
   BarrageList,
   BarrageInput,
   LiveCoreView,
+  LiveView,
   StreamMixer,
   LiveScenePanel,
   LiveAudienceList,

package/dist/components/LiveCoreView/index.d.ts

@@ -1,4 +0,0 @@
-import { default as DefaultStreamViewUI } from './DefaultStreamViewUI.vue';
-import { default as LiveCoreView } from './index.vue';
-
-export { LiveCoreView, DefaultStreamViewUI };