@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.1

package/src/TUIRoom/components/RoomContent/StreamContainer/index.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref, watch, computed } from 'vue';
+import { ref, Ref, watch, computed, onMounted } from 'vue';
 import { storeToRefs } from 'pinia';
 import { StreamInfo, useRoomStore } from '../../../stores/room';
 import { useBasicStore } from '../../../stores/basic';
@@ -34,6 +34,8 @@ import MultiStreamView from '../../Stream/MultiStreamView/index.vue';
 import ArrowStroke from '../../common/ArrowStroke.vue';
 import useStreamContainerHooks from './useStreamContainerHooks';
 import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-electron';
+import { roomEngine } from '../../../services';
+import { on } from 'events';
 
 const roomStore = useRoomStore();
 const {
@@ -161,6 +163,19 @@ watch(
   { immediate: true }
 );
 
+onMounted(() => {
+  roomEngine.instance?.getTRTCCloud().callExperimentalAPI(
+    JSON.stringify({
+      api: 'setPrivateConfig',
+      params: {
+        key: 'Liteav.Audio.common.ans.version',
+        value: '4',
+        default: '0',
+      },
+    })
+  );
+});
+
 const showSideList = ref(true);
 const arrowDirection = computed(() => {
   let arrowDirection = 'right';

package/src/TUIRoom/components/RoomFooter/AIControl.vue

@@ -54,6 +54,11 @@ function toggleToolBox() {
   showToolBox.value = !showToolBox.value;
 }
 
+function handleExperienceAsr() {
+  basicStore.setIsExperiencedAI(true);
+  roomService.trackingManager.sendMessage('experience-room-ai');
+}
+
 const toggleAITranscription = () => {
   if (
     basicStore.setSidebarOpenStatus &&
@@ -63,6 +68,7 @@ const toggleAITranscription = () => {
     basicStore.setSidebarName('');
     return;
   }
+  handleExperienceAsr();
   basicStore.setSidebarOpenStatus(true);
   basicStore.setSidebarName('aiTranscription');
   showToolBox.value = false;
@@ -71,6 +77,7 @@ const toggleAITranscription = () => {
 const openAISubtitles = () => {
   showSubtitles.value = !showSubtitles.value;
   showToolBox.value = false;
+  handleExperienceAsr();
   toggleOverlayVisibility(OverlayMap.AISubtitlesOverlay, showSubtitles.value);
 };
 </script>
@@ -84,9 +91,9 @@ const openAISubtitles = () => {
   align-items: center;
   justify-content: center;
   padding: 5px 0;
-  background-color: var(--background-color-2);
   border-radius: 15px;
-  box-shadow: 0 -8px 30px var(--footer-shadow-color);
+  background-color: var(--bg-color-dialog);
+  box-shadow: 0 -8px 30p var(--uikit-color-black-8);
 
   .tool-box-item {
     display: flex;
@@ -104,15 +111,8 @@ const openAISubtitles = () => {
   }
 
   .tool-box-item:hover {
-    background: var(--tool-box-hover);
+    border-radius: 8px;
+    background-color: var(--list-color-hover);
   }
 }
-
-.tui-theme-black .tool-box {
-  --tool-box-hover: rgba(46, 50, 61, 0.7);
-}
-
-.tui-theme-white .tool-box {
-  --tool-box-hover: rgba(79, 88, 107, 0.05);
-}
 </style>

package/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue

@@ -98,14 +98,6 @@ const {
 
 .cancel-button {
   margin-left: 10px;
-  color: #4f586b;
-  background-color: #f0f3fa;
-  border: 1px solid #f0f3fa;
-
-  &:hover {
-    background-color: #f0f3fa;
-    border: 1px solid #f0f3fa;
-  }
 }
 
 .apply-list {
@@ -121,7 +113,7 @@ const {
     display: flex;
     justify-content: space-between;
     padding-bottom: 10px;
-    border-bottom: 1px solid #f0f3fa;
+    border-bottom: 1px solid var(--stroke-color-module);
 
     .apply-list-name,
     .apply-list-operate {
@@ -130,7 +122,7 @@ const {
       font-style: normal;
       font-weight: 500;
       line-height: 22px;
-      color: #4f586b;
+      color: var(--text-color-secondary);
     }
   }
 
@@ -140,7 +132,7 @@ const {
     justify-content: space-between;
     height: 48px;
     margin-top: 8px;
-    border-bottom: 1px solid #f0f3fa;
+    border-bottom: 1px solid var(--stroke-color-module);
 
     .user-info {
       display: flex;
@@ -161,9 +153,9 @@ const {
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
-        color: #4f586b;
         text-overflow: ellipsis;
         white-space: nowrap;
+        color: var(--text-color-secondary);
       }
     }
 
@@ -178,9 +170,9 @@ const {
 
       .reject {
         margin-left: 8px;
-        color: #4f586b;
-        background-color: #f0f3fa;
-        border: 1px solid #f0f3fa;
+        color: var(--text-color-secondary);
+        border: 1px solid var(--button-color-secondary-default);
+        background: var(--button-color-secondary-default);
       }
     }
   }
@@ -199,7 +191,7 @@ const {
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-    color: #8f9ab2;
+    color: var(--uikit-color-gray-light-5);
   }
 }
 </style>

package/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue

@@ -341,9 +341,9 @@ onBeforeUnmount(() => {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: var(--active-color-1);
     border-radius: 8px;
-    box-shadow: 0 4px 16px 0 rgba(47, 48, 164, 0.1);
+    background-color: var(--text-color-link);
+    box-shadow: 0 4px 16px 0 var(--uikit-color-black-8);
 
     &::after {
       position: absolute;
@@ -352,8 +352,8 @@ onBeforeUnmount(() => {
       display: block;
       content: '';
       border: 5px solid transparent;
-      border-top-color: var(--active-color-1);
       transform: translateX(-50%);
+      border-top-color: var(--text-color-link);
     }
   }
 
@@ -366,7 +366,7 @@ onBeforeUnmount(() => {
       font-size: 14px;
       font-weight: 500;
       line-height: 20px;
-      color: #fff;
+      color: var(--uikit-color-white-1);
       white-space: nowrap;
     }
 
@@ -376,7 +376,7 @@ onBeforeUnmount(() => {
 
     .close {
       padding-left: 12px;
-      color: #fff;
+      color: var(--uikit-color-white-1);
       cursor: pointer;
     }
   }
@@ -391,11 +391,11 @@ onBeforeUnmount(() => {
   padding: 14px;
   font-size: 16px;
   font-weight: 500;
-  color: var(--active-color-1);
+  color: var(--text-color-link);
 }
 
 .cancel {
-  color: var(--font-color-4);
+  color: var(--text-color-secondary);
 }
 
 .cancel-button {

package/src/TUIRoom/components/RoomFooter/BasicBeauty.vue

@@ -318,8 +318,8 @@ const handleMouseUp = async () => {
   justify-content: center;
   min-height: 310px;
   overflow: hidden;
-  background-color: var(--black-color);
   border-radius: 8px;
+  background-color: var(--uikit-color-black-1);
 }
 
 .setting {
@@ -327,8 +327,8 @@ const handleMouseUp = async () => {
   flex-direction: column;
   align-items: center;
   margin-top: 10px;
-  border: 1px solid var(--border-color-2);
   border-radius: 8px;
+  border: 1px solid var(--stroke-color-primary);
 
   &-header {
     display: flex;
@@ -339,9 +339,9 @@ const handleMouseUp = async () => {
     font-style: normal;
     font-weight: 500;
     line-height: 44px;
-    color: var(--active-color-1);
-    background-color: var(--background-color-13);
-    border-bottom: 1px solid var(--border-color-2);
+    color: var(--text-color-link);
+    background-color: var(--bg-color-dialog-module);
+    border-bottom: 1px solid var(--stroke-color-primary);
   }
 
   &-container {
@@ -356,11 +356,11 @@ const handleMouseUp = async () => {
     justify-content: center;
     margin-right: 20px;
     font-size: 12px;
-    color: var(--font-color-4);
     text-align: center;
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: 8px;
+    color: var(--text-color-secondary);
 
     &-icon {
       display: flex;
@@ -369,15 +369,15 @@ const handleMouseUp = async () => {
       width: 54px;
       height: 54px;
       overflow: hidden;
-      background-color: #f0f3fa;
       border-radius: 8px;
+      background-color: var(--bg-color-dialog);
+      border: 1px solid var(--stroke-color-primary);
     }
   }
 
   &-item.active {
-    color: #fff;
-    background-color: var(--active-color-1);
-    border: 1px solid var(--active-color-1);
+    background-color: var(--button-color-primary-default);
+    border: 1px solid var(--button-color-primary-default);
   }
 }
 
@@ -392,10 +392,10 @@ const handleMouseUp = async () => {
   justify-content: center;
   height: 30px;
   padding: 4px 12px;
-  color: #fff;
   cursor: pointer;
-  background-color: rgba(0, 0, 0, 0.4);
   border-radius: 6px;
+  color: var(--uikit-color-white-1);
+  background-color: var(--uikit-color-black-5);
 
   .text {
     margin-left: 4px;
@@ -432,11 +432,11 @@ const handleMouseUp = async () => {
   z-index: 3;
   width: 40px;
   height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid var(--active-color-1);
+  border: 4px solid var(--uikit-color-white-2);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   animation: spin 1s linear infinite;
+  border-top: 4px solid var(--text-color-link);
 }
 
 .mask {
@@ -444,7 +444,7 @@ const handleMouseUp = async () => {
   z-index: 2;
   width: 100%;
   height: 100%;
-  background-color: var(--black-color);
+  background-color: var(--uikit-color-black-1);
 }
 
 @keyframes spin {

package/src/TUIRoom/components/RoomFooter/ContactControl.vue

@@ -62,6 +62,6 @@ function handleOnCloseContact() {
   box-sizing: border-box;
   width: 100vw;
   height: auto;
-  background-color: var(--log-out-mobile);
+  background-color: var(--uikit-color-black-8);
 }
 </style>

package/src/TUIRoom/components/RoomFooter/EndControl/index.vue

@@ -22,14 +22,12 @@
             v-model="selectedUser"
             :teleported="false"
             :popper-append-to-body="false"
-            theme="white"
           >
             <tui-option
               v-for="user in remoteEnteredUserList"
               :key="user.userId"
               :value="user.userId"
               :label="user.nameCard || user.userName"
-              theme="white"
             />
           </tui-select>
         </div>
@@ -178,14 +176,14 @@ async function transferAndLeave() {
   .end-button {
     padding: 9px 20px;
     font-size: 14px;
-    color: var(--red-color-2);
-    border: 1.5px solid var(--red-color-2);
     border-radius: 20px;
+    color: var(--text-color-error);
+    border: 1.5px solid var(--text-color-error);
 
     &:hover {
-      color: var(--font-color-7);
-      background: var(--red-color-2);
-      border: 1px solid var(--red-color-2);
+      color: var(--uikit-color-white-1);
+      background: var(--text-color-error);
+      border: 1.5px solid var(--text-color-error);
     }
   }
 }

package/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts

@@ -8,6 +8,7 @@ import useGetRoomEngine from '../../../hooks/useRoomEngine';
 import TUIRoomEngine, {
   TUIRole,
   TUIRoomEvents,
+  TUIUserInfo,
 } from '@tencentcloud/tuiroom-engine-electron';
 import logger from '../../../utils/common/logger';
 import TUIMessage from '../../common/base/Message/index';
@@ -136,13 +137,11 @@ export default function useEndControl() {
     }
   }
 
-  const onUserRoleChanged = async (eventInfo: {
-    userId: string;
-    userRole: TUIRole;
-  }) => {
-    const { userId, userRole } = eventInfo;
+  const onUserInfoChanged = async ({ userInfo }: { userInfo: TUIUserInfo }) => {
+    const { userId, userRole } = userInfo;
     const isLocal = roomStore.localUser.userId === userId;
     const oldUserRole = roomStore.getUserRole(userId);
+    if (oldUserRole === userRole) return;
     roomStore.updateUserInfo({ userId, userRole });
     switch (userRole) {
       case TUIRole.kGeneralUser:
@@ -215,7 +214,7 @@ export default function useEndControl() {
   };
 
   TUIRoomEngine.once('ready', () => {
-    roomEngine.instance?.on(TUIRoomEvents.onUserRoleChanged, onUserRoleChanged);
+    roomEngine.instance?.on(TUIRoomEvents.onUserInfoChanged, onUserInfoChanged);
   });
   const handleMount = () => {
     const { userRole } = roomService.roomStore.localUser;
@@ -229,8 +228,8 @@ export default function useEndControl() {
   roomService.lifeCycleManager.on('mount', handleMount);
   onUnmounted(() => {
     roomEngine.instance?.off(
-      TUIRoomEvents.onUserRoleChanged,
-      onUserRoleChanged
+      TUIRoomEvents.onUserInfoChanged,
+      onUserInfoChanged
     );
     roomService.lifeCycleManager.off('mount', handleMount);
   });

package/src/TUIRoom/components/RoomFooter/FullScreenControl.vue

@@ -16,7 +16,6 @@ import IconButton from '../common/base/IconButton.vue';
 import FullScreenIcon from '../common/icons/FullScreenIcon.vue';
 import { setFullScreen, exitFullScreen } from '../../utils/utils';
 import { useI18n } from '../../locales';
-import { isVue27 } from '../../utils/constants';
 import { roomService } from '../../services';
 
 const { t } = useI18n();
@@ -36,13 +35,8 @@ function toggleScreen() {
   if (isFullScreen.value) {
     exitFullScreen();
   } else {
-    if (isVue27) {
-      const roomContainer = document.body;
-      roomContainer && setFullScreen(roomContainer);
-    } else {
-      const roomContainer = document.getElementById('roomContainer');
-      roomContainer && setFullScreen(roomContainer);
-    }
+    const roomContainer = document.getElementById('roomContainer');
+    roomContainer && setFullScreen(roomContainer);
   }
 }
 

package/src/TUIRoom/components/RoomFooter/VirtualBackground.vue

@@ -139,8 +139,8 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
   justify-content: center;
   min-height: 310px;
   overflow: hidden;
-  background-color: #000;
   border-radius: 8px;
+  background-color: var(--uikit-color-black-1);
 }
 
 .setting {
@@ -149,19 +149,19 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
   align-items: center;
   padding: 1rem;
   margin-top: 10px;
-  border: 1px solid #e4e8ee;
   border-radius: 8px;
+  border: 1px solid var(--stroke-color-primary);
 
   &-item {
     display: flex;
     flex-direction: column;
     justify-content: center;
     font-size: 12px;
-    color: #4f586b;
     text-align: center;
     cursor: pointer;
     border: 1px solid transparent;
     border-radius: 8px;
+    color: var(--text-color-secondary);
 
     &-icon {
       display: flex;
@@ -170,15 +170,16 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
       width: 54px;
       height: 54px;
       overflow: hidden;
-      background-color: #f0f3fa;
       border-radius: 8px;
+      background-color: var(--bg-color-dialog);
+      border: 1px solid var(--stroke-color-primary);
     }
   }
 
   &-item.active {
-    color: #fff;
-    background-color: #1c66e5;
-    border: 1px solid #1c66e5;
+    color: var(--text-color-button);
+    background-color: var(--button-color-primary-default);
+    border: 1px solid var(--button-color-primary-default);
   }
 }
 
@@ -189,8 +190,8 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
   z-index: 3;
   width: 40px;
   height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #1c66e5;
+  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;
@@ -201,7 +202,7 @@ const applyVirtualBackground = async (type: 'close' | 'blur') => {
   z-index: 2;
   width: 100%;
   height: 100%;
-  background-color: #000;
+  background-color: var(--uikit-color-black-1);
 }
 
 @keyframes spin {

package/src/TUIRoom/components/RoomFooter/index/index.vue

@@ -108,8 +108,8 @@ function handleControlClick(name: string) {
   padding: 0.7rem 0;
   padding-right: 24px;
   padding-left: 9px;
-  background-color: var(--background-color-2);
-  box-shadow: 0 -8px 30px var(--footer-shadow-color);
+  background-color: var(--bg-color-topbar);
+  box-shadow: 0 -8px 30px var(--uikit-color-black-8);
 
   .left-container {
     display: flex;

package/src/TUIRoom/components/RoomHeader/RoomInfo/index.vue

@@ -57,21 +57,6 @@ const {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .roomInfo-container {
-  --title-font-color: var(--font-color-1);
-  --item-font-color: var(--font-color-6);
-  --filter-color: drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03))
-    drop-shadow(0px 4px 10px rgba(32, 77, 141, 0.06))
-    drop-shadow(0px 1px 14px rgba(32, 77, 141, 0.05));
-}
-
-.tui-theme-black .roomInfo-container {
-  --title-font-color: #8f9ab2;
-  --item-font-color: var(--font-color-1);
-  --filter-color: drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6))
-    drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
-}
-
 .conference-container {
   position: relative;
   min-width: 140px;
@@ -115,8 +100,10 @@ const {
   flex-direction: column;
   gap: 16px;
   padding: 20px;
-  background-color: var(--background-color-2);
-  filter: var(--filter-color);
+  background-color: var(--bg-color-dialog);
+  box-shadow:
+    0 2px 6px var(--uikit-color-black-8),
+    0 8px 18px var(--uikit-color-black-8);
   border-radius: 16px;
   transform: translateX(-50%);
 
@@ -131,23 +118,23 @@ const {
 
     .roomInfo-title {
       flex-basis: 30%;
-      color: var(--title-font-color);
+      color: var(--text-color-secondary);
     }
 
     .roomInfo-item {
       flex-basis: 50%;
       max-width: 300px;
       overflow: hidden;
-      color: var(--item-font-color);
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: var(--text-color-primary);
     }
 
     .copy-container {
       display: flex;
       margin-left: auto;
-      color: var(--active-color-2);
       cursor: pointer;
+      color: var(--text-color-link);
 
       .copy {
         width: 20px;

package/src/TUIRoom/components/RoomHeader/UserInfo/index.vue

@@ -118,17 +118,6 @@ async function saveUserName(userName: string) {
 }
 </script>
 <style lang="scss" scoped>
-.tui-theme-white .user-control-container {
-  --filter-color: drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03))
-    drop-shadow(0px 4px 10px rgba(32, 77, 141, 0.06))
-    drop-shadow(0px 1px 14px rgba(32, 77, 141, 0.05));
-}
-
-.tui-theme-black .user-control-container {
-  --filter-color: drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6))
-    drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
-}
-
 .user-info-container {
   position: relative;
 
@@ -148,9 +137,9 @@ async function saveUserName(userName: string) {
       margin-left: 10px;
       overflow: hidden;
       font-size: 16px;
-      color: var(--font-color);
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: var(--text-color-primary);
     }
 
     .down-icon {
@@ -169,8 +158,10 @@ async function saveUserName(userName: string) {
     right: 0;
     min-width: 100px;
     padding: 10px;
-    background: #fff;
-    filter: var(--filter-color);
+    background: var(--bg-color-dialog);
+    filter: drop-shadow(0px 0px 4px var(--uikit-color-black-8))
+      drop-shadow(0px 4px 10px var(--uikit-color-black-8))
+      drop-shadow(0px 1px 14px var(--uikit-color-black-8));
     border-radius: 8px;
 
     &::before {
@@ -181,7 +172,7 @@ async function saveUserName(userName: string) {
       content: '';
       border-top: 10px solid transparent;
       border-right: 10px solid transparent;
-      border-bottom: 10px solid #fff;
+      border-bottom: 10px solid var(--bg-color-dialog);
       border-left: 10px solid transparent;
     }
 
@@ -199,7 +190,7 @@ async function saveUserName(userName: string) {
     .user-control-item-head {
       height: 20px;
       font-size: 14px;
-      color: #4f586b;
+      color: var(--text-color-secondary);
       text-align: center;
       cursor: pointer;
     }