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

package/src/components/Search/SearchResults/SearchResultsItem/utils/highlightText.ts

@@ -1,16 +1,16 @@
 /**
- * 转义正则表达式中的特殊字符
- * @param string - 需要转义的字符串
- * @returns 转义后的字符串
+ * trims and escapes a string for use in a regular expression
+ * @param string - string to trim and escape
+ * @returns string with trimmed and escaped characters
  */
 function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
 /**
- * 转义HTML特殊字符，防止XSS攻击
- * @param text - 需要转义的文本
- * @returns 转义后的文本
+ * Escape HTML special characters to prevent XSS attacks
+ * @param text - string to escape
+ * @returns escaped string
  */
 function sanitizeInput(text: string): string {
   if (!text || typeof text !== 'string') {
@@ -23,25 +23,24 @@ function sanitizeInput(text: string): string {
 }
 
 /**
- * 文本高亮工具函数
- * 用于在搜索结果中高亮显示关键词
- * @param text - 原始文本
- * @param keyword - 要高亮的关键词
- * @param className - 高亮元素的CSS类名，默认为'highlight'
- * @returns 包含高亮标记的HTML字符串
+ * Highlights a keyword in a given text
+ * @param text - text to highlight
+ * @param keyword - keyword to highlight
+ * @param className - CSS class name for the highlight, default is 'highlight'
+ * @returns HTML string with highlighted text
  */
 export const highlightText = (
   text: string,
   keyword: string,
-  className: string = 'highlight'
+  className = 'highlight',
 ): string => {
   const safeText = sanitizeInput(text);
   const safeKeyword = sanitizeInput(keyword);
-  
+
   if (!text || typeof text !== 'string') {
     return safeText;
   }
-  
+
   if (!safeKeyword || typeof safeKeyword !== 'string') {
     return safeText;
   }
@@ -73,4 +72,4 @@ export const highlightText = (
   }
 };
 
-export default highlightText;
+export default highlightText;

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

@@ -1,5 +1,5 @@
 export const Search = {
-  // 基础操作
+  // actions
   'action.search': 'Search',
   'action.cancel': 'Cancel',
   'action.confirm': 'Confirm',
@@ -8,39 +8,39 @@ export const Search = {
   'action.readMore': 'Read More',
   'action.filter': 'Filter',
 
-  // 搜索类型
+  // types
   'type.all': 'All',
   'type.messages': 'Messages',
   'type.users': 'Users',
   'type.groups': 'Groups',
 
-  // 输入提示
+  // input
   'input.placeholder.keywords': 'Please enter keywords to search',
   'input.selectTime': 'Select Time',
 
-  // 加载状态
+  // status
   'status.loading': 'Loading...',
   'status.noContent': 'No Content',
 
-  // 加载更多
+  // loading
   'loadMore.default': 'Load More',
   'loadMore.messages': 'Load More Messages',
   'loadMore.users': 'Load More Users',
   'loadMore.groups': 'Load More Groups',
 
-  // 搜索结果
+  // results
   'results.title': 'Search Messages',
   'results.relatedTo': '{{count}} texts related to',
   'results.relatedToSuffix': 'related texts',
   'results.foundMessages': 'Found {{count}} messages',
 
-  // 消息类型
+  // message types
   'messageType.image': 'Image Message',
   'messageType.videoCover': 'Video Cover',
   'messageType.custom': 'Custom Message',
   'messageType.unsupported': 'Unsupported Message Type',
 
-  // 用户筛选
+  // filter
   'filter.title': 'Filter Users',
   'filter.gender': 'Gender',
   'filter.age': 'Age',
@@ -50,7 +50,7 @@ export const Search = {
   'filter.gender.secret': 'Secret',
   'filter.age.yearsOld': 'years old',
 
-  // 时间筛选
+  // time filter
   'timeFilter.allTime': 'All Time',
   'timeFilter.today': 'Today',
   'timeFilter.last3Days': 'Last 3 Days',

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

@@ -1,5 +1,5 @@
 export const Search = {
-  // 基础操作
+  // actions
   'action.search': '搜索',
   'action.cancel': '取消',
   'action.confirm': '确定',
@@ -8,39 +8,39 @@ export const Search = {
   'action.readMore': '查看更多',
   'action.filter': '筛选',
 
-  // 搜索类型
+  // types
   'type.all': '全部',
   'type.messages': '消息',
   'type.users': '用户',
   'type.groups': '群组',
 
-  // 输入提示
+  // input
   'input.placeholder.keywords': '请输入关键词搜索',
   'input.selectTime': '选择时间',
 
-  // 加载状态
+  // status
   'status.loading': '加载中...',
   'status.noContent': '暂无内容',
 
-  // 加载更多
+  // loading
   'loadMore.default': '加载更多',
   'loadMore.messages': '加载更多消息',
   'loadMore.users': '加载更多用户',
   'loadMore.groups': '加载更多群组',
 
-  // 搜索结果
+  // results
   'results.title': '搜索消息',
-  'results.relatedTo': '{{count}}条与',
+  'results.relatedTo': '{{count}} 条与',
   'results.relatedToSuffix': '的消息',
-  'results.foundMessages': '发现{{count}}条消息',
+  'results.foundMessages': '发现 {{count}} 条消息',
 
-  // 消息类型
+  // message types
   'messageType.image': '图片消息',
   'messageType.videoCover': '视频封面',
   'messageType.custom': '自定义消息',
   'messageType.unsupported': '不支持的消息类型',
 
-  // 用户筛选
+  // filter
   'filter.title': '筛选用户',
   'filter.gender': '性别',
   'filter.age': '年龄',
@@ -50,11 +50,11 @@ export const Search = {
   'filter.gender.secret': '保密',
   'filter.age.yearsOld': '岁',
 
-  // 时间筛选
+  // time filter
   'timeFilter.allTime': '全部时间',
   'timeFilter.today': '今天',
-  'timeFilter.last3Days': '最近3天',
-  'timeFilter.last7Days': '最近7天',
+  'timeFilter.last3Days': '最近 3 天',
+  'timeFilter.last7Days': '最近 7 天',
 };
 
 export default Search;

package/src/components/StreamMixer/LocalMixer/MixerControl.vue

@@ -1,15 +1,22 @@
 <template>
-  <div class="mixer-control" @mousedown="handleMouseDown">
+  <div
+    class="mixer-control"
+    @mousedown="handleMouseDown"
+  >
     <div
-      class="mixer-control-item"
       v-for="control in controlList"
-      :class="{ 'disable': control.disable }"
       :key="control.name"
+      class="mixer-control-item"
+      :class="{ 'disable': control.disable }"
       :style="control.style"
       @click.stop="control.onClick"
     >
       <div class="mixer-control-item-icon">
-        <component :is="control.icon" style="width: 100%; height: 100%" :style="control.style" />
+        <component
+          :is="control.icon"
+          style="width: 100%; height: 100%"
+          :style="control.style"
+        />
       </div>
       <span class="mixer-control-item-name">{{ control.text }}</span>
     </div>
@@ -17,16 +24,16 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { TRTCVideoMirrorType, TRTCVideoRotation } from '@tencentcloud/tuiroom-engine-js';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useVideoMixerState } from '../../../states/VideoMixerState';
 import CameraMirror from '../icons/CameraMirror.vue';
 import Delete from '../icons/Delete.vue';
+import Down from '../icons/Down.vue';
 import Rotation from '../icons/Rotation.vue';
 import Up from '../icons/Up.vue';
-import Down from '../icons/Down.vue';
-import { useVideoMixerState } from '../../../states/VideoMixerState';
-import { TRTCVideoMirrorType, TRTCVideoRotation } from '@tencentcloud/tuiroom-engine-js';
-import { computed, reactive } from 'vue';
-import { MediaSource } from '../../../types';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import type { MediaSource } from '../../../types';
 
 const { activeMediaSource, mediaSourceList, updateMediaSource, removeMediaSource } = useVideoMixerState();
 const { t } = useUIKit();
@@ -35,12 +42,10 @@ function handleMouseDown(event: Event) {
   event.stopPropagation();
 }
 
-const orderMediaSourceList = computed(() => {
-  return [...mediaSourceList.value].sort((a: MediaSource, b: MediaSource) => a.layout.zOrder - b.layout.zOrder);
-});
+const orderMediaSourceList = computed(() => [...mediaSourceList.value].sort((a: MediaSource, b: MediaSource) => a.layout.zOrder - b.layout.zOrder));
 
-const isActiveMediaSourceTop = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[0].id);
-const isActiveMediaSourceBottom = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[orderMediaSourceList.value.length - 1].id);
+const isActiveMediaSourceTop = computed(() => activeMediaSource.value?.id === orderMediaSourceList.value[0]?.id);
+const isActiveMediaSourceBottom = computed(() => activeMediaSource.value?.id === orderMediaSourceList.value[orderMediaSourceList.value.length - 1]?.id);
 
 const controlList = computed(() => [
   {

package/src/components/StreamMixer/LocalMixer/index.vue

@@ -1,37 +1,51 @@
 <template>
-  <div class="local-mixer-container" ref="localMixerRef">
-    <div class="local-mixer-content" id="local-video-mixer"></div>
-    <div class="mixer-control-container" v-if="activeMediaSource" :style="mixControlContainerStyle">
-      <MixerControl class="mixer-control" :style="mixControlStyle" />
-    </div>
-    <div class="local-mixer-placeholder" v-if="mediaSourceList.length === 0">
+  <div
+    ref="localMixerRef"
+    class="local-mixer-container"
+  >
+    <div
+      id="local-video-mixer"
+      class="local-mixer-content"
+    />
+    <MixerControl
+      v-if="activeMediaSource"
+      ref="mixControlRef"
+      class="mixer-control"
+      :style="mixControlStyle"
+    />
+    <div
+      v-if="mediaSourceList.length === 0"
+      class="local-mixer-placeholder"
+    >
       <span class="placeholder-text">{{ t('No video') }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, onUnmounted, Ref, computed } from 'vue';
-import { useRoomEngine } from '../../../hooks/useRoomEngine';
-import { useVideoMixerState } from '../../../states/VideoMixerState';
+import type { Ref } from 'vue';
+import { ref, onMounted, watch, onUnmounted, computed, nextTick } from 'vue';
 import TUIRoomEngine, {
   TRTCVideoResolutionMode,
   TRTCVideoRotation,
   TUIVideoQuality,
 } from '@tencentcloud/tuiroom-engine-js';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useRoomEngine } from '../../../hooks/useRoomEngine';
 import { useLiveState } from '../../../states/LiveState';
+import { useVideoMixerState } from '../../../states/VideoMixerState';
 import { LiveStatus, LiveOrientation } from '../../../types';
+import { debounce } from '../../../utils/utils';
 import MixerControl from './MixerControl.vue';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 
 const { t } = useUIKit();
 
 const { currentLive } = useLiveState();
 
+const mixControlRef = ref<InstanceType<typeof MixerControl> | null>(null);
 const { publishVideoQuality, activeMediaSource, enableLocalVideoMixer, mediaSourceList } = useVideoMixerState();
 enableLocalVideoMixer();
 
-
 const currentLiveOrientation = computed(() => {
   if (currentLive.value
     && currentLive.value?.layoutTemplate >= 200 && currentLive.value?.layoutTemplate <= 599) {
@@ -47,7 +61,7 @@ const localMixerRef = ref();
 
 function getCanvasSize(
   videoResolution: TUIVideoQuality,
-  resMode: TRTCVideoResolutionMode
+  resMode: TRTCVideoResolutionMode,
 ): { width: number; height: number } {
   const sizeMap = {
     [TUIVideoQuality.kVideoQuality_360p]: { width: 640, height: 360 },
@@ -62,28 +76,30 @@ function getCanvasSize(
   return { width, height };
 }
 
-const mixControlContainerStyle = ref({
-  top: '0px',
-  left: '0px',
-  width: '0px',
-  height: '0px',
+const mixControlStyle: Ref<{
+  transform: string;
+  position: string;
+}> = ref({
+  position: 'absolute',
+  transform: 'translate(0px, 0px)',
 });
 
-const mixControlStyle: Ref<{ top?: string; bottom?: string; transform: string }> = ref({
-  top: '-6px',
-  transform: 'translate(-50%, -100%)',
-});
+let mixControlWidth: number;
+let mixControlHeight: number;
+// margin between control and media source
+const CONTROL_MARGIN_WITH_MEDIA_SOURCE = 6;
 
 function getMixControlStyle() {
   if (!localMixerRef.value || !activeMediaSource.value) {
     return;
   }
+
   const { width: canvasWidth, height: canvasHeight } = getCanvasSize(
     publishVideoQuality.value,
-    currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait
+    currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait,
   );
-  const { width: realWidth, height: realHeight } = localMixerRef.value.getBoundingClientRect();
-  const scale = Math.max(realWidth / canvasWidth, realHeight / canvasHeight);
+  const { width: viewportWidth, height: viewportHeight } = localMixerRef.value.getBoundingClientRect();
+  const scale = Math.max(viewportWidth / canvasWidth, viewportHeight / canvasHeight);
 
   const previewWidth = canvasWidth * scale;
   const previewHeight = canvasHeight * scale;
@@ -92,47 +108,105 @@ function getMixControlStyle() {
   const mediaSourceWidth = right - left;
   const mediaSourceHeight = bottom - top;
   const rotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
+
+  const mediaSourceTop = top * scale - (previewHeight - viewportHeight) / 2;
+  const mediaSourceLeft = left * scale - (previewWidth - viewportWidth) / 2;
+  let mediaSourceDisplayWidth;
+  let mediaSourceDisplayHeight;
+
   if (rotation === TRTCVideoRotation.TRTCVideoRotation0 || rotation === TRTCVideoRotation.TRTCVideoRotation180) {
-    mixControlContainerStyle.value = {
-      top: `${top * scale - (previewHeight - realHeight) / 2}px`,
-      left: `${left * scale - (previewWidth - realWidth) / 2}px`,
-      width: `${mediaSourceWidth * scale}px`,
-      height: `${mediaSourceHeight * scale}px`,
-    };
+    mediaSourceDisplayWidth = mediaSourceWidth * scale;
+    mediaSourceDisplayHeight = mediaSourceHeight * scale;
   } else {
-    mixControlContainerStyle.value = {
-      top: `${top * scale - (previewHeight - realHeight) / 2}px`,
-      left: `${left * scale - (previewWidth - realWidth) / 2}px`,
-      width: `${mediaSourceHeight * scale}px`,
-      height: `${mediaSourceWidth * scale}px`,
-    };
+    mediaSourceDisplayWidth = mediaSourceHeight * scale;
+    mediaSourceDisplayHeight = mediaSourceWidth * scale;
+  }
+
+  const controlPosition = calculateOptimalControlPosition(
+    mediaSourceLeft,
+    mediaSourceTop,
+    mediaSourceDisplayWidth,
+    mediaSourceDisplayHeight,
+    viewportWidth,
+    viewportHeight,
+  );
+
+  mixControlStyle.value = {
+    ...controlPosition,
+    position: 'absolute',
+  };
+}
+
+function calculateOptimalControlPosition(
+  mediaSourceLeft: number,
+  mediaSourceTop: number,
+  mediaSourceWidth: number,
+  mediaSourceHeight: number,
+  viewportWidth: number,
+  viewportHeight: number,
+) {
+  // media source boundary
+  const mediaSourceBottom = mediaSourceTop + mediaSourceHeight;
+  const mediaSourceCenterX = mediaSourceLeft + mediaSourceWidth / 2;
+
+  // ideal position
+  let controlLeft = mediaSourceCenterX - mixControlWidth / 2;
+  let controlTop = mediaSourceTop - CONTROL_MARGIN_WITH_MEDIA_SOURCE - mixControlHeight;
+
+  // horizontal boundary detection and adjustment
+  if (controlLeft < 0) {
+    controlLeft = 0;
+  } else if (controlLeft + mixControlWidth > viewportWidth) {
+    controlLeft = viewportWidth - mixControlWidth;
   }
-  if (top < 60) {
-    mixControlStyle.value = {
-      bottom: '-6px',
-      transform: 'translate(-50%, 100%)',
-    };
+
+  // vertical boundary detection and adjustment
+  // check if there is enough space to display the control above
+  const topSpaceAvailable = mediaSourceTop;
+  const bottomSpaceAvailable = viewportHeight - mediaSourceBottom;
+
+  if (controlTop >= 0 && topSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
+    // top space is enough, keep it above
+    controlTop = Math.min(controlTop, viewportHeight - mixControlHeight);
+  } else if (bottomSpaceAvailable >= mixControlHeight + CONTROL_MARGIN_WITH_MEDIA_SOURCE) {
+    // top space is not enough, but bottom space is enough, move to bottom
+    controlTop = Math.max(0, mediaSourceBottom + CONTROL_MARGIN_WITH_MEDIA_SOURCE);
   } else {
-    mixControlStyle.value = {
-      top: '-6px',
-      transform: 'translate(-50%, -100%)',
-    };
+    // top space is not enough, but bottom space is not enough, move to top
+    controlTop = Math.max(0, mediaSourceTop - mixControlHeight - CONTROL_MARGIN_WITH_MEDIA_SOURCE);
   }
+
+  return {
+    transform: `translate(${controlLeft}px, ${controlTop}px)`,
+  };
 }
 
+const debouncedGetMixControlStyle = debounce(getMixControlStyle, 16);
+
+watch(() => activeMediaSource.value, async (newVal, oldVal) => {
+  if (!oldVal && newVal) {
+    await nextTick();
+    const mixControlElement = mixControlRef.value?.$el as HTMLElement;
+    const { width, height } = mixControlElement?.getBoundingClientRect() || { width: 0, height: 0 };
+    mixControlWidth = width;
+    mixControlHeight = height;
+  }
+  getMixControlStyle();
+}, { immediate: true, deep: true });
+
 watch(
-  () => [publishVideoQuality.value, currentLiveOrientation.value, activeMediaSource.value?.layout],
-  ([newVideoQuality, newOrientation, newLayout]) => {
-    if (!newVideoQuality || !newOrientation || !newLayout) {
+  () => [publishVideoQuality.value, currentLiveOrientation.value],
+  ([newVideoQuality, newOrientation]) => {
+    if (!newVideoQuality || !newOrientation) {
       return;
     }
     getMixControlStyle();
   },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 
 const re = new ResizeObserver(() => {
-  getMixControlStyle();
+  debouncedGetMixControlStyle();
 });
 
 onMounted(() => {
@@ -143,7 +217,7 @@ onMounted(() => {
     getMixControlStyle();
   });
 
-  watch(localLiveStatus, async newVal => {
+  watch(localLiveStatus, async (newVal) => {
     if (newVal === LiveStatus.Live) {
       const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
       await mediaSourceManager?.startPublish();
@@ -169,14 +243,13 @@ onUnmounted(() => {
     width: 100%;
     height: 100%;
   }
-  .mixer-control-container {
+  .mixer-control {
     position: absolute;
-    pointer-events: none;
-    .mixer-control {
-      position: absolute;
-      left: 50%;
-    }
+    top: 0;
+    left: 0;
+    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
+
   .local-mixer-placeholder {
     position: absolute;
     top: 0;

package/src/components/StreamMixer/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <live-stream-view :ignore-local-video="true">
+  <live-core-view :ignore-local-video="true">
     <template #localVideo="{ style }">
       <local-mixer :style="style" />
     </template>
-  </live-stream-view>
+  </live-core-view>
 </template>
 
 <script setup lang="ts">
+import { LiveCoreView } from '../LiveCoreView';
 import LocalMixer from './LocalMixer/index.vue';
-import { LiveStreamView } from '../LiveStreamView';
 </script>
 
 <style scoped lang="scss"></style>

package/src/components/UserPicker/i18n/index.ts

@@ -1,5 +1,3 @@
-import { i18next } from '@tencentcloud/uikit-base-component-vue3';
-
 import enUS from './en-US';
 import zhCN from './zh-CN';
 
@@ -8,6 +6,4 @@ const resources = {
   'zh-CN': zhCN,
 };
 
-Object.entries(resources).forEach(([lng, resource]) => {
-  i18next.addResourceBundle(lng, 'translation', { UserPicker: resource }, true, false);
-});
+export { resources };

package/src/components/UserPicker/index.ts

@@ -7,8 +7,11 @@ import type {
   IUserPickerDataSource,
   IUserPickerResult,
 } from './type';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
 
-import './i18n';
+addI18n('en-US', { translation: { UserPicker: resources['en-US'] } });
+addI18n('zh-CN', { translation: { UserPicker: resources['zh-CN'] } });
 
 export type {
   IUserPickerProps,
@@ -19,5 +22,3 @@ export type {
   IUserPickerResult,
 };
 export { UserPicker };
-
-export default UserPicker;

package/src/components/VideoSettingPanel/VideoPreview.vue

@@ -1,25 +1,31 @@
 <template>
   <div class="video-preview-container">
-    <div id="video-preview" class="video-preview"></div>
+    <div
+      id="video-preview"
+      class="video-preview"
+    />
     <div class="attention-info">
       <span
         v-if="!isCameraTesting && !isCameraTestLoading"
         class="off-camera-info"
-        >{{ t('Off Camera') }}
+      >{{ t('Off Camera') }}
       </span>
-      <IconLoading size="36" v-if="isCameraTestLoading" class="loading" />
+      <IconLoading
+        v-if="isCameraTestLoading"
+        size="36"
+        class="loading"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue';
-import { IconLoading } from '@tencentcloud/uikit-base-component-vue3';
-import { useI18n } from '../../locales';
 import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { IconLoading, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
 
-const { t } = useI18n();
+const { t } = useUIKit();
 const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
 
 onMounted(async () => {
@@ -83,4 +89,3 @@ onUnmounted(async () => {
   }
 }
 </style>
-../../states/DeviceState

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -16,13 +16,13 @@
 </template>
 
 <script setup lang="ts">
-import { watch, computed, ComputedRef } from 'vue';
-import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
-import { useI18n } from '../../locales';
+import { watch, computed } from 'vue';
+import type { ComputedRef } from 'vue';
 import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
-import useDeviceState from '../../states/DeviceState';
+import { TUISelect, TUIOption, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
 
-const { t } = useI18n();
+const { t } = useUIKit();
 
 const videoQualityList: ComputedRef<
   { label: string; value: TUIVideoQuality }[]

package/src/components/VideoSettingPanel/i18n/en-US/index.ts

@@ -1,7 +1,12 @@
 export const resource = {
-  Camera: 'Camera',
+  'Camera': 'Camera',
   'Select device': 'Select device',
-  Preview: 'Preview',
+  'Preview': 'Preview',
   'Video profile': 'Video profile',
-  Resolution: 'Resolution',
+  'Resolution': 'Resolution',
+  'Low Definition': 'Low Definition',
+  'Standard Definition': 'Standard Definition',
+  'High Definition': 'High Definition',
+  'Super Definition': 'Super Definition',
+  'Off Camera': 'Off Camera',
 };