Use optimal self-hosted video for user by width by domlander · Pull Request #15561 · guardian/dotcom-rendering

domlander · 2026-03-19T12:09:23Z

What does this change?

Selects the optimal video from the list of video sources. Selects the best set of dimensions for the users screen size.

Use the same logic when extracting sources from assets for both fronts and articles.

Why?

To serve smaller videos to users without any reduction in video quality.

Logic for extracting sources is likely to be the same for both fronts and articles. Combining the logic into one function ensures that changes to one will affect the other.

github-actions · 2026-03-19T12:13:08Z

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

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-03-23T15:24:06Z

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

All deployment options

From guardian/actions-riff-raff.

dotcom-rendering/src/lib/video.test.ts

github-actions · 2026-03-25T09:37:15Z

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.

domlander · 2026-03-25T16:31:30Z

dotcom-rendering/src/frontend/schemas/feFootballMatchInfoPage.json

                "footballMatch": {
                    "$ref": "#/definitions/{id:string;homeTeam:{name:string;id:string;scorers:string[];codename:string;players:{name:string;id:string;position:string;lastName:string;substitute:boolean;timeOnPitch:string;shirtNumber:string;events:{eventTime:string;eventType:string;}[];}[];possession:number;shotsOn:number;shotsOff:number;corners:number;fouls:number;colours:string;crest:string;score?:number;};awayTeam:{name:string;id:string;scorers:string[];codename:string;players:{name:string;id:string;position:string;lastName:string;substitute:boolean;timeOnPitch:string;shirtNumber:string;events:{eventTime:string;eventType:string;}[];}[];possession:number;shotsOn:number;shotsOff:number;corners:number;fouls:number;colours:string;crest:string;score?:number;};status:string;comments?:string;}"
                },
                "matchInfo": {


Please ignore these changes - these are temporary to allow CI to run. It is not intended that these will be a part of this PR when it gets merged.

davidfurey

Great to share this code between articles and fronts. Sorry, I haven't reviewed the whole thing but have made a couple of comments.

davidfurey · 2026-03-25T16:46:02Z

dotcom-rendering/src/lib/video.ts

+	const orderedSources = sources.sort((a, b) => {
+		if (a.width < screenWidth && b.width < screenWidth) {
+			return a.width < b.width ? 1 : -1;
+		}
+		if (a.width > screenWidth && b.width > screenWidth) {
+			return a.width > b.width ? 1 : -1;
+		}
+		return a.width < screenWidth ? 1 : -1;
+	});
+


It has taken quite a while for me to convince myself this works. If it is obvious to others then I'll take it as a learning. If not, can you express this in a more obvious way?

Yeah, that's a good point. I have tried to make it a bit clearer to what is going on, but I find that sorting algorithms are inherently complicated in Typescript, with their a's and b's and -1 meaning "put that one first", instead of 1. I have included plenty of tests to assert that this algorithm is working correctly, so hopefully that helps.

dotcom-rendering/src/lib/video.ts

davidfurey · 2026-03-25T21:03:59Z

dotcom-rendering/src/lib/video.ts

+
+	return orderedSources[0];
+};


Is it easier to reason about if you remove the sort entirely?

Suggested change

return orderedSources[0];

};

const findOptimalSource = (

sources: Source[],

screenWidth: number,

): Source | undefined => {

if (sources.length === 0) return undefined;

return sources.reduce((a, b) => {

if (a.width < screenWidth || b.width < screenWidth) {

return a.width > b.width ? a : b; // take the larger source

} else {

return a.width < b.width ? a : b; // take the smaller source

}

});

};

Ahh good idea. I agree a reducer over a sort makes a lot more sense

dotcom-rendering/src/lib/video.test.ts

abeddow91 · 2026-03-25T16:58:01Z

dotcom-rendering/src/lib/video.ts

+		return DEFAULT_ASPECT_RATIO;
+	}
+
+	return firstSource.width / firstSource.height;


Why have you opted to calculate the aspect ratio rather than taking it from the video asset?

Good point. I'll convert the string into a number, so that the aspect ratio defined on the video source is the source of truth for the aspect ratio passed into the component.

…nsions

domlander self-assigned this Mar 19, 2026

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

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 19, 2026

domlander force-pushed the doml/sh-optimise-video-source branch from fa4b4f0 to be2b4d6 Compare March 23, 2026 15:22

domlander force-pushed the doml/sh-optimise-video-source branch from be2b4d6 to 0e973f4 Compare March 23, 2026 15:48

domlander changed the title ~~WIP Pick best self-hosted video for user by dimensions~~ Use optimal self-hosted video for user by width Mar 23, 2026

domlander added the run_chromatic Runs chromatic when label is applied label Mar 23, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 23, 2026

abeddow91 reviewed Mar 23, 2026

View reviewed changes

dotcom-rendering/src/lib/video.test.ts Outdated Show resolved Hide resolved

domlander force-pushed the doml/sh-optimise-video-source branch from 0e973f4 to 24275c2 Compare March 25, 2026 09:29

domlander added the run_chromatic Runs chromatic when label is applied label Mar 25, 2026