Skip to content

Commit 071aa7f

Browse files
domlanderdomlander
committed
Display non-5:4 videos correctly
1 parent 73a7410 commit 071aa7f

File tree

10 files changed

+130
-72
lines changed

10 files changed

+130
-72
lines changed

‎dotcom-rendering/fixtures/manual/trails.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -648,7 +648,7 @@ export const newsletterTrails: [DCRFrontCard, DCRFrontCard] = [
648648
},
649649
];
650650

651-
export const selfHostedVideoCard: DCRFrontCard = {
651+
export const selfHostedVideo54Card = {
652652
...defaultCardProps,
653653
dataLinkName: 'news | group-0 | card-@2',
654654
url: '/uk-news/2025/jan/22/prince-harry-says-sun-publisher-made-historic-admission-as-he-settles-case',
@@ -664,7 +664,7 @@ export const selfHostedVideoCard: DCRFrontCard = {
664664
src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
665665
},
666666
],
667-
duration: 0,
667+
duration: 30,
668668
width: 500,
669669
height: 400,
670670
image: 'https://media.guim.co.uk/6537e163c9164d25ec6102641f6a04fa5ba76560/0_210_5472_3283/master/5472.jpg',
@@ -673,7 +673,22 @@ export const selfHostedVideoCard: DCRFrontCard = {
673673
src: 'https://media.guim.co.uk/966bf085fb982b1103aaba42a812b09726cc0a3c/1417_104_1378_1104/master/1378.jpg',
674674
altText: 'Wyatt Russell and Florence Pugh in Thunderbolts*.',
675675
},
676-
};
676+
} satisfies DCRFrontCard;
677+
678+
export const selfHostedVerticalVideoCard = {
679+
...selfHostedVideo54Card,
680+
mainMedia: {
681+
...selfHostedVideo54Card.mainMedia,
682+
sources: [
683+
{
684+
mimeType: 'video/mp4',
685+
src: 'https://uploads.guimcode.co.uk/2025/11/12/5x4_test--ee49513c-bf16-4321-a444-09c9a037d584-4.0.mp4',
686+
},
687+
],
688+
width: 406,
689+
height: 720,
690+
},
691+
} satisfies DCRFrontCard;
677692

678693
export const slideshowCard: DCRFrontCard = {
679694
...defaultCardProps,

‎dotcom-rendering/src/components/FlexibleGeneral.stories.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import {
66
galleryTrails,
77
getSublinks,
88
opinionTrails,
9-
selfHostedVideoCard,
9+
selfHostedVerticalVideoCard,
10+
selfHostedVideo54Card,
1011
slideshowCard,
1112
trails,
1213
videoTrails,
@@ -542,14 +543,24 @@ export const ImmersiveCardsSplashAndStandard: Story = {
542543
},
543544
};
544545

545-
export const SelfHostedVideoCards: Story = {
546-
name: 'Self-hosted video cards',
546+
export const SelfHostedVideo5to4Cards: Story = {
547+
name: 'Self-hosted 5:4 video cards',
547548
args: {
548-
frontSectionTitle: 'Self-hosted video cards',
549+
frontSectionTitle: 'Self-hosted 5:4 video cards',
549550
groupedTrails: {
550551
...emptyGroupedTrails,
551-
splash: [selfHostedVideoCard],
552-
standard: [selfHostedVideoCard], // Self-hosted video is disabled at standard card size
552+
splash: [selfHostedVideo54Card],
553+
standard: [selfHostedVideo54Card], // Self-hosted video is disabled at standard card size
554+
},
555+
},
556+
};
557+
export const SelfHostedVerticalVideoCards: Story = {
558+
name: 'Self-hosted vertical video cards',
559+
args: {
560+
frontSectionTitle: 'Self-hosted vertical video cards',
561+
groupedTrails: {
562+
...emptyGroupedTrails,
563+
splash: [selfHostedVerticalVideoCard],
553564
},
554565
},
555566
};

‎dotcom-rendering/src/components/FlexibleSpecial.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-webpack5';
33
import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
44
import {
55
opinionTrails,
6-
selfHostedVideoCard,
6+
selfHostedVideo54Card,
77
slideshowCard,
88
snapLink,
99
trails,
@@ -287,7 +287,7 @@ export const SelfHostedVideoCard: Story = {
287287
groupedTrails: {
288288
...emptyGroupedTrails,
289289
snap: [],
290-
standard: [selfHostedVideoCard],
290+
standard: [selfHostedVideo54Card],
291291
},
292292
collectionId: 1,
293293
},

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

Lines changed: 53 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
customSelfHostedVideoPlayAudioEventName,
1919
customYoutubePlayEventName,
2020
} from '../lib/video';
21+
import { palette } from '../palette';
2122
import type { VideoPlayerFormat } from '../types/mainMedia';
2223
import { CardPicture, type Props as CardPictureProps } from './CardPicture';
2324
import { useConfig } from './ConfigContext';
@@ -29,9 +30,18 @@ import type {
2930
import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
3031
import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
3132

32-
const videoContainerStyles = css`
33+
const videoAndBackgroundStyles = css`
34+
position: relative;
35+
display: flex;
36+
justify-content: space-around;
3337
z-index: ${getZIndex('video-container')};
38+
background-color: ${palette('--video-background')};
39+
`;
40+
41+
const videoContainerStyles = (width: number, height: number) => css`
3442
position: relative;
43+
height: 100%;
44+
width: ${(width / height) * 80}%;
3545
`;
3646

3747
const cinemagraphContainerStyles = css`
@@ -662,45 +672,47 @@ export const SelfHostedVideo = ({
662672
: undefined;
663673

664674
return (
665-
<figure
666-
ref={setNode}
667-
css={[
668-
videoContainerStyles,
669-
isCinemagraph && cinemagraphContainerStyles,
670-
]}
671-
className={`video-container ${videoStyle.toLocaleLowerCase()}`}
672-
data-component="gu-video-loop"
673-
>
674-
<SelfHostedVideoPlayer
675-
sources={sources}
676-
atomId={atomId}
677-
uniqueId={uniqueId}
678-
width={width}
679-
height={height}
680-
videoStyle={videoStyle}
681-
posterImage={optimisedPosterImage}
682-
FallbackImageComponent={FallbackImageComponent}
683-
currentTime={currentTime}
684-
setCurrentTime={setCurrentTime}
685-
ref={vidRef}
686-
isPlayable={isPlayable}
687-
playerState={playerState}
688-
isMuted={isMuted}
689-
handleLoadedMetadata={handleLoadedMetadata}
690-
handleLoadedData={handleLoadedData}
691-
handleCanPlay={handleCanPlay}
692-
handlePlayPauseClick={handlePlayPauseClick}
693-
handleAudioClick={handleAudioClick}
694-
handleKeyDown={handleKeyDown}
695-
handlePause={handlePause}
696-
onError={onError}
697-
AudioIcon={hasAudio ? AudioIcon : null}
698-
preloadPartialData={preloadPartialData}
699-
showPlayIcon={showPlayIcon}
700-
subtitleSize={subtitleSize}
701-
subtitleSource={subtitleSource}
702-
activeCue={activeCue}
703-
/>
704-
</figure>
675+
<div css={videoAndBackgroundStyles} className="loop-video-container">
676+
<figure
677+
ref={setNode}
678+
css={[
679+
videoContainerStyles(width, height),
680+
isCinemagraph && cinemagraphContainerStyles,
681+
]}
682+
className={`video-container ${videoStyle.toLocaleLowerCase()}`}
683+
data-component="gu-video-loop"
684+
>
685+
<SelfHostedVideoPlayer
686+
sources={sources}
687+
atomId={atomId}
688+
uniqueId={uniqueId}
689+
width={width}
690+
height={height}
691+
videoStyle={videoStyle}
692+
posterImage={optimisedPosterImage}
693+
FallbackImageComponent={FallbackImageComponent}
694+
currentTime={currentTime}
695+
setCurrentTime={setCurrentTime}
696+
ref={vidRef}
697+
isPlayable={isPlayable}
698+
playerState={playerState}
699+
isMuted={isMuted}
700+
handleLoadedMetadata={handleLoadedMetadata}
701+
handleLoadedData={handleLoadedData}
702+
handleCanPlay={handleCanPlay}
703+
handlePlayPauseClick={handlePlayPauseClick}
704+
handleAudioClick={handleAudioClick}
705+
handleKeyDown={handleKeyDown}
706+
handlePause={handlePause}
707+
onError={onError}
708+
AudioIcon={hasAudio ? AudioIcon : null}
709+
preloadPartialData={preloadPartialData}
710+
showPlayIcon={showPlayIcon}
711+
subtitleSource={subtitleSource}
712+
subtitleSize={subtitleSize}
713+
activeCue={activeCue}
714+
/>
715+
</figure>
716+
</div>
705717
);
706718
};

‎dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ const videoStyles = (width: number, height: number) => css`
3131
cursor: pointer;
3232
/* Prevents CLS by letting the browser know the space the video will take up. */
3333
aspect-ratio: ${width} / ${height};
34-
object-fit: cover;
3534
`;
3635

3736
const subtitleStyles = (subtitleSize: SubtitleSize | undefined) => css`

‎dotcom-rendering/src/frontend/feFront.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,10 @@ export interface FEMediaAtom {
128128
activeVersion?: number;
129129
videoPlayerFormat?: 'Default' | 'Loop' | 'Cinemagraph';
130130
// channelId?: string; // currently unused
131+
dimensions?: {
132+
width: number;
133+
height: number;
134+
};
131135
}
132136

133137
export type FEFrontCard = {

‎dotcom-rendering/src/frontend/schemas/feFront.json‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3240,13 +3240,20 @@
32403240
"activeVersion": {
32413241
"type": "number"
32423242
},
3243-
"videoPlayerFormat": {
3244-
"enum": [
3245-
"Cinemagraph",
3246-
"Default",
3247-
"Loop"
3248-
],
3249-
"type": "string"
3243+
"dimensions": {
3244+
"type": "object",
3245+
"properties": {
3246+
"width": {
3247+
"type": "number"
3248+
},
3249+
"height": {
3250+
"type": "number"
3251+
}
3252+
},
3253+
"required": [
3254+
"height",
3255+
"width"
3256+
]
32503257
}
32513258
},
32523259
"required": [
@@ -4085,4 +4092,4 @@
40854092
}
40864093
},
40874094
"$schema": "http://json-schema.org/draft-07/schema#"
4088-
}
4095+
}

‎dotcom-rendering/src/frontend/schemas/feTagPage.json‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1413,13 +1413,20 @@
14131413
"activeVersion": {
14141414
"type": "number"
14151415
},
1416-
"videoPlayerFormat": {
1417-
"enum": [
1418-
"Cinemagraph",
1419-
"Default",
1420-
"Loop"
1421-
],
1422-
"type": "string"
1416+
"dimensions": {
1417+
"type": "object",
1418+
"properties": {
1419+
"width": {
1420+
"type": "number"
1421+
},
1422+
"height": {
1423+
"type": "number"
1424+
}
1425+
},
1426+
"required": [
1427+
"height",
1428+
"width"
1429+
]
14231430
}
14241431
},
14251432
"required": [
@@ -1999,4 +2006,4 @@
19992006
}
20002007
},
20012008
"$schema": "http://json-schema.org/draft-07/schema#"
2002-
}
2009+
}

‎dotcom-rendering/src/model/enhanceCards.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -249,9 +249,8 @@ export const getActiveMediaAtom = (
249249
})),
250250
subtitleSource: subtitleAsset?.id,
251251
duration: mediaAtom.duration ?? 0,
252-
// Size fixed to a 5:4 ratio
253-
width: 500,
254-
height: 400,
252+
width: mediaAtom.dimensions?.width ?? 500,
253+
height: mediaAtom.dimensions?.height ?? 400,
255254
image,
256255
};
257256
}

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8137,6 +8137,10 @@ const paletteColours = {
81378137
light: () => sourcePalette.neutral[60],
81388138
dark: () => sourcePalette.neutral[60],
81398139
},
8140+
'--video-background': {
8141+
light: () => sourcePalette.neutral[93],
8142+
dark: () => sourcePalette.neutral[93],
8143+
},
81408144
'--video-progress-bar-background': {
81418145
light: () => transparentColour(sourcePalette.neutral[7], 0.7),
81428146
dark: () => transparentColour(sourcePalette.neutral[7], 0.7),

0 commit comments

Comments
 (0)