Skip to content

Use optimal self-hosted video for user by width #15561

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

Open
domlander wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Use optimal self-hosted video for user by width #15561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
47a7943
Select best self-hosted video for user
domlander Mar 25, 2026
24b463d
Refactor extracting sources from assets to deduplicate logic
domlander Mar 25, 2026
3117089
Deduplicate aspect ratio calculations, and add comment to explain why
domlander Mar 25, 2026
1ee76f9
Rename function. Add test.
domlander Mar 25, 2026
1176f39
Improve clarity of sort algorithm
domlander Mar 25, 2026
0fec225
Use reducer over sort for findOptimalSource function
domlander Mar 26, 2026
980981f
Remove test comments
domlander Mar 26, 2026
eb833f3
Use aspect ratio defined on source, rather than calculating from dime…
domlander Mar 26, 2026
b735be8
gen schemas
domlander Mar 26, 2026
1bc47ee
Combine reduce and map in extractValidSources func
domlander Mar 26, 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
14 changes: 12 additions & 2 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 @@ -19,6 +19,7 @@ import type { CustomPlayEventDetail, Source } from '../lib/video';
import {
customSelfHostedVideoPlayAudioEventName,
customYoutubePlayEventName,
findOptimisedSourcePerMimeType,
} from '../lib/video';
import { palette } from '../palette';
import type { RoleType } from '../types/content';
Expand Down Expand Up @@ -312,6 +313,7 @@ export const SelfHostedVideo = ({
const [hasTrackedPlay, setHasTrackedPlay] = useState(false);
const [width, setWidth] = useState<number | undefined>();
const [height, setHeight] = useState<number | undefined>();
const [optimisedSources, setOptimisedSources] = useState<Source[]>(sources);

const isWeb = renderingTarget === 'Web';
const isApps = renderingTarget === 'Apps';
Expand Down Expand Up @@ -428,12 +430,20 @@ export const SelfHostedVideo = ({
* Setup.
*
* 1. Determine whether we can autoplay video.
* 2. Use the best video size available for the user's screen size
* 2. Initialise Ophan attention tracking.
* 3. Creates event listeners to control playback when there are multiple videos.
*/
useEffect(() => {
setIsAutoplayAllowed(doesUserPermitAutoplay());

const screenWidth = window.innerWidth;
const filteredSources = findOptimisedSourcePerMimeType(
sources,
screenWidth,
);
setOptimisedSources(filteredSources);

/**
* Initialise Ophan attention tracking
*/
Expand Down Expand Up @@ -526,7 +536,7 @@ export const SelfHostedVideo = ({
handlePageBecomesVisible();
});
};
}, [uniqueId, atomId, renderingTarget, ophanVideoStyle]);
}, [uniqueId, atomId, sources, renderingTarget, ophanVideoStyle]);

/**
* Track the first time the video comes into view.
Expand Down Expand Up @@ -857,7 +867,7 @@ export const SelfHostedVideo = ({
)}
>
<SelfHostedVideoPlayer
sources={sources}
sources={optimisedSources}
atomId={atomId}
uniqueId={uniqueId}
aspectRatio={aspectRatio}
Expand Down
2 changes: 1 addition & 1 deletion dotcom-rendering/src/components/SelfHostedVideo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const meta = {
https://storybook.thegulocal.com/ instead of localhost, as CORS
is enabled for self-hosted video.
</p>
<SelfHostedVideo {...args} />,
<SelfHostedVideo {...args} />
</div>
),
parameters: {
Expand Down
13 changes: 5 additions & 8 deletions dotcom-rendering/src/components/SelfHostedVideoInArticle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import type { FEAspectRatio } from '../frontend/feFront';
import type { ArticleFormat } from '../lib/articleFormat';
import {
convertAssetsToVideoSources,
DEFAULT_ASPECT_RATIO,
extractValidSourcesFromAssets,
getAspectRatioFromSources,
getSubtitleAsset,
} from '../lib/video';
import type { MediaAtomBlockElement, RoleType } from '../types/content';
Expand All @@ -28,7 +28,8 @@ export const SelfHostedVideoInArticle = ({
const posterImageUrl = element.posterImage?.[0]?.url;
const caption = element.title;

const sources = convertAssetsToVideoSources(element.assets);
const sources = extractValidSourcesFromAssets(element.assets);
const aspectRatio = getAspectRatioFromSources(sources);
const firstVideoSource = sources[0];

if (!posterImageUrl) {
Expand All @@ -46,11 +47,7 @@ export const SelfHostedVideoInArticle = ({
}
fallbackImageLoading="lazy"
fallbackImageSize="small"
aspectRatio={
firstVideoSource
? firstVideoSource.width / firstVideoSource.height
: DEFAULT_ASPECT_RATIO
}
aspectRatio={aspectRatio}
linkTo="Article-embed-MediaAtomBlockElement"
posterImage={posterImageUrl}
sources={sources}
Expand Down
40 changes: 20 additions & 20 deletions dotcom-rendering/src/frontend/schemas/feFootballMatchInfoPage.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,16 @@
"matchInfo": {
"anyOf": [
{
"$ref": "#/definitions/{type:\"LiveMatch\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};status:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}"
"$ref": "#/definitions/{id:string;type:\"LiveMatch\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};status:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}"
},
{
"$ref": "#/definitions/{type:\"Fixture\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};venue?:{name:string;id:string;};comments?:string;competition?:{name:string;id:string;};}"
"$ref": "#/definitions/{id:string;type:\"Fixture\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};venue?:{name:string;id:string;};comments?:string;competition?:{name:string;id:string;};}"
},
{
"$ref": "#/definitions/{type:\"MatchDay\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};liveMatch:boolean;result:boolean;previewAvailable:boolean;reportAvailable:boolean;lineupsAvailable:boolean;matchStatus:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};competition?:{name:string;id:string;};}"
"$ref": "#/definitions/{id:string;type:\"MatchDay\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};liveMatch:boolean;result:boolean;previewAvailable:boolean;reportAvailable:boolean;lineupsAvailable:boolean;matchStatus:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};competition?:{name:string;id:string;};}"
},
{
"$ref": "#/definitions/{type:\"Result\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};reportAvailable:boolean;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}"
"$ref": "#/definitions/{id:string;type:\"Result\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};reportAvailable:boolean;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}"
}
]
},
Expand Down Expand Up @@ -975,16 +975,16 @@
"eventType"
]
},
"{type:\"LiveMatch\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};status:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}": {
"{id:string;type:\"LiveMatch\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};status:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"type": {
"type": "string",
"const": "LiveMatch"
},
"id": {
"type": "string"
},
"stage": {
"$ref": "#/definitions/{stageNumber:string;}"
},
Expand Down Expand Up @@ -1113,16 +1113,16 @@
"name"
]
},
"{type:\"Fixture\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};venue?:{name:string;id:string;};comments?:string;competition?:{name:string;id:string;};}": {
"{id:string;type:\"Fixture\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};venue?:{name:string;id:string;};comments?:string;competition?:{name:string;id:string;};}": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"type": {
"type": "string",
"const": "Fixture"
},
"id": {
"type": "string"
},
"stage": {
"$ref": "#/definitions/{stageNumber:string;}"
},
Expand Down Expand Up @@ -1177,16 +1177,16 @@
"name"
]
},
"{type:\"MatchDay\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};liveMatch:boolean;result:boolean;previewAvailable:boolean;reportAvailable:boolean;lineupsAvailable:boolean;matchStatus:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};competition?:{name:string;id:string;};}": {
"{id:string;type:\"MatchDay\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};liveMatch:boolean;result:boolean;previewAvailable:boolean;reportAvailable:boolean;lineupsAvailable:boolean;matchStatus:string;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};competition?:{name:string;id:string;};}": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"type": {
"type": "string",
"const": "MatchDay"
},
"id": {
"type": "string"
},
"stage": {
"$ref": "#/definitions/{stageNumber:string;}"
},
Expand Down Expand Up @@ -1256,16 +1256,16 @@
"type"
]
},
"{type:\"Result\";id:string;stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};reportAvailable:boolean;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}": {
"{id:string;type:\"Result\";stage:{stageNumber:string;};date:string;round:{roundNumber:string;name?:string;};leg:string;homeTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};awayTeam:{name:string;id:string;score?:number;htScore?:number;aggregateScore?:number;scorers?:string;};reportAvailable:boolean;venue?:{name:string;id:string;};comments?:string;attendance?:string;referee?:{name:string;id:string;};}": {
"type": "object",
"properties": {
"id": {
"type": "string"
},
"type": {
"type": "string",
"const": "Result"
},
"id": {
"type": "string"
},
"stage": {
"$ref": "#/definitions/{stageNumber:string;}"
},
Expand Down
Loading
Loading