tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

package/src/components/ConversationList/ConversationPreview/utils.ts

@@ -12,8 +12,8 @@ export const generateHighlightTitle = (
 
   const regex = new RegExp(`(${highlightMatchString})`, 'gi');
   const parts = title.split(regex);
-  
-  return parts.map((part) => ({
+
+  return parts.map(part => ({
     text: part,
     isHighlight: part.toLowerCase() === highlightMatchString.toLowerCase(),
   }));
@@ -34,22 +34,22 @@ export const getLatestMessagePreview = (conversation: ConversationModel, t: (key
     case TUIChatEngine.TYPES.MSG_TEXT:
       return payload.text || '';
     case TUIChatEngine.TYPES.MSG_IMAGE:
-      return `[${t('TUIChat.Image')}]`;
+      return `[${t('TUIConversation.Image')}]`;
     case TUIChatEngine.TYPES.MSG_AUDIO:
-      return `[${t('TUIChat.Audio')}]`;
+      return `[${t('TUIConversation.Audio')}]`;
     case TUIChatEngine.TYPES.MSG_VIDEO:
-      return `[${t('TUIChat.Video')}]`;
+      return `[${t('TUIConversation.Video')}]`;
     case TUIChatEngine.TYPES.MSG_FILE:
-      return `[${t('TUIChat.File')}]`;
+      return `[${t('TUIConversation.File')}]`;
     case TUIChatEngine.TYPES.MSG_CUSTOM:
-      return `[${t('TUIChat.Custom')}]`;
+      return `[${t('TUIConversation.Custom')}]`;
     case TUIChatEngine.TYPES.MSG_LOCATION:
-      return `[${t('TUIChat.Location')}]`;
+      return `[${t('TUIConversation.Location')}]`;
     case TUIChatEngine.TYPES.MSG_FACE:
-      return `[${t('TUIChat.Emoji')}]`;
+      return `[${t('TUIConversation.Emoji')}]`;
     case TUIChatEngine.TYPES.MSG_MERGER:
-      return `[${t('TUIChat.Chat History')}]`;
+      return `[${t('TUIConversation.Chat History')}]`;
     default:
       return senderName ? `${senderName}: ${payload?.text || ''}` : payload?.text || '';
   }
-};
+};

package/src/components/ConversationList/hooks/useConversation.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+
+const enableCreate = ref(false);
+const enableSearch = ref(false);
+
+export const useConversation = () => {
+  const setEnableCreate = (value: boolean) => {
+    enableCreate.value = value;
+  };
+
+  const setEnableSearch = (value: boolean) => {
+    enableSearch.value = value;
+  };
+
+  return {
+    enableCreate,
+    enableSearch,
+    setEnableCreate,
+    setEnableSearch,
+  };
+};

package/src/components/ConversationList/hooks/useConversationCreate.ts

@@ -0,0 +1,29 @@
+import { GroupType } from '../../../types';
+import {
+  DEFAULT_GROUP_AVATAR_AVCHATROOM,
+  DEFAULT_GROUP_AVATAR_COMMON,
+  DEFAULT_GROUP_AVATAR_MEETING,
+  DEFAULT_GROUP_AVATAR_PUBLIC,
+  DEFAULT_GROUP_AVATAR_WORK,
+} from '../../Avatar';
+
+const getDefaultAvatar = (type: GroupType) => {
+  switch (type) {
+    case GroupType.WORK:
+      return DEFAULT_GROUP_AVATAR_WORK;
+    case GroupType.PUBLIC:
+      return DEFAULT_GROUP_AVATAR_PUBLIC;
+    case GroupType.MEETING:
+      return DEFAULT_GROUP_AVATAR_MEETING;
+    case GroupType.AVCHATROOM:
+      return DEFAULT_GROUP_AVATAR_AVCHATROOM;
+    case GroupType.COMMUNITY:
+      return DEFAULT_GROUP_AVATAR_COMMON;
+    default:
+      return '';
+  }
+};
+
+export const useConversationCreate = () => ({
+  getDefaultAvatar,
+});

package/src/components/ConversationList/i18n/en-US.ts

@@ -6,15 +6,23 @@ export default {
     'Load failed': 'Load failed',
     'Retry': 'Retry',
 
+    // ConversationSearch
+    'You are not in the group, please join the group first': 'You are not in the group, please join the group first',
+
     // ConversationCreate
-    'Start chat': 'Start chat',
+    'Start chat': 'Start Chat',
+    'Start C2C Chat': 'Start C2C Chat',
+    'Start Group Chat': 'Start Group Chat',
     'Add Participants': 'Add Participants',
     'Search': 'Search',
     'New group chat': 'New group chat',
     'Next': 'Next',
+    'Prev': 'Prev',
+    'Cancel': 'Cancel',
     'Create': 'Create',
 
     // ConversationCreateGroupDetail
+    'Group Avatar': 'Group Avatar',
     'Group Name': 'Group Name',
     'Group ID': 'Group ID',
     'Group Type': 'Group Type',
@@ -29,11 +37,12 @@ export default {
     'Community': 'Community',
 
     // Group type descriptions
-    'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.',
-    'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.',
-    'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.',
-    'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.': 'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.',
-    'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.': 'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.',
+    'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. ',
+    'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group.',
+    'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education.',
+    'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.': 'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios.',
+    'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.': 'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval.',
+    'See the documentation for details': 'See the documentation for details.',
 
     // ConversationActions
     'Pin': 'Pin',
@@ -46,5 +55,16 @@ export default {
 
     // Details link
     'Details': 'Details',
+
+    // ConversationList
+    'Drafts': 'Drafts',
+    'Image': 'Image',
+    'Audio': 'Audio',
+    'Video': 'Video',
+    'File': 'File',
+    'Custom': 'Custom',
+    'Location': 'Location',
+    'Emoji': 'Emoji',
+    'Chat History': 'Chat History',
   },
 };

package/src/components/ConversationList/i18n/zh-CN.ts

@@ -6,15 +6,23 @@ export default {
     'Load failed': '加载失败',
     'Retry': '重试',
 
+    // ConversationSearch
+    'You are not in the group, please join the group first': '你不在群组中，请先加入群组',
+
     // ConversationCreate
     'Start chat': '发起会话',
+    'Start C2C Chat': '发起单人会话',
+    'Start Group Chat': '发起多人会话',
     'Add Participants': '添加成员',
     'Search': '搜索',
     'New group chat': '新建群聊',
     'Next': '下一步',
+    'Prev': '上一步',
+    'Cancel': '取消',
     'Create': '创建',
 
     // ConversationCreateGroupDetail
+    'Group Avatar': '群头像',
     'Group Name': '群名称',
     'Group ID': '群ID',
     'Group Type': '群类型',
@@ -29,11 +37,12 @@ export default {
     'Community': '社群',
 
     // Group type descriptions
-    'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': '用户只能通过现有成员的邀请加入群组。邀请无需被邀请人同意或群主批准。详情请参阅文档。',
-    'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': '公共群组创建后，群主可以指定群管理员。用户加入群组需要搜索群ID并发送请求，群主或管理员批准后方可加入。详情请参阅文档。',
-    'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': '群组创建后，用户可以自由加入和退出群组，并可以查看加入群组前发送的消息。适用于音视频会议、在线教育等融合腾讯实时通信 (TRTC) 的场景。详情请参阅文档。',
-    'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.': '群组创建后，用户可以自由加入和退出群组。群组成员数量不限，但不保存消息历史记录。可以与直播 (LVB) 结合，支持屏幕评论场景。详情请参阅文档。',
-    'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.': '创建后可随意进出，最多支持10万人，支持历史消息存储，用户搜索群ID发起建群申请后，无需管理员审批即可加入。详情请参阅产品文档。',
+    'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.': '用户只能通过现有成员的邀请加入群组。邀请无需被邀请人同意或群主批准。',
+    'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.': '公共群组创建后，群主可以指定群管理员。用户加入群组需要搜索群ID并发送请求，群主或管理员批准后方可加入。',
+    'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.': '群组创建后，用户可以自由加入和退出群组，并可以查看加入群组前发送的消息。适用于音视频会议、在线教育等融合腾讯实时通信 (TRTC) 的场景。',
+    'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.': '群组创建后，用户可以自由加入和退出群组。群组成员数量不限，但不保存消息历史记录。可以与直播 (LVB) 结合，支持屏幕评论场景。',
+    'After creation, you can enter and leave at will, support up to 100,000 people, support historical message storage, and after users search for group ID and initiate a group application, they can join the group without administrator approval. See product documentation for details.': '创建后可随意进出，最多支持10万人，支持历史消息存储，用户搜索群ID发起建群申请后，无需管理员审批即可加入。',
+    'See the documentation for details': '详情请参阅文档。',
 
     // ConversationActions
     'Pin': '置顶',
@@ -46,5 +55,16 @@ export default {
 
     // Details link
     'Details': '详情',
+
+    // ConversationList
+    'Drafts': '草稿',
+    'Image': '图片',
+    'Audio': '音频',
+    'Video': '视频',
+    'File': '文件',
+    'Custom': '自定义消息',
+    'Location': '位置',
+    'Emoji': '表情',
+    'Chat History': '聊天记录',
   },
 };

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

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

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

@@ -1,34 +1,61 @@
 <template>
-  <div class="live-stream-view-container" ref="liveStreamViewContainerRef">
-    <div class="live-stream-view" :style="streamViewStyle">
-      <div class="live-stream-placeholder" v-if="!$slots.localVideo && seatList.length === 0">
+  <div
+    ref="liveCoreViewContainerRef"
+    class="live-core-view-container"
+  >
+    <div
+      class="live-core-view"
+      :style="streamViewStyle"
+    >
+      <div
+        v-if="!$slots.localVideo && seatList.length === 0"
+        class="live-core-placeholder"
+      >
         <span class="placeholder-text">{{ t('No video') }}</span>
       </div>
-      <div id="stream-content" class="stream-content"></div>
-      <div class="live-stream-ui" v-if="needPlayStreamViewInfo.length > 0">
-        <div v-for="(item, index) in needPlayStreamViewInfo" :key="`seat-${index}`" :style="item.region">
-          <slot name="streamViewUI" v-bind="{ userInfo: item.userInfo }"></slot>
-          <DefaultStreamViewUI :streamViewInfoList="needPlayStreamViewInfo" v-if="!$slots.streamViewUI" :userInfo="item.userInfo" />
+      <div
+        id="atomicx-live-stream-content"
+        class="stream-content"
+      />
+      <div
+        v-if="needPlayStreamViewInfo.length > 0"
+        class="live-core-ui"
+      >
+        <div
+          v-for="(item, index) in needPlayStreamViewInfo"
+          :key="`seat-${index}`"
+          :style="item.region"
+        >
+          <slot
+            name="streamViewUI"
+            v-bind="{ userInfo: item.userInfo }"
+          />
+          <DefaultStreamViewUI
+            v-if="!$slots.streamViewUI"
+            :streamViewInfoList="needPlayStreamViewInfo"
+            :userInfo="item.userInfo"
+          />
         </div>
       </div>
       <slot
-        name="localVideo"
         v-if="$slots.localVideo && isMounted"
+        name="localVideo"
         v-bind="{ style: localStreamViewInfo?.region }"
-      ></slot>
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, ComputedRef, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
-import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
-import { getContentSize } from '../../utils/domOperation';
+import { ref, computed, watch, onMounted, onBeforeUnmount, useSlots } from 'vue';
+import type { ComputedRef } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useLiveSeatState } from '../../states/LiveSeatState';
-import { useLoginState } from '../../states/LoginState';
 import { useLiveState } from '../../states/LiveState';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { SeatUserInfo } from '../../types';
+import { useLoginState } from '../../states/LoginState';
+import { getContentSize } from '../../utils/domOperation';
+import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
+import type { SeatUserInfo } from '../../types';
 
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
@@ -43,7 +70,7 @@ const isMounted = ref(false);
 
 onMounted(() => {
   isMounted.value = true;
-  startPlayStream({ view: 'stream-content' });
+  startPlayStream({ view: 'atomicx-live-stream-content' });
 });
 
 onBeforeUnmount(() => {
@@ -51,6 +78,16 @@ onBeforeUnmount(() => {
   stopPlayStream();
 });
 
+const isPortraitContainer = ref(true);
+const liveCoreViewContainerRef = ref<HTMLDivElement>();
+const originStreamViewStyle = ref({
+  width: 0,
+  height: 0,
+  transformX: 0,
+  transformY: 0,
+  scale: 1,
+});
+
 const ratioLayoutList = computed(() => {
   const layoutCanvas = canvas.value;
   const layoutList = seatList.value?.map(seat => ({ userId: seat.userInfo?.userId, ...seat.region }));
@@ -67,29 +104,38 @@ const ratioLayoutList = computed(() => {
   }));
 });
 
-const seatListWithRealSize = computed(() => {
-  return seatList.value.map((item, index) => {
-    const ratioLayout = ratioLayoutList.value[index];
+const streamViewSize = computed(() => {
+  if (isPortraitContainer.value) {
     return {
-      userInfo: item.userInfo as SeatUserInfo,
-      region: {
-        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`,
-        height:
+      width: originStreamViewStyle.value.width,
+      height: originStreamViewStyle.value.height,
+    };
+  }
+  return {
+    width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
+    height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale,
+  };
+});
+
+const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
+  const ratioLayout = ratioLayoutList.value[index];
+  return {
+    userInfo: item.userInfo as SeatUserInfo,
+    region: {
+      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`,
+      height:
           ratioLayout.height === -1
             ? `${streamViewSize.value.height}px`
             : `${streamViewSize.value.width * ratioLayout.height}px`,
-        zIndex: Number(ratioLayout.zOrder) || 0,
-      },
-    };
-  });
-});
+      zIndex: Number(ratioLayout.zOrder) || 0,
+    },
+  };
+}));
 
-const localStreamViewInfo = computed(() => {
-  return seatListWithRealSize.value.find(item => item?.userInfo?.userId === loginUserInfo.value?.userId);
-});
+const localStreamViewInfo = computed(() => seatListWithRealSize.value.find(item => item?.userInfo?.userId === loginUserInfo.value?.userId));
 
 const needPlayStreamViewInfo = computed(() => {
   if (ignoreLocalVideoPlay.value) {
@@ -98,20 +144,12 @@ const needPlayStreamViewInfo = computed(() => {
   return seatListWithRealSize.value;
 });
 
-// ----- 处理布局 -----
-// 根据 streamView 的父亲元素 A 大小获取一个流布局的容器 B，容器 B 符合 aspectRatio 比例
-// 根据传入的 props.config.layoutList，以流布局容器 B 为画布大小，计算出来所有可视区域 C 的大小和可视区域 C 的中心点坐标
-// 根据可视区域的 C 大小和 A 大小比例，计算出容器 B 的 scale。根据 C 的中心点坐标和 B 的中心点坐标，计算出容器 B 的 transformX、transformY（要保证 C 的中心点在 streamView 父元素 B 的中心点）
-// 根据容器 B 的 scale 和 transformX、transformY，计算出容器 B 的实际宽度、高度、transformX、transformY（这里不使用 scale 是为了不影响子元素中 text, img 的大小）
-// 根据容器 B 的实际大小，计算每一个子元素的实际位置和大小
-const liveStreamViewContainerRef = ref<HTMLDivElement>();
-const originStreamViewStyle = ref({
-  width: 0,
-  height: 0,
-  transformX: 0,
-  transformY: 0,
-  scale: 1,
-});
+// ----- Layout Processing -----
+// Get a stream layout container B based on the size of streamView's parent element A, container B conforms to aspectRatio proportion
+// Based on the passed props.config.layoutList, using stream layout container B as canvas size, calculate the size of all visible areas C and the center coordinates of visible area C
+// Based on the size ratio of visible area C and A, calculate container B's scale. Based on the center coordinates of C and B, calculate container B's transformX and transformY (to ensure C's center point is at the center of streamView's parent element B)
+// Based on container B's scale and transformX, transformY, calculate container B's actual width, height, transformX, transformY (scale is not used here to avoid affecting the size of text and img in child elements)
+// Based on container B's actual size, calculate the actual position and size of each child element
 
 const visualStreamSize = computed(() => {
   if (ratioLayoutList.value.length === 0) {
@@ -122,16 +160,14 @@ const visualStreamSize = computed(() => {
       centerY: 0,
     };
   }
-  const absoluteLayoutList = ratioLayoutList.value.map(item => {
-    return {
-      userId: item.userId,
-      left: originStreamViewStyle.value.width * item.x,
-      top: originStreamViewStyle.value.width * item.y,
-      width: originStreamViewStyle.value.width * item.width,
-      height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
-      zIndex: item.zOrder,
-    };
-  });
+  const absoluteLayoutList = ratioLayoutList.value.map(item => ({
+    userId: item.userId,
+    left: originStreamViewStyle.value.width * item.x,
+    top: originStreamViewStyle.value.width * item.y,
+    width: originStreamViewStyle.value.width * item.width,
+    height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
+    zIndex: item.zOrder,
+  }));
   const minX = Math.min(...absoluteLayoutList.map(item => item.left));
   const minY = Math.min(...absoluteLayoutList.map(item => item.top));
   const maxX = Math.max(...absoluteLayoutList.map(item => item.left + item.width));
@@ -149,10 +185,10 @@ watch(visualStreamSize, () => {
 });
 
 function handleStreamListTransform() {
-  if (!liveStreamViewContainerRef.value) {
+  if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+  const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
   const containerWidth = Math.floor(containerRect.width);
   const containerHeight = Math.floor(containerRect.height);
 
@@ -171,19 +207,6 @@ function handleStreamListTransform() {
   }
 }
 
-const streamViewSize = computed(() => {
-  if (isPortraitContainer.value) {
-    return {
-      width: originStreamViewStyle.value.width,
-      height: originStreamViewStyle.value.height,
-    };
-  }
-  return {
-    width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
-    height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale,
-  };
-});
-
 const streamViewStyle = computed(() => {
   if (isPortraitContainer.value) {
     return {
@@ -224,11 +247,11 @@ const heightRatio: ComputedRef<number> = computed(() => {
 });
 
 function handleStreamRegionSize() {
-  if (!liveStreamViewContainerRef.value) {
+  if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerWidth = getContentSize(liveStreamViewContainerRef.value).width;
-  const containerHeight = getContentSize(liveStreamViewContainerRef.value).height;
+  const containerWidth = getContentSize(liveCoreViewContainerRef.value).width;
+  const containerHeight = getContentSize(liveCoreViewContainerRef.value).height;
   let width = containerWidth;
   let height = containerHeight;
   if (widthRatio.value && heightRatio.value) {
@@ -251,16 +274,14 @@ watch(
   () => aspectRatio.value,
   () => {
     handleStreamRegionSize();
-  }
+  },
 );
 
-const isPortraitContainer = ref(true);
-
 const getContainerOrientation = () => {
-  if (!liveStreamViewContainerRef.value) {
+  if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerRect = liveStreamViewContainerRef.value.getBoundingClientRect();
+  const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
   isPortraitContainer.value = containerRect.width < containerRect.height;
 };
 
@@ -271,17 +292,17 @@ const ro = new ResizeObserver(() => {
 });
 
 onMounted(() => {
-  ro.observe(liveStreamViewContainerRef.value as Element);
+  ro.observe(liveCoreViewContainerRef.value as Element);
   getContainerOrientation();
 });
 
 onBeforeUnmount(() => {
-  ro.unobserve(liveStreamViewContainerRef.value as Element);
+  ro.unobserve(liveCoreViewContainerRef.value as Element);
 });
 </script>
 
 <style scoped lang="scss">
-.live-stream-view-container {
+.live-core-view-container {
   width: 100%;
   height: 100%;
   display: flex;
@@ -289,12 +310,12 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
 
-  .live-stream-view {
+  .live-core-view {
     width: 100%;
     height: 100%;
     position: relative;
 
-    .live-stream-placeholder {
+    .live-core-placeholder {
       position: absolute;
       top: 0;
       left: 0;
@@ -320,7 +341,7 @@ onBeforeUnmount(() => {
       left: 0;
     }
 
-    .live-stream-ui {
+    .live-core-ui {
       width: 100%;
       height: 100%;
       position: absolute;