tuikit-atomicx-vue3 3.4.1 → 4.3.0

package/src/components/{LiveCoreView → 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/{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>
@@ -22,11 +25,14 @@
 <script setup lang="ts">
 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 { useLiveListState } from '../../../states/LiveListState';
+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: {
@@ -38,16 +44,17 @@ const props = defineProps<{
   }}>;
 }>();
 
-const { currentLive } = useLiveState();
-const { battleUsers, battleScore, subscribeEvent, unsubscribeEvent } = useBattleState();
+const { currentLive } = useLiveListState();
+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}/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(() => {

package/src/components/{LiveCoreView → LiveView}/PlayerControl/AudioControl.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="audio-control" :style="iconSizeStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
-    <span class="control-btn volume-btn" :title="isMuted ? t('Unmute') : t('Mute')" @click="handleVolumeIconClick">
+    <span class="control-btn volume-btn" :title="isMuted ? t('Open Speaker') : t('Close Speaker')" @click="handleVolumeIconClick">
       <IconSpeakerOff size="20" v-if="isMuted" />
       <IconSpeakerOn size="20" v-else />
     </span>

package/src/components/{LiveCoreView → LiveView}/PlayerControl/MultiResolution.vue

@@ -25,14 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch, defineEmits } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import vClickOutside from '../../../directives/vClickOutside';
-import { useLiveState } from '../../../states/LiveState';
+import { useLiveListState } from '../../../states/LiveListState';
 import { usePlayerControlState, Resolution } from './PlayerControlState';
 
 const { t } = useUIKit();
-const { currentLive } = useLiveState();
+const { currentLive } = useLiveListState();
 const {
   resolutionList,
   currentResolution,
@@ -40,6 +40,10 @@ const {
   initializeResolution,
 } = usePlayerControlState();
 
+const emit = defineEmits<{
+  (e: 'resolution-change', resolution: Resolution): void;
+}>();
+
 // Resolution mapping for UI display
 const resolutionMap: Record<Resolution, string> = {
   [Resolution.R360P]: '360P',
@@ -69,6 +73,7 @@ const handleClickResolution = async (event: MouseEvent) => {
         return;
       }
       await switchResolution(resolutionValue);
+      emit('resolution-change', resolutionValue);
     }
   }
 };
@@ -104,6 +109,7 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    min-width: 40px;
     border-radius: 4px;
     padding: 4px 8px;
     transform: translate(-12px, -110%);

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

@@ -16,7 +16,7 @@
         </span>
         <div class="center-controls"></div>
         <div class="right-controls">
-          <MultiResolution />
+          <MultiResolution @resolution-change="handleResolutionChanged" />
           <span class="control-btn audio-control-btn">
             <AudioControl
               class="audio-control-icon"
@@ -62,11 +62,13 @@ import AudioControl from './AudioControl.vue';
 import MultiResolution from './MultiResolution.vue';
 import { isMobile } from '../../../utils';
 import { isFirefoxBrowser, isSafariBrowser } from './utils/deviceDetection';
+import { waitForVideoMounted } from './utils/domHelpers';
 
 const {
   isPlaying,
   isFullscreen,
   isPictureInPicture,
+  currentVolume,
   pause,
   resume,
   requestPictureInPicture,
@@ -82,7 +84,6 @@ const props = defineProps<{
 }>();
 
 const { t } = useUIKit();
-const currentVolume = ref(1);
 const isMuted = ref(false);
 const playerControlRef = ref<HTMLElement>();
 const showControls = ref(false);
@@ -112,6 +113,13 @@ const handlePlayPause = () => {
   }
 };
 
+const handleResolutionChanged = async () => {
+  const video = await waitForVideoMounted();
+  if (video) {
+    await setVolume(currentVolume.value);
+  }
+};
+
 const handlePictureInPicture = async () => {
   let flag = false;
   if (isPictureInPicture.value) {