ghaymah_dev/codepill-sfu
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - improve tooltips

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2023-09-26 19:03:29 +02:00
الأصل 69fb7cff6f
التزام 7b721cb86f
2 ملفات معدلة مع 159 إضافات و152 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

139
public/js/Room.js
عرض الملف

@@ -141,40 +141,15 @@ const RoomURL = window.location.origin + '/join/' + room_id;
function initClient() { function initClient() {
setTheme(); setTheme();
if (!DetectRTC.isMobileDevice) { if (!DetectRTC.isMobileDevice) {
setTippy('shareButton', 'Share room', 'right'); refreshMainButtonsToolTipPosition();
setTippy('hideMeButton', 'Toggle hide self view', 'right'); setTippy('mySettingsCloseBtn', 'Close', 'top-end');
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');
setTippy( setTippy(
'switchPushToTalk', 'switchPushToTalk',
'If Active, When SpaceBar keydown the microphone will be resumed, on keyup will be paused, like a walkie-talkie.', 'If Active, When SpaceBar keydown the microphone will be resumed, on keyup will be paused, like a walkie-talkie.',
'right', 'right',
); );
setTippy('lobbyAcceptAllBtn', 'Accept', 'top'); setTippy('lobbyAcceptAllBtn', 'Accept', 'top-end');
setTippy('lobbyRejectAllBtn', 'Reject', 'top'); setTippy('lobbyRejectAllBtn', 'Reject', 'top-end');
setTippy( setTippy(
'switchLobby', 'switchLobby',
'Lobby mode lets you protect your meeting by only allowing people to enter after a formal approval by a moderator', '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('whiteboardCleanBtn', 'Clean', 'bottom');
setTippy('whiteboardLockButton', 'If enabled, participants cannot interact', 'right'); setTippy('whiteboardLockButton', 'If enabled, participants cannot interact', 'right');
setTippy('whiteboardCloseBtn', 'Close', 'right'); setTippy('whiteboardCloseBtn', 'Close', 'right');
setTippy('chatCleanTextButton', 'Clean', 'top'); setTippy('chatCleanTextButton', 'Clean', 'top-end');
setTippy('chatPasteButton', 'Paste', 'top'); setTippy('chatPasteButton', 'Paste', 'top-end');
setTippy('chatSendButton', 'Send', 'top'); setTippy('chatSendButton', 'Send', 'top-end');
setTippy('showChatOnMsg', 'Show chat on new message comes', 'top'); setTippy('showChatOnMsg', 'Show chat on new message comes', 'top-end');
setTippy('speechIncomingMsg', 'Speech the incoming messages', 'top'); setTippy('speechIncomingMsg', 'Speech the incoming messages', 'top-end');
setTippy('chatSpeechStartButton', 'Start speech recognition', 'top'); setTippy('chatSpeechStartButton', 'Start speech recognition', 'top-end');
setTippy('chatSpeechStopButton', 'Stop speech recognition', 'top'); setTippy('chatSpeechStopButton', 'Stop speech recognition', 'top-end');
setTippy('chatEmojiButton', 'Emoji', 'top'); setTippy('chatEmojiButton', 'Emoji', 'top-end');
setTippy('chatMarkdownButton', 'Markdown', 'top'); setTippy('chatMarkdownButton', 'Markdown', 'top-end');
setTippy('chatGPTButton', 'ChatGPT', 'top'); setTippy('chatGPTButton', 'ChatGPT', 'top-end');
setTippy('chatShareFileButton', 'Share file', 'top'); setTippy('chatShareFileButton', 'Share file', 'top-end');
setTippy('chatCleanButton', 'Clean', 'bottom'); setTippy('chatCleanButton', 'Clean', 'bottom');
setTippy('chatSaveButton', 'Save', 'bottom'); setTippy('chatSaveButton', 'Save', 'bottom');
setTippy('chatGhostButton', 'Toggle transparent background', 'bottom'); setTippy('chatGhostButton', 'Toggle transparent background', 'bottom');
@@ -229,12 +204,42 @@ function initClient() {
initEnumerateDevices(); 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 // HANDLE TOOLTIP
// #################################################### // ####################################################
function setTippy(elem, content, placement, allowHTML = false) { 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, content: content,
placement: placement, placement: placement,
allowHTML: allowHTML, allowHTML: allowHTML,
@@ -769,7 +774,7 @@ async function shareRoom(useNavigator = false) {
if (navigator.share && useNavigator) { if (navigator.share && useNavigator) {
try { try {
await navigator.share({ url: RoomURL }); await navigator.share({ url: RoomURL });
userLog('info', 'Room Shared successfully', 'top'); userLog('info', 'Room Shared successfully', 'top-end');
} catch (err) { } catch (err) {
share(); share();
} }
@@ -837,7 +842,7 @@ function copyRoomURL() {
tmpInput.setSelectionRange(0, 99999); // For mobile devices tmpInput.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(tmpInput.value); navigator.clipboard.writeText(tmpInput.value);
document.body.removeChild(tmpInput); document.body.removeChild(tmpInput);
userLog('info', 'Meeting URL copied to clipboard 👍', 'top'); userLog('info', 'Meeting URL copied to clipboard 👍', 'top-end');
} }
function shareRoomByEmail() { function shareRoomByEmail() {
@@ -1325,11 +1330,11 @@ function handleButtons() {
function setButtonsInit() { function setButtonsInit() {
if (!DetectRTC.isMobileDevice) { if (!DetectRTC.isMobileDevice) {
setTippy('initAudioButton', 'Toggle the audio', 'top'); setTippy('initAudioButton', 'Toggle the audio', 'top-end');
setTippy('initVideoButton', 'Toggle the video', 'top'); setTippy('initVideoButton', 'Toggle the video', 'top-end');
setTippy('initAudioVideoButton', 'Toggle the audio & video', 'top'); setTippy('initAudioVideoButton', 'Toggle the audio & video', 'top-end');
setTippy('initStartScreenButton', 'Toggle screen sharing', 'top'); setTippy('initStartScreenButton', 'Toggle screen sharing', 'top-end');
setTippy('initStopScreenButton', 'Toggle screen sharing', 'top'); setTippy('initStopScreenButton', 'Toggle screen sharing', 'top-end');
} }
initAudioButton = document.getElementById('initAudioButton'); initAudioButton = document.getElementById('initAudioButton');
initVideoButton = document.getElementById('initVideoButton'); initVideoButton = document.getElementById('initVideoButton');
@@ -1438,7 +1443,7 @@ async function changeCamera(deviceId) {
}) })
.catch((err) => { .catch((err) => {
console.error('[Error] changeCamera', 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); rc.changeBtnsBarPosition(BtnsBarPosition.value);
lsSettings.buttons_bar = BtnsBarPosition.selectedIndex; lsSettings.buttons_bar = BtnsBarPosition.selectedIndex;
lS.setSettings(lsSettings); lS.setSettings(lsSettings);
refreshMainButtonsToolTipPosition();
}; };
pinVideoPosition.onchange = () => { pinVideoPosition.onchange = () => {
rc.togglePin(pinVideoPosition.value); rc.togglePin(pinVideoPosition.value);
@@ -1753,6 +1759,7 @@ function loadSettingsFromLocalStorage() {
rc.handleVideoControls(BtnVideoControls.value); rc.handleVideoControls(BtnVideoControls.value);
rc.changeBtnsBarPosition(BtnsBarPosition.value); rc.changeBtnsBarPosition(BtnsBarPosition.value);
rc.togglePin(pinVideoPosition.value); rc.togglePin(pinVideoPosition.value);
refreshMainButtonsToolTipPosition();
} }
// #################################################### // ####################################################
@@ -2229,7 +2236,7 @@ function whiteboardAddObj(type) {
addWbCanvasObj(myImg); addWbCanvasObj(myImg);
}); });
} else { } 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); reader.readAsDataURL(wbCanvasImg);
} else { } 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( userLog(
'info', 'info',
`${data.peer_name} <i class="fas fa-chalkboard-teacher"></i> whiteboard action: ${data.action}`, `${data.peer_name} <i class="fas fa-chalkboard-teacher"></i> whiteboard action: ${data.action}`,
'top', 'top-end',
); );
} }
@@ -2691,24 +2698,24 @@ async function getParticipantsTable(peers) {
function setParticipantsTippy(peers) { function setParticipantsTippy(peers) {
// //
if (!DetectRTC.isMobileDevice) { if (!DetectRTC.isMobileDevice) {
setTippy('muteAllButton', 'Mute all participants', 'top'); setTippy('muteAllButton', 'Mute all participants', 'top-end');
setTippy('hideAllButton', 'Hide all participants', 'top'); setTippy('hideAllButton', 'Hide all participants', 'top-end');
setTippy('stopAllButton', 'Stop screen share to all participants', 'top'); setTippy('stopAllButton', 'Stop screen share to all participants', 'top-end');
setTippy('sendAllButton', 'Share file to all', 'top'); setTippy('sendAllButton', 'Share file to all', 'top-end');
setTippy('sendMessageToAll', 'Send message to all', 'top'); setTippy('sendMessageToAll', 'Send message to all', 'top-end');
setTippy('sendVideoToAll', 'Share video to all', 'top'); setTippy('sendVideoToAll', 'Share video to all', 'top-end');
setTippy('ejectAllButton', 'Eject all participants', 'top'); setTippy('ejectAllButton', 'Eject all participants', 'top-end');
// //
for (let peer of Array.from(peers.keys())) { for (let peer of Array.from(peers.keys())) {
let peer_info = peers.get(peer).peer_info; let peer_info = peers.get(peer).peer_info;
let peer_id = peer_info.peer_id; let peer_id = peer_info.peer_id;
setTippy(peer_id + '___pAudio', 'Mute', 'top'); setTippy(peer_id + '___pAudio', 'Mute', 'top-end');
setTippy(peer_id + '___pVideo', 'Hide', 'top'); setTippy(peer_id + '___pVideo', 'Hide', 'top-end');
setTippy(peer_id + '___pScreen', 'Stop', 'top'); setTippy(peer_id + '___pScreen', 'Stop', 'top-end');
setTippy(peer_id + '___shareFile', 'Share file', 'top'); setTippy(peer_id + '___shareFile', 'Share file', 'top-end');
setTippy(peer_id + '___sendMessageTo', 'Send private message', 'top'); setTippy(peer_id + '___sendMessageTo', 'Send private message', 'top-end');
setTippy(peer_id + '___sendVideoTo', 'Share video', 'top'); setTippy(peer_id + '___sendVideoTo', 'Share video', 'top-end');
setTippy(peer_id + '___pEject', 'Eject', 'top'); setTippy(peer_id + '___pEject', 'Eject', 'top-end');
} }
} }
} }

172
public/js/RoomClient.js
عرض الملف

@@ -998,7 +998,7 @@ class RoomClient {
this.userLog( this.userLog(
'error', 'error',
`Your device doesn't support the selected video quality (${videoQuality.value}), please select the another one.`, `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(); if (isScreen) pn.click();
handleAspectRatio(); handleAspectRatio();
if (!this.isMobileDevice) { if (!this.isMobileDevice) {
this.setTippy(pn.id, 'Toggle Pin', 'top'); this.setTippy(pn.id, 'Toggle Pin', 'top-end');
this.setTippy(pip.id, 'Toggle picture in picture', 'top'); this.setTippy(pip.id, 'Toggle picture in picture', 'top-end');
this.setTippy(ts.id, 'Snapshot', 'top'); this.setTippy(ts.id, 'Snapshot', 'top-end');
this.setTippy(vp.id, 'Toggle video privacy', 'top'); this.setTippy(vp.id, 'Toggle video privacy', 'top-end');
this.setTippy(au.id, 'Audio status', 'top'); this.setTippy(au.id, 'Audio status', 'top-end');
} }
console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount); console.log('[addProducer] Video-element-count', this.videoMediaContainer.childElementCount);
break; break;
@@ -1838,16 +1838,16 @@ class RoomClient {
handleAspectRatio(); handleAspectRatio();
console.log('[addConsumer] Video-element-count', this.videoMediaContainer.childElementCount); console.log('[addConsumer] Video-element-count', this.videoMediaContainer.childElementCount);
if (!this.isMobileDevice) { if (!this.isMobileDevice) {
this.setTippy(pn.id, 'Toggle Pin', 'top'); this.setTippy(pn.id, 'Toggle Pin', 'top-end');
this.setTippy(pip.id, 'Toggle picture in picture', 'top'); this.setTippy(pip.id, 'Toggle picture in picture', 'top-end');
this.setTippy(ts.id, 'Snapshot', 'top'); this.setTippy(ts.id, 'Snapshot', 'top-end');
this.setTippy(sf.id, 'Send file', 'top'); this.setTippy(sf.id, 'Send file', 'top-end');
this.setTippy(sm.id, 'Send message', 'top'); this.setTippy(sm.id, 'Send message', 'top-end');
this.setTippy(sv.id, 'Send video', 'top'); this.setTippy(sv.id, 'Send video', 'top-end');
this.setTippy(cm.id, 'Hide', 'top'); this.setTippy(cm.id, 'Hide', 'top-end');
this.setTippy(au.id, 'Mute', 'top'); this.setTippy(au.id, 'Mute', 'top-end');
this.setTippy(pv.id, '🔊 Volume', 'top'); this.setTippy(pv.id, '🔊 Volume', 'top-end');
this.setTippy(ko.id, 'Eject', 'top'); this.setTippy(ko.id, 'Eject', 'top-end');
} }
break; break;
case mediaType.audio: case mediaType.audio:
@@ -2007,12 +2007,12 @@ class RoomClient {
handleAspectRatio(); handleAspectRatio();
if (isParticipantsListOpen) getRoomParticipants(true); if (isParticipantsListOpen) getRoomParticipants(true);
if (!this.isMobileDevice && remotePeer) { if (!this.isMobileDevice && remotePeer) {
this.setTippy(sm.id, 'Send message', 'top'); this.setTippy(sm.id, 'Send message', 'top-end');
this.setTippy(sf.id, 'Send file', 'top'); this.setTippy(sf.id, 'Send file', 'top-end');
this.setTippy(sv.id, 'Send video', 'top'); this.setTippy(sv.id, 'Send video', 'top-end');
this.setTippy(au.id, 'Mute', 'top'); this.setTippy(au.id, 'Mute', 'top-end');
this.setTippy(pv.id, '🔊 Volume', 'top'); this.setTippy(pv.id, '🔊 Volume', 'top-end');
this.setTippy(ko.id, 'Eject', 'top'); this.setTippy(ko.id, 'Eject', 'top-end');
} }
console.log('[setVideoOff] Video-element-count', this.videoMediaContainer.childElementCount); console.log('[setVideoOff] Video-element-count', this.videoMediaContainer.childElementCount);
// //
@@ -2131,14 +2131,14 @@ class RoomClient {
if (err.name === 'SecurityError') if (err.name === 'SecurityError')
errorMessage = `You need to use HTTPS for selecting audio output device: ${err}`; errorMessage = `You need to use HTTPS for selecting audio output device: ${err}`;
console.error('Attach SinkId error: ', errorMessage); console.error('Attach SinkId error: ', errorMessage);
this.userLog('error', errorMessage, 'top'); this.userLog('error', errorMessage, 'top-end');
speakerSelect.selectedIndex = 0; speakerSelect.selectedIndex = 0;
lS.setLocalStorageDevices(lS.MEDIA_TYPE.speaker, 0, speakerSelect.value); lS.setLocalStorageDevices(lS.MEDIA_TYPE.speaker, 0, speakerSelect.value);
}); });
} else { } else {
let error = `Browser seems doesn't support output device selection.`; let error = `Browser seems doesn't support output device selection.`;
console.warn(error); console.warn(error);
this.userLog('error', error, 'top'); this.userLog('error', error, 'top-end');
} }
} }
@@ -2371,7 +2371,7 @@ class RoomClient {
case 'toast': case 'toast':
const Toast = Swal.mixin({ const Toast = Swal.mixin({
background: swalBackground, background: swalBackground,
position: 'top', position: 'top-end',
icon: 'info', icon: 'info',
showConfirmButton: false, showConfirmButton: false,
timerProgressBar: true, timerProgressBar: true,
@@ -2505,10 +2505,10 @@ class RoomClient {
let videoPlayer = this.getId(elemId); let videoPlayer = this.getId(elemId);
let btnFs = this.getId(fsId); let btnFs = this.getId(fsId);
if (btnFs) { if (btnFs) {
this.setTippy(fsId, 'Full screen', 'top'); this.setTippy(fsId, 'Full screen', 'top-end');
btnFs.addEventListener('click', () => { btnFs.addEventListener('click', () => {
if (videoPlayer.classList.contains('videoCircle')) { 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'; videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
this.toggleFullScreen(videoPlayer); this.toggleFullScreen(videoPlayer);
@@ -2518,7 +2518,7 @@ class RoomClient {
if (videoPlayer) { if (videoPlayer) {
videoPlayer.addEventListener('click', () => { videoPlayer.addEventListener('click', () => {
if (videoPlayer.classList.contains('videoCircle')) { 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 (!videoPlayer.hasAttribute('controls')) {
if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) { if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) {
@@ -2605,7 +2605,7 @@ class RoomClient {
togglePin(position) { togglePin(position) {
if (!this.isVideoPinned) return; if (!this.isVideoPinned) return;
switch (position) { switch (position) {
case 'top': case 'top-end':
this.videoPinMediaContainer.style.top = '25%'; this.videoPinMediaContainer.style.top = '25%';
this.videoPinMediaContainer.style.width = '100%'; this.videoPinMediaContainer.style.width = '100%';
this.videoPinMediaContainer.style.height = '75%'; this.videoPinMediaContainer.style.height = '75%';
@@ -2688,7 +2688,7 @@ class RoomClient {
if (btnTs && videoPlayer) { if (btnTs && videoPlayer) {
btnTs.addEventListener('click', () => { btnTs.addEventListener('click', () => {
if (videoPlayer.classList.contains('videoCircle')) { 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'); this.sound('snapshot');
let context, canvas, width, height, dataURL; let context, canvas, width, height, dataURL;
@@ -2857,7 +2857,7 @@ class RoomClient {
if (!this.thereIsParticipants() && !isChatGPTOn) { if (!this.thereIsParticipants() && !isChatGPTOn) {
this.cleanMessage(); this.cleanMessage();
isChatPasteTxt = false; 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()); chatMessage.value = filterXSS(chatMessage.value.trim());
let peer_msg = this.formatMsg(chatMessage.value); let peer_msg = this.formatMsg(chatMessage.value);
@@ -2913,7 +2913,7 @@ class RoomClient {
if (!this.thereIsParticipants()) { if (!this.thereIsParticipants()) {
isChatPasteTxt = false; isChatPasteTxt = false;
this.cleanMessage(); 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({ Swal.fire({
background: swalBackground, background: swalBackground,
@@ -2971,7 +2971,7 @@ class RoomClient {
data.to_peer_name, data.to_peer_name,
); );
if (!this.showChatOnMessage) { 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'); 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); this.collectMessages(time, getFromName, getMsg);
chatMsger.insertAdjacentHTML('beforeend', msgHTML); chatMsger.insertAdjacentHTML('beforeend', msgHTML);
chatMsger.scrollTop += 500; chatMsger.scrollTop += 500;
this.setTippy('msg-delete-' + chatMessagesId, 'Delete', 'top'); this.setTippy('msg-delete-' + chatMessagesId, 'Delete', 'top-end');
this.setTippy('msg-copy-' + chatMessagesId, 'Copy', 'top'); this.setTippy('msg-copy-' + chatMessagesId, 'Copy', 'top-end');
this.setTippy('msg-speech-' + chatMessagesId, 'Speech', 'top'); this.setTippy('msg-speech-' + chatMessagesId, 'Speech', 'top-end');
this.setTippy('msg-private-reply-' + chatMessagesId, 'Reply', 'top'); this.setTippy('msg-private-reply-' + chatMessagesId, 'Reply', 'top-end');
chatMessagesId++; chatMessagesId++;
} }
@@ -3074,10 +3074,10 @@ class RoomClient {
navigator.clipboard navigator.clipboard
.writeText(text) .writeText(text)
.then(() => { .then(() => {
this.userLog('success', 'Message copied!', 'top', 1000); this.userLog('success', 'Message copied!', 'top-end', 1000);
}) })
.catch((err) => { .catch((err) => {
this.userLog('error', err, 'top', 2000); this.userLog('error', err, 'top-end', 2000);
}); });
} }
@@ -3228,7 +3228,7 @@ class RoomClient {
chatClean() { chatClean() {
if (this.chatMessages.length === 0) { 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({ Swal.fire({
background: swalBackground, background: swalBackground,
@@ -3255,7 +3255,7 @@ class RoomClient {
chatSave() { chatSave() {
if (this.chatMessages.length === 0) { 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'); saveObjToJsonFile(this.chatMessages, 'CHAT');
} }
@@ -3309,12 +3309,12 @@ class RoomClient {
}) })
.catch((err) => { .catch((err) => {
console.error('Error Unable to recording the screen + audio', 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) { } catch (err) {
console.error('Exception while creating MediaRecorder: ', 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) { videoPlayer.addEventListener('drop', function (e) {
e.preventDefault(); e.preventDefault();
if (itsMe) { 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) { 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) { 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) { if (e.dataTransfer.items) {
let item = e.dataTransfer.items[0].webkitGetAsEntry(); let item = e.dataTransfer.items[0].webkitGetAsEntry();
console.log('Drag and drop', item); console.log('Drag and drop', item);
if (item.isDirectory) { 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(); var file = e.dataTransfer.items[0].getAsFile();
rc.sendFileInformations(file, peer_id); rc.sendFileInformations(file, peer_id);
@@ -3514,11 +3514,11 @@ class RoomClient {
// //
if (this.fileToSend && this.fileToSend.size > 0) { if (this.fileToSend && this.fileToSend.size > 0) {
if (!this.thereIsParticipants()) { if (!this.thereIsParticipants()) {
return userLog('info', 'No participants detected', 'top'); return userLog('info', 'No participants detected', 'top-end');
} }
// prevent XSS injection // prevent XSS injection
if (this.isHtml(this.fileToSend.name) || !this.isValidFileName(this.fileToSend.name)) 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 = { const fileInfo = {
peer_id: peer_id, peer_id: peer_id,
@@ -3549,7 +3549,7 @@ class RoomClient {
this.sendFileData(peer_id, broadcast); this.sendFileData(peer_id, broadcast);
}, 1000); }, 1000);
} else { } 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; receiveFileInfo.innerText = fileToReceiveInfo;
receiveFileDiv.style.display = 'inline'; receiveFileDiv.style.display = 'inline';
receiveProgress.max = this.incomingFileInfo.fileSize; receiveProgress.max = this.incomingFileInfo.fileSize;
this.userLog('info', fileToReceiveInfo, 'top'); this.userLog('info', fileToReceiveInfo, 'top-end');
this.receiveInProgress = true; this.receiveInProgress = true;
} }
@@ -3639,7 +3639,7 @@ class RoomClient {
if (offset === this.fileToSend.size) { if (offset === this.fileToSend.size) {
this.sendInProgress = false; this.sendInProgress = false;
sendFileDiv.style.display = 'none'; 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); if (offset < this.fileToSend.size) readSlice(offset);
@@ -3677,7 +3677,7 @@ class RoomClient {
this.receiveInProgress = false; this.receiveInProgress = false;
receiveFileDiv.style.display = 'none'; receiveFileDiv.style.display = 'none';
console.log(data.peer_name + ' aborted the file transfer'); 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) { handleFile(data) {
@@ -3809,7 +3809,7 @@ class RoomClient {
if (result.value) { if (result.value) {
result.value = filterXSS(result.value); result.value = filterXSS(result.value);
if (!this.thereIsParticipants()) { if (!this.thereIsParticipants()) {
return userLog('info', 'No participants detected', 'top'); return userLog('info', 'No participants detected', 'top-end');
} }
if (!this.isVideoTypeSupported(result.value)) { if (!this.isVideoTypeSupported(result.value)) {
return userLog('warning', 'Something wrong, try with another Video or audio URL'); return userLog('warning', 'Something wrong, try with another Video or audio URL');
@@ -3833,7 +3833,7 @@ class RoomClient {
this.socket.emit('shareVideoAction', data); this.socket.emit('shareVideoAction', data);
this.openVideo(data); this.openVideo(data);
} else { } 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; let action = data.action;
switch (action) { switch (action) {
case 'open': case 'open':
this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> opened the video`, 'top'); this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> opened the video`, 'top-end');
this.openVideo(data); this.openVideo(data);
break; break;
case 'close': case 'close':
this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> closed the video`, 'top'); this.userLog('info', `${peer_name} <i class="fab fa-youtube"></i> closed the video`, 'top-end');
this.closeVideo(); this.closeVideo();
break; break;
default: default:
@@ -3937,8 +3937,8 @@ class RoomClient {
}); });
this.handlePN(video.id, pn.id, d.id); this.handlePN(video.id, pn.id, d.id);
if (!this.isMobileDevice) { if (!this.isMobileDevice) {
this.setTippy(pn.id, 'Toggle Pin video player', 'top'); this.setTippy(pn.id, 'Toggle Pin video player', 'top-end');
this.setTippy(e.id, 'Close video player', 'top'); this.setTippy(e.id, 'Close video player', 'top-end');
} }
console.log('[openVideo] Video-element-count', this.videoMediaContainer.childElementCount); console.log('[openVideo] Video-element-count', this.videoMediaContainer.childElementCount);
this.sound('joined'); this.sound('joined');
@@ -4061,27 +4061,27 @@ class RoomClient {
case 'lock': case 'lock':
this.sound('locked'); this.sound('locked');
this.event(_EVENTS.roomLock); 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; break;
case 'unlock': case 'unlock':
this.event(_EVENTS.roomUnlock); this.event(_EVENTS.roomUnlock);
this.userLog('info', `${icons.unlock} UNLOCKED the room`, 'top'); this.userLog('info', `${icons.unlock} UNLOCKED the room`, 'top-end');
break; break;
case 'lobbyOn': case 'lobbyOn':
this.event(_EVENTS.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; break;
case 'lobbyOff': case 'lobbyOff':
this.event(_EVENTS.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; break;
case 'hostOnlyRecordingOn': case 'hostOnlyRecordingOn':
this.event(_EVENTS.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; break;
case 'hostOnlyRecordingOff': case 'hostOnlyRecordingOff':
this.event(_EVENTS.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; break;
default: default:
break; break;
@@ -4093,27 +4093,27 @@ class RoomClient {
this.sound('switch'); this.sound('switch');
switch (action) { switch (action) {
case 'pitchBar': case 'pitchBar':
this.userLog('info', `${icons.pitchBar} Audio pitch bar ${status}`, 'top'); this.userLog('info', `${icons.pitchBar} Audio pitch bar ${status}`, 'top-end');
break; break;
case 'sounds': case 'sounds':
this.userLog('info', `${icons.sounds} Sounds notification ${status}`, 'top'); this.userLog('info', `${icons.sounds} Sounds notification ${status}`, 'top-end');
break; break;
case 'ptt': case 'ptt':
this.userLog('info', `${icons.ptt} Push to talk ${status}`, 'top'); this.userLog('info', `${icons.ptt} Push to talk ${status}`, 'top-end');
break; break;
case 'notify': 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; break;
case 'hostOnlyRecording': case 'hostOnlyRecording':
this.userLog('info', `${icons.recording} Only host recording ${status}`, 'top'); this.userLog('info', `${icons.recording} Only host recording ${status}`, 'top-end');
break; break;
case 'showChat': case 'showChat':
active active
? userLog('info', `${icons.chat} Chat 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'); : userLog('info', `${icons.chat} Chat not will be shown, when you receive a message`, 'top-end');
break; break;
case 'speechMessages': case 'speechMessages':
this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top'); this.userLog('info', `${icons.speech} Speech incoming messages ${status}`, 'top-end');
break; break;
default: default:
break; break;
@@ -4166,10 +4166,10 @@ class RoomClient {
lobbyHeaderTitle.innerText = 'Lobby users (' + lobbyParticipantsCount + ')'; lobbyHeaderTitle.innerText = 'Lobby users (' + lobbyParticipantsCount + ')';
if (!isLobbyOpen) this.lobbyToggle(); if (!isLobbyOpen) this.lobbyToggle();
if (!this.isMobileDevice) { if (!this.isMobileDevice) {
setTippy(lobbyAcceptId, 'Accept', 'top'); setTippy(lobbyAcceptId, 'Accept', 'top-end');
setTippy(lobbyRejectId, 'Reject', 'top'); 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; break;
case 'accept': case 'accept':
@@ -4227,7 +4227,7 @@ class RoomClient {
this.socket.emit('roomLobby', data); this.socket.emit('roomLobby', data);
this.lobbyRemoveAll(); this.lobbyRemoveAll();
} else { } 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.socket.emit('roomLobby', data);
this.lobbyRemoveAll(); this.lobbyRemoveAll();
} else { } 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 (!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) { switch (action) {
case 'mute': case 'mute':
@@ -4540,7 +4540,7 @@ class RoomClient {
return this.userLog( return this.userLog(
'info', 'info',
'The participant has been muted, and only they have the ability to unmute themselves', 'The participant has been muted, and only they have the ability to unmute themselves',
'top', 'top-end',
); );
} }
break; break;
@@ -4550,7 +4550,7 @@ class RoomClient {
return this.userLog( return this.userLog(
'info', 'info',
'The participant is currently hidden, and only they have the option to unhide themselves', 'The participant is currently hidden, and only they have the option to unhide themselves',
'top', 'top-end',
); );
} }
case 'stop': case 'stop':
@@ -4561,7 +4561,7 @@ class RoomClient {
return this.userLog( return this.userLog(
'info', 'info',
'The participant screen is not shared, only the participant can initiate sharing', 'The participant screen is not shared, only the participant can initiate sharing',
'top', 'top-end',
); );
} }
} }
@@ -4586,7 +4586,7 @@ class RoomClient {
this.userLog( this.userLog(
'warning', 'warning',
from_peer_name + ' ' + _PEER.audioOff + ' has closed yours audio', from_peer_name + ' ' + _PEER.audioOff + ' has closed yours audio',
'top', 'top-end',
10000, 10000,
); );
} }
@@ -4597,7 +4597,7 @@ class RoomClient {
this.userLog( this.userLog(
'warning', 'warning',
from_peer_name + ' ' + _PEER.videoOff + ' has closed yours video', from_peer_name + ' ' + _PEER.videoOff + ' has closed yours video',
'top', 'top-end',
10000, 10000,
); );
} }
@@ -4609,7 +4609,7 @@ class RoomClient {
this.userLog( this.userLog(
'warning', 'warning',
from_peer_name + ' ' + _PEER.screenOff + ' has closed yours screen share', from_peer_name + ' ' + _PEER.screenOff + ' has closed yours screen share',
'top', 'top-end',
10000, 10000,
); );
} }
@@ -4843,7 +4843,7 @@ class RoomClient {
this.userLog( this.userLog(
'warning', 'warning',
peer_name + ' ' + _PEER.raiseHand + ' has raised the hand', peer_name + ' ' + _PEER.raiseHand + ' has raised the hand',
'top', 'top-end',
10000, 10000,
); );
this.sound('raiseHand'); this.sound('raiseHand');