Refactor

Author: simonbyford

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

@@ -1013,7 +1013,7 @@ export const Card = ({
 									}
 									subtitleSize={subtitleSize}
 									enableHls={enableHls}
-									fullWidth={false}
+									letterboxed={true}
 								/>
 							</Island>
 						)}

dotcom-rendering/src/components/LoopVideoInArticle.tsx

@@ -63,7 +63,6 @@ export const LoopVideoInArticle = ({
 					uniqueId={element.id}
 					width={firstVideoAsset?.dimensions?.width ?? 500}
 					enableHls={false}
-					fullWidth={true}
 				/>
 			</Island>
 			{!!caption && (

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

@@ -55,11 +55,11 @@ const videoContainerStyles = (
 	}
 `;
 
-const figureStyles = (aspectRatio: number, fullWidth: boolean) => css`
+const figureStyles = (aspectRatio: number, letterboxed: boolean) => css`
 	position: relative;
 	aspect-ratio: ${aspectRatio};
 	height: 100%;
-	${!fullWidth &&
+	${letterboxed &&
 	css`
 		max-height: 100vh;
 		max-height: 100svh;
@@ -153,7 +153,7 @@ type Props = {
 	subtitleSource?: string;
 	subtitleSize: SubtitleSize;
 	enableHls: boolean;
-	fullWidth: boolean;
+	letterboxed?: boolean;
 };
 
 export const SelfHostedVideo = ({
@@ -174,7 +174,7 @@ export const SelfHostedVideo = ({
 	subtitleSource,
 	subtitleSize,
 	enableHls,
-	fullWidth,
+	letterboxed = false,
 }: Props) => {
 	const adapted = useShouldAdapt();
 	const { renderingTarget } = useConfig();
@@ -708,7 +708,7 @@ export const SelfHostedVideo = ({
 		>
 			<figure
 				ref={setNode}
-				css={figureStyles(aspectRatio, fullWidth)}
+				css={figureStyles(aspectRatio, letterboxed)}
 				className={`video-container ${videoStyle.toLocaleLowerCase()}`}
 				data-component="gu-video-loop"
 			>
@@ -742,7 +742,7 @@ export const SelfHostedVideo = ({
 					subtitleSize={subtitleSize}
 					activeCue={activeCue}
 					enableHls={enableHls}
-					fullWidth={fullWidth}
+					letterboxed={letterboxed}
 				/>
 			</figure>
 		</div>

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -23,12 +23,12 @@ import { VideoProgressBar } from './VideoProgressBar';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
-const videoStyles = (aspectRatio: number, fullWidth: boolean) => css`
+const videoStyles = (aspectRatio: number, letterboxed: boolean) => css`
 	position: relative;
 	display: block;
 	height: auto;
 	width: 100%;
-	${!fullWidth &&
+	${letterboxed &&
 	css`
 		max-height: 100vh;
 		max-height: 100svh;
@@ -130,7 +130,7 @@ type Props = {
 	/* used in custom subtitle overlays */
 	activeCue?: ActiveCue | null;
 	enableHls: boolean;
-	fullWidth: boolean;
+	letterboxed: boolean;
 };
 
 /**
@@ -173,7 +173,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			subtitleSize,
 			activeCue,
 			enableHls,
-			fullWidth,
+			letterboxed,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
@@ -204,7 +204,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 				<video
 					id={videoId}
 					css={[
-						videoStyles(aspectRatio, fullWidth),
+						videoStyles(aspectRatio, letterboxed),
 						showSubtitles && subtitleStyles(subtitleSize),
 					]}
 					crossOrigin="anonymous"