fix

components/series/CastAndCrew.tsx

@@ -8,7 +8,7 @@ import Poster from "../Poster";
 export const CastAndCrew = ({ item }: { item: BaseItemDto }) => {
   return (
     <View>
-      <Text className="text-lg font-bold mb-2">Cast & Crew</Text>
+      <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
       <HorizontalScroll<NonNullable<BaseItemDto["People"]>[number]>
         data={item.People}
         renderItem={(item, index) => (

components/series/CurrentSeries.tsx

@@ -9,7 +9,7 @@ import { Text } from "../common/Text";
 export const CurrentSeries = ({ item }: { item: BaseItemDto }) => {
   return (
     <View>
-      <Text className="text-lg font-bold mb-2">Series</Text>
+      <Text className="text-lg font-bold mb-2 px-4">Series</Text>
       <HorizontalScroll<BaseItemDto>
         data={[item]}
         renderItem={(item, index) => (

components/series/NextUp.tsx

@@ -7,8 +7,27 @@ import Poster from "../Poster";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
 import { router } from "expo-router";
+import { nextUp } from "@/utils/jellyfin";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+
+export const NextUp: React.FC<{ seriesId: string }> = ({ seriesId }) => {
+  const [user] = useAtom(userAtom);
+  const [api] = useAtom(apiAtom);
+
+  const { data: items } = useQuery({
+    queryKey: ["nextUp", seriesId],
+    queryFn: async () =>
+      await nextUp({
+        userId: user?.Id,
+        api,
+        itemId: seriesId,
+      }),
+    enabled: !!api && !!seriesId && !!user?.Id,
+    staleTime: 0,
+  });
 
-export const NextUp = ({ items }: { items?: BaseItemDto[] | null }) => {
   if (!items?.length)
     return (
       <View>
@@ -19,7 +38,7 @@ export const NextUp = ({ items }: { items?: BaseItemDto[] | null }) => {
 
   return (
     <View>
-      <Text className="text-lg font-bold mb-2">Next up</Text>
+      <Text className="text-lg font-bold mb-2 px-4">Next up</Text>
       <HorizontalScroll<BaseItemDto>
         data={items}
         renderItem={(item, index) => (

components/series/SeasonPicker.tsx

@@ -84,7 +84,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
     <View className="mb-2">
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-          <View className="flex flex-row">
+          <View className="flex flex-row px-4">
             <TouchableOpacity className="bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
               <Text>Season {selectedSeason}</Text>
             </TouchableOpacity>