From 7b721cb86f476bf2184dccc9695cf435630f92f3 Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Tue, 26 Sep 2023 19:03:29 +0200 Subject: [PATCH] [mirotalksfu] - improve tooltips --- public/js/Room.js | 139 +++++++++++++++++--------------- public/js/RoomClient.js | 172 ++++++++++++++++++++-------------------- 2 files changed, 159 insertions(+), 152 deletions(-) diff --git a/public/js/Room.js b/public/js/Room.js index 3da380b5..7147b64f 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -141,40 +141,15 @@ const RoomURL = window.location.origin + '/join/' + room_id; function initClient() { setTheme(); if (!DetectRTC.isMobileDevice) { - setTippy('shareButton', 'Share room', 'right'); - setTippy('hideMeButton', 'Toggle hide self view', 'right'); - setTippy('startAudioButton', 'Start the audio', 'right'); - setTippy('stopAudioButton', 'Stop the audio', 'right'); - setTippy('startVideoButton', 'Start the video', 'right'); - setTippy('stopVideoButton', 'Stop the video', 'right'); - setTippy('startScreenButton', 'Start screen share', 'right'); - setTippy('stopScreenButton', 'Stop screen share', 'right'); - setTippy('raiseHandButton', 'Raise your hand', 'right'); - setTippy('lowerHandButton', 'Lower your hand', 'right'); - setTippy('swapCameraButton', 'Swap the camera', 'right'); - setTippy('chatButton', 'Toggle the chat', 'right'); - setTippy('participantsButton', 'Toggle participants', 'right'); - setTippy('whiteboardButton', 'Toggle the whiteboard', 'right'); - setTippy('settingsButton', 'Toggle the settings', 'right'); - setTippy('aboutButton', 'About this project', 'right'); - setTippy('exitButton', 'Leave room', 'right'); - setTippy('mySettingsCloseBtn', 'Close', 'right'); - setTippy('tabVideoDevicesBtn', 'Video devices', 'top'); - setTippy('tabAudioDevicesBtn', 'Audio devices', 'top'); - setTippy('tabRecordingBtn', 'Recording', 'top'); - setTippy('tabRoomBtn', 'Room', 'top'); - setTippy('tabVideoShareBtn', 'Video share', 'top'); - setTippy('tabProfileBtn', 'Profile', 'top'); - setTippy('tabAspectBtn', 'Aspect', 'top'); - setTippy('tabStylingBtn', 'Styling', 'top'); - setTippy('tabLanguagesBtn', 'Languages', 'top'); + refreshMainButtonsToolTipPosition(); + setTippy('mySettingsCloseBtn', 'Close', 'top-end'); setTippy( 'switchPushToTalk', 'If Active, When SpaceBar keydown the microphone will be resumed, on keyup will be paused, like a walkie-talkie.', 'right', ); - setTippy('lobbyAcceptAllBtn', 'Accept', 'top'); - setTippy('lobbyRejectAllBtn', 'Reject', 'top'); + setTippy('lobbyAcceptAllBtn', 'Accept', 'top-end'); + setTippy('lobbyRejectAllBtn', 'Reject', 'top-end'); setTippy( 'switchLobby', 'Lobby mode lets you protect your meeting by only allowing people to enter after a formal approval by a moderator', @@ -205,17 +180,17 @@ function initClient() { setTippy('whiteboardCleanBtn', 'Clean', 'bottom'); setTippy('whiteboardLockButton', 'If enabled, participants cannot interact', 'right'); setTippy('whiteboardCloseBtn', 'Close', 'right'); - setTippy('chatCleanTextButton', 'Clean', 'top'); - setTippy('chatPasteButton', 'Paste', 'top'); - setTippy('chatSendButton', 'Send', 'top'); - setTippy('showChatOnMsg', 'Show chat on new message comes', 'top'); - setTippy('speechIncomingMsg', 'Speech the incoming messages', 'top'); - setTippy('chatSpeechStartButton', 'Start speech recognition', 'top'); - setTippy('chatSpeechStopButton', 'Stop speech recognition', 'top'); - setTippy('chatEmojiButton', 'Emoji', 'top'); - setTippy('chatMarkdownButton', 'Markdown', 'top'); - setTippy('chatGPTButton', 'ChatGPT', 'top'); - setTippy('chatShareFileButton', 'Share file', 'top'); + setTippy('chatCleanTextButton', 'Clean', 'top-end'); + setTippy('chatPasteButton', 'Paste', 'top-end'); + setTippy('chatSendButton', 'Send', 'top-end'); + setTippy('showChatOnMsg', 'Show chat on new message comes', 'top-end'); + setTippy('speechIncomingMsg', 'Speech the incoming messages', 'top-end'); + setTippy('chatSpeechStartButton', 'Start speech recognition', 'top-end'); + setTippy('chatSpeechStopButton', 'Stop speech recognition', 'top-end'); + setTippy('chatEmojiButton', 'Emoji', 'top-end'); + setTippy('chatMarkdownButton', 'Markdown', 'top-end'); + setTippy('chatGPTButton', 'ChatGPT', 'top-end'); + setTippy('chatShareFileButton', 'Share file', 'top-end'); setTippy('chatCleanButton', 'Clean', 'bottom'); setTippy('chatSaveButton', 'Save', 'bottom'); setTippy('chatGhostButton', 'Toggle transparent background', 'bottom'); @@ -229,12 +204,42 @@ function initClient() { initEnumerateDevices(); } +// #################################################### +// HANDLE MAIN BUTTONS TOOLTIP +// #################################################### + +function refreshMainButtonsToolTipPosition() { + const mainBtnTTPosition = + BtnsBarPosition.options[BtnsBarPosition.selectedIndex].value == 'vertical' ? 'right' : 'top-end'; + setTippy('shareButton', 'Share room', mainBtnTTPosition); + setTippy('hideMeButton', 'Toggle hide self view', mainBtnTTPosition); + setTippy('startAudioButton', 'Start the audio', mainBtnTTPosition); + setTippy('stopAudioButton', 'Stop the audio', mainBtnTTPosition); + setTippy('startVideoButton', 'Start the video', mainBtnTTPosition); + setTippy('stopVideoButton', 'Stop the video', mainBtnTTPosition); + setTippy('startScreenButton', 'Start screen share', mainBtnTTPosition); + setTippy('stopScreenButton', 'Stop screen share', mainBtnTTPosition); + setTippy('raiseHandButton', 'Raise your hand', mainBtnTTPosition); + setTippy('lowerHandButton', 'Lower your hand', mainBtnTTPosition); + setTippy('swapCameraButton', 'Swap the camera', mainBtnTTPosition); + setTippy('chatButton', 'Toggle the chat', mainBtnTTPosition); + setTippy('participantsButton', 'Toggle participants', mainBtnTTPosition); + setTippy('whiteboardButton', 'Toggle the whiteboard', mainBtnTTPosition); + setTippy('settingsButton', 'Toggle the settings', mainBtnTTPosition); + setTippy('aboutButton', 'About this project', mainBtnTTPosition); + setTippy('exitButton', 'Leave room', mainBtnTTPosition); +} + // #################################################### // HANDLE TOOLTIP // #################################################### function setTippy(elem, content, placement, allowHTML = false) { - tippy(document.getElementById(elem), { + const element = document.getElementById(elem); + if (element._tippy) { + element._tippy.destroy(); + } + tippy(element, { content: content, placement: placement, allowHTML: allowHTML, @@ -769,7 +774,7 @@ async function shareRoom(useNavigator = false) { if (navigator.share && useNavigator) { try { await navigator.share({ url: RoomURL }); - userLog('info', 'Room Shared successfully', 'top'); + userLog('info', 'Room Shared successfully', 'top-end'); } catch (err) { share(); } @@ -837,7 +842,7 @@ function copyRoomURL() { tmpInput.setSelectionRange(0, 99999); // For mobile devices navigator.clipboard.writeText(tmpInput.value); document.body.removeChild(tmpInput); - userLog('info', 'Meeting URL copied to clipboard 👍', 'top'); + userLog('info', 'Meeting URL copied to clipboard 👍', 'top-end'); } function shareRoomByEmail() { @@ -1325,11 +1330,11 @@ function handleButtons() { function setButtonsInit() { if (!DetectRTC.isMobileDevice) { - setTippy('initAudioButton', 'Toggle the audio', 'top'); - setTippy('initVideoButton', 'Toggle the video', 'top'); - setTippy('initAudioVideoButton', 'Toggle the audio & video', 'top'); - setTippy('initStartScreenButton', 'Toggle screen sharing', 'top'); - setTippy('initStopScreenButton', 'Toggle screen sharing', 'top'); + setTippy('initAudioButton', 'Toggle the audio', 'top-end'); + setTippy('initVideoButton', 'Toggle the video', 'top-end'); + setTippy('initAudioVideoButton', 'Toggle the audio & video', 'top-end'); + setTippy('initStartScreenButton', 'Toggle screen sharing', 'top-end'); + setTippy('initStopScreenButton', 'Toggle screen sharing', 'top-end'); } initAudioButton = document.getElementById('initAudioButton'); initVideoButton = document.getElementById('initVideoButton'); @@ -1438,7 +1443,7 @@ async function changeCamera(deviceId) { }) .catch((err) => { console.error('[Error] changeCamera', err); - userLog('error', 'Error while swapping camera' + err, 'top'); + userLog('error', 'Error while swapping camera' + err, 'top-end'); }); } @@ -1609,6 +1614,7 @@ function handleSelects() { rc.changeBtnsBarPosition(BtnsBarPosition.value); lsSettings.buttons_bar = BtnsBarPosition.selectedIndex; lS.setSettings(lsSettings); + refreshMainButtonsToolTipPosition(); }; pinVideoPosition.onchange = () => { rc.togglePin(pinVideoPosition.value); @@ -1753,6 +1759,7 @@ function loadSettingsFromLocalStorage() { rc.handleVideoControls(BtnVideoControls.value); rc.changeBtnsBarPosition(BtnsBarPosition.value); rc.togglePin(pinVideoPosition.value); + refreshMainButtonsToolTipPosition(); } // #################################################### @@ -2229,7 +2236,7 @@ function whiteboardAddObj(type) { addWbCanvasObj(myImg); }); } else { - userLog('error', 'The URL is not a valid image', 'top'); + userLog('error', 'The URL is not a valid image', 'top-end'); } } }); @@ -2266,7 +2273,7 @@ function whiteboardAddObj(type) { }; reader.readAsDataURL(wbCanvasImg); } else { - userLog('error', 'File not selected or empty', 'top'); + userLog('error', 'File not selected or empty', 'top-end'); } } }); @@ -2476,7 +2483,7 @@ function whiteboardAction(data, emit = true) { userLog( 'info', `${data.peer_name} whiteboard action: ${data.action}`, - 'top', + 'top-end', ); } @@ -2691,24 +2698,24 @@ async function getParticipantsTable(peers) { function setParticipantsTippy(peers) { // if (!DetectRTC.isMobileDevice) { - setTippy('muteAllButton', 'Mute all participants', 'top'); - setTippy('hideAllButton', 'Hide all participants', 'top'); - setTippy('stopAllButton', 'Stop screen share to all participants', 'top'); - setTippy('sendAllButton', 'Share file to all', 'top'); - setTippy('sendMessageToAll', 'Send message to all', 'top'); - setTippy('sendVideoToAll', 'Share video to all', 'top'); - setTippy('ejectAllButton', 'Eject all participants', 'top'); + setTippy('muteAllButton', 'Mute all participants', 'top-end'); + setTippy('hideAllButton', 'Hide all participants', 'top-end'); + setTippy('stopAllButton', 'Stop screen share to all participants', 'top-end'); + setTippy('sendAllButton', 'Share file to all', 'top-end'); + setTippy('sendMessageToAll', 'Send message to all', 'top-end'); + setTippy('sendVideoToAll', 'Share video to all', 'top-end'); + setTippy('ejectAllButton', 'Eject all participants', 'top-end'); // for (let peer of Array.from(peers.keys())) { let peer_info = peers.get(peer).peer_info; let peer_id = peer_info.peer_id; - setTippy(peer_id + '___pAudio', 'Mute', 'top'); - setTippy(peer_id + '___pVideo', 'Hide', 'top'); - setTippy(peer_id + '___pScreen', 'Stop', 'top'); - setTippy(peer_id + '___shareFile', 'Share file', 'top'); - setTippy(peer_id + '___sendMessageTo', 'Send private message', 'top'); - setTippy(peer_id + '___sendVideoTo', 'Share video', 'top'); - setTippy(peer_id + '___pEject', 'Eject', 'top'); + setTippy(peer_id + '___pAudio', 'Mute', 'top-end'); + setTippy(peer_id + '___pVideo', 'Hide', 'top-end'); + setTippy(peer_id + '___pScreen', 'Stop', 'top-end'); + setTippy(peer_id + '___shareFile', 'Share file', 'top-end'); + setTippy(peer_id + '___sendMessageTo', 'Send private message', 'top-end'); + setTippy(peer_id + '___sendVideoTo', 'Share video', 'top-end'); + setTippy(peer_id + '___pEject', 'Eject', 'top-end'); } } } diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 1a2ea754..1f1f1c0e 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -998,7 +998,7 @@ class RoomClient { this.userLog( 'error', `Your device doesn't support the selected video quality (${videoQuality.value}), please select the another one.`, - 'top', + 'top-end', ); } } @@ -1435,11 +1435,11 @@ class RoomClient { if (isScreen) pn.click(); handleAspectRatio(); if (!this.isMobileDevice) { - this.setTippy(pn.id, 'Toggle Pin', 'top'); - this.setTippy(pip.id, 'Toggle picture in picture', 'top'); - this.setTippy(ts.id, 'Snapshot', 'top'); - this.setTippy(vp.id, 'Toggle video privacy', 'top'); - this.setTippy(au.id, 'Audio status', 'top'); + this.setTippy(pn.id, 'Toggle Pin', 'top-end'); + this.setTippy(pip.id, 'Toggle picture in picture', 'top-end'); + this.setTippy(ts.id, 'Snapshot', 'top-end'); + this.setTippy(vp.id, 'Toggle video privacy', 'top-end'); + this.setTippy(au.id, 'Audio status', 'top-end'); } console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount); break; @@ -1838,16 +1838,16 @@ class RoomClient { handleAspectRatio(); console.log('[addConsumer] Video-element-count', this.videoMediaContainer.childElementCount); if (!this.isMobileDevice) { - this.setTippy(pn.id, 'Toggle Pin', 'top'); - this.setTippy(pip.id, 'Toggle picture in picture', 'top'); - this.setTippy(ts.id, 'Snapshot', 'top'); - this.setTippy(sf.id, 'Send file', 'top'); - this.setTippy(sm.id, 'Send message', 'top'); - this.setTippy(sv.id, 'Send video', 'top'); - this.setTippy(cm.id, 'Hide', 'top'); - this.setTippy(au.id, 'Mute', 'top'); - this.setTippy(pv.id, '🔊 Volume', 'top'); - this.setTippy(ko.id, 'Eject', 'top'); + this.setTippy(pn.id, 'Toggle Pin', 'top-end'); + this.setTippy(pip.id, 'Toggle picture in picture', 'top-end'); + this.setTippy(ts.id, 'Snapshot', 'top-end'); + this.setTippy(sf.id, 'Send file', 'top-end'); + this.setTippy(sm.id, 'Send message', 'top-end'); + this.setTippy(sv.id, 'Send video', 'top-end'); + this.setTippy(cm.id, 'Hide', 'top-end'); + this.setTippy(au.id, 'Mute', 'top-end'); + this.setTippy(pv.id, '🔊 Volume', 'top-end'); + this.setTippy(ko.id, 'Eject', 'top-end'); } break; case mediaType.audio: @@ -2007,12 +2007,12 @@ class RoomClient { handleAspectRatio(); if (isParticipantsListOpen) getRoomParticipants(true); if (!this.isMobileDevice && remotePeer) { - this.setTippy(sm.id, 'Send message', 'top'); - this.setTippy(sf.id, 'Send file', 'top'); - this.setTippy(sv.id, 'Send video', 'top'); - this.setTippy(au.id, 'Mute', 'top'); - this.setTippy(pv.id, '🔊 Volume', 'top'); - this.setTippy(ko.id, 'Eject', 'top'); + this.setTippy(sm.id, 'Send message', 'top-end'); + this.setTippy(sf.id, 'Send file', 'top-end'); + this.setTippy(sv.id, 'Send video', 'top-end'); + this.setTippy(au.id, 'Mute', 'top-end'); + this.setTippy(pv.id, '🔊 Volume', 'top-end'); + this.setTippy(ko.id, 'Eject', 'top-end'); } console.log('[setVideoOff] Video-element-count', this.videoMediaContainer.childElementCount); // @@ -2131,14 +2131,14 @@ class RoomClient { if (err.name === 'SecurityError') errorMessage = `You need to use HTTPS for selecting audio output device: ${err}`; console.error('Attach SinkId error: ', errorMessage); - this.userLog('error', errorMessage, 'top'); + this.userLog('error', errorMessage, 'top-end'); speakerSelect.selectedIndex = 0; lS.setLocalStorageDevices(lS.MEDIA_TYPE.speaker, 0, speakerSelect.value); }); } else { let error = `Browser seems doesn't support output device selection.`; console.warn(error); - this.userLog('error', error, 'top'); + this.userLog('error', error, 'top-end'); } } @@ -2371,7 +2371,7 @@ class RoomClient { case 'toast': const Toast = Swal.mixin({ background: swalBackground, - position: 'top', + position: 'top-end', icon: 'info', showConfirmButton: false, timerProgressBar: true, @@ -2505,10 +2505,10 @@ class RoomClient { let videoPlayer = this.getId(elemId); let btnFs = this.getId(fsId); if (btnFs) { - this.setTippy(fsId, 'Full screen', 'top'); + this.setTippy(fsId, 'Full screen', 'top-end'); btnFs.addEventListener('click', () => { if (videoPlayer.classList.contains('videoCircle')) { - return userLog('info', 'Full Screen not allowed if video on privacy mode', 'top'); + return userLog('info', 'Full Screen not allowed if video on privacy mode', 'top-end'); } videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; this.toggleFullScreen(videoPlayer); @@ -2518,7 +2518,7 @@ class RoomClient { if (videoPlayer) { videoPlayer.addEventListener('click', () => { if (videoPlayer.classList.contains('videoCircle')) { - return userLog('info', 'Full Screen not allowed if video on privacy mode', 'top'); + return userLog('info', 'Full Screen not allowed if video on privacy mode', 'top-end'); } if (!videoPlayer.hasAttribute('controls')) { if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) { @@ -2605,7 +2605,7 @@ class RoomClient { togglePin(position) { if (!this.isVideoPinned) return; switch (position) { - case 'top': + case 'top-end': this.videoPinMediaContainer.style.top = '25%'; this.videoPinMediaContainer.style.width = '100%'; this.videoPinMediaContainer.style.height = '75%'; @@ -2688,7 +2688,7 @@ class RoomClient { if (btnTs && videoPlayer) { btnTs.addEventListener('click', () => { if (videoPlayer.classList.contains('videoCircle')) { - return this.userLog('info', 'SnapShoot not allowed if video on privacy mode', 'top'); + return this.userLog('info', 'SnapShoot not allowed if video on privacy mode', 'top-end'); } this.sound('snapshot'); let context, canvas, width, height, dataURL; @@ -2857,7 +2857,7 @@ class RoomClient { if (!this.thereIsParticipants() && !isChatGPTOn) { this.cleanMessage(); isChatPasteTxt = false; - return this.userLog('info', 'No participants in the room', 'top'); + return this.userLog('info', 'No participants in the room', 'top-end'); } chatMessage.value = filterXSS(chatMessage.value.trim()); let peer_msg = this.formatMsg(chatMessage.value); @@ -2913,7 +2913,7 @@ class RoomClient { if (!this.thereIsParticipants()) { isChatPasteTxt = false; this.cleanMessage(); - return this.userLog('info', 'No participants in the room except you', 'top'); + return this.userLog('info', 'No participants in the room except you', 'top-end'); } Swal.fire({ background: swalBackground, @@ -2971,7 +2971,7 @@ class RoomClient { data.to_peer_name, ); if (!this.showChatOnMessage) { - this.userLog('info', `💬 New message from: ${data.peer_name}`, 'top'); + this.userLog('info', `💬 New message from: ${data.peer_name}`, 'top-end'); } this.speechInMessages ? this.speechMessage(true, data.peer_name, data.peer_msg) : this.sound('message'); } @@ -3043,10 +3043,10 @@ class RoomClient { this.collectMessages(time, getFromName, getMsg); chatMsger.insertAdjacentHTML('beforeend', msgHTML); chatMsger.scrollTop += 500; - this.setTippy('msg-delete-' + chatMessagesId, 'Delete', 'top'); - this.setTippy('msg-copy-' + chatMessagesId, 'Copy', 'top'); - this.setTippy('msg-speech-' + chatMessagesId, 'Speech', 'top'); - this.setTippy('msg-private-reply-' + chatMessagesId, 'Reply', 'top'); + this.setTippy('msg-delete-' + chatMessagesId, 'Delete', 'top-end'); + this.setTippy('msg-copy-' + chatMessagesId, 'Copy', 'top-end'); + this.setTippy('msg-speech-' + chatMessagesId, 'Speech', 'top-end'); + this.setTippy('msg-private-reply-' + chatMessagesId, 'Reply', 'top-end'); chatMessagesId++; } @@ -3074,10 +3074,10 @@ class RoomClient { navigator.clipboard .writeText(text) .then(() => { - this.userLog('success', 'Message copied!', 'top', 1000); + this.userLog('success', 'Message copied!', 'top-end', 1000); }) .catch((err) => { - this.userLog('error', err, 'top', 2000); + this.userLog('error', err, 'top-end', 2000); }); } @@ -3228,7 +3228,7 @@ class RoomClient { chatClean() { if (this.chatMessages.length === 0) { - return userLog('info', 'No chat messages to clean', 'top'); + return userLog('info', 'No chat messages to clean', 'top-end'); } Swal.fire({ background: swalBackground, @@ -3255,7 +3255,7 @@ class RoomClient { chatSave() { if (this.chatMessages.length === 0) { - return userLog('info', 'No chat messages to save', 'top'); + return userLog('info', 'No chat messages to save', 'top-end'); } saveObjToJsonFile(this.chatMessages, 'CHAT'); } @@ -3309,12 +3309,12 @@ class RoomClient { }) .catch((err) => { console.error('Error Unable to recording the screen + audio', err); - this.userLog('error', 'Unable to recording the screen + audio reason: ' + err, 'top'); + this.userLog('error', 'Unable to recording the screen + audio reason: ' + err, 'top-end'); }); } } catch (err) { console.error('Exception while creating MediaRecorder: ', err); - return this.userLog('error', "Can't start stream recording reason: " + err, 'top'); + return this.userLog('error', "Can't start stream recording reason: " + err, 'top-end'); } } @@ -3459,19 +3459,19 @@ class RoomClient { videoPlayer.addEventListener('drop', function (e) { e.preventDefault(); if (itsMe) { - return userLog('warning', 'You cannot send files to yourself.', 'top'); + return userLog('warning', 'You cannot send files to yourself.', 'top-end'); } if (this.sendInProgress) { - return userLog('warning', 'Please wait for the previous file to be sent.', 'top'); + return userLog('warning', 'Please wait for the previous file to be sent.', 'top-end'); } if (e.dataTransfer.items && e.dataTransfer.items.length > 1) { - return userLog('warning', 'Please drag and drop a single file.', 'top'); + return userLog('warning', 'Please drag and drop a single file.', 'top-end'); } if (e.dataTransfer.items) { let item = e.dataTransfer.items[0].webkitGetAsEntry(); console.log('Drag and drop', item); if (item.isDirectory) { - return userLog('warning', 'Please drag and drop a single file not a folder.', 'top'); + return userLog('warning', 'Please drag and drop a single file not a folder.', 'top-end'); } var file = e.dataTransfer.items[0].getAsFile(); rc.sendFileInformations(file, peer_id); @@ -3514,11 +3514,11 @@ class RoomClient { // if (this.fileToSend && this.fileToSend.size > 0) { if (!this.thereIsParticipants()) { - return userLog('info', 'No participants detected', 'top'); + return userLog('info', 'No participants detected', 'top-end'); } // prevent XSS injection if (this.isHtml(this.fileToSend.name) || !this.isValidFileName(this.fileToSend.name)) - return userLog('warning', 'Invalid file name!', 'top', 5000); + return userLog('warning', 'Invalid file name!', 'top-end', 5000); const fileInfo = { peer_id: peer_id, @@ -3549,7 +3549,7 @@ class RoomClient { this.sendFileData(peer_id, broadcast); }, 1000); } else { - userLog('error', 'File not selected or empty.', 'top'); + userLog('error', 'File not selected or empty.', 'top-end'); } } @@ -3589,7 +3589,7 @@ class RoomClient { receiveFileInfo.innerText = fileToReceiveInfo; receiveFileDiv.style.display = 'inline'; receiveProgress.max = this.incomingFileInfo.fileSize; - this.userLog('info', fileToReceiveInfo, 'top'); + this.userLog('info', fileToReceiveInfo, 'top-end'); this.receiveInProgress = true; } @@ -3639,7 +3639,7 @@ class RoomClient { if (offset === this.fileToSend.size) { this.sendInProgress = false; sendFileDiv.style.display = 'none'; - userLog('success', 'The file ' + this.fileToSend.name + ' was sent successfully.', 'top'); + userLog('success', 'The file ' + this.fileToSend.name + ' was sent successfully.', 'top-end'); } if (offset < this.fileToSend.size) readSlice(offset); @@ -3677,7 +3677,7 @@ class RoomClient { this.receiveInProgress = false; receiveFileDiv.style.display = 'none'; console.log(data.peer_name + ' aborted the file transfer'); - userLog('info', data.peer_name + ' ⚠️ aborted the file transfer', 'top'); + userLog('info', data.peer_name + ' ⚠️ aborted the file transfer', 'top-end'); } handleFile(data) { @@ -3809,7 +3809,7 @@ class RoomClient { if (result.value) { result.value = filterXSS(result.value); if (!this.thereIsParticipants()) { - return userLog('info', 'No participants detected', 'top'); + return userLog('info', 'No participants detected', 'top-end'); } if (!this.isVideoTypeSupported(result.value)) { return userLog('warning', 'Something wrong, try with another Video or audio URL'); @@ -3833,7 +3833,7 @@ class RoomClient { this.socket.emit('shareVideoAction', data); this.openVideo(data); } else { - this.userLog('error', 'Not valid video URL', 'top'); + this.userLog('error', 'Not valid video URL', 'top-end'); } } }); @@ -3870,11 +3870,11 @@ class RoomClient { let action = data.action; switch (action) { case 'open': - this.userLog('info', `${peer_name} opened the video`, 'top'); + this.userLog('info', `${peer_name} opened the video`, 'top-end'); this.openVideo(data); break; case 'close': - this.userLog('info', `${peer_name} closed the video`, 'top'); + this.userLog('info', `${peer_name} closed the video`, 'top-end'); this.closeVideo(); break; default: @@ -3937,8 +3937,8 @@ class RoomClient { }); this.handlePN(video.id, pn.id, d.id); if (!this.isMobileDevice) { - this.setTippy(pn.id, 'Toggle Pin video player', 'top'); - this.setTippy(e.id, 'Close video player', 'top'); + this.setTippy(pn.id, 'Toggle Pin video player', 'top-end'); + this.setTippy(e.id, 'Close video player', 'top-end'); } console.log('[openVideo] Video-element-count', this.videoMediaContainer.childElementCount); this.sound('joined'); @@ -4061,27 +4061,27 @@ class RoomClient { case 'lock': this.sound('locked'); this.event(_EVENTS.roomLock); - this.userLog('info', `${icons.lock} LOCKED the room by the password`, 'top'); + this.userLog('info', `${icons.lock} LOCKED the room by the password`, 'top-end'); break; case 'unlock': this.event(_EVENTS.roomUnlock); - this.userLog('info', `${icons.unlock} UNLOCKED the room`, 'top'); + this.userLog('info', `${icons.unlock} UNLOCKED the room`, 'top-end'); break; case 'lobbyOn': this.event(_EVENTS.lobbyOn); - this.userLog('info', `${icons.lobby} Lobby is enabled`, 'top'); + this.userLog('info', `${icons.lobby} Lobby is enabled`, 'top-end'); break; case 'lobbyOff': this.event(_EVENTS.lobbyOff); - this.userLog('info', `${icons.lobby} Lobby is disabled`, 'top'); + this.userLog('info', `${icons.lobby} Lobby is disabled`, 'top-end'); break; case 'hostOnlyRecordingOn': this.event(_EVENTS.hostOnlyRecordingOn); - this.userLog('info', `${icons.recording} Host only recording is enabled`, 'top'); + this.userLog('info', `${icons.recording} Host only recording is enabled`, 'top-end'); break; case 'hostOnlyRecordingOff': this.event(_EVENTS.hostOnlyRecordingOff); - this.userLog('info', `${icons.recording} Host only recording is disabled`, 'top'); + this.userLog('info', `${icons.recording} Host only recording is disabled`, 'top-end'); break; default: break; @@ -4093,27 +4093,27 @@ class RoomClient { this.sound('switch'); switch (action) { case 'pitchBar': - this.userLog('info', `${icons.pitchBar} Audio pitch bar ${status}`, 'top'); + this.userLog('info', `${icons.pitchBar} Audio pitch bar ${status}`, 'top-end'); break; case 'sounds': - this.userLog('info', `${icons.sounds} Sounds notification ${status}`, 'top'); + this.userLog('info', `${icons.sounds} Sounds notification ${status}`, 'top-end'); break; case 'ptt': - this.userLog('info', `${icons.ptt} Push to talk ${status}`, 'top'); + this.userLog('info', `${icons.ptt} Push to talk ${status}`, 'top-end'); break; case 'notify': - this.userLog('info', `${icons.share} Share room on join ${status}`, 'top'); + this.userLog('info', `${icons.share} Share room on join ${status}`, 'top-end'); break; case 'hostOnlyRecording': - this.userLog('info', `${icons.recording} Only host recording ${status}`, 'top'); + this.userLog('info', `${icons.recording} Only host recording ${status}`, 'top-end'); break; case 'showChat': active - ? userLog('info', `${icons.chat} Chat will be shown, when you receive a message`, 'top') - : userLog('info', `${icons.chat} Chat not will be shown, when you receive a message`, 'top'); + ? userLog('info', `${icons.chat} Chat will be shown, when you receive a message`, 'top-end') + : userLog('info', `${icons.chat} Chat not will be shown, when you receive a message`, 'top-end'); break; case 'speechMessages': - this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top'); + this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top-end'); break; default: break; @@ -4166,10 +4166,10 @@ class RoomClient { lobbyHeaderTitle.innerText = 'Lobby users (' + lobbyParticipantsCount + ')'; if (!isLobbyOpen) this.lobbyToggle(); if (!this.isMobileDevice) { - setTippy(lobbyAcceptId, 'Accept', 'top'); - setTippy(lobbyRejectId, 'Reject', 'top'); + setTippy(lobbyAcceptId, 'Accept', 'top-end'); + setTippy(lobbyRejectId, 'Reject', 'top-end'); } - this.userLog('info', peer_name + ' wants to join the meeting', 'top'); + this.userLog('info', peer_name + ' wants to join the meeting', 'top-end'); } break; case 'accept': @@ -4227,7 +4227,7 @@ class RoomClient { this.socket.emit('roomLobby', data); this.lobbyRemoveAll(); } else { - this.userLog('info', 'No participants in lobby detected', 'top'); + this.userLog('info', 'No participants in lobby detected', 'top-end'); } } @@ -4237,7 +4237,7 @@ class RoomClient { this.socket.emit('roomLobby', data); this.lobbyRemoveAll(); } else { - this.userLog('info', 'No participants in lobby detected', 'top'); + this.userLog('info', 'No participants in lobby detected', 'top-end'); } } @@ -4531,7 +4531,7 @@ class RoomClient { }; if (!this.thereIsParticipants()) { - if (info) return this.userLog('info', 'No participants detected', 'top'); + if (info) return this.userLog('info', 'No participants detected', 'top-end'); } switch (action) { case 'mute': @@ -4540,7 +4540,7 @@ class RoomClient { return this.userLog( 'info', 'The participant has been muted, and only they have the ability to unmute themselves', - 'top', + 'top-end', ); } break; @@ -4550,7 +4550,7 @@ class RoomClient { return this.userLog( 'info', 'The participant is currently hidden, and only they have the option to unhide themselves', - 'top', + 'top-end', ); } case 'stop': @@ -4561,7 +4561,7 @@ class RoomClient { return this.userLog( 'info', 'The participant screen is not shared, only the participant can initiate sharing', - 'top', + 'top-end', ); } } @@ -4586,7 +4586,7 @@ class RoomClient { this.userLog( 'warning', from_peer_name + ' ' + _PEER.audioOff + ' has closed yours audio', - 'top', + 'top-end', 10000, ); } @@ -4597,7 +4597,7 @@ class RoomClient { this.userLog( 'warning', from_peer_name + ' ' + _PEER.videoOff + ' has closed yours video', - 'top', + 'top-end', 10000, ); } @@ -4609,7 +4609,7 @@ class RoomClient { this.userLog( 'warning', from_peer_name + ' ' + _PEER.screenOff + ' has closed yours screen share', - 'top', + 'top-end', 10000, ); } @@ -4843,7 +4843,7 @@ class RoomClient { this.userLog( 'warning', peer_name + ' ' + _PEER.raiseHand + ' has raised the hand', - 'top', + 'top-end', 10000, ); this.sound('raiseHand');