Merge pull request #15671 from guardian/doml/sh-default

Support default video style

Author: domlander

dotcom-rendering/fixtures/manual/trails.ts

@@ -747,7 +747,6 @@ export const selfHostedLoopVideo53Card = {
 				height: 720,
 			},
 		],
-
 		aspectRatio: 5 / 3,
 	},
 } satisfies DCRFrontCard;

dotcom-rendering/src/components/FeatureCard.stories.tsx

@@ -1,6 +1,10 @@
 import { css } from '@emotion/react';
 import { from } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import {
+	selfHostedLoopVideo45Card,
+	selfHostedLoopVideo53Card,
+} from '../../fixtures/manual/trails';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -422,21 +426,7 @@ export const WithSelfHostedLoopVideo = {
 	args: {
 		...cardProps,
 		showVideo: true,
-		mainMedia: {
-			type: 'SelfHostedVideo',
-			videoStyle: 'Loop',
-			atomId: 'atom-id-123',
-			sources: [
-				{
-					src: 'https://uploads.guim.co.uk/2026/01/09/Front_loop__Iran_TiF_Latest--64220ebf-d63d-48dd-9317-16b3b150a4ac-1.1.m3u8',
-					mimeType: 'application/vnd.apple.mpegurl',
-					width: 576,
-					height: 720,
-				},
-			],
-			aspectRatio: 4 / 5,
-			duration: 18,
-		},
+		mainMedia: selfHostedLoopVideo45Card.mainMedia,
 	},
 } satisfies Story;
 
@@ -469,18 +459,7 @@ export const WithSelfHostedImmersiveLoopVideo = {
 	args: {
 		...WithSelfHostedLoopVideo.args,
 		...Immersive.args,
-		mainMedia: {
-			...WithSelfHostedLoopVideo.args.mainMedia,
-			sources: [
-				{
-					src: 'https://uploads.guim.co.uk/2025/11/27/5_3_Test--26763e61-c16b-4c10-8c16-3f11882da154-1.0.mp4',
-					mimeType: 'video/mp4',
-					width: 1200,
-					height: 720,
-				},
-			],
-			aspectRatio: 5 / 3,
-		},
+		mainMedia: selfHostedLoopVideo53Card.mainMedia,
 	},
 } satisfies Story;
 
@@ -512,19 +491,7 @@ export const WithReplacementMediaOnGalleryCard = {
 		...Gallery.args,
 		showVideo: true,
 		mainMedia: {
-			type: 'SelfHostedVideo',
-			videoStyle: 'Loop',
-			atomId: 'atom-id-123',
-			sources: [
-				{
-					src: 'https://uploads.guim.co.uk/2026/01/09/Front_loop__Iran_TiF_Latest--64220ebf-d63d-48dd-9317-16b3b150a4ac-1.1.m3u8',
-					mimeType: 'application/vnd.apple.mpegurl',
-					width: 576,
-					height: 720,
-				},
-			],
-			aspectRatio: 4 / 5,
-			duration: 18,
+			...WithSelfHostedLoopVideo.args.mainMedia,
 		},
 	},
 } satisfies Story;
@@ -534,19 +501,7 @@ export const WithReplacementMediaOnVideoCard = {
 		...YoutubeVideo.args,
 		showVideo: true,
 		mainMedia: {
-			type: 'SelfHostedVideo',
-			videoStyle: 'Loop',
-			atomId: 'atom-id-123',
-			sources: [
-				{
-					src: 'https://uploads.guim.co.uk/2026/01/09/Front_loop__Iran_TiF_Latest--64220ebf-d63d-48dd-9317-16b3b150a4ac-1.1.m3u8',
-					mimeType: 'application/vnd.apple.mpegurl',
-					width: 576,
-					height: 720,
-				},
-			],
-			aspectRatio: 4 / 5,
-			duration: 18,
+			...WithSelfHostedLoopVideo.args.mainMedia,
 		},
 	},
 } satisfies Story;
@@ -556,19 +511,7 @@ export const WithReplacementMediaOnPodcastCard = {
 		...Podcast.args,
 		showVideo: true,
 		mainMedia: {
-			type: 'SelfHostedVideo',
-			videoStyle: 'Loop',
-			atomId: 'atom-id-123',
-			sources: [
-				{
-					src: 'https://uploads.guim.co.uk/2026/01/09/Front_loop__Iran_TiF_Latest--64220ebf-d63d-48dd-9317-16b3b150a4ac-1.1.m3u8',
-					mimeType: 'application/vnd.apple.mpegurl',
-					width: 576,
-					height: 720,
-				},
-			],
-			aspectRatio: 4 / 5,
-			duration: 18,
+			...WithSelfHostedLoopVideo.args.mainMedia,
 		},
 	},
 } satisfies Story;

dotcom-rendering/src/components/FeatureCard.tsx

@@ -589,7 +589,7 @@ export const FeatureCard = ({
 												aspectRatio
 											}
 											linkTo={linkTo}
-											showProgressBar={false}
+											hideProgressBar={true}
 											subtitleSource={
 												media.mainMedia.subtitleSource
 											}

dotcom-rendering/src/components/SelfHostedVideo.island.tsx

@@ -184,6 +184,7 @@ const dispatchOphanAttentionEvent = (
 };
 
 const getOptimisedPosterImage = (mainImage: string): string => {
+	// This only runs on the client
 	const resolution = window.devicePixelRatio >= 2 ? 'high' : 'low';
 
 	return generateImageURL({
@@ -218,8 +219,9 @@ const shouldUseWebkitFullscreen = (video: HTMLVideoElement): boolean => {
 };
 
 /**
- * Ensure the aspect ratio of the video is within the boundary, if specified.
- * For example, we may not want to render a square video inside a 4:5 feature card.
+ * Ensures the aspect ratio falls between the minimum and maximum allowed aspect ratios, if specified.
+ * For example, we may not want to render a square video inside a 4:5 feature card. In this case, the
+ * minimum & maximum aspect ratio would be 4:5, so that the video fits the fixed-aspect ratio feature card
  */
 const getAspectRatioOfVisibleVideo = (
 	aspectRatio: number,
@@ -236,42 +238,6 @@ const getAspectRatioOfVisibleVideo = (
 	return aspectRatio;
 };
 
-type Props = {
-	sources: Source[];
-	atomId: string;
-	uniqueId: string;
-	videoStyle: VideoPlayerFormat;
-	aspectRatio: number;
-	posterImage: string;
-	fallbackImage: CardPictureProps['mainImage'];
-	fallbackImageSize: CardPictureProps['imageSize'];
-	fallbackImageLoading: CardPictureProps['loading'];
-	fallbackImageAlt: CardPictureProps['alt'];
-	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
-	linkTo: string;
-	showProgressBar?: boolean;
-	subtitleSource?: string;
-	subtitleSize: SubtitleSize;
-	/** The position of subtitles and the audio icon. Usually at the bottom, with the exception of Feature Cards. */
-	controlsPosition?: 'top' | 'bottom';
-	/**
-	 * The minimum/maximum aspect ratio the video will have. The video will be cropped if this
-	 * value is defined and the video aspect ratio is less/greater than this value.
-	 */
-	minAspectRatio?: number;
-	maxAspectRatio?: number;
-	/**
-	 * Specify this value to enforce the size of the video container on mobile/desktop.
-	 * Grey bars will appear if this value is defined and differs from the video aspect ratio.
-	 */
-	containerAspectRatioMobile?: number;
-	containerAspectRatioDesktop?: number;
-	caption?: string;
-	format?: ArticleFormat;
-	isMainMedia?: boolean;
-	role?: RoleType;
-};
-
 const doesUserPermitAutoplayOnWeb = (): boolean => {
 	/**
 	 * The user indicates a preference for reduced motion: https://web.dev/articles/prefers-reduced-motion
@@ -294,7 +260,6 @@ const doesUserPermitAutoplayOnWeb = (): boolean => {
 const doesUserPermitAutoplayOnApps = async (): Promise<boolean> => {
 	/* isAutoplayEnabled is available on the video client from 8.8.0 onwards */
 	const isBridgetCompatible = await hasMinimumBridgetVersion('8.8.0');
-
 	if (!isBridgetCompatible) return true;
 
 	try {
@@ -312,6 +277,44 @@ const doesUserPermitAutoplayOnApps = async (): Promise<boolean> => {
 	}
 };
 
+type Props = {
+	sources: Source[];
+	atomId: string;
+	uniqueId: string;
+	videoStyle: VideoPlayerFormat;
+	aspectRatio: number;
+	posterImage: string;
+	fallbackImage: CardPictureProps['mainImage'];
+	fallbackImageSize: CardPictureProps['imageSize'];
+	fallbackImageLoading: CardPictureProps['loading'];
+	fallbackImageAlt: CardPictureProps['alt'];
+	fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
+	linkTo: string;
+	hideProgressBar?: boolean;
+	subtitleSource?: string;
+	subtitleSize: SubtitleSize;
+	/**
+	 * The position of subtitles and the audio icon.
+	 */
+	controlsPosition?: 'top' | 'bottom';
+	/**
+	 * The minimum/maximum aspect ratio the video will have. The video will be cropped if this
+	 * value is defined and the video aspect ratio is less/greater than this value.
+	 */
+	minAspectRatio?: number;
+	maxAspectRatio?: number;
+	/**
+	 * Specify this value to enforce the size of the video container on mobile/desktop.
+	 * Grey bars will appear if this value is defined and differs from the video aspect ratio.
+	 */
+	containerAspectRatioMobile?: number;
+	containerAspectRatioDesktop?: number;
+	caption?: string;
+	format?: ArticleFormat;
+	isMainMedia?: boolean;
+	role?: RoleType;
+};
+
 export const SelfHostedVideo = ({
 	sources,
 	atomId,
@@ -325,7 +328,7 @@ export const SelfHostedVideo = ({
 	fallbackImageAlt,
 	fallbackImageAspectRatio,
 	linkTo,
-	showProgressBar = true,
+	hideProgressBar = false,
 	subtitleSource,
 	subtitleSize,
 	controlsPosition = 'bottom',
@@ -361,10 +364,20 @@ export const SelfHostedVideo = ({
 	const isApps = renderingTarget === 'Apps';
 
 	/**
-	 * All controls on the video are hidden: the video looks like a GIF.
+	 * In a cinemagraph, all controls are hidden: the video looks like a GIF.
 	 * This includes but may not be limited to: audio icon, play/pause icon, subtitles, progress bar.
 	 */
 	const isCinemagraph = videoStyle === 'Cinemagraph';
+	const isLoop = videoStyle === 'Loop';
+	const isDefault = videoStyle === 'Default';
+
+	const canAutoplay = isLoop || isCinemagraph;
+
+	const shouldAutoplay = canAutoplay && isAutoplayAllowed;
+
+	const shouldLoop = isLoop || isCinemagraph;
+
+	const showProgressBar = !hideProgressBar && !isCinemagraph;
 
 	const ophanVideoStyle = videoStyle.toLowerCase() as OphanVideoStyle;
 
@@ -603,12 +616,12 @@ export const SelfHostedVideo = ({
 	 */
 	useEffect(() => {
 		if (
-			isAutoplayAllowed === false ||
+			shouldAutoplay === false ||
 			(isInView === false && playerState === 'NOT_STARTED')
 		) {
 			setShowPosterImage(true);
 		}
-	}, [isAutoplayAllowed, isInView, playerState]);
+	}, [shouldAutoplay, isInView, playerState]);
 
 	if (adapted) {
 		return FallbackImageComponent;
@@ -813,9 +826,9 @@ export const SelfHostedVideo = ({
 	 *
 	 * Stops playback when the video is scrolled out of view.
 	 */
-	if (vidRef.current && isPlayable) {
+	if (isPlayable) {
 		if (
-			isAutoplayAllowed &&
+			shouldAutoplay &&
 			isInView &&
 			(playerState === 'NOT_STARTED' ||
 				playerState === 'PAUSED_BY_INTERSECTION_OBSERVER' ||
@@ -831,14 +844,15 @@ export const SelfHostedVideo = ({
 	}
 
 	/**
-	 * Show the play icon when the video is not playing, except for when it is scrolled
-	 * out of view. In this case, the intersection observer will resume playback and
-	 * having a play icon would falsely indicate a user action is required to resume playback.
+	 * Show the play icon when the video is not playing, except for when it is scrolled out of view,
+	 * i.e. paused by intersection observer. In this case, the intersection observer will resume playback
+	 * and having a play icon would falsely indicate a user action is required to resume playback.
 	 */
 	const showPlayIcon =
-		playerState === 'PAUSED_BY_USER' ||
-		playerState === 'PAUSED_BY_BROWSER' ||
-		(playerState === 'NOT_STARTED' && !isAutoplayAllowed);
+		!isCinemagraph &&
+		(playerState === 'PAUSED_BY_USER' ||
+			playerState === 'PAUSED_BY_BROWSER' ||
+			(playerState === 'NOT_STARTED' && shouldAutoplay === false));
 
 	/** The aspect ratio of the video will be clamped within the specified range */
 	const aspectRatioOfVisibleVideo = getAspectRatioOfVisibleVideo(
@@ -864,12 +878,6 @@ export const SelfHostedVideo = ({
 		? getOptimisedPosterImage(posterImage)
 		: undefined;
 
-	/**
-	 * We almost always want to preload some of the video data. The exception
-	 * is when autoplay is off and the video is only partially in view.
-	 */
-	const preloadPartialData = !!isAutoplayAllowed || !!isInView;
-
 	return (
 		<figure
 			className={`video-container ${videoStyle.toLocaleLowerCase()} ${
@@ -926,13 +934,18 @@ export const SelfHostedVideo = ({
 						handleFullscreenClick={handleFullscreenClick}
 						onError={onError}
 						AudioIcon={hasAudio ? AudioIcon : null}
-						preloadPartialData={preloadPartialData}
+						preloadPartialData={!!shouldAutoplay}
 						showPlayIcon={showPlayIcon}
 						showProgressBar={showProgressBar}
+						showSubtitles={!isCinemagraph}
 						subtitleSource={subtitleSource}
 						subtitleSize={subtitleSize}
+						showIcons={!isCinemagraph}
 						controlsPosition={controlsPosition}
 						activeCue={activeCue}
+						shouldLoop={shouldLoop}
+						showFullscreenIcon={isDefault}
+						isInteractive={!isCinemagraph}
 					/>
 				</div>
 			</div>

dotcom-rendering/src/components/SelfHostedVideo.stories.tsx

@@ -74,7 +74,7 @@ export const Default: Story = {
 export const WithoutProgressBar: Story = {
 	args: {
 		...Loop.args,
-		showProgressBar: false,
+		hideProgressBar: false,
 	},
 } satisfies Story;