Merge branch 'develop' into feat/i18n

2026-04-21 16:24:41 +01:00 · 2025-01-07 20:38:59 -05:00
parent 480abb216d ef42207174
commit 2da774272d
64 changed files with 2329 additions and 698 deletions
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -37,7 +37,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      case "red":
        return "bg-red-600";
      case "black":
-        return "bg-neutral-900 border border-neutral-800";
+        return "bg-neutral-900";
      case "transparent":
        return "bg-transparent";
    }
@@ -63,7 +63,9 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      {...props}
    >
      {loading ? (
-        <Loader />
+        <View className="p-0.5">
+          <Loader />
+        </View>
      ) : (
        <View
          className={`
--- a/components/GenreTags.tsx
+++ b/components/GenreTags.tsx
@@ -1,6 +1,6 @@
 // GenreTags.tsx
 import React from "react";
-import {View, ViewProps} from "react-native";
+import {StyleProp, TextStyle, View, ViewProps} from "react-native";
 import { Text } from "./common/Text";

 interface TagProps {
@@ -8,14 +8,15 @@ interface TagProps {
  textClass?: ViewProps["className"]
 }

-export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"]} & ViewProps> = ({
+export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"], textStyle?: StyleProp<TextStyle>} & ViewProps> = ({
  text,
  textClass,
+  textStyle,
  ...props
 }) => {
  return (
    <View className="bg-neutral-800 rounded-full px-2 py-1" {...props}>
-      <Text className={textClass}>{text}</Text>
+      <Text className={textClass} style={textStyle}>{text}</Text>
    </View>
  );
 };
--- a/components/ParallaxPage.tsx
+++ b/components/ParallaxPage.tsx
@@ -1,6 +1,6 @@
 import { LinearGradient } from "expo-linear-gradient";
 import { type PropsWithChildren, type ReactElement } from "react";
-import { View, ViewProps } from "react-native";
+import {NativeScrollEvent, NativeSyntheticEvent, View, ViewProps} from "react-native";
 import Animated, {
  interpolate,
  useAnimatedRef,
@@ -13,6 +13,7 @@ interface Props extends ViewProps {
  logo?: ReactElement;
  episodePoster?: ReactElement;
  headerHeight?: number;
+  onEndReached?: (() => void) | null | undefined;
 }

 export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
@@ -21,6 +22,7 @@ export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
  episodePoster,
  headerHeight = 400,
  logo,
+  onEndReached,
  ...props
 }: Props) => {
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
@@ -47,6 +49,11 @@ export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
    };
  });

+
+  function isCloseToBottom({layoutMeasurement, contentOffset, contentSize}: NativeScrollEvent) {
+    return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20;
+  }
+
  return (
    <View className="flex-1" {...props}>
      <Animated.ScrollView
@@ -55,6 +62,10 @@ export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
        }}
        ref={scrollRef}
        scrollEventThrottle={16}
+        onScroll={e => {
+          if (isCloseToBottom(e.nativeEvent))
+            onEndReached?.()
+        }}
      >
        {logo && (
          <View
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -7,7 +7,7 @@ export function Input(props: TextInputProps) {
  return (
    <TextInput
      ref={inputRef}
-      className="p-4 border border-neutral-800 rounded-xl bg-neutral-900"
+      className="p-4  rounded-xl bg-neutral-900"
      allowFontScaling={false}
      style={[{ color: "white" }, style]}
      placeholderTextColor={"#9CA3AF"}
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -4,9 +4,11 @@ import {
  BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter, useSegments } from "expo-router";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import * as ContextMenu from "zeego/context-menu";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import * as Haptics from "expo-haptics";

 interface Props extends TouchableOpacityProps {
  item: BaseItemDto;
@@ -16,8 +18,6 @@ export const itemRouter = (
  item: BaseItemDto | BaseItemPerson,
  from: string
 ) => {
-  console.log(item.Type, item?.CollectionType);
-
  if ("CollectionType" in item && item.CollectionType === "livetv") {
    return `/(auth)/(tabs)/${from}/livetv`;
  }
@@ -68,10 +68,33 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
  const router = useRouter();
  const segments = useSegments();
+  const { showActionSheetWithOptions } = useActionSheet();
+  const markAsPlayedStatus = useMarkAsPlayed(item);

  const from = segments[2];

-  const markAsPlayedStatus = useMarkAsPlayed(item);
+  const showActionSheet = useCallback(() => {
+    if (!(item.Type === "Movie" || item.Type === "Episode")) return;
+
+    const options = ["Mark as Played", "Mark as Not Played", "Cancel"];
+    const cancelButtonIndex = 2;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+      },
+      async (selectedIndex) => {
+        if (selectedIndex === 0) {
+          await markAsPlayedStatus(true);
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        } else if (selectedIndex === 1) {
+          await markAsPlayedStatus(false);
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, markAsPlayedStatus]);

  if (
    from === "(home)" ||
@@ -80,78 +103,16 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
    from === "(favorites)"
  )
    return (
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-          <TouchableOpacity
-            onPress={() => {
-              const url = itemRouter(item, from);
-              // @ts-ignore
-              router.push(url);
-            }}
-            {...props}
-          >
-            {children}
-          </TouchableOpacity>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content
-          avoidCollisions
-          alignOffset={0}
-          collisionPadding={0}
-          loop={false}
-          key={"content"}
-        >
-          <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
-          <ContextMenu.Item
-            key="item-1"
-            onSelect={() => {
-              markAsPlayedStatus(true);
-            }}
-            shouldDismissMenuOnSelect
-          >
-            <ContextMenu.ItemTitle key="item-1-title">
-              Mark as watched
-            </ContextMenu.ItemTitle>
-            <ContextMenu.ItemIcon
-              ios={{
-                name: "checkmark.circle", // Changed to "checkmark.circle" which represents "watched"
-                pointSize: 18,
-                weight: "semibold",
-                scale: "medium",
-                hierarchicalColor: {
-                  dark: "green", // Changed to green for "watched"
-                  light: "green",
-                },
-              }}
-              androidIconName="checkmark-circle"
-            ></ContextMenu.ItemIcon>
-          </ContextMenu.Item>
-          <ContextMenu.Item
-            key="item-2"
-            onSelect={() => {
-              markAsPlayedStatus(false);
-            }}
-            shouldDismissMenuOnSelect
-            destructive
-          >
-            <ContextMenu.ItemTitle key="item-2-title">
-              Mark as not watched
-            </ContextMenu.ItemTitle>
-            <ContextMenu.ItemIcon
-              ios={{
-                name: "eye.slash", // Changed to "eye.slash" which represents "not watched"
-                pointSize: 18, // Adjusted for better visibility
-                weight: "semibold",
-                scale: "medium",
-                hierarchicalColor: {
-                  dark: "red", // Changed to red for "not watched"
-                  light: "red",
-                },
-                // Removed paletteColors as it's not necessary in this case
-              }}
-              androidIconName="eye-slash"
-            ></ContextMenu.ItemIcon>
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Root>
+      <TouchableOpacity
+        onLongPress={showActionSheet}
+        onPress={() => {
+          const url = itemRouter(item, from);
+          // @ts-expect-error
+          router.push(url);
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
    );
 };
--- a/components/jellyseerr/Cast.tsx
+++ b/components/jellyseerr/Cast.tsx
@@ -0,0 +1,39 @@
+import { View, ViewProps } from "react-native";
+import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import React from "react";
+import { FlashList } from "@shopify/flash-list";
+import { Text } from "@/components/common/Text";
+import PersonPoster from "@/components/jellyseerr/PersonPoster";
+
+const CastSlide: React.FC<
+  { details?: MovieDetails | TvDetails } & ViewProps
+> = ({ details, ...props }) => {
+  return (
+    details?.credits?.cast?.length &&
+    details?.credits?.cast?.length > 0 && (
+      <View {...props}>
+        <Text className="text-lg font-bold mb-2 px-4">Cast</Text>
+        <FlashList
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          data={details?.credits.cast}
+          ItemSeparatorComponent={() => <View className="w-2" />}
+          estimatedItemSize={15}
+          keyExtractor={(item) => item?.id?.toString()}
+          contentContainerStyle={{ paddingHorizontal: 16 }}
+          renderItem={({ item }) => (
+            <PersonPoster
+              id={item.id.toString()}
+              posterPath={item.profilePath}
+              name={item.name}
+              subName={item.character}
+            />
+          )}
+        />
+      </View>
+    )
+  );
+};
+
+export default CastSlide;
--- a/components/jellyseerr/DetailFacts.tsx
+++ b/components/jellyseerr/DetailFacts.tsx
@@ -0,0 +1,218 @@
+import { View, ViewProps } from "react-native";
+import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import { Text } from "@/components/common/Text";
+import { useMemo } from "react";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { uniqBy } from "lodash";
+import { TmdbRelease } from "@/utils/jellyseerr/server/api/themoviedb/interfaces";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import CountryFlag from "react-native-country-flag";
+import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
+
+interface Release {
+  certification: string;
+  iso_639_1?: string;
+  note?: string;
+  release_date: string;
+  type: number;
+}
+
+const dateOpts: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
+const Facts: React.FC<
+  { title: string; facts?: string[] | React.ReactNode[] } & ViewProps
+> = ({ title, facts, ...props }) =>
+  facts &&
+  facts?.length > 0 && (
+    <View className="flex flex-row justify-between py-2" {...props}>
+      <Text className="font-bold">{title}</Text>
+
+      <View className="flex flex-col items-end">
+        {facts.map((f, idx) =>
+          typeof f === "string" ? <Text key={idx}>{f}</Text> : f
+        )}
+      </View>
+    </View>
+  );
+
+const Fact: React.FC<{ title: string; fact?: string | null } & ViewProps> = ({
+  title,
+  fact,
+  ...props
+}) => fact && <Facts title={title} facts={[fact]} {...props} />;
+
+const DetailFacts: React.FC<
+  { details?: MovieDetails | TvDetails } & ViewProps
+> = ({ details, className, ...props }) => {
+  const { jellyseerrUser } = useJellyseerr();
+
+  const locale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
+
+  const region = useMemo(
+    () => jellyseerrUser?.settings?.region || "US",
+    [jellyseerrUser]
+  );
+
+  const releases = useMemo(
+    () =>
+      (details as MovieDetails)?.releases?.results.find(
+        (r: TmdbRelease) => r.iso_3166_1 === region
+      )?.release_dates as TmdbRelease["release_dates"],
+    [details]
+  );
+
+  // Release date types:
+  // 1. Premiere
+  // 2. Theatrical (limited)
+  // 3. Theatrical
+  // 4. Digital
+  // 5. Physical
+  // 6. TV
+  const filteredReleases = useMemo(
+    () =>
+      uniqBy(
+        releases?.filter((r: Release) => r.type > 2 && r.type < 6),
+        "type"
+      ),
+    [releases]
+  );
+
+  const firstAirDate = useMemo(() => {
+    const firstAirDate = (details as TvDetails)?.firstAirDate;
+    if (firstAirDate) {
+      return new Date(firstAirDate).toLocaleDateString(
+        `${locale}-${region}`,
+        dateOpts
+      );
+    }
+  }, [details]);
+
+  const nextAirDate = useMemo(() => {
+    const firstAirDate = (details as TvDetails)?.firstAirDate;
+    const nextAirDate = (details as TvDetails)?.nextEpisodeToAir?.airDate;
+    if (nextAirDate && firstAirDate !== nextAirDate) {
+      return new Date(nextAirDate).toLocaleDateString(
+        `${locale}-${region}`,
+        dateOpts
+      );
+    }
+  }, [details]);
+
+  const revenue = useMemo(
+    () =>
+      (details as MovieDetails)?.revenue?.toLocaleString?.(
+        `${locale}-${region}`,
+        { style: "currency", currency: "USD" }
+      ),
+    [details]
+  );
+
+  const budget = useMemo(
+    () =>
+      (details as MovieDetails)?.budget?.toLocaleString?.(
+        `${locale}-${region}`,
+        { style: "currency", currency: "USD" }
+      ),
+    [details]
+  );
+
+  const streamingProviders = useMemo(
+    () =>
+      details?.watchProviders?.find(
+        (provider) => provider.iso_3166_1 === region
+      )?.flatrate,
+    [details]
+  );
+
+  const networks = useMemo(() => (details as TvDetails)?.networks, [details]);
+
+  const spokenLanguage = useMemo(
+    () =>
+      details?.spokenLanguages.find(
+        (lng) => lng.iso_639_1 === details.originalLanguage
+      )?.name,
+    [details]
+  );
+
+  return (
+    details && (
+      <View className="p-4">
+        <Text className="text-lg font-bold">Details</Text>
+        <View
+          className={`${className} flex flex-col justify-center divide-y-2 divide-neutral-800`}
+          {...props}
+        >
+          <Fact title="Status" fact={details?.status} />
+          <Fact
+            title="Original Title"
+            fact={(details as TvDetails)?.originalName}
+          />
+          {details.keywords.some(
+            (keyword) => keyword.id === ANIME_KEYWORD_ID
+          ) && <Fact title="Series Type" fact="Anime" />}
+          <Facts
+            title="Release Dates"
+            facts={filteredReleases?.map?.((r: Release, idx) => (
+              <View key={idx} className="flex flex-row space-x-2 items-center">
+                {r.type === 3 ? (
+                  // Theatrical
+                  <Ionicons name="ticket" size={16} color="white" />
+                ) : r.type === 4 ? (
+                  // Digital
+                  <Ionicons name="cloud" size={16} color="white" />
+                ) : (
+                  // Physical
+                  <MaterialCommunityIcons
+                    name="record-circle-outline"
+                    size={16}
+                    color="white"
+                  />
+                )}
+                <Text>
+                  {new Date(r.release_date).toLocaleDateString(
+                    `${locale}-${region}`,
+                    dateOpts
+                  )}
+                </Text>
+              </View>
+            ))}
+          />
+          <Fact title="First Air Date" fact={firstAirDate} />
+          <Fact title="Next Air Date" fact={nextAirDate} />
+          <Fact title="Revenue" fact={revenue} />
+          <Fact title="Budget" fact={budget} />
+          <Fact title="Original Language" fact={spokenLanguage} />
+          <Facts
+            title="Production Country"
+            facts={details?.productionCountries?.map((n, idx) => (
+              <View key={idx} className="flex flex-row items-center space-x-2">
+                <CountryFlag isoCode={n.iso_3166_1} size={10} />
+                <Text>{n.name}</Text>
+              </View>
+            ))}
+          />
+          <Facts
+            title="Studios"
+            facts={uniqBy(details?.productionCompanies, "name")?.map(
+              (n) => n.name
+            )}
+          />
+          <Facts title="Network" facts={networks?.map((n) => n.name)} />
+          <Facts
+            title="Currently Streaming on"
+            facts={streamingProviders?.map((s) => s.name)}
+          />
+        </View>
+      </View>
+    )
+  );
+};
+
+export default DetailFacts;
--- a/components/jellyseerr/JellyseerrIndexPage.tsx
+++ b/components/jellyseerr/JellyseerrIndexPage.tsx
@@ -0,0 +1,161 @@
+import Discover from "@/components/jellyseerr/discover/Discover";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import {
+  MovieResult,
+  PersonResult,
+  TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
+import { useReactNavigationQuery } from "@/utils/useReactNavigationQuery";
+import React, { useMemo } from "react";
+import { View, ViewProps } from "react-native";
+import {
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Text } from "../common/Text";
+import JellyseerrPoster from "../posters/JellyseerrPoster";
+import { LoadingSkeleton } from "../search/LoadingSkeleton";
+import { SearchItemWrapper } from "../search/SearchItemWrapper";
+import PersonPoster from "./PersonPoster";
+import { useTranslation } from "react-i18next";
+
+interface Props extends ViewProps {
+  searchQuery: string;
+}
+
+export const JellyserrIndexPage: React.FC<Props> = ({ searchQuery }) => {
+  const { jellyseerrApi } = useJellyseerr();
+  const opacity = useSharedValue(1);
+  const { t } = useTranslation();
+
+  const {
+    data: jellyseerrDiscoverSettings,
+    isFetching: f1,
+    isLoading: l1,
+  } = useReactNavigationQuery({
+    queryKey: ["search", "jellyseerr", "discoverSettings", searchQuery],
+    queryFn: async () => jellyseerrApi?.discoverSettings(),
+    enabled: !!jellyseerrApi && searchQuery.length == 0,
+  });
+
+  const {
+    data: jellyseerrResults,
+    isFetching: f2,
+    isLoading: l2,
+  } = useReactNavigationQuery({
+    queryKey: ["search", "jellyseerr", "results", searchQuery],
+    queryFn: async () => {
+      const response = await jellyseerrApi?.search({
+        query: new URLSearchParams(searchQuery).toString(),
+        page: 1,
+        language: "en",
+      });
+      return response?.results;
+    },
+    enabled: !!jellyseerrApi && searchQuery.length > 0,
+  });
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  useAnimatedReaction(
+    () => f1 || f2 || l1 || l2,
+    (isLoading) => {
+      if (isLoading) {
+        opacity.value = withTiming(1, { duration: 200 });
+      } else {
+        opacity.value = withTiming(0, { duration: 200 });
+      }
+    }
+  );
+
+  const jellyseerrMovieResults = useMemo(
+    () =>
+      jellyseerrResults?.filter(
+        (r) => r.mediaType === MediaType.MOVIE
+      ) as MovieResult[],
+    [jellyseerrResults]
+  );
+
+  const jellyseerrTvResults = useMemo(
+    () =>
+      jellyseerrResults?.filter(
+        (r) => r.mediaType === MediaType.TV
+      ) as TvResult[],
+    [jellyseerrResults]
+  );
+
+  const jellyseerrPersonResults = useMemo(
+    () =>
+      jellyseerrResults?.filter(
+        (r) => r.mediaType === "person"
+      ) as PersonResult[],
+    [jellyseerrResults]
+  );
+
+  if (!searchQuery.length)
+    return (
+      <View className="flex flex-col">
+        <Discover sliders={jellyseerrDiscoverSettings} />
+      </View>
+    );
+
+  return (
+    <View>
+      <LoadingSkeleton isLoading={f1 || f2 || l1 || l2} />
+
+      {!jellyseerrMovieResults?.length &&
+        !jellyseerrTvResults?.length &&
+        !jellyseerrPersonResults?.length &&
+        !f1 &&
+        !f2 &&
+        !l1 &&
+        !l2 && (
+          <View>
+            <Text className="text-center text-lg font-bold mt-4">
+              {t("search.no_results_found_for")}
+            </Text>
+            <Text className="text-xs text-purple-600 text-center">
+              "{searchQuery}"
+            </Text>
+          </View>
+        )}
+
+      <View className={f1 || f2 || l1 || l2 ? "opacity-0" : "opacity-100"}>
+        <SearchItemWrapper
+          header={t("search.request_movies")}
+          items={jellyseerrMovieResults}
+          renderItem={(item: MovieResult) => (
+            <JellyseerrPoster item={item} key={item.id} />
+          )}
+        />
+        <SearchItemWrapper
+          header={t("search.request_series")}
+          items={jellyseerrTvResults}
+          renderItem={(item: TvResult) => (
+            <JellyseerrPoster item={item} key={item.id} />
+          )}
+        />
+        <SearchItemWrapper
+          header={t("search.actors")}
+          items={jellyseerrPersonResults}
+          renderItem={(item: PersonResult) => (
+            <PersonPoster
+              className="mr-2"
+              key={item.id}
+              id={item.id.toString()}
+              name={item.name}
+              posterPath={item.profilePath}
+            />
+          )}
+        />
+      </View>
+    </View>
+  );
+};
--- a/components/jellyseerr/JellyseerrMediaIcon.tsx
+++ b/components/jellyseerr/JellyseerrMediaIcon.tsx
@@ -0,0 +1,37 @@
+import {useMemo} from "react";
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import {Feather, MaterialCommunityIcons} from "@expo/vector-icons";
+import {View, ViewProps} from "react-native";
+
+const JellyseerrMediaIcon: React.FC<{ mediaType: "tv" | "movie" } & ViewProps> = ({
+  mediaType,
+  className,
+  ...props
+}) => {
+  const style = useMemo(
+    () => mediaType === MediaType.MOVIE
+      ? 'bg-blue-600/90 border-blue-400/40'
+      : 'bg-purple-600/90 border-purple-400/40',
+    [mediaType]
+  );
+  return (
+    mediaType &&
+    <View className={`${className} border ${style} rounded-full p-1`} {...props}>
+      {mediaType === MediaType.MOVIE ? (
+        <MaterialCommunityIcons
+          name="movie-open"
+          size={16}
+          color="white"
+        />
+      ) : (
+        <Feather
+          size={16}
+          name="tv"
+          color="white"
+        />
+      )}
+    </View>
+  )
+}
+
+export default JellyseerrMediaIcon;
--- a/components/jellyseerr/JellyseerrStatusIcon.tsx
+++ b/components/jellyseerr/JellyseerrStatusIcon.tsx
@@ -2,7 +2,6 @@ import {useEffect, useState} from "react";
 import {MediaStatus} from "@/utils/jellyseerr/server/constants/media";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import {TouchableOpacity, View, ViewProps} from "react-native";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";

 interface Props {
  mediaStatus?: MediaStatus;
@@ -10,7 +9,7 @@ interface Props {
  onPress?: () => void;
 }

-const JellyseerrIconStatus: React.FC<Props & ViewProps> = ({
+const JellyseerrStatusIcon: React.FC<Props & ViewProps> = ({
  mediaStatus,
  showRequestIcon,
  onPress,
@@ -69,4 +68,4 @@ const JellyseerrIconStatus: React.FC<Props & ViewProps> = ({
  )
 }

-export default JellyseerrIconStatus;
+export default JellyseerrStatusIcon;
--- a/components/jellyseerr/ParallaxSlideShow.tsx
+++ b/components/jellyseerr/ParallaxSlideShow.tsx
@@ -0,0 +1,160 @@
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {Dimensions, View, ViewProps} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { Text } from "@/components/common/Text";
+import { Animated } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+import {useFocusEffect} from "expo-router";
+
+const ANIMATION_ENTER = 250;
+const ANIMATION_EXIT = 250;
+const BACKDROP_DURATION = 5000;
+
+type Render = React.ComponentType<any>
+  | React.ReactElement
+  | null
+  | undefined;
+
+interface Props<T> {
+  data: T[]
+  images: string[];
+  logo?: React.ReactElement;
+  HeaderContent?: () => React.ReactElement;
+  MainContent?: () => React.ReactElement;
+  listHeader: string;
+  renderItem: (item: T, index: number) => Render;
+  keyExtractor: (item: T) => string;
+  onEndReached?: (() => void) | null | undefined;
+}
+
+const ParallaxSlideShow = <T extends unknown>({
+  data,
+  images,
+  logo,
+  HeaderContent,
+  MainContent,
+  listHeader,
+  renderItem,
+  keyExtractor,
+  onEndReached,
+  ...props
+}: PropsWithChildren<Props<T> & ViewProps>
+) => {
+  const insets = useSafeAreaInsets();
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const enterAnimation = useCallback(
+    () =>
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: ANIMATION_ENTER,
+        useNativeDriver: true,
+      }),
+    [fadeAnim]
+  );
+
+  const exitAnimation = useCallback(
+    () =>
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: ANIMATION_EXIT,
+        useNativeDriver: true,
+      }),
+    [fadeAnim]
+  );
+
+  useEffect(() => {
+    if (images?.length) {
+      enterAnimation().start();
+
+      const intervalId = setInterval(() => {
+        Animated.sequence([
+          enterAnimation(),
+          exitAnimation()
+        ]).start(() => {
+          fadeAnim.setValue(0);
+          setCurrentIndex((prevIndex) => (prevIndex + 1) % images?.length);
+        })
+      }, BACKDROP_DURATION);
+
+      return () => {
+        clearInterval(intervalId)
+      };
+    }
+  }, [fadeAnim, images, enterAnimation, exitAnimation, setCurrentIndex, currentIndex]);
+
+  return (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <ParallaxScrollView
+        className="flex-1 opacity-100"
+        headerHeight={300}
+        onEndReached={onEndReached}
+        headerImage={
+          <Animated.Image
+            key={images?.[currentIndex]}
+            id={images?.[currentIndex]}
+            source={{
+              uri: images?.[currentIndex],
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              opacity: fadeAnim,
+            }}
+          />
+        }
+        logo={logo}
+      >
+        <View className="flex flex-col space-y-4 px-4">
+          <View className="flex flex-row justify-between w-full">
+            <View className="flex flex-col w-full">
+              {HeaderContent && HeaderContent()}
+            </View>
+          </View>
+          {MainContent && MainContent()}
+          <View>
+            <FlashList
+              data={data}
+              ListEmptyComponent={
+                <View className="flex flex-col items-center justify-center h-full">
+                  <Text className="font-bold text-xl text-neutral-500">
+                    No results
+                  </Text>
+                </View>
+              }
+              contentInsetAdjustmentBehavior="automatic"
+              ListHeaderComponent={
+                <Text className="text-lg font-bold my-2">{listHeader}</Text>
+              }
+              nestedScrollEnabled
+              showsVerticalScrollIndicator={false}
+              //@ts-ignore
+              renderItem={({ item, index}) => renderItem(item, index)}
+              keyExtractor={keyExtractor}
+              numColumns={3}
+              estimatedItemSize={214}
+              ItemSeparatorComponent={() => <View className="h-2 w-2" />}
+            />
+          </View>
+        </View>
+      </ParallaxScrollView>
+    </View>
+  );
+}
+
+export default ParallaxSlideShow;
--- a/components/jellyseerr/PersonPoster.tsx
+++ b/components/jellyseerr/PersonPoster.tsx
@@ -0,0 +1,42 @@
+import {TouchableOpacity, View, ViewProps} from "react-native";
+import React from "react";
+import {Text} from "@/components/common/Text";
+import Poster from "@/components/posters/Poster";
+import {useRouter, useSegments} from "expo-router";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+
+interface Props {
+  id: string
+  posterPath?: string
+  name: string
+  subName?: string
+}
+
+const PersonPoster: React.FC<Props & ViewProps> = ({
+  id,
+  posterPath,
+  name,
+  subName,
+  ...props
+}) => {
+  const {jellyseerrApi} = useJellyseerr();
+  const router = useRouter();
+  const segments = useSegments();
+  const from = segments[2];
+
+  if (from === "(home)" || from === "(search)" || from === "(libraries)")
+    return (
+      <TouchableOpacity onPress={() => router.push(`/(auth)/(tabs)/${from}/jellyseerr/person/${id}`)}>
+        <View className="flex flex-col w-28" {...props}>
+          <Poster
+            id={id}
+            url={jellyseerrApi?.imageProxy(posterPath, 'w600_and_h900_bestv2')}
+          />
+          <Text className="mt-2">{name}</Text>
+          {subName && <Text className="text-xs opacity-50">{subName}</Text>}
+        </View>
+      </TouchableOpacity>
+    )
+}
+
+export default PersonPoster;
--- a/components/jellyseerr/discover/CompanySlide.tsx
+++ b/components/jellyseerr/discover/CompanySlide.tsx
@@ -0,0 +1,41 @@
+import React, {useCallback} from "react";
+import {
+  useJellyseerr,
+} from "@/hooks/useJellyseerr";
+import {TouchableOpacity, ViewProps} from "react-native";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import {COMPANY_LOGO_IMAGE_FILTER, Network} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
+import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
+import {Studio} from "@/utils/jellyseerr/src/components/Discover/StudioSlider";
+import {router, useSegments} from "expo-router";
+
+const CompanySlide: React.FC<{data: Network[] | Studio[]} & SlideProps & ViewProps> = ({ slide, data, ...props }) => {
+  const segments = useSegments();
+  const { jellyseerrApi } = useJellyseerr();
+  const from = segments[2];
+
+  const navigate = useCallback(({id, image, name}: Network | Studio) => router.push({
+    pathname: `/(auth)/(tabs)/${from}/jellyseerr/company/${id}`,
+    params: {id, image, name, type: slide.type }
+  }), [slide]);
+
+  return (
+    <Slide
+      {...props}
+      slide={slide}
+      data={data}
+      keyExtractor={(item) => item.id.toString()}
+      renderItem={(item, index) => (
+        <TouchableOpacity className="mr-2" onPress={() => navigate(item)}>
+          <GenericSlideCard
+            className="w-28 rounded-lg overflow-hidden border border-neutral-900 p-4"
+            id={item.id.toString()}
+            url={jellyseerrApi?.imageProxy(item.image, COMPANY_LOGO_IMAGE_FILTER)}
+          />
+        </TouchableOpacity>
+      )}
+    />
+  );
+};
+
+export default CompanySlide;
--- a/components/jellyseerr/discover/Discover.tsx
+++ b/components/jellyseerr/discover/Discover.tsx
@@ -0,0 +1,47 @@
+import React, {useMemo} from "react";
+import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import {sortBy} from "lodash";
+import MovieTvSlide from "@/components/jellyseerr/discover/MovieTvSlide";
+import CompanySlide from "@/components/jellyseerr/discover/CompanySlide";
+import {View} from "react-native";
+import {networks} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
+import {studios} from "@/utils/jellyseerr/src/components/Discover/StudioSlider";
+import GenreSlide from "@/components/jellyseerr/discover/GenreSlide";
+
+interface Props {
+  sliders?: DiscoverSlider[];
+}
+const Discover: React.FC<Props> = ({ sliders }) => {
+  if (!sliders)
+    return;
+
+  const sortedSliders = useMemo(
+    () => sortBy(sliders.filter((s) => s.enabled), 'order', 'asc'),
+    [sliders]
+  );
+
+  return (
+    <View className="flex flex-col space-y-4 mb-8">
+      {sortedSliders.map(slide => {
+        switch (slide.type) {
+          case DiscoverSliderType.NETWORKS:
+            return <CompanySlide key={slide.id} slide={slide} data={networks}/>
+          case DiscoverSliderType.STUDIOS:
+            return <CompanySlide key={slide.id} slide={slide} data={studios}/>
+          case DiscoverSliderType.MOVIE_GENRES:
+          case DiscoverSliderType.TV_GENRES:
+            return <GenreSlide key={slide.id} slide={slide} />
+          case DiscoverSliderType.TRENDING:
+          case DiscoverSliderType.POPULAR_MOVIES:
+          case DiscoverSliderType.UPCOMING_MOVIES:
+          case DiscoverSliderType.POPULAR_TV:
+          case DiscoverSliderType.UPCOMING_TV:
+            return <MovieTvSlide key={slide.id} slide={slide}/>
+        }
+      })}
+    </View>
+  )
+};
+
+export default Discover;
--- a/components/jellyseerr/discover/GenericSlideCard.tsx
+++ b/components/jellyseerr/discover/GenericSlideCard.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import {StyleSheet, View, ViewProps} from "react-native";
+import {Image, ImageContentFit} from "expo-image";
+import {Text} from "@/components/common/Text";
+import {LinearGradient} from "expo-linear-gradient";
+
+export const textShadowStyle = StyleSheet.create({
+  shadow: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    shadowOpacity: 1,
+    shadowRadius: .5,
+
+    elevation: 6,
+  }
+})
+
+const GenericSlideCard: React.FC<{id: string; url?: string, title?: string, colors?: string[], contentFit?: ImageContentFit} & ViewProps> = ({
+  id,
+  url,
+  title,
+  colors = ['#9333ea', 'transparent'],
+  contentFit = "contain",
+  ...props
+}) => (
+  <>
+    <LinearGradient
+      colors={colors}
+      start={{x: 0.5, y: 1.75}}
+      end={{x: 0.5, y: 0}}
+      className="rounded-xl"
+    >
+      <View className="rounded-xl" {...props}>
+        <Image
+          key={id}
+          id={id}
+          source={url ? {uri: url} : null}
+          cachePolicy={"memory-disk"}
+          contentFit={contentFit}
+          style={{
+            aspectRatio: "4/3",
+          }}
+        />
+        {title &&
+            <View
+                className="absolute justify-center top-0 left-0 right-0 bottom-0 items-center"
+            >
+                <Text className="text-center font-bold" style={textShadowStyle.shadow}>{title}</Text>
+            </View>
+        }
+      </View>
+    </LinearGradient>
+  </>
+);
+
+export default GenericSlideCard;
--- a/components/jellyseerr/discover/GenreSlide.tsx
+++ b/components/jellyseerr/discover/GenreSlide.tsx
@@ -0,0 +1,56 @@
+import React, {useCallback} from "react";
+import {Endpoints, useJellyseerr,} from "@/hooks/useJellyseerr";
+import {TouchableOpacity, ViewProps} from "react-native";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
+import {router, useSegments} from "expo-router";
+import {useQuery} from "@tanstack/react-query";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import {genreColorMap} from "@/utils/jellyseerr/src/components/Discover/constants";
+import {GenreSliderItem} from "@/utils/jellyseerr/server/interfaces/api/discoverInterfaces";
+
+const GenreSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
+  const segments = useSegments();
+  const { jellyseerrApi } = useJellyseerr();
+  const from = segments[2];
+
+  const navigate = useCallback((genre: GenreSliderItem) => router.push({
+    pathname: `/(auth)/(tabs)/${from}/jellyseerr/genre/${genre.id}`,
+    params: {type: slide.type, name: genre.name}
+  }), [slide]);
+
+  const {data, isFetching, isLoading } = useQuery({
+    queryKey: ['jellyseerr', 'discover', slide.type, slide.id],
+    queryFn: async () => {
+      return jellyseerrApi?.getGenreSliders(
+        slide.type == DiscoverSliderType.MOVIE_GENRES
+          ? Endpoints.MOVIE
+          : Endpoints.TV
+      )
+    },
+    enabled: !!jellyseerrApi
+  })
+
+  return (
+    data && <Slide
+      {...props}
+      slide={slide}
+      data={data}
+      keyExtractor={(item) => item.id.toString()}
+      renderItem={(item, index) => (
+        <TouchableOpacity className="mr-2" onPress={() => navigate(item)}>
+          <GenericSlideCard
+            className="w-28 rounded-lg overflow-hidden border border-neutral-900"
+            id={item.id.toString()}
+            title={item.name}
+            colors={[]}
+            contentFit={"cover"}
+            url={jellyseerrApi?.imageProxy(item.backdrops?.[0], `w780_filter(duotone,${genreColorMap[item.id] ?? genreColorMap[0]})`)}
+          />
+        </TouchableOpacity>
+      )}
+    />
+  );
+};
+
+export default GenreSlide;
--- a/components/jellyseerr/discover/MovieTvSlide.tsx
+++ b/components/jellyseerr/discover/MovieTvSlide.tsx
@@ -1,5 +1,4 @@
-import React, { useMemo } from "react";
-import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import React, {useMemo} from "react";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import {
  DiscoverEndpoint,
@@ -9,17 +8,13 @@ import {
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { Text } from "@/components/common/Text";
-import { FlashList } from "@shopify/flash-list";
-import { View } from "react-native";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import {ViewProps} from "react-native";

-interface Props {
-  slide: DiscoverSlider;
-}
-const DiscoverSlide: React.FC<Props> = ({ slide }) => {
+const MovieTvSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
  const { jellyseerrApi } = useJellyseerr();

-  const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
+  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
    queryKey: ["jellyseerr", "discover", slide.id],
    queryFn: async ({ pageParam }) => {
      let endpoint: DiscoverEndpoint | undefined = undefined;
@@ -62,42 +57,28 @@ const DiscoverSlide: React.FC<Props> = ({ slide }) => {
  });

  const flatData = useMemo(
-    () =>
-      data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results),
+    () => data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results),
    [data]
  );

  return (
    flatData &&
    flatData?.length > 0 && (
-      <View className="mb-4">
-        <Text className="font-bold text-lg mb-2 px-4">
-          {DiscoverSliderType[slide.type].toString().toTitle()}
-        </Text>
-        <FlashList
-          horizontal
-          contentContainerStyle={{
-            paddingLeft: 16,
-          }}
-          showsHorizontalScrollIndicator={false}
-          keyExtractor={(item) => item!!.id.toString()}
-          estimatedItemSize={250}
-          data={flatData}
-          onEndReachedThreshold={1}
-          onEndReached={() => {
-            if (hasNextPage) fetchNextPage();
-          }}
-          renderItem={({ item }) =>
-            item ? (
-              <JellyseerrPoster item={item as MovieResult | TvResult} />
-            ) : (
-              <></>
-            )
-          }
-        />
-      </View>
+      <Slide
+        {...props}
+        slide={slide}
+        data={flatData}
+        keyExtractor={(item) => item!!.id.toString()}
+        onEndReached={() => {
+          if (hasNextPage)
+            fetchNextPage()
+        }}
+        renderItem={(item) =>
+          <JellyseerrPoster item={item as MovieResult | TvResult} />
+      }
+      />
    )
  );
 };

-export default DiscoverSlide;
+export default MovieTvSlide;
--- a/components/jellyseerr/discover/Slide.tsx
+++ b/components/jellyseerr/discover/Slide.tsx
@@ -0,0 +1,55 @@
+import React, {PropsWithChildren} from "react";
+import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
+import { Text } from "@/components/common/Text";
+import { FlashList } from "@shopify/flash-list";
+import {View, ViewProps} from "react-native";
+
+export interface SlideProps {
+  slide: DiscoverSlider;
+}
+
+interface Props<T> extends SlideProps {
+  data: T[]
+  renderItem: (item: T, index: number) =>
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
+  keyExtractor: (item: T) => string;
+  onEndReached?: (() => void) | null | undefined;
+}
+
+const Slide = <T extends unknown>({
+  data,
+  slide,
+  renderItem,
+  keyExtractor,
+  onEndReached,
+  ...props
+}: PropsWithChildren<Props<T> & ViewProps>
+) => {
+  return (
+    <View {...props}>
+      <Text className="font-bold text-lg mb-2 px-4">
+        {DiscoverSliderType[slide.type].toString().toTitle()}
+      </Text>
+      <FlashList
+        horizontal
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+        }}
+        showsHorizontalScrollIndicator={false}
+        keyExtractor={keyExtractor}
+        estimatedItemSize={250}
+        data={data}
+        onEndReachedThreshold={1}
+        onEndReached={onEndReached}
+        //@ts-ignore
+        renderItem={({item, index}) => item ? renderItem(item, index) : <></>}
+      />
+    </View>
+  );
+};
+
+export default Slide;
--- a/components/posters/JellyseerrPoster.tsx
+++ b/components/posters/JellyseerrPoster.tsx
@@ -1,55 +1,63 @@
-import {View, ViewProps} from "react-native";
-import {Image} from "expo-image";
-import {MaterialCommunityIcons} from "@expo/vector-icons";
-import {Text} from "@/components/common/Text";
-import {useEffect, useMemo, useState} from "react";
-import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {MediaStatus, MediaType} from "@/utils/jellyseerr/server/constants/media";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
-import {TouchableJellyseerrRouter} from "@/components/common/JellyseerrItemRouter";
-import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
+import { TouchableJellyseerrRouter } from "@/components/common/JellyseerrItemRouter";
+import { Text } from "@/components/common/Text";
+import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
+import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { Image } from "expo-image";
+import { useMemo } from "react";
+import { View, ViewProps } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
 interface Props extends ViewProps {
  item: MovieResult | TvResult;
 }

-const JellyseerrPoster: React.FC<Props> = ({
-  item,
-  ...props
-}) => {
-  const {jellyseerrUser, jellyseerrApi} = useJellyseerr();
-  // const imageSource =
+const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
+  const { jellyseerrApi } = useJellyseerr();
+  const loadingOpacity = useSharedValue(1);
+  const imageOpacity = useSharedValue(0);

-  const imageSrc = useMemo(() =>
-      item.posterPath ?
-        `https://image.tmdb.org/t/p/w300_and_h450_face${item.posterPath}`
-        : jellyseerrApi?.axios?.defaults.baseURL + `/images/overseerr_poster_not_found_logo_top.png`,
+  const loadingAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: loadingOpacity.value,
+  }));
+
+  const imageAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: imageOpacity.value,
+  }));
+
+  const handleImageLoad = () => {
+    loadingOpacity.value = withTiming(0, { duration: 200 });
+    imageOpacity.value = withTiming(1, { duration: 300 });
+  };
+
+  const imageSrc = useMemo(
+    () => jellyseerrApi?.imageProxy(item.posterPath, "w300_and_h450_face"),
    [item, jellyseerrApi]
-  )
-  const title = useMemo(() => item.mediaType === MediaType.MOVIE ? item.title : item.name, [item])
-  const releaseYear = useMemo(() =>
-    new Date(item.mediaType === MediaType.MOVIE ? item.releaseDate : item.firstAirDate).getFullYear(),
+  );
+
+  const title = useMemo(
+    () => (item.mediaType === MediaType.MOVIE ? item.title : item.name),
    [item]
-  )
+  );

-  const showRequestButton = useMemo(() =>
-    jellyseerrUser && hasPermission(
-      [
-        Permission.REQUEST,
-        item.mediaType === 'movie'
-          ? Permission.REQUEST_MOVIE
-          : Permission.REQUEST_TV,
-      ],
-      jellyseerrUser.permissions,
-      {type: 'or'}
-    ),
-    [item, jellyseerrUser]
-  )
+  const releaseYear = useMemo(
+    () =>
+      new Date(
+        item.mediaType === MediaType.MOVIE
+          ? item.releaseDate
+          : item.firstAirDate
+      ).getFullYear(),
+    [item]
+  );

-  const canRequest = useMemo(() => {
-    const status = item?.mediaInfo?.status
-    return showRequestButton && !status || status === MediaStatus.UNKNOWN
-  }, [item])
+  const canRequest = useJellyseerrCanRequest(item);

  return (
    <TouchableJellyseerrRouter
@@ -57,36 +65,41 @@ const JellyseerrPoster: React.FC<Props> = ({
      mediaTitle={title}
      releaseYear={releaseYear}
      canRequest={canRequest}
-      posterSrc={imageSrc}
+      posterSrc={imageSrc!!}
    >
      <View className="flex flex-col w-28 mr-2">
        <View className="relative rounded-lg overflow-hidden border border-neutral-900 w-28 aspect-[10/15]">
-          <Image
-            key={item.id}
-            id={item.id.toString()}
-            source={{uri: imageSrc}}
-            cachePolicy={"memory-disk"}
-            contentFit="cover"
-            style={{
-              aspectRatio: "10/15",
-              width: "100%",
-            }}
-          />
-          <JellyseerrIconStatus
+          <Animated.View style={imageAnimatedStyle}>
+            <Image
+              key={item.id}
+              id={item.id.toString()}
+              source={{ uri: imageSrc }}
+              cachePolicy={"memory-disk"}
+              contentFit="cover"
+              style={{
+                aspectRatio: "10/15",
+                width: "100%",
+              }}
+              onLoad={handleImageLoad}
+            />
+          </Animated.View>
+          <JellyseerrStatusIcon
            className="absolute bottom-1 right-1"
            showRequestIcon={canRequest}
            mediaStatus={item?.mediaInfo?.status}
          />
-
+          <JellyseerrMediaIcon
+            className="absolute top-1 left-1"
+            mediaType={item?.mediaType}
+          />
        </View>
        <View className="mt-2 flex flex-col">
          <Text numberOfLines={2}>{title}</Text>
-          <Text className="text-xs opacity-50">{releaseYear}</Text>
+          <Text className="text-xs opacity-50 align-bottom">{releaseYear}</Text>
        </View>
      </View>
    </TouchableJellyseerrRouter>
-  )
-}
+  );
+};

-
-export default JellyseerrPoster;
+export default JellyseerrPoster;
--- a/components/posters/Poster.tsx
+++ b/components/posters/Poster.tsx
@@ -1,19 +1,15 @@
-import {
-  BaseItemDto,
-  BaseItemPerson,
-} from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { View } from "react-native";

 type PosterProps = {
-  item?: BaseItemDto | BaseItemPerson | null;
+  id?: string | null;
  url?: string | null;
  showProgress?: boolean;
  blurhash?: string | null;
 };

-const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
-  if (!item)
+const Poster: React.FC<PosterProps> = ({ id, url, blurhash }) => {
+  if (!id && !url)
    return (
      <View
        className="border border-neutral-900"
@@ -33,8 +29,8 @@ const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
              }
            : null
        }
-        key={item.Id}
-        id={item.Id}
+        key={id}
+        id={id!!}
        source={
          url
            ? {
--- a/components/search/LoadingSkeleton.tsx
+++ b/components/search/LoadingSkeleton.tsx
@@ -0,0 +1,66 @@
+import { View } from "react-native";
+import { Text } from "../common/Text";
+import Animated, {
+  useAnimatedStyle,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+
+interface Props {
+  isLoading: boolean;
+}
+
+export const LoadingSkeleton: React.FC<Props> = ({ isLoading }) => {
+  const opacity = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  useAnimatedReaction(
+    () => isLoading,
+    (loading) => {
+      if (loading) {
+        opacity.value = withTiming(1, { duration: 200 });
+      } else {
+        opacity.value = withTiming(0, { duration: 200 });
+      }
+    }
+  );
+
+  return (
+    <Animated.View style={animatedStyle} className="mt-2 absolute w-full">
+      {[1, 2, 3].map((s) => (
+        <View className="px-4 mb-4" key={s}>
+          <View className="w-1/2 bg-neutral-900 h-6 mb-2 rounded-lg"></View>
+          <View className="flex flex-row gap-2">
+            {[1, 2, 3].map((i) => (
+              <View className="w-28" key={i}>
+                <View className="bg-neutral-900 h-40 w-full rounded-md mb-1"></View>
+                <View className="rounded-md overflow-hidden mb-1 self-start">
+                  <Text
+                    className="text-neutral-900 bg-neutral-900 rounded-md"
+                    numberOfLines={1}
+                  >
+                    Nisi mollit voluptate amet.
+                  </Text>
+                </View>
+                <View className="rounded-md overflow-hidden self-start mb-1">
+                  <Text
+                    className="text-neutral-900 bg-neutral-900 text-xs rounded-md"
+                    numberOfLines={1}
+                  >
+                    Lorem ipsum
+                  </Text>
+                </View>
+              </View>
+            ))}
+          </View>
+        </View>
+      ))}
+    </Animated.View>
+  );
+};
--- a/components/search/SearchItemWrapper.tsx
+++ b/components/search/SearchItemWrapper.tsx
@@ -0,0 +1,70 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { PropsWithChildren } from "react";
+import { ScrollView } from "react-native";
+import { Text } from "../common/Text";
+
+type SearchItemWrapperProps<T> = {
+  ids?: string[] | null;
+  items?: T[];
+  renderItem: (item: any) => React.ReactNode;
+  header?: string;
+};
+
+export const SearchItemWrapper = <T extends unknown>({
+  ids,
+  items,
+  renderItem,
+  header,
+}: PropsWithChildren<SearchItemWrapperProps<T>>) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+
+  const { data, isLoading: l1 } = useQuery({
+    queryKey: ["items", ids],
+    queryFn: async () => {
+      if (!user?.Id || !api || !ids || ids.length === 0) {
+        return [];
+      }
+
+      const itemPromises = ids.map((id) =>
+        getUserItemData({
+          api,
+          userId: user.Id,
+          itemId: id,
+        })
+      );
+
+      const results = await Promise.all(itemPromises);
+
+      // Filter out null items
+      return results.filter(
+        (item) => item !== null
+      ) as unknown as BaseItemDto[];
+    },
+    enabled: !!ids && ids.length > 0 && !!api && !!user?.Id,
+    staleTime: Infinity,
+  });
+
+  if (!data && (!items || items.length === 0)) return null;
+
+  return (
+    <>
+      <Text className="font-bold text-lg px-4 mb-2">{header}</Text>
+      <ScrollView
+        horizontal
+        className="px-4 mb-2"
+        showsHorizontalScrollIndicator={false}
+      >
+        {data && data?.length > 0
+          ? data.map((item) => renderItem(item))
+          : items && items?.length > 0
+          ? items.map((i) => renderItem(i))
+          : undefined}
+      </ScrollView>
+    </>
+  );
+};
--- a/components/series/CastAndCrew.tsx
+++ b/components/series/CastAndCrew.tsx
@@ -57,7 +57,7 @@ export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
            }}
            className="flex flex-col w-28"
          >
-            <Poster item={i} url={getPrimaryImageUrl({ api, item: i })} />
+            <Poster id={i.id} url={getPrimaryImageUrl({ api, item: i })} />
            <Text className="mt-2">{i.Name}</Text>
            <Text className="text-xs opacity-50">{i.Role}</Text>
          </TouchableOpacity>
--- a/components/series/CurrentSeries.tsx
+++ b/components/series/CurrentSeries.tsx
@@ -31,7 +31,7 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
            className="flex flex-col space-y-2 w-28"
          >
            <Poster
-              item={item}
+              id={item.id}
              url={getPrimaryImageUrlById({ api, id: item.ParentId })}
            />
            <Text>{item.SeriesName}</Text>
--- a/components/series/JellyseerrSeasons.tsx
+++ b/components/series/JellyseerrSeasons.tsx
@@ -5,7 +5,7 @@ import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import { FlashList } from "@shopify/flash-list";
 import { orderBy } from "lodash";
 import { Tags } from "@/components/GenreTags";
-import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
+import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
 import Season from "@/utils/jellyseerr/server/entity/Season";
 import {
  MediaStatus,
@@ -62,7 +62,7 @@ const RenderItem = ({ item, index }: any) => {
            key={item.id}
            id={item.id}
            source={{
-              uri: jellyseerrApi?.tvStillImageProxy(item.stillPath),
+              uri: jellyseerrApi?.imageProxy(item.stillPath),
            }}
            cachePolicy={"memory-disk"}
            contentFit="cover"
@@ -247,7 +247,7 @@ const JellyseerrSeasons: React.FC<{
                  seasons?.find((s) => s.seasonNumber === season.seasonNumber)
                    ?.status === MediaStatus.UNKNOWN;
                return (
-                  <JellyseerrIconStatus
+                  <JellyseerrStatusIcon
                    key={0}
                    onPress={() => requestSeason(canRequest, season.seasonNumber)}
                    className={canRequest ? "bg-gray-700/40" : undefined}
--- a/components/series/SeriesActions.tsx
+++ b/components/series/SeriesActions.tsx
@@ -1,24 +1,45 @@
+import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
 import { useCallback, useMemo } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import {
+  Alert,
+  Linking,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";

 interface Props extends ViewProps {
-  item: BaseItemDto;
+  item: BaseItemDto | MovieDetails | TvDetails;
 }

 export const ItemActions = ({ item, ...props }: Props) => {
-  const router = useRouter();
+  const trailerLink = useMemo(() => {
+    if ("RemoteTrailers" in item && item.RemoteTrailers?.[0]?.Url) {
+      return item.RemoteTrailers[0].Url;
+    }

-  const trailerLink = useMemo(() => item.RemoteTrailers?.[0]?.Url, [item]);
+    if ("relatedVideos" in item) {
+      return item.relatedVideos?.find((v) => v.type === "Trailer")?.url;
+    }
+
+    return undefined;
+  }, [item]);

  const openTrailer = useCallback(async () => {
-    if (!trailerLink) return;
+    if (!trailerLink) {
+      Alert.alert("No trailer available");
+      return;
+    }

-    const encodedTrailerLink = encodeURIComponent(trailerLink);
-    router.push(`/trailer/page?url=${encodedTrailerLink}`);
-  }, [router, trailerLink]);
+    try {
+      await Linking.openURL(trailerLink);
+    } catch (err) {
+      console.error("Failed to open trailer link:", err);
+    }
+  }, [trailerLink]);

  return (
    <View className="" {...props}>
--- a/components/settings/OtherSettings.tsx
+++ b/components/settings/OtherSettings.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/utils/background-tasks";
 import { Ionicons } from "@expo/vector-icons";
 import * as BackgroundFetch from "expo-background-fetch";
+import { useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as TaskManager from "expo-task-manager";
 import React, { useEffect } from "react";
@@ -20,6 +21,7 @@ import { useTranslation } from "react-i18next";
 interface Props extends ViewProps {}

 export const OtherSettings: React.FC = () => {
+  const router = useRouter();
  const [settings, updateSettings] = useSettings();

  const { t } = useTranslation();
@@ -57,7 +59,7 @@ export const OtherSettings: React.FC = () => {
  if (!settings) return null;

  return (
-    <ListGroup title={t("home.settings.other.other_title")} className="mb-4">
+    <ListGroup title={t("home.settings.other.other_title")} className="">
      <ListItem title={t("home.settings.other.auto_rotate")}>
        <Switch
          value={settings.autoRotate}
@@ -181,7 +183,11 @@ export const OtherSettings: React.FC = () => {
          }
        />
      </ListItem>
-
+      <ListItem
+        onPress={() => router.push("/settings/hide-libraries/page")}
+        title="Hide Libraries"
+        showArrow
+      />
      <ListItem title="Disable Haptic Feedback">
        <Switch
          value={settings.disableHapticFeedback}
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
 import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { useTrickplay } from "@/hooks/useTrickplay";
 import {
@@ -29,12 +29,18 @@ import {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import { useHaptic } from "@/hooks/useHaptic";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useRouter } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import { debounce } from "lodash";
-import { Dimensions, Pressable, TouchableOpacity, View } from "react-native";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Pressable,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
  runOnJS,
@@ -42,10 +48,7 @@ import {
  useAnimatedReaction,
  useSharedValue,
 } from "react-native-reanimated";
-import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { VideoRef } from "react-native-video";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
@@ -118,6 +121,7 @@ export const Controls: React.FC<Props> = ({
  const insets = useSafeAreaInsets();
  const [api] = useAtom(apiAtom);

+  const { height: screenHeight, width: screenWidth } = useWindowDimensions();
  const { previousItem, nextItem } = useAdjacentItems({ item });
  const {
    trickPlayUrl,
@@ -505,9 +509,13 @@ export const Controls: React.FC<Props> = ({
            }}
            style={{
              position: "absolute",
-              width: Dimensions.get("window").width,
-              height: Dimensions.get("window").height,
+              width: screenWidth,
+              height: screenHeight,
              backgroundColor: "black",
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
              opacity: showControls ? 0.5 : 0,
            }}
          ></Pressable>
@@ -519,8 +527,8 @@ export const Controls: React.FC<Props> = ({
                top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
                right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
                width: settings?.safeAreaInControlsEnabled
-                  ? Dimensions.get("window").width - insets.left - insets.right
-                  : Dimensions.get("window").width,
+                  ? screenWidth - insets.left - insets.right
+                  : screenWidth,
                opacity: showControls ? 1 : 0,
              },
            ]}
@@ -572,21 +580,24 @@ export const Controls: React.FC<Props> = ({
                </TouchableOpacity>
              )}

-              {mediaSource?.TranscodingUrl && (
-                <TouchableOpacity
-                  onPress={toggleIgnoreSafeAreas}
-                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-                >
-                  <Ionicons
-                    name={ignoreSafeAreas ? "contract-outline" : "expand"}
-                    size={24}
-                    color="white"
-                  />
-                </TouchableOpacity>
-              )}
+              {/* {mediaSource?.TranscodingUrl && ( */}
+              <TouchableOpacity
+                onPress={toggleIgnoreSafeAreas}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons
+                  name={ignoreSafeAreas ? "contract-outline" : "expand"}
+                  size={24}
+                  color="white"
+                />
+              </TouchableOpacity>
+              {/* )} */}
              <TouchableOpacity
                onPress={async () => {
                  lightHapticFeedback();
+                  await ScreenOrientation.lockAsync(
+                    ScreenOrientation.OrientationLock.PORTRAIT_UP
+                  );
                  router.back();
                }}
                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"