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

* 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>

webroot/js/app.js

@@ -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
     ) {
-      this.handleSpaceBarPressed(e);
+      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);
+      }
     }
   }