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

[mirotalksfu] - add chat/wb transparent bg

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2022-08-24 09:23:48 +02:00
الأصل d611ac445b
التزام 4c27bdfa6b
4 ملفات معدلة مع 41 إضافات و1 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

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

@@ -48,6 +48,7 @@
--private-msg-bg: #6b1226;
--box-shadow: 0px 8px 16px 0px rgb(0 0 0);
--btns-hover-scale: scale(1.1);
--settings-bg: radial-gradient(#393939, #000000);
/* buttons bar horizontal */
--btns-top: 50%;
--btns-right: 0%;
@@ -186,7 +187,7 @@ body {
padding: 10px;
min-width: 320px;
min-height: 480px;
background: var(--msger-bg);
background: var(--settings-bg);
box-shadow: var(--box-shadow);
border: var(--border);
border-radius: 10px;

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

@@ -58,6 +58,7 @@ const swalImageUrl = '../images/pricing-illustration.svg';
// DYNAMIC SETTINGS
// ####################################################
let currentTheme = 'dark';
let swalBackground = 'radial-gradient(#393939, #000000)'; //'rgba(0, 0, 0, 0.7)';
let rc = null;
@@ -93,6 +94,7 @@ let wbIsDrawing = false;
let wbIsOpen = false;
let wbIsRedoing = false;
let wbIsEraser = false;
let wbIsBgTransparent = false;
let wbPop = [];
let isButtonsVisible = false;
@@ -124,6 +126,7 @@ function initClient() {
setTippy('tabVideoShareBtn', 'Video share', 'top');
setTippy('tabAspectBtn', 'Aspect', 'top');
setTippy('tabStylingBtn', 'Styling', 'top');
setTippy('whiteboardGhostButton', 'Toggle transparent background', 'top');
setTippy('wbBackgroundColorEl', 'Background color', 'top');
setTippy('wbDrawingColorEl', 'Drawing color', 'top');
setTippy('whiteboardPencilBtn', 'Drawing mode', 'top');
@@ -147,6 +150,7 @@ function initClient() {
setTippy('chatShareFileButton', 'Share file', 'top');
setTippy('chatCleanButton', 'Clean', 'bottom');
setTippy('chatSaveButton', 'Save', 'bottom');
setTippy('chatGhostButton', 'Toggle transparent background', 'top');
setTippy('sessionTime', 'Session time', 'right');
}
setupWhiteboard();
@@ -772,6 +776,9 @@ function handleButtons() {
chatButton.onclick = () => {
rc.toggleChat();
};
chatGhostButton.onclick = (e) => {
rc.chatToggleBg();
};
chatCleanButton.onclick = () => {
rc.chatClean();
};
@@ -868,6 +875,9 @@ function handleButtons() {
whiteboardButton.onclick = () => {
toggleWhiteboard();
};
whiteboardGhostButton.onclick = (e) => {
wbToggleBg();
};
whiteboardPencilBtn.onclick = () => {
whiteboardIsDrawingMode(true);
};
@@ -1585,6 +1595,15 @@ function whiteboardAction(data, emit = true) {
}
}
function wbToggleBg(e) {
wbIsBgTransparent = !wbIsBgTransparent;
if (wbIsBgTransparent) {
document.documentElement.style.setProperty('--wb-bg', 'rgba(0, 0, 0, 0.100)');
} else {
setTheme(currentTheme);
}
}
// ####################################################
// HANDLE PARTICIPANTS
// ####################################################
@@ -1767,6 +1786,7 @@ function setTheme(theme) {
swalBackground = 'radial-gradient(#393939, #000000)';
document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#393939, #000000)');
document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#393939, #000000)');
document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#393939, #000000)');
document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#393939, #000000)');
document.body.style.background = 'radial-gradient(#393939, #000000)';
break;
@@ -1774,11 +1794,15 @@ function setTheme(theme) {
swalBackground = 'radial-gradient(#666, #333)';
document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#666, #333)');
document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#666, #333)');
document.documentElement.style.setProperty('--settings-bg', 'radial-gradient(#666, #333)');
document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#797979, #000)');
document.body.style.background = 'radial-gradient(#666, #333)';
break;
//...
}
currentTheme = theme;
wbIsBgTransparent = false;
rc.isChatBgTransparent = false;
}
// ####################################################

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

@@ -30,6 +30,9 @@ const html = {
sendMsg: 'fas fa-paper-plane',
sendVideo: 'fab fa-youtube',
kickOut: 'fas fa-times',
ghost: 'fas fa-ghost',
undo: 'fas fa-undo',
bg: 'fas fa-circle-half-stroke',
};
const image = {
@@ -149,6 +152,7 @@ class RoomClient {
this.isVideoOnFullScreen = false;
this.isChatOpen = false;
this.isChatEmojiOpen = false;
this.isChatBgTransparent = false;
this.camVideo = false;
this.camera = 'user';
@@ -2072,6 +2076,15 @@ class RoomClient {
});
}
chatToggleBg() {
this.isChatBgTransparent = !this.isChatBgTransparent;
if (this.isChatBgTransparent) {
document.documentElement.style.setProperty('--msger-bg', 'rgba(0, 0, 0, 0.100)');
} else {
setTheme(currentTheme);
}
}
chatClean() {
Swal.fire({
background: swalBackground,

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

@@ -320,6 +320,7 @@
<button id="whiteboardCloseBtn" class="fas fa-times"></button>
</div>
<div class="whiteboard-header-options">
<button id="whiteboardGhostButton" class="fas fa-circle-half-stroke"></button>
<input id="wbBackgroundColorEl" class="whiteboardColorPicker" type="color" value="#000000" />
<input id="wbDrawingColorEl" class="whiteboardColorPicker" type="color" value="#FFFFFF" />
<button id="whiteboardPencilBtn" class="fas fa-pencil-alt"></button>
@@ -347,6 +348,7 @@
<header id="chatHeader" class="chat-header">
<div class="chat-header-title"><i class="fas fa-comment-alt"></i>&nbsp; Chat</div>
<div class="chat-header-options">
<button id="chatGhostButton" class="fas fa-circle-half-stroke"></button>
<button id="chatSaveButton" class="fas fa-save"></button>
<button id="chatCleanButton" class="fas fa-trash"></button>
<button id="chatCloseButton" class="fas fa-times"></button>