Allow cinemagraph option for looping video

Author: domlander

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

@@ -890,9 +890,14 @@ export const Card = ({
 					<MediaWrapper
 						mediaSize={mediaSize}
 						mediaType={media.type}
+						isCinemagraph={
+							media.mainMedia?.type === 'LoopVideo'
+								? !!media.mainMedia.isCinemagraph
+								: false
+						}
 						mediaPositionOnDesktop={mediaPositionOnDesktop}
 						mediaPositionOnMobile={mediaPositionOnMobile}
-						hideImageOverlay={media.type === 'slideshow'}
+						hideMediaOverlay={media.type === 'slideshow'}
 						padMedia={isMediaCardOrNewsletter && isBetaContainer}
 						isBetaContainer={isBetaContainer}
 						isSmallCard={isSmallCard}
@@ -946,6 +951,9 @@ export const Card = ({
 									uniqueId={uniqueId}
 									height={media.mainMedia.height}
 									width={media.mainMedia.width}
+									isCinemagraph={
+										!!media.mainMedia.isCinemagraph
+									}
 									posterImage={media.mainMedia.image ?? ''}
 									fallbackImage={media.mainMedia.image ?? ''}
 									fallbackImageSize={mediaSize}

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

@@ -42,7 +42,7 @@ const baseCardStyles = css`
 `;
 
 const hoverStyles = css`
-	:hover .image-overlay {
+	:hover .media-overlay {
 		width: 100%;
 		height: 100%;
 		background-color: ${palette('--card-background-hover')};
@@ -53,8 +53,10 @@ const hoverStyles = css`
 		text-decoration: underline;
 	}
 
-	/** We want to prevent the general hover styles applying when
-	    a click won't result in navigating to the main article */
+	/**
+	  * We want to prevent the general hover styles applying when
+	  * a click won't result in navigating to the main article
+	*/
 	:has(
 			ul.sublinks:hover,
 			.loop-video-container:hover,
@@ -64,7 +66,7 @@ const hoverStyles = css`
 		.card-headline .show-underline {
 			text-decoration: none;
 		}
-		.image-overlay {
+		.media-overlay {
 			background-color: transparent;
 		}
 	}
@@ -95,7 +97,7 @@ const onwardContentStyles = css`
 	border-radius: ${space[2]}px;
 	overflow: hidden;
 
-	:hover .image-overlay {
+	:hover .media-overlay {
 		border-radius: ${space[2]}px;
 	}
 `;

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

@@ -2,6 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
 import type { CardMediaType } from '../../../types/layout';
+import { getZIndex } from '../../../lib/getZIndex';
 
 const mediaFixedSize = {
 	tiny: 86,
@@ -29,25 +30,29 @@ type Props = {
 	children: React.ReactNode;
 	mediaSize: MediaSizeType;
 	mediaType?: CardMediaType;
+	isCinemagraph?: boolean;
 	mediaPositionOnDesktop: MediaPositionType;
 	mediaPositionOnMobile: MediaPositionType;
 	/**
 	 * Forces hiding the image overlay added to pictures & slideshows on hover.
 	 * This is to allow hiding the overlay on slideshow carousels where we don't
 	 * want it to be shown whilst retaining it for existing slideshows.
 	 */
-	hideImageOverlay?: boolean;
+	hideMediaOverlay?: boolean;
 	isBetaContainer: boolean;
 	isSmallCard: boolean;
 	padMedia?: boolean;
 };
 
-const imageOverlayContainerStyles = css`
+const mediaOverlayContainerStyles = css`
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
 	height: 100%;
+	z-index: ${getZIndex('mediaOverlay')};
+	cursor: pointer;
+	pointer-events: none;
 `;
 
 /**
@@ -201,9 +206,10 @@ export const MediaWrapper = ({
 	children,
 	mediaSize,
 	mediaType,
+	isCinemagraph,
 	mediaPositionOnDesktop,
 	mediaPositionOnMobile,
-	hideImageOverlay,
+	hideMediaOverlay: hideMediaOverlay,
 	isBetaContainer,
 	isSmallCard,
 	padMedia,
@@ -268,11 +274,13 @@ export const MediaWrapper = ({
 			<>
 				{children}
 				{/* This image overlay is styled when the CardLink is hovered */}
-				{(mediaType === 'picture' || mediaType === 'slideshow') &&
-					!hideImageOverlay && (
+				{(mediaType === 'picture' ||
+					mediaType === 'slideshow' ||
+					(mediaType === 'loop-video' && isCinemagraph)) &&
+					!hideMediaOverlay && (
 						<div
 							css={[
-								imageOverlayContainerStyles,
+								mediaOverlayContainerStyles,
 								padMedia &&
 									mediaPaddingStyles(
 										mediaPositionOnDesktop,
@@ -282,7 +290,7 @@ export const MediaWrapper = ({
 						>
 							{/* This child div is needed as the hover background colour covers the padded
 							    area around the image when the hover styles are applied to the top-level div */}
-							<div className="image-overlay" />
+							<div className="media-overlay" />
 						</div>
 					)}
 			</>

dotcom-rendering/src/components/FeatureCard.tsx

@@ -73,7 +73,7 @@ const baseCardStyles = css`
 `;
 
 const hoverStyles = css`
-	:hover .image-overlay {
+	:hover .media-overlay {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -94,7 +94,7 @@ const sublinkHoverStyles = css`
 		.card-headline .show-underline {
 			text-decoration: none;
 		}
-		.image-overlay {
+		.media-overlay {
 			background-color: transparent;
 		}
 	}
@@ -537,7 +537,7 @@ export const FeatureCard = ({
 								)}
 
 								{/* This image overlay is styled when the CardLink is hovered */}
-								<div className="image-overlay" />
+								<div className="media-overlay" />
 
 								<div
 									css={[

dotcom-rendering/src/components/LoopVideo.importable.tsx

@@ -33,6 +33,10 @@ const videoContainerStyles = css`
 	position: relative;
 `;
 
+const cinemagraphContainerStyles = css`
+	pointer-events: none;
+`;
+
 /**
  * Dispatches a custom play audio event so that other videos listening
  * for this event will be muted.
@@ -116,6 +120,11 @@ type Props = {
 	uniqueId: string;
 	height: number;
 	width: number;
+	/**
+	 * All controls on the video are hidden: the video looks like a GIF.
+	 * This includes but may not be limited to: audio icon, play/pause icon, subtitles, progress bar.
+	 */
+	isCinemagraph: boolean;
 	posterImage: string;
 	fallbackImage: CardPictureProps['mainImage'];
 	fallbackImageSize: CardPictureProps['imageSize'];
@@ -133,6 +142,7 @@ export const LoopVideo = ({
 	uniqueId,
 	height,
 	width,
+	isCinemagraph,
 	posterImage,
 	fallbackImage,
 	fallbackImageSize,
@@ -642,8 +652,13 @@ export const LoopVideo = ({
 	return (
 		<figure
 			ref={setNode}
-			css={videoContainerStyles}
-			className="loop-video-container"
+			css={[
+				videoContainerStyles,
+				isCinemagraph && cinemagraphContainerStyles,
+			]}
+			className={`loop-video-container ${
+				isCinemagraph ? 'cinemagraph' : ''
+			}`}
 			data-component="gu-video-loop"
 		>
 			<LoopVideoPlayer
@@ -663,17 +678,20 @@ export const LoopVideo = ({
 				handleLoadedMetadata={handleLoadedMetadata}
 				handleLoadedData={handleLoadedData}
 				handleCanPlay={handleCanPlay}
-				handlePlayPauseClick={handlePlayPauseClick}
-				handleAudioClick={handleAudioClick}
-				handleKeyDown={handleKeyDown}
-				handlePause={handlePause}
+				handlePlayPauseClick={
+					!isCinemagraph ? handlePlayPauseClick : undefined
+				}
+				handleAudioClick={!isCinemagraph ? handleAudioClick : undefined}
+				handleKeyDown={!isCinemagraph ? handleKeyDown : undefined}
+				handlePause={!isCinemagraph ? handlePause : undefined}
 				onError={onError}
-				AudioIcon={hasAudio ? AudioIcon : null}
+				AudioIcon={hasAudio && !isCinemagraph ? AudioIcon : null}
 				preloadPartialData={preloadPartialData}
-				showPlayIcon={showPlayIcon}
-				subtitleSource={subtitleSource}
-				subtitleSize={subtitleSize}
+				showPlayIcon={!isCinemagraph ? showPlayIcon : false}
+				subtitleSize={!isCinemagraph ? subtitleSize : undefined}
+				subtitleSource={!isCinemagraph ? subtitleSource : undefined}
 				activeCue={activeCue}
+				isCinemagraph={isCinemagraph}
 			/>
 		</figure>
 	);

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

@@ -71,6 +71,14 @@ export const Without5to4Ratio: Story = {
 	},
 };
 
+export const WithCinemagraph: Story = {
+	name: 'With cinemagraph',
+	args: {
+		...Default.args,
+		isCinemagraph: true,
+	},
+};
+
 export const PausePlay: Story = {
 	...Default,
 	name: 'Pause and play interaction',