diff --git a/Electron/vue2/CHANGELOG.md b/Electron/vue2/CHANGELOG.md index 1940768c8..301e34a72 100644 --- a/Electron/vue2/CHANGELOG.md +++ b/Electron/vue2/CHANGELOG.md @@ -1,3 +1,18 @@ +## 2024.04.29@2.3.1 + +**Feature** + +- 升级 [@tencentcloud/tuiroom-engine-electron](https://www.npmjs.com/package/@tencentcloud/tuiroom-engine-electron) 到 v2.3.1 版本，详情请查看 [发布日志](https://cloud.tencent.com/document/product/1690/89361)； + +**Bug Fixed** +- 修复 Electron 下拔出外接摄像头摄像头列表默认设备未更新的问题; +- 修复成员操作面板距顶部距离不够，展示不完全问题; +- 修复 Notification 组件收到其他成员处理事件时显隐展示的问题; +- 修复获取主持人和管理员身份后没有更新申请上麦列表的问题; +- 修复聊天消息未读数不准确的问题; +- 修复 MessageBox 组件进房后点击按钮无法关闭的问题; +- 修复转交房主或管理员状态下多次点击麦克风和摄像头按钮 disable 状态错误的问题。 + ## 2024.04.08@2.2.2 **Feature** diff --git a/Electron/vue2/package.json b/Electron/vue2/package.json index 750de5094..5b51d7fe8 100644 --- a/Electron/vue2/package.json +++ b/Electron/vue2/package.json @@ -1,6 +1,6 @@ { "name": "room-uikit-electron-vue2", - "version": "2.2.2", + "version": "2.3.1", "private": true, "main": "main.electron.js", "license": "MIT", @@ -62,23 +62,21 @@ "dependencies": { "@tencentcloud/chat": "latest", "@tencentcloud/tui-core": "latest", - "@tencentcloud/tuiroom-engine-electron": "^2.2.2", - "interactjs": "^1.10.26", + "@tencentcloud/tuiroom-engine-electron": "^2.3.1", "@tencentcloud/universal-api": "^2.0.9", "axios": "^0.27.2", "core-js": "^3.8.3", + "interactjs": "^1.10.26", "js-cookie": "^3.0.1", "lodash.isequal": "^4.5.0", "mitt": "^3.0.0", "pinia": "^2.0.28", "sass": "^1.57.1", "tim-js-sdk": "^2.24.2", - "trtc-electron-sdk": "11.6.602-beta.0", + "tsignaling": "^0.10.0", "vue": "^2.7.14", "vue-class-component": "^7.2.3", - "vue-i18n": "^8.28.2", - "vue-i18n-bridge": "^9.2.2", "vue-property-decorator": "^9.1.2", "vue-router": "^3.6.5", "yuv-buffer": "^1.0.0", diff --git a/Electron/vue2/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts b/Electron/vue2/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts index 5e80f0ba3..8c0b91346 100644 --- a/Electron/vue2/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts +++ b/Electron/vue2/src/TUIRoom/components/Chat/ChatEditor/useChatEditor.ts @@ -44,6 +44,9 @@ export default function useChatEditor() { isEmojiToolbarVisible.value = false; try { const tim = roomEngine.instance?.getTIM(); + if (!tim) { + throw new Error('tim is null'); + } const message = tim.createTextMessage({ to: roomId.value, conversationType: TencentCloudChat.TYPES.CONV_GROUP, diff --git a/Electron/vue2/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts b/Electron/vue2/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts index b657dc3f0..f8d5ec184 100644 --- a/Electron/vue2/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts +++ b/Electron/vue2/src/TUIRoom/components/Chat/MessageList/useMessageListHook.ts @@ -21,7 +21,7 @@ export default function useMessageList() { async function handleGetHistoryMessageList() { const tim = roomEngine.instance?.getTIM(); - const imResponse = await tim.getMessageList({ + const imResponse = await tim?.getMessageList({ conversationID: `GROUP${roomId.value}`, nextReqMessageID: nextReqMessageId.value, }); diff --git a/Electron/vue2/src/TUIRoom/components/ManageMember/MemberControl/index.vue b/Electron/vue2/src/TUIRoom/components/ManageMember/MemberControl/index.vue index 00f6c2784..2a3e00c10 100644 --- a/Electron/vue2/src/TUIRoom/components/ManageMember/MemberControl/index.vue +++ b/Electron/vue2/src/TUIRoom/components/ManageMember/MemberControl/index.vue @@ -98,14 +98,14 @@ function toggleClickMoreBtn() { } } -// 根据页面位置确定下拉框的定位 function handleDropDownPosition() { const { top, bottom } = moreBtnRef.value?.getBoundingClientRect(); - const containerBottom = document.getElementById('memberListContainer')?.getBoundingClientRect()?.bottom; - if (!containerBottom) { + const { top: containerTop, bottom: containerBottom } = document.getElementById('memberListContainer')?.getBoundingClientRect() as DOMRect; + if (!containerBottom || !containerTop) { return; } const bottomSize = containerBottom - bottom; + const topSize = top - containerTop; let dropDownContainerHeight = 0; if (!showMoreControl.value) { operateListRef.value.style = 'display:block;position:absolute;z-index:-1000'; @@ -114,7 +114,10 @@ function handleDropDownPosition() { } else { dropDownContainerHeight = operateListRef.value?.offsetHeight; } - if (bottomSize < top && bottomSize < dropDownContainerHeight) { + if (topSize < dropDownContainerHeight) { + return; + } + if (bottomSize < dropDownContainerHeight) { dropdownClass.value = 'up'; } } diff --git a/Electron/vue2/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue b/Electron/vue2/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue index 0d1161140..f57bf6478 100644 --- a/Electron/vue2/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue +++ b/Electron/vue2/src/TUIRoom/components/ManageMember/MemberItemCommon/MemberInfo.vue @@ -13,6 +13,7 @@
{{ extraInfo }}
diff --git a/Electron/vue2/src/TUIRoom/components/ManageMember/index.vue b/Electron/vue2/src/TUIRoom/components/ManageMember/index.vue index 9dcd78ec9..ff7ca283a 100644 --- a/Electron/vue2/src/TUIRoom/components/ManageMember/index.vue +++ b/Electron/vue2/src/TUIRoom/components/ManageMember/index.vue @@ -224,7 +224,6 @@ const { } } .member-list-container { - overflow-y: scroll; flex: 1; margin-top: 10px; overflow-y: scroll; diff --git a/Electron/vue2/src/TUIRoom/components/RoomContent/StreamContainer/index.vue b/Electron/vue2/src/TUIRoom/components/RoomContent/StreamContainer/index.vue index 1635f311f..c14f9440d 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomContent/StreamContainer/index.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomContent/StreamContainer/index.vue @@ -9,7 +9,13 @@ >
-
+
{ roomStore.updateUserStreamVisible(streamUserIdList); }; +// 处理顶部布局水平滑动 +function handleWheel(event: WheelEvent) { + streamListRef.value.scrollLeft += event.deltaY; +} + const handleStreamContainerScrollDebounce = debounce(handleStreamContainerScroll, 300); onMounted(() => { diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue index 94b7f6036..a0b3bc425 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/index.vue @@ -35,8 +35,19 @@ {{ t('Currently no member has applied to go on stage') }}
@@ -46,7 +57,7 @@ diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/useMasterApplyControlHooks.ts b/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/useMasterApplyControlHooks.ts deleted file mode 100644 index e2d2925df..000000000 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MasterApplyControl/useMasterApplyControlHooks.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { storeToRefs } from 'pinia'; -import { computed, watch } from 'vue'; -import { useBasicStore } from '../../../../stores/basic'; -import { useRoomStore } from '../../../../stores/room'; -import useMasterApplyControl from '../../../../hooks/useMasterApplyControl'; -import { useI18n } from '../../../../locales'; -import TUINotification from '../../../common/base/Notification/index'; -import { isMobile } from '../../../../utils/environment'; - -export default function useMasterApplyControlHooks() { - const { t } = useI18n(); - const basicStore = useBasicStore(); - const roomStore = useRoomStore(); - const { handleUserApply, handleAllUserApply } = useMasterApplyControl(); - const { showApplyUserList } = storeToRefs(basicStore); - const { applyToAnchorList } = storeToRefs(roomStore); - - const applyToAnchorUserCount = computed(() => applyToAnchorList.value.length); - const noUserApply = computed(() => applyToAnchorUserCount.value === 0); - - const handleConfirm = async (onlyOneUserTakeStage: boolean, userId: string) => { - if (isMobile) { - basicStore.setSidebarOpenStatus(true); - basicStore.setSidebarName('apply'); - } else { - if (onlyOneUserTakeStage) { - handleUserApply(userId, true); - } else { - basicStore.setShowApplyUserList(true); - } - } - }; - - const handleCancel = async (onlyOneUserTakeStage: boolean, userId: string) => { - if (!isMobile && onlyOneUserTakeStage) { - handleUserApply(userId, false); - } - }; - - watch(applyToAnchorUserCount, (newVal, oldVal) => { - if (newVal <= oldVal) return; - const onlyOneUserTakeStage = newVal === 1; - const firstUser = applyToAnchorList.value[0]; - const userName = firstUser?.userName || firstUser?.userId; - const message = onlyOneUserTakeStage - ? `${userName} ${t('Applying for the stage')}` - : `${userName} ${t('and so on number people applying to stage', { number: applyToAnchorList.value.length })}`; - TUINotification({ - message, - appendToRoomContainer: true, - confirmButtonText: isMobile ? t('Check') : (onlyOneUserTakeStage ? t('Agree to the stage') : t('Check')), - cancelButtonText: isMobile ? undefined : (onlyOneUserTakeStage ? t('Reject') : t('Neglect')), - confirm: () => handleConfirm(onlyOneUserTakeStage, firstUser?.userId), - cancel: () => handleCancel(onlyOneUserTakeStage, firstUser?.userId), - }); - }); - - function hideApplyList() { - basicStore.setShowApplyUserList(false); - } - - return { - t, - roomStore, - showApplyUserList, - hideApplyList, - applyToAnchorUserCount, - applyToAnchorList, - handleAllUserApply, - handleUserApply, - noUserApply, - }; -} diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue index c96715636..bee8281f6 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomFooter/ApplyControl/MemberApplyControl.vue @@ -199,6 +199,12 @@ function handleStepDownDialogVisible() { async function leaveSeat() { await roomEngine.instance?.leaveSeat(); showDialog.value = false; + if (roomStore.isCameraDisableForAllUser && isGeneralUser.value) { + roomStore.setCanControlSelfVideo(false); + } + if (roomStore.isMicrophoneDisableForAllUser && isGeneralUser.value) { + roomStore.setCanControlSelfAudio(false); + } } function hideApplyAttention() { @@ -318,7 +324,6 @@ onBeforeUnmount(() => { } .mobile-info { min-width: 50vw; - white-space: normal; } .close { cursor: pointer; diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/AudioControl.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/AudioControl.vue index eddd5c62a..54e157e74 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/AudioControl.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomFooter/AudioControl.vue @@ -118,7 +118,6 @@ async function toggleMuteAudio() { TUIMessageBox({ title: t('Note'), message: t('Microphone not detected on current device'), - appendToRoomContainer: true, confirmButtonText: t('Sure'), }); return; diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/index.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/index.vue index 7d4018601..0bbc289f8 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/index.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/index.vue @@ -175,7 +175,6 @@ const onRoomDismissed = async (eventInfo: { roomId: string }) => { TUIMessageBox({ title: t('Note'), message: t('The host closed the room.'), - appendToRoomContainer: true, confirmButtonText: t('Sure'), callback: async () => { resetState(); diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts b/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts index f72a1031e..033d4add8 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts +++ b/Electron/vue2/src/TUIRoom/components/RoomFooter/EndControl/useEndControlHooks.ts @@ -1,6 +1,6 @@ import { ref, Ref, computed, onUnmounted } from 'vue'; import { useBasicStore } from '../../../stores/basic'; -import { useRoomStore } from '../../../stores/room'; +import { useRoomStore, UserInfo } from '../../../stores/room'; import { useChatStore } from '../../../stores/chat'; import { storeToRefs } from 'pinia'; import { useI18n } from '../../../locales'; @@ -25,7 +25,7 @@ export default function useEndControl() { logger.log(`${logPrefix} basicStore:`, basicStore); const roomStore = useRoomStore(); - const { localUser, remoteUserList } = storeToRefs(roomStore); + const { localUser, remoteUserList, applyToAnchorList } = storeToRefs(roomStore); const title = computed(() => (currentDialogType.value === DialogType.BasicDialog ? t('Leave room?') : t('Select a new host'))); const isShowLeaveRoomDialog = computed(() => ( roomStore.isMaster && remoteUserList.value.length > 0) @@ -87,6 +87,24 @@ export default function useEndControl() { } } + async function handleUpdateSeatApplicationList() { + if (!roomStore.isSpeakAfterTakingSeatMode) { + return; + } + if (applyToAnchorList.value.length > 0) { + applyToAnchorList.value.forEach((user: UserInfo) => { + user.applyToAnchorRequestId && roomStore.removeApplyToAnchorUser(user.applyToAnchorRequestId); + }); + } + const applicationList = await roomEngine.instance?.getSeatApplicationList(); + if (applicationList && applicationList.length > 0) { + for (const applicationInfo of applicationList) { + const { userId, requestId, timestamp } = applicationInfo; + roomStore.addApplyToAnchorUser({ userId, requestId, timestamp }); + } + } + } + const onUserRoleChanged = async (eventInfo: { userId: string, userRole: TUIRole }) => { const { userId, userRole } = eventInfo; const isLocal = roomStore.localUser.userId === userId; @@ -108,6 +126,12 @@ export default function useEndControl() { if (oldUserRole === TUIRole.kAdministrator) { TUIMessage({ type: 'warning', message: t('Your administrator status has been revoked') }); } + if (roomStore.localStream.hasAudioStream) { + roomStore.setCanControlSelfAudio(true); + } + if (roomStore.localStream.hasVideoStream) { + roomStore.setCanControlSelfVideo(true); + } } break; case TUIRole.kAdministrator: @@ -115,6 +139,9 @@ export default function useEndControl() { TUIMessage({ type: 'success', message: t('You have become a administrator') }); roomStore.setCanControlSelfAudio(true); roomStore.setCanControlSelfVideo(true); + if (roomStore.isSpeakAfterTakingSeatMode) { + handleUpdateSeatApplicationList(); + } } break; case TUIRole.kRoomOwner: { @@ -125,13 +152,7 @@ export default function useEndControl() { if (!roomStore.isAnchor) { await roomEngine.instance?.takeSeat({ seatIndex: -1, timeout: 0 }); } - const applicationList = await roomEngine.instance?.getSeatApplicationList(); - if (applicationList) { - for (const applicationInfo of applicationList) { - const { userId, requestId, timestamp } = applicationInfo; - roomStore.addApplyToAnchorUser({ userId, requestId, timestamp }); - } - } + handleUpdateSeatApplicationList(); } if (chatStore.isMessageDisableByAdmin) { roomEngine.instance?.disableSendingMessageByAdmin({ diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/ManageStageControl.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/ManageStageControl.vue index 528a3d980..b7fda321b 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/ManageStageControl.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomFooter/ManageStageControl.vue @@ -27,11 +27,13 @@ import { useI18n } from '../../locales'; import TuiBadge from '../common/base/Badge.vue'; import { isMobile } from '../../utils/environment'; import MasterApplyControl from './ApplyControl/MasterApplyControl/index.vue'; +import useMasterApplyControl from '../../hooks/useMasterApplyControl'; const { t } = useI18n(); const basicStore = useBasicStore(); const roomStore = useRoomStore(); +const { handleShowNotification } = useMasterApplyControl(); const { sidebarName, showApplyUserList } = storeToRefs(basicStore); const { applyToAnchorList } = storeToRefs(roomStore); @@ -48,4 +50,7 @@ function toggleManageStage() { basicStore.setSidebarName('apply'); } } + +handleShowNotification(); + diff --git a/Electron/vue2/src/TUIRoom/components/RoomFooter/VideoControl.vue b/Electron/vue2/src/TUIRoom/components/RoomFooter/VideoControl.vue index 2793405a4..10286657f 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomFooter/VideoControl.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomFooter/VideoControl.vue @@ -118,7 +118,6 @@ async function toggleMuteVideo() { TUIMessageBox({ title: t('Note'), message: t('Camera not detected on current device'), - appendToRoomContainer: true, confirmButtonText: t('Sure'), }); return; diff --git a/Electron/vue2/src/TUIRoom/components/RoomHome/RoomControl/index.vue b/Electron/vue2/src/TUIRoom/components/RoomHome/RoomControl/index.vue index 7013d02f4..7c2d0b0cd 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomHome/RoomControl/index.vue +++ b/Electron/vue2/src/TUIRoom/components/RoomHome/RoomControl/index.vue @@ -83,9 +83,8 @@ import { useBasicStore } from '../../../stores/basic'; import { useRoomStore } from '../../../stores/room'; import AudioMediaControl from '../../common/AudioMediaControl.vue'; import VideoMediaControl from '../../common/VideoMediaControl.vue'; -import TUIRoomEngine, { TUIRoomEvents, TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode, TUIRoomDeviceMangerEvents } from '@tencentcloud/tuiroom-engine-electron'; +import TUIRoomEngine, { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode, TUIRoomDeviceMangerEvents } from '@tencentcloud/tuiroom-engine-electron'; import '../../../directives/vClickOutside'; -import { isElectron } from '../../../utils/environment'; import { isEnumerateDevicesSupported, isGetUserMediaSupported } from '../../../utils/mediaAbility'; import useDeviceManager from '../../../hooks/useDeviceManager'; @@ -134,38 +133,21 @@ async function openCamera() { rotation: TRTCVideoRotation.TRTCVideoRotation0, fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill, }); - if (isElectron) { - roomEngine.instance?.setLocalVideoView({ view: 'stream-preview' }); - await roomEngine.instance?.openLocalCamera(); - } else { - await roomEngine.instance?.startCameraDeviceTest({ - view: 'stream-preview', - }); - } + await roomEngine.instance?.startCameraDeviceTest({ + view: 'stream-preview', + }); } async function closeCamera() { - if (isElectron) { - await roomEngine.instance?.closeLocalCamera(); - } else { - await roomEngine.instance?.stopCameraDeviceTest(); - } + await roomEngine.instance?.stopCameraDeviceTest(); } async function openAudio() { - if (isElectron) { - await roomEngine.instance?.openLocalMicrophone(); - } else { - await roomEngine.instance?.startMicDeviceTest({ interval: 200 }); - } + await roomEngine.instance?.startMicDeviceTest({ interval: 200 }); } async function closeAudio() { - if (isElectron) { - await roomEngine.instance?.closeLocalMicrophone(); - } else { - await roomEngine.instance?.stopMicDeviceTest(); - } + await roomEngine.instance?.stopMicDeviceTest(); } async function toggleMuteAudio() { @@ -259,22 +241,13 @@ function enterRoom() { TUIRoomEngine.once('ready', () => { startStreamPreview(); - if (isElectron) { - roomEngine.instance?.on(TUIRoomEvents.onUserVoiceVolumeChanged, onUserVoiceVolume); - } else { - deviceManager.instance?.on(TUIRoomDeviceMangerEvents.onTestMicVolume, onUserVoiceVolume); - } + deviceManager.instance?.on(TUIRoomDeviceMangerEvents.onTestMicVolume, onUserVoiceVolume); }); onBeforeUnmount(async () => { await closeAudio(); await closeCamera(); - - if (isElectron) { - roomEngine.instance?.off(TUIRoomEvents.onUserVoiceVolumeChanged, onUserVoiceVolume); - } else { - deviceManager.instance?.off(TUIRoomDeviceMangerEvents.onTestMicVolume, onUserVoiceVolume); - } + deviceManager.instance?.off(TUIRoomDeviceMangerEvents.onTestMicVolume, onUserVoiceVolume); }); diff --git a/Electron/vue2/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts b/Electron/vue2/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts index c8a485e6c..4cf21c784 100644 --- a/Electron/vue2/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts +++ b/Electron/vue2/src/TUIRoom/components/RoomSidebar/useSideBarHooks.ts @@ -64,13 +64,15 @@ export default function useSideBar() { }; let tim = roomEngine.instance?.getTIM(); + tim?.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage); + watch(sdkAppId, () => { - if (!tim) { + if (!tim && sdkAppId.value) { tim = TencentCloudChat.create({ SDKAppID: basicStore.sdkAppId }); + tim?.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage); } - tim?.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage); - }, { immediate: true }); + }); onUnmounted(() => { tim?.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onReceiveMessage); diff --git a/Electron/vue2/src/TUIRoom/components/common/AudioMediaControl.vue b/Electron/vue2/src/TUIRoom/components/common/AudioMediaControl.vue index de3e926a5..67e7ed708 100644 --- a/Electron/vue2/src/TUIRoom/components/common/AudioMediaControl.vue +++ b/Electron/vue2/src/TUIRoom/components/common/AudioMediaControl.vue @@ -73,7 +73,6 @@ async function handleClickIcon() { TUIMessageBox({ title: t('Note'), message: t('The current browser does not support capturing audio'), - appendToRoomContainer: true, confirmButtonText: t('Sure'), }); return; diff --git a/Electron/vue2/src/TUIRoom/components/common/RoomTime.vue b/Electron/vue2/src/TUIRoom/components/common/RoomTime.vue index 5504a80b9..30b167c45 100644 --- a/Electron/vue2/src/TUIRoom/components/common/RoomTime.vue +++ b/Electron/vue2/src/TUIRoom/components/common/RoomTime.vue @@ -35,7 +35,5 @@ onUnmounted(() => { font-size: 14px; font-weight: 500; line-height: 20px; - width: 38px; - letter-spacing: -0.24px; } diff --git a/Electron/vue2/src/TUIRoom/components/common/VideoMediaControl.vue b/Electron/vue2/src/TUIRoom/components/common/VideoMediaControl.vue index 9a27acf13..da8c03a29 100644 --- a/Electron/vue2/src/TUIRoom/components/common/VideoMediaControl.vue +++ b/Electron/vue2/src/TUIRoom/components/common/VideoMediaControl.vue @@ -73,7 +73,6 @@ async function handleClickIcon() { TUIMessageBox({ title: t('Note'), message: t('The current browser does not support capturing video'), - appendToRoomContainer: true, confirmButtonText: t('Sure'), }); return; diff --git a/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.ts b/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.ts index e4ee127d5..de4d9e868 100644 --- a/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.ts +++ b/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.ts @@ -4,17 +4,20 @@ export type MessageProps = { title: string, message: string, callback?: () => Promise, - appendToRoomContainer?: boolean, confirmButtonText?: string, } -const MessageBox = ({ title, message, callback, appendToRoomContainer, confirmButtonText }: MessageProps) => { + +const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProps) => { const container = document.createElement('div'); - document.body.appendChild(container); + const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.body; + fullscreenElement.appendChild(container); + + const onRemove = () => { vm.$destroy(); - document.body.removeChild(container); + fullscreenElement.removeChild(container); }; - const messageBoxConstruct = Vue.extend({ + const MessageBoxConstruct = Vue.extend({ render: (h: any) => h(TUIMessageBox, { props: { title, @@ -22,14 +25,10 @@ const MessageBox = ({ title, message, callback, appendToRoomContainer, confirmBu callback, confirmButtonText, remove: onRemove, - appendToRoomContainer, - }, - on: { - remove: onRemove, }, }), }); - const vm = new messageBoxConstruct({el: document.createElement('div')}).$mount() - container.appendChild(vm.$el) + const vm = new MessageBoxConstruct({ el: document.createElement('div') }).$mount(); + container.appendChild(vm.$el); }; export default MessageBox; diff --git a/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.vue b/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.vue index 7f5c44d5a..e39af9b21 100644 --- a/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.vue +++ b/Electron/vue2/src/TUIRoom/components/common/base/MessageBox/index.vue @@ -1,8 +1,7 @@