[mirotalksfu] - #171 fix, improve UI/UX, update dep
هذا الالتزام موجود في:
Miroslav Pejic
@@ -132,6 +132,25 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.videoMenuBarClose {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
.videoMenuBarClose:hover {
|
||||
background: var(--btns-bg-color);
|
||||
}
|
||||
|
||||
.videoMenuBarShare {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
@@ -166,15 +185,97 @@
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.expand-video {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.expand-video .dropdown-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.expand-video-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
float: right;
|
||||
width: auto;
|
||||
position: fixed;
|
||||
min-width: 50%;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
background: var(--body-bg);
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.expand-video:hover .expand-video-content {
|
||||
display: inline-flex;
|
||||
z-index: 1;
|
||||
display: grid !important;
|
||||
grid-gap: 5px 5px;
|
||||
grid-template-columns: 50%;
|
||||
grid-template-areas:
|
||||
'header header'
|
||||
'controls controls';
|
||||
align-content: start;
|
||||
justify-items: start;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.peer-name-container {
|
||||
display: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.expand-video-content .peer-name-header {
|
||||
grid-area: header;
|
||||
width: 100%;
|
||||
padding: 40px;
|
||||
height: 120px;
|
||||
background: var(--btns-bg-color);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.expand-video-content .peer-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(36, 36, 36, 0.8);
|
||||
border-radius: 10px;
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.expand-video-content input[type='range'] {
|
||||
display: inline !important;
|
||||
width: 100%;
|
||||
margin: 16px 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.expand-video-content button {
|
||||
display: flex !important;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background: var(--btns-bg-color);
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.expand-video-content button:hover {
|
||||
color: white;
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
#videoMediaContainer video {
|
||||
@@ -262,16 +363,6 @@ input[type='range'] {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.username {
|
||||
font-size: 12px;
|
||||
}
|
||||
.videoMenuBar input,
|
||||
.videoMenuBar button,
|
||||
.videoMenuBarShare button {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 500px) {
|
||||
.username {
|
||||
font-size: 10px;
|
||||
@@ -279,6 +370,13 @@ input[type='range'] {
|
||||
.videoMenuBar input,
|
||||
.videoMenuBar button,
|
||||
.videoMenuBarShare button {
|
||||
font-size: 0.8rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.expand-video-content {
|
||||
min-width: 100%;
|
||||
left: 0px;
|
||||
}
|
||||
.expand-video-content .peer-name {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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.6.11
|
||||
* @version 1.6.12
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -4541,7 +4541,7 @@ function showAbout() {
|
||||
imageUrl: image.about,
|
||||
customClass: { image: 'img-about' },
|
||||
position: 'center',
|
||||
title: 'WebRTC SFU v1.6.11',
|
||||
title: 'WebRTC SFU v1.6.12',
|
||||
html: `
|
||||
<br />
|
||||
<div id="about">
|
||||
|
||||
@@ -43,9 +43,10 @@ const html = {
|
||||
bg: 'fas fa-circle-half-stroke',
|
||||
pin: 'fas fa-map-pin',
|
||||
videoPrivacy: 'far fa-circle',
|
||||
expand: 'fas fa-ellipsis-vertical',
|
||||
expand: 'fas fa-bars dropdown-button',
|
||||
hideALL: 'fas fa-eye',
|
||||
mirror: 'fas fa-arrow-right-arrow-left',
|
||||
close: 'fas fa-times',
|
||||
};
|
||||
|
||||
const icons = {
|
||||
@@ -2307,17 +2308,38 @@ class RoomClient {
|
||||
pb.className = 'bar';
|
||||
pb.style.height = '1%';
|
||||
pm.appendChild(pb);
|
||||
|
||||
const peerNameHeader = document.createElement('div');
|
||||
peerNameHeader.className = 'peer-name-header';
|
||||
|
||||
const peerNameContainer = document.createElement('div');
|
||||
peerNameContainer.className = 'peer-name-container';
|
||||
|
||||
const peerNameSpan = document.createElement('span');
|
||||
peerNameSpan.className = 'peer-name';
|
||||
peerNameSpan.textContent = peer_name;
|
||||
|
||||
this.addCloseVBButton(peerNameHeader);
|
||||
|
||||
peerNameContainer.appendChild(peerNameSpan);
|
||||
|
||||
BUTTONS.consumerVideo.audioVolumeInput && peerNameContainer.appendChild(pv);
|
||||
peerNameHeader.appendChild(peerNameContainer);
|
||||
|
||||
vb.appendChild(peerNameHeader);
|
||||
eVc.appendChild(peerNameHeader);
|
||||
|
||||
BUTTONS.consumerVideo.sendMessageButton && eVc.appendChild(sm);
|
||||
BUTTONS.consumerVideo.sendFileButton && eVc.appendChild(sf);
|
||||
BUTTONS.consumerVideo.sendVideoButton && eVc.appendChild(sv);
|
||||
BUTTONS.consumerVideo.geolocationButton && eVc.appendChild(gl);
|
||||
BUTTONS.consumerVideo.banButton && eVc.appendChild(ban);
|
||||
BUTTONS.consumerVideo.ejectButton && eVc.appendChild(ko);
|
||||
|
||||
eDiv.appendChild(eBtn);
|
||||
eDiv.appendChild(eVc);
|
||||
|
||||
vb.appendChild(eDiv);
|
||||
BUTTONS.consumerVideo.audioVolumeInput && !this.isMobileDevice && vb.appendChild(pv);
|
||||
|
||||
vb.appendChild(au);
|
||||
vb.appendChild(cm);
|
||||
BUTTONS.consumerVideo.snapShotButton && vb.appendChild(ts);
|
||||
@@ -3513,9 +3535,10 @@ class RoomClient {
|
||||
setCamerasBorderNone();
|
||||
|
||||
if (videoBar.classList.contains('hidden')) {
|
||||
rc.sound('open');
|
||||
show(videoBar);
|
||||
animateCSS(videoBar, 'fadeInDown');
|
||||
videoPlayer.style.border = '3px solid #2a7aef';
|
||||
videoPlayer.style.border = '1px solid #2a7aef';
|
||||
} else {
|
||||
animateCSS(videoBar, 'fadeOutUp').then((msg) => {
|
||||
hide(videoBar);
|
||||
@@ -3526,6 +3549,16 @@ class RoomClient {
|
||||
}
|
||||
}
|
||||
|
||||
addCloseVBButton(containerElement) {
|
||||
const closeBtn = document.createElement('div');
|
||||
closeBtn.className = `${html.close} videoMenuBarClose`;
|
||||
closeBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
hideClassElements('videoMenuBar');
|
||||
});
|
||||
containerElement.appendChild(closeBtn);
|
||||
}
|
||||
|
||||
// ####################################################
|
||||
// REMOVE VIDEO PIN MEDIA CONTAINER
|
||||
// ####################################################
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم