tuikit-atomicx-vue3 4.4.0 → 4.5.1

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,
   });

package/src/hooks/useRoomActions/useRoomScreenAction.ts

@@ -1,14 +1,13 @@
 import { computed, reactive } from 'vue';
 import { TUIRole, TUIMediaDevice } from '@tencentcloud/tuiroom-engine-js';
 import { IconAllMembersShareScreen, IconHostShareScreen } from '@tencentcloud/uikit-base-component-vue3';
-import { ActionType, RoomAction } from '../../types';
+import TUIMessageBox from '../../baseComp/MessageBox';
 import { useI18n } from '../../locales';
-// import TUIMessageBox from '@/core/components/common/base/MessageBox';
-import useRoomEngine from '../useRoomEngine';
-import useUserState from '../../states/UserState/index';
 import { useRoomState } from '../../states/RoomState';
+import useUserState from '../../states/UserState/index';
+import useRoomEngine from '../useRoomEngine';
 
-const { userWithScreenOn } = useUserState()
+const { userWithScreenOn } = useUserState();
 const { currentRoom } = useRoomState();
 
 export default function useRoomScreenAction(): ActionType<RoomAction> {
@@ -23,21 +22,21 @@ export default function useRoomScreenAction(): ActionType<RoomAction> {
   }
 
   function toggleRoomScreen() {
-    stateForScreenShare = !currentRoom.value?.isScreenShareDisableForAllUser;
+    stateForScreenShare = !currentRoom.value?.isAllScreenShareDisabled;
     if (!userWithScreenOn.value || userWithScreenOn.value.userRole !== TUIRole.kGeneralUser) {
       toggleAllScreenShare();
       return;
     }
     TUIMessageBox({
       title: t(
-        'Is it turned on that only the host/admin can share the screen?'
+        'Is it turned on that only the host/admin can share the screen?',
       ),
       message: t(
-        "Other member is sharing the screen is now, the member's sharing will be terminated after you turning on"
+        'Other member is sharing the screen is now, the member\'s sharing will be terminated after you turning on',
       ),
       confirmButtonText: t('Confirm'),
       cancelButtonText: t('Cancel'),
-      callback: async action => {
+      callback: async (action) => {
         if (action === 'confirm') {
           await roomEngine.instance?.closeRemoteDeviceByAdmin({
             userId: userWithScreenOn.value?.userId as string,
@@ -52,14 +51,14 @@ export default function useRoomScreenAction(): ActionType<RoomAction> {
   const roomScreenAction = reactive({
     key: RoomAction.ScreenAction,
     label: computed(() =>
-      currentRoom.value?.isScreenShareDisableForAllUser
+      currentRoom.value?.isAllScreenShareDisabled
         ? t('All members can share screen')
-        : t('Screen sharing for host/admin only')
+        : t('Screen sharing for host/admin only'),
     ),
     icon: computed(() =>
-      currentRoom.value?.isScreenShareDisableForAllUser
+      currentRoom.value?.isAllScreenShareDisabled
         ? IconAllMembersShareScreen
-        : IconHostShareScreen
+        : IconHostShareScreen,
     ),
     handler: toggleRoomScreen,
   });

package/src/hooks/useRoomActions/useRoomVideoAction.ts

@@ -1,12 +1,9 @@
 import { TUIMediaDevice } from '@tencentcloud/tuiroom-engine-js';
-import { RoomAction } from '../../types';
+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 TUIMessageBox from '../../baseComp/MessageBox';
-import { TUIToast, TOAST_TYPE } from '@tencentcloud/uikit-base-component-vue3';
-import { useRoomEngine } from '../useRoomEngine';
-// import { MESSAGE_DURATION } from '@/core/constants/message';
-import { computed, defineComponent, reactive } from 'vue';
+import useRoomEngine from '../useRoomEngine';
 
 export default function useRoomVideoAction() {
   const { t } = useI18n();
@@ -16,17 +13,17 @@ export default function useRoomVideoAction() {
   let stateForAllVideo = false;
 
   function toggleRoomVideo() {
-    stateForAllVideo = !currentRoom.value?.isCameraDisableForAllUser;
+    stateForAllVideo = !currentRoom.value?.isAllCameraDisabled;
     TUIMessageBox({
-      title: currentRoom.value?.isCameraDisableForAllUser
+      title: currentRoom.value?.isAllCameraDisabled
         ? t('Enable all videos')
         : t('All and new members will be banned from the camera'),
-      message: currentRoom.value?.isCameraDisableForAllUser
+      message: currentRoom.value?.isAllCameraDisabled
         ? t('After unlocking, users can freely turn on the camera')
         : t('Members will not be able to open the camera'),
       confirmButtonText: t('Confirm'),
       cancelButtonText: t('Cancel'),
-      callback: async action => {
+      callback: async (action) => {
         if (action === 'confirm') {
           doToggleRoomVideo();
         }
@@ -35,7 +32,7 @@ export default function useRoomVideoAction() {
   }
 
   async function doToggleRoomVideo() {
-    if (currentRoom.value?.isCameraDisableForAllUser === stateForAllVideo) {
+    if (currentRoom.value?.isAllCameraDisabled === stateForAllVideo) {
       const tipMessage = stateForAllVideo
         ? t('All videos disabled')
         : t('All videos enabled');
@@ -56,9 +53,9 @@ export default function useRoomVideoAction() {
     key: RoomAction.VideoAction,
     icon: defineComponent({}),
     label: computed(() =>
-      currentRoom.value?.isCameraDisableForAllUser
+      currentRoom.value?.isAllCameraDisabled
         ? t('Lift stop all video')
-        : t('All stop video')
+        : t('All stop video'),
     ),
     handler: toggleRoomVideo,
   });

package/src/hooks/useRoomEngine.ts

@@ -1,4 +1,5 @@
-import TUIRoomEngine, { TUIRoomDeviceManager, TRTCCloud } from '@tencentcloud/tuiroom-engine-js';
+import TUIRoomEngine, { TRTCCloud } from '@tencentcloud/tuiroom-engine-js';
+import type { TUIRoomDeviceManager } from '@tencentcloud/tuiroom-engine-js';
 
 const roomEngine: Record<string, TUIRoomEngine | null> = { instance: null };
 const deviceManager: { instance: TUIRoomDeviceManager | null | undefined } = {
@@ -13,7 +14,7 @@ TUIRoomEngine.once('ready', () => {
       params: {
         enable: true,
       },
-    })
+    }),
   );
   roomEngine.instance = new TUIRoomEngine({ isSharedInstance: true });
   deviceManager.instance = roomEngine.instance?.getMediaDeviceManager();