Merge pull request #14866 from guardian/doml/rename-loop-video

Rename LoopVideo to SelfHostedVideo

Author: domlander

dotcom-rendering/fixtures/manual/trails.ts

@@ -648,7 +648,7 @@ export const newsletterTrails: [DCRFrontCard, DCRFrontCard] = [
 	},
 ];
 
-export const loopVideoCard: DCRFrontCard = {
+export const selfHostedVideoCard: DCRFrontCard = {
 	...defaultCardProps,
 	dataLinkName: 'news | group-0 | card-@2',
 	url: '/uk-news/2025/jan/22/prince-harry-says-sun-publisher-made-historic-admission-as-he-settles-case',

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

@@ -42,9 +42,9 @@ import type { Loading } from '../CardPicture';
 import { CardPicture } from '../CardPicture';
 import { Island } from '../Island';
 import { LatestLinks } from '../LatestLinks.importable';
-import { LoopVideo } from '../LoopVideo.importable';
-import type { SubtitleSize } from '../LoopVideoPlayer';
 import { Pill } from '../Pill';
+import { SelfHostedVideo } from '../SelfHostedVideo.importable';
+import type { SubtitleSize } from '../SelfHostedVideoPlayer';
 import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
 import { SnapCssSandbox } from '../SnapCssSandbox';
@@ -946,7 +946,7 @@ export const Card = ({
 								priority="critical"
 								defer={{ until: 'visible' }}
 							>
-								<LoopVideo
+								<SelfHostedVideo
 									sources={media.mainMedia.sources}
 									atomId={media.mainMedia.atomId}
 									uniqueId={uniqueId}

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

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

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

@@ -5,8 +5,8 @@ import {
 	audioTrails,
 	galleryTrails,
 	getSublinks,
-	loopVideoCard,
 	opinionTrails,
+	selfHostedVideoCard,
 	slideshowCard,
 	trails,
 	videoTrails,
@@ -542,14 +542,14 @@ export const ImmersiveCardsSplashAndStandard: Story = {
 	},
 };
 
-export const LoopVideoCards: Story = {
-	name: 'Looping video cards',
+export const SelfHostedVideoCards: Story = {
+	name: 'Self-hosted video cards',
 	args: {
-		frontSectionTitle: 'Loop video cards',
+		frontSectionTitle: 'Self-hosted video cards',
 		groupedTrails: {
 			...emptyGroupedTrails,
-			splash: [loopVideoCard],
-			standard: [loopVideoCard], // Loop video is disabled at standard card size
+			splash: [selfHostedVideoCard],
+			standard: [selfHostedVideoCard], // Self-hosted video is disabled at standard card size
 		},
 	},
 };

dotcom-rendering/src/components/FlexibleGeneral.tsx

@@ -21,7 +21,7 @@ import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FeatureCard } from './FeatureCard';
 import { FrontCard } from './FrontCard';
-import type { SubtitleSize } from './LoopVideoPlayer';
+import type { SubtitleSize } from './SelfHostedVideoPlayer';
 import type { Alignment } from './SupportingContent';
 
 type Props = {

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

@@ -2,8 +2,8 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import {
-	loopVideoCard,
 	opinionTrails,
+	selfHostedVideoCard,
 	slideshowCard,
 	snapLink,
 	trails,
@@ -280,14 +280,14 @@ export const GigaBoostedSplashWithLiveUpdates: Story = {
 	},
 };
 
-export const LoopVideoCards: Story = {
-	name: 'Looping video cards',
+export const SelfHostedVideoCard: Story = {
+	name: 'Self-hosted video cards',
 	args: {
-		frontSectionTitle: 'Looping video',
+		frontSectionTitle: 'Self-hosted video',
 		groupedTrails: {
 			...emptyGroupedTrails,
 			snap: [],
-			standard: [loopVideoCard],
+			standard: [selfHostedVideoCard],
 		},
 		collectionId: 1,
 	},

dotcom-rendering/src/components/FlexibleSpecial.tsx

@@ -19,7 +19,7 @@ import { UL } from './Card/components/UL';
 import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FrontCard } from './FrontCard';
-import type { SubtitleSize } from './LoopVideoPlayer';
+import type { SubtitleSize } from './SelfHostedVideoPlayer';
 import type { Alignment } from './SupportingContent';
 
 type Props = {

dotcom-rendering/src/components/LoopVideo.importable.tsx renamed to dotcom-rendering/src/components/SelfHostedVideo.importable.tsx

@@ -15,7 +15,7 @@ import { useShouldAdapt } from '../lib/useShouldAdapt';
 import { useSubtitles } from '../lib/useSubtitles';
 import type { CustomPlayEventDetail, Source } from '../lib/video';
 import {
-	customLoopPlayAudioEventName,
+	customSelfHostedVideoPlayAudioEventName,
 	customYoutubePlayEventName,
 } from '../lib/video';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
@@ -24,12 +24,12 @@ import type {
 	PLAYER_STATES,
 	PlayerStates,
 	SubtitleSize,
-} from './LoopVideoPlayer';
-import { LoopVideoPlayer } from './LoopVideoPlayer';
+} from './SelfHostedVideoPlayer';
+import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
 import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
 const videoContainerStyles = css`
-	z-index: ${getZIndex('loop-video-container')};
+	z-index: ${getZIndex('video-container')};
 	position: relative;
 `;
 
@@ -39,21 +39,21 @@ const videoContainerStyles = css`
  */
 export const dispatchCustomPlayAudioEvent = (uniqueId: string) => {
 	document.dispatchEvent(
-		new CustomEvent(customLoopPlayAudioEventName, {
+		new CustomEvent(customSelfHostedVideoPlayAudioEventName, {
 			detail: { uniqueId },
 		}),
 	);
 };
 
 const logAndReportError = (src: string, error: Error) => {
-	const message = `Autoplay failure for loop video. Source: ${src} could not be played. Error: ${String(
+	const message = `Autoplay failure for self-hosted video. Source: ${src} could not be played. Error: ${String(
 		error,
 	)}`;
 
 	if (error instanceof Error) {
 		window.guardian.modules.sentry.reportError(
 			new Error(message),
-			'loop-video',
+			'self-hosted-video',
 		);
 	}
 
@@ -72,7 +72,7 @@ const getOptimisedPosterImage = (mainImage: string): string => {
 
 	return generateImageURL({
 		mainImage,
-		imageWidth: 940, // The widest a looping video can be: Flexible special, giga-boosted
+		imageWidth: 940, // The widest a video can be: flexible special container, giga-boosted slot
 		resolution,
 		aspectRatio: '5:4',
 	});
@@ -95,7 +95,7 @@ const doesVideoHaveAudio = (video: HTMLVideoElement): boolean => {
 			new Error(
 				'Could not determine if video has audio. This is likely due to the browser not supporting the necessary properties.',
 			),
-			'loop-video',
+			'self-hosted-video',
 		);
 
 		return true;
@@ -127,7 +127,7 @@ type Props = {
 	subtitleSize: SubtitleSize;
 };
 
-export const LoopVideo = ({
+export const SelfHostedVideo = ({
 	sources,
 	atomId,
 	uniqueId,
@@ -321,7 +321,7 @@ export const LoopVideo = ({
 		};
 
 		document.addEventListener(
-			customLoopPlayAudioEventName,
+			customSelfHostedVideoPlayAudioEventName,
 			handleCustomPlayAudioEvent,
 		);
 		document.addEventListener(
@@ -339,7 +339,7 @@ export const LoopVideo = ({
 
 		return () => {
 			document.removeEventListener(
-				customLoopPlayAudioEventName,
+				customSelfHostedVideoPlayAudioEventName,
 				handleCustomPlayAudioEvent,
 			);
 			document.removeEventListener(
@@ -573,13 +573,13 @@ export const LoopVideo = ({
 	 * Sentry and log in the console.
 	 */
 	const onError = () => {
-		const message = `Loop video could not be played. source: ${
+		const message = `Self-hosted video could not be played. source: ${
 			vidRef.current?.currentSrc ?? 'unknown'
 		}`;
 
 		window.guardian.modules.sentry.reportError(
 			new Error(message),
-			'loop-video',
+			'self-hosted-video',
 		);
 		log('dotcom', message);
 	};
@@ -643,10 +643,10 @@ export const LoopVideo = ({
 		<figure
 			ref={setNode}
 			css={videoContainerStyles}
-			className="loop-video-container"
+			className="video-container"
 			data-component="gu-video-loop"
 		>
-			<LoopVideoPlayer
+			<SelfHostedVideoPlayer
 				sources={sources}
 				atomId={atomId}
 				uniqueId={uniqueId}

dotcom-rendering/src/components/LoopVideo.stories.tsx renamed to dotcom-rendering/src/components/SelfHostedVideo.stories.tsx

@@ -2,26 +2,26 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, userEvent, within } from 'storybook/test';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
-import { LoopVideo } from './LoopVideo.importable';
+import { SelfHostedVideo } from './SelfHostedVideo.importable';
 
 const meta = {
-	component: LoopVideo,
-	title: 'Components/LoopVideo',
+	component: SelfHostedVideo,
+	title: 'Components/SelfHostedVideo',
 	decorators: [centreColumnDecorator],
-	render: (args) => <LoopVideo {...args} />,
+	render: (args) => <SelfHostedVideo {...args} />,
 	parameters: {
 		chromatic: {
 			viewports: [breakpoints.mobile, breakpoints.wide],
 			disableSnapshot: true,
 		},
 	},
-} satisfies Meta<typeof LoopVideo>;
+} satisfies Meta<typeof SelfHostedVideo>;
 
 export default meta;
-type Story = StoryObj<typeof LoopVideo>;
+type Story = StoryObj<typeof SelfHostedVideo>;
 
-export const Default: Story = {
-	name: 'Default',
+export const Loop4to5: Story = {
+	name: 'Looping video in 4:5 aspect ratio',
 	args: {
 		sources: [
 			{
@@ -56,10 +56,10 @@ export const Default: Story = {
 // 	},
 // };
 
-export const Without5to4Ratio: Story = {
-	name: 'Without 5:4 aspect ratio',
+export const Loop16to9: Story = {
+	name: 'Looping video in 16:9 aspect ratio',
 	args: {
-		...Default.args,
+		...Loop4to5.args,
 		sources: [
 			{
 				src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
@@ -72,11 +72,11 @@ export const Without5to4Ratio: Story = {
 };
 
 export const PausePlay: Story = {
-	...Default,
+	...Loop4to5,
 	name: 'Pause and play interaction',
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const videoEl = canvas.getByTestId('loop-video');
+		const videoEl = canvas.getByTestId('self-hosted-video-player');
 
 		await userEvent.click(videoEl, {
 			delay: 300, // Allow video to start playing.
@@ -93,7 +93,7 @@ export const PausePlay: Story = {
 };
 
 export const UnmuteMute: Story = {
-	...Default,
+	...Loop4to5,
 	name: 'Unmute and mute interaction',
 	parameters: {
 		test: {
@@ -120,11 +120,11 @@ function sleep(ms: number) {
 }
 
 export const InteractionObserver: Story = {
-	...Default,
+	...Loop4to5,
 	name: 'Interaction observer',
 	render: (args) => (
 		<div data-testid="test-container">
-			<LoopVideo {...args} />
+			<SelfHostedVideo {...args} />
 			<div style={{ height: '100vh' }}></div>
 			<p data-testid="page-end">End of page</p>
 		</div>