From 9d7d54a4777949b9de7eb54294f5fb99eeeeeb1b Mon Sep 17 00:00:00 2001
From: Ronny Roeller <ronny@nextapp.co>
Date: Fri, 20 Oct 2023 09:20:10 +0200
Subject: [PATCH] Add a frame component for the player

---
 src/components/frame/PlayerFrame.tsx        | 31 +++++++++++++++++++++
 src/components/frame/index.ts               |  1 +
 src/components/index.ts                     |  1 +
 src/components/media-player/MediaPlayer.tsx |  2 ++
 4 files changed, 35 insertions(+)
 create mode 100644 src/components/frame/PlayerFrame.tsx
 create mode 100644 src/components/frame/index.ts

diff --git a/src/components/frame/PlayerFrame.tsx b/src/components/frame/PlayerFrame.tsx
new file mode 100644
index 00000000..7202f8b1
--- /dev/null
+++ b/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)} />;
+}
diff --git a/src/components/frame/index.ts b/src/components/frame/index.ts
new file mode 100644
index 00000000..dedd8178
--- /dev/null
+++ b/src/components/frame/index.ts
@@ -0,0 +1 @@
+export * from './PlayerFrame';
diff --git a/src/components/index.ts b/src/components/index.ts
index 83fa6edc..970e5867 100644
--- a/src/components/index.ts
+++ b/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';
diff --git a/src/components/media-player/MediaPlayer.tsx b/src/components/media-player/MediaPlayer.tsx
index e395817a..8fac8e8a 100644
--- a/src/components/media-player/MediaPlayer.tsx
+++ b/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>