tuikit-atomicx-vue3 3.4.2 → 4.3.0

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(() => {

package/src/components/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/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/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) {