[mirotalksfu] - add editor pin/unpin
هذا الالتزام موجود في:
@@ -43,7 +43,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.57
|
||||
* @version 1.5.58
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mirotalksfu",
|
||||
"version": "1.5.57",
|
||||
"version": "1.5.58",
|
||||
"description": "WebRTC SFU browser-based video calls",
|
||||
"main": "Server.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: var(--editor-container-width);
|
||||
height: var(--editor-container-height);
|
||||
border: var(--border);
|
||||
border-radius: 10px;
|
||||
background: var(--body-bg);
|
||||
border: var(--border);
|
||||
box-shadow: var(--box-shadow);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.editor {
|
||||
height: 85vh !important;
|
||||
height: var(--editor-height) !important;
|
||||
color: white !important;
|
||||
border-radius: 0px 0px 10px 10px; /* Top-left, top-right, bottom-right, bottom-left */
|
||||
border: var(--border) !important;
|
||||
|
||||
@@ -48,6 +48,10 @@
|
||||
--transcription-width: 420px;
|
||||
--trx-bg: radial-gradient(#393939, #000000);
|
||||
|
||||
--editor-container-width: 100%;
|
||||
--editor-container-height: 100%;
|
||||
--editor-height: 85vh;
|
||||
|
||||
--vmi-wh: 15vw;
|
||||
/* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
|
||||
--videoObjFit: cover;
|
||||
|
||||
@@ -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.57
|
||||
* @version 1.5.58
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -342,6 +342,7 @@ function initClient() {
|
||||
setTippy('pollCloseBtn', 'Close', 'bottom');
|
||||
setTippy('editorLockBtn', 'Toggle Lock editor', 'bottom');
|
||||
setTippy('editorUnlockBtn', 'Toggle Lock editor', 'bottom');
|
||||
setTippy('editorTogglePin', 'Toggle pin', 'bottom');
|
||||
setTippy('editorUndoBtn', 'Undo', 'bottom');
|
||||
setTippy('editorRedoBtn', 'Redo', 'bottom');
|
||||
setTippy('editorCopyBtn', 'Copy', 'bottom');
|
||||
@@ -1331,6 +1332,7 @@ function roomIsReady() {
|
||||
hide(chatMinButton);
|
||||
rc.pollMaximize();
|
||||
hide(pollTogglePin);
|
||||
hide(editorTogglePin);
|
||||
hide(pollMaxButton);
|
||||
hide(pollMinButton);
|
||||
transcription.maximize();
|
||||
@@ -1341,6 +1343,7 @@ function roomIsReady() {
|
||||
rc.makeDraggable(emojiPickerContainer, emojiPickerHeader);
|
||||
rc.makeDraggable(chatRoom, chatHeader);
|
||||
rc.makeDraggable(pollRoom, pollHeader);
|
||||
//rc.makeDraggable(editorRoom, editorHeader);
|
||||
rc.makeDraggable(mySettings, mySettingsHeader);
|
||||
rc.makeDraggable(whiteboard, whiteboardHeader);
|
||||
rc.makeDraggable(sendFileDiv, imgShareSend);
|
||||
@@ -1357,6 +1360,7 @@ function roomIsReady() {
|
||||
BUTTONS.chat.chatPinButton && show(chatTogglePin);
|
||||
BUTTONS.chat.chatMaxButton && show(chatMaxButton);
|
||||
BUTTONS.poll.pollPinButton && show(pollTogglePin);
|
||||
show(editorTogglePin);
|
||||
BUTTONS.poll.pollMaxButton && show(pollMaxButton);
|
||||
BUTTONS.settings.pushToTalk && show(pushToTalkDiv);
|
||||
BUTTONS.settings.tabRTMPStreamingBtn &&
|
||||
@@ -1646,6 +1650,9 @@ function handleButtons() {
|
||||
rc.editorSendAction('close');
|
||||
}
|
||||
};
|
||||
editorTogglePin.onclick = () => {
|
||||
rc.toggleEditorPin();
|
||||
};
|
||||
editorLockBtn.onclick = () => {
|
||||
rc.toggleLockUnlockEditor();
|
||||
};
|
||||
@@ -4437,7 +4444,7 @@ function showAbout() {
|
||||
imageUrl: image.about,
|
||||
customClass: { image: 'img-about' },
|
||||
position: 'center',
|
||||
title: 'WebRTC SFU v1.5.57',
|
||||
title: 'WebRTC SFU v1.5.58',
|
||||
html: `
|
||||
<br />
|
||||
<div id="about">
|
||||
|
||||
@@ -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.57
|
||||
* @version 1.5.58
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -265,6 +265,7 @@ class RoomClient {
|
||||
this.isPollPinned = false;
|
||||
this.isEditorOpen = false;
|
||||
this.isEditorLocked = false;
|
||||
this.isEditorPinned = false;
|
||||
this.isSpeechSynthesisSupported = isSpeechSynthesisSupported;
|
||||
this.speechInMessages = false;
|
||||
this.showChatOnMessage = true;
|
||||
@@ -3516,6 +3517,9 @@ class RoomClient {
|
||||
if (this.isPollPinned) {
|
||||
this.pollPin();
|
||||
}
|
||||
if (this.isEditorPinned) {
|
||||
this.editorPin();
|
||||
}
|
||||
if (this.transcription.isPin()) {
|
||||
this.transcription.pinned();
|
||||
}
|
||||
@@ -3716,6 +3720,9 @@ class RoomClient {
|
||||
if (this.isPollPinned) {
|
||||
return userLog('info', 'Please unpin the poll that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
if (this.isEditorPinned) {
|
||||
return userLog('info', 'Please unpin the editor that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
this.isChatPinned ? this.chatUnpin() : this.chatPin();
|
||||
this.sound('click');
|
||||
}
|
||||
@@ -4387,6 +4394,9 @@ class RoomClient {
|
||||
if (this.isChatPinned) {
|
||||
return userLog('info', 'Please unpin the chat that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
if (this.isEditorPinned) {
|
||||
return userLog('info', 'Please unpin the editor that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
this.isPollPinned ? this.pollUnpin() : this.pollPin();
|
||||
this.sound('click');
|
||||
}
|
||||
@@ -4401,7 +4411,7 @@ class RoomClient {
|
||||
this.isPollPinned = true;
|
||||
setColor(pollTogglePin, 'lime');
|
||||
resizeVideoMedia();
|
||||
chatRoom.style.resize = 'none';
|
||||
pollRoom.style.resize = 'none';
|
||||
if (!this.isMobileDevice) this.makeUnDraggable(pollRoom, pollHeader);
|
||||
}
|
||||
|
||||
@@ -4687,9 +4697,11 @@ class RoomClient {
|
||||
toggleEditor() {
|
||||
editorRoom.classList.toggle('show');
|
||||
if (!this.isEditorOpen) {
|
||||
this.editorCenter();
|
||||
this.sound('open');
|
||||
}
|
||||
this.isEditorOpen = !this.isEditorOpen;
|
||||
if (this.isEditorPinned) this.editorUnpin();
|
||||
}
|
||||
|
||||
toggleLockUnlockEditor() {
|
||||
@@ -4719,6 +4731,61 @@ class RoomClient {
|
||||
editorRoom.style.left = '50%';
|
||||
}
|
||||
|
||||
toggleEditorPin() {
|
||||
if (transcription.isPin()) {
|
||||
return userLog('info', 'Please unpin the transcription that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
if (this.isPollPinned) {
|
||||
return userLog('info', 'Please unpin the poll that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
if (this.isChatPinned) {
|
||||
return userLog('info', 'Please unpin the chat that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
this.isEditorPinned ? this.editorUnpin() : this.editorPin();
|
||||
this.sound('click');
|
||||
}
|
||||
|
||||
editorPin() {
|
||||
if (!this.isVideoPinned) {
|
||||
this.videoMediaContainer.style.top = 0;
|
||||
this.videoMediaContainer.style.width = '70%';
|
||||
this.videoMediaContainer.style.height = '100%';
|
||||
}
|
||||
this.editorPinned();
|
||||
this.isEditorPinned = true;
|
||||
setColor(editorTogglePin, 'lime');
|
||||
resizeVideoMedia();
|
||||
document.documentElement.style.setProperty('--editor-height', '80vh');
|
||||
//if (!this.isMobileDevice) this.makeUnDraggable(editorRoom, editorHeader);
|
||||
}
|
||||
|
||||
editorUnpin() {
|
||||
if (!this.isVideoPinned) {
|
||||
this.videoMediaContainer.style.top = 0;
|
||||
this.videoMediaContainer.style.right = null;
|
||||
this.videoMediaContainer.style.width = '100%';
|
||||
this.videoMediaContainer.style.height = '100%';
|
||||
}
|
||||
editorRoom.style.maxWidth = '100%';
|
||||
editorRoom.style.maxHeight = '100%';
|
||||
this.pollCenter();
|
||||
this.isEditorPinned = false;
|
||||
setColor(editorTogglePin, 'white');
|
||||
resizeVideoMedia();
|
||||
document.documentElement.style.setProperty('--editor-height', '85vh');
|
||||
//if (!this.isMobileDevice) this.makeDraggable(editorRoom, editorHeader);
|
||||
}
|
||||
|
||||
editorPinned() {
|
||||
editorRoom.style.position = 'absolute';
|
||||
editorRoom.style.top = 0;
|
||||
editorRoom.style.right = 0;
|
||||
editorRoom.style.left = null;
|
||||
editorRoom.style.transform = null;
|
||||
editorRoom.style.maxWidth = '30%';
|
||||
editorRoom.style.maxHeight = '100%';
|
||||
}
|
||||
|
||||
editorUpdate() {
|
||||
if (this.isEditorOpen && (!isRulesActive || isPresenter)) {
|
||||
console.log('IsPresenter: update editor content to the participants in the room');
|
||||
|
||||
@@ -285,6 +285,9 @@ class Transcription {
|
||||
if (rc.isChatPinned) {
|
||||
return userLog('info', 'Please unpin the chat that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
if (rc.isEditorPinned) {
|
||||
return userLog('info', 'Please unpin the editor that appears to be currently pinned', 'top-end');
|
||||
}
|
||||
this.isPinned ? this.unpinned() : this.pinned();
|
||||
rc.sound('click');
|
||||
}
|
||||
|
||||
@@ -1544,6 +1544,7 @@ access to use this app.
|
||||
<section id="editorRoom" class="editor-container fadein hidden">
|
||||
<div id="editorHeader" class="editor-header">
|
||||
<div class="editor-header-btns">
|
||||
<button id="editorTogglePin" class="fas fa-map-pin hidden"></button>
|
||||
<button id="editorUnlockBtn" class="fa-solid fa-lock-open hidden"></button>
|
||||
<button id="editorLockBtn" class="fa-solid fa-lock hidden"></button>
|
||||
<button id="editorUndoBtn" class="fas fa-undo"></button>
|
||||
|
||||
المرجع في مشكلة جديدة
حظر مستخدم