Cinemagraphs #14826

domlander · 2025-11-12T10:24:48Z

What does this change?

Creates an option for looping videos to present cinemagraph-like behaviour.

Cinemagraphs are looping videos with the following changes:

No audio and subsequently no mute/unmute icon
No subtitles
No progress bar
No play/pause icon
Clicking a cinemagraph is a click to go into the article instead of play/pausing the video.

Why?

So that we can show a cinemagraph style of video on our fronts.

Screenshots

Before	After

Note: the cursor is a pointer when not in Screenshare mode

Screen.Recording.2025-11-12.at.10.34.15.mov

github-actions · 2025-11-12T10:29:31Z

Deploy build 46898 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-11-12T10:31:55Z

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

All deployment options

From guardian/actions-riff-raff.

github-actions · 2025-11-12T10:37:53Z

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.

abeddow91

In terms of functionality, this works well 👏

I've detailed in the PR but i've found the checks for isCinemagraph a bit hard to follow and I wonder if we would lift these up to a single decision point and pass that down, leaving the player agnostic to the video type.

I'm also not sure about keeping LoopVideo as the component as this now seems to be an optional characteristic of the player - similar to autoplay - rather than its explicit function, given that self hosted videos are now separated out into 'Loop' | 'Cinemagraph' | 'Default'. As far as I'm aware, the only thing that makes this player a loop player is setting loop=true

I wonder if its worth refactoring the player to be more generic before we implement Cinemagraph but I don't think this is blocking at this point.

abeddow91 · 2025-11-13T16:28:49Z

dotcom-rendering/src/components/Card/components/MediaWrapper.tsx

+				{/* This overlay is styled when the CardLink is hovered */}
+				{(mediaType === 'picture' ||
+					mediaType === 'slideshow' ||
+					(mediaType === 'loop-video' && isCinemagraph)) &&


Is this media type correct?

I thought this should be SelfHostedVideo following #14827

This is a different type CardMediaType: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/types/layout.ts#L24

I understand this is confusing and could be refactored...I had a look and it wasn't trivial to do, so I have left it for now

I've addressed this here: c1693a9

abeddow91 · 2025-11-13T16:30:54Z

dotcom-rendering/src/components/Card/Card.tsx

 					<MediaWrapper
 						mediaSize={mediaSize}
 						mediaType={media.type}
+						isCinemagraph={


Could we just pass the videoStyle here instead of creating a new abstraction?

abeddow91 · 2025-11-13T17:49:49Z

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

 				activeCue={activeCue}
+				isCinemagraph={isCinemagraph}
 			/>


This is somewhat personal preference but I find the isCinemagraph repetition quite tricky to parse and I wonder about how this might scale.

I did wonder about having a loop video wrapper to pass video preferences down depending on videoStyle rather than determining them all here. Do you have any thoughts on this?

I was wondering about having bundling up the player options so that we don't need to pepper the component with checks. Something like

const playerProps = { showPlayIcon: !isCinemagraph, enableSubtitles: !isCinemagraph, enableAudioControls: !isCinemagraph, pointerEventsNone: isCinemagraph, trackingStyle: videoStyle, };

Agreed on the repetition being terrible. I have refactored to remove the duplication.

abeddow91 · 2025-11-13T17:53:29Z

dotcom-rendering/src/components/LoopVideoPlayer.tsx

+			!!subtitleSource &&
+			!!subtitleSize &&
+			!!activeCue?.text &&
+			!isCinemagraph;


Do we need to check isCinemagraph here given we dont pass subtitleSource or subtitleSize the level above if it isCinemagraph?

abeddow91 · 2025-11-13T17:54:44Z

dotcom-rendering/src/components/LoopVideoPlayer.tsx

+					'current' in ref &&
+					ref.current &&
+					isPlayable &&
+					!isCinemagraph && (


Do we need to check isCinemagraph here given we set this at the wrapper above
showPlayIcon={!isCinemagraph ? showPlayIcon : false}

abeddow91 · 2025-11-13T17:56:16Z

dotcom-rendering/src/components/LoopVideoPlayer.tsx

 	/* used in custom subtitle overlays */
 	activeCue?: ActiveCue | null;
+	/* Cinemagraphs do not display subtitles or video controls */
+	isCinemagraph: boolean;


I've mentioned this below but I think we can get rid of this if we explicitly set props using isCinemagraph prior to this.

abeddow91 · 2025-11-13T19:54:59Z

dotcom-rendering/src/components/LoopVideoPlayer.tsx

+									type="button"
+									onClick={handleAudioClick}
+									css={audioButtonStyles}
+									data-link-name={`gu-video-loop-${


At the moment we are specifying loop in the tracking.

Should this be the video style now rather than one hardcoded property?

This will be handled in a follow up PR - these components should be renamed given they will soon be handling non-loops

abeddow91

This looks great. Thanks for taking the time to refactor this.

gu-prout · 2025-11-24T10:45:01Z

Seen on PROD (merged by @domlander 7 minutes and 54 seconds ago) Please check your changes!

github-actions bot added the dotcom-rendering label Nov 12, 2025

domlander force-pushed the doml/cinemagraph branch from 91a81cb to fba9ff8 Compare November 12, 2025 10:27

domlander self-assigned this Nov 12, 2025

domlander added run_chromatic Runs chromatic when label is applied fronts + curation maintenance Departmental tracking: maintenance work, not a fix or a feature labels Nov 12, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 12, 2025

domlander marked this pull request as ready for review November 12, 2025 10:37

domlander requested a review from abeddow91 November 12, 2025 10:42

domlander force-pushed the doml/cinemagraph branch from fba9ff8 to 98989b6 Compare November 13, 2025 09:47

domlander added the run_chromatic Runs chromatic when label is applied label Nov 13, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 13, 2025

abeddow91 reviewed Nov 13, 2025

View reviewed changes

domlander force-pushed the doml/cinemagraph branch 3 times, most recently from 33c30e4 to 8bc8a72 Compare November 18, 2025 12:42

domlander added the run_chromatic Runs chromatic when label is applied label Nov 18, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 18, 2025

domlander requested a review from abeddow91 November 18, 2025 14:40

abeddow91 approved these changes Nov 24, 2025

View reviewed changes

domlander added 7 commits November 24, 2025 09:49

Add videoPlayerFormat to model

24721c7

Allow cinemagraph option for looping video

b832fb8

Create new type. Refactor isCinemagraph.

055c0be

Add new self-hosted video types to CardMediaType

12dbe39

Refactor loop-video classname

87bee90

Fix bug that hid cinemagraphs

25b02ab

fix showSubtitles flag

a690a4a

Invert video hover styles for loop/cinemagraph

3554a19

domlander force-pushed the doml/cinemagraph branch from 8bc8a72 to 3554a19 Compare November 24, 2025 10:06

domlander added the run_chromatic Runs chromatic when label is applied label Nov 24, 2025

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 24, 2025

domlander merged commit 73a7410 into main Nov 24, 2025
32 checks passed

domlander deleted the doml/cinemagraph branch November 24, 2025 10:37

gu-prout bot added Pending-on-PROD Seen-on-PROD and removed Pending-on-PROD labels Nov 24, 2025

Cinemagraphs #14826

Cinemagraphs #14826

Uh oh!

Conversation

domlander commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Why?

Screenshots

Note: the cursor is a pointer when not in Screenshare mode

Uh oh!

github-actions bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 12, 2025

Uh oh!

abeddow91 left a comment • 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!

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!

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!

abeddow91 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gu-prout bot commented Nov 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

domlander commented Nov 12, 2025 •

edited

Loading

github-actions bot commented Nov 12, 2025 •

edited

Loading

github-actions bot commented Nov 12, 2025 •

edited

Loading

abeddow91 left a comment •

edited

Loading