'use strict';
if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.href.substr(4, location.href.length - 4);
/**
* MiroTalk SFU - Room component
*
* @link GitHub: https://github.com/miroslavpejic85/mirotalksfu
* @link Official Live demo: https://sfu.mirotalk.com
* @license For open source use: AGPLv3
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.8.21
*
*/
// ####################################################
// STATIC SETTINGS
// ####################################################
console.log('Window Location', window.location);
const userAgent = navigator.userAgent;
const parser = new UAParser(userAgent);
const parserResult = parser.getResult();
const deviceType = parserResult.device.type || 'desktop';
const isMobileDevice = deviceType === 'mobile';
const isTabletDevice = deviceType === 'tablet';
const isIPadDevice = parserResult.device.model?.toLowerCase() === 'ipad';
const isDesktopDevice = deviceType === 'desktop';
const thisInfo = getInfo();
const isEmbedded = window.self !== window.top;
const showDocumentPipBtn = !isEmbedded && 'documentPictureInPicture' in window;
const socket = io({
transports: ['websocket'],
reconnection: isDesktopDevice,
});
let survey = {
enabled: true,
url: 'https://www.questionpro.com/t/AUs7VZq02P',
};
let redirect = {
enabled: true,
url: '/newroom',
};
let recCodecs = null;
let recPrioritizeH264 = false;
let isToggleExtraBtnClicked = false;
const _PEER = {
presenter: '
Join from your mobile device
No need for apps, simply capture the QR code with your mobile camera Or Invite someone else to join by sending them the following URL
${RoomURL}
`,
showDenyButton: true,
showCancelButton: true,
cancelButtonColor: 'red',
denyButtonColor: 'green',
confirmButtonText: `Copy URL`,
denyButtonText: `Email invite`,
cancelButtonText: `Close`,
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
copyRoomURL();
} else if (result.isDenied) {
shareRoomByEmail();
}
// share screen on join
if (isScreenAllowed) {
rc.shareScreen();
}
});
makeRoomQR();
}
}
// ####################################################
// ROOM UTILITY
// ####################################################
function makeRoomQR() {
const qr = new QRious({
element: document.getElementById('qrRoom'),
value: RoomURL,
});
qr.set({
size: 256,
});
}
function makeRoomPopupQR() {
const qr = new QRious({
element: document.getElementById('qrRoomPopup'),
value: RoomURL,
});
qr.set({
size: 256,
});
}
function copyRoomURL() {
let tmpInput = document.createElement('input');
document.body.appendChild(tmpInput);
tmpInput.value = RoomURL;
tmpInput.select();
tmpInput.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(tmpInput.value);
document.body.removeChild(tmpInput);
userLog('info', 'Meeting URL copied to clipboard 👍', 'top-end');
}
function copyToClipboard(txt, showTxt = true) {
let tmpInput = document.createElement('input');
document.body.appendChild(tmpInput);
tmpInput.value = txt;
tmpInput.select();
tmpInput.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(tmpInput.value);
document.body.removeChild(tmpInput);
showTxt
? userLog('info', `${txt} copied to clipboard 👍`, 'top-end')
: userLog('info', `Copied to clipboard 👍`, 'top-end');
}
function shareRoomByEmail() {
Swal.fire({
allowOutsideClick: false,
allowEscapeKey: false,
background: swalBackground,
imageUrl: image.email,
position: 'center',
title: 'Select a Date and Time',
html: '
Media type: ${mediaType}
Error name: ${err.name}
Error message:
${errMessage}
`;
if (getUserMediaError) {
html += `
Common: getUserMedia errors `;
}
html += `
`;
popupHtmlMessage(null, image.forbidden, 'Access denied', html, 'center', redirectURL);
throw new Error(
`Access denied for ${mediaType} device [${err.name}]: ${errMessage} check the common getUserMedia errors: https://blog.addpipe.com/common-getusermedia-errors/`,
);
}
function popupHtmlMessage(icon, imageUrl, title, html, position, redirectURL = false, reloadPage = false) {
Swal.fire({
allowOutsideClick: false,
allowEscapeKey: false,
background: swalBackground,
position: position,
icon: icon,
imageUrl: imageUrl,
title: title,
html: html,
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
if (redirectURL) {
return openURL(redirectURL);
}
if (reloadPage) {
location.href = location.href;
}
}
});
}
async function toggleScreenSharing() {
if (initStream) {
await stopTracks(initStream);
elemDisplay('initVideo', true);
initVideoContainerShow();
}
joinRoomWithScreen = !joinRoomWithScreen;
if (joinRoomWithScreen) {
const defaultFrameRate = { ideal: 30 };
const selectedValue = getId('videoFps').options[localStorageSettings.screen_fps].value;
const customFrameRate = parseInt(selectedValue, 10);
const frameRate = selectedValue == 'max' ? defaultFrameRate : customFrameRate;
await navigator.mediaDevices
.getDisplayMedia({ audio: true, video: { frameRate: frameRate } })
.then((screenStream) => {
if (initVideo.classList.contains('mirror')) {
initVideo.classList.toggle('mirror');
}
initVideo.srcObject = screenStream;
initStream = screenStream;
console.log('04.6 ----> Success attached init screen video stream', initStream);
show(initStopScreenButton);
hide(initStartScreenButton);
disable(initVideoSelect, true);
disable(initVideoButton, true);
disable(initAudioVideoButton, true);
disable(initVideoAudioRefreshButton, true);
disable(initVirtualBackgroundButton, true);
})
.catch((error) => {
console.error('[Error] toggleScreenSharing', error);
joinRoomWithScreen = false;
return checkInitVideo(isVideoAllowed);
});
} else {
checkInitVideo(isVideoAllowed);
hide(initStopScreenButton);
show(initStartScreenButton);
disable(initVideoSelect, false);
disable(initVideoButton, false);
disable(initAudioVideoButton, false);
disable(initVideoAudioRefreshButton, false);
disable(initVirtualBackgroundButton, false);
}
}
function handleCameraMirror(video) {
camera === 'environment'
? video.classList.remove('mirror') // Back camera → No mirror
: video.classList.add('mirror'); // Disable mirror for rear camera
}
function handleSelects() {
// devices options
videoSelect.onchange = () => {
videoQuality.selectedIndex = 0;
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
refreshLsDevices();
};
videoQuality.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
};
screenQuality.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.screen);
};
screenOptimization.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.screen);
localStorageSettings.screen_optimization = screenOptimization.selectedIndex;
lS.setSettings(localStorageSettings);
};
videoFps.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
localStorageSettings.video_fps = videoFps.selectedIndex;
lS.setSettings(localStorageSettings);
};
screenFps.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.screen);
localStorageSettings.screen_fps = screenFps.selectedIndex;
lS.setSettings(localStorageSettings);
};
microphoneSelect.onchange = () => {
rc.closeThenProduce(RoomClient.mediaType.audio, microphoneSelect.value);
refreshLsDevices();
};
speakerSelect.onchange = () => {
rc.changeAudioDestination();
refreshLsDevices();
};
switchPushToTalk.onchange = async (e) => {
const producerExist = rc.producerExist(RoomClient.mediaType.audio);
if (!producerExist && !isPushToTalkActive) {
console.log('Push-to-talk: start audio producer');
setAudioButtonsDisabled(true);
if (!isEnumerateAudioDevices) initEnumerateAudioDevices();
await rc.produce(RoomClient.mediaType.audio, microphoneSelect.value);
setTimeout(async function () {
await rc.pauseProducer(RoomClient.mediaType.audio);
rc.updatePeerInfo(peer_name, socket.id, 'audio', false);
}, 1000);
}
isPushToTalkActive = !isPushToTalkActive;
if (producerExist && !isPushToTalkActive) {
console.log('Push-to-talk: resume audio producer');
await rc.resumeProducer(RoomClient.mediaType.audio);
rc.updatePeerInfo(peer_name, socket.id, 'audio', true);
}
e.target.blur(); // Removes focus from the element
rc.roomMessage('ptt', isPushToTalkActive);
console.log(`Push-to-talk enabled: ${isPushToTalkActive}`);
};
document.addEventListener('keydown', async (e) => {
if (!isPushToTalkActive) return;
if (e.code === 'Space') {
if (isSpaceDown) return;
await rc.resumeProducer(RoomClient.mediaType.audio);
rc.updatePeerInfo(peer_name, socket.id, 'audio', true);
isSpaceDown = true;
console.log('Push-to-talk: audio resumed');
}
});
document.addEventListener('keyup', async (e) => {
if (!isPushToTalkActive) return;
if (e.code === 'Space') {
await rc.pauseProducer(RoomClient.mediaType.audio);
rc.updatePeerInfo(peer_name, socket.id, 'audio', false);
isSpaceDown = false;
console.log('Push-to-talk: audio paused');
}
});
// room
switchBroadcasting.onchange = (e) => {
isBroadcastingEnabled = e.currentTarget.checked;
rc.roomAction('broadcasting');
localStorageSettings.broadcasting = isBroadcastingEnabled;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchLobby.onchange = (e) => {
isLobbyEnabled = e.currentTarget.checked;
rc.roomAction(isLobbyEnabled ? 'lobbyOn' : 'lobbyOff');
rc.lobbyToggle();
localStorageSettings.lobby = isLobbyEnabled;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchPitchBar.onchange = (e) => {
isPitchBarEnabled = e.currentTarget.checked;
rc.roomMessage('pitchBar', isPitchBarEnabled);
localStorageSettings.pitch_bar = isPitchBarEnabled;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchSounds.onchange = (e) => {
isSoundEnabled = e.currentTarget.checked;
rc.roomMessage('sounds', isSoundEnabled);
localStorageSettings.sounds = isSoundEnabled;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchShare.onchange = (e) => {
notify = e.currentTarget.checked;
rc.roomMessage('notify', notify);
localStorageSettings.share_on_join = notify;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchKeepButtonsVisible.onchange = (e) => {
isButtonsBarOver = isKeepButtonsVisible = e.currentTarget.checked;
localStorageSettings.keep_buttons_visible = isButtonsBarOver;
lS.setSettings(localStorageSettings);
const status = isButtonsBarOver ? 'enabled' : 'disabled';
userLog('info', `Buttons always visible ${status}`, 'top-end');
e.target.blur();
};
// audio options
switchAutoGainControl.onchange = (e) => {
localStorageSettings.mic_auto_gain_control = e.currentTarget.checked;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEchoCancellation.onchange = (e) => {
localStorageSettings.mic_echo_cancellations = e.currentTarget.checked;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchNoiseSuppression.onchange = (e) => {
localStorageSettings.mic_noise_suppression = e.currentTarget.checked;
lS.setSettings(localStorageSettings);
e.target.blur();
};
sampleRateSelect.onchange = (e) => {
localStorageSettings.mic_sample_rate = e.currentTarget.selectedIndex;
lS.setSettings(localStorageSettings);
e.target.blur();
};
sampleSizeSelect.onchange = (e) => {
localStorageSettings.mic_sample_size = e.currentTarget.selectedIndex;
lS.setSettings(localStorageSettings);
e.target.blur();
};
channelCountSelect.onchange = (e) => {
localStorageSettings.mic_channel_count = e.currentTarget.selectedIndex;
lS.setSettings(localStorageSettings);
e.target.blur();
};
micLatencyRange.oninput = (e) => {
localStorageSettings.mic_latency = e.currentTarget.value;
lS.setSettings(localStorageSettings);
micLatencyValue.innerText = e.currentTarget.value;
e.target.blur();
};
micVolumeRange.oninput = (e) => {
localStorageSettings.mic_volume = e.currentTarget.value;
lS.setSettings(localStorageSettings);
micVolumeValue.innerText = e.currentTarget.value;
e.target.blur();
};
// recording
switchHostOnlyRecording.onchange = (e) => {
hostOnlyRecording = e.currentTarget.checked;
rc.roomAction(hostOnlyRecording ? 'hostOnlyRecordingOn' : 'hostOnlyRecordingOff');
localStorageSettings.host_only_recording = hostOnlyRecording;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchH264Recording.onchange = (e) => {
recPrioritizeH264 = e.currentTarget.checked;
rc.roomMessage('recPrioritizeH264', recPrioritizeH264);
localStorageSettings.rec_prioritize_h264 = recPrioritizeH264;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchServerRecording.onchange = (e) => {
rc.recording.recSyncServerRecording = e.currentTarget.checked;
rc.roomMessage('recSyncServer', rc.recording.recSyncServerRecording);
localStorageSettings.rec_server = rc.recording.recSyncServerRecording;
lS.setSettings(localStorageSettings);
e.target.blur();
};
// styling
keepCustomTheme.onchange = (e) => {
themeCustom.keep = e.currentTarget.checked;
selectTheme.disabled = themeCustom.keep;
rc.roomMessage('customThemeKeep', themeCustom.keep);
localStorageSettings.theme_custom = themeCustom.keep;
localStorageSettings.theme_color = themeCustom.color;
lS.setSettings(localStorageSettings);
setTheme();
e.target.blur();
};
BtnAspectRatio.onchange = () => {
setAspectRatio(BtnAspectRatio.value);
};
BtnVideoObjectFit.onchange = () => {
rc.handleVideoObjectFit(BtnVideoObjectFit.value);
localStorageSettings.video_obj_fit = BtnVideoObjectFit.selectedIndex;
lS.setSettings(localStorageSettings);
}; // cover
BtnVideoControls.onchange = () => {
rc.handleVideoControls(BtnVideoControls.value);
localStorageSettings.video_controls = BtnVideoControls.selectedIndex;
lS.setSettings(localStorageSettings);
};
selectTheme.onchange = () => {
localStorageSettings.theme = selectTheme.selectedIndex;
lS.setSettings(localStorageSettings);
setTheme();
};
BtnsBarPosition.onchange = () => {
rc.changeBtnsBarPosition(BtnsBarPosition.value);
localStorageSettings.buttons_bar = BtnsBarPosition.selectedIndex;
lS.setSettings(localStorageSettings);
refreshMainButtonsToolTipPlacement();
resizeMainButtons();
};
pinVideoPosition.onchange = () => {
rc.toggleVideoPin(pinVideoPosition.value);
localStorageSettings.pin_grid = pinVideoPosition.selectedIndex;
lS.setSettings(localStorageSettings);
};
// chat
showChatOnMsg.onchange = (e) => {
rc.showChatOnMessage = e.currentTarget.checked;
rc.roomMessage('showChat', rc.showChatOnMessage);
localStorageSettings.show_chat_on_msg = rc.showChatOnMessage;
lS.setSettings(localStorageSettings);
e.target.blur();
};
speechIncomingMsg.onchange = (e) => {
rc.speechInMessages = e.currentTarget.checked;
rc.roomMessage('speechMessages', rc.speechInMessages);
localStorageSettings.speech_in_msg = rc.speechInMessages;
lS.setSettings(localStorageSettings);
e.target.blur();
};
transcriptShowOnMsg.onchange = (e) => {
transcription.showOnMessage = e.currentTarget.checked;
rc.roomMessage('transcriptShowOnMsg', transcription.showOnMessage);
localStorageSettings.transcript_show_on_msg = transcription.showOnMessage;
lS.setSettings(localStorageSettings);
e.target.blur();
};
// whiteboard options
wbDrawingColorEl.onchange = () => {
wbCanvas.freeDrawingBrush.color = wbDrawingColorEl.value;
whiteboardIsDrawingMode(true);
};
wbBackgroundColorEl.onchange = () => {
setWhiteboardBgColor(wbBackgroundColorEl.value);
};
whiteboardGhostButton.onclick = (e) => {
wbIsBgTransparent = !wbIsBgTransparent;
wbIsBgTransparent ? wbCanvasBackgroundColor('rgba(0, 0, 0, 0.100)') : setTheme();
};
whiteboardGridBtn.onclick = (e) => {
toggleCanvasGrid();
};
// room moderator rules
switchEveryonePrivacy.onchange = (e) => {
const videoStartPrivacy = e.currentTarget.checked;
isVideoPrivacyActive = !videoStartPrivacy;
rc.toggleVideoPrivacyMode();
rc.updateRoomModerator({ type: 'video_start_privacy', status: videoStartPrivacy });
rc.roomMessage('video_start_privacy', videoStartPrivacy);
localStorageSettings.moderator_video_start_privacy = videoStartPrivacy;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneMute.onchange = (e) => {
const audioStartMuted = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'audio_start_muted', status: audioStartMuted });
rc.roomMessage('audio_start_muted', audioStartMuted);
localStorageSettings.moderator_audio_start_muted = audioStartMuted;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneHidden.onchange = (e) => {
const videoStartHidden = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'video_start_hidden', status: videoStartHidden });
rc.roomMessage('video_start_hidden', videoStartHidden);
localStorageSettings.moderator_video_start_hidden = videoStartHidden;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneCantUnmute.onchange = (e) => {
const audioCantUnmute = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'audio_cant_unmute', status: audioCantUnmute });
rc.roomMessage('audio_cant_unmute', audioCantUnmute);
localStorageSettings.moderator_audio_cant_unmute = audioCantUnmute;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneCantUnhide.onchange = (e) => {
const videoCantUnhide = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'video_cant_unhide', status: videoCantUnhide });
rc.roomMessage('video_cant_unhide', videoCantUnhide);
localStorageSettings.moderator_video_cant_unhide = videoCantUnhide;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneCantShareScreen.onchange = (e) => {
const screenCantShare = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'screen_cant_share', status: screenCantShare });
rc.roomMessage('screen_cant_share', screenCantShare);
localStorageSettings.moderator_screen_cant_share = screenCantShare;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneCantChatPrivately.onchange = (e) => {
const chatCantPrivately = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'chat_cant_privately', status: chatCantPrivately });
rc.roomMessage('chat_cant_privately', chatCantPrivately);
localStorageSettings.moderator_chat_cant_privately = chatCantPrivately;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneCantChatChatGPT.onchange = (e) => {
const chatCantChatGPT = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'chat_cant_chatgpt', status: chatCantChatGPT });
rc.roomMessage('chat_cant_chatgpt', chatCantChatGPT);
localStorageSettings.moderator_chat_cant_chatgpt = chatCantChatGPT;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchEveryoneCantMediaSharing.onchange = (e) => {
const mediaCantSharing = e.currentTarget.checked;
rc.updateRoomModerator({ type: 'media_cant_sharing', status: mediaCantSharing });
rc.roomMessage('media_cant_sharing', mediaCantSharing);
localStorageSettings.moderator_media_cant_sharing = mediaCantSharing;
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchDisconnectAllOnLeave.onchange = (e) => {
const disconnectAll = e.currentTarget.checked;
rc.roomMessage('disconnect_all_on_leave', disconnectAll);
localStorageSettings.moderator_disconnect_all_on_leave = disconnectAll;
lS.setSettings(localStorageSettings);
e.target.blur();
};
// handle Shortcuts
handleKeyboardShortcuts();
}
// ####################################################
// KEYBOARD SHORTCUTS
// ####################################################
function handleKeyboardShortcuts() {
if (!isDesktopDevice || !BUTTONS.settings.keyboardShortcuts) {
elemDisplay('tabShortcutsBtn', false);
setKeyboardShortcuts(false);
} else {
switchShortcuts.onchange = (e) => {
const status = setKeyboardShortcuts(e.currentTarget.checked);
userLog('info', `Keyboard shortcuts ${status}`, 'top-end');
e.target.blur();
};
document.addEventListener('keydown', (event) => {
if (
!isShortcutsEnabled ||
rc.isChatOpen ||
wbIsOpen ||
rc.isEditorOpen ||
(!isPresenter && isBroadcastingEnabled)
)
return;
const key = event.key.toLowerCase(); // Convert to lowercase for simplicity
console.log(`Detected shortcut: ${key}`);
const { audio_cant_unmute, video_cant_unhide, screen_cant_share } = rc._moderator;
const notPresenter = isRulesActive && !isPresenter;
switch (key) {
case 'a':
if (notPresenter && !audio && (audio_cant_unmute || !BUTTONS.main.startAudioButton)) {
userLog('warning', 'The presenter has disabled your ability to enable audio', 'top-end');
break;
}
audio ? stopAudioButton.click() : startAudioButton.click();
break;
case 'v':
if (notPresenter && !video && (video_cant_unhide || !BUTTONS.main.startVideoButton)) {
userLog('warning', 'The presenter has disabled your ability to enable video', 'top-end');
break;
}
video ? stopVideoButton.click() : startVideoButton.click();
break;
case 's':
if (notPresenter && !screen && (screen_cant_share || !BUTTONS.main.startScreenButton)) {
userLog('warning', 'The presenter has disabled your ability to share the screen', 'top-end');
break;
}
screen ? stopScreenButton.click() : startScreenButton.click();
break;
case 'h':
if (notPresenter && !BUTTONS.main.raiseHandButton) {
userLog('warning', 'The presenter has disabled your ability to raise your hand', 'top-end');
break;
}
hand ? lowerHandButton.click() : raiseHandButton.click();
break;
case 'c':
if (notPresenter && !BUTTONS.main.chatButton) {
userLog('warning', 'The presenter has disabled your ability to open the chat', 'top-end');
break;
}
chatButton.click();
break;
case 'o':
if (notPresenter && !BUTTONS.main.settingsButton) {
userLog('warning', 'The presenter has disabled your ability to open the settings', 'top-end');
break;
}
settingsButton.click();
break;
case 'x':
if (notPresenter && !BUTTONS.main.hideMeButton) {
userLog('warning', 'The presenter has disabled your ability to hide yourself', 'top-end');
break;
}
hideMeButton.click();
break;
case 'r':
if (notPresenter && (hostOnlyRecording || !BUTTONS.settings.tabRecording)) {
userLog('warning', 'The presenter has disabled your ability to start recording', 'top-end');
break;
}
isRecording ? stopRecButton.click() : startRecButton.click();
break;
case 'j':
if (notPresenter && !BUTTONS.main.emojiRoomButton) {
userLog('warning', 'The presenter has disabled your ability to open the room emoji', 'top-end');
break;
}
emojiRoomButton.click();
break;
case 'k':
if (notPresenter && !BUTTONS.main.transcriptionButton) {
userLog('warning', 'The presenter has disabled your ability to start transcription', 'top-end');
break;
}
transcriptionButton.click();
break;
case 'p':
if (notPresenter && !BUTTONS.main.pollButton) {
userLog('warning', 'The presenter has disabled your ability to start a poll', 'top-end');
break;
}
pollButton.click();
break;
case 'e':
if (notPresenter && !BUTTONS.main.editorButton) {
userLog('warning', 'The presenter has disabled your ability to open the editor', 'top-end');
break;
}
editorButton.click();
break;
case 'w':
if (notPresenter && !BUTTONS.main.whiteboardButton) {
userLog('warning', 'The presenter has disabled your ability to open the whiteboard', 'top-end');
break;
}
whiteboardButton.click();
break;
case 'd':
if (!showDocumentPipBtn) {
userLog('warning', 'The document PIP is not supported in this browser', 'top-end');
break;
}
if (notPresenter && !BUTTONS.main.documentPiPButton) {
userLog(
'warning',
'The presenter has disabled your ability to open the document PIP',
'top-end',
);
break;
}
documentPiPButton.click();
break;
case 't':
if (notPresenter && !BUTTONS.main.snapshotRoomButton) {
userLog('warning', 'The presenter has disabled your ability to take a snapshot', 'top-end');
break;
}
snapshotRoomButton.click();
break;
case 'f':
if (notPresenter && !BUTTONS.settings.fileSharing) {
userLog('warning', 'The presenter has disabled your ability to share files', 'top-end');
break;
}
fileShareButton.click();
break;
//...
default:
console.log(`Unhandled shortcut key: ${key}`);
}
});
}
}
function setKeyboardShortcuts(enabled) {
isShortcutsEnabled = enabled;
localStorageSettings.keyboard_shortcuts = isShortcutsEnabled;
lS.setSettings(localStorageSettings);
return isShortcutsEnabled ? 'enabled' : 'disabled';
}
// ####################################################
// HTML INPUTS
// ####################################################
function handleInputs() {
chatMessage.onkeyup = (e) => {
if (e.keyCode === 13 && (isMobileDevice || !e.shiftKey)) {
e.preventDefault();
chatSendButton.click();
}
};
chatMessage.oninput = function () {
const chatInputEmoji = {
'<3': '❤️',
':(': '😡',
':S': '😟',
':X': '🤐',
';(': '😥',
':T': '😖',
':@': '😠',
':$': '🤑',
':&': '🤗',
':#': '🤔',
':!': '😵',
':W': '😷',
':%': '🤒',
':*!': '🤩',
':G': '😬',
':R': '😋',
':M': '🤮',
':L': '🥴',
':C': '🥺',
':F': '🥳',
':Z': '🤢',
':^': '🤓',
':K': '🤫',
':D!': '🤯',
':H': '🧐',
':U': '🤥',
':V': '🤪',
':N': '🥶',
':J': '🥴',
};
// Create a regular expression pattern for all keys in chatInputEmoji
const regexPattern = new RegExp(
Object.keys(chatInputEmoji)
.map((key) => key.replace(/([()[{*+.$^\\|?])/g, '\\$1'))
.join('|'),
'gim',
);
// Replace matching patterns with corresponding emojis
this.value = this.value.replace(regexPattern, (match) => chatInputEmoji[match]);
rc.checkLineBreaks();
};
chatMessage.onpaste = () => {
isChatPasteTxt = true;
rc.checkLineBreaks();
};
}
// ####################################################
// EMOJI PIKER
// ####################################################
function toggleUsernameEmoji() {
getId('usernameEmoji').classList.toggle('hidden');
}
function handleUsernameEmojiPicker() {
const pickerOptions = {
theme: 'dark',
onEmojiSelect: addEmojiToUsername,
};
const emojiUsernamePicker = new EmojiMart.Picker(pickerOptions);
getId('usernameEmoji').appendChild(emojiUsernamePicker);
function addEmojiToUsername(data) {
getId('usernameInput').value += data.native;
toggleUsernameEmoji();
}
}
function handleChatEmojiPicker() {
const pickerOptions = {
theme: 'dark',
onEmojiSelect: addEmojiToMsg,
};
const emojiPicker = new EmojiMart.Picker(pickerOptions);
rc.getId('chatEmoji').appendChild(emojiPicker);
function addEmojiToMsg(data) {
chatMessage.value += data.native;
rc.toggleChatEmoji();
}
}
function handleRoomEmojiPicker() {
const pickerRoomOptions = {
theme: 'dark',
onEmojiSelect: sendEmojiToRoom,
};
const emojiRoomPicker = new EmojiMart.Picker(pickerRoomOptions);
emojiPickerContainer.appendChild(emojiRoomPicker);
emojiPickerContainer.style.display = 'none';
emojiRoomButton.onclick = () => {
toggleEmojiPicker();
};
closeEmojiPickerContainer.onclick = () => {
toggleEmojiPicker();
};
function sendEmojiToRoom(data) {
console.log('Selected Emoji', data.native);
const cmd = {
type: 'roomEmoji',
peer_name: peer_name,
emoji: data.native,
shortcodes: data.shortcodes,
broadcast: true,
};
if (rc.thereAreParticipants()) {
rc.emitCmd(cmd);
}
rc.handleCmd(cmd);
// toggleEmojiPicker();
}
function toggleEmojiPicker() {
if (emojiPickerContainer.style.display === 'block') {
emojiPickerContainer.style.display = 'none';
setColor(emojiRoomButton, 'white');
} else {
emojiPickerContainer.style.display = 'block';
setColor(emojiRoomButton, 'yellow');
}
}
}
// ####################################################
// ROOM EDITOR
// ####################################################
function handleEditor() {
const toolbarOptions = [
[{ header: [1, 2, 3, false] }, { align: [] }, { background: [] }],
['bold', 'italic', 'underline', 'strike', 'link', 'image', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
[{ indent: '+1' }, { indent: '-1' }],
['clean'], // Custom button to clear formatting
//...
];
quill = new Quill('#editor', {
modules: {
toolbar: {
container: toolbarOptions,
},
syntax: true,
},
theme: 'snow',
});
applySyntaxHighlighting();
quill.on('text-change', (delta, oldDelta, source) => {
if (!isPresenter && rc.editorIsLocked()) {
return;
}
// console.log('text-change', { delta, oldDelta, source });
applySyntaxHighlighting();
if (rc.thereAreParticipants() && source === 'user') {
socket.emit('editorChange', delta);
}
});
}
function applySyntaxHighlighting() {
const codeBlocks = document.querySelectorAll('.ql-syntax');
codeBlocks.forEach((block) => {
hljs.highlightElement(block);
});
}
// ####################################################
// LOAD SETTINGS FROM LOCAL STORAGE
// ####################################################
function loadSettingsFromLocalStorage() {
rc.showChatOnMessage = localStorageSettings.show_chat_on_msg;
transcription.showOnMessage = localStorageSettings.transcript_show_on_msg;
rc.speechInMessages = localStorageSettings.speech_in_msg;
isPitchBarEnabled = localStorageSettings.pitch_bar;
isSoundEnabled = localStorageSettings.sounds;
isKeepButtonsVisible = localStorageSettings.keep_buttons_visible;
isShortcutsEnabled = localStorageSettings.keyboard_shortcuts;
showChatOnMsg.checked = rc.showChatOnMessage;
transcriptShowOnMsg.checked = transcription.showOnMessage;
speechIncomingMsg.checked = rc.speechInMessages;
switchPitchBar.checked = isPitchBarEnabled;
switchSounds.checked = isSoundEnabled;
switchShare.checked = notify;
switchKeepButtonsVisible.checked = isKeepButtonsVisible;
switchShortcuts.checked = isShortcutsEnabled;
recPrioritizeH264 = localStorageSettings.rec_prioritize_h264;
switchH264Recording.checked = recPrioritizeH264;
switchServerRecording.checked = localStorageSettings.rec_server;
keepCustomTheme.checked = themeCustom.keep;
selectTheme.disabled = themeCustom.keep;
themeCustom.input.value = themeCustom.color;
switchAutoGainControl.checked = localStorageSettings.mic_auto_gain_control;
switchEchoCancellation.checked = localStorageSettings.mic_echo_cancellations;
switchNoiseSuppression.checked = localStorageSettings.mic_noise_suppression;
sampleRateSelect.selectedIndex = localStorageSettings.mic_sample_rate;
sampleSizeSelect.selectedIndex = localStorageSettings.mic_sample_size;
channelCountSelect.selectedIndex = localStorageSettings.mic_channel_count;
micLatencyRange.value = localStorageSettings.mic_latency || 50;
micLatencyValue.innerText = localStorageSettings.mic_latency || 50;
micVolumeRange.value = localStorageSettings.mic_volume || 100;
micVolumeValue.innerText = localStorageSettings.mic_volume || 100;
screenOptimization.selectedIndex = localStorageSettings.screen_optimization;
videoFps.selectedIndex = localStorageSettings.video_fps;
screenFps.selectedIndex = localStorageSettings.screen_fps;
BtnVideoObjectFit.selectedIndex = localStorageSettings.video_obj_fit;
BtnVideoControls.selectedIndex = localStorageSettings.video_controls;
BtnsBarPosition.selectedIndex = localStorageSettings.buttons_bar;
pinVideoPosition.selectedIndex = localStorageSettings.pin_grid;
rc.handleVideoObjectFit(BtnVideoObjectFit.value);
rc.handleVideoControls(BtnVideoControls.value);
rc.changeBtnsBarPosition(BtnsBarPosition.value);
rc.toggleVideoPin(pinVideoPosition.value);
refreshMainButtonsToolTipPlacement();
resizeMainButtons();
}
// ####################################################
// ROOM CLIENT EVENT LISTNERS
// ####################################################
function handleRoomClientEvents() {
rc.on(RoomClient.EVENTS.startRec, () => {
console.log('Room event: Client start recoding');
hide(startRecButton);
show(stopRecButton);
show(pauseRecButton);
show(recordingTime);
startRecordingTimer();
isRecording = true;
rc.updatePeerInfo(peer_name, socket.id, 'recording', true);
});
rc.on(RoomClient.EVENTS.pauseRec, () => {
console.log('Room event: Client pause recoding');
hide(pauseRecButton);
show(resumeRecButton);
});
rc.on(RoomClient.EVENTS.resumeRec, () => {
console.log('Room event: Client resume recoding');
hide(resumeRecButton);
show(pauseRecButton);
});
rc.on(RoomClient.EVENTS.stopRec, () => {
console.log('Room event: Client stop recoding');
hide(stopRecButton);
hide(pauseRecButton);
hide(resumeRecButton);
hide(recordingTime);
show(startRecButton);
stopRecordingTimer();
isRecording = false;
rc.updatePeerInfo(peer_name, socket.id, 'recording', false);
});
rc.on(RoomClient.EVENTS.raiseHand, () => {
console.log('Room event: Client raise hand');
hide(raiseHandButton);
show(lowerHandButton);
setColor(lowerHandIcon, 'lime');
hand = true;
});
rc.on(RoomClient.EVENTS.lowerHand, () => {
console.log('Room event: Client lower hand');
hide(lowerHandButton);
show(raiseHandButton);
setColor(lowerHandIcon, 'white');
hand = false;
});
rc.on(RoomClient.EVENTS.startAudio, () => {
console.log('Room event: Client start audio');
hide(startAudioButton);
show(stopAudioButton);
setColor(startAudioButton, 'red');
setAudioButtonsDisabled(false);
audio = true;
});
rc.on(RoomClient.EVENTS.pauseAudio, () => {
console.log('Room event: Client pause audio');
hide(stopAudioButton);
show(startAudioButton);
setColor(startAudioButton, 'red');
setAudioButtonsDisabled(false);
audio = false;
});
rc.on(RoomClient.EVENTS.resumeAudio, () => {
console.log('Room event: Client resume audio');
hide(startAudioButton);
show(stopAudioButton);
setAudioButtonsDisabled(false);
audio = true;
});
rc.on(RoomClient.EVENTS.stopAudio, () => {
console.log('Room event: Client stop audio');
hide(stopAudioButton);
show(startAudioButton);
setAudioButtonsDisabled(false);
stopMicrophoneProcessing();
audio = false;
});
rc.on(RoomClient.EVENTS.startVideo, () => {
console.log('Room event: Client start video');
hide(startVideoButton);
show(stopVideoButton);
setColor(startVideoButton, 'red');
setVideoButtonsDisabled(false);
hideClassElements('videoMenuBar');
// if (isParticipantsListOpen) getRoomParticipants();
video = true;
});
rc.on(RoomClient.EVENTS.pauseVideo, () => {
console.log('Room event: Client pause video');
hide(stopVideoButton);
show(startVideoButton);
setColor(startVideoButton, 'red');
setVideoButtonsDisabled(false);
hideClassElements('videoMenuBar');
video = false;
});
rc.on(RoomClient.EVENTS.resumeVideo, () => {
console.log('Room event: Client resume video');
hide(startVideoButton);
show(stopVideoButton);
setVideoButtonsDisabled(false);
isVideoPrivacyActive = false;
hideClassElements('videoMenuBar');
video = true;
});
rc.on(RoomClient.EVENTS.stopVideo, () => {
console.log('Room event: Client stop video');
hide(stopVideoButton);
show(startVideoButton);
setVideoButtonsDisabled(false);
isVideoPrivacyActive = false;
hideClassElements('videoMenuBar');
// if (isParticipantsListOpen) getRoomParticipants();
video = false;
});
rc.on(RoomClient.EVENTS.startScreen, () => {
console.log('Room event: Client start screen');
hide(startScreenButton);
show(stopScreenButton);
hideClassElements('videoMenuBar');
// if (isParticipantsListOpen) getRoomParticipants();
screen = true;
});
rc.on(RoomClient.EVENTS.pauseScreen, () => {
console.log('Room event: Client pause screen');
hide(startScreenButton);
show(stopScreenButton);
hideClassElements('videoMenuBar');
screen = false;
});
rc.on(RoomClient.EVENTS.resumeScreen, () => {
console.log('Room event: Client resume screen');
hide(stopScreenButton);
show(startScreenButton);
hideClassElements('videoMenuBar');
screen = true;
});
rc.on(RoomClient.EVENTS.stopScreen, () => {
console.log('Room event: Client stop screen');
hide(stopScreenButton);
show(startScreenButton);
hideClassElements('videoMenuBar');
// if (isParticipantsListOpen) getRoomParticipants();
screen = false;
});
rc.on(RoomClient.EVENTS.roomLock, () => {
console.log('Room event: Client lock room');
hide(lockRoomButton);
show(unlockRoomButton);
isRoomLocked = true;
});
rc.on(RoomClient.EVENTS.roomUnlock, () => {
console.log('Room event: Client unlock room');
hide(unlockRoomButton);
show(lockRoomButton);
isRoomLocked = false;
});
rc.on(RoomClient.EVENTS.lobbyOn, () => {
console.log('Room event: Client room lobby enabled');
if (isRulesActive && !isPresenter) {
hide(lobbyButton);
}
sound('lobby');
isLobbyEnabled = true;
});
rc.on(RoomClient.EVENTS.lobbyOff, () => {
console.log('Room event: Client room lobby disabled');
isLobbyEnabled = false;
});
rc.on(RoomClient.EVENTS.hostOnlyRecordingOn, () => {
if (isRulesActive && !isPresenter) {
console.log('Room event: host only recording enabled');
// Stop recording ...
if (rc.isRecording() || recordingStatus.innerText != '0s') {
rc.saveRecording('Room event: host only recording enabled, going to stop recording');
}
hide(startRecButton);
hide(recordingImage);
hide(roomHostOnlyRecording);
hide(roomRecordingOptions);
hide(roomRecordingServer);
show(recordingMessage);
hostOnlyRecording = true;
}
});
rc.on(RoomClient.EVENTS.hostOnlyRecordingOff, () => {
if (isRulesActive && !isPresenter) {
console.log('Room event: host only recording disabled');
show(startRecButton);
show(recordingImage);
hide(roomHostOnlyRecording);
hide(recordingMessage);
hostOnlyRecording = false;
}
});
rc.on(RoomClient.EVENTS.startRTMP, () => {
console.log('Room event: RTMP started');
hide(startRtmpButton);
show(stopRtmpButton);
});
rc.on(RoomClient.EVENTS.stopRTMP, () => {
console.log('Room event: RTMP stopped');
hide(stopRtmpButton);
show(startRtmpButton);
});
rc.on(RoomClient.EVENTS.endRTMP, () => {
console.log('Room event: RTMP ended');
hide(stopRtmpButton);
show(startRtmpButton);
});
rc.on(RoomClient.EVENTS.startRTMPfromURL, () => {
console.log('Room event: RTMP from URL started');
hide(startRtmpURLButton);
show(stopRtmpURLButton);
});
rc.on(RoomClient.EVENTS.stopRTMPfromURL, () => {
console.log('Room event: RTMP from URL stopped');
hide(stopRtmpURLButton);
show(startRtmpURLButton);
});
rc.on(RoomClient.EVENTS.endRTMPfromURL, () => {
console.log('Room event: RTMP from URL ended');
hide(stopRtmpURLButton);
show(startRtmpURLButton);
});
rc.on(RoomClient.EVENTS.exitRoom, () => {
console.log('Room event: Client leave room');
if (rc.isRecording() || recordingStatus.innerText != '0s') {
rc.saveRecording('Room event: Client save recording before to exit');
}
if (survey && survey.enabled) {
leaveFeedback();
} else {
redirectOnLeave();
}
});
}
// ####################################################
// UTILITY
// ####################################################
function leaveFeedback() {
Swal.fire({
allowOutsideClick: false,
allowEscapeKey: false,
showDenyButton: true,
background: swalBackground,
imageUrl: image.feedback,
title: 'Leave a feedback',
text: 'Do you want to rate your MiroTalk experience?',
confirmButtonText: `Yes`,
denyButtonText: `No`,
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
openURL(survey.url);
} else {
redirectOnLeave();
}
});
}
function redirectOnLeave() {
redirect && redirect.enabled ? openURL(redirect.url) : openURL('/newroom');
}
function userLog(icon, message, position, timer = 3000) {
const Toast = Swal.mixin({
background: swalBackground,
toast: true,
position: position,
showConfirmButton: false,
timer: timer,
timerProgressBar: true,
});
Toast.fire({
icon: icon,
title: message,
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
});
}
function saveDataToFile(dataURL, fileName) {
const a = document.createElement('a');
a.style.display = 'none';
a.href = dataURL;
a.download = fileName;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(dataURL);
}, 100);
}
function saveObjToJsonFile(dataObj, name) {
console.log('Save data', { dataObj: dataObj, name: name });
const dataTime = getDataTimeString();
let a = document.createElement('a');
a.href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(dataObj, null, 1));
a.download = `${dataTime}-${name}.txt`;
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
}, 100);
sound('download');
}
function getDataTimeString() {
const d = new Date();
const date = d.toISOString().split('T')[0];
const time = d.toTimeString().split(' ')[0];
return `${date}-${time}`;
}
function getDataTimeStringFormat() {
const d = new Date();
const date = d.toISOString().split('T')[0].replace(/-/g, '_');
const time = d.toTimeString().split(' ')[0].replace(/:/g, '_');
return `${date}_${time}`;
}
function getUUID() {
const uuid4 = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16),
);
if (window.localStorage.uuid) {
return window.localStorage.uuid;
}
window.localStorage.uuid = uuid4;
return uuid4;
}
function showButtons() {
if (
isButtonsBarOver ||
isButtonsVisible ||
(isMobileDevice && rc.isChatOpen) ||
(isMobileDevice && rc.isMySettingsOpen)
)
return;
toggleExtraButton.innerHTML = icons.down;
bottomButtons.style.display = 'flex';
isButtonsVisible = true;
}
function checkButtonsBar() {
if (localStorageSettings.keep_buttons_visible) {
control.style.display = 'flex';
toggleExtraButton.innerHTML = icons.up;
bottomButtons.style.display = 'flex';
isButtonsVisible = true;
} else {
if (!isButtonsBarOver) {
control.style.display = 'none';
toggleExtraButton.innerHTML = icons.up;
bottomButtons.style.display = 'none';
isButtonsVisible = false;
}
}
setTimeout(() => {
checkButtonsBar();
}, 10000);
}
function toggleExtraButtons() {
const isControlHidden = control.style.display === 'none' || control.style.display === '';
const displayValue = isControlHidden ? 'flex' : 'none';
const iconHtml = isControlHidden ? icons.up : icons.down;
elemDisplay('control', isControlHidden, displayValue);
toggleExtraButton.innerHTML = iconHtml;
hideClassElements('videoMenuBar');
}
function hideClassElements(className) {
const elements = rc.getEcN(className);
for (let i = 0; i < elements.length; i++) {
hide(elements[i]);
}
setCamerasBorderNone();
}
function setCamerasBorderNone() {
const cameras = rc.getEcN('Camera');
for (let i = 0; i < cameras.length; i++) {
cameras[i].style.border = 'none';
}
}
// https://animate.style
function animateCSS(element, animation, prefix = 'animate__') {
return new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
element.classList.add(`${prefix}animated`, animationName);
function handleAnimationEnd(event) {
event.stopPropagation();
element.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
element.addEventListener('animationend', handleAnimationEnd, { once: true });
});
}
function setAudioButtonsDisabled(disabled) {
startAudioButton.disabled = disabled;
stopAudioButton.disabled = disabled;
}
function setVideoButtonsDisabled(disabled) {
startVideoButton.disabled = disabled;
stopVideoButton.disabled = disabled;
}
async function sound(name, force = false) {
if (!isSoundEnabled && !force) return;
let sound = '../sounds/' + name + '.wav';
let audio = new Audio(sound);
try {
audio.volume = 0.5;
await audio.play();
} catch (err) {
return false;
}
}
async function isImageURL(url) {
if (!url) return false;
try {
const response = await fetch(url, { method: 'HEAD' });
const contentType = response.headers.get('content-type');
return contentType && contentType.startsWith('image/');
} catch {
return false;
}
}
function isMobile(userAgent) {
return !!/Android|webOS|iPhone|iPad|iPod|BB10|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(userAgent || '');
}
function isTablet(userAgent) {
return /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(
userAgent,
);
}
function isIpad(userAgent) {
return /macintosh/.test(userAgent) && 'ontouchend' in document;
}
function isDesktop() {
return !isMobileDevice && !isTabletDevice && !isIPadDevice;
}
function openURL(url, blank = false) {
blank ? window.open(url, '_blank') : (window.location.href = url);
}
function bytesToSize(bytes) {
let sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Byte';
let i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
function setCookie(name, value, expDays) {
let date = new Date();
date.setTime(date.getTime() + expDays * 24 * 60 * 60 * 1000);
const expires = 'expires=' + date.toUTCString();
document.cookie = name + '=' + value + '; ' + expires + '; path=/';
}
function getCookie(cName) {
const name = cName + '=';
const cDecoded = decodeURIComponent(document.cookie);
const cArr = cDecoded.split('; ');
let res;
cArr.forEach((val) => {
if (val.indexOf(name) === 0) res = val.substring(name.length);
});
return res;
}
function isHtml(str) {
var a = document.createElement('div');
a.innerHTML = str;
for (var c = a.childNodes, i = c.length; i--; ) {
if (c[i].nodeType == 1) return true;
}
return false;
}
function getId(id) {
return document.getElementById(id);
}
// ####################################################
// HANDLE WHITEBOARD
// ####################################################
function toggleWhiteboard() {
if (!wbIsOpen) rc.sound('open');
whiteboardCenter();
whiteboard.classList.toggle('show');
wbIsOpen = !wbIsOpen;
}
function whiteboardCenter() {
whiteboard.style.top = '50%';
whiteboard.style.left = '50%';
}
function setupWhiteboard() {
setupWhiteboardCanvas();
setupWhiteboardCanvasSize();
setupWhiteboardLocalListners();
}
function setupWhiteboardCanvas() {
wbCanvas = new fabric.Canvas('wbCanvas');
wbCanvas.freeDrawingBrush.color = '#FFFFFF';
wbCanvas.freeDrawingBrush.width = 3;
whiteboardIsDrawingMode(true);
}
function setupWhiteboardCanvasSize() {
const optimalSize = [wbWidth, wbHeight];
const scaleFactorX = window.innerWidth / optimalSize[0];
const scaleFactorY = window.innerHeight / optimalSize[1];
const scaleFactor = Math.min(scaleFactorX, scaleFactorY, 1);
const newWidth = optimalSize[0] * scaleFactor;
const newHeight = optimalSize[1] * scaleFactor;
wbCanvas.setWidth(newWidth);
wbCanvas.setHeight(newHeight);
wbCanvas.setZoom(scaleFactor);
setWhiteboardSize(newWidth, newHeight);
wbCanvas.calcOffset();
wbCanvas.renderAll();
}
function setWhiteboardSize(w, h) {
document.documentElement.style.setProperty('--wb-width', w);
document.documentElement.style.setProperty('--wb-height', h);
}
function drawCanvasGrid() {
const width = wbCanvas.getWidth();
const height = wbCanvas.getHeight();
removeCanvasGrid();
// Draw vertical lines
for (let i = 0; i <= width; i += wbGridSize) {
wbGridLines.push(createGridLine(i, 0, i, height));
}
// Draw horizontal lines
for (let i = 0; i <= height; i += wbGridSize) {
wbGridLines.push(createGridLine(0, i, width, i));
}
// Create a group for grid lines and send it to the back
const gridGroup = new fabric.Group(wbGridLines, { selectable: false, evented: false });
wbCanvas.add(gridGroup);
gridGroup.sendToBack();
wbCanvas.renderAll();
}
function createGridLine(x1, y1, x2, y2) {
return new fabric.Line([x1, y1, x2, y2], {
stroke: wbStroke,
selectable: false,
evented: false,
});
}
function removeCanvasGrid() {
wbGridLines.forEach((line) => {
line.set({ stroke: wbGridVisible ? wbStroke : 'rgba(255, 255, 255, 0)' });
wbCanvas.remove(line);
});
wbGridLines = [];
wbCanvas.renderAll();
}
function toggleCanvasGrid() {
wbGridVisible = !wbGridVisible;
wbGridVisible ? drawCanvasGrid() : removeCanvasGrid();
wbCanvasToJson();
}
function setWhiteboardBgColor(color) {
let data = {
peer_name: peer_name,
action: 'bgcolor',
color: color,
};
whiteboardAction(data);
}
function whiteboardIsDrawingMode(status) {
wbCanvas.isDrawingMode = status;
if (status) {
setColor(whiteboardPencilBtn, 'green');
setColor(whiteboardObjectBtn, 'white');
setColor(whiteboardEraserBtn, 'white');
wbIsEraser = false;
} else {
setColor(whiteboardPencilBtn, 'white');
setColor(whiteboardObjectBtn, 'green');
}
}
function whiteboardIsEraser(status) {
whiteboardIsDrawingMode(false);
wbIsEraser = status;
setColor(whiteboardEraserBtn, wbIsEraser ? 'green' : 'white');
}
function whiteboardAddObj(type) {
switch (type) {
case 'imgUrl':
Swal.fire({
background: swalBackground,
title: 'Image URL',
input: 'text',
showCancelButton: true,
confirmButtonText: 'OK',
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
let wbCanvasImgURL = result.value;
if (isImageURL(wbCanvasImgURL)) {
fabric.Image.fromURL(wbCanvasImgURL, function (myImg) {
addWbCanvasObj(myImg);
});
} else {
userLog('error', 'The URL is not a valid image', 'top-end');
}
}
});
break;
case 'imgFile':
setupFileSelection('Select the image', wbImageInput, renderImageToCanvas);
break;
case 'pdfFile':
setupFileSelection('Select the PDF', wbPdfInput, renderPdfToCanvas);
break;
case 'text':
const text = new fabric.IText('Lorem Ipsum', {
top: 0,
left: 0,
fontFamily: 'Montserrat',
fill: wbCanvas.freeDrawingBrush.color,
strokeWidth: wbCanvas.freeDrawingBrush.width,
stroke: wbCanvas.freeDrawingBrush.color,
});
addWbCanvasObj(text);
break;
case 'line':
const line = new fabric.Line([50, 100, 200, 200], {
top: 0,
left: 0,
fill: wbCanvas.freeDrawingBrush.color,
strokeWidth: wbCanvas.freeDrawingBrush.width,
stroke: wbCanvas.freeDrawingBrush.color,
});
addWbCanvasObj(line);
break;
case 'circle':
const circle = new fabric.Circle({
radius: 50,
fill: 'transparent',
stroke: wbCanvas.freeDrawingBrush.color,
strokeWidth: wbCanvas.freeDrawingBrush.width,
});
addWbCanvasObj(circle);
break;
case 'rect':
const rect = new fabric.Rect({
top: 0,
left: 0,
width: 150,
height: 100,
fill: 'transparent',
stroke: wbCanvas.freeDrawingBrush.color,
strokeWidth: wbCanvas.freeDrawingBrush.width,
});
addWbCanvasObj(rect);
break;
case 'triangle':
const triangle = new fabric.Triangle({
top: 0,
left: 0,
width: 150,
height: 100,
fill: 'transparent',
stroke: wbCanvas.freeDrawingBrush.color,
strokeWidth: wbCanvas.freeDrawingBrush.width,
});
addWbCanvasObj(triangle);
break;
default:
break;
}
}
function setupFileSelection(title, accept, renderToCanvas) {
Swal.fire({
allowOutsideClick: false,
background: swalBackground,
position: 'center',
title: title,
input: 'file',
html: `
Drag and drop your file here
`,
inputAttributes: {
accept: accept,
'aria-label': title,
},
didOpen: () => {
const dropArea = document.getElementById('dropArea');
dropArea.addEventListener('dragenter', handleDragEnter);
dropArea.addEventListener('dragover', handleDragOver);
dropArea.addEventListener('dragleave', handleDragLeave);
dropArea.addEventListener('drop', handleDrop);
},
showDenyButton: true,
confirmButtonText: `OK`,
denyButtonText: `Cancel`,
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
renderToCanvas(result.value);
}
});
function handleDragEnter(e) {
e.preventDefault();
e.stopPropagation();
e.target.style.background = 'var(--body-bg)';
}
function handleDragOver(e) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
}
function handleDragLeave(e) {
e.preventDefault();
e.stopPropagation();
e.target.style.background = '';
}
function handleDrop(e) {
e.preventDefault();
e.stopPropagation();
const dt = e.dataTransfer;
const files = dt.files;
handleFiles(files);
e.target.style.background = '';
}
function handleFiles(files) {
if (files.length > 0) {
const file = files[0];
console.log('Selected file:', file);
Swal.close();
renderToCanvas(file);
}
}
}
function renderImageToCanvas(wbCanvasImg) {
if (wbCanvasImg && wbCanvasImg.size > 0) {
let reader = new FileReader();
reader.onload = function (event) {
let imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
let image = new fabric.Image(imgObj);
image.set({ top: 0, left: 0 }).scale(0.3);
addWbCanvasObj(image);
};
};
reader.readAsDataURL(wbCanvasImg);
}
}
async function renderPdfToCanvas(wbCanvasPdf) {
if (wbCanvasPdf && wbCanvasPdf.size > 0) {
let reader = new FileReader();
reader.onload = async function (event) {
wbCanvas.requestRenderAll();
await pdfToImage(event.target.result, wbCanvas);
whiteboardIsDrawingMode(false);
wbCanvasToJson();
};
reader.readAsDataURL(wbCanvasPdf);
}
}
function readBlob(blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.addEventListener('load', () => resolve(reader.result));
reader.addEventListener('error', reject);
reader.readAsDataURL(blob);
});
}
async function loadPDF(pdfData, pages) {
const pdfjsLib = window['pdfjs-dist/build/pdf'];
pdfData = pdfData instanceof Blob ? await readBlob(pdfData) : pdfData;
const data = atob(pdfData.startsWith(Base64Prefix) ? pdfData.substring(Base64Prefix.length) : pdfData);
try {
const pdf = await pdfjsLib.getDocument({ data }).promise;
const numPages = pdf.numPages;
const canvases = await Promise.all(
Array.from({ length: numPages }, (_, i) => {
const pageNumber = i + 1;
if (pages && pages.indexOf(pageNumber) === -1) return null;
return pdf.getPage(pageNumber).then(async (page) => {
const viewport = page.getViewport({ scale: window.devicePixelRatio });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport,
};
await page.render(renderContext).promise;
return canvas;
});
}),
);
return canvases.filter((canvas) => canvas !== null);
} catch (error) {
console.error('Error loading PDF', error.message);
throw error.message;
}
}
async function pdfToImage(pdfData, canvas) {
const scale = 1 / window.devicePixelRatio;
try {
const canvases = await loadPDF(pdfData);
canvases.forEach(async (c) => {
canvas.add(
new fabric.Image(await c, {
scaleX: scale,
scaleY: scale,
}),
);
});
} catch (error) {
console.error('Error converting PDF to images', error.message);
throw error.message;
}
}
function addWbCanvasObj(obj) {
if (obj) {
wbCanvas.add(obj).setActiveObject(obj);
whiteboardIsDrawingMode(false);
wbCanvasToJson();
} else {
console.error('Invalid input. Expected an obj of canvas elements');
}
}
function setupWhiteboardLocalListners() {
wbCanvas.on('mouse:down', function (e) {
mouseDown(e);
});
wbCanvas.on('mouse:up', function () {
mouseUp();
});
wbCanvas.on('mouse:move', function () {
mouseMove();
});
wbCanvas.on('object:added', function () {
objectAdded();
});
}
function mouseDown(e) {
wbIsDrawing = true;
if (wbIsEraser && e.target) {
wbCanvas.remove(e.target);
return;
}
}
function mouseUp() {
wbIsDrawing = false;
wbCanvasToJson();
}
function mouseMove() {
if (wbIsEraser) {
wbCanvas.hoverCursor = 'not-allowed';
return;
} else {
wbCanvas.hoverCursor = 'move';
}
if (!wbIsDrawing) return;
}
function objectAdded() {
if (!wbIsRedoing) wbPop = [];
wbIsRedoing = false;
}
function wbCanvasBackgroundColor(color) {
document.documentElement.style.setProperty('--wb-bg', color);
wbBackgroundColorEl.value = color;
wbCanvas.setBackgroundColor(color);
wbCanvas.renderAll();
}
function wbCanvasUndo() {
if (wbCanvas._objects.length > 0) {
wbPop.push(wbCanvas._objects.pop());
wbCanvas.renderAll();
}
}
function wbCanvasRedo() {
if (wbPop.length > 0) {
wbIsRedoing = true;
wbCanvas.add(wbPop.pop());
}
}
function wbCanvasSaveImg() {
const dataURL = wbCanvas.toDataURL({
width: wbCanvas.getWidth(),
height: wbCanvas.getHeight(),
left: 0,
top: 0,
format: 'png',
});
const dataNow = getDataTimeString();
const fileName = `whiteboard-${dataNow}.png`;
saveDataToFile(dataURL, fileName);
}
function wbUpdate() {
if (wbIsOpen && (!isRulesActive || isPresenter)) {
console.log('IsPresenter: update whiteboard canvas to the participants in the room');
wbCanvasToJson();
whiteboardAction(getWhiteboardAction(wbIsLock ? 'lock' : 'unlock'));
}
}
function wbCanvasToJson() {
if (!isPresenter && wbIsLock) return;
if (rc.thereAreParticipants()) {
let wbCanvasJson = JSON.stringify(wbCanvas.toJSON());
rc.socket.emit('wbCanvasToJson', wbCanvasJson);
}
}
function JsonToWbCanvas(json) {
if (!wbIsOpen) toggleWhiteboard();
wbCanvas.loadFromJSON(json);
wbCanvas.renderAll();
if (!isPresenter && !wbCanvas.isDrawingMode && wbIsLock) {
wbDrawing(false);
}
}
function getWhiteboardAction(action) {
return {
peer_name: peer_name,
action: action,
};
}
function confirmClearBoard() {
Swal.fire({
background: swalBackground,
imageUrl: image.delete,
position: 'center',
title: 'Clean the board',
text: 'Are you sure you want to clean the board?',
showDenyButton: true,
confirmButtonText: `Yes`,
denyButtonText: `No`,
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
whiteboardAction(getWhiteboardAction('clear'));
sound('delete');
}
});
}
function toggleLockUnlockWhiteboard() {
wbIsLock = !wbIsLock;
const btnToShow = wbIsLock ? whiteboardLockBtn : whiteboardUnlockBtn;
const btnToHide = wbIsLock ? whiteboardUnlockBtn : whiteboardLockBtn;
const btnColor = wbIsLock ? 'red' : 'white';
const action = wbIsLock ? 'lock' : 'unlock';
show(btnToShow);
hide(btnToHide);
setColor(whiteboardLockBtn, btnColor);
whiteboardAction(getWhiteboardAction(action));
if (wbIsLock) {
userLog('info', 'The whiteboard is locked. \n The participants cannot interact with it.', 'top-right');
sound('locked');
}
}
function whiteboardAction(data, emit = true) {
if (emit) {
if (rc.thereAreParticipants()) {
rc.socket.emit('whiteboardAction', data);
}
} else {
userLog(
'info',
`${data.peer_name}
`;
}
const public_chat_active = rc.chatPeerName === 'all' ? ' active' : '';
// ALL
li += `
Public chat
`;
// ONLY PRESENTER CAN EXECUTE THIS CMD
if (!isRulesActive || isPresenter) {
li += `
${_PEER.audioOff}
${_PEER.videoOff}
${_PEER.screenOff}
`;
}
li += `
`;
// PEERS IN THE CURRENT ROOM
for (const peer of Array.from(peers.keys())) {
const peer_info = peers.get(peer).peer_info;
console.log('PEER-INFO------->', peer_info);
const peer_name = peer_info.peer_name;
const peer_avatar = peer_info.peer_avatar;
const peer_name_limited = peer_name.length > 15 ? peer_name.substring(0, 10) + '*****' : peer_name;
//const peer_presenter = peer_info.peer_presenter ? _PEER.presenter : _PEER.guest;
const peer_audio = peer_info.peer_audio ? _PEER.audioOn : _PEER.audioOff;
const peer_video = peer_info.peer_video ? _PEER.videoOn : _PEER.videoOff;
const peer_screen = peer_info.peer_screen ? _PEER.screenOn : _PEER.screenOff;
const peer_hand = peer_info.peer_hand ? _PEER.raiseHand : _PEER.lowerHand;
const peer_ban = _PEER.banPeer;
const peer_eject = _PEER.ejectPeer;
const peer_geoLocation = _PEER.geoLocation;
const peer_sendFile = _PEER.sendFile;
const peer_id = peer_info.peer_id;
const avatarImg = getParticipantAvatar(peer_name, peer_avatar);
const peer_chat_active = rc.chatPeerId === peer_id ? ' active' : '';
// NOT ME
if (socket.id !== peer_id) {
// PRESENTER HAS MORE OPTIONS
if (isRulesActive && isPresenter) {
li += `
${peer_name_limited}
${peer_audio}
${peer_video}
${peer_screen}
`;
// li += `
// ${peer_presenter} `;
if (peer_info.peer_hand) {
li += `
${peer_hand} `;
}
li += `
`;
} else {
// GUEST USER
li += `
${peer_name_limited}
`;
// NO ROOM BROADCASTING
if (!isBroadcastingEnabled) {
li += `
`;
}
li += `
${peer_audio}
${peer_video}
${peer_screen}
`;
// li += `
// ${peer_presenter} `;
if (peer_info.peer_hand) {
li += `
${peer_hand} `;
}
li += `
`;
}
}
}
return li;
}
function setParticipantsTippy(peers) {
//
if (!isMobileDevice) {
setTippy('muteAllButton', 'Mute all participants', 'top');
setTippy('hideAllButton', 'Hide all participants', 'top');
setTippy('stopAllButton', 'Stop screen share to all participants', 'top');
//
for (let peer of Array.from(peers.keys())) {
const peer_info = peers.get(peer).peer_info;
const peer_id = peer_info.peer_id;
const peerAudioBtn = rc.getId(peer_id + '___pAudio');
const peerVideoBtn = rc.getId(peer_id + '___pVideo');
const peerScreenBtn = rc.getId(peer_id + '___pScreen');
if (peerAudioBtn) setTippy(peerAudioBtn.id, 'Mute', 'top');
if (peerVideoBtn) setTippy(peerVideoBtn.id, 'Hide', 'top');
if (peerScreenBtn) setTippy(peerScreenBtn.id, 'Stop', 'top');
}
}
}
function refreshParticipantsCount(count, adapt = true) {
if (adapt) adaptAspectRatio(count);
}
function getParticipantAvatar(peerName, peerAvatar = false) {
if (peerAvatar && rc.isImageURL(peerAvatar)) {
return peerAvatar;
}
if (rc.isValidEmail(peerName)) {
return rc.genGravatar(peerName);
}
return rc.genAvatarSvg(peerName, 32);
}
// ####################################################
// SET THEME
// ####################################################
function setCustomTheme() {
const color = themeCustom.color;
swalBackground = `radial-gradient(${color}, ${color})`;
document.documentElement.style.setProperty('--body-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--trx-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--msger-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--left-msg-bg', `${color}`);
document.documentElement.style.setProperty('--right-msg-bg', `${color}`);
document.documentElement.style.setProperty('--select-bg', `${color}`);
document.documentElement.style.setProperty('--tab-btn-active', `${color}`);
document.documentElement.style.setProperty('--settings-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--wb-bg', `radial-gradient(${color}, ${color})`);
// document.documentElement.style.setProperty('--btns-bg-color', `${color}`);
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#FFFFFF');
document.body.style.background = `radial-gradient(${color}, ${color})`;
}
function setTheme() {
if (themeCustom.keep) return setCustomTheme();
selectTheme.selectedIndex = localStorageSettings.theme;
const theme = selectTheme.value;
switch (theme) {
case 'default':
swalBackground = 'linear-gradient(135deg, #000000, #434343)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #434343)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #000000, #434343)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #000000, #434343)');
document.documentElement.style.setProperty('--left-msg-bg', '#1a1a1a');
document.documentElement.style.setProperty('--right-msg-bg', '#2e2e2e');
document.documentElement.style.setProperty('--select-bg', '#333333');
document.documentElement.style.setProperty('--tab-btn-active', '#434343');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #000000, #434343)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #000000, #434343)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#FFFFFF');
document.body.style.background = 'linear-gradient(135deg, #000000, #434343)';
selectTheme.selectedIndex = 0;
break;
case 'dark':
swalBackground = 'linear-gradient(135deg, #000000, #1a1a1a)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #1a1a1a)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #000000, #1a1a1a)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #000000, #1a1a1a)');
document.documentElement.style.setProperty('--left-msg-bg', '#0d0d0d');
document.documentElement.style.setProperty('--right-msg-bg', '#1a1a1a');
document.documentElement.style.setProperty('--select-bg', '#1a1a1a');
document.documentElement.style.setProperty('--tab-btn-active', '#1a1a1a');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #000000, #1a1a1a)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #000000, #1a1a1a)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.85)');
document.documentElement.style.setProperty('--dd-color', '#FFFFFF');
document.body.style.background = 'linear-gradient(135deg, #000000, #1a1a1a)';
selectTheme.selectedIndex = 1;
break;
case 'grey':
swalBackground = 'linear-gradient(135deg, #1a1a1a, #4f4f4f)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
document.documentElement.style.setProperty('--left-msg-bg', '#2c2c2c');
document.documentElement.style.setProperty('--right-msg-bg', '#3f3f3f');
document.documentElement.style.setProperty('--select-bg', '#2a2a2a');
document.documentElement.style.setProperty('--tab-btn-active', '#4f4f4f');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #1a1a1a, #4f4f4f)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#FFFFFF');
document.body.style.background = 'linear-gradient(135deg, #1a1a1a, #4f4f4f)';
selectTheme.selectedIndex = 2;
break;
case 'green':
swalBackground = 'linear-gradient(135deg, #002a22, #004d40)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #002a22, #004d40)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #002a22, #004d40)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #002a22, #004d40)');
document.documentElement.style.setProperty('--left-msg-bg', '#001d1a');
document.documentElement.style.setProperty('--right-msg-bg', '#003d2e');
document.documentElement.style.setProperty('--select-bg', '#002a22');
document.documentElement.style.setProperty('--tab-btn-active', '#004d40');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #002a22, #004d40)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #002a22, #004d40)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 42, 34, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#00FF00');
document.body.style.background = 'linear-gradient(135deg, #002a22, #004d40)';
selectTheme.selectedIndex = 3;
break;
case 'blue':
swalBackground = 'linear-gradient(135deg, #00274d, #004d80)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #00274d, #004d80)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #00274d, #004d80)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #00274d, #004d80)');
document.documentElement.style.setProperty('--left-msg-bg', '#001f3f');
document.documentElement.style.setProperty('--right-msg-bg', '#003366');
document.documentElement.style.setProperty('--select-bg', '#00274d');
document.documentElement.style.setProperty('--tab-btn-active', '#004d80');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #00274d, #004d80)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #00274d, #004d80)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 39, 77, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#1E90FF');
document.body.style.background = 'linear-gradient(135deg, #00274d, #004d80)';
selectTheme.selectedIndex = 4;
break;
case 'red':
swalBackground = 'linear-gradient(135deg, #2a0d0d, #4d1a1a)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
document.documentElement.style.setProperty('--left-msg-bg', '#2b0f0f');
document.documentElement.style.setProperty('--right-msg-bg', '#4d1a1a');
document.documentElement.style.setProperty('--select-bg', '#2a0d0d');
document.documentElement.style.setProperty('--tab-btn-active', '#4d1a1a');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #2a0d0d, #4d1a1a)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(42, 13, 13, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#FF4500');
document.body.style.background = 'linear-gradient(135deg, #2a0d0d, #4d1a1a)';
selectTheme.selectedIndex = 5;
break;
case 'purple':
swalBackground = 'linear-gradient(135deg, #2a001d, #4d004a)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
document.documentElement.style.setProperty('--left-msg-bg', '#1b0014');
document.documentElement.style.setProperty('--right-msg-bg', '#3e002a');
document.documentElement.style.setProperty('--select-bg', '#2a001d');
document.documentElement.style.setProperty('--tab-btn-active', '#4d004a');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #2a001d, #4d004a)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(42, 0, 29, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#BF00FF');
document.body.style.background = 'linear-gradient(135deg, #2a001d, #4d004a)';
selectTheme.selectedIndex = 6;
break;
case 'orange':
swalBackground = 'linear-gradient(135deg, #3d1a00, #ff8c00)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
document.documentElement.style.setProperty('--left-msg-bg', '#2c0f00');
document.documentElement.style.setProperty('--right-msg-bg', '#ff8c00');
document.documentElement.style.setProperty('--select-bg', '#3d1a00');
document.documentElement.style.setProperty('--tab-btn-active', '#ff8c00');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #3d1a00, #ff8c00)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(61, 26, 0, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#FFA500');
document.body.style.background = 'linear-gradient(135deg, #3d1a00, #ff8c00)';
selectTheme.selectedIndex = 7;
break;
case 'pink':
swalBackground = 'linear-gradient(135deg, #4d001d, #ff66b2)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
document.documentElement.style.setProperty('--left-msg-bg', '#3e0016');
document.documentElement.style.setProperty('--right-msg-bg', '#ff66b2');
document.documentElement.style.setProperty('--select-bg', '#4d001d');
document.documentElement.style.setProperty('--tab-btn-active', '#ff66b2');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #4d001d, #ff66b2)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(77, 0, 29, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#FF1493');
document.body.style.background = 'linear-gradient(135deg, #4d001d, #ff66b2)';
selectTheme.selectedIndex = 8;
break;
case 'yellow':
swalBackground = 'linear-gradient(135deg, #4d3b00, #ffc107)';
document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
document.documentElement.style.setProperty('--left-msg-bg', '#3b2d00');
document.documentElement.style.setProperty('--right-msg-bg', '#ffc107');
document.documentElement.style.setProperty('--select-bg', '#4d3b00');
document.documentElement.style.setProperty('--tab-btn-active', '#ffc107');
document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #4d3b00, #ffc107)');
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(77, 59, 0, 0.7)');
document.documentElement.style.setProperty('--dd-color', '#FFD700');
document.body.style.background = 'linear-gradient(135deg, #4d3b00, #ffc107)';
selectTheme.selectedIndex = 9;
break;
default:
break;
}
wbIsBgTransparent = false;
if (rc) rc.isChatBgTransparent = false;
}
// ####################################################
// HANDLE ASPECT RATIO
// ####################################################
function handleAspectRatio() {
if (videoMediaContainer.childElementCount > 1) {
adaptAspectRatio(videoMediaContainer.childElementCount);
} else {
resizeVideoMedia();
}
}
function adaptAspectRatio(participantsCount) {
/*
['0:0', '4:3', '16:9', '1:1', '1:2'];
*/
let desktop,
mobile = 1;
// desktop aspect ratio
switch (participantsCount) {
case 1:
//case 2:
case 3:
case 4:
case 7:
case 9:
desktop = 2; // (16:9)
break;
case 5:
case 6:
case 10:
case 11:
desktop = 1; // (4:3)
break;
case 2:
case 8:
desktop = 3; // (1:1)
break;
default:
desktop = 0; // (0:0)
}
// mobile aspect ratio
switch (participantsCount) {
case 3:
case 9:
case 10:
mobile = 2; // (16:9)
break;
case 2:
case 7:
case 8:
case 11:
mobile = 1; // (4:3)
break;
case 1:
case 4:
case 5:
case 6:
mobile = 3; // (1:1)
break;
default:
mobile = 3; // (1:1)
}
if (participantsCount > 11) {
desktop = 1; // (4:3)
mobile = 3; // (1:1)
}
BtnAspectRatio.selectedIndex = isMobileDevice ? mobile : desktop;
setAspectRatio(BtnAspectRatio.selectedIndex);
}
// ####################################################
// HANDLE INIT VIRTUAL BACKGROUND AND BLUR
// ####################################################
function showImageSelector() {
elemDisplay('imageGrid', true, 'grid');
if (imageGrid.innerHTML !== '') return;
imageGrid.innerHTML = ''; // Clear previous images
function createImage(id, src, tooltip, index, clickHandler) {
const img = document.createElement('img');
img.id = id;
img.src = src;
img.dataset.index = index;
img.addEventListener('click', clickHandler);
imageGrid.appendChild(img);
if (tooltip) {
setTippy(img.id, tooltip, 'top');
}
}
// Common function to handle virtual background changes
async function handleVirtualBackground(blurLevel = null, imgSrc = null, bgTransparent = null) {
if (!blurLevel && !imgSrc && !bgTransparent) {
virtualBackgroundBlurLevel = null;
virtualBackgroundSelectedImage = null;
virtualBackgroundTransparent = null;
elemDisplay('imageGrid', false);
}
await applyVirtualBackground(initVideo, initStream, blurLevel, imgSrc, bgTransparent);
}
// Create clean virtual bg Image
createImage('initCleanVbImg', image.user, 'Remove virtual background', 'cleanVb', () =>
handleVirtualBackground(null, null),
);
// Create High Blur Image
createImage('initHighBlurImg', image.blurHigh, 'High Blur', 'high', () => handleVirtualBackground(20));
// Create Low Blur Image
createImage('initLowBlurImg', image.blurLow, 'Low Blur', 'low', () => handleVirtualBackground(10));
// Create transparent virtual bg Image
createImage('initTransparentBg', image.transparentBg, 'Transparent Virtual background', 'transparentVb', () =>
handleVirtualBackground(null, null, true),
);
// Handle file upload (common logic for file selection)
function setupFileUploadButton(buttonId, sourceImg, tooltip, handler) {
const imgButton = document.createElement('img');
imgButton.id = buttonId;
imgButton.src = sourceImg;
imgButton.addEventListener('click', handler);
imageGrid.appendChild(imgButton);
setTippy(imgButton.id, tooltip, 'top');
}
function handleFileUpload(file) {
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = async (e) => {
const imgData = e.target.result;
await indexedDBHelper.saveImage(imgData);
addImageToUI(imgData);
};
reader.readAsDataURL(file);
}
}
function createUploadImageButton() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.display = 'none';
fileInput.addEventListener('change', (event) => {
handleFileUpload(event.target.files[0]);
});
setupFileUploadButton('initUploadImg', image.upload, 'Upload your custom image', () => fileInput.click());
return fileInput;
}
// Function to add an image to UI
function addImageToUI(imgData) {
const imageContainer = document.createElement('div');
imageContainer.className = 'image-wrapper';
const customImg = document.createElement('img');
customImg.src = imgData;
customImg.addEventListener('click', () => handleVirtualBackground(null, imgData));
const deleteBtn = document.createElement('span');
deleteBtn.className = 'delete-icon fas fa-times';
deleteBtn.addEventListener('click', async (event) => {
event.stopPropagation();
await indexedDBHelper.removeImage(imgData);
imageContainer.remove();
});
imageContainer.appendChild(customImg);
imageContainer.appendChild(deleteBtn);
imageGrid.appendChild(imageContainer);
}
// Function to fetch and store an image from URL
async function fetchAndStoreImage(url) {
try {
const response = await fetch(url);
const blob = await response.blob();
const reader = new FileReader();
reader.onload = async (e) => {
const imgData = e.target.result;
await indexedDBHelper.saveImage(imgData);
addImageToUI(imgData);
};
reader.readAsDataURL(blob);
} catch (error) {
console.error('Error fetching image:', error);
// Detect CORS issue and provide a clearer error message
error.message.includes('Failed to fetch')
? showError(initErrorMessage, 'Error: Unable to fetch image. CORS policy may be blocking the request.')
: showError(initErrorMessage, `Error fetching image: ${error.message}`);
}
}
// Paste image from URL
function askForImageURL() {
elemDisplay(initImageUrlModal.id, true);
navigator.clipboard
.readText()
.then((clipboardText) => {
if (isValidImageURL(filterXSS(clipboardText))) {
initImageUrlInput.value = clipboardText;
}
})
.catch(() => {});
}
initSaveImageUrlBtn.addEventListener('click', async () => {
elemDisplay(initImageUrlModal.id, false);
if (isValidImageURL(initImageUrlInput.value)) {
await fetchAndStoreImage(initImageUrlInput.value);
initImageUrlInput.value = '';
}
});
initCancelImageUrlBtn.addEventListener('click', () => {
elemDisplay(initImageUrlModal.id, false);
initImageUrlInput.value = '';
});
// Upload from file button
createUploadImageButton();
// Upload from URL button
setupFileUploadButton('initLinkImage', image.link, 'Upload Image from URL', askForImageURL);
// Load default virtual backgrounds
virtualBackgrounds.forEach((imageUrl, index) => {
createImage(`initVirtualBg${index}`, imageUrl, null, index + 1, () => handleVirtualBackground(null, imageUrl));
});
// Load stored images and add to image grid UI
indexedDBHelper.getAllImages().then((images) => images.forEach(addImageToUI));
// Upload image with drag and drop
imageGrid.addEventListener('dragover', (event) => {
event.preventDefault();
imageGrid.classList.add('drag-over');
});
imageGrid.addEventListener('dragleave', () => {
imageGrid.classList.remove('drag-over');
});
imageGrid.addEventListener('drop', (event) => {
event.preventDefault();
imageGrid.classList.remove('drag-over');
if (event.dataTransfer.files.length > 0) {
handleFileUpload(event.dataTransfer.files[0]);
}
});
}
// ####################################################
// VIRTUAL BACKGROUND HELPER
// ####################################################
async function applyVirtualBackground(videoElement, stream, blurLevel, backgroundImage, backgroundTransparent) {
const videoTrack = stream.getVideoTracks()[0];
if (blurLevel) {
videoElement.srcObject = await virtualBackground.applyBlurToWebRTCStream(videoTrack, blurLevel);
virtualBackgroundBlurLevel = blurLevel;
virtualBackgroundSelectedImage = null;
virtualBackgroundTransparent = null;
} else if (backgroundImage) {
videoElement.srcObject = await virtualBackground.applyVirtualBackgroundToWebRTCStream(
videoTrack,
backgroundImage,
);
virtualBackgroundSelectedImage = backgroundImage;
virtualBackgroundBlurLevel = null;
virtualBackgroundTransparent = null;
} else if (backgroundTransparent) {
videoElement.srcObject = await virtualBackground.applyTransparentVirtualBackgroundToWebRTCStream(videoTrack);
virtualBackgroundBlurLevel = null;
virtualBackgroundSelectedImage = null;
virtualBackgroundTransparent = true;
} else {
videoElement.srcObject = stream; // Default case, use original stream
virtualBackgroundBlurLevel = null;
virtualBackgroundSelectedImage = null;
virtualBackgroundTransparent = null;
}
saveVirtualBackgroundSettings(blurLevel, backgroundImage, backgroundTransparent);
}
function isValidImageURL(url) {
return (
url.match(/\.(jpeg|jpg|png|gif|webp|bmp|svg|apng|avif|heif|heic|tiff?|ico|cur|jfif|pjpeg|pjp|raw)$/i) !== null
);
}
// ####################################################
// VIRTUAL BACKGROUND INDEXDB HELPER
// ####################################################
const indexedDBHelper = {
async openDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open('customImageDB', 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains('images')) {
db.createObjectStore('images', { keyPath: 'id', autoIncrement: true });
}
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
},
async saveImage(imgData) {
const db = await this.openDB();
const transaction = db.transaction('images', 'readwrite');
transaction.objectStore('images').add({ imgData });
},
async getAllImages() {
const db = await this.openDB();
return new Promise((resolve, reject) => {
const transaction = db.transaction('images', 'readonly');
const store = transaction.objectStore('images');
const request = store.getAll();
request.onsuccess = () => resolve(request.result.map((item) => item.imgData));
request.onerror = () => reject(request.error);
});
},
async removeImage(imgData) {
const db = await this.openDB();
const transaction = db.transaction('images', 'readwrite');
const store = transaction.objectStore('images');
const request = store.getAll();
request.onsuccess = () => {
const item = request.result.find((item) => item.imgData === imgData);
if (item) store.delete(item.id);
};
},
};
// ####################################################
// VIRTUAL BACKGROUND LOCAL STORAGE SETTINGS
// ####################################################
function saveVirtualBackgroundSettings(blurLevel, imageUrl, transparent) {
const settings = {
blurLevel: blurLevel || null,
imageUrl: imageUrl || null,
transparent: transparent || null,
};
localStorage.setItem('virtualBackgroundSettings', JSON.stringify(settings));
}
async function loadVirtualBackgroundSettings() {
if (!isMediaStreamTrackAndTransformerSupported) return;
const savedSettings = localStorage.getItem('virtualBackgroundSettings');
if (!savedSettings) return;
const { blurLevel, imageUrl, transparent } = JSON.parse(savedSettings);
if (blurLevel) {
await applyVirtualBackground(initVideo, initStream, blurLevel);
} else if (imageUrl) {
await applyVirtualBackground(initVideo, initStream, null, imageUrl);
} else if (transparent) {
await applyVirtualBackground(initVideo, initStream, null, null, true);
}
if (virtualBackgroundBlurLevel || virtualBackgroundSelectedImage || virtualBackgroundTransparent) {
initVirtualBackgroundButton.click();
}
}
// ####################################################
// HANDLE ERRORS
// ####################################################
function showError(errorElement, message, delay = 5000) {
errorElement.innerText = message;
elemDisplay(errorElement.id, true);
setTimeout(() => {
errorElement.classList.add('fade-in');
errorElement.classList.remove('fade-out');
}, 100);
setTimeout(() => {
errorElement.classList.remove('fade-in');
errorElement.classList.add('fade-out');
}, delay);
setTimeout(() => {
if (errorElement.classList.contains('fade-out')) {
elemDisplay(errorElement.id, false);
}
}, delay + 500);
}
// ####################################################
// ABOUT
// ####################################################
function showAbout() {
sound('open');
Swal.fire({
background: swalBackground,
position: 'center',
imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
customClass: { image: 'img-about' },
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.8.21',
html: `