From dd9da60eb72db61db22575b960b51419dce3e466 Mon Sep 17 00:00:00 2001 From: Anna Beddow <anna.beddow@gmail.com> Date: Tue, 17 Dec 2024 12:29:56 +0000 Subject: [PATCH] Rename video prop to better represent use case --- .../src/components/Card/Card.stories.tsx | 10 +++++----- dotcom-rendering/src/components/Card/Card.tsx | 14 +++++++------- .../src/components/Carousel.importable.tsx | 2 +- .../src/components/FeatureCard.stories.tsx | 2 +- dotcom-rendering/src/components/FeatureCard.tsx | 12 ++++++------ .../src/components/FlexibleGeneral.tsx | 3 +++ .../src/components/FlexibleSpecial.tsx | 2 ++ dotcom-rendering/src/components/FrontCard.tsx | 2 +- .../components/ScrollableFeature.importable.tsx | 2 +- .../components/ScrollableSmall.importable.tsx | 1 + .../src/components/StaticFeatureTwo.tsx | 2 +- .../src/components/StaticMediumFour.tsx | 1 + .../src/components/SupportingContent.stories.tsx | 2 +- dotcom-rendering/src/lib/cardWrappers.tsx | 16 ++++++++-------- 14 files changed, 39 insertions(+), 32 deletions(-) diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx index 13ff33a0312..f190f9ba7cb 100644 --- a/dotcom-rendering/src/components/Card/Card.stories.tsx +++ b/dotcom-rendering/src/components/Card/Card.stories.tsx @@ -40,7 +40,7 @@ const basicCardProps: CardProps = { imagePositionOnDesktop: 'top', showAge: true, isExternalLink: false, - isPlayableMediaCard: true, + canPlayInline: true, imageLoading: 'eager', discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/', showMainVideo: true, @@ -1001,7 +1001,7 @@ export const WhenVideoWithPlayButton = () => { }} imagePositionOnDesktop="top" mainMedia={mainVideo} - isPlayableMediaCard={false} + canPlayInline={false} /> </LI> </UL> @@ -1032,7 +1032,7 @@ export const WhenVideoWithPlayButton = () => { }} imagePositionOnDesktop="left" mainMedia={mainVideo} - isPlayableMediaCard={false} + canPlayInline={false} /> </LI> <LI padSides={true}> @@ -1045,7 +1045,7 @@ export const WhenVideoWithPlayButton = () => { }} imagePositionOnDesktop="right" mainMedia={mainVideo} - isPlayableMediaCard={false} + canPlayInline={false} /> </LI> @@ -1059,7 +1059,7 @@ export const WhenVideoWithPlayButton = () => { }} imagePositionOnDesktop="right" mainMedia={mainVideo} - isPlayableMediaCard={false} + canPlayInline={false} /> </LI> </UL> diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index aa3f3c26153..47d89654764 100644 --- a/dotcom-rendering/src/components/Card/Card.tsx +++ b/dotcom-rendering/src/components/Card/Card.tsx @@ -98,7 +98,7 @@ export type Props = { * At 300px or below, the player will begin to lose functionality e.g. volume controls being omitted. * Youtube requires a minimum width 200px. */ - isPlayableMediaCard?: boolean; + canPlayInline?: boolean; kickerText?: string; showPulsingDot?: boolean; starRating?: Rating; @@ -193,7 +193,7 @@ const getMedia = ({ isCrossword, slideshowImages, mainMedia, - isPlayableMediaCard, + canPlayInline, podcastImage, }: { imageUrl?: string; @@ -202,10 +202,10 @@ const getMedia = ({ isCrossword?: boolean; slideshowImages?: DCRSlideshowImage[]; mainMedia?: MainMedia; - isPlayableMediaCard?: boolean; + canPlayInline?: boolean; podcastImage?: PodcastSeriesImage; }) => { - if (mainMedia && mainMedia.type === 'Video' && isPlayableMediaCard) { + if (mainMedia && mainMedia.type === 'Video' && canPlayInline) { return { type: 'video', mainMedia, @@ -304,7 +304,7 @@ export const Card = ({ avatarUrl, showClock, mainMedia, - isPlayableMediaCard, + canPlayInline, kickerText, showPulsingDot, starRating, @@ -425,7 +425,7 @@ export const Card = ({ // If the card isn't playable, we need to show a play icon. // Otherwise, this is handled by the YoutubeAtom const showPlayIcon = - mainMedia?.type === 'Video' && !isPlayableMediaCard && showMainVideo; + mainMedia?.type === 'Video' && !canPlayInline && showMainVideo; const media = getMedia({ imageUrl: image?.src, @@ -434,7 +434,7 @@ export const Card = ({ isCrossword, slideshowImages, mainMedia, - isPlayableMediaCard, + canPlayInline, podcastImage, }); diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx index 7d3bc6f8dff..cd88df7e693 100644 --- a/dotcom-rendering/src/components/Carousel.importable.tsx +++ b/dotcom-rendering/src/components/Carousel.importable.tsx @@ -533,7 +533,7 @@ const CarouselCard = ({ isExternalLink={false} mainMedia={mainMedia} minWidthInPixels={220} - isPlayableMediaCard={isVideoContainer} + canPlayInline={isVideoContainer} onwardsSource={onwardsSource} containerType={containerType} imageLoading={imageLoading} diff --git a/dotcom-rendering/src/components/FeatureCard.stories.tsx b/dotcom-rendering/src/components/FeatureCard.stories.tsx index 8cf330168a0..2e6df5ddb9d 100644 --- a/dotcom-rendering/src/components/FeatureCard.stories.tsx +++ b/dotcom-rendering/src/components/FeatureCard.stories.tsx @@ -20,7 +20,7 @@ const cardProps: CardProps = { }, imagePositionOnDesktop: 'top', isExternalLink: false, - isPlayableMediaCard: false, + canPlayInline: true, imageLoading: 'eager', discussionApiUrl: 'https://discussion.theguardian.com/discussion-api/', absoluteServerTimes: true, diff --git a/dotcom-rendering/src/components/FeatureCard.tsx b/dotcom-rendering/src/components/FeatureCard.tsx index 9b08c5de3d2..fec389228b6 100644 --- a/dotcom-rendering/src/components/FeatureCard.tsx +++ b/dotcom-rendering/src/components/FeatureCard.tsx @@ -56,7 +56,7 @@ export type Props = { * At 300px or below, the player will begin to lose functionality e.g. volume controls being omitted. * Youtube requires a minimum width 200px. */ - isPlayableMediaCard?: boolean; + canPlayInline?: boolean; kickerText?: string; showPulsingDot?: boolean; starRating?: Rating; @@ -166,14 +166,14 @@ const getMedia = ({ imageUrl, imageAltText, mainMedia, - isPlayableMediaCard, + canPlayInline, }: { imageUrl?: string; imageAltText?: string; mainMedia?: MainMedia; - isPlayableMediaCard?: boolean; + canPlayInline?: boolean; }) => { - if (mainMedia && mainMedia.type === 'Video' && isPlayableMediaCard) { + if (mainMedia && mainMedia.type === 'Video' && canPlayInline) { return { type: 'video', mainMedia, @@ -279,7 +279,7 @@ export const FeatureCard = ({ imageLoading, showClock, mainMedia, - isPlayableMediaCard, + canPlayInline, kickerText, showPulsingDot, dataLinkName, @@ -305,7 +305,7 @@ export const FeatureCard = ({ imageUrl: image?.src, imageAltText: image?.altText, mainMedia, - isPlayableMediaCard, + canPlayInline, }); return ( diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx index 11f874b545d..d296ff707cb 100644 --- a/dotcom-rendering/src/components/FlexibleGeneral.tsx +++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx @@ -220,6 +220,7 @@ export const SplashCardLayout = ({ showTopBarDesktop={false} showTopBarMobile={true} trailTextSize={trailTextSize} + canPlayInline={true} /> </LI> </UL> @@ -329,6 +330,7 @@ export const BoostedCardLayout = ({ showTopBarDesktop={false} showTopBarMobile={true} liveUpdatesPosition={liveUpdatesPosition} + canPlayInline={true} /> </LI> </UL> @@ -413,6 +415,7 @@ export const StandardCardLayout = ({ } : undefined } + canPlayInline={false} /> </LI> ); diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index 36de07c0b1d..ad29cdc47df 100644 --- a/dotcom-rendering/src/components/FlexibleSpecial.tsx +++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx @@ -163,6 +163,7 @@ export const OneCardLayout = ({ showTopBarDesktop={false} showTopBarMobile={true} trailTextSize={trailTextSize} + canPlayInline={true} /> </LI> </UL> @@ -218,6 +219,7 @@ const TwoCardOrFourCardLayout = ({ showLivePlayable={false} showTopBarDesktop={false} showTopBarMobile={true} + canPlayInline={false} /> </LI> ); diff --git a/dotcom-rendering/src/components/FrontCard.tsx b/dotcom-rendering/src/components/FrontCard.tsx index 6c5891e8a8a..5191f5ce889 100644 --- a/dotcom-rendering/src/components/FrontCard.tsx +++ b/dotcom-rendering/src/components/FrontCard.tsx @@ -42,7 +42,7 @@ export const FrontCard = (props: Props) => { showClock: false, image: trail.image, isCrossword: trail.isCrossword, - isPlayableMediaCard: true, + canPlayInline: true, starRating: trail.starRating, dataLinkName: trail.dataLinkName, snapData: trail.snapData, diff --git a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx index 17ead5b6432..653fc4924b4 100644 --- a/dotcom-rendering/src/components/ScrollableFeature.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableFeature.importable.tsx @@ -53,7 +53,7 @@ export const ScrollableFeature = ({ /** TODO - implement show age */ showClock={false} image={card.image} - isPlayableMediaCard={true} + canPlayInline={true} starRating={card.starRating} dataLinkName={card.dataLinkName} discussionApiUrl={card.discussionApiUrl} diff --git a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx index 2ad9059155a..c6e740720d1 100644 --- a/dotcom-rendering/src/components/ScrollableSmall.importable.tsx +++ b/dotcom-rendering/src/components/ScrollableSmall.importable.tsx @@ -63,6 +63,7 @@ export const ScrollableSmall = ({ showLivePlayable={trail.showLivePlayable} showTopBarDesktop={false} showTopBarMobile={false} + canPlayInline={false} /> </ScrollableCarousel.Item> ); diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx index d46959615d7..c321282b09a 100644 --- a/dotcom-rendering/src/components/StaticFeatureTwo.tsx +++ b/dotcom-rendering/src/components/StaticFeatureTwo.tsx @@ -50,7 +50,7 @@ export const StaticFeatureTwo = ({ /** TODO - implement show age */ showClock={false} image={card.image} - isPlayableMediaCard={true} + canPlayInline={true} starRating={card.starRating} dataLinkName={card.dataLinkName} discussionApiUrl={card.discussionApiUrl} diff --git a/dotcom-rendering/src/components/StaticMediumFour.tsx b/dotcom-rendering/src/components/StaticMediumFour.tsx index d822fc2d39a..56e4ebce1fc 100644 --- a/dotcom-rendering/src/components/StaticMediumFour.tsx +++ b/dotcom-rendering/src/components/StaticMediumFour.tsx @@ -57,6 +57,7 @@ export const StaticMediumFour = ({ showLivePlayable={false} showTopBarDesktop={false} showTopBarMobile={true} + canPlayInline={false} /> </LI> ); diff --git a/dotcom-rendering/src/components/SupportingContent.stories.tsx b/dotcom-rendering/src/components/SupportingContent.stories.tsx index 06065b9fb80..122470a39bd 100644 --- a/dotcom-rendering/src/components/SupportingContent.stories.tsx +++ b/dotcom-rendering/src/components/SupportingContent.stories.tsx @@ -33,7 +33,7 @@ const basicCardProps: CardProps = { imagePositionOnDesktop: 'top', isExternalLink: false, showLivePlayable: false, - isPlayableMediaCard: true, + canPlayInline: true, imageLoading: 'eager', discussionApiUrl: 'https://discussion.theguardian.com/discussion-api', absoluteServerTimes: true, diff --git a/dotcom-rendering/src/lib/cardWrappers.tsx b/dotcom-rendering/src/lib/cardWrappers.tsx index 7f0009e12c1..20754ebd4d5 100644 --- a/dotcom-rendering/src/lib/cardWrappers.tsx +++ b/dotcom-rendering/src/lib/cardWrappers.tsx @@ -351,7 +351,7 @@ export const Card25Media25 = ({ imageLoading={imageLoading} isTagPage={isTagPage} headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} - isPlayableMediaCard={false} + canPlayInline={false} trailTextColour={palette('--card-headline')} /> ); @@ -393,7 +393,7 @@ export const Card25Media25SmallHeadline = ({ imageLoading={imageLoading} isTagPage={isTagPage} headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }} - isPlayableMediaCard={false} + canPlayInline={false} trailTextColour={palette('--card-headline')} /> ); @@ -442,7 +442,7 @@ export const Card25Media25Tall = ({ : undefined } supportingContent={trail.supportingContent?.slice(0, 2)} - isPlayableMediaCard={false} + canPlayInline={false} trailTextColour={palette('--card-headline')} /> ); @@ -483,7 +483,7 @@ export const Card25Media25TallNoTrail = ({ isTagPage={isTagPage} headlineSizes={{ desktop: 'xsmall', tablet: 'xxsmall' }} supportingContent={trail.supportingContent?.slice(0, 2)} - isPlayableMediaCard={false} + canPlayInline={false} trailTextColour={palette('--card-headline')} /> ); @@ -524,7 +524,7 @@ export const Card25Media25TallSmallHeadline = ({ isTagPage={isTagPage} headlineSizes={{ desktop: 'xxsmall', tablet: 'xxsmall' }} supportingContent={trail.supportingContent?.slice(0, 2)} - isPlayableMediaCard={false} + canPlayInline={false} trailTextColour={palette('--card-headline')} /> ); @@ -805,7 +805,7 @@ export const CardDefault = ({ imageLoading={'lazy'} avatarUrl={undefined} headlineSizes={{ desktop: 'xxsmall' }} - isPlayableMediaCard={false} + canPlayInline={false} isTagPage={isTagPage} trailTextColour={palette('--card-headline')} /> @@ -844,7 +844,7 @@ export const CardDefaultMedia = ({ imageLoading={imageLoading} isTagPage={isTagPage} headlineSizes={{ desktop: 'xxsmall' }} - isPlayableMediaCard={false} + canPlayInline={false} trailTextColour={palette('--card-headline')} /> ); @@ -882,7 +882,7 @@ export const CardDefaultMediaMobile = ({ imageLoading={imageLoading} isTagPage={isTagPage} headlineSizes={{ desktop: 'xxsmall' }} - isPlayableMediaCard={false} + canPlayInline={false} trailTextColour={palette('--card-headline')} /> );