Merge branch 'pr/235'

Added change to show actual device name rather than platform
Fixed some edge cases with dropdown
2024-12-01 17:48:13 +01:00 · 2024-12-02 03:41:25 +11:00 · 2024-12-02 03:21:26 +11:00 · 2024-12-01 14:20:00 +01:00 · 2024-12-01 10:11:24 +01:00 · 2024-12-01 09:46:15 +01:00
167 changed files with 10504 additions and 3931 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+modules/vlc-player/android/build

 # macOS
 .DS_Store
@@ -26,8 +27,11 @@ package-lock.json
 /ios
 /android

+modules/player/android
+
 pc-api-7079014811501811218-719-3b9f15aeccf8.json
 credentials.json
 *.apk
 *.ipa
 .continuerc.json
+
--- 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/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,10 @@
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
-  }
+  },
+  "[swift]": {
+    "editor.defaultFormatter": "sswg.swift-lang"
+  },
+  "java.configuration.updateBuildConfiguration": "interactive",
+  "java.compile.nullAnalysis.mode": "automatic"
 }
--- a/README.md
+++ b/README.md
@@ -13,7 +13,8 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp

 ## 🌟 Features

- 📱 **Native video player**: Playback with the platform native video player. With support for subtitles, playback speed control, and more.
+- 🚀 **Skp intro / credits support**
+- 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
 - 📺 **Picture in Picture** (iPhone only): Watch movies in PiP mode on your iPhone.
 - 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.
@@ -61,7 +62,7 @@ Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) to
 ## Get it now

 <div style="display: flex; gap: 5px;">
-  <a href="https://apps.apple.com/se/app/streamyfin/id6593660679?l=en-GB"><img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/></a>
+  <a href="https://apps.apple.com/app/streamyfin/id6593660679?l=en-GB"><img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/></a>
  <a href="https://play.google.com/store/apps/details?id=com.fredrikburmester.streamyfin"><img height=50 alt="Get the beta on Google Play" src="./assets/Google_Play_Store_badge_EN.svg"/></a>
 </div>

@@ -135,7 +136,7 @@ Key points of the MPL-2.0:

 ## 🌐 Connect with Us

-Join our Discord: [https://discord.gg/zyGKHJZvv4](https://discord.gg/aJvAYeycyY)
+Join our Discord: [https://discord.gg/BuGG9ZNhaE](https://discord.gg/BuGG9ZNhaE)

 If you have questions or need support, feel free to reach out:

@@ -153,3 +154,7 @@ I'd like to thank the following people and projects for their contributions to S
 - [Reiverr](https://github.com/aleksilassila/reiverr) for great help with understanding the Jellyfin API.
 - [Jellyfin TS SDK](https://github.com/jellyfin/jellyfin-sdk-typescript) for the TypeScript SDK.
 - The Jellyfin devs for always being helpful in the Discord.
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=fredrikburmester/streamyfin&type=Date)](https://star-history.com/#fredrikburmester/streamyfin&Date)
--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.15.0",
+    "version": "0.21.0",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -10,7 +10,7 @@
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
-      "backgroundColor": "#29164B"
+      "backgroundColor": "#2E2E2E"
    },
    "jsEngine": "hermes",
    "assetBundlePatterns": ["**/*"],
@@ -19,7 +19,7 @@
      "infoPlist": {
        "NSCameraUsageDescription": "The app needs access to your camera to scan barcodes.",
        "NSMicrophoneUsageDescription": "The app needs access to your microphone.",
-        "UIBackgroundModes": ["audio"],
+        "UIBackgroundModes": ["audio", "fetch"],
        "NSLocalNetworkUsageDescription": "The app needs access to your local network to connect to your Jellyfin server.",
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true
@@ -33,9 +33,9 @@
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 41,
+      "versionCode": 46,
      "adaptiveIcon": {
-        "foregroundImage": "./assets/images/icon.png"
+        "foregroundImage": "./assets/images/adaptive_icon.png"
      },
      "package": "com.fredrikburmester.streamyfin",
      "permissions": [
@@ -43,11 +43,6 @@
        "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"
      ]
    },
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
    "plugins": [
      "expo-router",
      "expo-font",
@@ -71,18 +66,11 @@
          }
        }
      ],
-      [
-        "./plugins/withAndroidMainActivityAttributes",
-        {
-          "com.reactnative.googlecast.RNGCExpandedControllerActivity": true
-        }
-      ],
-      ["./plugins/withExpandedController.js"],
      [
        "expo-build-properties",
        {
          "ios": {
-            "deploymentTarget": "14.0"
+            "deploymentTarget": "15.6"
          },
          "android": {
            "android": {
@@ -111,7 +99,14 @@
        {
          "motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
        }
-      ]
+      ],
+      "expo-asset",
+      [
+        "react-native-edge-to-edge",
+        { "android": { "parentTheme": "Material3" } }
+      ],
+      ["react-native-bottom-tabs"],
+      ["./plugins/withChangeNativeAndroidTextToWhite.js"]
    ],
    "experiments": {
      "typedRoutes": true
--- a/app/(auth)/(tabs)/(home)/_layout.tsx
+++ b/app/(auth)/(tabs)/(home)/_layout.tsx
@@ -1,12 +1,14 @@
 import { Chromecast } from "@/components/Chromecast";
 import { HeaderBackButton } from "@/components/common/HeaderBackButton";
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import { useDownload } from "@/providers/DownloadProvider";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";

 export default function IndexLayout() {
  const router = useRouter();
+
  return (
    <Stack>
      <Stack.Screen
@@ -18,19 +20,6 @@ export default function IndexLayout() {
          headerBlurEffect: "prominent",
          headerTransparent: Platform.OS === "ios" ? true : false,
          headerShadowVisible: false,
-          headerLeft: () => (
-            <TouchableOpacity
-              style={{
-                marginRight: Platform.OS === "android" ? 17 : 0,
-              }}
-              onPress={() => {
-                router.push("/(auth)/downloads");
-              }}
-              className="p-2"
-            >
-              <Feather name="download" color={"white"} size={22} />
-            </TouchableOpacity>
-          ),
          headerRight: () => (
            <View className="flex flex-row items-center space-x-2">
              <Chromecast />
@@ -38,7 +27,6 @@ export default function IndexLayout() {
                onPress={() => {
                  router.push("/(auth)/settings");
                }}
-                className="p-2 "
              >
                <Feather name="settings" color={"white"} size={22} />
              </TouchableOpacity>
--- a/app/(auth)/(tabs)/(home)/downloads.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads.tsx
@@ -1,69 +1,51 @@
 import { Text } from "@/components/common/Text";
+import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
 import { MovieCard } from "@/components/downloads/MovieCard";
 import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { Loader } from "@/components/Loader";
-import { runningProcesses } from "@/utils/atoms/downloads";
+import { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
 import { queueAtom } from "@/utils/atoms/queue";
+import { useSettings } from "@/utils/atoms/settings";
 import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useQuery } from "@tanstack/react-query";
-import { router } from "expo-router";
-import { FFmpegKit } from "ffmpeg-kit-react-native";
+import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
-import { ScrollView, TouchableOpacity, View } from "react-native";
+import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

-const downloads: React.FC = () => {
-  const [process, setProcess] = useAtom(runningProcesses);
+export default function page() {
  const [queue, setQueue] = useAtom(queueAtom);
+  const { removeProcess, downloadedFiles } = useDownload();
+  const router = useRouter();
+  const [settings] = useSettings();

-  const { data: downloadedFiles, isLoading } = useQuery({
-    queryKey: ["downloaded_files", process?.item.Id],
-    queryFn: async () =>
-      JSON.parse(
-        (await AsyncStorage.getItem("downloaded_files")) || "[]"
-      ) as BaseItemDto[],
-    staleTime: 0,
-  });
-
-  const movies = useMemo(
-    () => downloadedFiles?.filter((f) => f.Type === "Movie") || [],
-    [downloadedFiles]
-  );
-
-  const groupedBySeries = useMemo(() => {
-    const episodes = downloadedFiles?.filter((f) => f.Type === "Episode");
-    const series: { [key: string]: BaseItemDto[] } = {};
-    episodes?.forEach((e) => {
-      if (!series[e.SeriesName!]) series[e.SeriesName!] = [];
-      series[e.SeriesName!].push(e);
-    });
-    return Object.values(series);
+  const movies = useMemo(() => {
+    try {
+      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
+    } catch {
+      migration_20241124();
+      return [];
+    }
  }, [downloadedFiles]);

-  const eta = useMemo(() => {
-    const length = process?.item?.RunTimeTicks || 0;
-
-    if (!process?.speed || !process?.progress) return "";
-
-    const timeLeft =
-      (length - length * (process.progress / 100)) / process.speed;
-
-    return formatNumber(timeLeft / 10000);
-  }, [process]);
+  const groupedBySeries = useMemo(() => {
+    try {
+      const episodes = downloadedFiles?.filter(
+        (f) => f.item.Type === "Episode"
+      );
+      const series: { [key: string]: DownloadedItem[] } = {};
+      episodes?.forEach((e) => {
+        if (!series[e.item.SeriesName!]) series[e.item.SeriesName!] = [];
+        series[e.item.SeriesName!].push(e);
+      });
+      return Object.values(series);
+    } catch {
+      migration_20241124();
+      return [];
+    }
+  }, [downloadedFiles]);

  const insets = useSafeAreaInsets();

-  if (isLoading) {
-    return (
-      <View className="h-full flex flex-col items-center justify-center -mt-6">
-        <Loader />
-      </View>
-    );
-  }
-
  return (
    <ScrollView
      contentContainerStyle={{
@@ -72,121 +54,101 @@ const downloads: React.FC = () => {
        paddingBottom: 100,
      }}
    >
-      <View className="px-4 py-4">
-        <View className="mb-4 flex flex-col space-y-4">
-          <View>
-            <Text className="text-2xl font-bold mb-2">Queue</Text>
-            <View className="flex flex-col space-y-2">
-              {queue.map((q) => (
-                <TouchableOpacity
-                  onPress={() =>
-                    router.push(`/(auth)/items/page?id=${q.item.Id}`)
-                  }
-                  className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
-                >
-                  <View>
-                    <Text className="font-semibold">{q.item.Name}</Text>
-                    <Text className="text-xs opacity-50">{q.item.Type}</Text>
-                  </View>
+      <View className="py-4">
+        <View className="mb-4 flex flex-col space-y-4 px-4">
+          {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">
+                Queue and downloads will be lost on app restart
+              </Text>
+              <View className="flex flex-col space-y-2 mt-2">
+                {queue.map((q) => (
                  <TouchableOpacity
-                    onPress={() => {
-                      setQueue((prev) => prev.filter((i) => i.id !== q.id));
-                    }}
+                    onPress={() =>
+                      router.push(`/(auth)/items/page?id=${q.item.Id}`)
+                    }
+                    className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
                  >
-                    <Ionicons name="close" size={24} color="red" />
-                  </TouchableOpacity>
-                </TouchableOpacity>
-              ))}
-            </View>
-
-            {queue.length === 0 && (
-              <Text className="opacity-50">No items in queue</Text>
-            )}
-          </View>
-
-          <View>
-            <Text className="text-2xl font-bold mb-2">Active download</Text>
-            {process?.item ? (
-              <TouchableOpacity
-                onPress={() =>
-                  router.push(`/(auth)/items/page?id=${process.item.Id}`)
-                }
-                className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
-              >
-                <View>
-                  <Text className="font-semibold">{process.item.Name}</Text>
-                  <Text className="text-xs opacity-50">
-                    {process.item.Type}
-                  </Text>
-                  <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
-                    <Text className="text-xs">
-                      {process.progress.toFixed(0)}%
-                    </Text>
-                    <Text className="text-xs">
-                      {process.speed?.toFixed(2)}x
-                    </Text>
                    <View>
-                      <Text className="text-xs">ETA {eta}</Text>
+                      <Text className="font-semibold">{q.item.Name}</Text>
+                      <Text className="text-xs opacity-50">{q.item.Type}</Text>
                    </View>
-                  </View>
-                </View>
-                <TouchableOpacity
-                  onPress={() => {
-                    FFmpegKit.cancel();
-                    setProcess(null);
-                  }}
-                >
-                  <Ionicons name="close" size={24} color="red" />
-                </TouchableOpacity>
-                <View
-                  className={`
-                  absolute bottom-0 left-0 h-1 bg-purple-600
-                `}
-                  style={{
-                    width: process.progress
-                      ? `${Math.max(5, process.progress)}%`
-                      : "5%",
-                  }}
-                ></View>
-              </TouchableOpacity>
-            ) : (
-              <Text className="opacity-50">No active downloads</Text>
-            )}
-          </View>
+                    <TouchableOpacity
+                      onPress={() => {
+                        removeProcess(q.id);
+                        setQueue((prev) => {
+                          if (!prev) return [];
+                          return [...prev.filter((i) => i.id !== q.id)];
+                        });
+                      }}
+                    >
+                      <Ionicons name="close" size={24} color="red" />
+                    </TouchableOpacity>
+                  </TouchableOpacity>
+                ))}
+              </View>
+
+              {queue.length === 0 && (
+                <Text className="opacity-50">No items in queue</Text>
+              )}
+            </View>
+          )}
+
+          <ActiveDownloads />
        </View>
+
        {movies.length > 0 && (
          <View className="mb-4">
-            <View className="flex flex-row items-center justify-between mb-2">
-              <Text className="text-2xl font-bold">Movies</Text>
+            <View className="flex flex-row items-center justify-between mb-2 px-4">
+              <Text className="text-lg font-bold">Movies</Text>
              <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
                <Text className="text-xs font-bold">{movies?.length}</Text>
              </View>
            </View>
-            {movies?.map((item: BaseItemDto) => (
-              <View className="mb-2 last:mb-0" key={item.Id}>
-                <MovieCard item={item} />
+            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+              <View className="px-4 flex flex-row">
+                {movies?.map((item) => (
+                  <View className="mb-2 last:mb-0" key={item.item.Id}>
+                    <MovieCard item={item.item} />
+                  </View>
+                ))}
              </View>
-            ))}
+            </ScrollView>
          </View>
        )}
-        {groupedBySeries?.map((items: BaseItemDto[], index: number) => (
-          <SeriesCard items={items} key={items[0].SeriesId} />
+        {groupedBySeries?.map((items, index) => (
+          <SeriesCard
+            items={items.map((i) => i.item)}
+            key={items[0].item.SeriesId}
+          />
        ))}
+        {downloadedFiles?.length === 0 && (
+          <View className="flex px-4">
+            <Text className="opacity-50">No downloaded items</Text>
+          </View>
+        )}
      </View>
    </ScrollView>
  );
-};
+}

-export default downloads;
-
-/*
- * Format a number (Date.getTime) to a human readable string ex. 2m 34s
- * @param {number} num - The number to format
- *
- * @returns {string} - The formatted string
- */
-const formatNumber = (num: number) => {
-  const minutes = Math.floor(num / 60000);
-  const seconds = ((num % 60000) / 1000).toFixed(0);
-  return `${minutes}m ${seconds}s`;
-};
+function migration_20241124() {
+  const router = useRouter();
+  const { deleteAllFiles } = useDownload();
+  Alert.alert(
+    "New app version requires re-download",
+    "The new update reqires content to be downloaded again. Please remove all downloaded content and try again.",
+    [
+      {
+        text: "Back",
+        onPress: () => router.back(),
+      },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: async () => await deleteAllFiles(),
+      },
+    ]
+  );
+}
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -4,11 +4,17 @@ import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { Loader } from "@/components/Loader";
 import { MediaListSection } from "@/components/medialists/MediaListSection";
+import { Colors } from "@/constants/Colors";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { Ionicons } from "@expo/vector-icons";
+import { Feather, Ionicons } from "@expo/vector-icons";
 import { Api } from "@jellyfin/sdk";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import {
+  BaseItemDto,
+  BaseItemKind,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import {
  getItemsApi,
  getSuggestionsApi,
@@ -17,43 +23,40 @@ import {
  getUserViewsApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import NetInfo from "@react-native-community/netinfo";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import { useAtom } from "jotai";
+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";
 import {
  ActivityIndicator,
  RefreshControl,
-  SafeAreaView,
  ScrollView,
+  TouchableOpacity,
  View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";

-type BaseSection = {
-  title: string;
-  queryKey: (string | undefined)[];
-};
-
-type ScrollingCollectionListSection = BaseSection & {
+type ScrollingCollectionListSection = {
  type: "ScrollingCollectionList";
-  queryFn: () => Promise<BaseItemDto[]>;
+  title?: string;
+  queryKey: (string | undefined | null)[];
+  queryFn: QueryFunction<BaseItemDto[]>;
  orientation?: "horizontal" | "vertical";
 };

-type MediaListSection = BaseSection & {
+type MediaListSection = {
  type: "MediaListSection";
-  queryFn: () => Promise<BaseItemDto>;
+  queryKey: (string | undefined)[];
+  queryFn: QueryFunction<BaseItemDto>;
 };

 type Section = ScrollingCollectionListSection | MediaListSection;

 export default function index() {
-  const queryClient = useQueryClient();
  const router = useRouter();

-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);

  const [loading, setLoading] = useState(false);
  const [settings, _] = useSettings();
@@ -61,6 +64,31 @@ export default function index() {
  const [isConnected, setIsConnected] = useState<boolean | null>(null);
  const [loadingRetry, setLoadingRetry] = useState(false);

+  const { downloadedFiles } = useDownload();
+  const navigation = useNavigation();
+
+  const insets = useSafeAreaInsets();
+
+  useEffect(() => {
+    const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
+    navigation.setOptions({
+      headerLeft: () => (
+        <TouchableOpacity
+          onPress={() => {
+            router.push("/(auth)/downloads");
+          }}
+          className="p-2"
+        >
+          <Feather
+            name="download"
+            color={hasDownloads ? Colors.primary : "white"}
+            size={22}
+          />
+        </TouchableOpacity>
+      ),
+    });
+  }, [downloadedFiles, navigation, router]);
+
  const checkConnection = useCallback(async () => {
    setLoadingRetry(true);
    const state = await NetInfo.fetch();
@@ -89,7 +117,7 @@ export default function index() {
    isError: e1,
    isLoading: l1,
  } = useQuery({
-    queryKey: ["userViews", user?.Id],
+    queryKey: ["home", "userViews", user?.Id],
    queryFn: async () => {
      if (!api || !user?.Id) {
        return null;
@@ -110,7 +138,7 @@ export default function index() {
    isError: e2,
    isLoading: l2,
  } = useQuery({
-    queryKey: ["sf_promoted", user?.Id, settings?.usePopularPlugin],
+    queryKey: ["home", "sf_promoted", user?.Id, settings?.usePopularPlugin],
    queryFn: async () => {
      if (!api || !user?.Id) return [];

@@ -128,43 +156,84 @@ export default function index() {
    staleTime: 60 * 1000,
  });

-  const movieCollectionId = useMemo(() => {
-    return userViews?.find((c) => c.CollectionType === "movies")?.Id;
+  const collections = useMemo(() => {
+    const allow = ["movies", "tvshows"];
+    return (
+      userViews?.filter(
+        (c) => c.CollectionType && allow.includes(c.CollectionType)
+      ) || []
+    );
  }, [userViews]);

-  const tvShowCollectionId = useMemo(() => {
-    return userViews?.find((c) => c.CollectionType === "tvshows")?.Id;
-  }, [userViews]);
+  const invalidateCache = useInvalidatePlaybackProgressCache();

  const refetch = useCallback(async () => {
    setLoading(true);
-    await queryClient.refetchQueries({ queryKey: ["userViews"] });
-    await queryClient.refetchQueries({ queryKey: ["resumeItems"] });
-    await queryClient.refetchQueries({ queryKey: ["nextUp-all"] });
-    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInMovies"] });
-    await queryClient.refetchQueries({ queryKey: ["recentlyAddedInTVShows"] });
-    await queryClient.refetchQueries({ queryKey: ["suggestions"] });
-    await queryClient.refetchQueries({
-      queryKey: ["sf_promoted"],
-    });
-    await queryClient.refetchQueries({
-      queryKey: ["sf_carousel"],
-    });
+    await invalidateCache();
    setLoading(false);
-  }, [queryClient, user?.Id]);
+  }, []);
+
+  const createCollectionConfig = useCallback(
+    (
+      title: string,
+      queryKey: string[],
+      includeItemTypes: BaseItemKind[],
+      parentId: string | undefined
+    ): ScrollingCollectionListSection => ({
+      title,
+      queryKey,
+      queryFn: async () => {
+        if (!api) return [];
+        return (
+          (
+            await getUserLibraryApi(api).getLatestMedia({
+              userId: user?.Id,
+              limit: 50,
+              fields: ["PrimaryImageAspectRatio", "Path"],
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes,
+              parentId,
+            })
+          ).data || []
+        );
+      },
+      type: "ScrollingCollectionList",
+    }),
+    [api, user?.Id]
+  );

  const sections = useMemo(() => {
    if (!api || !user?.Id) return [];

+    const latestMediaViews = collections.map((c) => {
+      const includeItemTypes: BaseItemKind[] =
+        c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
+      const title = "Recently Added in " + c.Name;
+      const queryKey = [
+        "home",
+        "recentlyAddedIn" + c.CollectionType,
+        user?.Id!,
+        c.Id!,
+      ];
+      return createCollectionConfig(
+        title || "",
+        queryKey,
+        includeItemTypes,
+        c.Id
+      );
+    });
+
    const ss: Section[] = [
      {
        title: "Continue Watching",
-        queryKey: ["resumeItems", user.Id],
+        queryKey: ["home", "resumeItems"],
        queryFn: async () =>
          (
            await getItemsApi(api).getResumeItems({
              userId: user.Id,
              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              includeItemTypes: ["Movie", "Series", "Episode"],
            })
          ).data.Items || [],
        type: "ScrollingCollectionList",
@@ -172,7 +241,7 @@ export default function index() {
      },
      {
        title: "Next Up",
-        queryKey: ["nextUp-all", user?.Id],
+        queryKey: ["home", "nextUp-all"],
        queryFn: async () =>
          (
            await getTvShowsApi(api).getNextUp({
@@ -180,57 +249,26 @@ export default function index() {
              fields: ["MediaSourceCount"],
              limit: 20,
              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+              enableResumable: false,
            })
          ).data.Items || [],
        type: "ScrollingCollectionList",
        orientation: "horizontal",
      },
+      ...latestMediaViews,
      ...(mediaListCollections?.map(
        (ml) =>
          ({
-            title: ml.Name || "",
-            queryKey: ["mediaList", ml.Id],
+            title: ml.Name,
+            queryKey: ["home", "mediaList", ml.Id!],
            queryFn: async () => ml,
            type: "MediaListSection",
-          } as MediaListSection)
+            orientation: "vertical",
+          } as Section)
      ) || []),
-      {
-        title: "Recently Added in Movies",
-        queryKey: ["recentlyAddedInMovies", user?.Id, movieCollectionId],
-        queryFn: async () =>
-          (
-            await getUserLibraryApi(api).getLatestMedia({
-              userId: user?.Id,
-              limit: 50,
-              fields: ["PrimaryImageAspectRatio", "Path"],
-              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes: ["Movie"],
-              parentId: movieCollectionId,
-            })
-          ).data || [],
-        type: "ScrollingCollectionList",
-      },
-      {
-        title: "Recently Added in TV-Shows",
-        queryKey: ["recentlyAddedInTVShows", user?.Id, tvShowCollectionId],
-        queryFn: async () =>
-          (
-            await getUserLibraryApi(api).getLatestMedia({
-              userId: user?.Id,
-              limit: 50,
-              fields: ["PrimaryImageAspectRatio", "Path"],
-              imageTypeLimit: 1,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes: ["Series"],
-              parentId: tvShowCollectionId,
-            })
-          ).data || [],
-        type: "ScrollingCollectionList",
-      },
      {
        title: "Suggested Movies",
-        queryKey: ["suggestedMovies", user?.Id],
+        queryKey: ["home", "suggestedMovies", user?.Id],
        queryFn: async () =>
          (
            await getSuggestionsApi(api).getSuggestions({
@@ -245,7 +283,7 @@ export default function index() {
      },
      {
        title: "Suggested Episodes",
-        queryKey: ["suggestedEpisodes", user?.Id],
+        queryKey: ["home", "suggestedEpisodes", user?.Id],
        queryFn: async () => {
          try {
            const suggestions = await getSuggestions(api, user.Id);
@@ -265,13 +303,7 @@ export default function index() {
      },
    ];
    return ss;
-  }, [
-    api,
-    user?.Id,
-    movieCollectionId,
-    tvShowCollectionId,
-    mediaListCollections,
-  ]);
+  }, [api, user?.Id, collections, mediaListCollections]);

  if (isConnected === false) {
    return (
@@ -315,8 +347,6 @@ export default function index() {
    );
  }

-  const insets = useSafeAreaInsets();
-
  if (e1 || e2)
    return (
      <View className="flex flex-col items-center justify-center h-full -mt-6">
@@ -341,14 +371,13 @@ export default function index() {
      refreshControl={
        <RefreshControl refreshing={loading} onRefresh={refetch} />
      }
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 16,
+      }}
    >
-      <View
-        style={{
-          paddingLeft: insets.left,
-          paddingRight: insets.right,
-        }}
-        className="flex flex-col pt-4 pb-24 gap-y-2"
-      >
+      <View className="flex flex-col space-y-4">
        <LargeMovieCarousel />

        {sections.map((section, index) => {
--- a/app/(auth)/(tabs)/(home)/settings.tsx
+++ b/app/(auth)/(tabs)/(home)/settings.tsx
@@ -2,22 +2,20 @@ import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
 import { SettingToggles } from "@/components/settings/SettingToggles";
-import { useFiles } from "@/hooks/useFiles";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
-import { Ionicons } from "@expo/vector-icons";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import { Alert, ScrollView, View } from "react-native";
-import { red } from "react-native-reanimated/lib/typescript/reanimated2/Colors";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";

 export default function settings() {
  const { logout } = useJellyfin();
-  const { deleteAllFiles } = useFiles();
+  const { deleteAllFiles } = useDownload();

  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
@@ -41,7 +39,6 @@ export default function settings() {
              code: text,
              userId: user?.Id,
            });
-            console.log(res.status, res.statusText, res.data);
            if (res.status === 200) {
              Haptics.notificationAsync(
                Haptics.NotificationFeedbackType.Success
@@ -69,12 +66,20 @@ export default function settings() {
      }}
    >
      <View className="p-4 flex flex-col gap-y-4">
+        {/* <Button
+          onPress={() => {
+            registerBackgroundFetchAsync();
+          }}
+        >
+          registerBackgroundFetchAsync
+        </Button> */}
        <View>
-          <Text className="font-bold text-lg mb-2">Information</Text>
+          <Text className="font-bold text-lg mb-2">User Info</Text>

          <View className="flex flex-col rounded-xl overflow-hidden border-neutral-800 divide-y-2 divide-solid divide-neutral-800 ">
            <ListItem title="User" subTitle={user?.Name} />
            <ListItem title="Server" subTitle={api?.basePath} />
+            <ListItem title="Token" subTitle={api?.accessToken} />
          </View>
        </View>

@@ -87,18 +92,6 @@ export default function settings() {

        <SettingToggles />

-        <View>
-          <Text className="font-bold text-lg mb-2">Tests</Text>
-          <Button
-            onPress={() => {
-              toast.success("Download started");
-            }}
-            color="black"
-          >
-            Test toast
-          </Button>
-        </View>
-
        <View>
          <Text className="font-bold text-lg mb-2">Account and storage</Text>
          <View className="flex flex-col space-y-2">
@@ -108,10 +101,17 @@ export default function settings() {
            <Button
              color="red"
              onPress={async () => {
-                await deleteAllFiles();
-                Haptics.notificationAsync(
-                  Haptics.NotificationFeedbackType.Success
-                );
+                try {
+                  await deleteAllFiles();
+                  Haptics.notificationAsync(
+                    Haptics.NotificationFeedbackType.Success
+                  );
+                } catch (e) {
+                  Haptics.notificationAsync(
+                    Haptics.NotificationFeedbackType.Error
+                  );
+                  toast.error("Error deleting files");
+                }
              }}
            >
              Delete all downloaded files
@@ -143,7 +143,9 @@ export default function settings() {
                >
                  {log.level}
                </Text>
-                <Text className="text-xs">{log.message}</Text>
+                <Text uiTextView selectable className="text-xs">
+                  {log.message}
+                </Text>
              </View>
            ))}
            {logs?.length === 0 && (
--- a/app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx
@@ -50,7 +50,7 @@ const page: React.FC = () => {
        userId: user.Id,
        personIds: [actorId],
        startIndex: pageParam,
-        limit: 8,
+        limit: 16,
        sortOrder: ["Descending", "Descending", "Ascending"],
        includeItemTypes: ["Movie", "Series"],
        recursive: true,
--- a/app/(auth)/(tabs)/(home,libraries,search)/items/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/items/page.tsx
@@ -1,15 +1,100 @@
+import { Text } from "@/components/common/Text";
 import { ItemContent } from "@/components/ItemContent";
-import { Stack, useLocalSearchParams } from "expo-router";
-import React from "react";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import {
+  getMediaInfoApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useLocalSearchParams } from "expo-router";
+import { useAtom } from "jotai";
+import React, { useEffect } from "react";
+import { View } from "react-native";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";

 const Page: React.FC = () => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
  const { id } = useLocalSearchParams() as { id: string };

+  const { data: item, isError } = useQuery({
+    queryKey: ["item", id],
+    queryFn: async () => {
+      if (!api || !user || !id) return;
+      const res = await getUserLibraryApi(api).getItem({
+        itemId: id,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
+
+  const opacity = useSharedValue(1);
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  const fadeOut = (callback: any) => {
+    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(callback)();
+      }
+    });
+  };
+
+  const fadeIn = (callback: any) => {
+    opacity.value = withTiming(1, { duration: 300 }, (finished) => {
+      if (finished) {
+        runOnJS(callback)();
+      }
+    });
+  };
+  useEffect(() => {
+    if (item) {
+      fadeOut(() => {});
+    } else {
+      fadeIn(() => {});
+    }
+  }, [item]);
+
+  if (isError)
+    return (
+      <View className="flex flex-col items-center justify-center h-screen w-screen">
+        <Text>Could not load item</Text>
+      </View>
+    );
+
  return (
-    <>
-      <Stack.Screen options={{ autoHideHomeIndicator: true }} />
-      <ItemContent id={id} />
-    </>
+    <View className="flex flex-1 relative">
+      <Animated.View
+        pointerEvents={"none"}
+        style={[animatedStyle]}
+        className="absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black"
+      >
+        <View className="h-[350px] bg-transparent rounded-lg mb-4 w-full"></View>
+        <View className="h-6 bg-neutral-900 rounded mb-1 w-12"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-1/2"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg w-2/3 mb-10"></View>
+        <View className="h-4 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className="h-12 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className="h-4 bg-neutral-900 rounded-lg mb-1 w-1/4"></View>
+      </Animated.View>
+      {item && <ItemContent item={item} />}
+    </View>
  );
 };

--- a/app/(auth)/(tabs)/(home,libraries,search)/livetv/_layout.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/livetv/_layout.tsx
@@ -0,0 +1,49 @@
+import type {
+  MaterialTopTabNavigationEventMap,
+  MaterialTopTabNavigationOptions,
+} from "@react-navigation/material-top-tabs";
+import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+import { ParamListBase, TabNavigationState } from "@react-navigation/native";
+import { Stack, withLayoutContext } from "expo-router";
+import React from "react";
+
+const { Navigator } = createMaterialTopTabNavigator();
+
+export const Tab = withLayoutContext<
+  MaterialTopTabNavigationOptions,
+  typeof Navigator,
+  TabNavigationState<ParamListBase>,
+  MaterialTopTabNavigationEventMap
+>(Navigator);
+
+const Layout = () => {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Live TV" }} />
+      <Tab
+        initialRouteName="programs"
+        keyboardDismissMode="none"
+        screenOptions={{
+          tabBarBounces: true,
+          tabBarLabelStyle: { fontSize: 10 },
+          tabBarItemStyle: {
+            width: 100,
+          },
+          tabBarStyle: { backgroundColor: "black" },
+          animationEnabled: true,
+          lazy: true,
+          swipeEnabled: true,
+          tabBarIndicatorStyle: { backgroundColor: "#9334E9" },
+          tabBarScrollEnabled: true,
+        }}
+      >
+        <Tab.Screen name="programs" />
+        <Tab.Screen name="guide" />
+        <Tab.Screen name="channels" />
+        <Tab.Screen name="recordings" />
+      </Tab>
+    </>
+  );
+};
+
+export default Layout;
--- a/app/(auth)/(tabs)/(home,libraries,search)/livetv/channels.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/livetv/channels.tsx
@@ -0,0 +1,56 @@
+import { ItemImage } from "@/components/common/ItemImage";
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
+import { FlashList } from "@shopify/flash-list";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import React from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function page() {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+
+  const { data: channels } = useQuery({
+    queryKey: ["livetv", "channels"],
+    queryFn: async () => {
+      const res = await getLiveTvApi(api!).getLiveTvChannels({
+        startIndex: 0,
+        limit: 500,
+        enableFavoriteSorting: true,
+        userId: user?.Id,
+        addCurrentProgram: false,
+        enableUserData: false,
+        enableImageTypes: ["Primary"],
+      });
+      return res.data;
+    },
+  });
+
+  return (
+    <View className="flex flex-1">
+      <FlashList
+        data={channels?.Items}
+        estimatedItemSize={76}
+        renderItem={({ item }) => (
+          <View className="flex flex-row items-center px-4 mb-2">
+            <View className="w-22 mr-4 rounded-lg overflow-hidden">
+              <ItemImage
+                style={{
+                  aspectRatio: "1/1",
+                  width: 60,
+                  borderRadius: 8,
+                }}
+                item={item}
+              />
+            </View>
+            <Text className="font-bold">{item.Name}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search)/livetv/guide.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/livetv/guide.tsx
@@ -0,0 +1,168 @@
+import { ItemImage } from "@/components/common/ItemImage";
+import { HourHeader } from "@/components/livetv/HourHeader";
+import { LiveTVGuideRow } from "@/components/livetv/LiveTVGuideRow";
+import { TAB_HEIGHT } from "@/constants/Values";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import React, { useCallback, useMemo, useState } from "react";
+import { Button, Dimensions, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const HOUR_HEIGHT = 30;
+const ITEMS_PER_PAGE = 20;
+
+const MemoizedLiveTVGuideRow = React.memo(LiveTVGuideRow);
+
+export default function page() {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+  const [date, setDate] = useState<Date>(new Date());
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { data: guideInfo } = useQuery({
+    queryKey: ["livetv", "guideInfo"],
+    queryFn: async () => {
+      const res = await getLiveTvApi(api!).getGuideInfo();
+      return res.data;
+    },
+  });
+
+  const { data: channels } = useQuery({
+    queryKey: ["livetv", "channels", currentPage],
+    queryFn: async () => {
+      const res = await getLiveTvApi(api!).getLiveTvChannels({
+        startIndex: (currentPage - 1) * ITEMS_PER_PAGE,
+        limit: ITEMS_PER_PAGE,
+        enableFavoriteSorting: true,
+        userId: user?.Id,
+        addCurrentProgram: false,
+        enableUserData: false,
+        enableImageTypes: ["Primary"],
+      });
+      return res.data;
+    },
+  });
+
+  const { data: programs } = useQuery({
+    queryKey: ["livetv", "programs", date, currentPage],
+    queryFn: async () => {
+      const startOfDay = new Date(date);
+      startOfDay.setHours(0, 0, 0, 0);
+      const endOfDay = new Date(date);
+      endOfDay.setHours(23, 59, 59, 999);
+
+      const now = new Date();
+      const isToday = startOfDay.toDateString() === now.toDateString();
+
+      const res = await getLiveTvApi(api!).getPrograms({
+        getProgramsDto: {
+          MaxStartDate: endOfDay.toISOString(),
+          MinEndDate: isToday ? now.toISOString() : startOfDay.toISOString(),
+          ChannelIds: channels?.Items?.map((c) => c.Id).filter(
+            Boolean
+          ) as string[],
+          ImageTypeLimit: 1,
+          EnableImages: false,
+          SortBy: ["StartDate"],
+          EnableTotalRecordCount: false,
+          EnableUserData: false,
+        },
+      });
+      return res.data;
+    },
+    enabled: !!channels,
+  });
+
+  const screenWidth = Dimensions.get("window").width;
+
+  const memoizedChannels = useMemo(() => channels?.Items || [], [channels]);
+
+  const [scrollX, setScrollX] = useState(0);
+
+  const handleNextPage = useCallback(() => {
+    setCurrentPage((prev) => prev + 1);
+  }, []);
+
+  const handlePrevPage = useCallback(() => {
+    setCurrentPage((prev) => Math.max(1, prev - 1));
+  }, []);
+
+  return (
+    <ScrollView
+      nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
+      key={"home"}
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 16,
+      }}
+      style={{
+        marginBottom: TAB_HEIGHT,
+      }}
+    >
+      <View className="flex flex-row  bg-neutral-800 w-full items-end">
+        <Button
+          title="Previous"
+          onPress={handlePrevPage}
+          disabled={currentPage === 1}
+        />
+        <Button
+          title="Next"
+          onPress={handleNextPage}
+          disabled={
+            !channels || (channels?.Items?.length || 0) < ITEMS_PER_PAGE
+          }
+        />
+      </View>
+
+      <View className="flex flex-row">
+        <View className="flex flex-col w-[64px]">
+          <View
+            style={{
+              height: HOUR_HEIGHT,
+            }}
+            className="bg-neutral-800"
+          ></View>
+          {channels?.Items?.map((c, i) => (
+            <View className="h-16 w-16 mr-4 rounded-lg overflow-hidden" key={i}>
+              <ItemImage
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  resizeMode: "contain",
+                }}
+                item={c}
+              />
+            </View>
+          ))}
+        </View>
+        <ScrollView
+          style={{
+            width: screenWidth - 64,
+          }}
+          horizontal
+          scrollEnabled
+          onScroll={(e) => {
+            setScrollX(e.nativeEvent.contentOffset.x);
+          }}
+        >
+          <View className="flex flex-col">
+            <HourHeader height={HOUR_HEIGHT} />
+            {channels?.Items?.map((c, i) => (
+              <MemoizedLiveTVGuideRow
+                channel={c}
+                programs={programs?.Items}
+                key={c.Id}
+                scrollX={scrollX}
+              />
+            ))}
+          </View>
+        </ScrollView>
+      </View>
+    </ScrollView>
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search)/livetv/programs.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/livetv/programs.tsx
@@ -0,0 +1,150 @@
+import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
+import { TAB_HEIGHT } from "@/constants/Values";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
+import { useAtom } from "jotai";
+import React from "react";
+import {
+  ScrollView,
+  View
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function page() {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ScrollView
+      nestedScrollEnabled
+      contentInsetAdjustmentBehavior="automatic"
+      key={"home"}
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+        paddingBottom: 16,
+        paddingTop: 8,
+      }}
+      style={{
+        marginBottom: TAB_HEIGHT,
+      }}
+    >
+      <View className="flex flex-col space-y-2">
+        <ScrollingCollectionList
+          queryKey={["livetv", "recommended"]}
+          title={"On now"}
+          queryFn={async () => {
+            if (!api) return [] as BaseItemDto[];
+            const res = await getLiveTvApi(api).getRecommendedPrograms({
+              userId: user?.Id,
+              isAiring: true,
+              limit: 24,
+              imageTypeLimit: 1,
+              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
+              enableTotalRecordCount: false,
+              fields: ["ChannelInfo", "PrimaryImageAspectRatio"],
+            });
+            return res.data.Items || [];
+          }}
+          orientation="horizontal"
+        />
+        <ScrollingCollectionList
+          queryKey={["livetv", "shows"]}
+          title={"Shows"}
+          queryFn={async () => {
+            if (!api) return [] as BaseItemDto[];
+            const res = await getLiveTvApi(api).getLiveTvPrograms({
+              userId: user?.Id,
+              hasAired: false,
+              limit: 9,
+              isMovie: false,
+              isSeries: true,
+              isSports: false,
+              isNews: false,
+              isKids: false,
+              enableTotalRecordCount: false,
+              fields: ["ChannelInfo", "PrimaryImageAspectRatio"],
+              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
+            });
+            return res.data.Items || [];
+          }}
+          orientation="horizontal"
+        />
+        <ScrollingCollectionList
+          queryKey={["livetv", "movies"]}
+          title={"Movies"}
+          queryFn={async () => {
+            if (!api) return [] as BaseItemDto[];
+            const res = await getLiveTvApi(api).getLiveTvPrograms({
+              userId: user?.Id,
+              hasAired: false,
+              limit: 9,
+              isMovie: true,
+              enableTotalRecordCount: false,
+              fields: ["ChannelInfo"],
+              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
+            });
+            return res.data.Items || [];
+          }}
+          orientation="horizontal"
+        />
+        <ScrollingCollectionList
+          queryKey={["livetv", "sports"]}
+          title={"Sports"}
+          queryFn={async () => {
+            if (!api) return [] as BaseItemDto[];
+            const res = await getLiveTvApi(api).getLiveTvPrograms({
+              userId: user?.Id,
+              hasAired: false,
+              limit: 9,
+              isSports: true,
+              enableTotalRecordCount: false,
+              fields: ["ChannelInfo"],
+              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
+            });
+            return res.data.Items || [];
+          }}
+          orientation="horizontal"
+        />
+        <ScrollingCollectionList
+          queryKey={["livetv", "kids"]}
+          title={"For Kids"}
+          queryFn={async () => {
+            if (!api) return [] as BaseItemDto[];
+            const res = await getLiveTvApi(api).getLiveTvPrograms({
+              userId: user?.Id,
+              hasAired: false,
+              limit: 9,
+              isKids: true,
+              enableTotalRecordCount: false,
+              fields: ["ChannelInfo"],
+              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
+            });
+            return res.data.Items || [];
+          }}
+          orientation="horizontal"
+        />
+        <ScrollingCollectionList
+          queryKey={["livetv", "news"]}
+          title={"News"}
+          queryFn={async () => {
+            if (!api) return [] as BaseItemDto[];
+            const res = await getLiveTvApi(api).getLiveTvPrograms({
+              userId: user?.Id,
+              hasAired: false,
+              limit: 9,
+              isNews: true,
+              enableTotalRecordCount: false,
+              fields: ["ChannelInfo"],
+              enableImageTypes: ["Primary", "Thumb", "Backdrop"],
+            });
+            return res.data.Items || [];
+          }}
+          orientation="horizontal"
+        />
+      </View>
+    </ScrollView>
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search)/livetv/recordings.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/livetv/recordings.tsx
@@ -0,0 +1,11 @@
+import { Text } from "@/components/common/Text";
+import React from "react";
+import { View } from "react-native";
+
+export default function page() {
+  return (
+    <View className="flex items-center justify-center h-full -mt-12">
+      <Text>Coming soon</Text>
+    </View>
+  );
+}
--- a/app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search)/series/[id].tsx
@@ -10,6 +10,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
+import React from "react";
 import { useEffect, useMemo } from "react";
 import { View } from "react-native";

@@ -20,8 +21,6 @@ const page: React.FC = () => {
    seasonIndex: string;
  };

-  console.log("seasonIndex", seasonIndex);
-
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

--- a/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
+++ b/app/(auth)/(tabs)/(libraries)/[libraryId].tsx
@@ -1,12 +1,8 @@
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import {
-  useFocusEffect,
-  useLocalSearchParams,
-  useNavigation,
-} from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { FlatList, useWindowDimensions, View } from "react-native";

 import { Text } from "@/components/common/Text";
@@ -16,6 +12,7 @@ import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
  genreFilterAtom,
@@ -32,7 +29,6 @@ import {
  tagsFilterAtom,
  yearFilterAtom,
 } from "@/utils/atoms/filters";
-import { orientationAtom } from "@/utils/atoms/orientation";
 import {
  BaseItemDto,
  BaseItemDtoQueryResult,
@@ -60,22 +56,21 @@ const Page = () => {
  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
  const [sortBy, _setSortBy] = useAtom(sortByAtom);
  const [sortOrder, _setSortOrder] = useAtom(sortOrderAtom);
-  const [orientation] = useAtom(orientationAtom);
  const [sortByPreference, setSortByPreference] = useAtom(sortByPreferenceAtom);
  const [sortOrderPreference, setOderByPreference] = useAtom(
    sortOrderPreferenceAtom
  );

+  const { orientation } = useOrientation();
+
  useEffect(() => {
    const sop = getSortOrderPreference(libraryId, sortOrderPreference);
    if (sop) {
-      console.log("getSortOrderPreference ~", sop, libraryId);
      _setSortOrder([sop]);
    } else {
      _setSortOrder([SortOrderOption.Ascending]);
    }
    const obp = getSortByPreference(libraryId, sortByPreference);
-    console.log("getSortByPreference ~", obp, libraryId);
    if (obp) {
      _setSortBy([obp]);
    } else {
@@ -87,7 +82,6 @@ const Page = () => {
    (sortBy: SortByOption[]) => {
      const sop = getSortByPreference(libraryId, sortByPreference);
      if (sortBy[0] !== sop) {
-        console.log("setSortByPreference ~", sortBy[0], libraryId);
        setSortByPreference({ ...sortByPreference, [libraryId]: sortBy[0] });
      }
      _setSortBy(sortBy);
@@ -99,7 +93,6 @@ const Page = () => {
    (sortOrder: SortOrderOption[]) => {
      const sop = getSortOrderPreference(libraryId, sortOrderPreference);
      if (sortOrder[0] !== sop) {
-        console.log("setSortOrderPreference ~", sortOrder[0], libraryId);
        setOderByPreference({
          ...sortOrderPreference,
          [libraryId]: sortOrder[0],
@@ -110,11 +103,12 @@ const Page = () => {
    [libraryId, sortOrderPreference]
  );

-  const getNumberOfColumns = useCallback(() => {
-    if (orientation === ScreenOrientation.Orientation.PORTRAIT_UP) return 3;
-    if (screenWidth < 600) return 5;
-    if (screenWidth < 960) return 6;
-    if (screenWidth < 1280) return 7;
+  const nrOfCols = useMemo(() => {
+    if (screenWidth < 300) return 2;
+    if (screenWidth < 500) return 3;
+    if (screenWidth < 800) return 5;
+    if (screenWidth < 1000) return 6;
+    if (screenWidth < 1500) return 7;
    return 6;
  }, [screenWidth, orientation]);

@@ -223,7 +217,7 @@ const Page = () => {

  const renderItem = useCallback(
    ({ item, index }: { item: BaseItemDto; index: number }) => (
-      <MemoizedTouchableItemRouter
+      <TouchableItemRouter
        key={item.Id}
        style={{
          width: "100%",
@@ -234,10 +228,10 @@ const Page = () => {
        <View
          style={{
            alignSelf:
-              orientation === ScreenOrientation.Orientation.PORTRAIT_UP
-                ? index % 3 === 0
+              orientation === ScreenOrientation.OrientationLock.PORTRAIT_UP
+                ? index % nrOfCols === 0
                  ? "flex-end"
-                  : (index + 1) % 3 === 0
+                  : (index + 1) % nrOfCols === 0
                  ? "flex-start"
                  : "center"
                : "center",
@@ -248,7 +242,7 @@ const Page = () => {
          <ItemPoster item={item} />
          <ItemCardText item={item} />
        </View>
-      </MemoizedTouchableItemRouter>
+      </TouchableItemRouter>
    ),
    [orientation]
  );
@@ -433,6 +427,7 @@ const Page = () => {

  return (
    <FlashList
+      key={orientation}
      ListEmptyComponent={
        <View className="flex flex-col items-center justify-center h-full">
          <Text className="font-bold text-xl text-neutral-500">No results</Text>
@@ -441,10 +436,10 @@ const Page = () => {
      contentInsetAdjustmentBehavior="automatic"
      data={flatData}
      renderItem={renderItem}
-      extraData={orientation}
+      extraData={[orientation, nrOfCols]}
      keyExtractor={keyExtractor}
      estimatedItemSize={244}
-      numColumns={getNumberOfColumns()}
+      numColumns={nrOfCols}
      onEndReached={() => {
        if (hasNextPage) {
          fetchNextPage();
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -1,4 +1,3 @@
-import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
 import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
@@ -71,37 +70,43 @@ export default function search() {
      types: BaseItemKind[];
      query: string;
    }): Promise<BaseItemDto[]> => {
-      if (!api) return [];
+      if (!api || !query) return [];

-      if (searchEngine === "Jellyfin") {
-        const searchApi = await getSearchApi(api).getSearchHints({
-          searchTerm: query,
-          limit: 10,
-          includeItemTypes: types,
-        });
+      try {
+        if (searchEngine === "Jellyfin") {
+          const searchApi = await getSearchApi(api).getSearchHints({
+            searchTerm: query,
+            limit: 10,
+            includeItemTypes: types,
+          });

-        return searchApi.data.SearchHints as BaseItemDto[];
-      } else {
-        const url = `${settings?.marlinServerUrl}/search?q=${encodeURIComponent(
-          query
-        )}&includeItemTypes=${types
-          .map((type) => encodeURIComponent(type))
-          .join("&includeItemTypes=")}`;
+          return (searchApi.data.SearchHints as BaseItemDto[]) || [];
+        } else {
+          if (!settings?.marlinServerUrl) return [];
+          const url = `${
+            settings.marlinServerUrl
+          }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
+            .map((type) => encodeURIComponent(type))
+            .join("&includeItemTypes=")}`;

-        const response1 = await axios.get(url);
-        const ids = response1.data.ids;
+          const response1 = await axios.get(url);
+          const ids = response1.data.ids;

-        if (!ids || !ids.length) return [];
+          if (!ids || !ids.length) return [];

-        const response2 = await getItemsApi(api).getItems({
-          ids,
-          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-        });
+          const response2 = await getItemsApi(api).getItems({
+            ids,
+            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+          });

-        return response2.data.Items as BaseItemDto[];
+          return (response2.data.Items as BaseItemDto[]) || [];
+        }
+      } catch (error) {
+        console.error("Error during search:", error);
+        return []; // Ensure an empty array is returned in case of an error
      }
    },
-    [api, settings]
+    [api, searchEngine, settings]
  );

  const navigation = useNavigation();
@@ -227,7 +232,7 @@ export default function search() {
          paddingRight: insets.right,
        }}
      >
-        <View className="flex flex-col pt-4 pb-32">
+        <View className="flex flex-col pt-2">
          {Platform.OS === "android" && (
            <View className="mb-4 px-4">
              <Input
@@ -250,165 +255,125 @@ export default function search() {
          <SearchItemWrapper
            header="Movies"
            ids={movies?.map((m) => m.Id!)}
-            renderItem={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    key={item.Id}
-                    className="flex flex-col w-28"
-                    item={item}
-                  >
-                    <MoviePoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
-                      {item.Name}
-                    </Text>
-                    <Text className="opacity-50 text-xs">
-                      {item.ProductionYear}
-                    </Text>
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <TouchableItemRouter
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+                item={item}
+              >
+                <MoviePoster item={item} key={item.Id} />
+                <Text numberOfLines={2} className="mt-2">
+                  {item.Name}
+                </Text>
+                <Text className="opacity-50 text-xs">
+                  {item.ProductionYear}
+                </Text>
+              </TouchableItemRouter>
            )}
          />
          <SearchItemWrapper
            ids={series?.map((m) => m.Id!)}
            header="Series"
-            renderItem={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    key={item.Id}
-                    item={item}
-                    className="flex flex-col w-28"
-                  >
-                    <SeriesPoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
-                      {item.Name}
-                    </Text>
-                    <Text className="opacity-50 text-xs">
-                      {item.ProductionYear}
-                    </Text>
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <TouchableItemRouter
+                key={item.Id}
+                item={item}
+                className="flex flex-col w-28 mr-2"
+              >
+                <SeriesPoster item={item} key={item.Id} />
+                <Text numberOfLines={2} className="mt-2">
+                  {item.Name}
+                </Text>
+                <Text className="opacity-50 text-xs">
+                  {item.ProductionYear}
+                </Text>
+              </TouchableItemRouter>
            )}
          />
          <SearchItemWrapper
            ids={episodes?.map((m) => m.Id!)}
            header="Episodes"
-            renderItem={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-44"
-                  >
-                    <ContinueWatchingPoster item={item} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-44 mr-2"
+              >
+                <ContinueWatchingPoster item={item} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
            )}
          />
          <SearchItemWrapper
            ids={collections?.map((m) => m.Id!)}
            header="Collections"
-            renderItem={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    key={item.Id}
-                    item={item}
-                    className="flex flex-col w-28"
-                  >
-                    <MoviePoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
-                      {item.Name}
-                    </Text>
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <TouchableItemRouter
+                key={item.Id}
+                item={item}
+                className="flex flex-col w-28 mr-2"
+              >
+                <MoviePoster item={item} key={item.Id} />
+                <Text numberOfLines={2} className="mt-2">
+                  {item.Name}
+                </Text>
+              </TouchableItemRouter>
            )}
          />
          <SearchItemWrapper
            ids={actors?.map((m) => m.Id!)}
            header="Actors"
-            renderItem={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28"
-                  >
-                    <MoviePoster item={item} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+              >
+                <MoviePoster item={item} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
            )}
          />
          <SearchItemWrapper
            ids={artists?.map((m) => m.Id!)}
            header="Artists"
-            renderItem={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <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={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28"
-                  >
-                    <AlbumCover id={item.Id} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <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={(data) => (
-              <HorizontalScroll
-                data={data}
-                renderItem={(item) => (
-                  <TouchableItemRouter
-                    item={item}
-                    key={item.Id}
-                    className="flex flex-col w-28"
-                  >
-                    <AlbumCover id={item.AlbumId} />
-                    <ItemCardText item={item} />
-                  </TouchableItemRouter>
-                )}
-              />
+            renderItem={(item) => (
+              <TouchableItemRouter
+                item={item}
+                key={item.Id}
+                className="flex flex-col w-28 mr-2"
+              >
+                <AlbumCover id={item.AlbumId} />
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
            )}
          />
          {loading ? (
@@ -445,7 +410,7 @@ export default function search() {

 type Props = {
  ids?: string[] | null;
-  renderItem: (data: BaseItemDto[]) => React.ReactNode;
+  renderItem: (item: BaseItemDto) => React.ReactNode;
  header?: string;
 };

@@ -483,8 +448,14 @@ const SearchItemWrapper: React.FC<Props> = ({ ids, renderItem, header }) => {

  return (
    <>
-      <Text className="font-bold text-2xl px-4 my-2">{header}</Text>
-      {renderItem(data)}
+      <Text className="font-bold text-lg px-4 mb-2">{header}</Text>
+      <ScrollView
+        horizontal
+        className="px-4 mb-2"
+        showsHorizontalScrollIndicator={false}
+      >
+        {data.map((item) => renderItem(item))}
+      </ScrollView>
    </>
  );
 };
--- a/app/(auth)/(tabs)/_layout.tsx
+++ b/app/(auth)/(tabs)/_layout.tsx
@@ -1,87 +1,77 @@
-import { TabBarIcon } from "@/components/navigation/TabBarIcon";
+import React from "react";
+import { Platform } from "react-native";
+
+import { withLayoutContext } from "expo-router";
+
+import {
+  createNativeBottomTabNavigator,
+  NativeBottomTabNavigationEventMap,
+} from "react-native-bottom-tabs/react-navigation";
+
+const { Navigator } = createNativeBottomTabNavigator();
+
+import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
+
 import { Colors } from "@/constants/Colors";
-import { BlurView } from "expo-blur";
-import * as NavigationBar from "expo-navigation-bar";
-import { Tabs } from "expo-router";
-import React, { useEffect } from "react";
-import { Platform, StyleSheet } from "react-native";
+import type {
+  ParamListBase,
+  TabNavigationState,
+} from "@react-navigation/native";
+import { SystemBars } from "react-native-edge-to-edge";
+
+export const NativeTabs = withLayoutContext<
+  BottomTabNavigationOptions,
+  typeof Navigator,
+  TabNavigationState<ParamListBase>,
+  NativeBottomTabNavigationEventMap
+>(Navigator);

 export default function TabLayout() {
-  useEffect(() => {
-    if (Platform.OS === "android") {
-      NavigationBar.setBackgroundColorAsync("#121212");
-      NavigationBar.setBorderColorAsync("#121212");
-    }
-  }, []);
-
  return (
-    <Tabs
-      initialRouteName="home"
-      screenOptions={{
-        tabBarActiveTintColor: Colors.tabIconSelected,
-        headerShown: false,
-        tabBarStyle: {
-          position: "absolute",
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-          borderTopWidth: 0,
-          paddingTop: 8,
-          paddingBottom: Platform.OS === "android" ? 8 : 26,
-          height: Platform.OS === "android" ? 58 : 74,
-        },
-        tabBarBackground: () =>
-          Platform.OS === "ios" ? (
-            <BlurView
-              experimentalBlurMethod="dimezisBlurView"
-              intensity={95}
-              style={{
-                ...StyleSheet.absoluteFillObject,
-                overflow: "hidden",
-                borderTopLeftRadius: 0,
-                borderTopRightRadius: 0,
-                backgroundColor: "black",
-              }}
-            />
-          ) : undefined,
-      }}
-    >
-      <Tabs.Screen redirect name="index" />
-      <Tabs.Screen
-        name="(home)"
-        options={{
-          headerShown: false,
-          title: "Home",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon
-              name={focused ? "home" : "home-outline"}
-              color={color}
-            />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="(search)"
-        options={{
-          headerShown: false,
-          title: "Search",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? "search" : "search"} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="(libraries)"
-        options={{
-          headerShown: false,
-          title: "Library",
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon
-              name={focused ? "apps" : "apps-outline"}
-              color={color}
-            />
-          ),
-        }}
-      />
-    </Tabs>
+    <>
+      <SystemBars hidden={false} style="light" />
+      <NativeTabs
+        sidebarAdaptable
+        ignoresTopSafeArea
+        barTintColor={Platform.OS === "android" ? "#121212" : undefined}
+        tabBarActiveTintColor={Colors.primary}
+        scrollEdgeAppearance="default"
+      >
+        <NativeTabs.Screen redirect name="index" />
+        <NativeTabs.Screen
+          name="(home)"
+          options={{
+            title: "Home",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/house.fill.png")
+                : () => ({ sfSymbol: "house" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name="(search)"
+          options={{
+            title: "Search",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/magnifyingglass.png")
+                : () => ({ sfSymbol: "magnifyingglass" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name="(libraries)"
+          options={{
+            title: "Library",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/server.rack.png")
+                : () => ({ sfSymbol: "rectangle.stack" }),
+          }}
+        />
+      </NativeTabs>
+    </>
  );
 }
--- a/app/(auth)/play.tsx
+++ b/app/(auth)/play.tsx
@@ -1,48 +0,0 @@
-import { FullScreenVideoPlayer } from "@/components/FullScreenVideoPlayer";
-import { useSettings } from "@/utils/atoms/settings";
-import * as NavigationBar from "expo-navigation-bar";
-import { StatusBar } from "expo-status-bar";
-import { useEffect, useState } from "react";
-import { Platform, View, ViewProps } from "react-native";
-import * as ScreenOrientation from "expo-screen-orientation";
-
-interface Props extends ViewProps {}
-
-export default function page() {
-  const [settings] = useSettings();
-
-  useEffect(() => {
-    if (settings?.autoRotate) {
-      // Don't need to do anything
-    } else if (settings?.defaultVideoOrientation) {
-      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-    }
-
-    if (Platform.OS === "android") {
-      NavigationBar.setVisibilityAsync("hidden");
-      NavigationBar.setBehaviorAsync("overlay-swipe");
-    }
-
-    return () => {
-      if (settings?.autoRotate) {
-        ScreenOrientation.unlockAsync();
-      } else {
-        ScreenOrientation.lockAsync(
-          ScreenOrientation.OrientationLock.PORTRAIT_UP
-        );
-      }
-
-      if (Platform.OS === "android") {
-        NavigationBar.setVisibilityAsync("visible");
-        NavigationBar.setBehaviorAsync("inset-swipe");
-      }
-    };
-  }, [settings]);
-
-  return (
-    <View className="">
-      <StatusBar hidden />
-      <FullScreenVideoPlayer />
-    </View>
-  );
-}
--- a/app/(auth)/player/_layout.tsx
+++ b/app/(auth)/player/_layout.tsx
@@ -0,0 +1,40 @@
+import { Stack } from "expo-router";
+import React from "react";
+import { SystemBars } from "react-native-edge-to-edge";
+
+export default function Layout() {
+  return (
+    <>
+      <SystemBars hidden />
+      <Stack>
+        <Stack.Screen
+          name="direct-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            animation: "fade",
+          }}
+        />
+        <Stack.Screen
+          name="transcoding-player"
+          options={{
+            headerShown: false,
+            autoHideHomeIndicator: true,
+            title: "",
+            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
@@ -0,0 +1,525 @@
+import { BITRATES } from "@/components/BitrateSelector";
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { Controls } from "@/components/video-player/controls/Controls";
+import { getDownloadedFileUrl } from "@/hooks/useDownloadedFileOpener";
+import { useOrientation } from "@/hooks/useOrientation";
+import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { VlcPlayerView } from "@/modules/vlc-player";
+import {
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { writeToLog } from "@/utils/log";
+import native from "@/utils/profiles/native";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
+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 { useFocusEffect, useGlobalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { Alert, BackHandler, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+
+export default function page() {
+  const videoRef = useRef<VlcPlayerViewRef>(null);
+  const user = useAtomValue(userAtom);
+  const api = useAtomValue(apiAtom);
+
+  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 [isVideoLoaded, setIsVideoLoaded] = useState(false);
+
+  const progress = useSharedValue(0);
+  const isSeeking = useSharedValue(false);
+  const cacheProgress = useSharedValue(0);
+
+  const { getDownloadedItem } = useDownload();
+  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+
+  const setShowControls = useCallback((show: boolean) => {
+    _setShowControls(show);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+
+  const {
+    itemId,
+    audioIndex: audioIndexStr,
+    subtitleIndex: subtitleIndexStr,
+    mediaSourceId,
+    bitrateValue: bitrateValueStr,
+    offline: offlineStr,
+  } = useGlobalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+    offline: string;
+  }>();
+
+  const offline = offlineStr === "true";
+
+  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
+  const subtitleIndex = subtitleIndexStr ? parseInt(subtitleIndexStr, 10) : -1;
+  const bitrateValue = bitrateValueStr
+    ? parseInt(bitrateValueStr, 10)
+    : BITRATES[0].value;
+
+  const {
+    data: item,
+    isLoading: isLoadingItem,
+    isError: isErrorItem,
+  } = useQuery({
+    queryKey: ["item", itemId],
+    queryFn: async () => {
+      console.log("Offline:", offline);
+      if (offline) {
+        const item = await getDownloadedItem(itemId);
+        if (item) return item.item;
+      }
+
+      const res = await getUserLibraryApi(api!).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    enabled: !!itemId,
+    staleTime: 0,
+  });
+
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: [
+      "stream-url",
+      itemId,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      bitrateValue,
+    ],
+    queryFn: async () => {
+      console.log("Offline:", offline);
+      if (offline) {
+        const data = await getDownloadedItem(itemId);
+        if (!data?.mediaSource) return null;
+
+        const url = await getDownloadedFileUrl(data.item.Id!);
+
+        if (item)
+          return {
+            mediaSource: data.mediaSource,
+            url,
+            sessionId: undefined,
+          };
+      }
+
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: native,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) {
+        Alert.alert("Error", "Failed to get stream url");
+        return null;
+      }
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!itemId && !!item,
+    staleTime: 0,
+  });
+
+  const togglePlay = useCallback(
+    async (ms: number) => {
+      if (!api) return;
+
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      if (isPlaying) {
+        await videoRef.current?.pause();
+
+        if (!offline && stream) {
+          await getPlaystateApi(api).onPlaybackProgress({
+            itemId: item?.Id!,
+            audioStreamIndex: audioIndex ? audioIndex : undefined,
+            subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+            mediaSourceId: mediaSourceId,
+            positionTicks: msToTicks(ms),
+            isPaused: true,
+            playMethod: stream.url?.includes("m3u8")
+              ? "Transcode"
+              : "DirectStream",
+            playSessionId: stream.sessionId,
+          });
+        }
+
+        console.log("Actually marked as paused");
+      } else {
+        videoRef.current?.play();
+        if (!offline && stream) {
+          await getPlaystateApi(api).onPlaybackProgress({
+            itemId: item?.Id!,
+            audioStreamIndex: audioIndex ? audioIndex : undefined,
+            subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+            mediaSourceId: mediaSourceId,
+            positionTicks: msToTicks(ms),
+            isPaused: false,
+            playMethod: stream?.url.includes("m3u8")
+              ? "Transcode"
+              : "DirectStream",
+            playSessionId: stream.sessionId,
+          });
+        }
+      }
+    },
+    [
+      isPlaying,
+      api,
+      item,
+      stream,
+      videoRef,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      offline,
+    ]
+  );
+
+  const play = useCallback(() => {
+    videoRef.current?.play();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const reportPlaybackStopped = useCallback(async () => {
+    if (offline) return;
+
+    const currentTimeInTicks = msToTicks(progress.value);
+
+    await getPlaystateApi(api!).onPlaybackStopped({
+      itemId: item?.Id!,
+      mediaSourceId: mediaSourceId,
+      positionTicks: currentTimeInTicks,
+      playSessionId: stream?.sessionId!,
+    });
+
+    revalidateProgressCache();
+  }, [api, item, mediaSourceId, stream]);
+
+  const stop = useCallback(() => {
+    reportPlaybackStopped();
+    setIsPlaybackStopped(true);
+    videoRef.current?.stop();
+  }, [videoRef, reportPlaybackStopped]);
+
+  const reportPlaybackStart = useCallback(async () => {
+    if (offline) return;
+
+    if (!stream) 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 ? stream?.sessionId : undefined,
+    });
+  }, [api, item, mediaSourceId, stream]);
+
+  const onProgress = useCallback(
+    async (data: ProgressUpdatePayload) => {
+      if (isSeeking.value === true) return;
+      if (isPlaybackStopped === true) return;
+
+      const { currentTime } = data.nativeEvent;
+
+      if (isBuffering) {
+        setIsBuffering(false);
+      }
+
+      progress.value = currentTime;
+
+      if (offline) return;
+
+      const currentTimeInTicks = msToTicks(currentTime);
+
+      if (!item?.Id || !stream) return;
+
+      await getPlaystateApi(api!).onPlaybackProgress({
+        itemId: item.Id,
+        audioStreamIndex: audioIndex ? audioIndex : undefined,
+        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+        mediaSourceId: mediaSourceId,
+        positionTicks: Math.floor(currentTimeInTicks),
+        isPaused: !isPlaying,
+        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+        playSessionId: stream.sessionId,
+      });
+    },
+    [item?.Id, isPlaying, api, isPlaybackStopped]
+  );
+
+  useOrientation();
+  useOrientationSettings();
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    pauseVideo: pause,
+    playVideo: play,
+    stopPlayback: stop,
+    offline,
+  });
+
+  const onPlaybackStateChanged = useCallback((e: PlaybackStatePayload) => {
+    const { state, isBuffering, isPlaying } = e.nativeEvent;
+
+    if (state === "Playing") {
+      setIsPlaying(true);
+      return;
+    }
+
+    if (state === "Paused") {
+      setIsPlaying(false);
+      return;
+    }
+
+    if (isPlaying) {
+      setIsPlaying(true);
+      setIsBuffering(false);
+    } else if (isBuffering) {
+      setIsBuffering(true);
+    }
+  }, []);
+
+  const startPosition = useMemo(() => {
+    if (offline) return 0;
+
+    return item?.UserData?.PlaybackPositionTicks
+      ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
+      : 0;
+  }, [item]);
+
+  const backAction = () => {
+    videoRef.current?.stop();
+    return false;
+  };
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        return backAction();
+      };
+
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
+
+      return async () => {
+        videoRef.current?.stop();
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+      };
+    }, [])
+  );
+
+  // Preselection of audio and subtitle tracks.
+
+  let initOptions = ["--sub-text-scale=60"];
+  let externalTrack = { name: "", DeliveryUrl: "" };
+
+  const allSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle"
+    ) || [];
+  const chosenSubtitleTrack = allSubs.find(
+    (sub) => sub.Index === subtitleIndex
+  );
+  const allAudio =
+    stream?.mediaSource.MediaStreams?.filter(
+      (audio) => audio.Type === "Audio"
+    ) || [];
+  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
+
+  // Direct playback CASE
+  if (!bitrateValue) {
+    // If Subtitle is embedded we can use the position to select it straight away.
+    if (chosenSubtitleTrack && !chosenSubtitleTrack.DeliveryUrl) {
+      initOptions.push(`--sub-track=${allSubs.indexOf(chosenSubtitleTrack)}`);
+    } else if (chosenSubtitleTrack && chosenSubtitleTrack.DeliveryUrl) {
+      // If Subtitle is external we need to pass the URL to the player.
+      externalTrack = {
+        name: chosenSubtitleTrack.DisplayTitle || "",
+        DeliveryUrl: `${api?.basePath || ""}${chosenSubtitleTrack.DeliveryUrl}`,
+      };
+    }
+
+    if (chosenAudioTrack)
+      initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
+  } else {
+    // Transcoded playback CASE
+    if (chosenSubtitleTrack?.DeliveryMethod === "Hls") {
+      externalTrack = {
+        name: `subs ${chosenSubtitleTrack.DisplayTitle}`,
+        DeliveryUrl: "",
+      };
+    }
+  }
+
+  if (!item || isLoadingItem || isLoadingStreamUrl || !stream)
+    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>
+    );
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "black" }}>
+      <View
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
+          opacity: showControls ? 0.5 : 1,
+        }}
+      >
+        <VlcPlayerView
+          ref={videoRef}
+          source={{
+            uri: stream.url,
+            autoplay: true,
+            isNetwork: true,
+            startPosition,
+            externalTrack,
+            initOptions,
+          }}
+          style={{ width: "100%", height: "100%" }}
+          onVideoProgress={onProgress}
+          progressUpdateInterval={1000}
+          onVideoStateChange={onPlaybackStateChanged}
+          onVideoLoadStart={() => {}}
+          onVideoLoadEnd={() => {
+            setIsVideoLoaded(true);
+          }}
+          onVideoError={(e) => {
+            console.error("Video Error:", e.nativeEvent);
+            Alert.alert(
+              "Error",
+              "An error occurred while playing the video. Check logs in settings."
+            );
+            writeToLog("ERROR", "Video Error", e.nativeEvent);
+          }}
+        />
+
+        <View
+          style={{
+            position: "absolute",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: isBuffering ? 1 : 0,
+            width: "100%",
+            height: "100%",
+          }}
+          pointerEvents="none"
+        >
+          <Loader />
+        </View>
+      </View>
+      {videoRef.current && (
+        <Controls
+          mediaSource={stream?.mediaSource}
+          item={item}
+          videoRef={videoRef}
+          togglePlay={togglePlay}
+          isPlaying={isPlaying}
+          isSeeking={isSeeking}
+          progress={progress}
+          cacheProgress={cacheProgress}
+          isBuffering={isBuffering}
+          showControls={showControls}
+          setShowControls={setShowControls}
+          setIgnoreSafeAreas={setIgnoreSafeAreas}
+          ignoreSafeAreas={ignoreSafeAreas}
+          isVideoLoaded={isVideoLoaded}
+          play={videoRef.current?.play}
+          pause={videoRef.current?.pause}
+          seek={videoRef.current?.seekTo}
+          enableTrickplay={true}
+          getAudioTracks={videoRef.current?.getAudioTracks}
+          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          offline={false}
+          setSubtitleTrack={videoRef.current.setSubtitleTrack}
+          setSubtitleURL={videoRef.current.setSubtitleURL}
+          setAudioTrack={videoRef.current.setAudioTrack}
+          stop={stop}
+          isVlc
+        />
+      )}
+    </View>
+  );
+}
+
+export function usePoster(
+  item: BaseItemDto,
+  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;
+}
--- a/app/(auth)/player/music-player.tsx
+++ b/app/(auth)/player/music-player.tsx
@@ -0,0 +1,420 @@
+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(() => {
+    console.log("play");
+    videoRef.current?.resume();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    console.log("play");
+    videoRef.current?.pause();
+  }, [videoRef]);
+
+  const stop = useCallback(() => {
+    console.log("stop");
+    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
@@ -0,0 +1,590 @@
+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 { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { TrackInfo } from "@/modules/vlc-player";
+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 transcoding from "@/utils/profiles/transcoding";
+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 { useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useAtomValue } from "jotai";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { BackHandler, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import Video, {
+  OnProgressData,
+  SelectedTrack,
+  SelectedTrackType,
+  VideoRef,
+} from "react-native-video";
+
+const Player = () => {
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);
+  const [settings] = useSettings();
+  const videoRef = useRef<VideoRef | null>(null);
+
+  const firstTime = useRef(true);
+  const revalidateProgressCache = useInvalidatePlaybackProgressCache();
+
+  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 setShowControls = useCallback((show: boolean) => {
+    _setShowControls(show);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+
+  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) {
+        throw new Error("No api");
+      }
+
+      if (!itemId) {
+        console.warn("No itemId");
+        return null;
+      }
+
+      const res = await getUserLibraryApi(api).getItem({
+        itemId,
+        userId: user?.Id,
+      });
+
+      return res.data;
+    },
+    staleTime: 0,
+  });
+
+  const {
+    data: stream,
+    isLoading: isLoadingStreamUrl,
+    isError: isErrorStreamUrl,
+  } = useQuery({
+    queryKey: [
+      "stream-url",
+      itemId,
+      audioIndex,
+      subtitleIndex,
+      bitrateValue,
+      mediaSourceId,
+    ],
+
+    queryFn: async () => {
+      if (!api) {
+        throw new Error("No api");
+      }
+
+      if (!item) {
+        console.warn("No item", itemId, item);
+        return null;
+      }
+
+      const res = await getStreamUrl({
+        api,
+        item,
+        startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+        userId: user?.Id,
+        audioStreamIndex: audioIndex,
+        maxStreamingBitrate: bitrateValue,
+        mediaSourceId: mediaSourceId,
+        subtitleStreamIndex: subtitleIndex,
+        deviceProfile: transcoding,
+      });
+
+      if (!res) return null;
+
+      const { mediaSource, sessionId, url } = res;
+
+      if (!sessionId || !mediaSource || !url) {
+        console.warn("No sessionId or mediaSource or url", url);
+        return null;
+      }
+
+      return {
+        mediaSource,
+        sessionId,
+        url,
+      };
+    },
+    enabled: !!item,
+    staleTime: 0,
+  });
+
+  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,
+      stream,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+    ]
+  );
+
+  const play = useCallback(() => {
+    videoRef.current?.resume();
+    reportPlaybackStart();
+  }, [videoRef]);
+
+  const pause = useCallback(() => {
+    videoRef.current?.pause();
+  }, [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,
+    });
+    revalidateProgressCache();
+  };
+
+  const stop = useCallback(() => {
+    reportPlaybackStopped();
+    videoRef.current?.pause();
+    setIsPlaybackStopped(true);
+  }, [videoRef, reportPlaybackStopped]);
+
+  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 = secondsToTicks(data.currentTime);
+
+      progress.value = ticks;
+      cacheProgress.value = secondsToTicks(data.playableDuration);
+
+      // TODO: Use this when streaming with HLS url, but NOT when direct playing
+      // TODO: since playable duration is always 0 then.
+      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,
+      isSeeking,
+      stream,
+      mediaSourceId,
+      audioIndex,
+      subtitleIndex,
+    ]
+  );
+
+  useOrientation();
+  useOrientationSettings();
+
+  useWebSocket({
+    isPlaying: isPlaying,
+    pauseVideo: pause,
+    playVideo: play,
+    stopPlayback: stop,
+  });
+
+  const [selectedTextTrack, setSelectedTextTrack] = useState<
+    SelectedTrack | undefined
+  >();
+
+  const [embededTextTracks, setEmbededTextTracks] = useState<
+    {
+      index: number;
+      language?: string | undefined;
+      selected?: boolean | undefined;
+      title?: string | undefined;
+      type: any;
+    }[]
+  >([]);
+
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[]>([]);
+  const [selectedAudioTrack, setSelectedAudioTrack] = useState<
+    SelectedTrack | undefined
+  >(undefined);
+
+  // Set intial Subtitle Track.
+  // We will only select external tracks if they are are text based. Else it should be burned in already.
+  const textSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle" && sub.IsTextSubtitleStream
+    ) || [];
+
+  const uniqueTextSubs = Array.from(
+    new Set(textSubs.map((sub) => sub.DisplayTitle))
+  ).map((title) => textSubs.find((sub) => sub.DisplayTitle === title));
+  const chosenSubtitleTrack = textSubs.find(
+    (sub) => sub.Index === subtitleIndex
+  );
+  useEffect(() => {
+    if (chosenSubtitleTrack && selectedTextTrack === undefined) {
+      console.log("Setting selected text track", chosenSubtitleTrack);
+      setSelectedTextTrack({
+        type: SelectedTrackType.INDEX,
+        value: uniqueTextSubs.indexOf(chosenSubtitleTrack),
+      });
+    }
+  }, [embededTextTracks]);
+
+  const getAudioTracks = (): TrackInfo[] => {
+    return audioTracks.map((t) => ({
+      name: t.name,
+      index: t.index,
+    }));
+  };
+
+  const getSubtitleTracks = (): TrackInfo[] => {
+    return embededTextTracks.map((t) => ({
+      name: t.title ?? "",
+      index: t.index,
+      language: t.language,
+    }));
+  };
+
+  const backAction = () => {
+    videoRef.current?.pause();
+    return false;
+  };
+
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        return backAction();
+      };
+
+      BackHandler.addEventListener("hardwareBackPress", onBackPress);
+      play();
+
+      return async () => {
+        videoRef.current?.pause();
+        BackHandler.removeEventListener("hardwareBackPress", onBackPress);
+      };
+    }, [])
+  );
+
+  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>
+    );
+
+  return (
+    <View style={{ flex: 1, backgroundColor: "black" }}>
+      <View
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
+          opacity: showControls ? 0.5 : 1,
+        }}
+      >
+        {videoSource ? (
+          <>
+            <Video
+              ref={videoRef}
+              source={videoSource}
+              style={{
+                height: "100%",
+                width: "100%",
+              }}
+              resizeMode={ignoreSafeAreas ? "cover" : "contain"}
+              onProgress={onProgress}
+              onError={(e) => {
+                console.error("Error playing video", e);
+              }}
+              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) => {
+                if (isSeeking.value === false) setIsPlaying(state.isPlaying);
+              }}
+              onTextTracks={(data) => {
+                setEmbededTextTracks(data.textTracks as any);
+              }}
+              onBuffer={(e) => {
+                setIsBuffering(e.isBuffering);
+              }}
+              onAudioTracks={(e) => {
+                console.log("onAudioTracks: ", e.audioTracks);
+                setAudioTracks(
+                  e.audioTracks.map((t) => ({
+                    index: t.index,
+                    name: t.title ?? "",
+                    language: t.language,
+                  }))
+                );
+              }}
+              selectedTextTrack={selectedTextTrack}
+              selectedAudioTrack={selectedAudioTrack}
+            />
+            <View
+              style={{
+                position: "absolute",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                opacity: isBuffering ? 1 : 0,
+                width: "100%",
+                height: "100%",
+              }}
+              pointerEvents="none"
+            >
+              <Loader />
+            </View>
+          </>
+        ) : (
+          <Text>No video source...</Text>
+        )}
+      </View>
+
+      {item && (
+        <Controls
+          mediaSource={stream?.mediaSource}
+          videoRef={videoRef}
+          enableTrickplay={true}
+          item={item}
+          togglePlay={togglePlay}
+          isPlaying={isPlaying}
+          isSeeking={isSeeking}
+          progress={progress}
+          cacheProgress={cacheProgress}
+          isBuffering={isBuffering}
+          showControls={showControls}
+          setShowControls={setShowControls}
+          setIgnoreSafeAreas={setIgnoreSafeAreas}
+          ignoreSafeAreas={ignoreSafeAreas}
+          seek={seek}
+          play={play}
+          pause={pause}
+          stop={stop}
+          getSubtitleTracks={getSubtitleTracks}
+          setSubtitleTrack={(i) => {
+            if (i === -1) {
+              setSelectedTextTrack({
+                type: SelectedTrackType.DISABLED,
+                value: undefined,
+              });
+              return;
+            }
+            setSelectedTextTrack({
+              type: SelectedTrackType.INDEX,
+              value: i,
+            });
+          }}
+          getAudioTracks={getAudioTracks}
+          setAudioTrack={(i) => {
+            console.log("setAudioTrack ~", i);
+            setSelectedAudioTrack({
+              type: SelectedTrackType.INDEX,
+              value: i,
+            });
+          }}
+        />
+      )}
+    </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, url]);
+
+  return videoSource;
+}
+
+export default Player;
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,28 +1,211 @@
-import { FullScreenVideoPlayer } from "@/components/FullScreenVideoPlayer";
-import { JellyfinProvider } from "@/providers/JellyfinProvider";
+import { DownloadProvider } from "@/providers/DownloadProvider";
+import {
+  getOrSetDeviceId,
+  getTokenFromStorage,
+  JellyfinProvider,
+} from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
-import { PlaybackProvider } from "@/providers/PlaybackProvider";
-import { useSettings } from "@/utils/atoms/settings";
+import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
+import { orientationAtom } from "@/utils/atoms/orientation";
+import { Settings, useSettings } from "@/utils/atoms/settings";
+import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
+import { writeToLog } from "@/utils/log";
+import { storage } from "@/utils/mmkv";
+import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  checkForExistingDownloads,
+  completeHandler,
+  download,
+} from "@kesha-antonov/react-native-background-downloader";
 import { DarkTheme, ThemeProvider } from "@react-navigation/native";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as BackgroundFetch from "expo-background-fetch";
+import * as FileSystem from "expo-file-system";
 import { useFonts } from "expo-font";
 import { useKeepAwake } from "expo-keep-awake";
-import { Stack, useRouter } from "expo-router";
+import * as Linking from "expo-linking";
+import * as Notifications from "expo-notifications";
+import { router, Stack } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
-import { StatusBar } from "expo-status-bar";
+import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
+import { Appearance, AppState } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
-import * as Linking from "expo-linking";
-import { orientationAtom } from "@/utils/atoms/orientation";
 import { Toaster } from "sonner-native";

 SplashScreen.preventAutoHideAsync();

+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: false,
+  }),
+});
+
+function useNotificationObserver() {
+  useEffect(() => {
+    let isMounted = true;
+
+    function redirect(notification: Notifications.Notification) {
+      const url = notification.request.content.data?.url;
+      if (url) {
+        router.push(url);
+      }
+    }
+
+    Notifications.getLastNotificationResponseAsync().then((response) => {
+      if (!isMounted || !response?.notification) {
+        return;
+      }
+      redirect(response?.notification);
+    });
+
+    const subscription = Notifications.addNotificationResponseReceivedListener(
+      (response) => {
+        redirect(response.notification);
+      }
+    );
+
+    return () => {
+      isMounted = false;
+      subscription.remove();
+    };
+  }, []);
+}
+
+TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
+  console.log("TaskManager ~ trigger");
+
+  const now = Date.now();
+
+  const settingsData = storage.getString("settings");
+
+  if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
+
+  const settings: Partial<Settings> = JSON.parse(settingsData);
+  const url = settings?.optimizedVersionsServerUrl;
+
+  if (!settings?.autoDownload || !url)
+    return BackgroundFetch.BackgroundFetchResult.NoData;
+
+  const token = getTokenFromStorage();
+  const deviceId = getOrSetDeviceId();
+  const baseDirectory = FileSystem.documentDirectory;
+
+  if (!token || !deviceId || !baseDirectory)
+    return BackgroundFetch.BackgroundFetchResult.NoData;
+
+  const jobs = await getAllJobsByDeviceId({
+    deviceId,
+    authHeader: token,
+    url,
+  });
+
+  console.log("TaskManager ~ Active jobs: ", jobs.length);
+
+  for (let job of jobs) {
+    if (job.status === "completed") {
+      const downloadUrl = url + "download/" + job.id;
+      const tasks = await checkForExistingDownloads();
+
+      if (tasks.find((task) => task.id === job.id)) {
+        console.log("TaskManager ~ Download already in progress: ", job.id);
+        continue;
+      }
+
+      download({
+        id: job.id,
+        url: downloadUrl,
+        destination: `${baseDirectory}${job.item.Id}.mp4`,
+        headers: {
+          Authorization: token,
+        },
+      })
+        .begin(() => {
+          console.log("TaskManager ~ Download started: ", job.id);
+        })
+        .done(() => {
+          console.log("TaskManager ~ Download completed: ", job.id);
+          saveDownloadedItemInfo(job.item);
+          completeHandler(job.id);
+          cancelJobById({
+            authHeader: token,
+            id: job.id,
+            url: url,
+          });
+          Notifications.scheduleNotificationAsync({
+            content: {
+              title: job.item.Name,
+              body: "Download completed",
+              data: {
+                url: `/downloads`,
+              },
+            },
+            trigger: null,
+          });
+        })
+        .error((error) => {
+          console.log("TaskManager ~ Download error: ", job.id, error);
+          completeHandler(job.id);
+          Notifications.scheduleNotificationAsync({
+            content: {
+              title: job.item.Name,
+              body: "Download failed",
+              data: {
+                url: `/downloads`,
+              },
+            },
+            trigger: null,
+          });
+        });
+    }
+  }
+
+  console.log(`Auto download started: ${new Date(now).toISOString()}`);
+
+  // Be sure to return the successful result type!
+  return BackgroundFetch.BackgroundFetchResult.NewData;
+});
+
+const checkAndRequestPermissions = async () => {
+  try {
+    const hasAskedBefore = storage.getString(
+      "hasAskedForNotificationPermission"
+    );
+
+    if (hasAskedBefore !== "true") {
+      const { status } = await Notifications.requestPermissionsAsync();
+
+      if (status === "granted") {
+        writeToLog("INFO", "Notification permissions granted.");
+        console.log("Notification permissions granted.");
+      } else {
+        writeToLog("ERROR", "Notification permissions denied.");
+        console.log("Notification permissions denied.");
+      }
+
+      storage.set("hasAskedForNotificationPermission", "true");
+    } else {
+      console.log("Already asked for notification permissions before.");
+    }
+  } catch (error) {
+    writeToLog(
+      "ERROR",
+      "Error checking/requesting notification permissions:",
+      error
+    );
+    console.error("Error checking/requesting notification permissions:", error);
+  }
+};
+
 export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -34,6 +217,8 @@ export default function RootLayout() {
    }
  }, [loaded]);

+  Appearance.setColorScheme("dark");
+
  if (!loaded) {
    return null;
  }
@@ -45,25 +230,28 @@ export default function RootLayout() {
  );
 }

+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 0,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
+      retryOnMount: true,
+    },
+  },
+});
+
 function Layout() {
  const [settings, updateSettings] = useSettings();
  const [orientation, setOrientation] = useAtom(orientationAtom);

  useKeepAwake();
+  useNotificationObserver();

-  const queryClientRef = useRef<QueryClient>(
-    new QueryClient({
-      defaultOptions: {
-        queries: {
-          staleTime: 60 * 1000,
-          refetchOnMount: true,
-          refetchOnReconnect: true,
-          refetchOnWindowFocus: true,
-          retryOnMount: true,
-        },
-      },
-    })
-  );
+  useEffect(() => {
+    checkAndRequestPermissions();
+  }, []);

  useEffect(() => {
    if (settings?.autoRotate === true)
@@ -74,10 +262,28 @@ function Layout() {
      );
  }, [settings]);

+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (nextAppState) => {
+      if (
+        appState.current.match(/inactive|background/) &&
+        nextAppState === "active"
+      ) {
+        checkForExistingDownloads();
+      }
+    });
+
+    checkForExistingDownloads();
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
  useEffect(() => {
    const subscription = ScreenOrientation.addOrientationChangeListener(
      (event) => {
-        console.log(event.orientationInfo.orientation);
        setOrientation(event.orientationInfo.orientation);
      }
    );
@@ -99,58 +305,81 @@ function Layout() {

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
-      <QueryClientProvider client={queryClientRef.current}>
-        <JobQueueProvider>
-          <ActionSheetProvider>
-            <BottomSheetModalProvider>
-              <JellyfinProvider>
-                <PlaybackProvider>
-                  <StatusBar style="light" backgroundColor="#000" />
-                  <ThemeProvider value={DarkTheme}>
-                    <Stack
-                      initialRouteName="/home"
-                      screenOptions={{
-                        autoHideHomeIndicator: true,
-                      }}
-                    >
-                      <Stack.Screen
-                        name="(auth)/(tabs)"
-                        options={{
-                          headerShown: false,
-                          title: "",
+      <QueryClientProvider client={queryClient}>
+        <ActionSheetProvider>
+          <JobQueueProvider>
+            <JellyfinProvider>
+              <PlaySettingsProvider>
+                <DownloadProvider>
+                  <BottomSheetModalProvider>
+                    <SystemBars style="light" hidden={false} />
+                    <ThemeProvider value={DarkTheme}>
+                      <Stack initialRouteName="/home">
+                        <Stack.Screen
+                          name="(auth)/(tabs)"
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
+                          }}
+                        />
+                        <Stack.Screen
+                          name="(auth)/player"
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
+                          }}
+                        />
+                        <Stack.Screen
+                          name="login"
+                          options={{ headerShown: false, title: "Login" }}
+                        />
+                        <Stack.Screen name="+not-found" />
+                      </Stack>
+                      <Toaster
+                        duration={4000}
+                        toastOptions={{
+                          style: {
+                            backgroundColor: "#262626",
+                            borderColor: "#363639",
+                            borderWidth: 1,
+                          },
+                          titleStyle: {
+                            color: "white",
+                          },
                        }}
+                        closeButton
                      />
-                      <Stack.Screen
-                        name="(auth)/play"
-                        options={{ headerShown: false, title: "" }}
-                      />
-                      <Stack.Screen
-                        name="login"
-                        options={{ headerShown: false, title: "Login" }}
-                      />
-                      <Stack.Screen name="+not-found" />
-                    </Stack>
-                    {/* <FullScreenVideoPlayer /> */}
-                    <Toaster
-                      duration={2000}
-                      toastOptions={{
-                        style: {
-                          backgroundColor: "#262626",
-                          borderColor: "#363639",
-                          borderWidth: 1,
-                        },
-                        titleStyle: {
-                          color: "white",
-                        },
-                      }}
-                    />
-                  </ThemeProvider>
-                </PlaybackProvider>
-              </JellyfinProvider>
-            </BottomSheetModalProvider>
-          </ActionSheetProvider>
-        </JobQueueProvider>
+                    </ThemeProvider>
+                  </BottomSheetModalProvider>
+                </DownloadProvider>
+              </PlaySettingsProvider>
+            </JellyfinProvider>
+          </JobQueueProvider>
+        </ActionSheetProvider>
      </QueryClientProvider>
    </GestureHandlerRootView>
  );
 }
+
+function saveDownloadedItemInfo(item: BaseItemDto) {
+  try {
+    const downloadedItems = storage.getString("downloadedItems");
+    let items: BaseItemDto[] = downloadedItems
+      ? JSON.parse(downloadedItems)
+      : [];
+
+    const existingItemIndex = items.findIndex((i) => i.Id === item.Id);
+    if (existingItemIndex !== -1) {
+      items[existingItemIndex] = item;
+    } else {
+      items.push(item);
+    }
+
+    storage.set("downloadedItems", JSON.stringify(items));
+  } catch (error) {
+    writeToLog("ERROR", "Failed to save downloaded item information:", error);
+    console.error("Failed to save downloaded item information:", error);
+  }
+}
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -5,6 +5,7 @@ import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 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 } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useState } from "react";
@@ -127,7 +128,7 @@ const Login: React.FC = () => {
        } catch (e) {
          const error = e as Error;
          if (error.name === "AbortError") {
-            console.log(`Request to ${protocol}${url} timed out`);
+            console.error(`Request to ${protocol}${url} timed out`);
          } else {
            console.error(`Error checking ${protocol}${url}:`, error);
          }
@@ -195,16 +196,18 @@ const Login: React.FC = () => {
          behavior={Platform.OS === "ios" ? "padding" : "height"}
          style={{ flex: 1, height: "100%" }}
        >
-          <View className="flex flex-col justify-between px-4 h-full gap-y-2">
-            <View></View>
-            <View>
+          <View className="flex flex-col w-full h-full relative items-center justify-center">
+            <View className="px-4 -mt-20">
              <View className="mb-4">
                <Text className="text-3xl font-bold mb-1">
                  {serverName || "Streamyfin"}
                </Text>
-                <Text className="text-neutral-500 mb-2">
-                  Server: {api.basePath}
-                </Text>
+                <View className="bg-neutral-900 rounded-xl p-4 mb-2 flex flex-row items-center justify-between">
+                  <Text className="">URL</Text>
+                  <Text numberOfLines={1} className="shrink">
+                    {api.basePath}
+                  </Text>
+                </View>
                <Button
                  color="black"
                  onPress={() => {
@@ -261,11 +264,11 @@ const Login: React.FC = () => {
              <Text className="text-red-600 mb-2">{error}</Text>
            </View>

-            <View className="mt-auto mb-2">
+            <View className="absolute bottom-0 left-0 w-full px-4 mb-2">
              <Button
                color="black"
                onPress={handleQuickConnect}
-                className="mb-2"
+                className="w-full mb-2"
              >
                Use Quick Connect
              </Button>
@@ -283,11 +286,19 @@ const Login: React.FC = () => {
    <SafeAreaView style={{ flex: 1 }}>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
+        style={{ flex: 1, height: "100%" }}
      >
-        <View className="flex flex-col px-4 justify-between h-full">
-          <View></View>
-          <View className="flex flex-col gap-y-2">
+        <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">
              Connect to your Jellyfin server
@@ -303,14 +314,16 @@ const Login: React.FC = () => {
              maxLength={500}
            />
          </View>
-          <Button
-            loading={loadingServerCheck}
-            disabled={loadingServerCheck}
-            onPress={async () => await handleConnect(serverURL)}
-            className="mb-2"
-          >
-            Connect
-          </Button>
+          <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/house.fill.png
+++ b/assets/icons/house.fill.png
--- a/assets/icons/magnifyingglass.png
+++ b/assets/icons/magnifyingglass.png
--- a/assets/icons/server.rack.png
+++ b/assets/icons/server.rack.png
--- a/assets/images/StreamyFinFinal.png
+++ b/assets/images/StreamyFinFinal.png
--- a/assets/images/adaptive_icon.png
+++ b/assets/images/adaptive_icon.png
--- a/assets/images/icon.jpg
+++ b/assets/images/icon.jpg
--- a/assets/images/icon.png
+++ b/assets/images/icon.png
--- a/assets/images/icon_512x512.jpg
+++ b/assets/images/icon_512x512.jpg
--- a/assets/images/splash.jpg
+++ b/assets/images/splash.jpg
--- a/assets/images/splash.png
+++ b/assets/images/splash.png
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/AudioTrackSelector.tsx
+++ b/components/AudioTrackSelector.tsx
@@ -1,20 +1,13 @@
+import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { atom, useAtom } from "jotai";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
-import { tc } from "@/utils/textTools";
-import { useSettings } from "@/utils/atoms/settings";

 interface Props extends React.ComponentProps<typeof View> {
-  source: MediaSourceInfo;
+  source?: MediaSourceInfo;
  onChange: (value: number) => void;
-  selected: number;
+  selected?: number | undefined;
 }

 export const AudioTrackSelector: React.FC<Props> = ({
@@ -23,10 +16,8 @@ export const AudioTrackSelector: React.FC<Props> = ({
  selected,
  ...props
 }) => {
-  const [settings] = useSettings();
-
  const audioStreams = useMemo(
-    () => source.MediaStreams?.filter((x) => x.Type === "Audio"),
+    () => source?.MediaStreams?.filter((x) => x.Type === "Audio"),
    [source]
  );

@@ -35,23 +26,6 @@ export const AudioTrackSelector: React.FC<Props> = ({
    [audioStreams, selected]
  );

-  useEffect(() => {
-    const defaultAudioIndex = audioStreams?.find(
-      (x) => x.Language === settings?.defaultAudioLanguage
-    )?.Index;
-    if (defaultAudioIndex !== undefined && defaultAudioIndex !== null) {
-      onChange(defaultAudioIndex);
-      return;
-    }
-    const index = source.DefaultAudioStreamIndex;
-    if (index !== undefined && index !== null) {
-      onChange(index);
-      return;
-    }
-
-    onChange(0);
-  }, [audioStreams, settings]);
-
  return (
    <View
      className="flex shrink"
--- a/components/BitrateSelector.tsx
+++ b/components/BitrateSelector.tsx
@@ -6,10 +6,9 @@ import { useMemo } from "react";
 export type Bitrate = {
  key: string;
  value: number | undefined;
-  height?: number;
 };

-const BITRATES: Bitrate[] = [
+export const BITRATES: Bitrate[] = [
  {
    key: "Max",
    value: undefined,
@@ -27,24 +26,21 @@ const BITRATES: Bitrate[] = [
  {
    key: "2 Mb/s",
    value: 2000000,
-    height: 720,
  },
  {
    key: "500 Kb/s",
    value: 500000,
-    height: 480,
  },
  {
    key: "250 Kb/s",
    value: 250000,
-    height: 480,
  },
-];
+].sort((a, b) => (b.value || Infinity) - (a.value || Infinity));

 interface Props extends React.ComponentProps<typeof View> {
  onChange: (value: Bitrate) => void;
-  selected: Bitrate;
-  inverted?: boolean;
+  selected?: Bitrate | null;
+  inverted?: boolean | null;
 }

 export const BitrateSelector: React.FC<Props> = ({
@@ -77,7 +73,7 @@ export const BitrateSelector: React.FC<Props> = ({
            <Text className="opacity-50 mb-1 text-xs">Quality</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}>
-                {BITRATES.find((b) => b.value === selected.value)?.key}
+                {BITRATES.find((b) => b.value === selected?.value)?.key}
              </Text>
            </TouchableOpacity>
          </View>
--- a/components/Chromecast.tsx
+++ b/components/Chromecast.tsx
@@ -1,8 +1,9 @@
 import { Feather } from "@expo/vector-icons";
 import { BlurView } from "expo-blur";
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 import { Platform, TouchableOpacity, ViewProps } from "react-native";
 import GoogleCast, {
+  CastButton,
  CastContext,
  useCastDevice,
  useDevices,
@@ -39,18 +40,32 @@ export const Chromecast: React.FC<Props> = ({
    })();
  }, [client, devices, castDevice, sessionManager, discoveryManager]);

+  // Android requires the cast button to be present for startDiscovery to work
+  const AndroidCastButton = useCallback(
+    () =>
+      Platform.OS === "android" ? (
+        <CastButton tintColor="transparent" />
+      ) : (
+        <></>
+      ),
+    [Platform.OS]
+  );
+
  if (background === "transparent")
    return (
-      <TouchableOpacity
-        onPress={() => {
-          if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
-          else CastContext.showCastDialog();
-        }}
-        className="rounded-full h-10 w-10 flex items-center justify-center b"
-        {...props}
-      >
-        <Feather name="cast" size={22} color={"white"} />
-      </TouchableOpacity>
+      <>
+        <TouchableOpacity
+          onPress={() => {
+            if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
+            else CastContext.showCastDialog();
+          }}
+          className="rounded-full h-10 w-10 flex items-center justify-center b"
+          {...props}
+        >
+          <Feather name="cast" size={22} color={"white"} />
+        </TouchableOpacity>
+        <AndroidCastButton />
+      </>
    );

  if (Platform.OS === "android")
@@ -82,6 +97,7 @@ export const Chromecast: React.FC<Props> = ({
      >
        <Feather name="cast" size={22} color={"white"} />
      </BlurView>
+      <AndroidCastButton />
    </TouchableOpacity>
  );
 };
--- a/components/ContinueWatchingPoster.tsx
+++ b/components/ContinueWatchingPoster.tsx
@@ -1,23 +1,24 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
+import React from "react";

 type ContinueWatchingPosterProps = {
  item: BaseItemDto;
-  width?: number;
  useEpisodePoster?: boolean;
+  size?: "small" | "normal";
 };

 const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
  item,
-  width = 176,
  useEpisodePoster = false,
+  size = "normal",
 }) => {
-  const [api] = useAtom(apiAtom);
+  const api = useAtomValue(apiAtom);

  /**
   * Get horrizontal poster for movie and episode, with failover to primary.
@@ -39,28 +40,38 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
      else
        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
    }
+    if (item.Type === "Program") {
+      if (item.ImageTags?.["Thumb"])
+        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.["Thumb"]}`;
+      else
+        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    }
  }, [item]);

-  const [progress, setProgress] = useState(
-    item.UserData?.PlayedPercentage || 0
-  );
+  const progress = useMemo(() => {
+    if (item.Type === "Program") {
+      const startDate = new Date(item.StartDate || "");
+      const endDate = new Date(item.EndDate || "");
+      const now = new Date();
+      const total = endDate.getTime() - startDate.getTime();
+      const elapsed = now.getTime() - startDate.getTime();
+      return (elapsed / total) * 100;
+    } else {
+      return item.UserData?.PlayedPercentage || 0;
+    }
+  }, [item]);

  if (!url)
    return (
-      <View
-        className="aspect-video border border-neutral-800"
-        style={{
-          width,
-        }}
-      ></View>
+      <View className="aspect-video border border-neutral-800 w-44"></View>
    );

  return (
    <View
-      style={{
-        width,
-      }}
-      className="relative aspect-video rounded-lg overflow-hidden border border-neutral-800"
+      className={`
+      relative w-44 aspect-video rounded-lg overflow-hidden border border-neutral-800
+      ${size === "small" ? "w-32" : "w-44"}
+    `}
    >
      <Image
        key={item.Id}
@@ -76,10 +87,7 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
      {progress > 0 && (
        <>
          <View
-            style={{
-              width: `100%`,
-            }}
-            className={`absolute bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full`}
+            className={`absolute w-100 bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full`}
          ></View>
          <View
            style={{
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -1,11 +1,13 @@
 import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
+import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { runningProcesses } from "@/utils/atoms/downloads";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
 import { useSettings } from "@/utils/atoms/settings";
-import ios from "@/utils/profiles/ios";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
 import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
+import download from "@/utils/profiles/download";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import {
  BottomSheetBackdrop,
@@ -17,12 +19,11 @@ import {
  BaseItemDto,
  MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { useQuery } from "@tanstack/react-query";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Alert, TouchableOpacity, View, ViewProps } from "react-native";
+import { toast } from "sonner-native";
 import { AudioTrackSelector } from "./AudioTrackSelector";
 import { Bitrate, BitrateSelector } from "./BitrateSelector";
 import { Button } from "./Button";
@@ -39,13 +40,14 @@ interface DownloadProps extends ViewProps {
 export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
-  const [process] = useAtom(runningProcesses);
  const [queue, setQueue] = useAtom(queueAtom);
  const [settings] = useSettings();
-  const { startRemuxing } = useRemuxHlsToMp4(item);
+  const { processes, startBackgroundDownload } = useDownload();
+  const { startRemuxing } = useRemuxHlsToMp4();

-  const [selectedMediaSource, setSelectedMediaSource] =
-    useState<MediaSourceInfo | null>(null);
+  const [selectedMediaSource, setSelectedMediaSource] = useState<
+    MediaSourceInfo | undefined | null
+  >(undefined);
  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
  const [selectedSubtitleStream, setSelectedSubtitleStream] =
    useState<number>(0);
@@ -54,6 +56,20 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
    value: undefined,
  });

+  useFocusEffect(
+    useCallback(() => {
+      if (!settings) return;
+      const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+        getDefaultPlaySettings(item, settings);
+
+      // 4. Set states
+      setSelectedMediaSource(mediaSource ?? undefined);
+      setSelectedAudioStream(audioIndex ?? 0);
+      setSelectedSubtitleStream(subtitleIndex ?? -1);
+      setMaxBitrate(bitrate);
+    }, [item, settings])
+  );
+
  const userCanDownload = useMemo(() => {
    return user?.Policy?.EnableContentDownloading;
  }, [user]);
@@ -67,9 +83,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
    bottomSheetModalRef.current?.present();
  }, []);

-  const handleSheetChanges = useCallback((index: number) => {
-    console.log("handleSheetChanges", index);
-  }, []);
+  const handleSheetChanges = useCallback((index: number) => {}, []);

  const closeModal = useCallback(() => {
    bottomSheetModalRef.current?.dismiss();
@@ -85,102 +99,59 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
      );
    }

-    let deviceProfile: any = ios;
+    const res = await getStreamUrl({
+      api,
+      item,
+      startTimeTicks: 0,
+      userId: user?.Id,
+      audioStreamIndex: selectedAudioStream,
+      maxStreamingBitrate: maxBitrate.value,
+      mediaSourceId: selectedMediaSource.Id,
+      subtitleStreamIndex: selectedSubtitleStream,
+      deviceProfile: download,
+    });

-    if (settings?.deviceProfile === "Native") {
-      deviceProfile = native;
-    } else if (settings?.deviceProfile === "Old") {
-      deviceProfile = old;
+    if (!res) {
+      Alert.alert(
+        "Something went wrong",
+        "Could not get stream url from Jellyfin"
+      );
+      return;
    }

-    const response = await api.axiosInstance.post(
-      `${api.basePath}/Items/${item.Id}/PlaybackInfo`,
-      {
-        DeviceProfile: deviceProfile,
-        UserId: user.Id,
-        MaxStreamingBitrate: maxBitrate.value,
-        StartTimeTicks: 0,
-        EnableTranscoding: maxBitrate.value ? true : undefined,
-        AutoOpenLiveStream: true,
-        AllowVideoStreamCopy: maxBitrate.value ? false : true,
-        MediaSourceId: selectedMediaSource?.Id,
-        AudioStreamIndex: selectedAudioStream,
-        SubtitleStreamIndex: selectedSubtitleStream,
-      },
-      {
-        headers: {
-          Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
-        },
-      }
-    );
+    const { mediaSource, url } = res;

-    let url: string | undefined = undefined;
+    if (!url || !mediaSource) throw new Error("No url");

-    const mediaSource: MediaSourceInfo = response.data.MediaSources.find(
-      (source: MediaSourceInfo) => source.Id === selectedMediaSource?.Id
-    );
+    saveDownloadItemInfoToDiskTmp(item, mediaSource, url);

-    if (!mediaSource) {
-      throw new Error("No media source");
+    if (settings?.downloadMethod === "optimized") {
+      return await startBackgroundDownload(url, item, mediaSource);
+    } else {
+      return await startRemuxing(item, url, mediaSource);
    }
-
-    if (mediaSource.SupportsDirectPlay) {
-      if (item.MediaType === "Video") {
-        url = `${api.basePath}/Videos/${item.Id}/stream.mp4?mediaSourceId=${item.Id}&static=true&mediaSourceId=${mediaSource.Id}&deviceId=${api.deviceInfo.id}&api_key=${api.accessToken}`;
-      } else if (item.MediaType === "Audio") {
-        console.log("Using direct stream for audio!");
-        const searchParams = new URLSearchParams({
-          UserId: user.Id,
-          DeviceId: api.deviceInfo.id,
-          MaxStreamingBitrate: "140000000",
-          Container:
-            "opus,webm|opus,mp3,aac,m4a|aac,m4b|aac,flac,webma,webm|webma,wav,ogg",
-          TranscodingContainer: "mp4",
-          TranscodingProtocol: "hls",
-          AudioCodec: "aac",
-          api_key: api.accessToken,
-          StartTimeTicks: "0",
-          EnableRedirection: "true",
-          EnableRemoteMedia: "false",
-        });
-        url = `${api.basePath}/Audio/${
-          item.Id
-        }/universal?${searchParams.toString()}`;
-      }
-    } else if (mediaSource.TranscodingUrl) {
-      url = `${api.basePath}${mediaSource.TranscodingUrl}`;
-    }
-
-    if (!url) throw new Error("No url");
-
-    return await startRemuxing(url);
  }, [
    api,
    item,
-    startRemuxing,
+    startBackgroundDownload,
    user?.Id,
    selectedMediaSource,
    selectedAudioStream,
    selectedSubtitleStream,
    maxBitrate,
+    settings?.downloadMethod,
  ]);

  /**
   * Check if item is downloaded
   */
-  const { data: downloaded, isFetching } = useQuery({
-    queryKey: ["downloaded", item.Id],
-    queryFn: async () => {
-      if (!item.Id) return false;
+  const { downloadedFiles } = useDownload();

-      const data: BaseItemDto[] = JSON.parse(
-        (await AsyncStorage.getItem("downloaded_files")) || "[]"
-      );
+  const isDownloaded = useMemo(() => {
+    if (!downloadedFiles) return false;

-      return data.some((d) => d.Id === item.Id);
-    },
-    enabled: !!item.Id,
-  });
+    return downloadedFiles.some((file) => file.item.Id === item.Id);
+  }, [downloadedFiles, item.Id]);

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
@@ -193,14 +164,18 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
    []
  );

+  const process = useMemo(() => {
+    if (!processes) return null;
+
+    return processes.find((process) => process?.item?.Id === item.Id);
+  }, [processes, item.Id]);
+
  return (
    <View
      className="bg-neutral-800/80 rounded-full h-10 w-10 flex items-center justify-center"
      {...props}
    >
-      {isFetching ? (
-        <Loader />
-      ) : process && process?.item.Id === item.Id ? (
+      {process && process?.item.Id === item.Id ? (
        <TouchableOpacity
          onPress={() => {
            router.push("/downloads");
@@ -228,7 +203,7 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
        >
          <Ionicons name="hourglass" size={24} color="white" />
        </TouchableOpacity>
-      ) : downloaded ? (
+      ) : isDownloaded ? (
        <TouchableOpacity
          onPress={() => {
            router.push("/downloads");
@@ -288,25 +263,36 @@ export const DownloadItem: React.FC<DownloadProps> = ({ item, ...props }) => {
              className="mt-auto"
              onPress={() => {
                if (userCanDownload === true) {
+                  if (!item.Id) {
+                    throw new Error("No item id");
+                  }
                  closeModal();
-                  queueActions.enqueue(queue, setQueue, {
-                    id: item.Id!,
-                    execute: async () => {
-                      await initiateDownload();
-                    },
-                    item,
-                  });
+                  if (settings?.downloadMethod === "remux") {
+                    queueActions.enqueue(queue, setQueue, {
+                      id: item.Id,
+                      execute: async () => {
+                        await initiateDownload();
+                      },
+                      item,
+                    });
+                  } else {
+                    initiateDownload();
+                  }
                } else {
-                  Alert.alert(
-                    "Disabled",
-                    "This user is not allowed to download files."
-                  );
+                  toast.error("You are not allowed to download files.");
                }
              }}
              color="purple"
            >
              Download
            </Button>
+            <View className="opacity-70 text-center w-full flex items-center">
+              {settings?.downloadMethod === "optimized" ? (
+                <Text className="text-xs">Using optimized server</Text>
+              ) : (
+                <Text className="text-xs">Using default method</Text>
+              )}
+            </View>
          </View>
        </BottomSheetView>
      </BottomSheetModal>
--- a/components/FullScreenVideoPlayer.tsx
+++ b/components/FullScreenVideoPlayer.tsx
@@ -1,643 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  View,
-  TouchableOpacity,
-  Alert,
-  Dimensions,
-  BackHandler,
-  Pressable,
-  Touchable,
-} from "react-native";
-import Video, { OnProgressData } from "react-native-video";
-import { Slider } from "react-native-awesome-slider";
-import { Ionicons } from "@expo/vector-icons";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import { Text } from "./common/Text";
-import { Loader } from "./Loader";
-import { writeToLog } from "@/utils/log";
-import { useRouter, useSegments } from "expo-router";
-import { itemRouter } from "./common/TouchableItemRouter";
-import { Image } from "expo-image";
-import { StatusBar } from "expo-status-bar";
-import * as ScreenOrientation from "expo-screen-orientation";
-import { useAtom } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useQuery } from "@tanstack/react-query";
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from "react-native-reanimated";
-import { secondsToTicks } from "@/utils/secondsToTicks";
-import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
-import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import orientationToOrientationLock from "@/utils/OrientationLockConverter";
-import {
-  formatTimeString,
-  runtimeTicksToSeconds,
-  ticksToSeconds,
-} from "@/utils/time";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-
-const windowDimensions = Dimensions.get("window");
-const screenDimensions = Dimensions.get("screen");
-
-export const FullScreenVideoPlayer: React.FC = () => {
-  const {
-    currentlyPlaying,
-    pauseVideo,
-    playVideo,
-    stopPlayback,
-    setVolume,
-    setIsPlaying,
-    isPlaying,
-    videoRef,
-    onProgress,
-    setIsBuffering,
-  } = usePlayback();
-
-  const [settings] = useSettings();
-  const [api] = useAtom(apiAtom);
-  const router = useRouter();
-  const segments = useSegments();
-  const insets = useSafeAreaInsets();
-
-  const { previousItem, nextItem } = useAdjacentEpisodes({ currentlyPlaying });
-  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } =
-    useTrickplay(currentlyPlaying);
-
-  const [showControls, setShowControls] = useState(true);
-  const [isBuffering, setIsBufferingState] = useState(true);
-  const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
-  const [isStatusBarHidden, setIsStatusBarHidden] = useState(false);
-
-  // Seconds
-  const [currentTime, setCurrentTime] = useState(0);
-  const [remainingTime, setRemainingTime] = useState(0);
-
-  const isSeeking = useSharedValue(false);
-
-  const cacheProgress = useSharedValue(0);
-  const progress = useSharedValue(0);
-  const min = useSharedValue(0);
-  const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
-
-  const [dimensions, setDimensions] = useState({
-    window: windowDimensions,
-    screen: screenDimensions,
-  });
-
-  useEffect(() => {
-    const subscription = Dimensions.addEventListener(
-      "change",
-      ({ window, screen }) => {
-        setDimensions({ window, screen });
-      }
-    );
-    return () => subscription?.remove();
-  });
-
-  const from = useMemo(() => segments[2], [segments]);
-
-  const updateTimes = useCallback(
-    (currentProgress: number, maxValue: number) => {
-      const current = ticksToSeconds(currentProgress);
-      const remaining = ticksToSeconds(maxValue - current);
-
-      setCurrentTime(current);
-      setRemainingTime(remaining);
-    },
-    []
-  );
-
-  const { showSkipButton, skipIntro } = useIntroSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    currentlyPlaying?.item.Id,
-    currentTime,
-    videoRef
-  );
-
-  useAnimatedReaction(
-    () => ({
-      progress: progress.value,
-      max: max.value,
-      isSeeking: isSeeking.value,
-    }),
-    (result) => {
-      if (result.isSeeking === false) {
-        runOnJS(updateTimes)(result.progress, result.max);
-      }
-    },
-    [updateTimes]
-  );
-
-  useEffect(() => {
-    const backAction = () => {
-      if (currentlyPlaying) {
-        Alert.alert("Hold on!", "Are you sure you want to exit?", [
-          {
-            text: "Cancel",
-            onPress: () => null,
-            style: "cancel",
-          },
-          {
-            text: "Yes",
-            onPress: () => {
-              stopPlayback();
-              router.back();
-            },
-          },
-        ]);
-        return true;
-      }
-      return false;
-    };
-
-    const backHandler = BackHandler.addEventListener(
-      "hardwareBackPress",
-      backAction
-    );
-
-    return () => backHandler.remove();
-  }, [currentlyPlaying, stopPlayback, router]);
-
-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.OrientationLock.UNKNOWN
-  );
-
-  /**
-   * Event listener for orientation
-   */
-  useEffect(() => {
-    const subscription = ScreenOrientation.addOrientationChangeListener(
-      (event) => {
-        setOrientation(
-          orientationToOrientationLock(event.orientationInfo.orientation)
-        );
-      }
-    );
-
-    ScreenOrientation.getOrientationAsync().then((orientation) => {
-      setOrientation(orientationToOrientationLock(orientation));
-    });
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  const isLandscape = useMemo(() => {
-    return orientation === ScreenOrientation.OrientationLock.LANDSCAPE_LEFT ||
-      orientation === ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
-      ? true
-      : false;
-  }, [orientation]);
-
-  const poster = useMemo(() => {
-    if (!currentlyPlaying?.item || !api) return "";
-    return currentlyPlaying.item.Type === "Audio"
-      ? `${api.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`
-      : getBackdropUrl({
-          api,
-          item: currentlyPlaying.item,
-          quality: 70,
-          width: 200,
-        });
-  }, [currentlyPlaying?.item, api]);
-
-  const videoSource = useMemo(() => {
-    if (!api || !currentlyPlaying || !poster) return null;
-    const startPosition = currentlyPlaying.item?.UserData?.PlaybackPositionTicks
-      ? Math.round(currentlyPlaying.item.UserData.PlaybackPositionTicks / 10000)
-      : 0;
-    return {
-      uri: currentlyPlaying.url,
-      isNetwork: true,
-      startPosition,
-      headers: getAuthHeaders(api),
-      metadata: {
-        artist: currentlyPlaying.item?.AlbumArtist ?? undefined,
-        title: currentlyPlaying.item?.Name || "Unknown",
-        description: currentlyPlaying.item?.Overview ?? undefined,
-        imageUri: poster,
-        subtitle: currentlyPlaying.item?.Album ?? undefined,
-      },
-    };
-  }, [currentlyPlaying, api, poster]);
-
-  useEffect(() => {
-    if (currentlyPlaying) {
-      progress.value =
-        currentlyPlaying.item?.UserData?.PlaybackPositionTicks || 0;
-      max.value = currentlyPlaying.item.RunTimeTicks || 0;
-      setShowControls(true);
-    }
-  }, [currentlyPlaying]);
-
-  const toggleControls = () => setShowControls(!showControls);
-
-  const handleVideoProgress = useCallback(
-    (data: OnProgressData) => {
-      if (isSeeking.value === true) return;
-      progress.value = secondsToTicks(data.currentTime);
-      cacheProgress.value = secondsToTicks(data.playableDuration);
-      setIsBufferingState(data.playableDuration === 0);
-      setIsBuffering(data.playableDuration === 0);
-      onProgress(data);
-    },
-    [onProgress, setIsBuffering, isSeeking]
-  );
-
-  const handleVideoError = useCallback(
-    (e: any) => {
-      console.log(e);
-      writeToLog("ERROR", "Video playback error: " + JSON.stringify(e));
-      Alert.alert("Error", "Cannot play this video file.");
-      setIsPlaying(false);
-    },
-    [setIsPlaying]
-  );
-
-  const handlePlayPause = useCallback(() => {
-    if (isPlaying) pauseVideo();
-    else playVideo();
-  }, [isPlaying, pauseVideo, playVideo]);
-
-  const handleSliderComplete = (value: number) => {
-    progress.value = value;
-    isSeeking.value = false;
-    videoRef.current?.seek(value / 10000000);
-  };
-
-  const handleSliderChange = (value: number) => {
-    calculateTrickplayUrl(value);
-  };
-
-  const handleSliderStart = useCallback(() => {
-    if (showControls === false) return;
-    isSeeking.value = true;
-  }, []);
-
-  const handleSkipBackward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr - settings.rewindSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video backwards", error);
-    }
-  }, [settings]);
-
-  const handleSkipForward = useCallback(async () => {
-    if (!settings) return;
-    try {
-      const curr = await videoRef.current?.getCurrentPosition();
-      if (curr !== undefined) {
-        videoRef.current?.seek(Math.max(0, curr + settings.forwardSkipTime));
-      }
-    } catch (error) {
-      writeToLog("ERROR", "Error seeking video forwards", error);
-    }
-  }, [settings]);
-
-  const handleGoToPreviousItem = useCallback(() => {
-    if (!previousItem || !from) return;
-    const url = itemRouter(previousItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [previousItem, from, stopPlayback, router]);
-
-  const handleGoToNextItem = useCallback(() => {
-    if (!nextItem || !from) return;
-    const url = itemRouter(nextItem, from);
-    stopPlayback();
-    // @ts-ignore
-    router.push(url);
-  }, [nextItem, from, stopPlayback, router]);
-
-  const toggleIgnoreSafeArea = useCallback(() => {
-    setIgnoreSafeArea((prev) => !prev);
-  }, []);
-
-  if (!currentlyPlaying) return null;
-
-  return (
-    <View
-      style={{
-        width: dimensions.window.width,
-        height: dimensions.window.height,
-        backgroundColor: "black",
-      }}
-    >
-      <Pressable
-        onPress={toggleControls}
-        style={[
-          {
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            left: ignoreSafeArea ? 0 : insets.left,
-            right: ignoreSafeArea ? 0 : insets.right,
-            width: ignoreSafeArea
-              ? dimensions.window.width
-              : dimensions.window.width - (insets.left + insets.right),
-          },
-        ]}
-      >
-        {videoSource && (
-          <Video
-            ref={videoRef}
-            source={videoSource}
-            style={{ width: "100%", height: "100%" }}
-            resizeMode={ignoreSafeArea ? "cover" : "contain"}
-            onProgress={handleVideoProgress}
-            onLoad={(data) => (max.value = secondsToTicks(data.duration))}
-            onError={handleVideoError}
-            playWhenInactive={true}
-            allowsExternalPlayback={true}
-            playInBackground={true}
-            pictureInPicture={true}
-            showNotificationControls={true}
-            ignoreSilentSwitch="ignore"
-            fullscreen={false}
-          />
-        )}
-      </Pressable>
-
-      {(showControls || isBuffering) && (
-        <View
-          pointerEvents="none"
-          style={[
-            {
-              top: 0,
-              left: 0,
-              position: "absolute",
-              width: dimensions.window.width,
-              height: dimensions.window.height,
-            },
-          ]}
-          className="  bg-black/50 z-0"
-        ></View>
-      )}
-
-      {isBuffering && (
-        <View
-          pointerEvents="none"
-          className="fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center"
-        >
-          <Loader />
-        </View>
-      )}
-
-      {showSkipButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
-              right: isLandscape ? insets.right + 32 : insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipIntro}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Intro</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showSkipCreditButton && (
-        <View
-          style={[
-            {
-              position: "absolute",
-              bottom: isLandscape ? insets.bottom + 26 : insets.bottom + 70,
-              right: isLandscape ? insets.right + 32 : insets.right + 16,
-              height: 70,
-            },
-          ]}
-          className="z-10"
-        >
-          <TouchableOpacity
-            onPress={skipCredit}
-            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
-          >
-            <Text className="text-white">Skip Credits</Text>
-          </TouchableOpacity>
-        </View>
-      )}
-
-      {showControls && (
-        <>
-          <View
-            style={[
-              {
-                position: "absolute",
-                top: insets.top,
-                right: isLandscape ? insets.right + 32 : insets.right + 16,
-                height: 70,
-                zIndex: 10,
-              },
-            ]}
-            className="flex flex-row items-center space-x-2 z-10"
-          >
-            <TouchableOpacity
-              onPress={toggleIgnoreSafeArea}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons
-                name={ignoreSafeArea ? "contract-outline" : "expand"}
-                size={24}
-                color="white"
-              />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => {
-                stopPlayback();
-                router.back();
-              }}
-              className="aspect-square flex flex-col bg-neutral-800 rounded-xl items-center justify-center p-2"
-            >
-              <Ionicons name="close" size={24} color="white" />
-            </TouchableOpacity>
-          </View>
-
-          <View
-            style={[
-              {
-                position: "absolute",
-                bottom: insets.bottom + 8,
-                left: isLandscape ? insets.left + 32 : insets.left + 16,
-                width: isLandscape
-                  ? dimensions.window.width - insets.left - insets.right - 64
-                  : dimensions.window.width - insets.left - insets.right - 32,
-              },
-            ]}
-          >
-            <View className="shrink flex flex-col justify-center h-full mb-2">
-              <Text className="font-bold">{currentlyPlaying.item?.Name}</Text>
-              {currentlyPlaying.item?.Type === "Episode" && (
-                <Text className="opacity-50">
-                  {currentlyPlaying.item.SeriesName}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Movie" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.ProductionYear}
-                </Text>
-              )}
-              {currentlyPlaying.item?.Type === "Audio" && (
-                <Text className="text-xs opacity-50">
-                  {currentlyPlaying.item?.Album}
-                </Text>
-              )}
-            </View>
-            <View
-              className={`flex ${
-                isLandscape
-                  ? "flex-row space-x-6 py-2 px-4 rounded-full"
-                  : "flex-col-reverse py-4 px-4 rounded-2xl"
-              } 
-          items-center  bg-neutral-800`}
-            >
-              <View className="flex flex-row items-center space-x-4">
-                <TouchableOpacity
-                  style={{
-                    opacity: !previousItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToPreviousItem}
-                >
-                  <Ionicons name="play-skip-back" size={24} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipBackward}>
-                  <Ionicons
-                    name="refresh-outline"
-                    size={26}
-                    color="white"
-                    style={{
-                      transform: [{ scaleY: -1 }, { rotate: "180deg" }],
-                    }}
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handlePlayPause}>
-                  <Ionicons
-                    name={isPlaying ? "pause" : "play"}
-                    size={30}
-                    color="white"
-                  />
-                </TouchableOpacity>
-                <TouchableOpacity onPress={handleSkipForward}>
-                  <Ionicons name="refresh-outline" size={26} color="white" />
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    opacity: !nextItem ? 0.5 : 1,
-                  }}
-                  onPress={handleGoToNextItem}
-                >
-                  <Ionicons name="play-skip-forward" size={24} color="white" />
-                </TouchableOpacity>
-              </View>
-              <View
-                className={`flex flex-col w-full shrink
-              ${""}
-            `}
-              >
-                <Slider
-                  theme={{
-                    maximumTrackTintColor: "rgba(255,255,255,0.2)",
-                    minimumTrackTintColor: "#fff",
-                    cacheTrackTintColor: "rgba(255,255,255,0.3)",
-                    bubbleBackgroundColor: "#fff",
-                    bubbleTextColor: "#000",
-                    heartbeatColor: "#999",
-                  }}
-                  cache={cacheProgress}
-                  onSlidingStart={handleSliderStart}
-                  onSlidingComplete={handleSliderComplete}
-                  onValueChange={handleSliderChange}
-                  containerStyle={{
-                    borderRadius: 100,
-                  }}
-                  renderBubble={() => {
-                    if (!trickPlayUrl || !trickplayInfo) {
-                      return null;
-                    }
-                    const { x, y, url } = trickPlayUrl;
-
-                    const tileWidth = 150;
-                    const tileHeight = 150 / trickplayInfo.aspectRatio!;
-                    return (
-                      <View
-                        style={{
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          width: tileWidth,
-                          height: tileHeight,
-                          marginLeft: -tileWidth / 4,
-                          marginTop: -tileHeight / 4 - 60,
-                          zIndex: 10,
-                        }}
-                        className=" bg-neutral-800 overflow-hidden"
-                      >
-                        <Image
-                          cachePolicy={"memory-disk"}
-                          style={{
-                            width: 150 * trickplayInfo?.data.TileWidth!,
-                            height:
-                              (150 / trickplayInfo.aspectRatio!) *
-                              trickplayInfo?.data.TileHeight!,
-                            transform: [
-                              { translateX: -x * tileWidth },
-                              { translateY: -y * tileHeight },
-                            ],
-                          }}
-                          source={{ uri: url }}
-                          contentFit="cover"
-                        />
-                      </View>
-                    );
-                  }}
-                  sliderHeight={10}
-                  thumbWidth={0}
-                  progress={progress}
-                  minimumValue={min}
-                  maximumValue={max}
-                />
-                <View className="flex flex-row items-center justify-between mt-0.5">
-                  <Text className="text-[12px] text-neutral-400">
-                    {formatTimeString(currentTime)}
-                  </Text>
-                  <Text className="text-[12px] text-neutral-400">
-                    -{formatTimeString(remainingTime)}
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </>
-      )}
-    </View>
-  );
-};
--- a/components/GenreTags.tsx
+++ b/components/GenreTags.tsx
@@ -12,11 +12,8 @@ export const GenreTags: React.FC<GenreTagsProps> = ({ genres }) => {

  return (
    <View className="flex flex-row flex-wrap mt-2">
-      {genres.map((genre) => (
-        <View
-          key={genre}
-          className="bg-neutral-800 rounded-full px-2 py-1 mr-1"
-        >
+      {genres.map((genre, idx) => (
+        <View key={idx} className="bg-neutral-800 rounded-full px-2 py-1 mr-1">
          <Text className="text-xs">{genre}</Text>
        </View>
      ))}
--- a/components/ItemCardText.tsx
+++ b/components/ItemCardText.tsx
@@ -10,7 +10,7 @@ type ItemCardProps = {

 export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
  return (
-    <View className="mt-2 flex flex-col h-12">
+    <View className="mt-2 flex flex-col">
      {item.Type === "Episode" ? (
        <>
          <Text numberOfLines={2} className="">
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -11,379 +11,250 @@ import { ItemImage } from "@/components/common/ItemImage";
 import { CastAndCrew } from "@/components/series/CastAndCrew";
 import { CurrentSeries } from "@/components/series/CurrentSeries";
 import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
 import { useImageColors } from "@/hooks/useImageColors";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useOrientation } from "@/hooks/useOrientation";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import { getItemImage } from "@/utils/getItemImage";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios from "@/utils/profiles/ios";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
-import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
-import { Stack, useNavigation } from "expo-router";
+import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { View } from "react-native";
-import { useCastDevice } from "react-native-google-cast";
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Chromecast } from "./Chromecast";
 import { ItemHeader } from "./ItemHeader";
-import { Loader } from "./Loader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";

-export const ItemContent: React.FC<{ id: string }> = React.memo(({ id }) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
+export type SelectedOptions = {
+  bitrate: Bitrate;
+  mediaSource: MediaSourceInfo | undefined;
+  audioIndex: number | undefined;
+  subtitleIndex: number;
+};

-  const opacity = useSharedValue(0);
-  const castDevice = useCastDevice();
-  const navigation = useNavigation();
-  const [settings] = useSettings();
-  const [selectedMediaSource, setSelectedMediaSource] =
-    useState<MediaSourceInfo | null>(null);
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
-  const [selectedSubtitleStream, setSelectedSubtitleStream] =
-    useState<number>(-1);
-  const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
-    key: "Max",
-    value: undefined,
-  });
+export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
+  ({ item }) => {
+    const [api] = useAtom(apiAtom);
+    const [settings] = useSettings();
+    const { orientation } = useOrientation();
+    const navigation = useNavigation();
+    const insets = useSafeAreaInsets();
+    useImageColors({ item });

-  const [loadingLogo, setLoadingLogo] = useState(true);
+    const [loadingLogo, setLoadingLogo] = useState(true);
+    const [headerHeight, setHeaderHeight] = useState(350);

-  const [orientation, setOrientation] = useState(
-    ScreenOrientation.Orientation.PORTRAIT_UP
-  );
+    const [selectedOptions, setSelectedOptions] = useState<
+      SelectedOptions | undefined
+    >(undefined);

-  useEffect(() => {
-    const subscription = ScreenOrientation.addOrientationChangeListener(
-      (event) => {
-        setOrientation(event.orientationInfo.orientation);
-      }
-    );
+    const {
+      defaultAudioIndex,
+      defaultBitrate,
+      defaultMediaSource,
+      defaultSubtitleIndex,
+    } = useDefaultPlaySettings(item, settings);

-    ScreenOrientation.getOrientationAsync().then((initialOrientation) => {
-      setOrientation(initialOrientation);
-    });
+    // Needs to automatically change the selected to the default values for default indexes.
+    useEffect(() => {
+      console.log(defaultAudioIndex, defaultSubtitleIndex);
+      setSelectedOptions(() => ({
+        bitrate: defaultBitrate,
+        mediaSource: defaultMediaSource,
+        subtitleIndex: defaultSubtitleIndex ?? -1,
+        audioIndex: defaultAudioIndex,
+      }));
+    }, [
+      defaultAudioIndex,
+      defaultBitrate,
+      defaultSubtitleIndex,
+      defaultMediaSource,
+    ]);

-    return () => {
-      ScreenOrientation.removeOrientationChangeListener(subscription);
-    };
-  }, []);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: opacity.value,
-    };
-  });
-
-  const fadeIn = () => {
-    opacity.value = withTiming(1, { duration: 300 });
-  };
-
-  const fadeOut = (callback: any) => {
-    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
-      if (finished) {
-        runOnJS(callback)();
-      }
-    });
-  };
-
-  const headerHeightRef = useRef(400);
-
-  const {
-    data: item,
-    isLoading,
-    isFetching,
-  } = useQuery({
-    queryKey: ["item", id],
-    queryFn: async () => {
-      const res = await getUserItemData({
-        api,
-        userId: user?.Id,
-        itemId: id,
-      });
-
-      console.log("itemID", res?.Id);
-
-      return res;
-    },
-    enabled: !!id && !!api,
-    staleTime: 60 * 1000 * 5,
-  });
-
-  const [localItem, setLocalItem] = useState(item);
-
-  useEffect(() => {
-    if (item) {
-      if (localItem) {
-        // Fade out current item
-        fadeOut(() => {
-          // Update local item after fade out
-          setLocalItem(item);
-          // Then fade in
-          fadeIn();
-        });
-      } else {
-        // If there's no current item, just set and fade in
-        setLocalItem(item);
-        fadeIn();
-      }
-    } else {
-      // If item is null, fade out and clear local item
-      fadeOut(() => setLocalItem(null));
-    }
-  }, [item]);
-
-  useEffect(() => {
-    navigation.setOptions({
-      headerRight: () =>
-        item && (
-          <View className="flex flex-row items-center space-x-2">
-            <Chromecast background="blur" width={22} height={22} />
-            <DownloadItem item={item} />
-            <PlayedStatus item={item} />
-          </View>
-        ),
-    });
-  }, [item]);
-
-  useEffect(() => {
-    if (orientation !== ScreenOrientation.Orientation.PORTRAIT_UP) {
-      headerHeightRef.current = 230;
-      return;
-    }
-    if (item?.Type === "Episode") headerHeightRef.current = 400;
-    else if (item?.Type === "Movie") headerHeightRef.current = 500;
-    else headerHeightRef.current = 400;
-  }, [item]);
-
-  const { data: sessionData } = useQuery({
-    queryKey: ["sessionData", item?.Id],
-    queryFn: async () => {
-      if (!api || !user?.Id || !item?.Id) return null;
-      const playbackData = await getMediaInfoApi(api!).getPlaybackInfo({
-        itemId: item?.Id,
-        userId: user?.Id,
-      });
-
-      return playbackData.data;
-    },
-    enabled: !!item?.Id && !!api && !!user?.Id,
-    staleTime: 0,
-  });
-
-  const { data: playbackUrl } = useQuery({
-    queryKey: [
-      "playbackUrl",
-      item?.Id,
-      maxBitrate,
-      castDevice,
-      selectedMediaSource,
-      selectedAudioStream,
-      selectedSubtitleStream,
-      settings,
-    ],
-    queryFn: async () => {
-      if (!api || !user?.Id || !sessionData || !selectedMediaSource?.Id)
-        return null;
-
-      let deviceProfile: any = ios;
-
-      if (castDevice?.deviceId) {
-        deviceProfile = chromecastProfile;
-      } else if (settings?.deviceProfile === "Native") {
-        deviceProfile = native;
-      } else if (settings?.deviceProfile === "Old") {
-        deviceProfile = old;
-      }
-
-      const url = await getStreamUrl({
-        api,
-        userId: user.Id,
-        item,
-        startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
-        maxStreamingBitrate: maxBitrate.value,
-        sessionData,
-        deviceProfile,
-        audioStreamIndex: selectedAudioStream,
-        subtitleStreamIndex: selectedSubtitleStream,
-        forceDirectPlay: settings?.forceDirectPlay,
-        height: maxBitrate.height,
-        mediaSourceId: selectedMediaSource.Id,
-      });
-
-      console.info("Stream URL:", url);
-
-      return url;
-    },
-    enabled: !!sessionData && !!api && !!user?.Id && !!item?.Id,
-    staleTime: 0,
-  });
-
-  const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
-  const themeImageColorSource = useMemo(() => {
-    if (!api || !item) return;
-    return getItemImage({
-      item,
-      api,
-      variant: "Primary",
-      quality: 80,
-      width: 300,
-    });
-  }, [api, item]);
-
-  useImageColors(themeImageColorSource?.uri);
-
-  const loading = useMemo(() => {
-    return Boolean(isLoading || isFetching || (logoUrl && loadingLogo));
-  }, [isLoading, isFetching, loadingLogo, logoUrl]);
-
-  const insets = useSafeAreaInsets();
-
-  return (
-    <View
-      className="flex-1 relative"
-      style={{
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
-      }}
-    >
-      {loading && (
-        <View className="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex flex-col justify-center items-center z-50">
-          <Loader />
-        </View>
-      )}
-      <ParallaxScrollView
-        className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
-        headerHeight={headerHeightRef.current}
-        headerImage={
-          <>
-            <Animated.View style={[animatedStyle, { flex: 1 }]}>
-              {localItem && (
-                <ItemImage
-                  useThemeColor
-                  variant={
-                    localItem.Type === "Movie" && logoUrl
-                      ? "Backdrop"
-                      : "Primary"
-                  }
-                  item={localItem}
-                  style={{
-                    width: "100%",
-                    height: "100%",
-                  }}
-                />
+    useEffect(() => {
+      navigation.setOptions({
+        headerRight: () =>
+          item && (
+            <View className="flex flex-row items-center space-x-2">
+              <Chromecast background="blur" width={22} height={22} />
+              {item.Type !== "Program" && (
+                <View className="flex flex-row items-center space-x-2">
+                  <DownloadItem item={item} />
+                  <PlayedStatus item={item} />
+                </View>
              )}
-            </Animated.View>
-          </>
-        }
-        logo={
-          <>
-            {logoUrl ? (
-              <Image
-                source={{
-                  uri: logoUrl,
-                }}
-                style={{
-                  height: 130,
-                  width: "100%",
-                  resizeMode: "contain",
-                }}
-                onLoad={() => setLoadingLogo(false)}
-                onError={() => setLoadingLogo(false)}
-              />
-            ) : null}
-          </>
-        }
+            </View>
+          ),
+      });
+    }, [item]);
+
+    useEffect(() => {
+      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
+        setHeaderHeight(230);
+      else if (item.Type === "Movie") setHeaderHeight(500);
+      else setHeaderHeight(350);
+    }, [item.Type, orientation]);
+
+    const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
+
+    const loading = useMemo(() => {
+      return Boolean(logoUrl && loadingLogo);
+    }, [loadingLogo, logoUrl]);
+
+    if (!selectedOptions) return null;
+
+    return (
+      <View
+        className="flex-1 relative"
+        style={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
      >
-        <View className="flex flex-col bg-transparent shrink">
-          <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
-            <Animated.View style={[animatedStyle, { flex: 1 }]}>
-              <ItemHeader item={localItem} className="mb-4" />
-              {localItem ? (
+        <ParallaxScrollView
+          className={`flex-1 ${loading ? "opacity-0" : "opacity-100"}`}
+          headerHeight={headerHeight}
+          headerImage={
+            <View style={[{ flex: 1 }]}>
+              <ItemImage
+                variant={
+                  item.Type === "Movie" && logoUrl ? "Backdrop" : "Primary"
+                }
+                item={item}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                }}
+              />
+            </View>
+          }
+          logo={
+            <>
+              {logoUrl ? (
+                <Image
+                  source={{
+                    uri: logoUrl,
+                  }}
+                  style={{
+                    height: 130,
+                    width: "100%",
+                    resizeMode: "contain",
+                  }}
+                  onLoad={() => setLoadingLogo(false)}
+                  onError={() => setLoadingLogo(false)}
+                />
+              ) : null}
+            </>
+          }
+        >
+          <View className="flex flex-col bg-transparent shrink">
+            <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
+              <ItemHeader item={item} className="mb-4" />
+              {item.Type !== "Program" && (
                <View className="flex flex-row items-center justify-start w-full h-16">
                  <BitrateSelector
                    className="mr-1"
-                    onChange={(val) => setMaxBitrate(val)}
-                    selected={maxBitrate}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) => prev && { ...prev, bitrate: val }
+                      )
+                    }
+                    selected={selectedOptions.bitrate}
                  />
                  <MediaSourceSelector
                    className="mr-1"
-                    item={localItem}
-                    onChange={setSelectedMediaSource}
-                    selected={selectedMediaSource}
+                    item={item}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            mediaSource: val,
+                          }
+                      )
+                    }
+                    selected={selectedOptions.mediaSource}
+                  />
+                  <AudioTrackSelector
+                    className="mr-1"
+                    source={selectedOptions.mediaSource}
+                    onChange={(val) => {
+                      console.log(val);
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            audioIndex: val,
+                          }
+                      );
+                    }}
+                    selected={selectedOptions.audioIndex}
+                  />
+                  <SubtitleTrackSelector
+                    source={selectedOptions.mediaSource}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            subtitleIndex: val,
+                          }
+                      )
+                    }
+                    selected={selectedOptions.subtitleIndex}
                  />
-                  {selectedMediaSource && (
-                    <>
-                      <AudioTrackSelector
-                        className="mr-1"
-                        source={selectedMediaSource}
-                        onChange={setSelectedAudioStream}
-                        selected={selectedAudioStream}
-                      />
-                      <SubtitleTrackSelector
-                        source={selectedMediaSource}
-                        onChange={setSelectedSubtitleStream}
-                        selected={selectedSubtitleStream}
-                      />
-                    </>
-                  )}
-                </View>
-              ) : (
-                <View className="h-16">
-                  <View className="bg-neutral-900 h-4 w-2/4 rounded-md mb-1"></View>
-                  <View className="bg-neutral-900 h-10 w-3/4 rounded-lg"></View>
                </View>
              )}
-            </Animated.View>

-            <PlayButton item={item} url={playbackUrl} className="grow" />
-          </View>
-
-          {item?.Type === "Episode" && (
-            <SeasonEpisodesCarousel item={item} loading={loading} />
-          )}
-
-          <OverviewText text={item?.Overview} className="px-4 mb-4" />
-
-          <CastAndCrew item={item} className="mb-4" loading={loading} />
-
-          {item?.People && item.People.length > 0 && (
-            <View className="mb-4">
-              {item.People.slice(0, 3).map((person) => (
-                <MoreMoviesWithActor
-                  currentItem={item}
-                  key={person.Id}
-                  actorId={person.Id!}
-                  className="mb-4"
-                />
-              ))}
+              <PlayButton
+                className="grow"
+                selectedOptions={selectedOptions}
+                item={item}
+              />
            </View>
-          )}

-          {item?.Type === "Episode" && (
-            <CurrentSeries item={item} className="mb-4" />
-          )}
-          <SimilarItems itemId={item?.Id} />
+            {item.Type === "Episode" && (
+              <SeasonEpisodesCarousel item={item} loading={loading} />
+            )}

-          <View className="h-16"></View>
-        </View>
-      </ParallaxScrollView>
-    </View>
-  );
-});
+            <OverviewText text={item.Overview} className="px-4 my-4" />
+            {item.Type !== "Program" && (
+              <>
+                <CastAndCrew item={item} className="mb-4" loading={loading} />
+
+                {item.People && item.People.length > 0 && (
+                  <View className="mb-4">
+                    {item.People.slice(0, 3).map((person, idx) => (
+                      <MoreMoviesWithActor
+                        currentItem={item}
+                        key={idx}
+                        actorId={person.Id!}
+                        className="mb-4"
+                      />
+                    ))}
+                  </View>
+                )}
+
+                {item.Type === "Episode" && (
+                  <CurrentSeries item={item} className="mb-4" />
+                )}
+
+                <SimilarItems itemId={item.Id} />
+              </>
+            )}
+
+            <View className="h-16"></View>
+          </View>
+        </ParallaxScrollView>
+      </View>
+    );
+  }
+);
--- a/components/ItemHeader.tsx
+++ b/components/ItemHeader.tsx
@@ -4,6 +4,7 @@ import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
 import { Ratings } from "./Ratings";
 import { EpisodeTitleHeader } from "./series/EpisodeTitleHeader";
 import { GenreTags } from "./GenreTags";
+import React from "react";

 interface Props extends ViewProps {
  item?: BaseItemDto | null;
--- a/components/ListItem.tsx
+++ b/components/ListItem.tsx
@@ -21,9 +21,13 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
      className="flex flex-row items-center justify-between bg-neutral-900 p-4"
      {...props}
    >
-      <View className="flex flex-col">
+      <View className="flex flex-col overflow-visible">
        <Text className="font-bold ">{title}</Text>
-        {subTitle && <Text className="text-xs">{subTitle}</Text>}
+        {subTitle && (
+          <Text uiTextView selectable className="text-xs">
+            {subTitle}
+          </Text>
+        )}
      </View>
      {iconAfter}
    </View>
--- a/components/MediaSourceSelector.tsx
+++ b/components/MediaSourceSelector.tsx
@@ -12,7 +12,7 @@ import { convertBitsToMegabitsOrGigabits } from "@/utils/bToMb";
 interface Props extends React.ComponentProps<typeof View> {
  item: BaseItemDto;
  onChange: (value: MediaSourceInfo) => void;
-  selected: MediaSourceInfo | null;
+  selected?: MediaSourceInfo | null;
 }

 export const MediaSourceSelector: React.FC<Props> = ({
@@ -21,30 +21,14 @@ export const MediaSourceSelector: React.FC<Props> = ({
  selected,
  ...props
 }) => {
-  const mediaSources = useMemo(() => {
-    return item.MediaSources;
-  }, [item]);
-
-  const selectedMediaSource = useMemo(
+  const selectedName = useMemo(
    () =>
-      mediaSources
-        ?.find((x) => x.Id === selected?.Id)
-        ?.MediaStreams?.find((x) => x.Type === "Video")?.DisplayTitle || "",
-    [mediaSources, selected]
+      item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
+        (x) => x.Type === "Video"
+      )?.DisplayTitle || "",
+    [item, selected]
  );

-  useEffect(() => {
-    if (mediaSources?.length) onChange(mediaSources[0]);
-  }, [mediaSources]);
-
-  const name = (name?: string | null) => {
-    if (name && name.length > 40)
-      return (
-        name.substring(0, 20) + " [...] " + name.substring(name.length - 20)
-      );
-    return name;
-  };
-
  return (
    <View
      className="flex shrink"
@@ -56,8 +40,8 @@ export const MediaSourceSelector: React.FC<Props> = ({
        <DropdownMenu.Trigger>
          <View className="flex flex-col" {...props}>
            <Text className="opacity-50 mb-1 text-xs">Video</Text>
-            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center ">
-              <Text numberOfLines={1}>{selectedMediaSource}</Text>
+            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center">
+              <Text numberOfLines={1}>{selectedName}</Text>
            </TouchableOpacity>
          </View>
        </DropdownMenu.Trigger>
@@ -71,7 +55,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
          sideOffset={8}
        >
          <DropdownMenu.Label>Media sources</DropdownMenu.Label>
-          {mediaSources?.map((source, idx: number) => (
+          {item.MediaSources?.map((source, idx: number) => (
            <DropdownMenu.Item
              key={idx.toString()}
              onSelect={() => {
@@ -90,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/OfflineVideoPlayer.tsx
+++ b/components/OfflineVideoPlayer.tsx
@@ -1,37 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import Video, { VideoRef } from "react-native-video";
-
-type VideoPlayerProps = {
-  url: string;
-};
-
-export const OfflineVideoPlayer: React.FC<VideoPlayerProps> = ({ url }) => {
-  const videoRef = useRef<VideoRef | null>(null);
-
-  const onError = (error: any) => {
-    console.error("Video Error: ", error);
-  };
-
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.resume();
-    }
-    setTimeout(() => {
-      if (videoRef.current) {
-        videoRef.current.presentFullscreenPlayer();
-      }
-    }, 500);
-  }, []);
-
-  return (
-    <Video
-      source={{
-        uri: url,
-        isNetwork: false,
-      }}
-      ref={videoRef}
-      onError={onError}
-      ignoreSilentSwitch="ignore"
-    />
-  );
-};
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -1,16 +1,20 @@
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import ios from "@/utils/profiles/ios";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useAtom } from "jotai";
-import { useEffect, useMemo } from "react";
-import { TouchableOpacity, View } from "react-native";
+import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useRouter } from "expo-router";
+import { useAtom, useAtomValue } from "jotai";
+import { useCallback, useEffect } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
+  CastButton,
  PlayServicesState,
  useMediaStatus,
  useRemoteMediaClient,
@@ -26,49 +30,68 @@ import Animated, {
  withTiming,
 } from "react-native-reanimated";
 import { Button } from "./Button";
-import { Text } from "./common/Text";
-import { useRouter } from "expo-router";
+import { SelectedOptions } from "./ItemContent";

 interface Props extends React.ComponentProps<typeof Button> {
-  item?: BaseItemDto | null;
-  url?: string | null;
+  item: BaseItemDto;
+  selectedOptions: SelectedOptions;
 }

 const ANIMATION_DURATION = 500;
 const MIN_PLAYBACK_WIDTH = 15;

-export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
+export const PlayButton: React.FC<Props> = ({
+  item,
+  selectedOptions,
+  ...props
+}: Props) => {
  const { showActionSheetWithOptions } = useActionSheet();
  const client = useRemoteMediaClient();
-  const { setCurrentlyPlayingState } = usePlayback();
  const mediaStatus = useMediaStatus();

  const [colorAtom] = useAtom(itemThemeColorAtom);
-  const [api] = useAtom(apiAtom);
+  const api = useAtomValue(apiAtom);
+  const user = useAtomValue(userAtom);

  const router = useRouter();

-  const memoizedItem = useMemo(() => item, [item?.Id]); // Memoize the item
-  const memoizedColor = useMemo(() => colorAtom, [colorAtom]); // Memoize the color
-
  const startWidth = useSharedValue(0);
  const targetWidth = useSharedValue(0);
-  const endColor = useSharedValue(memoizedColor);
-  const startColor = useSharedValue(memoizedColor);
+  const endColor = useSharedValue(colorAtom);
+  const startColor = useSharedValue(colorAtom);
  const widthProgress = useSharedValue(0);
  const colorChangeProgress = useSharedValue(0);
+  const [settings] = useSettings();

-  const directStream = useMemo(() => {
-    return !url?.includes("m3u8");
-  }, [url]);
+  const goToPlayer = useCallback(
+    (q: string, bitrateValue: number | undefined) => {
+      if (!bitrateValue) {
+        router.push(`/player/direct-player?${q}`);
+        return;
+      }
+      router.push(`/player/transcoding-player?${q}`);
+    },
+    [router]
+  );
+
+  const onPress = useCallback(async () => {
+    if (!item) return;
+
+    const queryParams = new URLSearchParams({
+      itemId: item.Id!,
+      audioIndex: selectedOptions.audioIndex?.toString() ?? "",
+      subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
+      mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
+      bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
+    });
+
+    const queryString = queryParams.toString();

-  const onPress = async () => {
-    if (!url || !item) return;
    if (!client) {
-      setCurrentlyPlayingState({ item, url });
-      router.push("/play");
+      goToPlayer(queryString, selectedOptions.bitrate?.value);
      return;
    }
+
    const options = ["Chromecast", "Device", "Cancel"];
    const cancelButtonIndex = 2;
    showActionSheetWithOptions(
@@ -84,7 +107,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {

        switch (selectedIndex) {
          case 0:
-            await CastContext.getPlayServicesState().then((state) => {
+            await CastContext.getPlayServicesState().then(async (state) => {
              if (state && state !== PlayServicesState.SUCCESS)
                CastContext.showPlayServicesErrorDialog(state);
              else {
@@ -94,10 +117,33 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
                  CastContext.showExpandedControls();
                  return;
                }
+
+                // Get a new URL with the Chromecast device profile:
+                const data = await getStreamUrl({
+                  api,
+                  item,
+                  deviceProfile: ios,
+                  startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
+                  userId: user?.Id,
+                  audioStreamIndex: selectedOptions.audioIndex,
+                  maxStreamingBitrate: selectedOptions.bitrate?.value,
+                  mediaSourceId: selectedOptions.mediaSource?.Id,
+                  subtitleStreamIndex: selectedOptions.subtitleIndex,
+                });
+
+                if (!data?.url) {
+                  console.warn("No URL returned from getStreamUrl", data);
+                  Alert.alert(
+                    "Client error",
+                    "Could not create stream for Chromecast"
+                  );
+                  return;
+                }
+
                client
                  .loadMedia({
                    mediaInfo: {
-                      contentUrl: url,
+                      contentUrl: data?.url,
                      contentType: "video/mp4",
                      metadata:
                        item.Type === "Episode"
@@ -163,30 +209,38 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
            });
            break;
          case 1:
-            console.log("Device");
-            setCurrentlyPlayingState({ item, url });
-            router.push("/play");
+            goToPlayer(queryString, selectedOptions.bitrate?.value);
            break;
          case cancelButtonIndex:
            break;
        }
      }
    );
-  };
+  }, [
+    item,
+    client,
+    settings,
+    api,
+    user,
+    router,
+    showActionSheetWithOptions,
+    mediaStatus,
+    selectedOptions,
+  ]);

  const derivedTargetWidth = useDerivedValue(() => {
-    if (!memoizedItem || !memoizedItem.RunTimeTicks) return 0;
-    const userData = memoizedItem.UserData;
+    if (!item || !item.RunTimeTicks) return 0;
+    const userData = item.UserData;
    if (userData && userData.PlaybackPositionTicks) {
      return userData.PlaybackPositionTicks > 0
        ? Math.max(
-            (userData.PlaybackPositionTicks / memoizedItem.RunTimeTicks) * 100,
+            (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
            MIN_PLAYBACK_WIDTH
          )
        : 0;
    }
    return 0;
-  }, [memoizedItem]);
+  }, [item]);

  useAnimatedReaction(
    () => derivedTargetWidth.value,
@@ -202,7 +256,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
  );

  useAnimatedReaction(
-    () => memoizedColor,
+    () => colorAtom,
    (newColor) => {
      endColor.value = newColor;
      colorChangeProgress.value = 0;
@@ -211,19 +265,19 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
        easing: Easing.bezier(0.9, 0, 0.31, 0.99),
      });
    },
-    [memoizedColor]
+    [colorAtom]
  );

  useEffect(() => {
    const timeout_2 = setTimeout(() => {
-      startColor.value = memoizedColor;
+      startColor.value = colorAtom;
      startWidth.value = targetWidth.value;
    }, ANIMATION_DURATION);

    return () => {
      clearTimeout(timeout_2);
    };
-  }, [memoizedColor, memoizedItem]);
+  }, [colorAtom, item]);

  /**
   * ANIMATED STYLES
@@ -266,10 +320,11 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
  return (
    <View>
      <TouchableOpacity
+        disabled={!item}
        accessibilityLabel="Play button"
        accessibilityHint="Tap to play the media"
        onPress={onPress}
-        className="relative"
+        className={`relative`}
        {...props}
      >
        <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
@@ -306,12 +361,22 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
            {client && (
              <Animated.Text style={animatedTextStyle}>
                <Feather name="cast" size={22} />
+                <CastButton tintColor="transparent" />
+              </Animated.Text>
+            )}
+            {!client && settings?.openInVLC && (
+              <Animated.Text style={animatedTextStyle}>
+                <MaterialCommunityIcons
+                  name="vlc"
+                  size={18}
+                  color={animatedTextStyle.color}
+                />
              </Animated.Text>
            )}
          </View>
        </View>
      </TouchableOpacity>
-      <View className="mt-2 flex flex-row items-center">
+      {/* <View className="mt-2 flex flex-row items-center">
        <Ionicons
          name="information-circle"
          size={12}
@@ -321,7 +386,7 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
        <Text className="text-neutral-500 ml-1">
          {directStream ? "Direct stream" : "Transcoded stream"}
        </Text>
-      </View>
+      </View> */}
    </View>
  );
 };
--- a/components/PlayedStatus.tsx
+++ b/components/PlayedStatus.tsx
@@ -21,11 +21,17 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {

  const invalidateQueries = () => {
    queryClient.invalidateQueries({
-      queryKey: ["item"],
+      queryKey: ["item", item.Id],
    });
    queryClient.invalidateQueries({
      queryKey: ["resumeItems"],
    });
+    queryClient.invalidateQueries({
+      queryKey: ["continueWatching"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["nextUp-all"],
+    });
    queryClient.invalidateQueries({
      queryKey: ["nextUp"],
    });
@@ -36,7 +42,7 @@ export const PlayedStatus: React.FC<Props> = ({ item, ...props }) => {
      queryKey: ["seasons"],
    });
    queryClient.invalidateQueries({
-      queryKey: ["nextUp-all"],
+      queryKey: ["home"],
    });
  };

--- a/components/SubtitleTrackSelector.tsx
+++ b/components/SubtitleTrackSelector.tsx
@@ -1,20 +1,14 @@
+import { tc } from "@/utils/textTools";
+import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import { useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "./common/Text";
-import { atom, useAtom } from "jotai";
-import {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { MediaStream } from "@jellyfin/sdk/lib/generated-client/models";
-import { tc } from "@/utils/textTools";
-import { useSettings } from "@/utils/atoms/settings";

 interface Props extends React.ComponentProps<typeof View> {
-  source: MediaSourceInfo;
+  source?: MediaSourceInfo;
  onChange: (value: number) => void;
-  selected: number;
+  selected?: number | undefined;
 }

 export const SubtitleTrackSelector: React.FC<Props> = ({
@@ -23,10 +17,8 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
  selected,
  ...props
 }) => {
-  const [settings] = useSettings();
-
  const subtitleStreams = useMemo(
-    () => source.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
+    () => source?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [],
    [source]
  );

@@ -35,23 +27,6 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
    [subtitleStreams, selected]
  );

-  useEffect(() => {
-    // const index = source.DefaultAudioStreamIndex;
-    // if (index !== undefined && index !== null) {
-    //   onChange(index);
-    //   return;
-    // }
-    const defaultSubIndex = subtitleStreams?.find(
-      (x) => x.Language === settings?.defaultSubtitleLanguage?.value
-    )?.Index;
-    if (defaultSubIndex !== undefined && defaultSubIndex !== null) {
-      onChange(defaultSubIndex);
-      return;
-    }
-
-    onChange(-1);
-  }, [subtitleStreams, settings]);
-
  if (subtitleStreams.length === 0) return null;

  return (
--- a/components/WatchedIndicator.tsx
+++ b/components/WatchedIndicator.tsx
@@ -1,4 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import React from "react";
 import { View } from "react-native";

 export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
--- a/components/common/HeaderBackButton.tsx
+++ b/components/common/HeaderBackButton.tsx
@@ -24,14 +24,14 @@ export const HeaderBackButton: React.FC<Props> = ({

  if (background === "transparent" && Platform.OS !== "android")
    return (
-      <BlurView
-        {...props}
-        intensity={100}
-        className="overflow-hidden rounded-full p-2"
+      <TouchableOpacity
+        onPress={() => router.back()}
+        {...touchableOpacityProps}
      >
-        <TouchableOpacity
-          onPress={() => router.back()}
-          {...touchableOpacityProps}
+        <BlurView
+          {...props}
+          intensity={100}
+          className="overflow-hidden rounded-full p-2"
        >
          <Ionicons
            className="drop-shadow-2xl"
@@ -39,8 +39,8 @@ export const HeaderBackButton: React.FC<Props> = ({
            size={24}
            color="white"
          />
-        </TouchableOpacity>
-      </BlurView>
+        </BlurView>
+      </TouchableOpacity>
    );

  return (
--- a/components/common/HorrizontalScroll.tsx
+++ b/components/common/HorrizontalScroll.tsx
@@ -16,6 +16,7 @@ interface HorizontalScrollProps<T>
  > {
  data?: T[] | null;
  renderItem: (item: T, index: number) => React.ReactNode;
+  keyExtractor?: (item: T, index: number) => string;
  containerStyle?: ViewStyle;
  contentContainerStyle?: ViewStyle;
  loadingContainerStyle?: ViewStyle;
@@ -32,6 +33,7 @@ export const HorizontalScroll = forwardRef<
  <T,>(
    {
      data = [],
+      keyExtractor,
      renderItem,
      containerStyle,
      contentContainerStyle,
@@ -91,6 +93,7 @@ export const HorizontalScroll = forwardRef<
          paddingHorizontal: 16,
          ...contentContainerStyle,
        }}
+        keyExtractor={keyExtractor}
        ListEmptyComponent={() => (
          <View className="flex-1 justify-center items-center">
            <Text className="text-center text-gray-500">
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -10,9 +10,9 @@ export function Input(props: TextInputProps) {
      className="p-4 border border-neutral-800 rounded-xl bg-neutral-900"
      allowFontScaling={false}
      style={[{ color: "white" }, style]}
-      {...otherProps}
      placeholderTextColor={"#9CA3AF"}
      clearButtonMode="while-editing"
+      {...otherProps}
    />
  );
 }
--- a/components/common/ItemImage.tsx
+++ b/components/common/ItemImage.tsx
@@ -22,7 +22,6 @@ interface Props extends ImageProps {
    | "Thumb";
  quality?: number;
  width?: number;
-  useThemeColor?: boolean;
  onError?: () => void;
 }

@@ -31,7 +30,6 @@ export const ItemImage: React.FC<Props> = ({
  variant = "Primary",
  quality = 90,
  width = 1000,
-  useThemeColor = false,
  onError,
  ...props
 }) => {
--- a/components/common/Text.tsx
+++ b/components/common/Text.tsx
@@ -1,11 +1,16 @@
 import React from "react";
 import { TextProps } from "react-native";
-import { Text as DefaultText } from "react-native";
-export function Text(props: TextProps) {
+import { UITextView } from "react-native-uitextview";
+
+export function Text(
+  props: TextProps & {
+    uiTextView?: boolean;
+  }
+) {
  const { style, ...otherProps } = props;

  return (
-    <DefaultText
+    <UITextView
      allowFontScaling={false}
      style={[{ color: "white" }, style]}
      {...otherProps}
--- a/components/common/TouchableItemRouter.tsx
+++ b/components/common/TouchableItemRouter.tsx
@@ -9,6 +9,10 @@ interface Props extends TouchableOpacityProps {
 }

 export const itemRouter = (item: BaseItemDto, from: string) => {
+  if (item.CollectionType === "livetv") {
+    return `/(auth)/(tabs)/${from}/livetv`;
+  }
+
  if (item.Type === "Series") {
    return `/(auth)/(tabs)/${from}/series/${item.Id}`;
  }
--- a/components/downloads/ActiveDownloads.tsx
+++ b/components/downloads/ActiveDownloads.tsx
@@ -0,0 +1,191 @@
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+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";
+import { checkForExistingDownloads } from "@kesha-antonov/react-native-background-downloader";
+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,
+  TouchableOpacityProps,
+  View,
+  ViewProps,
+} from "react-native";
+import { toast } from "sonner-native";
+import { Button } from "../Button";
+import { Image } from "expo-image";
+import { useMemo } from "react";
+import { storage } from "@/utils/mmkv";
+
+interface Props extends ViewProps {}
+
+export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
+  const { processes } = useDownload();
+  if (processes?.length === 0)
+    return (
+      <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
+        <Text className="text-lg font-bold">Active download</Text>
+        <Text className="opacity-50">No active downloads</Text>
+      </View>
+    );
+
+  return (
+    <View {...props} className="bg-neutral-900 p-4 rounded-2xl">
+      <Text className="text-lg font-bold mb-2">Active downloads</Text>
+      <View className="space-y-2">
+        {processes?.map((p) => (
+          <DownloadCard key={p.id} process={p} />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+interface DownloadCardProps extends TouchableOpacityProps {
+  process: JobStatus;
+}
+
+const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
+  const { processes, startDownload } = useDownload();
+  const router = useRouter();
+  const { removeProcess, setProcesses } = useDownload();
+  const [settings] = useSettings();
+  const queryClient = useQueryClient();
+
+  const cancelJobMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!process) throw new Error("No active download");
+
+      if (settings?.downloadMethod === "optimized") {
+        try {
+          const tasks = await checkForExistingDownloads();
+          for (const task of tasks) {
+            if (task.id === id) {
+              task.stop();
+            }
+          }
+        } catch (e) {
+          throw e;
+        } finally {
+          await removeProcess(id);
+          await queryClient.refetchQueries({ queryKey: ["jobs"] });
+        }
+      } else {
+        FFmpegKit.cancel();
+        setProcesses((prev) => prev.filter((p) => p.id !== id));
+      }
+    },
+    onSuccess: () => {
+      toast.success("Download canceled");
+    },
+    onError: (e) => {
+      console.error(e);
+      toast.error("Could not cancel download");
+    },
+  });
+
+  const eta = (p: JobStatus) => {
+    if (!p.speed || !p.progress) return null;
+
+    const length = p?.item?.RunTimeTicks || 0;
+    const timeLeft = (length - length * (p.progress / 100)) / p.speed;
+    return formatTimeString(timeLeft, "tick");
+  };
+
+  const base64Image = useMemo(() => {
+    return storage.getString(process.item.Id!);
+  }, []);
+
+  return (
+    <TouchableOpacity
+      onPress={() => router.push(`/(auth)/items/page?id=${process.item.Id}`)}
+      className="relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden"
+      {...props}
+    >
+      {(process.status === "optimizing" ||
+        process.status === "downloading") && (
+        <View
+          className={`
+        bg-purple-600 h-1 absolute bottom-0 left-0
+        `}
+          style={{
+            width: process.progress
+              ? `${Math.max(5, process.progress)}%`
+              : "5%",
+          }}
+        ></View>
+      )}
+      <View className="px-3 py-1.5 flex flex-col w-full">
+        <View className="flex flex-row items-center w-full">
+          {base64Image && (
+            <View className="w-14 aspect-[10/15] rounded-lg overflow-hidden mr-4">
+              <Image
+                source={{
+                  uri: `data:image/jpeg;base64,${base64Image}`,
+                }}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  resizeMode: "cover",
+                }}
+              />
+            </View>
+          )}
+          <View className="shrink mb-1">
+            <Text className="text-xs opacity-50">{process.item.Type}</Text>
+            <Text className="font-semibold shrink">{process.item.Name}</Text>
+            <Text className="text-xs opacity-50">
+              {process.item.ProductionYear}
+            </Text>
+            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+              {process.progress === 0 ? (
+                <ActivityIndicator size={"small"} color={"white"} />
+              ) : (
+                <Text className="text-xs">{process.progress.toFixed(0)}%</Text>
+              )}
+              {process.speed && (
+                <Text className="text-xs">{process.speed?.toFixed(2)}x</Text>
+              )}
+              {eta(process) && (
+                <Text className="text-xs">ETA {eta(process)}</Text>
+              )}
+            </View>
+
+            <View className="flex flex-row items-center space-x-2 mt-1 text-purple-600">
+              <Text className="text-xs capitalize">{process.status}</Text>
+            </View>
+          </View>
+          <TouchableOpacity
+            disabled={cancelJobMutation.isPending}
+            onPress={() => cancelJobMutation.mutate(process.id)}
+            className="ml-auto"
+          >
+            {cancelJobMutation.isPending ? (
+              <ActivityIndicator size="small" color="white" />
+            ) : (
+              <Ionicons name="close" size={24} color="red" />
+            )}
+          </TouchableOpacity>
+        </View>
+        {process.status === "completed" && (
+          <View className="flex flex-row mt-4 space-x-4">
+            <Button
+              onPress={() => {
+                startDownload(process);
+              }}
+              className="w-full"
+            >
+              Download now
+            </Button>
+          </View>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
--- a/components/downloads/EpisodeCard.tsx
+++ b/components/downloads/EpisodeCard.tsx
@@ -1,39 +1,41 @@
-import React, { useCallback } from "react";
-import { TouchableOpacity } from "react-native";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as ContextMenu from "zeego/context-menu";
 import * as Haptics from "expo-haptics";
-import * as FileSystem from "expo-file-system";
-import { useAtom } from "jotai";
+import React, { useCallback, useMemo, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import {
+  ActionSheetProvider,
+  useActionSheet,
+} from "@expo/react-native-action-sheet";

+import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
 import { Text } from "../common/Text";
-import { useFiles } from "@/hooks/useFiles";
-import { useSettings } from "@/utils/atoms/settings";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useRouter } from "expo-router";
+import { useDownload } from "@/providers/DownloadProvider";
+import { storage } from "@/utils/mmkv";
+import { Image } from "expo-image";
+import { ItemCardText } from "../ItemCardText";
+import { Ionicons } from "@expo/vector-icons";

 interface EpisodeCardProps {
  item: BaseItemDto;
 }

 /**
- * EpisodeCard component displays an episode with context menu options.
+ * EpisodeCard component displays an episode with action sheet options.
 * @param {EpisodeCardProps} props - The component props.
 * @returns {React.ReactElement} The rendered EpisodeCard component.
 */
 export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
-  const { deleteFile } = useFiles();
-  const router = useRouter();
+  const { deleteFile } = useDownload();
+  const { openFile } = useDownloadedFileOpener();
+  const { showActionSheetWithOptions } = useActionSheet();

-  const { startDownloadedFilePlayback } = usePlayback();
+  const base64Image = useMemo(() => {
+    return storage.getString(item.Id!);
+  }, []);

-  const handleOpenFile = useCallback(async () => {
-    startDownloadedFilePlayback({
-      item,
-      url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
-    });
-    router.push("/play");
-  }, [item, startDownloadedFilePlayback]);
+  const handleOpenFile = useCallback(() => {
+    openFile(item);
+  }, [item, openFile]);

  /**
   * Handles deleting the file with haptic feedback.
@@ -45,43 +47,70 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
    }
  }, [deleteFile, item.Id]);

-  const contextMenuOptions = [
-    {
-      label: "Delete",
-      onSelect: handleDeleteFile,
-      destructive: true,
-    },
-  ];
+  const showActionSheet = useCallback(() => {
+    const options = ["Delete", "Cancel"];
+    const destructiveButtonIndex = 0;
+    const cancelButtonIndex = 1;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+        destructiveButtonIndex,
+      },
+      (selectedIndex) => {
+        switch (selectedIndex) {
+          case destructiveButtonIndex:
+            // Delete
+            handleDeleteFile();
+            break;
+          case cancelButtonIndex:
+            // Cancelled
+            break;
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, handleDeleteFile]);

  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <TouchableOpacity
-          onPress={handleOpenFile}
-          className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
-        >
-          <Text className="font-bold">{item.Name}</Text>
-          <Text className="text-xs opacity-50">Episode {item.IndexNumber}</Text>
-        </TouchableOpacity>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content
-        alignOffset={0}
-        avoidCollisions
-        collisionPadding={10}
-        loop={false}
-      >
-        {contextMenuOptions.map((option) => (
-          <ContextMenu.Item
-            key={option.label}
-            onSelect={option.onSelect}
-            destructive={option.destructive}
-          >
-            <ContextMenu.ItemTitle style={{ color: "red" }}>
-              {option.label}
-            </ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        ))}
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+    <TouchableOpacity
+      onPress={handleOpenFile}
+      onLongPress={showActionSheet}
+      className="flex flex-col w-44 mr-2"
+    >
+      {base64Image ? (
+        <View className="w-44 aspect-video rounded-lg overflow-hidden">
+          <Image
+            source={{
+              uri: `data:image/jpeg;base64,${base64Image}`,
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              resizeMode: "cover",
+            }}
+          />
+        </View>
+      ) : (
+        <View className="w-44 aspect-video rounded-lg bg-neutral-900 flex items-center justify-center">
+          <Ionicons
+            name="image-outline"
+            size={24}
+            color="gray"
+            className="self-center mt-16"
+          />
+        </View>
+      )}
+      <ItemCardText item={item} />
+    </TouchableOpacity>
  );
 };
+
+// Wrap the parent component with ActionSheetProvider
+export const EpisodeCardWithActionSheet: React.FC<EpisodeCardProps> = (
+  props
+) => (
+  <ActionSheetProvider>
+    <EpisodeCard {...props} />
+  </ActionSheetProvider>
+);
--- a/components/downloads/MovieCard.tsx
+++ b/components/downloads/MovieCard.tsx
@@ -1,38 +1,40 @@
+import {
+  ActionSheetProvider,
+  useActionSheet,
+} from "@expo/react-native-action-sheet";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import * as FileSystem from "expo-file-system";
 import * as Haptics from "expo-haptics";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
 import { TouchableOpacity, View } from "react-native";
-import * as ContextMenu from "zeego/context-menu";

-import { useFiles } from "@/hooks/useFiles";
-import { runtimeTicksToMinutes } from "@/utils/time";
-import { Text } from "../common/Text";
-
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { useRouter } from "expo-router";
+import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
+import { useDownload } from "@/providers/DownloadProvider";
+import { storage } from "@/utils/mmkv";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
+import { ItemCardText } from "../ItemCardText";

 interface MovieCardProps {
  item: BaseItemDto;
 }

 /**
- * MovieCard component displays a movie with context menu options.
+ * MovieCard component displays a movie with action sheet options.
 * @param {MovieCardProps} props - The component props.
 * @returns {React.ReactElement} The rendered MovieCard component.
 */
 export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
-  const { deleteFile } = useFiles();
-  const router = useRouter();
-  const { startDownloadedFilePlayback } = usePlayback();
+  const { deleteFile } = useDownload();
+  const { openFile } = useDownloadedFileOpener();
+  const { showActionSheetWithOptions } = useActionSheet();

  const handleOpenFile = useCallback(() => {
-    startDownloadedFilePlayback({
-      item,
-      url: `${FileSystem.documentDirectory}/${item.Id}.mp4`,
-    });
-    router.push("/play");
-  }, [item, startDownloadedFilePlayback]);
+    openFile(item);
+  }, [item, openFile]);
+
+  const base64Image = useMemo(() => {
+    return storage.getString(item.Id!);
+  }, []);

  /**
   * Handles deleting the file with haptic feedback.
@@ -44,48 +46,64 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
    }
  }, [deleteFile, item.Id]);

-  const contextMenuOptions = [
-    {
-      label: "Delete",
-      onSelect: handleDeleteFile,
-      destructive: true,
-    },
-  ];
+  const showActionSheet = useCallback(() => {
+    const options = ["Delete", "Cancel"];
+    const destructiveButtonIndex = 0;
+    const cancelButtonIndex = 1;
+
+    showActionSheetWithOptions(
+      {
+        options,
+        cancelButtonIndex,
+        destructiveButtonIndex,
+      },
+      (selectedIndex) => {
+        switch (selectedIndex) {
+          case destructiveButtonIndex:
+            // Delete
+            handleDeleteFile();
+            break;
+          case cancelButtonIndex:
+            // Cancelled
+            break;
+        }
+      }
+    );
+  }, [showActionSheetWithOptions, handleDeleteFile]);

  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <TouchableOpacity
-          onPress={handleOpenFile}
-          className="bg-neutral-900 border border-neutral-800 rounded-2xl p-4"
-        >
-          <Text className="font-bold">{item.Name}</Text>
-          <View className="flex flex-col">
-            <Text className="text-xs opacity-50">{item.ProductionYear}</Text>
-            <Text className="text-xs opacity-50">
-              {runtimeTicksToMinutes(item.RunTimeTicks)}
-            </Text>
-          </View>
-        </TouchableOpacity>
-      </ContextMenu.Trigger>
-      <ContextMenu.Content
-        loop={false}
-        alignOffset={0}
-        avoidCollisions={false}
-        collisionPadding={0}
-      >
-        {contextMenuOptions.map((option) => (
-          <ContextMenu.Item
-            key={option.label}
-            onSelect={option.onSelect}
-            destructive={option.destructive}
-          >
-            <ContextMenu.ItemTitle style={{ color: "red" }}>
-              {option.label}
-            </ContextMenu.ItemTitle>
-          </ContextMenu.Item>
-        ))}
-      </ContextMenu.Content>
-    </ContextMenu.Root>
+    <TouchableOpacity onPress={handleOpenFile} onLongPress={showActionSheet}>
+      {base64Image ? (
+        <View className="w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900">
+          <Image
+            source={{
+              uri: `data:image/jpeg;base64,${base64Image}`,
+            }}
+            style={{
+              width: "100%",
+              height: "100%",
+              resizeMode: "cover",
+            }}
+          />
+        </View>
+      ) : (
+        <View className="w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center">
+          <Ionicons
+            name="image-outline"
+            size={24}
+            color="gray"
+            className="self-center mt-16"
+          />
+        </View>
+      )}
+      <ItemCardText item={item} />
+    </TouchableOpacity>
  );
 };
+
+// Wrap the parent component with ActionSheetProvider
+export const MovieCardWithActionSheet: React.FC<MovieCardProps> = (props) => (
+  <ActionSheetProvider>
+    <MovieCard {...props} />
+  </ActionSheetProvider>
+);
--- a/components/downloads/SeriesCard.tsx
+++ b/components/downloads/SeriesCard.tsx
@@ -1,5 +1,5 @@
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { EpisodeCard } from "./EpisodeCard";
 import { Text } from "../common/Text";
 import { useMemo } from "react";
@@ -22,26 +22,32 @@ export const SeriesCard: React.FC<{ items: BaseItemDto[] }> = ({ items }) => {
    );
  }, [items]);

+  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) => {
+    return a.IndexNumber! > b.IndexNumber! ? 1 : -1;
+  };
+
  return (
    <View>
-      <View className="flex flex-row items-center justify-between">
-        <Text className="text-2xl font-bold shrink">{items[0].SeriesName}</Text>
+      <View className="flex flex-row items-center justify-between px-4">
+        <Text className="text-lg font-bold shrink">{items[0].SeriesName}</Text>
        <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center">
          <Text className="text-xs font-bold">{items.length}</Text>
        </View>
      </View>

-      <Text className="opacity-50 mb-2">TV-Series</Text>
+      <Text className="opacity-50 mb-2 px-4">TV-Series</Text>
      {groupBySeason.map((seasonItems, seasonIndex) => (
        <View key={seasonIndex}>
-          <Text className="mb-2 font-semibold">
+          <Text className="mb-2 font-semibold px-4">
            {seasonItems[0].SeasonName}
          </Text>
-          {seasonItems.map((item, index) => (
-            <View className="mb-2" key={index}>
-              <EpisodeCard item={item} />
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <View className="px-4 flex flex-row">
+              {seasonItems.sort(sortByIndex)?.map((item, index) => (
+                <EpisodeCard item={item} key={index} />
+              ))}
            </View>
-          ))}
+          </ScrollView>
        </View>
      ))}
    </View>
--- a/components/home/LargeMovieCarousel.tsx
+++ b/components/home/LargeMovieCarousel.tsx
@@ -84,13 +84,7 @@ export const LargeMovieCarousel: React.FC<Props> = ({ ...props }) => {

  const width = Dimensions.get("screen").width;

-  if (l1 || l2)
-    return (
-      <View className="h-[242px] flex items-center justify-center">
-        <Loader />
-      </View>
-    );
-
+  if (l1 || l2) return null;
  if (!popularItems) return null;

  return (
--- a/components/home/ScrollingCollectionList.tsx
+++ b/components/home/ScrollingCollectionList.tsx
@@ -1,23 +1,20 @@
 import { Text } from "@/components/common/Text";
 import MoviePoster from "@/components/posters/MoviePoster";
-import { useSettings } from "@/utils/atoms/settings";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
  useQuery,
  type QueryFunction,
  type QueryKey,
 } from "@tanstack/react-query";
-import { View, ViewProps } from "react-native";
+import { ScrollView, View, ViewProps } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { ItemCardText } from "../ItemCardText";
-import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import SeriesPoster from "../posters/SeriesPoster";

 interface Props extends ViewProps {
  title?: string | null;
  orientation?: "horizontal" | "vertical";
-  height?: "small" | "large";
  disabled?: boolean;
  queryKey: QueryKey;
  queryFn: QueryFunction<BaseItemDto[]>;
@@ -26,58 +23,97 @@ interface Props extends ViewProps {
 export const ScrollingCollectionList: React.FC<Props> = ({
  title,
  orientation = "vertical",
-  height = "small",
  disabled = false,
  queryFn,
  queryKey,
  ...props
 }) => {
-  const [settings] = useSettings();
+  // console.log(queryKey);
+
  const { data, isLoading } = useQuery({
-    queryKey,
+    queryKey: queryKey,
    queryFn,
-    enabled: !disabled,
-    staleTime: 60 * 1000,
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
  });

  if (disabled || !title) return null;

  return (
-    <View {...props}>
+    <View {...props} className="">
      <Text className="px-4 text-lg font-bold mb-2 text-neutral-100">
        {title}
      </Text>
-      <HorizontalScroll
-        data={data}
-        height={orientation === "vertical" ? 247 : 164}
-        loading={isLoading}
-        renderItem={(item, index) => (
-          <TouchableItemRouter
-            key={index}
-            item={item}
-            className={`flex flex-col
+      {isLoading === false && data?.length === 0 && (
+        <View className="px-4">
+          <Text className="text-neutral-500">No items</Text>
+        </View>
+      )}
+      {isLoading ? (
+        <View
+          className={`
+            flex flex-row gap-2 px-4
+        `}
+        >
+          {[1, 2, 3].map((i) => (
+            <View className="w-44" key={i}>
+              <View className="bg-neutral-900 h-24 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>
+      ) : (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View className="px-4 flex flex-row">
+            {data?.map((item, index) => (
+              <TouchableItemRouter
+                item={item}
+                key={index}
+                className={`
+              mr-2 
+
              ${orientation === "horizontal" ? "w-44" : "w-28"}
            `}
-          >
-            <View>
-              {item.Type === "Episode" && orientation === "horizontal" && (
-                <ContinueWatchingPoster item={item} />
-              )}
-              {item.Type === "Episode" && orientation === "vertical" && (
-                <SeriesPoster item={item} />
-              )}
-              {item.Type === "Movie" && orientation === "horizontal" && (
-                <ContinueWatchingPoster item={item} />
-              )}
-              {item.Type === "Movie" && orientation === "vertical" && (
-                <MoviePoster item={item} />
-              )}
-              {item.Type === "Series" && <SeriesPoster item={item} />}
-              <ItemCardText item={item} />
-            </View>
-          </TouchableItemRouter>
-        )}
-      />
+              >
+                {item.Type === "Episode" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Episode" && orientation === "vertical" && (
+                  <SeriesPoster item={item} />
+                )}
+                {item.Type === "Movie" && orientation === "horizontal" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                {item.Type === "Movie" && orientation === "vertical" && (
+                  <MoviePoster item={item} />
+                )}
+                {item.Type === "Series" && <SeriesPoster item={item} />}
+                {item.Type === "Program" && (
+                  <ContinueWatchingPoster item={item} />
+                )}
+                <ItemCardText item={item} />
+              </TouchableItemRouter>
+            ))}
+          </View>
+        </ScrollView>
+      )}
    </View>
  );
 };
--- a/components/library/LibraryItemCard.tsx
+++ b/components/library/LibraryItemCard.tsx
@@ -11,21 +11,14 @@ import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { TouchableOpacityProps, View } from "react-native";
-import { getColors } from "react-native-image-colors";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";

 interface Props extends TouchableOpacityProps {
  library: BaseItemDto;
 }

-type LibraryColor = {
-  dominantColor: string;
-  averageColor: string;
-  secondary: string;
-};
-
 type IconName = React.ComponentProps<typeof Ionicons>["name"];

 const icons: Record<CollectionType, IconName> = {
@@ -48,12 +41,6 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
  const [user] = useAtom(userAtom);
  const [settings] = useSettings();

-  const [imageInfo, setImageInfo] = useState<LibraryColor>({
-    dominantColor: "#fff",
-    averageColor: "#fff",
-    secondary: "#fff",
-  });
-
  const url = useMemo(
    () =>
      getPrimaryImageUrl({
@@ -74,42 +61,9 @@ export const LibraryItemCard: React.FC<Props> = ({ library, ...props }) => {
      });
      return response.data.TotalRecordCount;
    },
+    staleTime: 1000 * 60 * 60,
  });

-  useEffect(() => {
-    if (url) {
-      getColors(url, {
-        fallback: "#fff",
-        cache: true,
-        key: url,
-      })
-        .then((colors) => {
-          let dominantColor: string = "#fff";
-          let averageColor: string = "#fff";
-          let secondary: string = "#fff";
-
-          if (colors.platform === "android") {
-            dominantColor = colors.dominant;
-            averageColor = colors.average;
-            secondary = colors.muted;
-          } else if (colors.platform === "ios") {
-            dominantColor = colors.primary;
-            averageColor = colors.background;
-            secondary = colors.detail;
-          }
-
-          setImageInfo({
-            dominantColor,
-            averageColor,
-            secondary,
-          });
-        })
-        .catch((error) => {
-          console.error("Error getting colors", error);
-        });
-    }
-  }, [url]);
-
  if (!url) return null;

  if (settings?.libraryOptions?.display === "row") {
--- a/components/livetv/HourHeader.tsx
+++ b/components/livetv/HourHeader.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { View } from "react-native";
+import { Text } from "../common/Text";
+
+export const HourHeader = ({ height }: { height: number }) => {
+  const now = new Date();
+  const currentHour = now.getHours();
+  const hoursRemaining = 24 - currentHour;
+  const hours = generateHours(currentHour, hoursRemaining);
+
+  return (
+    <View
+      className="flex flex-row"
+      style={{
+        height,
+      }}
+    >
+      {hours.map((hour, index) => (
+        <HourCell key={index} hour={hour} />
+      ))}
+    </View>
+  );
+};
+
+const HourCell = ({ hour }: { hour: Date }) => (
+  <View className="w-[200px] flex items-center justify-center bg-neutral-800">
+    <Text className="text-xs text-gray-600">
+      {hour.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      })}
+    </Text>
+  </View>
+);
+
+const generateHours = (startHour: number, count: number): Date[] => {
+  const now = new Date();
+  return Array.from({ length: count }, (_, i) => {
+    const hour = new Date(now);
+    hour.setHours(startHour + i, 0, 0, 0);
+    return hour;
+  });
+};
--- a/components/livetv/LiveTVGuideRow.tsx
+++ b/components/livetv/LiveTVGuideRow.tsx
@@ -0,0 +1,96 @@
+import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useMemo, useRef } from "react";
+import { Dimensions, View } from "react-native";
+import { Text } from "../common/Text";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
+
+export const LiveTVGuideRow = ({
+  channel,
+  programs,
+  scrollX = 0,
+  isVisible = true,
+}: {
+  channel: BaseItemDto;
+  programs?: BaseItemDto[] | null;
+  scrollX?: number;
+  isVisible?: boolean;
+}) => {
+  const positionRefs = useRef<{ [key: string]: number }>({});
+  const screenWidth = Dimensions.get("window").width;
+
+  const calculateWidth = (s?: string | null, e?: string | null) => {
+    if (!s || !e) return 0;
+    const start = new Date(s);
+    const end = new Date(e);
+    const duration = end.getTime() - start.getTime();
+    const minutes = duration / 60000;
+    const width = (minutes / 60) * 200;
+    return width;
+  };
+
+  const programsWithPositions = useMemo(() => {
+    let cumulativeWidth = 0;
+    return programs
+      ?.filter((p) => p.ChannelId === channel.Id)
+      .map((p) => {
+        const width = calculateWidth(p.StartDate, p.EndDate);
+        const position = cumulativeWidth;
+        cumulativeWidth += width;
+        return { ...p, width, position };
+      });
+  }, [programs, channel.Id]);
+
+  const isCurrentlyLive = (program: BaseItemDto) => {
+    if (!program.StartDate || !program.EndDate) return false;
+    const now = new Date();
+    const start = new Date(program.StartDate);
+    const end = new Date(program.EndDate);
+    return now >= start && now <= end;
+  };
+
+  if (!isVisible) {
+    return <View style={{ height: 64 }} />;
+  }
+
+  return (
+    <View key={channel.ChannelNumber} className="flex flex-row h-16">
+      {programsWithPositions?.map((p) => (
+        <TouchableItemRouter item={p} key={p.Id}>
+          <View
+            style={{
+              width: p.width,
+              height: "100%",
+              position: "absolute",
+              left: p.position,
+              backgroundColor: isCurrentlyLive(p)
+                ? "rgba(255, 255, 255, 0.1)"
+                : "transparent",
+            }}
+            className="flex flex-col items-center justify-center border border-neutral-800 overflow-hidden"
+          >
+            {(() => {
+              return (
+                <View
+                  style={{
+                    marginLeft:
+                      p.width > screenWidth && scrollX > p.position
+                        ? scrollX - p.position
+                        : 0,
+                  }}
+                  className="px-4 self-start"
+                >
+                  <Text
+                    numberOfLines={2}
+                    className="text-xs text-start self-start"
+                  >
+                    {p.Name}
+                  </Text>
+                </View>
+              );
+            })()}
+          </View>
+        </TouchableItemRouter>
+      ))}
+    </View>
+  );
+};
--- a/components/medialists/MediaListSection.tsx
+++ b/components/medialists/MediaListSection.tsx
@@ -31,10 +31,10 @@ export const MediaListSection: React.FC<Props> = ({
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

-  const { data: collection, isLoading } = useQuery({
+  const { data: collection } = useQuery({
    queryKey,
    queryFn,
-    staleTime: 60 * 1000,
+    staleTime: 0,
  });

  const fetchItems = useCallback(
--- a/components/movies/MoviesTitleHeader.tsx
+++ b/components/movies/MoviesTitleHeader.tsx
@@ -9,10 +9,10 @@ interface Props extends ViewProps {
 export const MoviesTitleHeader: React.FC<Props> = ({ item, ...props }) => {
  return (
    <View {...props}>
-      <Text className=" font-bold text-2xl mb-1" selectable>
+      <Text uiTextView selectable className="font-bold text-2xl mb-1">
        {item?.Name}
      </Text>
-      <Text className=" opacity-50">{item?.ProductionYear}</Text>
+      <Text className="opacity-50">{item?.ProductionYear}</Text>
    </View>
  );
 };
--- a/components/music/SongsListItem.tsx
+++ b/components/music/SongsListItem.tsx
@@ -1,14 +1,12 @@
 import { Text } from "@/components/common/Text";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { usePlayback } from "@/providers/PlaybackProvider";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios from "@/utils/profiles/ios";
+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 { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
+import { useCallback } from "react";
 import { TouchableOpacity, TouchableOpacityProps, View } from "react-native";
 import CastContext, {
  PlayServicesState,
@@ -35,11 +33,11 @@ export const SongsListItem: React.FC<Props> = ({
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const castDevice = useCastDevice();
-
+  const router = useRouter();
  const client = useRemoteMediaClient();
  const { showActionSheetWithOptions } = useActionSheet();

-  const { setCurrentlyPlayingState } = usePlayback();
+  const { setPlaySettings } = usePlaySettings();

  const openSelect = () => {
    if (!castDevice?.deviceId) {
@@ -70,32 +68,18 @@ export const SongsListItem: React.FC<Props> = ({
    );
  };

-  const play = async (type: "device" | "cast") => {
+  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 response = await getMediaInfoApi(api!).getPlaybackInfo({
-      itemId: item?.Id,
-      userId: user?.Id,
-    });
-
-    const sessionData = response.data;
-
-    const url = await getStreamUrl({
-      api,
-      userId: user.Id,
+    const data = await setPlaySettings({
      item,
-      startTimeTicks: item?.UserData?.PlaybackPositionTicks || 0,
-      sessionData,
-      deviceProfile: castDevice?.deviceId ? chromecastProfile : ios,
-      mediaSourceId: item.Id,
    });

-    if (!url || !item) {
-      console.warn("No url or item", url, item.Id);
-      return;
+    if (!data?.url) {
+      throw new Error("play-music ~ No stream url");
    }

    if (type === "cast" && client) {
@@ -105,7 +89,7 @@ export const SongsListItem: React.FC<Props> = ({
        else {
          client.loadMedia({
            mediaInfo: {
-              contentUrl: url,
+              contentUrl: data.url!,
              contentType: "video/mp4",
              metadata: {
                type: item.Type === "Episode" ? "tvShow" : "movie",
@@ -118,13 +102,10 @@ export const SongsListItem: React.FC<Props> = ({
        }
      });
    } else {
-      console.log("Playing on device", url, item.Id);
-      setCurrentlyPlayingState({
-        item,
-        url,
-      });
+      console.log("Playing on device", data.url, item.Id);
+      router.push("/music-player");
    }
-  };
+  }, []);

  return (
    <TouchableOpacity
--- a/components/posters/MoviePoster.tsx
+++ b/components/posters/MoviePoster.tsx
@@ -36,7 +36,7 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
  }, [item]);

  return (
-    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
+    <View className="relative rounded-lg overflow-hidden border border-neutral-900 w-28 aspect-[10/15]">
      <Image
        placeholder={{
          blurhash,
@@ -57,7 +57,6 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
          width: "100%",
        }}
      />
-
      <WatchedIndicator item={item} />
      {showProgress && progress > 0 && (
        <View className="h-1 bg-red-600 w-full"></View>
--- a/components/posters/SeriesPoster.tsx
+++ b/components/posters/SeriesPoster.tsx
@@ -32,7 +32,7 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
  }, [item]);

  return (
-    <View className="relative rounded-lg overflow-hidden border border-neutral-900">
+    <View className="w-28 aspect-[10/15] relative rounded-lg overflow-hidden border border-neutral-900 ">
      <Image
        placeholder={{
          blurhash,
@@ -49,7 +49,7 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
        cachePolicy={"memory-disk"}
        contentFit="cover"
        style={{
-          aspectRatio: "10/15",
+          height: "100%",
          width: "100%",
        }}
      />
--- a/components/series/CastAndCrew.tsx
+++ b/components/series/CastAndCrew.tsx
@@ -6,7 +6,7 @@ import {
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
-import React from "react";
+import React, { useMemo } from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
 import { HorizontalScroll } from "../common/HorrizontalScroll";
 import { Text } from "../common/Text";
@@ -20,24 +20,37 @@ interface Props extends ViewProps {
 export const CastAndCrew: React.FC<Props> = ({ item, loading, ...props }) => {
  const [api] = useAtom(apiAtom);

+  const destinctPeople = useMemo(() => {
+    const people: BaseItemPerson[] = [];
+    item?.People?.forEach((person) => {
+      const existingPerson = people.find((p) => p.Id === person.Id);
+      if (existingPerson) {
+        existingPerson.Role = `${existingPerson.Role}, ${person.Role}`;
+      } else {
+        people.push(person);
+      }
+    });
+    return people;
+  }, [item?.People]);
+
  return (
    <View {...props} className="flex flex-col">
      <Text className="text-lg font-bold mb-2 px-4">Cast & Crew</Text>
      <HorizontalScroll
        loading={loading}
+        keyExtractor={(i, idx) => i.Id.toString()}
        height={247}
-        data={item?.People || []}
-        renderItem={(item, index) => (
+        data={destinctPeople}
+        renderItem={(i) => (
          <TouchableOpacity
            onPress={() => {
-              router.push(`/actors/${item.Id}`);
+              router.push(`/actors/${i.Id}`);
            }}
-            key={item.Id}
            className="flex flex-col w-28"
          >
-            <Poster item={item} url={getPrimaryImageUrl({ api, item })} />
-            <Text className="mt-2">{item.Name}</Text>
-            <Text className="text-xs opacity-50">{item.Role}</Text>
+            <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/EpisodeTitleHeader.tsx
+++ b/components/series/EpisodeTitleHeader.tsx
@@ -12,7 +12,7 @@ export const EpisodeTitleHeader: React.FC<Props> = ({ item, ...props }) => {

  return (
    <View {...props}>
-      <Text className="font-bold text-2xl" selectable>
+      <Text uiTextView className="font-bold text-2xl" selectable>
        {item?.Name}
      </Text>
      <View className="flex flex-row items-center mb-1">
--- a/components/series/NextEpisodeButton.tsx
+++ b/components/series/NextEpisodeButton.tsx
@@ -13,7 +13,7 @@ interface Props extends React.ComponentProps<typeof Button> {
  type?: "next" | "previous";
 }

-export const NextEpisodeButton: React.FC<Props> = ({
+export const NextItemButton: React.FC<Props> = ({
  item,
  type = "next",
  ...props
@@ -23,8 +23,8 @@ export const NextEpisodeButton: React.FC<Props> = ({
  const [user] = useAtom(userAtom);
  const [api] = useAtom(apiAtom);

-  const { data: nextEpisode } = useQuery({
-    queryKey: ["nextEpisode", item.Id, item.ParentId, type],
+  const { data: nextItem } = useQuery({
+    queryKey: ["nextItem", item.Id, item.ParentId, type],
    queryFn: async () => {
      if (
        !api ||
@@ -47,16 +47,16 @@ export const NextEpisodeButton: React.FC<Props> = ({
  });

  const disabled = useMemo(() => {
-    if (!nextEpisode) return true;
-    if (nextEpisode.Id === item.Id) return true;
+    if (!nextItem) return true;
+    if (nextItem.Id === item.Id) return true;
    return false;
-  }, [nextEpisode, type]);
+  }, [nextItem, type]);

  if (item.Type !== "Episode") return null;

  return (
    <Button
-      onPress={() => router.setParams({ id: nextEpisode?.Id })}
+      onPress={() => router.setParams({ id: nextItem?.Id })}
      className={`h-12 aspect-square`}
      disabled={disabled}
      {...props}
--- a/components/series/SeasonEpisodesCarousel.tsx
+++ b/components/series/SeasonEpisodesCarousel.tsx
@@ -85,7 +85,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
            userId: user?.Id,
            itemId: previousId,
          }),
-        staleTime: 60 * 1000,
+        staleTime: 60 * 1000 * 5,
      });
    }

@@ -101,7 +101,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
            userId: user?.Id,
            itemId: nextId,
          }),
-        staleTime: 60 * 1000,
+        staleTime: 60 * 1000 * 5,
      });
    }
  }, [episodes, api, user?.Id, item]);
--- a/components/series/SeasonPicker.tsx
+++ b/components/series/SeasonPicker.tsx
@@ -198,11 +198,11 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
              key={e.Id}
              className="flex flex-col mb-4"
            >
-              <View className="flex flex-row items-center mb-2">
-                <View className="w-32 aspect-video overflow-hidden mr-2">
+              <View className="flex flex-row items-start mb-2">
+                <View className="mr-2">
                  <ContinueWatchingPoster
+                    size="small"
                    item={e}
-                    width={128}
                    useEpisodePoster
                  />
                </View>
@@ -217,7 +217,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
                    {runtimeTicksToSeconds(e.RunTimeTicks)}
                  </Text>
                </View>
-                <View className="self-start ml-auto">
+                <View className="self-start ml-auto -mt-0.5">
                  <DownloadItem item={e} />
                </View>
              </View>
--- a/components/settings/SettingToggles.tsx
+++ b/components/settings/SettingToggles.tsx
@@ -1,13 +1,23 @@
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useDownload } from "@/providers/DownloadProvider";
 import {
-  DefaultLanguageOption,
-  DownloadOptions,
-  ScreenOrientationEnum,
-  useSettings,
-} from "@/utils/atoms/settings";
+  apiAtom,
+  getOrSetDeviceId,
+  userAtom,
+} from "@/providers/JellyfinProvider";
+import { ScreenOrientationEnum, useSettings } from "@/utils/atoms/settings";
+import {
+  BACKGROUND_FETCH_TASK,
+  registerBackgroundFetchAsync,
+  unregisterBackgroundFetchAsync,
+} from "@/utils/background-tasks";
+import { getStatistics } from "@/utils/optimize-server";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import * as BackgroundFetch from "expo-background-fetch";
+import * as ScreenOrientation from "expo-screen-orientation";
+import * as TaskManager from "expo-task-manager";
 import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
 import {
  Linking,
  Switch,
@@ -15,27 +25,59 @@ import {
  View,
  ViewProps,
 } from "react-native";
+import { toast } from "sonner-native";
 import * as DropdownMenu from "zeego/dropdown-menu";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
 import { Text } from "../common/Text";
 import { Loader } from "../Loader";
-import { Input } from "../common/Input";
-import { useState } from "react";
-import { Button } from "../Button";
 import { MediaToggles } from "./MediaToggles";
-import * as ScreenOrientation from "expo-screen-orientation";

 interface Props extends ViewProps {}

 export const SettingToggles: React.FC<Props> = ({ ...props }) => {
  const [settings, updateSettings] = useSettings();
+  const { setProcesses } = useDownload();

  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);

  const [marlinUrl, setMarlinUrl] = useState<string>("");
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>(settings?.optimizedVersionsServerUrl || "");

  const queryClient = useQueryClient();

+  /********************
+   * Background task
+   *******************/
+  const checkStatusAsync = async () => {
+    await BackgroundFetch.getStatusAsync();
+    return await TaskManager.isTaskRegisteredAsync(BACKGROUND_FETCH_TASK);
+  };
+
+  useEffect(() => {
+    (async () => {
+      const registered = await checkStatusAsync();
+
+      if (settings?.autoDownload === true && !registered) {
+        registerBackgroundFetchAsync();
+        toast.success("Background downloads enabled");
+      } else if (settings?.autoDownload === false && registered) {
+        unregisterBackgroundFetchAsync();
+        toast.info("Background downloads disabled");
+      } else if (settings?.autoDownload === true && registered) {
+        // Don't to anything
+      } else if (settings?.autoDownload === false && !registered) {
+        // Don't to anything
+      } else {
+        updateSettings({ autoDownload: false });
+      }
+    })();
+  }, [settings?.autoDownload]);
+  /**********************
+   *********************/
+
  const {
    data: mediaListCollections,
    isLoading: isLoadingMediaListCollections,
@@ -204,22 +246,6 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
            </DropdownMenu.Root>
          </View>

-          <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Use external player (VLC)</Text>
-              <Text className="text-xs opacity-50 shrink">
-                Open all videos in VLC instead of the default player. This
-                requries VLC to be installed on the phone.
-              </Text>
-            </View>
-            <Switch
-              value={settings.openInVLC}
-              onValueChange={(value) => {
-                updateSettings({ openInVLC: value, forceDirectPlay: value });
-              }}
-            />
-          </View>
-
          <View className="flex flex-col">
            <View className="flex flex-row items-center justify-between bg-neutral-900 p-4">
              <View className="flex flex-col">
@@ -290,78 +316,6 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
            )}
          </View>

-          <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Force direct play</Text>
-              <Text className="text-xs opacity-50 shrink">
-                This will always request direct play. This is good if you want
-                to try to stream movies you think the device supports.
-              </Text>
-            </View>
-            <Switch
-              value={settings.forceDirectPlay}
-              onValueChange={(value) =>
-                updateSettings({ forceDirectPlay: value })
-              }
-            />
-          </View>
-
-          <View
-            className={`
-        flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
-        ${settings.forceDirectPlay ? "opacity-50 select-none" : ""}
-      `}
-          >
-            <View className="flex flex-col shrink">
-              <Text className="font-semibold">Device profile</Text>
-              <Text className="text-xs opacity-50">
-                A profile used for deciding what audio and video codecs the
-                device supports.
-              </Text>
-            </View>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
-                  <Text>{settings.deviceProfile}</Text>
-                </TouchableOpacity>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content
-                loop={true}
-                side="bottom"
-                align="start"
-                alignOffset={0}
-                avoidCollisions={true}
-                collisionPadding={8}
-                sideOffset={8}
-              >
-                <DropdownMenu.Label>Profiles</DropdownMenu.Label>
-                <DropdownMenu.Item
-                  key="1"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Expo" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Expo</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="2"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Native" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Native</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  key="3"
-                  onSelect={() => {
-                    updateSettings({ deviceProfile: "Old" });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>Old</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </View>
          <View className="flex flex-col">
            <View
              className={`
@@ -413,40 +367,177 @@ export const SettingToggles: React.FC<Props> = ({ ...props }) => {
            </View>
            {settings.searchEngine === "Marlin" && (
              <View className="flex flex-col bg-neutral-900 px-4 pb-4">
-                <>
-                  <View className="flex flex-row items-center space-x-2">
-                    <View className="grow">
-                      <Input
-                        placeholder="Marlin Server URL..."
-                        defaultValue={settings.marlinServerUrl}
-                        value={marlinUrl}
-                        keyboardType="url"
-                        returnKeyType="done"
-                        autoCapitalize="none"
-                        textContentType="URL"
-                        onChangeText={(text) => setMarlinUrl(text)}
-                      />
-                    </View>
-                    <Button
-                      color="purple"
-                      className="shrink w-16 h-12"
-                      onPress={() => {
-                        updateSettings({ marlinServerUrl: marlinUrl });
-                      }}
-                    >
-                      Save
-                    </Button>
+                <View className="flex flex-row items-center space-x-2">
+                  <View className="grow">
+                    <Input
+                      placeholder="Marlin Server URL..."
+                      defaultValue={settings.marlinServerUrl}
+                      value={marlinUrl}
+                      keyboardType="url"
+                      returnKeyType="done"
+                      autoCapitalize="none"
+                      textContentType="URL"
+                      onChangeText={(text) => setMarlinUrl(text)}
+                    />
                  </View>
+                  <Button
+                    color="purple"
+                    className="shrink w-16 h-12"
+                    onPress={() => {
+                      updateSettings({
+                        marlinServerUrl: marlinUrl.endsWith("/")
+                          ? marlinUrl
+                          : marlinUrl + "/",
+                      });
+                    }}
+                  >
+                    Save
+                  </Button>
+                </View>

+                {settings.marlinServerUrl && (
                  <Text className="text-neutral-500 mt-2">
-                    {settings.marlinServerUrl}
+                    Current: {settings.marlinServerUrl}
                  </Text>
-                </>
+                )}
              </View>
            )}
          </View>
        </View>
      </View>
+
+      <View className="mt-4">
+        <Text className="text-lg font-bold mb-2">Downloads</Text>
+        <View className="flex flex-col rounded-xl overflow-hidden  divide-y-2 divide-solid divide-neutral-800">
+          <View
+            className={`
+                flex flex-row items-center space-x-2 justify-between bg-neutral-900 p-4
+              `}
+          >
+            <View className="flex flex-col shrink">
+              <Text className="font-semibold">Download method</Text>
+              <Text className="text-xs opacity-50">
+                Choose the download method to use. Optimized requires the
+                optimized server.
+              </Text>
+            </View>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <TouchableOpacity className="bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between">
+                  <Text>
+                    {settings.downloadMethod === "remux"
+                      ? "Default"
+                      : "Optimized"}
+                  </Text>
+                </TouchableOpacity>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content
+                loop={true}
+                side="bottom"
+                align="start"
+                alignOffset={0}
+                avoidCollisions={true}
+                collisionPadding={8}
+                sideOffset={8}
+              >
+                <DropdownMenu.Label>Methods</DropdownMenu.Label>
+                <DropdownMenu.Item
+                  key="1"
+                  onSelect={() => {
+                    updateSettings({ downloadMethod: "remux" });
+                    setProcesses([]);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>Default</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  key="2"
+                  onSelect={() => {
+                    updateSettings({ downloadMethod: "optimized" });
+                    setProcesses([]);
+                    queryClient.invalidateQueries({ queryKey: ["search"] });
+                  }}
+                >
+                  <DropdownMenu.ItemTitle>Optimized</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          </View>
+          <View className="flex flex-row space-x-2 items-center justify-between bg-neutral-900 p-4">
+            <View className="flex flex-col shrink">
+              <Text className="font-semibold">Auto download</Text>
+              <Text className="text-xs opacity-50 shrink">
+                This will automatically download the media file when it's
+                finished optimizing on the server.
+              </Text>
+            </View>
+            <Switch
+              value={settings.autoDownload}
+              onValueChange={(value) => updateSettings({ autoDownload: value })}
+            />
+          </View>
+          <View
+            pointerEvents={
+              settings.downloadMethod === "optimized" ? "auto" : "none"
+            }
+            className={`
+              ${
+                settings.downloadMethod === "optimized"
+                  ? "opacity-100"
+                  : "opacity-50"
+              }`}
+          >
+            <View className="flex flex-col bg-neutral-900 px-4 py-4">
+              <View className="flex flex-col shrink mb-2">
+                <View className="flex flex-row justify-between items-center">
+                  <Text className="font-semibold">
+                    Optimized versions server
+                  </Text>
+                </View>
+                <Text className="text-xs opacity-50">
+                  Set the URL for the optimized versions server for downloads.
+                </Text>
+              </View>
+              <View></View>
+              <View className="flex flex-col">
+                <Input
+                  placeholder="Optimized versions server URL..."
+                  value={optimizedVersionsServerUrl}
+                  keyboardType="url"
+                  returnKeyType="done"
+                  autoCapitalize="none"
+                  textContentType="URL"
+                  onChangeText={(text) => setOptimizedVersionsServerUrl(text)}
+                />
+                <Button
+                  color="purple"
+                  className="h-12 mt-2"
+                  onPress={async () => {
+                    updateSettings({
+                      optimizedVersionsServerUrl:
+                        optimizedVersionsServerUrl.length === 0
+                          ? null
+                          : optimizedVersionsServerUrl.endsWith("/")
+                          ? optimizedVersionsServerUrl
+                          : optimizedVersionsServerUrl + "/",
+                    });
+                    const res = await getStatistics({
+                      url: settings?.optimizedVersionsServerUrl,
+                      authHeader: api?.accessToken,
+                      deviceId: await getOrSetDeviceId(),
+                    });
+                    if (res) {
+                      toast.success("Connected");
+                    } else toast.error("Could not connect");
+                  }}
+                >
+                  Save
+                </Button>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
    </View>
  );
 };
--- a/components/stacks/NestedTabPageStack.tsx
+++ b/components/stacks/NestedTabPageStack.tsx
@@ -1,5 +1,3 @@
-import { Stack } from "expo-router";
-import { Chromecast } from "../Chromecast";
 import { HeaderBackButton } from "../common/HeaderBackButton";

 const commonScreenOptions = {
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -0,0 +1,599 @@
+import { Text } from "@/components/common/Text";
+import { Loader } from "@/components/Loader";
+import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import {
+  TrackInfo,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import { useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { writeToLog } from "@/utils/log";
+import {
+  formatTimeString,
+  msToTicks,
+  secondsToMs,
+  ticksToMs,
+  ticksToSeconds,
+} from "@/utils/time";
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { Image } from "expo-image";
+import { useRouter } from "expo-router";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Dimensions,
+  Platform,
+  Pressable,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { Slider } from "react-native-awesome-slider";
+import {
+  runOnJS,
+  SharedValue,
+  useAnimatedReaction,
+  useSharedValue,
+} from "react-native-reanimated";
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import { VideoRef } from "react-native-video";
+import { ControlProvider } from "./contexts/ControlContext";
+import { VideoProvider } from "./contexts/VideoContext";
+import * as Haptics from "expo-haptics";
+import DropdownViewDirect from "./dropdown/DropdownViewDirect";
+import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding";
+
+interface Props {
+  item: BaseItemDto;
+  videoRef: React.MutableRefObject<VlcPlayerViewRef | VideoRef | null>;
+  isPlaying: boolean;
+  isSeeking: SharedValue<boolean>;
+  cacheProgress: SharedValue<number>;
+  progress: SharedValue<number>;
+  isBuffering: boolean;
+  showControls: boolean;
+  ignoreSafeAreas?: boolean;
+  setIgnoreSafeAreas: React.Dispatch<React.SetStateAction<boolean>>;
+  enableTrickplay?: boolean;
+  togglePlay: (ticks: number) => void;
+  setShowControls: (shown: boolean) => void;
+  offline?: boolean;
+  isVideoLoaded?: boolean;
+  mediaSource?: MediaSourceInfo | null;
+  seek: (ticks: number) => void;
+  play: (() => Promise<void>) | (() => void);
+  pause: () => void;
+  getAudioTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
+  getSubtitleTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
+  setSubtitleURL?: (url: string, customName: string) => void;
+  setSubtitleTrack?: (index: number) => void;
+  setAudioTrack?: (index: number) => void;
+  stop?: (() => Promise<void>) | (() => void);
+  isVlc?: boolean;
+}
+
+export const Controls: React.FC<Props> = ({
+  item,
+  seek,
+  play,
+  pause,
+  togglePlay,
+  isPlaying,
+  isSeeking,
+  progress,
+  isBuffering,
+  cacheProgress,
+  showControls,
+  setShowControls,
+  ignoreSafeAreas,
+  setIgnoreSafeAreas,
+  mediaSource,
+  isVideoLoaded,
+  getAudioTracks,
+  getSubtitleTracks,
+  setSubtitleURL,
+  setSubtitleTrack,
+  setAudioTrack,
+  stop,
+  offline = false,
+  enableTrickplay = true,
+  isVlc = false,
+}) => {
+  const [settings] = useSettings();
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  const { previousItem, nextItem } = useAdjacentItems({ item });
+  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
+    item,
+    !offline && enableTrickplay
+  );
+
+  const [currentTime, setCurrentTime] = useState(0);
+  const [remainingTime, setRemainingTime] = useState(0);
+
+  const min = useSharedValue(0);
+  const max = useSharedValue(item.RunTimeTicks || 0);
+
+  const wasPlayingRef = useRef(false);
+  const lastProgressRef = useRef<number>(0);
+
+  const { showSkipButton, skipIntro } = useIntroSkipper(
+    offline ? undefined : item.Id,
+    currentTime,
+    seek,
+    play,
+    isVlc
+  );
+
+  const { showSkipCreditButton, skipCredit } = useCreditSkipper(
+    offline ? undefined : item.Id,
+    currentTime,
+    seek,
+    play,
+    isVlc
+  );
+
+  const goToPreviousItem = useCallback(() => {
+    if (!previousItem || !settings) return;
+
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(previousItem, settings);
+
+    const queryParams = new URLSearchParams({
+      itemId: previousItem.Id ?? "", // Ensure itemId is a string
+      audioIndex: audioIndex?.toString() ?? "",
+      subtitleIndex: subtitleIndex?.toString() ?? "",
+      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrate.toString(),
+    }).toString();
+
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  }, [previousItem, settings]);
+
+  const goToNextItem = useCallback(() => {
+    if (!nextItem || !settings) return;
+
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+    const { bitrate, mediaSource, audioIndex, subtitleIndex } =
+      getDefaultPlaySettings(nextItem, settings);
+
+    const queryParams = new URLSearchParams({
+      itemId: nextItem.Id ?? "", // Ensure itemId is a string
+      audioIndex: audioIndex?.toString() ?? "",
+      subtitleIndex: subtitleIndex?.toString() ?? "",
+      mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+      bitrateValue: bitrate.toString(),
+    }).toString();
+
+    if (!bitrate.value) {
+      // @ts-expect-error
+      router.replace(`player/direct-player?${queryParams}`);
+      return;
+    }
+    // @ts-expect-error
+    router.replace(`player/transcoding-player?${queryParams}`);
+  }, [nextItem, settings]);
+
+  const updateTimes = useCallback(
+    (currentProgress: number, maxValue: number) => {
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);
+
+      setCurrentTime(current);
+      setRemainingTime(remaining);
+
+      // Currently doesm't work in VLC because of some corrupted timestamps, will need to find a workaround.
+      if (currentProgress === maxValue) {
+        setShowControls(true);
+        // Automatically play the next item if it exists
+        goToNextItem();
+      }
+    },
+    [goToNextItem, isVlc]
+  );
+
+  useAnimatedReaction(
+    () => ({
+      progress: progress.value,
+      max: max.value,
+      isSeeking: isSeeking.value,
+    }),
+    (result) => {
+      // console.log("Progress changed", result);
+      if (result.isSeeking === false) {
+        runOnJS(updateTimes)(result.progress, result.max);
+      }
+    },
+    [updateTimes]
+  );
+
+  useEffect(() => {
+    if (item) {
+      progress.value = isVlc
+        ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
+        : item?.UserData?.PlaybackPositionTicks || 0;
+      max.value = isVlc
+        ? ticksToMs(item.RunTimeTicks || 0)
+        : item.RunTimeTicks || 0;
+    }
+  }, [item, isVlc]);
+
+  const toggleControls = () => setShowControls(!showControls);
+
+  const handleSliderComplete = useCallback(
+    async (value: number) => {
+      isSeeking.value = false;
+      progress.value = value;
+
+      await seek(
+        Math.max(0, Math.floor(isVlc ? value : ticksToSeconds(value)))
+      );
+      if (wasPlayingRef.current === true) play();
+    },
+    [isVlc]
+  );
+
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+  const handleSliderChange = (value: number) => {
+    const progressInTicks = isVlc ? msToTicks(value) : value;
+    calculateTrickplayUrl(progressInTicks);
+
+    const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+    const hours = Math.floor(progressInSeconds / 3600);
+    const minutes = Math.floor((progressInSeconds % 3600) / 60);
+    const seconds = progressInSeconds % 60;
+    setTime({ hours, minutes, seconds });
+  };
+
+  const handleSliderStart = useCallback(() => {
+    if (showControls === false) return;
+
+    wasPlayingRef.current = isPlaying;
+    lastProgressRef.current = progress.value;
+
+    pause();
+    isSeeking.value = true;
+  }, [showControls, isPlaying]);
+
+  const handleSkipBackward = useCallback(async () => {
+    if (!settings?.rewindSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    try {
+      const curr = progress.value;
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
+          : Math.max(0, ticksToSeconds(curr) - settings.rewindSkipTime);
+        await seek(newTime);
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video backwards", error);
+    }
+  }, [settings, isPlaying, isVlc]);
+
+  const handleSkipForward = useCallback(async () => {
+    if (!settings?.forwardSkipTime) return;
+    wasPlayingRef.current = isPlaying;
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    try {
+      const curr = progress.value;
+      console.log(curr);
+      if (curr !== undefined) {
+        const newTime = isVlc
+          ? curr + secondsToMs(settings.forwardSkipTime)
+          : ticksToSeconds(curr) + settings.forwardSkipTime;
+        await seek(Math.max(0, newTime));
+        if (wasPlayingRef.current === true) play();
+      }
+    } catch (error) {
+      writeToLog("ERROR", "Error seeking video forwards", error);
+    }
+  }, [settings, isPlaying, isVlc]);
+
+  const toggleIgnoreSafeAreas = useCallback(() => {
+    setIgnoreSafeAreas((prev) => !prev);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+  }, []);
+
+  return (
+    <ControlProvider
+      item={item}
+      mediaSource={mediaSource}
+      isVideoLoaded={isVideoLoaded}
+    >
+      <SafeAreaView
+        style={{
+          flex: 1,
+          position: "absolute",
+          top: insets.top,
+          left: insets.left,
+          right: insets.right,
+          bottom: insets.bottom,
+        }}
+      >
+        <VideoProvider
+          getAudioTracks={getAudioTracks}
+          getSubtitleTracks={getSubtitleTracks}
+          setAudioTrack={setAudioTrack}
+          setSubtitleTrack={setSubtitleTrack}
+          setSubtitleURL={setSubtitleURL}
+        >
+          {!mediaSource?.TranscodingUrl ? (
+            <DropdownViewDirect showControls={showControls} />
+          ) : (
+            <DropdownViewTranscoding showControls={showControls} />
+          )}
+        </VideoProvider>
+
+        <View
+          style={[
+            {
+              position: "absolute",
+              bottom: 97,
+            },
+          ]}
+          className={`z-10 p-4
+            ${showSkipButton ? "opacity-100" : "opacity-0"}
+          `}
+        >
+          <TouchableOpacity
+            onPress={skipIntro}
+            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
+          >
+            <Text className="text-white">Skip Intro</Text>
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={{
+            position: "absolute",
+            bottom: 94,
+            height: 70,
+          }}
+          pointerEvents={showSkipCreditButton ? "auto" : "none"}
+          className={`z-10 p-4 ${
+            showSkipCreditButton ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <TouchableOpacity
+            onPress={skipCredit}
+            className="bg-purple-600 rounded-full px-2.5 py-2 font-semibold"
+          >
+            <Text className="text-white">Skip Credits</Text>
+          </TouchableOpacity>
+        </View>
+
+        <Pressable
+          onPressIn={() => {
+            toggleControls();
+          }}
+          style={{
+            position: "absolute",
+            width: Dimensions.get("window").width,
+            height: Dimensions.get("window").height,
+          }}
+        ></Pressable>
+
+        <View
+          style={[
+            {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              opacity: showControls ? 1 : 0,
+            },
+          ]}
+          pointerEvents={showControls ? "auto" : "none"}
+          className={`flex flex-row items-center space-x-2 z-10 p-4 `}
+        >
+          {Platform.OS !== "ios" && (
+            <TouchableOpacity
+              onPress={toggleIgnoreSafeAreas}
+              className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+            >
+              <Ionicons
+                name={ignoreSafeAreas ? "contract-outline" : "expand"}
+                size={24}
+                color="white"
+              />
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity
+            onPress={async () => {
+              if (stop) await stop();
+              router.back();
+            }}
+            className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2"
+          >
+            <Ionicons name="close" size={24} color="white" />
+          </TouchableOpacity>
+        </View>
+
+        <View
+          style={[
+            {
+              position: "absolute",
+              right: 0,
+              left: 0,
+              bottom: 0,
+              opacity: showControls ? 1 : 0,
+            },
+          ]}
+          pointerEvents={showControls ? "auto" : "none"}
+          className={`flex flex-col p-4`}
+        >
+          <View className="shrink flex flex-col justify-center h-full mb-2">
+            <Text className="font-bold">{item?.Name}</Text>
+            {item?.Type === "Episode" && (
+              <Text className="opacity-50">{item.SeriesName}</Text>
+            )}
+            {item?.Type === "Movie" && (
+              <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>
+            )}
+            {item?.Type === "Audio" && (
+              <Text className="text-xs opacity-50">{item?.Album}</Text>
+            )}
+          </View>
+          <View
+            className={`flex flex-col-reverse py-4 px-4 rounded-2xl items-center  bg-neutral-800`}
+          >
+            <View className="flex flex-row items-center space-x-4">
+              <TouchableOpacity
+                style={{
+                  opacity: !previousItem ? 0.5 : 1,
+                }}
+                onPress={goToPreviousItem}
+              >
+                <Ionicons name="play-skip-back" size={24} color="white" />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={handleSkipBackward}>
+                <Ionicons
+                  name="refresh-outline"
+                  size={26}
+                  color="white"
+                  style={{
+                    transform: [{ scaleY: -1 }, { rotate: "180deg" }],
+                  }}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => {
+                  togglePlay(progress.value);
+                }}
+              >
+                <Ionicons
+                  name={isPlaying ? "pause" : "play"}
+                  size={30}
+                  color="white"
+                />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={handleSkipForward}>
+                <Ionicons name="refresh-outline" size={26} color="white" />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={{
+                  opacity: !nextItem ? 0.5 : 1,
+                }}
+                onPress={goToNextItem}
+              >
+                <Ionicons name="play-skip-forward" size={24} color="white" />
+              </TouchableOpacity>
+            </View>
+            <View className={`flex flex-col w-full shrink`}>
+              <Slider
+                theme={{
+                  maximumTrackTintColor: "rgba(255,255,255,0.2)",
+                  minimumTrackTintColor: "#fff",
+                  cacheTrackTintColor: "rgba(255,255,255,0.3)",
+                  bubbleBackgroundColor: "#fff",
+                  bubbleTextColor: "#000",
+                  heartbeatColor: "#999",
+                }}
+                cache={cacheProgress}
+                onSlidingStart={handleSliderStart}
+                onSlidingComplete={handleSliderComplete}
+                onValueChange={handleSliderChange}
+                containerStyle={{
+                  borderRadius: 100,
+                }}
+                renderBubble={() => {
+                  if (!trickPlayUrl || !trickplayInfo) {
+                    return null;
+                  }
+                  const { x, y, url } = trickPlayUrl;
+
+                  const tileWidth = 150;
+                  const tileHeight = 150 / trickplayInfo.aspectRatio!;
+                  return (
+                    <View
+                      style={{
+                        position: "absolute",
+                        bottom: 0,
+                        left: 0,
+                        width: tileWidth,
+                        height: tileHeight,
+                        marginLeft: -tileWidth / 4,
+                        marginTop: -tileHeight / 4 - 60,
+                        zIndex: 10,
+                      }}
+                      className=" bg-neutral-800 overflow-hidden"
+                    >
+                      <Image
+                        cachePolicy={"memory-disk"}
+                        style={{
+                          width: 150 * trickplayInfo?.data.TileWidth!,
+                          height:
+                            (150 / trickplayInfo.aspectRatio!) *
+                            trickplayInfo?.data.TileHeight!,
+                          transform: [
+                            { translateX: -x * tileWidth },
+                            { translateY: -y * tileHeight },
+                          ],
+                        }}
+                        source={{ uri: url }}
+                        contentFit="cover"
+                      />
+                      <Text
+                        style={{
+                          position: "absolute",
+                          bottom: 5,
+                          left: 5,
+                          color: "white",
+                          backgroundColor: "rgba(0, 0, 0, 0.5)",
+                          padding: 5,
+                          borderRadius: 5,
+                        }}
+                      >
+                        {`${time.hours > 0 ? `${time.hours}:` : ""}${
+                          time.minutes < 10 ? `0${time.minutes}` : time.minutes
+                        }:${
+                          time.seconds < 10 ? `0${time.seconds}` : time.seconds
+                        }`}
+                      </Text>
+                    </View>
+                  );
+                }}
+                sliderHeight={10}
+                thumbWidth={0}
+                progress={progress}
+                minimumValue={min}
+                maximumValue={max}
+              />
+              <View className="flex flex-row items-center justify-between mt-0.5">
+                <Text className="text-[12px] text-neutral-400">
+                  {formatTimeString(currentTime, isVlc ? "ms" : "s")}
+                </Text>
+                <Text className="text-[12px] text-neutral-400">
+                  -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </SafeAreaView>
+    </ControlProvider>
+  );
+};
--- a/components/video-player/controls/SliderScrubbter.tsx
+++ b/components/video-player/controls/SliderScrubbter.tsx
@@ -0,0 +1,144 @@
+import { useTrickplay } from '@/hooks/useTrickplay';
+import { formatTimeString, msToTicks, ticksToSeconds } from '@/utils/time';
+import React, { useRef, useState } from 'react';
+import { View, Text } from 'react-native';
+import { Image } from "expo-image";
+import { Slider } from "react-native-awesome-slider";
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
+import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+
+interface SliderScrubberProps {
+  cacheProgress: SharedValue<number>;
+  handleSliderStart: () => void;
+  handleSliderComplete: (value: number) => void;
+  progress: SharedValue<number>;
+  min: SharedValue<number>;
+  max: SharedValue<number>;
+  currentTime: number;
+  remainingTime: number;
+  item: BaseItemDto;
+}
+
+const SliderScrubber: React.FC<SliderScrubberProps> = ({
+  cacheProgress,
+  handleSliderStart,
+  handleSliderComplete,
+  progress,
+  min,
+  max,
+  currentTime,
+  remainingTime,
+  item,
+}) => {
+
+
+  const [time, setTime] = useState({ hours: 0, minutes: 0, seconds: 0 });
+  const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo } = useTrickplay(
+    item,
+  );
+
+  const handleSliderChange = (value: number) => {
+    const progressInTicks = msToTicks(value);
+    calculateTrickplayUrl(progressInTicks);
+
+    const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
+    const hours = Math.floor(progressInSeconds / 3600);
+    const minutes = Math.floor((progressInSeconds % 3600) / 60);
+    const seconds = progressInSeconds % 60;
+    setTime({ hours, minutes, seconds });
+  };
+
+  return (
+    <View className={`flex flex-col w-full shrink`}>
+      <Slider
+        theme={{
+          maximumTrackTintColor: "rgba(255,255,255,0.2)",
+          minimumTrackTintColor: "#fff",
+          cacheTrackTintColor: "rgba(255,255,255,0.3)",
+          bubbleBackgroundColor: "#fff",
+          bubbleTextColor: "#000",
+          heartbeatColor: "#999",
+        }}
+        cache={cacheProgress}
+        onSlidingStart={handleSliderStart}
+        onSlidingComplete={handleSliderComplete}
+        onValueChange={handleSliderChange}
+        containerStyle={{
+          borderRadius: 100,
+        }}
+        renderBubble={() => {
+          if (!trickPlayUrl || !trickplayInfo) {
+            return null;
+          }
+          const { x, y, url } = trickPlayUrl;
+
+          const tileWidth = 150;
+          const tileHeight = 150 / trickplayInfo.aspectRatio!;
+          return (
+            <View
+              style={{
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                width: tileWidth,
+                height: tileHeight,
+                marginLeft: -tileWidth / 4,
+                marginTop: -tileHeight / 4 - 60,
+                zIndex: 10,
+              }}
+              className=" bg-neutral-800 overflow-hidden"
+            >
+              <Image
+                cachePolicy={"memory-disk"}
+                style={{
+                  width: 150 * trickplayInfo?.data.TileWidth!,
+                  height:
+                    (150 / trickplayInfo.aspectRatio!) *
+                    trickplayInfo?.data.TileHeight!,
+                  transform: [
+                    { translateX: -x * tileWidth },
+                    { translateY: -y * tileHeight },
+                  ],
+                }}
+                source={{ uri: url }}
+                contentFit="cover"
+              />
+              <Text
+                style={{
+                  position: "absolute",
+                  bottom: 5,
+                  left: 5,
+                  color: "white",
+                  backgroundColor: "rgba(0, 0, 0, 0.5)",
+                  padding: 5,
+                  borderRadius: 5,
+                }}
+              >
+                {`${time.hours > 0 ? `${time.hours}:` : ""}${
+                  time.minutes < 10 ? `0${time.minutes}` : time.minutes
+                }:${
+                  time.seconds < 10 ? `0${time.seconds}` : time.seconds
+                }`}
+              </Text>
+            </View>
+          );
+        }}
+        sliderHeight={10}
+        thumbWidth={0}
+        progress={progress}
+        minimumValue={min}
+        maximumValue={max}
+      />
+      <View className="flex flex-row items-center justify-between mt-0.5">
+        <Text className="text-[12px] text-neutral-400">
+          {formatTimeString(currentTime, "ms")}
+        </Text>
+        <Text className="text-[12px] text-neutral-400">
+          -{formatTimeString(remainingTime, "ms")}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default SliderScrubber;
--- a/components/video-player/controls/contexts/ControlContext.tsx
+++ b/components/video-player/controls/contexts/ControlContext.tsx
@@ -0,0 +1,34 @@
+import { TrackInfo } from '@/modules/vlc-player';
+import { BaseItemDto, MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client';
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+interface ControlContextProps {
+  item: BaseItemDto;
+  mediaSource: MediaSourceInfo | null | undefined;
+  isVideoLoaded: boolean | undefined;
+}
+
+const ControlContext = createContext<ControlContextProps | undefined>(undefined);
+
+interface ControlProviderProps {
+  children: ReactNode;
+  item: BaseItemDto;
+  mediaSource: MediaSourceInfo | null | undefined;
+  isVideoLoaded: boolean | undefined;
+}
+
+export const ControlProvider: React.FC<ControlProviderProps> = ({ children, item, mediaSource, isVideoLoaded }) => {
+  return (
+    <ControlContext.Provider value={{ item, mediaSource, isVideoLoaded }}>
+      {children}
+    </ControlContext.Provider>
+  );
+};
+
+export const useControlContext = () => {
+  const context = useContext(ControlContext);
+  if (context === undefined) {
+    throw new Error('useControlContext must be used within a ControlProvider');
+  }
+  return context;
+};
--- a/components/video-player/controls/contexts/VideoContext.tsx
+++ b/components/video-player/controls/contexts/VideoContext.tsx
@@ -0,0 +1,98 @@
+import { TrackInfo } from "@/modules/vlc-player";
+import {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useEffect,
+} from "react";
+import { useControlContext } from "./ControlContext";
+
+interface VideoContextProps {
+  audioTracks: TrackInfo[] | null;
+  subtitleTracks: TrackInfo[] | null;
+  setAudioTrack: ((index: number) => void) | undefined;
+  setSubtitleTrack: ((index: number) => void) | undefined;
+  setSubtitleURL: ((url: string, customName: string) => void) | undefined;
+}
+
+const VideoContext = createContext<VideoContextProps | undefined>(undefined);
+
+interface VideoProviderProps {
+  children: ReactNode;
+  getAudioTracks:
+    | (() => Promise<TrackInfo[] | null>)
+    | (() => TrackInfo[])
+    | undefined;
+  getSubtitleTracks:
+    | (() => Promise<TrackInfo[] | null>)
+    | (() => TrackInfo[])
+    | undefined;
+  setAudioTrack: ((index: number) => void) | undefined;
+  setSubtitleTrack: ((index: number) => void) | undefined;
+  setSubtitleURL: ((url: string, customName: string) => void) | undefined;
+}
+
+export const VideoProvider: React.FC<VideoProviderProps> = ({
+  children,
+  getSubtitleTracks,
+  getAudioTracks,
+  setSubtitleTrack,
+  setSubtitleURL,
+  setAudioTrack,
+}) => {
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
+    null
+  );
+
+  const ControlContext = useControlContext();
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  useEffect(() => {
+    const fetchTracks = async () => {
+      if (
+        getSubtitleTracks &&
+        (subtitleTracks === null || subtitleTracks.length === 0)
+      ) {
+        const subtitles = await getSubtitleTracks();
+        console.log("Getting embeded subtitles...", subtitles);
+        setSubtitleTracks(subtitles);
+      }
+      if (
+        getAudioTracks &&
+        (audioTracks === null || audioTracks.length === 0)
+      ) {
+        const audio = await getAudioTracks();
+        setAudioTracks(audio);
+      }
+    };
+    fetchTracks();
+  }, [isVideoLoaded, getAudioTracks, getSubtitleTracks]);
+
+  return (
+    <VideoContext.Provider
+      value={{
+        audioTracks,
+        subtitleTracks,
+        setSubtitleTrack,
+        setSubtitleURL,
+        setAudioTrack,
+      }}
+    >
+      {children}
+    </VideoContext.Provider>
+  );
+};
+
+export const useVideoContext = () => {
+  const context = useContext(VideoContext);
+  if (context === undefined) {
+    throw new Error("useVideoContext must be used within a VideoProvider");
+  }
+  return context;
+};
--- a/components/video-player/controls/dropdown/DropdownViewDirect.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewDirect.tsx
@@ -0,0 +1,181 @@
+import React, { useMemo, useState } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { useControlContext } from "../contexts/ControlContext";
+import { useVideoContext } from "../contexts/VideoContext";
+import { EmbeddedSubtitle, ExternalSubtitle } from "../types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useLocalSearchParams } from "expo-router";
+
+interface DropdownViewDirectProps {
+  showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
+}
+
+const DropdownViewDirect: React.FC<DropdownViewDirectProps> = ({
+  showControls,
+  offline = false,
+}) => {
+  const api = useAtomValue(apiAtom);
+  const ControlContext = useControlContext();
+  const mediaSource = ControlContext?.mediaSource;
+  const item = ControlContext?.item;
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  const videoContext = useVideoContext();
+  const {
+    subtitleTracks,
+    audioTracks,
+    setSubtitleURL,
+    setSubtitleTrack,
+    setAudioTrack,
+  } = videoContext;
+
+  const allSubtitleTracksForDirectPlay = useMemo(() => {
+    if (mediaSource?.TranscodingUrl) return null;
+    const embeddedSubs =
+      subtitleTracks
+        ?.map((s) => ({
+          name: s.name,
+          index: s.index,
+          deliveryUrl: undefined,
+        }))
+        .filter((sub) => !sub.name.endsWith("[External]")) || [];
+
+    const externalSubs =
+      mediaSource?.MediaStreams?.filter(
+        (stream) => stream.Type === "Subtitle" && !!stream.DeliveryUrl
+      ).map((s) => ({
+        name: s.DisplayTitle! + " [External]",
+        index: s.Index!,
+        deliveryUrl: s.DeliveryUrl,
+      })) || [];
+
+    // Combine embedded subs with external subs only if not offline
+    if (!offline) {
+      return [...embeddedSubs, ...externalSubs] as (
+        | EmbeddedSubtitle
+        | ExternalSubtitle
+      )[];
+    }
+    return embeddedSubs as EmbeddedSubtitle[];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams, offline]);
+
+  const { subtitleIndex, audioIndex } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  const [selectedSubtitleIndex, setSelectedSubtitleIndex] = useState<Number>(
+    parseInt(subtitleIndex)
+  );
+  const [selectedAudioIndex, setSelectedAudioIndex] = useState<Number>(
+    parseInt(audioIndex)
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        opacity: showControls ? 1 : 0,
+      }}
+      className="p-4"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allSubtitleTracksForDirectPlay?.map((sub, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`subtitle-item-${idx}`}
+                  value={selectedSubtitleIndex === sub.index}
+                  onValueChange={() => {
+                    if ("deliveryUrl" in sub && sub.deliveryUrl) {
+                      setSubtitleURL &&
+                        setSubtitleURL(
+                          api?.basePath + sub.deliveryUrl,
+                          sub.name
+                        );
+
+                      console.log(
+                        "Set external subtitle: ",
+                        api?.basePath + sub.deliveryUrl
+                      );
+                    } else {
+                      console.log("Set sub index: ", sub.index);
+                      setSubtitleTrack && setSubtitleTrack(sub.index);
+                    }
+
+                    setSelectedSubtitleIndex(sub.index);
+                    console.log("Subtitle: ", sub);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                    {sub.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {audioTracks?.map((track, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`audio-item-${idx}`}
+                  value={selectedAudioIndex === track.index}
+                  onValueChange={() => {
+                    setSelectedAudioIndex(track.index);
+                    setAudioTrack && setAudioTrack(track.index);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};
+
+export default DropdownViewDirect;
--- a/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
+++ b/components/video-player/controls/dropdown/DropdownViewTranscoding.tsx
@@ -0,0 +1,272 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { useControlContext } from "../contexts/ControlContext";
+import { useVideoContext } from "../contexts/VideoContext";
+import { TranscodedSubtitle } from "../types";
+import { useAtomValue } from "jotai";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useLocalSearchParams, useRouter } from "expo-router";
+
+interface DropdownViewProps {
+  showControls: boolean;
+  offline?: boolean; // used to disable external subs for downloads
+}
+
+const DropdownView: React.FC<DropdownViewProps> = ({
+  showControls,
+  offline = false,
+}) => {
+  const router = useRouter();
+  const api = useAtomValue(apiAtom);
+  const ControlContext = useControlContext();
+  const mediaSource = ControlContext?.mediaSource;
+  const item = ControlContext?.item;
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+
+  const videoContext = useVideoContext();
+  const { subtitleTracks, setSubtitleTrack } = videoContext;
+
+  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
+
+  // Either its on a text subtitle or its on not on any subtitle therefore it should show all the embedded HLS subtitles.
+  const isOnTextSubtitle =
+    mediaSource?.MediaStreams?.find(
+      (x) => x.Index === parseInt(subtitleIndex) && x.IsTextSubtitleStream
+    ) || subtitleIndex === "-1";
+
+  const allSubs =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Subtitle") ?? [];
+  const textBasedSubs = allSubs.filter((x) => x.IsTextSubtitleStream);
+
+  // This is used in the case where it is transcoding stream.
+  const chosenSubtitle = textBasedSubs.find(
+    (x) => x.Index === parseInt(subtitleIndex)
+  );
+
+  let initialSubtitleIndex = -1;
+  if (!isOnTextSubtitle) {
+    initialSubtitleIndex = parseInt(subtitleIndex);
+  } else if (chosenSubtitle) {
+    initialSubtitleIndex = textBasedSubs.indexOf(chosenSubtitle);
+  }
+
+  const [selectedSubtitleIndex, setSelectedSubtitleIndex] =
+    useState<number>(initialSubtitleIndex);
+  const [selectedAudioIndex, setSelectedAudioIndex] = useState<number>(
+    parseInt(audioIndex)
+  );
+
+  const allSubtitleTracksForTranscodingStream = useMemo(() => {
+    const disableSubtitle = {
+      name: "Disable",
+      index: -1,
+      IsTextSubtitleStream: true,
+    } as TranscodedSubtitle;
+    if (isOnTextSubtitle) {
+      const textSubtitles =
+        subtitleTracks?.map((s) => ({
+          name: s.name,
+          index: s.index,
+          IsTextSubtitleStream: true,
+        })) || [];
+
+      const imageSubtitles = allSubs
+        .filter((x) => !x.IsTextSubtitleStream)
+        .map(
+          (x) =>
+            ({
+              name: x.DisplayTitle!,
+              index: x.Index!,
+              IsTextSubtitleStream: x.IsTextSubtitleStream,
+            } as TranscodedSubtitle)
+        );
+
+      const textSubtitlesMap = new Map(textSubtitles.map((s) => [s.name, s]));
+      const imageSubtitlesMap = new Map(imageSubtitles.map((s) => [s.name, s]));
+
+      const sortedSubtitles = Array.from(
+        new Set(
+          allSubs
+            .map((sub) => {
+              const displayTitle = sub.DisplayTitle ?? "";
+              if (textSubtitlesMap.has(displayTitle)) {
+                return textSubtitlesMap.get(displayTitle);
+              }
+              if (imageSubtitlesMap.has(displayTitle)) {
+                return imageSubtitlesMap.get(displayTitle);
+              }
+              return null;
+            })
+            .filter(
+              (subtitle): subtitle is TranscodedSubtitle => subtitle !== null
+            )
+        )
+      );
+
+      return [disableSubtitle, ...sortedSubtitles];
+    }
+
+    const transcodedSubtitle: TranscodedSubtitle[] = allSubs.map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+      IsTextSubtitleStream: x.IsTextSubtitleStream!,
+    }));
+
+    return [disableSubtitle, ...transcodedSubtitle];
+  }, [item, isVideoLoaded, subtitleTracks, mediaSource?.MediaStreams]);
+
+  const ChangeTranscodingSubtitle = useCallback(
+    (subtitleIndex: number) => {
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: subtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  // Audio tracks for transcoding streams.
+  const allAudio =
+    mediaSource?.MediaStreams?.filter((x) => x.Type === "Audio").map((x) => ({
+      name: x.DisplayTitle!,
+      index: x.Index!,
+    })) || [];
+  const ChangeTranscodingAudio = useCallback(
+    (audioIndex: number, currentSelectedSubtitleIndex: number) => {
+      let newSubtitleIndex: number;
+
+      if (!isOnTextSubtitle) {
+        newSubtitleIndex = parseInt(subtitleIndex);
+      } else if (
+        currentSelectedSubtitleIndex >= 0 &&
+        currentSelectedSubtitleIndex < textBasedSubs.length
+      ) {
+        console.log("setHere SubtitleIndex", currentSelectedSubtitleIndex);
+        newSubtitleIndex = textBasedSubs[currentSelectedSubtitleIndex].Index!;
+        console.log("newSubtitleIndex", newSubtitleIndex);
+      } else {
+        newSubtitleIndex = -1;
+      }
+      const queryParams = new URLSearchParams({
+        itemId: item.Id ?? "", // Ensure itemId is a string
+        audioIndex: audioIndex?.toString() ?? "",
+        subtitleIndex: newSubtitleIndex?.toString() ?? "",
+        mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string
+        bitrateValue: bitrateValue,
+      }).toString();
+
+      // @ts-expect-error
+      router.replace(`player/transcoding-player?${queryParams}`);
+    },
+    [mediaSource]
+  );
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        opacity: showControls ? 1 : 0,
+      }}
+      className="p-4"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <TouchableOpacity className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2">
+            <Ionicons name="ellipsis-horizontal" size={24} color={"white"} />
+          </TouchableOpacity>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          loop={true}
+          side="bottom"
+          align="start"
+          alignOffset={0}
+          avoidCollisions={true}
+          collisionPadding={8}
+          sideOffset={8}
+        >
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="subtitle-trigger">
+              Subtitle
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allSubtitleTracksForTranscodingStream?.map(
+                (sub, idx: number) => (
+                  <DropdownMenu.CheckboxItem
+                    value={selectedSubtitleIndex === sub.index}
+                    key={`subtitle-item-${idx}`}
+                    onValueChange={() => {
+                      console.log("sub", sub);
+                      if (selectedSubtitleIndex === sub?.index) return;
+                      setSelectedSubtitleIndex(sub.index);
+                      if (sub.IsTextSubtitleStream && isOnTextSubtitle) {
+                        setSubtitleTrack && setSubtitleTrack(sub.index);
+                        return;
+                      }
+
+                      ChangeTranscodingSubtitle(sub.index);
+                    }}
+                  >
+                    <DropdownMenu.ItemTitle key={`subtitle-item-title-${idx}`}>
+                      {sub.name}
+                    </DropdownMenu.ItemTitle>
+                  </DropdownMenu.CheckboxItem>
+                )
+              )}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger key="audio-trigger">
+              Audio
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              alignOffset={-10}
+              avoidCollisions={true}
+              collisionPadding={0}
+              loop={true}
+              sideOffset={10}
+            >
+              {allAudio?.map((track, idx: number) => (
+                <DropdownMenu.CheckboxItem
+                  key={`audio-item-${idx}`}
+                  value={selectedAudioIndex === track.index}
+                  onValueChange={() => {
+                    if (selectedAudioIndex === track.index) return;
+                    setSelectedAudioIndex(track.index);
+                    ChangeTranscodingAudio(track.index, selectedSubtitleIndex);
+                  }}
+                >
+                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                    {track.name}
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.CheckboxItem>
+              ))}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </View>
+  );
+};
+
+export default DropdownView;
--- a/components/video-player/controls/types.ts
+++ b/components/video-player/controls/types.ts
@@ -0,0 +1,19 @@
+type EmbeddedSubtitle = {
+  name: string;
+  index: number;
+};
+
+type ExternalSubtitle = {
+  name: string;
+  index: number;
+  isExternal: boolean;
+  deliveryUrl: string;
+};
+
+type TranscodedSubtitle = {
+  name: string;
+  index: number;
+  IsTextSubtitleStream: boolean;
+};
+
+export { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle };
--- a/components/vlc/VideoDebugInfo.tsx
+++ b/components/vlc/VideoDebugInfo.tsx
@@ -0,0 +1,73 @@
+import {
+  TrackInfo,
+  VlcPlayerViewRef,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import React, { useEffect, useState } from "react";
+import { TouchableOpacity, View, ViewProps } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "../common/Text";
+
+interface Props extends ViewProps {
+  playerRef: React.RefObject<VlcPlayerViewRef>;
+}
+
+export const VideoDebugInfo: React.FC<Props> = ({ playerRef, ...props }) => {
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
+    null
+  );
+
+  useEffect(() => {
+    const fetchTracks = async () => {
+      if (playerRef.current) {
+        const audio = await playerRef.current.getAudioTracks();
+        const subtitles = await playerRef.current.getSubtitleTracks();
+        setAudioTracks(audio);
+        setSubtitleTracks(subtitles);
+      }
+    };
+
+    fetchTracks();
+  }, [playerRef]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: insets.top,
+        left: insets.left + 8,
+        zIndex: 100,
+      }}
+      {...props}
+    >
+      <Text className="font-bold">Playback State:</Text>
+      <Text className="font-bold mt-2.5">Audio Tracks:</Text>
+      {audioTracks &&
+        audioTracks.map((track, index) => (
+          <Text key={index}>
+            {track.name} (Index: {track.index})
+          </Text>
+        ))}
+      <Text className="font-bold mt-2.5">Subtitle Tracks:</Text>
+      {subtitleTracks &&
+        subtitleTracks.map((track, index) => (
+          <Text key={index}>
+            {track.name} (Index: {track.index})
+          </Text>
+        ))}
+      <TouchableOpacity
+        className="mt-2.5 bg-blue-500 p-2 rounded"
+        onPress={() => {
+          if (playerRef.current) {
+            playerRef.current.getAudioTracks().then(setAudioTracks);
+            playerRef.current.getSubtitleTracks().then(setSubtitleTracks);
+          }
+        }}
+      >
+        <Text className="text-white text-center">Refresh Tracks</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -1,15 +1,8 @@
-/**
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
- */
-
-const tintColorLight = "#0a7ea4";
-const tintColorDark = "#fff";
-
 export const Colors = {
+  primary: "#9334E9",
  text: "#ECEDEE",
  background: "#151718",
-  tint: tintColorDark,
+  tint: "#fff",
  icon: "#9BA1A6",
  tabIconDefault: "#9BA1A6",
  tabIconSelected: "#9333ea",
--- a/constants/Languages.ts
+++ b/constants/Languages.ts
@@ -2,38 +2,38 @@ import { DefaultLanguageOption } from "@/utils/atoms/settings";

 export const LANGUAGES: DefaultLanguageOption[] = [
  { label: "English", value: "eng" },
-  { label: "Spanish", value: "es" },
-  { label: "Chinese (Mandarin)", value: "zh" },
-  { label: "Hindi", value: "hi" },
-  { label: "Arabic", value: "ar" },
-  { label: "French", value: "fr" },
-  { label: "Russian", value: "ru" },
-  { label: "Portuguese", value: "pt" },
-  { label: "Japanese", value: "ja" },
-  { label: "German", value: "de" },
-  { label: "Italian", value: "it" },
-  { label: "Korean", value: "ko" },
-  { label: "Turkish", value: "tr" },
-  { label: "Dutch", value: "nl" },
-  { label: "Polish", value: "pl" },
-  { label: "Vietnamese", value: "vi" },
-  { label: "Thai", value: "th" },
-  { label: "Indonesian", value: "id" },
-  { label: "Greek", value: "el" },
-  { label: "Swedish", value: "sv" },
-  { label: "Danish", value: "da" },
-  { label: "Norwegian", value: "no" },
-  { label: "Finnish", value: "fi" },
-  { label: "Czech", value: "cs" },
-  { label: "Hungarian", value: "hu" },
-  { label: "Romanian", value: "ro" },
-  { label: "Ukrainian", value: "uk" },
-  { label: "Hebrew", value: "he" },
-  { label: "Bengali", value: "bn" },
-  { label: "Punjabi", value: "pa" },
-  { label: "Tagalog", value: "tl" },
-  { label: "Swahili", value: "sw" },
-  { label: "Malay", value: "ms" },
-  { label: "Persian", value: "fa" },
-  { label: "Urdu", value: "ur" },
+  { label: "Spanish", value: "spa" },
+  { label: "Chinese (Mandarin)", value: "cmn" },
+  { label: "Hindi", value: "hin" },
+  { label: "Arabic", value: "ara" },
+  { label: "French", value: "fra" },
+  { label: "Russian", value: "rus" },
+  { label: "Portuguese", value: "por" },
+  { label: "Japanese", value: "jpn" },
+  { label: "German", value: "deu" },
+  { label: "Italian", value: "ita" },
+  { label: "Korean", value: "kor" },
+  { label: "Turkish", value: "tur" },
+  { label: "Dutch", value: "nld" },
+  { label: "Polish", value: "pol" },
+  { label: "Vietnamese", value: "vie" },
+  { label: "Thai", value: "tha" },
+  { label: "Indonesian", value: "ind" },
+  { label: "Greek", value: "ell" },
+  { label: "Swedish", value: "swe" },
+  { label: "Danish", value: "dan" },
+  { label: "Norwegian", value: "nor" },
+  { label: "Finnish", value: "fin" },
+  { label: "Czech", value: "ces" },
+  { label: "Hungarian", value: "hun" },
+  { label: "Romanian", value: "ron" },
+  { label: "Ukrainian", value: "ukr" },
+  { label: "Hebrew", value: "heb" },
+  { label: "Bengali", value: "ben" },
+  { label: "Punjabi", value: "pan" },
+  { label: "Tagalog", value: "tgl" },
+  { label: "Swahili", value: "swa" },
+  { label: "Malay", value: "msa" },
+  { label: "Persian", value: "fas" },
+  { label: "Urdu", value: "urd" },
 ];
--- a/constants/Values.ts
+++ b/constants/Values.ts
@@ -0,0 +1,3 @@
+import { Platform } from "react-native";
+
+export const TAB_HEIGHT = Platform.OS === "android" ? 58 : 74;
--- a/eas.json
+++ b/eas.json
@@ -1,6 +1,7 @@
 {
  "cli": {
-    "version": ">= 9.1.0"
+    "version": ">= 9.1.0",
+    "appVersionSource": "local"
  },
  "build": {
    "development": {
@@ -21,13 +22,13 @@
      }
    },
    "production": {
-      "channel": "0.15.0",
+      "channel": "0.21.0",
      "android": {
        "image": "latest"
      }
    },
    "production-apk": {
-      "channel": "0.15.0",
+      "channel": "0.21.0",
      "android": {
        "buildType": "apk",
        "image": "latest"
--- a/edge-to-edge-fix.patch
+++ b/edge-to-edge-fix.patch
@@ -0,0 +1,15 @@
+--- expo.js.original	2024-11-10 09:08:19
+++ node_modules/react-native-edge-to-edge/dist/commonjs/expo.js	2024-11-10 09:08:23
+@@ -19,10 +19,8 @@
+     const {
+       barStyle
+     } = androidStatusBar;
+    const android = props?.android || {};
+     const {
+-      android = {}
+-    } = props;
+-    const {
+       parentTheme = "Default"
+     } = android;
+     config.modResults.resources.style = config.modResults.resources.style?.map(style => {
+\ No newline at end of file
--- a/Show More
+++ b/Show More