Refactor Feature card Youtube video

Author: domlander

dotcom-rendering/src/components/Card/components/PlayIcon.tsx

@@ -43,10 +43,10 @@ const wideIconStyles = (
 	}
 `;
 
-export const narrowPlayIconWidth = 56;
+export const narrowPlayIconDiameter = 56;
 const narrowStyles = css`
-	width: ${narrowPlayIconWidth}px;
-	height: ${narrowPlayIconWidth}px;
+	width: ${narrowPlayIconDiameter}px;
+	height: ${narrowPlayIconDiameter}px;
 	display: flex;
 	justify-content: center;
 	align-items: center;

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

@@ -292,7 +292,7 @@ export const YoutubeVideo = {
 			design: ArticleDesign.Video,
 		},
 		image: {
-			src: 'https://media.guim.co.uk/f2aedd24e5414073a653f68112e0ad070c6f4a2b/254_0_7493_4500/master/7493.jpg',
+			src: 'https://media.guim.co.uk/7b500cfe9afe4e211ad771c86e66297c9c22993b/0_61_4801_2880/master/4801.jpg',
 			altText: 'alt text',
 		},
 		mainMedia: {

dotcom-rendering/src/components/FeatureCard.tsx

@@ -24,11 +24,12 @@ import type {
 	DCRFrontImage,
 	DCRSupportingContent,
 } from '../types/front';
-import type { MainMedia } from '../types/mainMedia';
+import type { MainMedia, YoutubeVideo } from '../types/mainMedia';
 import { BrandingLabel } from './BrandingLabel';
 import { CardFooter } from './Card/components/CardFooter';
 import { CardLink } from './Card/components/CardLink';
 import type { MediaSizeType } from './Card/components/MediaWrapper';
+import { narrowPlayIconDiameter, PlayIcon } from './Card/components/PlayIcon';
 import { TrailText } from './Card/components/TrailText';
 import { CardHeadline, type ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
@@ -38,7 +39,6 @@ import { FeatureCardCardAge } from './FeatureCardCardAge';
 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';
@@ -47,6 +47,17 @@ import { YoutubeBlockComponent } from './YoutubeBlockComponent.importable';
 
 export type Position = 'inner' | 'outer' | 'none';
 
+type Media =
+	| {
+			type: 'picture';
+			imageUrl: string;
+			imageAltText?: string;
+	  }
+	| {
+			type: 'youtube-video';
+			mainMedia: YoutubeVideo;
+	  };
+
 const baseCardStyles = css`
 	display: flex;
 	flex-direction: column;
@@ -224,6 +235,12 @@ const videoPillStyles = css`
 	right: ${space[2]}px;
 `;
 
+const playIconStyles = css`
+	position: absolute;
+	top: calc(50% - ${narrowPlayIconDiameter / 2}px);
+	left: calc(50% - ${narrowPlayIconDiameter / 2}px);
+`;
+
 const waveformStyles = css`
 	position: absolute;
 	bottom: 0;
@@ -239,16 +256,18 @@ const getMedia = ({
 	imageUrl,
 	imageAltText,
 	mainMedia,
-	canPlayInline,
+	isVideoArticle,
+	showVideo,
 }: {
 	imageUrl?: string;
 	imageAltText?: string;
 	mainMedia?: MainMedia;
-	canPlayInline?: boolean;
-}) => {
-	if (mainMedia && mainMedia.type === 'YoutubeVideo' && canPlayInline) {
+	isVideoArticle: boolean;
+	showVideo?: boolean;
+}): Media | undefined => {
+	if (isVideoArticle && mainMedia?.type === 'YoutubeVideo' && showVideo) {
 		return {
-			type: 'video',
+			type: 'youtube-video',
 			mainMedia,
 		} as const;
 	}
@@ -360,7 +379,7 @@ export const FeatureCard = ({
 	imageLoading,
 	showClock,
 	mainMedia,
-	canPlayInline,
+	canPlayInline = false,
 	kickerText,
 	showPulsingDot,
 	dataLinkName,
@@ -383,22 +402,16 @@ 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,
+		isVideoArticle,
+		showVideo: showVideo && canPlayInline,
 	});
 
-	const showYoutubeVideo =
-		canPlayInline && showVideo && mainMedia?.type === 'YoutubeVideo';
-
 	const showCardAge =
 		webPublicationDate !== undefined && showClock !== undefined;
 
@@ -413,11 +426,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 +441,7 @@ export const FeatureCard = ({
 						/>
 					)}
 					<div css={contentStyles}>
-						{showYoutubeVideo && (
+						{media.type === 'youtube-video' && (
 							<div
 								data-chromatic="ignore"
 								data-component="youtube-atom"
@@ -441,15 +456,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 +496,7 @@ export const FeatureCard = ({
 								</Island>
 							</div>
 						)}
-						{!showYoutubeVideo && media && (
+						{media.type !== 'youtube-video' && (
 							<div
 								css={css`
 									position: relative;
@@ -490,23 +505,7 @@ export const FeatureCard = ({
 									)};
 								`}
 							>
-								{media.type === 'video' && (
-									<div>
-										<CardPicture
-											mainImage={
-												media.mainMedia.image ?? ''
-											}
-											imageSize={imageSize}
-											alt={headlineText}
-											loading={imageLoading}
-											aspectRatio={aspectRatio}
-											mobileAspectRatio={
-												mobileAspectRatio
-											}
-										/>
-									</div>
-								)}
-
+								{/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- A PR to add self-hosted video is upcoming where this check will be needed. */}
 								{media.type === 'picture' && (
 									<>
 										<CardPicture
@@ -519,20 +518,30 @@ export const FeatureCard = ({
 												mobileAspectRatio
 											}
 										/>
-										{isVideoMainMedia &&
+
+										{mainMedia?.type === 'YoutubeVideo' &&
 											mainMedia.duration > 0 && (
-												<MediaDuration
-													mediaDuration={
-														mainMedia.duration
-													}
-													mediaPositionOnDesktop={
-														'top'
-													}
-													mediaPositionOnMobile={
-														'left'
-													}
-												/>
+												<div css={videoPillStyles}>
+													<Pill
+														content={
+															<time>
+																{secondsToDuration(
+																	mainMedia.duration,
+																)}
+															</time>
+														}
+														icon={
+															<SvgMediaControlsPlay />
+														}
+													/>
+												</div>
 											)}
+
+										{mainMedia?.type === 'YoutubeVideo' && (
+											<div css={playIconStyles}>
+												<PlayIcon iconWidth="narrow" />
+											</div>
+										)}
 									</>
 								)}
 
@@ -684,7 +693,6 @@ export const FeatureCard = ({
 												) : undefined
 											}
 											showLivePlayable={false}
-											mainMedia={mainMedia}
 											isNewsletter={isNewsletter}
 										/>
 
@@ -695,23 +703,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/SelfHostedVideoPlayer.tsx

@@ -17,7 +17,7 @@ import type { ActiveCue } from '../lib/useSubtitles';
 import { filterOutHlsSources, type Source } from '../lib/video';
 import { palette } from '../palette';
 import type { VideoPlayerFormat } from '../types/mainMedia';
-import { narrowPlayIconWidth, PlayIcon } from './Card/components/PlayIcon';
+import { narrowPlayIconDiameter, PlayIcon } from './Card/components/PlayIcon';
 import { SubtitleOverlay } from './SubtitleOverlay';
 import { VideoProgressBar } from './VideoProgressBar';
 
@@ -50,8 +50,8 @@ const subtitleStyles = (subtitleSize: SubtitleSize | undefined) => css`
 const playIconStyles = css`
 	position: absolute;
 	/* Center the icon */
-	top: calc(50% - ${narrowPlayIconWidth / 2}px);
-	left: calc(50% - ${narrowPlayIconWidth / 2}px);
+	top: calc(50% - ${narrowPlayIconDiameter / 2}px);
+	left: calc(50% - ${narrowPlayIconDiameter / 2}px);
 	cursor: pointer;
 	border: none;
 	background: none;

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}

dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomFeatureCardOverlay.tsx

@@ -11,7 +11,7 @@ import { transparentColour } from '../../lib/transparentColour';
 import { palette } from '../../palette';
 import type { AspectRatio } from '../../types/front';
 import { CardFooter } from '../Card/components/CardFooter';
-import { narrowPlayIconWidth, PlayIcon } from '../Card/components/PlayIcon';
+import { narrowPlayIconDiameter, PlayIcon } from '../Card/components/PlayIcon';
 import { TrailText } from '../Card/components/TrailText';
 import type { ResponsiveFontSize } from '../CardHeadline';
 import { CardHeadline } from '../CardHeadline';
@@ -106,7 +106,7 @@ const playIconStyles = css`
 	  * headlines and standfirsts before we decide on a final position.
 	  */
 	top: 35%;
-	left: calc(50% - ${narrowPlayIconWidth / 2}px);
+	left: calc(50% - ${narrowPlayIconDiameter / 2}px);
 `;
 
 const videoPillStyles = css`

dotcom-rendering/src/types/mainMedia.ts

@@ -8,7 +8,7 @@ type Media = {
 };
 
 /** For displaying embedded, playable videos directly in cards */
-type YoutubeVideo = Media & {
+export type YoutubeVideo = Media & {
 	type: 'YoutubeVideo';
 	/** @see https://github.com/guardian/frontend/blob/8e7e4d0e/common/app/model/content/Atom.scala#L159 */
 	id: string;