ghaymah_dev/codepill-sfu
2
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 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

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
// ####################################################