Always show media player bottom controls (#139)

Fixes Collaborne/backlog#3032
Collaborne · Aug 2, 2024 · ca5dc4e · ca5dc4e
1 parent aa80de7
commit ca5dc4e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 338 deletions.
diff --git a/src/components/media-player/__test__/MediaPlayer.spec.tsx b/src/components/media-player/__test__/MediaPlayer.spec.tsx
diff --git a/src/components/media-player/components/MediaPlayerControlButtons.tsx b/src/components/media-player/components/MediaPlayerControlButtons.tsx
@@ -1,7 +1,7 @@
 import Grid from '@mui/material/Grid';
 import { FC, memo, ReactNode } from 'react';
 
-import { useIsAudio, usePlayPauseReplayHook } from '../../../hooks';
+import { useIsAudio } from '../../../hooks';
 import { BOTTOM_CONTROL_BUTTONS } from '../../../utils';
 import { useBottomControlButtonsHook } from '../../bottom-control-buttons/useBottomControlButtonsHook';
 import { useBottomControlButtonsStyles } from '../../bottom-control-buttons/useBottomControlButtonsStyles';
@@ -28,12 +28,9 @@ export const MediaPlayerControlButtons: FC<MediaPlayerControlButtonsProps> =
 		}) => {
 			const isAudio = useIsAudio();
 			const { classes, cx } = useBottomControlButtonsStyles();
-			const { hasStarted, showControls } = useBottomControlButtonsHook();
-			const { isFinished } = usePlayPauseReplayHook();
+			const { showControls } = useBottomControlButtonsHook();
 
-			const hide = isCollapsed
-				? !hasStarted || isFinished
-				: (!showControls || !hasStarted) && !isAudio;
+			const hide = !isCollapsed && !showControls && !isAudio;
 
 			if (hide) {
 				return null;

diff --git a/src/components/media-player/components/MediaPlayerControls.tsx b/src/components/media-player/components/MediaPlayerControls.tsx
@@ -14,8 +14,6 @@ import {
 } from '../../bottom-control-buttons';
 import { CollapseIconButton } from '../../bottom-control-buttons/components/CollapseIconButton';
 import { BottomControls } from '../../bottom-controls/BottomControls';
-import { CenteredPlayButton } from '../../centered-play-button/CenteredPlayButton';
-import { CenteredReplayButton } from '../../centered-replay-button/CenteredReplayButton';
 import { useControlsStyles, Controls } from '../../controls';
 import { PauseAnimation } from '../../play-pause-animation/PauseAnimation';
 import { PlayAnimation } from '../../play-pause-animation/PlayAnimation';
@@ -70,10 +68,6 @@ export const MediaPlayerControls: FC<MediaPlayerControlsProps> = memo(
 						<AdditionalControls />
 					</>
 				)}
-				<Grid className={controls}>
-					<CenteredPlayButton />
-					<CenteredReplayButton />
-				</Grid>
 				<BottomControls>
 					<MediaPlayerControlButtons isCollapsed={isCollapsed}>
 						<ProgressTimerDisplay />

diff --git a/src/components/progress-bar/ProgressTimerDisplay.tsx b/src/components/progress-bar/ProgressTimerDisplay.tsx
@@ -35,17 +35,15 @@ export const ProgressTimerDisplay: FC<ProgressTimerDisplayProps> = ({
 		classes: { timeStampText },
 	} = useTimeDisplayStyles();
 
-	const [hasStarted, duration, setCurrentTime, isPip, currentTime] =
-		useMediaStore(
-			state => [
-				state.hasPlayedOrSeeked,
-				state.duration,
-				state.setCurrentTime,
-				state.isPip,
-				state.currentTime,
-			],
-			shallow,
-		);
+	const [duration, setCurrentTime, isPip, currentTime] = useMediaStore(
+		state => [
+			state.duration,
+			state.setCurrentTime,
+			state.isPip,
+			state.currentTime,
+		],
+		shallow,
+	);
 
 	const onCurrentTimeUpdate = (e: Event, newValue: number | number[]) => {
 		e.preventDefault();
@@ -62,10 +60,6 @@ export const ProgressTimerDisplay: FC<ProgressTimerDisplayProps> = ({
 		cx,
 	} = useProgressBarStyles({ isAudio, isPip });
 
-	if (!hasStarted && !isAudio) {
-		return null;
-	}
-
 	return (
 		<Grid
 			container