feat(UI): Added keyboardSeekDistance config to UI (shaka-project#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 shaka-project#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 shaka-project#123", "Closes shaka-project#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

@@ -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.

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;

ui/ui.js

@@ -239,6 +239,7 @@ shaka.ui.Overlay = class {
       enableFullscreenOnRotation: true,
       forceLandscapeOnFullscreen: true,
       enableTooltips: false,
+      keyboardSeekDistance: 5,
     };
 
     // Check AirPlay support