Merge pull request #14826 from guardian/doml/cinemagraph

Cinemagraphs

Author: domlander

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

@@ -32,6 +32,7 @@ import type {
 	DCRSnapType,
 	DCRSupportingContent,
 } from '../../types/front';
+import type { CardMediaType } from '../../types/layout';
 import type { MainMedia } from '../../types/mainMedia';
 import type { OnwardsSource } from '../../types/onwards';
 import { Avatar } from '../Avatar';
@@ -280,8 +281,21 @@ const getMedia = ({
 	isBetaContainer: boolean;
 }) => {
 	if (mainMedia?.type === 'SelfHostedVideo' && canPlayInline) {
+		let type: CardMediaType;
+		switch (mainMedia.videoStyle) {
+			case 'Default':
+				type = 'default-video';
+				break;
+			case 'Loop':
+				type = 'loop-video';
+				break;
+			case 'Cinemagraph':
+				type = 'cinemagraph';
+				break;
+		}
+
 		return {
-			type: 'loop-video',
+			type,
 			mainMedia,
 		} as const;
 	}
@@ -564,6 +578,12 @@ export const Card = ({
 		isBetaContainer,
 	});
 
+	const isSelfHostedVideo =
+		media &&
+		(media.type === 'default-video' ||
+			media.type === 'loop-video' ||
+			media.type === 'cinemagraph');
+
 	const resolvedDataLinkName =
 		media && dataLinkName
 			? appendLinkNameMedia(dataLinkName, media.type)
@@ -941,7 +961,7 @@ export const Card = ({
 								/>
 							</AvatarContainer>
 						)}
-						{media.type === 'loop-video' && (
+						{isSelfHostedVideo && (
 							<Island
 								priority="critical"
 								defer={{ until: 'visible' }}
@@ -952,6 +972,7 @@ export const Card = ({
 									uniqueId={uniqueId}
 									height={media.mainMedia.height}
 									width={media.mainMedia.width}
+									videoStyle={media.mainMedia.videoStyle}
 									posterImage={media.mainMedia.image ?? ''}
 									fallbackImage={media.mainMedia.image ?? ''}
 									fallbackImageSize={mediaSize}

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

@@ -59,7 +59,7 @@ const hoverStyles = css`
 	*/
 	:has(
 			ul.sublinks:hover,
-			.video-container:hover,
+			.video-container.loop:hover,
 			.slideshow-carousel:hover,
 			.branding-logo:hover
 		) {

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

@@ -1,6 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import { between, from, space, until } from '@guardian/source/foundations';
+import { getZIndex } from '../../../lib/getZIndex';
 import type { CardMediaType } from '../../../types/layout';
 
 const mediaFixedSize = {
@@ -48,6 +49,9 @@ const mediaOverlayContainerStyles = css`
 	left: 0;
 	width: 100%;
 	height: 100%;
+	z-index: ${getZIndex('mediaOverlay')};
+	cursor: pointer;
+	pointer-events: none;
 `;
 
 /**
@@ -219,7 +223,9 @@ export const MediaWrapper = ({
 				(mediaType === 'slideshow' ||
 					mediaType === 'picture' ||
 					mediaType === 'youtube-video' ||
+					mediaType === 'default-video' ||
 					mediaType === 'loop-video' ||
+					mediaType === 'cinemagraph' ||
 					mediaType === 'podcast') &&
 					isHorizontalOnDesktop &&
 					flexBasisStyles({
@@ -267,8 +273,10 @@ export const MediaWrapper = ({
 		>
 			<>
 				{children}
-				{/* This image overlay is styled when the CardLink is hovered */}
-				{(mediaType === 'picture' || mediaType === 'slideshow') &&
+				{/* This overlay is styled when the CardLink is hovered */}
+				{(mediaType === 'picture' ||
+					mediaType === 'slideshow' ||
+					mediaType === 'cinemagraph') &&
 					!hideMediaOverlay && (
 						<div
 							css={[

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

@@ -18,6 +18,7 @@ import {
 	customSelfHostedVideoPlayAudioEventName,
 	customYoutubePlayEventName,
 } from '../lib/video';
+import type { VideoPlayerFormat } from '../types/mainMedia';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import type {
@@ -33,6 +34,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 +121,7 @@ type Props = {
 	uniqueId: string;
 	height: number;
 	width: number;
+	videoStyle: VideoPlayerFormat;
 	posterImage: string;
 	fallbackImage: CardPictureProps['mainImage'];
 	fallbackImageSize: CardPictureProps['imageSize'];
@@ -133,6 +139,7 @@ export const SelfHostedVideo = ({
 	uniqueId,
 	height,
 	width,
+	videoStyle,
 	posterImage,
 	fallbackImage,
 	fallbackImageSize,
@@ -170,6 +177,12 @@ export const SelfHostedVideo = ({
 
 	const VISIBILITY_THRESHOLD = 0.5;
 
+	/**
+	 * 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.
+	 */
+	const isCinemagraph = videoStyle === 'Cinemagraph';
+
 	const [isInView, setNode] = useIsInView({
 		repeat: true,
 		threshold: VISIBILITY_THRESHOLD,
@@ -534,11 +547,15 @@ export const SelfHostedVideo = ({
 	};
 
 	const handlePlayPauseClick = (event: React.SyntheticEvent) => {
+		if (isCinemagraph) return;
+
 		event.preventDefault();
 		playPauseVideo();
 	};
 
 	const handleAudioClick = (event: React.SyntheticEvent) => {
+		if (isCinemagraph) return;
+
 		void submitClickComponentEvent(event.currentTarget, renderingTarget);
 
 		event.stopPropagation(); // Don't pause the video
@@ -558,6 +575,8 @@ export const SelfHostedVideo = ({
 	 * browser. Therefore we need to apply the pause state to the video.
 	 */
 	const handlePause = () => {
+		if (isCinemagraph) return;
+
 		if (
 			playerState === 'PAUSED_BY_USER' ||
 			playerState === 'PAUSED_BY_INTERSECTION_OBSERVER'
@@ -581,6 +600,7 @@ export const SelfHostedVideo = ({
 			new Error(message),
 			'self-hosted-video',
 		);
+
 		log('dotcom', message);
 	};
 
@@ -612,6 +632,8 @@ export const SelfHostedVideo = ({
 	const handleKeyDown = (
 		event: React.KeyboardEvent<HTMLVideoElement>,
 	): void => {
+		if (isCinemagraph) return;
+
 		switch (event.key) {
 			case 'Enter':
 			case ' ':
@@ -642,8 +664,11 @@ export const SelfHostedVideo = ({
 	return (
 		<figure
 			ref={setNode}
-			css={videoContainerStyles}
-			className="video-container"
+			css={[
+				videoContainerStyles,
+				isCinemagraph && cinemagraphContainerStyles,
+			]}
+			className={`video-container ${videoStyle.toLocaleLowerCase()}`}
 			data-component="gu-video-loop"
 		>
 			<SelfHostedVideoPlayer
@@ -652,6 +677,7 @@ export const SelfHostedVideo = ({
 				uniqueId={uniqueId}
 				width={width}
 				height={height}
+				videoStyle={videoStyle}
 				posterImage={optimisedPosterImage}
 				FallbackImageComponent={FallbackImageComponent}
 				currentTime={currentTime}
@@ -671,8 +697,8 @@ export const SelfHostedVideo = ({
 				AudioIcon={hasAudio ? AudioIcon : null}
 				preloadPartialData={preloadPartialData}
 				showPlayIcon={showPlayIcon}
-				subtitleSource={subtitleSource}
 				subtitleSize={subtitleSize}
+				subtitleSource={subtitleSource}
 				activeCue={activeCue}
 			/>
 		</figure>

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

@@ -71,6 +71,13 @@ export const Loop16to9: Story = {
 	},
 };
 
+export const WithCinemagraph: Story = {
+	args: {
+		...Loop4to5.args,
+		videoStyle: 'Cinemagraph',
+	},
+};
+
 export const PausePlay: Story = {
 	...Loop4to5,
 	name: 'Pause and play interaction',

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -16,17 +16,14 @@ import { forwardRef } from 'react';
 import type { ActiveCue } from '../lib/useSubtitles';
 import type { Source } from '../lib/video';
 import { palette } from '../palette';
+import type { VideoPlayerFormat } from '../types/mainMedia';
 import { narrowPlayIconWidth, PlayIcon } from './Card/components/PlayIcon';
 import { SubtitleOverlay } from './SubtitleOverlay';
 import { VideoProgressBar } from './VideoProgressBar';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
-const videoStyles = (
-	width: number,
-	height: number,
-	subtitleSize: SubtitleSize,
-) => css`
+const videoStyles = (width: number, height: number) => css`
 	position: relative;
 	display: block;
 	height: auto;
@@ -35,7 +32,9 @@ const videoStyles = (
 	/* Prevents CLS by letting the browser know the space the video will take up. */
 	aspect-ratio: ${width} / ${height};
 	object-fit: cover;
+`;
 
+const subtitleStyles = (subtitleSize: SubtitleSize | undefined) => css`
 	::cue {
 		/* Hide the cue by default as we prefer custom overlay */
 		visibility: hidden;
@@ -103,6 +102,7 @@ type Props = {
 	uniqueId: string;
 	width: number;
 	height: number;
+	videoStyle: VideoPlayerFormat;
 	FallbackImageComponent: ReactElement;
 	isPlayable: boolean;
 	playerState: PlayerStates;
@@ -122,7 +122,7 @@ type Props = {
 	preloadPartialData: boolean;
 	showPlayIcon: boolean;
 	subtitleSource?: string;
-	subtitleSize: SubtitleSize;
+	subtitleSize?: SubtitleSize;
 	/* used in custom subtitle overlays */
 	activeCue?: ActiveCue | null;
 };
@@ -144,6 +144,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			uniqueId,
 			width,
 			height,
+			videoStyle,
 			FallbackImageComponent,
 			posterImage,
 			isPlayable,
@@ -169,22 +170,36 @@ export const SelfHostedVideoPlayer = forwardRef(
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
 		const videoId = `video-${uniqueId}`;
+		const showSubtitles =
+			videoStyle !== 'Cinemagraph' && !!subtitleSource && !!subtitleSize;
+
+		const showControls =
+			videoStyle !== 'Cinemagraph' &&
+			ref &&
+			'current' in ref &&
+			ref.current &&
+			isPlayable;
+
+		const dataLinkName = `gu-video-${videoStyle}-${
+			showPlayIcon ? 'play' : 'pause'
+		}-${atomId}`;
 
 		return (
 			<>
-				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Captions will be considered later. */}
+				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Not all videos require captions. */}
 				<video
 					id={videoId}
-					css={videoStyles(width, height, subtitleSize)}
+					css={[
+						videoStyles(width, height),
+						showSubtitles && subtitleStyles(subtitleSize),
+					]}
 					crossOrigin="anonymous"
 					ref={ref}
 					tabIndex={0}
 					data-testid="self-hosted-video-player"
 					height={height}
 					width={width}
-					data-link-name={`gu-video-loop-${
-						showPlayIcon ? 'play' : 'pause'
-					}-${atomId}`}
+					data-link-name={dataLinkName}
 					data-chromatic="ignore"
 					preload={preloadPartialData ? 'metadata' : 'none'}
 					loop={true}
@@ -218,7 +233,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 							type={source.mimeType}
 						/>
 					))}
-					{subtitleSource !== undefined && (
+					{showSubtitles && (
 						<track
 							// Don't use default - it forces native rendering on iOS
 							default={false}
@@ -229,13 +244,13 @@ export const SelfHostedVideoPlayer = forwardRef(
 					)}
 					{FallbackImageComponent}
 				</video>
-				{!!activeCue?.text && (
+				{showSubtitles && !!activeCue?.text && (
 					<SubtitleOverlay
 						text={activeCue.text}
 						subtitleSize={subtitleSize}
 					/>
 				)}
-				{ref && 'current' in ref && ref.current && isPlayable && (
+				{showControls && (
 					<>
 						{/* Play icon */}
 						{showPlayIcon && (
@@ -253,7 +268,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 						<VideoProgressBar
 							videoId={videoId}
 							currentTime={currentTime}
-							duration={ref.current.duration}
+							duration={ref.current!.duration}
 						/>
 						{/* Audio icon */}
 						{AudioIcon && (

dotcom-rendering/src/frontend/feFront.ts

@@ -126,6 +126,7 @@ export interface FEMediaAtom {
 	trailImage?: { allImages: Image[] };
 	expired?: boolean;
 	activeVersion?: number;
+	videoPlayerFormat?: 'Default' | 'Loop' | 'Cinemagraph';
 	// channelId?: string; // currently unused
 }