From 6084ca6395fbe3d5a97fa92137b8bb51f15c89f8 Mon Sep 17 00:00:00 2001
From: theodab <theodab@google.com>
Date: Thu, 19 May 2022 03:28:35 -0700
Subject: [PATCH] feat(UI): Added keyboardSeekDistance config to UI (#4246)

This new configuration value allows users to determine how far
the video seeks when you press the arrow keys on the video
element.

Closes #4245

<!--
Please remember to:

1. Use Conventional Commits syntax (fix: ..., feat: ..., etc.) in commits and
   PR title (https://www.conventionalcommits.org/)
2. Tag any related or fixed issues ("Issue #123", "Closes #420")
3. Sign the Google CLA if you haven't (https://cla.developers.google.com)

You may delete this comment from the PR description.
-->
---
 ui/controls.js   | 14 ++++++++------
 ui/externs/ui.js |  8 +++++++-
 ui/ui.js         |  1 +
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/ui/controls.js b/ui/controls.js
index 9008a0398d..d21b041d01 100644
--- a/ui/controls.js
+++ b/ui/controls.js
@@ -1260,21 +1260,23 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
       return;
     }
 
+    const keyboardSeekDistance = this.config_.keyboardSeekDistance;
+
     switch (event.key) {
       case 'ArrowLeft':
         // If it's not focused on the volume bar, move the seek time backward
-        // for 5 sec. Otherwise, the volume will be adjusted automatically.
-        if (this.seekBar_ && !isVolumeBar) {
+        // for a few sec. Otherwise, the volume will be adjusted automatically.
+        if (this.seekBar_ && !isVolumeBar && keyboardSeekDistance > 0) {
           event.preventDefault();
-          this.seek_(this.seekBar_.getValue() - 5);
+          this.seek_(this.seekBar_.getValue() - keyboardSeekDistance);
         }
         break;
       case 'ArrowRight':
         // If it's not focused on the volume bar, move the seek time forward
-        // for 5 sec. Otherwise, the volume will be adjusted automatically.
-        if (this.seekBar_ && !isVolumeBar) {
+        // for a few sec. Otherwise, the volume will be adjusted automatically.
+        if (this.seekBar_ && !isVolumeBar && keyboardSeekDistance > 0) {
           event.preventDefault();
-          this.seek_(this.seekBar_.getValue() + 5);
+          this.seek_(this.seekBar_.getValue() + keyboardSeekDistance);
         }
         break;
       // Jump to the beginning of the video's seek range.
diff --git a/ui/externs/ui.js b/ui/externs/ui.js
index a78473d576..6b564b6c38 100644
--- a/ui/externs/ui.js
+++ b/ui/externs/ui.js
@@ -84,7 +84,8 @@ shaka.extern.UIVolumeBarColors;
  *   enableKeyboardPlaybackControls: boolean,
  *   enableFullscreenOnRotation: boolean,
  *   forceLandscapeOnFullscreen: boolean,
- *   enableTooltips: boolean
+ *   enableTooltips: boolean,
+ *   keyboardSeekDistance: number
  * }}
  *
  * @property {!Array.<string>} controlPanelElements
@@ -177,6 +178,11 @@ shaka.extern.UIVolumeBarColors;
  *   Whether or not buttons in the control panel display tooltips that contain
  *   information about their function.
  *   Defaults to false.
+ * @property {number} keyboardSeekDistance
+ *   The time interval, in seconds, to seek when the user presses the left or
+ *   right keyboard keys when the video is selected. If less than or equal to 0,
+ *   no seeking will occur.
+ *   Defaults to 5 seconds.
  * @exportDoc
  */
 shaka.extern.UIConfiguration;
diff --git a/ui/ui.js b/ui/ui.js
index 42224e5d3d..5e721cc680 100644
--- a/ui/ui.js
+++ b/ui/ui.js
@@ -239,6 +239,7 @@ shaka.ui.Overlay = class {
       enableFullscreenOnRotation: true,
       forceLandscapeOnFullscreen: true,
       enableTooltips: false,
+      keyboardSeekDistance: 5,
     };
 
     // Check AirPlay support