repos + plugin config updates

Merge branch 'feat/401' of https://github.com/streamyfin/streamyfin into feat/401
api augmentations & added streamyfin plugin id
2025-01-10 19:28:22 -05:00 · 2025-01-09 15:49:02 +01:00 · 2025-01-09 09:35:24 -05:00 · 2025-01-09 09:33:55 -05:00 · 2025-01-09 08:51:53 -05:00 · 2025-01-09 11:33:06 +01:00
99 changed files with 3298 additions and 1380 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
@@ -45,7 +43,7 @@ body:
      label: Version
      description: What version of Streamyfin are you running?
      options:
-        - 0.23.0
+        - 0.25.0
        - 0.22.0
        - 0.21.0
        - older
--- 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/.github/workflows/build-ios.yaml
+++ b/.github/workflows/build-ios.yaml
@@ -0,0 +1,49 @@
+name: Automatic Build and Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: macos-15
+    name: Build IOS
+    steps:
+      - uses: actions/checkout@v2
+        name: Check out repository
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - run: |
+          bun i && bun run submodule-reload
+          npx expo prebuild
+      - uses: sparkfabrik/ios-build-action@v2.3.0
+        with:
+          upload-to-testflight: false
+          increment-build-number: false
+          build-pods: true
+          pods-path: "ios/Podfile"
+          configuration: Release
+          # Change later to app-store if wanted
+          export-method: appstore
+          #export-method: ad-hoc
+          workspace-path: "ios/Streamyfin.xcodeproj/project.xcworkspace/"
+          project-path: "ios/Streamyfin.xcodeproj"
+          scheme: Streamyfin
+          apple-key-id: ${{ secrets.APPLE_KEY_ID }}
+          apple-key-issuer-id: ${{ secrets.APPLE_KEY_ISSUER_ID }}
+          apple-key-content: ${{ secrets.APPLE_KEY_CONTENT }}
+          team-id: ${{ secrets.TEAM_ID }}
+          team-name: ${{ secrets.TEAM_NAME }}
+          #match-password: ${{ secrets.MATCH_PASSWORD }}
+          #match-git-url: ${{ secrets.MATCH_GIT_URL }}
+          #match-git-basic-authorization: ${{ secrets.MATCH_GIT_BASIC_AUTHORIZATION }}
+          #match-build-type: "appstore"
+          #browserstack-upload: true
+          #browserstack-username: ${{ secrets.BROWSERSTACK_USERNAME }}
+          #browserstack-access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+          #fastlane-env: stage
+          ios-app-id: com.stetsed.teststreamyfin
+          output-path: build-${{ github.sha }}.ipa
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,6 @@ credentials.json
 *.ipa
 .continuerc.json

-.vscode/
+.vscode/
+.idea/
+.ruby-lsp
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
--- a/.idea/caches/deviceStreaming.xml
+++ b/.idea/caches/deviceStreaming.xml
@@ -1,329 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DeviceStreaming">
-    <option name="deviceSelectionList">
-      <list>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="27" />
-          <option name="brand" value="DOCOMO" />
-          <option name="codename" value="F01L" />
-          <option name="id" value="F01L" />
-          <option name="manufacturer" value="FUJITSU" />
-          <option name="name" value="F-01L" />
-          <option name="screenDensity" value="360" />
-          <option name="screenX" value="720" />
-          <option name="screenY" value="1280" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="28" />
-          <option name="brand" value="DOCOMO" />
-          <option name="codename" value="SH-01L" />
-          <option name="id" value="SH-01L" />
-          <option name="manufacturer" value="SHARP" />
-          <option name="name" value="AQUOS sense2 SH-01L" />
-          <option name="screenDensity" value="480" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2160" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="Lenovo" />
-          <option name="codename" value="TB370FU" />
-          <option name="id" value="TB370FU" />
-          <option name="manufacturer" value="Lenovo" />
-          <option name="name" value="Tab P12" />
-          <option name="screenDensity" value="340" />
-          <option name="screenX" value="1840" />
-          <option name="screenY" value="2944" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="31" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="a51" />
-          <option name="id" value="a51" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy A51" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="akita" />
-          <option name="id" value="akita" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 8a" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="b0q" />
-          <option name="id" value="b0q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy S22 Ultra" />
-          <option name="screenDensity" value="600" />
-          <option name="screenX" value="1440" />
-          <option name="screenY" value="3088" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="32" />
-          <option name="brand" value="google" />
-          <option name="codename" value="bluejay" />
-          <option name="id" value="bluejay" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 6a" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="caiman" />
-          <option name="id" value="caiman" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9 Pro" />
-          <option name="screenDensity" value="360" />
-          <option name="screenX" value="960" />
-          <option name="screenY" value="2142" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="comet" />
-          <option name="id" value="comet" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9 Pro Fold" />
-          <option name="screenDensity" value="390" />
-          <option name="screenX" value="2076" />
-          <option name="screenY" value="2152" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="29" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="crownqlteue" />
-          <option name="id" value="crownqlteue" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Note9" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2220" />
-          <option name="screenY" value="1080" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="dm3q" />
-          <option name="id" value="dm3q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy S23 Ultra" />
-          <option name="screenDensity" value="600" />
-          <option name="screenX" value="1440" />
-          <option name="screenY" value="3088" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="e1q" />
-          <option name="id" value="e1q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy S24" />
-          <option name="screenDensity" value="480" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2340" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="felix" />
-          <option name="id" value="felix" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Fold" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2208" />
-          <option name="screenY" value="1840" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="felix" />
-          <option name="id" value="felix" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Fold" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2208" />
-          <option name="screenY" value="1840" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="felix_camera" />
-          <option name="id" value="felix_camera" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Fold (Camera-enabled)" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="2208" />
-          <option name="screenY" value="1840" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="gts8uwifi" />
-          <option name="id" value="gts8uwifi" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Tab S8 Ultra" />
-          <option name="screenDensity" value="320" />
-          <option name="screenX" value="1848" />
-          <option name="screenY" value="2960" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="husky" />
-          <option name="id" value="husky" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 8 Pro" />
-          <option name="screenDensity" value="390" />
-          <option name="screenX" value="1008" />
-          <option name="screenY" value="2244" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="30" />
-          <option name="brand" value="motorola" />
-          <option name="codename" value="java" />
-          <option name="id" value="java" />
-          <option name="manufacturer" value="Motorola" />
-          <option name="name" value="G20" />
-          <option name="screenDensity" value="280" />
-          <option name="screenX" value="720" />
-          <option name="screenY" value="1600" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="komodo" />
-          <option name="id" value="komodo" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9 Pro XL" />
-          <option name="screenDensity" value="360" />
-          <option name="screenX" value="1008" />
-          <option name="screenY" value="2244" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="lynx" />
-          <option name="id" value="lynx" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 7a" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="31" />
-          <option name="brand" value="google" />
-          <option name="codename" value="oriole" />
-          <option name="id" value="oriole" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 6" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="panther" />
-          <option name="id" value="panther" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 7" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="q5q" />
-          <option name="id" value="q5q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Z Fold5" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1812" />
-          <option name="screenY" value="2176" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="samsung" />
-          <option name="codename" value="q6q" />
-          <option name="id" value="q6q" />
-          <option name="manufacturer" value="Samsung" />
-          <option name="name" value="Galaxy Z Fold6" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1856" />
-          <option name="screenY" value="2160" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="30" />
-          <option name="brand" value="google" />
-          <option name="codename" value="r11" />
-          <option name="id" value="r11" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Watch" />
-          <option name="screenDensity" value="320" />
-          <option name="screenX" value="384" />
-          <option name="screenY" value="384" />
-          <option name="type" value="WEAR_OS" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="30" />
-          <option name="brand" value="google" />
-          <option name="codename" value="redfin" />
-          <option name="id" value="redfin" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 5" />
-          <option name="screenDensity" value="440" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2340" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="shiba" />
-          <option name="id" value="shiba" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 8" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2400" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="33" />
-          <option name="brand" value="google" />
-          <option name="codename" value="tangorpro" />
-          <option name="id" value="tangorpro" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel Tablet" />
-          <option name="screenDensity" value="320" />
-          <option name="screenX" value="1600" />
-          <option name="screenY" value="2560" />
-        </PersistentDeviceSelectionData>
-        <PersistentDeviceSelectionData>
-          <option name="api" value="34" />
-          <option name="brand" value="google" />
-          <option name="codename" value="tokay" />
-          <option name="id" value="tokay" />
-          <option name="manufacturer" value="Google" />
-          <option name="name" value="Pixel 9" />
-          <option name="screenDensity" value="420" />
-          <option name="screenX" value="1080" />
-          <option name="screenY" value="2424" />
-        </PersistentDeviceSelectionData>
-      </list>
-    </option>
-  </component>
-</project>
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/streamyfin.iml" filepath="$PROJECT_DIR$/.idea/streamyfin.iml" />
-    </modules>
-  </component>
-</project>
--- a/.idea/streamyfin.iml
+++ b/.idea/streamyfin.iml
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="JAVA_MODULE" version="4">
-  <component name="NewModuleRootManager" inherit-compiler-output="true">
-    <exclude-output />
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>
--- a/README.md
+++ b/README.md
@@ -8,12 +8,12 @@ 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

- 🚀 **Skp intro / credits support**
+- 🚀 **Skip Intro / Credits Support**
 - 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
 - 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.
--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.23.0",
+    "version": "0.25.0",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -36,7 +36,7 @@
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 49,
+      "versionCode": 50,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive_icon.png"
      },
@@ -78,18 +78,16 @@
            "useFrameworks": "static"
          },
          "android": {
-            "android": {
-              "compileSdkVersion": 34,
-              "targetSdkVersion": 34,
-              "buildToolsVersion": "34.0.0"
-            },
+            "compileSdkVersion": 34,
+            "targetSdkVersion": 34,
+            "buildToolsVersion": "34.0.0",
            "minSdkVersion": 24,
            "usesCleartextTraffic": true,
-            "packagingOptions": {
-              "jniLibs": {
-                "useLegacyPackaging": true
-              }
-            }
+            "extraMavenRepos": [
+              "https://repo.maven.apache.org/maven2",
+              "https://uk.maven.org/maven2"
+            ],
+            "useLegacyPackaging": true
          }
        }
      ],
@@ -111,7 +109,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
@@ -77,6 +77,20 @@ export default function IndexLayout() {
          title: "",
        }}
      />
+      <Stack.Screen
+        name="settings/hide-libraries/page"
+        options={{
+          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
@@ -0,0 +1,61 @@
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { Loader } from "@/components/Loader";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { Switch, View } from "react-native";
+
+export default function page() {
+  const [settings, updateSettings] = useSettings();
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+
+  const { data, isLoading: isLoading } = useQuery({
+    queryKey: ["user-views", user?.Id],
+    queryFn: async () => {
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
+      });
+
+      return response.data.Items || null;
+    },
+  });
+
+  if (!settings) return null;
+
+  if (isLoading)
+    return (
+      <View className="mt-4">
+        <Loader />
+      </View>
+    );
+
+  return (
+    <View className="px-4">
+      <ListGroup>
+        {data?.map((view) => (
+          <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
+            <Switch
+              value={settings.hiddenLibraries?.includes(view.Id!) || false}
+              onValueChange={(value) => {
+                updateSettings({
+                  hiddenLibraries: value
+                    ? [...(settings.hiddenLibraries || []), view.Id!]
+                    : settings.hiddenLibraries?.filter((id) => id !== view.Id),
+                });
+              }}
+            />
+          </ListItem>
+        ))}
+      </ListGroup>
+      <Text className="px-4 text-xs text-neutral-500 mt-1">
+        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/company/[companyId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/company/[companyId].tsx
@@ -0,0 +1,95 @@
+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";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+
+export default function page() {
+  const local = useLocalSearchParams();
+  const {jellyseerrApi} = useJellyseerr();
+
+  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]
+  );
+
+  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) =>
+        <JellyseerrPoster item={item as MovieResult | TvResult} />
+      }
+    />
+  );
+}
--- 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,87 @@
+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";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+
+export default function page() {
+  const local = useLocalSearchParams();
+  const {jellyseerrApi} = useJellyseerr();
+
+  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]
+  );
+
+  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) =>
+        <JellyseerrPoster item={item as MovieResult | TvResult} />
+      }
+    />
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
@@ -1,61 +1,65 @@
-import React, { useCallback, useRef, useState } from "react";
-import { useLocalSearchParams } from "expo-router";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { Text } from "@/components/common/Text";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { Image } from "expo-image";
-import { TouchableOpacity, View} from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { OverviewText } from "@/components/OverviewText";
-import { GenreTags } from "@/components/GenreTags";
-import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import { useQuery } from "@tanstack/react-query";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { Button } from "@/components/Button";
-import {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetModal, BottomSheetTextInput,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
+import { Text } from "@/components/common/Text";
+import { GenreTags } from "@/components/GenreTags";
+import Cast from "@/components/jellyseerr/Cast";
+import DetailFacts from "@/components/jellyseerr/DetailFacts";
+import { OverviewText } from "@/components/OverviewText";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { JellyserrRatings } from "@/components/Ratings";
+import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
+import { ItemActions } from "@/components/series/SeriesActions";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
 import {
  IssueType,
  IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
-import * as DropdownMenu from "zeego/dropdown-menu";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
-import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
-import { JellyserrRatings } from "@/components/Ratings";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import RequestModal from "@/components/jellyseerr/RequestModal";
+import {ANIME_KEYWORD_ID} from "@/utils/jellyseerr/server/api/themoviedb/constants";
+import {MediaRequestBody} from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";

 const Page: React.FC = () => {
  const insets = useSafeAreaInsets();
  const params = useLocalSearchParams();
-  const {
-    mediaTitle,
-    releaseYear,
-    canRequest: canRequestString,
-    posterSrc,
-    ...result
-  } = params as unknown as {
-    mediaTitle: string;
-    releaseYear: number;
-    canRequest: string;
-    posterSrc: string;
-  } & Partial<MovieResult | TvResult>;
+  const { mediaTitle, releaseYear, posterSrc, ...result } =
+    params as unknown as {
+      mediaTitle: string;
+      releaseYear: number;
+      canRequest: string;
+      posterSrc: string;
+    } & Partial<MovieResult | TvResult>;

-  const canRequest = canRequestString === "true";
+  const navigation = useNavigation();
  const { jellyseerrApi, requestMedia } = useJellyseerr();

  const [issueType, setIssueType] = useState<IssueType>();
  const [issueMessage, setIssueMessage] = useState<string>();
+  const advancedReqModalRef = useRef<BottomSheetModal>(null);
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const {
    data: details,
    isFetching,
    isLoading,
-    refetch
+    refetch,
  } = useQuery({
    enabled: !!jellyseerrApi && !!result && !!result.id,
    queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
@@ -72,6 +76,8 @@ const Page: React.FC = () => {
    },
  });

+  const [canRequest, hasAdvancedRequestPermission] = useJellyseerrCanRequest(details);
+
  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
@@ -95,21 +101,40 @@ const Page: React.FC = () => {
    }
  }, [jellyseerrApi, details, result, issueType, issueMessage]);

-  const request = useCallback(
-    async () => {
-      requestMedia(mediaTitle, {
-          mediaId: Number(result.id!!),
-          mediaType: result.mediaType!!,
-          tvdbId: details?.externalIds?.tvdbId,
-          seasons: (details as TvDetails)?.seasons
-            ?.filter?.((s) => s.seasonNumber !== 0)
-            ?.map?.((s) => s.seasonNumber),
-        },
-        refetch
-      )
-    },
-    [details, result, requestMedia]
-  );
+  const request = useCallback(async () => {
+    const body: MediaRequestBody = {
+      mediaId: Number(result.id!!),
+      mediaType: result.mediaType!!,
+      tvdbId: details?.externalIds?.tvdbId,
+      seasons: (details as TvDetails)?.seasons
+        ?.filter?.((s) => s.seasonNumber !== 0)
+        ?.map?.((s) => s.seasonNumber),
+    }
+
+    if (hasAdvancedRequestPermission) {
+      advancedReqModalRef?.current?.present?.(body)
+      return
+    }
+
+    requestMedia(mediaTitle, body, refetch);
+  }, [details, result, requestMedia, hasAdvancedRequestPermission]);
+
+  const isAnime = useMemo(
+    () => (details?.keywords.some(k => k.id === ANIME_KEYWORD_ID) || false) && result.mediaType === MediaType.TV,
+    [details]
+  )
+
+  useEffect(() => {
+    if (details) {
+      navigation.setOptions({
+        headerRight: () => (
+          <TouchableOpacity className="rounded-full p-2 bg-neutral-800/80">
+            <ItemActions item={details} />
+          </TouchableOpacity>
+        ),
+      });
+    }
+  }, [details]);

  return (
    <View
@@ -133,7 +158,10 @@ const Page: React.FC = () => {
                  height: "100%",
                }}
                source={{
-                  uri: `https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${result.backdropPath}`,
+                  uri: jellyseerrApi?.imageProxy(
+                    result.backdropPath,
+                    "w1920_and_h800_multi_faces"
+                  ),
                }}
              />
            ) : (
@@ -182,7 +210,9 @@ const Page: React.FC = () => {
              <View className="mb-4">
                <GenreTags genres={details?.genres?.map((g) => g.name) || []} />
              </View>
-              {canRequest ? (
+              {isLoading || isFetching ? (
+                <Button loading={true} disabled={true} color="purple"></Button>
+              ) : canRequest ? (
                <Button color="purple" onPress={request}>
                  Request
                </Button>
@@ -211,11 +241,31 @@ const Page: React.FC = () => {
                result={result as TvResult}
                details={details as TvDetails}
                refetch={refetch}
+                hasAdvancedRequest={hasAdvancedRequestPermission}
+                onAdvancedRequest={(data) =>
+                  advancedReqModalRef?.current?.present(data)
+              }
              />
            )}
+            <DetailFacts
+              className="p-2 border border-neutral-800 bg-neutral-900 rounded-xl"
+              details={details}
+            />
+            <Cast details={details} />
          </View>
        </View>
      </ParallaxScrollView>
+      <RequestModal
+        ref={advancedReqModalRef}
+        title={mediaTitle}
+        id={result.id!!}
+        type={result.mediaType as MediaType}
+        isAnime={isAnime}
+        onRequested={() => {
+          advancedReqModalRef?.current?.close()
+          refetch()
+        }}
+      />
      <BottomSheetModal
        ref={bottomSheetModalRef}
        enableDynamicSizing
@@ -279,13 +329,11 @@ const Page: React.FC = () => {
                </DropdownMenu.Root>
              </View>

-              <View
-                className="p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full"
-              >
+              <View className="p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full">
                <BottomSheetTextInput
                  multiline
                  maxLength={254}
-                  style={{color: "white"}}
+                  style={{ color: "white" }}
                  clearButtonMode="always"
                  placeholder="(optional) Describe the issue..."
                  placeholderTextColor="#9CA3AF"
--- 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,107 @@
+import {
+  useLocalSearchParams,
+  useSegments,
+} from "expo-router";
+import React, { useMemo } from "react";
+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, uniqBy} from "lodash";
+import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
+import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+
+export default function page() {
+  const local = useLocalSearchParams();
+  const { jellyseerrApi, jellyseerrUser } = useJellyseerr();
+
+  const { personId } = local as { personId: string };
+
+  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(
+    () =>
+      uniqBy(orderBy(
+        data?.combinedCredits?.cast,
+        ["voteCount", "voteAverage"],
+        "desc"
+      ), 'id'),
+    [data?.combinedCredits]
+  );
+  const backdrops = useMemo(
+    () => jellyseerrApi
+      ? castedRoles.map((c) => jellyseerrApi.imageProxy(c.backdropPath, "w1920_and_h800_multi_faces"))
+      : [],
+    [jellyseerrApi, data?.combinedCredits]
+  );
+
+  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) => <JellyseerrPoster item={item as MovieResult | TvResult} />}
+    />
+  );
+}
--- a/app/(auth)/(tabs)/(libraries)/index.tsx
+++ b/app/(auth)/(tabs)/(libraries)/index.tsx
@@ -10,7 +10,7 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

@@ -23,20 +23,20 @@ export default function index() {
  const { data, isLoading: isLoading } = useQuery({
    queryKey: ["user-views", user?.Id],
    queryFn: async () => {
-      if (!api || !user?.Id) {
-        return null;
-      }
-
-      const response = await getUserViewsApi(api).getUserViews({
-        userId: user.Id,
+      const response = await getUserViewsApi(api!).getUserViews({
+        userId: user?.Id,
      });

      return response.data.Items || null;
    },
-    enabled: !!api && !!user?.Id,
-    staleTime: 60 * 1000 * 60,
+    staleTime: 60,
  });

+  const libraries = useMemo(
+    () => data?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!)),
+    [data, settings?.hiddenLibraries]
+  );
+
  useEffect(() => {
    for (const item of data || []) {
      queryClient.prefetchQuery({
@@ -63,7 +63,7 @@ export default function index() {
      </View>
    );

-  if (!data)
+  if (!libraries)
    return (
      <View className="h-full w-full flex justify-center items-center">
        <Text className="text-lg text-neutral-500">No libraries found</Text>
@@ -81,7 +81,7 @@ export default function index() {
        paddingLeft: insets.left,
        paddingRight: insets.right,
      }}
-      data={data}
+      data={libraries}
      renderItem={({ item }) => <LibraryItemCard library={item} />}
      keyExtractor={(item) => item.Id || ""}
      ItemSeparatorComponent={() =>
--- a/app/(auth)/(tabs)/(search)/_layout.tsx
+++ b/app/(auth)/(tabs)/(search)/_layout.tsx
@@ -36,6 +36,9 @@ export default function SearchLayout() {
        }}
      />
      <Stack.Screen name="jellyseerr/page" 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,13 +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, 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";

 type SearchType = "Library" | "Discover";

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

-  const { data: jellyseerrResults, isFetching: j1 } = useQuery({
-    queryKey: ["search", "jellyseerrResults", 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 } = useQuery({
-    queryKey: ["search", "jellyseerrDiscoverSettings", 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 { data: series, isFetching: l2 } = useQuery({
    queryKey: ["search", "series", debouncedSearch],
    queryFn: () =>
@@ -270,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 (
    <>
@@ -300,7 +241,7 @@ export default function search() {
          paddingRight: insets.right,
        }}
      >
-        <View className="flex flex-col pt-2">
+        <View className="flex flex-col">
          {Platform.OS === "android" && (
            <View className="mb-4 px-4">
              <Input
@@ -335,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!)}
@@ -468,126 +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} />
-                )}
-              />
-            </>
+            </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,11 +30,28 @@ 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" />
      <NativeTabs
-        sidebarAdaptable
+        sidebarAdaptable={false}
        ignoresTopSafeArea
        barTintColor={Platform.OS === "android" ? "#121212" : undefined}
        tabBarActiveTintColor={Colors.primary}
--- 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, {
@@ -48,6 +48,7 @@ import {
 import { useSharedValue } from "react-native-reanimated";
 import settings from "../(tabs)/(home)/settings";
 import { useSettings } from "@/utils/atoms/settings";
+import { useSafeAreaInsets } from "react-native-safe-area-context";

 export default function page() {
  const videoRef = useRef<VlcPlayerViewRef>(null);
@@ -68,9 +69,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 +178,7 @@ export default function page() {
  const togglePlay = useCallback(async () => {
    if (!api) return;

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

@@ -411,6 +414,8 @@ export default function page() {
    }
  }

+  const insets = useSafeAreaInsets();
+
  if (!item || isLoadingItem || isLoadingStreamUrl || !stream)
    return (
      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
@@ -435,7 +440,8 @@ export default function page() {
          position: "relative",
          flexDirection: "column",
          justifyContent: "center",
-          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
+          paddingLeft: ignoreSafeAreas ? 0 : insets.left,
+          paddingRight: ignoreSafeAreas ? 0 : insets.right,
        }}
      >
        <VlcPlayerView
--- 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({
@@ -387,7 +388,6 @@ const Player = () => {
          position: "relative",
          flexDirection: "column",
          justifyContent: "center",
-          opacity: showControls ? 0.5 : 1,
        }}
      >
        {videoSource ? (
--- a/app/(auth)/trailer/page.tsx
+++ b/app/(auth)/trailer/page.tsx
@@ -1,45 +0,0 @@
-import { useGlobalSearchParams } from "expo-router";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, Dimensions, View } from "react-native";
-import YoutubePlayer, { PLAYER_STATES } from "react-native-youtube-iframe";
-
-export default function page() {
-  const searchParams = useGlobalSearchParams();
-
-  const { url } = searchParams as { url: string };
-
-  const videoId = useMemo(() => {
-    return url.split("v=")[1];
-  }, [url]);
-
-  const [playing, setPlaying] = useState(false);
-
-  const onStateChange = useCallback((state: PLAYER_STATES) => {
-    if (state === "ended") {
-      setPlaying(false);
-      Alert.alert("video has finished playing!");
-    }
-  }, []);
-
-  const togglePlaying = useCallback(() => {
-    setPlaying((prev) => !prev);
-  }, []);
-
-  useEffect(() => {
-    togglePlaying();
-  }, []);
-
-  const screenWidth = Dimensions.get("screen").width;
-
-  return (
-    <View className="flex flex-col bg-black items-center justify-center h-full">
-      <YoutubePlayer
-        height={300}
-        play={playing}
-        videoId={videoId}
-        onChangeState={onStateChange}
-        width={screenWidth}
-      />
-    </View>
-  );
-}
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -13,7 +13,7 @@ import { orientationAtom } from "@/utils/atoms/orientation";
 import { Settings, useSettings } from "@/utils/atoms/settings";
 import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
 import { LogProvider, writeToLog } from "@/utils/log";
-import { formatItemName, storage } from "@/utils/mmkv";
+import { storage } from "@/utils/mmkv";
 import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
@@ -336,14 +336,6 @@ function Layout() {
                                header: () => null,
                              }}
                            />
-                            <Stack.Screen
-                              name="(auth)/trailer/page"
-                              options={{
-                                headerShown: false,
-                                presentation: "modal",
-                                title: "",
-                              }}
-                            />
                            <Stack.Screen
                              name="login"
                              options={{
@@ -385,15 +377,18 @@ function Layout() {
 function saveDownloadedItemInfo(item: BaseItemDto) {
  try {
    const downloadedItems = storage.getString("downloadedItems");
-    let items: { [key: string]: BaseItemDto } = downloadedItems
+    let items: BaseItemDto[] = downloadedItems
      ? JSON.parse(downloadedItems)
-      : {};
+      : [];

-    if (item.Id) {
-      item.Path = `${FileSystem.documentDirectory}${formatItemName(item)}.mp4`;
-      items[item.Id] = item;
-      storage.set("downloadedItems", JSON.stringify(items));
+    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
+    if (existingItemIndex !== -1) {
+      items[existingItemIndex] = item;
+    } else {
+      items.push(item);
    }
+
+    storage.set("downloadedItems", JSON.stringify(items));
  } catch (error) {
    writeToLog("ERROR", "Failed to save downloaded item information:", error);
    console.error("Failed to save downloaded item information:", error);
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -2,8 +2,13 @@ import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { PreviousServersList } from "@/components/PreviousServersList";
+import { Colors } from "@/constants/Colors";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
-import { Ionicons } from "@expo/vector-icons";
+import {
+  Ionicons,
+  MaterialCommunityIcons,
+  MaterialIcons,
+} from "@expo/vector-icons";
 import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
 import { getSystemApi } from "@jellyfin/sdk/lib/utils/api";
 import { Image } from "expo-image";
@@ -39,7 +44,6 @@ const Login: React.FC = () => {

  const [serverURL, setServerURL] = useState<string>(_apiUrl);
  const [serverName, setServerName] = useState<string>("");
-  const [error, setError] = useState<string>("");
  const [credentials, setCredentials] = useState<{
    username: string;
    password: string;
@@ -77,8 +81,10 @@ const Login: React.FC = () => {
            onPress={() => {
              removeServer();
            }}
+            className="flex flex-row items-center"
          >
-            <Ionicons name="chevron-back" size={24} color="white" />
+            <Ionicons name="chevron-back" size={18} color={Colors.primary} />
+            <Text className="ml-2 text-purple-600">Change server</Text>
          </TouchableOpacity>
        ) : null,
    });
@@ -95,9 +101,9 @@ const Login: React.FC = () => {
      }
    } catch (error) {
      if (error instanceof Error) {
-        setError(error.message);
+        Alert.alert("Connection failed", error.message);
      } else {
-        setError("An unexpected error occurred");
+        Alert.alert("Connection failed", "An unexpected error occurred");
      }
    } finally {
      setLoading(false);
@@ -136,6 +142,8 @@ const Login: React.FC = () => {
        return url;
      }

+      return undefined;
+    } catch {
      return undefined;
    } finally {
      setLoadingServerCheck(false);
@@ -189,133 +197,131 @@ const Login: React.FC = () => {
    }
  };

-  if (api?.basePath) {
-    return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-          style={{ flex: 1, height: "100%" }}
-        >
-          <View className="flex flex-col h-full relative items-center justify-center">
-            <View className="px-4 -mt-20 w-full">
-              <View className="flex flex-col space-y-2">
-                <Text className="text-2xl font-bold -mb-2">
-                  Log in
-                  <>
-                    {serverName ? (
-                      <>
-                        {" to "}
-                        <Text className="text-purple-600">{serverName}</Text>
-                      </>
-                    ) : null}
-                  </>
-                </Text>
-                <Text className="text-xs text-neutral-400">{api.basePath}</Text>
-                <Input
-                  placeholder="Username"
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, username: text })
-                  }
-                  value={credentials.username}
-                  autoFocus
-                  secureTextEntry={false}
-                  keyboardType="default"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="username"
-                  clearButtonMode="while-editing"
-                  maxLength={500}
-                />
-
-                <Input
-                  className="mb-2"
-                  placeholder="Password"
-                  onChangeText={(text) =>
-                    setCredentials({ ...credentials, password: text })
-                  }
-                  value={credentials.password}
-                  secureTextEntry
-                  keyboardType="default"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="password"
-                  clearButtonMode="while-editing"
-                  maxLength={500}
-                />
-              </View>
-
-              <Text className="text-red-600 mb-2">{error}</Text>
-            </View>
-
-            <View className="absolute bottom-0 left-0 w-full px-4 mb-2">
-              <Button
-                color="black"
-                onPress={handleQuickConnect}
-                className="w-full mb-2"
-              >
-                Use Quick Connect
-              </Button>
-              <Button onPress={handleLogin} loading={loading}>
-                Log in
-              </Button>
-            </View>
-          </View>
-        </KeyboardAvoidingView>
-      </SafeAreaView>
-    );
-  }
-
  return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1, height: "100%" }}
      >
-        <View className="flex flex-col h-full relative items-center justify-center w-full">
-          <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
-            <Image
-              style={{
-                width: 100,
-                height: 100,
-                marginLeft: -23,
-                marginBottom: -20,
-              }}
-              source={require("@/assets/images/StreamyFinFinal.png")}
-            />
-            <Text className="text-3xl font-bold">Streamyfin</Text>
-            <Text className="text-neutral-500">
-              Enter the URL to your Jellyfin server
-            </Text>
-            <Input
-              placeholder="Server URL"
-              onChangeText={setServerURL}
-              value={serverURL}
-              keyboardType="url"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="URL"
-              maxLength={500}
-            />
-            <Text className="text-xs text-neutral-500 ml-4">
-              Make sure to include http or https
-            </Text>
-            <PreviousServersList
-              onServerSelect={(s) => {
-                handleConnect(s.address);
-              }}
-            />
-          </View>
-          <View className="mb-2 absolute bottom-0 left-0 w-full px-4">
-            <Button
-              loading={loadingServerCheck}
-              disabled={loadingServerCheck}
-              onPress={async () => await handleConnect(serverURL)}
-              className="w-full grow"
-            >
-              Connect
-            </Button>
-          </View>
-        </View>
+        {api?.basePath ? (
+          <>
+            <View className="flex flex-col h-full relative items-center justify-center">
+              <View className="px-4 -mt-20 w-full">
+                <View className="flex flex-col space-y-2">
+                  <Text className="text-2xl font-bold -mb-2">
+                    Log in
+                    <>
+                      {serverName ? (
+                        <>
+                          {" to "}
+                          <Text className="text-purple-600">{serverName}</Text>
+                        </>
+                      ) : null}
+                    </>
+                  </Text>
+                  <Text className="text-xs text-neutral-400">
+                    {api.basePath}
+                  </Text>
+                  <Input
+                    placeholder="Username"
+                    onChangeText={(text) =>
+                      setCredentials({ ...credentials, username: text })
+                    }
+                    value={credentials.username}
+                    autoFocus
+                    secureTextEntry={false}
+                    keyboardType="default"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="username"
+                    clearButtonMode="while-editing"
+                    maxLength={500}
+                  />
+
+                  <Input
+                    placeholder="Password"
+                    onChangeText={(text) =>
+                      setCredentials({ ...credentials, password: text })
+                    }
+                    value={credentials.password}
+                    secureTextEntry
+                    keyboardType="default"
+                    returnKeyType="done"
+                    autoCapitalize="none"
+                    textContentType="password"
+                    clearButtonMode="while-editing"
+                    maxLength={500}
+                  />
+                  <View className="flex flex-row items-center justify-between">
+                    <Button
+                      onPress={handleLogin}
+                      loading={loading}
+                      className="flex-1 mr-2"
+                    >
+                      Log in
+                    </Button>
+                    <TouchableOpacity
+                      onPress={handleQuickConnect}
+                      className="p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center"
+                    >
+                      <MaterialCommunityIcons
+                        name="cellphone-lock"
+                        size={24}
+                        color="white"
+                      />
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </View>
+
+              <View className="absolute bottom-0 left-0 w-full px-4 mb-2"></View>
+            </View>
+          </>
+        ) : (
+          <>
+            <View className="flex flex-col h-full items-center justify-center w-full">
+              <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
+                <Image
+                  style={{
+                    width: 100,
+                    height: 100,
+                    marginLeft: -23,
+                    marginBottom: -20,
+                  }}
+                  source={require("@/assets/images/StreamyFinFinal.png")}
+                />
+                <Text className="text-3xl font-bold">Streamyfin</Text>
+                <Text className="text-neutral-500">
+                  Enter the URL to your Jellyfin server
+                </Text>
+                <Input
+                  aria-label="Server URL"
+                  placeholder="http(s)://your-server.com"
+                  onChangeText={setServerURL}
+                  value={serverURL}
+                  keyboardType="url"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="URL"
+                  maxLength={500}
+                />
+
+                <Button
+                  loading={loadingServerCheck}
+                  disabled={loadingServerCheck}
+                  onPress={async () => await handleConnect(serverURL)}
+                  className="w-full grow"
+                >
+                  Connect
+                </Button>
+                <PreviousServersList
+                  onServerSelect={(s) => {
+                    handleConnect(s.address);
+                  }}
+                />
+              </View>
+            </View>
+          </>
+        )}
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
--- a/assets/icons/jellyseerr-logo.svg
+++ b/assets/icons/jellyseerr-logo.svg
--- a/assets/images/jellyseerr.PNG
+++ b/assets/images/jellyseerr.PNG
--- a/augmentations/api.ts
+++ b/augmentations/api.ts
@@ -0,0 +1,46 @@
+import { Api, AUTHORIZATION_HEADER } from "@jellyfin/sdk";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+import { StreamyfinPluginConfig } from "@/utils/atoms/settings";
+
+declare module "@jellyfin/sdk" {
+  interface Api {
+    get<T, D = any>(
+      url: string,
+      config?: AxiosRequestConfig<D>
+    ): Promise<AxiosResponse<T>>;
+    post<T, D = any>(
+      url: string,
+      data: D,
+      config?: AxiosRequestConfig<D>
+    ): Promise<AxiosResponse<T>>;
+    getStreamyfinPluginConfig(): Promise<AxiosResponse<StreamyfinPluginConfig>>;
+  }
+}
+
+Api.prototype.get = function <T, D = any>(
+  url: string,
+  config: AxiosRequestConfig<D> = {}
+): Promise<AxiosResponse<T>> {
+  return this.axiosInstance.get<T>(`${this.basePath}${url}`, {
+    ...(config ?? {}),
+    headers: { [AUTHORIZATION_HEADER]: this.authorizationHeader },
+  });
+};
+
+Api.prototype.post = function <T, D = any>(
+  url: string,
+  data: D,
+  config: AxiosRequestConfig<D>
+): Promise<AxiosResponse<T>> {
+  return this.axiosInstance.post<T>(`${this.basePath}${url}`, {
+    ...(config || {}),
+    data,
+    headers: { [AUTHORIZATION_HEADER]: this.authorizationHeader },
+  });
+};
+
+Api.prototype.getStreamyfinPluginConfig = function (): Promise<
+  AxiosResponse<StreamyfinPluginConfig>
+> {
+  return this.get<StreamyfinPluginConfig>("/Streamyfin/config");
+};
--- a/augmentations/mmkv.ts
+++ b/augmentations/mmkv.ts
@@ -13,5 +13,10 @@ MMKV.prototype.get = function <T> (key: string): T | undefined {
 }

 MMKV.prototype.setAny = function (key: string, value: any | undefined): void {
-  this.set(key, JSON.stringify(value));
+  if (value === undefined) {
+    this.delete(key)
+  }
+  else {
+    this.set(key, JSON.stringify(value));
+  }
 }
--- a/augmentations/number.ts
+++ b/augmentations/number.ts
@@ -1,25 +1,23 @@
 declare global {
  interface Number {
-    bytesToReadable(): string;
+    bytesToReadable(decimals?: number): string;
    secondsToMilliseconds(): number;
    minutesToMilliseconds(): number;
    hoursToMilliseconds(): number;
  }
 }

-Number.prototype.bytesToReadable = function () {
+Number.prototype.bytesToReadable = function (decimals: number = 2) {
  const bytes = this.valueOf();
-  const gb = bytes / 1e9;
+  if (bytes === 0) return '0 Bytes';

-  if (gb >= 1) return `${gb.toFixed(0)} GB`;
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

-  const mb = bytes / 1024.0 / 1024.0;
-  if (mb >= 1) return `${mb.toFixed(0)} MB`;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));

-  const kb = bytes / 1024.0;
-  if (kb >= 1) return `${kb.toFixed(0)} KB`;
-
-  return `${bytes.toFixed(2)} B`;
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 };

 Number.prototype.secondsToMilliseconds = function () {
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -27,6 +27,10 @@ export const BITRATES: Bitrate[] = [
    key: "2 Mb/s",
    value: 2000000,
  },
+  {
+    key: "1 Mb/s",
+    value: 1000000,
+  },
  {
    key: "500 Kb/s",
    value: 500000,
--- 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";
@@ -37,12 +37,14 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      case "red":
        return "bg-red-600";
      case "black":
-        return "bg-neutral-900 border border-neutral-800";
+        return "bg-neutral-900";
      case "transparent":
        return "bg-transparent";
    }
  }, [color]);

+  const lightHapticFeedback = useHaptic("light");
+
  return (
    <TouchableOpacity
      className={`
@@ -54,14 +56,16 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      onPress={() => {
        if (!loading && !disabled && onPress) {
          onPress();
-          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+          lightHapticFeedback();
        }
      }}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
-        <Loader />
+        <View className="p-0.5">
+          <Loader />
+        </View>
      ) : (
        <View
          className={`
--- a/components/GenreTags.tsx
+++ b/components/GenreTags.tsx
@@ -1,6 +1,6 @@
 // GenreTags.tsx
 import React from "react";
-import {View, ViewProps} from "react-native";
+import {StyleProp, TextStyle, View, ViewProps} from "react-native";
 import { Text } from "./common/Text";

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

-export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"]} & ViewProps> = ({
+export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"], textStyle?: StyleProp<TextStyle>} & ViewProps> = ({
  text,
  textClass,
+  textStyle,
  ...props
 }) => {
  return (
    <View className="bg-neutral-800 rounded-full px-2 py-1" {...props}>
-      <Text className={textClass}>{text}</Text>
+      <Text className={textClass} style={textStyle}>{text}</Text>
    </View>
  );
 };
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -29,6 +29,27 @@ export const MediaSourceSelector: React.FC<Props> = ({
    [item, selected]
  );

+  const commonPrefix = useMemo(() => {
+    const mediaSources = item.MediaSources || [];
+    if (!mediaSources.length) return "";
+
+    let commonPrefix = "";
+    for (let i = 0; i < mediaSources[0].Name.length; i++) {
+      const char = mediaSources[0].Name[i];
+      if (mediaSources.every((source) => source.Name[i] === char)) {
+        commonPrefix += char;
+      } else {
+        commonPrefix = commonPrefix.slice(0, -1);
+        break;
+      }
+    }
+    return commonPrefix;
+  }, [item.MediaSources]);
+
+  const name = (name?: string | null) => {
+    return name?.replace(commonPrefix, "").toLowerCase();
+  };
+
  return (
    <View
      className="flex shrink"
@@ -63,9 +84,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
              }}
            >
              <DropdownMenu.ItemTitle>
-                {`${name(source.Name)} - ${convertBitsToMegabitsOrGigabits(
-                  source.Size
-                )}`}
+                {`${name(source.Name)}`}
              </DropdownMenu.ItemTitle>
            </DropdownMenu.Item>
          ))}
@@ -74,9 +93,3 @@ export const MediaSourceSelector: React.FC<Props> = ({
    </View>
  );
 };
-
-const name = (name?: string | null) => {
-  if (name && name.length > 40)
-    return name.substring(0, 20) + " [...] " + name.substring(name.length - 20);
-  return name;
-};
--- 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/common/Dropdown.tsx
+++ b/components/common/Dropdown.tsx
@@ -0,0 +1,95 @@
+import * as DropdownMenu from "zeego/dropdown-menu";
+import {TouchableOpacity, View, ViewProps} from "react-native";
+import {Text} from "@/components/common/Text";
+import React, {PropsWithChildren, useEffect, useState} from "react";
+
+interface Props<T> {
+  data: T[]
+  placeholderText?: string,
+  keyExtractor: (item: T) => string
+  titleExtractor: (item: T) => string
+  title: string,
+  label: string,
+  onSelected: (...item: T[]) => void
+  multi?: boolean
+}
+
+const Dropdown =  <T extends unknown>({
+  data,
+  placeholderText,
+  keyExtractor,
+  titleExtractor,
+  title,
+  label,
+  onSelected,
+  multi = false,
+  ...props
+}: PropsWithChildren<Props<T> & ViewProps>) => {
+  const [selected, setSelected] = useState<T[]>();
+
+  useEffect(() => {
+    if (selected !== undefined) {
+      onSelected(...selected)
+    }
+  }, [selected]);
+
+  return (
+    <View {...props}>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <View className="flex flex-col">
+            <Text className="opacity-50 mb-1 text-xs">
+              {title}
+            </Text>
+            <TouchableOpacity
+              className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
+              <Text style={{}} className="" numberOfLines={1}>
+                {selected?.length !== undefined ? selected.map(titleExtractor).join(",") : placeholderText}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={false}
+          side="bottom"
+          align="center"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={0}
+          sideOffset={0}
+        >
+          <DropdownMenu.Label>{label}</DropdownMenu.Label>
+          {data.map((item, idx) => (
+            multi ? (
+                <DropdownMenu.CheckboxItem
+                  value={selected?.some(s => keyExtractor(s) == keyExtractor(item)) ? 'on' : 'off'}
+                  key={keyExtractor(item)}
+                  onValueChange={(next, previous) =>
+                    setSelected((p) => {
+                      const prev = p || []
+                      if (next == 'on') {
+                        return [...prev, item]
+                      }
+                      return [...prev.filter(p => keyExtractor(p) !== keyExtractor(item))]
+                    })
+                  }
+                >
+                  <DropdownMenu.ItemTitle>{titleExtractor(item)}</DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              )
+              : (
+                <DropdownMenu.Item
+                  key={keyExtractor(item)}
+                  onSelect={() => setSelected([item])}
+                >
+                  <DropdownMenu.ItemTitle>{titleExtractor(item)}</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              )
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  )
+};
+
+export default Dropdown;
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -7,7 +7,7 @@ export function Input(props: TextInputProps) {
  return (
    <TextInput
      ref={inputRef}
-      className="p-4 border border-neutral-800 rounded-xl bg-neutral-900"
+      className="p-4  rounded-xl bg-neutral-900"
      allowFontScaling={false}
      style={[{ color: "white" }, style]}
      placeholderTextColor={"#9CA3AF"}
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -4,9 +4,11 @@ import {
  BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter, useSegments } from "expo-router";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps } from "react-native";
 import * as ContextMenu from "zeego/context-menu";
+import { useActionSheet } from "@expo/react-native-action-sheet";
+import * as Haptics from "expo-haptics";

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

  const from = segments[2];

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

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

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

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

-export default JellyseerrIconStatus;
+export default JellyseerrStatusIcon;
--- a/components/jellyseerr/ParallaxSlideShow.tsx
+++ b/components/jellyseerr/ParallaxSlideShow.tsx
@@ -0,0 +1,160 @@
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {Dimensions, View, ViewProps} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { Text } from "@/components/common/Text";
+import { Animated } from "react-native";
+import { FlashList } from "@shopify/flash-list";
+import {useFocusEffect} from "expo-router";
+
+const ANIMATION_ENTER = 250;
+const ANIMATION_EXIT = 250;
+const BACKDROP_DURATION = 5000;
+
+type Render = React.ComponentType<any>
+  | React.ReactElement
+  | null
+  | undefined;
+
+interface Props<T> {
+  data: T[]
+  images: string[];
+  logo?: React.ReactElement;
+  HeaderContent?: () => React.ReactElement;
+  MainContent?: () => React.ReactElement;
+  listHeader: string;
+  renderItem: (item: T, index: number) => Render;
+  keyExtractor: (item: T) => string;
+  onEndReached?: (() => void) | null | undefined;
+}
+
+const ParallaxSlideShow = <T extends unknown>({
+  data,
+  images,
+  logo,
+  HeaderContent,
+  MainContent,
+  listHeader,
+  renderItem,
+  keyExtractor,
+  onEndReached,
+  ...props
+}: PropsWithChildren<Props<T> & ViewProps>
+) => {
+  const insets = useSafeAreaInsets();
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  const enterAnimation = useCallback(
+    () =>
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: ANIMATION_ENTER,
+        useNativeDriver: true,
+      }),
+    [fadeAnim]
+  );
+
+  const exitAnimation = useCallback(
+    () =>
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: ANIMATION_EXIT,
+        useNativeDriver: true,
+      }),
+    [fadeAnim]
+  );
+
+  useEffect(() => {
+    if (images?.length) {
+      enterAnimation().start();
+
+      const intervalId = setInterval(() => {
+        Animated.sequence([
+          enterAnimation(),
+          exitAnimation()
+        ]).start(() => {
+          fadeAnim.setValue(0);
+          setCurrentIndex((prevIndex) => (prevIndex + 1) % images?.length);
+        })
+      }, BACKDROP_DURATION);
+
+      return () => {
+        clearInterval(intervalId)
+      };
+    }
+  }, [fadeAnim, images, enterAnimation, exitAnimation, setCurrentIndex, currentIndex]);
+
+  return (
+    <View
+      className="flex-1 relative"
+      style={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <ParallaxScrollView
+        className="flex-1 opacity-100"
+        headerHeight={300}
+        onEndReached={onEndReached}
+        headerImage={
+          <Animated.Image
+            key={images?.[currentIndex]}
+            id={images?.[currentIndex]}
+            source={{
+              uri: images?.[currentIndex],
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              opacity: fadeAnim,
+            }}
+          />
+        }
+        logo={logo}
+      >
+        <View className="flex flex-col space-y-4 px-4">
+          <View className="flex flex-row justify-between w-full">
+            <View className="flex flex-col w-full">
+              {HeaderContent && HeaderContent()}
+            </View>
+          </View>
+          {MainContent && MainContent()}
+          <View>
+            <FlashList
+              data={data}
+              ListEmptyComponent={
+                <View className="flex flex-col items-center justify-center h-full">
+                  <Text className="font-bold text-xl text-neutral-500">
+                    No results
+                  </Text>
+                </View>
+              }
+              contentInsetAdjustmentBehavior="automatic"
+              ListHeaderComponent={
+                <Text className="text-lg font-bold my-2">{listHeader}</Text>
+              }
+              nestedScrollEnabled
+              showsVerticalScrollIndicator={false}
+              //@ts-ignore
+              renderItem={({ item, index}) => renderItem(item, index)}
+              keyExtractor={keyExtractor}
+              numColumns={3}
+              estimatedItemSize={214}
+              ItemSeparatorComponent={() => <View className="h-2 w-2" />}
+            />
+          </View>
+        </View>
+      </ParallaxScrollView>
+    </View>
+  );
+}
+
+export default ParallaxSlideShow;
--- a/components/jellyseerr/PersonPoster.tsx
+++ b/components/jellyseerr/PersonPoster.tsx
@@ -0,0 +1,42 @@
+import {TouchableOpacity, View, ViewProps} from "react-native";
+import React from "react";
+import {Text} from "@/components/common/Text";
+import Poster from "@/components/posters/Poster";
+import {useRouter, useSegments} from "expo-router";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+
+interface Props {
+  id: string
+  posterPath?: string
+  name: string
+  subName?: string
+}
+
+const PersonPoster: React.FC<Props & ViewProps> = ({
+  id,
+  posterPath,
+  name,
+  subName,
+  ...props
+}) => {
+  const {jellyseerrApi} = useJellyseerr();
+  const router = useRouter();
+  const segments = useSegments();
+  const from = segments[2];
+
+  if (from === "(home)" || from === "(search)" || from === "(libraries)")
+    return (
+      <TouchableOpacity onPress={() => router.push(`/(auth)/(tabs)/${from}/jellyseerr/person/${id}`)}>
+        <View className="flex flex-col w-28" {...props}>
+          <Poster
+            id={id}
+            url={jellyseerrApi?.imageProxy(posterPath, 'w600_and_h900_bestv2')}
+          />
+          <Text className="mt-2">{name}</Text>
+          {subName && <Text className="text-xs opacity-50">{subName}</Text>}
+        </View>
+      </TouchableOpacity>
+    )
+}
+
+export default PersonPoster;
--- a/components/jellyseerr/RequestModal.tsx
+++ b/components/jellyseerr/RequestModal.tsx
@@ -0,0 +1,233 @@
+import React, {forwardRef, useCallback, useMemo, useState} from "react";
+import {View, ViewProps} from "react-native";
+import {useJellyseerr} from "@/hooks/useJellyseerr";
+import {useQuery} from "@tanstack/react-query";
+import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import {BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal, BottomSheetView} from "@gorhom/bottom-sheet";
+import Dropdown from "@/components/common/Dropdown";
+import {QualityProfile, RootFolder, Tag} from "@/utils/jellyseerr/server/api/servarr/base";
+import {MediaRequestBody} from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import {BottomSheetModalMethods} from "@gorhom/bottom-sheet/lib/typescript/types";
+import {Button} from "@/components/Button";
+import {Text} from "@/components/common/Text";
+
+interface Props {
+  id: number;
+  title: string,
+  type: MediaType;
+  isAnime?: boolean;
+  is4k?: boolean;
+  onRequested?: () => void;
+}
+
+const RequestModal = forwardRef<BottomSheetModalMethods, Props & Omit<ViewProps, 'id'>>(({
+  id,
+  title,
+  type,
+  isAnime = false,
+  onRequested,
+  ...props
+}, ref) => {
+  const {jellyseerrApi, jellyseerrUser, requestMedia} = useJellyseerr();
+  const [requestOverrides, setRequestOverrides] =
+    useState<MediaRequestBody>({
+      mediaId: Number(id),
+      mediaType: type,
+      userId: jellyseerrUser?.id
+    });
+
+  const [modalRequestProps, setModalRequestProps] = useState<MediaRequestBody>();
+
+  const {data: serviceSettings} = useQuery({
+    queryKey: ["jellyseerr", "request", type, 'service'],
+    queryFn: async () => jellyseerrApi?.service(type == 'movie' ? 'radarr' : 'sonarr'),
+    enabled: !!jellyseerrApi && !!jellyseerrUser,
+    refetchOnMount: 'always'
+  });
+
+  const {data: users} = useQuery({
+    queryKey: ["jellyseerr", "users"],
+    queryFn: async () => jellyseerrApi?.user({take: 1000, sort: 'displayname'}),
+    enabled: !!jellyseerrApi && !!jellyseerrUser,
+    refetchOnMount: 'always'
+  });
+
+  const defaultService = useMemo(
+    () => serviceSettings?.find?.(v => v.isDefault),
+    [serviceSettings]
+  );
+
+  const {data: defaultServiceDetails} = useQuery({
+    queryKey: ["jellyseerr", "request", type, 'service', 'details', defaultService?.id],
+    queryFn: async () => {
+      setRequestOverrides((prev) => ({
+        ...prev,
+        serverId: defaultService?.id
+      }))
+      return jellyseerrApi?.serviceDetails(type === 'movie' ? 'radarr' : 'sonarr', defaultService!!.id)
+    },
+    enabled: !!jellyseerrApi && !!jellyseerrUser && !!defaultService,
+    refetchOnMount: 'always',
+  });
+
+  const defaultProfile: QualityProfile = useMemo(
+    () => defaultServiceDetails?.profiles
+      .find(p =>
+        p.id === (isAnime ? defaultServiceDetails.server?.activeAnimeProfileId : defaultServiceDetails.server?.activeProfileId)
+      ),
+    [defaultServiceDetails]
+  );
+
+  const defaultFolder: RootFolder = useMemo(
+    () => defaultServiceDetails?.rootFolders
+      .find(f =>
+        f.path === (isAnime ? defaultServiceDetails?.server.activeAnimeDirectory : defaultServiceDetails.server?.activeDirectory)
+    ),
+    [defaultServiceDetails]
+  );
+
+  const defaultTags: Tag[] = useMemo(
+    () => {
+      const tags =  defaultServiceDetails?.tags
+        .filter(t =>
+          (isAnime
+            ? defaultServiceDetails?.server.activeAnimeTags
+            : defaultServiceDetails?.server.activeTags
+          )?.includes(t.id)
+        ) ?? []
+
+      console.log(tags)
+      return tags
+    },
+    [defaultServiceDetails]
+  );
+
+  const seasonTitle = useMemo(
+    () => modalRequestProps?.seasons?.length ? `Season (${modalRequestProps?.seasons})` : undefined,
+    [modalRequestProps?.seasons]
+  );
+
+  const request = useCallback(() => {requestMedia(
+      seasonTitle ? `${title}, ${seasonTitle}` : title,
+      {
+        is4k: defaultService?.is4k || defaultServiceDetails?.server.is4k,
+        profileId: defaultProfile.id,
+        rootFolder: defaultFolder.path,
+        tags: defaultTags.map(t => t.id),
+        ...modalRequestProps,
+        ...requestOverrides
+      },
+      onRequested
+    )
+  }, [requestOverrides, defaultProfile, defaultFolder, defaultTags]);
+
+  const pathTitleExtractor = (item: RootFolder) => `${item.path} (${item.freeSpace.bytesToReadable()})`;
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      enableDynamicSizing
+      enableDismissOnClose
+      onDismiss={() => setModalRequestProps(undefined)}
+      handleIndicatorStyle={{
+        backgroundColor: "white",
+      }}
+      backgroundStyle={{
+        backgroundColor: "#171717",
+      }}
+      backdropComponent={(sheetProps: BottomSheetBackdropProps) =>
+        <BottomSheetBackdrop
+          {...sheetProps}
+          disappearsOnIndex={-1}
+          appearsOnIndex={0}
+        />
+      }
+    >
+      {(data) => {
+        setModalRequestProps(data?.data as MediaRequestBody)
+        return <BottomSheetView>
+          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+            <View>
+              <Text className="font-bold text-2xl text-neutral-100">Advanced</Text>
+              {seasonTitle &&
+                  <Text className="text-neutral-300">{seasonTitle}</Text>
+              }
+            </View>
+            <View className="flex flex-col space-y-2">
+              {(defaultService && defaultServiceDetails && users) && (
+                <>
+                  <Dropdown
+                    data={defaultServiceDetails.profiles}
+                    titleExtractor={(item) => item.name}
+                    placeholderText={defaultProfile.name}
+                    keyExtractor={(item) => item.id.toString()}
+                    label={"Quality Profile"}
+                    onSelected={(item) =>
+                      item && setRequestOverrides((prev) => ({
+                        ...prev,
+                        profileId: item?.id
+                      }))
+                    }
+                    title={"Quality Profile"}
+                  />
+                  <Dropdown
+                    data={defaultServiceDetails.rootFolders}
+                    titleExtractor={pathTitleExtractor}
+                    placeholderText={defaultFolder ? pathTitleExtractor(defaultFolder) : ""}
+                    keyExtractor={(item) => item.id.toString()}
+                    label={"Root Folder"}
+                    onSelected={(item) =>
+                      item && setRequestOverrides((prev) => ({
+                        ...prev,
+                        rootFolder: item.path
+                      }))}
+                    title={"Root Folder"}
+                  />
+                  <Dropdown
+                    multi={true}
+                    data={defaultServiceDetails.tags}
+                    titleExtractor={(item) => item.label}
+                    placeholderText={defaultTags.map(t => t.label).join(",")}
+                    keyExtractor={(item) => item.id.toString()}
+                    label={"Tags"}
+                    onSelected={(...item) =>
+                      item && setRequestOverrides((prev) => ({
+                        ...prev,
+                        tags: item.map(i => i.id)
+                      }))
+                    }
+                    title={"Tags"}
+                  />
+                  <Dropdown
+                    data={users}
+                    titleExtractor={(item) => item.displayName}
+                    placeholderText={jellyseerrUser!!.displayName}
+                    keyExtractor={(item) => item.id.toString() || ""}
+                    label={"Request As"}
+                    onSelected={(item) =>
+                      item && setRequestOverrides((prev) => ({
+                        ...prev,
+                        userId: item?.id
+                      }))
+                    }
+                    title={"Request As"}
+                  />
+                </>
+              )
+              }
+            </View>
+            <Button
+              className="mt-auto"
+              onPress={request}
+              color="purple"
+            >
+              Request
+            </Button>
+          </View>
+        </BottomSheetView>
+      }}
+    </BottomSheetModal>
+  );
+});
+
+export default RequestModal;
--- a/components/jellyseerr/discover/CompanySlide.tsx
+++ b/components/jellyseerr/discover/CompanySlide.tsx
@@ -0,0 +1,41 @@
+import React, {useCallback} from "react";
+import {
+  useJellyseerr,
+} from "@/hooks/useJellyseerr";
+import {TouchableOpacity, ViewProps} from "react-native";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import {COMPANY_LOGO_IMAGE_FILTER, Network} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
+import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
+import {Studio} from "@/utils/jellyseerr/src/components/Discover/StudioSlider";
+import {router, useSegments} from "expo-router";
+
+const CompanySlide: React.FC<{data: Network[] | Studio[]} & SlideProps & ViewProps> = ({ slide, data, ...props }) => {
+  const segments = useSegments();
+  const { jellyseerrApi } = useJellyseerr();
+  const from = segments[2];
+
+  const navigate = useCallback(({id, image, name}: Network | Studio) => router.push({
+    pathname: `/(auth)/(tabs)/${from}/jellyseerr/company/${id}`,
+    params: {id, image, name, type: slide.type }
+  }), [slide]);
+
+  return (
+    <Slide
+      {...props}
+      slide={slide}
+      data={data}
+      keyExtractor={(item) => item.id.toString()}
+      renderItem={(item, index) => (
+        <TouchableOpacity className="mr-2" onPress={() => navigate(item)}>
+          <GenericSlideCard
+            className="w-28 rounded-lg overflow-hidden border border-neutral-900 p-4"
+            id={item.id.toString()}
+            url={jellyseerrApi?.imageProxy(item.image, COMPANY_LOGO_IMAGE_FILTER)}
+          />
+        </TouchableOpacity>
+      )}
+    />
+  );
+};
+
+export default CompanySlide;
--- a/components/jellyseerr/discover/Discover.tsx
+++ b/components/jellyseerr/discover/Discover.tsx
@@ -0,0 +1,47 @@
+import React, {useMemo} from "react";
+import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import {sortBy} from "lodash";
+import MovieTvSlide from "@/components/jellyseerr/discover/MovieTvSlide";
+import CompanySlide from "@/components/jellyseerr/discover/CompanySlide";
+import {View} from "react-native";
+import {networks} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
+import {studios} from "@/utils/jellyseerr/src/components/Discover/StudioSlider";
+import GenreSlide from "@/components/jellyseerr/discover/GenreSlide";
+
+interface Props {
+  sliders?: DiscoverSlider[];
+}
+const Discover: React.FC<Props> = ({ sliders }) => {
+  if (!sliders)
+    return;
+
+  const sortedSliders = useMemo(
+    () => sortBy(sliders.filter((s) => s.enabled), 'order', 'asc'),
+    [sliders]
+  );
+
+  return (
+    <View className="flex flex-col space-y-4 mb-8">
+      {sortedSliders.map(slide => {
+        switch (slide.type) {
+          case DiscoverSliderType.NETWORKS:
+            return <CompanySlide key={slide.id} slide={slide} data={networks}/>
+          case DiscoverSliderType.STUDIOS:
+            return <CompanySlide key={slide.id} slide={slide} data={studios}/>
+          case DiscoverSliderType.MOVIE_GENRES:
+          case DiscoverSliderType.TV_GENRES:
+            return <GenreSlide key={slide.id} slide={slide} />
+          case DiscoverSliderType.TRENDING:
+          case DiscoverSliderType.POPULAR_MOVIES:
+          case DiscoverSliderType.UPCOMING_MOVIES:
+          case DiscoverSliderType.POPULAR_TV:
+          case DiscoverSliderType.UPCOMING_TV:
+            return <MovieTvSlide key={slide.id} slide={slide}/>
+        }
+      })}
+    </View>
+  )
+};
+
+export default Discover;
--- a/components/jellyseerr/discover/GenericSlideCard.tsx
+++ b/components/jellyseerr/discover/GenericSlideCard.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import {StyleSheet, View, ViewProps} from "react-native";
+import {Image, ImageContentFit} from "expo-image";
+import {Text} from "@/components/common/Text";
+import {LinearGradient} from "expo-linear-gradient";
+
+export const textShadowStyle = StyleSheet.create({
+  shadow: {
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    shadowOpacity: 1,
+    shadowRadius: .5,
+
+    elevation: 6,
+  }
+})
+
+const GenericSlideCard: React.FC<{id: string; url?: string, title?: string, colors?: string[], contentFit?: ImageContentFit} & ViewProps> = ({
+  id,
+  url,
+  title,
+  colors = ['#9333ea', 'transparent'],
+  contentFit = "contain",
+  ...props
+}) => (
+  <>
+    <LinearGradient
+      colors={colors}
+      start={{x: 0.5, y: 1.75}}
+      end={{x: 0.5, y: 0}}
+      className="rounded-xl"
+    >
+      <View className="rounded-xl" {...props}>
+        <Image
+          key={id}
+          id={id}
+          source={url ? {uri: url} : null}
+          cachePolicy={"memory-disk"}
+          contentFit={contentFit}
+          style={{
+            aspectRatio: "4/3",
+          }}
+        />
+        {title &&
+            <View
+                className="absolute justify-center top-0 left-0 right-0 bottom-0 items-center"
+            >
+                <Text className="text-center font-bold" style={textShadowStyle.shadow}>{title}</Text>
+            </View>
+        }
+      </View>
+    </LinearGradient>
+  </>
+);
+
+export default GenericSlideCard;
--- a/components/jellyseerr/discover/GenreSlide.tsx
+++ b/components/jellyseerr/discover/GenreSlide.tsx
@@ -0,0 +1,56 @@
+import React, {useCallback} from "react";
+import {Endpoints, useJellyseerr,} from "@/hooks/useJellyseerr";
+import {TouchableOpacity, ViewProps} from "react-native";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import GenericSlideCard from "@/components/jellyseerr/discover/GenericSlideCard";
+import {router, useSegments} from "expo-router";
+import {useQuery} from "@tanstack/react-query";
+import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
+import {genreColorMap} from "@/utils/jellyseerr/src/components/Discover/constants";
+import {GenreSliderItem} from "@/utils/jellyseerr/server/interfaces/api/discoverInterfaces";
+
+const GenreSlide: React.FC<SlideProps & ViewProps> = ({ slide, ...props }) => {
+  const segments = useSegments();
+  const { jellyseerrApi } = useJellyseerr();
+  const from = segments[2];
+
+  const navigate = useCallback((genre: GenreSliderItem) => router.push({
+    pathname: `/(auth)/(tabs)/${from}/jellyseerr/genre/${genre.id}`,
+    params: {type: slide.type, name: genre.name}
+  }), [slide]);
+
+  const {data, isFetching, isLoading } = useQuery({
+    queryKey: ['jellyseerr', 'discover', slide.type, slide.id],
+    queryFn: async () => {
+      return jellyseerrApi?.getGenreSliders(
+        slide.type == DiscoverSliderType.MOVIE_GENRES
+          ? Endpoints.MOVIE
+          : Endpoints.TV
+      )
+    },
+    enabled: !!jellyseerrApi
+  })
+
+  return (
+    data && <Slide
+      {...props}
+      slide={slide}
+      data={data}
+      keyExtractor={(item) => item.id.toString()}
+      renderItem={(item, index) => (
+        <TouchableOpacity className="mr-2" onPress={() => navigate(item)}>
+          <GenericSlideCard
+            className="w-28 rounded-lg overflow-hidden border border-neutral-900"
+            id={item.id.toString()}
+            title={item.name}
+            colors={[]}
+            contentFit={"cover"}
+            url={jellyseerrApi?.imageProxy(item.backdrops?.[0], `w780_filter(duotone,${genreColorMap[item.id] ?? genreColorMap[0]})`)}
+          />
+        </TouchableOpacity>
+      )}
+    />
+  );
+};
+
+export default GenreSlide;
--- a/components/jellyseerr/discover/MovieTvSlide.tsx
+++ b/components/jellyseerr/discover/MovieTvSlide.tsx
@@ -1,5 +1,4 @@
-import React, { useMemo } from "react";
-import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import React, {useMemo} from "react";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import {
  DiscoverEndpoint,
@@ -9,17 +8,13 @@ import {
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import { Text } from "@/components/common/Text";
-import { FlashList } from "@shopify/flash-list";
-import { View } from "react-native";
+import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
+import {ViewProps} from "react-native";

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

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

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

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

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

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

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

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

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

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

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

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

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

 const JellyseerrSeasonEpisodes: React.FC<{
  details: TvDetails;
@@ -61,7 +62,7 @@ const RenderItem = ({ item, index }: any) => {
            key={item.id}
            id={item.id}
            source={{
-              uri: jellyseerrApi?.tvStillImageProxy(item.stillPath),
+              uri: jellyseerrApi?.imageProxy(item.stillPath),
            }}
            cachePolicy={"memory-disk"}
            contentFit="cover"
@@ -101,8 +102,17 @@ const JellyseerrSeasons: React.FC<{
  isLoading: boolean;
  result?: TvResult;
  details?: TvDetails;
+  hasAdvancedRequest?: boolean,
+  onAdvancedRequest?: (data: MediaRequestBody) => void;
  refetch:  (options?: (RefetchOptions | undefined)) => Promise<QueryObserverResult<TvDetails | MovieDetails | undefined, Error>>;
-}> = ({ isLoading, result, details, refetch }) => {
+}> = ({
+  isLoading,
+  result,
+  details,
+  refetch,
+  hasAdvancedRequest,
+  onAdvancedRequest,
+}) => {
  if (!details) return null;

  const { jellyseerrApi, requestMedia } = useJellyseerr();
@@ -142,7 +152,7 @@ const JellyseerrSeasons: React.FC<{

  const requestAll = useCallback(() => {
    if (details && jellyseerrApi) {
-      requestMedia(result?.name!!, {
+      const body: MediaRequestBody = {
        mediaId: details.id,
        mediaType: MediaType.TV,
        tvdbId: details.externalIds?.tvdbId,
@@ -151,9 +161,15 @@ const JellyseerrSeasons: React.FC<{
            (s) => s.status === MediaStatus.UNKNOWN && s.seasonNumber !== 0
          )
          .map((s) => s.seasonNumber),
-      });
+      }
+
+      if (hasAdvancedRequest) {
+        return onAdvancedRequest?.(body)
+      }
+
+      requestMedia(result?.name!!, body, refetch);
    }
-  }, [jellyseerrApi, seasons, details]);
+  }, [jellyseerrApi, seasons, details, hasAdvancedRequest, onAdvancedRequest]);

  const promptRequestAll = useCallback(
    () =>
@@ -172,18 +188,20 @@ const JellyseerrSeasons: React.FC<{

  const requestSeason = useCallback(async (canRequest: Boolean, seasonNumber: number) => {
    if (canRequest) {
-      requestMedia(
-        `${result?.name!!}, Season ${seasonNumber}`,
-        {
-          mediaId: details.id,
-          mediaType: MediaType.TV,
-          tvdbId: details.externalIds?.tvdbId,
-          seasons: [seasonNumber],
-        },
-        refetch
-      )
+      const body: MediaRequestBody = {
+        mediaId: details.id,
+        mediaType: MediaType.TV,
+        tvdbId: details.externalIds?.tvdbId,
+        seasons: [seasonNumber],
+      }
+
+      if (hasAdvancedRequest) {
+        return onAdvancedRequest?.(body)
+      }
+
+      requestMedia(`${result?.name!!}, Season ${seasonNumber}`, body, refetch);
    }
-  }, [requestMedia]);
+  }, [requestMedia, hasAdvancedRequest, onAdvancedRequest]);

  if (isLoading)
    return (
@@ -246,7 +264,7 @@ const JellyseerrSeasons: React.FC<{
                  seasons?.find((s) => s.seasonNumber === season.seasonNumber)
                    ?.status === MediaStatus.UNKNOWN;
                return (
-                  <JellyseerrIconStatus
+                  <JellyseerrStatusIcon
                    key={0}
                    onPress={() => requestSeason(canRequest, season.seasonNumber)}
                    className={canRequest ? "bg-gray-700/40" : undefined}
--- a/components/series/SeriesActions.tsx
+++ b/components/series/SeriesActions.tsx
@@ -1,24 +1,45 @@
+import { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import { Ionicons } from "@expo/vector-icons";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
 import { useCallback, useMemo } from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import {
+  Alert,
+  Linking,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from "react-native";

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

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

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

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

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

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

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

  /********************
@@ -54,7 +56,7 @@ export const OtherSettings: React.FC = () => {
  if (!settings) return null;

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

+  const { height: screenHeight, width: screenWidth } = useWindowDimensions();
  const { previousItem, nextItem } = useAdjacentItems({ item });
  const {
    trickPlayUrl,
@@ -157,10 +161,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 +204,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 +332,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 +350,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 +367,7 @@ export const Controls: React.FC<Props> = ({

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

  const memoizedRenderBubble = useCallback(() => {
@@ -440,7 +446,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,
@@ -497,41 +503,20 @@ export const Controls: React.FC<Props> = ({
        />
      ) : (
        <>
-          <VideoProvider
-            getAudioTracks={getAudioTracks}
-            getSubtitleTracks={getSubtitleTracks}
-            setAudioTrack={setAudioTrack}
-            setSubtitleTrack={setSubtitleTrack}
-            setSubtitleURL={setSubtitleURL}
-          >
-            <View
-              style={[
-                {
-                  position: "absolute",
-                  top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
-                  left: settings?.safeAreaInControlsEnabled ? insets.left : 0,
-                  opacity: showControls ? 1 : 0,
-                  zIndex: 1000,
-                },
-              ]}
-              className={`flex flex-row items-center space-x-2 z-10 p-4 `}
-            >
-              {!mediaSource?.TranscodingUrl ? (
-                <DropdownViewDirect showControls={showControls} />
-              ) : (
-                <DropdownViewTranscoding showControls={showControls} />
-              )}
-            </View>
-          </VideoProvider>
-
          <Pressable
            onPressIn={() => {
              toggleControls();
            }}
            style={{
              position: "absolute",
-              width: Dimensions.get("window").width,
-              height: Dimensions.get("window").height,
+              width: screenWidth,
+              height: screenHeight,
+              backgroundColor: "black",
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              opacity: showControls ? 0.5 : 0,
            }}
          ></Pressable>

@@ -541,41 +526,61 @@ export const Controls: React.FC<Props> = ({
                position: "absolute",
                top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
                right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
+                width: settings?.safeAreaInControlsEnabled
+                  ? screenWidth - insets.left - insets.right
+                  : screenWidth,
                opacity: showControls ? 1 : 0,
              },
            ]}
            pointerEvents={showControls ? "auto" : "none"}
-            className={`flex flex-row items-center space-x-2 z-10 p-4 `}
+            className={`flex flex-row w-full p-4 `}
          >
-            {item?.Type === "Episode" && !offline && (
-              <TouchableOpacity
-                onPress={() => {
-                  switchOnEpisodeMode();
-                }}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+            <View className="mr-auto">
+              <VideoProvider
+                getAudioTracks={getAudioTracks}
+                getSubtitleTracks={getSubtitleTracks}
+                setAudioTrack={setAudioTrack}
+                setSubtitleTrack={setSubtitleTrack}
+                setSubtitleURL={setSubtitleURL}
              >
-                <Ionicons name="list" size={24} color="white" />
-              </TouchableOpacity>
-            )}
-            {previousItem && !offline && (
-              <TouchableOpacity
-                onPress={goToPreviousItem}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-              >
-                <Ionicons name="play-skip-back" size={24} color="white" />
-              </TouchableOpacity>
-            )}
+                {!mediaSource?.TranscodingUrl ? (
+                  <DropdownViewDirect showControls={showControls} />
+                ) : (
+                  <DropdownViewTranscoding showControls={showControls} />
+                )}
+              </VideoProvider>
+            </View>

-            {nextItem && !offline && (
-              <TouchableOpacity
-                onPress={goToNextItem}
-                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-              >
-                <Ionicons name="play-skip-forward" size={24} color="white" />
-              </TouchableOpacity>
-            )}
+            <View className="flex flex-row items-center space-x-2 ">
+              {item?.Type === "Episode" && !offline && (
+                <TouchableOpacity
+                  onPress={() => {
+                    switchOnEpisodeMode();
+                  }}
+                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                >
+                  <Ionicons name="list" size={24} color="white" />
+                </TouchableOpacity>
+              )}
+              {previousItem && !offline && (
+                <TouchableOpacity
+                  onPress={goToPreviousItem}
+                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                >
+                  <Ionicons name="play-skip-back" size={24} color="white" />
+                </TouchableOpacity>
+              )}

-            {mediaSource?.TranscodingUrl && (
+              {nextItem && !offline && (
+                <TouchableOpacity
+                  onPress={goToNextItem}
+                  className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+                >
+                  <Ionicons name="play-skip-forward" size={24} color="white" />
+                </TouchableOpacity>
+              )}
+
+              {/* {mediaSource?.TranscodingUrl && ( */}
              <TouchableOpacity
                onPress={toggleIgnoreSafeAreas}
                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
@@ -586,16 +591,20 @@ export const Controls: React.FC<Props> = ({
                  color="white"
                />
              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              onPress={async () => {
-                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-                router.back();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
+              {/* )} */}
+              <TouchableOpacity
+                onPress={async () => {
+                  lightHapticFeedback();
+                  await ScreenOrientation.lockAsync(
+                    ScreenOrientation.OrientationLock.PORTRAIT_UP
+                  );
+                  router.back();
+                }}
+                className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+              >
+                <Ionicons name="close" size={24} color="white" />
+              </TouchableOpacity>
+            </View>
          </View>

          <View
--- a/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
@@ -118,14 +118,7 @@ const DropdownView: React.FC<DropdownViewProps> = ({ showControls }) => {
  );

  return (
-    <View
-      style={{
-        position: "absolute",
-        zIndex: 1000,
-        opacity: showControls ? 1 : 0,
-      }}
-      className="p-4"
-    >
+    <View>
      <DropdownMenu.Root>
        <DropdownMenu.Trigger>
          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
--- a/eas.json
+++ b/eas.json
@@ -22,13 +22,13 @@
      }
    },
    "production": {
-      "channel": "0.23.0",
+      "channel": "0.25.0",
      "android": {
        "image": "latest"
      }
    },
    "production-apk": {
-      "channel": "0.23.0",
+      "channel": "0.25.0",
      "android": {
        "buildType": "apk",
        "image": "latest"
--- 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/useDownloadedFileOpener.ts
+++ b/hooks/useDownloadedFileOpener.ts
@@ -1,6 +1,5 @@
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { writeToLog } from "@/utils/log";
-import { getFilePathFromItemId } from "@/utils/mmkv";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -18,13 +17,13 @@ export const getDownloadedFileUrl = async (itemId: string): Promise<string> => {
  }

  const files = await FileSystem.readDirectoryAsync(directory);
-  const filePath = getFilePathFromItemId(itemId);
-
-  const matchingFile = files.find((file) => file === filePath);
+  const path = itemId!;
+  const matchingFile = files.find((file) => file.startsWith(path));

  if (!matchingFile) {
-    throw new Error(`No file found for item ${filePath}`);
+    throw new Error(`No file found for item ${path}`);
  }
+
  return `${directory}${matchingFile}`;
 };

--- 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
@@ -28,6 +28,17 @@ import Issue from "@/utils/jellyseerr/server/entity/Issue";
 import { RTRating } from "@/utils/jellyseerr/server/api/rating/rottentomatoes";
 import { writeErrorLog } from "@/utils/log";
 import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
+import {
+  CombinedCredit,
+  PersonDetails,
+} from "@/utils/jellyseerr/server/models/Person";
+import { useQueryClient } from "@tanstack/react-query";
+import {GenreSliderItem} from "@/utils/jellyseerr/server/interfaces/api/discoverInterfaces";
+import {UserResultsResponse} from "@/utils/jellyseerr/server/interfaces/api/userInterfaces";
+import {
+  ServiceCommonServer,
+  ServiceCommonServerWithDetails
+} from "@/utils/jellyseerr/server/interfaces/api/serviceInterfaces";

 interface SearchParams {
  query: string;
@@ -55,19 +66,29 @@ export enum Endpoints {
  API_V1 = "/api/v1",
  SEARCH = "/search",
  REQUEST = "/request",
+  PERSON = "/person",
+  COMBINED_CREDITS = "/combined_credits",
  MOVIE = "/movie",
  RATINGS = "/ratings",
  ISSUE = "/issue",
+  USER = "/user",
+  SERVICE = "/service",
  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;
@@ -174,7 +195,7 @@ export class JellyseerrApi {
  }

  async discover(
-    endpoint: DiscoverEndpoint,
+    endpoint: DiscoverEndpoint | string,
    params: any
  ): Promise<SearchResults> {
    return this.axios
@@ -182,6 +203,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,
@@ -204,6 +234,27 @@ export class JellyseerrApi {
      });
  }

+  async personDetails(id: number | string): Promise<PersonDetails> {
+    return this.axios
+      ?.get<PersonDetails>(Endpoints.API_V1 + Endpoints.PERSON + `/${id}`)
+      .then((response) => {
+        return response?.data;
+      });
+  }
+
+  async personCombinedCredits(id: number | string): Promise<CombinedCredit> {
+    return this.axios
+      ?.get<CombinedCredit>(
+        Endpoints.API_V1 +
+          Endpoints.PERSON +
+          `/${id}` +
+          Endpoints.COMBINED_CREDITS
+      )
+      .then((response) => {
+        return response?.data;
+      });
+  }
+
  async movieRatings(id: number) {
    return this.axios
      ?.get<RTRating>(
@@ -238,14 +289,26 @@ export class JellyseerrApi {
      });
  }

-  tvStillImageProxy(path: string, width: number = 1920, quality: number = 75) {
-    return (
-      this.axios.defaults.baseURL +
-      `/_next/image?` +
-      new URLSearchParams(
-        `url=https://image.tmdb.org/t/p/original/${path}&w=${width}&q=${quality}`
-      ).toString()
-    );
+  async user(params: any) {
+    return this.axios
+      ?.get<UserResultsResponse>(`${Endpoints.API_V1}${Endpoints.USER}`, { params })
+      .then(({data}) =>  data.results)
+  }
+
+  imageProxy(
+    path?: string,
+    filter: string = "original",
+    width: number = 1920,
+    quality: number = 75
+  ) {
+    return path
+      ? this.axios.defaults.baseURL +
+          `/_next/image?` +
+          new URLSearchParams(
+            `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`;
  }

  async submitIssue(mediaId: number, issueType: IssueType, message: string) {
@@ -265,6 +328,18 @@ export class JellyseerrApi {
      });
  }

+  async service(type: 'radarr' | 'sonarr') {
+    return this.axios
+      ?.get<ServiceCommonServer[]>(Endpoints.API_V1 + Endpoints.SERVICE + `/${type}`)
+      .then(({data}) => data);
+  }
+
+  async serviceDetails(type: 'radarr' | 'sonarr', id: number) {
+    return this.axios
+      ?.get<ServiceCommonServerWithDetails>(Endpoints.API_V1 + Endpoints.SERVICE + `/${type}` + `/${id}`)
+      .then(({data}) => data);
+  }
+
  private setInterceptors() {
    this.axios.interceptors.response.use(
      async (response) => {
@@ -321,6 +396,7 @@ const jellyseerrUserAtom = atom(storage.get<JellyseerrUser>(JELLYSEERR_USER));
 export const useJellyseerr = () => {
  const [jellyseerrUser, setJellyseerrUser] = useAtom(jellyseerrUserAtom);
  const [settings, updateSettings] = useSettings();
+  const queryClient = useQueryClient();

  const jellyseerrApi = useMemo(() => {
    const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
@@ -338,12 +414,16 @@ export const useJellyseerr = () => {

  const requestMedia = useCallback(
    (title: string, request: MediaRequestBody, onSuccess?: () => void) => {
-      jellyseerrApi?.request?.(request)?.then((mediaRequest) => {
+      jellyseerrApi?.request?.(request)?.then(async (mediaRequest) => {
+        await queryClient.invalidateQueries({
+          queryKey: ["search", "jellyseerr"],
+        });
+
        switch (mediaRequest.status) {
          case MediaRequestStatus.PENDING:
          case MediaRequestStatus.APPROVED:
            toast.success(`Requested ${title}!`);
-            onSuccess?.()
+            onSuccess?.();
            break;
          case MediaRequestStatus.DECLINED:
            toast.error(`You don't have permission to request!`);
--- 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/hooks/useOrientationSettings.ts
+++ b/hooks/useOrientationSettings.ts
@@ -7,7 +7,9 @@ export const useOrientationSettings = () => {

  useEffect(() => {
    if (settings?.autoRotate) {
-      // Don't need to do anything
+      ScreenOrientation.lockAsync(
+        ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+      );
    } else if (settings?.defaultVideoOrientation) {
      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
    }
--- a/hooks/useRemuxHlsToMp4.ts
+++ b/hooks/useRemuxHlsToMp4.ts
@@ -18,7 +18,6 @@ import useDownloadHelper from "@/utils/download";
 import { Api } from "@jellyfin/sdk";
 import { useSettings } from "@/utils/atoms/settings";
 import { JobStatus } from "@/utils/optimize-server";
-import { formatItemName } from "@/utils/mmkv";

 const createFFmpegCommand = (url: string, output: string) => [
  "-y", // overwrite output files without asking
@@ -54,12 +53,7 @@ export const useRemuxHlsToMp4 = () => {
  const [settings] = useSettings();
  const { saveImage } = useImageStorage();
  const { saveSeriesPrimaryImage } = useDownloadHelper();
-  const {
-    saveDownloadedItemInfo,
-    setProcesses,
-    processes,
-    APP_CACHE_DOWNLOAD_DIRECTORY,
-  } = useDownload();
+  const { saveDownloadedItemInfo, setProcesses, processes, APP_CACHE_DOWNLOAD_DIRECTORY } = useDownload();

  const onSaveAssets = async (api: Api, item: BaseItemDto) => {
    await saveSeriesPrimaryImage(item);
@@ -79,12 +73,13 @@ export const useRemuxHlsToMp4 = () => {
      try {
        console.log("completeCallback");
        const returnCode = await session.getReturnCode();
+
        if (returnCode.isValueSuccess()) {
          const stat = await session.getLastReceivedStatistics();
          await FileSystem.moveAsync({
-            from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
-            to: `${FileSystem.documentDirectory}${formatItemName(item)}.mp4`,
-          });
+              from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
+              to: `${FileSystem.documentDirectory}${item.Id}.mp4`
+          })
          await queryClient.invalidateQueries({
            queryKey: ["downloadedItems"],
          });
@@ -136,16 +131,12 @@ export const useRemuxHlsToMp4 = () => {

  const startRemuxing = useCallback(
    async (item: BaseItemDto, url: string, mediaSource: MediaSourceInfo) => {
-      const cacheDir = await FileSystem.getInfoAsync(
-        APP_CACHE_DOWNLOAD_DIRECTORY
-      );
+      const cacheDir = await FileSystem.getInfoAsync(APP_CACHE_DOWNLOAD_DIRECTORY);
      if (!cacheDir.exists) {
-        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {
-          intermediates: true,
-        });
+        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {intermediates: true})
      }

-      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`;
+      const output = APP_CACHE_DOWNLOAD_DIRECTORY + `${item.Id}.mp4`

      if (!api) throw new Error("API is not defined");
      if (!item.Id) throw new Error("Item must have an Id");
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
  "version": "1.0.0",
  "scripts": {
    "submodule-reload": "git submodule update --init --remote --recursive",
+    "clean": "echo y | expo prebuild --clean",
    "start": "bun run submodule-reload && expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "bun run submodule-reload && expo run:android",
@@ -72,17 +73,18 @@
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-awesome-slider": "^2.5.6",
-    "react-native-bottom-tabs": "0.7.1",
+    "react-native-bottom-tabs": "0.7.8",
    "react-native-circular-progress": "^1.4.1",
    "react-native-compressor": "^1.9.0",
+    "react-native-country-flag": "^2.0.2",
    "react-native-device-info": "^14.0.1",
-    "react-native-edge-to-edge": "^1.1.1",
+    "react-native-edge-to-edge": "^1.1.3",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-get-random-values": "^1.11.0",
    "react-native-google-cast": "^4.8.3",
    "react-native-image-colors": "^2.4.0",
    "react-native-ios-context-menu": "^2.5.2",
-    "react-native-ios-utilities": "^4.5.1",
+    "react-native-ios-utilities": "4.5.3",
    "react-native-mmkv": "^2.12.2",
    "react-native-pager-view": "6.3.0",
    "react-native-progress": "^5.0.1",
@@ -99,7 +101,6 @@
    "react-native-volume-manager": "^1.10.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.8.6",
-    "react-native-youtube-iframe": "^2.3.0",
    "sonner-native": "^0.14.2",
    "tailwindcss": "3.3.2",
    "use-debounce": "^10.0.4",
--- 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
@@ -19,7 +19,14 @@ import {
  download,
  setConfig,
 } from "@kesha-antonov/react-native-background-downloader";
-import { focusManager, useQuery, useQueryClient } from "@tanstack/react-query";
+import MMKV from "react-native-mmkv";
+import {
+  focusManager,
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import axios from "axios";
 import * as FileSystem from "expo-file-system";
 import { useRouter } from "expo-router";
@@ -38,20 +45,17 @@ import { apiAtom } from "./JellyfinProvider";
 import * as Notifications from "expo-notifications";
 import { getItemImage } from "@/utils/getItemImage";
 import useImageStorage from "@/hooks/useImageStorage";
-import { formatItemName, saveItemMapping, storage } from "@/utils/mmkv";
+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 = {
  item: Partial<BaseItemDto>;
  mediaSource: MediaSourceInfo;
-  fileSize: number;
 };

-export type DownloadedItem2 = {};
-
 export const processesAtom = atom<JobStatus[]>([]);

 function onAppStateChange(status: AppStateStatus) {
@@ -74,6 +78,8 @@ function useDownloadProvider() {

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

+  const successHapticFeedback = useHaptic("success");
+
  const authHeader = useMemo(() => {
    return api?.accessToken;
  }, [api]);
@@ -508,10 +514,8 @@ function useDownloadProvider() {

      const downloadedItems = storage.getString("downloadedItems");
      if (downloadedItems) {
-        let items: { [key: string]: BaseItemDto } = downloadedItems
-          ? JSON.parse(downloadedItems)
-          : {};
-        delete items[id];
+        let items = JSON.parse(downloadedItems) as DownloadedItem[];
+        items = items.filter((item) => item.item.Id !== id);
        storage.set("downloadedItems", JSON.stringify(items));
      }

@@ -530,9 +534,7 @@ function useDownloadProvider() {
        if (i.Id) return deleteFile(i.Id);
        return;
      })
-    ).then(() =>
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
-    );
+    ).then(() => successHapticFeedback());
  };

  const cleanCacheDirectory = async () => {
@@ -584,7 +586,7 @@ function useDownloadProvider() {
  const appSizeUsage = useMemo(async () => {
    const sizes: number[] =
      downloadedFiles?.map((d) => {
-        return d.fileSize;
+        return getDownloadedItemSize(d.item.Id!!);
      }) || [];

    await forEveryDocumentDirFile(
@@ -606,10 +608,8 @@ function useDownloadProvider() {
    try {
      const downloadedItems = storage.getString("downloadedItems");
      if (downloadedItems) {
-        const items: { [key: string]: BaseItemDto } = downloadedItems
-          ? JSON.parse(downloadedItems)
-          : {};
-        const item = items[itemId] as DownloadedItem;
+        const items: DownloadedItem[] = JSON.parse(downloadedItems);
+        const item = items.find((i) => i.item.Id === itemId);
        return item || null;
      }
      return null;
@@ -623,7 +623,7 @@ function useDownloadProvider() {
    try {
      const downloadedItems = storage.getString("downloadedItems");
      if (downloadedItems) {
-        return Object.values(JSON.parse(downloadedItems)) as DownloadedItem[];
+        return JSON.parse(downloadedItems) as DownloadedItem[];
      } else {
        return [];
      }
@@ -636,11 +636,11 @@ function useDownloadProvider() {
  function saveDownloadedItemInfo(item: BaseItemDto, size: number = 0) {
    try {
      const downloadedItems = storage.getString("downloadedItems");
-      const items: { [key: string]: BaseItemDto } = downloadedItems
+      let items: DownloadedItem[] = downloadedItems
        ? JSON.parse(downloadedItems)
-        : {};
+        : [];

-      const chosenItem = items[item.Id!] || {};
+      const existingItemIndex = items.findIndex((i) => i.item.Id === item.Id);

      const data = getDownloadItemInfoFromDiskTmp(item.Id!);

@@ -651,6 +651,12 @@ function useDownloadProvider() {

      const newItem = { item, mediaSource: data.mediaSource };

+      if (existingItemIndex !== -1) {
+        items[existingItemIndex] = newItem;
+      } else {
+        items.push(newItem);
+      }
+
      deleteDownloadItemInfoFromDiskTmp(item.Id!);

      storage.set("downloadedItems", JSON.stringify(items));
--- a/providers/JellyfinProvider.tsx
+++ b/providers/JellyfinProvider.tsx
@@ -1,3 +1,4 @@
+import "@/augmentations";
 import { useInterval } from "@/hooks/useInterval";
 import { storage } from "@/utils/mmkv";
 import { Api, Jellyfin } from "@jellyfin/sdk";
@@ -19,7 +20,8 @@ import React, {
 import { Platform } from "react-native";
 import uuid from "react-native-uuid";
 import { getDeviceName } from "react-native-device-info";
-import { toast } from "sonner-native";
+import { useSettings } from "@/utils/atoms/settings";
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";

 interface Server {
  address: string;
@@ -55,7 +57,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
      setJellyfin(
        () =>
          new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.23.0" },
+            clientInfo: { name: "Streamyfin", version: "0.25.0" },
            deviceInfo: {
              name: deviceName,
              id,
@@ -70,6 +72,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
  const [user, setUser] = useAtom(userAtom);
  const [isPolling, setIsPolling] = useState<boolean>(false);
  const [secret, setSecret] = useState<string | null>(null);
+  const [settings, updateSettings, pluginSettings, setPluginSettings, refreshStreamyfinPluginSettings] = useSettings();
+  const { clearAllJellyseerData, setJellyseerrUser } = useJellyseerr();

  useQuery({
    queryKey: ["user", api],
@@ -92,7 +96,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
    return {
      authorization: `MediaBrowser Client="Streamyfin", Device=${
        Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.23.0"`,
+      }, DeviceId="${deviceId}", Version="0.25.0"`,
    };
  }, [deviceId]);

@@ -226,6 +230,16 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
          storage.set("user", JSON.stringify(auth.data.User));
          setApi(jellyfin.createApi(api?.basePath, auth.data?.AccessToken));
          storage.set("token", auth.data?.AccessToken);
+
+          const recentPluginSettings = await refreshStreamyfinPluginSettings();
+          if (recentPluginSettings?.jellyseerrServerUrl?.value) {
+            const jellyseerrApi = new JellyseerrApi(recentPluginSettings.jellyseerrServerUrl.value);
+            await jellyseerrApi.test().then((result) => {
+              if (result.isValid && result.requiresPass) {
+                jellyseerrApi.login(username, password).then(setJellyseerrUser);
+              }
+            })
+          }
        }
      } catch (error) {
        if (axios.isAxiosError(error)) {
@@ -262,6 +276,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
    mutationFn: async () => {
      storage.delete("token");
      setUser(null);
+      setPluginSettings(undefined);
+      await clearAllJellyseerData();
    },
    onError: (error) => {
      console.error("Logout failed:", error);
--- 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/svenska_kyrkan.sql
+++ b/svenska_kyrkan.sql
--- a/utils/_jellyseerr/useJellyseerrCanRequest.ts
+++ b/utils/_jellyseerr/useJellyseerrCanRequest.ts
@@ -0,0 +1,67 @@
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import {
+  MediaRequestStatus,
+  MediaStatus,
+} from "@/utils/jellyseerr/server/constants/media";
+import {
+  hasPermission,
+  Permission,
+} from "@/utils/jellyseerr/server/lib/permissions";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { useMemo } from "react";
+import MediaRequest from "../jellyseerr/server/entity/MediaRequest";
+import { MovieDetails } from "../jellyseerr/server/models/Movie";
+import { TvDetails } from "../jellyseerr/server/models/Tv";
+
+export const useJellyseerrCanRequest = (
+  item?: MovieResult | TvResult | MovieDetails | TvDetails
+) => {
+  const { jellyseerrUser } = useJellyseerr();
+
+  const canRequest = useMemo(() => {
+    if (!jellyseerrUser || !item) return false;
+
+    const canNotRequest =
+      item?.mediaInfo?.requests?.some(
+        (r: MediaRequest) =>
+          r.status == MediaRequestStatus.PENDING ||
+          r.status == MediaRequestStatus.APPROVED
+      ) ||
+      item.mediaInfo?.status === MediaStatus.AVAILABLE ||
+      item.mediaInfo?.status === MediaStatus.BLACKLISTED ||
+      item.mediaInfo?.status === MediaStatus.PENDING ||
+      item.mediaInfo?.status === MediaStatus.PROCESSING;
+
+    if (canNotRequest) return false;
+
+    const userHasPermission = hasPermission(
+      [
+        Permission.REQUEST,
+        item?.mediaInfo?.mediaType
+          ? Permission.REQUEST_MOVIE
+          : Permission.REQUEST_TV,
+      ],
+      jellyseerrUser.permissions,
+      { type: "or" }
+    );
+
+    return userHasPermission && !canNotRequest;
+  }, [item, jellyseerrUser]);
+
+  const hasAdvancedRequestPermission = useMemo(() => {
+      if (!jellyseerrUser) return false;
+
+      return hasPermission(
+        [
+          Permission.REQUEST_ADVANCED,
+          Permission.MANAGE_REQUESTS
+        ],
+        jellyseerrUser.permissions,
+        {type: 'or'}
+      )
+    },
+    [jellyseerrUser]
+  );
+
+  return [canRequest, hasAdvancedRequestPermission];
+};
--- a/utils/atoms/settings.ts
+++ b/utils/atoms/settings.ts
@@ -1,12 +1,19 @@
 import { atom, useAtom } from "jotai";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { storage } from "../mmkv";
 import { Platform } from "react-native";
 import {
  CultureDto,
+  PluginStatus,
  SubtitlePlaybackMode,
 } from "@jellyfin/sdk/lib/generated-client";
+import {apiAtom} from "@/providers/JellyfinProvider";
+import {getPluginsApi} from "@jellyfin/sdk/lib/utils/api";
+import {writeErrorLog} from "@/utils/log";
+
+const STREAMYFIN_PLUGIN_ID = "1e9e5d38-6e67-4615-8719-e98a5c34f004"
+const STREAMYFIN_PLUGIN_SETTINGS = "STREAMYFIN_PLUGIN_SETTINGS"

 export type DownloadQuality = "original" | "high" | "low";

@@ -84,12 +91,24 @@ export type Settings = {
  downloadMethod: "optimized" | "remux";
  autoDownload: boolean;
  showCustomMenuLinks: boolean;
+  disableHapticFeedback: boolean;
  subtitleSize: number;
  remuxConcurrentLimit: 1 | 2 | 3 | 4;
  safeAreaInControlsEnabled: boolean;
  jellyseerrServerUrl?: string;
+  hiddenLibraries?: string[];
 };

+export interface Lockable<T> {
+  lockable: boolean;
+  value: T
+}
+
+export type PluginLockableSettings = { [K in keyof Settings]: Lockable<Settings[K]> };
+export type StreamyfinPluginConfig = {
+  settings: PluginLockableSettings
+}
+
 const loadSettings = (): Settings => {
  const defaultValues: Settings = {
    autoRotate: true,
@@ -122,10 +141,12 @@ const loadSettings = (): Settings => {
    downloadMethod: "remux",
    autoDownload: false,
    showCustomMenuLinks: false,
+    disableHapticFeedback: false,
    subtitleSize: Platform.OS === "ios" ? 60 : 100,
    remuxConcurrentLimit: 1,
    safeAreaInControlsEnabled: true,
    jellyseerrServerUrl: undefined,
+    hiddenLibraries: [],
  };

  try {
@@ -146,9 +167,12 @@ const saveSettings = (settings: Settings) => {
 };

 export const settingsAtom = atom<Settings | null>(null);
+export const pluginSettingsAtom = atom(storage.get<PluginLockableSettings>(STREAMYFIN_PLUGIN_SETTINGS));

 export const useSettings = () => {
+  const [api] = useAtom(apiAtom);
  const [settings, setSettings] = useAtom(settingsAtom);
+  const [pluginSettings, _setPluginSettings] = useAtom(pluginSettingsAtom);

  useEffect(() => {
    if (settings === null) {
@@ -157,6 +181,42 @@ export const useSettings = () => {
    }
  }, [settings, setSettings]);

+  const setPluginSettings = useCallback((settings: PluginLockableSettings | undefined) => {
+    storage.setAny(STREAMYFIN_PLUGIN_SETTINGS, settings)
+      _setPluginSettings(settings)
+    },
+    [_setPluginSettings]
+  )
+
+  const refreshStreamyfinPluginSettings = useCallback(
+    async () => {
+      if (!api)
+        return
+
+      const plugins = await getPluginsApi(api).getPlugins().then(({data}) => data);
+
+      if (plugins && plugins.length > 0) {
+        const streamyfinPlugin = plugins.find(plugin => plugin.Id === STREAMYFIN_PLUGIN_ID);
+
+        if (!streamyfinPlugin || streamyfinPlugin.Status != PluginStatus.Active) {
+          writeErrorLog(
+            "Streamyfin plugin is currently not active.\n" +
+            `Current status is: ${streamyfinPlugin?.Status}`
+          );
+          setPluginSettings(undefined);
+          return;
+        }
+
+        const settings = await api.getStreamyfinPluginConfig()
+          .then(({data}) => data.settings)
+
+        setPluginSettings(settings);
+        return settings;
+      }
+    },
+    [api]
+  )
+
  const updateSettings = (update: Partial<Settings>) => {
    if (settings) {
      const newSettings = { ...settings, ...update };
@@ -166,5 +226,5 @@ export const useSettings = () => {
    }
  };

-  return [settings, updateSettings] as const;
+  return [settings, updateSettings, pluginSettings, setPluginSettings, refreshStreamyfinPluginSettings] as const;
 };
--- a/utils/jellyseerr
+++ b/utils/jellyseerr
--- a/utils/mmkv.ts
+++ b/utils/mmkv.ts
@@ -1,30 +1,3 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { MMKV } from "react-native-mmkv";

-const storage = new MMKV();
-
-const saveItemMapping = (itemId: string | undefined, fileName: string) => {
-  if (!itemId) return;
-  storage.set(itemId, fileName);
-};
-
-const getFilePathFromItemId = (itemId: string): string | undefined => {
-  return storage.getString(itemId);
-};
-
-const formatItemName = (item: BaseItemDto) => {
-  if (item.Type === "Episode") {
-    const formattedParentIndexNumber = (item.ParentIndexNumber ?? 0)
-      .toString()
-      .padStart(2, "0");
-    const formattedIndexNumber = (item.IndexNumber ?? 0)
-      .toString()
-      .padStart(2, "0");
-
-    const formattedString = `S${formattedParentIndexNumber}E${formattedIndexNumber}`;
-    return `${item.SeriesName} - ${formattedString} - ${item.Name}`;
-  }
-  return item.Name;
-};
-
-export { saveItemMapping, getFilePathFromItemId, storage, formatItemName };
+export const storage = new MMKV();
--- a/utils/useReactNavigationQuery.ts
+++ b/utils/useReactNavigationQuery.ts
@@ -0,0 +1,32 @@
+import { useFocusEffect } from "@react-navigation/core";
+import {
+  QueryKey,
+  useQuery,
+  UseQueryOptions,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import { useCallback } from "react";
+
+export function useReactNavigationQuery<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+>(
+  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
+): UseQueryResult<TData, TError> {
+  const useQueryReturn = useQuery(options);
+
+  useFocusEffect(
+    useCallback(() => {
+      if (
+        ((options.refetchOnWindowFocus && useQueryReturn.isStale) ||
+          options.refetchOnWindowFocus === "always") &&
+        options.enabled !== false
+      )
+        useQueryReturn.refetch();
+    }, [options.enabled, options.refetchOnWindowFocus])
+  );
+
+  return useQueryReturn;
+}
Author	SHA1	Message	Date
herrrta	2be8096f4a	repos + plugin config updates	2025-01-10 19:28:22 -05:00
Fredrik Burmester	38aad9610b	Merge branch 'feat/401' of https://github.com/streamyfin/streamyfin into feat/401	2025-01-09 15:49:02 +01:00
herrrta	54af64abef	api augmentations & added streamyfin plugin id	2025-01-09 09:35:24 -05:00
herrrta	e1720a00da	initial changes	2025-01-09 09:33:55 -05:00
herrrta	882d0ea188	api augmentations & added streamyfin plugin id	2025-01-09 08:51:53 -05:00
Fredrik Burmester	f3b539232f	Merge pull request #403 from streamyfin/feature/mediasourcenames Feature: Remove duplicate names from media sources	2025-01-09 11:33:06 +01:00
sarendsen	33ea657a5c	Filter out duplicate names in media sources	2025-01-09 10:13:57 +01:00
herrrta	75820adcbc	initial changes	2025-01-08 21:52:31 -05:00
herrrta	76cdb2b3f8	fix cast npe	2025-01-08 17:31:39 -05:00
Fredrik Burmester	0a2ea33635	Merge pull request #397 from topiga/master	2025-01-08 18:50:02 +01:00
Théo FORTIN	aad6093852	Added 1 Mb/s as bitrate	2025-01-08 15:22:11 +01:00
herrrta	c553cff9d1	Added clean script	2025-01-08 08:05:06 -05:00
herrrta	dcd458bd3d	[Jellyseerr] "Currently Streaming On" misaligned text fixes #392	2025-01-08 08:04:48 -05:00
Fredrik Burmester	05dc61d17d	Merge pull request #395 from streamyfin/feat/331 [Jellyseerr] Show media configuration for admins	2025-01-08 11:40:07 +01:00
Fredrik Burmester	e4de11127f	chore	2025-01-08 11:39:50 +01:00
herrrta	2dc49735f4	[Jellyseerr] Show media configuration for admins implements #331	2025-01-07 23:53:10 -05:00
Fredrik Burmester	ef42207174	Merge pull request #383 from Ryan0204/master Change ScreenOrientation to landscape right by default and added toggleSafeArea for all videos	2025-01-07 11:01:43 +01:00
Fredrik Burmester	efa5638b12	fix: remove tab sidebar	2025-01-07 10:59:21 +01:00
Fredrik Burmester	c63cea891d	chore: remove imports	2025-01-07 10:27:56 +01:00
Fredrik Burmester	4e80f58823	fix: backdrop not filling screen	2025-01-07 10:27:30 +01:00
ryan0204	cfe39d504c	Rotate ScreenOrientation back on exit player	2025-01-07 14:13:22 +08:00
herrrta	cf43d1a657	cleanup	2025-01-06 20:56:59 -05:00
herrrta	cbe3b18226	fix enter animation	2025-01-06 20:55:50 -05:00
herrrta	b637a0f7d2	use JellyseerrPoster component	2025-01-06 20:55:48 -05:00
Fredrik Burmester	a0ce7cc6d0	chore	2025-01-06 22:58:11 +01:00
Fredrik Burmester	a640df30bc	chore	2025-01-06 22:32:27 +01:00
Fredrik Burmester	062e6e6c23	chore	2025-01-06 22:21:27 +01:00
Fredrik Burmester	d709e3b13e	Merge pull request #389 from streamyfin/feat/326 [Jellyseerr] Show genre/studio/network discover sliders	2025-01-06 20:57:10 +01:00
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
ryan0204	c86a8438e5	Bring back toggleSafeArea button for all videos	2025-01-06 23:15:00 +08:00
Ryan	faa2baae68	Merge branch 'streamyfin:master' into master	2025-01-06 20:28:12 +08:00
ryan0204	ed42371353	Change ScreenOrientation to landscape right by default	2025-01-06 20:27:34 +08: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
Fredrik Burmester	cf2beb8299	feat: hide libraries	2025-01-05 15:46:44 +01:00
Fredrik Burmester	49d157a95a	fix: overlapping buttons with navbar fixes #373	2025-01-05 15:29:39 +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	a061f9f480	fix: padding	2025-01-05 12:04:11 +01:00
Fredrik Burmester	0fb6f2fb30	fix: padding	2025-01-05 12:04:07 +01:00
Fredrik Burmester	0773f773ba	fix: padding	2025-01-05 12:04:02 +01:00
Fredrik Burmester	39bb3a9370	fix: padding	2025-01-05 12:03:56 +01:00
Fredrik Burmester	b79e534692	Merge branch 'develop' of https://github.com/streamyfin/streamyfin into develop	2025-01-05 11:56:53 +01:00
Fredrik Burmester	e9336e9a67	feat: new useQuery specifically for react navigation to invalidate !enabled queries on screen re-mount	2025-01-05 11:56:46 +01:00
Fredrik Burmester	adfde1a7cd	fix: update request status in poster on search scree	2025-01-05 11:56:16 +01:00
Fredrik Burmester	cab6257fb2	feat: hook for request permissions	2025-01-05 11:55:52 +01:00
Fredrik Burmester	3f0f0090af	fix: refactor permissions	2025-01-05 11:55:41 +01:00
Fredrik Burmester	b278632581	fix: height on loading button	2025-01-05 11:55:29 +01:00
Fredrik Burmester	5ee1a9cabb	fix: change keys	2025-01-05 11:55:22 +01:00
Fredrik Burmester	2169bea031	fix: add loading and refactor permissions	2025-01-05 11:55:05 +01:00
Fredrik Burmester	95cf252349	Delete svenska_kyrkan.sql	2025-01-05 10:29:59 +01:00
Fredrik Burmester	8470cbe8d5	Delete svenska_kyrkan.sql	2025-01-05 10:29:12 +01:00
Fredrik Burmester	636a27246f	chore: deps	2025-01-05 09:51:35 +01:00
Fredrik Burmester	a488c68633	fix: sizing	2025-01-05 09:49:57 +01:00
Fredrik Burmester	7342b7eb92	chore: deps	2025-01-05 09:46:51 +01:00
Fredrik Burmester	8370519758	chore: formatting	2025-01-05 09:46:48 +01:00
Fredrik Burmester	85e21edbf1	fix: padding in person view appearences grid	2025-01-05 09:46:30 +01:00
Fredrik Burmester	8d4115f5a0	fix: app crash on internal yt trailer, link out instead	2025-01-05 09:24:54 +01:00
herrrta	c5d7a6729b	Merge pull request #372 from herrrta/feat/327 [Jellyseerr] Add cast/crew results	2025-01-05 02:55:41 -05:00
herrrta	db4046267f	[Jellyseerr] Add cast/crew results implements #327	2025-01-05 02:53:41 -05: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
herrrta	b506871c46	Merge pull request #371 from herrrta/feat/328 [Jellyseerr] Add external links to trailers	2025-01-04 21:29:10 -05:00
herrrta	734678b1d5	[Jellyseerr] Add external links to trailers implements #328	2025-01-04 21:28:45 -05:00
herrrta	68e98bbb94	Merge pull request #370 from herrrta/feat/325 [Jellyseerr] Show facts about media result	2025-01-04 21:06:32 -05:00
herrrta	d84ed558f3	[Jellyseerr] Show facts about media result implements #325	2025-01-04 21:04:12 -05:00
herrrta	ad39e8e10a	Merge pull request #369 from herrrta/fix/lock-ios-util-version Fix/lock ios util version	2025-01-04 17:25:09 -05:00
herrrta	29bba04fdd	react-native-ios-utilities major having issues locked to 4.5.1	2025-01-04 17:24:52 -05:00
herrrta	5a24957e88	Merge pull request #368 from herrrta/fix/332 Add badge to differentiate a movie/series	2025-01-04 17:24:30 -05:00
herrrta	39f2735756	Add badge to differentiate a movie/series fixes #332	2025-01-04 17:11:01 -05:00
Fredrik Burmester	5dc86d4765	Merge pull request #365 from herrrta/fix/363 Requesting using purple request button doesnt refresh page	2025-01-04 22:00:13 +01:00
herrrta	d13731c28f	Requesting using purple request button doesnt refresh page fixes #363	2025-01-04 15:51:58 -05:00
Fredrik Burmester	7f0446b85f	Update build-ios.yaml	2025-01-04 21:13:57 +01:00
Fredrik Burmester	11fbe19f80	Update build-ios.yaml	2025-01-04 20:57:57 +01:00
Fredrik Burmester	5c97b85492	Update build-ios.yaml	2025-01-04 20:50:09 +01:00
Fredrik Burmester	e60cec69f8	Update build-ios.yaml	2025-01-04 20:49:12 +01:00
Fredrik Burmester	7bc1c22770	Merge pull request #355 from Stetsed/master Implement CI/CD pipeline for iOS building	2025-01-04 20:30:12 +01:00
Stetsed	e86dab5613	Update build-ios.yaml	2025-01-04 19:15:09 +01:00
Stetsed	eeb803223c	Allow manual build trigger	2025-01-04 19:04:29 +01:00
Stetsed	1a43f7ef1b	Create build-ios.yaml	2025-01-04 19:03:12 +01:00
retardgerman	f4624bdc25	fix: typo	2025-01-04 16:32:46 +01:00
Fredrik Burmester	3c5f2b4079	fix: controls gray overlay	2025-01-04 13:04:23 +01:00
Fredrik Burmester	955190a9cc	chore: version	2025-01-04 13:04:15 +01:00
Fredrik Burmester	e1e4f4833c	chore: versions	2025-01-04 13:04:02 +01:00