Skip to content

Commit e775bea

Browse files
domlanderdomlander
authored
Merge pull request #14377 from guardian/doml/looping-video-test
Hide looping videos to users in control of test
2 parents 94fe4e4 + 93e50b4 commit e775bea

File tree

8 files changed

+92
-2
lines changed

8 files changed

+92
-2
lines changed

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

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ export type Props = {
147147
trailTextSize?: TrailTextSize;
148148
/** A kicker image is seperate to the main media and renders as part of the kicker */
149149
showKickerImage?: boolean;
150+
isInLoopingVideoTestVariant?: boolean;
151+
isInLoopingVideoTestControl?: boolean;
150152
};
151153

152154
const starWrapper = (cardHasImage: boolean) => css`
@@ -250,6 +252,7 @@ const getMedia = ({
250252
mainMedia,
251253
canPlayInline,
252254
isBetaContainer,
255+
isInLoopingVideoTestControl,
253256
}: {
254257
imageUrl?: string;
255258
imageAltText?: string;
@@ -259,8 +262,13 @@ const getMedia = ({
259262
mainMedia?: MainMedia;
260263
canPlayInline?: boolean;
261264
isBetaContainer: boolean;
265+
isInLoopingVideoTestControl: boolean;
262266
}) => {
263-
if (mainMedia?.type === 'LoopVideo' && canPlayInline) {
267+
if (
268+
mainMedia?.type === 'LoopVideo' &&
269+
!isInLoopingVideoTestControl &&
270+
canPlayInline
271+
) {
264272
return {
265273
type: 'loop-video',
266274
mainMedia,
@@ -412,6 +420,8 @@ export const Card = ({
412420
showTopBarMobile = true,
413421
trailTextSize,
414422
showKickerImage = false,
423+
isInLoopingVideoTestVariant = false,
424+
isInLoopingVideoTestControl = false,
415425
}: Props) => {
416426
const hasSublinks = supportingContent && supportingContent.length > 0;
417427
const sublinkPosition = decideSublinkPosition(
@@ -564,6 +574,7 @@ export const Card = ({
564574
mainMedia,
565575
canPlayInline,
566576
isBetaContainer,
577+
isInLoopingVideoTestControl,
567578
});
568579

569580
/**
@@ -896,6 +907,9 @@ export const Card = ({
896907
fallbackImageAlt={media.imageAltText}
897908
fallbackImageAspectRatio="5:4"
898909
linkTo={linkTo}
910+
isInLoopingVideoTestVariant={
911+
isInLoopingVideoTestVariant
912+
}
899913
/>
900914
</Island>
901915
)}
@@ -1012,6 +1026,9 @@ export const Card = ({
10121026
loading={imageLoading}
10131027
roundedCorners={isOnwardContent}
10141028
aspectRatio={aspectRatio}
1029+
isInLoopingVideoTestControl={
1030+
isInLoopingVideoTestControl
1031+
}
10151032
/>
10161033
{isVideoMainMedia && mainMedia.duration > 0 && (
10171034
<div

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export type Props = {
1818
isCircular?: boolean;
1919
aspectRatio?: AspectRatio;
2020
mobileAspectRatio?: AspectRatio;
21+
isInLoopingVideoTestControl?: boolean;
2122
};
2223

2324
/**
@@ -200,6 +201,7 @@ export const CardPicture = ({
200201
isCircular,
201202
aspectRatio = '5:3',
202203
mobileAspectRatio,
204+
isInLoopingVideoTestControl,
203205
}: Props) => {
204206
if (mainImage === '') {
205207
return null;
@@ -214,6 +216,11 @@ export const CardPicture = ({
214216

215217
return (
216218
<picture
219+
data-component={
220+
isInLoopingVideoTestControl
221+
? 'loop-video-player-control'
222+
: undefined
223+
}
217224
data-size={imageSize}
218225
css={[
219226
block,

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ type Props = {
4848
frontId?: string;
4949
collectionId: number;
5050
containerLevel?: DCRContainerLevel;
51+
isInLoopingVideoTestVariant?: boolean;
52+
isInLoopingVideoTestControl?: boolean;
5153
};
5254

5355
export const DecideContainer = ({
@@ -63,6 +65,8 @@ export const DecideContainer = ({
6365
frontId,
6466
collectionId,
6567
containerLevel,
68+
isInLoopingVideoTestVariant,
69+
isInLoopingVideoTestControl,
6670
}: Props) => {
6771
switch (containerType) {
6872
case 'dynamic/fast':
@@ -255,6 +259,8 @@ export const DecideContainer = ({
255259
imageLoading={imageLoading}
256260
aspectRatio={aspectRatio}
257261
collectionId={collectionId}
262+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
263+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
258264
/>
259265
);
260266
case 'flexible/general':
@@ -268,6 +274,8 @@ export const DecideContainer = ({
268274
aspectRatio={aspectRatio}
269275
containerLevel={containerLevel}
270276
collectionId={collectionId}
277+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
278+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
271279
/>
272280
);
273281
case 'scrollable/small':

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ type Props = {
3232
aspectRatio: AspectRatio;
3333
containerLevel?: DCRContainerLevel;
3434
collectionId: number;
35+
isInLoopingVideoTestVariant?: boolean;
36+
isInLoopingVideoTestControl?: boolean;
3537
};
3638

3739
type RowLayout = 'oneCardHalfWidth' | 'oneCardFullWidth' | 'twoCard';
@@ -241,6 +243,8 @@ type SplashCardLayoutProps = {
241243
isLastRow: boolean;
242244
containerLevel: DCRContainerLevel;
243245
collectionId: number;
246+
isInLoopingVideoTestVariant?: boolean;
247+
isInLoopingVideoTestControl?: boolean;
244248
};
245249

246250
const SplashCardLayout = ({
@@ -253,6 +257,8 @@ const SplashCardLayout = ({
253257
isLastRow,
254258
containerLevel,
255259
collectionId,
260+
isInLoopingVideoTestVariant = false,
261+
isInLoopingVideoTestControl = false,
256262
}: SplashCardLayoutProps) => {
257263
const card = cards[0];
258264
if (!card) return null;
@@ -333,6 +339,8 @@ const SplashCardLayout = ({
333339
trailTextSize={trailTextSize}
334340
canPlayInline={true}
335341
showKickerImage={card.format.design === ArticleDesign.Audio}
342+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
343+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
336344
/>
337345
</LI>
338346
</UL>
@@ -395,6 +403,8 @@ type FullWidthCardLayoutProps = {
395403
isLastRow: boolean;
396404
containerLevel: DCRContainerLevel;
397405
collectionId: number;
406+
isInLoopingVideoTestVariant?: boolean;
407+
isInLoopingVideoTestControl?: boolean;
398408
};
399409

400410
const FullWidthCardLayout = ({
@@ -408,6 +418,8 @@ const FullWidthCardLayout = ({
408418
isLastRow,
409419
containerLevel,
410420
collectionId,
421+
isInLoopingVideoTestVariant = false,
422+
isInLoopingVideoTestControl = false,
411423
}: FullWidthCardLayoutProps) => {
412424
const card = cards[0];
413425
if (!card) return null;
@@ -480,6 +492,8 @@ const FullWidthCardLayout = ({
480492
liveUpdatesPosition={liveUpdatesPosition}
481493
canPlayInline={true}
482494
showKickerImage={card.format.design === ArticleDesign.Audio}
495+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
496+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
483497
/>
484498
</LI>
485499
</UL>
@@ -580,6 +594,8 @@ export const FlexibleGeneral = ({
580594
aspectRatio,
581595
containerLevel = 'Primary',
582596
collectionId,
597+
isInLoopingVideoTestVariant = false,
598+
isInLoopingVideoTestControl = false,
583599
}: Props) => {
584600
const splash = [...groupedTrails.splash].slice(0, 1).map((snap) => ({
585601
...snap,
@@ -608,6 +624,8 @@ export const FlexibleGeneral = ({
608624
isLastRow={cards.length === 0}
609625
containerLevel={containerLevel}
610626
collectionId={collectionId}
627+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
628+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
611629
/>
612630
)}
613631
{groupedCards.map((row, i) => {
@@ -626,6 +644,12 @@ export const FlexibleGeneral = ({
626644
isLastRow={i === groupedCards.length - 1}
627645
containerLevel={containerLevel}
628646
collectionId={collectionId}
647+
isInLoopingVideoTestVariant={
648+
isInLoopingVideoTestVariant
649+
}
650+
isInLoopingVideoTestControl={
651+
isInLoopingVideoTestControl
652+
}
629653
/>
630654
);
631655

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ type Props = {
2727
aspectRatio: AspectRatio;
2828
containerLevel?: DCRContainerLevel;
2929
collectionId: number;
30+
isInLoopingVideoTestVariant?: boolean;
31+
isInLoopingVideoTestControl?: boolean;
3032
};
3133

3234
type BoostProperties = {
@@ -117,6 +119,8 @@ type OneCardLayoutProps = {
117119
isLastRow: boolean;
118120
isFirstRow: boolean;
119121
containerLevel: DCRContainerLevel;
122+
isInLoopingVideoTestVariant?: boolean;
123+
isInLoopingVideoTestControl?: boolean;
120124
};
121125

122126
export const OneCardLayout = ({
@@ -129,6 +133,8 @@ export const OneCardLayout = ({
129133
isLastRow,
130134
isFirstRow,
131135
containerLevel,
136+
isInLoopingVideoTestVariant = false,
137+
isInLoopingVideoTestControl = false,
132138
}: OneCardLayoutProps) => {
133139
const card = cards[0];
134140
if (!card) return null;
@@ -177,6 +183,8 @@ export const OneCardLayout = ({
177183
trailTextSize={trailTextSize}
178184
canPlayInline={true}
179185
showKickerImage={card.format.design === ArticleDesign.Audio}
186+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
187+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
180188
/>
181189
</LI>
182190
</UL>
@@ -273,6 +281,8 @@ export const FlexibleSpecial = ({
273281
aspectRatio,
274282
containerLevel = 'Primary',
275283
collectionId,
284+
isInLoopingVideoTestVariant,
285+
isInLoopingVideoTestControl,
276286
}: Props) => {
277287
const snaps = [...groupedTrails.snap].slice(0, 1).map((snap) => ({
278288
...snap,
@@ -299,6 +309,8 @@ export const FlexibleSpecial = ({
299309
isFirstRow={true}
300310
isLastRow={splash.length === 0 && cards.length === 0}
301311
containerLevel={containerLevel}
312+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
313+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
302314
/>
303315
<OneCardLayout
304316
cards={splash}
@@ -310,6 +322,8 @@ export const FlexibleSpecial = ({
310322
isLastRow={cards.length === 0}
311323
isFirstRow={!isNonEmptyArray(snaps)}
312324
containerLevel={containerLevel}
325+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
326+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
313327
/>
314328
<TwoOrFourCardLayout
315329
cards={cards}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ type Props = {
117117
fallbackImageAlt: CardPictureProps['alt'];
118118
fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
119119
linkTo: string;
120+
isInLoopingVideoTestVariant?: boolean;
120121
};
121122

122123
export const LoopVideo = ({
@@ -132,6 +133,7 @@ export const LoopVideo = ({
132133
fallbackImageAlt,
133134
fallbackImageAspectRatio,
134135
linkTo,
136+
isInLoopingVideoTestVariant,
135137
}: Props) => {
136138
const adapted = useShouldAdapt();
137139
const { renderingTarget } = useConfig();
@@ -602,6 +604,7 @@ export const LoopVideo = ({
602604
AudioIcon={hasAudio ? AudioIcon : null}
603605
preloadPartialData={preloadPartialData}
604606
showPlayIcon={showPlayIcon}
607+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
605608
/>
606609
</figure>
607610
);

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ type Props = {
9696
posterImage?: string;
9797
preloadPartialData: boolean;
9898
showPlayIcon: boolean;
99+
isInLoopingVideoTestVariant?: boolean;
99100
};
100101

101102
/**
@@ -127,6 +128,7 @@ export const LoopVideoPlayer = forwardRef(
127128
AudioIcon,
128129
preloadPartialData,
129130
showPlayIcon,
131+
isInLoopingVideoTestVariant,
130132
}: Props,
131133
ref: React.ForwardedRef<HTMLVideoElement>,
132134
) => {
@@ -147,6 +149,11 @@ export const LoopVideoPlayer = forwardRef(
147149
showPlayIcon ? 'play' : 'pause'
148150
}-${atomId}`}
149151
data-chromatic="ignore"
152+
data-component={
153+
isInLoopingVideoTestVariant
154+
? 'loop-video-player-variant'
155+
: undefined
156+
}
150157
preload={preloadPartialData ? 'metadata' : 'none'}
151158
loop={true}
152159
muted={isMuted}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export const FrontLayout = ({ front, NAV }: Props) => {
107107
hasPageSkin: hasPageSkinConfig,
108108
pageId,
109109
abTests,
110+
switches: { absoluteServerTimes = false },
110111
},
111112
editionId,
112113
} = front;
@@ -134,7 +135,10 @@ export const FrontLayout = ({ front, NAV }: Props) => {
134135

135136
const contributionsServiceUrl = getContributionsServiceUrl(front);
136137

137-
const { absoluteServerTimes = false } = front.config.switches;
138+
const isInLoopingVideoTestVariant =
139+
abTests.loopingVideoVariant === 'variant';
140+
const isInLoopingVideoTestControl =
141+
abTests.loopingVideoControl === 'control';
138142

139143
const fallbackAspectRatio = (collectionType: DCRContainerType) => {
140144
switch (collectionType) {
@@ -634,6 +638,12 @@ export const FrontLayout = ({ front, NAV }: Props) => {
634638
sectionId={ophanName}
635639
collectionId={index + 1}
636640
containerLevel={collection.containerLevel}
641+
isInLoopingVideoTestVariant={
642+
isInLoopingVideoTestVariant
643+
}
644+
isInLoopingVideoTestControl={
645+
isInLoopingVideoTestControl
646+
}
637647
/>
638648
</FrontSection>
639649

0 commit comments

Comments
 (0)