Merge pull request #15738 from guardian/doml/sh-video-refactor-icons-position

Refactor `ControlsPosition` in self-hosted video

Author: domlander

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

@@ -31,6 +31,7 @@ import { Caption } from './Caption';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
 import { useConfig } from './ConfigContext';
 import type {
+	ControlsPosition,
 	PLAYER_STATES,
 	PlayerStates,
 	SubtitleSize,
@@ -297,7 +298,7 @@ type Props = {
 	/**
 	 * The position of subtitles and the audio icon.
 	 */
-	controlsPosition?: 'top' | 'bottom';
+	controlsPosition?: ControlsPosition;
 	/**
 	 * The minimum/maximum aspect ratio the video will have. The video will be cropped if this
 	 * value is defined and the video aspect ratio is less/greater than this value.
@@ -965,7 +966,7 @@ export const SelfHostedVideo = ({
 						subtitleSource={subtitleSource}
 						subtitleSize={subtitleSize}
 						showIcons={showIcons}
-						controlsPosition={controlsPosition}
+						iconsPosition={controlsPosition}
 						subtitlesPosition={subtitlesPosition}
 						activeCue={activeCue}
 						shouldLoop={shouldLoop}

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

@@ -73,7 +73,7 @@ export const Default: Story = {
 export const WithoutProgressBar: Story = {
 	args: {
 		...Loop.args,
-		hideProgressBar: false,
+		hideProgressBar: true,
 	},
 } satisfies Story;
 

dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx

@@ -140,7 +140,7 @@ export type Props = {
 	activeCue?: ActiveCue | null;
 	shouldLoop: boolean;
 	isInteractive: boolean;
-	controlsPosition: ControlsPosition;
+	iconsPosition: ControlsPosition;
 	subtitlesPosition: SubtitlesPosition;
 };
 
@@ -193,7 +193,7 @@ export const SelfHostedVideoPlayer = forwardRef(
 			activeCue,
 			shouldLoop,
 			isInteractive,
-			controlsPosition,
+			iconsPosition,
 			subtitlesPosition,
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
@@ -302,9 +302,9 @@ export const SelfHostedVideoPlayer = forwardRef(
 						css={[
 							iconsContainerStyles,
 							iconSize === 'large' &&
-								largeIconsPositionStyles(controlsPosition),
+								largeIconsPositionStyles(iconsPosition),
 							iconSize === 'small' &&
-								smallIconsPositionStyles(controlsPosition),
+								smallIconsPositionStyles(iconsPosition),
 						]}
 					>
 						{showFullscreenIcon && (

dotcom-rendering/src/components/SelfHostedVideoPlayerIcons.tsx

@@ -4,9 +4,6 @@ import { SvgArrowExpand } from '@guardian/source/react-components';
 import { palette } from '../palette';
 import type { Props as SelfHostedVideoPlayerProps } from './SelfHostedVideoPlayer';
 
-export type SubtitleSize = 'small' | 'medium' | 'large';
-export type ControlsPosition = 'top' | 'bottom';
-
 const buttonStyles = css`
 	border: none;
 	background: none;