Add a frame component for the player

src/components/frame/PlayerFrame.tsx

@@ -0,0 +1,31 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()(theme => ({
+	playerFrame: {
+		position: 'absolute',
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0,
+		borderWidth: 1,
+		borderStyle: 'solid',
+		borderColor: theme.palette.divider,
+		// Ensures border width is included in the element's total width and height
+		boxSizing: 'border-box',
+		// Ensures any interactions like clicks go through this overlay to the underlying elements
+		pointerEvents: 'none',
+		// Overlay player
+		zIndex: 2,
+	},
+}));
+
+export interface PlayerFrameProps {
+	className?: string;
+}
+/**
+ * The frame is overlaying the media. This allows for translucent frames.
+ */
+export function PlayerFrame({ className }: PlayerFrameProps) {
+	const { classes, cx } = useStyles();
+	return <div className={cx(className, classes.playerFrame)} />;
+}

src/components/frame/index.ts

@@ -0,0 +1 @@
+export * from './PlayerFrame';

src/components/index.ts

@@ -8,6 +8,7 @@ export * from './controls/Controls';
 export * from './core-player/CorePlayer';
 export * from './core-player/types';
 export * from './draggable-popover/DraggablePopover';
+export * from './frame';
 export * from './pip-controls';
 export * from './play-pause-animation/PauseAnimation';
 export * from './play-pause-animation/PlayAnimation';

src/components/media-player/MediaPlayer.tsx

@@ -19,6 +19,7 @@ import { CenteredReplayButton } from '../centered-replay-button/CenteredReplayBu
 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';
@@ -41,6 +42,7 @@ export const MediaPlayer: FC<MediaPlayerProps> = memo(
 		const { controls } = useControlsStyles().classes;
 		return (
 			<CorePlayer isPipEnabled={isPipEnabled} {...corePlayerProps}>
+				<PlayerFrame />
 				<Grid className={controls}>
 					<CenteredPlayButton />
 				</Grid>