@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.2

package/src/TUIRoom/components/common/icons/WhiteningBeautyIcon.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    width="30"
+    height="30"
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Group 48097287">
+      <path
+        id="Ellipse 349"
+        d="M27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15C3 12.1605 3.98496 9.55384 5.63267 7.49904C6.3356 6.62243 7.159 5.84657 8.07758 5.19665C10.0333 3.81292 12.4202 3 15 3C21.6274 3 27 8.37258 27 15Z"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <circle id="Ellipse 350" cx="10.5" cy="12.5" r="1.5" fill="#4F586B" />
+      <circle id="Ellipse 351" cx="19.5" cy="12.5" r="1.5" fill="#4F586B" />
+      <path
+        id="Ellipse 352"
+        d="M18 17C18 18.6569 16.6569 20 15 20C13.3431 20 12 18.6569 12 17"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 188"
+        d="M8 5L11 8M22 5L19 8"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 189"
+        d="M8 25L11 22M22 25L19 22"
+        stroke="#4F586B"
+        stroke-width="2"
+      />
+    </g>
+  </svg>
+</template>

package/src/TUIRoom/conference.ts

@@ -1,7 +1,15 @@
 import { ChatSDK } from '@tencentcloud/chat';
-import { roomService, StartParams, JoinParams, LanguageOption, ThemeOption, EventType } from './services';
+import {
+  roomService,
+  StartParams,
+  JoinParams,
+  LanguageOption,
+  Theme,
+  EventType,
+} from './services';
 import { TUIRoomEngine } from './index';
 import logger from './utils/common/logger';
+import { toTargetTheme } from './utils/common';
 
 export enum RoomEvent {
   ROOM_START = 'RoomStart',
@@ -13,6 +21,8 @@ export enum RoomEvent {
   KICKED_OFFLINE = 'KickedOffline',
   USER_SIG_EXPIRED = 'UserSigExpired',
   USER_LOGOUT = 'UserLogout',
+  LANGUAGE_CHANGED = 'LanguageChanged',
+  THEME_CHANGED = 'ThemeChanged',
 }
 export enum FeatureButton {
   SwitchTheme = 'SwitchTheme',
@@ -20,13 +30,22 @@ export enum FeatureButton {
   SwitchLanguage = 'Language',
   FullScreen = 'FullScreen',
   Invitation = 'InviteControl',
+  BasicBeauty = 'BasicBeauty',
 }
+export type ThemeOption = 'LIGHT' | 'DARK';
+
 interface IConference {
   getRoomEngine(): TUIRoomEngine | null;
 
-  on: (eventType: RoomEvent, callback: () => void) => void;
+  on: (
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) => void;
 
-  off: (eventType: RoomEvent, callback: () => void) => void;
+  off: (
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) => void;
 
   login: (params: {
     sdkAppId: number;
@@ -62,6 +81,8 @@ interface IConference {
 
   enableVirtualBackground: () => void;
 
+  enableBasicBeauty: () => void;
+
   hideFeatureButton: (name: FeatureButton) => void;
 
   replaceFriendList: (userList: Array<any>) => void;
@@ -88,11 +109,17 @@ class Conference implements IConference {
     return roomService.roomEngine.instance;
   }
 
-  public on(eventType: RoomEvent, callback: () => any) {
+  public on(
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) {
     roomService.on(eventType as unknown as EventType, callback);
   }
 
-  public off(eventType: RoomEvent, callback: () => void) {
+  public off(
+    eventType: RoomEvent,
+    callback: (data?: LanguageOption | ThemeOption | any) => void
+  ) {
     roomService.off(eventType as unknown as EventType, callback);
   }
 
@@ -112,10 +139,7 @@ class Conference implements IConference {
     return await roomService.dismissRoom();
   }
 
-  public setSelfInfo(options: {
-    userName: string;
-    avatarUrl: string;
-  }) {
+  public setSelfInfo(options: { userName: string; avatarUrl: string }) {
     return roomService.setSelfInfo(options);
   }
 
@@ -123,8 +147,8 @@ class Conference implements IConference {
     return roomService.setLanguage(language);
   }
 
-  public setTheme(theme: 'LIGHT' | 'DARK') {
-    return roomService.setTheme(theme);
+  public setTheme(theme: ThemeOption) {
+    return roomService.setTheme(toTargetTheme(theme) as Theme);
   }
 
   public disableTextMessaging() {
@@ -143,6 +167,10 @@ class Conference implements IConference {
     roomService.setComponentConfig({ VirtualBackground: { visible: true } });
   }
 
+  public enableBasicBeauty() {
+    roomService.setComponentConfig({ BasicBeauty: { visible: true } });
+  }
+
   public hideFeatureButton(name: FeatureButton) {
     roomService.setComponentConfig({ [name]: { visible: false } });
   }

package/src/TUIRoom/conference.vue

@@ -1,49 +1,100 @@
 <template>
-  <div v-if="conferenceShow" id="roomContainer" ref="roomRef" :class="tuiRoomClass">
+  <div
+    v-if="conferenceShow"
+    id="roomContainer"
+    ref="roomRef"
+    :class="tuiRoomClass"
+  >
     <room-header
       v-show="showRoomTool && showHeaderTool"
       class="header"
       @log-out="logOut"
-    ></room-header>
+    />
     <room-content
       ref="roomContentRef"
       v-tap.lazy="handleRoomContentTap"
       :show-room-tool="showRoomTool"
       class="content"
-    ></room-content>
-    <room-footer v-show="showRoomTool" class="footer" />
-    <room-sidebar></room-sidebar>
-    <room-setting></room-setting>
+    />
+    <room-footer
+      v-show="showRoomTool"
+      class="footer"
+      @show-overlay="handleShowOverlay"
+    />
+    <room-sidebar />
+    <room-setting />
+    <AISubtitlesOverlay v-if="overlayMap.AISubtitlesOverlay.visible" />
+    <loading-overlay v-if="isShowLoading" />
+    <password-dialog
+      :visible="isShowPasswordContainer"
+      @join-conference="enterRoom"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, Ref, watch, computed, withDefaults, defineProps } from 'vue';
+import {
+  ref,
+  onMounted,
+  onUnmounted,
+  Ref,
+  watch,
+  computed,
+  withDefaults,
+  defineProps,
+  defineExpose,
+  defineEmits,
+} from 'vue';
 import RoomHeader from './components/RoomHeader/index/index.vue';
 import RoomFooter from './components/RoomFooter/index/index.vue';
 import RoomSidebar from './components/RoomSidebar/index.vue';
 import RoomContent from './components/RoomContent/index.vue';
 import RoomSetting from './components/RoomSetting/index.vue';
+import LoadingOverlay from './components/PreRoom/LoadingOverlay.vue';
+import PasswordDialog from './components/PreRoom/PasswordDialog.vue';
+import AISubtitlesOverlay from './components/AITools/AISubtitles.vue';
 import { debounce, throttle } from './utils/utils';
 import { useBasicStore } from './stores/basic';
 import { isMobile, isWeChat } from './utils/environment';
 import vTap from './directives/vTap';
-import { TUIKickedOutOfRoomReason } from '@tencentcloud/tuiroom-engine-electron';
+import {
+  TUIKickedOutOfRoomReason,
+  TUIErrorCode,
+} from '@tencentcloud/tuiroom-engine-electron';
 
 import { MESSAGE_DURATION } from './constants/message';
 
 import TUIMessageBox from './components/common/base/MessageBox/index';
 import TUIMessage from './components/common/base/Message/index';
-import { roomService, EventType, RoomParam, RoomInitData } from './services/index';
+import {
+  roomService,
+  EventType,
+  RoomParam,
+  RoomInitData,
+} from './services/index';
 import useDeviceManager from './hooks/useDeviceManager';
 
-const props = withDefaults(defineProps<{
-  displayMode: 'permanent' | 'wake-up'
-}>(), {
-  displayMode: 'permanent',
+const isShowPasswordContainer = ref(false);
+const isShowLoading = ref(true);
+const props = withDefaults(
+  defineProps<{
+    displayMode: 'permanent' | 'wake-up';
+  }>(),
+  {
+    displayMode: 'permanent',
+  }
+);
+
+const overlayMap = ref<{
+  AISubtitlesOverlay: { visible: boolean };
+  [key: string]: { visible: boolean };
+}>({
+  AISubtitlesOverlay: { visible: false },
 });
 
-const conferenceShow = computed(() => (props.displayMode === 'permanent' || !!basicStore.roomId));
+const conferenceShow = computed(
+  () => props.displayMode === 'permanent' || !!basicStore.roomId
+);
 
 useDeviceManager({ listenForDeviceChange: true });
 
@@ -75,13 +126,15 @@ const showMessageBox = (data: {
   code?: number;
   message: string;
   title: string;
-  cancelButtonText: string,
+  duration?: number;
+  cancelButtonText: string;
   confirmButtonText: string;
   callback?: () => void;
 }) => {
   const {
     message,
     title = roomService.t('Note'),
+    duration,
     cancelButtonText,
     confirmButtonText = roomService.t('Sure'),
     callback = () => {},
@@ -89,6 +142,7 @@ const showMessageBox = (data: {
   TUIMessageBox({
     title,
     message,
+    duration,
     cancelButtonText,
     confirmButtonText,
     callback,
@@ -107,6 +161,12 @@ const showMessage = (data: {
   });
 };
 
+const handleShowOverlay = (data: { name: string; visible: boolean }) => {
+  if (overlayMap.value[data.name]) {
+    overlayMap.value[data.name].visible = data.visible;
+  }
+};
+
 onMounted(() => {
   roomService.on(EventType.ROOM_NOTICE_MESSAGE, showMessage);
   roomService.on(EventType.ROOM_NOTICE_MESSAGE_BOX, showMessageBox);
@@ -118,6 +178,7 @@ onMounted(() => {
   roomService.on(EventType.ROOM_LEAVE, onLeaveRoom);
   roomService.on(EventType.ROOM_DISMISS, onDismissRoom);
   roomService.on(EventType.USER_LOGOUT, onLogout);
+  roomService.on(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
 });
 onUnmounted(() => {
   roomService.off(EventType.ROOM_NOTICE_MESSAGE, showMessage);
@@ -130,12 +191,16 @@ onUnmounted(() => {
   roomService.off(EventType.ROOM_LEAVE, onLeaveRoom);
   roomService.off(EventType.ROOM_DISMISS, onDismissRoom);
   roomService.off(EventType.USER_LOGOUT, onLogout);
+  roomService.off(EventType.ROOM_NEED_PASSWORD, onRoomNeedPassword);
   roomService.resetStore();
 });
 
-const { sdkAppId, showHeaderTool } = roomService.basicStore;
+const { showHeaderTool } = roomService.basicStore;
 const tuiRoomClass = computed(() => {
-  const roomClassList = ['tui-room', `tui-theme-${roomService.basicStore.defaultTheme}`];
+  const roomClassList = [
+    'tui-room',
+    `tui-theme-${roomService.basicStore.defaultTheme}`,
+  ];
   if (isMobile) {
     roomClassList.push('tui-room-h5');
   }
@@ -156,15 +221,18 @@ function handleHideRoomTool() {
   showRoomTool.value = false;
 }
 
-watch(() => roomRef.value, (newValue, oldValue) => {
-  if (!isWeChat && !isMobile) {
-    if (newValue) {
-      addRoomContainerEvent(newValue);
-    } else {
-      oldValue && removeRoomContainerEvent(oldValue);
+watch(
+  () => roomRef.value,
+  (newValue, oldValue) => {
+    if (!isWeChat && !isMobile) {
+      if (newValue) {
+        addRoomContainerEvent(newValue);
+      } else {
+        oldValue && removeRoomContainerEvent(oldValue);
+      }
     }
   }
-});
+);
 
 const handleHideRoomToolDebounce = debounce(handleHideRoomTool, 5000);
 const handleHideRoomToolThrottle = throttle(handleHideRoomToolDebounce, 1000);
@@ -230,6 +298,12 @@ async function enterRoom(options: { roomId: string; roomParam?: RoomParam }) {
   await roomService.enterRoom(options);
 }
 
+function onRoomNeedPassword(code: TUIErrorCode) {
+  if (code === TUIErrorCode.ERR_NEED_PASSWORD) {
+    isShowPasswordContainer.value = true;
+  }
+}
+
 function resetStore() {
   roomService.resetStore();
 }
@@ -239,16 +313,18 @@ const logOut = () => {
 };
 
 const onStartRoom = () => {
-  emit('on-create-room',  { code: 0, message: 'create room' });
+  isShowLoading.value = false;
+  emit('on-create-room', { code: 0, message: 'create room' });
 };
 
 const onJoinRoom = () => {
-  emit('on-enter-room',  { code: 0, message: 'enter room' });
+  isShowLoading.value = false;
+  isShowPasswordContainer.value = false;
+  emit('on-enter-room', { code: 0, message: 'enter room' });
 };
 
-
 const onLeaveRoom = () => {
-  emit('on-exit-room',  { code: 0, message: 'exit room' });
+  emit('on-exit-room', { code: 0, message: 'exit room' });
 };
 
 const onDismissRoom = () => {
@@ -259,7 +335,11 @@ const onLogout = () => {
   emit('on-log-out', { code: 0, message: 'user logout' });
 };
 
-const onKickedOutOfRoom = async (eventInfo: { roomId: string; reason: TUIKickedOutOfRoomReason; message: string }) => {
+const onKickedOutOfRoom = async (eventInfo: {
+  roomId: string;
+  reason: TUIKickedOutOfRoomReason;
+  message: string;
+}) => {
   const { roomId, reason, message } = eventInfo;
   emit('on-kicked-out-of-room', { roomId, reason, message });
 };
@@ -280,86 +360,91 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
 @import './assets/style/white-theme.scss';
 
 .tui-room :not([class|='el']) {
-  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s,
+    box-shadow 0.3s;
 }
 </style>
 
 <style lang="scss" scoped>
-.tui-theme-white .tui-room {
-  --header-shadow-color: #e3eaf7;
-  --footer-shadow-color: rgba(197, 210, 229, 0.2);
-}
-
-.tui-theme-black .tui-room {
-  --header-shadow-color: rgba(34, 38, 46, 0.3);
-  --footer-shadow-color: rgba(34, 38, 46, 0.3);
-}
-
-.tui-theme-white.tui-room {
-  --header-shadow-color: #e3eaf7;
-  --footer-shadow-color: rgba(197, 210, 229, 0.2);
-}
-
-.tui-theme-black.tui-room {
-  --header-shadow-color: rgba(34, 38, 46, 0.3);
-  --footer-shadow-color: rgba(34, 38, 46, 0.3);
-}
-
 .tui-room {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 100%;
   min-width: 850px;
+  height: 100%;
   min-height: 400px;
-  position: relative;
   color: var(--font-color-1);
-  background-color: var(--background-color-1);
-  display: flex;
-  flex-direction: column;
   text-align: left;
+  background-color: var(--background-color-1);
 
   .header {
-    width: 100%;
-    height: 64px;
-    background-color: var(--background-color-2);
-    box-shadow: 0px 1px 0px var(--header-shadow-color);
     position: absolute;
     top: 0;
     left: 0;
     z-index: 100;
+    width: 100%;
+    height: 64px;
+    background-color: var(--background-color-2);
+    box-shadow: 0 1px 0 var(--header-shadow-color);
   }
 
   .content {
+    position: absolute;
+    top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--background-color-1);
-    position: absolute;
-    top: 0;
   }
 
   &.tui-room-h5 {
     width: 100%;
+    min-width: 350px;
     height: 100%;
-    min-width: initial;
-    min-height: initial;
+    min-height: 525px;
   }
 }
 
 #roomContainer {
   &.chat-room {
     position: absolute;
-    margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 999;
-    height: 80%;
     width: 80%;
+    height: 80%;
+    margin: auto;
     border-radius: 10px;
   }
-  &.tui-room-h5,.chat-room {
+
+  &.tui-room-h5,
+  .chat-room {
     width: 100%;
     height: 100%;
   }
 }
+
+.tui-theme-white .tui-room {
+  --header-shadow-color: #e3eaf7;
+  --footer-shadow-color: rgba(197, 210, 229, 0.2);
+}
+
+.tui-theme-black .tui-room {
+  --header-shadow-color: rgba(34, 38, 46, 0.3);
+  --footer-shadow-color: rgba(34, 38, 46, 0.3);
+}
+
+.tui-theme-white.tui-room {
+  --header-shadow-color: #e3eaf7;
+  --footer-shadow-color: rgba(197, 210, 229, 0.2);
+}
+
+.tui-theme-black.tui-room {
+  --header-shadow-color: rgba(34, 38, 46, 0.3);
+  --footer-shadow-color: rgba(34, 38, 46, 0.3);
+}
 </style>

package/src/TUIRoom/constants/message.ts

@@ -5,9 +5,9 @@ export enum WARNING_MESSAGE {
   UNMUTE_LOCAL_CAMERA_FAIL_MUTE_ALL = 'Has been full static painting, can not open the video',
   UNMUTE_LOCAL_CAMERA_FAIL_MUTE_BY_MASTER = 'It has been stilled by the host and cannot open the video',
   UNMUTE_LOCAL_CAMERA_FAIL_AUDIENCE = 'To apply to speak in the room, please raise your hand first to apply for the microphone',
-};
+}
 
 export enum MESSAGE_DURATION {
   NORMAL = 3000,
-  LONG = 5000
-};
+  LONG = 5000,
+}

package/src/TUIRoom/constants/render.ts

@@ -1,4 +1,3 @@
-
 export enum LAYOUT {
   SIX_EQUAL_POINTS = 'six_equal_points',
   NINE_EQUAL_POINTS = 'nine_equal_points',
@@ -6,8 +5,8 @@ export enum LAYOUT {
   RIGHT_SIDE_LIST = 'right_side_list',
   TOP_SIDE_LIST = 'top_side_list',
   LARGE_SMALL_WINDOW = 'large_small_window',
-  GRID_VIEW= 'grid_view',
-};
+  GRID_VIEW = 'grid_view',
+}
 
 export enum SettingMode {
   SIMPLE = 'simple',

package/src/TUIRoom/constants/room.ts

@@ -22,3 +22,17 @@ export const SMALL_VIDEO_ENC_PARAM = {
   videoFps: 15,
   videoBitrate: 800,
 };
+
+export enum USERS_STATUS {
+  Entered = 1,
+  ON_STAGE = 1,
+  NOT_ON_STAGE = 2,
+  NOT_ENTER = 3,
+}
+
+export const PASSWORD_MAX_LENGTH_LIMIT = 6;
+
+export enum TRTCBeautyStyle {
+  TRTCBeautyStyleSmooth = 0,
+  TRTCBeautyStyleNature = 1,
+}

package/src/TUIRoom/directives/vClickOutside.ts

@@ -1,4 +1,3 @@
-
 const nodeMap = new Map();
 
 const vClickOutside = {

package/src/TUIRoom/directives/vDblTouch.ts

@@ -1,16 +1,24 @@
-
-const eventMap = new Map();
+const touchEventMap = new Map();
+const clickEventMap = new Map();
 
 const TIME_OUT = 300;
 
 class DblTouch {
   public dom: HTMLElement;
-  public callback: Function;
+  public callback: (event?: Event | TouchEvent) => void;
 
   constructor(el: HTMLElement, binding: any) {
     this.dom = el;
     this.callback = binding.value;
 
+    // Compatible iphone 11 chrome browser tap twice trigger once touchend and twice click event problem
+    el?.addEventListener('click', (event: Event) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.click(event);
+    });
+
     el?.addEventListener('touchend', (event: TouchEvent) => {
       if (binding.modifiers.stop) {
         event.stopPropagation();
@@ -19,14 +27,32 @@ class DblTouch {
     });
   }
 
+  executeCallback(event: Event | TouchEvent) {
+    clickEventMap.delete(this.dom);
+    touchEventMap.delete(this.dom);
+    this.callback && this.callback(event);
+  }
+
+  click(event: Event) {
+    const lastEvent = clickEventMap.get(this.dom);
+    if (lastEvent) {
+      this.executeCallback(event);
+    } else {
+      clickEventMap.set(this.dom, event);
+      setTimeout(() => {
+        clickEventMap.delete(this.dom);
+      }, TIME_OUT);
+    }
+  }
+
   touchend(event: TouchEvent) {
-    const lastEvent = eventMap.get(this.dom);
+    const lastEvent = touchEventMap.get(this.dom);
     if (lastEvent) {
-      this.callback && this.callback(event);
+      this.executeCallback(event);
     } else {
-      eventMap.set(this.dom, event);
+      touchEventMap.set(this.dom, event);
       setTimeout(() => {
-        eventMap.delete(this.dom);
+        touchEventMap.delete(this.dom);
       }, TIME_OUT);
     }
   }

package/src/TUIRoom/directives/vTap.ts

@@ -1,4 +1,3 @@
-
 const eventMap = new Map();
 
 const TIME_OUT = 300;