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

[mirotalk] - add keyboard shortcuts

Browse Source
This commit is contained in:
Miroslav Pejic
2025-01-08 23:14:10 +01:00
parent 04e15e627e
commit b8d7fa0f76
6 changed files with 197 additions and 8 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.4.37
* @version 1.4.38
*
*/
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.4.37",
"version": "1.4.38",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/client.css
+35 -3
View File
@@ -1081,8 +1081,6 @@ button:hover {
}
.extra-info-container {
min-height: 175px;
max-height: 175px;
margin-top: 15px;
border-radius: 5px;
background: var(--body-bg);
@@ -1210,6 +1208,36 @@ th {
width: 160px;
}
/*--------------------------------------------------------------
# Shortcut Table
--------------------------------------------------------------*/
#shortcutsTable {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
text-align: left;
color: #fff;
border-radius: 10px;
background: var(--body-bg);
}
#shortcutsTable th,
#shortcutsTable td {
border: var(--border);
padding: 5px;
}
#shortcutsTable th {
background: var(--body-bg);
font-weight: bold;
}
#shortcutsTable td i {
color: #007bff;
}
#shortcutsTable tr:nth-child(even) {
background: var(--body-bg);
}
/*--------------------------------------------------------------
# Style the tab
--------------------------------------------------------------*/
@@ -1281,7 +1309,7 @@ th {
margin-top: 15px;
padding: 6px 12px;
width: 100%;
max-height: 530px;
max-height: 585px;
min-height: 480px;
border-top: none;
background-color: var(--body-bg);
@@ -2009,6 +2037,10 @@ hr {
# Common
--------------------------------------------------------------*/
/* strong {
color: #007bff;
} */
.ml-10 {
margin: 10px;
}
public/js/client.js
+77 -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.4.37
* @version 1.4.38
*
*/
@@ -311,6 +311,7 @@ const tabVideoShareBtn = getId('tabVideoShareBtn');
const tabRecordingBtn = getId('tabRecordingBtn');
const tabParticipantsBtn = getId('tabParticipantsBtn');
const tabProfileBtn = getId('tabProfileBtn');
const tabShortcutsBtn = getId('tabShortcutsBtn');
const tabNetworkBtn = getId('tabNetworkBtn');
const networkIP = getId('networkIP');
const networkHost = getId('networkHost');
@@ -358,6 +359,7 @@ const tabEmailInvitation = getId('tabEmailInvitation');
const isPeerPresenter = getId('isPeerPresenter');
const peersCount = getId('peersCount');
const screenFpsDiv = getId('screenFpsDiv');
const switchShortcuts = getId('switchShortcuts');
// Audio options
const dropDownMicOptions = getId('dropDownMicOptions');
@@ -627,6 +629,7 @@ let isKeepButtonsVisible = false;
let isAudioPitchBar = true;
let isPushToTalkActive = false;
let isSpaceDown = false;
let isShortcutsEnabled = false;
// recording
let mediaRecorder;
@@ -5439,6 +5442,9 @@ function setupMySettings() {
tabProfileBtn.addEventListener('click', (e) => {
openTab(e, 'tabProfile');
});
tabShortcutsBtn.addEventListener('click', (e) => {
openTab(e, 'tabShortcuts');
});
tabNetworkBtn.addEventListener('click', (e) => {
openTab(e, 'tabNetwork');
});
@@ -5622,6 +5628,73 @@ function setupMySettings() {
unlockRoomBtn.addEventListener('click', (e) => {
handleRoomAction({ action: 'unlock' }, true);
});
// handle Shortcuts
if (!isDesktopDevice) {
elemDisplay(tabShortcutsBtn, false);
} else {
switchShortcuts.addEventListener('change', (e) => {
isShortcutsEnabled = e.currentTarget.checked;
lsSettings.keyboard_shortcuts = isShortcutsEnabled;
lS.setSettings(lsSettings);
const status = isShortcutsEnabled ? 'enabled' : 'disabled';
userLog('toast', `Keyboard shortcuts ${status}`);
playSound('switch');
});
document.addEventListener('keydown', (event) => {
if (!isShortcutsEnabled || isChatRoomVisible || wbIsOpen) return;
const key = event.key.toLowerCase(); // Convert to lowercase for simplicity
console.log(`Detected shortcut: ${key}`);
switch (key) {
case 'a':
audioBtn.click();
break;
case 'v':
videoBtn.click();
break;
case 's':
screenShareBtn.click();
break;
case 'r':
recordStreamBtn.click();
break;
case 'h':
myHandBtn.click();
break;
case 'c':
chatRoomBtn.click();
break;
case 'o':
mySettingsBtn.click();
break;
case 'k':
captionBtn.click();
break;
case 'w':
whiteboardBtn.click();
break;
case 'e':
roomEmojiPickerBtn.click();
break;
case 'x':
hideMeBtn.click();
break;
case 't':
snapshotRoomBtn.click();
break;
case 'f':
fileShareBtn.click();
break;
//...
default:
console.log(`Unhandled shortcut key: ${key}`);
}
});
}
}
/**
@@ -5642,11 +5715,13 @@ function loadSettingsFromLocalStorage() {
isKeepButtonsVisible = lsSettings.keep_buttons_visible;
isAudioPitchBar = lsSettings.pitch_bar;
recPrioritizeH264 = lsSettings.rec_prioritize_h264;
isShortcutsEnabled = lsSettings.keyboard_shortcuts;
switchSounds.checked = notifyBySound;
switchShare.checked = notify;
switchKeepButtonsVisible.checked = isKeepButtonsVisible;
switchAudioPitchBar.checked = isAudioPitchBar;
switchH264Recording.checked = recPrioritizeH264;
switchShortcuts.checked = isShortcutsEnabled;
themeCustom.check.checked = themeCustom.keep;
themeSelect.disabled = themeCustom.keep;
@@ -10843,7 +10918,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: '<strong>WebRTC P2P v1.4.37</strong>',
title: '<strong>WebRTC P2P v1.4.38</strong>',
imageAlt: 'mirotalk-about',
imageUrl: images.about,
customClass: { image: 'img-about' },
public/js/localStorage.js
+1
View File
@@ -30,6 +30,7 @@ class LocalStorage {
pitch_bar: true,
sounds: true,
keep_buttons_visible: false,
keyboard_shortcuts: false,
video_obj_fit: 2, // cover
theme: 0, // dark
theme_color: '#000000', // custom theme color
public/views/client.html
+82 -1
View File
@@ -346,6 +346,9 @@ access to use this app.
<button id="tabProfileBtn" class="fa-solid fa-user tablinks">
<p class="tabButtonText">Profile</p>
</button>
<button id="tabShortcutsBtn" class="fas fa-keyboard tablinks">
<p class="tabButtonText">Shortcuts</p>
</button>
<button id="tabNetworkBtn" class="fa-solid fa-network-wired tablinks">
<p class="tabButtonText">Network</p>
</button>
@@ -359,7 +362,7 @@ access to use this app.
<div class="tabActions">
<div id="tabRoom" class="tabcontent">
<table class="settingsTable">
<table class="mySettingsTable">
<tr>
<td>
<div class="title">
@@ -737,6 +740,84 @@ access to use this app.
</div>
</div>
<div id="tabShortcuts" class="tabcontent">
<table class="mySettingsTable">
<tr>
<td class="width-160">
<div class="title">
<i class="fa-solid fa-keyboard"></i>
<p>Keyboard shortcuts</p>
</div>
</td>
<td><input class="toggle" id="switchShortcuts" type="checkbox" /></td>
</tr>
</table>
<div>
<table id="shortcutsTable">
<thead>
<tr>
<th>Shortcut</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fa-solid fa-a"></i></td>
<td><strong>Mute/Unmute</strong> your microphone</td>
</tr>
<tr>
<td><i class="fa-solid fa-v"></i></td>
<td><strong>Start/Stop</strong> your camera</td>
</tr>
<tr>
<td><i class="fa-solid fa-s"></i></td>
<td><strong>Start/Stop</strong> your screen</td>
</tr>
<tr>
<td><i class="fa-solid fa-r"></i></td>
<td><strong>Start/Stop</strong> the recording</td>
</tr>
<tr>
<td><i class="fa-solid fa-h"></i></td>
<td><strong>Raise/Lower</strong> your hand</td>
</tr>
<tr>
<td><i class="fa-solid fa-c"></i></td>
<td><strong>Open/Close</strong> the chat</td>
</tr>
<tr>
<td><i class="fa-solid fa-o"></i></td>
<td><strong>Open/Close</strong> the settings</td>
</tr>
<tr>
<td><i class="fa-solid fa-k"></i></td>
<td><strong>Open/Close</strong> the captions</td>
</tr>
<tr>
<td><i class="fa-solid fa-w"></i></td>
<td><strong>Open/Close</strong> the whiteboard</td>
</tr>
<tr>
<td><i class="fa-solid fa-e"></i></td>
<td><strong>Open/Close</strong> the emoji</td>
</tr>
<tr>
<td><i class="fa-solid fa-x"></i></td>
<td><strong>Hide/Show</strong> myself</td>
</tr>
<tr>
<td><i class="fa-solid fa-t"></i></td>
<td><strong>Snapshot</strong> screen/window or tab</td>
</tr>
<tr>
<td><i class="fa-solid fa-f"></i></td>
<td><strong>Share</strong> the file</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="tabProfile" class="tabcontent">
<div id="tabRoomPeerName">
<div>