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

[mirotalk] - improve init UI

Browse Source
This commit is contained in:
Miroslav Pejic
2023-12-25 21:45:32 +01:00
parent efc687bc29
commit 73ab758f50
6 changed files with 54 additions and 27 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.63
* @version 1.2.64
*
*/
package.json
+4 -4
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.2.63",
"version": "1.2.64",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -34,8 +34,8 @@
"license": "AGPL-3.0",
"homepage": "https://github.com/miroslavpejic85/mirotalk",
"dependencies": {
"@sentry/integrations": "^7.88.0",
"@sentry/node": "^7.88.0",
"@sentry/integrations": "^7.91.0",
"@sentry/node": "^7.91.0",
"axios": "^1.6.2",
"body-parser": "^1.20.2",
"colors": "^1.4.0",
@@ -45,7 +45,7 @@
"dotenv": "^16.3.1",
"express": "^4.18.2",
"ngrok": "^4.3.3",
"openai": "^4.23.0",
"openai": "^4.24.1",
"qs": "^6.11.2",
"socket.io": "^4.7.2",
"swagger-ui-express": "^5.0.0",
public/css/client.css
+35 -5
View File
@@ -144,11 +144,41 @@ body {
# Init User
--------------------------------------------------------------*/
.init-modal-size {
width: 1024px !important;
height: auto !important;
}
.init-user {
display: block;
display: flex;
padding: 5px;
}
.init-video-container {
position: relative;
padding: 10px;
width: 100%;
}
.init-video-container video {
z-index: 0;
position: relative;
height: 240px;
}
.initComands {
width: 100%;
}
@media screen and (max-width: 1024px) {
.init-modal-size {
width: auto !important;
}
.init-user {
display: block;
}
}
.init-user select {
display: block;
width: 100%;
@@ -163,15 +193,15 @@ body {
}
.init-user button {
margin-top: 20px;
margin-bottom: 10px;
width: 50px;
padding: 10px;
background: transparent;
margin-top: 20px;
margin-bottom: 10px;
font-size: 1.5rem;
color: white;
border: var(--border);
border-radius: 5px;
color: white;
background-color: transparent;
}
.init-user button:hover {
public/css/videoGrid.css
-9
View File
@@ -115,15 +115,6 @@
# Video
--------------------------------------------------------------*/
.container {
position: relative;
}
.container video {
z-index: 0;
position: relative;
height: 240px;
}
.videoCircle {
position: absolute;
width: var(--vmi-wh);
public/js/client.js
+5 -1
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.63
* @version 1.2.64
*
*/
@@ -215,6 +215,7 @@ const audioMediaContainer = getId('audioMediaContainer');
// Init audio-video
const initUser = getId('initUser');
const initVideoContainer = getId('initVideoContainer');
const initVideo = getId('initVideo');
const initVideoBtn = getId('initVideoBtn');
const initAudioBtn = getId('initAudioBtn');
@@ -1355,6 +1356,7 @@ async function whoAreYou() {
inputValue: window.localStorage.peer_name ? window.localStorage.peer_name : '',
html: initUser, // inject html
confirmButtonText: `Join meeting`,
customClass: { popup: 'init-modal-size' },
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
inputValidator: async (value) => {
@@ -5270,6 +5272,8 @@ async function handleVideo(e, init, force = null) {
initVideoBtn.className = videoClassName;
setTippy(initVideoBtn, videoStatus ? 'Stop the video' : 'Start the video', 'top');
videoStatus ? elemDisplay(initVideo, true, 'block') : elemDisplay(initVideo, false);
initVideoContainer.style.padding = videoStatus ? '10px' : '0px';
initVideoContainer.style.width = videoStatus ? '100%' : 'auto';
initVideoSelect.disabled = !videoStatus;
lS.setInitConfig(lS.MEDIA_TYPE.video, videoStatus);
}
public/views/client.html
+9 -7
View File
@@ -81,7 +81,7 @@ access to use this app.
<div id="initUser" class="init-user hidden">
<!-- <p>Please allow the camera & microphone access to use this app.</p> -->
<div class="container">
<div id="initVideoContainer" class="init-video-container">
<video
id="initVideo"
playsinline="true"
@@ -91,12 +91,14 @@ access to use this app.
style="object-fit: contain"
></video>
</div>
<button id="initVideoBtn" class="fas fa-video" onclick="handleVideo(event, true)"></button>
<button id="initAudioBtn" class="fas fa-microphone" onclick="handleAudio(event, true)"></button>
<button id="initScreenShareBtn" class="fas fa-desktop"></button>
<select id="initVideoSelect" class="form-select text-light bg-dark"></select>
<select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
<select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
<div class="initComands">
<button id="initVideoBtn" class="fas fa-video" onclick="handleVideo(event, true)"></button>
<button id="initAudioBtn" class="fas fa-microphone" onclick="handleAudio(event, true)"></button>
<button id="initScreenShareBtn" class="fas fa-desktop"></button>
<select id="initVideoSelect" class="form-select text-light bg-dark"></select>
<select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
<select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>
</div>
</div>
<!-- Start buttons bar https://fontawesome.com/icons?d=gallery -->