diff --git a/dotcom-rendering/src/components/Card/Card.stories.tsx b/dotcom-rendering/src/components/Card/Card.stories.tsx index 13ff33a031..f190f9ba7c 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} /> @@ -1032,7 +1032,7 @@ export const WhenVideoWithPlayButton = () => { }} imagePositionOnDesktop="left" mainMedia={mainVideo} - isPlayableMediaCard={false} + canPlayInline={false} />
  • @@ -1045,7 +1045,7 @@ export const WhenVideoWithPlayButton = () => { }} imagePositionOnDesktop="right" mainMedia={mainVideo} - isPlayableMediaCard={false} + canPlayInline={false} />
  • @@ -1059,7 +1059,7 @@ export const WhenVideoWithPlayButton = () => { }} imagePositionOnDesktop="right" mainMedia={mainVideo} - isPlayableMediaCard={false} + canPlayInline={false} /> diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx index 2431f62b3d..27a39eea5d 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, isBetaContainer, }: { @@ -203,11 +203,11 @@ const getMedia = ({ isCrossword?: boolean; slideshowImages?: DCRSlideshowImage[]; mainMedia?: MainMedia; - isPlayableMediaCard?: boolean; + canPlayInline?: boolean; podcastImage?: PodcastSeriesImage; isBetaContainer: boolean; }) => { - if (mainMedia && mainMedia.type === 'Video' && isPlayableMediaCard) { + if (mainMedia && mainMedia.type === 'Video' && canPlayInline) { return { type: 'video', mainMedia, @@ -306,7 +306,7 @@ export const Card = ({ avatarUrl, showClock, mainMedia, - isPlayableMediaCard, + canPlayInline, kickerText, showPulsingDot, starRating, @@ -427,7 +427,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, @@ -436,7 +436,7 @@ export const Card = ({ isCrossword, slideshowImages, mainMedia, - isPlayableMediaCard, + canPlayInline, podcastImage, isBetaContainer, }); diff --git a/dotcom-rendering/src/components/Carousel.importable.tsx b/dotcom-rendering/src/components/Carousel.importable.tsx index 7d3bc6f8df..cd88df7e69 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 8cf330168a..2e6df5ddb9 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 9b08c5de3d..fec389228b 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 11f874b545..d296ff707c 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} /> @@ -329,6 +330,7 @@ export const BoostedCardLayout = ({ showTopBarDesktop={false} showTopBarMobile={true} liveUpdatesPosition={liveUpdatesPosition} + canPlayInline={true} /> @@ -413,6 +415,7 @@ export const StandardCardLayout = ({ } : undefined } + canPlayInline={false} /> ); diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx index 36de07c0b1..ad29cdc47d 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} /> @@ -218,6 +219,7 @@ const TwoCardOrFourCardLayout = ({ showLivePlayable={false} showTopBarDesktop={false} showTopBarMobile={true} + canPlayInline={false} /> ); diff --git a/dotcom-rendering/src/components/FrontCard.tsx b/dotcom-rendering/src/components/FrontCard.tsx index 6c5891e8a8..5191f5ce88 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 17ead5b643..653fc4924b 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 2ad9059155..c6e740720d 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} /> ); diff --git a/dotcom-rendering/src/components/StaticFeatureTwo.tsx b/dotcom-rendering/src/components/StaticFeatureTwo.tsx index d46959615d..c321282b09 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 d822fc2d39..56e4ebce1f 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} /> ); diff --git a/dotcom-rendering/src/components/SupportingContent.stories.tsx b/dotcom-rendering/src/components/SupportingContent.stories.tsx index 06065b9fb8..122470a39b 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 7f0009e12c..20754ebd4d 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')} /> );