Use a new interactive progress bar for long-form (default) video by domlander · Pull Request #15726 · guardian/dotcom-rendering

domlander · 2026-04-20T11:15:00Z

What does this change?

Implements an alternative progress bar for Default (non-Youtube) video. This progress bar:

is taller
is interactive: clicks take the user to a specific point in the video
is scrubbable
has a linear background gradient
has the current time and duration

Tested on Chrome, Firefox, Safari & Edge; on mobile (using browserstack) and desktop browsers.

I have an alternative implementation of this progress bar which uses div's with CSS/JS instead of <input type="range" ... />. In this approach, the smooth transition of progress is maintained and it is easier to style and control with CSS/JS. However, scrubbing comes "for free" with the input approach, which would be tricky to implement well otherwise, and also has better accessibility by default.

Styling sources:

What does this PR not do?

Implement a smooth transition. I couldn't find a way to do this with this implementation that uses <input type="range" ... />. This is a nice-to-have. Other popular video players on the web have a mixture of smooth and stuttered transitions.
If you scrub to the end of the video and then back, the player will be paused. Let's consider this edge case later.
The thumb is not perfectly centered within the progress bar. It is maybe half a pixel too high. This is the default implementation across all tested browsers.
Hide the progress bar if it is playing and not hovered/interacted with, to match designs. This will be looked at in a future PR.
Captures progress bar clicks/scrubs from around the bar itself on desktop browsers other than Chrome. I think this will be useful as the bar is only 5px high. This will require JS to make work and has been left to a future PR.

Why?

To match designs. Long-form video would benefit more from extra video features.

How to test?

Run storybook locally. Locate the Default story in SelfHostedVideo.

Screenshots

Before	After

Screen.Recording.2026-04-20.at.15.42.14.mov

github-actions · 2026-04-20T11:25:26Z

Deploy build 26331 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

domlander · 2026-04-20T14:20:42Z

+	/**
+	 * Subtitles are anchored to the bottom, but leave enough room for a tall progress bar
+	 */
+	| 'raised-bottom';


Would love a better name for this! 🙏

Haha! Claude suggested above-controls?

github-actions · 2026-04-21T08:08:10Z

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

SHession

I've tested this locally and it behaves as described. I've left a few non-blocking comments, otherwise LGTM!

SHession · 2026-04-21T16:05:38Z

+	const handleKeyDownProgressBar = (
+		event: React.KeyboardEvent<HTMLInputElement>,
+	): void => {


Is there a reason not to have the same key handler as the rest of the video? The controls are mostly the same and I can't think of a reason not to include the additional ones incase the user tries them.

The initial idea was that we didn't need mute, for example, on the progress bar, and if there were any future keyboard additions to either the progress bar or the video, then it wouldn't inadvertently affect the other. Thinking about it more, you've made a really good point: I can't really think of an example where this would be the case and, as you say, there's no reason not to disallow 'm' to mute the video when focused on the progress bar. I'll combine the two key handlers.

SHession · 2026-04-22T07:12:16Z

+		);
+	});
+
+	describe('convertProgressPercentageToCurrentTime', () => {


It would be nice to have a test case for a 0 or negative duration.

SHession · 2026-04-22T07:15:48Z

+	/**
+	 * Subtitles are anchored to the bottom, but leave enough room for a tall progress bar
+	 */
+	| 'raised-bottom';


Haha! Claude suggested above-controls?

SHession · 2026-04-22T07:28:02Z

+	margin-left: 1px; /* To make it _feel_ more aligned with the progress bar, which has a border radius. */
+`;
+
+const formatTime = (timeInSeconds: number) => {


nit we can add some tests for this as with the time progress percentages.

Yep, I'll add tests

github-actions · 2026-04-22T10:01:34Z

Deploy build 1274 of `dotcom:ab-testing` to CODE

All deployment options

From guardian/actions-riff-raff.

domlander · 2026-04-22T11:55:06Z

Haha! Claude suggested above-controls?

This is better, but the icons are also "controls" and sometimes the controls go to the top of the page, i.e. feature cards. I've gone with bottom-elevated for now but this can be improved upon later.

domlander · 2026-04-22T12:03:00Z

+	const useLongFormProgressBar = videoStyle === 'Default';
+
+	const subtitlesPosition: SubtitlesPosition =
+		useLongFormProgressBar && controlsPosition === 'bottom'


It's a little bit safer to include controlsPosition === 'bottom' in the condition, just in case we decide to use a long form progress bar at the top of the card (i.e. feature cards) in the future

SHession

I've reviewed the code changes and they address the comments 🙏 I've not retested locally, lmk if it would be worth doing.

domlander · 2026-04-22T12:47:39Z

I've reviewed the code changes and they address the comments 🙏 I've not retested locally, lmk if it would be worth doing.

Thanks for the re-review. I've retested locally on different browsers and still looks good

gu-prout · 2026-04-22T13:17:50Z

Overdue on PROD (merged by @domlander 30 minutes and 7 seconds ago) What's gone wrong?

gu-prout · 2026-04-22T16:02:32Z

Seen on PROD (merged by @domlander 3 hours, 14 minutes and 49 seconds ago) Please check your changes!

domlander self-assigned this Apr 20, 2026

domlander force-pushed the doml/sh-default-progress-bar-range branch from 707eb4a to 4b25f4d Compare April 20, 2026 11:16

domlander added run_chromatic Runs chromatic when label is applied fronts + curation feature Departmental tracking: work on a new feature labels Apr 20, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 20, 2026

domlander force-pushed the doml/sh-default-progress-bar-range branch from 4b25f4d to 0acd346 Compare April 20, 2026 11:20

domlander added the run_chromatic Runs chromatic when label is applied label Apr 20, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 20, 2026

domlander force-pushed the doml/sh-default-progress-bar-range branch 2 times, most recently from 9c31c47 to 574e189 Compare April 20, 2026 14:10

domlander commented Apr 20, 2026

View reviewed changes

Comment thread dotcom-rendering/src/components/SelfHostedVideo.island.tsx Outdated

domlander force-pushed the doml/sh-default-progress-bar-range branch from 574e189 to 659c7d3 Compare April 20, 2026 14:20

domlander commented Apr 20, 2026

View reviewed changes

domlander force-pushed the doml/sh-default-progress-bar-range branch 3 times, most recently from c843d21 to 4991c1c Compare April 20, 2026 14:43

domlander added the run_chromatic Runs chromatic when label is applied label Apr 20, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 20, 2026

domlander force-pushed the doml/sh-default-progress-bar-range branch from 4991c1c to 1051888 Compare April 21, 2026 07:57

domlander added the run_chromatic Runs chromatic when label is applied label Apr 21, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 21, 2026

domlander marked this pull request as ready for review April 21, 2026 08:08

domlander force-pushed the doml/sh-default-progress-bar-range branch from e9ecb10 to 696a4c1 Compare April 21, 2026 11:33

domlander changed the base branch from main to doml/sh-video-refactor April 21, 2026 12:36

domlander force-pushed the doml/sh-default-progress-bar-range branch from 696a4c1 to a4aa151 Compare April 21, 2026 12:44

domlander mentioned this pull request Apr 21, 2026

Minor self-hosted video refactor #15732

Merged

Base automatically changed from doml/sh-video-refactor to main April 21, 2026 14:23

SHession approved these changes Apr 22, 2026

View reviewed changes

domlander force-pushed the doml/sh-default-progress-bar-range branch from a4aa151 to 1d2a2a8 Compare April 22, 2026 10:00

domlander added 3 commits April 22, 2026 12:51

Use a new interactive progress bar for long-form (default) video

eb98e5e

Combine key handlers

87aa73a

Add tests for formatting time in video player

74c7fcc

domlander force-pushed the doml/sh-default-progress-bar-range branch from f38ad48 to 5161156 Compare April 22, 2026 11:56

domlander added the run_chromatic Runs chromatic when label is applied label Apr 22, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 22, 2026

domlander commented Apr 22, 2026

View reviewed changes

Rename subtitle position. Move logic up.

1952d38

domlander force-pushed the doml/sh-default-progress-bar-range branch from 5161156 to 1952d38 Compare April 22, 2026 12:05

domlander added the run_chromatic Runs chromatic when label is applied label Apr 22, 2026

github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 22, 2026

SHession reviewed Apr 22, 2026

View reviewed changes

domlander merged commit 9ae227c into main Apr 22, 2026
26 checks passed

domlander deleted the doml/sh-default-progress-bar-range branch April 22, 2026 12:47

gu-prout Bot added Pending-on-PROD Overdue-on-PROD and removed Pending-on-PROD labels Apr 22, 2026

domlander mentioned this pull request Apr 22, 2026

Refactor ControlsPosition in self-hosted video #15738

Merged

gu-prout Bot added Seen-on-PROD and removed Overdue-on-PROD labels Apr 22, 2026

Conversation

domlander commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

What does this PR not do?

Why?

How to test?

Screenshots

Uh oh!

github-actions Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 21, 2026

Uh oh!

SHession left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 22, 2026

Uh oh!

domlander commented Apr 22, 2026

Uh oh!

domlander Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SHession left a comment

Choose a reason for hiding this comment

Uh oh!

domlander commented Apr 22, 2026

Uh oh!

Uh oh!

gu-prout Bot commented Apr 22, 2026

Uh oh!

gu-prout Bot commented Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

domlander commented Apr 20, 2026 •

edited

Loading

github-actions Bot commented Apr 20, 2026 •

edited

Loading

domlander Apr 22, 2026 •

edited

Loading