aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - add custom theme, update dep

Browse Source
This commit is contained in:
Miroslav Pejic
2024-02-07 21:41:30 +01:00
parent f696e182c3
commit f9a5673f81
7 changed files with 163 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/server.js
+1 -1
View File
@@ -38,7 +38,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.2.83
* @version 1.2.84
*
*/
package.json
+4 -4
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.2.83",
"version": "1.2.84",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -37,8 +37,8 @@
"license": "AGPL-3.0",
"homepage": "https://github.com/miroslavpejic85/mirotalk",
"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",
@@ -48,7 +48,7 @@
"dotenv": "^16.4.1",
"express": "^4.18.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",
public/css/client.css
+29 -1
View File
@@ -35,7 +35,7 @@
--hover-color: grey;
/* video elem border color */
--elem-border-color: none; /* 1px solid rgb(255 255 255 / 32%) */
--elem-border-color: none;
--tab-btn-active: rgb(30 29 29);
@@ -126,6 +126,7 @@ body {
text-align: center;
border-radius: 10px;
background: rgba(0, 0, 0, 0.7);
box-shadow: var(--box-shadow);
}
#loadingDiv h1 {
font-size: 60px;
@@ -949,6 +950,32 @@ button:hover {
/* font-weight: bold; */
}
.inline-check-box {
margin-bottom: 20px;
display: inline-flex;
justify-content: center; /* Vertical centering */
align-items: center; /* Horizontal centering */
text-align: left;
color: white;
}
#themeColorPicker {
z-index: 6;
padding: 10px;
margin-top: 10px;
margin-bottom: 20px;
width: 130px;
border: var(--border);
border-radius: 5px;
background: var(--select-bg);
color: white;
cursor: pointer;
}
#keepCustomTheme {
margin-bottom: 10px;
}
.buttons {
padding: 10px;
float: left;
@@ -1785,6 +1812,7 @@ button {
/*
z-index
6 theme custom picker
7 video avatar img
8 video nav bar
8 peer name
public/css/videoGrid.css
+1
View File
@@ -41,6 +41,7 @@
display: inline-block;
background: var(--body-bg);
border: var(--elem-border-color);
box-shadow: var(--box-shadow);
border-radius: 10px;
animation: show 0.4s ease;
}
public/js/client.js
+96 -2
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.2.83
* @version 1.2.84
*
*/
@@ -98,6 +98,7 @@ const icons = {
fileSend: '<i class="fas fa-file-export"></i>',
fileReceive: '<i class="fas fa-file-import"></i>',
codecs: '<i class="fa-solid fa-film"></i>',
theme: '<i class="fas fa-fill-drip"></i>',
};
// Whiteboard and fileSharing
@@ -502,6 +503,55 @@ const useAvatarSvg = true; // if false the cam-Off avatar = images.avatar
const ZOOM_CENTER_MODE = false;
const ZOOM_IN_OUT_ENABLED = true; // Video Zoom in/out default (true)
// Color Picker:
const themeCustom = {
input: getId('themeColorPicker'),
check: getId('keepCustomTheme'),
color: lsSettings.theme_color ? lsSettings.theme_color : '#000000',
keep: lsSettings.theme_custom ? lsSettings.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: {
preview: true,
opacity: true,
hue: true,
},
})
.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', () => {
lsSettings.theme_color = themeCustom.color;
lS.setSettings(lsSettings);
});
// misc
let swBg = 'rgba(0, 0, 0, 0.7)'; // swAlert background color
let callElapsedTime; // count time
@@ -2173,11 +2223,35 @@ function handleRemovePeer(config) {
console.log('ALL PEERS', allPeers);
}
/**
* Set custom theme
*/
function setCustomTheme() {
const color = themeCustom.color;
swBg = `radial-gradient(${color}, ${color})`;
setSP('--body-bg', `radial-gradient(${color}, ${color})`);
setSP('--msger-bg', `radial-gradient(${color}, ${color})`);
setSP('--msger-private-bg', `radial-gradient(${color}, ${color})`);
setSP('--wb-bg', `radial-gradient(${color}, ${color})`);
setSP('--elem-border-color', '0.5px solid rgb(255 255 255 / 32%)');
setSP('--navbar-bg', 'rgba(0, 0, 0, 0.2)');
setSP('--select-bg', `${color}`);
setSP('--tab-btn-active', `${color}`);
setSP('--box-shadow', '0px 8px 16px 0px rgba(0, 0, 0, 0.2)');
setSP('--left-msg-bg', '#252d31');
setSP('--right-msg-bg', `${color}`);
setSP('--private-msg-bg', '#6b1226');
setSP('--btn-bar-bg-color', '#FFFFFF');
setSP('--btn-bar-color', '#000000');
document.body.style.background = `radial-gradient(${color}, ${color})`;
}
/**
* Set mirotalk theme | dark | grey | ...
* @param {string} theme type
*/
function setTheme() {
if (themeCustom.keep) return setCustomTheme();
mirotalkTheme.selectedIndex = lsSettings.theme;
const theme = mirotalkTheme.value;
switch (theme) {
@@ -2188,6 +2262,7 @@ function setTheme() {
setSP('--msger-bg', 'radial-gradient(#393939, #000000)');
setSP('--msger-private-bg', 'radial-gradient(#393939, #000000)');
setSP('--wb-bg', 'radial-gradient(#393939, #000000)');
setSP('--elem-border-color', 'none');
setSP('--navbar-bg', 'rgba(0, 0, 0, 0.2)');
setSP('--select-bg', '#2c2c2c');
setSP('--tab-btn-active', 'rgb(30 29 29)');
@@ -2206,6 +2281,7 @@ function setTheme() {
setSP('--body-bg', 'radial-gradient(#666, #333)');
setSP('--msger-bg', 'radial-gradient(#666, #333)');
setSP('--wb-bg', 'radial-gradient(#797979, #000)');
setSP('--elem-border-color', 'none');
setSP('--navbar-bg', 'rgba(0, 0, 0, 0.2)');
setSP('--select-bg', '#2c2c2c');
setSP('--tab-btn-active', 'rgb(30 29 29)');
@@ -2225,6 +2301,7 @@ function setTheme() {
setSP('--body-bg', 'radial-gradient(#003934, #001E1A)');
setSP('--msger-bg', 'radial-gradient(#003934, #001E1A)');
setSP('--wb-bg', 'radial-gradient(#003934, #001E1A)');
setSP('--elem-border-color', 'none');
setSP('--navbar-bg', 'rgba(0, 0, 0, 0.2)');
setSP('--select-bg', '#001E1A');
setSP('--tab-btn-active', '#003934');
@@ -2244,6 +2321,7 @@ function setTheme() {
setSP('--body-bg', 'radial-gradient(#306bac, #141B41)');
setSP('--msger-bg', 'radial-gradient(#306bac, #141B41)');
setSP('--wb-bg', 'radial-gradient(#306bac, #141B41)');
setSP('--elem-border-color', 'none');
setSP('--navbar-bg', 'rgba(0, 0, 0, 0.2)');
setSP('--select-bg', '#141B41');
setSP('--tab-btn-active', '#306bac');
@@ -4626,6 +4704,18 @@ function setMySettingsBtn() {
resumeRecBtn.addEventListener('click', (e) => {
resumeRecording();
});
// Styles
themeCustom.check.onchange = (e) => {
themeCustom.keep = e.currentTarget.checked;
themeSelect.disabled = themeCustom.keep;
lsSettings.theme_custom = themeCustom.keep;
lsSettings.theme_color = themeCustom.color;
lS.setSettings(lsSettings);
setTheme();
userLog('toast', `${icons.theme} Custom theme keep ` + (themeCustom.keep ? 'ON' : 'OFF'));
playSound('switch');
e.target.blur();
};
}
/**
@@ -4876,6 +4966,10 @@ function loadSettingsFromLocalStorage() {
switchAudioPitchBar.checked = isAudioPitchBar;
switchH264Recording.checked = recPrioritizeH264;
themeCustom.check.checked = themeCustom.keep;
themeSelect.disabled = themeCustom.keep;
themeCustom.input.value = themeCustom.color;
switchAutoGainControl.checked = lsSettings.mic_auto_gain_control;
switchEchoCancellation.checked = lsSettings.mic_echo_cancellations;
switchNoiseSuppression.checked = lsSettings.mic_noise_suppression;
public/js/localStorage.js
+2
View File
@@ -31,6 +31,8 @@ class LocalStorage {
sounds: true,
video_obj_fit: 2, // cover
theme: 0, // dark
theme_color: '#000000', // custom theme color
theme_custom: false, // keep custom theme
buttons_bar: 0, // vertical
pin_grid: 0, // vertical
};
public/views/client.html
+30
View File
@@ -52,6 +52,15 @@
<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 -->
<!-- 'classic' theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css" />
<!-- 'monolith' theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css" />
<!-- 'nano' theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" />
<!-- JavaScripts -->
<script async src="../js/umami.js"></script>
@@ -712,6 +721,23 @@ access to use this app.
<option value="red">🔴 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="width-130">
<div class="title">
<i class="fas fa-save"></i>
<p>Keep custom</p>
</div>
</div>
<input id="keepCustomTheme" class="toggle" type="checkbox" />
</div>
<br />
<div class="title">
<i class="fa-solid fa-up-down-left-right"></i>
<p>Buttons bar</p>
@@ -889,6 +915,8 @@ access to use this app.
- https://www.jsdelivr.com/package/npm/crypto-js (https://github.com/brix/crypto-js/)
- https://www.npmjs.com/package/tippy.js (https://github.com/atomiks/tippyjs)
- https://flatpickr.js.org/ (https://github.com/flatpickr/flatpickr)
- https://simonwep.github.io/pickr/ (https://github.com/simonwep/pickr)
-->
<script defer src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script defer src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
@@ -904,6 +932,8 @@ access to use this app.
<script defer src="https://unpkg.com/@popperjs/core@2"></script>
<script defer src="https://unpkg.com/tippy.js@6"></script>
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<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>
<script defer src="/socket.io/socket.io.js"></script>
<script defer src="../js/localStorage.js"></script>
<script defer src="../js/helpers.js"></script>