chore

2025-01-23 13:37:41 +01:00 · 2025-01-23 13:16:55 +01:00 · 2025-01-23 11:38:42 +01:00 · 2025-01-23 11:34:22 +01:00 · 2025-01-23 11:30:02 +01:00 · 2025-01-23 11:29:35 +01:00
135 changed files with 3099 additions and 4362 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -4,7 +4,9 @@ title: "[Bug]: "
 labels:
  - ["❌ bug"]
 projects:
-  - ["streamyfin/3"]
+  - ["fredrikburmester/5"]
+assignees:
+  - fredrikburmester

 body:
  - type: textarea
@@ -43,7 +45,7 @@ body:
      label: Version
      description: What version of Streamyfin are you running?
      options:
-        - 0.25.0
+        - 0.23.0
        - 0.22.0
        - 0.21.0
        - older
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,8 +4,7 @@ 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
@@ -1,49 +0,0 @@
-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,6 +35,4 @@ credentials.json
 *.ipa
 .continuerc.json

-.vscode/
-.idea/
-.ruby-lsp
+.vscode/
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
--- a/.idea/caches/deviceStreaming.xml
+++ b/.idea/caches/deviceStreaming.xml
@@ -0,0 +1,329 @@
+<?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
@@ -0,0 +1,6 @@
+<?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
@@ -0,0 +1,8 @@
+<?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
@@ -0,0 +1,9 @@
+<?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
@@ -0,0 +1,6 @@
+<?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

- 🚀 **Skip Intro / Credits Support**
+- 🚀 **Skp 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 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'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.

 **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 your 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 you computer and run the app.

 ## 📄 License

--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.25.0",
+    "version": "0.23.0",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -36,7 +36,7 @@
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 50,
+      "versionCode": 49,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive_icon.png"
      },
@@ -111,8 +111,7 @@
        { "android": { "parentTheme": "Material3" } }
      ],
      ["react-native-bottom-tabs"],
-      ["./plugins/withChangeNativeAndroidTextToWhite.js"],
-      ["./plugins/withGoogleCastActivity.js"]
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"]
    ],
    "experiments": {
      "typedRoutes": true
@@ -131,6 +130,7 @@
    },
    "updates": {
      "url": "https://u.expo.dev/e79219d1-797f-4fbe-9fa1-cfd360690a68"
-    }
+    },
+    "newArchEnabled": false
  }
 }
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -77,20 +77,6 @@ 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 {DownloadMethod, useSettings} from "@/utils/atoms/settings";
+import { 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 === DownloadMethod.Remux && (
+            {settings?.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 } from "@tanstack/react-query";
+import { QueryFunction, useQuery, useQueryClient } 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,
+    data: userViews,
    isError: e1,
    isLoading: l1,
  } = useQuery({
@@ -136,11 +136,6 @@ 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
@@ -1,139 +0,0 @@
-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,22 +13,20 @@ import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
 import { useJellyfin } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
-import { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";
 import { useNavigation, useRouter } from "expo-router";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { storage } from "@/utils/mmkv";

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

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

  const navigation = useNavigation();
@@ -68,22 +66,6 @@ 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
@@ -1,65 +0,0 @@
-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,16 +1,78 @@
+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 DisabledSetting from "@/components/settings/DisabledSetting";
+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";

 export default function page() {
-  const [settings, updateSettings, pluginSettings] = useSettings();
+  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]);

  return (
-    <DisabledSetting
-      disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
-      className="p-4"
-    >
+    <View className="p-4">
      <JellyseerrSettings />
-    </DisabledSetting>
+    </View>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx
@@ -1,10 +1,12 @@
 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 React, {useEffect, useMemo, useState} from "react";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
 import {
  Linking,
  Switch,
@@ -13,12 +15,11 @@ 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, pluginSettings] = useSettings();
+  const [settings, updateSettings] = useSettings();
  const queryClient = useQueryClient();

  const [value, setValue] = useState<string>(settings?.marlinServerUrl || "");
@@ -34,81 +35,69 @@ 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(() => {
-    if (!pluginSettings?.marlinServerUrl?.locked) {
-      navigation.setOptions({
-        headerRight: () => (
-          <TouchableOpacity onPress={() => onSave(value)}>
-            <Text className="text-blue-500">Save</Text>
-          </TouchableOpacity>
-        ),
-      });
-    }
+    navigation.setOptions({
+      headerRight: () => (
+        <TouchableOpacity onPress={() => onSave(value)}>
+          <Text className="text-blue-500">Save</Text>
+        </TouchableOpacity>
+      ),
+    });
  }, [navigation, value]);

  if (!settings) return null;

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

-      <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={`mt-2 ${
+          settings.searchEngine === "Marlin" ? "" : "opacity-50"
+        }`}
      >
-        <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 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>
-      </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 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>
        </Text>
-      </Text>
-    </DisabledSetting>
+      </View>
+    </View>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx
@@ -10,13 +10,12 @@ 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, pluginSettings] = useSettings();
+  const [settings, updateSettings] = useSettings();

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

  useEffect(() => {
-    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.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 (
-    <DisabledSetting
-      disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
-      className="p-4"
-    >
+    <View className="p-4">
      <OptimizedServerForm
        value={optimizedVersionsServerUrl}
        onChangeValue={setOptimizedVersionsServerUrl}
      />
-    </DisabledSetting>
+    </View>
  );
 }
--- a/app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/popular-lists/page.tsx
@@ -9,8 +9,6 @@ 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();
@@ -18,7 +16,7 @@ export default function page() {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

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

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

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

  return (
-    <DisabledSetting
-      disabled={disabled}
-      className="px-4 pt-4"
-    >
+    <View 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"] });
@@ -73,10 +62,9 @@ export default function page() {
        >
          <Switch
            value={settings.usePopularPlugin}
-            disabled={pluginSettings?.usePopularPlugin?.locked}
-            onValueChange={(usePopularPlugin) =>
-              updateSettings({ usePopularPlugin })
-          }
+            onValueChange={(value) => {
+              updateSettings({ usePopularPlugin: value });
+            }}
          />
        </ListItem>
      </ListGroup>
@@ -100,14 +88,11 @@ export default function page() {
                <>
                  <ListGroup title="Media List Collections" className="mt-4">
                    {mediaListCollections?.map((mlc) => (
-                      <ListItem
-                        key={mlc.Id}
-                        title={mlc.Name}
-                        disabled={pluginSettings?.mediaListCollectionIds?.locked}
-                      >
+                      <ListItem key={mlc.Id} title={mlc.Name}>
                        <Switch
-                          disabled={pluginSettings?.mediaListCollectionIds?.locked}
-                          value={settings.mediaListCollectionIds?.includes(mlc.Id!)}
+                          value={settings.mediaListCollectionIds?.includes(
+                            mlc.Id!
+                          )}
                          onValueChange={(value) => {
                            if (!settings.mediaListCollectionIds) {
                              updateSettings({
@@ -145,6 +130,6 @@ export default function page() {
          )}
        </>
      )}
-    </DisabledSetting>
+    </View>
  );
 }
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/albums/[albumId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/albums/[albumId].tsx
@@ -0,0 +1,128 @@
+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
@@ -0,0 +1,130 @@
+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
@@ -0,0 +1,117 @@
+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"],
+        includeItemTypes: ["Movie", "Series", "MusicAlbum"],
      });

      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
@@ -1,95 +0,0 @@
-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
@@ -1,87 +0,0 @@
-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,65 +1,61 @@
-import { Button } from "@/components/Button";
+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 { 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 { 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 { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import { Button } from "@/components/Button";
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetModal, BottomSheetTextInput,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import {
  IssueType,
  IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
-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 { 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";
+import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
+import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
+import { JellyserrRatings } from "@/components/Ratings";

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

-  const navigation = useNavigation();
+  const canRequest = canRequestString === "true";
  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],
@@ -76,8 +72,6 @@ const Page: React.FC = () => {
    },
  });

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

-  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]);
+  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]
+  );

  return (
    <View
@@ -158,10 +133,7 @@ const Page: React.FC = () => {
                  height: "100%",
                }}
                source={{
-                  uri: jellyseerrApi?.imageProxy(
-                    result.backdropPath,
-                    "w1920_and_h800_multi_faces"
-                  ),
+                  uri: `https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${result.backdropPath}`,
                }}
              />
            ) : (
@@ -210,9 +182,7 @@ const Page: React.FC = () => {
              <View className="mb-4">
                <GenreTags genres={details?.genres?.map((g) => g.name) || []} />
              </View>
-              {isLoading || isFetching ? (
-                <Button loading={true} disabled={true} color="purple"></Button>
-              ) : canRequest ? (
+              {canRequest ? (
                <Button color="purple" onPress={request}>
                  Request
                </Button>
@@ -241,31 +211,11 @@ 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
@@ -329,11 +279,13 @@ 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
@@ -1,107 +0,0 @@
-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,6 +150,8 @@ 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, pluginSettings] = useSettings();
+  const [settings, updateSettings] = useSettings();

  if (!settings?.libraryOptions) return null;

@@ -25,7 +25,6 @@ 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, useMemo } from "react";
+import { useEffect } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

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

      return response.data.Items || null;
    },
-    staleTime: 60,
+    enabled: !!api && !!user?.Id,
+    staleTime: 60 * 1000 * 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({
@@ -67,7 +63,7 @@ export default function index() {
      </View>
    );

-  if (!libraries)
+  if (!data)
    return (
      <View className="h-full w-full flex justify-center items-center">
        <Text className="text-lg text-neutral-500">No libraries found</Text>
@@ -85,7 +81,7 @@ export default function index() {
        paddingLeft: insets.left,
        paddingRight: insets.right,
      }}
-      data={libraries}
+      data={data}
      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,9 +36,6 @@ 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,16 +2,14 @@ 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 { JellyserrIndexPage } from "@/components/jellyseerr/JellyseerrIndexPage";
+import { Loader } from "@/components/Loader";
+import AlbumCover from "@/components/posters/AlbumCover";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
-import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
-import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import {
  BaseItemDto,
  BaseItemKind,
@@ -22,6 +20,7 @@ import axios from "axios";
 import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
+  PropsWithChildren,
  useCallback,
  useEffect,
  useLayoutEffect,
@@ -31,6 +30,13 @@ 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";

@@ -143,6 +149,48 @@ 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: () =>
@@ -183,19 +231,64 @@ 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
+      actors?.length ||
+      jellyseerrMovieResults?.length ||
+      jellyseerrTvResults?.length
    );
-  }, [episodes, movies, series, collections, actors]);
+  }, [
+    artists,
+    episodes,
+    albums,
+    songs,
+    movies,
+    series,
+    collections,
+    actors,
+    jellyseerrResults,
+  ]);

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

  return (
    <>
@@ -207,7 +300,7 @@ export default function search() {
          paddingRight: insets.right,
        }}
      >
-        <View className="flex flex-col">
+        <View className="flex flex-col pt-2">
          {Platform.OS === "android" && (
            <View className="mb-4 px-4">
              <Input
@@ -242,13 +335,15 @@ export default function search() {
              </TouchableOpacity>
            </View>
          )}
-
-          <View className="mt-2">
-            <LoadingSkeleton isLoading={loading} />
-          </View>
-
-          {searchType === "Library" ? (
-            <View className={l1 || l2 ? "opacity-0" : "opacity-100"}>
+          {!!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" && (
+            <>
              <SearchItemWrapper
                header="Movies"
                ids={movies?.map((m) => m.Id!)}
@@ -331,39 +426,168 @@ export default function search() {
                  </TouchableItemRouter>
                )}
              />
-            </View>
-          ) : (
-            <JellyserrIndexPage searchQuery={debouncedSearch} />
-          )}
-
-          {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}
+              <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} />
+                )}
+              />
+            </>
+          )}
+
+          {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}
        </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, { useCallback, useRef } from "react";
+import React from "react";
 import { Platform } from "react-native";

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

 import {
  createNativeBottomTabNavigator,
@@ -13,13 +13,12 @@ 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,
@@ -30,28 +29,11 @@ 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={false}
+        sidebarAdaptable
        ignoresTopSafeArea
        barTintColor={Platform.OS === "android" ? "#121212" : undefined}
        tabBarActiveTintColor={Colors.primary}
--- a/app/(auth)/player/_layout.tsx
+++ b/app/(auth)/player/_layout.tsx
@@ -25,6 +25,15 @@ 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 { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";
 import { useFocusEffect, useGlobalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
@@ -48,7 +48,6 @@ 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);
@@ -69,11 +68,9 @@ export default function page() {
  const { getDownloadedItem } = useDownload();
  const revalidateProgressCache = useInvalidatePlaybackProgressCache();

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

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

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

@@ -414,8 +411,6 @@ 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">
@@ -440,8 +435,7 @@ export default function page() {
          position: "relative",
          flexDirection: "column",
          justifyContent: "center",
-          paddingLeft: ignoreSafeAreas ? 0 : insets.left,
-          paddingRight: ignoreSafeAreas ? 0 : insets.right,
+          opacity: showControls ? (Platform.OS === "android" ? 0.7 : 0.5) : 1,
        }}
      >
        <VlcPlayerView
--- a/app/(auth)/player/music-player.tsx
+++ b/app/(auth)/player/music-player.tsx
@@ -0,0 +1,417 @@
+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 { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";
 import { useFocusEffect, useLocalSearchParams } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, {
@@ -48,7 +48,6 @@ const Player = () => {

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

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

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

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

  const togglePlay = useCallback(async () => {
-    lightHapticFeedback();
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    if (isPlaying) {
      videoRef.current?.pause();
      await getPlaystateApi(api!).onPlaybackProgress({
@@ -388,6 +387,7 @@ const Player = () => {
          position: "relative",
          flexDirection: "column",
          justifyContent: "center",
+          opacity: showControls ? 0.5 : 1,
        }}
      >
        {videoSource ? (
@@ -414,6 +414,7 @@ const Player = () => {
              playWhenInactive={true}
              allowsExternalPlayback={true}
              playInBackground={true}
+              pictureInPicture={true}
              showNotificationControls={true}
              ignoreSilentSwitch="ignore"
              fullscreen={false}
@@ -531,6 +532,7 @@ export function useVideoSource(
      startPosition,
      headers: getAuthHeaders(api),
      metadata: {
+        artist: item?.AlbumArtist ?? undefined,
        title: item?.Name || "Unknown",
        description: item?.Overview ?? undefined,
        imageUri: poster,
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -319,7 +319,7 @@ function Layout() {
                      <BottomSheetModalProvider>
                        <SystemBars style="light" hidden={false} />
                        <ThemeProvider value={DarkTheme}>
-                          <Stack initialRouteName="/home">
+                          <Stack>
                            <Stack.Screen
                              name="(auth)/(tabs)"
                              options={{
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -1,12 +1,11 @@
 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, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Ionicons } 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";
@@ -40,6 +39,7 @@ 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,10 +77,8 @@ const Login: React.FC = () => {
            onPress={() => {
              removeServer();
            }}
-            className="flex flex-row items-center"
          >
-            <Ionicons name="chevron-back" size={18} color={Colors.primary} />
-            <Text className="ml-2 text-purple-600">Change server</Text>
+            <Ionicons name="chevron-back" size={24} color="white" />
          </TouchableOpacity>
        ) : null,
    });
@@ -97,9 +95,9 @@ const Login: React.FC = () => {
      }
    } catch (error) {
      if (error instanceof Error) {
-        Alert.alert("Connection failed", error.message);
+        setError(error.message);
      } else {
-        Alert.alert("Connection failed", "An unexpected error occurred");
+        setError("An unexpected error occurred");
      }
    } finally {
      setLoading(false);
@@ -138,8 +136,6 @@ const Login: React.FC = () => {
        return url;
      }

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

-  return (
-    <SafeAreaView style={{ flex: 1, paddingBottom: 16 }}>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-      >
-        {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
+  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
-                  aria-label="Server URL"
-                  placeholder="http(s)://your-server.com"
-                  onChangeText={setServerURL}
-                  value={serverURL}
-                  keyboardType="url"
+                  placeholder="Username"
+                  onChangeText={(text) =>
+                    setCredentials({ ...credentials, username: text })
+                  }
+                  value={credentials.username}
+                  autoFocus
+                  secureTextEntry={false}
+                  keyboardType="default"
                  returnKeyType="done"
                  autoCapitalize="none"
-                  textContentType="URL"
+                  textContentType="username"
+                  clearButtonMode="while-editing"
                  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);
-                  }}
+                <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 }}>
+      <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>
      </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
@@ -1,46 +0,0 @@
-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,4 +1,3 @@
-export * from "./api";
 export * from "./mmkv";
 export * from "./number";
 export * from "./string";
--- a/augmentations/mmkv.ts
+++ b/augmentations/mmkv.ts
@@ -13,10 +13,5 @@ MMKV.prototype.get = function <T> (key: string): T | undefined {
 }

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

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

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

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

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

 Number.prototype.secondsToMilliseconds = function () {
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -27,10 +27,6 @@ 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 { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";
 import React, { PropsWithChildren, ReactNode, useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import { Loader } from "./Loader";
@@ -37,14 +37,12 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      case "red":
        return "bg-red-600";
      case "black":
-        return "bg-neutral-900";
+        return "bg-neutral-900 border border-neutral-800";
      case "transparent":
        return "bg-transparent";
    }
  }, [color]);

-  const lightHapticFeedback = useHaptic("light");
-
  return (
    <TouchableOpacity
      className={`
@@ -56,16 +54,14 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      onPress={() => {
        if (!loading && !disabled && onPress) {
          onPress();
-          lightHapticFeedback();
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
        }
      }}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
-        <View className="p-0.5">
-          <Loader />
-        </View>
+        <Loader />
      ) : (
        <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 {DownloadMethod, useSettings} from "@/utils/atoms/settings";
+import { 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 === DownloadMethod.Optimized,
+    () => settings?.downloadMethod === "optimized",
    [settings]
  );

--- a/components/GenreTags.tsx
+++ b/components/GenreTags.tsx
@@ -1,6 +1,6 @@
 // GenreTags.tsx
 import React from "react";
-import {StyleProp, TextStyle, View, ViewProps} from "react-native";
+import {View, ViewProps} from "react-native";
 import { Text } from "./common/Text";

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

-export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"], textStyle?: StyleProp<TextStyle>} & ViewProps> = ({
+export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"]} & ViewProps> = ({
  text,
  textClass,
-  textStyle,
  ...props
 }) => {
  return (
    <View className="bg-neutral-800 rounded-full px-2 py-1" {...props}>
-      <Text className={textClass} style={textStyle}>{text}</Text>
+      <Text className={textClass}>{text}</Text>
    </View>
  );
 };
--- a/components/JellyfinServerDiscovery.tsx
+++ b/components/JellyfinServerDiscovery.tsx
@@ -1,44 +0,0 @@
-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,27 +29,6 @@ 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"
@@ -84,7 +63,9 @@ export const MediaSourceSelector: React.FC<Props> = ({
              }}
            >
              <DropdownMenu.ItemTitle>
-                {`${name(source.Name)}`}
+                {`${name(source.Name)} - ${convertBitsToMegabitsOrGigabits(
+                  source.Size
+                )}`}
              </DropdownMenu.ItemTitle>
            </DropdownMenu.Item>
          ))}
@@ -93,3 +74,9 @@ 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 {NativeScrollEvent, NativeSyntheticEvent, View, ViewProps} from "react-native";
+import { View, ViewProps } from "react-native";
 import Animated, {
  interpolate,
  useAnimatedRef,
@@ -13,7 +13,6 @@ interface Props extends ViewProps {
  logo?: ReactElement;
  episodePoster?: ReactElement;
  headerHeight?: number;
-  onEndReached?: (() => void) | null | undefined;
 }

 export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
@@ -22,7 +21,6 @@ export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
  episodePoster,
  headerHeight = 400,
  logo,
-  onEndReached,
  ...props
 }: Props) => {
  const scrollRef = useAnimatedRef<Animated.ScrollView>();
@@ -49,11 +47,6 @@ 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
@@ -62,10 +55,6 @@ 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 { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";

 interface Props extends React.ComponentProps<typeof Button> {
  item: BaseItemDto;
@@ -64,7 +64,6 @@ 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) => {
@@ -80,7 +79,7 @@ export const PlayButton: React.FC<Props> = ({
  const onPress = useCallback(async () => {
    if (!item) return;

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

    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 { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";

 interface Props extends TouchableOpacityProps {
  onPress?: () => void;
@@ -29,11 +29,10 @@ 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) {
-      lightHapticFeedback();
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
    onPress?.();
  };
--- a/components/tests/ThemedText-test.tsx
+++ b/components/tests/ThemedText-test.tsx
@@ -1,10 +0,0 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
-
-import { ThemedText } from '../ThemedText';
-
-it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
-
-  expect(tree).toMatchSnapshot();
-});
--- a/components/tests/snapshots/ThemedText-test.tsx.snap
+++ b/components/tests/snapshots/ThemedText-test.tsx.snap
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders correctly 1`] = `
-<Text
-  style={
-    [
-      {
-        "color": "#11181C",
-      },
-      {
-        "fontSize": 16,
-        "lineHeight": 24,
-      },
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-      undefined,
-    ]
-  }
->
-  Snapshot test!
-</Text>
-`;
--- a/components/common/Dropdown.tsx
+++ b/components/common/Dropdown.tsx
@@ -1,108 +0,0 @@
-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  rounded-xl bg-neutral-900"
+      className="p-4 border border-neutral-800 rounded-xl bg-neutral-900"
      allowFontScaling={false}
      style={[{ color: "white" }, style]}
      placeholderTextColor={"#9CA3AF"}
--- a/components/common/JellyseerrItemRouter.tsx
+++ b/components/common/JellyseerrItemRouter.tsx
@@ -1,11 +1,12 @@
-import {useRouter, useSegments} from "expo-router";
-import React, {PropsWithChildren, useCallback, useMemo} from "react";
-import {TouchableOpacity, TouchableOpacityProps} from "react-native";
-import * as ContextMenu from "zeego/context-menu";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {useJellyseerr} from "@/hooks/useJellyseerr";
-import {hasPermission, Permission} from "@/utils/jellyseerr/server/lib/permissions";
-import {MediaType} from "@/utils/jellyseerr/server/constants/media";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import {
+  hasPermission,
+  Permission,
+} from "@/utils/jellyseerr/server/lib/permissions";
+import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
+import { useRouter, useSegments } from "expo-router";
+import React, { PropsWithChildren, useCallback, useMemo } from "react";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native";

 interface Props extends TouchableOpacityProps {
  result: MovieResult | TvResult;
@@ -26,78 +27,49 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
  const router = useRouter();
  const segments = useSegments();
-  const {jellyseerrApi, jellyseerrUser, requestMedia} = useJellyseerr()
+  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();

  const from = segments[2];

  const autoApprove = useMemo(() => {
-    return jellyseerrUser && hasPermission(
-      Permission.AUTO_APPROVE,
-      jellyseerrUser.permissions,
-      {type: 'or'}
-    )
-  }, [jellyseerrApi, jellyseerrUser])
+    return (
+      jellyseerrUser &&
+      hasPermission(Permission.AUTO_APPROVE, jellyseerrUser.permissions, {
+        type: "or",
+      })
+    );
+  }, [jellyseerrApi, jellyseerrUser]);

-  const request = useCallback(() =>
+  const request = useCallback(
+    () =>
      requestMedia(mediaTitle, {
        mediaId: result.id,
-        mediaType: result.mediaType
-      }
-    ),
+        mediaType: result.mediaType,
+      }),
    [jellyseerrApi, result]
-  )
+  );

  if (from === "(home)" || from === "(search)" || from === "(libraries)")
    return (
      <>
-        <ContextMenu.Root>
-          <ContextMenu.Trigger>
-            <TouchableOpacity
-              onPress={() => {
-                // @ts-ignore
-                router.push({pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`, params: {...result, mediaTitle, releaseYear, canRequest, posterSrc}});
-              }}
-              {...props}
-            >
-              {children}
-            </TouchableOpacity>
-          </ContextMenu.Trigger>
-          <ContextMenu.Content
-            avoidCollisions
-            alignOffset={0}
-            collisionPadding={0}
-            loop={false}
-            key={"content"}
-          >
-            <ContextMenu.Label key="label-1">Actions</ContextMenu.Label>
-            {canRequest && result.mediaType === MediaType.MOVIE && (
-                <ContextMenu.Item
-                  key="item-1"
-                  onSelect={() => {
-                    if (autoApprove) {
-                      request()
-                    }
-                  }}
-                  shouldDismissMenuOnSelect
-                >
-                  <ContextMenu.ItemTitle key="item-1-title">Request</ContextMenu.ItemTitle>
-                  <ContextMenu.ItemIcon
-                    ios={{
-                      name: "arrow.down.to.line",
-                      pointSize: 18,
-                      weight: "semibold",
-                      scale: "medium",
-                      hierarchicalColor: {
-                        dark: "purple",
-                        light: "purple",
-                      },
-                    }}
-                    androidIconName="download"
-                  />
-                </ContextMenu.Item>
-              )}
-          </ContextMenu.Content>
-        </ContextMenu.Root>
+        <TouchableOpacity
+          onPress={() => {
+            router.push({
+              pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+              params: {
+                ...result,
+                mediaTitle,
+                releaseYear,
+                // @ts-expect-error
+                canRequest,
+                posterSrc,
+              },
+            });
+          }}
+          {...props}
+        >
+          {children}
+        </TouchableOpacity>
      </>
    );
 };
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -4,11 +4,8 @@ import {
  BaseItemPerson,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { useRouter, useSegments } from "expo-router";
-import { PropsWithChildren, useCallback } from "react";
+import { PropsWithChildren } 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;
@@ -26,6 +23,18 @@ 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}`;
  }
@@ -56,33 +65,10 @@ 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 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]);
+  const markAsPlayedStatus = useMarkAsPlayed(item);

  if (
    from === "(home)" ||
@@ -92,10 +78,9 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
  )
    return (
      <TouchableOpacity
-        onLongPress={showActionSheet}
        onPress={() => {
          const url = itemRouter(item, from);
-          // @ts-expect-error
+          // @ts-ignore
          router.push(url);
        }}
        {...props}
--- a/components/downloads/ActiveDownloads.tsx
+++ b/components/downloads/ActiveDownloads.tsx
@@ -1,6 +1,7 @@
 import { Text } from "@/components/common/Text";
 import { useDownload } from "@/providers/DownloadProvider";
-import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
 import { JobStatus } from "@/utils/optimize-server";
 import { formatTimeString } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
@@ -8,6 +9,7 @@ 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,
@@ -60,7 +62,7 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
    mutationFn: async (id: string) => {
      if (!process) throw new Error("No active download");

-      if (settings?.downloadMethod === DownloadMethod.Optimized) {
+      if (settings?.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 { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import {
@@ -26,7 +26,6 @@ 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!);
@@ -42,7 +41,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
  const handleDeleteFile = useCallback(() => {
    if (item.Id) {
      deleteFile(item.Id);
-      successHapticFeedback();
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
    }
  }, [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 { useHaptic } from "@/hooks/useHaptic";
+import * as Haptics from "expo-haptics";
 import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";

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

--- a/components/home/Favorites.tsx
+++ b/components/home/Favorites.tsx
@@ -54,6 +54,14 @@ 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">
@@ -94,6 +102,18 @@ 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,4 +1,3 @@
-import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
@@ -7,11 +6,9 @@ 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, View, ViewProps } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { Dimensions, TouchableOpacity, View, ViewProps } from "react-native";
 import Animated, {
  runOnJS,
  useSharedValue,
@@ -21,7 +18,11 @@ import Carousel, {
  ICarouselInstance,
  Pagination,
 } from "react-native-reanimated-carousel";
-import { itemRouter } from "../common/TouchableItemRouter";
+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";

 interface Props extends ViewProps {}

@@ -127,7 +128,6 @@ 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);
-    lightHapticFeedback();
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    // @ts-ignore
    if (url) router.push(url);
  }, [item, from]);
--- a/components/jellyseerr/JellyseerrStatusIcon.tsx
+++ b/components/jellyseerr/JellyseerrStatusIcon.tsx
@@ -2,6 +2,7 @@ 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;
@@ -9,7 +10,7 @@ interface Props {
  onPress?: () => void;
 }

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

-export default JellyseerrStatusIcon;
+export default JellyseerrIconStatus;
--- a/components/inputs/Stepper.tsx
+++ b/components/inputs/Stepper.tsx
@@ -1,10 +1,8 @@
 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,
@@ -14,7 +12,6 @@ interface StepperProps {

 export const Stepper: React.FC<StepperProps> = ({
  value,
-  disabled,
  step,
  min,
  max,
@@ -22,11 +19,7 @@ export const Stepper: React.FC<StepperProps> = ({
  appendValue
 }) => {
  return (
-    <DisabledSetting
-      disabled={disabled === true}
-      showText={false}
-      className="flex flex-row items-center"
-    >
+    <View 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"
@@ -46,6 +39,6 @@ export const Stepper: React.FC<StepperProps> = ({
      >
        <Text>+</Text>
      </TouchableOpacity>
-    </DisabledSetting>
+    </View>
  )
 }
--- a/components/jellyseerr/Cast.tsx
+++ b/components/jellyseerr/Cast.tsx
@@ -1,39 +0,0 @@
-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
@@ -1,218 +0,0 @@
-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/discover/MovieTvSlide.tsx
+++ b/components/jellyseerr/discover/MovieTvSlide.tsx
@@ -1,4 +1,5 @@
-import React, {useMemo} from "react";
+import React, { useMemo } from "react";
+import DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
 import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
 import {
  DiscoverEndpoint,
@@ -8,13 +9,17 @@ import {
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import Slide, {SlideProps} from "@/components/jellyseerr/discover/Slide";
-import {ViewProps} from "react-native";
+import { Text } from "@/components/common/Text";
+import { FlashList } from "@shopify/flash-list";
+import { View } from "react-native";

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

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

  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 && (
-      <Slide
-        {...props}
-        slide={slide}
-        data={flatData}
-        keyExtractor={(item) => item!!.id.toString()}
-        onEndReached={() => {
-          if (hasNextPage)
-            fetchNextPage()
-        }}
-        renderItem={(item) =>
-          <JellyseerrPoster item={item as MovieResult | TvResult} />
-      }
-      />
+      <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>
    )
  );
 };

-export default MovieTvSlide;
+export default DiscoverSlide;
--- a/components/jellyseerr/JellyseerrIndexPage.tsx
+++ b/components/jellyseerr/JellyseerrIndexPage.tsx
@@ -1,159 +0,0 @@
-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
@@ -1,37 +0,0 @@
-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/ParallaxSlideShow.tsx
+++ b/components/jellyseerr/ParallaxSlideShow.tsx
@@ -1,160 +0,0 @@
-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
@@ -1,42 +0,0 @@
-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
@@ -1,233 +0,0 @@
-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
@@ -1,41 +0,0 @@
-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
@@ -1,47 +0,0 @@
-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
@@ -1,59 +0,0 @@
-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
@@ -1,56 +0,0 @@
-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/Slide.tsx
+++ b/components/jellyseerr/discover/Slide.tsx
@@ -1,55 +0,0 @@
-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,6 +60,8 @@ 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;
@@ -74,6 +76,8 @@ 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
@@ -0,0 +1,35 @@
+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
@@ -0,0 +1,128 @@
+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
@@ -0,0 +1,82 @@
+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
@@ -0,0 +1,57 @@
+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,63 +1,55 @@
-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";
-
+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";
 interface Props extends ViewProps {
  item: MovieResult | TvResult;
 }

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

-  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"),
+  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`,
    [item, jellyseerrApi]
-  );
-
-  const title = useMemo(
-    () => (item.mediaType === MediaType.MOVIE ? item.title : item.name),
+  )
+  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(),
    [item]
-  );
+  )

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

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

  return (
    <TouchableJellyseerrRouter
@@ -65,41 +57,36 @@ const JellyseerrPoster: React.FC<Props> = ({ item, ...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]">
-          <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
+          <Image
+            key={item.id}
+            id={item.id.toString()}
+            source={{uri: imageSrc}}
+            cachePolicy={"memory-disk"}
+            contentFit="cover"
+            style={{
+              aspectRatio: "10/15",
+              width: "100%",
+            }}
+          />
+          <JellyseerrIconStatus
            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 align-bottom">{releaseYear}</Text>
+          <Text className="text-xs opacity-50">{releaseYear}</Text>
        </View>
      </View>
    </TouchableJellyseerrRouter>
-  );
-};
+  )
+}

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

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

-const Poster: React.FC<PosterProps> = ({ id, url, blurhash }) => {
-  if (!id && !url)
+const Poster: React.FC<PosterProps> = ({ item, url, blurhash }) => {
+  if (!item)
    return (
      <View
        className="border border-neutral-900"
@@ -29,8 +33,8 @@ const Poster: React.FC<PosterProps> = ({ id, url, blurhash }) => {
              }
            : null
        }
-        key={id}
-        id={id!!}
+        key={item.Id}
+        id={item.Id}
        source={
          url
            ? {
--- a/components/search/LoadingSkeleton.tsx
+++ b/components/search/LoadingSkeleton.tsx
@@ -1,66 +0,0 @@
-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
@@ -1,70 +0,0 @@
-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 id={i.id} url={getPrimaryImageUrl({ api, item: i })} />
+            <Poster item={i} 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
-              id={item.id}
+              item={item}
              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 JellyseerrStatusIcon from "@/components/jellyseerr/JellyseerrStatusIcon";
+import JellyseerrIconStatus from "@/components/icons/JellyseerrIconStatus";
 import Season from "@/utils/jellyseerr/server/entity/Season";
 import {
  MediaStatus,
@@ -21,7 +21,6 @@ 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;
@@ -62,7 +61,7 @@ const RenderItem = ({ item, index }: any) => {
            key={item.id}
            id={item.id}
            source={{
-              uri: jellyseerrApi?.imageProxy(item.stillPath),
+              uri: jellyseerrApi?.tvStillImageProxy(item.stillPath),
            }}
            cachePolicy={"memory-disk"}
            contentFit="cover"
@@ -102,17 +101,8 @@ 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,
-  hasAdvancedRequest,
-  onAdvancedRequest,
-}) => {
+}> = ({ isLoading, result, details, refetch }) => {
  if (!details) return null;

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

  const requestAll = useCallback(() => {
    if (details && jellyseerrApi) {
-      const body: MediaRequestBody = {
+      requestMedia(result?.name!!, {
        mediaId: details.id,
        mediaType: MediaType.TV,
        tvdbId: details.externalIds?.tvdbId,
@@ -161,15 +151,9 @@ 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, hasAdvancedRequest, onAdvancedRequest]);
+  }, [jellyseerrApi, seasons, details]);

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

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

  if (isLoading)
    return (
@@ -264,7 +246,7 @@ const JellyseerrSeasons: React.FC<{
                  seasons?.find((s) => s.seasonNumber === season.seasonNumber)
                    ?.status === MediaStatus.UNKNOWN;
                return (
-                  <JellyseerrStatusIcon
+                  <JellyseerrIconStatus
                    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,45 +1,24 @@
-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 {
-  Alert,
-  Linking,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from "react-native";
+import { TouchableOpacity, View, ViewProps } from "react-native";

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

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

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

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

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

  return (
    <View className="" {...props}>
--- a/components/settings/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -6,13 +6,11 @@ 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;

@@ -28,13 +26,9 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
          </Text>
        }
      >
-        <ListItem
-          title={"Set Audio Track From Previous Item"}
-          disabled={pluginSettings?.rememberAudioSelections?.locked}
-        >
+        <ListItem title={"Set Audio Track From Previous Item"}>
          <Switch
            value={settings.rememberAudioSelections}
-            disabled={pluginSettings?.rememberAudioSelections?.locked}
            onValueChange={(value) =>
              updateSettings({ rememberAudioSelections: value })
            }
--- a/components/settings/DisabledSetting.tsx
+++ b/components/settings/DisabledSetting.tsx
@@ -1,26 +0,0 @@
-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,45 +1,33 @@
 import { Stepper } from "@/components/inputs/Stepper";
 import { useDownload } from "@/providers/DownloadProvider";
-import { DownloadMethod, Settings, useSettings } from "@/utils/atoms/settings";
+import { 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, { useMemo } from "react";
-import { Switch, TouchableOpacity } from "react-native";
+import React from "react";
+import { Switch, TouchableOpacity, View } 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, pluginSettings] = useSettings();
+  const [settings, updateSettings] = 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 (
-    <DisabledSetting disabled={allDisabled} {...props} className="mb-4">
+    <View {...props} className="mb-4">
      <ListGroup title="Downloads">
-        <ListItem
-          title="Download method"
-          disabled={pluginSettings?.downloadMethod?.locked}
-        >
+        <ListItem title="Download method">
          <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 === DownloadMethod.Remux
+                  {settings.downloadMethod === "remux"
                    ? "Default"
                    : "Optimized"}
                </Text>
@@ -63,7 +51,7 @@ export const DownloadSettings: React.FC = ({ ...props }) => {
              <DropdownMenu.Item
                key="1"
                onSelect={() => {
-                  updateSettings({ downloadMethod: DownloadMethod.Remux });
+                  updateSettings({ downloadMethod: "remux" });
                  setProcesses([]);
                }}
              >
@@ -72,7 +60,7 @@ export const DownloadSettings: React.FC = ({ ...props }) => {
              <DropdownMenu.Item
                key="2"
                onSelect={() => {
-                  updateSettings({ downloadMethod: DownloadMethod.Optimized });
+                  updateSettings({ downloadMethod: "optimized" });
                  setProcesses([]);
                  queryClient.invalidateQueries({ queryKey: ["search"] });
                }}
@@ -85,10 +73,7 @@ export const DownloadSettings: React.FC = ({ ...props }) => {

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

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

        <ListItem
-          disabled={
-            pluginSettings?.optimizedVersionsServerUrl?.locked ||
-            settings.downloadMethod !== DownloadMethod.Optimized
-          }
+          disabled={settings.downloadMethod !== "optimized"}
          onPress={() => router.push("/settings/optimized-server/page")}
          showArrow
          title="Optimized Versions Server"
        ></ListItem>
      </ListGroup>
-    </DisabledSetting>
+    </View>
  );
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Fredrik Burmester	b4d9552401	chore	2025-01-23 13:37:41 +01:00
Fredrik Burmester	c74336a1a1	chore	2025-01-23 13:16:55 +01:00
Fredrik Burmester	17257ece85	chore	2025-01-23 11:38:42 +01:00
Fredrik Burmester	d5c634b74b	Revert "Merge branch 'develop' into chore/expo-52" This reverts commit `933f3f2f7c`, reversing changes made to `f92fee4158`.	2025-01-23 11:34:22 +01:00
Fredrik Burmester	933f3f2f7c	Merge branch 'develop' into chore/expo-52	2025-01-23 11:30:02 +01:00
Fredrik Burmester	252fc4387b	chore	2025-01-23 11:29:35 +01:00
Fredrik Burmester	3e299e2136	fix: early return causing crash	2025-01-23 10:07:21 +01:00
Fredrik Burmester	01cab2277e	Merge pull request #451 from RodoMa92/add_self_signed_support [android] Trust android local CA store for self signed certificates	2025-01-23 10:02:16 +01:00
Fredrik Burmester	e4f4e861e0	Merge pull request #340 from simoncaron/feat/i18n Implement translation with i18next	2025-01-23 10:01:13 +01:00
Marco Rodolfi	4d665013f0	[android] Trust android local CA store for self signed certificates	2025-01-22 20:08:20 +01:00
sarendsen	9aa4ea4a2e	refactor: home section lists	2025-01-22 07:27:08 +01:00
sarendsen	93ae03f55c	fix #446	2025-01-20 10:51:39 +01:00
Fredrik Burmester	b311ac98a7	Merge branch 'develop' of https://github.com/streamyfin/streamyfin into develop	2025-01-17 07:43:23 +01:00
Fredrik Burmester	83d425b2fb	chore	2025-01-17 07:43:04 +01:00
Simon Caron	007fbdd0a3	Merge branch 'develop' into feat/i18n	2025-01-16 20:38:00 -05:00
Simon Caron	37df999db5	Merge pull request #1 from Gauvino/fix-typo fix(i18n): missing typo and comma	2025-01-16 20:35:46 -05:00
sarendsen	72b9675df4	feat: Implement nextup for custom home	2025-01-16 10:36:20 +01:00
lostb1t	7a30a63335	Update README.md	2025-01-15 09:13:03 +01:00
sarendsen	0ff0fab3f4	fix: fix horizontal shows	2025-01-15 00:47:10 +01:00
Fredrik Burmester	d9d9b0ee00	Merge pull request #430 from streamyfin/feat/refreshsettings feat: Refresh remote settings	2025-01-14 16:29:00 +01:00
Uruk	fdaa69a787	fix(i18n): missing typo and comma	2025-01-14 13:51:43 +01:00
sarendsen	ed5403e597	wip	2025-01-14 10:37:20 +01:00
sarendsen	e6f290b85f	wip	2025-01-14 10:35:21 +01:00
sarendsen	aa20d9c701	wip	2025-01-14 10:31:16 +01:00
sarendsen	e7128afb32	wip	2025-01-14 09:48:17 +01:00
sarendsen	a24b126539	wip	2025-01-14 09:24:31 +01:00
sarendsen	e1fe20db86	wip	2025-01-14 07:56:32 +01:00
Simon Caron	cd9f6aa8bd	update submodule	2025-01-14 00:06:14 -05:00
Simon Caron	747bd1b416	Merge branch 'develop' into feat/i18n	2025-01-13 22:35:05 -05:00
Simon Caron	364ce46fe5	Screen Orientation Enum + Subtitle Mode	2025-01-13 22:30:57 -05:00
Simon Caron	5703279b46	Merge develop	2025-01-13 21:18:37 -05:00
lostb1t	4022ccb213	feat: Custom homescreen support (#424 )	2025-01-13 19:48:19 +01:00
Fredrik Burmester	3a836462f5	Merge pull request #422 from simoncaron/feat/hide-log-page-title fix: Remove Page Path from Log Page Header	2025-01-13 17:58:39 +01:00
herrrta	8a5f24002f	fix: unauthorized plugin access & null default values	2025-01-13 08:30:11 -05:00
retardgerman	c30f9860ee	fix: fixed syntax errors	2025-01-13 12:31:23 +01:00
sarendsen	94c170e3d2	chore: some linting	2025-01-13 10:32:03 +01:00
Simon Caron	cd8aba32d8	Jellyseerr	2025-01-13 00:03:41 -05:00
Simon Caron	15f3ddf612	fix: Remove Page Path from Log Page	2025-01-12 23:00:12 -05:00
Simon Caron	90f20f6e46	Shorter messages	2025-01-12 21:34:08 -05:00
Simon Caron	ea1f45bbaf	More settings + language component spacing	2025-01-12 21:30:57 -05:00
Simon Caron	7e62c9bc9a	Merge branch 'develop' into feat/i18n	2025-01-12 19:49:58 -05:00
herrrta	23f9e9dfae	fix: Override default settings with plugin unlocked default settings - This sets the defaults on login and allows users to still change them	2025-01-12 19:24:01 -05:00
Simon Caron	580e12b605	Alert	2025-01-12 19:04:51 -05:00
Fredrik Burmester	ff4c5f28af	chore	2025-01-12 14:11:09 +01:00
Fredrik Burmester	1b931ea348	Merge pull request #419 from streamyfin/fix/remove-music fix: remove everything related to music	2025-01-12 14:07:59 +01:00
Fredrik Burmester	49c0437f81	fix: change opacity on press	2025-01-12 14:04:12 +01:00
Fredrik Burmester	d81ae94ce8	fix: add version to issue template	2025-01-12 13:41:33 +01:00
retardgerman	b28c4a56f3	fix: add new Releases to dropdown	2025-01-12 13:39:43 +01:00
Simon Caron	14c8c1aaed	Fix some missing fields	2025-01-07 22:26:09 -05:00
Simon Caron	2da774272d	Merge branch 'develop' into feat/i18n	2025-01-07 20:38:59 -05:00
Simon Caron	480abb216d	fixes	2025-01-05 16:07:55 -05:00
Simon Caron	249109a94e	livetv	2025-01-05 16:03:19 -05:00
Simon Caron	eb7fa93f9b	remove dupe	2025-01-05 15:26:48 -05:00
Simon Caron	e8fd322d30	Merge branch 'master' into feat/i18n	2025-01-05 15:06:44 -05:00
Simon Caron	53ea1cc899	More Translations	2025-01-04 16:41:54 -05:00
Simon Caron	459ca3245b	Rename card field	2025-01-04 15:39:04 -05:00
Simon Caron	0d1fb87284	Fix Language Selector Setting Component	2025-01-04 15:26:24 -05:00
Simon Caron	495742c52c	Merge branch 'master' into feat/i18n	2025-01-04 14:57:45 -05:00
Simon Caron	894305e126	Item Card Fields	2025-01-04 14:49:56 -05:00
Simon Caron	ed993d07ce	Types	2025-01-03 16:33:51 -05:00
Simon Caron	dc9008f31c	Merge branch 'master' into feat/i18n	2025-01-03 15:23:17 -05:00
Fredrik Burmester	f92fee4158	wip	2025-01-03 11:42:18 +01:00
Simon Caron	e23387a384	Library headers, filters and favorites	2025-01-01 21:57:46 -05:00
Simon Caron	bb141cad57	Merge branch 'master' into feat/i18n	2025-01-01 21:32:24 -05:00
Simon Caron	e833b4bc68	Alert and Toasts	2025-01-01 21:31:04 -05:00
Simon Caron	34fc26ed18	Quick connect alerts	2025-01-01 20:29:39 -05:00
Fredrik Burmester	40b8410390	feat: enable manually setting language in settings	2025-01-01 11:25:02 +01:00
Simon Caron	723233381c	Settings Fields V	2024-12-31 16:09:12 -05:00
Simon Caron	602de34824	Settings fields	2024-12-31 15:31:36 -05:00
Simon Caron	9b1f2a98e5	Update translation key casing to snake_case	2024-12-31 14:43:40 -05:00
Simon Caron	946de97580	Remove LanguageSwitcher	2024-12-31 14:39:04 -05:00
Simon Caron	f2eadabf6a	bump libs versions	2024-12-31 13:52:58 -05:00
Simon Caron	373d83a0d5	Basic downloads stack translation	2024-12-31 13:34:32 -05:00
Simon Caron	2c0ba18b49	Clean up const declarations	2024-12-31 13:10:46 -05:00
Simon Caron	3e8e8e1163	Merge branch 'master' into feat/i18n	2024-12-31 12:24:28 -05:00
Simon Caron	fe9c73a8f0	Library Translation	2024-12-30 21:52:34 -05:00
Simon Caron	4f62391027	Add fr, search translation, fix login title	2024-12-30 21:38:42 -05:00
Simon Caron	53b5fdda87	fix import	2024-12-30 21:13:52 -05:00
Simon Caron	c0b71eb73d	Revert login message	2024-12-30 21:03:02 -05:00
Simon Caron	9b4590c876	Update Current Translated Messages with UI Changes	2024-12-30 20:06:56 -05:00
Simon Caron	4b18bad3bc	Merge branch 'master' into feat/i18n	2024-12-30 16:45:41 -05:00
Fredrik Burmester	752cb1cdc6	wip	2024-08-18 17:10:31 +02:00