tuikit-atomicx-vue3 3.3.4 → 3.4.2

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="live-core-decorate" v-if="showLiveCoreDecorate">
+    <BattleUserDecorate :seatListWithRealSize="seatListWithRealSize" />
+  </div>
+  <div
+    class="live-core-decorate-cover-stream" v-if="showLiveCoreDecorate"
+    :style="{ top: `${minTop}px`, height: `${maxHeight}px`, left: `${minLeft}px`, width: `${maxWidth}px` }"
+  >
+    <BattleDecorate />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import BattleDecorate from './BattleDecorate.vue';
+import BattleUserDecorate from './BattleUserDecorate.vue';
+import { SeatUserInfo } from '../../../types';
+
+const props = defineProps<{
+  seatListWithRealSize: Array<{ userInfo: SeatUserInfo; region: {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+    zIndex: number;
+  }}>;
+}>();
+
+const showLiveCoreDecorate = ref(false);
+watch(() => props.seatListWithRealSize, (val) => {
+  if (val.length > 0) {
+    showLiveCoreDecorate.value = true;
+  }
+});
+
+const minTop = computed(() => {
+  return props.seatListWithRealSize.reduce((min, item) => {
+    return Math.min(min, parseInt(item.region.top));
+  }, Infinity);
+});
+
+const minLeft = computed(() => {
+  return props.seatListWithRealSize.reduce((min, item) => {
+    return Math.min(min, parseInt(item.region.left));
+  }, Infinity);
+});
+
+const maxHeight = computed(() => {
+  return props.seatListWithRealSize.reduce((max, item) => {
+    return Math.max(max, parseInt(item.region.top) + parseInt(item.region.height) - minTop.value);
+  }, 0);
+});
+
+const maxWidth = computed(() => {
+  return props.seatListWithRealSize.reduce((max, item) => {
+    return Math.max(max, parseInt(item.region.left) + parseInt(item.region.width) - minLeft.value);
+  }, 0);
+});
+</script>
+
+<style scoped lang="scss">
+.live-core-decorate, .live-core-decorate-cover-stream {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+</style>

package/src/components/LiveView/PlayerControl/MultiResolution.vue

@@ -0,0 +1,130 @@
+<template>
+  <span
+    v-if="resolutionList.length > 0"
+    v-click-outside="handleClickOutside"
+    class="multi-resolution"
+  >
+    <span
+      v-show="isShowResolutionList"
+      class="multi-resolution-list"
+      @click="handleClickResolution"
+    >
+      <span
+        v-for="resolution in resolutionList"
+        :key="resolution"
+        class="multi-resolution-item"
+        :data-resolution="resolution"
+      >
+        {{ t(resolutionMap[resolution]) }}
+      </span>
+    </span>
+    <span class="current-resolution" @click="handleClickCurrentResolution">
+      {{ currentResolution ? t(resolutionMap[currentResolution]) : (resolutionList.length > 0 ? t(resolutionMap[resolutionList[0]]) : '') }}
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import vClickOutside from '../../../directives/vClickOutside';
+import { useLiveState } from '../../../states/LiveState';
+import { usePlayerControlState, Resolution } from './PlayerControlState';
+
+const { t } = useUIKit();
+const { currentLive } = useLiveState();
+const {
+  resolutionList,
+  currentResolution,
+  switchResolution,
+  initializeResolution,
+} = usePlayerControlState();
+
+// Resolution mapping for UI display
+const resolutionMap: Record<Resolution, string> = {
+  [Resolution.R360P]: '360P',
+  [Resolution.R540P]: '540P',
+  [Resolution.R720P]: '720P',
+  [Resolution.R1080P]: '1080P',
+};
+
+const isShowResolutionList = ref<boolean>(false);
+
+const handleClickOutside = () => {
+  isShowResolutionList.value = false;
+};
+
+const handleClickCurrentResolution = () => {
+  isShowResolutionList.value = !isShowResolutionList.value;
+};
+
+const handleClickResolution = async (event: MouseEvent) => {
+  event.stopPropagation();
+  const resolution = (event.target as HTMLElement)?.dataset.resolution;
+  if (resolution) {
+    const resolutionValue = Number(resolution) as Resolution;
+    if (resolutionList.value.includes(resolutionValue)) {
+      isShowResolutionList.value = false;
+      if (resolutionValue === currentResolution.value) {
+        return;
+      }
+      await switchResolution(resolutionValue);
+    }
+  }
+};
+
+onMounted(() => {
+  watch(
+    () => currentLive.value?.liveId,
+    async () => {
+      if (currentLive.value?.liveId) {
+        await initializeResolution(currentLive.value.liveId);
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.multi-resolution {
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  color: #ffffff;
+  user-select: none;
+
+  .multi-resolution-list {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 4px 8px;
+    transform: translate(-12px, -110%);
+    background-color: #1f2024;
+    border: 1px solid #2b2c30;
+
+    .multi-resolution-item {
+      width: 100%;
+      padding: 4px;
+      margin: 4px 0;
+      border-radius: 4px;
+      text-wrap: nowrap;
+
+      &:hover {
+        background-color: #2b2c30;
+      }
+    }
+  }
+
+  .current-resolution {
+    text-wrap: nowrap;
+  }
+}
+</style>

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

@@ -16,6 +16,7 @@
         </span>
         <div class="center-controls"></div>
         <div class="right-controls">
+          <MultiResolution />
           <span class="control-btn audio-control-btn">
             <AudioControl
               class="audio-control-icon"
@@ -58,6 +59,7 @@ import {
 } from '@tencentcloud/uikit-base-component-vue3';
 import { usePlayerControlState } from './PlayerControlState';
 import AudioControl from './AudioControl.vue';
+import MultiResolution from './MultiResolution.vue';
 import { isMobile } from '../../../utils';
 import { isFirefoxBrowser, isSafariBrowser } from './utils/deviceDetection';
 
@@ -159,31 +161,31 @@ const stopAutoHideControl = () => {
   }
 };
 
-const handleMouseEnter = () => {
+const onMouseOver = () => {
   stopAutoHideControl();
   showControls.value = true;
 };
 
-const handleMouseLeave = () => {
+const onMouseOut = () => {
   startAutoHideControl();
 };
 
 const setupParentMouseListener = () => {
   if (!isMobile && playerControlRef.value) {
-    const parentElement = playerControlRef.value.parentElement;
+    const { parentElement } = playerControlRef.value;
     if (parentElement) {
-      parentElement.addEventListener('mouseenter', handleMouseEnter);
-      parentElement.addEventListener('mouseleave', handleMouseLeave);
+      parentElement.addEventListener('mouseover', onMouseOver);
+      parentElement.addEventListener('mouseout', onMouseOut);
     }
   }
 };
 
 const removeParentMouseListener = () => {
   if (!isMobile && playerControlRef.value) {
-    const parentElement = playerControlRef.value.parentElement;
+    const { parentElement } = playerControlRef.value;
     if (parentElement) {
-      parentElement.removeEventListener('mouseenter', handleMouseEnter);
-      parentElement.removeEventListener('mouseleave', handleMouseLeave);
+      parentElement.removeEventListener('mouseover', onMouseOver);
+      parentElement.removeEventListener('mouseout', onMouseOut);
     }
   }
 };

package/src/components/{LiveCoreView → LiveView}/PlayerControl/PlayerControlState.ts

@@ -1,9 +1,9 @@
 import type { Ref } from 'vue';
 import { computed, ref, watch } from 'vue';
+import { TRTCCloud, TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
 import useRoomEngine from '../../../hooks/useRoomEngine';
 import useLiveState from '../../../states/LiveState';
 import { useLiveSeatState } from '../../../states/LiveSeatState';
-import { TRTCCloud } from '@tencentcloud/tuiroom-engine-js';
 // Import utility modules
 import { 
   getDeviceType, 
@@ -31,6 +31,14 @@ export enum FillMode {
   FILL = 'fill',
 }
 
+// Resolution enum
+export enum Resolution {
+  R360P = TUIVideoQuality.kVideoQuality_360p,
+  R540P = TUIVideoQuality.kVideoQuality_540p,
+  R720P = TUIVideoQuality.kVideoQuality_720p,
+  R1080P = TUIVideoQuality.kVideoQuality_1080p,
+}
+
 // Player control state interface
 export interface PlayerControlState {
   // State properties
@@ -40,6 +48,10 @@ export interface PlayerControlState {
   isLandscapeStyleMode: Ref<boolean>;
   isPictureInPicture: Ref<boolean>;
   currentVolume: Ref<number>;
+  
+  // Resolution state properties
+  resolutionList: Ref<Resolution[]>;
+  currentResolution: Ref<Resolution | undefined>;
 
   // Basic control methods
   resume: () => Promise<boolean>;
@@ -53,6 +65,11 @@ export interface PlayerControlState {
   requestPictureInPicture: () => Promise<boolean>;
   exitPictureInPicture: () => Promise<boolean>;
 
+  // Resolution control methods
+  switchResolution: (resolution: Resolution) => Promise<boolean>;
+  getResolutionList: (roomId: string) => Promise<Resolution[]>;
+  initializeResolution: (roomId: string, applyResolution?: boolean) => Promise<void>;
+
   // Other control methods
   setVolume: (volume: number) => Promise<boolean>;
   changeFillMode: (fillMode: FillMode) => Promise<boolean>;
@@ -68,6 +85,12 @@ const isFullscreen = ref(false);
 const isLandscapeStyleMode = ref(false);
 const isPictureInPicture = ref(false);
 const currentVolume = ref(1.0); // Default volume is 1.0 (100%)
+
+// Resolution state management
+const resolutionList = ref<Resolution[]>([]);
+const currentResolution = ref<Resolution | undefined>();
+const RESOLUTION_INITIALIZED_PREFIX = '[LiveCoreView]ResolutionInitialized';
+
 const roomEngine = useRoomEngine();
 
 /**
@@ -333,6 +356,92 @@ export function usePlayerControlState(): PlayerControlState {
     }, 'Exit picture-in-picture', false);
   };
 
+  /**
+   * Resolution control methods
+   */
+  const switchResolution = async (resolution: Resolution): Promise<boolean> => {
+    return withErrorHandling(async () => {
+      if (!roomEngine.instance) {
+        throw new Error('Room engine instance not available');
+      }
+      await roomEngine.instance.callExperimentalAPI(
+        JSON.stringify({
+          api: 'switchPlaybackQuality',
+          params: {
+            quality: resolution,
+            autoSwitch: false,
+          },
+        }),
+      );
+      if (!isPlaying.value) {
+        isPlaying.value = true;
+      }
+      currentResolution.value = resolution;
+      console.log(`Resolution switched to: ${resolution}`);
+      return true;
+    }, 'Switch resolution', false);
+  };
+
+  const getResolutionList = async (roomId: string): Promise<Resolution[]> => {
+    return withErrorHandling(async () => {
+      if (!roomEngine.instance) {
+        throw new Error('Room engine instance not available');
+      }
+      
+      const resolutions = await roomEngine.instance.callExperimentalAPI(
+        JSON.stringify({
+          api: 'queryPlaybackQualityList',
+          params: {
+            roomId: roomId,
+          },
+        }),
+      );
+      
+      console.log(`Retrieved resolution list for room ${roomId}:`, resolutions);
+      return (resolutions || []) as Resolution[];
+    }, 'Get resolution list', []);
+  };
+
+
+  const initializeResolution = async (roomId: string, applyResolution: boolean = true): Promise<void> => {
+    try {
+      // Check if resolution has been initialized for this room
+      const initializedKey = `${RESOLUTION_INITIALIZED_PREFIX}_${roomId}`;
+      const hasInitialized = localStorage.getItem(initializedKey) === 'true';
+      
+      // Get available resolutionList
+      const availableResolutions = await getResolutionList(roomId);
+      resolutionList.value = availableResolutions;
+      
+      if (availableResolutions.length === 0) {
+        console.warn('No resolutions available for room:', roomId);
+        return;
+      }
+      
+      // Always set current resolution if it's not set or if it's not in the available list
+      if (!currentResolution.value || !availableResolutions.includes(currentResolution.value)) {
+        currentResolution.value = availableResolutions[0];
+      }
+      
+      // Only apply resolution if it hasn't been initialized for this room or explicitly requested
+      const shouldApplyResolution = applyResolution && !hasInitialized && currentResolution.value !== undefined;
+      if (shouldApplyResolution) {
+        await switchResolution(currentResolution.value!);
+        // Mark as initialized for this room
+        localStorage.setItem(initializedKey, 'true');
+      }
+      
+      console.log(`Resolution initialized for room ${roomId}:`, {
+        availableResolutions: availableResolutions,
+        currentResolution: currentResolution.value,
+        applied: shouldApplyResolution,
+        hasInitialized,
+      });
+    } catch (error) {
+      console.error('Failed to initialize resolution:', error);
+    }
+  };
+
   /**
    * Other control methods
    */
@@ -585,6 +694,10 @@ export function usePlayerControlState(): PlayerControlState {
     isLandscapeStyleMode,
     isPictureInPicture,
     currentVolume,
+    
+    // Resolution state
+    resolutionList,
+    currentResolution,
 
     // Methods
     resume,
@@ -593,6 +706,9 @@ export function usePlayerControlState(): PlayerControlState {
     exitFullscreen,
     requestPictureInPicture,
     exitPictureInPicture,
+    switchResolution,
+    getResolutionList,
+    initializeResolution,
     setVolume,
     changeFillMode,
     

package/src/components/LiveView/assets/svg/BattleOrdinaryBadge.svg

@@ -0,0 +1,20 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18421_20178)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.69458L14.9282 4.48401V12.0629L8 15.8523L1.0718 12.0629V4.48401L8 0.69458Z" fill="#7D9AC6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0L14.9282 3.78943V11.3683L8 15.1577L1.0718 11.3683V3.78943L8 0Z" fill="url(#paint0_linear_18421_20178)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99957 1.68311L13.3882 4.63044V10.5251L7.99957 13.4724L2.61096 10.5251V4.63044L7.99957 1.68311Z" fill="url(#paint1_linear_18421_20178)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_18421_20178" x1="0" y1="0" x2="0" y2="15.1577" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E6F1FE"/>
+<stop offset="1" stop-color="#B7C6E2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_18421_20178" x1="1.77734" y1="1.68311" x2="1.77734" y2="13.4724" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDF6FF"/>
+<stop offset="1" stop-color="#E1F0FF"/>
+</linearGradient>
+<clipPath id="clip0_18421_20178">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/LiveView/assets/svg/BattleTopBadge.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18421_20177)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.70166L14.9282 4.52622V12.1753L8 15.9999L1.0718 12.1753V4.52622L8 0.70166Z" fill="#EF6428"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0L14.9282 3.82456V11.4737L8 15.2982L1.0718 11.4737V3.82456L8 0Z" fill="url(#paint0_linear_18421_20177)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99957 1.69971L13.3882 4.67437V10.6237L7.99957 13.5983L2.61096 10.6237V4.67437L7.99957 1.69971Z" fill="#FFD37A"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_18421_20177" x1="0" y1="0" x2="0" y2="15.2982" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAE5F"/>
+<stop offset="1" stop-color="#FF8C3C"/>
+</linearGradient>
+<clipPath id="clip0_18421_20177">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/LiveView/assets/svg/blueBkg.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="118" height="49" viewBox="0 0 118 49" fill="none">
+  <path d="M14.4 0H118L104 49H0.400024L14.4 0Z" fill="url(#paint0_linear_17801_10158)"/>
+  <defs>
+    <linearGradient id="paint0_linear_17801_10158" x1="18.6" y1="25.2" x2="96.3" y2="25.2" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#71BBFF"/>
+      <stop offset="1" stop-color="#55ADFF" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+</svg>

package/src/components/LiveView/assets/svg/redBkg.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="118" height="49" viewBox="0 0 118 49" fill="none">
+  <path d="M14 0H117.6L103.6 49H0L14 0Z" fill="url(#paint0_linear_17801_10157)"/>
+  <defs>
+    <linearGradient id="paint0_linear_17801_10157" x1="100.8" y1="25.2" x2="30.1" y2="25.2" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF71AC"/>
+      <stop offset="1" stop-color="#F6699C" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+</svg>

package/src/components/LiveView/assets/svg/s.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="65" viewBox="0 0 64 65" fill="none">
+  <g filter="url(#filter0_d_17801_10160)">
+    <path d="M37.9599 12C44.0639 12 49.4968 13.7931 52.3881 16.3469L45.138 24.9864C43.0498 23.0303 39.9688 21.2372 35.6008 21.2372C32.5768 21.2372 29.9963 22.3783 29.5222 24.2801C29.1428 25.8015 29.9359 26.8882 35.1529 27.9749C45.755 30.1484 47.9002 33.8976 46.3829 39.9833C44.3778 48.0251 37.0022 53.3501 26.8102 53.3501C20.3702 53.3501 14.8523 51.4483 11.5465 47.8621L19.3719 39.3856C21.2994 42.2111 25.4173 44.1129 29.4493 44.1129C33.0893 44.1129 35.0113 42.9175 35.499 40.9614C35.9055 39.3313 35.0004 38.2446 29.7274 37.1578C19.1948 34.93 17.2546 30.5831 18.6907 24.8234C20.5061 17.5423 28.6079 12 37.9599 12Z" fill="white"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_17801_10160" x="0.206509" y="0.66" width="63.5216" height="64.0306" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset/>
+      <feGaussianBlur stdDeviation="5.67"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.0988146 0 0 0 0 0.235498 0 0 0 0 0.720101 0 0 0 0.5 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17801_10160"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_17801_10160" result="shape"/>
+    </filter>
+  </defs>
+</svg>

package/src/components/LiveView/assets/svg/v.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+  <g filter="url(#filter0_d_17801_10159)">
+    <path d="M41.28 12.7275H53.096L22.9993 53.48H22.7753L13 12.7275H24.816L28.076 32.6691L41.28 12.7275Z" fill="white"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_17801_10159" x="0.540001" y="0.26754" width="65.0159" height="65.672" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset/>
+      <feGaussianBlur stdDeviation="6.23"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.739046 0 0 0 0 0.206678 0 0 0 0 0.494157 0 0 0 0.5 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_17801_10159"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_17801_10159" result="shape"/>
+    </filter>
+  </defs>
+</svg>

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

@@ -10,4 +10,11 @@ export const resource = {
   'Mute': 'Mute',
   'Unmute': 'Unmute',
   'The system does not support picture-in-picture mode': 'The system does not support picture-in-picture mode',
+  'co-Hosting': 'co-Hosting',
+  'In battle': 'In battle',
+  '360P': '360P',
+  '540P': '540P',
+  '720P': '720P',
+  '1080P': '1080P',
+  'Connecting': 'Connecting',
 };

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

@@ -10,4 +10,11 @@ export const resource = {
   'Mute': '静音',
   'Unmute': '取消静音',
   'The system does not support picture-in-picture mode': '系统不支持画中画模式',
+  'co-Hosting': '连线中',
+  'In battle': 'PK中',
+  '360P': '低清',
+  '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

@@ -44,6 +44,7 @@
         name="localVideo"
         v-bind="{ style: localStreamViewInfo?.region }"
       />
+      <LiveCoreDecorate :seatListWithRealSize="seatListWithRealSize" />
     </div>
     <Teleport to="body" v-if="!isFullscreen" :disabled="!isMobile">
       <PlayerControl :isLandscapeStyleMode="isLandscapeStyleMode" v-if="isShowPlayerControl" />
@@ -61,6 +62,7 @@ import { useLoginState } from '../../states/LoginState';
 import { getContentSize } from '../../utils/domOperation';
 import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
 import PlayerControl from './PlayerControl/PlayerControl.vue';
+import LiveCoreDecorate from './CoreViewDecorate/LiveCoreDecorate.vue';
 import type { SeatInfo, SeatUserInfo } from '../../types';
 import { isMobile } from '../../utils';
 import { usePlayerControlState } from './PlayerControl';
@@ -78,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;
@@ -161,7 +163,7 @@ const seatListWithRealSize = computed(() => seatList.value.map((item: SeatInfo,
       position: 'absolute' as const,
       left: `${streamViewSize.value.width * ratioLayout.x}px`,
       top: `${streamViewSize.value.width * ratioLayout.y}px`,
-      width: `${streamViewSize.value.width * ratioLayout.width}px`,
+      width: `${Math.ceil(streamViewSize.value.width * ratioLayout.width)}px`,
       height:
           ratioLayout.height === -1
             ? `${streamViewSize.value.height}px`
@@ -381,6 +383,7 @@ onBeforeUnmount(() => {
 .live-core-view-container {
   width: 100%;
   height: 100%;
+  position: relative;
   display: flex;
   justify-content: center;
   overflow: hidden;

package/src/components/MessageInput/AttachmentPicker/AttachmentPicker.vue

@@ -2,17 +2,19 @@
   <div :class="[styles['attachment-picker']]">
     <template v-if="isCollapsed">
       <PopoverRoot>
-        <PopoverTrigger as="span">
-          <IconPlus
-            :class="styles['attachment-picker__icon']"
-            size="20"
-          />
+        <PopoverTrigger as="div">
+          <slot>
+            <IconPlus
+              :class="styles['attachment-picker__icon']"
+              size="20"
+            />
+          </slot>
         </PopoverTrigger>
         <PopoverPortal>
           <PopoverContent
-          side="top"
-          align="start"
-          :side-offset="5"
+            side="top"
+            align="start"
+            :side-offset="5"
           >
             <div :class="styles['attachment-picker__popup']">
               <component