[mirotalksfu] - UI-UX improve
هذا الالتزام موجود في:
Miroslav Pejic
@@ -45,6 +45,21 @@
|
||||
--right-msg-bg: #0a0b0c;
|
||||
--box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
--btns-hover-scale: scale(1.1);
|
||||
/* buttons bar horizontal */
|
||||
--btns-top: 50%;
|
||||
--btns-right: 0%;
|
||||
--btns-left: 20px;
|
||||
--btns-margin-left: 0px;
|
||||
--btns-width: 60px;
|
||||
--btns-flex-direction: column;
|
||||
/* buttons bar horizontal
|
||||
--btns-top: 95%;
|
||||
--btns-right: 25%;
|
||||
--btns-left: 50%;
|
||||
--btns-margin-left: -160px;
|
||||
--btns-width: 320px;
|
||||
--btns-flex-direction: row;
|
||||
*/
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -79,99 +94,54 @@ body {
|
||||
font-family: 'Comfortaa';
|
||||
}
|
||||
|
||||
#initAudioButton,
|
||||
#initVideoButton {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Buttons bar
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#openNavButton {
|
||||
#control {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 10px;
|
||||
/* pulsate */
|
||||
animation: pulsate 5s ease-out;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation: pulsate 5s ease-out;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
opacity: 0.5;
|
||||
}
|
||||
display: flex;
|
||||
padding: 15px;
|
||||
|
||||
.sidenav {
|
||||
z-index: 4;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
overflow-x: hidden;
|
||||
transition: 0.5s;
|
||||
padding-top: 60px;
|
||||
animation: show 0.4s ease;
|
||||
}
|
||||
top: var(--btns-top);
|
||||
right: var(--btns-right);
|
||||
left: var(--btns-left);
|
||||
margin-left: var(--btns-margin-left);
|
||||
width: var(--btns-width);
|
||||
flex-direction: var(--btns-flex-direction);
|
||||
|
||||
.sidenav button {
|
||||
padding: 8px 8px 8px 32px;
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
grid-gap: 0.4rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.sidenav button:hover {
|
||||
color: grey;
|
||||
transform: var(--btns-hover-scale);
|
||||
}
|
||||
-webkit-transform: translate(0%, -50%);
|
||||
-ms-transform: translate(0%, -50%);
|
||||
transform: translate(0%, -50%);
|
||||
|
||||
.sidenav .closebtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
font-size: 36px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.sidenav::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
.sidenav::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.sidenav::-webkit-scrollbar-thumb {
|
||||
background: rgb(255 255 255 / 40%);
|
||||
}
|
||||
|
||||
@media screen and (max-height: 450px) {
|
||||
.sidenav {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.sidenav button {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#control {
|
||||
position: fixed;
|
||||
padding: 10px;
|
||||
top: 0;
|
||||
width: 250px;
|
||||
background: var(--body-bg);
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#control button {
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#exitButton:hover {
|
||||
color: red;
|
||||
#control p {
|
||||
font-size: small;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#settings {
|
||||
position: relative;
|
||||
background: var(--body-bg);
|
||||
#exitButton {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@@ -185,47 +155,89 @@ body {
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Dropdown menù
|
||||
# My settings
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
#mySettings {
|
||||
z-index: 6;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
max-width: 230px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
background: var(--msger-bg);
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: 10px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.dropdown-content select {
|
||||
width: 210px;
|
||||
font-size: small;
|
||||
#mySettingsHeader {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#mySettings i,
|
||||
#mySettings p {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#mySettings select {
|
||||
width: auto;
|
||||
max-width: 270px;
|
||||
height: 40px;
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#mySettings button:hover {
|
||||
background-color: rgb(42 42 42 / 70%);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Recording
|
||||
# Style the tab
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#recording {
|
||||
position: relative;
|
||||
background: var(--body-bg);
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
#recording button,
|
||||
#recording p {
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 5px;
|
||||
/* Style the buttons inside the tab */
|
||||
.tab button {
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
.tab button:hover {
|
||||
background-color: transparent;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* Create an active/current tablink class */
|
||||
.tab button.active {
|
||||
background-color: rgb(42 42 42 / 70%);
|
||||
}
|
||||
|
||||
/* Style the tab content */
|
||||
.tabcontent {
|
||||
display: none;
|
||||
padding: 6px 12px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* on open display devices tab */
|
||||
#tabDevices {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@@ -539,11 +551,11 @@ button:hover {
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#participants {
|
||||
z-index: 6;
|
||||
z-index: 7;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
min-width: 320px;
|
||||
width: 320px;
|
||||
background: var(--body-bg);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
@@ -589,7 +601,7 @@ button:hover {
|
||||
|
||||
#sendFileDiv,
|
||||
#receiveFileDiv {
|
||||
z-index: 7;
|
||||
z-index: 8;
|
||||
display: none;
|
||||
padding: 10px;
|
||||
margin: auto;
|
||||
@@ -618,29 +630,10 @@ progress {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# YouTube Video
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#youTubeSettings {
|
||||
display: 'none';
|
||||
position: relative;
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
#youTubeCloseBtn:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Whiteboard
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#whiteboardSettings {
|
||||
position: relative;
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
#whiteboard {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
@@ -716,9 +709,9 @@ progress {
|
||||
z-index:
|
||||
- 1 videoMediaContainer
|
||||
- 2 whiteboard
|
||||
- 3 buttonBar
|
||||
- 4 sidenav
|
||||
- 4 whiteboard
|
||||
- 3 control buttons
|
||||
- 5 chat
|
||||
- 6 participants
|
||||
- 6 settings
|
||||
- 7 participants
|
||||
- 8 send receive progress
|
||||
*/
|
||||
|
||||
@@ -40,7 +40,6 @@ let isAudioOn = true;
|
||||
let isVideoOn = true;
|
||||
let initAudioButton = null;
|
||||
let initVideoButton = null;
|
||||
let initDisableAllButton = null;
|
||||
|
||||
let recTimer = null;
|
||||
let recElapsedTime = null;
|
||||
@@ -55,6 +54,8 @@ let wbIsRedoing = false;
|
||||
let wbIsEraser = false;
|
||||
let wbPop = [];
|
||||
|
||||
let isButtonsVisible = false;
|
||||
|
||||
const socket = io();
|
||||
|
||||
function getRandomNumber(length) {
|
||||
@@ -69,8 +70,12 @@ function getRandomNumber(length) {
|
||||
|
||||
function initClient() {
|
||||
if (!DetectRTC.isMobileDevice) {
|
||||
setTippy('openNavButton', 'Open', 'right');
|
||||
setTippy('closeNavButton', 'Close', 'right');
|
||||
setTippy('tabDevicesBtn', 'Devices', 'top');
|
||||
setTippy('tabWhiteboardBtn', 'Whiteboard', 'top');
|
||||
setTippy('tabRecordingBtn', 'Recording', 'top');
|
||||
setTippy('tabRoomBtn', 'Room', 'top');
|
||||
setTippy('tabYoutubeBtn', 'YouTube', 'top');
|
||||
setTippy('tabStylingBtn', 'Styling', 'top');
|
||||
setTippy('whiteboardPencilBtn', 'Drawing mode', 'top');
|
||||
setTippy('whiteboardObjectBtn', 'Object mode', 'top');
|
||||
setTippy('whiteboardUndoBtn', 'Undo', 'top');
|
||||
@@ -84,15 +89,12 @@ function initClient() {
|
||||
setTippy('whiteboardSaveBtn', 'Save', 'top');
|
||||
setTippy('whiteboardEraserBtn', 'Eraser', 'top');
|
||||
setTippy('whiteboardCleanBtn', 'Clear', 'top');
|
||||
setTippy('whiteboardCloseBtn', 'Close', 'top');
|
||||
setTippy('participantsRefreshBtn', 'Refresh', 'top');
|
||||
setTippy('participantsCloseBtn', 'Close', 'top');
|
||||
setTippy('chatMessage', 'Press enter to send', 'top-start');
|
||||
setTippy('chatSendButton', 'Send', 'top');
|
||||
setTippy('chatEmojiButton', 'Emoji', 'top');
|
||||
setTippy('chatCleanButton', 'Clean', 'bottom');
|
||||
setTippy('chatSaveButton', 'Save', 'bottom');
|
||||
setTippy('chatCloseButton', 'Close', 'bottom');
|
||||
setTippy('sessionTime', 'Session time', 'right');
|
||||
}
|
||||
setupWhiteboard();
|
||||
@@ -247,8 +249,7 @@ function whoAreYou() {
|
||||
html: `<br />
|
||||
<div style="overflow: hidden;">
|
||||
<button id="initAudioButton" class="fas fa-microphone" onclick="handleAudio(event)"></button>
|
||||
<button id="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button><i id="separator" class=""> |</i>
|
||||
<button id="initDisableAllButton" class="fas fa-eye-slash" style="color: red;" onclick="disableAudioVideo()"></button>
|
||||
<button id="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button>
|
||||
</div>`,
|
||||
confirmButtonText: `Join meeting`,
|
||||
showClass: {
|
||||
@@ -269,19 +270,8 @@ function whoAreYou() {
|
||||
|
||||
initAudioButton = document.getElementById('initAudioButton');
|
||||
initVideoButton = document.getElementById('initVideoButton');
|
||||
initDisableAllButton = document.getElementById('initDisableAllButton');
|
||||
let separator = document.getElementById('separator');
|
||||
if (!isAudioAllowed) initAudioButton.className = 'hidden';
|
||||
if (!isVideoAllowed) {
|
||||
initVideoButton.className = 'hidden';
|
||||
initDisableAllButton.className = 'hidden';
|
||||
separator.className = 'hidden';
|
||||
}
|
||||
if (!DetectRTC.isMobileDevice) {
|
||||
setTippy('initAudioButton', 'Enable / Disable audio', 'left');
|
||||
setTippy('initVideoButton', 'Enable / Disable video', 'right');
|
||||
setTippy('initDisableAllButton', 'Disable audio & video', 'right');
|
||||
}
|
||||
if (!isVideoAllowed) initVideoButton.className = 'hidden';
|
||||
}
|
||||
|
||||
function handleAudio(e) {
|
||||
@@ -298,15 +288,6 @@ function handleVideo(e) {
|
||||
setColor(startVideoButton, isVideoOn ? 'white' : 'red');
|
||||
}
|
||||
|
||||
function disableAudioVideo() {
|
||||
isAudioOn = false;
|
||||
isVideoOn = false;
|
||||
initAudioButton.className = 'fas fa-microphone-slash';
|
||||
initVideoButton.className = 'fas fa-video-slash';
|
||||
setColor(initAudioButton, 'red');
|
||||
setColor(initVideoButton, 'red');
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// SHARE ROOM
|
||||
// ####################################################
|
||||
@@ -427,10 +408,8 @@ function joinRoom(peer_name, room_id) {
|
||||
}
|
||||
|
||||
function roomIsReady() {
|
||||
show(openNavButton);
|
||||
show(exitButton);
|
||||
show(shareButton);
|
||||
show(recButton);
|
||||
show(startRecButton);
|
||||
show(chatButton);
|
||||
show(chatSendButton);
|
||||
@@ -440,6 +419,7 @@ function roomIsReady() {
|
||||
setChatSize();
|
||||
} else {
|
||||
rc.makeDraggable(chatRoom, chatHeader);
|
||||
rc.makeDraggable(mySettings, mySettingsHeader);
|
||||
rc.makeDraggable(participants, participantsHeader);
|
||||
rc.makeDraggable(whiteboard, whiteboardHeader);
|
||||
if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) {
|
||||
@@ -456,9 +436,7 @@ function roomIsReady() {
|
||||
show(raiseHandButton);
|
||||
if (isAudioAllowed) show(startAudioButton);
|
||||
if (isVideoAllowed) show(startVideoButton);
|
||||
show(youTubeShareButton);
|
||||
show(fileShareButton);
|
||||
show(whiteboardButton);
|
||||
show(participantsButton);
|
||||
show(lockRoomButton);
|
||||
show(aboutButton);
|
||||
@@ -466,6 +444,9 @@ function roomIsReady() {
|
||||
handleSelects();
|
||||
handleInputs();
|
||||
startSessionTimer();
|
||||
document.body.addEventListener('mousemove', (e) => {
|
||||
showButtons();
|
||||
});
|
||||
}
|
||||
|
||||
function hide(elem) {
|
||||
@@ -548,20 +529,35 @@ function stopRecordingTimer() {
|
||||
// ####################################################
|
||||
|
||||
function handleButtons() {
|
||||
openNavButton.onclick = () => {
|
||||
rc.toggleNav();
|
||||
};
|
||||
closeNavButton.onclick = () => {
|
||||
rc.toggleNav();
|
||||
};
|
||||
exitButton.onclick = () => {
|
||||
rc.exit();
|
||||
rc.exitRoom();
|
||||
};
|
||||
shareButton.onclick = () => {
|
||||
shareRoom(true);
|
||||
};
|
||||
settingsButton.onclick = () => {
|
||||
rc.toggleDevices();
|
||||
rc.toggleMySettings();
|
||||
};
|
||||
mySettingsCloseBtn.onclick = () => {
|
||||
rc.toggleMySettings();
|
||||
};
|
||||
tabDevicesBtn.onclick = (e) => {
|
||||
rc.openTab(e, 'tabDevices');
|
||||
};
|
||||
tabWhiteboardBtn.onclick = (e) => {
|
||||
rc.openTab(e, 'tabWhiteboard');
|
||||
};
|
||||
tabRecordingBtn.onclick = (e) => {
|
||||
rc.openTab(e, 'tabRecording');
|
||||
};
|
||||
tabRoomBtn.onclick = (e) => {
|
||||
rc.openTab(e, 'tabRoom');
|
||||
};
|
||||
tabYoutubeBtn.onclick = (e) => {
|
||||
rc.openTab(e, 'tabYoutube');
|
||||
};
|
||||
tabStylingBtn.onclick = (e) => {
|
||||
rc.openTab(e, 'tabStyling');
|
||||
};
|
||||
chatButton.onclick = () => {
|
||||
rc.toggleChat();
|
||||
@@ -584,9 +580,6 @@ function handleButtons() {
|
||||
fullScreenButton.onclick = () => {
|
||||
rc.toggleFullScreen();
|
||||
};
|
||||
recButton.onclick = () => {
|
||||
rc.toggleRecording();
|
||||
};
|
||||
startRecButton.onclick = () => {
|
||||
rc.startRecording();
|
||||
};
|
||||
@@ -727,6 +720,10 @@ function handleSelects() {
|
||||
videoSelect.onchange = () => {
|
||||
rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value);
|
||||
};
|
||||
// styling
|
||||
BtnsBarPosition.onchange = () => {
|
||||
rc.changeBtnsBarPosition(BtnsBarPosition.value);
|
||||
};
|
||||
// whiteboard options
|
||||
wbDrawingLineWidthEl.onchange = () => {
|
||||
wbCanvas.freeDrawingBrush.width = parseInt(wbDrawingLineWidthEl.value, 10) || 1;
|
||||
@@ -916,6 +913,16 @@ function getDataTimeString() {
|
||||
return `${date}-${time}`;
|
||||
}
|
||||
|
||||
function showButtons() {
|
||||
if (isButtonsVisible || (rc.isMobileDevice && rc.isChatOpen) || (rc.isMobileDevice && rc.isMySettingsOpen)) return;
|
||||
control.style.display = 'flex';
|
||||
isButtonsVisible = true;
|
||||
setTimeout(() => {
|
||||
control.style.display = 'none';
|
||||
isButtonsVisible = false;
|
||||
}, 10000);
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// UTILITY
|
||||
// ####################################################
|
||||
@@ -940,7 +947,6 @@ function isImageURL(url) {
|
||||
|
||||
function toggleWhiteboard() {
|
||||
if (!wbIsOpen) rc.sound('open');
|
||||
toggleWhiteboardSettings();
|
||||
let whiteboard = rc.getId('whiteboard');
|
||||
whiteboard.classList.toggle('show');
|
||||
whiteboard.style.top = '50%';
|
||||
@@ -948,10 +954,6 @@ function toggleWhiteboard() {
|
||||
wbIsOpen = wbIsOpen ? false : true;
|
||||
}
|
||||
|
||||
function toggleWhiteboardSettings() {
|
||||
rc.getId('whiteboardSettings').classList.toggle('show');
|
||||
}
|
||||
|
||||
function setupWhiteboard() {
|
||||
setupWhiteboardCanvas();
|
||||
setupWhiteboardCanvasSize();
|
||||
@@ -1329,11 +1331,11 @@ async function getParticipantsTable(peers) {
|
||||
table += `
|
||||
<tr>
|
||||
<td>👥 All</td>
|
||||
<td><button id="muteAllButton" onclick="rc.peerAction('me','${rc.peer_id}','mute',true,true)">${_PEER.audioOff} Mute</button></td>
|
||||
<td><button id="hideAllButton" onclick="rc.peerAction('me','${rc.peer_id}','hide',true,true)">${_PEER.videoOff} Hide</button></td>
|
||||
<td><button id="muteAllButton" onclick="rc.peerAction('me','${rc.peer_id}','mute',true,true)">${_PEER.audioOff}</button></td>
|
||||
<td><button id="hideAllButton" onclick="rc.peerAction('me','${rc.peer_id}','hide',true,true)">${_PEER.videoOff}</button></td>
|
||||
<td></td>
|
||||
<td><button id="sendAllButton" onclick="rc.selectFileToShare('${rc.peer_id}')">${_PEER.sendFile} File</button></td>
|
||||
<td><button id="ejectAllButton" onclick="rc.peerAction('me','${rc.peer_id}','eject',true,true)">${_PEER.ejectPeer} Eject</button></td>
|
||||
<td><button id="sendAllButton" onclick="rc.selectFileToShare('${rc.peer_id}')">${_PEER.sendFile}</button></td>
|
||||
<td><button id="ejectAllButton" onclick="rc.peerAction('me','${rc.peer_id}','eject',true,true)">${_PEER.ejectPeer}</button></td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
|
||||
@@ -88,6 +88,8 @@ class RoomClient {
|
||||
|
||||
this.isMobileDevice = DetectRTC.isMobileDevice;
|
||||
|
||||
this.isMySettingsOpen = false;
|
||||
|
||||
this._isConnected = false;
|
||||
this.isVideoOnFullScreen = false;
|
||||
this.isChatOpen = false;
|
||||
@@ -1054,6 +1056,27 @@ class RoomClient {
|
||||
this.event(_EVENTS.exitRoom);
|
||||
}
|
||||
|
||||
exitRoom() {
|
||||
this.sound('open');
|
||||
|
||||
Swal.fire({
|
||||
background: swalBackground,
|
||||
position: 'center',
|
||||
title: 'Leave this room?',
|
||||
showDenyButton: true,
|
||||
confirmButtonText: `Yes`,
|
||||
denyButtonText: `No`,
|
||||
showClass: {
|
||||
popup: 'animate__animated animate__fadeInDown',
|
||||
},
|
||||
hideClass: {
|
||||
popup: 'animate__animated animate__fadeOutUp',
|
||||
},
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) this.exit();
|
||||
});
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// HELPERS
|
||||
// ####################################################
|
||||
@@ -1177,6 +1200,10 @@ class RoomClient {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
getEcN(cn) {
|
||||
return document.getElementsByClassName(cn);
|
||||
}
|
||||
|
||||
async getRoomInfo() {
|
||||
let room_info = await this.socket.request('getRoomInfo');
|
||||
return room_info;
|
||||
@@ -1198,14 +1225,6 @@ class RoomClient {
|
||||
// UTILITY
|
||||
// ####################################################
|
||||
|
||||
toggleNav() {
|
||||
this.getId('control').classList.toggle('show');
|
||||
}
|
||||
|
||||
toggleDevices() {
|
||||
this.getId('settings').classList.toggle('show');
|
||||
}
|
||||
|
||||
async sound(name) {
|
||||
let sound = '../sounds/' + name + '.wav';
|
||||
let audio = new Audio(sound);
|
||||
@@ -1238,6 +1257,53 @@ class RoomClient {
|
||||
return false;
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// MY SETTINGS
|
||||
// ####################################################
|
||||
|
||||
toggleMySettings() {
|
||||
let mySettings = this.getId('mySettings');
|
||||
mySettings.style.top = '50%';
|
||||
mySettings.style.left = '50%';
|
||||
mySettings.classList.toggle('show');
|
||||
this.isMySettingsOpen = this.isMySettingsOpen ? false : true;
|
||||
}
|
||||
|
||||
openTab(evt, tabName) {
|
||||
let i, tabcontent, tablinks;
|
||||
tabcontent = this.getEcN('tabcontent');
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = 'none';
|
||||
}
|
||||
tablinks = this.getEcN('tablinks');
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = tablinks[i].className.replace(' active', '');
|
||||
}
|
||||
this.getId(tabName).style.display = 'block';
|
||||
evt.currentTarget.className += ' active';
|
||||
}
|
||||
|
||||
changeBtnsBarPosition(position) {
|
||||
switch (position) {
|
||||
case 'vertical':
|
||||
document.documentElement.style.setProperty('--btns-top', '50%');
|
||||
document.documentElement.style.setProperty('--btns-right', '0px');
|
||||
document.documentElement.style.setProperty('--btns-left', '20px');
|
||||
document.documentElement.style.setProperty('--btns-margin-left', '0px');
|
||||
document.documentElement.style.setProperty('--btns-width', '40px');
|
||||
document.documentElement.style.setProperty('--btns-flex-direction', 'column');
|
||||
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-flex-direction', 'row');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// FULL SCREEN
|
||||
// ####################################################
|
||||
@@ -1454,10 +1520,6 @@ class RoomClient {
|
||||
// RECORDING
|
||||
// ####################################################
|
||||
|
||||
toggleRecording() {
|
||||
this.getId('recording').classList.toggle('show');
|
||||
}
|
||||
|
||||
getSupportedMimeTypes() {
|
||||
const possibleTypes = [
|
||||
'video/webm;codecs=vp9,opus',
|
||||
@@ -1931,7 +1993,7 @@ class RoomClient {
|
||||
let peer_name = data.peer_name;
|
||||
let you_tube_url = data.you_tube_url;
|
||||
this.closeYouTube();
|
||||
youTubeSettings.style.display = 'block';
|
||||
show(youTubeCloseBtn);
|
||||
d = document.createElement('div');
|
||||
d.className = 'Camera';
|
||||
d.id = '__youTube';
|
||||
@@ -1963,7 +2025,7 @@ class RoomClient {
|
||||
}
|
||||
let youTubeDiv = this.getId('__youTube');
|
||||
if (youTubeDiv) {
|
||||
youTubeSettings.style.display = 'none';
|
||||
hide(youTubeCloseBtn);
|
||||
youTubeDiv.parentNode.removeChild(youTubeDiv);
|
||||
resizeVideoMedia();
|
||||
this.sound('left');
|
||||
|
||||
@@ -96,85 +96,167 @@ access to use this app.
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<button id="openNavButton" class="hidden">☰</button>
|
||||
<div id="control" class="sidenav hidden">
|
||||
<button id="closeNavButton" class="closebtn">×</button>
|
||||
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i> Share</button>
|
||||
<div class="dropdown">
|
||||
<button id="settingsButton" class="hidden"><i class="fas fa-cogs"></i> Settings</button>
|
||||
<div id="settings" class="dropdown-content fadein">
|
||||
<div id="devicesList">
|
||||
<i class="fas fa-video"></i> Video
|
||||
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-microphone"></i> Microphone
|
||||
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-volume-up"></i> Speaker
|
||||
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="recButton" class="hidden"><i class="fas fa-record-vinyl"></i> Recording</button>
|
||||
<div id="recording" class="dropdown-content fadein">
|
||||
<div id="recordingCommand" class="recording">
|
||||
<button id="startRecButton" class="hidden"><i class="fas fa-record-vinyl"></i> Start</button>
|
||||
<button id="stopRecButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop</button>
|
||||
<button id="pauseRecButton" class="hidden"><i class="far fa-pause-circle"></i> Pause</button>
|
||||
<button id="resumeRecButton" class="hidden"><i class="far fa-play-circle"></i> Resume</button>
|
||||
<p id="recordingStatus">🔴 REC 0s</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="chatButton" class="hidden"><i class="fas fa-comments"></i> Chat</button>
|
||||
<button id="fullScreenButton" class="hidden"><i class="fas fa-expand-alt"></i> Full screen</button>
|
||||
<button id="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></i> Swap Cam</button>
|
||||
<button id="raiseHandButton" class="hidden"><i class="fas fa-hand-paper"></i> Raise hand</button>
|
||||
<button id="lowerHandButton" class="hidden"><i class="fas fa-hand-paper"></i> Lower hand</button>
|
||||
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i> Start audio</button>
|
||||
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i> Stop audio</button>
|
||||
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i> Start video</button>
|
||||
<button id="stopVideoButton" class="hidden"><i class="fas fa-video"></i> Stop video</button>
|
||||
<button id="startScreenButton" class="hidden"><i class="fas fa-desktop"></i> Start screen</button>
|
||||
<button id="stopScreenButton" class="hidden"><i class="fas fa-stop-circle"></i> Stop screen</button>
|
||||
<button id="fileShareButton" class="hidden"><i class="fas fa-folder-open"></i> File Sharing</button>
|
||||
<div class="dropdown">
|
||||
<button id="youTubeShareButton" class="hidden"><i class="fab fa-youtube"></i> YouTube</button>
|
||||
<div id="youTubeSettings" class="dropdown-content fadein">
|
||||
<div id="youTubeOptions">
|
||||
<button id="youTubeCloseBtn"><i class="fas fa-times"></i> Close Video</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="whiteboardButton" class="hidden">
|
||||
<i class="fas fa-chalkboard-teacher"></i> Whiteboard
|
||||
</button>
|
||||
<div id="whiteboardSettings" class="dropdown-content fadein">
|
||||
<div id="whiteboardOptions">
|
||||
<i class="fas fa-pencil-alt"></i> Line width
|
||||
<input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i> Line color
|
||||
<br />
|
||||
<input id="wbDrawingColorEl" type="color" value="#FFFFFF" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i> Background color
|
||||
<br />
|
||||
<input id="wbBackgroundColorEl" type="color" value="#000000" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button id="participantsButton" class="hidden"><i class="fas fa-users"></i> Participants</button>
|
||||
<button id="lockRoomButton" class="hidden"><i class="fas fa-lock-open"></i> Lock room</button>
|
||||
<button id="unlockRoomButton" class="hidden"><i class="fas fa-lock"></i> Unlock room</button>
|
||||
<button id="aboutButton" class="hidden"><i class="fas fa-question"></i> About</button>
|
||||
<button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i> Leave</button>
|
||||
<button id="sessionTime" class="far fa-clock"></button>
|
||||
<div id="control" class="fadein">
|
||||
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></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="swapCameraButton" class="hidden"><i class="fas fa-sync-alt"></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="chatButton" class="hidden"><i class="fas fa-comments"></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="settingsButton" class="hidden"><i class="fas fa-cogs"></i></button>
|
||||
<button id="exitButton" class="hidden"><i class="fas fa-phone-slash"></i></button>
|
||||
</div>
|
||||
|
||||
<section id="mySettings" class="fadein center hidden">
|
||||
<header id="mySettingsHeader">
|
||||
<button id="mySettingsCloseBtn" class="fas fa-times"></button>
|
||||
</header>
|
||||
<main>
|
||||
<br />
|
||||
|
||||
<div class="tab">
|
||||
<button id="tabDevicesBtn" class="fas fa-cog tablinks"></button>
|
||||
<button id="tabRoomBtn" class="fas fa-home tablinks"></button>
|
||||
<button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks"></button>
|
||||
<button id="tabWhiteboardBtn" class="fas fa-chalkboard-teacher tablinks"></button>
|
||||
<button id="tabYoutubeBtn" class="fab fa-youtube tablinks"></button>
|
||||
<button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
|
||||
</div>
|
||||
|
||||
<div id="tabDevices" class="tabcontent">
|
||||
<br />
|
||||
<i class="fas fa-video"></i>
|
||||
<p>Video:</p>
|
||||
<select id="videoSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-microphone"></i>
|
||||
<p>Microphone:</p>
|
||||
<select id="microphoneSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
<i class="fas fa-volume-up"></i>
|
||||
<p>Speaker:</p>
|
||||
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabWhiteboard" class="tabcontent">
|
||||
<br />
|
||||
<button id="whiteboardButton">
|
||||
<i class="fas fa-chalkboard-teacher"></i>
|
||||
<p>Open whiteboard</p>
|
||||
</button>
|
||||
<br />
|
||||
<i class="fas fa-pencil-alt"></i>
|
||||
<p>Line width:</p>
|
||||
<input id="wbDrawingLineWidthEl" type="range" value="3" min="1" max="15" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i>
|
||||
<p>Line color:</p>
|
||||
<input id="wbDrawingColorEl" type="color" value="#FFFFFF" />
|
||||
<br />
|
||||
<i class="fas fa-palette"></i>
|
||||
<p>Background color:</p>
|
||||
<input id="wbBackgroundColorEl" type="color" value="#000000" />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabRoom" class="tabcontent">
|
||||
<br />
|
||||
<button id="fullScreenButton" class="hidden">
|
||||
<i class="fas fa-expand-alt"></i>
|
||||
<p>Full screen mode</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="raiseHandButton" class="hidden">
|
||||
<i class="fas fa-hand-paper"></i>
|
||||
<p>Raise hand</p>
|
||||
</button>
|
||||
<button id="lowerHandButton" class="hidden">
|
||||
<i class="fas fa-hand-paper"></i>
|
||||
<p>Lower hand</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="fileShareButton" class="hidden">
|
||||
<i class="fas fa-folder-open"></i>
|
||||
<p>File sharing</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="participantsButton" class="hidden">
|
||||
<i class="fas fa-users"></i>
|
||||
<p>Participants</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="lockRoomButton" class="hidden">
|
||||
<i class="fas fa-lock-open"></i>
|
||||
<p>Lock room</p>
|
||||
</button>
|
||||
<button id="unlockRoomButton" class="hidden">
|
||||
<i class="fas fa-lock"></i>
|
||||
<p>Unlock room</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="aboutButton" class="hidden">
|
||||
<i class="fas fa-question"></i>
|
||||
<p>About</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="sessionTime"></button>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabRecording" class="tabcontent">
|
||||
<br />
|
||||
<button id="startRecButton" class="hidden">
|
||||
<i class="fas fa-record-vinyl"></i>
|
||||
<p>Start recording</p>
|
||||
</button>
|
||||
<button id="stopRecButton" class="hidden">
|
||||
<i class="fas fa-stop-circle"></i>
|
||||
<p>Stop recording</p>
|
||||
</button>
|
||||
<button id="pauseRecButton" class="hidden">
|
||||
<i class="far fa-pause-circle"></i>
|
||||
<p>Pause recording</p>
|
||||
</button>
|
||||
<button id="resumeRecButton" class="hidden">
|
||||
<i class="far fa-play-circle"></i>
|
||||
<p>Resume recording</p>
|
||||
</button>
|
||||
<br />
|
||||
<p id="recordingStatus">🔴 REC 0s</p>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabYoutube" class="tabcontent">
|
||||
<br />
|
||||
<button id="youTubeShareButton">
|
||||
<i class="fab fa-youtube"></i>
|
||||
<p>Share YouTube</p>
|
||||
</button>
|
||||
<br />
|
||||
<button id="youTubeCloseBtn" class="hidden">
|
||||
<i class="fas fa-times"></i>
|
||||
<p>Close YouTube</p>
|
||||
</button>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="tabStyling" class="tabcontent">
|
||||
<br />
|
||||
<p>Buttons bar:</p>
|
||||
<br />
|
||||
<select id="BtnsBarPosition" class="form-select text-light bg-dark">
|
||||
<option value="vertical">Vertical</option>
|
||||
<option value="horizontal">Horizontal</option>
|
||||
</select>
|
||||
<br />
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
|
||||
<div id="videoMediaContainer">
|
||||
<!-- <div class="Camera"></div> -->
|
||||
</div>
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم