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

[mirotalksfu] - add custom theme, update dep

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2024-02-07 15:18:36 +01:00
الأصل c907559282
التزام 6e0d8a189f
7 ملفات معدلة مع 161 إضافات و8 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

2
app/src/Server.js
عرض الملف

@@ -40,7 +40,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.3.64
* @version 1.3.65
*
*/

8
package.json
عرض الملف

@@ -1,6 +1,6 @@
{
"name": "mirotalksfu",
"version": "1.3.64",
"version": "1.3.65",
"description": "WebRTC SFU browser-based video calls",
"main": "Server.js",
"scripts": {
@@ -38,8 +38,8 @@
"author": "Miroslav Pejic",
"license": "AGPL-3.0",
"dependencies": {
"@sentry/integrations": "7.99.0",
"@sentry/node": "7.99.0",
"@sentry/integrations": "7.100.1",
"@sentry/node": "7.100.1",
"axios": "^1.6.7",
"body-parser": "1.20.2",
"colors": "1.4.0",
@@ -51,7 +51,7 @@
"mediasoup": "3.13.18",
"mediasoup-client": "3.7.2",
"ngrok": "^4.3.3",
"openai": "^4.26.0",
"openai": "^4.26.1",
"qs": "6.11.2",
"socket.io": "4.7.4",
"swagger-ui-express": "5.0.0",

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

@@ -367,6 +367,15 @@ body {
color: white;
}
.inline-check-box {
margin-bottom: 20px;
display: inline-flex;
justify-content: center; /* Vertical centering */
align-items: center; /* Horizontal centering */
text-align: left;
color: white;
}
#recordingImage {
width: 128px;
height: auto;
@@ -553,6 +562,18 @@ th {
border-radius: 5px;
}
/*--------------------------------------------------------------
# Settings - dynamic colors picker
--------------------------------------------------------------*/
.theme-color-picker {
padding: 10px;
border: none;
border-radius: 5px;
margin-top: 10px;
margin-bottom: 20px;
}
/*--------------------------------------------------------------
# Settings - microphone volume indicator
--------------------------------------------------------------*/
@@ -871,7 +892,7 @@ th {
--------------------------------------------------------------*/
.dropdown-menu li:hover {
background: #000000;
background: var(--btns-bg-color);
}
/* Hide the default Bootstrap dropdown icon */

2
public/js/LocalStorage.js
عرض الملف

@@ -47,6 +47,8 @@ class LocalStorage {
video_obj_fit: 2, // cover
video_controls: 0, // off
theme: 0, // dark
theme_color: '#000000', // custom theme color
theme_custom: false, // keep custom theme
buttons_bar: 0, // vertical
pin_grid: 0, // vertical
};

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

@@ -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.3.64
* @version 1.3.65
*
*/
@@ -94,6 +94,71 @@ console.log('LOCAL_STORAGE', {
localStorageInitConfig: localStorageInitConfig,
});
// ####################################################
// THEME CUSTOM COLOR - PICKER
// ####################################################
const themeCustom = {
input: document.getElementById('themeColorPicker'),
color: localStorageSettings.theme_color ? localStorageSettings.theme_color : '#000000',
keep: localStorageSettings.theme_custom ? localStorageSettings.theme_custom : false,
};
const pickr = Pickr.create({
el: themeCustom.input,
theme: 'classic', // or 'monolith', or 'nano'
default: themeCustom.color,
useAsButton: true,
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)',
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: false,
rgba: false,
hsla: false,
hsva: false,
cmyk: false,
input: false,
clear: false,
save: false,
},
},
})
.on('init', (pickr) => {
themeCustom.input.value = pickr.getSelectedColor().toHEXA().toString(0);
})
.on('change', (color) => {
themeCustom.color = color.toHEXA().toString();
themeCustom.input.value = themeCustom.color;
setCustomTheme();
})
.on('changestop', (color) => {
localStorageSettings.theme_color = themeCustom.color;
lS.setSettings(localStorageSettings);
});
// ####################################################
// DYNAMIC SETTINGS
// ####################################################
@@ -1906,6 +1971,16 @@ function handleSelects() {
e.target.blur();
};
// styling
keepCustomTheme.onchange = (e) => {
themeCustom.keep = e.currentTarget.checked;
selectTheme.disabled = themeCustom.keep;
rc.roomMessage('customThemeKeep', themeCustom.keep);
localStorageSettings.theme_custom = themeCustom.keep;
localStorageSettings.theme_color = themeCustom.color;
lS.setSettings(localStorageSettings);
setTheme();
e.target.blur();
};
BtnAspectRatio.onchange = () => {
setAspectRatio(BtnAspectRatio.value);
};
@@ -2199,6 +2274,10 @@ function loadSettingsFromLocalStorage() {
recPrioritizeH264 = localStorageSettings.rec_prioritize_h264;
switchH264Recording.checked = recPrioritizeH264;
keepCustomTheme.checked = themeCustom.keep;
selectTheme.disabled = themeCustom.keep;
themeCustom.input.value = themeCustom.color;
switchAutoGainControl.checked = localStorageSettings.mic_auto_gain_control;
switchEchoCancellation.checked = localStorageSettings.mic_echo_cancellations;
switchNoiseSuppression.checked = localStorageSettings.mic_noise_suppression;
@@ -3406,7 +3485,25 @@ function getParticipantAvatar(peerName) {
// SET THEME
// ####################################################
function setCustomTheme() {
const color = themeCustom.color;
swalBackground = `radial-gradient(${color}, ${color})`;
document.documentElement.style.setProperty('--body-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--transcription-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--msger-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--left-msg-bg', `${color}`);
document.documentElement.style.setProperty('--right-msg-bg', `${color}`);
document.documentElement.style.setProperty('--select-bg', `${color}`);
document.documentElement.style.setProperty('--tab-btn-active', `${color}`);
document.documentElement.style.setProperty('--settings-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--wb-bg', `radial-gradient(${color}, ${color})`);
document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)');
document.body.style.background = `radial-gradient(${color}, ${color})`;
}
function setTheme() {
if (themeCustom.keep) return setCustomTheme();
selectTheme.selectedIndex = localStorageSettings.theme;
const theme = selectTheme.value;
switch (theme) {

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

@@ -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.3.64
* @version 1.3.65
*
*/
@@ -62,6 +62,7 @@ const icons = {
moderator: '<i class="fas fa-m"></i>',
broadcaster: '<i class="fa-solid fa-wifi"></i>',
codecs: '<i class="fa-solid fa-film"></i>',
theme: '<i class="fas fa-fill-drip"></i>',
};
const image = {
@@ -5027,6 +5028,9 @@ class RoomClient {
case 'recPrioritizeH264':
this.userLog('info', `${icons.codecs} Recording prioritize h.264 ${status}`, 'top-end');
break;
case 'customThemeKeep':
this.userLog('info', `${icons.theme} Custom theme keep ${status}`, 'top-end');
break;
default:
break;
}

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

@@ -54,6 +54,18 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" />
<!-- pickr https://github.com/simonwep/pickr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
<!-- 'classic' theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
<!-- 'monolith' theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />
<!-- 'nano' theme -->
<!-- Modern or es5 bundle -->
<script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
<!-- Bootstrap 5 -->
<link
@@ -906,6 +918,23 @@ access to use this app.
<option value="red">🔴 &nbsp;Red</option>
</select>
<br />
<div class="title">
<i class="fas fa-fill-drip"></i>
<p>Custom theme:</p>
</div>
<br />
<input id="themeColorPicker" class="theme-color-picker" type="text" />
<br />
<div class="inline-check-box">
<div class="custom-width">
<i class="fas fa-save"></i>
<p>Keep custom</p>
</div>
<div class="form-check form-switch form-switch-md title">
<input id="keepCustomTheme" class="form-check-input" type="checkbox" />
</div>
</div>
<br />
<div class="title">
<i class="fa-solid fa-up-down-left-right"></i>
<p>Buttons bar:</p>