[mirotalksfu] - add emoji reaction, fix typo, update dep.

هذا الالتزام موجود في:
Miroslav Pejic
2023-10-07 17:22:01 +02:00
الأصل 0a406921df
التزام 3b85486737
7 ملفات معدلة مع 132 إضافات و22 حذوفات

عرض الملف

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
* @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.0.6
* @version 1.0.7
*
*/
@@ -145,6 +145,7 @@ function initClient() {
setTheme();
if (!DetectRTC.isMobileDevice) {
refreshMainButtonsToolTipPlacement();
setTippy('closeEmojiPickerContainer', 'Close', 'bottom');
setTippy('mySettingsCloseBtn', 'Close', 'bottom');
setTippy(
'switchPushToTalk',
@@ -228,6 +229,7 @@ function refreshMainButtonsToolTipPlacement() {
setTippy('stopRecButton', 'Stop recording', placement);
setTippy('raiseHandButton', 'Raise your hand', placement);
setTippy('lowerHandButton', 'Lower your hand', placement);
setTippy('roomEmojiPicker', 'Toggle emoji reaction', placement);
setTippy('swapCameraButton', 'Swap the camera', placement);
setTippy('chatButton', 'Toggle the chat', placement);
setTippy('participantsButton', 'Toggle participants', placement);
@@ -935,6 +937,7 @@ function roomIsReady() {
}
BUTTONS.main.chatButton && show(chatButton);
BUTTONS.main.participantsButton && show(participantsButton);
BUTTONS.main.emojiRoomButton && show(roomEmojiPicker);
!BUTTONS.chat.chatSaveButton && hide(chatSaveButton);
BUTTONS.chat.chatEmojiButton && show(chatEmojiButton);
BUTTONS.chat.chatMarkdownButton && show(chatMarkdownButton);
@@ -955,6 +958,7 @@ function roomIsReady() {
hide(chatMaxButton);
hide(chatMinButton);
} else {
rc.makeDraggable(emojiPickerContainer, emojiPickerHeader);
rc.makeDraggable(chatRoom, chatHeader);
rc.makeDraggable(mySettings, mySettingsHeader);
rc.makeDraggable(participants, participantsHeader);
@@ -993,6 +997,8 @@ function roomIsReady() {
handleButtons();
handleSelects();
handleInputs();
handleChatEmojiPicker();
handleRoomEmojiPicker();
loadSettingsFromLocalStorage();
startSessionTimer();
document.body.addEventListener('mousemove', (e) => {
@@ -1742,7 +1748,13 @@ function handleInputs() {
isChatPasteTxt = true;
rc.checkLineBreaks();
};
}
// ####################################################
// EMOJI PIKER
// ####################################################
function handleChatEmojiPicker() {
const pickerOptions = {
theme: 'dark',
onEmojiSelect: addEmojiToMsg,
@@ -1756,6 +1768,42 @@ function handleInputs() {
}
}
function handleRoomEmojiPicker() {
const pickerRoomOptions = {
theme: 'dark',
onEmojiSelect: sendEmojiToRoom,
};
const emojiRoomPicker = new EmojiMart.Picker(pickerRoomOptions);
emojiPickerContainer.appendChild(emojiRoomPicker);
emojiPickerContainer.style.display = 'none';
roomEmojiPicker.onclick = () => {
toggleEmojiPicker();
};
closeEmojiPickerContainer.onclick = () => {
toggleEmojiPicker();
};
function sendEmojiToRoom(data) {
console.log('Selected Emoji:', data.native);
const cmd = `roomEmoji|${peer_name}|${data.native}`;
rc.emitCmd(cmd);
rc.handleCmd(cmd);
// toggleEmojiPicker();
}
function toggleEmojiPicker() {
if (emojiPickerContainer.style.display === 'block') {
emojiPickerContainer.style.display = 'none';
setColor(roomEmojiPicker, 'white');
} else {
emojiPickerContainer.style.display = 'block';
setColor(roomEmojiPicker, 'yellow');
}
}
}
// ####################################################
// LOAD SETTINGS FROM LOCAL STORAGE
// ####################################################
@@ -2549,7 +2597,7 @@ function wbUpdate() {
function wbCanvasToJson() {
if (!isPresenter && wbIsLock) return;
if (rc.thereIsParticipants()) {
if (rc.thereAreParticipants()) {
let wbCanvasJson = JSON.stringify(wbCanvas.toJSON());
rc.socket.emit('wbCanvasToJson', wbCanvasJson);
}
@@ -2593,7 +2641,7 @@ function confirmClearBoard() {
function whiteboardAction(data, emit = true) {
if (emit) {
if (rc.thereIsParticipants()) {
if (rc.thereAreParticipants()) {
rc.socket.emit('whiteboardAction', data);
}
} else {

عرض الملف

@@ -9,7 +9,7 @@
* @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.0.6
* @version 1.0.7
*
*/
@@ -2412,7 +2412,7 @@ class RoomClient {
}
}
thereIsParticipants() {
thereAreParticipants() {
// console.log('participantsCount ---->', participantsCount);
if (this.consumers.size > 0 || participantsCount > 1) {
return true;
@@ -2945,7 +2945,7 @@ class RoomClient {
}
sendMessage() {
if (!this.thereIsParticipants() && !isChatGPTOn) {
if (!this.thereAreParticipants() && !isChatGPTOn) {
this.cleanMessage();
isChatPasteTxt = false;
return this.userLog('info', 'No participants in the room', 'top-end');
@@ -3001,7 +3001,7 @@ class RoomClient {
}
sendMessageTo(to_peer_id, to_peer_name) {
if (!this.thereIsParticipants()) {
if (!this.thereAreParticipants()) {
isChatPasteTxt = false;
this.cleanMessage();
return this.userLog('info', 'No participants in the room except you', 'top-end');
@@ -3616,7 +3616,7 @@ class RoomClient {
}
recordingAction(action) {
if (!this.thereIsParticipants()) return;
if (!this.thereAreParticipants()) return;
this.socket.emit('recordingAction', {
peer_name: this.peer_name,
peer_id: this.peer_id,
@@ -3706,7 +3706,7 @@ class RoomClient {
this.fileToSend = file;
//
if (this.fileToSend && this.fileToSend.size > 0) {
if (!this.thereIsParticipants()) {
if (!this.thereAreParticipants()) {
return userLog('info', 'No participants detected', 'top-end');
}
// prevent XSS injection
@@ -4001,7 +4001,7 @@ class RoomClient {
}).then((result) => {
if (result.value) {
result.value = filterXSS(result.value);
if (!this.thereIsParticipants()) {
if (!this.thereAreParticipants()) {
return userLog('info', 'No participants detected', 'top-end');
}
if (!this.isVideoTypeSupported(result.value)) {
@@ -4699,12 +4699,30 @@ class RoomClient {
case 'privacy':
this.setVideoPrivacyStatus(words[1], words[2] == 'true');
break;
case 'roomEmoji':
this.handleRoomEmoji(words);
break;
default:
break;
//...
}
}
handleRoomEmoji(words, duration = 5000) {
const userEmoji = document.getElementById(`userEmoji`);
if (userEmoji) {
const emojiDisplay = document.createElement('div');
emojiDisplay.className = 'animate__animated animate__backInUp';
emojiDisplay.style.fontSize = '3vh';
emojiDisplay.style.color = 'grey';
emojiDisplay.innerText = `${words[2]} ${words[1]}`;
userEmoji.appendChild(emojiDisplay);
setTimeout(() => {
emojiDisplay.remove();
}, duration);
}
}
// ####################################################
// PEER ACTION
// ####################################################
@@ -4723,7 +4741,7 @@ class RoomClient {
broadcast: broadcast,
};
if (!this.thereIsParticipants()) {
if (!this.thereAreParticipants()) {
if (info) return this.userLog('info', 'No participants detected', 'top-end');
}
switch (action) {

عرض الملف

@@ -19,6 +19,7 @@ const BUTTONS = {
chatButton: true,
participantsButton: true,
whiteboardButton: true,
emojiRoomButton: true,
settingsButton: true,
aboutButton: true, // Please keep me always visible, thank you!
exitButton: true,