LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Added some basic keyboard controls to the owncast frontend (#804)

Browse Source 
* added f and m keys

* added more keys and volume control

* added p for play and c for chatview toggle

* remove vscode auto format

* changed e.target check to not trigger kb-controls if input is in focus

* fixed the default mute problem

* Commit updated API documentation

* merged keydown and keypressed methods

Co-authored-by: Owncast <owncast@owncast.online>
This commit is contained in:
Thilo Billerbeck 2021-04-01 23:09:02 +02:00 committed by GitHub
parent 20d8eed764
commit d4d738a8ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
doc/api/index.html
View File

File diff suppressed because one or more lines are too long

55
webroot/js/app.js
View File

@ -101,7 +101,6 @@ export default class App extends Component {
this.disableChatInput = this.disableChatInput.bind(this);
this.setCurrentStreamDuration = this.setCurrentStreamDuration.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleKeyPressed = this.handleKeyPressed.bind(this);
this.displayExternalAction = this.displayExternalAction.bind(this);
this.closeExternalActionModal = this.closeExternalActionModal.bind(this);
@ -127,7 +126,6 @@ export default class App extends Component {
if (this.hasTouchScreen) {
window.addEventListener('orientationchange', this.handleWindowResize);
}
window.addEventListener('keydown', this.handleKeyDown);
window.addEventListener('keypress', this.handleKeyPressed);
this.player = new OwncastPlayer();
this.player.setupPlayerCallbacks({
@ -149,7 +147,6 @@ export default class App extends Component {
window.removeEventListener('resize', this.handleWindowResize);
window.removeEventListener('blur', this.handleWindowBlur);
window.removeEventListener('focus', this.handleWindowFocus);
window.removeEventListener('keydown', this.handleKeyDown);
window.removeEventListener('keypress', this.handleKeyPressed);
if (this.hasTouchScreen) {
window.removeEventListener('orientationchange', this.handleWindowResize);
@ -396,19 +393,59 @@ export default class App extends Component {
}
}
handleKeyDown(e) {
if (e.code === 'Escape' && this.state.externalAction !== null) {
this.closeExternalActionModal();
handleMuteKeyPressed() {
const muted = this.player.vjsPlayer.muted();
const volume = this.player.vjsPlayer.volume();
if (volume === 0) {
this.player.vjsPlayer.volume(0.5);
this.player.vjsPlayer.muted(false);
} else {
this.player.vjsPlayer.muted(!muted);
}
}
handleFullScreenKeyPressed() {
if (this.player.vjsPlayer.isFullscreen()) {
this.player.vjsPlayer.exitFullscreen();
} else {
this.player.vjsPlayer.requestFullscreen();
}
}
handleVolumeSet(factor) {
this.player.vjsPlayer.volume(this.player.vjsPlayer.volume() + factor);
}
handleKeyPressed(e) {
if (
e.code === 'Space' &&
e.target === document.body &&
if (e.code === 'Escape' && this.state.externalAction !== null) {
this.closeExternalActionModal();
} else if (
e.target !== document.getElementById('message-input') &&
e.target !== document.getElementById('username-change-input') &&
this.state.streamOnline
) {
switch (e.code) {
case 'MediaPlayPause':
case 'KeyP':
case 'Space':
this.handleSpaceBarPressed(e);
break;
case 'KeyM':
this.handleMuteKeyPressed(e);
break;
case 'KeyF':
this.handleFullScreenKeyPressed(e);
break;
case 'KeyC':
this.handleChatPanelToggle();
break;
case 'Digit9':
this.handleVolumeSet(-0.1);
break;
case 'Digit0':
this.handleVolumeSet(0.1);
}
}
}