@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

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

@@ -19,11 +19,6 @@
       mask="url(#path-1-inside-1_3678_51153)"
     />
     <circle cx="12" cy="12" r="3.65" stroke="currentColor" stroke-width="1.7" />
-    <circle
-      cx="12"
-      cy="12"
-      r="1.5"
-      style="fill: var(--active-color-2); fill-opacity: 1"
-    />
+    <circle cx="12" cy="12" r="1.5" fill="currentColor" />
   </svg>
 </template>

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

@@ -10,12 +10,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M7.66675 1.2337L15.7018 8L7.66675 14.7663V10.6155C4.87045 10.7492 2.95122 11.7487 1.54259 13.7208L0.346375 13.2026C0.695334 11.4578 1.40055 9.6728 2.66505 8.22766C3.8396 6.88533 5.47132 5.86629 7.66675 5.43668L7.66675 1.2337ZM9.00009 4.09963V6.5782L8.42769 6.65996C6.24805 6.97133 4.72737 7.89553 3.66848 9.10566C3.19948 9.64166 2.81533 10.2406 2.50503 10.8783C4.06386 9.77713 5.98581 9.26666 8.33342 9.26666H9.00009V11.9004L13.6318 8L9.00009 4.09963Z"
-      fill="#4F586B"
-      style="
-        fill: #4f586b;
-        fill: color(display-p3 0.3098 0.3451 0.4196);
-        fill-opacity: 1;
-      "
+      fill="currentColor"
     />
   </svg>
 </template>

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

@@ -15,31 +15,31 @@
             cx="16"
             cy="16"
             r="11.8"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 187"
             d="M16 1.06665V30.9333"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 190"
             d="M16 16H27.7333"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 191"
             d="M16 10.6666H26.6667"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 192"
             d="M16 21.3333H26.6667"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
         </g>

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

@@ -15,19 +15,27 @@
     </mask>
     <path
       d="M4 21H2.3V22.7H4V21ZM20 21V22.7H21.7V21H20ZM14.3 6C14.3 7.27025 13.2703 8.3 12 8.3V11.7C15.148 11.7 17.7 9.14802 17.7 6H14.3ZM12 3.7C13.2703 3.7 14.3 4.72975 14.3 6H17.7C17.7 2.85198 15.148 0.3 12 0.3V3.7ZM9.7 6C9.7 4.72975 10.7297 3.7 12 3.7V0.3C8.85198 0.3 6.3 2.85198 6.3 6H9.7ZM12 8.3C10.7297 8.3 9.7 7.27025 9.7 6H6.3C6.3 9.14802 8.85198 11.7 12 11.7V8.3ZM5.7 18C5.7 15.6252 7.62518 13.7 10 13.7V10.3C5.74741 10.3 2.3 13.7474 2.3 18H5.7ZM5.7 21V18H2.3V21H5.7ZM20 19.3H4V22.7H20V19.3ZM18.3 18V21H21.7V18H18.3ZM14 13.7C16.3748 13.7 18.3 15.6252 18.3 18H21.7C21.7 13.7474 18.2526 10.3 14 10.3V13.7ZM10 13.7H14V10.3H10V13.7Z"
-      fill="currentColor"
+      fill="var(--text-color-primary)"
       mask="url(#path-1-inside-1_9286_2150)"
     />
-    <path d="M3 12L7 8" stroke="var(--active-color-2)" stroke-width="1.7" />
-    <path d="M18 12L22 8" stroke="var(--active-color-2)" stroke-width="1.7" />
+    <path
+      d="M3 12L7 8"
+      stroke="var(--text-color-primary)"
+      stroke-width="1.7"
+    />
+    <path
+      d="M18 12L22 8"
+      stroke="var(--text-color-primary)"
+      stroke-width="1.7"
+    />
     <path
       d="M2.00098 7L6.00098 3"
-      stroke="var(--active-color-2)"
+      stroke="var(--text-color-primary)"
       stroke-width="1.7"
     />
     <path
       d="M17.001 7L21.001 3"
-      stroke="var(--active-color-2)"
+      stroke="var(--text-color-primary)"
       stroke-width="1.7"
     />
   </svg>

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

@@ -10,27 +10,39 @@
       <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="currentColor"
         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" />
+      <circle
+        id="Ellipse 350"
+        cx="10.5"
+        cy="12.5"
+        r="1.5"
+        fill="currentColor"
+      />
+      <circle
+        id="Ellipse 351"
+        cx="19.5"
+        cy="12.5"
+        r="1.5"
+        fill="currentColor"
+      />
       <path
         id="Ellipse 352"
         d="M18 17C18 18.6569 16.6569 20 15 20C13.3431 20 12 18.6569 12 17"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 188"
         d="M8 5L11 8M22 5L19 8"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 189"
         d="M8 25L11 22M22 25L19 22"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
     </g>

package/src/TUIRoom/components/common/widgets/AITools/AISubtitles.vue

@@ -47,8 +47,8 @@ onUnmounted(() => {
   bottom: 80px;
   left: 50%;
   padding: 10px 12px;
-  color: #fff;
-  background-color: rgba(79, 88, 107, 0.7);
+  color: var(--uikit-color-white-1);
+  background-color: var(--uikit-color-black-3);
   border-radius: 8px;
   transform: translateX(-50%);
 }

package/src/TUIRoom/components/common/widgets/AITools/AITranscription.vue

@@ -142,8 +142,8 @@ onUnmounted(() => {
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
-  color: var(--font-color-4);
   text-align: left;
+  color: var(--text-color-secondary);
 
   .speaker {
     max-width: 150px;
@@ -160,7 +160,7 @@ onUnmounted(() => {
   font-weight: 400;
   line-height: 22px;
   text-align: left;
-  background-color: var(--background-color-7);
   border-radius: 8px;
+  background-color: var(--bg-color-bubble-reciprocal);
 }
 </style>

package/src/TUIRoom/components/common/widgets/Notification/InviteNotification/index.ts

@@ -0,0 +1,94 @@
+import { createVNode, render, VNode } from 'vue';
+import TUINotification from './index.vue';
+
+export type invitationInfo = {
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+  roomName: string;
+  roomMemberCount: number;
+  roomOwner: string;
+  roomId: string;
+};
+
+export type NotificationProps = {
+  appendTo: string;
+  customClass?: string;
+  message: invitationInfo;
+  onConfirm?: () => Promise<void>;
+  onCancel?: () => Promise<void>;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  duration?: number;
+};
+
+function NotificationFactory() {
+  let notificationInstance: VNode | null = null;
+  let container: HTMLElement | null = null;
+  let timer: NodeJS.Timer | null = null;
+  let fullscreenElement: HTMLElement | null = null;
+
+  function openInviteNotification(options: NotificationProps) {
+    if (document.getElementById(options.appendTo)) {
+      fullscreenElement = document.getElementById(
+        options.appendTo
+      ) as HTMLElement;
+    } else {
+      fullscreenElement = document.fullscreenElement || document.body;
+    }
+    if (!notificationInstance) {
+      container = document.createElement('div');
+      container.className = 'tui-room-notification';
+      fullscreenElement?.appendChild(container);
+    }
+
+    const {
+      appendTo,
+      customClass,
+      message,
+      onConfirm,
+      onCancel,
+      confirmButtonText,
+      cancelButtonText,
+    } = options;
+    const vnode = createVNode(TUINotification, {
+      appendTo,
+      customClass,
+      message,
+      onConfirm,
+      onCancel,
+      confirmButtonText,
+      cancelButtonText,
+      close,
+    });
+
+    if (container) {
+      render(vnode, container);
+      notificationInstance = vnode;
+    }
+
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(close, options.duration || 30000);
+  }
+
+  function close() {
+    if (container) {
+      render(null, container);
+      fullscreenElement?.removeChild(container);
+      notificationInstance = null;
+      container = null;
+    }
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+
+  return {
+    openInviteNotification,
+  };
+}
+
+export const inviteNotification = NotificationFactory();

package/src/TUIRoom/components/common/widgets/Notification/InviteNotification/index.vue

@@ -0,0 +1,252 @@
+<template>
+  <div v-show="visible" :class="['tui-notification', customClass]">
+    <div class="tui-notification-container" :style="overlayContainerStyle">
+      <div class="tui-notification-message">
+        <div class="invitation-notification-inviter-container">
+          <div class="invitation-notification-inviter">
+            <Avatar class="avatar" :img-src="message.avatarUrl" />
+            <span class="invitation-notification-title">{{
+              t('sb invites you to join the conference', {
+                name: message.userName || message.userId,
+              })
+            }}</span>
+          </div>
+          <span class="invitation-notification-room-name">{{
+            message.roomName
+          }}</span>
+          <div class="invitation-notification-room-info-container">
+            <div class="invitation-notification-room-text-container">
+              <span class="invitation-notification-room-text">
+                {{ t('Host') }}:
+              </span>
+              <span class="invitation-notification-room-text">
+                {{ message.roomOwner }}
+              </span>
+            </div>
+            <i class="invitation-notification-room-text-split"></i>
+            <div>
+              <span class="invitation-notification-room-text">
+                {{ t('Attendees') }}:
+              </span>
+              <span class="invitation-notification-room-text">
+                {{ `${message.roomMemberCount} ${t('people')}` }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <i class="invitation-notification-bottom-split"></i>
+      <div class="invitation-notification-bottom-container">
+        <span class="invitation-notification-bottom" @click="handleCancel">
+          {{ cancelButtonText }}
+        </span>
+        <tui-button
+          class="button-item"
+          style="width: 110px"
+          @click="handleConfirm"
+        >
+          <svg-icon class="icon" :icon="EnterRoomIcon" />
+          <span class="button-text">{{ confirmButtonText }}</span>
+        </tui-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, withDefaults, defineProps } from 'vue';
+import TuiButton from '../../../base/Button.vue';
+import SvgIcon from '../../../base/SvgIcon.vue';
+import useZIndex from '../../../../../hooks/useZIndex';
+import EnterRoomIcon from '../../../../common/icons/EnterRoomIcon.vue';
+import { useI18n } from '../../../../../locales';
+import Avatar from '../../../Avatar.vue';
+import { invitationInfo } from './index';
+
+const { t } = useI18n();
+
+const visible = ref(false);
+const overlayContainerStyle = ref({});
+const { nextZIndex } = useZIndex();
+type BeforeCloseFn = () => void;
+
+interface Props {
+  appendTo: string;
+  customClass?: string;
+  message: invitationInfo;
+  onConfirm?: BeforeCloseFn | null;
+  onCancel?: BeforeCloseFn | null;
+  close?: BeforeCloseFn | null;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  appendTo: '',
+  customClass: '',
+  message: {
+    userId: '',
+    userName: '',
+    avatarUrl: '',
+    roomName: '',
+    roomMemberCount: 0,
+    roomOwner: '',
+    roomId: '',
+  },
+  confirmButtonText: '',
+  cancelButtonText: '',
+  onConfirm: null,
+  onCancel: null,
+  close: null,
+});
+
+watch(visible, val => {
+  if (val) {
+    overlayContainerStyle.value = { zIndex: nextZIndex() };
+  }
+});
+
+function onOpen() {
+  visible.value = true;
+}
+
+const handleConfirm = () => {
+  handleAction(props.onConfirm);
+};
+
+const handleCancel = () => {
+  handleAction(props.onCancel);
+};
+
+const handleAction = (fn: BeforeCloseFn | null) => {
+  if (fn) {
+    fn();
+  }
+  if (props.close) {
+    props.close();
+  }
+};
+
+onMounted(() => {
+  onOpen();
+});
+</script>
+
+<style lang="scss" scoped>
+.tui-notification {
+  .tui-notification-container {
+    position: fixed;
+    top: 7%;
+    right: 1%;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 30px 10px 20px;
+    background-color: var(--uikit-color-white-1);
+    border: 1px solid var(--uikit-color-black-8);
+    border-radius: 15px;
+
+    .tui-notification-message {
+      position: relative;
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+      color: var(--text-color-primary);
+    }
+  }
+
+  .invitation-notification-inviter {
+    display: flex;
+    align-items: center;
+
+    .invitation-notification-title {
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 400;
+      color: var(--text-color-secondary);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .avatar {
+      width: 30px;
+      height: 30px;
+      margin-right: 5px;
+    }
+  }
+
+  .invitation-notification-room-info-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .invitation-notification-room-text {
+      max-width: 20px;
+      overflow: hidden;
+      font-size: 14px;
+      font-weight: 400;
+      color: var(--uikit-color-gray-5);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .invitation-notification-room-text-split {
+    display: block;
+    width: 1px;
+    height: 14px;
+    background-color: var(--uikit-color-black-8);
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+  }
+
+  .invitation-notification-room-name {
+    display: block;
+    max-width: 300px;
+    padding: 5px 0;
+    overflow: hidden;
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--uikit-color-gray-3);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .button-text {
+    padding-left: 5px;
+  }
+
+  .invitation-notification-bottom-split {
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin-top: 15px;
+    background-color: var(--uikit-color-black-8);
+  }
+
+  .invitation-notification-bottom-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .invitation-notification-bottom {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--uikit-color-gray-7);
+      cursor: pointer;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/common/widgets/index.ts

@@ -0,0 +1,10 @@
+import { inviteNotification } from './Notification/InviteNotification';
+import { WidgetsManager } from '../../../services/manager/widgetsManager';
+const widgetsProvider = {
+  notification: {
+    openInviteNotification: inviteNotification.openInviteNotification,
+  },
+};
+export default function initWidgets(widgetsManager: WidgetsManager) {
+  widgetsManager.registerNotificationProvider(widgetsProvider);
+}

package/src/TUIRoom/conference.ts

@@ -26,6 +26,7 @@ export enum RoomEvent {
   USER_LOGOUT = 'UserLogout',
   LANGUAGE_CHANGED = 'LanguageChanged',
   THEME_CHANGED = 'ThemeChanged',
+  CONFERENCE_INVITATION_ACCEPTED = 'ConferenceInvitationAccepted',
 }
 export enum FeatureButton {
   SwitchTheme = 'SwitchTheme',

package/src/TUIRoom/conference.vue

@@ -72,6 +72,9 @@ import {
 } from './services/index';
 import useDeviceManager from './hooks/useDeviceManager';
 import { storeToRefs } from 'pinia';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { theme } = useUIKit();
 
 const isShowPasswordContainer = ref(false);
 const isShowLoading = ref(true);
@@ -198,7 +201,7 @@ const { showHeaderTool } = roomService.basicStore;
 const tuiRoomClass = computed(() => {
   const roomClassList = [
     'tui-room',
-    `tui-theme-${roomService.basicStore.defaultTheme}`,
+    theme.value ? '' : `tui-theme-${roomService.basicStore.defaultTheme}`,
   ];
   if (isMobile) {
     roomClassList.push('tui-room-h5');
@@ -347,8 +350,7 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
 
 <style lang="scss">
 @import './assets/style/global.scss';
-@import './assets/style/black-theme.scss';
-@import './assets/style/white-theme.scss';
+@import '@tencentcloud/uikit-base-component-vue3/dist/styles/index.css';
 
 .tui-room :not([class|='el']) {
   transition:
@@ -367,9 +369,9 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
   min-width: 850px;
   height: 100%;
   min-height: 400px;
-  color: var(--font-color-1);
   text-align: left;
-  background-color: var(--background-color-1);
+  background-color: var(--bg-color-topbar);
+  color: var(--text-color-primary);
 
   .header {
     position: absolute;
@@ -378,8 +380,9 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
     z-index: 1;
     width: 100%;
     height: 64px;
-    background-color: var(--background-color-2);
-    box-shadow: 0 1px 0 var(--header-shadow-color);
+    background-color: var(--bg-color-topbar);
+    box-shadow: 0 1px 0 var(--uikit-color-black-8);
+    border-bottom: 1px solid var(--stroke-color-primary);
   }
 
   .content {
@@ -387,7 +390,7 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
     top: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--background-color-1);
+    background-color: var(--bg-color-topbar);
   }
 
   &.tui-room-h5 {
@@ -418,24 +421,4 @@ const onKickedOffLine = (eventInfo: { message: string }) => {
     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/extension/chatExtension.ts

@@ -195,7 +195,7 @@ export class ChatExtension {
     this.onRoomDestroy = this.onRoomDestroy.bind(this);
     this.onRemoteUserEnterRoom = this.onRemoteUserEnterRoom.bind(this);
     this.onRemoteUserLeaveRoom = this.onRemoteUserLeaveRoom.bind(this);
-    this.onUserRoleChanged = this.onUserRoleChanged.bind(this);
+    this.onUserInfoChanged = this.onUserInfoChanged.bind(this);
   }
   private bindRoomServiceEvent() {
     this.service?.on(EventType.ROOM_DISMISS, this.onRoomDestroy);
@@ -210,8 +210,8 @@ export class ChatExtension {
       this.onRemoteUserLeaveRoom
     );
     roomEngine.instance?.on(
-      TUIRoomEvents.onUserRoleChanged,
-      this.onUserRoleChanged
+      TUIRoomEvents.onUserInfoChanged,
+      this.onUserInfoChanged
     );
   }
   private unBindRoomServiceEvent() {
@@ -227,8 +227,8 @@ export class ChatExtension {
       this.onRemoteUserLeaveRoom
     );
     roomEngine.instance?.off(
-      TUIRoomEvents.onUserRoleChanged,
-      this.onUserRoleChanged
+      TUIRoomEvents.onUserInfoChanged,
+      this.onUserInfoChanged
     );
   }
   private onRemoteUserEnterRoom({
@@ -270,13 +270,8 @@ export class ChatExtension {
       memberCount: newUserList.length,
     });
   }
-  private async onUserRoleChanged({
-    userId,
-    userRole,
-  }: {
-    userId: string;
-    userRole: TUIRole;
-  }) {
+  private async onUserInfoChanged({ userInfo }: { userInfo: TUIUserInfo }) {
+    const { userRole, userId } = userInfo;
     const { userID } = this.chatContext;
     if (userRole === TUIRole.kRoomOwner && userId === userID) {
       const profileResult = await this.getUserProfile([userId]);

package/src/TUIRoom/locales/en-US.ts

@@ -542,4 +542,6 @@ export default {
     'Sure you want to reset the beauty effect?',
   'All beauty parameters will revert to default after reset':
     'All beauty parameters will revert to default after reset',
+  'Theme Colours': 'Theme Colours',
+  'Custom Themes': 'Custom Themes',
 };