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

[mirotalksfu] - improve buttons UI

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2024-07-21 13:02:09 +02:00
الأصل 2d396f013f
التزام 4452697f20
7 ملفات معدلة مع 114 إضافات و29 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

2
app/src/Server.js
عرض الملف

@@ -44,7 +44,7 @@ dependencies: {
* @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.5.17
* @version 1.5.18
*
*/

2
package.json
عرض الملف

@@ -1,6 +1,6 @@
{
"name": "mirotalksfu",
"version": "1.5.17",
"version": "1.5.18",
"description": "WebRTC SFU browser-based video calls",
"main": "Server.js",
"scripts": {

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

@@ -175,13 +175,14 @@ body {
flex-direction: var(--btns-flex-direction);
justify-content: center;
grid-gap: 0.4rem;
grid-gap: 0.5rem;
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
/* border: var(--border); */
box-shadow: var(--box-shadow);
border-radius: 10px;
}
@@ -191,7 +192,8 @@ body {
transition: all 0.3s ease-in-out;
background: var(--btns-bg-color);
border-radius: 10px;
border: var(--border);
border: none !important;
/* border: var(--border); */
/* box-shadow: var(--box-shadow); */
}
@@ -203,6 +205,43 @@ body {
color: red;
}
/*--------------------------------------------------------------
# Bottom buttons
--------------------------------------------------------------*/
#bottomButtons {
z-index: 3;
position: fixed;
display: none;
padding: 5px;
top: var(--bottom-btns-top);
left: var(--bottom-btns-left);
bottom: var(--bottom-btns-bottom);
transform: translate(var(--bottom-btns-translate-X), var(--bottom-btns-translate-Y));
flex-direction: var(--bottom-btns-flex-direction);
margin-bottom: var(--bottom-btns-margin-bottom);
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 10px;
border: none !important;
box-shadow: var(--box-shadow);
}
#bottomButtons button {
width: 55px;
font-size: 1.5rem;
padding: 10px;
background: var(--btns-bg-color);
border-radius: 10px;
border: none !important;
transition: all 0.3s ease-in-out;
}
#bottomButtons button:hover {
transform: var(--btns-hover-scale);
}
/*--------------------------------------------------------------
# Room QR
--------------------------------------------------------------*/
@@ -1502,6 +1541,7 @@ z-index:
- 1 videoMediaContainer
- 2 Video menu bar
- 3 control buttons
- 3 bottom buttons
- 4 whiteboard
- 5 chat group
- 5 polls

8
public/css/Root.css
عرض الملف

@@ -35,6 +35,14 @@
--btns-width: 320px;
--btns-flex-direction: row;
*/
/* bottom buttons bar horizontal default */
--bottom-btns-top: auto;
--bottom-btns-left: 50%;
--bottom-btns-bottom: 0;
--bottom-btns-translate-X: -50%;
--bottom-btns-translate-Y: 0%;
--bottom-btns-margin-bottom: 18px;
--bottom-btns-flex-direction: row;
--transcription-height: 680px;
--transcription-width: 420px;

40
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.5.17
* @version 1.5.18
*
*/
@@ -361,21 +361,16 @@ function initClient() {
function refreshMainButtonsToolTipPlacement() {
if (!DetectRTC.isMobileDevice) {
const placement = BtnsBarPosition.options[BtnsBarPosition.selectedIndex].value == 'vertical' ? 'right' : 'top';
//
const position = BtnsBarPosition.options[BtnsBarPosition.selectedIndex].value;
const placement = position == 'vertical' ? 'right' : 'top';
const bPlacement = position == 'vertical' ? 'top' : 'right';
// Control buttons
setTippy('shareButton', 'Share room', placement);
setTippy('hideMeButton', 'Toggle hide self view', placement);
setTippy('startAudioButton', 'Start the audio', placement);
setTippy('stopAudioButton', 'Stop the audio', placement);
setTippy('startVideoButton', 'Start the video', placement);
setTippy('stopVideoButton', 'Stop the video', placement);
setTippy('startScreenButton', 'Start screen share', placement);
setTippy('stopScreenButton', 'Stop screen share', placement);
setTippy('startRecButton', 'Start recording', placement);
setTippy('stopRecButton', 'Stop recording', placement);
setTippy('raiseHandButton', 'Raise your hand', placement);
setTippy('lowerHandButton', 'Lower your hand', placement);
setTippy('emojiRoomButton', 'Toggle emoji reaction', placement);
setTippy('swapCameraButton', 'Swap the camera', placement);
setTippy('chatButton', 'Toggle the chat', placement);
setTippy('pollButton', 'Toggle the poll', placement);
setTippy('transcriptionButton', 'Toggle transcription', placement);
@@ -383,6 +378,18 @@ function refreshMainButtonsToolTipPlacement() {
setTippy('settingsButton', 'Toggle the settings', placement);
setTippy('aboutButton', 'About this project', placement);
setTippy('exitButton', 'Leave room', placement);
// Bottom buttons
setTippy('startAudioButton', 'Start the audio', bPlacement);
setTippy('stopAudioButton', 'Stop the audio', bPlacement);
setTippy('startVideoButton', 'Start the video', bPlacement);
setTippy('stopVideoButton', 'Stop the video', bPlacement);
setTippy('swapCameraButton', 'Swap the camera', bPlacement);
setTippy('hideMeButton', 'Toggle hide self view', bPlacement);
setTippy('startScreenButton', 'Start screen share', bPlacement);
setTippy('stopScreenButton', 'Stop screen share', bPlacement);
setTippy('raiseHandButton', 'Raise your hand', bPlacement);
setTippy('lowerHandButton', 'Lower your hand', bPlacement);
}
}
@@ -1474,6 +1481,12 @@ function handleButtons() {
control.onmouseout = () => {
isButtonsBarOver = false;
};
bottomButtons.onmouseover = () => {
isButtonsBarOver = true;
};
bottomButtons.onmouseout = () => {
isButtonsBarOver = false;
};
exitButton.onclick = () => {
rc.exitRoom();
};
@@ -3004,6 +3017,7 @@ function showButtons() {
return;
toggleClassElements('videoMenuBar', 'inline');
control.style.display = 'flex';
bottomButtons.style.display = 'flex';
isButtonsVisible = true;
}
@@ -3011,6 +3025,7 @@ function checkButtonsBar() {
if (!isButtonsBarOver) {
toggleClassElements('videoMenuBar', 'none');
control.style.display = 'none';
bottomButtons.style.display = 'none';
isButtonsVisible = false;
}
setTimeout(() => {
@@ -4034,6 +4049,7 @@ function setCustomTheme() {
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.body.style.background = `radial-gradient(${color}, ${color})`;
}

24
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.5.17
* @version 1.5.18
*
*/
@@ -3123,14 +3123,30 @@ class RoomClient {
document.documentElement.style.setProperty('--btns-margin-left', '0px');
document.documentElement.style.setProperty('--btns-width', '60px');
document.documentElement.style.setProperty('--btns-flex-direction', 'column');
// bottomButtons horizontally
document.documentElement.style.setProperty('--bottom-btns-top', 'auto');
document.documentElement.style.setProperty('--bottom-btns-left', '50%');
document.documentElement.style.setProperty('--bottom-btns-bottom', '0');
document.documentElement.style.setProperty('--bottom-btns-translate-X', '-50%');
document.documentElement.style.setProperty('--bottom-btns-translate-Y', '0%');
document.documentElement.style.setProperty('--bottom-btns-margin-bottom', '16px');
document.documentElement.style.setProperty('--bottom-btns-flex-direction', 'row');
break;
case 'horizontal':
document.documentElement.style.setProperty('--btns-top', '95%');
document.documentElement.style.setProperty('--btns-right', '25%');
document.documentElement.style.setProperty('--btns-left', '50%');
document.documentElement.style.setProperty('--btns-margin-left', '-160px');
document.documentElement.style.setProperty('--btns-width', '320px');
document.documentElement.style.setProperty('--btns-margin-left', '-240px');
document.documentElement.style.setProperty('--btns-width', '480px');
document.documentElement.style.setProperty('--btns-flex-direction', 'row');
// bottomButtons vertically
document.documentElement.style.setProperty('--bottom-btns-top', '50%');
document.documentElement.style.setProperty('--bottom-btns-left', '15px');
document.documentElement.style.setProperty('--bottom-btns-bottom', 'auto');
document.documentElement.style.setProperty('--bottom-btns-translate-X', '0%');
document.documentElement.style.setProperty('--bottom-btns-translate-Y', '-50%');
document.documentElement.style.setProperty('--bottom-btns-margin-bottom', '0');
document.documentElement.style.setProperty('--bottom-btns-flex-direction', 'column');
break;
default:
break;
@@ -5906,6 +5922,7 @@ class RoomClient {
case 'accept':
await this.joinAllowed(data.room);
control.style.display = 'flex';
bottomButtons.style.display = 'flex';
this.msgPopup('info', 'Your join meeting was be accepted by moderator');
break;
case 'reject':
@@ -6152,6 +6169,7 @@ class RoomClient {
}).then((result) => {
if (result.isConfirmed) {
control.style.display = 'none';
bottomButtons.style.display = 'none';
} else {
this.exit();
}

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

@@ -165,18 +165,8 @@ access to use this app.
<div id="control" class="fadein">
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
<button id="hideMeButton" class="hidden"><i id="hideMeIcon" class="fas fa-user"></i></button>
<button id="swapCameraButton" class="hidden"><i class="fas fa-camera-rotate"></i></button>
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i></button>
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i></button>
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i></button>
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i></button>
<button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i></button>
<button id="stopRecButton" class="hidden"><i class="fas fa-record-vinyl cr"></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="emojiRoomButton" class="hidden"><i class="fas fa-face-smile"></i></button>
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i></button>
<button id="pollButton" class="hidden"><i class="fas fa-square-poll-horizontal"></i></button>
@@ -188,6 +178,19 @@ access to use this app.
<button id="exitButton" class="hidden"><i class="fas fa-right-from-bracket"></i></button>
</div>
<div id="bottomButtons" class="fadein">
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i></button>
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i></button>
<button id="swapCameraButton" class="hidden"><i class="fas fa-camera-rotate"></i></button>
<button id="hideMeButton" class="hidden"><i id="hideMeIcon" class="fas fa-user"></i></button>
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i></button>
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></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>
</div>
<div id="emojiPickerContainer" class="roomEmoji fadein">
<div id="emojiPickerHeader" class="emojiPickerHeader">
<button id="closeEmojiPickerContainer" class="fas fa-times"></button>