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