tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/src/components/VideoSetting/VideoSettingTab.vue

@@ -14,36 +14,36 @@
     </div>
     <div v-if="videoSettingProps?.supportSwitchMirror" class="mirror-container">
       <span>{{ t('Mirror') }}</span>
-      <tui-switch v-model="isLocalMirror" />
+      <TUISwitch v-model="isLocalMirror" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { watch, inject, ref } from 'vue';
-import CameraSelect from './CameraSelect.vue';
-import VideoProfile from './VideoProfile.vue';
-import VideoPreview from './VideoPreview.vue';
-import TuiSwitch from '../../baseComp/TuiSwitch.vue';
+import { TUISwitch } from '@tencentcloud/uikit-base-component-vue3';
 import { useI18n } from '../../locales';
 import { useDeviceState } from '../../states/DeviceState';
-import { VideoSettingProps } from '../../types';
 import { MirrorType } from '../../types';
+import CameraSelect from './CameraSelect.vue';
+import VideoPreview from './VideoPreview.vue';
+import VideoProfile from './VideoProfile.vue';
+import type { VideoSettingProps } from '../../types';
 
 const { t } = useI18n();
 const { switchMirror } = useDeviceState();
 
 const isLocalMirror = ref(true);
 
-const videoSettingProps: VideoSettingProps | undefined =
-  inject('videoSettingProps');
+const videoSettingProps: VideoSettingProps | undefined
+  = inject('videoSettingProps');
 
 watch(
   isLocalMirror,
   async (val: boolean) => {
     switchMirror({ mirror: val ? MirrorType.Auto : MirrorType.Disable });
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 

package/src/components/VideoSettingPanel/CameraSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <TUISelect
     v-model="currentDeviceId"
-    placeholder="placeholder"
+    :placeholder="t('VideoSettingPanel.SelectCamera')"
     class="select"
     :disabled="disabled"
     :teleported="false"
@@ -18,12 +18,15 @@
 </template>
 
 <script setup lang="ts">
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { ref, watch, defineProps, withDefaults, onBeforeMount } from 'vue';
 import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
-import { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
+import TUIRoomEngine, { TUIDeviceInfo } from '@tencentcloud/tuiroom-engine-js';
 import { useDeviceState } from '../../states/DeviceState';
 const { cameraList, currentCamera, setCurrentCamera, getCameraList } = useDeviceState();
 
+const { t } = useUIKit();
+
 interface Props {
   onChange?: (id: string) => void;
   disabled?: boolean;
@@ -62,7 +65,9 @@ async function handleChange(deviceId: string) {
 }
 
 onBeforeMount(async () => {
-  await getCameraList();
+  TUIRoomEngine.once('ready', async () => {
+    await getCameraList();
+  });
 })
 </script>
 

package/src/components/VideoSettingPanel/VideoPreview.vue

@@ -8,7 +8,7 @@
       <span
         v-if="!isCameraTesting && !isCameraTestLoading"
         class="off-camera-info"
-      >{{ t('Off Camera') }}
+      >{{ t('VideoSettingPanel.OffCamera') }}
       </span>
       <IconLoading
         v-if="isCameraTestLoading"
@@ -26,16 +26,16 @@ import { IconLoading, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useDeviceState } from '../../states/DeviceState';
 
 const { t } = useUIKit();
-const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
+const { isCameraTesting, isCameraTestLoading, startCameraTest, stopCameraTest } = useDeviceState();
 
 onMounted(async () => {
   TUIRoomEngine.once('ready', () => {
-    startCameraDeviceTest({ view: 'video-preview' });
+    startCameraTest({ view: 'video-preview' });
   });
 });
 
 onUnmounted(async () => {
-  await stopCameraDeviceTest();
+  await stopCameraTest();
 });
 </script>
 

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -1,7 +1,7 @@
 <template>
   <TUISelect
     v-model="localVideoQuality"
-    placeholder="placeholder"
+    :placeholder="t('VideoSettingPanel.Resolution')"
     class="select"
     :teleported="false"
     :popper-append-to-body="false"
@@ -27,14 +27,14 @@ const { t } = useUIKit();
 const videoQualityList: ComputedRef<
   { label: string; value: VideoQuality }[]
 > = computed(() => [
-  { label: t('Low Definition'), value: VideoQuality.Quality360P },
+  { label: t('VideoSettingPanel.LowDefinition'), value: VideoQuality.Quality360P },
   {
-    label: t('Standard Definition'),
+    label: t('VideoSettingPanel.StandardDefinition'),
     value: VideoQuality.Quality540P,
   },
-  { label: t('High Definition'), value: VideoQuality.Quality720P },
+  { label: t('VideoSettingPanel.HighDefinition'), value: VideoQuality.Quality720P },
   {
-    label: t('Super Definition'),
+    label: t('VideoSettingPanel.SuperDefinition'),
     value: VideoQuality.Quality1080P,
   },
 ]);
@@ -43,7 +43,7 @@ const { localVideoQuality, updateVideoQuality } = useDeviceState();
 
 watch(localVideoQuality, (val: VideoQuality) => {
   updateVideoQuality({ quality: val });
-});
+}, { immediate: true });
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,12 +1,15 @@
 export const resource = {
-  'Camera': 'Camera',
-  'Select device': 'Select device',
-  'Preview': 'Preview',
-  'Video profile': 'Video profile',
-  'Resolution': 'Resolution',
-  'Low Definition': 'Low Definition',
-  'Standard Definition': 'Standard Definition',
-  'High Definition': 'High Definition',
-  'Super Definition': 'Super Definition',
-  'Off Camera': 'Off Camera',
+  VideoSettingPanel: {
+    Camera: 'Camera',
+    SelectCamera: 'Select camera',
+    Preview: 'Preview',
+    VideoProfile: 'Video profile',
+    Resolution: 'Resolution',
+    LowDefinition: 'Low Definition',
+    StandardDefinition: 'Standard Definition',
+    HighDefinition: 'High Definition',
+    SuperDefinition: 'Super Definition',
+    OffCamera: 'Off Camera',
+    Mirror: 'Mirror',
+  },
 };

package/src/components/VideoSettingPanel/i18n/zh-CN/index.ts

@@ -1,12 +1,15 @@
 export const resource = {
-  'Camera': '摄像头',
-  'Select device': '选择设备',
-  'Preview': '预览',
-  'Video profile': '视频设置',
-  'Resolution': '分辨率',
-  'Low Definition': '流畅',
-  'Standard Definition': '标清',
-  'High Definition': '高清',
-  'Super Definition': '超清',
-  'Off Camera': '摄像头已关闭',
+  VideoSettingPanel: {
+    Camera: '摄像头',
+    SelectCamera: '选择摄像头',
+    Preview: '预览',
+    VideoProfile: '视频设置',
+    Resolution: '分辨率',
+    LowDefinition: '流畅',
+    StandardDefinition: '标清',
+    HighDefinition: '高清',
+    SuperDefinition: '超清',
+    OffCamera: '摄像头已关闭',
+    Mirror: '镜像',
+  },
 };

package/src/components/VideoSettingPanel/index.ts

@@ -1,10 +1,10 @@
-import VideoSettingPanelPC from './index.vue';
 import { addI18n } from '../../i18n';
 import { enResource, zhResource } from './i18n';
+import VideoSettingPanelComp from './index.vue';
 
 addI18n('en-US', { translation: enResource });
 addI18n('zh-CN', { translation: zhResource });
 
-const VideoSettingPanel = VideoSettingPanelPC;
+const VideoSettingPanel = VideoSettingPanelComp;
 
 export { VideoSettingPanel };

package/src/components/VideoSettingPanel/index.vue

@@ -1,54 +1,45 @@
 <template>
   <div class="video-setting-panel">
-    <template v-if="cameraSelectVisible">
-      <div class="section">
-        <div class="section-title">
-          {{ t('Camera') }}
-        </div>
-        <div class="row">
-          <span class="label">{{ t('Select device') }}</span>
-          <camera-select />
-        </div>
-      </div>
-
-      <div class="divider" />
-    </template>
-
-    <template v-if="videoPreviewVisible">
-      <div class="section">
-        <div class="section-title">
-          {{ t('Preview') }}
-        </div>
-        <div class="preview-container">
-          <video-preview class="video-preview" />
-        </div>
-      </div>
-
-      <div class="divider" />
-    </template>
-
-    <template v-if="videoProfileVisible">
-      <div class="section">
-        <div class="section-title">
-          {{ t('Video profile') }}
-        </div>
-        <div class="row">
-          <span class="label">{{ t('Resolution') }}</span>
-          <video-profile />
-        </div>
-      </div>
-    </template>
+    <div v-if="cameraSelectVisible" class="item-setting">
+      <span class="title">{{ t('VideoSettingPanel.Camera') }}</span>
+      <camera-select />
+    </div>
+    <div v-if="videoPreviewVisible" class="item-setting">
+      <span class="title">{{ t('VideoSettingPanel.Preview') }}</span>
+      <video-preview class="video-preview" />
+    </div>
+    <div v-if="videoProfileVisible" class="item-setting">
+      <span class="title">{{ t('VideoSettingPanel.Resolution') }}</span>
+      <video-profile />
+    </div>
+    <div v-if="switchMirrorVisible" class="mirror-container">
+      <span>{{ t('VideoSettingPanel.Mirror') }}</span>
+      <TUISwitch v-model="localMirror" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, defineProps, watch } from 'vue';
+import { useUIKit, TUISwitch } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
+import { MirrorType } from '../../types';
 import CameraSelect from './CameraSelect.vue';
 import VideoPreview from './VideoPreview.vue';
 import VideoProfile from './VideoProfile.vue';
 
 const { t } = useUIKit();
+const { localMirrorType, switchMirror } = useDeviceState();
+
+const localMirror = ref(localMirrorType.value !== MirrorType.Disable);
+
+watch(localMirrorType, (val) => {
+  localMirror.value = val !== MirrorType.Disable;
+});
+
+watch(localMirror, (val) => {
+  switchMirror({ mirror: val ? MirrorType.Auto : MirrorType.Disable });
+});
 
 defineProps({
   cameraSelectVisible: {
@@ -63,51 +54,59 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  switchMirrorVisible: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .video-setting-panel {
-  color: var(--tui-color-text-primary);
-
-  .section {
-    margin-bottom: 32px;
+  font-size: 14px;
+  border-radius: 8px;
 
-    .section-title {
-      font-size: 18px;
-      font-weight: bold;
-      margin-bottom: 16px;
+  .item-setting {
+    &:not(:last-child) {
+      margin-bottom: 20px;
     }
+  }
 
-    .row {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-
-      .label {
-        width: 96px;
-      }
-    }
+  .title {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--text-color-secondary);
+  }
 
-    .preview-container {
-      margin-top: 8px;
+  .video-preview {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: calc(100% * 9 / 16);
+    overflow: hidden;
+  }
 
-      .video-preview {
-        position: relative;
-        width: 100%;
-        height: 0;
-        padding-top: calc(100% * 9 / 16);
-        overflow: hidden;
-        border-radius: 8px;
-        background: #222;
-      }
-    }
+  .mirror-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-right: 2px;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--text-color-secondary);
   }
 
-  .divider {
-    height: 1px;
-    background: var(--uikit-color-gray-4);
-    margin: 32px 0;
+  .item {
+    width: 100%;
+    height: 20px;
+    color: var(--text-color-secondary);
+    cursor: pointer;
   }
 }
 </style>