fix: refactor

app/(auth)/(tabs)/home/index.tsx

@@ -33,6 +33,8 @@ import { Ionicons } from "@expo/vector-icons";
 import MoviePoster from "@/components/MoviePoster";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { useSettings } from "@/utils/atoms/settings";
+import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
+import { MediaListSection } from "@/components/medialists/MediaListSection";
 
 export default function index() {
   const router = useRouter();
@@ -102,7 +104,7 @@ export default function index() {
         return -1;
       });
 
-      return data.Items || [];
+      return cs || [];
     },
     enabled: !!api && !!user?.Id,
     staleTime: 0,
@@ -178,44 +180,6 @@ export default function index() {
     staleTime: 60 * 1000,
   });
 
-  const { data: mediaListCollection } = useQuery<string | null>({
-    queryKey: ["mediaListCollection", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id) return null;
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        tags: ["medialist", "promoted"],
-        recursive: true,
-        fields: ["Tags"],
-        includeItemTypes: ["BoxSet"],
-      });
-
-      return response.data.Items?.[0].Id || null;
-    },
-    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
-    staleTime: 60 * 1000,
-  });
-
-  const { data: popularItems, isLoading: isLoadingPopular } = useQuery<
-    BaseItemDto[]
-  >({
-    queryKey: ["popular", user?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id || !mediaListCollection) return [];
-
-      const response = await getItemsApi(api).getItems({
-        userId: user.Id,
-        parentId: mediaListCollection,
-        limit: 10,
-      });
-
-      return response.data.Items || [];
-    },
-    enabled: !!api && !!user?.Id && !!mediaListCollection,
-    staleTime: 60 * 1000,
-  });
-
   const refetch = useCallback(async () => {
     setLoading(true);
     await queryClient.refetchQueries({ queryKey: ["resumeItems", user?.Id] });
@@ -243,6 +207,36 @@ export default function index() {
     };
   }, []);
 
+  const { data: mediaListCollections } = useQuery({
+    queryKey: [
+      "mediaListCollections-home",
+      user?.Id,
+      settings?.mediaListCollectionIds,
+    ],
+    queryFn: async () => {
+      if (!api || !user?.Id) return [];
+
+      const response = await getItemsApi(api).getItems({
+        userId: user.Id,
+        tags: ["medialist", "promoted"],
+        recursive: true,
+        fields: ["Tags"],
+        includeItemTypes: ["BoxSet"],
+      });
+
+      const ids =
+        response.data.Items?.filter(
+          (c) =>
+            c.Name !== "cf_carousel" &&
+            settings?.mediaListCollectionIds?.includes(c.Id!),
+        ) ?? [];
+
+      return ids;
+    },
+    enabled: !!api && !!user?.Id && settings?.usePopularPlugin === true,
+    staleTime: 0,
+  });
+
   if (isConnected === false) {
     return (
       <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
@@ -292,6 +286,8 @@ export default function index() {
       }
     >
       <View className="flex flex-col pt-4 pb-24 gap-y-4">
+        <LargeMovieCarousel />
+
         <ScrollingCollectionList
           title="Continue Watching"
           data={data}
@@ -299,13 +295,6 @@ export default function index() {
           orientation="horizontal"
         />
 
-        <ScrollingCollectionList
-          title="Popular"
-          data={popularItems}
-          loading={isLoadingPopular}
-          disabled={!mediaListCollection}
-        />
-
         <ScrollingCollectionList
           title="Next Up"
           data={nextUpData}
@@ -313,6 +302,10 @@ export default function index() {
           orientation="horizontal"
         />
 
+        {mediaListCollections?.map((ml) => (
+          <MediaListSection key={ml.Id} collection={ml} />
+        ))}
+
         <ScrollingCollectionList
           title="Recently Added in Movies"
           data={recentlyAddedInMovies}

components/CurrentlyPlayingBar.tsx

@@ -173,7 +173,6 @@ export const CurrentlyPlayingBar: React.FC = () => {
   }, [playing, progress, item, sessionData]);
 
   useEffect(() => {
-    console.log("Full screen changed", fullScreen);
     if (fullScreen === true) {
       videoRef.current?.presentFullscreenPlayer();
     } else {

components/ItemCardText.tsx

@@ -36,7 +36,7 @@ export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
         </>
       ) : (
         <>
-          <Text>{item.Name}</Text>
+          <Text numberOfLines={2}>{item.Name}</Text>
           <Text className="text-xs opacity-50">{item.ProductionYear}</Text>
         </>
       )}

components/MoviePoster.tsx

@@ -53,6 +53,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
         contentFit="cover"
         style={{
           aspectRatio: "10/15",
+          width: "100%",
         }}
       />
       <WatchedIndicator item={item} />

components/SubtitleTrackSelector.tsx

@@ -37,11 +37,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     if (index !== undefined && index !== null) {
       onChange(index);
     } else {
-      // Get first subtitle stream
-      const firstSubtitle = subtitleStreams.find((x) => x.Index !== undefined);
-      if (firstSubtitle?.Index !== undefined) {
-        onChange(firstSubtitle.Index);
-      }
+      onChange(-1);
     }
   }, []);
 
@@ -56,7 +52,9 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
             <View className="flex flex-row">
               <TouchableOpacity className="bg-neutral-900 max-w-32 h-12 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
                 <Text className="">
-                  {tc(selectedSubtitleSteam?.DisplayTitle, 13)}
+                  {selectedSubtitleSteam
+                    ? tc(selectedSubtitleSteam?.DisplayTitle, 13)
+                    : "None"}
                 </Text>
               </TouchableOpacity>
             </View>
@@ -72,6 +70,14 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
           sideOffset={8}
         >
           <DropdownMenu.Label>Subtitles</DropdownMenu.Label>
+          <DropdownMenu.Item
+            key={"-1"}
+            onSelect={() => {
+              onChange(-1);
+            }}
+          >
+            <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
+          </DropdownMenu.Item>
           {subtitleStreams?.map((subtitle, idx: number) => (
             <DropdownMenu.Item
               key={idx.toString()}

providers/JellyfinProvider.tsx

@@ -56,7 +56,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.6.0" },
+            clientInfo: { name: "Streamyfin", version: "0.6.1" },
             deviceInfo: { name: Platform.OS === "ios" ? "iOS" : "Android", id },
           }),
       );

utils/atoms/queue.ts

@@ -46,7 +46,6 @@ export const useJobProcessor = () => {
   const [isProcessing, setProcessing] = useAtom(isProcessingAtom);
 
   useEffect(() => {
-    console.info("Queue changed", queue, isProcessing);
     if (queue.length > 0 && !isProcessing) {
       console.info("Processing queue", queue);
       queueActions.processJob(queue, setQueue, setProcessing);

utils/atoms/settings.ts

@@ -9,6 +9,7 @@ type Settings = {
   usePopularPlugin?: boolean;
   deviceProfile?: "Expo" | "Native" | "Old";
   forceDirectPlay?: boolean;
+  mediaListCollectionIds?: string[];
 };
 
 /**
@@ -31,6 +32,7 @@ const loadSettings = async (): Promise<Settings> => {
         usePopularPlugin: false,
         deviceProfile: "Expo",
         forceDirectPlay: false,
+        mediaListCollectionIds: [],
       };
 };
 

utils/jellyfin/image/getLogoImageUrlById.ts

@@ -11,9 +11,11 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 export const getLogoImageUrlById = ({
   api,
   item,
+  height = 130,
 }: {
   api?: Api | null;
   item?: BaseItemDto | null;
+  height?: number;
 }) => {
   if (!api || !item) {
     return null;
@@ -27,7 +29,7 @@ export const getLogoImageUrlById = ({
 
   params.append("tag", imageTags);
   params.append("quality", "90");
-  params.append("fillHeight", "130");
+  params.append("fillHeight", height.toString());
 
   return `${api.basePath}/Items/${item.Id}/Images/Logo?${params.toString()}`;
 };