Add compact layout to video media player

Fixes Collaborne/backlog#3032

.storybook/stories/0-MediaPlayer.stories.tsx

@@ -1,13 +1,13 @@
-import { Paper } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
-import * as React from 'react';
+import { useToggle } from 'react-use';
 import { makeStyles } from 'tss-react/mui';
 
 import {
 	MediaPlayer,
 	MediaPlayerProps,
 } from '../../src/components/media-player/MediaPlayer';
 import { withDemoCard, withIntl, withPlayerTheme } from '../decorators';
+
 const useStyles = makeStyles()(theme => ({
 	wrapper: {
 		height: theme.spacing(500),
@@ -33,31 +33,19 @@ const useStyles = makeStyles()(theme => ({
 
 export const Basic: StoryFn<MediaPlayerProps> = args => {
 	const { classes } = useStyles();
-
-	return (
-		<div className={classes.wrapper}>
-			<MediaPlayer {...args} />
-		</div>
-	);
-};
-
-export const PIPModifiers: StoryFn<MediaPlayerProps> = args => {
-	const pipContainer = React.useRef<HTMLDivElement>(null);
-	const { classes } = useStyles();
+	const [collapse, toggleCollapse] = useToggle(true);
 
 	return (
 		<div className={classes.wrapper}>
 			<MediaPlayer
-				pipContainer={pipContainer}
-				pipPortalClassName={classes.pipLayout}
 				{...args}
+				collapse={collapse}
+				onToggleCollapse={toggleCollapse}
 			/>
-			<Paper elevation={3} ref={pipContainer} className={classes.pipContainer}>
-				PIP can be dragged only here
-			</Paper>
 		</div>
 	);
 };
+
 export default {
 	title: 'Media Player',
 	component: MediaPlayer,
@@ -87,33 +75,6 @@ export default {
 				defaultValue: { summary: undefined },
 			},
 		},
-		isPipEnabled: {
-			name: 'props.isPipEnabled',
-			description:
-				'Enables/disables all pip features(scrolling, entering/leaving PIP mode)',
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
-		yAxisDistance: {
-			name: 'props.yAxisDistance',
-			description:
-				'Distance from window border bottom, on Y axis in `pixels`, for PIP player position initialization ',
-			table: {
-				type: { summary: 'number' },
-				defaultValue: { summary: 16 },
-			},
-		},
-		xAxisDistance: {
-			name: 'props.xAxisDistance',
-			description:
-				'Distance from window border right, on X axis in `pixels`, for PIP player position initialization',
-			table: {
-				type: { summary: 'number' },
-				defaultValue: { summary: 16 },
-			},
-		},
 	},
 	parameters: {
 		controls: { expanded: true },

.storybook/stories/11-KaraokeMode.stories.tsx

@@ -142,7 +142,6 @@ export const KaraokeMode: React.FC<KaraokeModeProps> = args => {
 				url={args.url}
 				onStoreUpdate={setMediaContext}
 				alarms={alarmRef.current}
-				isPipEnabled={args.isPipEnabled}
 			/>
 			<div>{timeStampsMemo}</div>
 			{createActiveSpan()}
@@ -176,15 +175,5 @@ export default {
 				defaultValue: { summary: 2 },
 			},
 		},
-		isPipEnabled: {
-			name: 'props.isPipEnabled',
-			description:
-				'Enables/disables all pip features(scrolling, entering/leaving PIP mode)',
-
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: true },
-			},
-		},
 	},
 };

src/components/bottom-control-buttons/components/CollapseIconButton.tsx

@@ -0,0 +1,30 @@
+import { IconButton } from '@mui/material';
+import { PiArrowsInLineVertical, PiArrowsVertical } from 'react-icons/pi';
+
+import { useOnHoveredControlElement } from '../../../hooks';
+
+export interface CollapseIconButtonProps {
+	isCollapsed?: boolean;
+	onToggleCollapse: VoidFunction;
+}
+
+/**
+ * @category React Component
+ * @category UI Controls
+ */
+export function CollapseIconButton(props: CollapseIconButtonProps) {
+	const { onMouseEnter, onMouseLeave } = useOnHoveredControlElement();
+
+	const Icon = !props.isCollapsed ? PiArrowsInLineVertical : PiArrowsVertical;
+
+	return (
+		<IconButton
+			onMouseEnter={onMouseEnter}
+			onMouseLeave={onMouseLeave}
+			onClick={props.onToggleCollapse}
+			size="medium"
+		>
+			<Icon fontSize="medium" />
+		</IconButton>
+	);
+}

src/components/bottom-controls/useBottomControlsStyles.ts

@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui';
 
 export const useBottomControlsStyles = makeStyles<{ isAudio: boolean }>()(
 	(theme, { isAudio }) => {
-		const bottomPadding = !isAudio ? theme.spacing(2) : 0;
+		const bottomPadding = !isAudio ? theme.spacing(1) : 0;
 		return {
 			bottomControls: {
 				display: 'flex',

src/components/controls/Controls.tsx

@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react';
 
-import { useMediaStore } from '../../context';
 import { CONTROLS } from '../../utils';
 
 import { useControlsStyles } from './useControlsStyles';
@@ -21,18 +20,10 @@ export const Controls: FC<ControlProps> = ({
 	className,
 	'data-testid': dataTestId = CONTROLS,
 }) => {
-	const showControls = useMediaStore(state => state.showControls);
-	const isAudio = useMediaStore(state => state.isAudio);
-
 	// Controls styles
 	const { classes, cx } = useControlsStyles();
 	const classNameControls = cx(classes.controls, className);
 
-	// Only <ProgressBar/> should be present if Controls components are not shown
-	if (!showControls && !isAudio) {
-		return null;
-	}
-
 	return (
 		<div className={classNameControls} data-testid={dataTestId}>
 			{children}

src/components/controls/useControlsStyles.ts

@@ -1,10 +1,16 @@
 import { makeStyles } from 'tss-react/mui';
 
-export const useControlsStyles = makeStyles()({
+export const useControlsStyles = makeStyles<{
+	isCollapsed?: boolean;
+} | void>()((theme, { isCollapsed = false } = {}) => ({
 	controls: {
 		width: '100%',
 		height: '100%',
 		position: 'absolute',
 		pointerEvents: 'none',
+		...(isCollapsed && {
+			position: 'relative',
+			backgroundColor: theme.palette.common.black,
+		}),
 	},
-});
+}));

src/components/media-container/MediaContainer.tsx

@@ -16,7 +16,10 @@ import { MediaPoster } from '../media-poster/MediaPoster';
 import { Player } from '../player/Player';
 
 import { useIsPlayerReadyHook } from './useIsPlayerReadyHook';
-import { useMediaContainerStyles } from './useMediaContainerStyles';
+import {
+	useFilePlayerStyles,
+	useMediaContainerStyles,
+} from './useMediaContainerStyles';
 import { useMouseActivityHook } from './useMouseActivityHook';
 import { UsePipHook } from './UsePipHook';
 import { useReactPlayerProps } from './useReactPlayerProps';
@@ -77,11 +80,16 @@ export const MediaContainer: FC<MediaContainerProps> = memo(
 		} = useMediaContainerStyles({
 			isAudio,
 		});
+		const { wrapper: playerWrapper } = useFilePlayerStyles({ isAudio }).classes;
 
 		const { isPlayerReady } = useIsPlayerReadyHook({ url });
 		const { onMouseEnter, onMouseLeave, onMouseMove } = useMouseActivityHook();
 		const { reactPlayerProps } = useReactPlayerProps();
-		const reactClassNames = cx(reactPlayer, reactPlayerClassName);
+		const reactClassNames = cx(
+			reactPlayer,
+			playerWrapper,
+			reactPlayerClassName,
+		);
 
 		const playerProps = {
 			url,

src/components/media-container/useMediaContainerStyles.ts

@@ -9,7 +9,7 @@ export const useMediaContainerStyles = makeStyles<{ isAudio: boolean }>()(
 			justifyContent: 'center',
 			backgroundSize: 'cover',
 			overflow: 'hidden',
-			height: isAudio ? theme.spacing(6.25) : 'unset',
+			height: isAudio ? theme.spacing(7.65) : 'unset',
 			borderRadius: isAudio ? theme.spacing(0.5, 0.5, 0, 0) : 'unset',
 		},
 		pipText: {

src/components/media-player/MediaPlayer.tsx

@@ -1,37 +1,21 @@
-import Grid from '@mui/material/Grid';
 import { FC, memo, ReactNode } from 'react';
 
-import { BottomControlButtons } from '../bottom-control-buttons/BottomControlButtons';
-import {
-	TimeDisplay,
-	PlaybackRateButton,
-	PictureInPictureButton,
-	FullscreenButton,
-} from '../bottom-control-buttons/components';
-import { FwdButton } from '../bottom-control-buttons/components/FwdButton';
-import { PlayPauseReplay } from '../bottom-control-buttons/components/PlayPauseReplay';
-import { RwdButton } from '../bottom-control-buttons/components/RwdButton';
-import { VolumeButton } from '../bottom-control-buttons/components/VolumeButton';
-import { VolumeSlider } from '../bottom-control-buttons/components/VolumeSlider';
-import { BottomControls } from '../bottom-controls/BottomControls';
-import { CenteredPlayButton } from '../centered-play-button/CenteredPlayButton';
-import { CenteredReplayButton } from '../centered-replay-button/CenteredReplayButton';
-import { Controls } from '../controls/Controls';
-import { useControlsStyles } from '../controls/useControlsStyles';
 import { CorePlayer, CorePlayerProps } from '../core-player/CorePlayer';
-import { PlayerFrame } from '../frame';
-import { PauseAnimation } from '../play-pause-animation/PauseAnimation';
-import { PlayAnimation } from '../play-pause-animation/PlayAnimation';
-import { ProgressBar } from '../progress-bar/ProgressBar';
 
-import { AdditionalControls } from './components/AdditionalControls';
+import { MediaPlayerControls } from './components/MediaPlayerControls';
 import { useMediaPlayerStyles } from './useMediaPlayerStyles';
 
-export interface MediaPlayerProps extends Omit<CorePlayerProps, 'children'> {
+export interface MediaPlayerProps
+	extends Omit<
+		CorePlayerProps,
+		'children' | 'isPipEnabled' | 'pipPortalClassName' | 'pipContainer'
+	> {
 	classes?: {
-		playerFrame?: string;
+		collapsedClassName?: string;
 	};
 	children?: ReactNode;
+	collapse?: boolean;
+	onToggleCollapse?: VoidFunction;
 }
 
 /**
@@ -40,57 +24,34 @@ export interface MediaPlayerProps extends Omit<CorePlayerProps, 'children'> {
  * @category Player
  */
 export const MediaPlayer: FC<MediaPlayerProps> = memo(
-	({ children, isPipEnabled = true, classes, ...corePlayerProps }) => {
-		const { classes: playerClasses } = useMediaPlayerStyles();
-		const { controls } = useControlsStyles().classes;
+	({
+		children,
+		className,
+		classes,
+		collapse,
+		onToggleCollapse,
+		...corePlayerProps
+	}) => {
+		const isCollapsed = Boolean(collapse);
+
+		const { classes: mediaClasses, cx } = useMediaPlayerStyles();
+
+		const collapsedClassName = cx({
+			[classes?.collapsedClassName ?? mediaClasses.collapsedContainer]:
+				isCollapsed,
+		});
+
 		return (
-			<CorePlayer isPipEnabled={isPipEnabled} {...corePlayerProps}>
-				<PlayerFrame className={classes?.playerFrame} />
-				<Grid className={controls}>
-					<CenteredPlayButton />
-				</Grid>
-				<AdditionalControls />
-				<Controls>
-					{children}
-					<PlayAnimation />
-					<PauseAnimation />
-					<CenteredReplayButton />
-					<BottomControls>
-						<BottomControlButtons>
-							<ProgressBar className={playerClasses.progressBar} />
-							<Grid
-								item
-								className={playerClasses.gridCentered}
-								xs
-								justifyContent="flex-start"
-							>
-								<PlayPauseReplay svgIconSize="medium" />
-								<RwdButton />
-								<FwdButton />
-								<VolumeButton />
-								<VolumeSlider />
-							</Grid>
-							<Grid
-								item
-								className={playerClasses.gridCentered}
-								xs
-								justifyContent="center"
-							>
-								<TimeDisplay />
-							</Grid>
-							<Grid
-								item
-								className={playerClasses.gridCentered}
-								xs
-								justifyContent="flex-end"
-							>
-								<PlaybackRateButton size="small" />
-								{isPipEnabled && <PictureInPictureButton />}
-								<FullscreenButton />
-							</Grid>
-						</BottomControlButtons>
-					</BottomControls>
-				</Controls>
+			<CorePlayer
+				{...corePlayerProps}
+				className={cx(className, collapsedClassName)}
+				isPipEnabled={false}
+			>
+				<MediaPlayerControls
+					isCollapsed={isCollapsed}
+					toggleCollapse={onToggleCollapse}
+				/>
+				{children}
 			</CorePlayer>
 		);
 	},