diff --git a/src/client/EpisodesScreen/EpisodeModalSheet/index.tsx b/src/client/EpisodesScreen/EpisodeModalSheet/index.tsx index 1caafcc..7f0e2c4 100644 --- a/src/client/EpisodesScreen/EpisodeModalSheet/index.tsx +++ b/src/client/EpisodesScreen/EpisodeModalSheet/index.tsx @@ -15,12 +15,14 @@ import { usePlayerEpisodeDuration, usePlayerLoadingStatus, usePlayerActions, + usePlayerCuePosition, } from "../PlayerStore"; import { useGetEpisode } from "../useEpisodeHooks"; import Sheet from "react-modal-sheet"; import create from "zustand"; import { trpc } from "@/utils/trpc"; import { cn } from "@/lib/utils"; +import { EpisodeTrackProjection } from "@/server/router"; interface EpisodeModalSheetStore { isOpen: boolean; @@ -114,6 +116,7 @@ function EpisodeSheetContent({ episodeId }: { episodeId: string }) { function EpisodeTracksList({ episodeId }: { episodeId: string }) { const progress = usePlayerProgress(); + const playerActions = usePlayerActions(); const progressSecs = progress / 1000; const { data, status } = trpc["episode.getTracks"].useQuery({ @@ -129,6 +132,12 @@ function EpisodeTracksList({ episodeId }: { episodeId: string }) { const currentTrack = possibleTracks.at(-1); + function onTrckClick(t: EpisodeTrackProjection) { + if (t.timestamp) { + playerActions.setCuePosition(t.timestamp * 1000); + } + } + return loaded && loadedData.length > 0 ? ( <>
@@ -141,8 +150,11 @@ function EpisodeTracksList({ episodeId }: { episodeId: string }) { {loadedData.map((t, i) => { const isCurrent = currentTrack?.order === t.order; return ( -
-
+ ); })}
diff --git a/src/server/router.ts b/src/server/router.ts index 213c6c8..1fa1c4b 100644 --- a/src/server/router.ts +++ b/src/server/router.ts @@ -25,7 +25,7 @@ export function episodeTrackProjection(t: EpisodeTrack) { order: t.order, name: t.name, artist: t.artist, - timestamp: t.timestamp, + ...(t.timestamp ? { timestamp: t.timestamp } : null), } as const; }