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

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

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

43
public/css/Room.css
عرض الملف

@@ -193,7 +193,7 @@ body {
}
#control button {
font-size: 1.2rem;
font-size: 1rem;
padding: 10px;
transition: all 0.3s ease-in-out;
background: var(--btns-bg-color);
@@ -202,11 +202,15 @@ body {
/* box-shadow: var(--box-shadow); */
}
#control button i {
font-size: 1.2rem;
}
@media screen and (max-width: 540px) {
#control button {
font-size: 0.8rem;
}
#control i {
#control button i {
font-size: 0.8rem;
cursor: default;
}
@@ -753,16 +757,46 @@ a:hover {
}
/*--------------------------------------------------------------
# Chat room emoji picker
# Chat/room/user emoji picker
--------------------------------------------------------------*/
em-emoji-picker {
.chatEmojiPicker {
z-index: 0;
position: absolute;
bottom: 110px;
left: 10px;
}
.roomEmoji {
z-index: 9;
position: absolute;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.userEmoji {
z-index: 9;
position: absolute;
left: 80px;
bottom: 60px;
}
.emojiPickerHeader {
display: flex;
justify-content: flex-start;
background: #151616;
border-radius: 10px;
padding: 10px;
color: #fff;
cursor: move;
}
#closeEmojiPickerContainer {
font-size: 1.3rem;
}
/*--------------------------------------------------------------
# swal2
--------------------------------------------------------------*/
@@ -1272,4 +1306,5 @@ z-index:
- 6 settings
- 7 participants/lobby
- 8 send receive progress
- 9 room/user emoji
*/

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

@@ -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 {

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

@@ -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) {

1
public/js/Rules.js
عرض الملف

@@ -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,

10
public/views/Room.html
عرض الملف

@@ -146,6 +146,7 @@ access to use this app.
<button id="stopRecButton" style="color: red" class="hidden"><i class="fas fa-record-vinyl"></i></button>
<button id="raiseHandButton" class="hidden"><i class="fas fa-hand-paper"></i></button>
<button id="lowerHandButton" class="hidden"><i id="lowerHandIcon" class="fas fa-hand-paper"></i></button>
<button id="roomEmojiPicker" class="hidden"><i class="fas fa-face-smile"></i></button>
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
<button id="participantsButton" class="hidden"><i class="fas fa-users"></i></button>
<button id="whiteboardButton" class="hidden"><i class="fas fa-chalkboard-teacher"></i></button>
@@ -154,6 +155,13 @@ access to use this app.
<button id="exitButton" class="hidden"><i class="fas fa-right-from-bracket"></i></button>
</div>
<div id="emojiPickerContainer" class="roomEmoji fadein">
<div id="emojiPickerHeader" class="emojiPickerHeader">
<button id="closeEmojiPickerContainer" class="fas fa-times"></button>
</div>
</div>
<div id="userEmoji" class="userEmoji"></div>
<section id="mySettings" class="fadein center hidden">
<header id="mySettingsHeader">
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
@@ -737,7 +745,7 @@ access to use this app.
<i class="fas fa-paper-plane"></i>
</button>
</div>
<div id="chatEmoji" class="hidden fadein"></div>
<div id="chatEmoji" class="hidden fadein chatEmojiPicker"></div>
</section>
</section>