diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index 46fe9470..132c3fc7 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -37,12 +37,15 @@ export const seasonIndexAtom = atom({}); export const EpisodeList: React.FC = ({ item, close }) => { const [api] = useAtom(apiAtom); const [user] = useAtom(userAtom); - const scrollViewRef = useRef(null); // Reference to the HorizontalScroll const insets = useSafeAreaInsets(); // Get safe area insets const [settings] = useSettings(); - const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom); + const scrollViewRef = useRef(null); // Reference to the HorizontalScroll + const scrollToIndex = (index: number) => { + scrollViewRef.current?.scrollToIndex(index, 100); + }; + // Set the initial season index useEffect(() => { if (item.SeriesId) { setSeasonIndexState((prev) => ({ @@ -53,9 +56,9 @@ export const EpisodeList: React.FC = ({ item, close }) => { }, []); const seasonIndex = seasonIndexState[item.SeriesId ?? ""]; - const [seriesItem, setSeriesItem] = useState(null); + // This effect fetches the series item data/ useEffect(() => { if (item.SeriesId) { getUserItemData({ api, userId: user?.Id, itemId: item.SeriesId }).then( @@ -112,6 +115,17 @@ export const EpisodeList: React.FC = ({ item, close }) => { enabled: !!api && !!user?.Id && !!selectedSeasonId, }); + useEffect(() => { + if (item?.Type === "Episode" && item.Id) { + const index = episodes?.findIndex((ep) => ep.Id === item.Id); + if (index !== undefined && index !== -1) { + setTimeout(() => { + scrollToIndex(index); + }, 400); + } + } + }, [episodes, item]); + const queryClient = useQueryClient(); useEffect(() => { for (let e of episodes || []) {