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-03-04 22:40:29 +01:00
parent c26dbad83a
commit ac63b8bcc6
4 changed files with 56 additions and 13 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.2.95
* @version 1.2.96
*
*/
package.json
+4 -4
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.2.95",
"version": "1.2.96",
"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.103.0",
"@sentry/node": "^7.103.0",
"@sentry/integrations": "^7.105.0",
"@sentry/node": "^7.105.0",
"axios": "^1.6.7",
"body-parser": "^1.20.2",
"colors": "^1.4.0",
@@ -54,7 +54,7 @@
"socket.io": "^4.7.4",
"swagger-ui-express": "^5.0.0",
"uuid": "9.0.1",
"xss": "^1.0.14",
"xss": "^1.0.15",
"yamljs": "^0.3.0"
},
"devDependencies": {
public/css/videoGrid.css
+28 -1
View File
@@ -70,11 +70,38 @@
color: #fff;
}
.navbar div {
display: inline;
}
.navbar button:hover {
color: var(--hover-color);
cursor: pointer;
}
/*--------------------------------------------------------------
# Expand buttons
--------------------------------------------------------------*/
.expand-video-content {
position: relative;
display: none;
float: right;
width: auto;
}
.expand-video-content button {
display: none;
}
.expand-video:hover .expand-video-content {
display: inline;
}
.expand-video:hover .expand-video-content button {
display: inline;
}
/*--------------------------------------------------------------
# Peer name
--------------------------------------------------------------*/
@@ -85,7 +112,7 @@
right: 0;
bottom: 0;
color: #fff;
font-size: 14px;
font-size: 12px;
display: flex;
align-items: center;
margin: 5px;
public/js/client.js
+23 -7
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.95
* @version 1.2.96
*
*/
@@ -2961,6 +2961,11 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
const remotePitchBar = document.createElement('div');
const remoteAudioVolume = document.createElement('input');
// Expand button UI/UX
const remoteExpandBtnDiv = document.createElement('div');
const remoteExpandBtn = document.createElement('button');
const remoteExpandContainerDiv = document.createElement('div');
// remote peer name element
remotePeerName.setAttribute('id', peer_id + '_name');
remotePeerName.className = 'videoPeerName';
@@ -3068,6 +3073,12 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
// remote video nav bar
remoteVideoNavBar.className = 'navbar fadein';
// remote expand buttons div
remoteExpandBtnDiv.className = 'expand-video';
remoteExpandBtn.id = peer_id + '_videoExpandBtn';
remoteExpandBtn.className = 'fas fa-ellipsis-vertical';
remoteExpandContainerDiv.className = 'expand-video-content';
// attach to remote video nav bar
!isMobileDevice && remoteVideoNavBar.appendChild(remoteVideoPinBtn);
@@ -3075,10 +3086,18 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
buttons.remote.showVideoPipBtn && remoteVideoNavBar.appendChild(remoteVideoPiPBtn);
// Add to expand container div...
if (buttons.remote.showZoomInOutBtn) {
remoteVideoNavBar.appendChild(remoteVideoZoomInBtn);
remoteVideoNavBar.appendChild(remoteVideoZoomOutBtn);
remoteExpandContainerDiv.appendChild(remoteVideoZoomInBtn);
remoteExpandContainerDiv.appendChild(remoteVideoZoomOutBtn);
}
buttons.remote.showPrivateMessageBtn && remoteExpandContainerDiv.appendChild(remotePrivateMsgBtn);
buttons.remote.showFileShareBtn && remoteExpandContainerDiv.appendChild(remoteFileShareBtn);
buttons.remote.showShareVideoAudioBtn && remoteExpandContainerDiv.appendChild(remoteVideoAudioUrlBtn);
buttons.remote.showKickOutBtn && remoteExpandContainerDiv.appendChild(remotePeerKickOut);
remoteExpandBtnDiv.appendChild(remoteExpandBtn);
remoteExpandBtnDiv.appendChild(remoteExpandContainerDiv);
isVideoFullScreenSupported && remoteVideoNavBar.appendChild(remoteVideoFullScreenBtn);
@@ -3093,10 +3112,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
}
remoteVideoNavBar.appendChild(remoteHandStatusIcon);
buttons.remote.showPrivateMessageBtn && remoteVideoNavBar.appendChild(remotePrivateMsgBtn);
buttons.remote.showFileShareBtn && remoteVideoNavBar.appendChild(remoteFileShareBtn);
buttons.remote.showShareVideoAudioBtn && remoteVideoNavBar.appendChild(remoteVideoAudioUrlBtn);
buttons.remote.showKickOutBtn && remoteVideoNavBar.appendChild(remotePeerKickOut);
remoteVideoNavBar.appendChild(remoteExpandBtnDiv);
remoteMedia.setAttribute('id', peer_id + '___video');
remoteMedia.setAttribute('playsinline', true);