From 6b8554517c26f9ff651c4c05aa1d38af180cb4ed Mon Sep 17 00:00:00 2001
From: r0ckinn <lbry@r0ckinn.anonaddy.me>
Date: Fri, 19 Mar 2021 17:18:39 -0300
Subject: [PATCH] also add keybinds for volume

---
 .../viewers/videoViewer/internal/overlays.js  | 19 +++++++++++++++++++
 .../viewers/videoViewer/internal/videojs.jsx  | 16 +++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/ui/component/viewers/videoViewer/internal/overlays.js b/ui/component/viewers/videoViewer/internal/overlays.js
index b45e6843d..edf2c121e 100644
--- a/ui/component/viewers/videoViewer/internal/overlays.js
+++ b/ui/component/viewers/videoViewer/internal/overlays.js
@@ -97,3 +97,22 @@ export function showSeekedOverlay(player, duration, isForward) {
 
   showOneOffOverlay(player, OVERLAY_CLASS_SEEKED, overlayJsx, 'center');
 }
+
+/**
+ * Displays a transient "Volume Percentage" overlay.
+ *
+ * @param player The videojs instance.
+ * @param percentage how much % of volume active.
+ */
+export function showVolumeverlay(player, percentage) {
+  const overlayJsx = (
+    <div>
+      <p>
+        {percentage}
+        {'%'}
+      </p>
+    </div>
+  );
+
+  showOneOffOverlay(player, OVERLAY_CLASS_SEEKED, overlayJsx, 'center');
+}
diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index 3dc236154..bedaa2005 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -86,18 +86,22 @@ const SMALL_F_KEYCODE = 70;
 const SMALL_M_KEYCODE = 77;
 const SMALL_T_KEYCODE = 84;
 const ARROW_LEFT_KEYCODE = 37;
+const ARROW_UP_KEYCODE = 38;
 const ARROW_RIGHT_KEYCODE = 39;
+const ARROW_DOWN_KEYCODE = 40;
 const COMMA_KEYCODE = 188;
 const PERIOD_KEYCODE = 190;
 const SMALL_J_KEYCODE = 74;
 const SMALL_K_KEYCODE = 75;
 const SMALL_L_KEYCODE = 76;
 
-
 const FULLSCREEN_KEYCODE = SMALL_F_KEYCODE;
 const MUTE_KEYCODE = SMALL_M_KEYCODE;
 const THEATER_MODE_KEYCODE = SMALL_T_KEYCODE;
 
+const VOLUME_UP_KEYCODE = ARROW_UP_KEYCODE;
+const VOLUME_DOWN_KEYCODE = ARROW_DOWN_KEYCODE;
+
 const SEEK_FORWARD_KEYCODE = SMALL_L_KEYCODE;
 const SEEK_BACKWARD_KEYCODE = SMALL_J_KEYCODE;
 const SEEK_FORWARD_KEYCODE_5 = ARROW_RIGHT_KEYCODE;
@@ -358,6 +362,16 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     if (e.keyCode === MUTE_KEYCODE) {
       videoNode.muted = !videoNode.muted;
     }
+    if (e.keyCode === VOLUME_DOWN_KEYCODE) {
+      player.volume(player.volume()-0.05);
+      OVERLAY.showVolumeverlay(player, Math.round(player.volume()*100));
+      player.userActive(true);
+    } 
+    if (e.keyCode === VOLUME_UP_KEYCODE) {
+      player.volume(player.volume()+0.05);
+      OVERLAY.showVolumeverlay(player, Math.round(player.volume()*100));
+      player.userActive(true);
+    }
 
     // Seeking Shortcuts
     if (!e.altKey) {