Add compact layout to video media player (#137)

Fixes Collaborne/backlog#3032

.github/workflows/chromatic.yml

@@ -14,8 +14,5 @@ jobs:
           node-version: 18
       - name: Install dependencies
         run: npm ci --unsafe-perm
-      - name: Publish to Chromatic
-        uses: chromaui/action@v1
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          buildScriptName: storybook:build
+      - name: Run tests
+        run: npm run test

.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 },
-			},
-		},
 	},
 };

package.json

@@ -44,6 +44,7 @@
     "uuidv4": "^6.2.13"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@collaborne/github-badges": "^0.0.3",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",

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: {