Skip to content

Commit e6a8e7a

Browse files
abeddow91abeddow91
authored
Remove the cors feature switch so that all looping sources are requested with CORS (#14806)
1 parent 63e67ab commit e6a8e7a

File tree

7 files changed

+2
-61
lines changed

7 files changed

+2
-61
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,6 @@ export type Props = {
162162
headlinePosition?: 'inner' | 'outer';
163163
/** Feature flag for the labs redesign work */
164164
showLabsRedesign?: boolean;
165-
/** Feature flag for the enabling CORS loading on looping video */
166-
enableLoopVideoCORS?: boolean;
167165
};
168166

169167
const starWrapper = (cardHasImage: boolean) => css`
@@ -408,7 +406,6 @@ export const Card = ({
408406
headlinePosition = 'inner',
409407
showLabsRedesign = false,
410408
subtitleSize = 'small',
411-
enableLoopVideoCORS = false,
412409
}: Props) => {
413410
const hasSublinks = supportingContent && supportingContent.length > 0;
414411
const sublinkPosition = decideSublinkPosition(
@@ -960,7 +957,6 @@ export const Card = ({
960957
media.mainMedia.subtitleSource
961958
}
962959
subtitleSize={subtitleSize}
963-
enableLoopVideoCORS={enableLoopVideoCORS}
964960
/>
965961
</Island>
966962
)}

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,6 @@ 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;
5452
};
5553

5654
export const DecideContainer = ({
@@ -67,7 +65,6 @@ export const DecideContainer = ({
6765
collectionId,
6866
containerLevel,
6967
showLabsRedesign = false,
70-
enableLoopVideoCORS = false,
7168
}: Props) => {
7269
switch (containerType) {
7370
case 'dynamic/fast':
@@ -251,7 +248,6 @@ export const DecideContainer = ({
251248
aspectRatio={aspectRatio}
252249
collectionId={collectionId}
253250
showLabsRedesign={!!showLabsRedesign}
254-
enableLoopVideoCORS={enableLoopVideoCORS}
255251
/>
256252
);
257253
case 'flexible/general':
@@ -266,7 +262,6 @@ export const DecideContainer = ({
266262
containerLevel={containerLevel}
267263
collectionId={collectionId}
268264
showLabsRedesign={!!showLabsRedesign}
269-
enableLoopVideoCORS={enableLoopVideoCORS}
270265
/>
271266
);
272267
case 'scrollable/small':

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

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

4240
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -256,8 +254,6 @@ type SplashCardLayoutProps = {
256254
collectionId: number;
257255
/** Feature flag for the labs redesign work */
258256
showLabsRedesign?: boolean;
259-
/** Feature flag for the enabling CORS loading on looping video */
260-
enableLoopVideoCORS?: boolean;
261257
};
262258

263259
const SplashCardLayout = ({
@@ -271,7 +267,6 @@ const SplashCardLayout = ({
271267
containerLevel,
272268
collectionId,
273269
showLabsRedesign,
274-
enableLoopVideoCORS,
275270
}: SplashCardLayoutProps) => {
276271
const card = cards[0];
277272
if (!card) return null;
@@ -357,7 +352,6 @@ const SplashCardLayout = ({
357352
subtitleSize={subtitleSize}
358353
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
359354
showLabsRedesign={showLabsRedesign}
360-
enableLoopVideoCORS={enableLoopVideoCORS}
361355
/>
362356
</LI>
363357
</UL>
@@ -425,8 +419,6 @@ type FullWidthCardLayoutProps = {
425419
collectionId: number;
426420
/** Feature flag for the labs redesign work */
427421
showLabsRedesign?: boolean;
428-
/** Feature flag for the enabling CORS loading on looping video */
429-
enableLoopVideoCORS?: boolean;
430422
};
431423

432424
const FullWidthCardLayout = ({
@@ -441,7 +433,6 @@ const FullWidthCardLayout = ({
441433
containerLevel,
442434
collectionId,
443435
showLabsRedesign,
444-
enableLoopVideoCORS,
445436
}: FullWidthCardLayoutProps) => {
446437
const card = cards[0];
447438
if (!card) return null;
@@ -518,7 +509,6 @@ const FullWidthCardLayout = ({
518509
showKickerImage={card.format.design === ArticleDesign.Audio}
519510
showLabsRedesign={showLabsRedesign}
520511
subtitleSize={subtitleSize}
521-
enableLoopVideoCORS={enableLoopVideoCORS}
522512
/>
523513
</LI>
524514
</UL>
@@ -538,8 +528,6 @@ type HalfWidthCardLayoutProps = {
538528
containerLevel: DCRContainerLevel;
539529
/** Feature flag for the labs redesign work */
540530
showLabsRedesign?: boolean;
541-
/** Feature flag for the enabling CORS loading on looping video */
542-
enableLoopVideoCORS?: boolean;
543531
};
544532

545533
const HalfWidthCardLayout = ({
@@ -554,7 +542,6 @@ const HalfWidthCardLayout = ({
554542
isLastRow,
555543
containerLevel,
556544
showLabsRedesign,
557-
enableLoopVideoCORS,
558545
}: HalfWidthCardLayoutProps) => {
559546
if (cards.length === 0) return null;
560547

@@ -610,7 +597,6 @@ const HalfWidthCardLayout = ({
610597
headlineSizes={undefined}
611598
canPlayInline={false}
612599
showLabsRedesign={showLabsRedesign}
613-
enableLoopVideoCORS={enableLoopVideoCORS}
614600
/>
615601
</LI>
616602
);
@@ -629,7 +615,6 @@ export const FlexibleGeneral = ({
629615
containerLevel = 'Primary',
630616
collectionId,
631617
showLabsRedesign,
632-
enableLoopVideoCORS,
633618
}: Props) => {
634619
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
635620
...snap,
@@ -659,7 +644,6 @@ export const FlexibleGeneral = ({
659644
containerLevel={containerLevel}
660645
collectionId={collectionId}
661646
showLabsRedesign={showLabsRedesign}
662-
enableLoopVideoCORS={enableLoopVideoCORS}
663647
/>
664648
)}
665649
{groupedCards.map((row, i) => {
@@ -679,7 +663,6 @@ export const FlexibleGeneral = ({
679663
containerLevel={containerLevel}
680664
collectionId={collectionId}
681665
showLabsRedesign={showLabsRedesign}
682-
enableLoopVideoCORS={enableLoopVideoCORS}
683666
/>
684667
);
685668

@@ -700,7 +683,6 @@ export const FlexibleGeneral = ({
700683
isLastRow={i === groupedCards.length - 1}
701684
containerLevel={containerLevel}
702685
showLabsRedesign={showLabsRedesign}
703-
enableLoopVideoCORS={enableLoopVideoCORS}
704686
/>
705687
);
706688
}

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

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

3937
type BoostProperties = {
@@ -136,8 +134,6 @@ type OneCardLayoutProps = {
136134
containerLevel: DCRContainerLevel;
137135
isSplashCard?: boolean;
138136
showLabsRedesign?: boolean;
139-
/** Feature flag for the enabling CORS loading on looping video */
140-
enableLoopVideoCORS?: boolean;
141137
};
142138

143139
export const OneCardLayout = ({
@@ -152,7 +148,6 @@ export const OneCardLayout = ({
152148
containerLevel,
153149
isSplashCard,
154150
showLabsRedesign,
155-
enableLoopVideoCORS,
156151
}: OneCardLayoutProps) => {
157152
const card = cards[0];
158153
if (!card) return null;
@@ -207,7 +202,6 @@ export const OneCardLayout = ({
207202
headlinePosition={isSplashCard ? 'outer' : 'inner'}
208203
showLabsRedesign={showLabsRedesign}
209204
subtitleSize={subtitleSize}
210-
enableLoopVideoCORS={enableLoopVideoCORS}
211205
/>
212206
</LI>
213207
</UL>
@@ -311,7 +305,6 @@ export const FlexibleSpecial = ({
311305
containerLevel = 'Primary',
312306
collectionId,
313307
showLabsRedesign,
314-
enableLoopVideoCORS,
315308
}: Props) => {
316309
const snaps = [...groupedTrails.snap].slice(0, 1).map((snap) => ({
317310
...snap,
@@ -356,7 +349,6 @@ export const FlexibleSpecial = ({
356349
containerLevel={containerLevel}
357350
isSplashCard={true}
358351
showLabsRedesign={showLabsRedesign}
359-
enableLoopVideoCORS={enableLoopVideoCORS}
360352
/>
361353
)}
362354

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,6 @@ type Props = {
125125
linkTo: string;
126126
subtitleSource?: string;
127127
subtitleSize: SubtitleSize;
128-
/** Feature flag for the enabling CORS loading on looping video */
129-
enableLoopVideoCORS?: boolean;
130128
};
131129

132130
export const LoopVideo = ({
@@ -144,7 +142,6 @@ export const LoopVideo = ({
144142
linkTo,
145143
subtitleSource,
146144
subtitleSize,
147-
enableLoopVideoCORS = false,
148145
}: Props) => {
149146
const adapted = useShouldAdapt();
150147
const { renderingTarget } = useConfig();
@@ -677,7 +674,6 @@ export const LoopVideo = ({
677674
subtitleSource={subtitleSource}
678675
subtitleSize={subtitleSize}
679676
activeCue={activeCue}
680-
enableLoopVideoCORS={enableLoopVideoCORS}
681677
/>
682678
</figure>
683679
);

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,6 @@ type Props = {
125125
subtitleSize: SubtitleSize;
126126
/* used in custom subtitle overlays */
127127
activeCue?: ActiveCue | null;
128-
/** Feature flag for the enabling CORS loading on looping video */
129-
enableLoopVideoCORS: boolean;
130128
};
131129

132130
/**
@@ -167,7 +165,6 @@ export const LoopVideoPlayer = forwardRef(
167165
subtitleSource,
168166
subtitleSize,
169167
activeCue,
170-
enableLoopVideoCORS,
171168
}: Props,
172169
ref: React.ForwardedRef<HTMLVideoElement>,
173170
) => {
@@ -178,9 +175,7 @@ export const LoopVideoPlayer = forwardRef(
178175
<video
179176
id={loopVideoId}
180177
css={videoStyles(width, height, subtitleSize)}
181-
{...(enableLoopVideoCORS
182-
? { crossOrigin: 'anonymous' }
183-
: {})}
178+
crossOrigin="anonymous"
184179
ref={ref}
185180
tabIndex={0}
186181
data-testid="loop-video"
@@ -218,10 +213,7 @@ export const LoopVideoPlayer = forwardRef(
218213
<source
219214
key={source.mimeType}
220215
/* The start time is set to 1ms so that Safari will autoplay the video */
221-
/* Use a '?cors=enabled' cache buster so that we don't serve video from local cache*/
222-
src={`${source.src}${
223-
enableLoopVideoCORS ? '?cors=enabled' : ''
224-
}#t=0.001`}
216+
src={`${source.src}#t=0.001`}
225217
type={source.mimeType}
226218
/>
227219
))}

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -191,21 +191,11 @@ export const FrontLayout = ({ front, NAV }: Props) => {
191191
)}
192192
frontId={front.pressedPage.id}
193193
collectionId={0}
194-
enableLoopVideoCORS={false}
195194
/>
196195
)
197196
);
198197
};
199198

200-
/** We allow the video to set crossOrigin={"anonymous"} if:
201-
* - the feature switch is ON
202-
* OR
203-
* - the user is opted into the 0% server side test
204-
*/
205-
const enableLoopVideoCORS =
206-
!!front.config.switches.enableLoopVideoCors ||
207-
abTests.loopVideoLoadVariant === 'variant';
208-
209199
return (
210200
<>
211201
<div data-print-layout="hide" id="bannerandheader">
@@ -497,7 +487,6 @@ export const FrontLayout = ({ front, NAV }: Props) => {
497487
collection.containerLevel
498488
}
499489
showLabsRedesign={showLabsRedesign}
500-
enableLoopVideoCORS={false}
501490
/>
502491
</LabsSection>
503492

@@ -620,7 +609,6 @@ export const FrontLayout = ({ front, NAV }: Props) => {
620609
collectionId={index + 1}
621610
containerLevel={collection.containerLevel}
622611
showLabsRedesign={showLabsRedesign}
623-
enableLoopVideoCORS={enableLoopVideoCORS}
624612
/>
625613
</FrontSection>
626614

0 commit comments

Comments
 (0)