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')}
/>
);