Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
domlander merged 4 commits into from
Apr 22, 2026
+374 −25
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eb98e5e
Use a new interactive progress bar for long-form (default) video
domlander Apr 20, 2026
87aa73a
Combine key handlers
domlander Apr 22, 2026
74c7fcc
Add tests for formatting time in video player
domlander Apr 22, 2026
1952d38
Rename subtitle position. Move logic up.
domlander Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions dotcom-rendering/src/components/SelfHostedVideo.island.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import type {
SubtitleSize,
} from './SelfHostedVideoPlayer';
import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
import type { SubtitlesPosition } from './SubtitleOverlay';
import type { OphanVideoStyle } from './YoutubeAtom/eventEmitters';
import { ophanTrackerApps, ophanTrackerWeb } from './YoutubeAtom/eventEmitters';

Expand Down Expand Up @@ -384,6 +385,13 @@ export const SelfHostedVideo = ({

const iconSize = isDefault ? 'large' : 'small';

const useLongFormProgressBar = isDefault;

const subtitlesPosition: SubtitlesPosition =
useLongFormProgressBar && controlsPosition === 'bottom'
Copy link
Copy Markdown
Contributor Author

@domlander domlander Apr 22, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

? 'bottom-elevated'
: controlsPosition;

const ophanVideoStyle = videoStyle.toLowerCase() as OphanVideoStyle;

const [isInView, setNode] = useIsInView({
Expand Down Expand Up @@ -786,7 +794,7 @@ export const SelfHostedVideo = ({
const video = vidRef.current;
if (!video) return;

const increment = 1;
const increment = isDefault ? 10 : 1;
const newTime = Math.min(video.currentTime + increment, video.duration);

updateCurrentTime(newTime);
Expand All @@ -796,7 +804,7 @@ export const SelfHostedVideo = ({
const video = vidRef.current;
if (!video) return;

const increment = 1;
const increment = isDefault ? 10 : 1;
const newTime = Math.max(video.currentTime - increment, 0);

updateCurrentTime(newTime);
Expand All @@ -811,9 +819,7 @@ export const SelfHostedVideo = ({
}
};

const handleKeyDown = (
event: React.KeyboardEvent<HTMLVideoElement>,
): void => {
const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {
if (isCinemagraph) return;

switch (event.key) {
Expand Down Expand Up @@ -945,8 +951,10 @@ export const SelfHostedVideo = ({
handleAudioClick={handleAudioClick}
handleTimeUpdate={handleTimeUpdate}
handleKeyDown={handleKeyDown}
useLongFormProgressBar={useLongFormProgressBar}
handlePause={handlePause}
handleFullscreenClick={handleFullscreenClick}
updateCurrentTime={updateCurrentTime}
onError={onError}
AudioIcon={hasAudio ? AudioIcon : null}
preloadPartialData={!!shouldAutoplay}
Expand All @@ -958,6 +966,7 @@ export const SelfHostedVideo = ({
subtitleSize={subtitleSize}
showIcons={showIcons}
controlsPosition={controlsPosition}
subtitlesPosition={subtitlesPosition}
activeCue={activeCue}
shouldLoop={shouldLoop}
showFullscreenIcon={isDefault}
Expand Down
48 changes: 36 additions & 12 deletions dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@ import {
AudioIcon as AudioIconComponent,
FullscreenIcon,
} from './SelfHostedVideoPlayerIcons';
import type { SubtitlesPosition } from './SubtitleOverlay';
import { SubtitleOverlay } from './SubtitleOverlay';
import { VideoProgressBar } from './VideoProgressBar';
import { VideoProgressBarInteractive } from './VideoProgressBarInteractive';

export type SubtitleSize = 'small' | 'medium' | 'large';
export type ControlsPosition = 'top' | 'bottom';
Expand Down Expand Up @@ -69,12 +71,16 @@ const iconsContainerStyles = css`
right: ${space[2]}px;
`;

const iconsPositionStyles = (position: ControlsPosition) => css`
/* Take into account the progress bar height */
const smallIconsPositionStyles = (position: ControlsPosition) => css`
${position === 'bottom' && `bottom: ${space[3]}px;`}
${position === 'top' && `top: ${space[2]}px;`}
`;

const largeIconsPositionStyles = (position: ControlsPosition) => css`
${position === 'bottom' && `bottom: ${space[12]}px;`}
${position === 'top' && `top: ${space[2]}px;`}
`;

export const PLAYER_STATES = [
'NOT_STARTED',
'PLAYING',
Expand Down Expand Up @@ -112,10 +118,12 @@ export type Props = {
handlePlaying: (event: SyntheticEvent) => void;
handlePlayPauseClick: (event: SyntheticEvent) => void;
handleAudioClick: (event: SyntheticEvent) => void;
handleKeyDown: (event: React.KeyboardEvent<HTMLVideoElement>) => void;
handleKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
handleTimeUpdate: (event: SyntheticEvent<HTMLVideoElement>) => void;
useLongFormProgressBar: boolean;
handlePause: (event: SyntheticEvent) => void;
handleFullscreenClick?: (event: SyntheticEvent) => void;
updateCurrentTime: (time: number) => void;
onError: (event: SyntheticEvent<HTMLVideoElement>) => void;
AudioIcon: ((iconProps: IconProps) => JSX.Element) | null;
iconSize: 'small' | 'large';
Expand All @@ -133,6 +141,7 @@ export type Props = {
shouldLoop: boolean;
isInteractive: boolean;
controlsPosition: ControlsPosition;
subtitlesPosition: SubtitlesPosition;
};

/**
Expand Down Expand Up @@ -166,8 +175,10 @@ export const SelfHostedVideoPlayer = forwardRef(
handleAudioClick,
handleKeyDown,
handleTimeUpdate,
useLongFormProgressBar,
handlePause,
handleFullscreenClick,
updateCurrentTime,
onError,
AudioIcon,
iconSize,
Expand All @@ -183,6 +194,7 @@ export const SelfHostedVideoPlayer = forwardRef(
shouldLoop,
isInteractive,
controlsPosition,
subtitlesPosition,
}: Props,
ref: React.ForwardedRef<HTMLVideoElement>,
) => {
Expand Down Expand Up @@ -255,7 +267,7 @@ export const SelfHostedVideoPlayer = forwardRef(
<SubtitleOverlay
text={activeCue.text}
size={subtitleSize}
position={controlsPosition}
position={subtitlesPosition}
/>
)}
{showPlayIcon && (
Expand All @@ -269,18 +281,30 @@ export const SelfHostedVideoPlayer = forwardRef(
<PlayIcon iconWidth="narrow" />
</button>
)}
{showProgressBar && (
<VideoProgressBar
videoId={videoId}
currentTime={currentTime}
duration={ref.current!.duration}
/>
)}
{showProgressBar &&
(useLongFormProgressBar ? (
<VideoProgressBarInteractive
videoId={videoId}
currentTime={currentTime}
updateCurrentTime={updateCurrentTime}
duration={ref.current!.duration}
handleKeyDown={handleKeyDown}
/>
) : (
<VideoProgressBar
videoId={videoId}
currentTime={currentTime}
duration={ref.current!.duration}
/>
))}
{showIcons && (
<div
css={[
iconsContainerStyles,
iconsPositionStyles(controlsPosition),
iconSize === 'large' &&
largeIconsPositionStyles(controlsPosition),
iconSize === 'small' &&
smallIconsPositionStyles(controlsPosition),
]}
>
{showFullscreenIcon && (
Expand Down
19 changes: 15 additions & 4 deletions dotcom-rendering/src/components/SubtitleOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,28 @@ import {
textSans20,
} from '@guardian/source/foundations';
import { palette } from '../palette';
import type { ControlsPosition, SubtitleSize } from './SelfHostedVideoPlayer';
import type { SubtitleSize } from './SelfHostedVideoPlayer';

const subtitleOverlayStyles = (position: ControlsPosition) => css`
export type SubtitlesPosition =
| 'top'
| 'bottom'
/**
* Subtitles are anchored to the bottom, but leave enough room for a tall progress bar
*/
| 'bottom-elevated';

const subtitleOverlayStyles = css`
width: 100%;
display: flex;
justify-content: center;
pointer-events: none;
position: absolute;
`;

const subtitlePositionStyles = (position: SubtitlesPosition) => css`
${position === 'top' && `top: ${space[4]}px;`};
${position === 'bottom' && `bottom: ${space[4]}px;`};
${position === 'bottom-elevated' && `bottom: ${space[12]}px;`};
`;

const cueBoxStyles = css`
Expand Down Expand Up @@ -62,10 +73,10 @@ export const SubtitleOverlay = ({
}: {
text: string;
size: SubtitleSize;
position: 'top' | 'bottom';
position: SubtitlesPosition;
}) => {
return (
<div css={subtitleOverlayStyles(position)}>
<div css={[subtitleOverlayStyles, subtitlePositionStyles(position)]}>
<div css={cueBoxStyles}>
<div css={[cueStyles, cueTextStyles(size)]}>{text}</div>
</div>
Expand Down
9 changes: 5 additions & 4 deletions dotcom-rendering/src/components/VideoProgressBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { css } from '@emotion/react';
import { getZIndex } from '../lib/getZIndex';
import { convertCurrentTimeToProgressPercentage } from '../lib/video';
import { palette } from '../palette';

const styles = css`
Expand Down Expand Up @@ -49,11 +50,11 @@ export const VideoProgressBar = ({ videoId, currentTime, duration }: Props) => {
*/
const adjustedDuration = duration > 1 ? duration - 0.25 : duration;

const progressPercentage = Math.min(
(currentTime * 100) / adjustedDuration,
100,
const progressPercentage = convertCurrentTimeToProgressPercentage(
currentTime,
adjustedDuration,
);
if (Number.isNaN(progressPercentage)) {
if (progressPercentage === null) {
return null;
}

Expand Down
Loading
Loading