Send progress update to server when playing media #10

prayag17 · May 9, 2023 · 97981c7 · 97981c7
1 parent 797c80b
commit 97981c7
Show file tree

Hide file tree

Showing 4 changed files with 237 additions and 18 deletions.
diff --git a/src/routes/item/index.jsx b/src/routes/item/index.jsx
@@ -26,7 +26,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Link from "@mui/material/Link";
 import { green, pink, yellow } from "@mui/material/colors";
 
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 
 import { Blurhash } from "react-blurhash";
 import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
@@ -117,6 +117,7 @@ const ItemDetail = () => {
 			const result = await getUserLibraryApi(window.api).getItem({
 				userId: user.data.Id,
 				itemId: id,
+				fields: [ItemFields.Crew],
 			});
 			return result.data;
 		},
@@ -510,10 +511,29 @@ const ItemDetail = () => {
 		}
 	}, [item.isSuccess]);
 
-	const [url, setUrl] = usePlaybackStore((state) => [
-		state.url,
-		state.setUrl,
-	]);
+	const [setUrl, setPosition, setItemId, setItemName] = usePlaybackStore(
+		(state) => [
+			state.setUrl,
+			state.setPosition,
+			state.setItemId,
+			state.setItemName,
+		],
+	);
+
+	const [directors, setDirectors] = useState([]);
+	const [writers, setWriters] = useState([]);
+	useEffect(() => {
+		if (item.isSuccess) {
+			let direTp = item.data.People.filter(
+				(itm) => itm.Type == "Director",
+			);
+			setDirectors(direTp);
+			let writeTp = item.data.People.filter(
+				(itm) => itm.Type == "Writer",
+			);
+			setWriters(writeTp);
+		}
+	}, [item.isSuccess]);
 
 	if (item.isLoading || similarItems.isLoading) {
 		return (
@@ -1005,6 +1025,22 @@ const ItemDetail = () => {
 														setUrl(
 															`${window.api.basePath}/Videos/${item.data.Id}/stream.${item.data.MediaSources[0].Container}?Static=true&mediaSourceId=${item.data.Id}&deviceId=${window.api.deviceInfo.id}&api_key=${window.api.accessToken}&Tag=${item.data.MediaSources[0].ETag}`,
 														);
+														setPosition(
+															item
+																.data
+																.UserData
+																.PlaybackPositionTicks,
+														);
+														setItemName(
+															item
+																.data
+																.Name,
+														);
+														setItemId(
+															item
+																.data
+																.Id,
+														);
 													}
 													navigate(
 														`/player`,
@@ -1286,23 +1322,161 @@ const ItemDetail = () => {
 										<TableCell>
 											<Stack
 												direction="row"
-												gap={1}
+												gap={0.5}
+												divider={
+													<Typography variant="h6">
+														,
+													</Typography>
+												}
+												width="100%"
 											>
-												{item.data.Genres.map(
+												{item.data.Studios.map(
 													(
-														genre,
+														item,
 														index,
 													) => {
 														return (
-															<Chip
+															<Link
+																component={
+																	RouterLink
+																}
 																key={
 																	index
 																}
-																variant="filled"
-																label={
-																	genre
+																to={`/item/${item.Id}`}
+																color="inherit"
+																variant="h6"
+																underline="hover"
+																noWrap
+															>
+																{
+																	item.Name
 																}
-															/>
+															</Link>
+														);
+													},
+												)}
+											</Stack>
+										</TableCell>
+									</TableRow>
+								)}
+								{directors.length != 0 && (
+									<TableRow
+										sx={{
+											"& td, & th": {
+												border: 0,
+											},
+										}}
+									>
+										<TableCell
+											sx={{
+												paddingLeft: 0,
+												width: "5%",
+											}}
+										>
+											<Typography
+												className="item-detail-heading"
+												variant="h5"
+												mr={2}
+											>
+												Director
+											</Typography>
+										</TableCell>
+										<TableCell>
+											<Stack
+												direction="row"
+												gap={0.5}
+												divider={
+													<Typography variant="h6">
+														,
+													</Typography>
+												}
+											>
+												{directors.map(
+													(
+														item,
+														index,
+													) => {
+														return (
+															<Link
+																component={
+																	RouterLink
+																}
+																key={
+																	index
+																}
+																to={`/item/${item.Id}`}
+																color="inherit"
+																variant="h6"
+																underline="hover"
+																noWrap
+															>
+																{
+																	item.Name
+																}
+															</Link>
+														);
+													},
+												)}
+											</Stack>
+										</TableCell>
+									</TableRow>
+								)}
+								{writers.length != 0 && (
+									<TableRow
+										sx={{
+											"& td, & th": {
+												border: 0,
+											},
+										}}
+									>
+										<TableCell
+											sx={{
+												paddingLeft: 0,
+												width: "5%",
+											}}
+										>
+											<Typography
+												className="item-detail-heading"
+												variant="h5"
+												mr={2}
+											>
+												Writers
+											</Typography>
+										</TableCell>
+										<TableCell>
+											<Stack
+												direction="row"
+												gap={0.5}
+												divider={
+													<Typography variant="h6">
+														,
+													</Typography>
+												}
+											>
+												{writers.map(
+													(
+														item,
+														index,
+													) => {
+														return (
+															<Link
+																component={
+																	RouterLink
+																}
+																key={
+																	index
+																}
+																to={`/item/${item.Id}`}
+																color="inherit"
+																variant="h6"
+																underline="hover"
+																noWrap
+															>
+																{
+																	item.Name
+																}
+															</Link>
 														);
 													},
 												)}
@@ -2572,7 +2746,7 @@ const ItemDetail = () => {
 														duration: 0.35,
 														delay:
 															mindex *
-															0.05,
+															0.1,
 													}}
 												>
 													<EpisodeCard

diff --git a/src/routes/player/videoPlayer.jsx b/src/routes/player/videoPlayer.jsx
@@ -16,11 +16,23 @@ import { usePlaybackStore } from "../../utils/store/playback";
 
 import AppBar from "@mui/material/AppBar";
 import IconButton from "@mui/material/IconButton";
+
 import { useNavigate } from "react-router-dom";
 import { MdiChevronLeft } from "../../components/icons/mdiChevronLeft";
 
+import { secToTicks, ticksToSec } from "../../utils/date/time";
+
+import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api/playstate-api";
+
 const VideoPlayer = () => {
-	const url = usePlaybackStore((state) => state.url);
+	const [url, startPosition, itemId, itemName] = usePlaybackStore(
+		(state) => [
+			state.url,
+			state.startPosition,
+			state.itemId,
+			state.itemName,
+		],
+	);
 
 	const navigate = useNavigate();
 
@@ -42,14 +54,24 @@ const VideoPlayer = () => {
 	const handlePlayerReady = (player) => {
 		playerRef.current = player;
 
-		// You can handle player events here, for example:
 		player.on("waiting", () => {
 			videojs.log("player is waiting");
 		});
 
 		player.on("dispose", () => {
 			videojs.log("player will dispose");
 		});
+
+		player.on("progress", async () => {
+			await getPlaystateApi(window.api).reportPlaybackProgress({
+				playbackProgressInfo: {
+					ItemId: itemId,
+					PlaybackStartTimeTicks: startPosition,
+					PositionTicks: secToTicks(player.currentTime()),
+				},
+			});
+		});
+		player.currentTime(ticksToSec(startPosition));
 	};
 
 	return (

diff --git a/src/utils/date/time.js b/src/utils/date/time.js
@@ -3,11 +3,28 @@
  * @param {number} ticks - C# ticks of a particular item
  * @return {number} Converted ticks to Milliseconds
  */
-
 const ticksToMs = (ticks) => {
 	return Math.round(ticks / 10000);
 };
 
+/**
+ * @format
+ * @param {number} ticks - C# ticks of a particular item
+ * @return {number} Converted ticks to Seconds
+ */
+export const ticksToSec = (ticks) => {
+	return Math.round(ticksToMs(ticks) / 1000);
+};
+
+/**
+ * @format
+ * @param {number} sec - Sec of a particular item
+ * @return {number} Converted Seconds to C# ticks
+ */
+export const secToTicks = (ticks) => {
+	return Math.round(ticks * 10000000);
+};
+
 /**
  * @format
  * @param {number} ticks - C# ticks of a particular item

diff --git a/src/utils/store/playback.js b/src/utils/store/playback.js
@@ -4,5 +4,11 @@ import { create } from "zustand";
 
 export const usePlaybackStore = create((set) => ({
 	url: "",
-	setUrl: (aurl) => set(() => ({ url: aurl })),
+	startPosition: 0,
+	itemId: "",
+	itemName: "",
+	setUrl: (aurl) => set((state) => ({ ...state, url: aurl })),
+	setPosition: (apos) => set((state) => ({ ...state, startPosition: apos })),
+	setItemId: (aid) => set((state) => ({ ...state, itemId: aid })),
+	setItemName: (anm) => set((state) => ({ ...state, itemName: anm })),
 }));