Skip to content

Commit d3d4c4f

Browse files
domlanderdomlander
authored
Merge pull request #14142 from guardian/doml/loop-video-audio
Mute other Looping Videos when playing audio
2 parents 8c777b8 + a5012c7 commit d3d4c4f

File tree

12 files changed

+226
-121
lines changed

12 files changed

+226
-121
lines changed

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,8 @@ export type Props = {
9696
avatarUrl?: string;
9797
showClock?: boolean;
9898
mainMedia?: MainMedia;
99-
/** Note YouTube recommends a minimum width of 480px @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-youtube-player-size
99+
/**
100+
* Note YouTube recommends a minimum width of 480px @see https://developers.google.com/youtube/terms/required-minimum-functionality#embedded-youtube-player-size
100101
* At 300px or below, the player will begin to lose functionality e.g. volume controls being omitted.
101102
* Youtube requires a minimum width 200px.
102103
*/
@@ -133,8 +134,14 @@ export type Props = {
133134
isTagPage?: boolean;
134135
/** Allows the consumer to set an aspect ratio on the image of 5:3, 5:4, 4:5 or 1:1 */
135136
aspectRatio?: AspectRatio;
137+
/** The index of the card in a carousel */
136138
index?: number;
137-
/** The Splash card in a flexible container gets a different visual treatment to other cards*/
139+
/**
140+
* Useful for videos. Has the form: collection-{collection ID}-{card grouping type}-{card index}
141+
* For example, the first splash card in the second collection would be: "collection-1-splash-0"
142+
*/
143+
uniqueId?: string;
144+
/** The Splash card in a flexible container gets a different visual treatment to other cards */
138145
isFlexSplash?: boolean;
139146
showTopBarDesktop?: boolean;
140147
showTopBarMobile?: boolean;
@@ -402,6 +409,7 @@ export const Card = ({
402409
isTagPage = false,
403410
aspectRatio,
404411
index = 0,
412+
uniqueId = '',
405413
isFlexSplash,
406414
showTopBarDesktop = true,
407415
showTopBarMobile = true,
@@ -896,7 +904,6 @@ export const Card = ({
896904
src={media.mainMedia.videoId}
897905
height={media.mainMedia.height}
898906
width={media.mainMedia.width}
899-
videoId={media.mainMedia.videoId}
900907
thumbnailImage={
901908
media.mainMedia.thumbnailImage ?? ''
902909
}
@@ -909,6 +916,7 @@ export const Card = ({
909916
aspectRatio={aspectRatio}
910917
/>
911918
}
919+
uniqueId={uniqueId}
912920
/>
913921
</Island>
914922
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ export const DecideContainer = ({
6464
collectionId,
6565
containerLevel,
6666
}: Props) => {
67-
// If you add a new container type which contains an MPU, you must also add it to
6867
switch (containerType) {
6968
case 'dynamic/fast':
7069
return (
@@ -255,6 +254,7 @@ export const DecideContainer = ({
255254
absoluteServerTimes={absoluteServerTimes}
256255
imageLoading={imageLoading}
257256
aspectRatio={aspectRatio}
257+
collectionId={collectionId}
258258
/>
259259
);
260260
case 'flexible/general':

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

Lines changed: 63 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,14 @@ export const decideCardPositions = (cards: DCRFrontCard[]): GroupedCards => {
8080
}, []);
8181
};
8282

83+
type ImmersiveCardLayoutProps = {
84+
card: DCRFrontCard;
85+
containerPalette?: DCRContainerPalette;
86+
absoluteServerTimes: boolean;
87+
imageLoading: Loading;
88+
collectionId: number;
89+
};
90+
8391
/**
8492
* ImmersiveCardLayout is a special case of the card layout that is used for cards with the isImmersive property.
8593
* It is a single feature card that takes up the full width of the container on all breakpoints.
@@ -92,17 +100,11 @@ const ImmersiveCardLayout = ({
92100
absoluteServerTimes,
93101
imageLoading,
94102
collectionId,
95-
}: {
96-
card: DCRFrontCard;
97-
containerPalette?: DCRContainerPalette;
98-
absoluteServerTimes: boolean;
99-
imageLoading: Loading;
100-
collectionId: number;
101-
}) => {
103+
}: ImmersiveCardLayoutProps) => {
102104
const isLoopingVideo = card.mainMedia?.type === 'LoopVideo';
103105

104106
return (
105-
<UL padBottom={true} key={card.url}>
107+
<UL padBottom={true}>
106108
<LI padSides={true}>
107109
<FeatureCard
108110
collectionId={collectionId}
@@ -229,6 +231,18 @@ const decideSplashCardProperties = (
229231
}
230232
};
231233

234+
type SplashCardLayoutProps = {
235+
cards: DCRFrontCard[];
236+
imageLoading: Loading;
237+
containerPalette?: DCRContainerPalette;
238+
showAge?: boolean;
239+
absoluteServerTimes: boolean;
240+
aspectRatio: AspectRatio;
241+
isLastRow: boolean;
242+
containerLevel: DCRContainerLevel;
243+
collectionId: number;
244+
};
245+
232246
const SplashCardLayout = ({
233247
cards,
234248
containerPalette,
@@ -239,17 +253,7 @@ const SplashCardLayout = ({
239253
isLastRow,
240254
containerLevel,
241255
collectionId,
242-
}: {
243-
cards: DCRFrontCard[];
244-
imageLoading: Loading;
245-
containerPalette?: DCRContainerPalette;
246-
showAge?: boolean;
247-
absoluteServerTimes: boolean;
248-
aspectRatio: AspectRatio;
249-
isLastRow: boolean;
250-
containerLevel: DCRContainerLevel;
251-
collectionId: number;
252-
}) => {
256+
}: SplashCardLayoutProps) => {
253257
const card = cards[0];
254258
if (!card) return null;
255259

@@ -380,6 +384,19 @@ const decideCardProperties = (
380384
}
381385
};
382386

387+
type FullWidthCardLayoutProps = {
388+
cards: DCRFrontCard[];
389+
imageLoading: Loading;
390+
containerPalette?: DCRContainerPalette;
391+
showAge?: boolean;
392+
absoluteServerTimes: boolean;
393+
aspectRatio: AspectRatio;
394+
isFirstRow: boolean;
395+
isLastRow: boolean;
396+
containerLevel: DCRContainerLevel;
397+
collectionId: number;
398+
};
399+
383400
const FullWidthCardLayout = ({
384401
cards,
385402
containerPalette,
@@ -391,18 +408,7 @@ const FullWidthCardLayout = ({
391408
isLastRow,
392409
containerLevel,
393410
collectionId,
394-
}: {
395-
cards: DCRFrontCard[];
396-
imageLoading: Loading;
397-
containerPalette?: DCRContainerPalette;
398-
showAge?: boolean;
399-
absoluteServerTimes: boolean;
400-
aspectRatio: AspectRatio;
401-
isFirstRow: boolean;
402-
isLastRow: boolean;
403-
containerLevel: DCRContainerLevel;
404-
collectionId: number;
405-
}) => {
411+
}: FullWidthCardLayoutProps) => {
406412
const card = cards[0];
407413
if (!card) return null;
408414

@@ -436,7 +442,6 @@ const FullWidthCardLayout = ({
436442
showTopBar={!isFirstRow}
437443
padBottom={!isLastRow}
438444
hasLargeSpacing={!isLastRow}
439-
key={card.url}
440445
>
441446
<LI
442447
padSides={true}
@@ -481,6 +486,19 @@ const FullWidthCardLayout = ({
481486
);
482487
};
483488

489+
type HalfWidthCardLayoutProps = {
490+
cards: DCRFrontCard[];
491+
imageLoading: Loading;
492+
isFirstRow?: boolean;
493+
isFirstStandardRow?: boolean;
494+
containerPalette?: DCRContainerPalette;
495+
showAge?: boolean;
496+
absoluteServerTimes: boolean;
497+
aspectRatio: AspectRatio;
498+
isLastRow: boolean;
499+
containerLevel: DCRContainerLevel;
500+
};
501+
484502
const HalfWidthCardLayout = ({
485503
cards,
486504
containerPalette,
@@ -490,22 +508,9 @@ const HalfWidthCardLayout = ({
490508
isFirstRow,
491509
isFirstStandardRow,
492510
aspectRatio,
493-
row,
494511
isLastRow,
495512
containerLevel,
496-
}: {
497-
cards: DCRFrontCard[];
498-
imageLoading: Loading;
499-
isFirstRow?: boolean;
500-
isFirstStandardRow?: boolean;
501-
containerPalette?: DCRContainerPalette;
502-
showAge?: boolean;
503-
absoluteServerTimes: boolean;
504-
aspectRatio: AspectRatio;
505-
row: number;
506-
isLastRow: boolean;
507-
containerLevel: DCRContainerLevel;
508-
}) => {
513+
}: HalfWidthCardLayoutProps) => {
509514
if (cards.length === 0) return null;
510515

511516
return (
@@ -516,7 +521,6 @@ const HalfWidthCardLayout = ({
516521
showTopBar={!isFirstRow}
517522
/** We use one full top bar for the first row and use a split one for subsequent rows */
518523
splitTopBar={!isFirstStandardRow}
519-
key={row}
520524
>
521525
{cards.map((card, cardIndex) => {
522526
return (
@@ -577,8 +581,16 @@ export const FlexibleGeneral = ({
577581
containerLevel = 'Primary',
578582
collectionId,
579583
}: Props) => {
580-
const splash = [...groupedTrails.splash].slice(0, 1);
581-
const cards = [...groupedTrails.standard].slice(0, 19);
584+
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
585+
...snap,
586+
uniqueId: `collection-${collectionId}-splash-0`,
587+
}));
588+
const cards = [...groupedTrails.standard]
589+
.slice(0, 19)
590+
.map((standard, i) => ({
591+
...standard,
592+
uniqueId: `collection-${collectionId}-standard-${i}`,
593+
}));
582594
const groupedCards = decideCardPositions(cards);
583595

584596
return (
@@ -612,6 +624,7 @@ export const FlexibleGeneral = ({
612624
isLastRow={i === groupedCards.length - 1}
613625
containerLevel={containerLevel}
614626
collectionId={collectionId}
627+
key={row.cards[0]?.uniqueId}
615628
/>
616629
);
617630

@@ -628,9 +641,9 @@ export const FlexibleGeneral = ({
628641
isFirstRow={!splash.length && i === 0}
629642
isFirstStandardRow={i === 0}
630643
aspectRatio={aspectRatio}
631-
row={i + 1}
632644
isLastRow={i === groupedCards.length - 1}
633645
containerLevel={containerLevel}
646+
key={row.cards[0]?.uniqueId}
634647
/>
635648
);
636649
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export const One: Story = {
127127
snap: [],
128128
standard: trails.slice(0, 1),
129129
},
130+
collectionId: 1,
130131
},
131132
};
132133
export const Two: Story = {
@@ -137,6 +138,7 @@ export const Two: Story = {
137138
snap: [],
138139
standard: trails.slice(0, 2),
139140
},
141+
collectionId: 1,
140142
},
141143
};
142144
export const Three: Story = {
@@ -147,6 +149,7 @@ export const Three: Story = {
147149
snap: [],
148150
standard: trails.slice(0, 3),
149151
},
152+
collectionId: 1,
150153
},
151154
};
152155
export const Four: Story = {
@@ -157,6 +160,7 @@ export const Four: Story = {
157160
snap: [],
158161
standard: trails.slice(0, 4),
159162
},
163+
collectionId: 1,
160164
},
161165
};
162166
export const Five: Story = {
@@ -167,6 +171,7 @@ export const Five: Story = {
167171
snap: [],
168172
standard: trails.slice(0, 5),
169173
},
174+
collectionId: 1,
170175
},
171176
};
172177
export const DefaultSplashWithImageSupression: Story = {
@@ -178,6 +183,7 @@ export const DefaultSplashWithImageSupression: Story = {
178183
snap: [],
179184
standard: [{ ...trails[0], image: undefined }],
180185
},
186+
collectionId: 1,
181187
},
182188
};
183189

@@ -190,6 +196,7 @@ export const BoostedSplashWithImageSupression: Story = {
190196
snap: [],
191197
standard: [{ ...trails[0], boostLevel: 'boost', image: undefined }],
192198
},
199+
collectionId: 1,
193200
},
194201
};
195202

@@ -204,6 +211,7 @@ export const MegaBoostedSplashWithImageSupression: Story = {
204211
{ ...trails[0], boostLevel: 'megaboost', image: undefined },
205212
],
206213
},
214+
collectionId: 1,
207215
},
208216
};
209217

@@ -218,6 +226,7 @@ export const GigaBoostedSplashWithImageSupression: Story = {
218226
{ ...trails[0], boostLevel: 'gigaboost', image: undefined },
219227
],
220228
},
229+
collectionId: 1,
221230
},
222231
};
223232

@@ -230,6 +239,7 @@ export const DefaultSplashWithLiveUpdates: Story = {
230239
snap: [],
231240
standard: [{ ...liveUpdatesCard }],
232241
},
242+
collectionId: 1,
233243
},
234244
};
235245

@@ -242,6 +252,7 @@ export const BoostedSplashWithLiveUpdates: Story = {
242252
snap: [],
243253
standard: [{ ...liveUpdatesCard, boostLevel: 'boost' }],
244254
},
255+
collectionId: 1,
245256
},
246257
};
247258

@@ -254,6 +265,7 @@ export const MegaBoostedSplashWithLiveUpdates: Story = {
254265
snap: [],
255266
standard: [{ ...liveUpdatesCard, boostLevel: 'megaboost' }],
256267
},
268+
collectionId: 1,
257269
},
258270
};
259271

@@ -266,6 +278,7 @@ export const GigaBoostedSplashWithLiveUpdates: Story = {
266278
snap: [],
267279
standard: [{ ...liveUpdatesCard, boostLevel: 'gigaboost' }],
268280
},
281+
collectionId: 1,
269282
},
270283
};
271284

@@ -293,6 +306,7 @@ export const WithSpecialPaletteVariations = {
293306
snap: [],
294307
standard: trails.slice(0, 5),
295308
},
309+
collectionId: 1,
296310
},
297311
render: (args) => (
298312
<>

0 commit comments

Comments
 (0)