LogalDeveloper/owncast
0
Fork 0
Code Activity

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
2 changed files with 62 additions and 25 deletions
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.disableChatInput = this.disableChatInput.bind(this);
this.setCurrentStreamDuration = this.setCurrentStreamDuration.bind(this); this.setCurrentStreamDuration = this.setCurrentStreamDuration.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleKeyPressed = this.handleKeyPressed.bind(this); this.handleKeyPressed = this.handleKeyPressed.bind(this);
this.displayExternalAction = this.displayExternalAction.bind(this); this.displayExternalAction = this.displayExternalAction.bind(this);
this.closeExternalActionModal = this.closeExternalActionModal.bind(this); this.closeExternalActionModal = this.closeExternalActionModal.bind(this);
@@ -127,7 +126,6 @@ export default class App extends Component {
if (this.hasTouchScreen) { if (this.hasTouchScreen) {
window.addEventListener('orientationchange', this.handleWindowResize); window.addEventListener('orientationchange', this.handleWindowResize);
} }
window.addEventListener('keydown', this.handleKeyDown);
window.addEventListener('keypress', this.handleKeyPressed); window.addEventListener('keypress', this.handleKeyPressed);
this.player = new OwncastPlayer(); this.player = new OwncastPlayer();
this.player.setupPlayerCallbacks({ this.player.setupPlayerCallbacks({
@@ -149,7 +147,6 @@ export default class App extends Component {
window.removeEventListener('resize', this.handleWindowResize); window.removeEventListener('resize', this.handleWindowResize);
window.removeEventListener('blur', this.handleWindowBlur); window.removeEventListener('blur', this.handleWindowBlur);
window.removeEventListener('focus', this.handleWindowFocus); window.removeEventListener('focus', this.handleWindowFocus);
window.removeEventListener('keydown', this.handleKeyDown);
window.removeEventListener('keypress', this.handleKeyPressed); window.removeEventListener('keypress', this.handleKeyPressed);
if (this.hasTouchScreen) { if (this.hasTouchScreen) {
window.removeEventListener('orientationchange', this.handleWindowResize); window.removeEventListener('orientationchange', this.handleWindowResize);
@@ -396,19 +393,59 @@ export default class App extends Component {
} }
} }
handleKeyDown(e) { handleMuteKeyPressed() {
if (e.code === 'Escape' && this.state.externalAction !== null) { const muted = this.player.vjsPlayer.muted();
this.closeExternalActionModal(); 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) { handleKeyPressed(e) {
if ( if (e.code === 'Escape' && this.state.externalAction !== null) {
e.code === 'Space' && this.closeExternalActionModal();
e.target === document.body && } else if (
e.target !== document.getElementById('message-input') &&
e.target !== document.getElementById('username-change-input') &&
this.state.streamOnline this.state.streamOnline
) { ) {
switch (e.code) {
case 'MediaPlayPause':
case 'KeyP':
case 'Space':
this.handleSpaceBarPressed(e); 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);
}
} }
} }