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

[mirotalksfu] - add tabs for room emoji with sounds, update dep

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2025-09-13 18:03:57 +02:00
الأصل 76064a2ef9
التزام 6d7a194405
8 ملفات معدلة مع 1008 إضافات و709 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

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

@@ -1220,42 +1220,125 @@ body {
--color-border-over: var(--body-bg);
}
/* Emoji Picker (Room) */
.roomEmoji {
z-index: 9;
z-index: 18;
position: absolute;
display: none;
background: var(--body-bg);
border: var(--border);
border-radius: 10px;
box-shadow: var(--box-shadow);
top: 50%;
left: 50%;
border-radius: 10px;
border: var(--border);
background: var(--body-bg);
box-shadow: var(--box-shadow);
transform: translate(-50%, -50%);
--rgb-background: var(--body-bg);
--color-border-over: var(--body-bg);
--font-family: 'Montserrat';
transform: translate(-50%, -50%);
}
.userEmoji {
z-index: 9;
position: absolute;
left: 80px;
bottom: 60px;
}
.emojiPickerHeader {
.room-emoji-header {
display: flex;
padding: 10px;
justify-content: flex-start;
color: #fff;
justify-content: space-between;
align-items: center;
background: var(--body-bg);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 8px 12px 4px 12px;
cursor: move;
}
#closeEmojiPickerContainer {
font-size: 1.3rem;
.room-emoji-title {
font-weight: bold;
font-size: 1.05rem;
color: #fff;
}
.room-emoji-close-btn {
display: inline-block;
position: static;
margin-left: 8px;
font-size: 1.2rem;
background: none;
border: none;
cursor: pointer;
color: #fff;
}
.room-emoji-close-btn:hover {
background: var(--body-bg);
border-radius: 50%;
}
.room-emoji-tab-container {
display: flex;
justify-content: center;
margin: 0 0 8px 0;
gap: 6px;
}
.room-emoji-tab {
background: none;
color: #fff;
border: none;
border-radius: 8px;
padding: 3px 14px;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.2s;
}
.room-emoji-tab.active {
background: rgba(255, 255, 255, 0.08);
}
.room-emoji-mart {
display: block;
}
.room-emoji-grid {
display: none;
gap: 8px;
font-size: 2rem;
max-width: 360px;
margin: 0 auto;
justify-items: center;
align-items: center;
padding: 16px 16px;
}
.room-emoji-grid.visible {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 56px;
}
.room-emoji-btn {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background: none;
border: none;
cursor: pointer;
border-radius: 50%;
transition:
background 0.15s,
transform 0.15s;
color: #fff;
}
.room-emoji-btn:hover {
background: rgba(255, 255, 255, 0.18);
transform: scale(1.15);
}
.userEmoji {
z-index: 18;
position: absolute;
left: 80px;
bottom: 60px;
border-radius: 10px;
}
/*--------------------------------------------------------------

2
public/js/Brand.js
عرض الملف

@@ -78,7 +78,7 @@ let BRAND = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: '<strong>WebRTC SFU v1.9.60</strong>',
title: '<strong>WebRTC SFU v1.9.61</strong>',
html: `
<button
id="support-button"

105
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.9.60
* @version 1.9.61
*
*/
@@ -336,7 +336,6 @@ function initClient() {
if (!isMobileDevice) {
refreshMainButtonsToolTipPlacement();
setTippy('closeEmojiPickerContainer', 'Close', 'bottom');
setTippy('mySettingsCloseBtn', 'Close', 'bottom');
setTippy(
'switchDominantSpeakerFocus',
@@ -1651,7 +1650,7 @@ function roomIsReady() {
hide(transcriptionMaxBtn);
hide(transcriptionMinBtn);
} else {
rc.makeDraggable(emojiPickerContainer, emojiPickerHeader);
//rc.makeDraggable(emojiPickerContainer, emojiPickerHeader);
rc.makeDraggable(chatRoom, chatHeader);
rc.makeDraggable(pollRoom, pollHeader);
//rc.makeDraggable(editorRoom, editorHeader);
@@ -3283,21 +3282,111 @@ function handleChatEmojiPicker() {
}
function handleRoomEmojiPicker() {
const soundEmojis = [
{ emoji: '👍', shortcodes: ':+1:' },
{ emoji: '👎', shortcodes: ':-1:' },
{ emoji: '👌', shortcodes: ':ok_hand:' },
{ emoji: '😀', shortcodes: ':grinning:' },
{ emoji: '😃', shortcodes: ':smiley:' },
{ emoji: '😂', shortcodes: ':joy:' },
{ emoji: '😘', shortcodes: ':kissing_heart:' },
{ emoji: '❤️', shortcodes: ':heart:' },
{ emoji: '🎺', shortcodes: ':trumpet:' },
{ emoji: '🎉', shortcodes: ':tada:' },
{ emoji: '😮', shortcodes: ':open_mouth:' },
{ emoji: '👏', shortcodes: ':clap:' },
{ emoji: '✨', shortcodes: ':sparkles:' },
{ emoji: '⭐', shortcodes: ':star:' },
{ emoji: '🌟', shortcodes: ':star2:' },
{ emoji: '💫', shortcodes: ':dizzy:' },
{ emoji: '🚀', shortcodes: ':rocket:' },
];
const header = document.createElement('div');
header.className = 'room-emoji-header';
const title = document.createElement('span');
title.textContent = 'Emoji Picker';
title.className = 'room-emoji-title';
const closeBtn = document.createElement('button');
closeBtn.className = 'room-emoji-close-btn';
closeBtn.innerHTML = '<i class="fa fa-times"></i>';
header.appendChild(title);
header.appendChild(closeBtn);
const tabContainer = document.createElement('div');
tabContainer.className = 'room-emoji-tab-container';
const allTab = document.createElement('button');
allTab.textContent = 'All';
allTab.className = 'room-emoji-tab active';
const soundTab = document.createElement('button');
soundTab.textContent = 'Sounds';
soundTab.className = 'room-emoji-tab';
tabContainer.appendChild(allTab);
tabContainer.appendChild(soundTab);
const emojiMartDiv = document.createElement('div');
emojiMartDiv.className = 'room-emoji-mart';
const pickerRoomOptions = {
theme: 'dark',
onEmojiSelect: sendEmojiToRoom,
};
const emojiRoomPicker = new EmojiMart.Picker(pickerRoomOptions);
emojiPickerContainer.appendChild(emojiRoomPicker);
emojiMartDiv.appendChild(emojiRoomPicker);
const emojiGrid = document.createElement('div');
emojiGrid.className = 'room-emoji-grid';
function showEmojiGrid() {
emojiGrid.classList.add('visible');
}
function hideEmojiGrid() {
emojiGrid.classList.remove('visible');
}
soundEmojis.forEach(({ emoji, shortcodes }) => {
const btn = document.createElement('button');
btn.textContent = emoji;
btn.className = 'room-emoji-btn';
btn.onclick = () => sendEmojiToRoom({ native: emoji, shortcodes });
emojiGrid.appendChild(btn);
});
allTab.onclick = () => {
allTab.classList.add('active');
soundTab.classList.remove('active');
emojiMartDiv.style.display = 'block';
hideEmojiGrid();
};
soundTab.onclick = () => {
soundTab.classList.add('active');
allTab.classList.remove('active');
emojiMartDiv.style.display = 'none';
showEmojiGrid();
};
emojiPickerContainer.innerHTML = '';
emojiPickerContainer.appendChild(header);
emojiPickerContainer.appendChild(tabContainer);
emojiPickerContainer.appendChild(emojiMartDiv);
emojiPickerContainer.appendChild(emojiGrid);
emojiPickerContainer.style.display = 'none';
if (!isMobileDevice) {
rc.makeDraggable(emojiPickerContainer, header);
}
emojiRoomButton.onclick = () => {
toggleEmojiPicker();
};
closeEmojiPickerContainer.onclick = () => {
closeBtn.addEventListener('click', (e) => {
toggleEmojiPicker();
};
});
function sendEmojiToRoom(data) {
console.log('Selected Emoji', data.native);
@@ -5585,7 +5674,7 @@ function showAbout() {
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.9.60',
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.61',
html: `
<br />
<div id="about">

2
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.9.60
* @version 1.9.61
*
*/

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

@@ -236,11 +236,7 @@ access to use this app.
<button id="exitButton" class="hidden"><i class="fa-solid fa-phone-slash"></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="emojiPickerContainer" class="roomEmoji fadein"></div>
<div id="userEmoji" class="userEmoji"></div>
<section id="mySettings" class="fadein center hidden">