chore: remove everything related to music

Merge pull request #394 from Ryan0204/enhancement/autohidecontrol
enhancement: auto hide control after 5 seconds
2025-01-12 13:40:01 +01:00 · 2025-01-12 10:16:55 +01:00 · 2025-01-12 10:10:18 +01:00 · 2025-01-12 10:07:49 +01:00 · 2025-01-12 09:37:33 +01:00 · 2025-01-12 09:36:23 +01:00
133 changed files with 4134 additions and 3108 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=159 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.
@@ -70,7 +70,7 @@ Or download the APKs [here on GitHub](https://github.com/streamyfin/streamyfin/r

 ### Beta testing

-To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where i'll post APKs and IPAs. This won't give automatic access to the TestFlight however, so you need to send me a DM with the email you use for Apple so that i can manually add you.
+To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where I post APKs and IPAs. This won't give automatic access to the TestFlight, however, so you need to send me a DM with the email you use for Apple so that i can manually add you.

 **Note**: Everyone who is actively contributing to the source code of Streamyfin will have automatic access to the betas.

@@ -90,7 +90,7 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
 3. Make sure you have xcode and/or android studio installed.
-4. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`. This will open a simulator on you computer and run the app.
+4. Create an expo dev build by running `npx expo run:ios` or `npx expo run:android`. This will open a simulator on your computer and run the app.

 ## 📄 License

--- 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"
      },
@@ -111,7 +111,8 @@
        { "android": { "parentTheme": "Material3" } }
      ],
      ["react-native-bottom-tabs"],
-      ["./plugins/withChangeNativeAndroidTextToWhite.js"]
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"],
+      ["./plugins/withGoogleCastActivity.js"]
    ],
    "experiments": {
      "typedRoutes": true
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -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)/downloads/index.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/index.tsx
@@ -4,7 +4,7 @@ import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
 import { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
 import { queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation, useRouter } from "expo-router";
 import { useAtom } from "jotai";
@@ -96,7 +96,7 @@ export default function page() {
      >
        <View className="py-4">
          <View className="mb-4 flex flex-col space-y-4 px-4">
-            {settings?.downloadMethod === "remux" && (
+            {settings?.downloadMethod === DownloadMethod.Remux && (
              <View className="bg-neutral-900 p-4 rounded-2xl">
                <Text className="text-lg font-bold">Queue</Text>
                <Text className="text-xs opacity-70 text-red-600">
--- 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,139 @@
+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 { Linking, 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-16 px-4 space-y-8">
+      <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 className="flex flex-row items-center mt-4">
+          <View
+            style={{
+              width: 50,
+              height: 50,
+            }}
+            className="flex items-center justify-center"
+          >
+            <Feather name="settings" size={28} color={"white"} />
+          </View>
+          <View className="shrink ml-2">
+            <Text className="font-bold mb-1">Centralised Settings Plugin</Text>
+            <Text className="shrink text-xs">
+              Configure settings from a centralised location on your Jellyfin
+              server. All client settings for all users will be synced
+              automatically.{" "}
+              <Text
+                className="text-purple-600"
+                onPress={() => {
+                  Linking.openURL(
+                    "https://github.com/streamyfin/jellyfin-plugin-streamyfin"
+                  );
+                }}
+              >
+                Read more
+              </Text>
+            </Text>
+          </View>
+        </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>
+    </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 React, { 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,65 @@
+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";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+
+export default function page() {
+  const [settings, updateSettings, pluginSettings] = 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 (
+    <DisabledSetting
+      disabled={pluginSettings?.hiddenLibraries?.locked === true}
+      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>
+    </DisabledSetting>
+  );
+}
--- a/app/(auth)/(tabs)/(home)/settings/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/jellyseerr/page.tsx
@@ -1,78 +1,16 @@
-import { Text } from "@/components/common/Text";
 import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
-import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
-import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getOrSetDeviceId } from "@/utils/device";
-import { getStatistics } from "@/utils/optimize-server";
-import { useMutation } from "@tanstack/react-query";
-import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import { toast } from "sonner-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
-  const navigation = useNavigation();
-
-  const [api] = useAtom(apiAtom);
-  const [settings, updateSettings] = useSettings();
-
-  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
-    useState<string>(settings?.optimizedVersionsServerUrl || "");
-
-  const saveMutation = useMutation({
-    mutationFn: async (newVal: string) => {
-      if (newVal.length === 0 || !newVal.startsWith("http")) {
-        toast.error("Invalid URL");
-        return;
-      }
-
-      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
-
-      updateSettings({
-        optimizedVersionsServerUrl: updatedUrl,
-      });
-
-      return await getStatistics({
-        url: settings?.optimizedVersionsServerUrl,
-        authHeader: api?.accessToken,
-        deviceId: getOrSetDeviceId(),
-      });
-    },
-    onSuccess: (data) => {
-      if (data) {
-        toast.success("Connected");
-      } else {
-        toast.error("Could not connect");
-      }
-    },
-    onError: () => {
-      toast.error("Could not connect");
-    },
-  });
-
-  const onSave = (newVal: string) => {
-    saveMutation.mutate(newVal);
-  };
-
-  // useEffect(() => {
-  //   navigation.setOptions({
-  //     title: "Optimized Server",
-  //     headerRight: () =>
-  //       saveMutation.isPending ? (
-  //         <ActivityIndicator size={"small"} color={"white"} />
-  //       ) : (
-  //         <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-  //           <Text className="text-blue-500">Save</Text>
-  //         </TouchableOpacity>
-  //       ),
-  //   });
-  // }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
+  const [settings, updateSettings, pluginSettings] = useSettings();

  return (
-    <View className="p-4">
+    <DisabledSetting
+      disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
+      className="p-4"
+    >
      <JellyseerrSettings />
-    </View>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
@@ -1,12 +1,10 @@
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
-import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {
  Linking,
  Switch,
@@ -15,11 +13,12 @@ import {
  View,
 } from "react-native";
 import { toast } from "sonner-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
  const navigation = useNavigation();

-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
  const queryClient = useQueryClient();

  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
@@ -35,69 +34,81 @@ export default function page() {
    Linking.openURL("https://github.com/fredrikburmester/marlin-search");
  };

+  const disabled = useMemo(() => {
+    return pluginSettings?.searchEngine?.locked === true && pluginSettings?.marlinServerUrl?.locked === true
+  }, [pluginSettings]);
+
  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <TouchableOpacity onPress={() => onSave(value)}>
-          <Text className="text-blue-500">Save</Text>
-        </TouchableOpacity>
-      ),
-    });
+    if (!pluginSettings?.marlinServerUrl?.locked) {
+      navigation.setOptions({
+        headerRight: () => (
+          <TouchableOpacity onPress={() => onSave(value)}>
+            <Text className="text-blue-500">Save</Text>
+          </TouchableOpacity>
+        ),
+      });
+    }
  }, [navigation, value]);

  if (!settings) return null;

  return (
-    <View className="px-4">
+    <DisabledSetting
+      disabled={disabled}
+      className="px-4"
+    >
      <ListGroup>
-        <ListItem
-          title={"Enable Marlin Search"}
-          onPress={() => {
-            updateSettings({ searchEngine: "Jellyfin" });
-            queryClient.invalidateQueries({ queryKey: ["search"] });
-          }}
+        <DisabledSetting
+          disabled={pluginSettings?.searchEngine?.locked === true}
+          showText={!pluginSettings?.marlinServerUrl?.locked}
        >
-          <Switch
-            value={settings.searchEngine === "Marlin"}
-            onValueChange={(value) => {
-              updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
+          <ListItem
+            title={"Enable Marlin Search"}
+            onPress={() => {
+              updateSettings({ searchEngine: "Jellyfin" });
              queryClient.invalidateQueries({ queryKey: ["search"] });
            }}
-          />
-        </ListItem>
+          >
+            <Switch
+              value={settings.searchEngine === "Marlin"}
+              onValueChange={(value) => {
+                updateSettings({ searchEngine: value ? "Marlin" : "Jellyfin" });
+                queryClient.invalidateQueries({ queryKey: ["search"] });
+              }}
+            />
+          </ListItem>
+        </DisabledSetting>
      </ListGroup>

-      <View
-        className={`mt-2 ${
-          settings.searchEngine === "Marlin" ? "" : "opacity-50"
-        }`}
+      <DisabledSetting
+        disabled={pluginSettings?.marlinServerUrl?.locked === true}
+        showText={!pluginSettings?.searchEngine?.locked}
+        className="mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4"
      >
-        <View className="flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4">
-          <View
-            className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}
-          >
-            <Text className="mr-4">URL</Text>
-            <TextInput
-              editable={settings.searchEngine === "Marlin"}
-              className="text-white"
-              placeholder="http(s)://domain.org:port"
-              value={value}
-              keyboardType="url"
-              returnKeyType="done"
-              autoCapitalize="none"
-              textContentType="URL"
-              onChangeText={(text) => setValue(text)}
-            />
-          </View>
+        <View
+          className={`flex flex-row items-center bg-neutral-900 h-11 pr-4`}
+        >
+          <Text className="mr-4">URL</Text>
+          <TextInput
+            editable={settings.searchEngine === "Marlin"}
+            className="text-white"
+            placeholder="http(s)://domain.org:port"
+            value={value}
+            keyboardType="url"
+            returnKeyType="done"
+            autoCapitalize="none"
+            textContentType="URL"
+            onChangeText={(text) => setValue(text)}
+          />
        </View>
-        <Text className="px-4 text-xs text-neutral-500 mt-1">
-          Enter the URL for the Marlin server. The URL should include http or
-          https and optionally the port.{" "}
-          <Text className="text-blue-500" onPress={handleOpenLink}>
-            Read more about Marlin.
-          </Text>
+      </DisabledSetting>
+      <Text className="px-4 text-xs text-neutral-500 mt-1">
+        Enter the URL for the Marlin server. The URL should include http or
+        https and optionally the port.{" "}
+        <Text className="text-blue-500" onPress={handleOpenLink}>
+          Read more about Marlin.
        </Text>
-      </View>
-    </View>
+      </Text>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
@@ -10,12 +10,13 @@ import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
  const navigation = useNavigation();

  const [api] = useAtom(apiAtom);
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
    useState<string>(settings?.optimizedVersionsServerUrl || "");
@@ -56,25 +57,30 @@ export default function page() {
  };

  useEffect(() => {
-    navigation.setOptions({
-      title: "Optimized Server",
-      headerRight: () =>
-        saveMutation.isPending ? (
-          <ActivityIndicator size={"small"} color={"white"} />
-        ) : (
-          <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-            <Text className="text-blue-500">Save</Text>
-          </TouchableOpacity>
-        ),
-    });
+    if (!pluginSettings?.optimizedVersionsServerUrl?.locked) {
+      navigation.setOptions({
+        title: "Optimized Server",
+        headerRight: () =>
+          saveMutation.isPending ? (
+            <ActivityIndicator size={"small"} color={"white"} />
+          ) : (
+            <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
+              <Text className="text-blue-500">Save</Text>
+            </TouchableOpacity>
+          ),
+      });
+    }
  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);

  return (
-    <View className="p-4">
+    <DisabledSetting
+      disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
+      className="p-4"
+    >
      <OptimizedServerForm
        value={optimizedVersionsServerUrl}
        onChangeValue={setOptimizedVersionsServerUrl}
      />
-    </View>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx
@@ -9,6 +9,8 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { Linking, Switch, View } from "react-native";
+import {useMemo} from "react";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export default function page() {
  const navigation = useNavigation();
@@ -16,7 +18,7 @@ export default function page() {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  const handleOpenLink = () => {
    Linking.openURL(
@@ -48,13 +50,22 @@ export default function page() {
    staleTime: 0,
  });

+  const disabled = useMemo(() => (
+    pluginSettings?.usePopularPlugin?.locked === true &&
+    pluginSettings?.mediaListCollectionIds?.locked === true
+  ), [pluginSettings]);
+
  if (!settings) return null;

  return (
-    <View className="px-4 pt-4">
+    <DisabledSetting
+      disabled={disabled}
+      className="px-4 pt-4"
+    >
      <ListGroup title={"Enable plugin"} className="">
        <ListItem
          title={"Enable Popular Lists"}
+          disabled={pluginSettings?.usePopularPlugin?.locked}
          onPress={() => {
            updateSettings({ usePopularPlugin: true });
            queryClient.invalidateQueries({ queryKey: ["search"] });
@@ -62,9 +73,10 @@ export default function page() {
        >
          <Switch
            value={settings.usePopularPlugin}
-            onValueChange={(value) => {
-              updateSettings({ usePopularPlugin: value });
-            }}
+            disabled={pluginSettings?.usePopularPlugin?.locked}
+            onValueChange={(usePopularPlugin) =>
+              updateSettings({ usePopularPlugin })
+          }
          />
        </ListItem>
      </ListGroup>
@@ -88,11 +100,14 @@ export default function page() {
                <>
                  <ListGroup title="Media List Collections" className="mt-4">
                    {mediaListCollections?.map((mlc) => (
-                      <ListItem key={mlc.Id} title={mlc.Name}>
+                      <ListItem
+                        key={mlc.Id}
+                        title={mlc.Name}
+                        disabled={pluginSettings?.mediaListCollectionIds?.locked}
+                      >
                        <Switch
-                          value={settings.mediaListCollectionIds?.includes(
-                            mlc.Id!
-                          )}
+                          disabled={pluginSettings?.mediaListCollectionIds?.locked}
+                          value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
                          onValueChange={(value) => {
                            if (!settings.mediaListCollectionIds) {
                              updateSettings({
@@ -130,6 +145,6 @@ export default function page() {
          )}
        </>
      )}
-    </View>
+    </DisabledSetting>
  );
 }
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/albums/[albumId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/albums/[albumId].tsx
@@ -1,128 +0,0 @@
-import { Chromecast } from "@/components/Chromecast";
-import { ItemImage } from "@/components/common/ItemImage";
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { SongsList } from "@/components/music/SongsList";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import ArtistPoster from "@/components/posters/ArtistPoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
-export default function page() {
-  const searchParams = useLocalSearchParams();
-  const { collectionId, artistId, albumId } = searchParams as {
-    collectionId: string;
-    artistId: string;
-    albumId: string;
-  };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const navigation = useNavigation();
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () => (
-        <View className="">
-          <Chromecast />
-        </View>
-      ),
-    });
-  });
-
-  const { data: album } = useQuery({
-    queryKey: ["album", albumId, artistId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        ids: [albumId],
-      });
-      const data = response.data.Items?.[0];
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!albumId,
-    staleTime: 0,
-  });
-
-  const {
-    data: songs,
-    isLoading,
-    isError,
-  } = useQuery<{
-    Items: BaseItemDto[];
-    TotalRecordCount: number;
-  }>({
-    queryKey: ["songs", artistId, albumId],
-    queryFn: async () => {
-      if (!api)
-        return {
-          Items: [],
-          TotalRecordCount: 0,
-        };
-
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        parentId: albumId,
-        fields: [
-          "ItemCounts",
-          "PrimaryImageAspectRatio",
-          "CanDelete",
-          "MediaSourceCount",
-        ],
-        sortBy: ["ParentIndexNumber", "IndexNumber", "SortName"],
-      });
-
-      const data = response.data.Items;
-
-      return {
-        Items: data || [],
-        TotalRecordCount: response.data.TotalRecordCount || 0,
-      };
-    },
-    enabled: !!api && !!user?.Id,
-  });
-
-  const insets = useSafeAreaInsets();
-
-  if (!album) return null;
-
-  return (
-    <ParallaxScrollView
-      headerHeight={400}
-      headerImage={
-        <ItemImage
-          variant={"Primary"}
-          item={album}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-    >
-      <View className="px-4 mb-8">
-        <Text className="font-bold text-2xl mb-2">{album?.Name}</Text>
-        <Text className="text-neutral-500">
-          {songs?.TotalRecordCount} songs
-        </Text>
-      </View>
-      <View className="px-4">
-        <SongsList
-          albumId={albumId}
-          songs={songs?.Items}
-          collectionId={collectionId}
-          artistId={artistId}
-        />
-      </View>
-    </ParallaxScrollView>
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/[artistId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/[artistId].tsx
@@ -1,130 +0,0 @@
-import ArtistPoster from "@/components/posters/ArtistPoster";
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
-import { FlatList, ScrollView, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { ItemImage } from "@/components/common/ItemImage";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-
-export default function page() {
-  const searchParams = useLocalSearchParams();
-  const { artistId } = searchParams as {
-    artistId: string;
-  };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const navigation = useNavigation();
-
-  const [startIndex, setStartIndex] = useState<number>(0);
-
-  const { data: artist } = useQuery({
-    queryKey: ["album", artistId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        ids: [artistId],
-      });
-      const data = response.data.Items?.[0];
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!artistId,
-    staleTime: 0,
-  });
-
-  const {
-    data: albums,
-    isLoading,
-    isError,
-  } = useQuery<{
-    Items: BaseItemDto[];
-    TotalRecordCount: number;
-  }>({
-    queryKey: ["albums", artistId, startIndex],
-    queryFn: async () => {
-      if (!api)
-        return {
-          Items: [],
-          TotalRecordCount: 0,
-        };
-
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        parentId: artistId,
-        sortOrder: ["Descending", "Descending", "Ascending"],
-        includeItemTypes: ["MusicAlbum"],
-        recursive: true,
-        fields: [
-          "ParentId",
-          "PrimaryImageAspectRatio",
-          "ParentId",
-          "PrimaryImageAspectRatio",
-        ],
-        collapseBoxSetItems: false,
-        albumArtistIds: [artistId],
-        startIndex,
-        limit: 100,
-        sortBy: ["PremiereDate", "ProductionYear", "SortName"],
-      });
-
-      const data = response.data.Items;
-
-      return {
-        Items: data || [],
-        TotalRecordCount: response.data.TotalRecordCount || 0,
-      };
-    },
-    enabled: !!api && !!user?.Id,
-  });
-
-  const insets = useSafeAreaInsets();
-
-  if (!artist || !albums) return null;
-
-  return (
-    <ParallaxScrollView
-      headerHeight={400}
-      headerImage={
-        <ItemImage
-          variant={"Primary"}
-          item={artist}
-          style={{
-            width: "100%",
-            height: "100%",
-          }}
-        />
-      }
-    >
-      <View className="px-4 mb-8">
-        <Text className="font-bold text-2xl mb-2">{artist?.Name}</Text>
-        <Text className="text-neutral-500">
-          {albums.TotalRecordCount} albums
-        </Text>
-      </View>
-      <View className="flex flex-row flex-wrap justify-between px-4">
-        {albums.Items.map((item, idx) => (
-          <TouchableItemRouter
-            item={item}
-            style={{ width: "30%", marginBottom: 20 }}
-            key={idx}
-          >
-            <View className="flex flex-col gap-y-2">
-              <ArtistPoster item={item} />
-              <Text numberOfLines={2}>{item.Name}</Text>
-              <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
-            </View>
-          </TouchableItemRouter>
-        ))}
-      </View>
-    </ParallaxScrollView>
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/index.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/artists/index.tsx
@@ -1,117 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import ArtistPoster from "@/components/posters/ArtistPoster";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getArtistsApi, getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { router, useLocalSearchParams } from "expo-router";
-import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
-import { FlatList, TouchableOpacity, View } from "react-native";
-
-export default function page() {
-  const searchParams = useLocalSearchParams();
-  const { collectionId } = searchParams as { collectionId: string };
-
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data: collection } = useQuery({
-    queryKey: ["collection", collectionId],
-    queryFn: async () => {
-      if (!api) return null;
-      const response = await getItemsApi(api).getItems({
-        userId: user?.Id,
-        ids: [collectionId],
-      });
-      const data = response.data.Items?.[0];
-      return data;
-    },
-    enabled: !!api && !!user?.Id && !!collectionId,
-    staleTime: 0,
-  });
-
-  const [startIndex, setStartIndex] = useState<number>(0);
-
-  const { data, isLoading, isError } = useQuery<{
-    Items: BaseItemDto[];
-    TotalRecordCount: number;
-  }>({
-    queryKey: ["collection-items", collection?.Id, startIndex],
-    queryFn: async () => {
-      if (!api || !collectionId)
-        return {
-          Items: [],
-          TotalRecordCount: 0,
-        };
-
-      const response = await getArtistsApi(api).getArtists({
-        sortBy: ["SortName"],
-        sortOrder: ["Ascending"],
-        fields: ["PrimaryImageAspectRatio", "SortName"],
-        imageTypeLimit: 1,
-        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
-        parentId: collectionId,
-        userId: user?.Id,
-      });
-
-      const data = response.data.Items;
-
-      return {
-        Items: data || [],
-        TotalRecordCount: response.data.TotalRecordCount || 0,
-      };
-    },
-    enabled: !!collection?.Id && !!api && !!user?.Id,
-  });
-
-  const totalItems = useMemo(() => {
-    return data?.TotalRecordCount;
-  }, [data]);
-
-  if (!data) return null;
-
-  return (
-    <FlatList
-      contentContainerStyle={{
-        padding: 16,
-        paddingBottom: 140,
-      }}
-      ListHeaderComponent={
-        <View className="mb-4">
-          <Text className="font-bold text-3xl mb-2">Artists</Text>
-        </View>
-      }
-      nestedScrollEnabled
-      data={data.Items}
-      numColumns={3}
-      columnWrapperStyle={{
-        justifyContent: "space-between",
-      }}
-      renderItem={({ item, index }) => (
-        <TouchableItemRouter
-          style={{
-            maxWidth: "30%",
-            width: "100%",
-          }}
-          key={index}
-          item={item}
-        >
-          <View className="flex flex-col gap-y-2">
-            {collection?.CollectionType === "movies" && (
-              <MoviePoster item={item} />
-            )}
-            {collection?.CollectionType === "music" && (
-              <ArtistPoster item={item} />
-            )}
-            <Text>{item.Name}</Text>
-            <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
-          </View>
-        </TouchableItemRouter>
-      )}
-      keyExtractor={(item) => item.Id || ""}
-    />
-  );
-}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx
@@ -109,7 +109,7 @@ const page: React.FC = () => {
        genres: selectedGenres,
        tags: selectedTags,
        years: selectedYears.map((year) => parseInt(year)),
-        includeItemTypes: ["Movie", "Series", "MusicAlbum"],
+        includeItemTypes: ["Movie", "Series"],
      });

      return response.data || null;
--- 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)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -150,8 +150,6 @@ const Page = () => {
        itemType = "Series";
      } else if (library.CollectionType === "boxsets") {
        itemType = "BoxSet";
-      } else if (library.CollectionType === "music") {
-        itemType = "MusicAlbum";
      }

      const response = await getItemsApi(api).getItems({
--- a/app/(auth)/(tabs)/(libraries)/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/_layout.tsx
@@ -6,7 +6,7 @@ import { Platform } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";

 export default function IndexLayout() {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  if (!settings?.libraryOptions) return null;

@@ -25,6 +25,7 @@ export default function IndexLayout() {
          headerTransparent: Platform.OS === "ios" ? true : false,
          headerShadowVisible: false,
          headerRight: () => (
+            !pluginSettings?.libraryOptions?.locked &&
            <DropdownMenu.Root>
              <DropdownMenu.Trigger>
                <Ionicons
--- 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,24 @@ 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!))
+        .filter((l) => l.CollectionType !== "music")
+        .filter((l) => l.CollectionType !== "books") || [],
+    [data, settings?.hiddenLibraries]
+  );
+
  useEffect(() => {
    for (const item of data || []) {
      queryClient.prefetchQuery({
@@ -63,7 +67,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 +85,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,16 @@ 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 AlbumCover from "@/components/posters/AlbumCover";
+import { JellyserrIndexPage } from "@/components/jellyseerr/JellyseerrIndexPage";
 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 +22,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 +31,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 +143,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: () =>
@@ -231,64 +183,19 @@ export default function search() {
    enabled: searchType === "Library" && debouncedSearch.length > 0,
  });

-  const { data: artists, isFetching: l4 } = useQuery({
-    queryKey: ["search", "artists", debouncedSearch],
-    queryFn: () =>
-      searchFn({
-        query: debouncedSearch,
-        types: ["MusicArtist"],
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: albums, isFetching: l5 } = useQuery({
-    queryKey: ["search", "albums", debouncedSearch],
-    queryFn: () =>
-      searchFn({
-        query: debouncedSearch,
-        types: ["MusicAlbum"],
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
-  const { data: songs, isFetching: l6 } = useQuery({
-    queryKey: ["search", "songs", debouncedSearch],
-    queryFn: () =>
-      searchFn({
-        query: debouncedSearch,
-        types: ["Audio"],
-      }),
-    enabled: searchType === "Library" && debouncedSearch.length > 0,
-  });
-
  const noResults = useMemo(() => {
    return !(
-      artists?.length ||
-      albums?.length ||
-      songs?.length ||
      movies?.length ||
      episodes?.length ||
      series?.length ||
      collections?.length ||
-      actors?.length ||
-      jellyseerrMovieResults?.length ||
-      jellyseerrTvResults?.length
+      actors?.length
    );
-  }, [
-    artists,
-    episodes,
-    albums,
-    songs,
-    movies,
-    series,
-    collections,
-    actors,
-    jellyseerrResults,
-  ]);
+  }, [episodes, 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 || l7 || l8;
+  }, [l1, l2, l3, l7, l8]);

  return (
    <>
@@ -300,7 +207,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 +242,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!)}
@@ -426,168 +331,39 @@ export default function search() {
                  </TouchableItemRouter>
                )}
              />
-              <SearchItemWrapper
-                ids={artists?.map((m) => m.Id!)}
-                header="Artists"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={albums?.map((m) => m.Id!)}
-                header="Albums"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
-              <SearchItemWrapper
-                ids={songs?.map((m) => m.Id!)}
-                header="Songs"
-                renderItem={(item: BaseItemDto) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28 mr-2"
-                  >
-                    <AlbumCover id={item.AlbumId} />
-                    <ItemCardText item={item} />
-                  </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/_layout.tsx
+++ b/app/(auth)/player/_layout.tsx
@@ -25,15 +25,6 @@ export default function Layout() {
            animation: "fade",
          }}
        />
-        <Stack.Screen
-          name="music-player"
-          options={{
-            headerShown: false,
-            autoHideHomeIndicator: true,
-            title: "",
-            animation: "fade",
-          }}
-        />
      </Stack>
    </>
  );
--- 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
@@ -1,417 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { Loader } from "@/components/Loader";
-import { Controls } from "@/components/video-player/controls/Controls";
-import { useOrientation } from "@/hooks/useOrientation";
-import { useOrientationSettings } from "@/hooks/useOrientationSettings";
-import { useWebSocket } from "@/hooks/useWebsockets";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { Api } from "@jellyfin/sdk";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import {
-  getPlaystateApi,
-  getUserLibraryApi,
-} from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import * as Haptics from "expo-haptics";
-import { Image } from "expo-image";
-import { useFocusEffect, useLocalSearchParams } from "expo-router";
-import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, useWindowDimensions, View } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import Video, { OnProgressData, VideoRef } from "react-native-video";
-
-export default function page() {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const [settings] = useSettings();
-  const videoRef = useRef<VideoRef | null>(null);
-  const windowDimensions = useWindowDimensions();
-
-  const firstTime = useRef(true);
-
-  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
-  const [showControls, setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isBuffering, setIsBuffering] = useState(true);
-
-  const progress = useSharedValue(0);
-  const isSeeking = useSharedValue(false);
-  const cacheProgress = useSharedValue(0);
-
-  const {
-    itemId,
-    audioIndex: audioIndexStr,
-    subtitleIndex: subtitleIndexStr,
-    mediaSourceId,
-    bitrateValue: bitrateValueStr,
-  } = useLocalSearchParams<{
-    itemId: string;
-    audioIndex: string;
-    subtitleIndex: string;
-    mediaSourceId: string;
-    bitrateValue: string;
-  }>();
-
-  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
-  const subtitleIndex = subtitleIndexStr
-    ? parseInt(subtitleIndexStr, 10)
-    : undefined;
-  const bitrateValue = bitrateValueStr
-    ? parseInt(bitrateValueStr, 10)
-    : undefined;
-
-  const {
-    data: item,
-    isLoading: isLoadingItem,
-    isError: isErrorItem,
-  } = useQuery({
-    queryKey: ["item", itemId],
-    queryFn: async () => {
-      if (!api) return;
-      const res = await getUserLibraryApi(api).getItem({
-        itemId,
-        userId: user?.Id,
-      });
-
-      return res.data;
-    },
-    enabled: !!itemId && !!api,
-    staleTime: 0,
-  });
-
-  const {
-    data: stream,
-    isLoading: isLoadingStreamUrl,
-    isError: isErrorStreamUrl,
-  } = useQuery({
-    queryKey: ["stream-url"],
-    queryFn: async () => {
-      if (!api) return;
-      const res = await getStreamUrl({
-        api,
-        item,
-        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
-        userId: user?.Id,
-        audioStreamIndex: audioIndex,
-        maxStreamingBitrate: bitrateValue,
-        mediaSourceId: mediaSourceId,
-        subtitleStreamIndex: subtitleIndex,
-      });
-
-      if (!res) return null;
-
-      const { mediaSource, sessionId, url } = res;
-
-      if (!sessionId || !mediaSource || !url) return null;
-
-      return {
-        mediaSource,
-        sessionId,
-        url,
-      };
-    },
-  });
-
-  const poster = usePoster(item, api);
-  const videoSource = useVideoSource(item, api, poster, stream?.url);
-
-  const togglePlay = useCallback(
-    async (ticks: number) => {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-      if (isPlaying) {
-        videoRef.current?.pause();
-        await getPlaystateApi(api!).onPlaybackProgress({
-          itemId: item?.Id!,
-          audioStreamIndex: audioIndex ? audioIndex : undefined,
-          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-          mediaSourceId: mediaSourceId,
-          positionTicks: Math.floor(ticks),
-          isPaused: true,
-          playMethod: stream?.url.includes("m3u8")
-            ? "Transcode"
-            : "DirectStream",
-          playSessionId: stream?.sessionId,
-        });
-      } else {
-        videoRef.current?.resume();
-        await getPlaystateApi(api!).onPlaybackProgress({
-          itemId: item?.Id!,
-          audioStreamIndex: audioIndex ? audioIndex : undefined,
-          subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-          mediaSourceId: mediaSourceId,
-          positionTicks: Math.floor(ticks),
-          isPaused: false,
-          playMethod: stream?.url.includes("m3u8")
-            ? "Transcode"
-            : "DirectStream",
-          playSessionId: stream?.sessionId,
-        });
-      }
-    },
-    [
-      isPlaying,
-      api,
-      item,
-      videoRef,
-      settings,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-      stream,
-    ]
-  );
-
-  const play = useCallback(() => {
-    videoRef.current?.resume();
-    reportPlaybackStart();
-  }, [videoRef]);
-
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-  }, [videoRef]);
-
-  const stop = useCallback(() => {
-    setIsPlaybackStopped(true);
-    videoRef.current?.pause();
-    reportPlaybackStopped();
-  }, [videoRef]);
-
-  const seek = useCallback(
-    (seconds: number) => {
-      videoRef.current?.seek(seconds);
-    },
-    [videoRef]
-  );
-
-  const reportPlaybackStopped = async () => {
-    if (!item?.Id) return;
-    await getPlaystateApi(api!).onPlaybackStopped({
-      itemId: item.Id,
-      mediaSourceId: mediaSourceId,
-      positionTicks: Math.floor(progress.value),
-      playSessionId: stream?.sessionId,
-    });
-  };
-
-  const reportPlaybackStart = async () => {
-    if (!item?.Id) return;
-    await getPlaystateApi(api!).onPlaybackStart({
-      itemId: item?.Id,
-      audioStreamIndex: audioIndex ? audioIndex : undefined,
-      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-      mediaSourceId: mediaSourceId,
-      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: stream?.sessionId,
-    });
-  };
-
-  const onProgress = useCallback(
-    async (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      if (isPlaybackStopped === true) return;
-
-      const ticks = data.currentTime * 10000000;
-
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBuffering(data.playableDuration === 0);
-
-      if (!item?.Id || data.currentTime === 0) return;
-
-      await getPlaystateApi(api!).onPlaybackProgress({
-        itemId: item.Id!,
-        audioStreamIndex: audioIndex ? audioIndex : undefined,
-        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-        mediaSourceId: mediaSourceId,
-        positionTicks: Math.round(ticks),
-        isPaused: !isPlaying,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream?.sessionId,
-      });
-    },
-    [
-      item,
-      isPlaying,
-      api,
-      isPlaybackStopped,
-      audioIndex,
-      subtitleIndex,
-      mediaSourceId,
-      stream,
-    ]
-  );
-
-  useFocusEffect(
-    useCallback(() => {
-      play();
-
-      return () => {
-        stop();
-      };
-    }, [play, stop])
-  );
-
-  useOrientation();
-  useOrientationSettings();
-
-  useWebSocket({
-    isPlaying: isPlaying,
-    pauseVideo: pause,
-    playVideo: play,
-    stopPlayback: stop,
-  });
-
-  if (isLoadingItem || isLoadingStreamUrl)
-    return (
-      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Loader />
-      </View>
-    );
-
-  if (isErrorItem || isErrorStreamUrl)
-    return (
-      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Text className="text-white">Error</Text>
-      </View>
-    );
-
-  if (!item || !stream)
-    return (
-      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
-        <Text className="text-white">Error</Text>
-      </View>
-    );
-
-  return (
-    <View
-      style={{
-        width: windowDimensions.width,
-        height: windowDimensions.height,
-        position: "relative",
-      }}
-      className="flex flex-col items-center justify-center"
-    >
-      <View className="h-screen w-screen top-0 left-0 flex flex-col items-center justify-center p-4 absolute z-0">
-        <Image
-          source={poster}
-          style={{ width: "100%", height: "100%", resizeMode: "contain" }}
-        />
-      </View>
-
-      <Pressable
-        onPress={() => {
-          setShowControls(!showControls);
-        }}
-        className="absolute z-0 h-full w-full opacity-0"
-      >
-        {videoSource && (
-          <Video
-            ref={videoRef}
-            source={videoSource}
-            style={{ width: "100%", height: "100%" }}
-            resizeMode={ignoreSafeAreas ? "cover" : "contain"}
-            onProgress={onProgress}
-            onError={() => {}}
-            onLoad={() => {
-              if (firstTime.current === true) {
-                play();
-                firstTime.current = false;
-              }
-            }}
-            progressUpdateInterval={500}
-            playWhenInactive={true}
-            allowsExternalPlayback={true}
-            playInBackground={true}
-            pictureInPicture={true}
-            showNotificationControls={true}
-            ignoreSilentSwitch="ignore"
-            fullscreen={false}
-            onPlaybackStateChanged={(state) => {
-              setIsPlaying(state.isPlaying);
-            }}
-          />
-        )}
-      </Pressable>
-
-      <Controls
-        item={item}
-        videoRef={videoRef}
-        togglePlay={togglePlay}
-        isPlaying={isPlaying}
-        isSeeking={isSeeking}
-        progress={progress}
-        cacheProgress={cacheProgress}
-        isBuffering={isBuffering}
-        showControls={showControls}
-        setShowControls={setShowControls}
-        setIgnoreSafeAreas={setIgnoreSafeAreas}
-        ignoreSafeAreas={ignoreSafeAreas}
-        enableTrickplay={false}
-        pause={pause}
-        play={play}
-        seek={seek}
-        isVlc={false}
-        stop={stop}
-      />
-    </View>
-  );
-}
-
-export function usePoster(
-  item: BaseItemDto | null | undefined,
-  api: Api | null
-): string | undefined {
-  const poster = useMemo(() => {
-    if (!item || !api) return undefined;
-    return item.Type === "Audio"
-      ? `${api.basePath}/Items/${item.AlbumId}/Images/Primary?tag=${item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: item,
-          quality: 70,
-          width: 200,
-        });
-  }, [item, api]);
-
-  return poster ?? undefined;
-}
-
-export function useVideoSource(
-  item: BaseItemDto | null | undefined,
-  api: Api | null,
-  poster: string | undefined,
-  url?: string | null
-) {
-  const videoSource = useMemo(() => {
-    if (!item || !api || !url) {
-      return null;
-    }
-
-    const startPosition = item?.UserData?.PlaybackPositionTicks
-      ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-
-    return {
-      uri: url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: item?.AlbumArtist ?? undefined,
-        title: item?.Name || "Unknown",
-        description: item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: item?.Album ?? undefined,
-      },
-    };
-  }, [item, api, poster]);
-
-  return videoSource;
-}
--- 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 ? (
@@ -414,7 +414,6 @@ const Player = () => {
              playWhenInactive={true}
              allowsExternalPlayback={true}
              playInBackground={true}
-              pictureInPicture={true}
              showNotificationControls={true}
              ignoreSilentSwitch="ignore"
              fullscreen={false}
@@ -532,7 +531,6 @@ export function useVideoSource(
      startPosition,
      headers: getAuthHeaders(api),
      metadata: {
-        artist: item?.AlbumArtist ?? undefined,
        title: item?.Name || "Unknown",
        description: item?.Overview ?? undefined,
        imageUri: poster,
--- 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
@@ -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={{
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -1,11 +1,12 @@
 import { Button } from "@/components/Button";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
+import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
 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 } 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";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
@@ -39,7 +40,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 +77,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 +97,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 +138,8 @@ const Login: React.FC = () => {
        return url;
      }

+      return undefined;
+    } catch {
      return undefined;
    } finally {
      setLoadingServerCheck(false);
@@ -189,133 +193,140 @@ 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>
+                <JellyfinServerDiscovery
+                  onServerSelect={(server) => {
+                    setServerURL(server.address);
+                    if (server.serverName) {
+                      setServerName(server.serverName);
+                    }
+                    handleConnect(server.address);
+                  }}
+                />
+                <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/index.ts
+++ b/augmentations/index.ts
@@ -1,3 +1,4 @@
+export * from "./api";
 export * from "./mmkv";
 export * from "./number";
 export * from "./string";
--- 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/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -2,7 +2,7 @@ import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
@@ -74,7 +74,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    [user]
  );
  const usingOptimizedServer = useMemo(
-    () => settings?.downloadMethod === "optimized",
+    () => settings?.downloadMethod === DownloadMethod.Optimized,
    [settings]
  );

--- 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/JellyfinServerDiscovery.tsx
+++ b/components/JellyfinServerDiscovery.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { useJellyfinDiscovery } from "@/hooks/useJellyfinDiscovery";
+import { Button } from "./Button";
+import { ListGroup } from "./list/ListGroup";
+import { ListItem } from "./list/ListItem";
+
+interface Props {
+  onServerSelect?: (server: { address: string; serverName?: string }) => void;
+}
+
+const JellyfinServerDiscovery: React.FC<Props> = ({ onServerSelect }) => {
+  const { servers, isSearching, startDiscovery } = useJellyfinDiscovery();
+
+  return (
+    <View className="mt-2">
+      <Button onPress={startDiscovery} color="black">
+        <Text className="text-white text-center">
+          {isSearching ? "Searching..." : "Search for local servers"}
+        </Text>
+      </Button>
+
+      {servers.length ? (
+        <ListGroup title="Servers" className="mt-4">
+          {servers.map((server) => (
+            <ListItem
+              key={server.address}
+              onPress={() =>
+                onServerSelect?.({
+                  address: server.address,
+                  serverName: server.serverName,
+                })
+              }
+              title={server.address}
+              showArrow
+            />
+          ))}
+        </ListGroup>
+      ) : null}
+    </View>
+  );
+};
+
+export default JellyfinServerDiscovery;
--- 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,108 @@
+import * as DropdownMenu from "zeego/dropdown-menu";
+import {TouchableOpacity, View, ViewProps} from "react-native";
+import {Text} from "@/components/common/Text";
+import React, {PropsWithChildren, ReactNode, useEffect, useState} from "react";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+
+interface Props<T> {
+  data: T[]
+  disabled?: boolean
+  placeholderText?: string,
+  keyExtractor: (item: T) => string
+  titleExtractor: (item: T) => string | undefined
+  title: string | ReactNode,
+  label: string,
+  onSelected: (...item: T[]) => void
+  multi?: boolean
+}
+
+const Dropdown =  <T extends unknown>({
+  data,
+  disabled,
+  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 (
+    <DisabledSetting
+      disabled={disabled === true}
+      showText={false}
+      {...props}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          {typeof title === 'string' ? (
+            <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>
+          ) : (
+            <>
+              {title}
+            </>
+          )}
+        </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>
+    </DisabledSetting>
+  )
+};
+
+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`;
  }
@@ -26,18 +26,6 @@ export const itemRouter = (
    return `/(auth)/(tabs)/${from}/series/${item.Id}`;
  }

-  if (item.Type === "MusicAlbum") {
-    return `/(auth)/(tabs)/${from}/albums/${item.Id}`;
-  }
-
-  if (item.Type === "Audio") {
-    return `/(auth)/(tabs)/${from}/albums/${item.AlbumId}`;
-  }
-
-  if (item.Type === "MusicArtist") {
-    return `/(auth)/(tabs)/${from}/artists/${item.Id}`;
-  }
-
  if (item.Type === "Person" || item.Type === "Actor") {
    return `/(auth)/(tabs)/${from}/actors/${item.Id}`;
  }
@@ -68,10 +56,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 +91,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/ActiveDownloads.tsx
+++ b/components/downloads/ActiveDownloads.tsx
@@ -1,7 +1,6 @@
 import { Text } from "@/components/common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
+import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
 import { JobStatus } from "@/utils/optimize-server";
 import { formatTimeString } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
@@ -9,7 +8,6 @@ import { checkForExistingDownloads } from "@kesha-antonov/react-native-backgroun
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
 import { FFmpegKit } from "ffmpeg-kit-react-native";
-import { useAtom } from "jotai";
 import {
  ActivityIndicator,
  TouchableOpacity,
@@ -62,7 +60,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
    mutationFn: async (id: string) => {
      if (!process) throw new Error("No active download");

-      if (settings?.downloadMethod === "optimized") {
+      if (settings?.downloadMethod === DownloadMethod.Optimized) {
        try {
          const tasks = await checkForExistingDownloads();
          for (const task of tasks) {
--- 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/Favorites.tsx
+++ b/components/home/Favorites.tsx
@@ -54,14 +54,6 @@ export const Favorites = () => {
    () => fetchFavoritesByType("Playlist"),
    [fetchFavoritesByType]
  );
-  const fetchFavoriteMusicAlbum = useCallback(
-    () => fetchFavoritesByType("MusicAlbum"),
-    [fetchFavoritesByType]
-  );
-  const fetchFavoriteAudio = useCallback(
-    () => fetchFavoritesByType("Audio"),
-    [fetchFavoritesByType]
-  );

  return (
    <View className="flex flex-co gap-y-4">
@@ -102,18 +94,6 @@ export const Favorites = () => {
        title="Playlists"
        hideIfEmpty
      />
-      <ScrollingCollectionList
-        queryFn={fetchFavoriteMusicAlbum}
-        queryKey={["home", "favorites", "musicAlbums"]}
-        title="Music Albums"
-        hideIfEmpty
-      />
-      <ScrollingCollectionList
-        queryFn={fetchFavoriteAudio}
-        queryKey={["home", "favorites", "audio"]}
-        title="Audio"
-        hideIfEmpty
-      />
    </View>
  );
 };
--- a/components/home/LargeMovieCarousel.tsx
+++ b/components/home/LargeMovieCarousel.tsx
@@ -1,3 +1,4 @@
+import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
@@ -6,9 +7,11 @@ import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
+import { useRouter, useSegments } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo } from "react";
-import { Dimensions, TouchableOpacity, View, ViewProps } from "react-native";
+import { Dimensions, View, ViewProps } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
  runOnJS,
  useSharedValue,
@@ -18,11 +21,7 @@ import Carousel, {
  ICarouselInstance,
  Pagination,
 } from "react-native-reanimated-carousel";
-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 { itemRouter } from "../common/TouchableItemRouter";

 interface Props extends ViewProps {}

@@ -128,6 +127,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 +153,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/inputs/Stepper.tsx
+++ b/components/inputs/Stepper.tsx
@@ -1,8 +1,10 @@
 import {TouchableOpacity, View} from "react-native";
 import {Text} from "@/components/common/Text";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 interface StepperProps {
  value: number,
+  disabled?: boolean,
  step: number,
  min: number,
  max: number,
@@ -12,6 +14,7 @@ interface StepperProps {

 export const Stepper: React.FC<StepperProps> = ({
  value,
+  disabled,
  step,
  min,
  max,
@@ -19,7 +22,11 @@ export const Stepper: React.FC<StepperProps> = ({
  appendValue
 }) => {
  return (
-    <View className="flex flex-row items-center">
+    <DisabledSetting
+      disabled={disabled === true}
+      showText={false}
+      className="flex flex-row items-center"
+    >
      <TouchableOpacity
        onPress={() => onUpdate(Math.max(min, value - step))}
        className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
@@ -39,6 +46,6 @@ export const Stepper: React.FC<StepperProps> = ({
      >
        <Text>+</Text>
      </TouchableOpacity>
-    </View>
+    </DisabledSetting>
  )
 }
--- 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/library/LibraryItemCard.tsx
+++ b/components/library/LibraryItemCard.tsx
@@ -60,8 +60,6 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
      _itemType = "Series";
    } else if (library.CollectionType === "boxsets") {
      _itemType = "BoxSet";
-    } else if (library.CollectionType === "music") {
-      _itemType = "MusicAlbum";
    }

    return _itemType;
@@ -76,8 +74,6 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
      nameStr = "series";
    } else if (library.CollectionType === "boxsets") {
      nameStr = "box sets";
-    } else if (library.CollectionType === "music") {
-      nameStr = "albums";
    } else {
      nameStr = "items";
    }
--- a/components/music/SongsList.tsx
+++ b/components/music/SongsList.tsx
@@ -1,35 +0,0 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter } from "expo-router";
-import { View, ViewProps } from "react-native";
-import { SongsListItem } from "./SongsListItem";
-
-interface Props extends ViewProps {
-  songs?: BaseItemDto[] | null;
-  collectionId: string;
-  artistId: string;
-  albumId: string;
-}
-
-export const SongsList: React.FC<Props> = ({
-  collectionId,
-  artistId,
-  albumId,
-  songs = [],
-  ...props
-}) => {
-  const router = useRouter();
-  return (
-    <View className="flex flex-col space-y-2" {...props}>
-      {songs?.map((item: BaseItemDto, index: number) => (
-        <SongsListItem
-          key={item.Id}
-          item={item}
-          index={index}
-          collectionId={collectionId}
-          artistId={artistId}
-          albumId={albumId}
-        />
-      ))}
-    </View>
-  );
-};
--- a/components/music/SongsListItem.tsx
+++ b/components/music/SongsListItem.tsx
@@ -1,128 +0,0 @@
-import { Text } from "@/components/common/Text";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { usePlaySettings } from "@/providers/PlaySettingsProvider";
-import { runtimeTicksToSeconds } from "@/utils/time";
-import { useActionSheet } from "@expo/react-native-action-sheet";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import { useCallback } from "react";
-import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
-import CastContext, {
-  PlayServicesState,
-  useCastDevice,
-  useRemoteMediaClient,
-} from "react-native-google-cast";
-
-interface Props extends TouchableOpacityProps {
-  collectionId: string;
-  artistId: string;
-  albumId: string;
-  item: BaseItemDto;
-  index: number;
-}
-
-export const SongsListItem: React.FC<Props> = ({
-  collectionId,
-  artistId,
-  albumId,
-  item,
-  index,
-  ...props
-}) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const castDevice = useCastDevice();
-  const router = useRouter();
-  const client = useRemoteMediaClient();
-  const { showActionSheetWithOptions } = useActionSheet();
-
-  const { setPlaySettings } = usePlaySettings();
-
-  const openSelect = () => {
-    if (!castDevice?.deviceId) {
-      play("device");
-      return;
-    }
-
-    const options = ["Chromecast", "Device", "Cancel"];
-    const cancelButtonIndex = 2;
-
-    showActionSheetWithOptions(
-      {
-        options,
-        cancelButtonIndex,
-      },
-      (selectedIndex: number | undefined) => {
-        switch (selectedIndex) {
-          case 0:
-            play("cast");
-            break;
-          case 1:
-            play("device");
-            break;
-          case cancelButtonIndex:
-            break;
-        }
-      }
-    );
-  };
-
-  const play = useCallback(async (type: "device" | "cast") => {
-    if (!user?.Id || !api || !item.Id) {
-      console.warn("No user, api or item", user, api, item.Id);
-      return;
-    }
-
-    const data = await setPlaySettings({
-      item,
-    });
-
-    if (!data?.url) {
-      throw new Error("play-music ~ No stream url");
-    }
-
-    if (type === "cast" && client) {
-      await CastContext.getPlayServicesState().then((state) => {
-        if (state && state !== PlayServicesState.SUCCESS)
-          CastContext.showPlayServicesErrorDialog(state);
-        else {
-          client.loadMedia({
-            mediaInfo: {
-              contentUrl: data.url!,
-              contentType: "video/mp4",
-              metadata: {
-                type: item.Type === "Episode" ? "tvShow" : "movie",
-                title: item.Name || "",
-                subtitle: item.Overview || "",
-              },
-            },
-            startTime: 0,
-          });
-        }
-      });
-    } else {
-      console.log("Playing on device", data.url, item.Id);
-      router.push("/music-player");
-    }
-  }, []);
-
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        openSelect();
-      }}
-      {...props}
-    >
-      <View className="flex flex-row items-center space-x-4 bg-neutral-900 border-neutral-800 px-4 py-4 rounded-xl">
-        <Text className="opacity-50">{index + 1}</Text>
-        <View>
-          <Text className="mb-0.5 font-semibold">{item.Name}</Text>
-          <Text className="opacity-50 text-xs">
-            {runtimeTicksToSeconds(item.RunTimeTicks)}
-          </Text>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-};
--- a/components/posters/AlbumCover.tsx
+++ b/components/posters/AlbumCover.tsx
@@ -1,82 +0,0 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { getPrimaryImageUrlById } from "@/utils/jellyfin/image/getPrimaryImageUrlById";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
-import { useAtom } from "jotai";
-import { useMemo } from "react";
-import { View } from "react-native";
-
-type ArtistPosterProps = {
-  item?: BaseItemDto | null;
-  id?: string | null;
-  showProgress?: boolean;
-};
-
-const AlbumCover: React.FC<ArtistPosterProps> = ({ item, id }) => {
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(() => {
-    const u = getPrimaryImageUrl({
-      api,
-      item,
-    });
-    return u;
-  }, [item]);
-
-  const url2 = useMemo(() => {
-    const u = getPrimaryImageUrlById({
-      api,
-      id,
-      quality: 85,
-      width: 300,
-    });
-    return u;
-  }, [item]);
-
-  if (!item && id)
-    return (
-      <View className="relative rounded-lg overflow-hidden border border-neutral-900">
-        <Image
-          key={id}
-          id={id}
-          source={
-            url2
-              ? {
-                  uri: url2,
-                }
-              : null
-          }
-          cachePolicy={"memory-disk"}
-          contentFit="cover"
-          style={{
-            aspectRatio: "1/1",
-          }}
-        />
-      </View>
-    );
-
-  if (item)
-    return (
-      <View className="relative rounded-md overflow-hidden border border-neutral-900">
-        <Image
-          key={item.Id}
-          id={item.Id}
-          source={
-            url
-              ? {
-                  uri: url,
-                }
-              : null
-          }
-          cachePolicy={"memory-disk"}
-          contentFit="cover"
-          style={{
-            aspectRatio: "1/1",
-          }}
-        />
-      </View>
-    );
-};
-
-export default AlbumCover;
--- a/components/posters/ArtistPoster.tsx
+++ b/components/posters/ArtistPoster.tsx
@@ -1,57 +0,0 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
-import { useAtom } from "jotai";
-import { useMemo } from "react";
-import { View } from "react-native";
-
-type ArtistPosterProps = {
-  item: BaseItemDto;
-  showProgress?: boolean;
-};
-
-const ArtistPoster: React.FC<ArtistPosterProps> = ({
-  item,
-  showProgress = false,
-}) => {
-  const [api] = useAtom(apiAtom);
-
-  const url = useMemo(
-    () =>
-      getPrimaryImageUrl({
-        api,
-        item,
-      }),
-    [item]
-  );
-
-  if (!url)
-    return (
-      <View
-        className="rounded-lg overflow-hidden border border-neutral-900"
-        style={{
-          aspectRatio: "1/1",
-        }}
-      ></View>
-    );
-
-  return (
-    <View className="relative rounded-md overflow-hidden border border-neutral-900">
-      <Image
-        key={item.Id}
-        id={item.Id}
-        source={{
-          uri: url,
-        }}
-        cachePolicy={"memory-disk"}
-        contentFit="cover"
-        style={{
-          aspectRatio: "1/1",
-        }}
-      />
-    </View>
-  );
-};
-
-export default ArtistPoster;
--- 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/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -6,11 +6,13 @@ import { Switch } from "react-native-gesture-handler";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 import { Ionicons } from "@expo/vector-icons";
+import {useSettings} from "@/utils/atoms/settings";

 interface Props extends ViewProps {}

 export const AudioToggles: React.FC<Props> = ({ ...props }) => {
  const media = useMedia();
+  const [_, __, pluginSettings] = useSettings();
  const { settings, updateSettings } = media;
  const cultures = media.cultures;

@@ -26,9 +28,13 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
          </Text>
        }
      >
-        <ListItem title={"Set Audio Track From Previous Item"}>
+        <ListItem
+          title={"Set Audio Track From Previous Item"}
+          disabled={pluginSettings?.rememberAudioSelections?.locked}
+        >
          <Switch
            value={settings.rememberAudioSelections}
+            disabled={pluginSettings?.rememberAudioSelections?.locked}
            onValueChange={(value) =>
              updateSettings({ rememberAudioSelections: value })
            }
--- a/components/settings/DisabledSetting.tsx
+++ b/components/settings/DisabledSetting.tsx
@@ -0,0 +1,26 @@
+import {View, ViewProps} from "react-native";
+import {Text} from "@/components/common/Text";
+
+const DisabledSetting: React.FC<{disabled: boolean, showText?: boolean, text?: string} & ViewProps> = ({
+  disabled = false,
+  showText = true,
+  text,
+  children,
+  ...props
+}) => (
+  <View
+    pointerEvents={disabled ? "none" : "auto"}
+    style={{
+      opacity: disabled ? 0.5 : 1,
+    }}
+  >
+    <View {...props}>
+      {disabled && showText &&
+          <Text className="text-center text-red-700 my-4">{text ?? "Currently disabled by admin."}</Text>
+      }
+      {children}
+    </View>
+  </View>
+)
+
+export default DisabledSetting;
--- a/components/settings/DownloadSettings.tsx
+++ b/components/settings/DownloadSettings.tsx
@@ -1,33 +1,45 @@
 import { Stepper } from "@/components/inputs/Stepper";
 import { useDownload } from "@/providers/DownloadProvider";
-import { Settings, useSettings } from "@/utils/atoms/settings";
+import { DownloadMethod, Settings, useSettings } from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "expo-router";
-import React from "react";
-import { Switch, TouchableOpacity, View } from "react-native";
+import React, { useMemo } from "react";
+import { Switch, TouchableOpacity } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import DisabledSetting from "@/components/settings/DisabledSetting";

 export const DownloadSettings: React.FC = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();
  const { setProcesses } = useDownload();
  const router = useRouter();
  const queryClient = useQueryClient();

+  const allDisabled = useMemo(
+    () =>
+      pluginSettings?.downloadMethod?.locked === true &&
+      pluginSettings?.remuxConcurrentLimit?.locked === true &&
+      pluginSettings?.autoDownload.locked === true,
+    [pluginSettings]
+  );
+
  if (!settings) return null;

  return (
-    <View {...props} className="mb-4">
+    <DisabledSetting disabled={allDisabled} {...props} className="mb-4">
      <ListGroup title="Downloads">
-        <ListItem title="Download method">
+        <ListItem
+          title="Download method"
+          disabled={pluginSettings?.downloadMethod?.locked}
+        >
          <DropdownMenu.Root>
            <DropdownMenu.Trigger>
              <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
                <Text className="mr-1 text-[#8E8D91]">
-                  {settings.downloadMethod === "remux"
+                  {settings.downloadMethod === DownloadMethod.Remux
                    ? "Default"
                    : "Optimized"}
                </Text>
@@ -51,7 +63,7 @@ export const DownloadSettings: React.FC = ({ ...props }) => {
              <DropdownMenu.Item
                key="1"
                onSelect={() => {
-                  updateSettings({ downloadMethod: "remux" });
+                  updateSettings({ downloadMethod: DownloadMethod.Remux });
                  setProcesses([]);
                }}
              >
@@ -60,7 +72,7 @@ export const DownloadSettings: React.FC = ({ ...props }) => {
              <DropdownMenu.Item
                key="2"
                onSelect={() => {
-                  updateSettings({ downloadMethod: "optimized" });
+                  updateSettings({ downloadMethod: DownloadMethod.Optimized });
                  setProcesses([]);
                  queryClient.invalidateQueries({ queryKey: ["search"] });
                }}
@@ -73,7 +85,10 @@ export const DownloadSettings: React.FC = ({ ...props }) => {

        <ListItem
          title="Remux max download"
-          disabled={settings.downloadMethod !== "remux"}
+          disabled={
+            pluginSettings?.remuxConcurrentLimit?.locked ||
+            settings.downloadMethod !== DownloadMethod.Remux
+          }
        >
          <Stepper
            value={settings.remuxConcurrentLimit}
@@ -90,22 +105,31 @@ export const DownloadSettings: React.FC = ({ ...props }) => {

        <ListItem
          title="Auto download"
-          disabled={settings.downloadMethod !== "optimized"}
+          disabled={
+            pluginSettings?.autoDownload?.locked ||
+            settings.downloadMethod !== DownloadMethod.Optimized
+          }
        >
          <Switch
-            disabled={settings.downloadMethod !== "optimized"}
+            disabled={
+              pluginSettings?.autoDownload?.locked ||
+              settings.downloadMethod !== DownloadMethod.Optimized
+            }
            value={settings.autoDownload}
            onValueChange={(value) => updateSettings({ autoDownload: value })}
          />
        </ListItem>

        <ListItem
-          disabled={settings.downloadMethod !== "optimized"}
+          disabled={
+            pluginSettings?.optimizedVersionsServerUrl?.locked ||
+            settings.downloadMethod !== DownloadMethod.Optimized
+          }
          onPress={() => router.push("/settings/optimized-server/page")}
          showArrow
          title="Optimized Versions Server"
        ></ListItem>
      </ListGroup>
-    </View>
+    </DisabledSetting>
  );
 };
--- a/components/settings/Jellyseerr.tsx
+++ b/components/settings/Jellyseerr.tsx
@@ -21,7 +21,7 @@ export const JellyseerrSettings = () => {
  } = useJellyseerr();

  const [user] = useAtom(userAtom);
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  const [promptForJellyseerrPass, setPromptForJellyseerrPass] =
    useState<boolean>(false);
--- a/components/settings/MediaToggles.tsx
+++ b/components/settings/MediaToggles.tsx
@@ -1,72 +1,61 @@
-import React from "react";
-import { TouchableOpacity, View, ViewProps } from "react-native";
+import React, {useMemo} from "react";
+import { ViewProps } from "react-native";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
-import { Text } from "../common/Text";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import {Stepper} from "@/components/inputs/Stepper";

 interface Props extends ViewProps {}

 export const MediaToggles: React.FC<Props> = ({ ...props }) => {
-  const [settings, updateSettings] = useSettings();
+  const [settings, updateSettings, pluginSettings] = useSettings();

  if (!settings) return null;

-  const renderSkipControl = (
-    value: number,
-    onDecrease: () => void,
-    onIncrease: () => void
-  ) => (
-    <View className="flex flex-row items-center">
-      <TouchableOpacity
-        onPress={onDecrease}
-        className="w-8 h-8 bg-neutral-800 rounded-l-lg flex items-center justify-center"
-      >
-        <Text>-</Text>
-      </TouchableOpacity>
-      <Text className="w-12 h-8 bg-neutral-800 first-letter:px-3 py-2 flex items-center justify-center">
-        {value}s
-      </Text>
-      <TouchableOpacity
-        className="w-8 h-8 bg-neutral-800 rounded-r-lg flex items-center justify-center"
-        onPress={onIncrease}
-      >
-        <Text>+</Text>
-      </TouchableOpacity>
-    </View>
-  );
+  const disabled = useMemo(() => (
+      pluginSettings?.forwardSkipTime?.locked === true &&
+      pluginSettings?.rewindSkipTime?.locked === true
+    ),
+    [pluginSettings]
+  )

  return (
-    <View {...props}>
+    <DisabledSetting
+      disabled={disabled}
+      {...props}
+    >
      <ListGroup title="Media Controls">
-        <ListItem title="Forward Skip Length">
-          {renderSkipControl(
-            settings.forwardSkipTime,
-            () =>
-              updateSettings({
-                forwardSkipTime: Math.max(0, settings.forwardSkipTime - 5),
-              }),
-            () =>
-              updateSettings({
-                forwardSkipTime: Math.min(60, settings.forwardSkipTime + 5),
-              })
-          )}
+        <ListItem
+          title="Forward Skip Length"
+          disabled={pluginSettings?.forwardSkipTime?.locked}
+        >
+          <Stepper
+            value={settings.forwardSkipTime}
+            disabled={pluginSettings?.forwardSkipTime?.locked}
+            step={5}
+            appendValue="s"
+            min={0}
+            max={60}
+            onUpdate={(forwardSkipTime) => updateSettings({forwardSkipTime})}
+          />
        </ListItem>

-        <ListItem title="Rewind Length">
-          {renderSkipControl(
-            settings.rewindSkipTime,
-            () =>
-              updateSettings({
-                rewindSkipTime: Math.max(0, settings.rewindSkipTime - 5),
-              }),
-            () =>
-              updateSettings({
-                rewindSkipTime: Math.min(60, settings.rewindSkipTime + 5),
-              })
-          )}
+        <ListItem
+          title="Rewind Length"
+          disabled={pluginSettings?.rewindSkipTime?.locked}
+        >
+          <Stepper
+            value={settings.rewindSkipTime}
+            disabled={pluginSettings?.rewindSkipTime?.locked}
+            step={5}
+            appendValue="s"
+            min={0}
+            max={60}
+            onUpdate={(rewindSkipTime) => updateSettings({rewindSkipTime})}
+          />
        </ListItem>
      </ListGroup>
-    </View>
+    </DisabledSetting>
  );
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Fredrik Burmester	7c77c70024	chore: remove everything related to music	2025-01-12 13:40:01 +01:00
Fredrik Burmester	2495a318eb	Merge pull request #394 from Ryan0204/enhancement/autohidecontrol enhancement: auto hide control after 5 seconds	2025-01-12 10:16:55 +01:00
Fredrik Burmester	7832ea4d0a	chore: deps	2025-01-12 10:10:18 +01:00
Fredrik Burmester	4a0a51ef1d	chore: refactor	2025-01-12 10:07:49 +01:00
Fredrik Burmester	8cc551d906	Merge pull request #416 from streamyfin/feat/server-discovery feat: server discovery during login	2025-01-12 09:37:33 +01:00
Fredrik Burmester	c8da365a00	fix: issues listed in pr	2025-01-12 09:36:23 +01:00
Fredrik Burmester	74b7cbc530	Merge pull request #417 from whoopsi-daisy/patch-1 Update README.md	2025-01-12 09:33:38 +01:00
𝐂𝐡𝐫𝐢𝐬	a14063a736	Update README.md Adjusted the Jellyseerr screenshot height to match the others and corrected a typo, along with rephrasing a sentence for clarity	2025-01-12 00:52:17 +08:00
Fredrik Burmester	a3307a90a3	feat: server discovery during login	2025-01-11 11:21:36 +01:00
Fredrik Burmester	a2145fd7e8	chore: update deps	2025-01-11 10:20:20 +01:00
Fredrik Burmester	cab5e4d980	chore: rename var	2025-01-11 10:10:00 +01:00
Fredrik Burmester	ab603e6997	feat: add centralised plugin info	2025-01-11 10:09:53 +01:00
ryan0204	957348fe19	prevent opening control when user swipe on screen	2025-01-11 16:41:41 +08:00
herrrta	444bd040b0	Merge pull request #402 from streamyfin/feat/401 Streamyfin Plugin App Management solution	2025-01-11 00:20:35 -05:00
herrrta	d0ae63235d	feat: [StreamyfinPlugin] Library Options settings	2025-01-11 00:16:26 -05:00
herrrta	1727125ea7	feat: [StreamyfinPlugin] Popular Plugin settings	2025-01-11 00:16:25 -05:00
herrrta	dc498d62d8	feat: [StreamyfinPlugin] Other settings	2025-01-11 00:16:25 -05:00
herrrta	455bf08213	feat: [StreamyfinPlugin] Subtitle Toggles settings - Used stepper & dropdown components to simplify page	2025-01-11 00:16:20 -05:00
herrrta	0f974ef2a3	feat: [StreamyfinPlugin] Audio Toggles settings	2025-01-10 23:26:53 -05:00
herrrta	2d9aaccfe0	feat: [StreamyfinPlugin] Media Toggles settings	2025-01-10 23:26:44 -05:00
herrrta	2c6823eb53	feat: [StreamyfinPlugin] Jellyseerr, Search Engine, & Download settings - Added DisabledSetting.tsx component - Added DownloadMethod enum - cleanup	2025-01-10 23:26:32 -05:00
herrrta	9dfcc01f17	chore	2025-01-10 20:39:32 -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
ryan0204	0ebacd4bd3	Auto hide control after 5 seconds	2025-01-08 11:29:49 +08: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