feat(UI): Add PageUp and PageDown to UI seek bar (#5519)

ui/controls.js

@@ -1271,6 +1271,7 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     }
 
     const keyboardSeekDistance = this.config_.keyboardSeekDistance;
+    const keyboardLargeSeekDistance = this.config_.keyboardLargeSeekDistance;
 
     switch (event.key) {
       case 'ArrowLeft':
@@ -1289,6 +1290,22 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
           this.seek_(this.seekBar_.getValue() + keyboardSeekDistance);
         }
         break;
+      case 'PageDown':
+        // PageDown is like ArrowLeft, but has a larger jump distance, and does
+        // nothing to volume.
+        if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
+          event.preventDefault();
+          this.seek_(this.seekBar_.getValue() - keyboardLargeSeekDistance);
+        }
+        break;
+      case 'PageUp':
+        // PageDown is like ArrowRight, but has a larger jump distance, and does
+        // nothing to volume.
+        if (this.seekBar_ && isSeekBar && keyboardSeekDistance > 0) {
+          event.preventDefault();
+          this.seek_(this.seekBar_.getValue() + keyboardLargeSeekDistance);
+        }
+        break;
       // Jump to the beginning of the video's seek range.
       case 'Home':
         if (this.seekBar_) {

ui/externs/ui.js

@@ -86,6 +86,7 @@ shaka.extern.UIVolumeBarColors;
  *   forceLandscapeOnFullscreen: boolean,
  *   enableTooltips: boolean,
  *   keyboardSeekDistance: number,
+ *   keyboardLargeSeekDistance: number,
  *   fullScreenElement: HTMLElement
  * }}
  *
@@ -184,6 +185,11 @@ shaka.extern.UIVolumeBarColors;
  *   right keyboard keys when the video is selected. If less than or equal to 0,
  *   no seeking will occur.
  *   Defaults to 5 seconds.
+ * @property {number} keyboardLargeSeekDistance
+ *   The time interval, in seconds, to seek when the user presses the page up or
+ *   page down keyboard keys when the video is selected. If less than or equal
+ *   to 0, no seeking will occur.
+ *   Defaults to 60 seconds.
  * @property {HTMLElement} fullScreenElement
  *   DOM element on which fullscreen will be done.
  *   Defaults to Shaka Player Container.

ui/ui.js

@@ -243,6 +243,7 @@ shaka.ui.Overlay = class {
       forceLandscapeOnFullscreen: true,
       enableTooltips: false,
       keyboardSeekDistance: 5,
+      keyboardLargeSeekDistance: 60,
       fullScreenElement: this.videoContainer_,
     };