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

[mirotalksfu] - set vertical/horizontal pin video grid

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2022-09-15 13:04:17 +02:00
الأصل eace9dd558
التزام 2210d6d816
5 ملفات معدلة مع 79 إضافات و37 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

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

@@ -64,9 +64,8 @@
--btns-width: 320px;
--btns-flex-direction: row;
*/
/*
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
*/
--vmi-wh: 15vw;
/* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
--videoObjFit: cover;
}
@@ -186,7 +185,7 @@ body {
position: absolute;
margin: auto;
padding: 10px;
min-width: 320px;
width: 370px;
min-height: 480px;
background: var(--settings-bg);
box-shadow: var(--box-shadow);
@@ -209,7 +208,7 @@ body {
#mySettings select {
width: auto;
max-width: 270px;
max-width: 320px;
height: 40px;
color: #fff;
background-color: transparent;

9
public/css/VideoGrid.css
عرض الملف

@@ -7,8 +7,8 @@
position: absolute;
display: flex;
top: 0;
height: 100%;
width: 100%;
height: 100%;
border-radius: 5px;
align-content: center;
flex-wrap: wrap;
@@ -16,6 +16,7 @@
justify-content: center;
vertical-align: middle;
overflow: hidden;
/* border: 3px solid blue; */
}
#videoPinMediaContainer {
@@ -24,8 +25,8 @@
display: none;
top: 0;
left: 0;
height: 100%;
width: 75%;
height: 100%;
border-radius: 5px;
box-shadow: var(--box-shadow);
overflow: hidden;
@@ -107,8 +108,8 @@
#videoMediaContainer img {
position: absolute;
display: none;
width: 15vw;
height: 15vw;
width: var(--vmi-wh);
height: var(--vmi-wh);
}
.videoMenuBar {

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

@@ -130,6 +130,7 @@ function initClient() {
setTippy('tabVideoShareBtn', 'Video share', 'top');
setTippy('tabAspectBtn', 'Aspect', 'top');
setTippy('tabStylingBtn', 'Styling', 'top');
setTippy('tabLanguagesBtn', 'Languages', 'top');
setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom');
setTippy('wbBackgroundColorEl', 'Background color', 'bottom');
setTippy('wbDrawingColorEl', 'Drawing color', 'bottom');
@@ -672,6 +673,7 @@ function roomIsReady() {
BUTTONS.settings.participantsButton && show(participantsButton);
BUTTONS.settings.lockRoomButton && show(lockRoomButton);
BUTTONS.main.aboutButton && show(aboutButton);
if (!DetectRTC.isMobileDevice) show(pinUnpinGridDiv);
handleButtons();
handleSelects();
handleInputs();
@@ -801,6 +803,9 @@ function handleButtons() {
tabStylingBtn.onclick = (e) => {
rc.openTab(e, 'tabStyling');
};
tabLanguagesBtn.onclick = (e) => {
rc.openTab(e, 'tabLanguages');
};
chatButton.onclick = () => {
rc.toggleChat();
};
@@ -1016,6 +1021,9 @@ function handleSelects() {
BtnsBarPosition.onchange = () => {
rc.changeBtnsBarPosition(BtnsBarPosition.value);
};
pinVideoPosition.onchange = () => {
rc.togglePin(pinVideoPosition.value);
};
// whiteboard options
wbDrawingColorEl.onchange = () => {

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

@@ -1539,25 +1539,6 @@ class RoomClient {
}
}
// ####################################################
// REMOVE VIDEO PIN MEDIA CONTAINER
// ####################################################
removeVideoPinMediaContainer() {
this.videoPinMediaContainer.style.display = 'none';
this.videoMediaContainer.style.width = '100%';
this.videoMediaContainer.style.right = null;
this.videoMediaContainer.style.left = 0;
this.pinnedVideoPlayerId = null;
this.isVideoPinned = false;
}
adaptVideoObjectFit(index) {
// 1 (cover) 2 (contain)
BtnVideoObjectFit.selectedIndex = index;
BtnVideoObjectFit.onchange();
}
// ####################################################
// SHARE SCREEN ON JOIN
// ####################################################
@@ -1979,7 +1960,7 @@ class RoomClient {
}
// ####################################################
// HANDLE VIDEO | OBJ FIT | CONTROLS |
// HANDLE VIDEO | OBJ FIT | CONTROLS | PIN-UNPIN
// ####################################################
handleVideoObjectFit(value) {
@@ -2010,9 +1991,7 @@ class RoomClient {
cam.className = '';
cam.style.width = '100%';
cam.style.height = '100%';
this.videoMediaContainer.style.width = '25%';
this.videoMediaContainer.style.left = null;
this.videoMediaContainer.style.right = 0;
this.togglePin(pinVideoPosition.value);
this.videoPinMediaContainer.appendChild(cam);
this.videoPinMediaContainer.style.display = 'block';
this.pinnedVideoPlayerId = elemId;
@@ -2025,12 +2004,8 @@ class RoomClient {
if (!isScreen) videoPlayer.style.objectFit = 'var(--videoObjFit)';
this.videoPinMediaContainer.removeChild(cam);
cam.className = 'Camera';
this.videoMediaContainer.style.width = '100%';
this.videoMediaContainer.style.right = null;
this.videoMediaContainer.style.left = 0;
this.videoMediaContainer.appendChild(cam);
this.videoPinMediaContainer.style.display = 'none';
this.pinnedVideoPlayerId = null;
this.removeVideoPinMediaContainer();
setColor(btnPn, 'white');
}
handleAspectRatio();
@@ -2038,6 +2013,52 @@ class RoomClient {
}
}
togglePin(position) {
if (!this.isVideoPinned) return;
switch (position) {
case 'vertical':
this.videoPinMediaContainer.style.width = '75%';
this.videoPinMediaContainer.style.height = '100%';
this.videoMediaContainer.style.top = 0;
this.videoMediaContainer.style.width = '25%';
this.videoMediaContainer.style.height = '100%';
this.videoMediaContainer.style.right = 0;
document.documentElement.style.setProperty('--vmi-wh', '15vw');
break;
case 'horizontal':
this.videoPinMediaContainer.style.width = '100%';
this.videoPinMediaContainer.style.height = '75%';
this.videoMediaContainer.style.top = '75%';
this.videoMediaContainer.style.right = null;
this.videoMediaContainer.style.width = null;
this.videoMediaContainer.style.width = '100% !important';
this.videoMediaContainer.style.height = '25%';
document.documentElement.style.setProperty('--vmi-wh', '15vh');
break;
}
resizeVideoMedia();
}
// ####################################################
// REMOVE VIDEO PIN MEDIA CONTAINER
// ####################################################
removeVideoPinMediaContainer() {
this.videoPinMediaContainer.style.display = 'none';
this.videoMediaContainer.style.top = 0;
this.videoMediaContainer.style.right = null;
this.videoMediaContainer.style.width = '100%';
this.videoMediaContainer.style.height = '100%';
this.pinnedVideoPlayerId = null;
this.isVideoPinned = false;
}
adaptVideoObjectFit(index) {
// 1 (cover) 2 (contain)
BtnVideoObjectFit.selectedIndex = index;
BtnVideoObjectFit.onchange();
}
// ####################################################
// TAKE SNAPSHOT
// ####################################################

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

@@ -125,6 +125,7 @@
<button id="tabVideoShareBtn" class="fab fa-youtube tablinks"></button>
<button id="tabAspectBtn" class="fas fa-screwdriver-wrench tablinks"></button>
<button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
<button id="tabLanguagesBtn" class="fas fa-globe tablinks"></button>
</div>
<div id="tabDevices" class="tabcontent">
@@ -271,6 +272,18 @@
<option value="vertical">Vertical</option>
<option value="horizontal">Horizontal</option>
</select>
<br />
<div id="pinUnpinGridDiv" class="hidden">
<p>Pin grid:</p>
<br />
<select id="pinVideoPosition" class="form-select text-light bg-dark">
<option value="vertical">Vertical</option>
<option value="horizontal">Horizontal</option>
</select>
</div>
</div>
<div id="tabLanguages" class="tabcontent">
<br />
<p>Language:</p>
<br />