[Jellyseerr] Show genre/studio/network discover sliders

implements #326
feat: fade in images
2025-01-06 14:25:14 -05:00 · 2025-01-06 17:38:59 +01:00 · 2025-01-06 17:33:49 +01:00 · 2025-01-06 17:33:27 +01:00 · 2025-01-06 10:14:27 +01:00 · 2025-01-06 10:14:17 +01:00
57 changed files with 1733 additions and 661 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -4,9 +4,7 @@ title: "[Bug]: "
 labels:
  - ["❌ bug"]
 projects:
-  - ["fredrikburmester/5"]
-assignees:
-  - fredrikburmester
+  - ["streamyfin/3"]

 body:
  - type: textarea
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,8 @@ about: Suggest an idea for this project
 title: ''
 labels: '✨ enhancement'
 assignees: ''
-
+projects:
+ - streamyfin/3
 ---

 **Describe the solution you'd like**
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
  <img width=150 src="./assets/images/screenshots/screenshot1.png" />
  <img width=150 src="./assets/images/screenshots/screenshot3.png" />
  <img width=150 src="./assets/images/screenshots/screenshot2.png" />
-  
+  <img width=150 src="./assets/images/jellyseerr.PNG"/>
 </div>

 ## 🌟 Features
--- a/app.json
+++ b/app.json
@@ -111,7 +111,8 @@
        { "android": { "parentTheme": "Material3" } }
      ],
      ["react-native-bottom-tabs"],
-      ["./plugins/withChangeNativeAndroidTextToWhite.js"]
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"],
+      ["./plugins/withGoogleCastActivity.js"]
    ],
    "experiments": {
      "typedRoutes": true
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -83,6 +83,14 @@ export default function IndexLayout() {
          title: "",
        }}
      />
+      <Stack.Screen
+        name="intro/page"
+        options={{
+          headerShown: false,
+          title: "",
+          presentation: "modal",
+        }}
+      />
      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
        <Stack.Screen key={name} name={name} options={options} />
      ))}
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -23,7 +23,7 @@ import {
  getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import NetInfo from "@react-native-community/netinfo";
-import { QueryFunction, useQuery, useQueryClient } from "@tanstack/react-query";
+import { QueryFunction, useQuery } from "@tanstack/react-query";
 import { useNavigation, useRouter } from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -116,7 +116,7 @@ export default function index() {
  }, []);

  const {
-    data: userViews,
+    data,
    isError: e1,
    isLoading: l1,
  } = useQuery({
@@ -136,6 +136,11 @@ export default function index() {
    staleTime: 60 * 1000,
  });

+  const userViews = useMemo(
+    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
+    [data, settings?.hiddenLibraries]
+  );
+
  const {
    data: mediaListCollections,
    isError: e2,
--- a/app/(auth)/(tabs)/(home)/intro/page.tsx
+++ b/app/(auth)/(tabs)/(home)/intro/page.tsx
@@ -0,0 +1,109 @@
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { storage } from "@/utils/mmkv";
+import { Feather, Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { useFocusEffect, useRouter } from "expo-router";
+import { useCallback } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+export default function page() {
+  const router = useRouter();
+
+  useFocusEffect(
+    useCallback(() => {
+      storage.set("hasShownIntro", true);
+    }, [])
+  );
+
+  return (
+    <View className="bg-neutral-900 h-full py-32 px-4 space-y-4">
+      <View>
+        <Text className="text-3xl font-bold text-center mb-2">
+          Welcome to Streamyfin
+        </Text>
+        <Text className="text-center">
+          A free and open source client for Jellyfin.
+        </Text>
+      </View>
+
+      <View>
+        <Text className="text-lg font-bold">Features</Text>
+        <Text className="text-xs">
+          Streamyfin has a bunch of features and integrates with a wide array of
+          software which you can find in the settings menu, these include:
+        </Text>
+        <View className="flex flex-row items-center mt-4">
+          <Image
+            source={require("@/assets/icons/jellyseerr-logo.svg")}
+            style={{
+              width: 50,
+              height: 50,
+            }}
+          />
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Jellyseerr</Text>
+            <Text className="shrink text-xs">
+              Connect to your Jellyseerr instance and request movies directly in
+              the app.
+            </Text>
+          </View>
+        </View>
+        <View className="flex flex-row items-center mt-4">
+          <View
+            style={{
+              width: 50,
+              height: 50,
+            }}
+            className="flex items-center justify-center"
+          >
+            <Ionicons name="cloud-download-outline" size={32} color="white" />
+          </View>
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Downloads</Text>
+            <Text className="shrink text-xs">
+              Download movies and tv-shows to view offline. Use either the
+              default method or install the optimize server to download files in
+              the background.
+            </Text>
+          </View>
+        </View>
+        <View className="flex flex-row items-center mt-4">
+          <View
+            style={{
+              width: 50,
+              height: 50,
+            }}
+            className="flex items-center justify-center"
+          >
+            <Feather name="cast" size={28} color={"white"} />
+          </View>
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Chromecast</Text>
+            <Text className="shrink text-xs">
+              Cast movies and tv-shows to your Chromecast devices.
+            </Text>
+          </View>
+        </View>
+      </View>
+
+      <Button
+        onPress={() => {
+          router.back();
+        }}
+        className="mt-4"
+      >
+        Done
+      </Button>
+      <TouchableOpacity
+        onPress={() => {
+          router.back();
+          router.push("/settings");
+        }}
+        className="mt-4"
+      >
+        <Text className="text-purple-600 text-center">Go to settings</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -13,20 +13,22 @@ import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
 import { useJellyfin } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useNavigation, useRouter } from "expo-router";
 import { useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { storage } from "@/utils/mmkv";

 export default function settings() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const { logout } = useJellyfin();
+  const successHapticFeedback = useHaptic("success");

  const onClearLogsClicked = async () => {
    clearLogs();
-    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    successHapticFeedback();
  };

  const navigation = useNavigation();
@@ -66,6 +68,22 @@ export default function settings() {

        <PluginSettings />

+        <ListGroup title={"Intro"}>
+          <ListItem
+            onPress={() => {
+              router.push("/intro/page");
+            }}
+            title={"Show intro"}
+          />
+          <ListItem
+            textColor="red"
+            onPress={() => {
+              storage.set("hasShownIntro", false);
+            }}
+            title={"Reset intro"}
+          />
+        </ListGroup>
+
        <View className="mb-4">
          <ListGroup title={"Logs"}>
            <ListItem
--- a/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
@@ -53,7 +53,8 @@ export default function page() {
        ))}
      </ListGroup>
      <Text className="px-4 text-xs text-neutral-500 mt-1">
-        Select the libraries you want to hide from the Library tab.
+        Select the libraries you want to hide from the Library tab and home page
+        sections.
      </Text>
    </View>
  );
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/[personId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/[personId].tsx
@@ -1,247 +0,0 @@
-import {
-  router,
-  useLocalSearchParams,
-  useNavigation,
-  useSegments,
-} from "expo-router";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { TouchableOpacity, View } from "react-native";
-import { useQuery } from "@tanstack/react-query";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-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 { Image } from "expo-image";
-import { OverviewText } from "@/components/OverviewText";
-import { orderBy } from "lodash";
-import { FlashList } from "@shopify/flash-list";
-import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
-import Poster from "@/components/posters/Poster";
-import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
-
-const ANIMATION_ENTER = 250;
-const ANIMATION_EXIT = 250;
-const BACKDROP_DURATION = 5000;
-
-export default function page() {
-  const insets = useSafeAreaInsets();
-  const local = useLocalSearchParams();
-  const segments = useSegments();
-  const { jellyseerrApi, jellyseerrUser } = useJellyseerr();
-
-  const { personId } = local as { personId: string };
-  const from = segments[2];
-
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-
-  const { data, isLoading, isFetching } = useQuery({
-    queryKey: ["jellyseerr", "person", personId],
-    queryFn: async () => ({
-      details: await jellyseerrApi?.personDetails(personId),
-      combinedCredits: await jellyseerrApi?.personCombinedCredits(personId),
-    }),
-    enabled: !!jellyseerrApi && !!personId,
-  });
-
-  const locale = useMemo(() => {
-    return jellyseerrUser?.settings?.locale || "en";
-  }, [jellyseerrUser]);
-
-  const region = useMemo(
-    () => jellyseerrUser?.settings?.region || "US",
-    [jellyseerrUser]
-  );
-
-  const castedRoles: PersonCreditCast[] = useMemo(
-    () =>
-      orderBy(
-        data?.combinedCredits?.cast,
-        ["voteCount", "voteAverage"],
-        "desc"
-      ),
-    [data?.combinedCredits]
-  );
-
-  const backdrops = useMemo(
-    () => castedRoles.map((c) => c.backdropPath),
-    [data?.combinedCredits]
-  );
-
-  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 (backdrops?.length) {
-      enterAnimation().start();
-      const intervalId = setInterval(() => {
-        exitAnimation().start((end) => {
-          if (end.finished)
-            setCurrentIndex((prevIndex) => (prevIndex + 1) % backdrops?.length);
-        });
-      }, BACKDROP_DURATION);
-
-      return () => clearInterval(intervalId);
-    }
-  }, [backdrops, enterAnimation, exitAnimation, setCurrentIndex, currentIndex]);
-
-  const viewDetails = (credit: PersonCreditCast) => {
-    router.push({
-      //@ts-ignore
-      pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-      //@ts-ignore
-      params: {
-        ...credit,
-        mediaTitle: credit.title,
-        releaseYear: new Date(credit.releaseDate).getFullYear(),
-        canRequest: "false",
-        posterSrc: jellyseerrApi?.imageProxy(
-          credit.posterPath,
-          "w300_and_h450_face"
-        ),
-      },
-    });
-  };
-
-  return (
-    <View
-      className="flex-1 relative"
-      style={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-    >
-      <ParallaxScrollView
-        className="flex-1 opacity-100"
-        headerHeight={300}
-        headerImage={
-          <Animated.Image
-            source={{
-              uri: jellyseerrApi?.imageProxy(
-                backdrops?.[currentIndex],
-                "w1920_and_h800_multi_faces"
-              ),
-            }}
-            style={{
-              width: "100%",
-              height: "100%",
-              opacity: fadeAnim,
-            }}
-          />
-        }
-        logo={
-          <Image
-            key={data?.details?.id}
-            id={data?.details?.id.toString()}
-            className="rounded-full bottom-1"
-            source={{
-              uri: jellyseerrApi?.imageProxy(
-                data?.details?.profilePath,
-                "w600_and_h600_bestv2"
-              ),
-            }}
-            cachePolicy={"memory-disk"}
-            contentFit="cover"
-            style={{
-              width: 125,
-              height: 125,
-            }}
-          />
-        }
-      >
-        <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">
-              <Text className="font-bold text-2xl mb-1">
-                {data?.details?.name}
-              </Text>
-              <Text className="opacity-50">
-                Born{" "}
-                {new Date(data?.details?.birthday!!).toLocaleDateString(
-                  `${locale}-${region}`,
-                  {
-                    year: "numeric",
-                    month: "long",
-                    day: "numeric",
-                  }
-                )}{" "}
-                | {data?.details?.placeOfBirth}
-              </Text>
-            </View>
-          </View>
-          <OverviewText text={data?.details?.biography} className="mt-4" />
-
-          <View>
-            <FlashList
-              data={castedRoles}
-              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">Appearances</Text>
-              }
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  className="w-full flex flex-col pr-2"
-                  onPress={() => viewDetails(item)}
-                >
-                  <Poster
-                    id={item.id.toString()}
-                    url={jellyseerrApi?.imageProxy(item.posterPath)}
-                  />
-                  <JellyseerrMediaIcon
-                    className="absolute top-1 left-1"
-                    mediaType={item.mediaType as "movie" | "tv"}
-                  />
-                  {/*<Text numberOfLines={1}>{item.title}</Text>*/}
-                  {item.character && (
-                    <Text
-                      className="text-xs opacity-50 align-bottom mt-1"
-                      numberOfLines={1}
-                    >
-                      as {item.character}
-                    </Text>
-                  )}
-                </TouchableOpacity>
-              )}
-              keyExtractor={(item) => item.id.toString()}
-              estimatedItemSize={255}
-              numColumns={3}
-              contentContainerStyle={{ paddingBottom: 24 }}
-              ItemSeparatorComponent={() => <View className="h-2 w-2" />}
-            />
-          </View>
-        </View>
-      </ParallaxScrollView>
-    </View>
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/company/[companyId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/company/[companyId].tsx
@@ -0,0 +1,136 @@
+import {router, useLocalSearchParams, useSegments,} from "expo-router";
+import React, {useMemo,} from "react";
+import {TouchableOpacity} from "react-native";
+import {useInfiniteQuery} from "@tanstack/react-query";
+import {Endpoints, useJellyseerr} from "@/hooks/useJellyseerr";
+import {Text} from "@/components/common/Text";
+import {Image} from "expo-image";
+import Poster from "@/components/posters/Poster";
+import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
+import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import {COMPANY_LOGO_IMAGE_FILTER} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
+import {uniqBy} from "lodash";
+
+export default function page() {
+  const local = useLocalSearchParams();
+  const segments = useSegments();
+  const {jellyseerrApi} = useJellyseerr();
+
+  const from = segments[2];
+  const {companyId, name, image, type} = local as unknown as {
+    companyId: string,
+    name: string,
+    image: string,
+    type: DiscoverSliderType
+  };
+
+  const {data, fetchNextPage, hasNextPage} = useInfiniteQuery({
+    queryKey: ["jellyseerr", "company", type, companyId],
+    queryFn: async ({pageParam}) => {
+      let params: any = {
+        page: Number(pageParam),
+      };
+
+      return jellyseerrApi?.discover(
+       (
+         type == DiscoverSliderType.NETWORKS
+           ? Endpoints.DISCOVER_TV_NETWORK
+           : Endpoints.DISCOVER_MOVIES_STUDIO
+       ) + `/${companyId}`,
+        params
+      )
+    },
+    enabled: !!jellyseerrApi && !!companyId,
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, pages) =>
+      (lastPage?.page || pages?.findLast((p) => p?.results.length)?.page || 1) +
+      1,
+    staleTime: 0,
+  });
+
+  const flatData = useMemo(
+    () => uniqBy(data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results ?? []), "id")?? [],
+    [data]
+  );
+
+  const backdrops = useMemo(
+    () => jellyseerrApi
+      ? flatData.map((r) => jellyseerrApi.imageProxy((r as  TvResult | MovieResult).backdropPath, "w1920_and_h800_multi_faces"))
+      : [],
+    [jellyseerrApi, flatData]
+  );
+
+  const viewDetails = (result: Results) => {
+    router.push({
+      //@ts-ignore
+      pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+      //@ts-ignore
+      params: {
+        ...result,
+        mediaTitle: getName(result),
+        releaseYear: getYear(result),
+        canRequest: "false",
+        posterSrc: jellyseerrApi?.imageProxy(
+          (result as MovieResult | TvResult).posterPath,
+          "w300_and_h450_face"
+        ),
+      },
+    });
+  };
+
+  const getName = (result: Results) => {
+    return (result as TvResult).name || (result as MovieResult).title
+  }
+
+  const getYear = (result: Results) => {
+    return new Date((result as TvResult).firstAirDate || (result as MovieResult).releaseDate).getFullYear()
+  }
+
+  return (
+    <ParallaxSlideShow
+      data={flatData}
+      images={backdrops}
+      listHeader=""
+      keyExtractor={(item) => item.id.toString()}
+      onEndReached={() => {
+        if (hasNextPage) {
+          fetchNextPage()
+        }
+      }}
+      logo={
+        <Image
+          id={companyId}
+          key={companyId}
+          className="bottom-1 w-1/2"
+          source={{
+            uri: jellyseerrApi?.imageProxy(image, COMPANY_LOGO_IMAGE_FILTER),
+          }}
+          cachePolicy={"memory-disk"}
+          contentFit="contain"
+          style={{
+            aspectRatio: "4/3",
+          }}
+        />
+      }
+      renderItem={(item, index) => (
+        <TouchableOpacity
+          className="w-full flex flex-col pr-2"
+          onPress={() => viewDetails(item)}
+        >
+          <Poster
+            id={item.id.toString()}
+            url={jellyseerrApi?.imageProxy((item as MovieResult | TvResult).posterPath)}
+          />
+          <JellyseerrMediaIcon
+            className="absolute top-1 left-1"
+            mediaType={item.mediaType as "movie" | "tv"}
+          />
+          <Text className="mt-2" numberOfLines={1}>{getName(item)}</Text>
+          <Text className="text-xs opacity-50">{getYear(item)}</Text>
+        </TouchableOpacity>
+      )}
+    />
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/genre/[genreId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/genre/[genreId].tsx
@@ -0,0 +1,128 @@
+import {router, useLocalSearchParams, useSegments,} from "expo-router";
+import React, {useMemo,} from "react";
+import {TouchableOpacity} from "react-native";
+import {useInfiniteQuery} from "@tanstack/react-query";
+import {Endpoints, useJellyseerr} from "@/hooks/useJellyseerr";
+import {Text} from "@/components/common/Text";
+import Poster from "@/components/posters/Poster";
+import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
+import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import {uniqBy} from "lodash";
+import {textShadowStyle} from "@/components/jellyseerr/discover/GenericSlideCard";
+
+export default function page() {
+  const local = useLocalSearchParams();
+  const segments = useSegments();
+  const {jellyseerrApi} = useJellyseerr();
+
+  const from = segments[2];
+  const {genreId, name, type} = local as unknown as {
+    genreId: string,
+    name: string,
+    type: DiscoverSliderType
+  };
+
+  const {data, fetchNextPage, hasNextPage} = useInfiniteQuery({
+    queryKey: ["jellyseerr", "company", type, genreId],
+    queryFn: async ({pageParam}) => {
+      let params: any = {
+        page: Number(pageParam),
+        genre: genreId
+      };
+
+      return jellyseerrApi?.discover(
+         type == DiscoverSliderType.MOVIE_GENRES
+           ? Endpoints.DISCOVER_MOVIES
+           : Endpoints.DISCOVER_TV,
+        params
+      )
+    },
+    enabled: !!jellyseerrApi && !!genreId,
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, pages) =>
+      (lastPage?.page || pages?.findLast((p) => p?.results.length)?.page || 1) +
+      1,
+    staleTime: 0,
+  });
+
+  const flatData = useMemo(
+    () => uniqBy(data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results ?? []), "id")?? [],
+    [data]
+  );
+
+  const backdrops = useMemo(
+    () => jellyseerrApi
+      ? flatData.map((r) => jellyseerrApi.imageProxy((r as  TvResult | MovieResult).backdropPath, "w1920_and_h800_multi_faces"))
+      : [],
+    [jellyseerrApi, flatData]
+  );
+
+  const viewDetails = (result: Results) => {
+    router.push({
+      //@ts-ignore
+      pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+      //@ts-ignore
+      params: {
+        ...result,
+        mediaTitle: getName(result),
+        releaseYear: getYear(result),
+        canRequest: "false",
+        posterSrc: jellyseerrApi?.imageProxy(
+          (result as MovieResult | TvResult).posterPath,
+          "w300_and_h450_face"
+        ),
+      },
+    });
+  };
+
+  const getName = (result: Results) => {
+    return (result as TvResult).name || (result as MovieResult).title
+  }
+
+  const getYear = (result: Results) => {
+    return new Date((result as TvResult).firstAirDate || (result as MovieResult).releaseDate).getFullYear()
+  }
+
+  return (
+    <ParallaxSlideShow
+      data={flatData}
+      images={backdrops}
+      listHeader=""
+      keyExtractor={(item) => item.id.toString()}
+      onEndReached={() => {
+        if (hasNextPage) {
+          fetchNextPage()
+        }
+      }}
+      logo={
+        <Text
+          className="text-4xl font-bold text-center bottom-1"
+          style={{
+            ...textShadowStyle.shadow,
+            shadowRadius: 10
+          }}>
+          {name}
+        </Text>
+      }
+      renderItem={(item, index) => (
+        <TouchableOpacity
+          className="w-full flex flex-col pr-2"
+          onPress={() => viewDetails(item)}
+        >
+          <Poster
+            id={item.id.toString()}
+            url={jellyseerrApi?.imageProxy((item as MovieResult | TvResult).posterPath)}
+          />
+          <JellyseerrMediaIcon
+            className="absolute top-1 left-1"
+            mediaType={item.mediaType as "movie" | "tv"}
+          />
+          <Text className="mt-2" numberOfLines={1}>{getName(item)}</Text>
+          <Text className="text-xs opacity-50">{getYear(item)}</Text>
+        </TouchableOpacity>
+      )}
+    />
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/person/[personId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/person/[personId].tsx
@@ -0,0 +1,151 @@
+import {
+  router,
+  useLocalSearchParams,
+  useSegments,
+} from "expo-router";
+import React, { useMemo } from "react";
+import { TouchableOpacity } from "react-native";
+import { useQuery } from "@tanstack/react-query";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { Text } from "@/components/common/Text";
+import { Image } from "expo-image";
+import { OverviewText } from "@/components/OverviewText";
+import { orderBy } from "lodash";
+import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import Poster from "@/components/posters/Poster";
+import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
+import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
+
+export default function page() {
+  const local = useLocalSearchParams();
+  const segments = useSegments();
+  const { jellyseerrApi, jellyseerrUser } = useJellyseerr();
+
+  const { personId } = local as { personId: string };
+  const from = segments[2];
+
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ["jellyseerr", "person", personId],
+    queryFn: async () => ({
+      details: await jellyseerrApi?.personDetails(personId),
+      combinedCredits: await jellyseerrApi?.personCombinedCredits(personId),
+    }),
+    enabled: !!jellyseerrApi && !!personId,
+  });
+
+  const locale = useMemo(() => {
+    return jellyseerrUser?.settings?.locale || "en";
+  }, [jellyseerrUser]);
+
+  const region = useMemo(
+    () => jellyseerrUser?.settings?.region || "US",
+    [jellyseerrUser]
+  );
+
+  const castedRoles: PersonCreditCast[] = useMemo(
+    () =>
+      orderBy(
+        data?.combinedCredits?.cast,
+        ["voteCount", "voteAverage"],
+        "desc"
+      ),
+    [data?.combinedCredits]
+  );
+  const backdrops = useMemo(
+    () => jellyseerrApi
+      ? castedRoles.map((c) => jellyseerrApi.imageProxy(c.backdropPath, "w1920_and_h800_multi_faces"))
+      : [],
+    [jellyseerrApi, data?.combinedCredits]
+  );
+
+  const viewDetails = (credit: PersonCreditCast) => {
+    router.push({
+      //@ts-ignore
+      pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+      //@ts-ignore
+      params: {
+        ...credit,
+        mediaTitle: credit.title,
+        releaseYear: new Date(credit.releaseDate).getFullYear(),
+        canRequest: "false",
+        posterSrc: jellyseerrApi?.imageProxy(
+          credit.posterPath,
+          "w300_and_h450_face"
+        ),
+      },
+    });
+  };
+
+  return (
+    <ParallaxSlideShow
+      data={castedRoles}
+      images={backdrops}
+      listHeader="Appearances"
+      keyExtractor={(item) => item.id.toString()}
+      logo={
+        <Image
+          key={data?.details?.id}
+          id={data?.details?.id.toString()}
+          className="rounded-full bottom-1"
+          source={{
+            uri: jellyseerrApi?.imageProxy(
+              data?.details?.profilePath,
+              "w600_and_h600_bestv2"
+            ),
+          }}
+          cachePolicy={"memory-disk"}
+          contentFit="cover"
+          style={{
+            width: 125,
+            height: 125,
+          }}
+        />
+      }
+      HeaderContent={() => (
+        <>
+          <Text className="font-bold text-2xl mb-1">
+            {data?.details?.name}
+          </Text>
+          <Text className="opacity-50">
+            Born{" "}
+            {new Date(data?.details?.birthday!!).toLocaleDateString(
+              `${locale}-${region}`,
+              {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              }
+            )}{" "}
+            | {data?.details?.placeOfBirth}
+          </Text>
+        </>
+      )}
+      MainContent={() => (
+        <OverviewText text={data?.details?.biography} className="mt-4" />
+      )}
+      renderItem={(item, index) => (
+        <TouchableOpacity
+          className="w-full flex flex-col pr-2"
+          onPress={() => viewDetails(item)}
+        >
+          <Poster
+            id={item.id.toString()}
+            url={jellyseerrApi?.imageProxy(item.posterPath)}
+          />
+          <JellyseerrMediaIcon
+            className="absolute top-1 left-1"
+            mediaType={item.mediaType as "movie" | "tv"}
+          />
+          {item.character && (
+            <Text
+              className="text-xs opacity-50 align-bottom mt-1"
+              numberOfLines={1}
+            >
+              as {item.character}
+            </Text>
+          )}
+        </TouchableOpacity>
+      )}
+    />
+  );
+}
--- a/app/(auth)/(tabs)/(search)/_layout.tsx
+++ b/app/(auth)/(tabs)/(search)/_layout.tsx
@@ -36,7 +36,9 @@ export default function SearchLayout() {
        }}
      />
      <Stack.Screen name="jellyseerr/page" options={commonScreenOptions} />
-      <Stack.Screen name="jellyseerr/[personId]" options={commonScreenOptions} />
+      <Stack.Screen name="jellyseerr/person/[personId]" options={commonScreenOptions} />
+      <Stack.Screen name="jellyseerr/company/[companyId]" options={commonScreenOptions} />
+      <Stack.Screen name="jellyseerr/genre/[genreId]" options={commonScreenOptions} />
    </Stack>
  );
 }
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -2,14 +2,17 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
+import { Tag } from "@/components/GenreTags";
 import { ItemCardText } from "@/components/ItemCardText";
-import { Loader } from "@/components/Loader";
+import { JellyserrIndexPage } from "@/components/jellyseerr/JellyseerrIndexPage";
 import AlbumCover from "@/components/posters/AlbumCover";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
+import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
+import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import {
  BaseItemDto,
  BaseItemKind,
@@ -20,7 +23,6 @@ import axios from "axios";
 import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
-  PropsWithChildren,
  useCallback,
  useEffect,
  useLayoutEffect,
@@ -30,19 +32,6 @@ import React, {
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import {
-  MovieResult,
-  PersonResult,
-  TvResult,
-} from "@/utils/jellyseerr/server/models/Search";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { Tag } from "@/components/GenreTags";
-import DiscoverSlide from "@/components/jellyseerr/DiscoverSlide";
-import { sortBy } from "lodash";
-import PersonPoster from "@/components/jellyseerr/PersonPoster";
-import { useReactNavigationQuery } from "@/utils/useReactNavigationQuery";

 type SearchType = "Library" | "Discover";

@@ -155,57 +144,6 @@ export default function search() {
    enabled: searchType === "Library" && debouncedSearch.length > 0,
  });

-  const { data: jellyseerrResults, isFetching: j1 } = useReactNavigationQuery({
-    queryKey: ["search", "jellyseerr", "results", debouncedSearch],
-    queryFn: async () => {
-      const response = await jellyseerrApi?.search({
-        query: new URLSearchParams(debouncedSearch).toString(),
-        page: 1, // todo: maybe rework page & page-size if first results are not enough...
-        language: "en",
-      });
-
-      return response?.results;
-    },
-    enabled:
-      !!jellyseerrApi &&
-      searchType === "Discover" &&
-      debouncedSearch.length > 0,
-  });
-
-  const { data: jellyseerrDiscoverSettings, isFetching: j2 } =
-    useReactNavigationQuery({
-      queryKey: ["search", "jellyseerr", "discoverSettings", debouncedSearch],
-      queryFn: async () => jellyseerrApi?.discoverSettings(),
-      enabled:
-        !!jellyseerrApi &&
-        searchType === "Discover" &&
-        debouncedSearch.length == 0,
-    });
-
-  const jellyseerrMovieResults: MovieResult[] | undefined = useMemo(
-    () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === MediaType.MOVIE
-      ) as MovieResult[],
-    [jellyseerrResults]
-  );
-
-  const jellyseerrTvResults: TvResult[] | undefined = useMemo(
-    () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === MediaType.TV
-      ) as TvResult[],
-    [jellyseerrResults]
-  );
-
-  const jellyseerrPersonResults: PersonResult[] | undefined = useMemo(
-    () =>
-      jellyseerrResults?.filter(
-        (r) => r.mediaType === "person"
-      ) as PersonResult[],
-    [jellyseerrResults]
-  );
-
  const { data: series, isFetching: l2 } = useQuery({
    queryKey: ["search", "series", debouncedSearch],
    queryFn: () =>
@@ -285,25 +223,13 @@ export default function search() {
      episodes?.length ||
      series?.length ||
      collections?.length ||
-      actors?.length ||
-      jellyseerrMovieResults?.length ||
-      jellyseerrTvResults?.length
+      actors?.length
    );
-  }, [
-    artists,
-    episodes,
-    albums,
-    songs,
-    movies,
-    series,
-    collections,
-    actors,
-    jellyseerrResults,
-  ]);
+  }, [artists, episodes, albums, songs, movies, series, collections, actors]);

  const loading = useMemo(() => {
-    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8 || j1 || j2;
-  }, [l1, l2, l3, l4, l5, l6, l7, l8, j1, j2]);
+    return l1 || l2 || l3 || l4 || l5 || l6 || l7 || l8;
+  }, [l1, l2, l3, l4, l5, l6, l7, l8]);

  return (
    <>
@@ -350,15 +276,13 @@ export default function search() {
              </TouchableOpacity>
            </View>
          )}
-          {!!q && (
-            <View className="px-4 flex flex-col space-y-2">
-              <Text className="text-neutral-500 ">
-                Results for <Text className="text-purple-600">{q}</Text>
-              </Text>
-            </View>
-          )}
-          {searchType === "Library" && (
-            <>
+
+          <View className="mt-2">
+            <LoadingSkeleton isLoading={loading} />
+          </View>
+
+          {searchType === "Library" ? (
+            <View className={l1 || l2 ? "opacity-0" : "opacity-100"}>
              <SearchItemWrapper
                header="Movies"
                ids={movies?.map((m) => m.Id!)}
@@ -483,139 +407,39 @@ export default function search() {
                  </TouchableItemRouter>
                )}
              />
-            </>
-          )}
-          {searchType === "Discover" && (
-            <>
-              <SearchItemWrapper
-                header="Request Movies"
-                items={jellyseerrMovieResults}
-                renderItem={(item: MovieResult) => (
-                  <JellyseerrPoster item={item} key={item.id} />
-                )}
-              />
-              <SearchItemWrapper
-                header="Request Series"
-                items={jellyseerrTvResults}
-                renderItem={(item: TvResult) => (
-                  <JellyseerrPoster item={item} key={item.id} />
-                )}
-              />
-              <SearchItemWrapper
-                header="Actors"
-                items={jellyseerrPersonResults}
-                renderItem={(item: PersonResult) => (
-                  <PersonPoster
-                    className="mr-2"
-                    key={item.id}
-                    id={item.id.toString()}
-                    name={item.name}
-                    posterPath={item.profilePath}
-                  />
-                )}
-              />
-            </>
+            </View>
+          ) : (
+            <JellyserrIndexPage searchQuery={debouncedSearch} />
          )}

-          {loading ? (
-            <View className="mt-4 flex justify-center items-center">
-              <Loader />
-            </View>
-          ) : noResults && debouncedSearch.length > 0 ? (
-            <View>
-              <Text className="text-center text-lg font-bold mt-4">
-                No results found for
-              </Text>
-              <Text className="text-xs text-purple-600 text-center">
-                "{debouncedSearch}"
-              </Text>
-            </View>
-          ) : debouncedSearch.length === 0 && searchType === "Library" ? (
-            <View className="mt-4 flex flex-col items-center space-y-2">
-              {exampleSearches.map((e) => (
-                <TouchableOpacity
-                  onPress={() => setSearch(e)}
-                  key={e}
-                  className="mb-2"
-                >
-                  <Text className="text-purple-600">{e}</Text>
-                </TouchableOpacity>
-              ))}
-            </View>
-          ) : debouncedSearch.length === 0 && searchType === "Discover" ? (
-            <View className="flex flex-col">
-              {sortBy?.(
-                jellyseerrDiscoverSettings?.filter((s) => s.enabled),
-                "order"
-              ).map((slide) => (
-                <DiscoverSlide key={slide.id} slide={slide} />
-              ))}
-            </View>
-          ) : null}
+          {searchType === "Library" && (
+            <>
+              {!loading && noResults && debouncedSearch.length > 0 ? (
+                <View>
+                  <Text className="text-center text-lg font-bold mt-4">
+                    No results found for
+                  </Text>
+                  <Text className="text-xs text-purple-600 text-center">
+                    "{debouncedSearch}"
+                  </Text>
+                </View>
+              ) : debouncedSearch.length === 0 ? (
+                <View className="mt-4 flex flex-col items-center space-y-2">
+                  {exampleSearches.map((e) => (
+                    <TouchableOpacity
+                      onPress={() => setSearch(e)}
+                      key={e}
+                      className="mb-2"
+                    >
+                      <Text className="text-purple-600">{e}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              ) : null}
+            </>
+          )}
        </View>
      </ScrollView>
    </>
  );
 }
-
-type Props<T> = {
-  ids?: string[] | null;
-  items?: T[];
-  renderItem: (item: any) => React.ReactNode;
-  header?: string;
-};
-
-const SearchItemWrapper = <T extends unknown>({
-  ids,
-  items,
-  renderItem,
-  header,
-}: PropsWithChildren<Props<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/app/(auth)/(tabs)/_layout.tsx
+++ b/app/(auth)/(tabs)/_layout.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useCallback, useRef } from "react";
 import { Platform } from "react-native";

-import { withLayoutContext } from "expo-router";
+import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";

 import {
  createNativeBottomTabNavigator,
@@ -13,12 +13,13 @@ const { Navigator } = createNativeBottomTabNavigator();
 import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";

 import { Colors } from "@/constants/Colors";
+import { useSettings } from "@/utils/atoms/settings";
+import { storage } from "@/utils/mmkv";
 import type {
  ParamListBase,
  TabNavigationState,
 } from "@react-navigation/native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { useSettings } from "@/utils/atoms/settings";

 export const NativeTabs = withLayoutContext<
  BottomTabNavigationOptions,
@@ -29,6 +30,23 @@ export const NativeTabs = withLayoutContext<

 export default function TabLayout() {
  const [settings] = useSettings();
+  const router = useRouter();
+
+  useFocusEffect(
+    useCallback(() => {
+      const hasShownIntro = storage.getBoolean("hasShownIntro");
+      if (!hasShownIntro) {
+        const timer = setTimeout(() => {
+          router.push("/intro/page");
+        }, 1000);
+
+        return () => {
+          clearTimeout(timer);
+        };
+      }
+    }, [])
+  );
+
  return (
    <>
      <SystemBars hidden={false} style="light" />
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -27,7 +27,7 @@ import {
  getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useFocusEffect, useGlobalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
@@ -68,9 +68,11 @@ export default function page() {
  const { getDownloadedItem } = useDownload();
  const revalidateProgressCache = useInvalidatePlaybackProgressCache();

+  const lightHapticFeedback = useHaptic("light");
+
  const setShowControls = useCallback((show: boolean) => {
    _setShowControls(show);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
  }, []);

  const {
@@ -175,7 +177,7 @@ export default function page() {
  const togglePlay = useCallback(async () => {
    if (!api) return;

-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
    if (isPlaying) {
      await videoRef.current?.pause();

--- a/app/(auth)/player/music-player.tsx
+++ b/app/(auth)/player/music-player.tsx
@@ -17,7 +17,7 @@ import {
  getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import { Image } from "expo-image";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
@@ -45,6 +45,8 @@ export default function page() {
  const isSeeking = useSharedValue(false);
  const cacheProgress = useSharedValue(0);

+  const lightHapticFeedback = useHaptic("light");
+
  const {
    itemId,
    audioIndex: audioIndexStr,
@@ -124,7 +126,7 @@ export default function page() {

  const togglePlay = useCallback(
    async (ticks: number) => {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      lightHapticFeedback();
      if (isPlaying) {
        videoRef.current?.pause();
        await getPlaystateApi(api!).onPlaybackProgress({
--- a/app/(auth)/player/transcoding-player.tsx
+++ b/app/(auth)/player/transcoding-player.tsx
@@ -20,7 +20,7 @@ import {
  getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
@@ -48,6 +48,7 @@ const Player = () => {

  const firstTime = useRef(true);
  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+  const lightHapticFeedback = useHaptic("light");

  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
  const [showControls, _setShowControls] = useState(true);
@@ -58,7 +59,7 @@ const Player = () => {

  const setShowControls = useCallback((show: boolean) => {
    _setShowControls(show);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
  }, []);

  const progress = useSharedValue(0);
@@ -167,7 +168,7 @@ const Player = () => {
  const videoSource = useVideoSource(item, api, poster, stream?.url);

  const togglePlay = useCallback(async () => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
    if (isPlaying) {
      videoRef.current?.pause();
      await getPlaystateApi(api!).onPlaybackProgress({
--- a/assets/icons/jellyseerr-logo.svg
+++ b/assets/icons/jellyseerr-logo.svg
--- a/assets/images/jellyseerr.PNG
+++ b/assets/images/jellyseerr.PNG
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,4 +1,4 @@
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import React, { PropsWithChildren, ReactNode, useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { Loader } from "./Loader";
@@ -43,6 +43,8 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
    }
  }, [color]);

+  const lightHapticFeedback = useHaptic("light");
+
  return (
    <TouchableOpacity
      className={`
@@ -54,7 +56,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      onPress={() => {
        if (!loading && !disabled && onPress) {
          onPress();
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+          lightHapticFeedback();
        }
      }}
      disabled={disabled || loading}
--- 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/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -32,7 +32,7 @@ import Animated, {
 import { Button } from "./Button";
 import { SelectedOptions } from "./ItemContent";
 import { chromecastProfile } from "@/utils/profiles/chromecast";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";

 interface Props extends React.ComponentProps<typeof Button> {
  item: BaseItemDto;
@@ -64,6 +64,7 @@ export const PlayButton: React.FC<Props> = ({
  const widthProgress = useSharedValue(0);
  const colorChangeProgress = useSharedValue(0);
  const [settings] = useSettings();
+  const lightHapticFeedback = useHaptic("light");

  const goToPlayer = useCallback(
    (q: string, bitrateValue: number | undefined) => {
@@ -79,7 +80,7 @@ export const PlayButton: React.FC<Props> = ({
  const onPress = useCallback(async () => {
    if (!item) return;

-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();

    const queryParams = new URLSearchParams({
      itemId: item.Id!,
--- a/components/RoundButton.tsx
+++ b/components/RoundButton.tsx
@@ -6,7 +6,7 @@ import {
  TouchableOpacity,
  TouchableOpacityProps,
 } from "react-native";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";

 interface Props extends TouchableOpacityProps {
  onPress?: () => void;
@@ -29,10 +29,11 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({
 }) => {
  const buttonSize = size === "large" ? "h-10 w-10" : "h-9 w-9";
  const fillColorClass = fillColor === "primary" ? "bg-purple-600" : "";
+  const lightHapticFeedback = useHaptic("light");

  const handlePress = () => {
    if (hapticFeedback) {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      lightHapticFeedback();
    }
    onPress?.();
  };
--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -1,5 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import {
@@ -26,6 +26,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
  const { deleteFile } = useDownload();
  const { openFile } = useDownloadedFileOpener();
  const { showActionSheetWithOptions } = useActionSheet();
+  const successHapticFeedback = useHaptic("success");

  const base64Image = useMemo(() => {
    return storage.getString(item.Id!);
@@ -41,7 +42,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
  const handleDeleteFile = useCallback(() => {
    if (item.Id) {
      deleteFile(item.Id);
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      successHapticFeedback();
    }
  }, [deleteFile, item.Id]);

--- a/components/downloads/MovieCard.tsx
+++ b/components/downloads/MovieCard.tsx
@@ -3,7 +3,7 @@ import {
  useActionSheet,
 } from "@expo/react-native-action-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";

@@ -28,6 +28,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
  const { deleteFile } = useDownload();
  const { openFile } = useDownloadedFileOpener();
  const { showActionSheetWithOptions } = useActionSheet();
+  const successHapticFeedback = useHaptic("success");

  const handleOpenFile = useCallback(() => {
    openFile(item);
@@ -43,7 +44,7 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
  const handleDeleteFile = useCallback(() => {
    if (item.Id) {
      deleteFile(item.Id);
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      successHapticFeedback();
    }
  }, [deleteFile, item.Id]);

--- a/components/home/LargeMovieCarousel.tsx
+++ b/components/home/LargeMovieCarousel.tsx
@@ -22,7 +22,7 @@ import { itemRouter, TouchableItemRouter } from "../common/TouchableItemRouter";
 import { Loader } from "../Loader";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { useRouter, useSegments } from "expo-router";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";

 interface Props extends ViewProps {}

@@ -128,6 +128,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  const [api] = useAtom(apiAtom);
  const router = useRouter();
  const screenWidth = Dimensions.get("screen").width;
+  const lightHapticFeedback = useHaptic("light");

  const uri = useMemo(() => {
    if (!api) return null;
@@ -153,7 +154,7 @@ const RenderItem: React.FC<{ item: BaseItemDto }> = ({ item }) => {
  const handleRoute = useCallback(() => {
    if (!from) return;
    const url = itemRouter(item, from);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
    // @ts-ignore
    if (url) router.push(url);
  }, [item, from]);
--- a/components/jellyseerr/JellyseerrIndexPage.tsx
+++ b/components/jellyseerr/JellyseerrIndexPage.tsx
@@ -0,0 +1,159 @@
+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 Discover from "@/components/jellyseerr/discover/Discover";
+
+interface Props extends ViewProps {
+  searchQuery: string;
+}
+
+export const JellyserrIndexPage: React.FC<Props> = ({ searchQuery }) => {
+  const { jellyseerrApi } = useJellyseerr();
+  const opacity = useSharedValue(1);
+
+  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">
+              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="Request Movies"
+          items={jellyseerrMovieResults}
+          renderItem={(item: MovieResult) => (
+            <JellyseerrPoster item={item} key={item.id} />
+          )}
+        />
+        <SearchItemWrapper
+          header="Request Series"
+          items={jellyseerrTvResults}
+          renderItem={(item: TvResult) => (
+            <JellyseerrPoster item={item} key={item.id} />
+          )}
+        />
+        <SearchItemWrapper
+          header="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/ParallaxSlideShow.tsx
+++ b/components/jellyseerr/ParallaxSlideShow.tsx
@@ -0,0 +1,155 @@
+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 [onEnd, setOnEnd] = useState<boolean>(true);
+  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(() => {
+        exitAnimation().start((end) => {
+          if (end.finished)
+            setCurrentIndex((prevIndex) => (prevIndex + 1) % images?.length);
+        });
+      }, BACKDROP_DURATION);
+
+      return () => clearInterval(intervalId);
+    }
+  }, [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
@@ -26,7 +26,7 @@ const PersonPoster: React.FC<Props & ViewProps> = ({

  if (from === "(home)" || from === "(search)" || from === "(libraries)")
    return (
-      <TouchableOpacity onPress={() => router.push(`/(auth)/(tabs)/${from}/jellyseerr/${id}`)}>
+      <TouchableOpacity onPress={() => router.push(`/(auth)/(tabs)/${from}/jellyseerr/person/${id}`)}>
        <View className="flex flex-col w-28" {...props}>
          <Poster
            id={id}
--- 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,7 +1,7 @@
 import { View, ViewProps } from "react-native";
 import { Image } from "expo-image";
 import { Text } from "@/components/common/Text";
-import { useMemo } from "react";
+import { useMemo, useRef, useState } from "react";
 import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import {
  MediaStatus,
@@ -16,21 +16,46 @@ import { TouchableJellyseerrRouter } from "@/components/common/JellyseerrItemRou
 import JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
 import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import Animated, {
+  FadeIn,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+
 interface Props extends ViewProps {
  item: MovieResult | TvResult;
 }

 const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
  const { jellyseerrApi } = useJellyseerr();
+  const loadingOpacity = useSharedValue(1);
+  const imageOpacity = useSharedValue(0);
+
+  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(
@@ -53,23 +78,25 @@ const JellyseerrPoster: React.FC<Props> = ({ item, ...props }) => {
    >
      <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%",
-            }}
-          />
+          <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}
--- 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/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";
@@ -15,7 +16,6 @@ import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-import { useRouter } from "expo-router";

 interface Props extends ViewProps {}

@@ -185,6 +185,14 @@ export const OtherSettings: React.FC = () => {
        title="Hide Libraries"
        showArrow
      />
+      <ListItem title="Disable Haptic Feedback">
+        <Switch
+          value={settings.disableHapticFeedback}
+          onValueChange={(value) =>
+            updateSettings({ disableHapticFeedback: value })
+          }
+        />
+      </ListItem>
    </ListGroup>
  );
 };
--- a/components/settings/QuickConnect.tsx
+++ b/components/settings/QuickConnect.tsx
@@ -7,7 +7,7 @@ import {
  BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import { useAtom } from "jotai";
 import React, { useCallback, useRef, useState } from "react";
 import { Alert, View, ViewProps } from "react-native";
@@ -23,6 +23,8 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
  const [user] = useAtom(userAtom);
  const [quickConnectCode, setQuickConnectCode] = useState<string>();
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const successHapticFeedback = useHaptic("success");
+  const errorHapticFeedback = useHaptic("error");

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
@@ -43,16 +45,16 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
          userId: user?.Id,
        });
        if (res.status === 200) {
-          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          successHapticFeedback();
          Alert.alert("Success", "Quick connect authorized");
          setQuickConnectCode(undefined);
          bottomSheetModalRef?.current?.close();
        } else {
-          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+          errorHapticFeedback();
          Alert.alert("Error", "Invalid code");
        }
      } catch (e) {
-        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        errorHapticFeedback();
        Alert.alert("Error", "Invalid code");
      }
    }
--- a/components/settings/StorageSettings.tsx
+++ b/components/settings/StorageSettings.tsx
@@ -4,7 +4,7 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { clearLogs } from "@/utils/log";
 import { useQuery } from "@tanstack/react-query";
 import * as FileSystem from "expo-file-system";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import { View } from "react-native";
 import * as Progress from "react-native-progress";
 import { toast } from "sonner-native";
@@ -13,6 +13,8 @@ import { ListItem } from "../list/ListItem";

 export const StorageSettings = () => {
  const { deleteAllFiles, appSizeUsage } = useDownload();
+  const successHapticFeedback = useHaptic("success");
+  const errorHapticFeedback = useHaptic("error");

  const { data: size, isLoading: appSizeLoading } = useQuery({
    queryKey: ["appSize", appSizeUsage],
@@ -29,9 +31,9 @@ export const StorageSettings = () => {
  const onDeleteClicked = async () => {
    try {
      await deleteAllFiles();
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+      successHapticFeedback();
    } catch (e) {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+      errorHapticFeedback();
      toast.error("Error deleting files");
    }
  };
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -29,7 +29,7 @@ import {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useAtom } from "jotai";
@@ -157,10 +157,12 @@ export const Controls: React.FC<Props> = ({
    isVlc
  );

+  const lightHapticFeedback = useHaptic("light");
+
  const goToPreviousItem = useCallback(() => {
    if (!previousItem || !settings) return;

-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();

    const previousIndexes: previousIndexes = {
      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
@@ -198,7 +200,7 @@ export const Controls: React.FC<Props> = ({
  const goToNextItem = useCallback(() => {
    if (!nextItem || !settings) return;

-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();

    const previousIndexes: previousIndexes = {
      subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
@@ -326,7 +328,7 @@ export const Controls: React.FC<Props> = ({
  const handleSkipBackward = useCallback(async () => {
    if (!settings?.rewindSkipTime) return;
    wasPlayingRef.current = isPlaying;
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
    try {
      const curr = progress.value;
      if (curr !== undefined) {
@@ -344,7 +346,7 @@ export const Controls: React.FC<Props> = ({
  const handleSkipForward = useCallback(async () => {
    if (!settings?.forwardSkipTime) return;
    wasPlayingRef.current = isPlaying;
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
    try {
      const curr = progress.value;
      if (curr !== undefined) {
@@ -361,7 +363,7 @@ export const Controls: React.FC<Props> = ({

  const toggleIgnoreSafeAreas = useCallback(() => {
    setIgnoreSafeAreas((prev) => !prev);
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();
  }, []);

  const memoizedRenderBubble = useCallback(() => {
@@ -440,7 +442,7 @@ export const Controls: React.FC<Props> = ({
        const gotoItem = await getItemById(api, itemId);
        if (!settings || !gotoItem) return;

-        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        lightHapticFeedback();

        const previousIndexes: previousIndexes = {
          subtitleIndex: subtitleIndex ? parseInt(subtitleIndex) : undefined,
@@ -584,7 +586,7 @@ export const Controls: React.FC<Props> = ({
              )}
              <TouchableOpacity
                onPress={async () => {
-                  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                  lightHapticFeedback();
                  router.back();
                }}
                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
--- a/hooks/useCreditSkipper.ts
+++ b/hooks/useCreditSkipper.ts
@@ -5,7 +5,7 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
 import { msToSeconds, secondsToMs } from "@/utils/time";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "./useHaptic";

 interface CreditTimestamps {
  Introduction: {
@@ -29,6 +29,7 @@ export const useCreditSkipper = (
 ) => {
  const [api] = useAtom(apiAtom);
  const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
+  const lightHapticFeedback = useHaptic("light");

  if (isVlc) {
    currentTime = msToSeconds(currentTime);
@@ -79,7 +80,7 @@ export const useCreditSkipper = (
    if (!creditTimestamps) return;
    console.log(`Skipping credits to ${creditTimestamps.Credits.End}`);
    try {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      lightHapticFeedback();
      wrappedSeek(creditTimestamps.Credits.End);
      setTimeout(() => {
        play();
--- a/hooks/useDefaultPlaySettings.ts
+++ b/hooks/useDefaultPlaySettings.ts
@@ -6,7 +6,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo } from "react";

-// Used only for intial play settings.
+// Used only for initial play settings.
 const useDefaultPlaySettings = (
  item: BaseItemDto,
  settings: Settings | null
--- a/hooks/useHaptic.ts
+++ b/hooks/useHaptic.ts
@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from "react";
+import { Platform } from "react-native";
+import * as Haptics from "expo-haptics";
+import { useSettings } from "@/utils/atoms/settings";
+
+export type HapticFeedbackType =
+  | "light"
+  | "medium"
+  | "heavy"
+  | "selection"
+  | "success"
+  | "warning"
+  | "error";
+
+export const useHaptic = (feedbackType: HapticFeedbackType = "selection") => {
+  const [settings] = useSettings();
+
+  const createHapticHandler = useCallback(
+    (type: Haptics.ImpactFeedbackStyle) => {
+      return Platform.OS === "web" ? () => {} : () => Haptics.impactAsync(type);
+    },
+    []
+  );
+  const createNotificationFeedback = useCallback(
+    (type: Haptics.NotificationFeedbackType) => {
+      return Platform.OS === "web"
+        ? () => {}
+        : () => Haptics.notificationAsync(type);
+    },
+    []
+  );
+
+  const hapticHandlers = useMemo(
+    () => ({
+      light: createHapticHandler(Haptics.ImpactFeedbackStyle.Light),
+      medium: createHapticHandler(Haptics.ImpactFeedbackStyle.Medium),
+      heavy: createHapticHandler(Haptics.ImpactFeedbackStyle.Heavy),
+      selection: Platform.OS === "web" ? () => {} : Haptics.selectionAsync,
+      success: createNotificationFeedback(
+        Haptics.NotificationFeedbackType.Success
+      ),
+      warning: createNotificationFeedback(
+        Haptics.NotificationFeedbackType.Warning
+      ),
+      error: createNotificationFeedback(Haptics.NotificationFeedbackType.Error),
+    }),
+    [createHapticHandler, createNotificationFeedback]
+  );
+
+  if (settings?.disableHapticFeedback) {
+    return () => {};
+  }
+  return hapticHandlers[feedbackType];
+};
--- a/hooks/useIntroSkipper.ts
+++ b/hooks/useIntroSkipper.ts
@@ -5,7 +5,7 @@ import { apiAtom } from "@/providers/JellyfinProvider";
 import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
 import { writeToLog } from "@/utils/log";
 import { msToSeconds, secondsToMs } from "@/utils/time";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "./useHaptic";

 interface IntroTimestamps {
  EpisodeId: string;
@@ -33,6 +33,7 @@ export const useIntroSkipper = (
  if (isVlc) {
    currentTime = msToSeconds(currentTime);
  }
+  const lightHapticFeedback = useHaptic("light");

  const wrappedSeek = (seconds: number) => {
    if (isVlc) {
@@ -78,7 +79,7 @@ export const useIntroSkipper = (
  const skipIntro = useCallback(() => {
    if (!introTimestamps) return;
    try {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      lightHapticFeedback();
      wrappedSeek(introTimestamps.IntroEnd);
      setTimeout(() => {
        play();
--- a/hooks/useJellyseerr.ts
+++ b/hooks/useJellyseerr.ts
@@ -33,6 +33,7 @@ import {
  PersonDetails,
 } from "@/utils/jellyseerr/server/models/Person";
 import { useQueryClient } from "@tanstack/react-query";
+import {GenreSliderItem} from "@/utils/jellyseerr/server/interfaces/api/discoverInterfaces";

 interface SearchParams {
  query: string;
@@ -67,14 +68,20 @@ export enum Endpoints {
  ISSUE = "/issue",
  TV = "/tv",
  SETTINGS = "/settings",
+  NETWORK = "/network",
+  STUDIO = "/studio",
+  GENRE_SLIDER = "/genreslider",
  DISCOVER = "/discover",
  DISCOVER_TRENDING = DISCOVER + "/trending",
  DISCOVER_MOVIES = DISCOVER + "/movies",
  DISCOVER_TV = DISCOVER + TV,
+  DISCOVER_TV_NETWORK = DISCOVER + TV + NETWORK,
+  DISCOVER_MOVIES_STUDIO = DISCOVER + `${MOVIE}s` + STUDIO,
  AUTH_JELLYFIN = "/auth/jellyfin",
 }

 export type DiscoverEndpoint =
+  | Endpoints.DISCOVER_TV_NETWORK
  | Endpoints.DISCOVER_TRENDING
  | Endpoints.DISCOVER_MOVIES
  | Endpoints.DISCOVER_TV;
@@ -181,7 +188,7 @@ export class JellyseerrApi {
  }

  async discover(
-    endpoint: DiscoverEndpoint,
+    endpoint: DiscoverEndpoint | string,
    params: any
  ): Promise<SearchResults> {
    return this.axios
@@ -189,6 +196,15 @@ export class JellyseerrApi {
      .then(({ data }) => data);
  }

+  async getGenreSliders(
+    endpoint: Endpoints.TV | Endpoints.MOVIE,
+    params: any = undefined
+  ): Promise<GenreSliderItem[]> {
+    return this.axios
+      ?.get<GenreSliderItem[]>(Endpoints.API_V1 + Endpoints.DISCOVER + Endpoints.GENRE_SLIDER + endpoint, { params })
+      .then(({ data }) => data);
+  }
+
  async search(params: SearchParams): Promise<SearchResults> {
    const response = await this.axios?.get<SearchResults>(
      Endpoints.API_V1 + Endpoints.SEARCH,
@@ -268,7 +284,7 @@ export class JellyseerrApi {

  imageProxy(
    path?: string,
-    tmdbPath: string = "original",
+    filter: string = "original",
    width: number = 1920,
    quality: number = 75
  ) {
@@ -276,7 +292,7 @@ export class JellyseerrApi {
      ? this.axios.defaults.baseURL +
          `/_next/image?` +
          new URLSearchParams(
-            `url=https://image.tmdb.org/t/p/${tmdbPath}/${path}&w=${width}&q=${quality}`
+            `url=https://image.tmdb.org/t/p/${filter}/${path}&w=${width}&q=${quality}`
          ).toString()
      : this.axios?.defaults.baseURL +
          `/images/overseerr_poster_not_found_logo_top.png`;
--- a/hooks/useMarkAsPlayed.ts
+++ b/hooks/useMarkAsPlayed.ts
@@ -3,13 +3,14 @@ import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
 import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQueryClient } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "./useHaptic";
 import { useAtom } from "jotai";

 export const useMarkAsPlayed = (item: BaseItemDto) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const queryClient = useQueryClient();
+  const lightHapticFeedback = useHaptic("light");

  const invalidateQueries = () => {
    const queriesToInvalidate = [
@@ -29,7 +30,7 @@ export const useMarkAsPlayed = (item: BaseItemDto) => {
  };

  const markAsPlayedStatus = async (played: boolean) => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    lightHapticFeedback();

    // Optimistic update
    queryClient.setQueryData(
--- a/plugins/withGoogleCastActivity.js
+++ b/plugins/withGoogleCastActivity.js
@@ -0,0 +1,34 @@
+const { withAndroidManifest } = require("@expo/config-plugins");
+
+const withGoogleCastActivity = (config) =>
+  withAndroidManifest(config, async (config) => {
+    const mainApplication = config.modResults.manifest.application[0];
+
+    // Initialize activity array if it doesn't exist
+    if (!mainApplication.activity) {
+      mainApplication.activity = [];
+    }
+
+    // Check if the activity already exists
+    const activityExists = mainApplication.activity.some(
+      (activity) =>
+        activity.$?.["android:name"] ===
+        "com.reactnative.googlecast.RNGCExpandedControllerActivity"
+    );
+
+    // Only add the activity if it doesn't already exist
+    if (!activityExists) {
+      mainApplication.activity.push({
+        $: {
+          "android:name":
+            "com.reactnative.googlecast.RNGCExpandedControllerActivity",
+          "android:theme": "@style/Theme.MaterialComponents.NoActionBar",
+          "android:launchMode": "singleTask",
+        },
+      });
+    }
+
+    return config;
+  });
+
+module.exports = withGoogleCastActivity;
--- a/providers/DownloadProvider.tsx
+++ b/providers/DownloadProvider.tsx
@@ -48,7 +48,7 @@ import useImageStorage from "@/hooks/useImageStorage";
 import { storage } from "@/utils/mmkv";
 import useDownloadHelper from "@/utils/download";
 import { FileInfo } from "expo-file-system";
-import * as Haptics from "expo-haptics";
+import { useHaptic } from "@/hooks/useHaptic";
 import * as Application from "expo-application";

 export type DownloadedItem = {
@@ -78,6 +78,8 @@ function useDownloadProvider() {

  const [processes, setProcesses] = useAtom<JobStatus[]>(processesAtom);

+  const successHapticFeedback = useHaptic("success");
+
  const authHeader = useMemo(() => {
    return api?.accessToken;
  }, [api]);
@@ -532,9 +534,7 @@ function useDownloadProvider() {
        if (i.Id) return deleteFile(i.Id);
        return;
      })
-    ).then(() =>
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
-    );
+    ).then(() => successHapticFeedback());
  };

  const cleanCacheDirectory = async () => {
--- a/scripts/automerge.sh
+++ b/scripts/automerge.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+[[ -z $(git status --porcelain) ]] &&
+git checkout master &&
+git pull --ff-only &&
+git checkout develop &&
+git merge master &&
+git push --follow-tags &&
+git checkout master &&
+git merge develop --ff-only &&
+git push &&
+git checkout develop ||
+(echo "Error: Failed to merge" && exit 1)
--- a/scripts/reset-project.js
+++ b/scripts/reset-project.js
@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * This script is used to reset the project to a blank state.
- * It moves the /app directory to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
- * You can remove the `reset-project` script from package.json and safely delete this file after running it.
- */
-
-const fs = require('fs');
-const path = require('path');
-
-const root = process.cwd();
-const oldDirPath = path.join(root, 'app');
-const newDirPath = path.join(root, 'app-example');
-const newAppDirPath = path.join(root, 'app');
-
-const indexContent = `import { Text, View } from "react-native";
-
-export default function Index() {
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <Text>Edit app/index.tsx to edit this screen.</Text>
-    </View>
-  );
-}
-`;
-
-const layoutContent = `import { Stack } from "expo-router";
-
-export default function RootLayout() {
-  return (
-    <Stack>
-      <Stack.Screen name="index" />
-    </Stack>
-  );
-}
-`;
-
-fs.rename(oldDirPath, newDirPath, (error) => {
-  if (error) {
-    return console.error(`Error renaming directory: ${error}`);
-  }
-  console.log('/app moved to /app-example.');
-
-  fs.mkdir(newAppDirPath, { recursive: true }, (error) => {
-    if (error) {
-      return console.error(`Error creating new app directory: ${error}`);
-    }
-    console.log('New /app directory created.');
-
-    const indexPath = path.join(newAppDirPath, 'index.tsx');
-    fs.writeFile(indexPath, indexContent, (error) => {
-      if (error) {
-        return console.error(`Error creating index.tsx: ${error}`);
-      }
-      console.log('app/index.tsx created.');
-
-      const layoutPath = path.join(newAppDirPath, '_layout.tsx');
-      fs.writeFile(layoutPath, layoutContent, (error) => {
-        if (error) {
-          return console.error(`Error creating _layout.tsx: ${error}`);
-        }
-        console.log('app/_layout.tsx created.');
-      });
-    });
-  });
-});
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -84,6 +84,7 @@ export type Settings = {
  downloadMethod: "optimized" | "remux";
  autoDownload: boolean;
  showCustomMenuLinks: boolean;
+  disableHapticFeedback: boolean;
  subtitleSize: number;
  remuxConcurrentLimit: 1 | 2 | 3 | 4;
  safeAreaInControlsEnabled: boolean;
@@ -123,6 +124,7 @@ const loadSettings = (): Settings => {
    downloadMethod: "remux",
    autoDownload: false,
    showCustomMenuLinks: false,
+    disableHapticFeedback: false,
    subtitleSize: Platform.OS === "ios" ? 60 : 100,
    remuxConcurrentLimit: 1,
    safeAreaInControlsEnabled: true,
--- a/utils/jellyseerr
+++ b/utils/jellyseerr
Author	SHA1	Message	Date
herrrta	b232bebd73	[Jellyseerr] Show genre/studio/network discover sliders implements #326	2025-01-06 14:25:14 -05:00
Fredrik Burmester	90ef8ef6f9	feat: fade in images	2025-01-06 17:38:59 +01:00
Fredrik Burmester	0df6b8e2a0	chore	2025-01-06 17:33:49 +01:00
Fredrik Burmester	f48b26076d	feat: loading skeleton for search (including jellyseerr)	2025-01-06 17:33:27 +01:00
Fredrik Burmester	24277135a8	Merge branch 'master' into develop	2025-01-06 10:14:27 +01:00
Fredrik Burmester	23d9cd36d1	chore	2025-01-06 10:14:17 +01:00
Fredrik Burmester	b243524a7d	chore	2025-01-06 10:13:40 +01:00
Fredrik Burmester	8288682e68	feat: intro screen	2025-01-05 23:28:24 +01:00
Fredrik Burmester	58ec915699	feat: intro page	2025-01-05 22:17:02 +01:00
Fredrik Burmester	cad03a3566	fix: chromecast	2025-01-05 20:59:45 +01:00
Fredrik Burmester	9baa4063bd	chore	2025-01-05 16:22:52 +01:00
Fredrik Burmester	41db34ed8e	fix: hide libraries from home sections as well	2025-01-05 16:22:32 +01:00
retardgerman	5aba66ce05	fix: add jellyseerr screenshot	2025-01-05 16:09:06 +01:00
retardgerman	79407ccd70	Add files via upload	2025-01-05 16:06:21 +01:00
retardgerman	9a93b3b3bb	Delete jellyseerr.PNG	2025-01-05 16:05:51 +01:00
retardgerman	2b846a1aca	Add files via upload	2025-01-05 16:01:02 +01:00
Fredrik Burmester	55d61172f4	Merge branch 'master' into develop	2025-01-05 15:53:06 +01:00
Fredrik Burmester	57173a62dc	Merge branch 'develop' of https://github.com/streamyfin/streamyfin into develop	2025-01-05 15:51:52 +01:00
Fredrik Burmester	78f65be09d	Merge branch 'master' into develop	2025-01-05 15:51:33 +01:00
Fredrik Burmester	293a9517a5	Merge pull request #377 from anubhavvs/feature/haptic-feedback-toggle feat: haptic feedback settings and custom hook	2025-01-05 15:50:57 +01:00
Fredrik Burmester	38b6215046	Merge pull request #376 from eltociear/patch-1 chore: update useDefaultPlaySettings.ts	2025-01-05 15:48:32 +01:00
Fredrik Burmester	fc4a11d916	Merge pull request #378 from streamyfin/feat/hide-libraries feat: hide libraries from libraries tab	2025-01-05 15:47:29 +01:00
Anubhav Saha	9692c173ae	feat: haptic feedback settings and custom hook	2025-01-05 15:22:52 +01:00
Ikko Eltociear Ashimine	a297ac4843	chore: update useDefaultPlaySettings.ts intial -> initial	2025-01-05 23:08:44 +09:00
Fredrik Burmester	8470cbe8d5	Delete svenska_kyrkan.sql	2025-01-05 10:29:12 +01:00
retardgerman	1e869a2c2f	fix: auto add feature requests to roadmap	2025-01-05 08:28:32 +01:00
retardgerman	b6502c042a	fix: removed assignees and modified link to roadmap	2025-01-05 08:16:04 +01:00