Refactor audio player component to remove volume controls

They're only mute/unmute, which is the same as pause/play. Unless you really want to mute it while leaving it playing...sorry if that was you.

Co-authored-by: oliverabrahams <[email protected]>

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

@@ -18,7 +18,6 @@ export const AudioPlayer = {
 		// src: audioFile,
 		src: 'https://audio.guim.co.uk/2024/10/18-57753-USEE_181024.mp3',
 		mediaId: 'mediaId',
-		showVolumeControls: true,
 	},
 	parameters: {
 		// We only want to snapshot the `multipleFormats` version below.

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

@@ -5,7 +5,6 @@ import { getOphan } from '../../client/ophan/ophan';
 import { Playback } from './components/Playback';
 import { ProgressBar } from './components/ProgressBar';
 import { CurrentTime, Duration } from './components/time';
-import { Volume } from './components/Volume';
 import { Wrapper } from './components/Wrapper';
 
 // ********************* ophan stuff *********************
@@ -46,11 +45,6 @@ type AudioPlayerProps = {
 	 * If it's not provided it will be calculated once the audio is loaded.
 	 */
 	duration?: number;
-	/**
-	 * Optionally hide the volume controls if setting the volume is better
-	 * handled elsewhere, e.g on a mobile device.
-	 */
-	showVolumeControls?: boolean;
 	/** media element ID for Ophan */
 	mediaId: string;
 };
@@ -61,14 +55,12 @@ type AudioPlayerProps = {
 export const AudioPlayer = ({
 	src,
 	duration: preCalculatedDuration,
-	showVolumeControls = true,
 	mediaId,
 }: AudioPlayerProps) => {
 	// ********************* player *********************
 
 	// state for displaying feedback to the user
 	const [isPlaying, setIsPlaying] = useState(false);
-	const [isMuted, setIsMuted] = useState(false);
 	const [currentTime, setCurrentTime] = useState(0);
 	const [duration, setDuration] = useState(preCalculatedDuration);
 	const [progress, setProgress] = useState(0);
@@ -225,20 +217,6 @@ export const AudioPlayer = ({
 		setIsScrubbing(false);
 	}, []);
 
-	const mute = useCallback(() => {
-		if (audioRef.current) {
-			audioRef.current.volume = 0;
-			setIsMuted(true);
-		}
-	}, []);
-
-	const unMute = useCallback(() => {
-		if (audioRef.current) {
-			audioRef.current.volume = 1;
-			setIsMuted(false);
-		}
-	}, []);
-
 	// ********************* effects *********************
 
 	useEffect(() => {
@@ -292,7 +270,7 @@ export const AudioPlayer = ({
 			</audio>
 
 			{/* custom guardian controls that interact with the native player */}
-			<Wrapper showVolumeControls={showVolumeControls}>
+			<Wrapper>
 				<CurrentTime currentTime={currentTime} />
 				<Duration duration={duration} />
 
@@ -322,13 +300,6 @@ export const AudioPlayer = ({
 						disabled={isWaiting || !isPlaying}
 					/>
 				</Playback>
-
-				{showVolumeControls && (
-					<Volume>
-						<Volume.UnMute onClick={unMute} isMuted={isMuted} />
-						<Volume.Mute onClick={mute} isMuted={isMuted} />
-					</Volume>
-				)}
 			</Wrapper>
 		</>
 	);

dotcom-rendering/src/components/AudioPlayer/components/Wrapper.tsx

@@ -1,25 +1,19 @@
 import { css } from '@emotion/react';
 import { from, palette } from '@guardian/source/foundations';
 
-export const Wrapper = ({
-	showVolumeControls,
-	...props
-}: { showVolumeControls: boolean } & React.ComponentPropsWithoutRef<'div'>) => (
+export const Wrapper = (props: React.ComponentPropsWithoutRef<'div'>) => (
 	<div
 		css={css`
 			position: relative;
 			background-color: ${palette.neutral[7]};
 
 			/* define the grid for the component */
 			display: grid;
-			grid-template-rows: ${showVolumeControls
-				? '30px 40px 120px 40px'
-				: '30px 40px 120px'};
+			grid-template-rows: 30px 40px 120px;
 			grid-template-areas:
 				'current-time duration'
 				'progress-bar progress-bar'
-				'playback     playback'
-				'.            volume';
+				'playback     playback';
 
 			${from.leftCol} {
 				grid-template-columns: 90px 1fr 90px;