wip

2026-01-16 08:08:18 +00:00 · 2025-11-14 20:05:39 +01:00
144 changed files with 4093 additions and 5044 deletions
--- a/.github/ISSUE_TEMPLATE/issue_report.yml
+++ b/.github/ISSUE_TEMPLATE/issue_report.yml
@@ -77,8 +77,13 @@ body:
      label: Streamyfin Version
      description: What version of Streamyfin are you running?
      options:
-        - 0.47.1
        - 0.30.2
+        - 0.29.0
+        - 0.28.0
+        - 0.27.0
+        - 0.26.1
+        - 0.26.0
+        - 0.25.0
        - older
        - TestFlight/Development build
    validations:
@@ -111,4 +116,4 @@ body:
    id: additional-info
    attributes:
      label: Additional information
-      description: Any additional context that might help us understand and reproduce the issue.
+      description: Any additional context that might help us understand and reproduce the issue.
--- a/.github/workflows/build-apps.yml
+++ b/.github/workflows/build-apps.yml
@@ -156,7 +156,7 @@ jobs:

  build-ios-phone:
    if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
-    runs-on: macos-26
+    runs-on: macos-15
    name: 🍎 Build iOS IPA (Phone)
    permissions:
      contents: read
@@ -191,11 +191,6 @@ jobs:
      - name: 🛠️ Generate project files
        run: bun run prebuild

-      - name: 🔧 Setup Xcode
-        uses: maxim-lobanov/setup-xcode@60606e260d2fc5762a71e64e74b2174e8ea3c8bd # v1
-        with:
-          xcode-version: "26.0.1"
-
      - name: 🏗️ Setup EAS
        uses: expo/expo-github-action@main
        with:
@@ -224,7 +219,7 @@ jobs:
  # Disabled for now - uncomment when ready to build iOS TV
  # build-ios-tv:
  #   if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
-  #   runs-on: macos-26
+  #   runs-on: macos-15
  #   name: 🍎 Build iOS IPA (TV)
  #   permissions:
  #     contents: read
@@ -259,11 +254,6 @@ jobs:
  #     - name: 🛠️ Generate project files
  #       run: bun run prebuild:tv
  #
-  #     - name: 🔧 Setup Xcode
-  #       uses: maxim-lobanov/setup-xcode@v1
-  #       with:
-  #         xcode-version: '26.0.1'
-  #
  #     - name: 🏗️ Setup EAS
  #       uses: expo/expo-github-action@main
  #       with:
--- a/.github/workflows/ci-codeql.yml
+++ b/.github/workflows/ci-codeql.yml
@@ -25,15 +25,19 @@ jobs:
    steps:
      - name: 📥 Checkout repository
        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.sha }}
+          show-progress: false
+          fetch-depth: 0

      - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/init@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
        with:
          languages: ${{ matrix.language }}
          queries: +security-extended,security-and-quality

      - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/autobuild@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2

      - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/analyze@0499de31b99561a6d14a36a5f662c2a54f91beee # v4.31.2
--- a/.github/workflows/linting.yml
+++ b/.github/workflows/linting.yml
@@ -57,7 +57,7 @@ jobs:
          fetch-depth: 0

      - name: Dependency Review
-        uses: actions/dependency-review-action@3c4e3dcb1aa7874d2c16be7d79418e9b7efd6261 # v4.8.2
+        uses: actions/dependency-review-action@40c09b7dc99638e5ddb0bfd91c1673effc064d8a # v4.8.1
        with:
          fail-on-severity: high
          base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,25 +1,178 @@
 {
+  // ==========================================
+  // FORMATTING & LINTING
+  // ==========================================
+
+  // Biome as default formatter
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.biome": "explicit"
+  "editor.formatOnPaste": true,
+  "editor.formatOnType": false,
+
+  // Language-specific formatters
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
  },
  "[typescript]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
  },
  "[json]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
  },
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "editor.formatOnSaveMode": "file"
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  "[swift]": {
+    "editor.insertSpaces": true,
+    "editor.tabSize": 2
+  },
+
+  // ==========================================
+  // TYPESCRIPT & JAVASCRIPT
+  // ==========================================
+
+  // TypeScript performance optimizations
+  "typescript.preferences.includePackageJsonAutoImports": "auto",
+  "typescript.suggest.autoImports": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.preferences.includeCompletionsForImportStatements": true,
+  "typescript.preferences.includeCompletionsWithSnippetText": true,
+
+  // JavaScript settings
+  "javascript.preferences.importModuleSpecifier": "relative",
+  "javascript.suggest.autoImports": true,
+  "javascript.updateImportsOnFileMove.enabled": "always",
+
+  // ==========================================
+  // REACT NATIVE & EXPO
+  // ==========================================
+
+  // File associations for React Native
+  "files.associations": {
+    "*.expo.ts": "typescript",
+    "*.expo.tsx": "typescriptreact",
+    "*.expo.js": "javascript",
+    "*.expo.jsx": "javascriptreact",
+    "metro.config.js": "javascript",
+    "babel.config.js": "javascript",
+    "app.config.js": "javascript",
+    "eas.json": "jsonc"
+  },
+
+  // React Native specific settings
+  "emmet.includeLanguages": {
+    "typescriptreact": "html",
+    "javascriptreact": "html"
+  },
+  "emmet.triggerExpansionOnTab": true,
+
+  // Exclude build directories from search
+  "search.exclude": {
+    "**/node_modules": true
+  },
+
+  // ==========================================
+  // EDITOR PERFORMANCE & UX
+  // ==========================================
+
+  // Performance optimizations
+  "editor.largeFileOptimizations": true,
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/node_modules/**": true,
+    "**/.expo/**": true,
+    "**/ios/**": true,
+    "**/android/**": true,
+    "**/build/**": true,
+    "**/dist/**": true
+  },
+
+  // Better editor behavior
+  "editor.suggestSelection": "first",
+  "editor.quickSuggestions": {
+    "strings": true,
+    "comments": true,
+    "other": true
+  },
+  "editor.snippetSuggestions": "top",
+  "editor.tabCompletion": "on",
+  "editor.wordBasedSuggestions": "off",
+
+  // ==========================================
+  // TERMINAL & DEVELOPMENT
+  // ==========================================
+
+  // Terminal settings for Bun (Windows-specific)
+  "terminal.integrated.profiles.windows": {
+    "Command Prompt": {
+      "path": "C:\\Windows\\System32\\cmd.exe",
+      "env": {
+        "PATH": "${env:PATH};./node_modules/.bin"
+      }
+    }
+  },
+
+  // ==========================================
+  // WORKSPACE & NAVIGATION
+  // ==========================================
+
+  // Better workspace navigation
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.expand": false,
+  "explorer.fileNesting.patterns": {
+    "*.ts": "${capture}.js",
+    "*.tsx": "${capture}.js",
+    "*.js": "${capture}.js,${capture}.js.map,${capture}.min.js,${capture}.d.ts",
+    "*.jsx": "${capture}.js",
+    "package.json": "package-lock.json,yarn.lock,bun.lock,bun.lockb,.yarnrc,.yarnrc.yml",
+    "tsconfig.json": "tsconfig.*.json",
+    ".env": ".env.*",
+    "app.json": "app.config.js,eas.json,expo-env.d.ts",
+    "README.md": "LICENSE.txt,SECURITY.md,CODE_OF_CONDUCT.md,CONTRIBUTING.md"
+  },
+
+  // Better breadcrumbs and navigation
+  "breadcrumbs.enabled": true,
+  "outline.showVariables": true,
+  "outline.showConstants": true,
+
+  // ==========================================
+  // GIT & VERSION CONTROL
+  // ==========================================
+
+  // Git integration
+  "git.autofetch": true,
+  "git.enableSmartCommit": true,
+  "git.confirmSync": false,
+  "git.ignoreLimitWarning": true,
+
+  // ==========================================
+  // CODE QUALITY & ERRORS
+  // ==========================================
+
+  // Better error detection
+  "typescript.validate.enable": true,
+  "javascript.validate.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
+  },
+
+  // Problem matcher for better error display
+  "typescript.tsc.autoDetect": "on"
 }
--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.48.0",
+    "version": "0.47.1",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -29,12 +29,16 @@
      },
      "supportsTablet": true,
      "bundleIdentifier": "com.fredrikburmester.streamyfin",
-      "icon": "./assets/images/icon-ios-liquid-glass.icon",
+      "icon": {
+        "dark": "./assets/images/icon-ios-plain.png",
+        "light": "./assets/images/icon-ios-light.png",
+        "tinted": "./assets/images/icon-ios-tinted.png"
+      },
      "appleTeamId": "MWD5K362T8"
    },
    "android": {
      "jsEngine": "hermes",
-      "versionCode": 85,
+      "versionCode": 84,
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon-android-plain.png",
        "monochromeImage": "./assets/images/icon-android-themed.png",
--- a/app/(auth)/(tabs)/(home)/downloads/index.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/index.tsx
@@ -171,7 +171,7 @@ export default function page() {
      contentInsetAdjustmentBehavior='automatic'
    >
      <View style={{ paddingTop: Platform.OS === "android" ? 17 : 0 }}>
-        <View className='mb-4 flex flex-col space-y-4 px-4'>
+        <View className='mb-4 flex flex-col gap-y-4 px-4'>
          {/* Queue card - hidden */}
          {/* <View className='bg-neutral-900 p-4 rounded-2xl'>
                <Text className='text-lg font-bold'>
@@ -180,7 +180,7 @@ export default function page() {
                <Text className='text-xs opacity-70 text-red-600'>
                  {t("home.downloads.queue_hint")}
                </Text>
-                <View className='flex flex-col space-y-2 mt-2'>
+                <View className='flex flex-col gap-y-2 mt-2'>
                  {queue.map((q, index) => (
                    <TouchableOpacity
                      onPress={() =>
--- a/app/(auth)/(tabs)/(home)/intro/page.tsx
+++ b/app/(auth)/(tabs)/(home)/intro/page.tsx
@@ -20,7 +20,7 @@ export default function page() {

  return (
    <View
-      className={`bg-neutral-900 h-full ${Platform.isTV ? "py-5 space-y-4" : "py-16 space-y-8"} px-4`}
+      className={`bg-neutral-900 h-full ${Platform.isTV ? "py-5 gap-y-4" : "py-16 gap-y-8"} px-4`}
    >
      <View>
        <Text className='text-3xl font-bold text-center mb-2'>
--- a/app/(auth)/(tabs)/(home)/sessions/index.tsx
+++ b/app/(auth)/(tabs)/(home)/sessions/index.tsx
@@ -255,7 +255,7 @@ const SessionCard = ({ session }: SessionCardProps) => {
            </View>

            {/* Session controls */}
-            <View className='flex flex-row mt-2 space-x-4 justify-center'>
+            <View className='flex flex-row mt-2 gap-x-4 justify-center'>
              <TouchableOpacity
                onPress={handlePrevious}
                disabled={isControlLoading[PlaystateCommand.PreviousTrack]}
--- a/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/logs/page.tsx
@@ -1,9 +1,9 @@
 import { File, Paths } from "expo-file-system";
 import { useNavigation } from "expo-router";
-import type * as SharingType from "expo-sharing";
+import * as Sharing from "expo-sharing";
 import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
+import { ScrollView, TouchableOpacity, View } from "react-native";
 import Collapsible from "react-native-collapsible";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
@@ -11,11 +11,6 @@ import { FilterButton } from "@/components/filters/FilterButton";
 import { Loader } from "@/components/Loader";
 import { LogLevel, useLog, writeErrorLog } from "@/utils/log";

-// Conditionally import expo-sharing only on non-TV platforms
-const Sharing = Platform.isTV
-  ? null
-  : (require("expo-sharing") as typeof SharingType);
-
 export default function Page() {
  const navigation = useNavigation();
  const { logs } = useLog();
@@ -54,8 +49,6 @@ export default function Page() {

  // Sharing it as txt while its formatted allows us to share it with many more applications
  const share = useCallback(async () => {
-    if (!Sharing) return;
-
    const logsFile = new File(Paths.document, "logs.txt");

    setLoading(true);
@@ -67,11 +60,9 @@ export default function Page() {
    } finally {
      setLoading(false);
    }
-  }, [filteredLogs, Sharing]);
+  }, [filteredLogs]);

  useEffect(() => {
-    if (Platform.isTV) return;
-
    navigation.setOptions({
      headerRight: () =>
        loading ? (
@@ -91,7 +82,7 @@ export default function Page() {
        paddingTop: insets.top + 48,
      }}
    >
-      <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
+      <View className='flex flex-row justify-end py-2 px-4 gap-x-2'>
        <FilterButton
          id={orderFilterId}
          queryKey='log'
@@ -115,7 +106,7 @@ export default function Page() {
        />
      </View>
      <ScrollView className='pb-4 px-4'>
-        <View className='flex flex-col space-y-2'>
+        <View className='flex flex-col gap-y-2'>
          {filteredLogs?.map((log, index) => (
            <View className='bg-neutral-900 rounded-xl p-3' key={index}>
              <TouchableOpacity
@@ -155,7 +146,7 @@ export default function Page() {
                    </Text>
                  )}
                  <Collapsible collapsed={!state[log.timestamp]}>
-                    <View className='mt-2 flex flex-col space-y-2'>
+                    <View className='mt-2 flex flex-col gap-y-2'>
                      <ScrollView className='rounded-xl' style={codeBlockStyle}>
                        <Text>{JSON.stringify(log.data, null, 2)}</Text>
                      </ScrollView>
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/items/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/items/page.tsx
@@ -20,8 +20,7 @@ const Page: React.FC = () => {
  const { offline } = useLocalSearchParams() as { offline?: string };
  const isOffline = offline === "true";

-  // Fetch item with all fields including MediaSources
-  const { data: item, isError } = useItemQuery(id, isOffline, undefined, []);
+  const { data: item, isError } = useItemQuery(id, isOffline);

  const opacity = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => {
@@ -81,7 +80,7 @@ const Page: React.FC = () => {
        <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
        <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
        <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
-        <View className='flex flex-row space-x-1 mb-8'>
+        <View className='flex flex-row gap-x-1 mb-8'>
          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx
@@ -14,7 +14,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { toast } from "sonner-native";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { GenreTags } from "@/components/GenreTags";
@@ -34,16 +33,8 @@ import {
  type IssueType,
  IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
-import {
-  MediaRequestStatus,
-  MediaType,
-} from "@/utils/jellyseerr/server/constants/media";
-import type MediaRequest from "@/utils/jellyseerr/server/entity/MediaRequest";
+import { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
-import {
-  hasPermission,
-  Permission,
-} from "@/utils/jellyseerr/server/lib/permissions";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import type {
  MovieResult,
@@ -67,7 +58,7 @@ const Page: React.FC = () => {
    } & Partial<MovieResult | TvResult | MovieDetails | TvDetails>;

  const navigation = useNavigation();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
+  const { jellyseerrApi, requestMedia } = useJellyseerr();

  const [issueType, setIssueType] = useState<IssueType>();
  const [issueMessage, setIssueMessage] = useState<string>();
@@ -100,46 +91,6 @@ const Page: React.FC = () => {
  const [canRequest, hasAdvancedRequestPermission] =
    useJellyseerrCanRequest(details);

-  const canManageRequests = useMemo(() => {
-    if (!jellyseerrUser) return false;
-    return hasPermission(
-      Permission.MANAGE_REQUESTS,
-      jellyseerrUser.permissions,
-    );
-  }, [jellyseerrUser]);
-
-  const pendingRequest = useMemo(() => {
-    return details?.mediaInfo?.requests?.find(
-      (r: MediaRequest) => r.status === MediaRequestStatus.PENDING,
-    );
-  }, [details]);
-
-  const handleApproveRequest = useCallback(async () => {
-    if (!pendingRequest?.id) return;
-
-    try {
-      await jellyseerrApi?.approveRequest(pendingRequest.id);
-      toast.success(t("jellyseerr.toasts.request_approved"));
-      refetch();
-    } catch (error) {
-      toast.error(t("jellyseerr.toasts.failed_to_approve_request"));
-      console.error("Failed to approve request:", error);
-    }
-  }, [jellyseerrApi, pendingRequest, refetch, t]);
-
-  const handleDeclineRequest = useCallback(async () => {
-    if (!pendingRequest?.id) return;
-
-    try {
-      await jellyseerrApi?.declineRequest(pendingRequest.id);
-      toast.success(t("jellyseerr.toasts.request_declined"));
-      refetch();
-    } catch (error) {
-      toast.error(t("jellyseerr.toasts.failed_to_decline_request"));
-      console.error("Failed to decline request:", error);
-    }
-  }, [jellyseerrApi, pendingRequest, refetch, t]);
-
  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
@@ -180,11 +131,9 @@ const Page: React.FC = () => {
      mediaId: Number(result.id!),
      mediaType: mediaType!,
      tvdbId: details?.externalIds?.tvdbId,
-      ...(mediaType === MediaType.TV && {
-        seasons: (details as TvDetails)?.seasons
-          ?.filter?.((s) => s.seasonNumber !== 0)
-          ?.map?.((s) => s.seasonNumber),
-      }),
+      seasons: (details as TvDetails)?.seasons
+        ?.filter?.((s) => s.seasonNumber !== 0)
+        ?.map?.((s) => s.seasonNumber),
    };

    if (hasAdvancedRequestPermission) {
@@ -290,7 +239,7 @@ const Page: React.FC = () => {
        }
      >
        <View className='flex flex-col'>
-          <View className='space-y-4'>
+          <View className='gap-y-4'>
            <View className='px-4'>
              <View className='flex flex-row justify-between w-full'>
                <View className='flex flex-col w-56'>
@@ -333,7 +282,7 @@ const Page: React.FC = () => {
                </Button>
              ) : (
                details?.mediaInfo?.jellyfinMediaId && (
-                  <View className='flex flex-row space-x-2 mt-4'>
+                  <View className='flex flex-row gap-x-2 mt-4'>
                    {!Platform.isTV && (
                      <Button
                        className='flex-1 bg-yellow-500/50 border-yellow-400 ring-yellow-400 text-yellow-100'
@@ -383,60 +332,6 @@ const Page: React.FC = () => {
                  </View>
                )
              )}
-              {canManageRequests && pendingRequest && (
-                <View className='flex flex-col space-y-2 mt-4'>
-                  <View className='flex flex-row items-center space-x-2'>
-                    <Ionicons name='person-outline' size={16} color='#9CA3AF' />
-                    <Text className='text-sm text-neutral-400'>
-                      {t("jellyseerr.requested_by", {
-                        user:
-                          pendingRequest.requestedBy?.displayName ||
-                          pendingRequest.requestedBy?.username ||
-                          pendingRequest.requestedBy?.jellyfinUsername ||
-                          t("jellyseerr.unknown_user"),
-                      })}
-                    </Text>
-                  </View>
-                  <View className='flex flex-row space-x-2'>
-                    <Button
-                      className='flex-1 bg-green-600/50 border-green-400 ring-green-400 text-green-100'
-                      color='transparent'
-                      onPress={handleApproveRequest}
-                      iconLeft={
-                        <Ionicons
-                          name='checkmark-outline'
-                          size={20}
-                          color='white'
-                        />
-                      }
-                      style={{
-                        borderWidth: 1,
-                        borderStyle: "solid",
-                      }}
-                    >
-                      <Text className='text-sm'>{t("jellyseerr.approve")}</Text>
-                    </Button>
-                    <Button
-                      className='flex-1 bg-red-600/50 border-red-400 ring-red-400 text-red-100'
-                      color='transparent'
-                      onPress={handleDeclineRequest}
-                      iconLeft={
-                        <Ionicons
-                          name='close-outline'
-                          size={20}
-                          color='white'
-                        />
-                      }
-                      style={{
-                        borderWidth: 1,
-                        borderStyle: "solid",
-                      }}
-                    >
-                      <Text className='text-sm'>{t("jellyseerr.decline")}</Text>
-                    </Button>
-                  </View>
-                </View>
-              )}
              <OverviewText text={result.overview} className='mt-4' />
            </View>

@@ -487,13 +382,13 @@ const Page: React.FC = () => {
          onDismiss={handleIssueModalDismiss}
        >
          <BottomSheetView>
-            <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
+            <View className='flex flex-col gap-y-4 px-4 pb-8 pt-2'>
              <View>
                <Text className='font-bold text-2xl text-neutral-100'>
                  {t("jellyseerr.whats_wrong")}
                </Text>
              </View>
-              <View className='flex flex-col space-y-2 items-start'>
+              <View className='flex flex-col gap-y-2 items-start'>
                <View className='flex flex-col w-full'>
                  <Text className='opacity-50 mb-1 text-xs'>
                    {t("jellyseerr.issue_type")}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/programs.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/programs.tsx
@@ -26,7 +26,7 @@ export default function page() {
        paddingTop: 8,
      }}
    >
-      <View className='flex flex-col space-y-2'>
+      <View className='flex flex-col gap-y-2'>
        <ScrollingCollectionList
          queryKey={["livetv", "recommended"]}
          title={t("live_tv.on_now")}
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/persons/[personId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/persons/[personId].tsx
@@ -105,7 +105,7 @@ const page: React.FC = () => {
        />
      }
    >
-      <View className='flex flex-col space-y-4 my-4'>
+      <View className='flex flex-col gap-y-4 my-4'>
        <View className='px-4 mb-4'>
          <MoviesTitleHeader item={item} className='mb-4' />
          <OverviewText text={item.Overview} />
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx
@@ -94,7 +94,7 @@ const page: React.FC = () => {
        item &&
        allEpisodes &&
        allEpisodes.length > 0 && (
-          <View className='flex flex-row items-center space-x-2'>
+          <View className='flex flex-row items-center gap-x-2'>
            <AddToFavorites item={item} />
            {!Platform.isTV && (
              <DownloadItems
--- a/app/(auth)/(tabs)/(search)/index.tsx
+++ b/app/(auth)/(tabs)/(search)/index.tsx
@@ -418,7 +418,7 @@ export default function search() {
              </Text>
            </View>
          ) : debouncedSearch.length === 0 ? (
-            <View className='mt-4 flex flex-col items-center space-y-2'>
+            <View className='mt-4 flex flex-col items-center gap-y-2'>
              {exampleSearches.map((e) => (
                <TouchableOpacity
                  onPress={() => {
--- a/app/(auth)/player/_layout.tsx
+++ b/app/(auth)/player/_layout.tsx
@@ -1,33 +1,7 @@
 import { Stack } from "expo-router";
-import { useEffect } from "react";
-import { AppState } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";

-import { useOrientation } from "@/hooks/useOrientation";
-import { useSettings } from "@/utils/atoms/settings";
-
 export default function Layout() {
-  const { settings } = useSettings();
-  const { lockOrientation, unlockOrientation } = useOrientation();
-
-  useEffect(() => {
-    if (settings?.defaultVideoOrientation) {
-      lockOrientation(settings.defaultVideoOrientation);
-    }
-
-    // Re-apply orientation lock when app returns to foreground (iOS resets it)
-    const subscription = AppState.addEventListener("change", (nextAppState) => {
-      if (nextAppState === "active" && settings?.defaultVideoOrientation) {
-        lockOrientation(settings.defaultVideoOrientation);
-      }
-    });
-
-    return () => {
-      subscription.remove();
-      unlockOrientation();
-    };
-  }, [settings?.defaultVideoOrientation, lockOrientation, unlockOrientation]);
-
  return (
    <>
      <SystemBars hidden />
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -22,34 +22,34 @@ 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 { PlayerProvider } from "@/components/video-player/controls/contexts/PlayerContext";
-import { VideoProvider } from "@/components/video-player/controls/contexts/VideoContext";
+import {
+  OUTLINE_THICKNESS,
+  OutlineThickness,
+  VLC_COLORS,
+  VLCColor,
+} from "@/constants/SubtitleConstants";
 import { useHaptic } from "@/hooks/useHaptic";
+import { useOrientation } from "@/hooks/useOrientation";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
 import { useWebSocket } from "@/hooks/useWebsockets";
-import {
-  MpvPlayerView,
-  type MpvPlayerViewRef,
-  type OnPlaybackStateChangePayload,
-  type OnProgressEventPayload,
-  type VideoSource,
-} from "@/modules";
+import { VlcPlayerView } from "@/modules";
+import type {
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VlcPlayerViewRef,
+} from "@/modules/VlcPlayer.types";
 import { useDownload } from "@/providers/DownloadProvider";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import {
-  getMpvAudioId,
-  getMpvSubtitleId,
-} from "@/utils/jellyfin/subtitleUtils";
 import { writeToLog } from "@/utils/log";
 import { generateDeviceProfile } from "@/utils/profiles/native";
 import { msToTicks, ticksToSeconds } from "@/utils/time";

 export default function page() {
-  const videoRef = useRef<MpvPlayerViewRef>(null);
+  const videoRef = useRef<VlcPlayerViewRef>(null);
  const user = useAtomValue(userAtom);
  const api = useAtomValue(apiAtom);
  const { t } = useTranslation();
@@ -57,7 +57,7 @@ export default function page() {

  const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
  const [showControls, _setShowControls] = useState(true);
-  const [isPipMode, _setIsPipMode] = useState(false);
+  const [isPipMode, setIsPipMode] = useState(false);
  const [aspectRatio, setAspectRatio] = useState<
    "default" | "16:9" | "4:3" | "1:1" | "21:9"
  >("default");
@@ -68,7 +68,6 @@ export default function page() {
  const [isMuted, setIsMuted] = useState(false);
  const [isBuffering, setIsBuffering] = useState(true);
  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
-  const [tracksReady, setTracksReady] = useState(false);

  const progress = useSharedValue(0);
  const isSeeking = useSharedValue(false);
@@ -111,6 +110,7 @@ export default function page() {
    playbackPosition?: string;
  }>();
  const { settings } = useSettings();
+  const { lockOrientation, unlockOrientation } = useOrientation();

  const offline = offlineStr === "true";
  const playbackManager = usePlaybackManager();
@@ -173,6 +173,16 @@ export default function page() {
    }
  }, [itemId, offline, api, user?.Id]);

+  useEffect(() => {
+    if (settings?.defaultVideoOrientation) {
+      lockOrientation(settings.defaultVideoOrientation);
+    }
+
+    return () => {
+      unlockOrientation();
+    };
+  }, [settings?.defaultVideoOrientation]);
+
  interface Stream {
    mediaSource: MediaSourceInfo;
    sessionId: string;
@@ -219,6 +229,8 @@ export default function page() {
            return;
          }

+          const native = generateDeviceProfile();
+          const transcoding = generateDeviceProfile({ transcode: true });
          const res = await getStreamUrl({
            api,
            item,
@@ -228,7 +240,7 @@ export default function page() {
            maxStreamingBitrate: bitrateValue,
            mediaSourceId: mediaSourceId,
            subtitleStreamIndex: subtitleIndex,
-            deviceProfile: generateDeviceProfile(),
+            deviceProfile: bitrateValue ? transcoding : native,
          });
          if (!res) return;
          const { mediaSource, sessionId, url } = res;
@@ -312,8 +324,7 @@ export default function page() {
    });
    reportPlaybackStopped();
    setIsPlaybackStopped(true);
-    // MPV doesn't have a stop method, use pause instead
-    videoRef.current?.pause();
+    videoRef.current?.stop();
    revalidateProgressCache();
  }, [videoRef, reportPlaybackStopped, progress]);

@@ -326,7 +337,6 @@ export default function page() {

  const currentPlayStateInfo = useCallback(() => {
    if (!stream || !item?.Id) return;
-
    return {
      itemId: item.Id,
      audioStreamIndex: audioIndex ? audioIndex : undefined,
@@ -369,13 +379,10 @@ export default function page() {
  );

  const onProgress = useCallback(
-    async (data: { nativeEvent: OnProgressEventPayload }) => {
+    async (data: ProgressUpdatePayload) => {
      if (isSeeking.get() || isPlaybackStopped) return;

-      const { position } = data.nativeEvent;
-      // MPV reports position in seconds, convert to ms
-      const currentTime = position * 1000;
-
+      const { currentTime } = data.nativeEvent;
      if (isBuffering) {
        setIsBuffering(false);
      }
@@ -421,46 +428,6 @@ export default function page() {
    return ticksToSeconds(getInitialPlaybackTicks());
  }, [getInitialPlaybackTicks]);

-  /** Build video source config for the native player */
-  const videoSource = useMemo<VideoSource | undefined>(() => {
-    if (!stream?.url) return undefined;
-
-    const mediaSource = stream.mediaSource;
-    const isTranscoding = Boolean(mediaSource?.TranscodingUrl);
-
-    // Get external subtitle URLs
-    const externalSubs = mediaSource?.MediaStreams?.filter(
-      (s) =>
-        s.Type === "Subtitle" &&
-        s.DeliveryMethod === "External" &&
-        s.DeliveryUrl,
-    ).map((s) => `${api?.basePath}${s.DeliveryUrl}`);
-
-    // Calculate MPV track IDs for initial selection
-    const initialSubtitleId = getMpvSubtitleId(
-      mediaSource,
-      subtitleIndex,
-      isTranscoding,
-    );
-    const initialAudioId = getMpvAudioId(mediaSource, audioIndex);
-
-    return {
-      url: stream.url,
-      startPosition,
-      autoplay: true,
-      externalSubtitles: externalSubs,
-      initialSubtitleId,
-      initialAudioId,
-    };
-  }, [
-    stream?.url,
-    stream?.mediaSource,
-    startPosition,
-    api?.basePath,
-    subtitleIndex,
-    audioIndex,
-  ]);
-
  const volumeUpCb = useCallback(async () => {
    if (Platform.isTV) return;

@@ -541,12 +508,10 @@ export default function page() {
  });

  const onPlaybackStateChanged = useCallback(
-    async (e: { nativeEvent: OnPlaybackStateChangePayload }) => {
-      const { isPaused, isPlaying: playing, isLoading } = e.nativeEvent;
-
-      if (playing) {
+    async (e: PlaybackStatePayload) => {
+      const { state, isBuffering, isPlaying } = e.nativeEvent;
+      if (state === "Playing") {
        setIsPlaying(true);
-        setIsBuffering(false);
        if (item?.Id) {
          playbackManager.reportPlaybackProgress(
            currentPlayStateInfo() as PlaybackProgressInfo,
@@ -556,7 +521,7 @@ export default function page() {
        return;
      }

-      if (isPaused) {
+      if (state === "Paused") {
        setIsPlaying(false);
        if (item?.Id) {
          playbackManager.reportPlaybackProgress(
@@ -567,13 +532,87 @@ export default function page() {
        return;
      }

-      if (isLoading) {
+      if (isPlaying) {
+        setIsPlaying(true);
+        setIsBuffering(false);
+      } else if (isBuffering) {
        setIsBuffering(true);
      }
    },
    [playbackManager, item?.Id, progress],
  );

+  const allAudio =
+    stream?.mediaSource.MediaStreams?.filter(
+      (audio) => audio.Type === "Audio",
+    ) || [];
+
+  // Move all the external subtitles last, because vlc places them last.
+  const allSubs =
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle",
+    ).sort((a, b) => Number(a.IsExternal) - Number(b.IsExternal)) || [];
+
+  const externalSubtitles = allSubs
+    .filter((sub: any) => sub.DeliveryMethod === "External")
+    .map((sub: any) => ({
+      name: sub.DisplayTitle,
+      DeliveryUrl: offline ? sub.DeliveryUrl : api?.basePath + sub.DeliveryUrl,
+    }));
+  /** The text based subtitle tracks */
+  const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
+  /** The user chosen subtitle track from the server */
+  const chosenSubtitleTrack = allSubs.find(
+    (sub) => sub.Index === subtitleIndex,
+  );
+  /** The user chosen audio track from the server */
+  const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
+  /** Whether the stream we're playing is not transcoding*/
+  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
+  /** The initial options to pass to the VLC Player */
+  const initOptions = [``];
+  if (
+    chosenSubtitleTrack &&
+    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
+  ) {
+    // If not transcoding, we can the index as normal.
+    // If transcoding, we need to reverse the text based subtitles, because VLC reverses the HLS subtitles.
+    const finalIndex = notTranscoding
+      ? allSubs.indexOf(chosenSubtitleTrack)
+      : [...textSubs].reverse().indexOf(chosenSubtitleTrack);
+    initOptions.push(`--sub-track=${finalIndex}`);
+
+    // Add VLC subtitle styling options from settings
+    const textColor = (settings.vlcTextColor ?? "White") as VLCColor;
+    const backgroundColor = (settings.vlcBackgroundColor ??
+      "Black") as VLCColor;
+    const outlineColor = (settings.vlcOutlineColor ?? "Black") as VLCColor;
+    const outlineThickness = (settings.vlcOutlineThickness ??
+      "Normal") as OutlineThickness;
+    const backgroundOpacity = settings.vlcBackgroundOpacity ?? 128;
+    const outlineOpacity = settings.vlcOutlineOpacity ?? 255;
+    const isBold = settings.vlcIsBold ?? false;
+    // Add subtitle styling options
+    initOptions.push(`--freetype-color=${VLC_COLORS[textColor]}`);
+    initOptions.push(`--freetype-background-opacity=${backgroundOpacity}`);
+    initOptions.push(
+      `--freetype-background-color=${VLC_COLORS[backgroundColor]}`,
+    );
+    initOptions.push(`--freetype-outline-opacity=${outlineOpacity}`);
+    initOptions.push(`--freetype-outline-color=${VLC_COLORS[outlineColor]}`);
+    initOptions.push(
+      `--freetype-outline-thickness=${OUTLINE_THICKNESS[outlineThickness]}`,
+    );
+    initOptions.push(`--sub-text-scale=${settings.subtitleSize}`);
+    initOptions.push("--sub-margin=40");
+    if (isBold) {
+      initOptions.push("--freetype-bold");
+    }
+  }
+  if (notTranscoding && chosenAudioTrack) {
+    initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
+  }
+
  const [isMounted, setIsMounted] = useState(false);

  // Add useEffect to handle mounting
@@ -586,7 +625,6 @@ export default function page() {
  const startPictureInPicture = useCallback(async () => {
    return videoRef.current?.startPictureInPicture?.();
  }, []);
-
  const play = useCallback(() => {
    videoRef.current?.play?.();
  }, []);
@@ -596,40 +634,46 @@ export default function page() {
  }, []);

  const seek = useCallback((position: number) => {
-    // MPV expects seconds, convert from ms
-    videoRef.current?.seekTo?.(position / 1000);
+    videoRef.current?.seekTo?.(position);
+  }, []);
+  const getAudioTracks = useCallback(async () => {
+    return videoRef.current?.getAudioTracks?.() || null;
  }, []);

-  // Apply MPV subtitle settings when video loads
-  useEffect(() => {
-    if (!isVideoLoaded || !videoRef.current) return;
+  const getSubtitleTracks = useCallback(async () => {
+    return videoRef.current?.getSubtitleTracks?.() || null;
+  }, []);

-    const applySubtitleSettings = async () => {
-      if (settings.mpvSubtitleScale !== undefined) {
-        await videoRef.current?.setSubtitleScale(settings.mpvSubtitleScale);
-      }
-      if (settings.mpvSubtitleMarginY !== undefined) {
-        await videoRef.current?.setSubtitleMarginY(settings.mpvSubtitleMarginY);
-      }
-      if (settings.mpvSubtitleAlignX !== undefined) {
-        await videoRef.current?.setSubtitleAlignX(settings.mpvSubtitleAlignX);
-      }
-      if (settings.mpvSubtitleAlignY !== undefined) {
-        await videoRef.current?.setSubtitleAlignY(settings.mpvSubtitleAlignY);
-      }
-      if (settings.mpvSubtitleFontSize !== undefined) {
-        await videoRef.current?.setSubtitleFontSize(
-          settings.mpvSubtitleFontSize,
-        );
-      }
-      // Apply subtitle size from general settings
-      if (settings.subtitleSize) {
-        await videoRef.current?.setSubtitleFontSize(settings.subtitleSize);
-      }
-    };
+  const setSubtitleTrack = useCallback((index: number) => {
+    videoRef.current?.setSubtitleTrack?.(index);
+  }, []);

-    applySubtitleSettings();
-  }, [isVideoLoaded, settings]);
+  const setSubtitleURL = useCallback((url: string, _customName?: string) => {
+    // Note: VlcPlayer type only expects url parameter
+    videoRef.current?.setSubtitleURL?.(url);
+  }, []);
+
+  const setAudioTrack = useCallback((index: number) => {
+    videoRef.current?.setAudioTrack?.(index);
+  }, []);
+
+  const setVideoAspectRatio = useCallback(
+    async (aspectRatio: string | null) => {
+      return (
+        videoRef.current?.setVideoAspectRatio?.(aspectRatio) ||
+        Promise.resolve()
+      );
+    },
+    [],
+  );
+
+  const setVideoScaleFactor = useCallback(async (scaleFactor: number) => {
+    return (
+      videoRef.current?.setVideoScaleFactor?.(scaleFactor) || Promise.resolve()
+    );
+  }, []);
+
+  console.log("Debug: component render"); // Uncomment to debug re-renders

  // Show error UI first, before checking loading/missing‐data
  if (itemStatus.isError || streamStatus.isError) {
@@ -640,7 +684,7 @@ export default function page() {
    );
  }

-  // Then show loader while either side is still fetching or data isn't present
+  // Then show loader while either side is still fetching or data isn’t present
  if (itemStatus.isLoading || streamStatus.isLoading || !item || !stream) {
    // …loader UI…
    return (
@@ -658,80 +702,90 @@ export default function page() {
    );

  return (
-    <PlayerProvider
-      playerRef={videoRef}
-      item={item}
-      mediaSource={stream?.mediaSource}
-      isVideoLoaded={isVideoLoaded}
-      tracksReady={tracksReady}
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: "black",
+        height: "100%",
+        width: "100%",
+      }}
    >
-      <VideoProvider>
-        <View
-          style={{
-            flex: 1,
-            backgroundColor: "black",
-            height: "100%",
-            width: "100%",
+      <View
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
+      >
+        <VlcPlayerView
+          ref={videoRef}
+          source={{
+            uri: stream?.url || "",
+            autoplay: true,
+            isNetwork: !offline,
+            startPosition,
+            externalSubtitles,
+            initOptions,
          }}
-        >
-          <View
-            style={{
-              display: "flex",
-              width: "100%",
-              height: "100%",
-              position: "relative",
-              flexDirection: "column",
-              justifyContent: "center",
-            }}
-          >
-            <MpvPlayerView
-              ref={videoRef}
-              source={videoSource}
-              style={{ width: "100%", height: "100%" }}
-              onProgress={onProgress}
-              onPlaybackStateChange={onPlaybackStateChanged}
-              onLoad={() => setIsVideoLoaded(true)}
-              onError={(e) => {
-                console.error("Video Error:", e.nativeEvent);
-                Alert.alert(
-                  t("player.error"),
-                  t("player.an_error_occured_while_playing_the_video"),
-                );
-                writeToLog("ERROR", "Video Error", e.nativeEvent);
-              }}
-              onTracksReady={() => {
-                setTracksReady(true);
-              }}
-            />
-          </View>
-          {isMounted === true && item && !isPipMode && (
-            <Controls
-              mediaSource={stream?.mediaSource}
-              item={item}
-              togglePlay={togglePlay}
-              isPlaying={isPlaying}
-              isSeeking={isSeeking}
-              progress={progress}
-              cacheProgress={cacheProgress}
-              isBuffering={isBuffering}
-              showControls={showControls}
-              setShowControls={setShowControls}
-              startPictureInPicture={startPictureInPicture}
-              play={play}
-              pause={pause}
-              seek={seek}
-              enableTrickplay={true}
-              offline={offline}
-              aspectRatio={aspectRatio}
-              scaleFactor={scaleFactor}
-              setAspectRatio={setAspectRatio}
-              setScaleFactor={setScaleFactor}
-              api={api}
-              downloadedFiles={downloadedFiles}
-            />
-          )}
-        </View>
-      </VideoProvider>
-    </PlayerProvider>
+          style={{ width: "100%", height: "100%" }}
+          onVideoProgress={onProgress}
+          progressUpdateInterval={1000}
+          onVideoStateChange={onPlaybackStateChanged}
+          onVideoLoadEnd={() => {
+            setIsVideoLoaded(true);
+          }}
+          onVideoError={(e) => {
+            console.error("Video Error:", e.nativeEvent);
+            Alert.alert(
+              t("player.error"),
+              t("player.an_error_occured_while_playing_the_video"),
+            );
+            writeToLog("ERROR", "Video Error", e.nativeEvent);
+          }}
+          onPipStarted={(e) => {
+            setIsPipMode(e.nativeEvent.pipStarted);
+          }}
+        />
+      </View>
+      {isMounted === true && item && !isPipMode && (
+        <Controls
+          mediaSource={stream?.mediaSource}
+          item={item}
+          videoRef={videoRef}
+          togglePlay={togglePlay}
+          isPlaying={isPlaying}
+          isSeeking={isSeeking}
+          progress={progress}
+          cacheProgress={cacheProgress}
+          isBuffering={isBuffering}
+          showControls={showControls}
+          setShowControls={setShowControls}
+          isVideoLoaded={isVideoLoaded}
+          startPictureInPicture={startPictureInPicture}
+          play={play}
+          pause={pause}
+          seek={seek}
+          enableTrickplay={true}
+          getAudioTracks={getAudioTracks}
+          getSubtitleTracks={getSubtitleTracks}
+          offline={offline}
+          setSubtitleTrack={setSubtitleTrack}
+          setSubtitleURL={setSubtitleURL}
+          setAudioTrack={setAudioTrack}
+          setVideoAspectRatio={setVideoAspectRatio}
+          setVideoScaleFactor={setVideoScaleFactor}
+          aspectRatio={aspectRatio}
+          scaleFactor={scaleFactor}
+          setAspectRatio={setAspectRatio}
+          setScaleFactor={setScaleFactor}
+          isVlc
+          api={api}
+          downloadedFiles={downloadedFiles}
+        />
+      )}
+    </View>
  );
 }
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -1,19 +1,17 @@
 import { Link, Stack } from "expo-router";
-import { StyleSheet } from "react-native";
-
-import { ThemedText } from "@/components/ThemedText";
-import { ThemedView } from "@/components/ThemedView";
+import { StyleSheet, View } from "react-native";
+import { Text } from "../components/common/Text";

 export default function NotFoundScreen() {
  return (
    <>
      <Stack.Screen options={{ title: "Oops!" }} />
-      <ThemedView style={styles.container}>
-        <ThemedText type='title'>This screen doesn't exist.</ThemedText>
+      <View style={styles.container}>
+        <Text>This screen doesn't exist.</Text>
        <Link href={"/home"} style={styles.link}>
-          <ThemedText type='link'>Go to home screen!</ThemedText>
+          <Text>Go to home screen!</Text>
        </Link>
-      </ThemedView>
+      </View>
    </>
  );
 }
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -34,6 +34,7 @@ import { storage } from "@/utils/mmkv";

 const Notifications = !Platform.isTV ? require("expo-notifications") : null;

+import "@/global.css";
 import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
 import { getLocales } from "expo-localization";
 import type { EventSubscription } from "expo-modules-core";
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -42,14 +42,14 @@ const Login: React.FC = () => {

  const [loadingServerCheck, setLoadingServerCheck] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
-  const [serverURL, setServerURL] = useState<string>(_apiUrl || "");
+  const [serverURL, setServerURL] = useState<string>(_apiUrl);
  const [serverName, setServerName] = useState<string>("");
  const [credentials, setCredentials] = useState<{
    username: string;
    password: string;
  }>({
-    username: _username || "",
-    password: _password || "",
+    username: _username,
+    password: _password,
  });

  /**
@@ -264,12 +264,6 @@ const Login: React.FC = () => {
                onChangeText={(text: string) =>
                  setCredentials({ ...credentials, username: text })
                }
-                onEndEditing={(e) => {
-                  const newValue = e.nativeEvent.text;
-                  if (newValue && newValue !== credentials.username) {
-                    setCredentials({ ...credentials, username: newValue });
-                  }
-                }}
                value={credentials.username}
                keyboardType='default'
                returnKeyType='done'
@@ -278,8 +272,6 @@ const Login: React.FC = () => {
                clearButtonMode='while-editing'
                maxLength={500}
                extraClassName='mb-4'
-                autoFocus={false}
-                blurOnSubmit={true}
              />

              {/* Password */}
@@ -288,12 +280,6 @@ const Login: React.FC = () => {
                onChangeText={(text: string) =>
                  setCredentials({ ...credentials, password: text })
                }
-                onEndEditing={(e) => {
-                  const newValue = e.nativeEvent.text;
-                  if (newValue && newValue !== credentials.password) {
-                    setCredentials({ ...credentials, password: newValue });
-                  }
-                }}
                value={credentials.password}
                secureTextEntry
                keyboardType='default'
@@ -303,17 +289,10 @@ const Login: React.FC = () => {
                clearButtonMode='while-editing'
                maxLength={500}
                extraClassName='mb-4'
-                autoFocus={false}
-                blurOnSubmit={true}
              />

              <View className='mt-4'>
-                <Button
-                  onPress={handleLogin}
-                  disabled={!credentials.username.trim()}
-                >
-                  {t("login.login_button")}
-                </Button>
+                <Button onPress={handleLogin}>{t("login.login_button")}</Button>
              </View>
              <View className='mt-3'>
                <Button
@@ -355,8 +334,6 @@ const Login: React.FC = () => {
                autoCapitalize='none'
                textContentType='URL'
                maxLength={500}
-                autoFocus={false}
-                blurOnSubmit={true}
              />

              {/* Full-width primary button */}
@@ -400,7 +377,7 @@ const Login: React.FC = () => {
        {api?.basePath ? (
          <View className='flex flex-col flex-1 items-center justify-center'>
            <View className='px-4 -mt-20 w-full'>
-              <View className='flex flex-col space-y-2'>
+              <View className='flex flex-col gap-y-2'>
                <Text className='text-2xl font-bold -mb-2'>
                  {serverName ? (
                    <>
@@ -417,12 +394,6 @@ const Login: React.FC = () => {
                  onChangeText={(text) =>
                    setCredentials({ ...credentials, username: text })
                  }
-                  onEndEditing={(e) => {
-                    const newValue = e.nativeEvent.text;
-                    if (newValue && newValue !== credentials.username) {
-                      setCredentials({ ...credentials, username: newValue });
-                    }
-                  }}
                  value={credentials.username}
                  keyboardType='default'
                  returnKeyType='done'
@@ -439,12 +410,6 @@ const Login: React.FC = () => {
                  onChangeText={(text) =>
                    setCredentials({ ...credentials, password: text })
                  }
-                  onEndEditing={(e) => {
-                    const newValue = e.nativeEvent.text;
-                    if (newValue && newValue !== credentials.password) {
-                      setCredentials({ ...credentials, password: newValue });
-                    }
-                  }}
                  value={credentials.password}
                  secureTextEntry
                  keyboardType='default'
@@ -458,7 +423,6 @@ const Login: React.FC = () => {
                  <Button
                    onPress={handleLogin}
                    loading={loading}
-                    disabled={!credentials.username.trim()}
                    className='flex-1 mr-2'
                  >
                    {t("login.login_button")}
--- a/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer1.svg
+++ b/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer1.svg
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.133333,0,0,-0.133333,-110.933,512.698)">
-        <g id="g10">
-            <path id="path88" d="M3547.01,1831.49C3493.38,1822.66 3262.53,1779.28 2992.01,1820.24C2424.16,1906.21 2154.85,2275.8 1882,2420.24C1473.31,2636.6 1060.97,2644.95 832,2592.03L832,1445.92C832,1321.76 863.078,1198.06 925.307,1090.27C1057.09,862.011 1323.38,718.405 1586.6,736.145C1695.48,743.482 1801.3,777.735 1895.64,832.199L3357.51,1676.21C3424.47,1714.87 3482.92,1761.76 3532.01,1815.41L3547.01,1831.49Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2879.19,0,0,2879.19,832.651,2289.93)"><stop offset="0" style="stop-color:rgb(149,41,235);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(98,22,247);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>
--- a/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer2.svg
+++ b/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer2.svg
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.133333,0,0,-0.133333,-110.933,512.698)">
-        <g id="g10">
-            <path id="path66" d="M3357.51,2903.64L1895.64,3747.65C1670.29,3877.76 1412.33,3877.76 1186.98,3747.65C961.629,3617.55 832.648,3394.14 832.648,3133.93L832.648,1445.92C832.648,1185.71 961.629,962.305 1186.98,832.199C1412.33,702.094 1670.29,702.094 1895.64,832.199L3357.51,1676.21C3582.86,1806.31 3711.84,2029.71 3711.84,2289.93C3711.84,2550.14 3582.86,2773.54 3357.51,2903.64ZM1721.48,3213.68L3098.31,2454.7C3163.9,2418.55 3193.45,2364.85 3193.45,2289.93C3193.45,2215 3163.93,2161.32 3098.31,2125.15L1721.48,1366.18C1655.87,1330.01 1596.09,1328.72 1531.21,1366.18C1466.34,1403.63 1436.08,1456.03 1436.08,1530.96L1436.08,3048.89C1436.08,3123.77 1466.35,3176.23 1531.21,3213.68C1596.08,3251.11 1655.89,3249.83 1721.48,3213.68" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2879.19,0,0,2879.19,832.651,2289.93)"><stop offset="0" style="stop-color:rgb(188,74,241);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(227,105,219);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>
--- a/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer3.svg
+++ b/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer3.svg
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g>
-        <g id="g10">
-            <path id="path88" d="M0,319.909L0,234C17.667,234.844 138.649,236.708 195,190C220.441,168.912 271.21,169.515 294.001,178.788C332.576,194.487 378.643,259.549 360,270.644C353.455,277.797 345.662,284.049 336.734,289.204L141.818,401.738C129.24,409 115.13,413.567 100.613,414.546C65.517,416.911 30.012,397.763 12.441,367.329C4.144,352.957 0,336.464 0,319.909Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2879.19,0,0,2879.19,832.651,2289.93)"><stop offset="0" style="stop-color:rgb(225,102,222);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(204,88,233);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>
--- a/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer4.svg
+++ b/assets/images/icon-ios-liquid-glass.icon/Assets/streamyfin_logo_layer4.svg
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 384 415" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(0.133333,0,0,-0.133333,-110.933,512.698)">
-        <g id="g10">
-            <path id="path28" d="M1427.29,1523.37C1427.29,1447.7 1457.85,1394.77 1523.38,1356.94C1588.91,1319.11 1649.28,1320.41 1715.55,1356.94L3106.14,2123.5C3172.42,2160.03 3202.24,2214.25 3202.24,2289.93C3202.24,2365.6 3172.39,2419.83 3106.14,2456.35L1715.55,3222.91C1649.31,3259.43 1588.89,3260.73 1523.38,3222.91C1457.87,3185.1 1427.29,3132.11 1427.29,3056.48L1427.29,1523.37" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
-        </g>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.17673e-13,-1921.74,1921.74,1.17673e-13,2314.76,3250.79)"><stop offset="0" style="stop-color:rgb(93,17,250);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(143,40,236);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>
--- a/assets/images/icon-ios-liquid-glass.icon/icon.json
+++ b/assets/images/icon-ios-liquid-glass.icon/icon.json
@@ -1,184 +0,0 @@
-{
-  "fill": {
-    "solid": "display-p3:0.18039,0.18039,0.18039,1.00000"
-  },
-  "groups": [
-    {
-      "blur-material": 0.3,
-      "layers": [
-        {
-          "fill-specializations": [
-            {
-              "value": "none"
-            },
-            {
-              "appearance": "tinted",
-              "value": {
-                "automatic-gradient": "display-p3:0.76482,0.76482,0.76482,0.84903"
-              }
-            }
-          ],
-          "glass": true,
-          "hidden": false,
-          "image-name": "streamyfin_logo_layer1.svg",
-          "name": "streamyfin_logo_layer1"
-        }
-      ],
-      "opacity": 1,
-      "position": {
-        "scale": 1.7,
-        "translation-in-points": [30, 0]
-      },
-      "shadow": {
-        "kind": "none",
-        "opacity": 1
-      },
-      "specular": true,
-      "translucency": {
-        "enabled": true,
-        "value": 0.6
-      }
-    },
-    {
-      "blend-mode": "normal",
-      "blur-material": 0.8,
-      "hidden": false,
-      "layers": [
-        {
-          "blend-mode": "normal",
-          "fill-specializations": [
-            {
-              "value": "none"
-            },
-            {
-              "appearance": "tinted",
-              "value": {
-                "automatic-gradient": "gray:0.75000,1.00000"
-              }
-            }
-          ],
-          "hidden": false,
-          "image-name": "streamyfin_logo_layer2.svg",
-          "name": "streamyfin_logo_layer2",
-          "opacity": 1,
-          "position": {
-            "scale": 1,
-            "translation-in-points": [0, 0]
-          }
-        }
-      ],
-      "lighting": "individual",
-      "name": "Group",
-      "opacity": 1,
-      "position": {
-        "scale": 1.7,
-        "translation-in-points": [30, -0.01613253252572302]
-      },
-      "shadow": {
-        "kind": "layer-color",
-        "opacity": 0.35
-      },
-      "specular": true,
-      "translucency-specializations": [
-        {
-          "value": {
-            "enabled": true,
-            "value": 0.5
-          }
-        },
-        {
-          "appearance": "tinted",
-          "value": {
-            "enabled": true,
-            "value": 0.8
-          }
-        }
-      ]
-    },
-    {
-      "blend-mode": "normal",
-      "blur-material": 0.5,
-      "layers": [
-        {
-          "fill-specializations": [
-            {
-              "appearance": "tinted",
-              "value": {
-                "automatic-gradient": "gray:0.29000,1.00000"
-              }
-            }
-          ],
-          "glass": true,
-          "hidden": false,
-          "image-name": "streamyfin_logo_layer3.svg",
-          "name": "streamyfin_logo_layer3",
-          "opacity": 0.9
-        }
-      ],
-      "name": "Group",
-      "opacity": 0.8,
-      "position": {
-        "scale": 1.7,
-        "translation-in-points": [30, 0]
-      },
-      "shadow": {
-        "kind": "none",
-        "opacity": 0.5
-      },
-      "specular": true,
-      "translucency": {
-        "enabled": true,
-        "value": 0.7
-      }
-    },
-    {
-      "blur-material": 0.5,
-      "hidden": false,
-      "layers": [
-        {
-          "glass": true,
-          "hidden-specializations": [
-            {
-              "value": false
-            },
-            {
-              "appearance": "tinted",
-              "value": true
-            }
-          ],
-          "image-name": "streamyfin_logo_layer4.svg",
-          "name": "streamyfin_logo_layer4",
-          "opacity-specializations": [
-            {
-              "value": 1
-            },
-            {
-              "appearance": "tinted",
-              "value": 0
-            }
-          ]
-        }
-      ],
-      "lighting": "combined",
-      "name": "Group",
-      "opacity": 0.9,
-      "position": {
-        "scale": 1.7,
-        "translation-in-points": [30, 0]
-      },
-      "shadow": {
-        "kind": "neutral",
-        "opacity": 0.5
-      },
-      "specular": false,
-      "translucency": {
-        "enabled": true,
-        "value": 0.5
-      }
-    }
-  ],
-  "supported-platforms": {
-    "circles": ["watchOS"],
-    "squares": "shared"
-  }
-}
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,6 +2,6 @@ module.exports = (api) => {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
-    plugins: ["nativewind/babel", "react-native-worklets/plugin"],
+    plugins: ["react-native-worklets/plugin"],
  };
 };
--- a/bun.lock
+++ b/bun.lock
@@ -46,18 +46,19 @@
        "i18next": "^25.0.0",
        "jotai": "^2.12.5",
        "lodash": "^4.17.21",
-        "nativewind": "^2.0.11",
+        "nativewind": "^5.0.0-preview.2",
        "patch-package": "^8.0.0",
        "react": "19.1.0",
        "react-dom": "19.1.0",
-        "react-i18next": "16.0.0",
+        "react-i18next": "^15.4.0",
        "react-native": "npm:react-native-tvos@0.81.5-1",
        "react-native-awesome-slider": "^2.9.0",
        "react-native-bottom-tabs": "^1.0.2",
        "react-native-circular-progress": "^1.4.1",
        "react-native-collapsible": "^1.6.2",
        "react-native-country-flag": "^2.0.2",
-        "react-native-device-info": "^15.0.0",
+        "react-native-css": "^3.0.1",
+        "react-native-device-info": "^14.0.4",
        "react-native-edge-to-edge": "^1.7.0",
        "react-native-gesture-handler": "~2.28.0",
        "react-native-google-cast": "^4.9.1",
@@ -80,31 +81,33 @@
        "react-native-web": "^0.21.0",
        "react-native-worklets": "0.5.1",
        "sonner-native": "^0.21.0",
-        "tailwindcss": "3.3.2",
+        "tailwindcss": "^4.1.17",
        "use-debounce": "^10.0.4",
        "zod": "^4.1.3",
      },
      "devDependencies": {
-        "@babel/core": "7.28.5",
-        "@biomejs/biome": "2.3.5",
-        "@react-native-community/cli": "20.0.2",
-        "@react-native-tvos/config-tv": "0.1.4",
-        "@types/jest": "29.5.14",
-        "@types/lodash": "4.17.20",
+        "@babel/core": "^7.20.0",
+        "@biomejs/biome": "^2.3.5",
+        "@react-native-community/cli": "^20.0.0",
+        "@react-native-tvos/config-tv": "^0.1.1",
+        "@tailwindcss/postcss": "^4.1.17",
+        "@types/jest": "^29.5.12",
+        "@types/lodash": "^4.17.15",
        "@types/react": "~19.1.10",
-        "@types/react-test-renderer": "19.1.0",
-        "cross-env": "10.1.0",
-        "expo-doctor": "1.17.11",
-        "husky": "9.1.7",
-        "lint-staged": "16.2.6",
+        "@types/react-test-renderer": "^19.0.0",
+        "cross-env": "^10.0.0",
+        "expo-doctor": "^1.17.0",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.1.5",
+        "postcss": "^8.5.6",
+        "postinstall-postinstall": "^2.1.0",
        "react-test-renderer": "19.1.1",
-        "typescript": "5.9.3",
+        "typescript": "~5.9.2",
      },
    },
  },
  "overrides": {
-    "expo-constants": "~18.0.10",
-    "expo-task-manager": "~14.0.8",
+    "lightningcss": "1.30.1",
  },
  "packages": {
    "@0no-co/graphql.web": ["@0no-co/graphql.web@1.2.0", "", { "peerDependencies": { "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0" }, "optionalPeers": ["graphql"] }, "sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw=="],
@@ -133,7 +136,7 @@

    "@babel/helper-member-expression-to-functions": ["@babel/helper-member-expression-to-functions@7.28.5", "", { "dependencies": { "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5" } }, "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg=="],

-    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.18.6", "", { "dependencies": { "@babel/types": "^7.18.6" } }, "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA=="],
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],

    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", "@babel/traverse": "^7.28.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw=="],

@@ -577,6 +580,36 @@

    "@sinonjs/fake-timers": ["@sinonjs/fake-timers@10.3.0", "", { "dependencies": { "@sinonjs/commons": "^3.0.0" } }, "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA=="],

+    "@tailwindcss/node": ["@tailwindcss/node@4.1.17", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.17" } }, "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.17", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.17", "@tailwindcss/oxide-darwin-arm64": "4.1.17", "@tailwindcss/oxide-darwin-x64": "4.1.17", "@tailwindcss/oxide-freebsd-x64": "4.1.17", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17", "@tailwindcss/oxide-linux-arm64-musl": "4.1.17", "@tailwindcss/oxide-linux-x64-gnu": "4.1.17", "@tailwindcss/oxide-linux-x64-musl": "4.1.17", "@tailwindcss/oxide-wasm32-wasi": "4.1.17", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17", "@tailwindcss/oxide-win32-x64-msvc": "4.1.17" } }, "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.17", "", { "os": "android", "cpu": "arm64" }, "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.17", "", { "os": "darwin", "cpu": "arm64" }, "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.17", "", { "os": "darwin", "cpu": "x64" }, "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.17", "", { "os": "freebsd", "cpu": "x64" }, "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17", "", { "os": "linux", "cpu": "arm" }, "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.17", "", { "os": "linux", "cpu": "x64" }, "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.17", "", { "os": "linux", "cpu": "x64" }, "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.17", "", { "dependencies": { "@emnapi/core": "^1.6.0", "@emnapi/runtime": "^1.6.0", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.0.7", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.17", "", { "os": "win32", "cpu": "arm64" }, "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.17", "", { "os": "win32", "cpu": "x64" }, "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw=="],
+
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.17", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.17", "@tailwindcss/oxide": "4.1.17", "postcss": "^8.4.41", "tailwindcss": "4.1.17" } }, "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw=="],
+
    "@tanstack/query-core": ["@tanstack/query-core@5.90.7", "", {}, "sha512-6PN65csiuTNfBMXqQUxQhCNdtm1rV+9kC9YwWAIKcaxAauq3Wu7p18j3gQY3YIBJU70jT/wzCCZ2uqto/vQgiQ=="],

    "@tanstack/react-query": ["@tanstack/react-query@5.90.7", "", { "dependencies": { "@tanstack/query-core": "5.90.7" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-wAHc/cgKzW7LZNFloThyHnV/AX9gTg3w5yAv0gvQHPZoCnepwqCMtzbuPbb2UvfvO32XZ46e8bPOYbfZhzVnnQ=="],
@@ -687,6 +720,8 @@

    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],

+    "array-timsort": ["array-timsort@1.0.3", "", {}, "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ=="],
+
    "asap": ["asap@2.0.6", "", {}, "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="],

    "assert": ["assert@2.1.0", "", { "dependencies": { "call-bind": "^1.0.2", "is-nan": "^1.3.2", "object-is": "^1.1.5", "object.assign": "^4.1.4", "util": "^0.12.5" } }, "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw=="],
@@ -713,7 +748,7 @@

    "babel-plugin-polyfill-regenerator": ["babel-plugin-polyfill-regenerator@0.6.5", "", { "dependencies": { "@babel/helper-define-polyfill-provider": "^0.6.5" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, "sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg=="],

-    "babel-plugin-react-compiler": ["babel-plugin-react-compiler@1.0.0", "", { "dependencies": { "@babel/types": "^7.26.0" } }, "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw=="],
+    "babel-plugin-react-compiler": ["babel-plugin-react-compiler@19.1.0-rc.1-rc-af1b7da-20250421", "", { "dependencies": { "@babel/types": "^7.26.0" } }, "sha512-E3kaokBhWDLf7ZD8fuYjYn0ZJHYZ+3EHtAWCdX2hl4lpu1z9S/Xr99sxhx2bTCVB41oIesz9FtM8f4INsrZaOw=="],

    "babel-plugin-react-native-web": ["babel-plugin-react-native-web@0.21.2", "", {}, "sha512-SPD0J6qjJn8231i0HZhlAGH6NORe+QvRSQM2mwQEzJ2Fb3E4ruWTiiicPlHjmeWShDXLcvoorOCXjeR7k/lyWA=="],

@@ -739,8 +774,6 @@

    "big-integer": ["big-integer@1.6.52", "", {}, "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg=="],

-    "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
-
    "bl": ["bl@4.1.0", "", { "dependencies": { "buffer": "^5.5.0", "inherits": "^2.0.4", "readable-stream": "^3.4.0" } }, "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="],

    "bmp-js": ["bmp-js@0.1.0", "", {}, "sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw=="],
@@ -777,16 +810,10 @@

    "camelcase": ["camelcase@6.3.0", "", {}, "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="],

-    "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
-
-    "camelize": ["camelize@1.0.1", "", {}, "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="],
-
    "caniuse-lite": ["caniuse-lite@1.0.30001754", "", {}, "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg=="],

    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],

-    "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
-
    "chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],

    "chrome-launcher": ["chrome-launcher@0.15.2", "", { "dependencies": { "@types/node": "*", "escape-string-regexp": "^4.0.0", "is-wsl": "^2.2.0", "lighthouse-logger": "^1.0.0" }, "bin": { "print-chrome-path": "bin/print-chrome-path.js" } }, "sha512-zdLEwNo3aUVzIhKhTtXfxhdvZhUghrnmkvcAq2NoDd+LeOHKf03H5jwZ8T/STsAlzyALkBVK552iaG1fGf1xVQ=="],
@@ -817,12 +844,16 @@

    "colorette": ["colorette@2.0.20", "", {}, "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="],

+    "colorjs.io": ["colorjs.io@0.6.0-alpha.1", "", {}, "sha512-c/h/8uAmPydQcriRdX8UTAFHj6SpSHFHBA8LvMikvYWAVApPTwg/pyOXNsGmaCBd6L/EeDlRHSNhTtnIFp/qsg=="],
+
    "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],

    "command-exists": ["command-exists@1.2.9", "", {}, "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w=="],

    "commander": ["commander@9.5.0", "", {}, "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="],

+    "comment-json": ["comment-json@4.4.1", "", { "dependencies": { "array-timsort": "^1.0.3", "core-util-is": "^1.0.3", "esprima": "^4.0.1" } }, "sha512-r1To31BQD5060QdkC+Iheai7gHwoSZobzunqkf2/kQ6xIAfJyrKNAFUwdKvkK7Qgu7pVTKQEa7ok7Ed3ycAJgg=="],
+
    "compressible": ["compressible@2.0.18", "", { "dependencies": { "mime-db": ">= 1.43.0 < 2" } }, "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg=="],

    "compression": ["compression@1.8.1", "", { "dependencies": { "bytes": "3.1.2", "compressible": "~2.0.18", "debug": "2.6.9", "negotiator": "~0.6.4", "on-headers": "~1.1.0", "safe-buffer": "5.2.1", "vary": "~1.1.2" } }, "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w=="],
@@ -837,6 +868,8 @@

    "core-js-compat": ["core-js-compat@3.46.0", "", { "dependencies": { "browserslist": "^4.26.3" } }, "sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law=="],

+    "core-util-is": ["core-util-is@1.0.3", "", {}, "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="],
+
    "cosmiconfig": ["cosmiconfig@9.0.0", "", { "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", "parse-json": "^5.2.0" }, "peerDependencies": { "typescript": ">=4.9.5" }, "optionalPeers": ["typescript"] }, "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg=="],

    "cross-env": ["cross-env@10.1.0", "", { "dependencies": { "@epic-web/invariant": "^1.0.0", "cross-spawn": "^7.0.6" }, "bin": { "cross-env": "dist/bin/cross-env.js", "cross-env-shell": "dist/bin/cross-env-shell.js" } }, "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw=="],
@@ -847,22 +880,14 @@

    "crypto-random-string": ["crypto-random-string@2.0.0", "", {}, "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="],

-    "css-color-keywords": ["css-color-keywords@1.0.0", "", {}, "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="],
-
    "css-in-js-utils": ["css-in-js-utils@3.1.0", "", { "dependencies": { "hyphenate-style-name": "^1.0.3" } }, "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A=="],

-    "css-mediaquery": ["css-mediaquery@0.1.2", "", {}, "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="],
-
    "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="],

-    "css-to-react-native": ["css-to-react-native@3.2.0", "", { "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", "postcss-value-parser": "^4.0.2" } }, "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ=="],
-
    "css-tree": ["css-tree@1.1.3", "", { "dependencies": { "mdn-data": "2.0.14", "source-map": "^0.6.1" } }, "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q=="],

    "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="],

-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
-
    "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],

    "dayjs": ["dayjs@1.11.19", "", {}, "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="],
@@ -895,12 +920,8 @@

    "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],

-    "didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
-
    "diff-sequences": ["diff-sequences@29.6.3", "", {}, "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q=="],

-    "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
-
    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],

    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
@@ -925,6 +946,8 @@

    "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],

+    "enhanced-resolve": ["enhanced-resolve@5.18.3", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww=="],
+
    "entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],

    "env-editor": ["env-editor@0.4.2", "", {}, "sha512-ObFo8v4rQJAE59M69QzwloxPZtd33TpYEIjtKD1rrFDcM1Gd7IkDxEBU+HriziN6HSHQnBJi8Dmy+JWkav5HKA=="],
@@ -1051,8 +1074,6 @@

    "exponential-backoff": ["exponential-backoff@3.1.3", "", {}, "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA=="],

-    "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
-
    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],

    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
@@ -1131,7 +1152,7 @@

    "glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],

-    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+    "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

    "global-dirs": ["global-dirs@0.1.1", "", { "dependencies": { "ini": "^1.3.4" } }, "sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg=="],

@@ -1199,8 +1220,6 @@

    "is-arrayish": ["is-arrayish@0.3.4", "", {}, "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA=="],

-    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
-
    "is-callable": ["is-callable@1.2.7", "", {}, "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="],

    "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
@@ -1267,7 +1286,7 @@

    "jimp-compact": ["jimp-compact@0.16.1", "", {}, "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww=="],

-    "jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
+    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],

    "joi": ["joi@17.13.3", "", { "dependencies": { "@hapi/hoek": "^9.3.0", "@hapi/topo": "^5.1.0", "@sideway/address": "^4.1.5", "@sideway/formula": "^3.0.1", "@sideway/pinpoint": "^2.0.0" } }, "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA=="],

@@ -1307,31 +1326,27 @@

    "lighthouse-logger": ["lighthouse-logger@1.4.2", "", { "dependencies": { "debug": "^2.6.9", "marky": "^1.2.2" } }, "sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g=="],

-    "lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="],
+    "lightningcss": ["lightningcss@1.30.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.30.1", "lightningcss-darwin-x64": "1.30.1", "lightningcss-freebsd-x64": "1.30.1", "lightningcss-linux-arm-gnueabihf": "1.30.1", "lightningcss-linux-arm64-gnu": "1.30.1", "lightningcss-linux-arm64-musl": "1.30.1", "lightningcss-linux-x64-gnu": "1.30.1", "lightningcss-linux-x64-musl": "1.30.1", "lightningcss-win32-arm64-msvc": "1.30.1", "lightningcss-win32-x64-msvc": "1.30.1" } }, "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg=="],

-    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="],
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ=="],

-    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="],
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA=="],

-    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="],
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig=="],

-    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="],
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.1", "", { "os": "linux", "cpu": "arm" }, "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q=="],

-    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="],
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw=="],

-    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="],
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ=="],

-    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="],
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.1", "", { "os": "linux", "cpu": "x64" }, "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw=="],

-    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="],
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.1", "", { "os": "linux", "cpu": "x64" }, "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ=="],

-    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="],
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA=="],

-    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="],
-
-    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="],
-
-    "lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.1", "", { "os": "win32", "cpu": "x64" }, "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg=="],

    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],

@@ -1357,6 +1372,8 @@

    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],

+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
    "makeerror": ["makeerror@1.0.12", "", { "dependencies": { "tmpl": "1.0.5" } }, "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg=="],

    "marky": ["marky@1.3.0", "", {}, "sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ=="],
@@ -1431,7 +1448,7 @@

    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],

-    "nativewind": ["nativewind@2.0.11", "", { "dependencies": { "@babel/generator": "^7.18.7", "@babel/helper-module-imports": "7.18.6", "@babel/types": "7.19.0", "css-mediaquery": "^0.1.2", "css-to-react-native": "^3.0.0", "micromatch": "^4.0.5", "postcss": "^8.4.12", "postcss-calc": "^8.2.4", "postcss-color-functional-notation": "^4.2.2", "postcss-css-variables": "^0.18.0", "postcss-nested": "^5.0.6", "react-is": "^18.1.0", "use-sync-external-store": "^1.1.0" }, "peerDependencies": { "tailwindcss": "~3" } }, "sha512-qCEXUwKW21RYJ33KRAJl3zXq2bCq82WoI564fI21D/TiqhfmstZOqPN53RF8qK1NDK6PGl56b2xaTxgObEePEg=="],
+    "nativewind": ["nativewind@5.0.0-preview.2", "", { "dependencies": { "tailwindcss-safe-area": "^1.1.0" }, "peerDependencies": { "react-native-css": "^3.0.1", "tailwindcss": ">4.1.11" } }, "sha512-rTNrwFIwl/n2VH7KPvsZj/NdvKf+uGHF4NYtPamr5qG2eTYGT8B8VeyCPfYf/xUskpWOLJVqVEXaFO/vuIDEdw=="],

    "negotiator": ["negotiator@0.6.4", "", {}, "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w=="],

@@ -1465,8 +1482,6 @@

    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],

-    "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
-
    "object-inspect": ["object-inspect@1.13.4", "", {}, "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew=="],

    "object-is": ["object-is@1.1.6", "", { "dependencies": { "call-bind": "^1.0.7", "define-properties": "^1.2.1" } }, "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q=="],
@@ -1527,8 +1542,6 @@

    "pidtree": ["pidtree@0.6.0", "", { "bin": { "pidtree": "bin/pidtree.js" } }, "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g=="],

-    "pify": ["pify@2.3.0", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
-
    "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],

    "pixelmatch": ["pixelmatch@4.0.2", "", { "dependencies": { "pngjs": "^3.0.0" }, "bin": { "pixelmatch": "bin/pixelmatch" } }, "sha512-J8B6xqiO37sU/gkcMglv6h5Jbd9xNER7aHzpfRdNmV4IbQBzBpe4l9XmbG+xPF/znacgu2jfEw+wHffaq/YkXA=="],
@@ -1541,24 +1554,10 @@

    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],

-    "postcss-calc": ["postcss-calc@8.2.4", "", { "dependencies": { "postcss-selector-parser": "^6.0.9", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.2.2" } }, "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q=="],
-
-    "postcss-color-functional-notation": ["postcss-color-functional-notation@4.2.4", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.2" } }, "sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg=="],
-
-    "postcss-css-variables": ["postcss-css-variables@0.18.0", "", { "dependencies": { "balanced-match": "^1.0.0", "escape-string-regexp": "^1.0.3", "extend": "^3.0.1" }, "peerDependencies": { "postcss": "^8.2.6" } }, "sha512-lYS802gHbzn1GI+lXvy9MYIYDuGnl1WB4FTKoqMQqJ3Mab09A7a/1wZvGTkCEZJTM8mSbIyb1mJYn8f0aPye0Q=="],
-
-    "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
-
-    "postcss-js": ["postcss-js@4.1.0", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw=="],
-
-    "postcss-load-config": ["postcss-load-config@4.0.2", "", { "dependencies": { "lilconfig": "^3.0.0", "yaml": "^2.3.4" }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" }, "optionalPeers": ["postcss", "ts-node"] }, "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ=="],
-
-    "postcss-nested": ["postcss-nested@5.0.6", "", { "dependencies": { "postcss-selector-parser": "^6.0.6" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA=="],
-
-    "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
-
    "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],

+    "postinstall-postinstall": ["postinstall-postinstall@2.1.0", "", {}, "sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ=="],
+
    "pretty-bytes": ["pretty-bytes@5.6.0", "", {}, "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg=="],

    "pretty-format": ["pretty-format@29.7.0", "", { "dependencies": { "@jest/schemas": "^29.6.3", "ansi-styles": "^5.0.0", "react-is": "^18.0.0" } }, "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ=="],
@@ -1605,7 +1604,7 @@

    "react-freeze": ["react-freeze@1.0.4", "", { "peerDependencies": { "react": ">=17.0.0" } }, "sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA=="],

-    "react-i18next": ["react-i18next@16.0.0", "", { "dependencies": { "@babel/runtime": "^7.27.6", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { "i18next": ">= 25.5.2", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-JQ+dFfLnFSKJQt7W01lJHWRC0SX7eDPobI+MSTJ3/gP39xH2g33AuTE7iddAfXYHamJdAeMGM0VFboPaD3G68Q=="],
+    "react-i18next": ["react-i18next@15.7.4", "", { "dependencies": { "@babel/runtime": "^7.27.6", "html-parse-stringify": "^3.0.1" }, "peerDependencies": { "i18next": ">= 23.4.0", "react": ">= 16.8.0", "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-nyU8iKNrI5uDJch0z9+Y5XEr34b0wkyYj3Rp+tfbahxtlswxSCjcUL9H0nqXo9IR3/t5Y5PKIA3fx3MfUyR9Xw=="],

    "react-is": ["react-is@19.2.0", "", {}, "sha512-x3Ax3kNSMIIkyVYhWPyO09bu0uttcAIoecO/um/rKGQ4EltYWVYtyiGkS/3xMynrbVQdS69Jhlv8FXUEZehlzA=="],

@@ -1621,7 +1620,9 @@

    "react-native-country-flag": ["react-native-country-flag@2.0.2", "", {}, "sha512-5LMWxS79ZQ0Q9ntYgDYzWp794+HcQGXQmzzZNBR1AT7z5HcJHtX7rlk8RHi7RVzfp5gW6plWSZ4dKjRpu/OafQ=="],

-    "react-native-device-info": ["react-native-device-info@15.0.1", "", { "peerDependencies": { "react-native": "*" } }, "sha512-U5waZRXtT3l1SgZpZMlIvMKPTkFZPH8W7Ks6GrJhdH723aUIPxjVer7cRSij1mvQdOAAYFJV/9BDzlC8apG89A=="],
+    "react-native-css": ["react-native-css@3.0.1", "", { "dependencies": { "babel-plugin-react-compiler": "^19.1.0-rc.2", "colorjs.io": "0.6.0-alpha.1", "comment-json": "^4.2.5", "debug": "^4.4.1" }, "peerDependencies": { "@expo/metro-config": ">=54", "lightningcss": ">=1.27.0", "react": ">=19", "react-native": ">=0.81" } }, "sha512-sE/Qp2p+UaV9+W6T+GwsRH5sIynaTfhM2Khn+tN1q1YKYq1STVyAWyC+0i6ac4mFAO/FxQ/a03BDmrrt48qiuQ=="],
+
+    "react-native-device-info": ["react-native-device-info@14.1.1", "", { "peerDependencies": { "react-native": "*" } }, "sha512-lXFpe6DJmzbQXNLWxlMHP2xuTU5gwrKAvI8dCAZuERhW9eOXSubOQIesk9lIBnsi9pI19GMrcpJEvs4ARPRYmw=="],

    "react-native-edge-to-edge": ["react-native-edge-to-edge@1.7.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-ERegbsq28yoMndn/Uq49i4h6aAhMvTEjOfkFh50yX9H/dMjjCr/Tix/es/9JcPRvC+q7VzCMWfxWDUb6Jrq1OQ=="],

@@ -1679,14 +1680,10 @@

    "react-test-renderer": ["react-test-renderer@19.1.1", "", { "dependencies": { "react-is": "^19.1.1", "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.1" } }, "sha512-aGRXI+zcBTtg0diHofc7+Vy97nomBs9WHHFY1Csl3iV0x6xucjNYZZAkiVKGiNYUv23ecOex5jE67t8ZzqYObA=="],

-    "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
-
    "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],

    "readable-web-to-node-stream": ["readable-web-to-node-stream@3.0.4", "", { "dependencies": { "readable-stream": "^4.7.0" } }, "sha512-9nX56alTf5bwXQ3ZDipHJhusu9NTQJ/CVPtb/XHAJCXihZeitfJvIRS4GqQ/mfIoOE3IelHMrpayVrosdHBuLw=="],

-    "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
-
    "regenerate": ["regenerate@1.4.2", "", {}, "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="],

    "regenerate-unicode-properties": ["regenerate-unicode-properties@10.2.2", "", { "dependencies": { "regenerate": "^1.4.2" } }, "sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g=="],
@@ -1845,7 +1842,11 @@

    "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],

-    "tailwindcss": ["tailwindcss@3.3.2", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.18.2", "lilconfig": "^2.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", "postcss": "^8.4.23", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.1", "postcss-nested": "^6.0.1", "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0", "resolve": "^1.22.2", "sucrase": "^3.32.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w=="],
+    "tailwindcss": ["tailwindcss@4.1.17", "", {}, "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q=="],
+
+    "tailwindcss-safe-area": ["tailwindcss-safe-area@1.1.0", "", { "peerDependencies": { "tailwindcss": "^4.0.0" } }, "sha512-wuPUeW5BhWNv9yr3OzaGgpqImQG9FBM4mQIQh2C6yjHmOOZsJ3gh5RfNHt+TM16TMtpQs/8k2TWx8yQTFG7Fcw=="],
+
+    "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],

    "tar": ["tar@7.5.2", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg=="],

@@ -1871,8 +1872,6 @@

    "tmpl": ["tmpl@1.0.5", "", {}, "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="],

-    "to-fast-properties": ["to-fast-properties@2.0.0", "", {}, "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="],
-
    "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],

    "toidentifier": ["toidentifier@1.0.1", "", {}, "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="],
@@ -2001,16 +2000,8 @@

    "zod-to-json-schema": ["zod-to-json-schema@3.24.6", "", { "peerDependencies": { "zod": "^3.24.1" } }, "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg=="],

-    "@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
-
    "@babel/highlight/chalk": ["chalk@2.4.2", "", { "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", "supports-color": "^5.3.0" } }, "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ=="],

-    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
-
-    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
-
-    "@babel/plugin-transform-runtime/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
-
    "@expo/cli/getenv": ["getenv@2.0.0", "", {}, "sha512-VilgtJj/ALgGY77fiLam5iD336eSWi96Q15JSAG1zi8NRBysm3LXKdGnHb4m5cuyxvOLQQKWpBZAT6ni4FI2iQ=="],

    "@expo/cli/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
@@ -2119,6 +2110,18 @@

    "@react-navigation/native-stack/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],

+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.7.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.7.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.0.7", "", { "dependencies": { "@emnapi/core": "^1.5.0", "@emnapi/runtime": "^1.5.0", "@tybys/wasm-util": "^0.10.1" }, "bundled": true }, "sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
    "accepts/negotiator": ["negotiator@0.6.3", "", {}, "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="],

    "ansi-fragments/colorette": ["colorette@1.4.0", "", {}, "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="],
@@ -2131,14 +2134,12 @@

    "babel-jest/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],

-    "babel-preset-expo/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+    "babel-preset-expo/babel-plugin-react-compiler": ["babel-plugin-react-compiler@1.0.0", "", { "dependencies": { "@babel/types": "^7.26.0" } }, "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw=="],

    "better-opn/open": ["open@8.4.2", "", { "dependencies": { "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", "is-wsl": "^2.2.0" } }, "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ=="],

    "body-parser/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],

-    "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
-
    "cli-truncate/string-width": ["string-width@8.1.0", "", { "dependencies": { "get-east-asian-width": "^1.3.0", "strip-ansi": "^7.1.0" } }, "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg=="],

    "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
@@ -2157,8 +2158,6 @@

    "expo-router/semver": ["semver@7.6.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],

-    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
-
    "fbjs/promise": ["promise@7.3.1", "", { "dependencies": { "asap": "~2.0.3" } }, "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg=="],

    "fbjs/ua-parser-js": ["ua-parser-js@1.0.41", "", { "bin": { "ua-parser-js": "script/cli.js" } }, "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug=="],
@@ -2215,10 +2214,6 @@

    "metro-transform-worker/metro-source-map": ["metro-source-map@0.83.2", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@babel/traverse--for-generate-function-map": "npm:@babel/traverse@^7.25.3", "@babel/types": "^7.25.2", "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "metro-symbolicate": "0.83.2", "nullthrows": "^1.1.1", "ob1": "0.83.2", "source-map": "^0.5.6", "vlq": "^1.0.0" } }, "sha512-5FL/6BSQvshIKjXOennt9upFngq2lFvDakZn5LfauIVq8+L4sxXewIlSTcxAtzbtjAIaXeOSVMtCJ5DdfCt9AA=="],

-    "nativewind/@babel/types": ["@babel/types@7.19.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.18.10", "@babel/helper-validator-identifier": "^7.18.6", "to-fast-properties": "^2.0.0" } }, "sha512-YuGopBq3ke25BVSiS6fgF49Ul9gH1x70Bcr6bqRLjWCkcX8Hre1/5+z+IiWOIerRMSSEfGZVB9z9kyq7wVs9YA=="],
-
-    "nativewind/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
-
    "node-vibrant/@types/node": ["@types/node@18.19.130", "", { "dependencies": { "undici-types": "~5.26.4" } }, "sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg=="],

    "npm-package-arg/semver": ["semver@7.6.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],
@@ -2229,10 +2224,6 @@

    "path-scurry/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],

-    "postcss-css-variables/escape-string-regexp": ["escape-string-regexp@1.0.5", "", {}, "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="],
-
-    "postcss-load-config/lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
-
    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],

    "pretty-format/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
@@ -2277,8 +2268,6 @@

    "sucrase/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],

-    "tailwindcss/postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
-
    "tar/yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],

    "terminal-link/ansi-escapes": ["ansi-escapes@4.3.2", "", { "dependencies": { "type-fest": "^0.21.3" } }, "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="],
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -2,6 +2,7 @@ import type React from "react";
 import {
  type PropsWithChildren,
  type ReactNode,
+  useMemo,
  useRef,
  useState,
 } from "react";
@@ -17,58 +18,6 @@ import {
 import { useHaptic } from "@/hooks/useHaptic";
 import { Loader } from "./Loader";

-const getColorClasses = (
-  color: "purple" | "red" | "black" | "transparent" | "white",
-  variant: "solid" | "border",
-  focused: boolean,
-): string => {
-  if (variant === "border") {
-    switch (color) {
-      case "purple":
-        return focused
-          ? "bg-transparent border-2 border-purple-400"
-          : "bg-transparent border-2 border-purple-600";
-      case "red":
-        return focused
-          ? "bg-transparent border-2 border-red-400"
-          : "bg-transparent border-2 border-red-600";
-      case "black":
-        return focused
-          ? "bg-transparent border-2 border-neutral-700"
-          : "bg-transparent border-2 border-neutral-900";
-      case "white":
-        return focused
-          ? "bg-transparent border-2 border-gray-100"
-          : "bg-transparent border-2 border-white";
-      case "transparent":
-        return focused
-          ? "bg-transparent border-2 border-gray-400"
-          : "bg-transparent border-2 border-gray-600";
-      default:
-        return "";
-    }
-  } else {
-    switch (color) {
-      case "purple":
-        return focused
-          ? "bg-purple-500 border-2 border-white"
-          : "bg-purple-600 border border-purple-700";
-      case "red":
-        return "bg-red-600";
-      case "black":
-        return "bg-neutral-900";
-      case "white":
-        return focused
-          ? "bg-gray-100 border-2 border-gray-300"
-          : "bg-white border border-gray-200";
-      case "transparent":
-        return "bg-transparent";
-      default:
-        return "";
-    }
-  }
-};
-
 export interface ButtonProps
  extends React.ComponentProps<typeof TouchableOpacity> {
  onPress?: () => void;
@@ -77,8 +26,7 @@ export interface ButtonProps
  disabled?: boolean;
  children?: string | ReactNode;
  loading?: boolean;
-  color?: "purple" | "red" | "black" | "transparent" | "white";
-  variant?: "solid" | "border";
+  color?: "purple" | "red" | "black" | "transparent";
  iconRight?: ReactNode;
  iconLeft?: ReactNode;
  justify?: "center" | "between";
@@ -91,7 +39,6 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
  disabled = false,
  loading = false,
  color = "purple",
-  variant = "solid",
  iconRight,
  iconLeft,
  children,
@@ -109,13 +56,23 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      useNativeDriver: true,
    }).start();

-  const colorClasses = getColorClasses(color, variant, focused);
+  const colorClasses = useMemo(() => {
+    switch (color) {
+      case "purple":
+        return focused
+          ? "bg-purple-500 border-2 border-white"
+          : "bg-purple-600 border border-purple-700";
+      case "red":
+        return "bg-red-600";
+      case "black":
+        return "bg-neutral-900";
+      case "transparent":
+        return "bg-transparent";
+    }
+  }, [color, focused]);

  const lightHapticFeedback = useHaptic("light");

-  const textColorClass =
-    color === "white" && variant === "solid" ? "text-black" : "text-white";
-
  return Platform.isTV ? (
    <Pressable
      className='w-full'
@@ -141,12 +98,10 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
      >
        <View
          className={`rounded-2xl py-5 items-center justify-center 
-            ${colorClasses}
+            ${focused ? "bg-purple-500 border-2 border-white" : "bg-purple-600 border border-purple-700"}
            ${className}`}
        >
-          <Text className={`${textColorClass} text-xl font-bold`}>
-            {children}
-          </Text>
+          <Text className='text-white text-xl font-bold'>{children}</Text>
        </View>
      </Animated.View>
    </Pressable>
@@ -180,7 +135,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
          {iconLeft ? iconLeft : <View className='w-4' />}
          <Text
            className={`
-          ${textColorClass} font-bold text-base
+          text-white font-bold text-base
          ${disabled ? "text-gray-300" : ""}
          ${textClassName}
          ${iconRight ? "mr-2" : ""}
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -132,15 +132,13 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    return itemsNotDownloaded.length === 0;
  }, [items, itemsNotDownloaded]);
  const itemsProcesses = useMemo(
-    () =>
-      processes?.filter((p) => p?.item?.Id && itemIds.includes(p.item.Id)) ||
-      [],
+    () => processes?.filter((p) => itemIds.includes(p.item.Id)),
    [processes, itemIds],
  );

  const progress = useMemo(() => {
    if (itemIds.length === 1)
-      return itemsProcesses.reduce((acc, p) => acc + (p.progress || 0), 0);
+      return itemsProcesses.reduce((acc, p) => acc + p.progress, 0);
    return (
      ((itemIds.length -
        queue.filter((q) => itemIds.includes(q.item.Id)).length) /
@@ -264,9 +262,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
      closeModal();

      // Wait for modal dismiss animation to complete
-      setTimeout(() => {
+      requestAnimationFrame(() => {
        initiateDownload(...itemsToDownload);
-      }, 300);
+      });
    } else {
      toast.error(
        t("home.downloads.toasts.you_are_not_allowed_to_download_files"),
@@ -355,7 +353,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
        keyboardBlurBehavior='restore'
      >
        <BottomSheetView>
-          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
+          <View className='flex flex-col gap-y-4 px-4 pb-8 pt-2'>
            <View>
              <Text className='font-bold text-2xl text-neutral-100'>
                {title}
@@ -367,7 +365,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                  })}
              </Text>
            </View>
-            <View className='flex flex-col space-y-2 w-full'>
+            <View className='flex flex-col gap-y-2 w-full'>
              <View className='items-start'>
                <BitrateSelector
                  inverted
@@ -406,7 +404,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                    />
                  </View>
                  {selectedOptions?.mediaSource && (
-                    <View className='flex flex-col space-y-2 items-start'>
+                    <View className='flex flex-col gap-y-2 items-start'>
                      <AudioTrackSelector
                        source={selectedOptions.mediaSource}
                        onChange={(val) => {
--- a/components/ItemContent.tsx
+++ b/components/ItemContent.tsx
@@ -6,12 +6,12 @@ import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { type Bitrate } from "@/components/BitrateSelector";
 import { ItemImage } from "@/components/common/ItemImage";
 import { DownloadSingleItem } from "@/components/DownloadItem";
-import { MediaSourceButton } from "@/components/MediaSourceButton";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 // const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
@@ -29,10 +29,13 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { AddToFavorites } from "./AddToFavorites";
+import { BitrateSheet } from "./BitRateSheet";
 import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
+import { MediaSourceSheet } from "./MediaSourceSheet";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
 import { PlayInRemoteSessionButton } from "./PlayInRemoteSession";
+import { TrackSheet } from "./TrackSheet";

 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;

@@ -56,6 +59,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
    const navigation = useNavigation();
    const insets = useSafeAreaInsets();
    const [user] = useAtom(userAtom);
+    const { t } = useTranslation();

    const itemColors = useImageColorsReturn({ item });

@@ -71,7 +75,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
      defaultBitrate,
      defaultMediaSource,
      defaultSubtitleIndex,
-    } = useDefaultPlaySettings(item, settings);
+    } = useDefaultPlaySettings(item!, settings);

    const logoUrl = useMemo(
      () => (item ? getLogoImageUrlById({ api, item }) : null),
@@ -86,7 +90,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
    useEffect(() => {
      setSelectedOptions(() => ({
        bitrate: defaultBitrate,
-        mediaSource: defaultMediaSource ?? undefined,
+        mediaSource: defaultMediaSource,
        subtitleIndex: defaultSubtitleIndex ?? -1,
        audioIndex: defaultAudioIndex,
      }));
@@ -98,7 +102,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
    ]);

    useEffect(() => {
-      if (!Platform.isTV && item) {
+      if (!Platform.isTV) {
        navigation.setOptions({
          headerRight: () =>
            item &&
@@ -120,10 +124,10 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                )}
              </View>
            ) : (
-              <View className='flex flex-row items-center space-x-2'>
+              <View className='flex flex-row items-center gap-x-2'>
                <Chromecast.Chromecast width={22} height={22} />
                {item.Type !== "Program" && (
-                  <View className='flex flex-row items-center space-x-2'>
+                  <View className='flex flex-row items-center gap-x-2'>
                    {!Platform.isTV && (
                      <DownloadSingleItem item={item} size='large' />
                    )}
@@ -139,7 +143,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
            )),
        });
      }
-    }, [item, navigation, user, item]);
+    }, [item, navigation, user]);

    useEffect(() => {
      if (item) {
@@ -197,27 +201,76 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
          }
        >
          <View className='flex flex-col bg-transparent shrink'>
-            <View className='flex flex-col px-4 w-full pt-2 mb-2 shrink'>
+            <View className='flex flex-col px-4 w-full gap-y-2 pt-2 mb-2 shrink'>
              <ItemHeader item={item} className='mb-2' />
-
-              <View className='flex flex-row px-0 mb-2 justify-between space-x-2'>
-                <PlayButton
-                  selectedOptions={selectedOptions}
-                  item={item}
-                  isOffline={isOffline}
-                  colors={itemColors}
-                />
-                <View className='w-1' />
-                {!isOffline && (
-                  <MediaSourceButton
-                    selectedOptions={selectedOptions}
-                    setSelectedOptions={setSelectedOptions}
-                    item={item}
-                    colors={itemColors}
+              {item.Type !== "Program" && !Platform.isTV && !isOffline && (
+                <View className='flex flex-row items-center justify-start w-full h-16 mb-2'>
+                  <BitrateSheet
+                    className='mr-1'
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) => prev && { ...prev, bitrate: val },
+                      )
+                    }
+                    selected={selectedOptions.bitrate}
                  />
-                )}
-              </View>
+                  <MediaSourceSheet
+                    className='mr-1'
+                    item={item}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            mediaSource: val,
+                          },
+                      )
+                    }
+                    selected={selectedOptions.mediaSource}
+                  />
+                  <TrackSheet
+                    className='mr-1'
+                    streamType='Audio'
+                    title={t("item_card.audio")}
+                    source={selectedOptions.mediaSource}
+                    onChange={(val) => {
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            audioIndex: val,
+                          },
+                      );
+                    }}
+                    selected={selectedOptions.audioIndex}
+                  />
+                  <TrackSheet
+                    source={selectedOptions.mediaSource}
+                    streamType='Subtitle'
+                    title={t("item_card.subtitles")}
+                    onChange={(val) =>
+                      setSelectedOptions(
+                        (prev) =>
+                          prev && {
+                            ...prev,
+                            subtitleIndex: val,
+                          },
+                      )
+                    }
+                    selected={selectedOptions.subtitleIndex}
+                  />
+                </View>
+              )}
+
+              <PlayButton
+                className='grow'
+                selectedOptions={selectedOptions}
+                item={item}
+                isOffline={isOffline}
+                colors={itemColors}
+              />
            </View>
+
            {item.Type === "Episode" && (
              <SeasonEpisodesCarousel
                item={item}
@@ -226,12 +279,9 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
              />
            )}

-            {!isOffline &&
-              selectedOptions.mediaSource?.MediaStreams &&
-              selectedOptions.mediaSource.MediaStreams.length > 0 && (
-                <ItemTechnicalDetails source={selectedOptions.mediaSource} />
-              )}
-
+            {!isOffline && (
+              <ItemTechnicalDetails source={selectedOptions.mediaSource} />
+            )}
            <OverviewText text={item.Overview} className='px-4 mb-4' />

            {item.Type !== "Program" && (
--- a/components/ItemHeader.tsx
+++ b/components/ItemHeader.tsx
@@ -15,7 +15,7 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
  if (!item)
    return (
      <View
-        className='flex flex-col space-y-1.5 w-full items-start h-32'
+        className='flex flex-col gap-y-1.5 w-full items-start h-32'
        {...props}
      >
        <View className='w-1/3 h-6 bg-neutral-900 rounded' />
--- a/components/ItemTechnicalDetails.tsx
+++ b/components/ItemTechnicalDetails.tsx
@@ -29,7 +29,7 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
    <View className='px-4 mt-2 mb-4'>
      <Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
      <TouchableOpacity onPress={() => bottomSheetModalRef.current?.present()}>
-        <View className='flex flex-row space-x-2'>
+        <View className='flex flex-row gap-x-2'>
          <VideoStreamInfo source={source} />
        </View>
        <Text className='text-purple-600'>{t("item_card.more_details")}</Text>
@@ -52,12 +52,12 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
        )}
      >
        <BottomSheetScrollView>
-          <View className='flex flex-col space-y-2 p-4 mb-4'>
+          <View className='flex flex-col gap-y-2 p-4 mb-4'>
            <View>
              <Text className='text-lg font-bold mb-4'>
                {t("item_card.video")}
              </Text>
-              <View className='flex flex-row space-x-2'>
+              <View className='flex flex-row gap-x-2'>
                <VideoStreamInfo source={source} />
              </View>
            </View>
--- a/components/MediaSourceButton.tsx
+++ b/components/MediaSourceButton.tsx
@@ -1,193 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import type {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
-import type { ThemeColors } from "@/hooks/useImageColorsReturn";
-import { BITRATES } from "./BitRateSheet";
-import type { SelectedOptions } from "./ItemContent";
-import { type OptionGroup, PlatformDropdown } from "./PlatformDropdown";
-
-interface Props extends React.ComponentProps<typeof TouchableOpacity> {
-  item?: BaseItemDto | null;
-  selectedOptions: SelectedOptions;
-  setSelectedOptions: React.Dispatch<
-    React.SetStateAction<SelectedOptions | undefined>
-  >;
-  colors?: ThemeColors;
-}
-
-export const MediaSourceButton: React.FC<Props> = ({
-  item,
-  selectedOptions,
-  setSelectedOptions,
-  colors,
-}: Props) => {
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-
-  const effectiveColors = colors || {
-    primary: "#7c3aed",
-    text: "#000000",
-  };
-
-  useEffect(() => {
-    const firstMediaSource = item?.MediaSources?.[0];
-    if (!firstMediaSource) return;
-    setSelectedOptions((prev) => {
-      if (!prev) return prev;
-      return {
-        ...prev,
-        mediaSource: firstMediaSource,
-      };
-    });
-  }, [item, setSelectedOptions]);
-
-  const getMediaSourceDisplayName = useCallback((source: MediaSourceInfo) => {
-    const videoStream = source.MediaStreams?.find((x) => x.Type === "Video");
-    if (source.Name) return source.Name;
-    if (videoStream?.DisplayTitle) return videoStream.DisplayTitle;
-    return `Source ${source.Id}`;
-  }, []);
-
-  const audioStreams = useMemo(
-    () =>
-      selectedOptions.mediaSource?.MediaStreams?.filter(
-        (x) => x.Type === "Audio",
-      ) || [],
-    [selectedOptions.mediaSource],
-  );
-
-  const subtitleStreams = useMemo(
-    () =>
-      selectedOptions.mediaSource?.MediaStreams?.filter(
-        (x) => x.Type === "Subtitle",
-      ) || [],
-    [selectedOptions.mediaSource],
-  );
-
-  const optionGroups: OptionGroup[] = useMemo(() => {
-    const groups: OptionGroup[] = [];
-
-    // Bitrate group
-    groups.push({
-      title: t("item_card.quality"),
-      options: BITRATES.map((bitrate) => ({
-        type: "radio" as const,
-        label: bitrate.key,
-        value: bitrate,
-        selected: bitrate.value === selectedOptions.bitrate?.value,
-        onPress: () =>
-          setSelectedOptions((prev) => prev && { ...prev, bitrate }),
-      })),
-    });
-
-    // Media Source group (only if multiple sources)
-    if (item?.MediaSources && item.MediaSources.length > 1) {
-      groups.push({
-        title: t("item_card.video"),
-        options: item.MediaSources.map((source) => ({
-          type: "radio" as const,
-          label: getMediaSourceDisplayName(source),
-          value: source,
-          selected: source.Id === selectedOptions.mediaSource?.Id,
-          onPress: () =>
-            setSelectedOptions(
-              (prev) => prev && { ...prev, mediaSource: source },
-            ),
-        })),
-      });
-    }
-
-    // Audio track group
-    if (audioStreams.length > 0) {
-      groups.push({
-        title: t("item_card.audio"),
-        options: audioStreams.map((stream) => ({
-          type: "radio" as const,
-          label: stream.DisplayTitle || `${t("common.track")} ${stream.Index}`,
-          value: stream.Index,
-          selected: stream.Index === selectedOptions.audioIndex,
-          onPress: () =>
-            setSelectedOptions(
-              (prev) => prev && { ...prev, audioIndex: stream.Index ?? 0 },
-            ),
-        })),
-      });
-    }
-
-    // Subtitle track group (with None option)
-    if (subtitleStreams.length > 0) {
-      const noneOption = {
-        type: "radio" as const,
-        label: t("common.none"),
-        value: -1,
-        selected: selectedOptions.subtitleIndex === -1,
-        onPress: () =>
-          setSelectedOptions((prev) => prev && { ...prev, subtitleIndex: -1 }),
-      };
-
-      const subtitleOptions = subtitleStreams.map((stream) => ({
-        type: "radio" as const,
-        label: stream.DisplayTitle || `${t("common.track")} ${stream.Index}`,
-        value: stream.Index,
-        selected: stream.Index === selectedOptions.subtitleIndex,
-        onPress: () =>
-          setSelectedOptions(
-            (prev) => prev && { ...prev, subtitleIndex: stream.Index ?? -1 },
-          ),
-      }));
-
-      groups.push({
-        title: t("item_card.subtitles"),
-        options: [noneOption, ...subtitleOptions],
-      });
-    }
-
-    return groups;
-  }, [
-    item,
-    selectedOptions,
-    audioStreams,
-    subtitleStreams,
-    getMediaSourceDisplayName,
-    t,
-    setSelectedOptions,
-  ]);
-
-  const trigger = (
-    <TouchableOpacity
-      disabled={!item}
-      onPress={() => setOpen(true)}
-      className='relative'
-    >
-      <View
-        style={{ backgroundColor: effectiveColors.primary, opacity: 0.7 }}
-        className='absolute w-12 h-12 rounded-full'
-      />
-      <View className='w-12 h-12 rounded-full z-10 items-center justify-center'>
-        {!item ? (
-          <ActivityIndicator size='small' color={effectiveColors.text} />
-        ) : (
-          <Ionicons name='list' size={24} color={effectiveColors.text} />
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-
-  return (
-    <PlatformDropdown
-      groups={optionGroups}
-      trigger={trigger}
-      title={t("item_card.media_options")}
-      open={open}
-      onOpenChange={setOpen}
-      bottomSheetConfig={{
-        enablePanDownToClose: true,
-      }}
-    />
-  );
-};
--- a/components/PlatformDropdown.tsx
+++ b/components/PlatformDropdown.tsx
@@ -184,7 +184,7 @@ const PlatformDropdownComponent = ({
  expoUIConfig,
  bottomSheetConfig,
 }: PlatformDropdownProps) => {
-  const { showModal, hideModal, isVisible } = useGlobalModal();
+  const { showModal, hideModal } = useGlobalModal();

  // Handle controlled open state for Android
  useEffect(() => {
@@ -207,14 +207,6 @@ const PlatformDropdownComponent = ({
    }
  }, [controlledOpen]);

-  // Watch for modal dismissal on Android (e.g., swipe down, backdrop tap)
-  // and sync the controlled open state
-  useEffect(() => {
-    if (Platform.OS === "android" && controlledOpen === true && !isVisible) {
-      controlledOnOpenChange?.(false);
-    }
-  }, [isVisible, controlledOpen, controlledOnOpenChange]);
-
  if (Platform.OS === "ios") {
    return (
      <Host style={expoUIConfig?.hostStyle}>
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -1,12 +1,11 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
-import { Feather, Ionicons } from "@expo/vector-icons";
-import { BottomSheetView } from "@gorhom/bottom-sheet";
+import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, Platform, TouchableOpacity, View } from "react-native";
+import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
  CastButton,
  PlayServicesState,
@@ -25,8 +24,6 @@ import Animated, {
 } from "react-native-reanimated";
 import { useHaptic } from "@/hooks/useHaptic";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
-import { getDownloadedItemById } from "@/providers/Downloads/database";
-import { useGlobalModal } from "@/providers/GlobalModalProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
@@ -36,8 +33,6 @@ import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { chromecast } from "@/utils/profiles/chromecast";
 import { chromecasth265 } from "@/utils/profiles/chromecasth265";
 import { runtimeTicksToMinutes } from "@/utils/time";
-import { Button } from "./Button";
-import { Text } from "./common/Text";
 import type { SelectedOptions } from "./ItemContent";

 interface Props extends React.ComponentProps<typeof TouchableOpacity> {
@@ -60,7 +55,6 @@ export const PlayButton: React.FC<Props> = ({
  const client = useRemoteMediaClient();
  const mediaStatus = useMediaStatus();
  const { t } = useTranslation();
-  const { showModal, hideModal } = useGlobalModal();

  const [globalColorAtom] = useAtom(itemThemeColorAtom);
  const api = useAtomValue(apiAtom);
@@ -90,9 +84,12 @@ export const PlayButton: React.FC<Props> = ({
    [router, isOffline],
  );

-  const handleNormalPlayFlow = useCallback(async () => {
+  const onPress = useCallback(async () => {
+    console.log("onPress");
    if (!item) return;

+    lightHapticFeedback();
+
    const queryParams = new URLSearchParams({
      itemId: item.Id!,
      audioIndex: selectedOptions.audioIndex?.toString() ?? "",
@@ -274,117 +271,6 @@ export const PlayButton: React.FC<Props> = ({
    showActionSheetWithOptions,
    mediaStatus,
    selectedOptions,
-    goToPlayer,
-    isOffline,
-    t,
-  ]);
-
-  const onPress = useCallback(async () => {
-    if (!item) return;
-
-    lightHapticFeedback();
-
-    // Check if item is downloaded
-    const downloadedItem = item.Id ? getDownloadedItemById(item.Id) : undefined;
-
-    if (downloadedItem) {
-      if (Platform.OS === "android") {
-        // Show bottom sheet for Android
-        showModal(
-          <BottomSheetView>
-            <View className='px-4 mt-4 mb-12'>
-              <View className='pb-6'>
-                <Text className='text-2xl font-bold mb-2'>
-                  {t("player.downloaded_file_title")}
-                </Text>
-                <Text className='opacity-70 text-base'>
-                  {t("player.downloaded_file_message")}
-                </Text>
-              </View>
-              <View className='space-y-3'>
-                <Button
-                  onPress={() => {
-                    hideModal();
-                    const queryParams = new URLSearchParams({
-                      itemId: item.Id!,
-                      offline: "true",
-                      playbackPosition:
-                        item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                    });
-                    goToPlayer(queryParams.toString());
-                  }}
-                  color='purple'
-                >
-                  {Platform.OS === "android"
-                    ? "Play downloaded file"
-                    : t("player.downloaded_file_yes")}
-                </Button>
-                <Button
-                  onPress={() => {
-                    hideModal();
-                    handleNormalPlayFlow();
-                  }}
-                  color='white'
-                  variant='border'
-                >
-                  {Platform.OS === "android"
-                    ? "Stream file"
-                    : t("player.downloaded_file_no")}
-                </Button>
-              </View>
-            </View>
-          </BottomSheetView>,
-          {
-            snapPoints: ["35%"],
-            enablePanDownToClose: true,
-          },
-        );
-      } else {
-        // Show alert for iOS
-        Alert.alert(
-          t("player.downloaded_file_title"),
-          t("player.downloaded_file_message"),
-          [
-            {
-              text: t("player.downloaded_file_yes"),
-              onPress: () => {
-                const queryParams = new URLSearchParams({
-                  itemId: item.Id!,
-                  offline: "true",
-                  playbackPosition:
-                    item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-                });
-                goToPlayer(queryParams.toString());
-              },
-              isPreferred: true,
-            },
-            {
-              text: t("player.downloaded_file_no"),
-              onPress: () => {
-                handleNormalPlayFlow();
-              },
-            },
-            {
-              text: t("player.downloaded_file_cancel"),
-              style: "cancel",
-            },
-          ],
-        );
-      }
-      return;
-    }
-
-    // If not downloaded, proceed with normal flow
-    handleNormalPlayFlow();
-  }, [
-    item,
-    lightHapticFeedback,
-    handleNormalPlayFlow,
-    goToPlayer,
-    t,
-    showModal,
-    hideModal,
-    effectiveColors,
  ]);

  const derivedTargetWidth = useDerivedValue(() => {
@@ -472,6 +358,55 @@ export const PlayButton: React.FC<Props> = ({
      [startColor.value.text, endColor.value.text],
    ),
  }));
+  /**
+   * *********************
+   */
+
+  // if (Platform.OS === "ios")
+  //   return (
+  //     <Host
+  //       style={{
+  //         height: 50,
+  //         flex: 1,
+  //         flexShrink: 0,
+  //       }}
+  //     >
+  //       <Button
+  //         variant='glassProminent'
+  //         onPress={onPress}
+  //         color={effectiveColors.primary}
+  //         modifiers={[fixedSize()]}
+  //       >
+  //         <View className='flex flex-row items-center gap-x-2 h-full w-full justify-center -mb-3.5 '>
+  //           <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
+  //             {runtimeTicksToMinutes(
+  //               (item?.RunTimeTicks || 0) -
+  //                 (item?.UserData?.PlaybackPositionTicks || 0),
+  //             )}
+  //             {(item?.UserData?.PlaybackPositionTicks || 0) > 0 && " left"}
+  //           </Animated.Text>
+  //           <Animated.Text style={animatedTextStyle}>
+  //             <Ionicons name='play-circle' size={24} />
+  //           </Animated.Text>
+  //           {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>
+  //       </Button>
+  //     </Host>
+  //   );

  return (
    <TouchableOpacity
@@ -479,7 +414,7 @@ export const PlayButton: React.FC<Props> = ({
      accessibilityLabel='Play button'
      accessibilityHint='Tap to play the media'
      onPress={onPress}
-      className={"relative flex-1"}
+      className={"relative"}
    >
      <View className='absolute w-full h-full top-0 left-0 rounded-full z-10 overflow-hidden'>
        <Animated.View
@@ -505,7 +440,7 @@ export const PlayButton: React.FC<Props> = ({
        }}
        className='flex flex-row items-center justify-center bg-transparent rounded-full z-20 h-12 w-full '
      >
-        <View className='flex flex-row items-center space-x-2'>
+        <View className='flex flex-row items-center gap-x-2'>
          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
            {runtimeTicksToMinutes(
              (item?.RunTimeTicks || 0) -
@@ -522,6 +457,15 @@ export const PlayButton: React.FC<Props> = ({
              <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>
--- a/components/PlayButton.tv.tsx
+++ b/components/PlayButton.tv.tsx
@@ -1,4 +1,4 @@
-import { Ionicons } from "@expo/vector-icons";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
@@ -17,6 +17,7 @@ import Animated, {
 import { useHaptic } from "@/hooks/useHaptic";
 import type { ThemeColors } from "@/hooks/useImageColorsReturn";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import type { Button } from "./Button";
 import type { SelectedOptions } from "./ItemContent";
@@ -49,6 +50,7 @@ export const PlayButton: React.FC<Props> = ({
  const startColor = useSharedValue(effectiveColors);
  const widthProgress = useSharedValue(0);
  const colorChangeProgress = useSharedValue(0);
+  const { settings } = useSettings();
  const lightHapticFeedback = useHaptic("light");

  const goToPlayer = useCallback(
@@ -59,6 +61,7 @@ export const PlayButton: React.FC<Props> = ({
  );

  const onPress = () => {
+    console.log("onpress");
    if (!item) return;

    lightHapticFeedback();
@@ -197,13 +200,22 @@ export const PlayButton: React.FC<Props> = ({
        }}
        className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
      >
-        <View className='flex flex-row items-center space-x-2'>
+        <View className='flex flex-row items-center gap-x-2'>
          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
            {runtimeTicksToMinutes(item?.RunTimeTicks)}
          </Animated.Text>
          <Animated.Text style={animatedTextStyle}>
            <Ionicons name='play-circle' size={24} />
          </Animated.Text>
+          {settings?.openInVLC && (
+            <Animated.Text style={animatedTextStyle}>
+              <MaterialCommunityIcons
+                name='vlc'
+                size={18}
+                color={animatedTextStyle.color}
+              />
+            </Animated.Text>
+          )}
        </View>
      </View>
    </TouchableOpacity>
--- a/components/Ratings.tsx
+++ b/components/Ratings.tsx
@@ -21,7 +21,7 @@ interface Props extends ViewProps {
 export const Ratings: React.FC<Props> = ({ item, ...props }) => {
  if (!item) return null;
  return (
-    <View className='flex flex-row items-center mt-2 space-x-2' {...props}>
+    <View className='flex flex-row items-center mt-2 gap-x-2' {...props}>
      {item.OfficialRating && (
        <Badge text={item.OfficialRating} variant='gray' />
      )}
@@ -79,7 +79,7 @@ export const JellyserrRatings: React.FC<{
      !!result.voteCount ||
      (data?.criticsRating && !!data?.criticsScore) ||
      (data?.audienceRating && !!data?.audienceScore)) && (
-      <View className='flex flex-row flex-wrap space-x-1'>
+      <View className='flex flex-row flex-wrap gap-x-1'>
        {data?.criticsRating && !!data?.criticsScore && (
          <Badge
            text={`${data.criticsScore}%`}
--- a/components/ThemedText.tsx
+++ b/components/ThemedText.tsx
@@ -1,54 +0,0 @@
-import { StyleSheet, Text, type TextProps } from "react-native";
-
-export type ThemedTextProps = TextProps & {
-  lightColor?: string;
-  darkColor?: string;
-  type?: "default" | "title" | "defaultSemiBold" | "subtitle" | "link";
-};
-
-export function ThemedText({
-  style,
-  type = "default",
-  ...rest
-}: ThemedTextProps) {
-  return (
-    <Text
-      style={[
-        { color: "white" },
-        type === "default" ? styles.default : undefined,
-        type === "title" ? styles.title : undefined,
-        type === "defaultSemiBold" ? styles.defaultSemiBold : undefined,
-        type === "subtitle" ? styles.subtitle : undefined,
-        type === "link" ? styles.link : undefined,
-        style,
-      ]}
-      {...rest}
-    />
-  );
-}
-
-const styles = StyleSheet.create({
-  default: {
-    fontSize: 16,
-    lineHeight: 24,
-  },
-  defaultSemiBold: {
-    fontSize: 16,
-    lineHeight: 24,
-    fontWeight: "600",
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: "bold",
-    lineHeight: 32,
-  },
-  subtitle: {
-    fontSize: 20,
-    fontWeight: "bold",
-  },
-  link: {
-    lineHeight: 30,
-    fontSize: 16,
-    color: "#0a7ea4",
-  },
-});
--- a/components/ThemedView.tsx
+++ b/components/ThemedView.tsx
@@ -1,15 +0,0 @@
-import { View, type ViewProps } from "react-native";
-
-export type ThemedViewProps = ViewProps & {
-  lightColor?: string;
-  darkColor?: string;
-};
-
-export function ThemedView({
-  style,
-  lightColor,
-  darkColor,
-  ...otherProps
-}: ThemedViewProps) {
-  return <View style={[{ backgroundColor: "black" }, style]} {...otherProps} />;
-}
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -16,10 +16,7 @@ export function Input(props: InputProps) {
  const [isFocused, setIsFocused] = useState(false);

  return Platform.isTV ? (
-    <TouchableOpacity
-      onPress={() => inputRef?.current?.focus?.()}
-      activeOpacity={1}
-    >
+    <TouchableOpacity onFocus={() => inputRef?.current?.focus?.()}>
      <TextInput
        ref={inputRef}
        className={`
--- a/components/common/Text.tsx
+++ b/components/common/Text.tsx
@@ -1,20 +1,16 @@
 import { Platform, Text as RNText, type TextProps } from "react-native";
-export function Text(props: TextProps) {
-  const { style, ...otherProps } = props;
+
+export function Text({ className, ...props }: TextProps) {
  if (Platform.isTV)
    return (
-      <RNText
-        allowFontScaling={false}
-        style={[{ color: "white" }, style]}
-        {...otherProps}
-      />
+      <RNText allowFontScaling={false} style={{ color: "white" }} {...props} />
    );

  return (
    <RNText
      allowFontScaling={false}
-      style={[{ color: "white" }, style]}
-      {...otherProps}
+      className={`text-white ${className}`}
+      {...props}
    />
  );
 }
--- a/components/downloads/ActiveDownloads.tsx
+++ b/components/downloads/ActiveDownloads.tsx
@@ -9,11 +9,7 @@ interface ActiveDownloadsProps extends ViewProps {}

 export default function ActiveDownloads({ ...props }: ActiveDownloadsProps) {
  const { processes } = useDownload();
-
-  // Filter out any invalid processes before rendering
-  const validProcesses = processes?.filter((p) => p?.item?.Id) || [];
-
-  if (validProcesses.length === 0)
+  if (processes?.length === 0)
    return (
      <View {...props} className='bg-neutral-900 p-4 rounded-2xl'>
        <Text className='text-lg font-bold'>
@@ -31,8 +27,8 @@ export default function ActiveDownloads({ ...props }: ActiveDownloadsProps) {
        {t("home.downloads.active_downloads")}
      </Text>
      <View className='gap-y-2'>
-        {validProcesses.map((p: JobStatus) => (
-          <DownloadCard key={p.id} process={p} />
+        {processes?.map((p: JobStatus) => (
+          <DownloadCard key={p.item.Id} process={p} />
        ))}
      </View>
    </View>
--- a/components/downloads/DownloadCard.tsx
+++ b/components/downloads/DownloadCard.tsx
@@ -51,7 +51,7 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
  };

  const eta = useMemo(() => {
-    if (!process?.estimatedTotalSizeBytes || !process?.bytesDownloaded) {
+    if (!process.estimatedTotalSizeBytes || !process.bytesDownloaded) {
      return null;
    }

@@ -66,14 +66,13 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
    }

    return formatTimeString(secondsRemaining, "s");
-  }, [process?.id, process?.bytesDownloaded, process?.estimatedTotalSizeBytes]);
+  }, [process.id, process.bytesDownloaded, process.estimatedTotalSizeBytes]);

  const estimatedSize = useMemo(() => {
-    if (process?.estimatedTotalSizeBytes)
-      return process.estimatedTotalSizeBytes;
+    if (process.estimatedTotalSizeBytes) return process.estimatedTotalSizeBytes;

    // Calculate from bitrate + duration (only if bitrate value is defined)
-    if (process?.maxBitrate?.value && process?.item?.RunTimeTicks) {
+    if (process.maxBitrate.value) {
      return estimateDownloadSize(
        process.maxBitrate.value,
        process.item.RunTimeTicks,
@@ -82,43 +81,32 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {

    return undefined;
  }, [
-    process?.maxBitrate?.value,
-    process?.item?.RunTimeTicks,
-    process?.estimatedTotalSizeBytes,
+    process.maxBitrate.value,
+    process.item.RunTimeTicks,
+    process.estimatedTotalSizeBytes,
  ]);

-  const isTranscoding = process?.isTranscoding || false;
+  const isTranscoding = process.isTranscoding || false;

  const downloadedAmount = useMemo(() => {
-    if (!process?.bytesDownloaded) return null;
+    if (!process.bytesDownloaded) return null;
    return formatBytes(process.bytesDownloaded);
-  }, [process?.bytesDownloaded]);
+  }, [process.bytesDownloaded]);

  const base64Image = useMemo(() => {
-    try {
-      const itemId = process?.item?.Id;
-      if (!itemId) return undefined;
-      return storage.getString(itemId);
-    } catch {
-      return undefined;
-    }
-  }, [process?.item?.Id]);
+    return storage.getString(process.item.Id!);
+  }, []);

  // Sanitize progress to ensure it's within valid bounds
  const sanitizedProgress = useMemo(() => {
    if (
-      typeof process?.progress !== "number" ||
+      typeof process.progress !== "number" ||
      Number.isNaN(process.progress)
    ) {
      return 0;
    }
    return Math.max(0, Math.min(100, process.progress));
-  }, [process?.progress]);
-
-  // Return null after all hooks have been called
-  if (!process || !process.item || !process.item.Id) {
-    return null;
-  }
+  }, [process.progress]);

  return (
    <TouchableOpacity
--- a/components/filters/FilterButton.tsx
+++ b/components/filters/FilterButton.tsx
@@ -51,7 +51,7 @@ export const FilterButton = <T,>({
      >
        <View
          className={`
-            px-3 py-1.5 rounded-full flex flex-row items-center space-x-1
+            px-3 py-1.5 rounded-full flex flex-row items-center gap-x-1
            ${
              values.length > 0
                ? "bg-purple-600  border border-purple-700"
--- a/components/home/Home.tsx
+++ b/components/home/Home.tsx
@@ -97,19 +97,20 @@ export const Home = () => {
    }
    navigation.setOptions({
      headerLeft: () => (
-        <TouchableOpacity
-          onPress={() => {
-            router.push("/(auth)/downloads");
-          }}
-          className='ml-1.5'
-          style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
-        >
-          <Feather
-            name='download'
-            color={hasDownloads ? Colors.primary : "white"}
-            size={24}
-          />
-        </TouchableOpacity>
+        <View className='flex flex-row items-center ml-1.5'>
+          <TouchableOpacity
+            onPress={() => {
+              router.push("/(auth)/downloads");
+            }}
+            style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+          >
+            <Feather
+              name='download'
+              color={hasDownloads ? Colors.primary : "white"}
+              size={24}
+            />
+          </TouchableOpacity>
+        </View>
      ),
    });
  }, [navigation, router, hasDownloads]);
@@ -470,8 +471,7 @@ export const Home = () => {
      }}
    >
      <View
-        className='flex flex-col space-y-4'
-        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+        className={`flex flex-col gap-y-4 ${Platform.OS === "android" ? "pt-4" : ""}`}
      >
        {sections.map((section, index) => {
          if (section.type === "InfiniteScrollingCollectionList") {
--- a/components/home/HomeWithCarousel.tsx
+++ b/components/home/HomeWithCarousel.tsx
@@ -475,7 +475,7 @@ export const HomeWithCarousel = () => {
          paddingTop: 0,
        }}
      >
-        <View className='flex flex-col space-y-4'>
+        <View className='flex flex-col gap-y-4'>
          {sections.map((section, index) => {
            if (section.type === "InfiniteScrollingCollectionList") {
              return (
--- a/components/home/InfiniteScrollingCollectionList.tsx
+++ b/components/home/InfiniteScrollingCollectionList.tsx
@@ -4,7 +4,6 @@ import {
  type QueryKey,
  useInfiniteQuery,
 } from "@tanstack/react-query";
-import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
@@ -65,11 +64,6 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
  // Flatten all pages into a single array
  const allItems = data?.pages.flat() || [];

-  const snapOffsets = useMemo(() => {
-    const itemWidth = orientation === "horizontal" ? 184 : 120; // w-44 (176px) + mr-2 (8px) or w-28 (112px) + mr-2 (8px)
-    return allItems.map((_, index) => index * itemWidth);
-  }, [allItems, orientation]);
-
  if (hideIfEmpty === true && allItems.length === 0 && !isLoading) return null;
  if (disabled || !title) return null;

@@ -90,9 +84,9 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({

  return (
    <View {...props}>
-      <Text className='px-4 text-lg font-bold mb-2 text-neutral-100'>
-        {title}
-      </Text>
+      <View className='px-4 mb-2'>
+        <Text className='text-lg font-bold text-neutral-100'>{title}</Text>
+      </View>
      {isLoading === false && allItems.length === 0 && (
        <View className='px-4'>
          <Text className='text-neutral-500'>{t("home.no_items")}</Text>
@@ -132,8 +126,6 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
          showsHorizontalScrollIndicator={false}
          onScroll={handleScroll}
          scrollEventThrottle={16}
-          snapToOffsets={snapOffsets}
-          decelerationRate='fast'
        >
          <View className='px-4 flex flex-row'>
            {allItems.map((item) => (
--- a/components/jellyseerr/DetailFacts.tsx
+++ b/components/jellyseerr/DetailFacts.tsx
@@ -154,7 +154,7 @@ const DetailFacts: React.FC<
          <Facts
            title={t("jellyseerr.release_dates")}
            facts={filteredReleases?.map?.((r: Release, idx) => (
-              <View key={idx} className='flex flex-row space-x-2 items-center'>
+              <View key={idx} className='flex flex-row gap-x-2 items-center'>
                {r.type === 3 ? (
                  // Theatrical
                  <Ionicons name='ticket' size={16} color='white' />
@@ -189,7 +189,7 @@ const DetailFacts: React.FC<
          <Facts
            title={t("jellyseerr.production_country")}
            facts={details?.productionCountries?.map((n, idx) => (
-              <View key={idx} className='flex flex-row items-center space-x-2'>
+              <View key={idx} className='flex flex-row items-center gap-x-2'>
                <CountryFlag isoCode={n.iso_3166_1} size={10} />
                <Text>{n.name}</Text>
              </View>
--- a/components/jellyseerr/ParallaxSlideShow.tsx
+++ b/components/jellyseerr/ParallaxSlideShow.tsx
@@ -118,7 +118,7 @@ const ParallaxSlideShow = <T,>({
        }
        logo={logo}
      >
-        <View className='flex flex-col space-y-4 px-4'>
+        <View className='flex flex-col gap-y-4 px-4'>
          <View className='flex flex-row justify-between w-full'>
            <View className='flex flex-col w-full'>{HeaderContent?.()}</View>
          </View>
--- a/components/jellyseerr/RequestModal.tsx
+++ b/components/jellyseerr/RequestModal.tsx
@@ -144,14 +144,11 @@ const RequestModal = forwardRef<
    }, [defaultServiceDetails]);

    const seasonTitle = useMemo(() => {
-      if (!requestBody?.seasons || requestBody.seasons.length === 0) {
-        return undefined;
-      }
-      if (requestBody.seasons.length > 1) {
+      if (requestBody?.seasons && requestBody?.seasons?.length > 1) {
        return t("jellyseerr.season_all");
      }
      return t("jellyseerr.season_number", {
-        season_number: requestBody.seasons[0],
+        season_number: requestBody?.seasons,
      });
    }, [requestBody?.seasons]);

@@ -305,7 +302,7 @@ const RequestModal = forwardRef<
        stackBehavior='push'
      >
        <BottomSheetView>
-          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
+          <View className='flex flex-col gap-y-4 px-4 pb-8 pt-2'>
            <View>
              <Text className='font-bold text-2xl text-neutral-100'>
                {t("jellyseerr.advanced")}
@@ -314,7 +311,7 @@ const RequestModal = forwardRef<
                <Text className='text-neutral-300'>{seasonTitle}</Text>
              )}
            </View>
-            <View className='flex flex-col space-y-2'>
+            <View className='flex flex-col gap-y-2'>
              {defaultService && defaultServiceDetails && users && (
                <>
                  <View className='flex flex-col'>
--- a/components/jellyseerr/discover/Discover.tsx
+++ b/components/jellyseerr/discover/Discover.tsx
@@ -31,7 +31,7 @@ const Discover: React.FC<Props> = ({ sliders }) => {
  if (!hasSliders) return null;

  return (
-    <View className='flex flex-col space-y-4 mb-8'>
+    <View className='flex flex-col gap-y-4 mb-8'>
      {sortedSliders.map((slide) => {
        switch (slide.type) {
          case DiscoverSliderType.RECENT_REQUESTS:
--- a/components/medialists/MediaListSection.tsx
+++ b/components/medialists/MediaListSection.tsx
@@ -9,7 +9,7 @@ import {
  useQuery,
 } from "@tanstack/react-query";
 import { useAtom } from "jotai";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { View, type ViewProps } from "react-native";
 import { useInView } from "@/hooks/useInView";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -67,12 +67,6 @@ export const MediaListSection: React.FC<Props> = ({
    [api, user?.Id, collection?.Id],
  );

-  const snapOffsets = useMemo(() => {
-    const itemWidth = 120; // w-28 (112px) + mr-2 (8px)
-    // Generate offsets for a reasonable number of items
-    return Array.from({ length: 50 }, (_, index) => index * itemWidth);
-  }, []);
-
  if (!collection) return null;

  return (
@@ -98,8 +92,6 @@ export const MediaListSection: React.FC<Props> = ({
        )}
        queryFn={fetchItems}
        queryKey={["media-list", collection.Id!]}
-        snapToOffsets={snapOffsets}
-        decelerationRate='fast'
      />
    </View>
  );
--- a/components/search/DiscoverFilters.tsx
+++ b/components/search/DiscoverFilters.tsx
@@ -83,7 +83,7 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({

  // Android UI
  return (
-    <View className='flex flex-row justify-end items-center space-x-1'>
+    <View className='flex flex-row justify-end items-center gap-x-1'>
      <FilterButton
        id={searchFilterId}
        queryKey='jellyseerr_search'
--- a/components/series/CurrentSeries.tsx
+++ b/components/series/CurrentSeries.tsx
@@ -32,7 +32,7 @@ export const CurrentSeries: React.FC<Props> = ({ item, ...props }) => {
            onPress={() =>
              item?.SeriesId && router.push(`/series/${item.SeriesId}`)
            }
-            className='flex flex-col space-y-2 w-28'
+            className='flex flex-col gap-y-2 w-28'
          >
            <Poster
              id={item?.Id}
--- a/components/series/SeasonEpisodesCarousel.tsx
+++ b/components/series/SeasonEpisodesCarousel.tsx
@@ -40,7 +40,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
  const scrollRef = useRef<HorizontalScrollRef>(null);

  const scrollToIndex = (index: number) => {
-    scrollRef.current?.scrollToIndex(index, -16);
+    scrollRef.current?.scrollToIndex(index, 16);
  };

  const seasonId = useMemo(() => {
@@ -87,11 +87,6 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
    }
  }, [episodes, item]);

-  const snapOffsets = useMemo(() => {
-    const itemWidth = 184; // w-44 (176px) + mr-2 (8px)
-    return episodes?.map((_, index) => index * itemWidth) || [];
-  }, [episodes]);
-
  return (
    <HorizontalScroll
      ref={scrollRef}
@@ -114,8 +109,6 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
          <ItemCardText item={_item} />
        </TouchableOpacity>
      )}
-      snapToOffsets={snapOffsets}
-      decelerationRate='fast'
    />
  );
 };
--- a/components/series/SeasonPicker.tsx
+++ b/components/series/SeasonPicker.tsx
@@ -128,7 +128,7 @@ export const SeasonPicker: React.FC<Props> = ({ item }) => {
          }}
        />
        {episodes?.length ? (
-          <View className='flex flex-row items-center space-x-2'>
+          <View className='flex flex-row items-center gap-x-2'>
            <DownloadItems
              title={t("item_card.download.download_season")}
              className='ml-2'
--- a/components/settings/QuickConnect.tsx
+++ b/components/settings/QuickConnect.tsx
@@ -105,14 +105,14 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
        android_keyboardInputMode='adjustResize'
      >
        <BottomSheetView>
-          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
+          <View className='flex flex-col gap-y-4 px-4 pb-8 pt-2'>
            <View>
              <Text className='font-bold text-2xl text-neutral-100'>
                {t("home.settings.quick_connect.quick_connect_title")}
              </Text>
            </View>
-            <View className='flex flex-col space-y-2'>
-              <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full space-y-4'>
+            <View className='flex flex-col gap-y-2'>
+              <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full gap-y-4'>
                <Text className='text-neutral-400 text-center'>
                  {t(
                    "home.settings.quick_connect.enter_the_quick_connect_code",
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -5,6 +5,12 @@ import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { Stepper } from "@/components/inputs/Stepper";
+import {
+  OUTLINE_THICKNESS,
+  type OutlineThickness,
+  VLC_COLORS,
+  type VLCColor,
+} from "@/constants/SubtitleConstants";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -86,6 +92,84 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
    ];
  }, [settings?.subtitleMode, t, updateSettings]);

+  const textColorOptionGroups = useMemo(() => {
+    const colors = Object.keys(VLC_COLORS) as VLCColor[];
+    const options = colors.map((color) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.colors.${color}`),
+      value: color,
+      selected: (settings?.vlcTextColor || "White") === color,
+      onPress: () => updateSettings({ vlcTextColor: color }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcTextColor, t, updateSettings]);
+
+  const backgroundColorOptionGroups = useMemo(() => {
+    const colors = Object.keys(VLC_COLORS) as VLCColor[];
+    const options = colors.map((color) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.colors.${color}`),
+      value: color,
+      selected: (settings?.vlcBackgroundColor || "Black") === color,
+      onPress: () => updateSettings({ vlcBackgroundColor: color }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcBackgroundColor, t, updateSettings]);
+
+  const outlineColorOptionGroups = useMemo(() => {
+    const colors = Object.keys(VLC_COLORS) as VLCColor[];
+    const options = colors.map((color) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.colors.${color}`),
+      value: color,
+      selected: (settings?.vlcOutlineColor || "Black") === color,
+      onPress: () => updateSettings({ vlcOutlineColor: color }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcOutlineColor, t, updateSettings]);
+
+  const outlineThicknessOptionGroups = useMemo(() => {
+    const thicknesses = Object.keys(OUTLINE_THICKNESS) as OutlineThickness[];
+    const options = thicknesses.map((thickness) => ({
+      type: "radio" as const,
+      label: t(`home.settings.subtitles.thickness.${thickness}`),
+      value: thickness,
+      selected: (settings?.vlcOutlineThickness || "Normal") === thickness,
+      onPress: () => updateSettings({ vlcOutlineThickness: thickness }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcOutlineThickness, t, updateSettings]);
+
+  const backgroundOpacityOptionGroups = useMemo(() => {
+    const opacities = [0, 32, 64, 96, 128, 160, 192, 224, 255];
+    const options = opacities.map((opacity) => ({
+      type: "radio" as const,
+      label: `${Math.round((opacity / 255) * 100)}%`,
+      value: opacity,
+      selected: (settings?.vlcBackgroundOpacity ?? 128) === opacity,
+      onPress: () => updateSettings({ vlcBackgroundOpacity: opacity }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcBackgroundOpacity, updateSettings]);
+
+  const outlineOpacityOptionGroups = useMemo(() => {
+    const opacities = [0, 32, 64, 96, 128, 160, 192, 224, 255];
+    const options = opacities.map((opacity) => ({
+      type: "radio" as const,
+      label: `${Math.round((opacity / 255) * 100)}%`,
+      value: opacity,
+      selected: (settings?.vlcOutlineOpacity ?? 255) === opacity,
+      onPress: () => updateSettings({ vlcOutlineOpacity: opacity }),
+    }));
+
+    return [{ options }];
+  }, [settings?.vlcOutlineOpacity, updateSettings]);
+
  if (isTv) return null;
  if (!settings) return null;

@@ -168,6 +252,124 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
            onUpdate={(subtitleSize) => updateSettings({ subtitleSize })}
          />
        </ListItem>
+        <ListItem title={t("home.settings.subtitles.text_color")}>
+          <PlatformDropdown
+            groups={textColorOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.subtitles.colors.${settings?.vlcTextColor || "White"}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.subtitles.text_color")}
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.subtitles.background_color")}>
+          <PlatformDropdown
+            groups={backgroundColorOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.subtitles.colors.${settings?.vlcBackgroundColor || "Black"}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.subtitles.background_color")}
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.subtitles.outline_color")}>
+          <PlatformDropdown
+            groups={outlineColorOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.subtitles.colors.${settings?.vlcOutlineColor || "Black"}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.subtitles.outline_color")}
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.subtitles.outline_thickness")}>
+          <PlatformDropdown
+            groups={outlineThicknessOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {t(
+                    `home.settings.subtitles.thickness.${settings?.vlcOutlineThickness || "Normal"}`,
+                  )}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.subtitles.outline_thickness")}
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.subtitles.background_opacity")}>
+          <PlatformDropdown
+            groups={backgroundOpacityOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcBackgroundOpacity ?? 128) / 255) * 100)}%`}</Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.subtitles.background_opacity")}
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.subtitles.outline_opacity")}>
+          <PlatformDropdown
+            groups={outlineOpacityOptionGroups}
+            trigger={
+              <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>{`${Math.round(((settings?.vlcOutlineOpacity ?? 255) / 255) * 100)}%`}</Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </View>
+            }
+            title={t("home.settings.subtitles.outline_opacity")}
+          />
+        </ListItem>
+        <ListItem title={t("home.settings.subtitles.bold_text")}>
+          <Switch
+            value={settings?.vlcIsBold ?? false}
+            onValueChange={(value) => updateSettings({ vlcIsBold: value })}
+          />
+        </ListItem>
      </ListGroup>
    </View>
  );
--- a/components/video-player/controls/BottomControls.tsx
+++ b/components/video-player/controls/BottomControls.tsx
@@ -18,6 +18,7 @@ interface BottomControlsProps {
  showRemoteBubble: boolean;
  currentTime: number;
  remainingTime: number;
+  isVlc: boolean;
  showSkipButton: boolean;
  showSkipCreditButton: boolean;
  skipIntro: () => void;
@@ -65,6 +66,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
  showRemoteBubble,
  currentTime,
  remainingTime,
+  isVlc,
  showSkipButton,
  showSkipCreditButton,
  skipIntro,
@@ -128,7 +130,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
            <Text className='text-xs opacity-50'>{item?.Album}</Text>
          )}
        </View>
-        <View className='flex flex-row space-x-2 shrink-0'>
+        <View className='flex flex-row gap-x-2 shrink-0'>
          <SkipButton
            showButton={showSkipButton}
            onPress={skipIntro}
@@ -143,7 +145,13 @@ export const BottomControls: FC<BottomControlsProps> = ({
            settings.autoPlayEpisodeCount <
              settings.maxAutoPlayEpisodeCount.value) && (
            <NextEpisodeCountDownButton
-              show={!nextItem ? false : remainingTime < 10000}
+              show={
+                !nextItem
+                  ? false
+                  : isVlc
+                    ? remainingTime < 10000
+                    : remainingTime < 10
+              }
              onFinish={handleNextEpisodeAutoPlay}
              onPress={handleNextEpisodeManual}
            />
@@ -200,6 +208,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
          <TimeDisplay
            currentTime={currentTime}
            remainingTime={remainingTime}
+            isVlc={isVlc}
          />
        </View>
      </View>
--- a/components/video-player/controls/Controls.tsx
+++ b/components/video-player/controls/Controls.tsx
@@ -7,6 +7,7 @@ import { useLocalSearchParams, useRouter } from "expo-router";
 import {
  type Dispatch,
  type FC,
+  type MutableRefObject,
  type SetStateAction,
  useCallback,
  useEffect,
@@ -27,6 +28,7 @@ import { useHaptic } from "@/hooks/useHaptic";
 import { useIntroSkipper } from "@/hooks/useIntroSkipper";
 import { usePlaybackManager } from "@/hooks/usePlaybackManager";
 import { useTrickplay } from "@/hooks/useTrickplay";
+import type { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
 import { DownloadedItem } from "@/providers/Downloads/types";
 import { useSettings } from "@/utils/atoms/settings";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
@@ -34,6 +36,7 @@ import { ticksToMs } from "@/utils/time";
 import { BottomControls } from "./BottomControls";
 import { CenterControls } from "./CenterControls";
 import { CONTROLS_CONSTANTS } from "./constants";
+import { ControlProvider } from "./contexts/ControlContext";
 import { EpisodeList } from "./EpisodeList";
 import { GestureOverlay } from "./GestureOverlay";
 import { HeaderControls } from "./HeaderControls";
@@ -47,27 +50,36 @@ import { type AspectRatio } from "./VideoScalingModeSelector";

 interface Props {
  item: BaseItemDto;
+  videoRef: MutableRefObject<VlcPlayerViewRef | null>;
  isPlaying: boolean;
  isSeeking: SharedValue<boolean>;
  cacheProgress: SharedValue<number>;
  progress: SharedValue<number>;
  isBuffering: boolean;
  showControls: boolean;
+
  enableTrickplay?: boolean;
  togglePlay: () => void;
  setShowControls: (shown: boolean) => void;
  offline?: boolean;
+  isVideoLoaded?: boolean;
  mediaSource?: MediaSourceInfo | null;
  seek: (ticks: number) => void;
  startPictureInPicture?: () => Promise<void>;
  play: () => 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;
  setVideoAspectRatio?: (aspectRatio: string | null) => Promise<void>;
  setVideoScaleFactor?: (scaleFactor: number) => Promise<void>;
  aspectRatio?: AspectRatio;
  scaleFactor?: ScaleFactor;
  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
  setScaleFactor?: Dispatch<SetStateAction<ScaleFactor>>;
+  isVlc?: boolean;
  api?: Api | null;
  downloadedFiles?: DownloadedItem[];
 }
@@ -87,6 +99,12 @@ export const Controls: FC<Props> = ({
  showControls,
  setShowControls,
  mediaSource,
+  isVideoLoaded,
+  getAudioTracks,
+  getSubtitleTracks,
+  setSubtitleURL,
+  setSubtitleTrack,
+  setAudioTrack,
  setVideoAspectRatio,
  setVideoScaleFactor,
  aspectRatio = "default",
@@ -94,6 +112,7 @@ export const Controls: FC<Props> = ({
  setAspectRatio,
  setScaleFactor,
  offline = false,
+  isVlc = false,
  api = null,
  downloadedFiles = undefined,
 }) => {
@@ -175,13 +194,17 @@ export const Controls: FC<Props> = ({
    zIndex: 10,
  }));

-  // Initialize progress values - MPV uses milliseconds
+  // Initialize progress values
  useEffect(() => {
    if (item) {
-      progress.value = ticksToMs(item?.UserData?.PlaybackPositionTicks);
-      max.value = ticksToMs(item.RunTimeTicks || 0);
+      progress.value = isVlc
+        ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
+        : item?.UserData?.PlaybackPositionTicks || 0;
+      max.value = isVlc
+        ? ticksToMs(item.RunTimeTicks || 0)
+        : item.RunTimeTicks || 0;
    }
-  }, [item, progress, max]);
+  }, [item, isVlc, progress, max]);

  // Navigation hooks
  const {
@@ -192,6 +215,7 @@ export const Controls: FC<Props> = ({
  } = useVideoNavigation({
    progress,
    isPlaying,
+    isVlc,
    seek,
    play,
  });
@@ -201,6 +225,7 @@ export const Controls: FC<Props> = ({
    progress,
    max,
    isSeeking,
+    isVlc,
  });

  const toggleControls = useCallback(() => {
@@ -223,6 +248,7 @@ export const Controls: FC<Props> = ({
    progress,
    min,
    max,
+    isVlc,
    showControls,
    isPlaying,
    seek,
@@ -247,6 +273,7 @@ export const Controls: FC<Props> = ({
    progress,
    isSeeking,
    isPlaying,
+    isVlc,
    seek,
    play,
    pause,
@@ -275,8 +302,9 @@ export const Controls: FC<Props> = ({
            : current.actual;
      } else {
        // When not scrubbing, only update if progress changed significantly (1 second)
-        // MPV uses milliseconds
-        const progressUnit = CONTROLS_CONSTANTS.PROGRESS_UNIT_MS;
+        const progressUnit = isVlc
+          ? CONTROLS_CONSTANTS.PROGRESS_UNIT_MS
+          : CONTROLS_CONSTANTS.PROGRESS_UNIT_TICKS;
        const progressDiff = Math.abs(current.actual - effectiveProgress.value);
        if (progressDiff >= progressUnit) {
          effectiveProgress.value = current.actual;
@@ -297,6 +325,7 @@ export const Controls: FC<Props> = ({
    currentTime,
    seek,
    play,
+    isVlc,
    offline,
    api,
    downloadedFiles,
@@ -307,6 +336,7 @@ export const Controls: FC<Props> = ({
    currentTime,
    seek,
    play,
+    isVlc,
    offline,
    api,
    downloadedFiles,
@@ -329,10 +359,12 @@ export const Controls: FC<Props> = ({
        mediaSource: newMediaSource,
        audioIndex: defaultAudioIndex,
        subtitleIndex: defaultSubtitleIndex,
-      } = getDefaultPlaySettings(item, settings, {
-        indexes: previousIndexes,
-        source: mediaSource ?? undefined,
-      });
+      } = getDefaultPlaySettings(
+        item,
+        settings,
+        previousIndexes,
+        mediaSource ?? undefined,
+      );

      const queryParams = new URLSearchParams({
        ...(offline && { offline: "true" }),
@@ -447,7 +479,11 @@ export const Controls: FC<Props> = ({
  }, [isPlaying, togglePlay]);

  return (
-    <>
+    <ControlProvider
+      item={item}
+      mediaSource={mediaSource}
+      isVideoLoaded={isVideoLoaded}
+    >
      {episodeView ? (
        <EpisodeList
          item={item}
@@ -479,6 +515,11 @@ export const Controls: FC<Props> = ({
              goToNextItem={goToNextItem}
              previousItem={previousItem}
              nextItem={nextItem}
+              getAudioTracks={getAudioTracks}
+              getSubtitleTracks={getSubtitleTracks}
+              setAudioTrack={setAudioTrack}
+              setSubtitleTrack={setSubtitleTrack}
+              setSubtitleURL={setSubtitleURL}
              aspectRatio={aspectRatio}
              scaleFactor={scaleFactor}
              setAspectRatio={setAspectRatio}
@@ -513,6 +554,7 @@ export const Controls: FC<Props> = ({
              showRemoteBubble={showRemoteBubble}
              currentTime={currentTime}
              remainingTime={remainingTime}
+              isVlc={isVlc}
              showSkipButton={showSkipButton}
              showSkipCreditButton={showSkipCreditButton}
              skipIntro={skipIntro}
@@ -540,6 +582,6 @@ export const Controls: FC<Props> = ({
      {settings.maxAutoPlayEpisodeCount.value !== -1 && (
        <ContinueWatchingOverlay goToNextItem={handleContinueWatching} />
      )}
-    </>
+    </ControlProvider>
  );
 };
--- a/components/video-player/controls/HeaderControls.tsx
+++ b/components/video-player/controls/HeaderControls.tsx
@@ -13,8 +13,9 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useHaptic } from "@/hooks/useHaptic";
-import { useSettings } from "@/utils/atoms/settings";
+import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
 import { ICON_SIZES } from "./constants";
+import { VideoProvider } from "./contexts/VideoContext";
 import DropdownView from "./dropdown/DropdownView";
 import { type ScaleFactor, ScaleFactorSelector } from "./ScaleFactorSelector";
 import {
@@ -33,6 +34,11 @@ interface HeaderControlsProps {
  goToNextItem: (options: { isAutoPlay?: boolean }) => void;
  previousItem?: BaseItemDto | null;
  nextItem?: BaseItemDto | null;
+  getAudioTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  getSubtitleTracks?: (() => Promise<any[] | null>) | (() => any[]);
+  setAudioTrack?: (index: number) => void;
+  setSubtitleTrack?: (index: number) => void;
+  setSubtitleURL?: (url: string, customName: string) => void;
  aspectRatio?: AspectRatio;
  scaleFactor?: ScaleFactor;
  setAspectRatio?: Dispatch<SetStateAction<AspectRatio>>;
@@ -52,6 +58,11 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
  goToNextItem,
  previousItem,
  nextItem,
+  getAudioTracks,
+  getSubtitleTracks,
+  setAudioTrack,
+  setSubtitleTrack,
+  setSubtitleURL,
  aspectRatio = "default",
  scaleFactor = 1.0,
  setAspectRatio,
@@ -102,25 +113,35 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
    >
      <View className='mr-auto' pointerEvents='box-none'>
        {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
-          <View pointerEvents='auto'>
-            <DropdownView />
-          </View>
+          <VideoProvider
+            getAudioTracks={getAudioTracks}
+            getSubtitleTracks={getSubtitleTracks}
+            setAudioTrack={setAudioTrack}
+            setSubtitleTrack={setSubtitleTrack}
+            setSubtitleURL={setSubtitleURL}
+          >
+            <View pointerEvents='auto'>
+              <DropdownView />
+            </View>
+          </VideoProvider>
        )}
      </View>

-      <View className='flex flex-row items-center space-x-2'>
-        {!Platform.isTV && startPictureInPicture && (
-          <TouchableOpacity
-            onPress={startPictureInPicture}
-            className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-          >
-            <MaterialIcons
-              name='picture-in-picture'
-              size={ICON_SIZES.HEADER}
-              color='white'
-            />
-          </TouchableOpacity>
-        )}
+      <View className='flex flex-row items-center gap-x-2'>
+        {!Platform.isTV &&
+          (settings.defaultPlayer === VideoPlayer.VLC_4 ||
+            Platform.OS === "android") && (
+            <TouchableOpacity
+              onPress={startPictureInPicture}
+              className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+            >
+              <MaterialIcons
+                name='picture-in-picture'
+                size={ICON_SIZES.HEADER}
+                color='white'
+              />
+            </TouchableOpacity>
+          )}
        {item?.Type === "Episode" && (
          <TouchableOpacity
            onPress={switchOnEpisodeMode}
--- a/components/video-player/controls/SkipButton.tsx
+++ b/components/video-player/controls/SkipButton.tsx
@@ -13,6 +13,12 @@ const SkipButton: React.FC<SkipButtonProps> = ({
  buttonText,
  ...props
 }) => {
+  console.log(`[SKIP_BUTTON] Render:`, {
+    buttonText,
+    showButton,
+    className: showButton ? "flex" : "hidden",
+  });
+
  return (
    <View className={showButton ? "flex" : "hidden"} {...props}>
      <TouchableOpacity
--- a/components/video-player/controls/TimeDisplay.tsx
+++ b/components/video-player/controls/TimeDisplay.tsx
@@ -6,20 +6,18 @@ import { formatTimeString } from "@/utils/time";
 interface TimeDisplayProps {
  currentTime: number;
  remainingTime: number;
+  isVlc: boolean;
 }

-/**
- * Displays current time and remaining time.
- * MPV player uses milliseconds for time values.
- */
 export const TimeDisplay: FC<TimeDisplayProps> = ({
  currentTime,
  remainingTime,
+  isVlc,
 }) => {
  const getFinishTime = () => {
    const now = new Date();
-    // remainingTime is in ms
-    const finishTime = new Date(now.getTime() + remainingTime);
+    const remainingMs = isVlc ? remainingTime : remainingTime * 1000;
+    const finishTime = new Date(now.getTime() + remainingMs);
    return finishTime.toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
@@ -30,11 +28,11 @@ export const TimeDisplay: FC<TimeDisplayProps> = ({
  return (
    <View className='flex flex-row items-center justify-between mt-2'>
      <Text className='text-[12px] text-neutral-400'>
-        {formatTimeString(currentTime, "ms")}
+        {formatTimeString(currentTime, isVlc ? "ms" : "s")}
      </Text>
      <View className='flex flex-col items-end'>
        <Text className='text-[12px] text-neutral-400'>
-          -{formatTimeString(remainingTime, "ms")}
+          -{formatTimeString(remainingTime, isVlc ? "ms" : "s")}
        </Text>
        <Text className='text-[10px] text-neutral-500 opacity-70'>
          ends at {getFinishTime()}
--- a/components/video-player/controls/contexts/ControlContext.tsx
+++ b/components/video-player/controls/contexts/ControlContext.tsx
@@ -0,0 +1,44 @@
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import type React from "react";
+import { createContext, type ReactNode, useContext } 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/PlayerContext.tsx
+++ b/components/video-player/controls/contexts/PlayerContext.tsx
@@ -1,107 +0,0 @@
-import type {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client";
-import React, {
-  createContext,
-  type MutableRefObject,
-  type ReactNode,
-  useContext,
-  useMemo,
-} from "react";
-import type { MpvPlayerViewRef } from "@/modules";
-
-interface PlayerContextProps {
-  playerRef: MutableRefObject<MpvPlayerViewRef | null>;
-  item: BaseItemDto;
-  mediaSource: MediaSourceInfo | null | undefined;
-  isVideoLoaded: boolean;
-  tracksReady: boolean;
-}
-
-const PlayerContext = createContext<PlayerContextProps | undefined>(undefined);
-
-interface PlayerProviderProps {
-  children: ReactNode;
-  playerRef: MutableRefObject<MpvPlayerViewRef | null>;
-  item: BaseItemDto;
-  mediaSource: MediaSourceInfo | null | undefined;
-  isVideoLoaded: boolean;
-  tracksReady: boolean;
-}
-
-export const PlayerProvider: React.FC<PlayerProviderProps> = ({
-  children,
-  playerRef,
-  item,
-  mediaSource,
-  isVideoLoaded,
-  tracksReady,
-}) => {
-  const value = useMemo(
-    () => ({ playerRef, item, mediaSource, isVideoLoaded, tracksReady }),
-    [playerRef, item, mediaSource, isVideoLoaded, tracksReady],
-  );
-
-  return (
-    <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>
-  );
-};
-
-// Core context hook
-export const usePlayerContext = () => {
-  const context = useContext(PlayerContext);
-  if (!context)
-    throw new Error("usePlayerContext must be used within PlayerProvider");
-  return context;
-};
-
-// Player controls hook
-export const usePlayerControls = () => {
-  const { playerRef } = usePlayerContext();
-
-  return {
-    // Subtitle controls
-    getSubtitleTracks: async () => {
-      return playerRef.current?.getSubtitleTracks() ?? null;
-    },
-    setSubtitleTrack: (trackId: number) => {
-      playerRef.current?.setSubtitleTrack(trackId);
-    },
-    disableSubtitles: () => {
-      playerRef.current?.disableSubtitles();
-    },
-    addSubtitleFile: (url: string, select = true) => {
-      playerRef.current?.addSubtitleFile(url, select);
-    },
-
-    // Audio controls
-    getAudioTracks: async () => {
-      return playerRef.current?.getAudioTracks() ?? null;
-    },
-    setAudioTrack: (trackId: number) => {
-      playerRef.current?.setAudioTrack(trackId);
-    },
-
-    // Playback controls
-    play: () => playerRef.current?.play(),
-    pause: () => playerRef.current?.pause(),
-    seekTo: (position: number) => playerRef.current?.seekTo(position),
-    seekBy: (offset: number) => playerRef.current?.seekBy(offset),
-    setSpeed: (speed: number) => playerRef.current?.setSpeed(speed),
-
-    // Subtitle positioning
-    setSubtitleScale: (scale: number) =>
-      playerRef.current?.setSubtitleScale(scale),
-    setSubtitlePosition: (position: number) =>
-      playerRef.current?.setSubtitlePosition(position),
-    setSubtitleMarginY: (margin: number) =>
-      playerRef.current?.setSubtitleMarginY(margin),
-    setSubtitleFontSize: (size: number) =>
-      playerRef.current?.setSubtitleFontSize(size),
-
-    // PiP
-    startPictureInPicture: () => playerRef.current?.startPictureInPicture(),
-    stopPictureInPicture: () => playerRef.current?.stopPictureInPicture(),
-  };
-};
--- a/components/video-player/controls/contexts/VideoContext.tsx
+++ b/components/video-player/controls/contexts/VideoContext.tsx
@@ -1,69 +1,4 @@
-/**
- * VideoContext.tsx
- *
- * Manages subtitle and audio track state for the video player UI.
- *
- * ============================================================================
- * INDEX TYPES
- * ============================================================================
- *
- * We track two different indices for each track:
- *
- * 1. SERVER INDEX (sub.Index / track.index)
- *    - Jellyfin's server-side stream index
- *    - Used to report playback state to Jellyfin server
- *    - Allows Jellyfin to remember user's last selected tracks
- *    - Passed via router params (subtitleIndex, audioIndex)
- *    - Value of -1 means disabled/none
- *
- * 2. MPV INDEX (track.mpvIndex)
- *    - MPV's internal track ID for the loaded track
- *    - Used to actually switch tracks in the player
- *    - Only assigned to tracks that are loaded into MPV
- *    - Value of -1 means track is not in MPV (e.g., burned-in image sub)
- *
- * ============================================================================
- * SUBTITLE DELIVERY METHODS
- * ============================================================================
- *
- * Jellyfin provides subtitles via different delivery methods:
- * - Embed: Subtitle is embedded in the container (MKV, MP4, etc.)
- * - Hls: Subtitle is delivered via HLS segments (during transcoding)
- * - External: Subtitle is delivered as a separate file URL
- * - Encode: Subtitle is burned into the video (image-based subs during transcode)
- *
- * Jellyfin also provides `IsTextSubtitleStream` boolean:
- * - true:  Text-based subtitle (SRT, ASS, VTT, etc.)
- * - false: Image-based subtitle (PGS, VOBSUB, DVDSUB, etc.)
- *
- * ============================================================================
- * SUBTITLE TYPES AND HOW THEY'RE HANDLED
- * ============================================================================
- *
- * 1. TEXT-BASED SUBTITLES (IsTextSubtitleStream = true)
- *    - Direct Play: Loaded into MPV (embedded or via sub-add for external)
- *    - Transcoding: Delivered via HLS, loaded into MPV
- *    - Action: Use playerControls.setSubtitleTrack(mpvId)
- *
- * 2. IMAGE-BASED SUBTITLES (IsTextSubtitleStream = false)
- *    - Direct Play: Embedded ones are in MPV, external ones are filtered out
- *    - Transcoding: BURNED INTO VIDEO by Jellyfin (not in MPV track list)
- *    - Action: When transcoding, use replacePlayer() to request burn-in
- *
- * ============================================================================
- * MPV INDEX CALCULATION
- * ============================================================================
- *
- * We iterate through Jellyfin's subtitle list and assign MPV indices only to
- * subtitles that are actually loaded into MPV:
- *
- * - isSubtitleInMpv = true:  Subtitle is in MPV's track list, increment index
- * - isSubtitleInMpv = false: Subtitle is NOT in MPV (e.g., image sub during
- *                            transcode), do NOT increment index
- *
- * The order of subtitles in Jellyfin's MediaStreams matches the order in MPV.
- */
-
+import { SubtitleDeliveryMethod } from "@jellyfin/sdk/lib/generated-client";
 import { router, useLocalSearchParams } from "expo-router";
 import type React from "react";
 import {
@@ -74,29 +9,52 @@ import {
  useMemo,
  useState,
 } from "react";
-import type { AudioTrack, SubtitleTrack } from "@/modules";
-import {
-  isImageBasedSubtitle,
-  isSubtitleInMpv,
-} from "@/utils/jellyfin/subtitleUtils";
+import type { TrackInfo } from "@/modules/VlcPlayer.types";
 import type { Track } from "../types";
-import { usePlayerContext, usePlayerControls } from "./PlayerContext";
+import { useControlContext } from "./ControlContext";

 interface VideoContextProps {
-  subtitleTracks: Track[] | null;
  audioTracks: Track[] | null;
+  subtitleTracks: Track[] | null;
+  setAudioTrack: ((index: number) => void) | undefined;
+  setSubtitleTrack: ((index: number) => void) | undefined;
+  setSubtitleURL: ((url: string, customName: string) => void) | undefined;
 }

 const VideoContext = createContext<VideoContextProps | undefined>(undefined);

-export const VideoProvider: React.FC<{ children: ReactNode }> = ({
-  children,
-}) => {
-  const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
-  const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
+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;
+}

-  const { tracksReady, mediaSource } = usePlayerContext();
-  const playerControls = usePlayerControls();
+export const VideoProvider: React.FC<VideoProviderProps> = ({
+  children,
+  getSubtitleTracks,
+  getAudioTracks,
+  setSubtitleTrack,
+  setSubtitleURL,
+  setAudioTrack,
+}) => {
+  const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
+
+  const ControlContext = useControlContext();
+  const isVideoLoaded = ControlContext?.isVideoLoaded;
+  const mediaSource = ControlContext?.mediaSource;
+
+  const allSubs =
+    mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];

  const { itemId, audioIndex, bitrateValue, subtitleIndex, playbackPosition } =
    useLocalSearchParams<{
@@ -108,143 +66,173 @@ export const VideoProvider: React.FC<{ children: ReactNode }> = ({
      playbackPosition: string;
    }>();

-  const allSubs =
-    mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
-  const allAudio =
-    mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
-
-  const isTranscoding = Boolean(mediaSource?.TranscodingUrl);
-
-  /**
-   * Check if the currently selected subtitle is image-based.
-   * Used to determine if we need to refresh the player when changing subs.
-   */
-  const isCurrentSubImageBased = useMemo(() => {
-    if (subtitleIndex === "-1") return false;
-    const currentSub = allSubs.find(
-      (s) => s.Index?.toString() === subtitleIndex,
+  const onTextBasedSubtitle = useMemo(() => {
+    return (
+      allSubs.find(
+        (s) =>
+          s.Index?.toString() === subtitleIndex &&
+          (s.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
+            s.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
+            s.DeliveryMethod === SubtitleDeliveryMethod.External),
+      ) || subtitleIndex === "-1"
    );
-    return currentSub ? isImageBasedSubtitle(currentSub) : false;
  }, [allSubs, subtitleIndex]);

-  /**
-   * Refresh the player with new parameters.
-   * This triggers Jellyfin to re-process the stream (e.g., burn in image subs).
-   */
-  const replacePlayer = (params: {
-    audioIndex?: string;
-    subtitleIndex?: string;
+  const setPlayerParams = ({
+    chosenAudioIndex = audioIndex,
+    chosenSubtitleIndex = subtitleIndex,
+  }: {
+    chosenAudioIndex?: string;
+    chosenSubtitleIndex?: string;
  }) => {
+    console.log("chosenSubtitleIndex", chosenSubtitleIndex);
    const queryParams = new URLSearchParams({
      itemId: itemId ?? "",
-      audioIndex: params.audioIndex ?? audioIndex,
-      subtitleIndex: params.subtitleIndex ?? subtitleIndex,
+      audioIndex: chosenAudioIndex,
+      subtitleIndex: chosenSubtitleIndex,
      mediaSourceId: mediaSource?.Id ?? "",
      bitrateValue: bitrateValue,
      playbackPosition: playbackPosition,
    }).toString();
+
    router.replace(`player/direct-player?${queryParams}` as any);
  };

-  // Fetch tracks when ready
+  const setTrackParams = (
+    type: "audio" | "subtitle",
+    index: number,
+    serverIndex: number,
+  ) => {
+    const setTrack = type === "audio" ? setAudioTrack : setSubtitleTrack;
+    const paramKey = type === "audio" ? "audioIndex" : "subtitleIndex";
+
+    // If we're transcoding and we're going from a image based subtitle
+    // to a text based subtitle, we need to change the player params.
+
+    const shouldChangePlayerParams =
+      type === "subtitle" &&
+      mediaSource?.TranscodingUrl &&
+      !onTextBasedSubtitle;
+
+    console.log("Set player params", index, serverIndex);
+    if (shouldChangePlayerParams) {
+      setPlayerParams({
+        chosenSubtitleIndex: serverIndex.toString(),
+      });
+      return;
+    }
+    setTrack?.(serverIndex);
+    router.setParams({
+      [paramKey]: serverIndex.toString(),
+    });
+  };
+
  useEffect(() => {
-    if (!tracksReady) return;
-
    const fetchTracks = async () => {
-      const [subtitleData, audioData] = await Promise.all([
-        playerControls.getSubtitleTracks().catch(() => null),
-        playerControls.getAudioTracks().catch(() => null),
-      ]);
+      if (getSubtitleTracks) {
+        let subtitleData = await getSubtitleTracks();
+        // Only FOR VLC 3, If we're transcoding, we need to reverse the subtitle data, because VLC reverses the HLS subtitles.
+        if (
+          mediaSource?.TranscodingUrl &&
+          subtitleData &&
+          subtitleData.length > 1
+        ) {
+          subtitleData = [subtitleData[0], ...subtitleData.slice(1).reverse()];
+        }

-      // Process subtitles - map Jellyfin indices to MPV track IDs
-      let mpvIndex = 0; // MPV track index counter (only incremented for subs in MPV)
+        let embedSubIndex = 1;
+        const processedSubs: Track[] = allSubs?.map((sub) => {
+          /** A boolean value determining if we should increment the embedSubIndex, currently only Embed and Hls subtitles are automatically added into VLC Player */
+          const shouldIncrement =
+            sub.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
+            sub.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
+            sub.DeliveryMethod === SubtitleDeliveryMethod.External;
+          /** The index of subtitle inside VLC Player Itself */
+          const vlcIndex = subtitleData?.at(embedSubIndex)?.index ?? -1;
+          if (shouldIncrement) embedSubIndex++;
+          return {
+            name: sub.DisplayTitle || "Undefined Subtitle",
+            index: sub.Index ?? -1,
+            setTrack: () =>
+              shouldIncrement
+                ? setTrackParams("subtitle", vlcIndex, sub.Index ?? -1)
+                : setPlayerParams({
+                    chosenSubtitleIndex: sub.Index?.toString(),
+                  }),
+          };
+        });

-      const subs: Track[] = allSubs.map((sub) => {
-        const inMpv = isSubtitleInMpv(sub, isTranscoding);
+        // Step 3: Restore the original order
+        const subtitles: Track[] = processedSubs.sort(
+          (a, b) => a.index - b.index,
+        );

-        // Get MPV track ID: only if this sub is actually in MPV's track list
-        const mpvId = inMpv
-          ? ((subtitleData as SubtitleTrack[])?.[mpvIndex++]?.id ?? -1)
-          : -1;
-
-        return {
-          name: sub.DisplayTitle || "Unknown",
-          index: sub.Index ?? -1, // Jellyfin server-side index
-          mpvIndex: mpvId, // MPV track ID (-1 if not in MPV)
-          setTrack: () => {
-            // Case 1: Transcoding + switching to/from image-based sub
-            // Need to refresh player so Jellyfin burns in the new sub
-            if (
-              isTranscoding &&
-              (isImageBasedSubtitle(sub) || isCurrentSubImageBased)
-            ) {
-              replacePlayer({ subtitleIndex: String(sub.Index) });
-              return;
-            }
-
-            // Case 2: Subtitle is in MPV - just switch tracks
-            if (inMpv && mpvId !== -1) {
-              playerControls.setSubtitleTrack(mpvId);
-              router.setParams({ subtitleIndex: String(sub.Index) });
-              return;
-            }
-
-            // Case 3: Fallback - refresh player
-            replacePlayer({ subtitleIndex: String(sub.Index) });
-          },
-        };
-      });
-
-      // Add "Disable" option at the beginning
-      subs.unshift({
-        name: "Disable",
-        index: -1,
-        setTrack: () => {
-          // If currently using image-based sub during transcode, need to refresh
-          if (isTranscoding && isCurrentSubImageBased) {
-            replacePlayer({ subtitleIndex: "-1" });
-          } else {
-            playerControls.setSubtitleTrack(-1);
-            router.setParams({ subtitleIndex: "-1" });
+        // Add a "Disable Subtitles" option
+        subtitles.unshift({
+          name: "Disable",
+          index: -1,
+          setTrack: () =>
+            !mediaSource?.TranscodingUrl || onTextBasedSubtitle
+              ? setTrackParams("subtitle", -1, -1)
+              : setPlayerParams({ chosenSubtitleIndex: "-1" }),
+        });
+        setSubtitleTracks(subtitles);
+      }
+      if (getAudioTracks) {
+        const audioData = await getAudioTracks();
+        const allAudio =
+          mediaSource?.MediaStreams?.filter((s) => s.Type === "Audio") || [];
+        const audioTracks: Track[] = allAudio?.map((audio, idx) => {
+          if (!mediaSource?.TranscodingUrl) {
+            const vlcIndex = audioData?.at(idx + 1)?.index ?? -1;
+            return {
+              name: audio.DisplayTitle ?? "Undefined Audio",
+              index: audio.Index ?? -1,
+              setTrack: () =>
+                setTrackParams("audio", vlcIndex, audio.Index ?? -1),
+            };
          }
-        },
-      });
+          return {
+            name: audio.DisplayTitle ?? "Undefined Audio",
+            index: audio.Index ?? -1,
+            setTrack: () =>
+              setPlayerParams({ chosenAudioIndex: audio.Index?.toString() }),
+          };
+        });

-      // Process audio tracks
-      const audio: Track[] = allAudio.map((a, idx) => ({
-        name: a.DisplayTitle || "Unknown",
-        index: a.Index ?? -1,
-        setTrack: () => {
-          // Transcoding: need full player refresh to change audio stream
-          if (isTranscoding) {
-            replacePlayer({ audioIndex: String(a.Index) });
-            return;
-          }
-
-          // Direct play: just switch audio track in MPV
-          const mpvId = (audioData as AudioTrack[])?.[idx]?.id ?? idx + 1;
-          playerControls.setAudioTrack(mpvId);
-          router.setParams({ audioIndex: String(a.Index) });
-        },
-      }));
-
-      setSubtitleTracks(subs.sort((a, b) => a.index - b.index));
-      setAudioTracks(audio);
+        // Add a "Disable Audio" option if its not transcoding.
+        if (!mediaSource?.TranscodingUrl) {
+          audioTracks.unshift({
+            name: "Disable",
+            index: -1,
+            setTrack: () => setTrackParams("audio", -1, -1),
+          });
+        }
+        setAudioTracks(audioTracks);
+      }
    };
-
    fetchTracks();
-  }, [tracksReady, mediaSource]);
+  }, [isVideoLoaded, getAudioTracks, getSubtitleTracks]);

  return (
-    <VideoContext.Provider value={{ subtitleTracks, audioTracks }}>
+    <VideoContext.Provider
+      value={{
+        audioTracks,
+        subtitleTracks,
+        setSubtitleTrack,
+        setSubtitleURL,
+        setAudioTrack,
+      }}
+    >
      {children}
    </VideoContext.Provider>
  );
 };

 export const useVideoContext = () => {
-  const ctx = useContext(VideoContext);
-  if (!ctx)
-    throw new Error("useVideoContext must be used within VideoProvider");
-  return ctx;
+  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/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -7,12 +7,17 @@ import {
  type OptionGroup,
  PlatformDropdown,
 } from "@/components/PlatformDropdown";
-import { usePlayerContext } from "../contexts/PlayerContext";
+import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";

 const DropdownView = () => {
-  const { subtitleTracks, audioTracks } = useVideoContext();
-  const { item, mediaSource } = usePlayerContext();
+  const videoContext = useVideoContext();
+  const { subtitleTracks, audioTracks } = videoContext;
+  const ControlContext = useControlContext();
+  const [item, mediaSource] = [
+    ControlContext?.item,
+    ControlContext?.mediaSource,
+  ];
  const router = useRouter();

  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition, offline } =
--- a/components/video-player/controls/hooks/useGestureDetection.ts
+++ b/components/video-player/controls/hooks/useGestureDetection.ts
@@ -28,7 +28,6 @@ export const useGestureDetection = ({
  onVerticalDragEnd,
  onTap,
  screenWidth = 400,
-  screenHeight = 800,
 }: SwipeGestureOptions = {}) => {
  const touchStartTime = useRef(0);
  const touchStartPosition = useRef({ x: 0, y: 0 });
@@ -37,47 +36,25 @@ export const useGestureDetection = ({
  const dragSide = useRef<"left" | "right" | null>(null);
  const hasMovedEnough = useRef(false);
  const gestureType = useRef<"none" | "horizontal" | "vertical">("none");
-  const shouldIgnoreTouch = useRef(false);

-  const handleTouchStart = useCallback(
-    (event: GestureResponderEvent) => {
-      const startY = event.nativeEvent.pageY;
-
-      // Define exclusion zones (15% from top and bottom)
-      const topExclusionZone = screenHeight * 0.15;
-      const bottomExclusionZone = screenHeight * 0.85;
-
-      // Check if touch started in exclusion zones
-      if (startY < topExclusionZone || startY > bottomExclusionZone) {
-        shouldIgnoreTouch.current = true;
-        return;
-      }
-
-      shouldIgnoreTouch.current = false;
-      touchStartTime.current = Date.now();
-      touchStartPosition.current = {
-        x: event.nativeEvent.pageX,
-        y: startY,
-      };
-      lastTouchPosition.current = {
-        x: event.nativeEvent.pageX,
-        y: startY,
-      };
-      isDragging.current = false;
-      dragSide.current = null;
-      hasMovedEnough.current = false;
-      gestureType.current = "none";
-    },
-    [screenHeight],
-  );
+  const handleTouchStart = useCallback((event: GestureResponderEvent) => {
+    touchStartTime.current = Date.now();
+    touchStartPosition.current = {
+      x: event.nativeEvent.pageX,
+      y: event.nativeEvent.pageY,
+    };
+    lastTouchPosition.current = {
+      x: event.nativeEvent.pageX,
+      y: event.nativeEvent.pageY,
+    };
+    isDragging.current = false;
+    dragSide.current = null;
+    hasMovedEnough.current = false;
+    gestureType.current = "none";
+  }, []);

  const handleTouchMove = useCallback(
    (event: GestureResponderEvent) => {
-      // Ignore touch if it started in exclusion zone
-      if (shouldIgnoreTouch.current) {
-        return;
-      }
-
      const currentPosition = {
        x: event.nativeEvent.pageX,
        y: event.nativeEvent.pageY,
@@ -129,12 +106,6 @@ export const useGestureDetection = ({

  const handleTouchEnd = useCallback(
    (event: GestureResponderEvent) => {
-      // Ignore touch if it started in exclusion zone
-      if (shouldIgnoreTouch.current) {
-        shouldIgnoreTouch.current = false;
-        return;
-      }
-
      const touchEndTime = Date.now();
      const touchEndPosition = {
        x: event.nativeEvent.pageX,
--- a/components/video-player/controls/hooks/useRemoteControl.ts
+++ b/components/video-player/controls/hooks/useRemoteControl.ts
@@ -22,6 +22,7 @@ interface UseRemoteControlProps {
  progress: SharedValue<number>;
  min: SharedValue<number>;
  max: SharedValue<number>;
+  isVlc: boolean;
  showControls: boolean;
  isPlaying: boolean;
  seek: (value: number) => void;
@@ -33,14 +34,11 @@ interface UseRemoteControlProps {
  handleSeekBackward: (seconds: number) => void;
 }

-/**
- * Hook to manage TV remote control interactions.
- * MPV player uses milliseconds for time values.
- */
 export function useRemoteControl({
  progress,
  min,
  max,
+  isVlc,
  showControls,
  isPlaying,
  seek,
@@ -63,18 +61,21 @@ export function useRemoteControl({
  const longPressTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
    null,
  );
-  // MPV uses ms
-  const SCRUB_INTERVAL = CONTROLS_CONSTANTS.SCRUB_INTERVAL_MS;
+  const SCRUB_INTERVAL = isVlc
+    ? CONTROLS_CONSTANTS.SCRUB_INTERVAL_MS
+    : CONTROLS_CONSTANTS.SCRUB_INTERVAL_TICKS;

-  const updateTime = useCallback((progressValue: number) => {
-    // Convert ms to ticks for calculation
-    const progressInTicks = msToTicks(progressValue);
-    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 updateTime = useCallback(
+    (progressValue: number) => {
+      const progressInTicks = isVlc ? msToTicks(progressValue) : progressValue;
+      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 });
+    },
+    [isVlc],
+  );

  // TV remote control handling (no-op on non-TV platforms)
  useTVEventHandler((evt) => {
@@ -101,8 +102,7 @@ export function useRemoteControl({
          Math.min(max.value, base + direction * SCRUB_INTERVAL),
        );
        remoteScrubProgress.value = updated;
-        // Convert ms to ticks for trickplay
-        const progressInTicks = msToTicks(updated);
+        const progressInTicks = isVlc ? msToTicks(updated) : updated;
        calculateTrickplayUrl(progressInTicks);
        updateTime(updated);
        break;
@@ -111,8 +111,9 @@ export function useRemoteControl({
        if (isRemoteScrubbing.value && remoteScrubProgress.value != null) {
          progress.value = remoteScrubProgress.value;

-          // MPV uses ms, seek expects ms
-          const seekTarget = Math.max(0, remoteScrubProgress.value);
+          const seekTarget = isVlc
+            ? Math.max(0, remoteScrubProgress.value)
+            : Math.max(0, ticksToSeconds(remoteScrubProgress.value));

          seek(seekTarget);
          if (isPlaying) play();
--- a/components/video-player/controls/hooks/useVideoNavigation.ts
+++ b/components/video-player/controls/hooks/useVideoNavigation.ts
@@ -3,22 +3,20 @@ import type { SharedValue } from "react-native-reanimated";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useSettings } from "@/utils/atoms/settings";
 import { writeToLog } from "@/utils/log";
-import { secondsToMs } from "@/utils/time";
+import { secondsToMs, ticksToSeconds } from "@/utils/time";

 interface UseVideoNavigationProps {
  progress: SharedValue<number>;
  isPlaying: boolean;
+  isVlc: boolean;
  seek: (value: number) => void;
  play: () => void;
 }

-/**
- * Hook to manage video navigation (seeking forward/backward).
- * MPV player uses milliseconds for time values.
- */
 export function useVideoNavigation({
  progress,
  isPlaying,
+  isVlc,
  seek,
  play,
 }: UseVideoNavigationProps) {
@@ -32,15 +30,16 @@ export function useVideoNavigation({
      try {
        const curr = progress.value;
        if (curr !== undefined) {
-          // MPV uses ms
-          const newTime = Math.max(0, curr - secondsToMs(seconds));
+          const newTime = isVlc
+            ? Math.max(0, curr - secondsToMs(seconds))
+            : Math.max(0, ticksToSeconds(curr) - seconds);
          seek(newTime);
        }
      } catch (error) {
        writeToLog("ERROR", "Error seeking video backwards", error);
      }
    },
-    [isPlaying, seek, progress],
+    [isPlaying, isVlc, seek, progress],
  );

  const handleSeekForward = useCallback(
@@ -49,15 +48,16 @@ export function useVideoNavigation({
      try {
        const curr = progress.value;
        if (curr !== undefined) {
-          // MPV uses ms
-          const newTime = curr + secondsToMs(seconds);
+          const newTime = isVlc
+            ? curr + secondsToMs(seconds)
+            : ticksToSeconds(curr) + seconds;
          seek(Math.max(0, newTime));
        }
      } catch (error) {
        writeToLog("ERROR", "Error seeking video forwards", error);
      }
    },
-    [isPlaying, seek, progress],
+    [isPlaying, isVlc, seek, progress],
  );

  const handleSkipBackward = useCallback(async () => {
@@ -69,11 +69,9 @@ export function useVideoNavigation({
    try {
      const curr = progress.value;
      if (curr !== undefined) {
-        // MPV uses ms
-        const newTime = Math.max(
-          0,
-          curr - secondsToMs(settings.rewindSkipTime),
-        );
+        const newTime = isVlc
+          ? Math.max(0, curr - secondsToMs(settings.rewindSkipTime))
+          : Math.max(0, ticksToSeconds(curr) - settings.rewindSkipTime);
        seek(newTime);
        if (wasPlayingRef.current) {
          play();
@@ -82,7 +80,7 @@ export function useVideoNavigation({
    } catch (error) {
      writeToLog("ERROR", "Error seeking video backwards", error);
    }
-  }, [settings, isPlaying, play, seek, progress, lightHapticFeedback]);
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);

  const handleSkipForward = useCallback(async () => {
    if (!settings?.forwardSkipTime) {
@@ -93,8 +91,9 @@ export function useVideoNavigation({
    try {
      const curr = progress.value;
      if (curr !== undefined) {
-        // MPV uses ms
-        const newTime = curr + secondsToMs(settings.forwardSkipTime);
+        const newTime = isVlc
+          ? curr + secondsToMs(settings.forwardSkipTime)
+          : ticksToSeconds(curr) + settings.forwardSkipTime;
        seek(Math.max(0, newTime));
        if (wasPlayingRef.current) {
          play();
@@ -103,7 +102,7 @@ export function useVideoNavigation({
    } catch (error) {
      writeToLog("ERROR", "Error seeking video forwards", error);
    }
-  }, [settings, isPlaying, play, seek, progress, lightHapticFeedback]);
+  }, [settings, isPlaying, isVlc, play, seek, progress, lightHapticFeedback]);

  return {
    handleSeekBackward,
--- a/components/video-player/controls/hooks/useVideoSlider.ts
+++ b/components/video-player/controls/hooks/useVideoSlider.ts
@@ -8,6 +8,7 @@ interface UseVideoSliderProps {
  progress: SharedValue<number>;
  isSeeking: SharedValue<boolean>;
  isPlaying: boolean;
+  isVlc: boolean;
  seek: (value: number) => void;
  play: () => void;
  pause: () => void;
@@ -15,14 +16,11 @@ interface UseVideoSliderProps {
  showControls: boolean;
 }

-/**
- * Hook to manage video slider interactions.
- * MPV player uses milliseconds for time values.
- */
 export function useVideoSlider({
  progress,
  isSeeking,
  isPlaying,
+  isVlc,
  seek,
  play,
  pause,
@@ -64,20 +62,21 @@ export function useVideoSlider({
      setIsSliding(false);
      isSeeking.value = false;
      progress.value = value;
-      // MPV uses ms, seek expects ms
-      const seekValue = Math.max(0, Math.floor(value));
+      const seekValue = Math.max(
+        0,
+        Math.floor(isVlc ? value : ticksToSeconds(value)),
+      );
      seek(seekValue);
      if (wasPlayingRef.current) {
        play();
      }
    },
-    [seek, play, progress, isSeeking],
+    [isVlc, seek, play, progress, isSeeking],
  );

  const handleSliderChange = useCallback(
    debounce((value: number) => {
-      // Convert ms to ticks for trickplay
-      const progressInTicks = msToTicks(value);
+      const progressInTicks = isVlc ? msToTicks(value) : value;
      calculateTrickplayUrl(progressInTicks);
      const progressInSeconds = Math.floor(ticksToSeconds(progressInTicks));
      const hours = Math.floor(progressInSeconds / 3600);
@@ -85,7 +84,7 @@ export function useVideoSlider({
      const seconds = progressInSeconds % 60;
      setTime({ hours, minutes, seconds });
    }, CONTROLS_CONSTANTS.SLIDER_DEBOUNCE_MS),
-    [calculateTrickplayUrl],
+    [isVlc, calculateTrickplayUrl],
  );

  return {
--- a/components/video-player/controls/hooks/useVideoTime.ts
+++ b/components/video-player/controls/hooks/useVideoTime.ts
@@ -4,18 +4,21 @@ import {
  type SharedValue,
  useAnimatedReaction,
 } from "react-native-reanimated";
+import { ticksToSeconds } from "@/utils/time";

 interface UseVideoTimeProps {
  progress: SharedValue<number>;
  max: SharedValue<number>;
  isSeeking: SharedValue<boolean>;
+  isVlc: boolean;
 }

-/**
- * Hook to manage video time display.
- * MPV player uses milliseconds for time values.
- */
-export function useVideoTime({ progress, max, isSeeking }: UseVideoTimeProps) {
+export function useVideoTime({
+  progress,
+  max,
+  isSeeking,
+  isVlc,
+}: UseVideoTimeProps) {
  const [currentTime, setCurrentTime] = useState(0);
  const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);

@@ -24,16 +27,19 @@ export function useVideoTime({ progress, max, isSeeking }: UseVideoTimeProps) {

  const updateTimes = useCallback(
    (currentProgress: number, maxValue: number) => {
-      // MPV uses milliseconds
-      const current = currentProgress;
-      const remaining = maxValue - currentProgress;
+      const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
+      const remaining = isVlc
+        ? maxValue - currentProgress
+        : ticksToSeconds(maxValue - currentProgress);

      // Only update state if the displayed time actually changed (avoid sub-second updates)
-      const currentSeconds = Math.floor(current / 1000);
-      const remainingSeconds = Math.floor(remaining / 1000);
-      const lastCurrentSeconds = Math.floor(lastCurrentTimeRef.current / 1000);
+      const currentSeconds = Math.floor(current / (isVlc ? 1000 : 1));
+      const remainingSeconds = Math.floor(remaining / (isVlc ? 1000 : 1));
+      const lastCurrentSeconds = Math.floor(
+        lastCurrentTimeRef.current / (isVlc ? 1000 : 1),
+      );
      const lastRemainingSeconds = Math.floor(
-        lastRemainingTimeRef.current / 1000,
+        lastRemainingTimeRef.current / (isVlc ? 1000 : 1),
      );

      if (
@@ -46,7 +52,7 @@ export function useVideoTime({ progress, max, isSeeking }: UseVideoTimeProps) {
        lastRemainingTimeRef.current = remaining;
      }
    },
-    [],
+    [isVlc],
  );

  useAnimatedReaction(
--- a/components/vlc/VideoDebugInfo.tsx
+++ b/components/vlc/VideoDebugInfo.tsx
@@ -0,0 +1,74 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
+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();
+
+  const { t } = useTranslation();
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: insets.top,
+        left: insets.left + 8,
+        zIndex: 100,
+      }}
+      {...props}
+    >
+      <Text className='font-bold'>{t("player.playback_state")}</Text>
+      <Text className='font-bold mt-2.5'>{t("player.audio_tracks")}</Text>
+      {audioTracks?.map((track, index) => (
+        <Text key={index}>
+          {track.name} ({t("player.index")} {track.index})
+        </Text>
+      ))}
+      <Text className='font-bold mt-2.5'>{t("player.subtitles_tracks")}</Text>
+      {subtitleTracks?.map((track, index) => (
+        <Text key={index}>
+          {track.name} ({t("player.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'>
+          {t("player.refresh_tracks")}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
--- a/constants/SubtitleConstants.ts
+++ b/constants/SubtitleConstants.ts
@@ -0,0 +1,45 @@
+export type VLCColor =
+  | "Black"
+  | "Gray"
+  | "Silver"
+  | "White"
+  | "Maroon"
+  | "Red"
+  | "Fuchsia"
+  | "Yellow"
+  | "Olive"
+  | "Green"
+  | "Teal"
+  | "Lime"
+  | "Purple"
+  | "Navy"
+  | "Blue"
+  | "Aqua";
+
+export type OutlineThickness = "None" | "Thin" | "Normal" | "Thick";
+
+export const VLC_COLORS: Record<VLCColor, number> = {
+  Black: 0,
+  Gray: 8421504,
+  Silver: 12632256,
+  White: 16777215,
+  Maroon: 8388608,
+  Red: 16711680,
+  Fuchsia: 16711935,
+  Yellow: 16776960,
+  Olive: 8421376,
+  Green: 32768,
+  Teal: 32896,
+  Lime: 65280,
+  Purple: 8388736,
+  Navy: 128,
+  Blue: 255,
+  Aqua: 65535,
+};
+
+export const OUTLINE_THICKNESS: Record<OutlineThickness, number> = {
+  None: 0,
+  Thin: 2,
+  Normal: 4,
+  Thick: 6,
+};
--- a/eas.json
+++ b/eas.json
@@ -45,14 +45,14 @@
    },
    "production": {
      "environment": "production",
-      "channel": "0.48.0",
+      "channel": "0.47.1",
      "android": {
        "image": "latest"
      }
    },
    "production-apk": {
      "environment": "production",
-      "channel": "0.48.0",
+      "channel": "0.47.1",
      "android": {
        "buildType": "apk",
        "image": "latest"
@@ -60,7 +60,7 @@
    },
    "production-apk-tv": {
      "environment": "production",
-      "channel": "0.48.0",
+      "channel": "0.47.1",
      "android": {
        "buildType": "apk",
        "image": "latest"
--- a/global.css
+++ b/global.css
@@ -0,0 +1,5 @@
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";
+ 
+@import "nativewind/theme";
--- a/hooks/useCreditSkipper.ts
+++ b/hooks/useCreditSkipper.ts
@@ -5,15 +5,12 @@ import { useSegments } from "@/utils/segments";
 import { msToSeconds, secondsToMs } from "@/utils/time";
 import { useHaptic } from "./useHaptic";

-/**
- * Custom hook to handle skipping credits in a media player.
- * MPV player uses milliseconds for time.
- */
 export const useCreditSkipper = (
  itemId: string,
  currentTime: number,
-  seek: (ms: number) => void,
+  seek: (time: number) => void,
  play: () => void,
+  isVlc = false,
  isOffline = false,
  api: Api | null = null,
  downloadedFiles: DownloadedItem[] | undefined = undefined,
@@ -21,11 +18,16 @@ export const useCreditSkipper = (
  const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
  const lightHapticFeedback = useHaptic("light");

-  // Convert ms to seconds for comparison with timestamps
-  const currentTimeSeconds = msToSeconds(currentTime);
+  if (isVlc) {
+    currentTime = msToSeconds(currentTime);
+  }

  const wrappedSeek = (seconds: number) => {
-    seek(secondsToMs(seconds));
+    if (isVlc) {
+      seek(secondsToMs(seconds));
+      return;
+    }
+    seek(seconds);
  };

  const { data: segments } = useSegments(
@@ -39,11 +41,11 @@ export const useCreditSkipper = (
  useEffect(() => {
    if (creditTimestamps) {
      setShowSkipCreditButton(
-        currentTimeSeconds > creditTimestamps.startTime &&
-          currentTimeSeconds < creditTimestamps.endTime,
+        currentTime > creditTimestamps.startTime &&
+          currentTime < creditTimestamps.endTime,
      );
    }
-  }, [creditTimestamps, currentTimeSeconds]);
+  }, [creditTimestamps, currentTime]);

  const skipCredit = useCallback(() => {
    if (!creditTimestamps) return;
--- a/hooks/useDefaultPlaySettings.ts
+++ b/hooks/useDefaultPlaySettings.ts
@@ -1,23 +1,51 @@
 import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo } from "react";
+import { BITRATES } from "@/components/BitrateSelector";
 import type { Settings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";

-/**
- * React hook wrapper for getDefaultPlaySettings.
- * Used in UI components for initial playback (no previous track state).
- */
-const useDefaultPlaySettings = (item: BaseItemDto, settings: Settings | null) =>
-  useMemo(() => {
-    const { mediaSource, audioIndex, subtitleIndex, bitrate } =
-      getDefaultPlaySettings(item, settings);
+// Used only for initial play settings.
+const useDefaultPlaySettings = (
+  item: BaseItemDto,
+  settings: Settings | null,
+) => {
+  const playSettings = useMemo(() => {
+    // 1. Get first media source
+    const mediaSource = item.MediaSources?.[0];
+
+    // 2. Get default or preferred audio
+    const defaultAudioIndex = mediaSource?.DefaultAudioStreamIndex;
+    const preferedAudioIndex = mediaSource?.MediaStreams?.find(
+      (x) =>
+        x.Type === "Audio" &&
+        x.Language ===
+          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName,
+    )?.Index;
+
+    const firstAudioIndex = mediaSource?.MediaStreams?.find(
+      (x) => x.Type === "Audio",
+    )?.Index;
+
+    // 4. Get default bitrate from settings or fallback to max
+    let bitrate = settings?.defaultBitrate ?? BITRATES[0];
+    // value undefined seems to get lost in settings. This is just a failsafe
+    if (bitrate.key === BITRATES[0].key) {
+      bitrate = BITRATES[0];
+    }

    return {
-      defaultMediaSource: mediaSource,
-      defaultAudioIndex: audioIndex,
-      defaultSubtitleIndex: subtitleIndex,
-      defaultBitrate: bitrate,
+      defaultAudioIndex:
+        preferedAudioIndex ?? defaultAudioIndex ?? firstAudioIndex ?? undefined,
+      defaultSubtitleIndex: mediaSource?.DefaultSubtitleStreamIndex ?? -1,
+      defaultMediaSource: mediaSource ?? undefined,
+      defaultBitrate: bitrate ?? undefined,
    };
-  }, [item, settings]);
+  }, [
+    item.MediaSources,
+    settings?.defaultAudioLanguage,
+    settings?.defaultSubtitleLanguage,
+  ]);
+
+  return playSettings;
+};

 export default useDefaultPlaySettings;
--- a/hooks/useImageColors.ts
+++ b/hooks/useImageColors.ts
@@ -2,14 +2,8 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom, useAtomValue } from "jotai";
 import { useEffect, useMemo } from "react";
 import { Platform } from "react-native";
-import type * as ImageColorsType from "react-native-image-colors";
+import { getColors, ImageColorsResult } from "react-native-image-colors";
 import { apiAtom } from "@/providers/JellyfinProvider";
-
-// Conditionally import react-native-image-colors only on non-TV platforms
-const ImageColors = Platform.isTV
-  ? null
-  : (require("react-native-image-colors") as typeof ImageColorsType);
-
 import {
  adjustToNearBlack,
  calculateTextColor,
@@ -70,13 +64,11 @@ export const useImageColors = ({
      }

      // Extract colors from the image
-      if (!ImageColors?.getColors) return;
-
-      ImageColors.getColors(source.uri, {
+      getColors(source.uri, {
        fallback: "#fff",
        cache: false,
      })
-        .then((colors: ImageColorsType.ImageColorsResult) => {
+        .then((colors: ImageColorsResult) => {
          let primary = "#fff";
          let text = "#000";
          let backup = "#fff";
--- a/hooks/useImageColorsReturn.ts
+++ b/hooks/useImageColorsReturn.ts
@@ -2,14 +2,8 @@ import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtomValue } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import { Platform } from "react-native";
-import type * as ImageColorsType from "react-native-image-colors";
+import { getColors, ImageColorsResult } from "react-native-image-colors";
 import { apiAtom } from "@/providers/JellyfinProvider";
-
-// Conditionally import react-native-image-colors only on non-TV platforms
-const ImageColors = Platform.isTV
-  ? null
-  : (require("react-native-image-colors") as typeof ImageColorsType);
-
 import {
  adjustToNearBlack,
  calculateTextColor,
@@ -86,13 +80,11 @@ export const useImageColorsReturn = ({
      }

      // Extract colors from the image
-      if (!ImageColors?.getColors) return;
-
-      ImageColors.getColors(source.uri, {
+      getColors(source.uri, {
        fallback: "#fff",
        cache: false,
      })
-        .then((colors: ImageColorsType.ImageColorsResult) => {
+        .then((colors: ImageColorsResult) => {
          let primary = "#fff";
          let text = "#000";
          let backup = "#fff";
--- a/hooks/useIntroSkipper.ts
+++ b/hooks/useIntroSkipper.ts
@@ -7,26 +7,31 @@ import { useHaptic } from "./useHaptic";

 /**
 * Custom hook to handle skipping intros in a media player.
- * MPV player uses milliseconds for time.
 *
- * @param {number} currentTime - The current playback time in milliseconds.
+ * @param {number} currentTime - The current playback time in seconds.
 */
 export const useIntroSkipper = (
  itemId: string,
  currentTime: number,
-  seek: (ms: number) => void,
+  seek: (ticks: number) => void,
  play: () => void,
+  isVlc = false,
  isOffline = false,
  api: Api | null = null,
  downloadedFiles: DownloadedItem[] | undefined = undefined,
 ) => {
  const [showSkipButton, setShowSkipButton] = useState(false);
-  // Convert ms to seconds for comparison with timestamps
-  const currentTimeSeconds = msToSeconds(currentTime);
+  if (isVlc) {
+    currentTime = msToSeconds(currentTime);
+  }
  const lightHapticFeedback = useHaptic("light");

  const wrappedSeek = (seconds: number) => {
-    seek(secondsToMs(seconds));
+    if (isVlc) {
+      seek(secondsToMs(seconds));
+      return;
+    }
+    seek(seconds);
  };

  const { data: segments } = useSegments(
@@ -38,22 +43,49 @@ export const useIntroSkipper = (
  const introTimestamps = segments?.introSegments?.[0];

  useEffect(() => {
+    console.log(`[INTRO_SKIPPER] Hook state:`, {
+      itemId,
+      currentTime,
+      hasSegments: !!segments,
+      segments: segments,
+      introSegmentsCount: segments?.introSegments?.length || 0,
+      introSegments: segments?.introSegments,
+      hasIntroTimestamps: !!introTimestamps,
+      introTimestamps,
+      isVlc,
+      isOffline,
+    });
+
    if (introTimestamps) {
      const shouldShow =
-        currentTimeSeconds > introTimestamps.startTime &&
-        currentTimeSeconds < introTimestamps.endTime;
+        currentTime > introTimestamps.startTime &&
+        currentTime < introTimestamps.endTime;
+
+      console.log(`[INTRO_SKIPPER] Button visibility check:`, {
+        currentTime,
+        introStart: introTimestamps.startTime,
+        introEnd: introTimestamps.endTime,
+        afterStart: currentTime > introTimestamps.startTime,
+        beforeEnd: currentTime < introTimestamps.endTime,
+        shouldShow,
+      });

      setShowSkipButton(shouldShow);
    } else {
      if (showSkipButton) {
+        console.log(`[INTRO_SKIPPER] No intro timestamps, hiding button`);
        setShowSkipButton(false);
      }
    }
-  }, [introTimestamps, currentTimeSeconds, showSkipButton]);
+  }, [introTimestamps, currentTime, showSkipButton]);

  const skipIntro = useCallback(() => {
    if (!introTimestamps) return;
    try {
+      console.log(
+        `[INTRO_SKIPPER] Skipping intro to:`,
+        introTimestamps.endTime,
+      );
      lightHapticFeedback();
      wrappedSeek(introTimestamps.endTime);
      setTimeout(() => {
@@ -64,5 +96,7 @@ export const useIntroSkipper = (
    }
  }, [introTimestamps, lightHapticFeedback, wrappedSeek, play]);

+  console.log(`[INTRO_SKIPPER] Returning state:`, { showSkipButton });
+
  return { showSkipButton, skipIntro };
 };
--- a/hooks/useItemQuery.ts
+++ b/hooks/useItemQuery.ts
@@ -1,54 +1,28 @@
-import { ItemFields } from "@jellyfin/sdk/lib/generated-client/models";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";

-// Helper to exclude specific fields
-export const excludeFields = (fieldsToExclude: ItemFields[]) => {
-  return Object.values(ItemFields).filter(
-    (field) => !fieldsToExclude.includes(field),
-  );
-};
-
-export const useItemQuery = (
-  itemId: string | undefined,
-  isOffline?: boolean,
-  fields?: ItemFields[],
-  excludeFields?: ItemFields[],
-) => {
+export const useItemQuery = (itemId: string, isOffline: boolean) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const { getDownloadedItemById } = useDownload();

-  // Calculate final fields: use excludeFields if provided, otherwise use fields
-  const finalFields = excludeFields
-    ? Object.values(ItemFields).filter(
-        (field) => !excludeFields.includes(field),
-      )
-    : fields;
-
  return useQuery({
-    queryKey: ["item", itemId, finalFields],
+    queryKey: ["item", itemId],
    queryFn: async () => {
-      if (!itemId) throw new Error("Item ID is required");
-
      if (isOffline) {
        return getDownloadedItemById(itemId)?.item;
      }
-
-      if (!api || !user) return null;
-
-      const response = await getItemsApi(api).getItems({
-        ids: [itemId],
-        userId: user.Id,
-        ...(finalFields && { fields: finalFields }),
+      if (!api || !user || !itemId) return null;
+      const res = await getUserLibraryApi(api).getItem({
+        itemId: itemId,
+        userId: user?.Id,
      });
-
-      return response.data.Items?.[0];
+      return res.data;
    },
-    enabled: !!itemId,
+    staleTime: 0,
    refetchOnMount: true,
    refetchOnWindowFocus: true,
    refetchOnReconnect: true,
--- a/hooks/useJellyseerr.ts
+++ b/hooks/useJellyseerr.ts
@@ -244,22 +244,6 @@ export class JellyseerrApi {
      .then(({ data }) => data);
  }

-  async approveRequest(requestId: number): Promise<MediaRequest> {
-    return this.axios
-      ?.post<MediaRequest>(
-        `${Endpoints.API_V1 + Endpoints.REQUEST}/${requestId}/approve`,
-      )
-      .then(({ data }) => data);
-  }
-
-  async declineRequest(requestId: number): Promise<MediaRequest> {
-    return this.axios
-      ?.post<MediaRequest>(
-        `${Endpoints.API_V1 + Endpoints.REQUEST}/${requestId}/decline`,
-      )
-      .then(({ data }) => data);
-  }
-
  async requests(
    params = {
      filter: "all",
@@ -528,7 +512,7 @@ export const useJellyseerr = () => {
  };

  const jellyseerrRegion = useMemo(
-    () => jellyseerrUser?.settings?.region || "US",
+    () => jellyseerrUser?.settings?.discoverRegion || "US",
    [jellyseerrUser],
  );

--- a/hooks/useOrientation.ts
+++ b/hooks/useOrientation.ts
@@ -1,19 +1,12 @@
-import type { OrientationChangeEvent } from "expo-screen-orientation";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Platform } from "react-native";
-import {
-  addOrientationChangeListener,
-  getOrientationAsync,
-  lockAsync,
-  Orientation as OrientationEnum,
-  OrientationLock,
-  unlockAsync,
-} from "@/packages/expo-screen-orientation";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { OrientationLock } from "@/packages/expo-screen-orientation";
 import { Orientation } from "../packages/expo-screen-orientation.tv";

 const orientationToOrientationLock = (
-  orientation: (typeof OrientationEnum)[keyof typeof OrientationEnum],
-): (typeof OrientationLock)[keyof typeof OrientationLock] => {
+  orientation: Orientation,
+): OrientationLock => {
  switch (orientation) {
    case Orientation.LANDSCAPE_LEFT:
      return OrientationLock.LANDSCAPE_LEFT;
@@ -28,53 +21,44 @@ const orientationToOrientationLock = (

 export const useOrientation = () => {
  const [orientation, setOrientation] = useState(
-    Platform.isTV ? OrientationLock.LANDSCAPE : OrientationLock.UNKNOWN,
+    Platform.isTV
+      ? ScreenOrientation.OrientationLock.LANDSCAPE
+      : ScreenOrientation.OrientationLock.UNKNOWN,
  );

  useEffect(() => {
    if (Platform.isTV) return;

-    const orientationSubscription = addOrientationChangeListener(
-      (event: OrientationChangeEvent) => {
+    const orientationSubscription =
+      ScreenOrientation.addOrientationChangeListener((event) => {
        setOrientation(
          orientationToOrientationLock(event.orientationInfo.orientation),
        );
-      },
-    );
+      });

-    getOrientationAsync().then(
-      (orientation: (typeof OrientationEnum)[keyof typeof OrientationEnum]) => {
-        setOrientation(orientationToOrientationLock(orientation));
-      },
-    );
+    ScreenOrientation.getOrientationAsync().then((orientation) => {
+      setOrientation(orientationToOrientationLock(orientation));
+    });

    return () => {
      orientationSubscription.remove();
    };
  }, []);

-  const lockOrientation = useCallback(
-    async (lock: (typeof OrientationLock)[keyof typeof OrientationLock]) => {
-      if (Platform.isTV) return;
-
-      if (lock === OrientationLock.DEFAULT) {
-        await unlockAsync();
-      } else {
-        await lockAsync(lock);
-      }
-    },
-    [],
-  );
-
-  const unlockOrientation = useCallback(async () => {
+  const lockOrientation = async (lock: OrientationLock) => {
    if (Platform.isTV) return;
-    await unlockAsync();
-  }, []);

-  return {
-    orientation,
-    setOrientation,
-    lockOrientation,
-    unlockOrientation,
+    if (lock === ScreenOrientation.OrientationLock.DEFAULT) {
+      await ScreenOrientation.unlockAsync();
+    } else {
+      await ScreenOrientation.lockAsync(lock);
+    }
  };
+
+  const unlockOrientation = async () => {
+    if (Platform.isTV) return;
+    await ScreenOrientation.unlockAsync();
+  };
+
+  return { orientation, setOrientation, lockOrientation, unlockOrientation };
 };
--- a/hooks/useWebsockets.ts
+++ b/hooks/useWebsockets.ts
@@ -96,6 +96,8 @@ export const useWebSocket = ({
      | Record<string, string>
      | undefined; // Arguments are Dictionary<string, string>

+    console.log("[WS] ~ ", lastMessage);
+
    if (command === "PlayPause") {
      console.log("Command ~ PlayPause");
      togglePlay();
--- a/metro.config.js
+++ b/metro.config.js
@@ -1,5 +1,6 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require("expo/metro-config");
+const { withNativewind } = require("nativewind/metro");

 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
@@ -25,4 +26,4 @@ if (process.env?.EXPO_TV === "1") {

 // config.resolver.unstable_enablePackageExports = false;

-module.exports = config;
+module.exports = withNativewind(config);
--- a/modules/VlcPlayer.types.ts
+++ b/modules/VlcPlayer.types.ts
@@ -0,0 +1,100 @@
+import { ViewStyle } from "react-native";
+
+export type PlaybackStatePayload = {
+  nativeEvent: {
+    target: number;
+    state: "Opening" | "Buffering" | "Playing" | "Paused" | "Error";
+    currentTime: number;
+    duration: number;
+    isBuffering: boolean;
+    isPlaying: boolean;
+  };
+};
+
+export type ProgressUpdatePayload = {
+  nativeEvent: {
+    currentTime: number;
+    duration: number;
+    isPlaying: boolean;
+    isBuffering: boolean;
+  };
+};
+
+export type VideoLoadStartPayload = {
+  nativeEvent: {
+    target: number;
+  };
+};
+
+export type PipStartedPayload = {
+  nativeEvent: {
+    pipStarted: boolean;
+  };
+};
+
+export type VideoStateChangePayload = PlaybackStatePayload;
+
+export type VideoProgressPayload = ProgressUpdatePayload;
+
+export type VlcPlayerSource = {
+  uri: string;
+  type?: string;
+  isNetwork?: boolean;
+  autoplay?: boolean;
+  startPosition?: number;
+  externalSubtitles?: { name: string; DeliveryUrl: string }[];
+  initOptions?: any[];
+  mediaOptions?: { [key: string]: any };
+};
+
+export type TrackInfo = {
+  name: string;
+  index: number;
+  language?: string;
+};
+
+export type ChapterInfo = {
+  name: string;
+  timeOffset: number;
+  duration: number;
+};
+
+export type VlcPlayerViewProps = {
+  source: VlcPlayerSource;
+  style?: ViewStyle | ViewStyle[];
+  progressUpdateInterval?: number;
+  paused?: boolean;
+  muted?: boolean;
+  volume?: number;
+  videoAspectRatio?: string;
+  onVideoProgress?: (event: ProgressUpdatePayload) => void;
+  onVideoStateChange?: (event: PlaybackStatePayload) => void;
+  onVideoLoadStart?: (event: VideoLoadStartPayload) => void;
+  onVideoLoadEnd?: (event: VideoLoadStartPayload) => void;
+  onVideoError?: (event: PlaybackStatePayload) => void;
+  onPipStarted?: (event: PipStartedPayload) => void;
+};
+
+export interface VlcPlayerViewRef {
+  startPictureInPicture: () => Promise<void>;
+  play: () => Promise<void>;
+  pause: () => Promise<void>;
+  stop: () => Promise<void>;
+  seekTo: (time: number) => Promise<void>;
+  setAudioTrack: (trackIndex: number) => Promise<void>;
+  getAudioTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleTrack: (trackIndex: number) => Promise<void>;
+  getSubtitleTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleDelay: (delay: number) => Promise<void>;
+  setAudioDelay: (delay: number) => Promise<void>;
+  takeSnapshot: (path: string, width: number, height: number) => Promise<void>;
+  setRate: (rate: number) => Promise<void>;
+  nextChapter: () => Promise<void>;
+  previousChapter: () => Promise<void>;
+  getChapters: () => Promise<ChapterInfo[] | null>;
+  setVideoCropGeometry: (cropGeometry: string | null) => Promise<void>;
+  getVideoCropGeometry: () => Promise<string | null>;
+  setSubtitleURL: (url: string) => Promise<void>;
+  setVideoAspectRatio: (aspectRatio: string | null) => Promise<void>;
+  setVideoScaleFactor: (scaleFactor: number) => Promise<void>;
+}
--- a/modules/VlcPlayerView.tsx
+++ b/modules/VlcPlayerView.tsx
@@ -0,0 +1,145 @@
+import { requireNativeViewManager } from "expo-modules-core";
+import * as React from "react";
+import { ViewStyle } from "react-native";
+import type {
+  VlcPlayerSource,
+  VlcPlayerViewProps,
+  VlcPlayerViewRef,
+} from "./VlcPlayer.types";
+
+interface NativeViewRef extends VlcPlayerViewRef {
+  setNativeProps?: (props: Partial<VlcPlayerViewProps>) => void;
+}
+
+const VLCViewManager = requireNativeViewManager("VlcPlayer");
+
+// Create a forwarded ref version of the native view
+const NativeView = React.forwardRef<NativeViewRef, VlcPlayerViewProps>(
+  (props, ref) => {
+    return <VLCViewManager {...props} ref={ref} />;
+  },
+);
+
+const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
+  (props, ref) => {
+    const nativeRef = React.useRef<NativeViewRef>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      startPictureInPicture: async () => {
+        await nativeRef.current?.startPictureInPicture();
+      },
+      play: async () => {
+        await nativeRef.current?.play();
+      },
+      pause: async () => {
+        await nativeRef.current?.pause();
+      },
+      stop: async () => {
+        await nativeRef.current?.stop();
+      },
+      seekTo: async (time: number) => {
+        await nativeRef.current?.seekTo(time);
+      },
+      setAudioTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setAudioTrack(trackIndex);
+      },
+      getAudioTracks: async () => {
+        const tracks = await nativeRef.current?.getAudioTracks();
+        return tracks ?? null;
+      },
+      setSubtitleTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setSubtitleTrack(trackIndex);
+      },
+      getSubtitleTracks: async () => {
+        const tracks = await nativeRef.current?.getSubtitleTracks();
+        return tracks ?? null;
+      },
+      setSubtitleDelay: async (delay: number) => {
+        await nativeRef.current?.setSubtitleDelay(delay);
+      },
+      setAudioDelay: async (delay: number) => {
+        await nativeRef.current?.setAudioDelay(delay);
+      },
+      takeSnapshot: async (path: string, width: number, height: number) => {
+        await nativeRef.current?.takeSnapshot(path, width, height);
+      },
+      setRate: async (rate: number) => {
+        await nativeRef.current?.setRate(rate);
+      },
+      nextChapter: async () => {
+        await nativeRef.current?.nextChapter();
+      },
+      previousChapter: async () => {
+        await nativeRef.current?.previousChapter();
+      },
+      getChapters: async () => {
+        const chapters = await nativeRef.current?.getChapters();
+        return chapters ?? null;
+      },
+      setVideoCropGeometry: async (geometry: string | null) => {
+        await nativeRef.current?.setVideoCropGeometry(geometry);
+      },
+      getVideoCropGeometry: async () => {
+        const geometry = await nativeRef.current?.getVideoCropGeometry();
+        return geometry ?? null;
+      },
+      setSubtitleURL: async (url: string) => {
+        await nativeRef.current?.setSubtitleURL(url);
+      },
+      setVideoAspectRatio: async (aspectRatio: string | null) => {
+        await nativeRef.current?.setVideoAspectRatio(aspectRatio);
+      },
+      setVideoScaleFactor: async (scaleFactor: number) => {
+        await nativeRef.current?.setVideoScaleFactor(scaleFactor);
+      },
+    }));
+
+    const {
+      source,
+      style,
+      progressUpdateInterval = 500,
+      paused,
+      muted,
+      volume,
+      videoAspectRatio,
+      onVideoLoadStart,
+      onVideoStateChange,
+      onVideoProgress,
+      onVideoLoadEnd,
+      onVideoError,
+      onPipStarted,
+      ...otherProps
+    } = props;
+
+    const processedSource: VlcPlayerSource =
+      typeof source === "string"
+        ? ({ uri: source } as unknown as VlcPlayerSource)
+        : source;
+
+    if (processedSource.startPosition !== undefined) {
+      processedSource.startPosition = Math.floor(processedSource.startPosition);
+    }
+
+    return (
+      <NativeView
+        {...otherProps}
+        ref={nativeRef}
+        source={processedSource}
+        style={[{ width: "100%", height: "100%" }, style as ViewStyle]}
+        progressUpdateInterval={progressUpdateInterval}
+        paused={paused}
+        muted={muted}
+        volume={volume}
+        videoAspectRatio={videoAspectRatio}
+        onVideoLoadStart={onVideoLoadStart}
+        onVideoLoadEnd={onVideoLoadEnd}
+        onVideoStateChange={onVideoStateChange}
+        onVideoProgress={onVideoProgress}
+        onVideoError={onVideoError}
+        onPipStarted={onPipStarted}
+      />
+    );
+  },
+);
+
+export default VlcPlayerView;
--- a/modules/background-downloader/android/build.gradle
+++ b/modules/background-downloader/android/build.gradle
@@ -35,7 +35,7 @@ android {

 dependencies {
  implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion"
-  implementation "com.squareup.okhttp3:okhttp:5.3.0"
+  implementation "com.squareup.okhttp3:okhttp:4.12.0"
 }

 tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).configureEach {
--- a/modules/index.ts
+++ b/modules/index.ts
@@ -1,4 +1,17 @@
-// Background Downloader
+import type {
+  ChapterInfo,
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  TrackInfo,
+  VideoLoadStartPayload,
+  VideoProgressPayload,
+  VideoStateChangePayload,
+  VlcPlayerSource,
+  VlcPlayerViewProps,
+  VlcPlayerViewRef,
+} from "./VlcPlayer.types";
+import VlcPlayerView from "./VlcPlayerView";
+
 export type {
  ActiveDownload,
  DownloadCompleteEvent,
@@ -6,21 +19,23 @@ export type {
  DownloadProgressEvent,
  DownloadStartedEvent,
 } from "./background-downloader";
+// Background Downloader
 export { default as BackgroundDownloader } from "./background-downloader";
-// Type aliases for backward compatibility during migration
-// These map old VLC type names to new MPV equivalents
+
+// Component
+export { VlcPlayerView };
+
+// Component Types
+export type { VlcPlayerViewProps, VlcPlayerViewRef };
+
+// Media Types
+export type { ChapterInfo, TrackInfo, VlcPlayerSource };
+
+// Playback Events (alphabetically sorted)
 export type {
-  AudioTrack,
-  MpvPlayerViewProps,
-  MpvPlayerViewRef,
-  OnErrorEventPayload,
-  OnLoadEventPayload,
-  OnPlaybackStateChangePayload,
-  OnProgressEventPayload,
-  OnTracksReadyEventPayload,
-  SubtitleTrack,
-  SubtitleTrack as TrackInfo,
-  VideoSource,
-} from "./mpv-player";
-// MPV Player - Main exports
-export { MpvPlayerView } from "./mpv-player";
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VideoLoadStartPayload,
+  VideoProgressPayload,
+  VideoStateChangePayload,
+};
--- a/modules/mpv-player/android/build.gradle
+++ b/modules/mpv-player/android/build.gradle
@@ -1,43 +0,0 @@
-apply plugin: 'com.android.library'
-
-group = 'expo.modules.mpvplayer'
-version = '0.7.6'
-
-def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
-apply from: expoModulesCorePlugin
-applyKotlinExpoModulesCorePlugin()
-useCoreDependencies()
-useExpoPublishing()
-
-// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
-// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
-// Most of the time, you may like to manage the Android SDK versions yourself.
-def useManagedAndroidSdkVersions = false
-if (useManagedAndroidSdkVersions) {
-  useDefaultAndroidSdkVersions()
-} else {
-  buildscript {
-    // Simple helper that allows the root project to override versions declared by this library.
-    ext.safeExtGet = { prop, fallback ->
-      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
-    }
-  }
-  project.android {
-    compileSdkVersion safeExtGet("compileSdkVersion", 36)
-    defaultConfig {
-      minSdkVersion safeExtGet("minSdkVersion", 24)
-      targetSdkVersion safeExtGet("targetSdkVersion", 36)
-    }
-  }
-}
-
-android {
-  namespace "expo.modules.mpvplayer"
-  defaultConfig {
-    versionCode 1
-    versionName "0.7.6"
-  }
-  lintOptions {
-    abortOnError false
-  }
-}
--- a/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerModule.kt
+++ b/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerModule.kt
@@ -1,50 +0,0 @@
-package expo.modules.mpvplayer
-
-import expo.modules.kotlin.modules.Module
-import expo.modules.kotlin.modules.ModuleDefinition
-import java.net.URL
-
-class MpvPlayerModule : Module() {
-  // Each module class must implement the definition function. The definition consists of components
-  // that describes the module's functionality and behavior.
-  // See https://docs.expo.dev/modules/module-api for more details about available components.
-  override fun definition() = ModuleDefinition {
-    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
-    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
-    // The module will be accessible from `requireNativeModule('MpvPlayer')` in JavaScript.
-    Name("MpvPlayer")
-
-    // Defines constant property on the module.
-    Constant("PI") {
-      Math.PI
-    }
-
-    // Defines event names that the module can send to JavaScript.
-    Events("onChange")
-
-    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
-    Function("hello") {
-      "Hello world! 👋"
-    }
-
-    // Defines a JavaScript function that always returns a Promise and whose native code
-    // is by default dispatched on the different thread than the JavaScript runtime runs on.
-    AsyncFunction("setValueAsync") { value: String ->
-      // Send an event to JavaScript.
-      sendEvent("onChange", mapOf(
-        "value" to value
-      ))
-    }
-
-    // Enables the module to be used as a native view. Definition components that are accepted as part of
-    // the view definition: Prop, Events.
-    View(MpvPlayerView::class) {
-      // Defines a setter for the `url` prop.
-      Prop("url") { view: MpvPlayerView, url: URL ->
-        view.webView.loadUrl(url.toString())
-      }
-      // Defines an event that the view can send to JavaScript.
-      Events("onLoad")
-    }
-  }
-}
--- a/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerView.kt
+++ b/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MpvPlayerView.kt
@@ -1,30 +0,0 @@
-package expo.modules.mpvplayer
-
-import android.content.Context
-import android.webkit.WebView
-import android.webkit.WebViewClient
-import expo.modules.kotlin.AppContext
-import expo.modules.kotlin.viewevent.EventDispatcher
-import expo.modules.kotlin.views.ExpoView
-
-class MpvPlayerView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
-  // Creates and initializes an event dispatcher for the `onLoad` event.
-  // The name of the event is inferred from the value and needs to match the event name defined in the module.
-  private val onLoad by EventDispatcher()
-
-  // Defines a WebView that will be used as the root subview.
-  internal val webView = WebView(context).apply {
-    layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
-    webViewClient = object : WebViewClient() {
-      override fun onPageFinished(view: WebView, url: String) {
-        // Sends an event to JavaScript. Triggers a callback defined on the view component in JavaScript.
-        onLoad(mapOf("url" to url))
-      }
-    }
-  }
-
-  init {
-    // Adds the WebView to the view hierarchy.
-    addView(webView)
-  }
-}
--- a/modules/mpv-player/expo-module.config.json
+++ b/modules/mpv-player/expo-module.config.json
@@ -1,6 +0,0 @@
-{
-  "platforms": ["apple"],
-  "apple": {
-    "modules": ["MpvPlayerModule"]
-  }
-}
--- a/modules/mpv-player/index.ts
+++ b/modules/mpv-player/index.ts
@@ -1,2 +0,0 @@
-export * from "./src/MpvPlayer.types";
-export { default as MpvPlayerView } from "./src/MpvPlayerView";
--- a/modules/mpv-player/ios/IOSurfaceBufferPool.swift
+++ b/modules/mpv-player/ios/IOSurfaceBufferPool.swift
@@ -1,245 +0,0 @@
-import Foundation
-import CoreVideo
-import Metal
-import CoreMedia
-import AVFoundation
-
-/// Manages a pool of IOSurface-backed CVPixelBuffers that can be shared between Metal and AVFoundation
-/// This enables zero-copy rendering where mpv renders to Metal textures that are directly usable by AVSampleBufferDisplayLayer
-final class IOSurfaceBufferPool {
-    
-    struct PooledBuffer {
-        let pixelBuffer: CVPixelBuffer
-        let texture: MTLTexture
-        let ioSurface: IOSurfaceRef
-    }
-    
-    private let device: MTLDevice
-    private var pool: CVPixelBufferPool?
-    private var buffers: [PooledBuffer] = []
-    private var availableBuffers: [PooledBuffer] = []
-    private let lock = NSLock()
-    
-    private(set) var width: Int = 0
-    private(set) var height: Int = 0
-    private(set) var pixelFormat: OSType = kCVPixelFormatType_32BGRA
-    
-    private let maxBufferCount: Int
-    
-    init(device: MTLDevice, maxBufferCount: Int = 3) {
-        self.device = device
-        self.maxBufferCount = maxBufferCount
-    }
-    
-    deinit {
-        invalidate()
-    }
-    
-    /// Configure the pool for a specific video size and format
-    func configure(width: Int, height: Int, pixelFormat: OSType = kCVPixelFormatType_32BGRA) -> Bool {
-        lock.lock()
-        defer { lock.unlock() }
-        
-        guard width > 0, height > 0 else { return false }
-        
-        // Skip if already configured for this size
-        if self.width == width && self.height == height && self.pixelFormat == pixelFormat && pool != nil {
-            return true
-        }
-        
-        // Clear existing buffers
-        buffers.removeAll()
-        availableBuffers.removeAll()
-        pool = nil
-        
-        self.width = width
-        self.height = height
-        self.pixelFormat = pixelFormat
-        
-        // Create pixel buffer pool with IOSurface and Metal compatibility
-        let pixelBufferAttributes: [CFString: Any] = [
-            kCVPixelBufferPixelFormatTypeKey: pixelFormat,
-            kCVPixelBufferWidthKey: width,
-            kCVPixelBufferHeightKey: height,
-            kCVPixelBufferIOSurfacePropertiesKey: [:] as CFDictionary,
-            kCVPixelBufferMetalCompatibilityKey: true,
-            kCVPixelBufferCGImageCompatibilityKey: true,
-            kCVPixelBufferCGBitmapContextCompatibilityKey: true
-        ]
-        
-        let poolAttributes: [CFString: Any] = [
-            kCVPixelBufferPoolMinimumBufferCountKey: maxBufferCount
-        ]
-        
-        var newPool: CVPixelBufferPool?
-        let status = CVPixelBufferPoolCreate(
-            kCFAllocatorDefault,
-            poolAttributes as CFDictionary,
-            pixelBufferAttributes as CFDictionary,
-            &newPool
-        )
-        
-        guard status == kCVReturnSuccess, let createdPool = newPool else {
-            Logger.shared.log("Failed to create IOSurface buffer pool: \(status)", type: "Error")
-            return false
-        }
-        
-        pool = createdPool
-        
-        // Pre-allocate buffers
-        for _ in 0..<maxBufferCount {
-            if let buffer = createPooledBuffer() {
-                buffers.append(buffer)
-                availableBuffers.append(buffer)
-            }
-        }
-        
-        return true
-    }
-    
-    /// Get an available buffer for rendering
-    func dequeueBuffer() -> PooledBuffer? {
-        lock.lock()
-        defer { lock.unlock() }
-        
-        if let buffer = availableBuffers.popLast() {
-            return buffer
-        }
-        
-        // Try to create a new buffer if under limit
-        if buffers.count < maxBufferCount, let buffer = createPooledBuffer() {
-            buffers.append(buffer)
-            return buffer
-        }
-        
-        // All buffers in use - create temporary one
-        return createPooledBuffer()
-    }
-    
-    /// Return a buffer to the pool after use
-    func enqueueBuffer(_ buffer: PooledBuffer) {
-        lock.lock()
-        defer { lock.unlock() }
-        
-        if buffers.contains(where: { $0.pixelBuffer == buffer.pixelBuffer }) {
-            availableBuffers.append(buffer)
-        }
-    }
-    
-    /// Clear all buffers and reset the pool
-    func invalidate() {
-        lock.lock()
-        defer { lock.unlock() }
-        
-        buffers.removeAll()
-        availableBuffers.removeAll()
-        pool = nil
-        width = 0
-        height = 0
-    }
-    
-    private func createPooledBuffer() -> PooledBuffer? {
-        guard let pool = pool else { return nil }
-        
-        var pixelBuffer: CVPixelBuffer?
-        let status = CVPixelBufferPoolCreatePixelBuffer(kCFAllocatorDefault, pool, &pixelBuffer)
-        
-        guard status == kCVReturnSuccess, let buffer = pixelBuffer else {
-            Logger.shared.log("Failed to create pixel buffer from pool: \(status)", type: "Error")
-            return nil
-        }
-        
-        // Get IOSurface from pixel buffer
-        guard let ioSurface = CVPixelBufferGetIOSurface(buffer)?.takeUnretainedValue() else {
-            Logger.shared.log("Failed to get IOSurface from pixel buffer", type: "Error")
-            return nil
-        }
-        
-        // Create Metal texture from IOSurface
-        let textureDescriptor = MTLTextureDescriptor.texture2DDescriptor(
-            pixelFormat: metalPixelFormat(for: pixelFormat),
-            width: width,
-            height: height,
-            mipmapped: false
-        )
-        textureDescriptor.usage = [.renderTarget, .shaderRead, .shaderWrite]
-        textureDescriptor.storageMode = .shared
-        
-        guard let texture = device.makeTexture(descriptor: textureDescriptor, iosurface: ioSurface, plane: 0) else {
-            Logger.shared.log("Failed to create Metal texture from IOSurface", type: "Error")
-            return nil
-        }
-        
-        return PooledBuffer(pixelBuffer: buffer, texture: texture, ioSurface: ioSurface)
-    }
-    
-    private func metalPixelFormat(for cvFormat: OSType) -> MTLPixelFormat {
-        switch cvFormat {
-        case kCVPixelFormatType_32BGRA:
-            return .bgra8Unorm
-        case kCVPixelFormatType_32RGBA:
-            return .rgba8Unorm
-        case kCVPixelFormatType_64RGBAHalf:
-            return .rgba16Float
-        default:
-            return .bgra8Unorm
-        }
-    }
-}
-
-// MARK: - CMSampleBuffer Creation
-
-extension IOSurfaceBufferPool {
-    
-    /// Create a CMSampleBuffer from a pooled buffer for AVSampleBufferDisplayLayer
-    static func createSampleBuffer(
-        from pixelBuffer: CVPixelBuffer,
-        formatDescription: CMVideoFormatDescription,
-        presentationTime: CMTime
-    ) -> CMSampleBuffer? {
-        var timing = CMSampleTimingInfo(
-            duration: .invalid,
-            presentationTimeStamp: presentationTime,
-            decodeTimeStamp: .invalid
-        )
-        
-        var sampleBuffer: CMSampleBuffer?
-        let status = CMSampleBufferCreateForImageBuffer(
-            allocator: kCFAllocatorDefault,
-            imageBuffer: pixelBuffer,
-            dataReady: true,
-            makeDataReadyCallback: nil,
-            refcon: nil,
-            formatDescription: formatDescription,
-            sampleTiming: &timing,
-            sampleBufferOut: &sampleBuffer
-        )
-        
-        guard status == noErr else {
-            Logger.shared.log("Failed to create sample buffer: \(status)", type: "Error")
-            return nil
-        }
-        
-        return sampleBuffer
-    }
-    
-    /// Create a format description for the current pool configuration
-    func createFormatDescription() -> CMVideoFormatDescription? {
-        guard let buffer = dequeueBuffer() else { return nil }
-        defer { enqueueBuffer(buffer) }
-        
-        var formatDescription: CMVideoFormatDescription?
-        let status = CMVideoFormatDescriptionCreateForImageBuffer(
-            allocator: kCFAllocatorDefault,
-            imageBuffer: buffer.pixelBuffer,
-            formatDescriptionOut: &formatDescription
-        )
-        
-        guard status == noErr else {
-            Logger.shared.log("Failed to create format description: \(status)", type: "Error")
-            return nil
-        }
-        
-        return formatDescription
-    }
-}
--- a/modules/mpv-player/ios/Logger.swift
+++ b/modules/mpv-player/ios/Logger.swift
@@ -1,162 +0,0 @@
-import Foundation
-
-final class Logger {
-    static let shared = Logger()
-    
-    struct LogEntry {
-        let message: String
-        let type: String
-        let timestamp: Date
-    }
-    
-    private let queue = DispatchQueue(label: "mpvkit.logger", attributes: .concurrent)
-    private var logs: [LogEntry] = []
-    private let logFileURL: URL
-    private let dateFormatter: DateFormatter
-    
-    private let maxFileSize = 1024 * 512
-    private let maxLogEntries = 1000
-    
-    private init() {
-        let tmpDir = URL(fileURLWithPath: NSTemporaryDirectory(), isDirectory: true)
-        logFileURL = tmpDir.appendingPathComponent("logs.txt")
-        
-        dateFormatter = DateFormatter()
-        dateFormatter.dateFormat = "dd-MM HH:mm:ss"
-    }
-    
-    func log(_ message: String, type: String = "General") {
-        let entry = LogEntry(message: message, type: type, timestamp: Date())
-        
-        queue.async(flags: .barrier) { [weak self] in
-            guard let self else { return }
-            
-            self.logs.append(entry)
-            
-            if self.logs.count > self.maxLogEntries {
-                self.logs.removeFirst(self.logs.count - self.maxLogEntries)
-            }
-            
-            self.saveLogToFile(entry)
-            
-            #if DEBUG
-            self.debugLog(entry)
-            #endif
-            
-            DispatchQueue.main.async {
-                NotificationCenter.default.post(
-                    name: NSNotification.Name("LoggerNotification"),
-                    object: nil,
-                    userInfo: [
-                        "message": message,
-                        "type": type,
-                        "timestamp": entry.timestamp
-                    ]
-                )
-            }
-        }
-    }
-    
-    func getLogs() -> String {
-        var result = ""
-        queue.sync {
-            result = logs.map { "[\(dateFormatter.string(from: $0.timestamp))] [\($0.type)] \($0.message)" }
-                .joined(separator: "\n----\n")
-        }
-        return result
-    }
-    
-    func getLogsAsync() async -> String {
-        return await withCheckedContinuation { continuation in
-            queue.async { [weak self] in
-                guard let self else {
-                    continuation.resume(returning: "")
-                    return
-                }
-                let result = self.logs.map { "[\(self.dateFormatter.string(from: $0.timestamp))] [\($0.type)] \($0.message)" }
-                    .joined(separator: "\n----\n")
-                continuation.resume(returning: result)
-            }
-        }
-    }
-    
-    func clearLogs() {
-        queue.async(flags: .barrier) { [weak self] in
-            guard let self else { return }
-            self.logs.removeAll()
-            try? FileManager.default.removeItem(at: self.logFileURL)
-        }
-    }
-    
-    func clearLogsAsync() async {
-        await withCheckedContinuation { continuation in
-            queue.async(flags: .barrier) { [weak self] in
-                guard let self else {
-                    continuation.resume()
-                    return
-                }
-                self.logs.removeAll()
-                try? FileManager.default.removeItem(at: self.logFileURL)
-                continuation.resume()
-            }
-        }
-    }
-    
-    private func saveLogToFile(_ log: LogEntry) {
-        let logString = "[\(dateFormatter.string(from: log.timestamp))] [\(log.type)] \(log.message)\n---\n"
-        
-        guard let data = logString.data(using: .utf8) else {
-            return
-        }
-        
-        do {
-            if FileManager.default.fileExists(atPath: logFileURL.path) {
-                let attributes = try FileManager.default.attributesOfItem(atPath: logFileURL.path)
-                let fileSize = attributes[.size] as? UInt64 ?? 0
-                
-                if fileSize + UInt64(data.count) > maxFileSize {
-                    self.truncateLogFile()
-                }
-                
-                if let handle = try? FileHandle(forWritingTo: logFileURL) {
-                    handle.seekToEndOfFile()
-                    handle.write(data)
-                    handle.closeFile()
-                }
-            } else {
-                try data.write(to: logFileURL)
-            }
-        } catch {
-            try? data.write(to: logFileURL)
-        }
-    }
-    
-    private func truncateLogFile() {
-        do {
-            guard let content = try? String(contentsOf: logFileURL, encoding: .utf8),
-                  !content.isEmpty else {
-                return
-            }
-            
-            let entries = content.components(separatedBy: "\n---\n")
-            guard entries.count > 10 else { return }
-            
-            let keepCount = entries.count / 2
-            let truncatedEntries = Array(entries.suffix(keepCount))
-            let truncatedContent = truncatedEntries.joined(separator: "\n---\n")
-            
-            if let truncatedData = truncatedContent.data(using: .utf8) {
-                try truncatedData.write(to: logFileURL)
-            }
-        } catch {
-            try? FileManager.default.removeItem(at: logFileURL)
-        }
-    }
-    
-    #if DEBUG
-    private func debugLog(_ entry: LogEntry) {
-        let formattedMessage = "[\(dateFormatter.string(from: entry.timestamp))] [\(entry.type)] \(entry.message)"
-        NSLog("%@", formattedMessage)
-    }
-    #endif
-}
--- a/modules/mpv-player/ios/MPVMetalRenderer.swift
+++ b/modules/mpv-player/ios/MPVMetalRenderer.swift
--- a/modules/mpv-player/ios/MpvPlayer.podspec
+++ b/modules/mpv-player/ios/MpvPlayer.podspec
@@ -1,28 +0,0 @@
-Pod::Spec.new do |s|
-  s.name           = 'MpvPlayer'
-  s.version        = '1.0.0'
-  s.summary        = 'MPVKit for Expo'
-  s.description    = 'MPVKit for Expo'
-  s.author         = 'mpvkit'
-  s.homepage       = 'https://github.com/mpvkit/MPVKit'
-  s.platforms      = {
-    :ios => '15.1',
-    :tvos => '15.1'
-  }
-  s.source         = { git: 'https://github.com/mpvkit/MPVKit.git' }
-  s.static_framework = true
-
-  s.dependency 'ExpoModulesCore'
-  s.dependency 'MPVKit', '~> 0.40.0'
-
-  # Swift/Objective-C compatibility
-  s.pod_target_xcconfig = {
-    'DEFINES_MODULE' => 'YES',
-    # Strip debug symbols to avoid DWARF errors from MPVKit
-    'DEBUG_INFORMATION_FORMAT' => 'dwarf',
-    'STRIP_INSTALLED_PRODUCT' => 'YES',
-    'DEPLOYMENT_POSTPROCESSING' => 'YES',
-  }
-
-  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
-end
--- a/Show More
+++ b/Show More