@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

package/src/TUIRoom/locales/zh-CN.ts

@@ -520,4 +520,6 @@ export default {
   'Sure you want to reset the beauty effect?': '确定要重置美颜效果吗?',
   'All beauty parameters will revert to default after reset':
     '重置后所有美颜参数将恢复至默认',
+  'Theme Colours': '主题色',
+  'Custom Themes': '自定义主题',
 };

package/src/TUIRoom/preConference.vue

@@ -27,7 +27,6 @@
       :user-name="props.userInfo.userName"
       @create-room="handleCreateRoom"
       @enter-room="handleEnterRoom"
-      @update-user-name="handleUpdateUserName"
     />
     <div class="pre-home-control" v-else>
       <Logo v-show="props.isShowLogo" class="logo" />
@@ -47,19 +46,18 @@
         />
       </div>
     </div>
-    <InvitationNotification @join-conference="handleEnterRoom" />
   </div>
 </template>
 
 <script setup lang="ts">
 import {
   ref,
-  computed,
   onMounted,
   onUnmounted,
   withDefaults,
   defineProps,
   defineEmits,
+  computed,
 } from 'vue';
 import UserInfo from './components/RoomHeader/UserInfo/index.vue';
 import RoomHomeControl from './components/RoomHome/RoomControl/index.vue';
@@ -72,7 +70,6 @@ import TUIMessageBox from './components/common/base/MessageBox/index';
 import TUIMessage from './components/common/base/Message/index';
 import { MESSAGE_DURATION } from './constants/message';
 import { isMobile } from './utils/environment';
-import InvitationNotification from './components/RoomInvite/InvitationNotification.vue';
 
 const roomControlRef = ref();
 const props = withDefaults(
@@ -109,8 +106,10 @@ const emits = defineEmits([
   'on-logout',
 ]);
 
-const tuiRoomThemeClass = computed(
-  () => `tui-theme-${roomService.basicStore.defaultTheme}`
+const hasThemeMode = document.documentElement.hasAttribute('tui-theme-mode');
+
+const tuiRoomThemeClass = computed(() =>
+  hasThemeMode ? '' : `tui-theme-${roomService.basicStore.defaultTheme}`
 );
 
 async function handleCreateRoom(roomOption: Record<string, any>) {
@@ -178,13 +177,17 @@ onUnmounted(() => {
 });
 </script>
 
-<style>
+<style lang="scss">
 @import './assets/style/global.scss';
-@import './assets/style/black-theme.scss';
-@import './assets/style/white-theme.scss';
-</style>
+@import '@tencentcloud/uikit-base-component-vue3/dist/styles/index.css';
 
-<style lang="scss" scoped>
+:root[tui-theme-mode='light'] {
+  --preconference-background: url('./assets/imgs/background-white.png');
+}
+
+:root[tui-theme-mode='dark'] {
+  --preconference-background: var(--bg-color-topbar);
+}
 .pre-conference-container {
   display: flex;
   align-items: center;
@@ -192,9 +195,9 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
   font-family: 'PingFang SC';
-  color: var(--font-color-1);
-  background: var(--background);
   background-size: cover;
+  background: var(--preconference-background);
+  color: var(--text-color-primary);
 
   .header {
     position: absolute;
@@ -238,11 +241,11 @@ onUnmounted(() => {
   }
 }
 
-.tui-theme-black.pre-conference-container {
-  --background: var(--background-color-1);
+.tui-theme-light.pre-conference-container {
+  background: url('./assets/imgs/background-white.png');
 }
 
-.tui-theme-white.pre-conference-container {
-  --background: url('./assets/imgs/background-white.png');
+.tui-theme-dark.pre-conference-container {
+  background-color: var(--bg-color-topbar);
 }
 </style>

package/src/TUIRoom/services/function/errorHandler.ts

@@ -209,7 +209,6 @@ class MediaDeviceErrorHandler {
   }
 
   private goToPermissionSettings(deviceType: MediaDeviceType) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { shell } = require('electron');
     const privacyTypeObj = {
       camera: 'Privacy_Camera',

package/src/TUIRoom/services/manager/chatManager.ts

@@ -4,11 +4,6 @@ import TUIRoomEngine, { TUIRoomEvents } from '@tencentcloud/tuiroom-engine-elect
 import { UserInfo } from '../../stores/room';
 import defaultAvatar from '../../assets/imgs/avatar.png';
 
-const THEME = {
-  LIGHT: 'LIGHT',
-  DARK: 'DARK',
-};
-
 export class ChatManager {
   static instance?: ChatManager;
   private service: IRoomService;
@@ -84,16 +79,17 @@ export class ChatManager {
   }
 
   private onThemeChanged(theme: string) {
-    const currentTheme = theme === 'black' ? THEME.DARK : THEME.LIGHT;
     TUICore.notifyEvent(
       TUIConstants.TUITheme.EVENT.THEME_CHANGED,
       TUIConstants.TUITheme.EVENT_SUB_KEY.CHANGE_SUCCESS,
-      { theme: currentTheme }
+      { theme }
     );
   }
 
   private onUserNameCardChanged(eventInfo: { userInfo: UserInfo }) {
     const { userId, nameCard } = eventInfo.userInfo;
+    const oldNameCard = this.service.roomStore.userInfoObj[userId]?.nameCard;
+    if (oldNameCard === nameCard) return;
     const result = { [userId]: { nameCard } };
 
     TUICore.callService({

package/src/TUIRoom/services/manager/conferenceInvitationManager.ts

@@ -4,9 +4,9 @@ import {
   TUIInvitationRejectedReason,
   TUIRoomInfo,
 } from '@tencentcloud/tuiroom-engine-electron';
+import { isWeChat } from '../../utils/environment';
 import { EventType, IRoomService } from '../types';
 import mitt from 'mitt';
-export * from '@tencentcloud/tuiroom-engine-electron';
 interface IConferenceInvitationManager {
   on(
     eventType: TUIConferenceInvitationManagerEvents,
@@ -181,7 +181,42 @@ export class ConferenceInvitationManager
       this.reject({ roomId: data.roomInfo.roomId, reason });
     } else {
       this.isBeingInvited = true;
-      this.emit(TUIConferenceInvitationManagerEvents.onReceiveInvitation, data);
+      if (isWeChat) {
+        this.emit(
+          TUIConferenceInvitationManagerEvents.onReceiveInvitation,
+          data
+        );
+        return;
+      }
+      const { roomInfo, invitation } = data;
+      const { roomName, roomMemberCount, roomOwner, roomId } = roomInfo || {};
+      const { userId, userName, avatarUrl } = invitation?.inviter || {};
+
+      const invitationInfo = {
+        userId,
+        userName,
+        avatarUrl,
+        roomName,
+        roomMemberCount,
+        roomOwner,
+        roomId,
+      };
+      this.service.widgetsManager.notification?.openInviteNotification({
+        appendTo: 'pre-conference-container',
+        message: invitationInfo,
+        confirmButtonText: this.service.t('Enter Now'),
+        cancelButtonText: this.service.t('Not joining for now'),
+        onConfirm: () =>
+          this.accept({
+            roomId: roomInfo.roomId,
+          }),
+        onCancel: () =>
+          this.reject({
+            roomId: roomInfo.roomId,
+            reason: TUIInvitationRejectedReason.kRejectToEnter,
+          }),
+        duration: 60000,
+      });
     }
   }
 
@@ -288,6 +323,8 @@ export class ConferenceInvitationManager
 
   async accept(options: { roomId: string }) {
     this.isBeingInvited = false;
+    this.service.emit(EventType.CONFERENCE_INVITATION_ACCEPTED, options.roomId);
+
     return await this.service.roomEngine.instance
       ?.getConferenceInvitationManager()
       .accept(options);

package/src/TUIRoom/services/manager/configManager.ts

@@ -7,10 +7,10 @@ interface IConfigManager {
 }
 
 export type LanguageOption = 'zh-CN' | 'en-US';
-export type Theme = 'white' | 'black';
+export type Theme = 'light' | 'dark';
 const THEME = {
-  LIGHT: 'white',
-  DARK: 'black',
+  LIGHT: 'light',
+  DARK: 'dark',
 };
 
 export class ConfigManager implements IConfigManager {

package/src/TUIRoom/services/manager/widgetsManager.ts

@@ -0,0 +1,39 @@
+import { IRoomService } from '../types';
+type NotificationProps = {
+  appendTo?: string | undefined;
+  customClass?: string;
+  message: object;
+  onConfirm?: () => Promise<void>;
+  onCancel?: () => Promise<void>;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  duration?: number;
+};
+
+export class WidgetsManager {
+  static instance?: WidgetsManager;
+  private service: IRoomService;
+  public notification: {
+    openInviteNotification: (options: NotificationProps) => void;
+  } | null = null;
+
+  constructor(service: IRoomService) {
+    this.service = service;
+  }
+
+  static getInstance(ctx: IRoomService): WidgetsManager {
+    if (!WidgetsManager.instance) {
+      WidgetsManager.instance = new WidgetsManager(ctx);
+    }
+    return WidgetsManager.instance;
+  }
+
+  static destroyInstance(): void {
+    if (!WidgetsManager.instance) return;
+    WidgetsManager.instance = undefined;
+  }
+
+  public registerNotificationProvider(provider: { notification: any }): void {
+    this.notification = provider.notification;
+  }
+}

package/src/TUIRoom/services/roomService.ts

@@ -1,6 +1,7 @@
 import mitt from 'mitt';
 import useGetRoomEngine from '../hooks/useRoomEngine';
 import { EventType, IRoomService, RoomInitData, RoomParam } from './types';
+
 import TUIRoomEngine, {
   TRTCVideoFillMode,
   TRTCVideoMirrorType,
@@ -41,8 +42,10 @@ import { ConferenceInvitationManager } from './manager/conferenceInvitationManag
 import { DataReportManager } from './manager/dataReportManager';
 import { ErrorHandler } from './function/errorHandler';
 import { ChatManager } from './manager/chatManager';
+import { WidgetsManager } from './manager/widgetsManager';
 import { TUILogin } from '@tencentcloud/tui-core';
 import { AITask } from './function/aiTask';
+import initWidgets from '../components/common/widgets';
 
 const { t } = i18n.global;
 
@@ -72,6 +75,7 @@ export class RoomService implements IRoomService {
   public chatManager: ChatManager = new ChatManager(this);
   public aiTask: AITask = new AITask(this);
   public trackingManager: TrackingManager = new TrackingManager();
+  public widgetsManager: WidgetsManager = new WidgetsManager(this);
 
   get basicStore() {
     return useBasicStore();
@@ -382,6 +386,8 @@ export class RoomService implements IRoomService {
 
   private async onUserInfoChanged(eventInfo: { userInfo: UserInfo }) {
     const { userId, nameCard } = eventInfo.userInfo;
+    const oldNameCard = this.roomStore.userInfoObj[userId]?.nameCard;
+    if (oldNameCard === nameCard) return;
     this.roomStore.updateUserInfo({ userId, nameCard });
   }
 
@@ -440,6 +446,7 @@ export class RoomService implements IRoomService {
   }
 
   public async initRoomKit(option: RoomInitData) {
+    initWidgets(this.widgetsManager);
     this.storeInit(option);
     const { sdkAppId, userId, userSig } = option;
     TUILogin.login({

package/src/TUIRoom/services/types.ts

@@ -9,6 +9,7 @@ import { ErrorHandler } from './function/errorHandler';
 import { AITask } from './function/aiTask';
 import { ConferenceInvitationManager } from './manager/conferenceInvitationManager';
 import { DataReportManager } from './manager/dataReportManager';
+import { WidgetsManager } from './manager/widgetsManager';
 export interface IRoomService {
   t: any;
   roomEngine: Record<string, any>;
@@ -20,6 +21,7 @@ export interface IRoomService {
   scheduleConferenceManager: ScheduleConferenceManager;
   conferenceInvitationManager: ConferenceInvitationManager;
   dataReportManager: DataReportManager;
+  widgetsManager: WidgetsManager;
   errorHandler: ErrorHandler;
   aiTask: AITask;
   on: (eventType: EventType, callback: (data?: any) => any) => void;
@@ -37,7 +39,7 @@ export interface RoomInitData {
   showHeaderTool?: boolean;
   tim?: ChatSDK;
   theme?: {
-    defaultTheme?: 'black' | 'white';
+    defaultTheme?: 'dark' | 'light';
     isSupportSwitchTheme: boolean;
   };
 }
@@ -69,4 +71,5 @@ export enum EventType {
   USER_LOGOUT = 'UserLogout',
   LANGUAGE_CHANGED = 'LanguageChanged',
   THEME_CHANGED = 'ThemeChanged',
+  CONFERENCE_INVITATION_ACCEPTED = 'ConferenceInvitationAccepted',
 }

package/src/TUIRoom/stores/basic.ts

@@ -51,6 +51,7 @@ interface BasicState {
   isRoomLinkVisible: boolean;
   isSchemeLinkVisible: boolean;
   isShowScreenShareAntiFraud: boolean;
+  isExperiencedAI: boolean;
   isOpenMic: boolean;
   scene: SceneType;
   componentConfig: {
@@ -102,13 +103,14 @@ export const useBasicStore = defineStore('basic', {
       delay: 0,
     },
     lang: getLanguage(),
-    defaultTheme: 'black',
+    defaultTheme: 'dark',
     isSupportSwitchTheme: true,
     showHeaderTool: true,
     shareLink: '',
     isRoomLinkVisible: !isElectron && !isWeChat,
     isSchemeLinkVisible: !isMobile,
     isShowScreenShareAntiFraud: false,
+    isExperiencedAI: false,
     isOpenMic: false,
     componentConfig: {
       SwitchTheme: {
@@ -190,6 +192,9 @@ export const useBasicStore = defineStore('basic', {
     setIsShowScreenShareAntiFraud(isShowScreenShareAntiFraud: boolean) {
       this.isShowScreenShareAntiFraud = isShowScreenShareAntiFraud;
     },
+    setIsExperiencedAI(isExperiencedAI: boolean) {
+      this.isExperiencedAI = isExperiencedAI;
+    },
     setBasicInfo(infoObj: any) {
       if (!infoObj) {
         return;
@@ -262,6 +267,7 @@ export const useBasicStore = defineStore('basic', {
       this.shareLink = '';
       this.isOpenMic = false;
       this.showRoomTool = false;
+      this.isExperiencedAI = false;
     },
   },
 });

package/src/TUIRoom/utils/common.ts

@@ -1,8 +1,8 @@
 import { getUrlParam } from './utils';
 
 const THEME = {
-  LIGHT: 'white',
-  DARK: 'black',
+  LIGHT: 'light',
+  DARK: 'dark',
 };
 
 type ThemeOption = 'LIGHT' | 'DARK';

package/es/components/RoomInvite/InvitationNotification.vue.d.ts

@@ -1,6 +0,0 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "join-conference": (...args: any[]) => void;
-}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{}>> & {
-    "onJoin-conference"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;

package/es/components/RoomInvite/InvitationNotification.vue.mjs

@@ -1,7 +0,0 @@
-import _sfc_main from "./InvitationNotification.vue2.mjs";
-/* empty css                             */
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const InvitationNotification = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-381c2f12"]]);
-export {
-  InvitationNotification as default
-};

package/es/components/RoomInvite/InvitationNotification.vue2.mjs

@@ -1,169 +0,0 @@
-import { defineComponent, ref, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, toDisplayString, unref, withCtx, createCommentVNode, pushScopeId, popScopeId } from "vue";
-import Avatar from "../common/Avatar.vue.mjs";
-import { useI18n } from "../../locales/index.mjs";
-import EnterRoomIcon from "../common/icons/EnterRoomIcon.vue.mjs";
-import SvgIcon from "../common/base/SvgIcon.vue.mjs";
-import TuiButton from "../common/base/Button.vue.mjs";
-import { TUIConferenceInvitationManagerEvents, TUIInvitationRejectedReason } from "@tencentcloud/tuiroom-engine-electron";
-import "../../services/main.mjs";
-import { roomService } from "../../services/roomService.mjs";
-import "../../utils/environment.mjs";
-import "mitt";
-import "../../services/manager/roomActionManager.mjs";
-import "@tencentcloud/tui-core";
-const _withScopeId = (n) => (pushScopeId("data-v-381c2f12"), n = n(), popScopeId(), n);
-const _hoisted_1 = {
-  key: 0,
-  class: "invitation-notification-container"
-};
-const _hoisted_2 = { class: "invitation-notification-inviter-container" };
-const _hoisted_3 = { class: "invitation-notification-inviter" };
-const _hoisted_4 = { class: "invitation-notification-title" };
-const _hoisted_5 = { class: "invitation-notification-room-name" };
-const _hoisted_6 = { class: "invitation-notification-room-info-container" };
-const _hoisted_7 = { class: "invitation-notification-room-text-container" };
-const _hoisted_8 = { class: "invitation-notification-room-text" };
-const _hoisted_9 = { class: "invitation-notification-room-text" };
-const _hoisted_10 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "invitation-notification-room-text-split" }, null, -1));
-const _hoisted_11 = { class: "invitation-notification-room-text" };
-const _hoisted_12 = { class: "invitation-notification-room-text" };
-const _hoisted_13 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("i", { class: "invitation-notification-bottom-split" }, null, -1));
-const _hoisted_14 = { class: "invitation-notification-bottom-container" };
-const _hoisted_15 = { class: "button-text" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "InvitationNotification",
-  emits: ["join-conference"],
-  setup(__props, { emit: __emit }) {
-    const invitationInfo = ref({
-      userId: "",
-      userName: "",
-      avatarUrl: "",
-      roomName: "",
-      roomMemberCount: 0,
-      roomOwner: "",
-      roomId: ""
-    });
-    const { t } = useI18n();
-    const showInvitation = ref(false);
-    const emits = __emit;
-    const onReceiveInvitation = (data) => {
-      const { roomInfo, invitation } = data;
-      invitationInfo.value.userId = invitation.inviter.userId;
-      invitationInfo.value.userName = invitation.inviter.userName;
-      invitationInfo.value.avatarUrl = invitation.inviter.avatarUrl;
-      invitationInfo.value.roomName = roomInfo.roomName;
-      invitationInfo.value.roomMemberCount = roomInfo.roomMemberCount;
-      invitationInfo.value.roomOwner = roomInfo.roomOwner;
-      invitationInfo.value.roomId = roomInfo.roomId;
-      setInvitationDisplay(true);
-    };
-    const handleEnterRoom = () => {
-      const { roomId } = invitationInfo.value;
-      roomService.conferenceInvitationManager.accept({ roomId });
-      setInvitationDisplay(false);
-      emits("join-conference", {
-        roomId,
-        roomParam: {
-          isOpenCamera: false,
-          isOpenMicrophone: true
-        }
-      });
-    };
-    const handleRejectInvitation = () => {
-      const { roomId } = invitationInfo.value;
-      roomService.conferenceInvitationManager.reject({
-        roomId,
-        reason: TUIInvitationRejectedReason.kRejectToEnter
-      });
-      setInvitationDisplay(false);
-    };
-    const onInvitationTimeout = () => {
-      setInvitationDisplay(false);
-    };
-    const onInvitationHandledByOtherDevice = () => {
-      setInvitationDisplay(false);
-    };
-    const setInvitationDisplay = (options) => {
-      showInvitation.value = options;
-    };
-    onMounted(() => {
-      roomService.conferenceInvitationManager.on(
-        TUIConferenceInvitationManagerEvents.onReceiveInvitation,
-        onReceiveInvitation
-      );
-      roomService.conferenceInvitationManager.on(
-        TUIConferenceInvitationManagerEvents.onInvitationTimeout,
-        onInvitationTimeout
-      );
-      roomService.conferenceInvitationManager.on(
-        TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
-        onInvitationHandledByOtherDevice
-      );
-    });
-    onUnmounted(() => {
-      roomService.conferenceInvitationManager.off(
-        TUIConferenceInvitationManagerEvents.onReceiveInvitation,
-        onReceiveInvitation
-      );
-      roomService.conferenceInvitationManager.off(
-        TUIConferenceInvitationManagerEvents.onInvitationTimeout,
-        onInvitationTimeout
-      );
-      roomService.conferenceInvitationManager.off(
-        TUIConferenceInvitationManagerEvents.onInvitationHandledByOtherDevice,
-        onInvitationHandledByOtherDevice
-      );
-    });
-    return (_ctx, _cache) => {
-      return showInvitation.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
-            createVNode(Avatar, {
-              class: "avatar",
-              "img-src": invitationInfo.value.avatarUrl
-            }, null, 8, ["img-src"]),
-            createElementVNode("span", _hoisted_4, toDisplayString(unref(t)("sb invites you to join the conference", {
-              name: invitationInfo.value.userName || invitationInfo.value.userId
-            })), 1)
-          ]),
-          createElementVNode("span", _hoisted_5, toDisplayString(invitationInfo.value.roomName), 1),
-          createElementVNode("div", _hoisted_6, [
-            createElementVNode("div", _hoisted_7, [
-              createElementVNode("span", _hoisted_8, toDisplayString(unref(t)("Host")) + ": ", 1),
-              createElementVNode("span", _hoisted_9, toDisplayString(invitationInfo.value.roomOwner), 1)
-            ]),
-            _hoisted_10,
-            createElementVNode("div", null, [
-              createElementVNode("span", _hoisted_11, toDisplayString(unref(t)("Attendees")) + ": ", 1),
-              createElementVNode("span", _hoisted_12, toDisplayString(`${invitationInfo.value.roomMemberCount} ${unref(t)("people")}`), 1)
-            ])
-          ])
-        ]),
-        _hoisted_13,
-        createElementVNode("div", _hoisted_14, [
-          createElementVNode("span", {
-            class: "invitation-notification-bottom",
-            onClick: handleRejectInvitation
-          }, toDisplayString(unref(t)("Not joining for now")), 1),
-          createVNode(TuiButton, {
-            class: "button-item",
-            style: { "width": "110px" },
-            onClick: handleEnterRoom
-          }, {
-            default: withCtx(() => [
-              createVNode(SvgIcon, {
-                class: "icon",
-                icon: EnterRoomIcon
-              }),
-              createElementVNode("span", _hoisted_15, toDisplayString(unref(t)("Enter Now")), 1)
-            ]),
-            _: 1
-          })
-        ])
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};