Skip to content

Commit

Permalink
[mirotalk] - add keyboard shortcuts
Browse files Browse the repository at this point in the history
  • Loading branch information
miroslavpejic85 committed Jan 8, 2025
1 parent 04e15e6 commit b8d7fa0
Show file tree
Hide file tree
Showing 6 changed files with 197 additions and 8 deletions.
2 changes: 1 addition & 1 deletion app/src/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at [email protected] or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - [email protected]
* @version 1.4.37
* @version 1.4.38
*
*/

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
38 changes: 35 additions & 3 deletions public/css/client.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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
--------------------------------------------------------------*/
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -2009,6 +2037,10 @@ hr {
# Common
--------------------------------------------------------------*/

/* strong {
color: #007bff;
} */

.ml-10 {
margin: 10px;
}
Expand Down
79 changes: 77 additions & 2 deletions public/js/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at [email protected] or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - [email protected]
* @version 1.4.37
* @version 1.4.38
*
*/

Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -627,6 +629,7 @@ let isKeepButtonsVisible = false;
let isAudioPitchBar = true;
let isPushToTalkActive = false;
let isSpaceDown = false;
let isShortcutsEnabled = false;

// recording
let mediaRecorder;
Expand Down Expand Up @@ -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');
});
Expand Down Expand Up @@ -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}`);
}
});
}
}

/**
Expand All @@ -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;
Expand Down Expand Up @@ -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' },
Expand Down
1 change: 1 addition & 0 deletions public/js/localStorage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
83 changes: 82 additions & 1 deletion public/views/client.html
Original file line number Diff line number Diff line change
Expand Up @@ -346,6 +346,9 @@ <h1>Loading</h1>
<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>
Expand All @@ -359,7 +362,7 @@ <h1>Loading</h1>

<div class="tabActions">
<div id="tabRoom" class="tabcontent">
<table class="settingsTable">
<table class="mySettingsTable">
<tr>
<td>
<div class="title">
Expand Down Expand Up @@ -737,6 +740,84 @@ <h1>Loading</h1>
</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>
Expand Down

0 comments on commit b8d7fa0

Please sign in to comment.