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

[mirotalk] - improve UI, update dep

Browse Source
This commit is contained in:
Miroslav Pejic
2024-10-31 22:09:05 +01:00
parent 2794024439
commit c70e0b13ed
6 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/server.js
+1 -1
View File
@@ -39,7 +39,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.3.84
* @version 1.3.85
*
*/
package.json
+6 -6
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.3.84",
"version": "1.3.85",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -42,10 +42,10 @@
"homepage": "https://github.com/miroslavpejic85/mirotalk",
"dependencies": {
"@mattermost/client": "^10.0.0",
"@sentry/node": "^8.35.0",
"@sentry/node": "^8.36.0",
"axios": "^1.7.7",
"colors": "^1.4.0",
"compression": "^1.7.4",
"compression": "^1.7.5",
"cors": "^2.8.5",
"crypto-js": "^4.2.0",
"dotenv": "^16.4.5",
@@ -54,12 +54,12 @@
"jsonwebtoken": "^9.0.2",
"js-yaml": "^4.1.0",
"ngrok": "^5.0.0-beta.2",
"nodemailer": "^6.9.15",
"openai": "^4.68.4",
"nodemailer": "^6.9.16",
"openai": "^4.69.0",
"qs": "^6.13.0",
"socket.io": "^4.8.1",
"swagger-ui-express": "^5.0.1",
"uuid": "11.0.0",
"uuid": "11.0.2",
"xss": "^1.0.15"
},
"devDependencies": {
public/css/client.css
+7 -1
View File
@@ -316,7 +316,7 @@ body {
}
#bottomButtons button {
width: 48px;
width: 50px;
padding: 10px;
font-size: 1.5rem;
@@ -990,6 +990,12 @@ button:hover {
#mySettings {
width: 90%;
}
#bottomButtons button {
width: 42px;
padding: 10px;
font-size: 1rem;
}
}
#mySettingsHeader {
public/css/videoGrid.css
+4 -5
View File
@@ -109,17 +109,16 @@
.videoPeerName {
z-index: 8;
position: absolute;
right: 0;
padding: 10px;
margin: 10px;
bottom: 0;
right: 0;
color: #fff;
font-size: 12px;
display: flex;
align-items: center;
margin: 5px;
width: auto;
height: 25px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.1);
background: var(--body-bg);
}
/*--------------------------------------------------------------
public/js/client.js
+19 -5
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.3.84
* @version 1.3.85
*
*/
@@ -244,6 +244,7 @@ const shareRoomBtn = getId('shareRoomBtn');
const hideMeBtn = getId('hideMeBtn');
const videoBtn = getId('videoBtn');
const swapCameraBtn = getId('swapCameraBtn');
const toggleExtraBtn = getId('toggleExtraBtn');
const audioBtn = getId('audioBtn');
const screenShareBtn = getId('screenShareBtn');
const recordStreamBtn = getId('recordStreamBtn');
@@ -882,6 +883,7 @@ function refreshMainButtonsToolTipPlacement() {
setTippy(aboutBtn, 'About this project', placement);
setTippy(hideMeBtn, 'Toggle hide myself from the room view', bottomButtonsPlacement);
setTippy(toggleExtraBtn, 'Toggle extra buttons', bottomButtonsPlacement);
setTippy(audioBtn, useAudio ? 'Stop the audio' : 'My audio is disabled', bottomButtonsPlacement);
setTippy(videoBtn, useVideo ? 'Stop the video' : 'My video is disabled', bottomButtonsPlacement);
setTippy(screenShareBtn, 'Start screen sharing', bottomButtonsPlacement);
@@ -1262,7 +1264,7 @@ async function handleConnect() {
getHtmlElementsById();
setButtonsToolTip();
handleUsernameEmojiPicker();
manageLeftButtons();
manageButtons();
handleButtonsRule();
setupMySettings();
loadSettingsFromLocalStorage();
@@ -4429,9 +4431,10 @@ function refreshMyAudioStatus(localAudioMediaStream) {
/**
* Handle WebRTC left buttons
*/
function manageLeftButtons() {
function manageButtons() {
setShareRoomBtn();
setHideMeButton();
setToggleExtraButtons();
setAudioBtn();
setVideoBtn();
setSwapCameraBtn();
@@ -4474,6 +4477,17 @@ function setHideMeButton() {
});
}
/**
* Toggle extra buttons
*/
function setToggleExtraButtons() {
toggleExtraBtn.addEventListener('click', (e) => {
buttonsBar.style.display == 'none' || buttonsBar.style.display == ''
? elemDisplay(buttonsBar, true, 'flex')
: elemDisplay(buttonsBar, false);
});
}
/**
* Audio mute - unmute button click event
*/
@@ -5994,7 +6008,7 @@ function showButtonsBarAndMenu() {
)
return;
toggleClassElements('navbar', 'block');
elemDisplay(buttonsBar, true, 'flex');
//elemDisplay(buttonsBar, true, 'flex');
elemDisplay(bottomButtons, true, 'flex');
isButtonsVisible = true;
}
@@ -10569,7 +10583,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: '<strong>WebRTC P2P v1.3.84</strong>',
title: '<strong>WebRTC P2P v1.3.85</strong>',
imageAlt: 'mirotalk-about',
imageUrl: images.about,
customClass: { image: 'img-about' },
public/views/client.html
+1
View File
@@ -135,6 +135,7 @@ access to use this app.
<!-- Start bottom buttons -->
<div id="bottomButtons" class="fadein">
<button id="toggleExtraBtn" class="fas fa-bars"></button>
<button id="audioBtn" class="fas fa-microphone"></button>
<button id="videoBtn" class="fas fa-video"></button>
<button id="swapCameraBtn" class="fas fa-camera-rotate"></button>