From 4a442625ed4061880f712bacc51b44190723f306 Mon Sep 17 00:00:00 2001 From: mister-ben <1676039+mister-ben@users.noreply.github.com> Date: Sun, 14 Jul 2024 17:31:03 +0200 Subject: [PATCH 1/4] WIP seek bar config --- .../control-bar/progress-control/seek-bar.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index b59a65534f..91a5e2e52f 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -15,12 +15,7 @@ import document from 'global/document'; import './load-progress-bar.js'; import './play-progress-bar.js'; import './mouse-time-display.js'; - -// The number of seconds the `step*` functions move the timeline. -const STEP_SECONDS = 5; - -// The multiplier of STEP_SECONDS that PgUp/PgDown move the timeline. -const PAGE_KEY_MULTIPLIER = 12; +import { merge } from '../../utils/obj.js'; /** * Seek bar and container for the progress bars. Uses {@link PlayProgressBar} @@ -38,8 +33,16 @@ class SeekBar extends Slider { * * @param {Object} [options] * The key/value store of player options. + * @param {number} [options.stepSeconds=5] + * The number of seconds to increment on keyboard control + * @param {number} [options.pageMultiplier=12] + * The multiplier of stepSeconds that PgUp/PgDown move the timeline. */ constructor(player, options) { + options = merge(options, { + stepSeconds: 5, + pageMultiplier: 12 + }); super(player, options); this.setEventHandlers_(); } @@ -392,14 +395,14 @@ class SeekBar extends Slider { * Move more quickly fast forward for keyboard-only users */ stepForward() { - this.userSeek_(this.player_.currentTime() + STEP_SECONDS); + this.userSeek_(this.player_.currentTime() + this.options().stepSeconds); } /** * Move more quickly rewind for keyboard-only users */ stepBack() { - this.userSeek_(this.player_.currentTime() - STEP_SECONDS); + this.userSeek_(this.player_.currentTime() - this.options().stepSeconds); } /** @@ -466,11 +469,11 @@ class SeekBar extends Slider { } else if (event.key === 'PageDown') { event.preventDefault(); event.stopPropagation(); - this.userSeek_(this.player_.currentTime() - (STEP_SECONDS * PAGE_KEY_MULTIPLIER)); + this.userSeek_(this.player_.currentTime() - (this.options().stepSeconds * this.options().pageMultiplier)); } else if (event.key === 'PageUp') { event.preventDefault(); event.stopPropagation(); - this.userSeek_(this.player_.currentTime() + (STEP_SECONDS * PAGE_KEY_MULTIPLIER)); + this.userSeek_(this.player_.currentTime() + (this.options().stepSeconds * this.options().pageMultiplier)); } else { // Pass keydown handling up for unsupported keys super.handleKeyDown(event); From d76756e6d3eabe4a60edf11d04bab32744b9f415 Mon Sep 17 00:00:00 2001 From: mister-ben <1676039+mister-ben@users.noreply.github.com> Date: Thu, 8 Aug 2024 15:37:33 +0200 Subject: [PATCH 2/4] feat: make keyboard progress step configurable --- .../control-bar/progress-control/seek-bar.js | 4 +- test/unit/controls.test.js | 92 +++++++++++++++++++ 2 files changed, 94 insertions(+), 2 deletions(-) diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 91a5e2e52f..c4f1474d2f 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -39,10 +39,10 @@ class SeekBar extends Slider { * The multiplier of stepSeconds that PgUp/PgDown move the timeline. */ constructor(player, options) { - options = merge(options, { + options = merge({ stepSeconds: 5, pageMultiplier: 12 - }); + }, options); super(player, options); this.setEventHandlers_(); } diff --git a/test/unit/controls.test.js b/test/unit/controls.test.js index fcbc0be3e3..13254a476d 100644 --- a/test/unit/controls.test.js +++ b/test/unit/controls.test.js @@ -223,6 +223,98 @@ QUnit.test('SeekBar should be filled on 100% when the video/audio ends', functio window.cancelAnimationFrame = oldCAF; }); +QUnit.only('SeekBar keyboard increment is configurable', function(assert) { + const player = TestHelpers.makePlayer({ + controlBar: { + progressControl: { + seekBar: { + stepSeconds: 2, + pageMultiplier: 4 + } + } + } + }); + + const ctSpy = sinon.spy(player, 'currentTime'); + + player.duration(100); + player.currentTime(10); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'ArrowRight'}); + // 10 + 2 + assert.ok(ctSpy.calledWith(12), 'seeked configured amount'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'PageUp'}); + // 12 + (2 * 4) + assert.ok(ctSpy.calledWith(20), 'seeked configured amount with multiplier'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'ArrowLeft'}); + // 20 - 2 + assert.ok(ctSpy.calledWith(18), 'seeked configured amount'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'PageDown'}); + // 18 - (2 * 4) + assert.ok(ctSpy.calledWith(10), 'seeked configured amount with multiplier'); + + player.dispose(); +}); + +QUnit.only('SeekBar keyboard increment is configurable at runtime', function(assert) { + const player = TestHelpers.makePlayer({}); + + const ctSpy = sinon.spy(player, 'currentTime'); + + player.duration(100); + player.currentTime(10); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'ArrowRight'}); + // 10 + 5 + assert.ok(ctSpy.calledWith(15), 'seeked configured amount'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'PageUp'}); + // 15 + (5 * 12) + assert.ok(ctSpy.calledWith(75), 'seeked configured amount with multiplier'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'ArrowLeft'}); + // 75 - 5 + assert.ok(ctSpy.calledWith(70), 'seeked configured amount'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'PageDown'}); + // 70 - (5 * 12) + assert.ok(ctSpy.calledWith(10), 'seeked configured amount with multiplier'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.options().stepSeconds = 3; + player.controlBar.progressControl.seekBar.options().pageMultiplier = 3; + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'ArrowRight'}); + // 10 + 3 + assert.ok(ctSpy.calledWith(13), 'seeked configured amount'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'PageUp'}); + // 13 + (3 * 3) + assert.ok(ctSpy.calledWith(22), 'seeked configured amount with multiplier'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'ArrowLeft'}); + // 22 - 3 + assert.ok(ctSpy.calledWith(19), 'seeked configured amount'); + ctSpy.resetHistory(); + + player.controlBar.progressControl.seekBar.trigger({type: 'keydown', key: 'PageDown'}); + // 19 - (3 * 3) + assert.ok(ctSpy.calledWith(10), 'seeked configured amount with multiplier'); + + player.dispose(); +}); + QUnit.test('playback rate button is hidden by default', function(assert) { assert.expect(1); From d1151972dcd1e8acaebebe66fcd313aca3dfae7f Mon Sep 17 00:00:00 2001 From: mister-ben <1676039+mister-ben@users.noreply.github.com> Date: Thu, 14 Nov 2024 16:16:41 +0100 Subject: [PATCH 3/4] Run all tests --- test/unit/controls.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/controls.test.js b/test/unit/controls.test.js index 13254a476d..62783912d4 100644 --- a/test/unit/controls.test.js +++ b/test/unit/controls.test.js @@ -223,7 +223,7 @@ QUnit.test('SeekBar should be filled on 100% when the video/audio ends', functio window.cancelAnimationFrame = oldCAF; }); -QUnit.only('SeekBar keyboard increment is configurable', function(assert) { +QUnit.test('SeekBar keyboard increment is configurable', function(assert) { const player = TestHelpers.makePlayer({ controlBar: { progressControl: { @@ -262,7 +262,7 @@ QUnit.only('SeekBar keyboard increment is configurable', function(assert) { player.dispose(); }); -QUnit.only('SeekBar keyboard increment is configurable at runtime', function(assert) { +QUnit.test('SeekBar keyboard increment is configurable at runtime', function(assert) { const player = TestHelpers.makePlayer({}); const ctSpy = sinon.spy(player, 'currentTime'); From 0457b3e58a370ab47a684d2173bab8f9eb1c15ae Mon Sep 17 00:00:00 2001 From: mister-ben <1676039+mister-ben@users.noreply.github.com> Date: Wed, 15 Jan 2025 00:04:10 +0100 Subject: [PATCH 4/4] remove dupe import --- src/js/control-bar/progress-control/seek-bar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 6cbc48e771..aae7f003e9 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -16,7 +16,6 @@ import document from 'global/document'; import './load-progress-bar.js'; import './play-progress-bar.js'; import './mouse-time-display.js'; -import { merge } from '../../utils/obj.js'; /** * Seek bar and container for the progress bars. Uses {@link PlayProgressBar}