From 7137cbc13e433687054d6b1559b00665017ba2f7 Mon Sep 17 00:00:00 2001
From: prayag17 <prayagprajapati.17@gmail.com>
Date: Wed, 10 May 2023 18:06:49 +0530
Subject: [PATCH] Start implementing player Ui #10

---
 src/components/icons/mdiFastForward.jsx   | 12 +++
 src/components/icons/mdiPause.jsx         | 12 +++
 src/components/icons/mdiRewind.jsx        | 12 +++
 src/routes/player/videoPlayer.jsx         | 92 +++++++++++++++++++----
 src/routes/player/videoPlayer.module.scss | 11 +++
 5 files changed, 123 insertions(+), 16 deletions(-)
 create mode 100644 src/components/icons/mdiFastForward.jsx
 create mode 100644 src/components/icons/mdiPause.jsx
 create mode 100644 src/components/icons/mdiRewind.jsx
 create mode 100644 src/routes/player/videoPlayer.module.scss

diff --git a/src/components/icons/mdiFastForward.jsx b/src/components/icons/mdiFastForward.jsx
new file mode 100644
index 00000000..802ef0dd
--- /dev/null
+++ b/src/components/icons/mdiFastForward.jsx
@@ -0,0 +1,12 @@
+/** @format */
+import SvgIcon from "@mui/material/SvgIcon";
+
+import { mdiFastForward } from "@mdi/js";
+
+export const MdiFastForward = (props) => {
+	return (
+		<SvgIcon {...props}>
+			<path d={mdiFastForward}></path>
+		</SvgIcon>
+	);
+};
diff --git a/src/components/icons/mdiPause.jsx b/src/components/icons/mdiPause.jsx
new file mode 100644
index 00000000..fee72db7
--- /dev/null
+++ b/src/components/icons/mdiPause.jsx
@@ -0,0 +1,12 @@
+/** @format */
+import SvgIcon from "@mui/material/SvgIcon";
+
+import { mdiPause } from "@mdi/js";
+
+export const MdiPause = (props) => {
+	return (
+		<SvgIcon {...props}>
+			<path d={mdiPause}></path>
+		</SvgIcon>
+	);
+};
diff --git a/src/components/icons/mdiRewind.jsx b/src/components/icons/mdiRewind.jsx
new file mode 100644
index 00000000..de8ac3e4
--- /dev/null
+++ b/src/components/icons/mdiRewind.jsx
@@ -0,0 +1,12 @@
+/** @format */
+import SvgIcon from "@mui/material/SvgIcon";
+
+import { mdiRewind } from "@mdi/js";
+
+export const MdiRewind = (props) => {
+	return (
+		<SvgIcon {...props}>
+			<path d={mdiRewind}></path>
+		</SvgIcon>
+	);
+};
diff --git a/src/routes/player/videoPlayer.jsx b/src/routes/player/videoPlayer.jsx
index 39126ad5..5f35507b 100644
--- a/src/routes/player/videoPlayer.jsx
+++ b/src/routes/player/videoPlayer.jsx
@@ -4,6 +4,7 @@ import { appWindow } from "@tauri-apps/api/window";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
 import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 
@@ -11,6 +12,7 @@ import ReactPlayer from "react-player";
 
 import { usePlaybackStore } from "../../utils/store/playback";
 import { MdiArrowLeft } from "../../components/icons/mdiArrowLeft";
+import { MdiPlay } from "../../components/icons/mdiPlay";
 
 import { useNavigate } from "react-router-dom";
 import { useRef, useState, useCallback } from "react";
@@ -18,6 +20,11 @@ import { secToTicks, ticksToSec } from "../../utils/date/time";
 
 import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api/playstate-api";
 
+import "./videoPlayer.module.scss";
+import { MdiPause } from "../../components/icons/mdiPause";
+import { MdiFastForward } from "../../components/icons/mdiFastForward";
+import { MdiRewind } from "../../components/icons/mdiRewind";
+
 export const VideoPlayer = () => {
 	const navigate = useNavigate();
 
@@ -54,32 +61,85 @@ export const VideoPlayer = () => {
 			state.itemName,
 		],
 	);
+
+	let timer;
 	return (
-		<Box sx={{ background: "black" }}>
-			<AppBar
-				position="fixed"
-				elevation={0}
+		<Box
+			className="video"
+			sx={{ background: "black" }}
+			onMouseMove={(e) => {
+				let a = "he";
+				clearTimeout(timer);
+				e.currentTarget.classList.add("video-osd-visible");
+				timer = setTimeout(() => {
+					document
+						.querySelector(".video")
+						.classList.remove("video-osd-visible");
+				}, 2000);
+			}}
+		>
+			<Stack
+				className="video-osd"
 				sx={{
-					background:
-						"linear-gradient(to bottom, rgb(0 0 0 / 0.75), transparent)",
+					position: "fixed",
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
 				}}
+				alignItems="center"
+				justifyContent="space-between"
+				direction="column"
+				zIndex="10000000"
 			>
-				<Toolbar>
-					<IconButton onClick={() => navigate(-1)}>
-						<MdiArrowLeft />
+				<AppBar
+					position="static"
+					elevation={0}
+					sx={{
+						background:
+							"linear-gradient(to bottom, rgb(0 0 0 / 0.75), transparent)",
+					}}
+				>
+					<Toolbar>
+						<IconButton onClick={() => navigate(-1)}>
+							<MdiArrowLeft />
+						</IconButton>
+						<Typography ml={2} variant="h6">
+							{itemName}
+						</Typography>
+					</Toolbar>
+				</AppBar>
+				<Stack padding={2} direction="row">
+					<IconButton
+						onClick={() =>
+							playerRef.current.seekTo(
+								playerRef.current.getCurrentTime() - 15,
+							)
+						}
+					>
+						<MdiRewind />
+					</IconButton>
+					<IconButton onClick={() => setIsPlaying(!isPlaying)}>
+						{isPlaying ? <MdiPause /> : <MdiPlay />}
+					</IconButton>
+					<IconButton
+						onClick={() =>
+							playerRef.current.seekTo(
+								playerRef.current.getCurrentTime() + 15,
+							)
+						}
+					>
+						<MdiFastForward />
 					</IconButton>
-					<Typography ml={2} variant="h6">
-						{itemName}
-					</Typography>
-				</Toolbar>
-			</AppBar>
+				</Stack>
+			</Stack>
 			<ReactPlayer
 				ref={playerRef}
 				width="100vw"
 				height="100vh"
-				playing={true}
+				playing={isPlaying}
 				url={url}
-				controls={true}
+				// controls={true}
 				onProgress={onProgress}
 				onReady={onReady}
 				muted={isMuted}
diff --git a/src/routes/player/videoPlayer.module.scss b/src/routes/player/videoPlayer.module.scss
new file mode 100644
index 00000000..ead8b2c7
--- /dev/null
+++ b/src/routes/player/videoPlayer.module.scss
@@ -0,0 +1,11 @@
+/** @format */
+
+.video {
+	&-osd {
+		opacity: 0;
+		transition: opacity 0.1s linear;
+	}
+	&-osd-visible &-osd {
+		opacity: 1;
+	}
+}