Skip to content

Commit cbaccba

Browse files
abeddow91abeddow91
authored
Merge branch 'main' into ab/deprecate-dynamic-slow-mpu
2 parents 8fd4181 + ac5cfd9 commit cbaccba

File tree

14 files changed

+170
-122
lines changed

14 files changed

+170
-122
lines changed

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

Lines changed: 17 additions & 0 deletions
Large diffs are not rendered by default.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const basicCardProps: CardProps = {
4848
discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/',
4949
showVideo: true,
5050
absoluteServerTimes: true,
51+
headlinePosition: 'inner',
5152
};
5253

5354
const aBasicLink = {

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

Lines changed: 12 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
} from '../../lib/articleFormat';
1414
import { isMediaCard } from '../../lib/cardHelpers';
1515
import { isWithinTwelveHours, secondsToDuration } from '../../lib/formatTime';
16+
import { appendLinkNameMedia } from '../../lib/getDataLinkName';
1617
import { getZIndex } from '../../lib/getZIndex';
1718
import { DISCUSSION_ID_DATA_ATTRIBUTE } from '../../lib/useCommentCount';
1819
import { BETA_CONTAINERS } from '../../model/enhanceCollections';
@@ -128,7 +129,6 @@ export type Props = {
128129
liveUpdatesAlignment?: Alignment;
129130
liveUpdatesPosition?: Position;
130131
onwardsSource?: OnwardsSource;
131-
pauseOffscreenVideo?: boolean;
132132
showVideo?: boolean;
133133
isTagPage?: boolean;
134134
/** Allows the consumer to set an aspect ratio on the image of 5:3, 5:4, 4:5 or 1:1 */
@@ -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+
/** Determines if the headline should be positioned within the content or outside the content */
151+
headlinePosition?: 'inner' | 'outer';
150152
isInLoopingVideoTestVariant?: boolean;
151153
isInLoopingVideoTestControl?: boolean;
152154
};
@@ -276,7 +278,7 @@ const getMedia = ({
276278
}
277279
if (mainMedia?.type === 'Video' && canPlayInline) {
278280
return {
279-
type: 'video',
281+
type: 'youtube-video',
280282
mainMedia,
281283
} as const;
282284
}
@@ -326,36 +328,6 @@ const decideSublinkPosition = (
326328
return alignment === 'vertical' ? 'inner' : 'outer';
327329
};
328330

329-
const getHeadlinePosition = ({
330-
isFlexSplash,
331-
containerType,
332-
showLivePlayable,
333-
isMediaCardOrNewsletter,
334-
}: {
335-
containerType?: DCRContainerType;
336-
isFlexSplash?: boolean;
337-
showLivePlayable: boolean;
338-
isMediaCardOrNewsletter: boolean;
339-
}) => {
340-
if (isMediaCardOrNewsletter) {
341-
return 'inner';
342-
}
343-
344-
if (containerType === 'flexible/special' && isFlexSplash) {
345-
return 'outer';
346-
}
347-
348-
if (
349-
containerType === 'flexible/general' &&
350-
isFlexSplash &&
351-
showLivePlayable
352-
) {
353-
return 'outer';
354-
}
355-
356-
return 'inner';
357-
};
358-
359331
const liveBulletStyles = css`
360332
width: 9px;
361333
height: 9px;
@@ -408,7 +380,6 @@ export const Card = ({
408380
liveUpdatesAlignment = 'vertical',
409381
liveUpdatesPosition = 'inner',
410382
onwardsSource,
411-
pauseOffscreenVideo = false,
412383
showVideo = true,
413384
absoluteServerTimes,
414385
isTagPage = false,
@@ -420,6 +391,7 @@ export const Card = ({
420391
showTopBarMobile = true,
421392
trailTextSize,
422393
showKickerImage = false,
394+
headlinePosition = 'inner',
423395
isInLoopingVideoTestVariant = false,
424396
isInLoopingVideoTestControl = false,
425397
}: Props) => {
@@ -577,6 +549,11 @@ export const Card = ({
577549
isInLoopingVideoTestControl,
578550
});
579551

552+
const resolvedDataLinkName =
553+
media && dataLinkName
554+
? appendLinkNameMedia(dataLinkName, media.type)
555+
: dataLinkName;
556+
580557
/**
581558
* For opinion type cards with avatars (which aren't onwards content)
582559
* we render the footer in a different location
@@ -616,13 +593,6 @@ export const Card = ({
616593
return { mobile: 'medium' };
617594
};
618595

619-
const headlinePosition = getHeadlinePosition({
620-
containerType,
621-
isFlexSplash,
622-
showLivePlayable,
623-
isMediaCardOrNewsletter,
624-
});
625-
626596
const hideTrailTextUntil = () => {
627597
if (isFlexibleContainer) {
628598
return undefined;
@@ -768,7 +738,7 @@ export const Card = ({
768738
<CardLink
769739
linkTo={linkTo}
770740
headlineText={headlineText}
771-
dataLinkName={dataLinkName}
741+
dataLinkName={resolvedDataLinkName}
772742
isExternalLink={isExternalLink}
773743
/>
774744
{headlinePosition === 'outer' && (
@@ -913,7 +883,7 @@ export const Card = ({
913883
/>
914884
</Island>
915885
)}
916-
{media.type === 'video' && (
886+
{media.type === 'youtube-video' && (
917887
<>
918888
{showVideo ? (
919889
<div
@@ -958,9 +928,6 @@ export const Card = ({
958928
hideCaption={true}
959929
stickyVideos={false}
960930
kickerText={kickerText}
961-
pauseOffscreenVideo={
962-
pauseOffscreenVideo
963-
}
964931
/*
965932
* TODO: IMPROVE THIS MAPPING
966933
*

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from '@emotion/react';
22
import { isUndefined } from '@guardian/libs';
33
import { from, space } from '@guardian/source/foundations';
4-
import type { CardImageType } from '../../../types/layout';
4+
import type { CardMediaType } from '../../../types/layout';
55
import type { ImagePositionType } from './ImageWrapper';
66

77
export type GapSize = 'none' | 'tiny' | 'small' | 'medium' | 'large';
@@ -11,7 +11,7 @@ export type GapSizes = { row: GapSize; column: GapSize };
1111
type Props = {
1212
children: React.ReactNode;
1313
cardBackgroundColour: string;
14-
imageType: CardImageType | undefined;
14+
imageType: CardMediaType | undefined;
1515
imagePositionOnDesktop: ImagePositionType;
1616
imagePositionOnMobile: ImagePositionType;
1717
minWidthInPixels?: number;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { SerializedStyles } from '@emotion/react';
22
import { css } from '@emotion/react';
33
import { between, from, space, until } from '@guardian/source/foundations';
4-
import type { CardImageType } from '../../../types/layout';
4+
import type { CardMediaType } from '../../../types/layout';
55
import type { ImagePositionType, ImageSizeType } from './ImageWrapper';
66

77
const sizingStyles = css`
@@ -21,7 +21,7 @@ const flexBasisStyles = ({
2121
isBetaContainer,
2222
}: {
2323
imageSize: ImageSizeType;
24-
imageType?: CardImageType;
24+
imageType?: CardMediaType;
2525
isBetaContainer: boolean;
2626
}): SerializedStyles => {
2727
if (imageType === 'avatar') {
@@ -115,7 +115,7 @@ const getImageDirection = (
115115

116116
type Props = {
117117
children: React.ReactNode;
118-
imageType?: CardImageType;
118+
imageType?: CardMediaType;
119119
imageSize: ImageSizeType;
120120
isBetaContainer: boolean;
121121
imagePositionOnDesktop: ImagePositionType;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { SerializedStyles } from '@emotion/react';
22
import { css } from '@emotion/react';
33
import { between, from, space, until } from '@guardian/source/foundations';
4-
import type { CardImageType } from '../../../types/layout';
4+
import type { CardMediaType } from '../../../types/layout';
55

66
const imageFixedSize = {
77
tiny: 86,
@@ -34,7 +34,7 @@ type Props = {
3434
children: React.ReactNode;
3535
imageSize: ImageSizeType;
3636
imageFixedSizes?: ImageFixedSizeOptions;
37-
imageType?: CardImageType;
37+
imageType?: CardMediaType;
3838
imagePositionOnDesktop: ImagePositionType;
3939
imagePositionOnMobile: ImagePositionType;
4040
/**
@@ -173,7 +173,7 @@ export const ImageWrapper = ({
173173
css={[
174174
(imageType === 'slideshow' ||
175175
imageType === 'picture' ||
176-
imageType === 'video' ||
176+
imageType === 'youtube-video' ||
177177
imageType === 'loop-video') &&
178178
isHorizontalOnDesktop &&
179179
flexBasisStyles({

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -512,7 +512,6 @@ const CarouselCard = ({
512512
imageSize={'carousel'}
513513
showClock={!isOnwardContent && true}
514514
showAge={true}
515-
pauseOffscreenVideo={false}
516515
showQuotedHeadline={format.design === ArticleDesign.Comment}
517516
dataLinkName={dataLinkName}
518517
discussionId={discussionId}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,7 @@ const SplashCardLayout = ({
339339
trailTextSize={trailTextSize}
340340
canPlayInline={true}
341341
showKickerImage={card.format.design === ArticleDesign.Audio}
342+
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
342343
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
343344
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
344345
/>

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

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
44
import {
55
loopVideoCard,
66
opinionTrails,
7+
snapLink,
78
trails,
89
} from '../../fixtures/manual/trails';
910
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
@@ -285,13 +286,25 @@ export const LoopVideoCards: Story = {
285286
frontSectionTitle: 'Looping video',
286287
groupedTrails: {
287288
...emptyGroupedTrails,
288-
snap: [loopVideoCard],
289+
snap: [],
289290
standard: [loopVideoCard],
290291
},
291292
collectionId: 1,
292293
},
293294
};
294295

296+
export const SnapCard: Story = {
297+
name: 'With snap link',
298+
args: {
299+
frontSectionTitle: 'Snap link example',
300+
groupedTrails: {
301+
...emptyGroupedTrails,
302+
snap: [snapLink],
303+
},
304+
collectionId: 1,
305+
},
306+
};
307+
295308
const containerPalettes = [
296309
'InvestigationPalette',
297310
'LongRunningPalette',

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

Lines changed: 36 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ type OneCardLayoutProps = {
119119
isLastRow: boolean;
120120
isFirstRow: boolean;
121121
containerLevel: DCRContainerLevel;
122+
isSplashCard?: boolean;
122123
isInLoopingVideoTestVariant?: boolean;
123124
isInLoopingVideoTestControl?: boolean;
124125
};
@@ -133,6 +134,7 @@ export const OneCardLayout = ({
133134
isLastRow,
134135
isFirstRow,
135136
containerLevel,
137+
isSplashCard,
136138
isInLoopingVideoTestVariant = false,
137139
isInLoopingVideoTestControl = false,
138140
}: OneCardLayoutProps) => {
@@ -183,6 +185,7 @@ export const OneCardLayout = ({
183185
trailTextSize={trailTextSize}
184186
canPlayInline={true}
185187
showKickerImage={card.format.design === ArticleDesign.Audio}
188+
headlinePosition={isSplashCard ? 'outer' : 'inner'}
186189
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
187190
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
188191
/>
@@ -299,32 +302,39 @@ export const FlexibleSpecial = ({
299302

300303
return (
301304
<>
302-
<OneCardLayout
303-
cards={snaps}
304-
containerPalette={containerPalette}
305-
showAge={showAge}
306-
absoluteServerTimes={absoluteServerTimes}
307-
imageLoading={imageLoading}
308-
aspectRatio={aspectRatio}
309-
isFirstRow={true}
310-
isLastRow={splash.length === 0 && cards.length === 0}
311-
containerLevel={containerLevel}
312-
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
313-
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
314-
/>
315-
<OneCardLayout
316-
cards={splash}
317-
containerPalette={containerPalette}
318-
showAge={showAge}
319-
absoluteServerTimes={absoluteServerTimes}
320-
imageLoading={imageLoading}
321-
aspectRatio={aspectRatio}
322-
isLastRow={cards.length === 0}
323-
isFirstRow={!isNonEmptyArray(snaps)}
324-
containerLevel={containerLevel}
325-
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
326-
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
327-
/>
305+
{isNonEmptyArray(snaps) && (
306+
<OneCardLayout
307+
cards={snaps}
308+
containerPalette={containerPalette}
309+
showAge={showAge}
310+
absoluteServerTimes={absoluteServerTimes}
311+
imageLoading={imageLoading}
312+
aspectRatio={aspectRatio}
313+
isFirstRow={true}
314+
isLastRow={splash.length === 0 && cards.length === 0}
315+
containerLevel={containerLevel}
316+
isSplashCard={false}
317+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
318+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
319+
/>
320+
)}
321+
{isNonEmptyArray(splash) && (
322+
<OneCardLayout
323+
cards={splash}
324+
containerPalette={containerPalette}
325+
showAge={showAge}
326+
absoluteServerTimes={absoluteServerTimes}
327+
imageLoading={imageLoading}
328+
aspectRatio={aspectRatio}
329+
isLastRow={cards.length === 0}
330+
isFirstRow={!isNonEmptyArray(snaps)}
331+
containerLevel={containerLevel}
332+
isSplashCard={true}
333+
isInLoopingVideoTestVariant={isInLoopingVideoTestVariant}
334+
isInLoopingVideoTestControl={isInLoopingVideoTestControl}
335+
/>
336+
)}
337+
328338
<TwoOrFourCardLayout
329339
cards={cards}
330340
containerPalette={containerPalette}

0 commit comments

Comments
 (0)