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 = (
+
+
+ {percentage}
+ {'%'}
+
+
+ );
+
+ 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(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) {