From 8e22a508520cc444fe8abb64e83771b5958f2c54 Mon Sep 17 00:00:00 2001
From: theodab <theodab@google.com>
Date: Tue, 22 Aug 2023 02:55:22 -0700
Subject: [PATCH] feat(UI): Add PageUp and PageDown to UI seek bar (#5519)

---
 ui/controls.js   | 17 +++++++++++++++++
 ui/externs/ui.js |  6 ++++++
 ui/ui.js         |  1 +
 3 files changed, 24 insertions(+)

diff --git a/ui/controls.js b/ui/controls.js
index 4086051c33..ee9b196814 100644
--- a/ui/controls.js
+++ b/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_) {
diff --git a/ui/externs/ui.js b/ui/externs/ui.js
index ec23381e9d..4999add000 100644
--- a/ui/externs/ui.js
+++ b/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.
diff --git a/ui/ui.js b/ui/ui.js
index d514e11d04..a8c9821c35 100644
--- a/ui/ui.js
+++ b/ui/ui.js
@@ -243,6 +243,7 @@ shaka.ui.Overlay = class {
       forceLandscapeOnFullscreen: true,
       enableTooltips: false,
       keyboardSeekDistance: 5,
+      keyboardLargeSeekDistance: 60,
       fullScreenElement: this.videoContainer_,
     };