Skip to content

Commit 9d9cb06

Browse files
abeddow91abeddow91
authored
Add an opt in 0% test for enabling CORS on looping videos. (#14795)
1 parent 5ae8ca5 commit 9d9cb06

File tree

7 files changed

+53
-0
lines changed

7 files changed

+53
-0
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,8 @@ export type Props = {
160160
headlinePosition?: 'inner' | 'outer';
161161
/** Feature flag for the labs redesign work */
162162
showLabsRedesign?: boolean;
163+
/** Feature flag for the enabling CORS loading on looping video */
164+
enableLoopVideoCORS?: boolean;
163165
};
164166

165167
const starWrapper = (cardHasImage: boolean) => css`
@@ -403,6 +405,7 @@ export const Card = ({
403405
showKickerImage = false,
404406
headlinePosition = 'inner',
405407
showLabsRedesign = false,
408+
enableLoopVideoCORS = false,
406409
}: Props) => {
407410
const hasSublinks = supportingContent && supportingContent.length > 0;
408411
const sublinkPosition = decideSublinkPosition(
@@ -950,6 +953,7 @@ export const Card = ({
950953
fallbackImageAlt={media.imageAltText}
951954
fallbackImageAspectRatio="5:4"
952955
linkTo={linkTo}
956+
enableLoopVideoCORS={enableLoopVideoCORS}
953957
/>
954958
</Island>
955959
)}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ type Props = {
4949
containerLevel?: DCRContainerLevel;
5050
/** Feature flag for the labs redesign work */
5151
showLabsRedesign?: boolean;
52+
/** Feature flag for the enabling CORS loading on looping video */
53+
enableLoopVideoCORS: boolean;
5254
};
5355

5456
export const DecideContainer = ({
@@ -65,6 +67,7 @@ export const DecideContainer = ({
6567
collectionId,
6668
containerLevel,
6769
showLabsRedesign = false,
70+
enableLoopVideoCORS = false,
6871
}: Props) => {
6972
switch (containerType) {
7073
case 'dynamic/fast':
@@ -248,6 +251,7 @@ export const DecideContainer = ({
248251
aspectRatio={aspectRatio}
249252
collectionId={collectionId}
250253
showLabsRedesign={!!showLabsRedesign}
254+
enableLoopVideoCORS={enableLoopVideoCORS}
251255
/>
252256
);
253257
case 'flexible/general':
@@ -262,6 +266,7 @@ export const DecideContainer = ({
262266
containerLevel={containerLevel}
263267
collectionId={collectionId}
264268
showLabsRedesign={!!showLabsRedesign}
269+
enableLoopVideoCORS={enableLoopVideoCORS}
265270
/>
266271
);
267272
case 'scrollable/small':

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ type Props = {
3434
collectionId: number;
3535
/** Feature flag for the labs redesign work */
3636
showLabsRedesign?: boolean;
37+
/** Feature flag for the enabling CORS loading on looping video */
38+
enableLoopVideoCORS?: boolean;
3739
};
3840

3941
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -248,6 +250,8 @@ type SplashCardLayoutProps = {
248250
collectionId: number;
249251
/** Feature flag for the labs redesign work */
250252
showLabsRedesign?: boolean;
253+
/** Feature flag for the enabling CORS loading on looping video */
254+
enableLoopVideoCORS?: boolean;
251255
};
252256

253257
const SplashCardLayout = ({
@@ -261,6 +265,7 @@ const SplashCardLayout = ({
261265
containerLevel,
262266
collectionId,
263267
showLabsRedesign,
268+
enableLoopVideoCORS,
264269
}: SplashCardLayoutProps) => {
265270
const card = cards[0];
266271
if (!card) return null;
@@ -344,6 +349,7 @@ const SplashCardLayout = ({
344349
showKickerImage={card.format.design === ArticleDesign.Audio}
345350
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
346351
showLabsRedesign={showLabsRedesign}
352+
enableLoopVideoCORS={enableLoopVideoCORS}
347353
/>
348354
</LI>
349355
</UL>
@@ -408,6 +414,8 @@ type FullWidthCardLayoutProps = {
408414
collectionId: number;
409415
/** Feature flag for the labs redesign work */
410416
showLabsRedesign?: boolean;
417+
/** Feature flag for the enabling CORS loading on looping video */
418+
enableLoopVideoCORS?: boolean;
411419
};
412420

413421
const FullWidthCardLayout = ({
@@ -422,6 +430,7 @@ const FullWidthCardLayout = ({
422430
containerLevel,
423431
collectionId,
424432
showLabsRedesign,
433+
enableLoopVideoCORS,
425434
}: FullWidthCardLayoutProps) => {
426435
const card = cards[0];
427436
if (!card) return null;
@@ -496,6 +505,7 @@ const FullWidthCardLayout = ({
496505
canPlayInline={true}
497506
showKickerImage={card.format.design === ArticleDesign.Audio}
498507
showLabsRedesign={showLabsRedesign}
508+
enableLoopVideoCORS={enableLoopVideoCORS}
499509
/>
500510
</LI>
501511
</UL>
@@ -515,6 +525,8 @@ type HalfWidthCardLayoutProps = {
515525
containerLevel: DCRContainerLevel;
516526
/** Feature flag for the labs redesign work */
517527
showLabsRedesign?: boolean;
528+
/** Feature flag for the enabling CORS loading on looping video */
529+
enableLoopVideoCORS?: boolean;
518530
};
519531

520532
const HalfWidthCardLayout = ({
@@ -529,6 +541,7 @@ const HalfWidthCardLayout = ({
529541
isLastRow,
530542
containerLevel,
531543
showLabsRedesign,
544+
enableLoopVideoCORS,
532545
}: HalfWidthCardLayoutProps) => {
533546
if (cards.length === 0) return null;
534547

@@ -584,6 +597,7 @@ const HalfWidthCardLayout = ({
584597
headlineSizes={undefined}
585598
canPlayInline={false}
586599
showLabsRedesign={showLabsRedesign}
600+
enableLoopVideoCORS={enableLoopVideoCORS}
587601
/>
588602
</LI>
589603
);
@@ -602,6 +616,7 @@ export const FlexibleGeneral = ({
602616
containerLevel = 'Primary',
603617
collectionId,
604618
showLabsRedesign,
619+
enableLoopVideoCORS,
605620
}: Props) => {
606621
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
607622
...snap,
@@ -631,6 +646,7 @@ export const FlexibleGeneral = ({
631646
containerLevel={containerLevel}
632647
collectionId={collectionId}
633648
showLabsRedesign={showLabsRedesign}
649+
enableLoopVideoCORS={enableLoopVideoCORS}
634650
/>
635651
)}
636652
{groupedCards.map((row, i) => {
@@ -650,6 +666,7 @@ export const FlexibleGeneral = ({
650666
containerLevel={containerLevel}
651667
collectionId={collectionId}
652668
showLabsRedesign={showLabsRedesign}
669+
enableLoopVideoCORS={enableLoopVideoCORS}
653670
/>
654671
);
655672

@@ -670,6 +687,7 @@ export const FlexibleGeneral = ({
670687
isLastRow={i === groupedCards.length - 1}
671688
containerLevel={containerLevel}
672689
showLabsRedesign={showLabsRedesign}
690+
enableLoopVideoCORS={enableLoopVideoCORS}
673691
/>
674692
);
675693
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ type Props = {
3131
containerLevel?: DCRContainerLevel;
3232
collectionId: number;
3333
showLabsRedesign?: boolean;
34+
/** Feature flag for the enabling CORS loading on looping video */
35+
enableLoopVideoCORS?: boolean;
3436
};
3537

3638
type BoostProperties = {
@@ -128,6 +130,8 @@ type OneCardLayoutProps = {
128130
containerLevel: DCRContainerLevel;
129131
isSplashCard?: boolean;
130132
showLabsRedesign?: boolean;
133+
/** Feature flag for the enabling CORS loading on looping video */
134+
enableLoopVideoCORS?: boolean;
131135
};
132136

133137
export const OneCardLayout = ({
@@ -142,6 +146,7 @@ export const OneCardLayout = ({
142146
containerLevel,
143147
isSplashCard,
144148
showLabsRedesign,
149+
enableLoopVideoCORS,
145150
}: OneCardLayoutProps) => {
146151
const card = cards[0];
147152
if (!card) return null;
@@ -194,6 +199,7 @@ export const OneCardLayout = ({
194199
showKickerImage={card.format.design === ArticleDesign.Audio}
195200
headlinePosition={isSplashCard ? 'outer' : 'inner'}
196201
showLabsRedesign={showLabsRedesign}
202+
enableLoopVideoCORS={enableLoopVideoCORS}
197203
/>
198204
</LI>
199205
</UL>
@@ -297,6 +303,7 @@ export const FlexibleSpecial = ({
297303
containerLevel = 'Primary',
298304
collectionId,
299305
showLabsRedesign,
306+
enableLoopVideoCORS,
300307
}: Props) => {
301308
const snaps = [...groupedTrails.snap].slice(0, 1).map((snap) => ({
302309
...snap,
@@ -341,6 +348,7 @@ export const FlexibleSpecial = ({
341348
containerLevel={containerLevel}
342349
isSplashCard={true}
343350
showLabsRedesign={showLabsRedesign}
351+
enableLoopVideoCORS={enableLoopVideoCORS}
344352
/>
345353
)}
346354

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,8 @@ type Props = {
117117
fallbackImageAlt: CardPictureProps['alt'];
118118
fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
119119
linkTo: string;
120+
/** Feature flag for the enabling CORS loading on looping video */
121+
enableLoopVideoCORS?: boolean;
120122
};
121123

122124
export const LoopVideo = ({
@@ -132,6 +134,7 @@ export const LoopVideo = ({
132134
fallbackImageAlt,
133135
fallbackImageAspectRatio,
134136
linkTo,
137+
enableLoopVideoCORS = false,
135138
}: Props) => {
136139
const adapted = useShouldAdapt();
137140
const { renderingTarget } = useConfig();
@@ -635,6 +638,7 @@ export const LoopVideo = ({
635638
AudioIcon={hasAudio ? AudioIcon : null}
636639
preloadPartialData={preloadPartialData}
637640
showPlayIcon={showPlayIcon}
641+
enableLoopVideoCORS={enableLoopVideoCORS}
638642
/>
639643
</figure>
640644
);

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@ type Props = {
9797
posterImage?: string;
9898
preloadPartialData: boolean;
9999
showPlayIcon: boolean;
100+
/** Feature flag for the enabling CORS loading on looping video */
101+
enableLoopVideoCORS: boolean;
100102
};
101103

102104
/**
@@ -128,6 +130,7 @@ export const LoopVideoPlayer = forwardRef(
128130
AudioIcon,
129131
preloadPartialData,
130132
showPlayIcon,
133+
enableLoopVideoCORS,
131134
}: Props,
132135
ref: React.ForwardedRef<HTMLVideoElement>,
133136
) => {
@@ -138,6 +141,9 @@ export const LoopVideoPlayer = forwardRef(
138141
{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Captions will be considered later. */}
139142
<video
140143
id={loopVideoId}
144+
{...(enableLoopVideoCORS
145+
? { crossOrigin: 'anonymous' }
146+
: {})}
141147
css={videoStyles(width, height)}
142148
ref={ref}
143149
tabIndex={0}

‎dotcom-rendering/src/layouts/FrontLayout.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,11 +191,17 @@ export const FrontLayout = ({ front, NAV }: Props) => {
191191
)}
192192
frontId={front.pressedPage.id}
193193
collectionId={0}
194+
enableLoopVideoCORS={false}
194195
/>
195196
)
196197
);
197198
};
198199

200+
/** We allow the video to set crossOrigin={"anonymous"} CORS redesign
201+
* if the user is opted into the 0% server side test
202+
*/
203+
const enableLoopVideoCORS = abTests.loopVideoLoadVariant === 'variant';
204+
199205
return (
200206
<>
201207
<div data-print-layout="hide" id="bannerandheader">
@@ -487,6 +493,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
487493
collection.containerLevel
488494
}
489495
showLabsRedesign={showLabsRedesign}
496+
enableLoopVideoCORS={false}
490497
/>
491498
</LabsSection>
492499

@@ -609,6 +616,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
609616
collectionId={index + 1}
610617
containerLevel={collection.containerLevel}
611618
showLabsRedesign={showLabsRedesign}
619+
enableLoopVideoCORS={enableLoopVideoCORS}
612620
/>
613621
</FrontSection>
614622

0 commit comments

Comments
 (0)