Refactor feature card video

Author: domlander

dotcom-rendering/src/components/FeatureCard.stories.tsx

@@ -282,8 +282,7 @@ export const GalleryImmersive: Story = {
 	},
 };
 
-// A video article
-export const Video: Story = {
+export const YoutubeVideo: Story = {
 	args: {
 		format: {
 			...cardProps.format,
@@ -308,17 +307,17 @@ export const Video: Story = {
 	},
 };
 
-export const VideoImmersive: Story = {
+export const YoutubeVideoImmersive: Story = {
 	args: {
-		...Video.args,
+		...YoutubeVideo.args,
 		...Immersive.args,
 	},
 };
 
 // A standard (non-video) article with a video main media
-export const VideoMainMedia: Story = {
+export const YoutubeVideoMainMedia: Story = {
 	args: {
-		...Video.args,
+		...YoutubeVideo.args,
 		image: {
 			src: 'https://media.guim.co.uk/4612af5f4667888fa697139cf570b6373d93a710/2446_345_3218_1931/master/3218.jpg',
 			altText: 'alt text',
@@ -330,9 +329,9 @@ export const VideoMainMedia: Story = {
 	},
 };
 
-export const VideoMainMediaImmersive: Story = {
+export const YoutubeVideoMainMediaImmersive: Story = {
 	args: {
-		...VideoMainMedia.args,
+		...YoutubeVideoMainMedia.args,
 		...Immersive.args,
 	},
 };

dotcom-rendering/src/components/FeatureCard.tsx

@@ -5,13 +5,12 @@ import {
 	space,
 	until,
 } from '@guardian/source/foundations';
-import { Hide, SvgMediaControlsPlay } from '@guardian/source/react-components';
+import { Hide } from '@guardian/source/react-components';
 import {
 	ArticleDesign,
 	type ArticleFormat,
 	ArticleSpecial,
 } from '../lib/articleFormat';
-import { secondsToDuration } from '../lib/formatTime';
 import { getZIndex } from '../lib/getZIndex';
 import { getOphanComponents } from '../lib/labs';
 import { transparentColour } from '../lib/transparentColour';
@@ -39,7 +38,6 @@ import { FeatureCardCommentCount } from './FeatureCardCommentCount';
 import { FormatBoundary } from './FormatBoundary';
 import { Island } from './Island';
 import { MediaDuration } from './MediaDuration';
-import { Pill } from './Pill';
 import { StarRating } from './StarRating/StarRating';
 import { SupportingContent } from './SupportingContent';
 import { WaveForm } from './WaveForm';
@@ -218,12 +216,6 @@ const trailTextWrapper = css`
 	}
 `;
 
-const videoPillStyles = css`
-	position: absolute;
-	top: ${space[2]}px;
-	right: ${space[2]}px;
-`;
-
 const waveformStyles = css`
 	position: absolute;
 	bottom: 0;
@@ -239,16 +231,16 @@ const getMedia = ({
 	imageUrl,
 	imageAltText,
 	mainMedia,
-	canPlayInline,
+	showVideo,
 }: {
 	imageUrl?: string;
 	imageAltText?: string;
 	mainMedia?: MainMedia;
-	canPlayInline?: boolean;
+	showVideo?: boolean;
 }) => {
-	if (mainMedia && mainMedia.type === 'YoutubeVideo' && canPlayInline) {
+	if (mainMedia?.type === 'YoutubeVideo' && showVideo) {
 		return {
-			type: 'video',
+			type: 'youtube-video',
 			mainMedia,
 		} as const;
 	}
@@ -360,7 +352,7 @@ export const FeatureCard = ({
 	imageLoading,
 	showClock,
 	mainMedia,
-	canPlayInline,
+	canPlayInline = false,
 	kickerText,
 	showPulsingDot,
 	dataLinkName,
@@ -383,22 +375,15 @@ export const FeatureCard = ({
 }: Props) => {
 	const hasSublinks = supportingContent && supportingContent.length > 0;
 
-	const isVideoMainMedia = mainMedia?.type === 'YoutubeVideo';
 	const isVideoArticle = format.design === ArticleDesign.Video;
 
-	const videoDuration =
-		mainMedia?.type === 'YoutubeVideo' ? mainMedia.duration : undefined;
-
 	const media = getMedia({
 		imageUrl: image?.src,
 		imageAltText: image?.altText,
 		mainMedia,
-		canPlayInline,
+		showVideo: showVideo && canPlayInline,
 	});
 
-	const showYoutubeVideo =
-		canPlayInline && showVideo && mainMedia?.type === 'YoutubeVideo';
-
 	const showCardAge =
 		webPublicationDate !== undefined && showClock !== undefined;
 
@@ -413,11 +398,13 @@ export const FeatureCard = ({
 
 	const isLabs = format.theme === ArticleSpecial.Labs;
 
+	if (!media) return null;
+
 	return (
 		<FormatBoundary format={format}>
 			<ContainerOverrides containerPalette={containerPalette}>
 				<div css={[baseCardStyles, hoverStyles, sublinkHoverStyles]}>
-					{!showYoutubeVideo && (
+					{media?.type !== 'youtube-video' && (
 						<CardLink
 							linkTo={linkTo}
 							headlineText={headlineText}
@@ -426,7 +413,7 @@ export const FeatureCard = ({
 						/>
 					)}
 					<div css={contentStyles}>
-						{showYoutubeVideo && (
+						{media?.type === 'youtube-video' && (
 							<div
 								data-chromatic="ignore"
 								data-component="youtube-atom"
@@ -441,15 +428,15 @@ export const FeatureCard = ({
 									defer={{ until: 'visible' }}
 								>
 									<YoutubeBlockComponent
-										id={mainMedia.id}
-										assetId={mainMedia.videoId}
+										id={media.mainMedia.id}
+										assetId={media.mainMedia.videoId}
 										index={collectionId}
-										expired={mainMedia.expired}
+										expired={media.mainMedia.expired}
 										format={format}
 										stickyVideos={false}
 										enableAds={false}
-										duration={mainMedia.duration}
-										posterImage={mainMedia.image}
+										duration={media.mainMedia.duration}
+										posterImage={media.mainMedia.image}
 										width={300}
 										height={375}
 										origin="The Guardian"
@@ -481,7 +468,7 @@ export const FeatureCard = ({
 								</Island>
 							</div>
 						)}
-						{!showYoutubeVideo && media && (
+						{media?.type !== 'youtube-video' && (
 							<div
 								css={css`
 									position: relative;
@@ -490,24 +477,7 @@ export const FeatureCard = ({
 									)};
 								`}
 							>
-								{media.type === 'video' && (
-									<div>
-										<CardPicture
-											mainImage={
-												media.mainMedia.image ?? ''
-											}
-											imageSize={imageSize}
-											alt={headlineText}
-											loading={imageLoading}
-											aspectRatio={aspectRatio}
-											mobileAspectRatio={
-												mobileAspectRatio
-											}
-										/>
-									</div>
-								)}
-
-								{media.type === 'picture' && (
+								{media?.type === 'picture' && (
 									<>
 										<CardPicture
 											mainImage={media.imageUrl}
@@ -519,7 +489,9 @@ export const FeatureCard = ({
 												mobileAspectRatio
 											}
 										/>
-										{isVideoMainMedia &&
+										{isVideoArticle &&
+											mainMedia?.type ===
+												'YoutubeVideo' &&
 											mainMedia.duration > 0 && (
 												<MediaDuration
 													mediaDuration={
@@ -684,7 +656,14 @@ export const FeatureCard = ({
 												) : undefined
 											}
 											showLivePlayable={false}
-											mainMedia={mainMedia}
+											mainMedia={
+												isVideoArticle &&
+												mainMedia?.type ===
+													'YoutubeVideo' &&
+												mainMedia?.duration > 0
+													? undefined
+													: mainMedia
+											}
 											isNewsletter={isNewsletter}
 										/>
 
@@ -695,23 +674,6 @@ export const FeatureCard = ({
 												233,
 											)}
 									</div>
-									{/* On video article cards, the duration is displayed in the footer */}
-									{!isVideoArticle &&
-									isVideoMainMedia &&
-									videoDuration !== undefined ? (
-										<div css={videoPillStyles}>
-											<Pill
-												content={
-													<time>
-														{secondsToDuration(
-															videoDuration,
-														)}
-													</time>
-												}
-												icon={<SvgMediaControlsPlay />}
-											/>
-										</div>
-									) : null}
 								</div>
 
 								{isImmersive &&

dotcom-rendering/src/components/StaticFeatureTwo.tsx

@@ -74,7 +74,6 @@ export const StaticFeatureTwo = ({
 							isExternalLink={card.isExternalLink}
 							branding={card.branding}
 							containerPalette={containerPalette}
-							trailText={undefined}
 							serverTime={serverTime}
 							imageLoading={imageLoading}
 							aspectRatio={aspectRatio}