tuikit-atomicx-vue3 4.4.0 → 4.5.0

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>

package/src/components/VirtualBackgroundPanel/VirtualBackgroundPanel.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="virtual-background">
+    <div id="stream-preview" class="stream-preview">
+      <div v-if="isLoading" class="mask" />
+      <div v-if="isLoading" class="spinner" />
+    </div>
+    <div class="setting">
+      <div
+        :class="[
+          'setting-item',
+          selectedBackground === 'close' ? 'active' : '',
+          !isInitialized ? 'disabled' : '',
+        ]"
+        @click="applyVirtualBackground('close')"
+      >
+        <i class="setting-item-icon">
+          <img
+            :src="CloseVirtualBackground"
+            alt="close"
+            style="width: 32px"
+          >
+        </i>
+        <span class="setting-item-text">{{ t('VirtualBackground.Close') }}</span>
+      </div>
+      <div
+        :class="[
+          'setting-item',
+          selectedBackground === 'blur' ? 'active' : '',
+          !isInitialized ? 'disabled' : '',
+        ]"
+        @click="applyVirtualBackground('blur')"
+      >
+        <i class="setting-item-icon">
+          <img :src="BlurredBackground" alt="blurred">
+        </i>
+        <span class="setting-item-text">{{ t('VirtualBackground.Blurred') }}</span>
+      </div>
+    </div>
+    <div class="footer">
+      <TUIButton
+        :disabled="!isInitialized"
+        type="primary"
+        @click="confirmVirtualBackground"
+      >
+        {{ t('VirtualBackground.Save') }}
+      </TUIButton>
+      <TUIButton @click="cancelVirtualBackground">
+        {{
+          t('VirtualBackground.Cancel')
+        }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import { TOAST_TYPE, TUIButton, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
+import { useVirtualBackgroundState } from '../../states/VirtualBackgroundState';
+import { VirtualBackgroundEvent, VirtualBackgroundType } from '../../types/virtualBackground';
+// Asset imports
+import BlurredBackground from './assets/blurred-background.png';
+import CloseVirtualBackground from './assets/close-virtual-background.png';
+
+// Hooks and composables
+const { t } = useUIKit();
+const emit = defineEmits(['close']);
+const props = withDefaults(defineProps<{
+  assetsPath: string;
+}>(), {
+  assetsPath: 'https://web.sdk.qcloud.com/hybrid/trtc-sdk-v5/assets',
+});
+
+const {
+  startCameraTest,
+  stopCameraTest,
+} = useDeviceState();
+
+const {
+  virtualBackgroundConfig,
+  initVirtualBackground,
+  setVirtualBackground,
+  saveVirtualBackground,
+  subscribeEvent,
+  unsubscribeEvent,
+} = useVirtualBackgroundState();
+
+// Types
+type BackgroundType = 'close' | 'blur';
+
+// State references
+const selectedBackground = ref<BackgroundType>(
+  virtualBackgroundConfig.value?.enable ? 'blur' : 'close',
+);
+const isLoading = ref(false);
+const isInitialized = ref(false);
+
+// Helper functions
+/**
+ * Get virtual background configuration based on type
+ */
+function getVirtualBackgroundConfig(type: BackgroundType) {
+  switch (type) {
+    case 'close':
+      return { enable: false };
+    case 'blur':
+      return { enable: true, type: VirtualBackgroundType.blur };
+    default:
+      return { enable: false };
+  }
+}
+
+/**
+ * Close the virtual background panel
+ */
+async function closePanel() {
+  emit('close');
+}
+
+/**
+ * Show error toast message
+ */
+function showErrorToast(message: string) {
+  TUIToast({
+    type: TOAST_TYPE.ERROR,
+    message: t(message),
+  });
+}
+
+/**
+ * Initialize and restore virtual background settings
+ */
+async function initializeVirtualBackground() {
+  isLoading.value = true;
+  isInitialized.value = false;
+  try {
+    await initVirtualBackground({ assetsPath: props.assetsPath });
+    await startCameraTest({ view: 'stream-preview' });
+
+    const { enable, type } = virtualBackgroundConfig.value || {};
+    await setVirtualBackground({ enable, type });
+    isInitialized.value = true;
+  } catch (error) {
+    console.error('Failed to initialize virtual background:', error);
+    showErrorToast('VirtualBackground.InitializeFailed');
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+// Event handlers
+/**
+ * Apply virtual background based on selected type
+ */
+async function applyVirtualBackground(type: BackgroundType) {
+  if (!isInitialized.value) {
+    return;
+  }
+
+  isLoading.value = true;
+  try {
+    selectedBackground.value = type;
+    const config = getVirtualBackgroundConfig(type);
+    await setVirtualBackground(config);
+  } catch (error) {
+    console.error('Failed to apply virtual background:', error);
+    showErrorToast('VirtualBackground.ApplyFailed');
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+/**
+ * Save current virtual background settings and close panel
+ */
+async function confirmVirtualBackground() {
+  if (!isInitialized.value) {
+    return;
+  }
+
+  try {
+    await saveVirtualBackground();
+    closePanel();
+  } catch (error) {
+    console.error('Failed to save virtual background:', error);
+    showErrorToast('VirtualBackground.SaveFailed');
+  }
+}
+
+/**
+ * Cancel virtual background changes and close panel
+ */
+async function cancelVirtualBackground() {
+  closePanel();
+}
+
+/**
+ * Handle virtual background error event
+ */
+function handleVirtualBackgroundAbort() {
+  showErrorToast('VirtualBackground.Aborted');
+}
+
+// Lifecycle hooks
+onMounted(async () => {
+  await initializeVirtualBackground();
+  subscribeEvent(
+    VirtualBackgroundEvent.onAbort,
+    handleVirtualBackgroundAbort,
+  );
+});
+
+onUnmounted(() => {
+  stopCameraTest();
+
+  unsubscribeEvent(
+    VirtualBackgroundEvent.onAbort,
+    handleVirtualBackgroundAbort,
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.virtual-background {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.stream-preview {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 310px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  background-color: var(--uikit-color-black-1);
+}
+
+.setting {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  gap: 16px;
+  padding: 1rem;
+  align-items: center;
+  margin-top: 10px;
+  border-radius: 8px;
+  border: 1px solid var(--stroke-color-primary);
+
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 12px;
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    color: var(--text-color-secondary);
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 54px;
+      height: 54px;
+      overflow: hidden;
+      border-radius: 8px;
+      background-color: var(--bg-color-dialog);
+      border: 1px solid var(--stroke-color-primary);
+    }
+
+    &-text {
+      padding: 3px 0;
+    }
+  }
+
+  &-item.active {
+    color: var(--text-color-button);
+    background-color: var(--button-color-primary-default);
+    border: 1px solid var(--button-color-primary-default);
+  }
+
+  &-item.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--uikit-color-white-2);
+  border-top: 4px solid var(--text-color-link);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  animation: spin 1s linear infinite;
+}
+
+.mask {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  background-color: var(--uikit-color-black-1);
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+.footer {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  margin-top: 10px;
+  border-radius: 8px;
+}
+</style>

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

@@ -0,0 +1,11 @@
+export const resource = {
+  // VirtualBackground
+  'VirtualBackground.InitializeFailed': 'Failed to initialize virtual background',
+  'VirtualBackground.ApplyFailed': 'Failed to apply virtual background',
+  'VirtualBackground.SaveFailed': 'Failed to save virtual background settings',
+  'VirtualBackground.Aborted': 'Virtual background application aborted',
+  'VirtualBackground.Close': 'Close',
+  'VirtualBackground.Blurred': 'Blurred',
+  'VirtualBackground.Save': 'Save',
+  'VirtualBackground.Cancel': 'Cancel',
+};

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

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

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

@@ -0,0 +1,11 @@
+export const resource = {
+  // VirtualBackground
+  'VirtualBackground.InitializeFailed': '虚拟背景初始化失败',
+  'VirtualBackground.ApplyFailed': '应用虚拟背景失败',
+  'VirtualBackground.SaveFailed': '保存虚拟背景设置失败',
+  'VirtualBackground.Aborted': '虚拟背景应用已中止',
+  'VirtualBackground.Close': '关闭',
+  'VirtualBackground.Blurred': '模糊',
+  'VirtualBackground.Save': '保存',
+  'VirtualBackground.Cancel': '取消',
+};

package/src/components/VirtualBackgroundPanel/index.ts

@@ -0,0 +1,11 @@
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n';
+import VirtualBackgroundPanelComponent from './VirtualBackgroundPanel.vue';
+
+const VirtualBackgroundPanel = VirtualBackgroundPanelComponent;
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+export {
+  VirtualBackgroundPanel,
+};

package/src/hooks/useRoomActions/index.ts

@@ -1,7 +1,8 @@
 import useRoomAudioAction from './useRoomAudioAction';
-import useRoomVideoAction from './useRoomVideoAction';
 import useRoomScreenAction from './useRoomScreenAction';
-import { ActionType, RoomAction } from '../../types';
+import useRoomVideoAction from './useRoomVideoAction';
+import type { ActionType } from '../../types';
+
 export default function useRoomActions(options?: {
   actionList: RoomAction[];
 }): ActionType<RoomAction>[] {

package/src/hooks/useRoomActions/useRoomAudioAction.ts

@@ -1,12 +1,11 @@
+import { reactive, computed, defineComponent } from 'vue';
 import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-js';
-import { RoomAction } from '../../types';
-import { useI18n } from '../../locales';
-import TUIMessageBox from '../../baseComp/MessageBox';
 import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
+import TUIMessageBox from '../../baseComp/MessageBox';
+import { useI18n } from '../../locales';
+import { useRoomState } from '../../states/RoomState';
 import { useRoomEngine } from '../useRoomEngine';
 // import { MESSAGE_DURATION } from '../../../../constants/message';
-import { reactive, computed, defineComponent } from 'vue';
-import { useRoomState } from '../../states/RoomState';
 
 const { currentRoom } = useRoomState();
 
@@ -18,17 +17,17 @@ export default function useRoomAudioAction() {
   // todo: 测试在点击确定期间有其他管理员改变状态的 case
 
   function toggleRoomAudio() {
-    stateForAllAudio = !currentRoom.value?.isMicrophoneDisableForAllUser;
+    stateForAllAudio = !currentRoom.value?.isAllMicrophoneDisabled;
     TUIMessageBox({
-      title: currentRoom.value?.isMicrophoneDisableForAllUser
+      title: currentRoom.value?.isAllMicrophoneDisabled
         ? t('Enable all audios')
         : t('All current and new members will be muted'),
-      message: currentRoom.value?.isMicrophoneDisableForAllUser
+      message: currentRoom.value?.isAllMicrophoneDisabled
         ? t('After unlocking, users can freely turn on the microphone')
         : t('Members will not be able to open the microphone'),
       confirmButtonText: t('Confirm'),
       cancelButtonText: t('Cancel'),
-      callback: async action => {
+      callback: async (action) => {
         if (action === 'confirm') {
           doToggleRoomAudio();
         }
@@ -37,7 +36,7 @@ export default function useRoomAudioAction() {
   }
 
   async function doToggleRoomAudio() {
-    if (currentRoom.value?.isMicrophoneDisableForAllUser === stateForAllAudio) {
+    if (currentRoom.value?.isAllMicrophoneDisabled === stateForAllAudio) {
       const tipMessage = stateForAllAudio
         ? t('All audios disabled')
         : t('All audios enabled');
@@ -58,9 +57,9 @@ export default function useRoomAudioAction() {
     key: RoomAction.AudioAction,
     icon: defineComponent({}),
     label: computed(() =>
-      currentRoom.value?.isMicrophoneDisableForAllUser
+      currentRoom.value?.isAllMicrophoneDisabled
         ? t('Lift all mute')
-        : t('All mute')
+        : t('All mute'),
     ),
     handler: toggleRoomAudio,
   });