feat(video-player): Update in player controls to new UI

fix(downloads): repair bottom sheets on iOS and restore downloads delete sheet
Bump @gorhom/bottom-sheet 5.2.8 -> 5.2.14, which fixes BottomSheetModal present() silently no-opping under Reanimated 4 / New Architecture (SDK 56). Affected every sheet app-wide: present() was called with a valid ref but nothing rendered (not even the backdrop). Verified on the iOS simulator that the download options sheet now opens. Also restore the downloads-page delete sheet (delete movies/series/other/all) that was accidentally dropped in the Expo 54 rewrite (#1174), which left an orphaned trigger button and underscore-silenced handlers.
2026-05-31 19:18:26 +01:00 · 2026-05-31 23:53:12 +10:00 · 2026-05-31 14:58:51 +02:00 · 2026-05-31 22:12:13 +10:00 · 2026-05-31 13:23:02 +02:00 · 2026-05-31 12:40:56 +02:00
24 changed files with 1538 additions and 283 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -0,0 +1,132 @@
+name: 🚀 Release (EAS Build + Submit)
+
+# Cloud EAS build + auto-submit for iOS, tvOS and Android on merge to main.
+# A manual approval gate (the `production` GitHub Environment) pauses the run
+# before any build/submit starts. Configure required reviewers on that
+# environment in repo Settings → Environments → production.
+
+concurrency:
+  group: release-${{ github.ref }}
+  cancel-in-progress: false
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  approve:
+    name: 🔐 Approve release
+    runs-on: ubuntu-24.04
+    environment: production
+    steps:
+      - name: ✅ Release approved
+        run: echo "Release approved for ${{ github.sha }}"
+
+  release:
+    name: 🚀 ${{ matrix.name }}
+    needs: approve
+    runs-on: ubuntu-24.04
+    permissions:
+      contents: read
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: 🍎 iOS
+            platform: ios
+            profile: production
+          - name: 📺 tvOS
+            platform: ios
+            profile: production_tv
+          - name: 🤖 Android
+            platform: android
+            profile: production
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
+          submodules: recursive
+          show-progress: false
+
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
+        with:
+          bun-version: latest
+
+      - name: 💾 Cache Bun dependencies
+        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-cache
+
+      - name: 📦 Install dependencies and reload submodules
+        run: |
+          bun install --frozen-lockfile
+          bun run submodule-reload
+
+      - name: 🏗️ Setup EAS
+        uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+          eas-cache: true
+
+      # tvOS uses local credentials (EAS can't manage tvOS provisioning
+      # remotely, including the TopShelf extension target). Restore the
+      # gitignored credentials.json + cert + profiles from secrets so the
+      # cloud build can sign with `credentialsSource: local`.
+      - name: 🔐 Restore tvOS signing credentials
+        if: matrix.profile == 'production_tv'
+        env:
+          EAS_CREDENTIALS_JSON: ${{ secrets.EAS_CREDENTIALS_JSON }}
+          TVOS_DIST_CERT_P12_BASE64: ${{ secrets.TVOS_DIST_CERT_P12_BASE64 }}
+          TVOS_APP_PROFILE_BASE64: ${{ secrets.TVOS_APP_PROFILE_BASE64 }}
+          TVOS_TOPSHELF_PROFILE_BASE64: ${{ secrets.TVOS_TOPSHELF_PROFILE_BASE64 }}
+        run: |
+          mkdir -p certs profiles
+          printf '%s' "$EAS_CREDENTIALS_JSON" > credentials.json
+          echo "$TVOS_DIST_CERT_P12_BASE64" | base64 -d > certs/distribution.p12
+          echo "$TVOS_APP_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_tvOS_App_Store.mobileprovision
+          echo "$TVOS_TOPSHELF_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_TopShelf_tvOS_App_Store.mobileprovision
+
+      # iOS + tvOS submit upload to App Store Connect with an ASC API key.
+      # EAS reads it from EXPO_ASC_API_KEY_PATH / EXPO_ASC_KEY_ID /
+      # EXPO_ASC_ISSUER_ID (set on the build step below). Write the .p8,
+      # tolerating either raw-PEM or base64-encoded secret content.
+      - name: 🔐 Restore App Store Connect API key
+        if: matrix.platform == 'ios'
+        env:
+          APPLE_KEY_CONTENT: ${{ secrets.APPLE_KEY_CONTENT }}
+        run: |
+          if printf '%s' "$APPLE_KEY_CONTENT" | grep -q "BEGIN PRIVATE KEY"; then
+            printf '%s' "$APPLE_KEY_CONTENT" > "$RUNNER_TEMP/asc_api_key.p8"
+          else
+            printf '%s' "$APPLE_KEY_CONTENT" | base64 -d > "$RUNNER_TEMP/asc_api_key.p8"
+          fi
+
+      # Android submit needs a Google Play service account JSON. eas.json's
+      # submit.production.android.serviceAccountKeyPath points at this file.
+      - name: 🔐 Restore Google Play service account
+        if: matrix.platform == 'android'
+        env:
+          GOOGLE_SERVICE_ACCOUNT_KEY: ${{ secrets.GOOGLE_SERVICE_ACCOUNT_KEY }}
+        run: printf '%s' "$GOOGLE_SERVICE_ACCOUNT_KEY" > google-service-account.json
+
+      - name: 🚀 Build & submit (${{ matrix.name }})
+        env:
+          EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
+          # Consumed by eas submit for iOS/tvOS; ignored for Android.
+          EXPO_ASC_API_KEY_PATH: ${{ runner.temp }}/asc_api_key.p8
+          EXPO_ASC_KEY_ID: ${{ secrets.APPLE_KEY_ID }}
+          EXPO_ASC_ISSUER_ID: ${{ secrets.APPLE_KEY_ISSUER_ID }}
+        run: |
+          eas build \
+            --platform ${{ matrix.platform }} \
+            --profile ${{ matrix.profile }} \
+            --auto-submit \
+            --non-interactive
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,9 @@ web-build/
 /androidmobile
 /androidtv

+# Gradle caches (top-level + per-module native projects)
+**/.gradle/
+
 # Module-specific Builds
 modules/mpv-player/android/build
 modules/player/android
@@ -76,3 +79,6 @@ build/
 .claude/
 .agents/skills/**
 skills-lock.json
+
+# CI-injected Google Play service account key (written at build time)
+google-service-account.json
--- a/app.json
+++ b/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "name": "Streamyfin",
    "slug": "streamyfin",
-    "version": "0.54.0",
+    "version": "0.54.1",
    "orientation": "default",
    "icon": "./assets/images/icon.png",
    "scheme": "streamyfin",
@@ -36,7 +36,6 @@
      "appleTeamId": "MWD5K362T8"
    },
    "android": {
-      "versionCode": 93,
      "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
@@ -1,4 +1,9 @@
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -7,6 +12,7 @@ import { Alert, Platform, ScrollView, View } from "react-native";
 import { Pressable } from "react-native-gesture-handler";
 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 { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import ActiveDownloads from "@/components/downloads/ActiveDownloads";
@@ -101,7 +107,7 @@ export default function DownloadsPage() {
    navigation.setOptions({
      headerRight: () => (
        <Pressable
-          onPress={bottomSheetModalRef.current?.present}
+          onPress={() => bottomSheetModalRef.current?.present()}
          className='px-2'
        >
          <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
@@ -116,7 +122,7 @@ export default function DownloadsPage() {
    }
  }, [showMigration]);

-  const _deleteMovies = () =>
+  const deleteMovies = () =>
    deleteFileByType("Movie")
      .then(() =>
        toast.success(
@@ -127,7 +133,7 @@ export default function DownloadsPage() {
        writeToLog("ERROR", reason);
        toast.error(t("home.downloads.toasts.failed_to_delete_all_movies"));
      });
-  const _deleteShows = () =>
+  const deleteShows = () =>
    deleteFileByType("Episode")
      .then(() =>
        toast.success(
@@ -138,7 +144,7 @@ export default function DownloadsPage() {
        writeToLog("ERROR", reason);
        toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
      });
-  const _deleteOtherMedia = () =>
+  const deleteOtherMedia = () =>
    Promise.all(
      otherMedia
        .filter((item) => item.item.Type)
@@ -162,6 +168,9 @@ export default function DownloadsPage() {
        ),
    );

+  const deleteAllMedia = async () =>
+    await Promise.all([deleteMovies(), deleteShows(), deleteOtherMedia()]);
+
  return (
    <OfflineModeProvider isOffline={true}>
      <ScrollView
@@ -256,6 +265,42 @@ export default function DownloadsPage() {
          )}
        </View>
      </ScrollView>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        backdropComponent={(props: BottomSheetBackdropProps) => (
+          <BottomSheetBackdrop
+            {...props}
+            disappearsOnIndex={-1}
+            appearsOnIndex={0}
+          />
+        )}
+      >
+        <BottomSheetView>
+          <View className='p-4 space-y-4 mb-4'>
+            <Button color='purple' onPress={deleteMovies}>
+              {t("home.downloads.delete_all_movies_button")}
+            </Button>
+            <Button color='purple' onPress={deleteShows}>
+              {t("home.downloads.delete_all_tvseries_button")}
+            </Button>
+            {otherMedia.length > 0 && (
+              <Button color='purple' onPress={deleteOtherMedia}>
+                {t("home.downloads.delete_all_other_media_button")}
+              </Button>
+            )}
+            <Button color='red' onPress={deleteAllMedia}>
+              {t("home.downloads.delete_all_button")}
+            </Button>
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
    </OfflineModeProvider>
  );
 }
--- a/bun.lock
+++ b/bun.lock
@@ -11,9 +11,10 @@
        "@expo/react-native-action-sheet": "^4.1.1",
        "@expo/ui": "~56.0.14",
        "@expo/vector-icons": "^15.0.3",
-        "@gorhom/bottom-sheet": "5.2.8",
+        "@gorhom/bottom-sheet": "5.2.14",
        "@jellyfin/sdk": "^0.13.0",
        "@react-native-community/netinfo": "^12.0.0",
+        "@react-navigation/material-top-tabs": "7.4.28",
        "@react-navigation/native": "^7.2.5",
        "@shopify/flash-list": "2.0.2",
        "@tanstack/query-sync-storage-persister": "^5.100.14",
@@ -83,6 +84,7 @@
        "react-native-safe-area-context": "~5.7.0",
        "react-native-screens": "4.25.2",
        "react-native-svg": "15.15.4",
+        "react-native-tab-view": "4.3.0",
        "react-native-text-ticker": "^1.15.0",
        "react-native-track-player": "github:lovegaoshi/react-native-track-player#APM",
        "react-native-udp": "^4.1.7",
@@ -108,17 +110,12 @@
        "cross-env": "10.1.0",
        "expo-doctor": "1.19.7",
        "husky": "9.1.7",
-        "lint-staged": "17.0.6",
+        "lint-staged": "17.0.5",
        "react-test-renderer": "19.2.3",
        "typescript": "5.9.3",
      },
    },
  },
-  "patchedDependencies": {
-    "react-native-ios-utilities@5.2.0": "bun-patches/react-native-ios-utilities@5.2.0.patch",
-    "react-native-udp@4.1.7": "bun-patches/react-native-udp@4.1.7.patch",
-    "react-native-bottom-tabs@1.2.0": "bun-patches/react-native-bottom-tabs@1.2.0.patch",
-  },
  "packages": {
    "@adobe/css-tools": ["@adobe/css-tools@4.5.0", "", {}, "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q=="],

@@ -368,7 +365,7 @@

    "@expo/xcpretty": ["@expo/xcpretty@4.4.4", "", { "dependencies": { "@babel/code-frame": "^7.20.0", "chalk": "^4.1.0", "js-yaml": "^4.1.0" }, "bin": { "excpretty": "build/cli.js" } }, "sha512-4aQzz9vgxcNXFfo/iyNgDDYfsU5XGKKxWxZopw0cVotHiW+U8IJbIxMaxsINs6bHhtkG3StKNPcOrn3eBuxKPw=="],

-    "@gorhom/bottom-sheet": ["@gorhom/bottom-sheet@5.2.8", "", { "dependencies": { "@gorhom/portal": "1.0.14", "invariant": "^2.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-native": "*", "react": "*", "react-native": "*", "react-native-gesture-handler": ">=2.16.1", "react-native-reanimated": ">=3.16.0 || >=4.0.0-" }, "optionalPeers": ["@types/react", "@types/react-native"] }, "sha512-+N27SMpbBxXZQ/IA2nlEV6RGxL/qSFHKfdFKcygvW+HqPG5jVNb1OqehLQsGfBP+Up42i0gW5ppI+DhpB7UCzA=="],
+    "@gorhom/bottom-sheet": ["@gorhom/bottom-sheet@5.2.14", "", { "dependencies": { "@gorhom/portal": "1.0.14", "invariant": "^2.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-native": "*", "react": "*", "react-native": "*", "react-native-gesture-handler": ">=2.16.1", "react-native-reanimated": ">=3.16.0 || >=4.0.0-" }, "optionalPeers": ["@types/react", "@types/react-native"] }, "sha512-uLQFlDjp9z+jrOFcMSEldPqL5JdaXL3vXOh+juhwoNvXgTsEorJLjHTugXu+YccAG/0KJnShzKCrb71MHBsvJg=="],

    "@gorhom/portal": ["@gorhom/portal@1.0.14", "", { "dependencies": { "nanoid": "^3.3.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A=="],

@@ -542,6 +539,10 @@

    "@react-navigation/core": ["@react-navigation/core@7.17.5", "", { "dependencies": { "@react-navigation/routers": "^7.5.5", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "query-string": "^7.1.3", "react-is": "^19.1.0", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": ">= 18.2.0" } }, "sha512-6fDCwDTWC7DJn0SDb9DJGRlipaygHIc+2elpZBJI6Crl/2Pu+Z1d6W4jMJ2gZO6iHKf+Pe5sUiQ/uwepGprZtg=="],

+    "@react-navigation/elements": ["@react-navigation/elements@2.9.19", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.2.5", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-gBUvCZuUkOGw1KpLQEZIkByUz8RYPwXeoA6mZFJy9K1mxd8GdqHDMFCIoB0lfPz9rgrHj99RvtdlGZ/ZzkZv2A=="],
+
+    "@react-navigation/material-top-tabs": ["@react-navigation/material-top-tabs@7.4.28", "", { "dependencies": { "@react-navigation/elements": "^2.9.19", "color": "^4.2.3", "react-native-tab-view": "^4.3.0" }, "peerDependencies": { "@react-navigation/native": "^7.2.5", "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0", "react-native-safe-area-context": ">= 4.0.0" } }, "sha512-WZHJSGV2PQOD2Vr9LF8apGvcsbDKukzF3Fhh8xVNIesqaSi9TPProv4dRw6YkenUkjvFVZYkOjvwAJOToePVpA=="],
+
    "@react-navigation/native": ["@react-navigation/native@7.2.5", "", { "dependencies": { "@react-navigation/core": "^7.17.5", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*" } }, "sha512-01AAUQiiHQAfTabq+ZyU1/ZWq+AbB/J3v0CB0UTJSON6M6cuadWNsbChzrZUdqQvHrXvg96U5i2PQLJzK3+zpg=="],

    "@react-navigation/routers": ["@react-navigation/routers@7.5.5", "", { "dependencies": { "nanoid": "^3.3.11" } }, "sha512-9/hhMte12Kgu+pMnLfA4EWJ0OQmIEAMVMX06FPH2yGkEQSQ3JhhCN/GkcRikzQhtEi97VYYQA15umptBUShcOQ=="],
@@ -1276,7 +1277,7 @@

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

-    "lint-staged": ["lint-staged@17.0.6", "", { "dependencies": { "listr2": "^10.2.1", "picomatch": "^4.0.4", "string-argv": "^0.3.2", "tinyexec": "1.2.2" }, "optionalDependencies": { "yaml": "^2.9.0" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-xTowloQX5tfs9TC6SUHnKuBSx/TUx+9w39zRTbVrB70DxUJZh3OZWnOa0LbejxVX9adYuioGJoP4dpQ04QHehg=="],
+    "lint-staged": ["lint-staged@17.0.5", "", { "dependencies": { "listr2": "^10.2.1", "picomatch": "^4.0.4", "string-argv": "^0.3.2", "tinyexec": "^1.1.2" }, "optionalDependencies": { "yaml": "^2.8.4" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-d12yC+/e8RhBjZtaxZn71FyrgU/P5e+uAPifhCLwdosQZP/zamSdKRWDC30ocVIbzDKiFG1McHc/LUgB92GIPw=="],

    "listr2": ["listr2@10.2.1", "", { "dependencies": { "cli-truncate": "^5.2.0", "eventemitter3": "^5.0.4", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^10.0.0" } }, "sha512-7I5knELsJKTUjXG+A6BkKAiGkW1i25fNa/xlUl9hFtk15WbE9jndA89xu5FzQKrY5llajE1hfZZFMILXkDHk/Q=="],

@@ -1594,6 +1595,8 @@

    "react-native-svg": ["react-native-svg@15.15.4", "", { "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", "warn-once": "0.1.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-boT/vIRgj6zZKBpfTPJJiYWMbZE9duBMOwPK6kCSTgxsS947IFMOq9OgIFkpWZTB7t229H24pDRkh3W9ZK/J1A=="],

+    "react-native-tab-view": ["react-native-tab-view@4.3.0", "", { "dependencies": { "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0" } }, "sha512-qPMF75uz/7+MuVG2g+YETdGMzlWZnhC6iI4h/7EBbwIBwNBIBi2z4OA6KhY3IOOBwGHXEIz5IyA6doDqifYBHg=="],
+
    "react-native-text-ticker": ["react-native-text-ticker@1.15.0", "", {}, "sha512-d/uK+PIOhsYMy1r8h825iq/nADiHsabz3WMbRJSnkpQYn+K9aykUAXRRhu8ZbTAzk4CgnUWajJEFxS5ZDygsdg=="],

    "react-native-track-player": ["react-native-track-player@github:lovegaoshi/react-native-track-player#33a3ecd", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-windows": "*", "shaka-player": "^4.7.9" }, "optionalPeers": ["react-native-windows", "shaka-player"] }, "lovegaoshi-react-native-track-player-33a3ecd"],
@@ -2006,6 +2009,10 @@

    "@react-native/metro-babel-transformer/@babel/core": ["@babel/core@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/generator": "^7.28.6", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/template": "^7.28.6", "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw=="],

+    "@react-navigation/elements/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
+
+    "@react-navigation/material-top-tabs/color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
+
    "@testing-library/dom/aria-query": ["aria-query@5.3.0", "", { "dependencies": { "dequal": "^2.0.3" } }, "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A=="],

    "@testing-library/dom/dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
@@ -2224,6 +2231,14 @@

    "@react-native-community/cli-server-api/open/is-wsl": ["is-wsl@1.1.0", "", {}, "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw=="],

+    "@react-navigation/elements/color/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "@react-navigation/elements/color/color-string": ["color-string@1.9.1", "", { "dependencies": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" } }, "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="],
+
+    "@react-navigation/material-top-tabs/color/color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "@react-navigation/material-top-tabs/color/color-string": ["color-string@1.9.1", "", { "dependencies": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" } }, "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="],
+
    "@testing-library/dom/pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],

    "ansi-fragments/slice-ansi/ansi-styles": ["ansi-styles@3.2.1", "", { "dependencies": { "color-convert": "^1.9.0" } }, "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="],
@@ -2336,6 +2351,14 @@

    "@expo/package-manager/ora/strip-ansi/ansi-regex": ["ansi-regex@4.1.1", "", {}, "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="],

+    "@react-navigation/elements/color/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "@react-navigation/elements/color/color-string/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "@react-navigation/material-top-tabs/color/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "@react-navigation/material-top-tabs/color/color-string/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
    "ansi-fragments/slice-ansi/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],

    "chalk/ansi-styles/color-convert/color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
--- a/components/PlatformDropdown.tsx
+++ b/components/PlatformDropdown.tsx
@@ -1,14 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import React, { useEffect, useState } from "react";
-import {
-  type LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import React, { useEffect } from "react";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  MeasuredTriggerHost,
+  OptionGroupCard,
+  ToggleSwitch,
+} from "@/components/common/dropdownShared";
 import { Text } from "@/components/common/Text";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";

@@ -16,7 +15,7 @@ import { useGlobalModal } from "@/providers/GlobalModalProvider";
 // A static top-level import evaluates requireNativeModule('ExpoUI') at module
 // load and crashes the entire route tree on tvOS (expo-router requires every
 // route file). Load it lazily and only off-TV; TV never renders these.
-const { Button, Host, Menu } = Platform.isTV
+const { Button, Menu } = Platform.isTV
  ? ({} as typeof import("@expo/ui/swift-ui"))
  : require("@expo/ui/swift-ui");
 const { disabled } = Platform.isTV
@@ -72,16 +71,6 @@ interface PlatformDropdownProps {
  };
 }

-const ToggleSwitch: React.FC<{ value: boolean }> = ({ value }) => (
-  <View
-    className={`w-12 h-7 rounded-full ${value ? "bg-purple-600" : "bg-neutral-600"} flex-row items-center`}
-  >
-    <View
-      className={`w-5 h-5 rounded-full bg-white shadow-md transform transition-transform ${value ? "translate-x-6" : "translate-x-1"}`}
-    />
-  </View>
-);
-
 const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
  option,
  isLast,
@@ -121,28 +110,15 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
 };

 const OptionGroupComponent: React.FC<{ group: OptionGroup }> = ({ group }) => (
-  <View className='mb-6'>
-    {group.title && (
-      <Text className='text-lg font-semibold mb-3 text-neutral-300'>
-        {group.title}
-      </Text>
-    )}
-    <View
-      style={{
-        borderRadius: 12,
-        overflow: "hidden",
-      }}
-      className='bg-neutral-800 rounded-xl overflow-hidden'
-    >
-      {group.options.map((option, index) => (
-        <OptionItem
-          key={index}
-          option={option}
-          isLast={index === group.options.length - 1}
-        />
-      ))}
-    </View>
-  </View>
+  <OptionGroupCard title={group.title}>
+    {group.options.map((option, index) => (
+      <OptionItem
+        key={index}
+        option={option}
+        isLast={index === group.options.length - 1}
+      />
+    ))}
+  </OptionGroupCard>
 );

 const BottomSheetContent: React.FC<{
@@ -217,24 +193,6 @@ const PlatformDropdownComponent = ({
 }: PlatformDropdownProps) => {
  const { showModal, hideModal, isVisible } = useGlobalModal();

-  // @expo/ui's <Host> (SDK 55) fills its available space by default, and
-  // `matchContents` doesn't help here: it reports the native Menu's size via
-  // setStyleSize and overrides any explicit size. Instead we measure the
-  // trigger's intrinsic size in plain RN (off-layout) and pin it on the Host.
-  const [triggerSize, setTriggerSize] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const handleMeasureTrigger = (e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setTriggerSize((prev) =>
-      prev && prev.width === width && prev.height === height
-        ? prev
-        : { width, height },
-    );
-  };
-
  // Handle controlled open state for Android
  useEffect(() => {
    if (Platform.OS === "android" && controlledOpen === true) {
@@ -265,82 +223,42 @@ const PlatformDropdownComponent = ({
  }, [isVisible, controlledOpen, controlledOnOpenChange]);

  if (Platform.OS === "ios" && !Platform.isTV) {
-    // Pin the wrapper to the measured trigger size. @expo/ui's <Host> (SDK 55)
-    // fills its parent and reports its own size via setStyleSize, so it can't
-    // size itself to content. If the wrapper has no size, the Host's `flex: 1`
-    // height depends on the parent while the parent depends on the Host — a
-    // circular dependency that collapses to 0 for any selector nested more than
-    // one level deep (so only the first, shallowest dropdown stays visible).
-    // Giving the wrapper the measured size breaks the cycle; the Host then
-    // fills a concrete box.
    return (
-      <View style={triggerSize ?? { opacity: 0 }}>
-        {/* Hidden measurer: lays the trigger out off-flow to capture its
-            intrinsic size. Absolutely positioned WITHOUT right/bottom so it
-            sizes to the trigger's content rather than to its parent. */}
-        <View
-          style={{ position: "absolute", top: 0, left: 0, opacity: 0 }}
-          pointerEvents='none'
-          aria-hidden
-          onLayout={handleMeasureTrigger}
-        >
-          {trigger}
-        </View>
-        <Host style={[StyleSheet.absoluteFill, expoUIConfig?.hostStyle as any]}>
-          <Menu label={trigger}>
-            {groups.flatMap((group, groupIndex) => {
-              // Check if this group has radio options
-              const radioOptions = group.options.filter(
-                (opt) => opt.type === "radio",
-              ) as RadioOption[];
-              const toggleOptions = group.options.filter(
-                (opt) => opt.type === "toggle",
-              ) as ToggleOption[];
-              const actionOptions = group.options.filter(
-                (opt) => opt.type === "action",
-              ) as ActionOption[];
+      <MeasuredTriggerHost
+        trigger={trigger}
+        hostStyle={expoUIConfig?.hostStyle}
+      >
+        <Menu label={trigger}>
+          {groups.flatMap((group, groupIndex) => {
+            // Check if this group has radio options
+            const radioOptions = group.options.filter(
+              (opt) => opt.type === "radio",
+            ) as RadioOption[];
+            const toggleOptions = group.options.filter(
+              (opt) => opt.type === "toggle",
+            ) as ToggleOption[];
+            const actionOptions = group.options.filter(
+              (opt) => opt.type === "action",
+            ) as ActionOption[];

-              const items = [];
+            const items = [];

-              // Group radio options under a submenu ONLY if there's a title
-              // Otherwise render as individual buttons
-              if (radioOptions.length > 0) {
-                if (group.title) {
-                  // Use a nested Menu as a submenu for grouped options. This
-                  // reads as "Title: Selected" and expands to the choices on
-                  // tap, keeping the nested look while staying a dropdown.
-                  // (Menu opens on a single tap and nests cleanly; ContextMenu
-                  // would require a long-press and read as a context menu.)
-                  const selectedOption = radioOptions.find(
-                    (opt) => opt.selected,
-                  );
-                  const displayTitle = selectedOption
-                    ? `${group.title}: ${selectedOption.label}`
-                    : group.title;
-                  items.push(
-                    <Menu key={`submenu-${groupIndex}`} label={displayTitle}>
-                      {radioOptions.map((option, optionIndex) => (
-                        <Button
-                          key={`radio-${groupIndex}-${optionIndex}`}
-                          label={option.label}
-                          systemImage={
-                            option.selected ? "checkmark.circle.fill" : "circle"
-                          }
-                          modifiers={
-                            option.disabled ? [disabled(true)] : undefined
-                          }
-                          onPress={() => {
-                            option.onPress();
-                            onOptionSelect?.(option.value);
-                          }}
-                        />
-                      ))}
-                    </Menu>,
-                  );
-                } else {
-                  // Render radio options as direct buttons
-                  radioOptions.forEach((option, optionIndex) => {
-                    items.push(
+            // Group radio options under a submenu ONLY if there's a title
+            // Otherwise render as individual buttons
+            if (radioOptions.length > 0) {
+              if (group.title) {
+                // Use a nested Menu as a submenu for grouped options. This
+                // reads as "Title: Selected" and expands to the choices on
+                // tap, keeping the nested look while staying a dropdown.
+                // (Menu opens on a single tap and nests cleanly; ContextMenu
+                // would require a long-press and read as a context menu.)
+                const selectedOption = radioOptions.find((opt) => opt.selected);
+                const displayTitle = selectedOption
+                  ? `${group.title}: ${selectedOption.label}`
+                  : group.title;
+                items.push(
+                  <Menu key={`submenu-${groupIndex}`} label={displayTitle}>
+                    {radioOptions.map((option, optionIndex) => (
                      <Button
                        key={`radio-${groupIndex}-${optionIndex}`}
                        label={option.label}
@@ -354,49 +272,67 @@ const PlatformDropdownComponent = ({
                          option.onPress();
                          onOptionSelect?.(option.value);
                        }}
-                      />,
-                    );
-                  });
-                }
+                      />
+                    ))}
+                  </Menu>,
+                );
+              } else {
+                // Render radio options as direct buttons
+                radioOptions.forEach((option, optionIndex) => {
+                  items.push(
+                    <Button
+                      key={`radio-${groupIndex}-${optionIndex}`}
+                      label={option.label}
+                      systemImage={
+                        option.selected ? "checkmark.circle.fill" : "circle"
+                      }
+                      modifiers={option.disabled ? [disabled(true)] : undefined}
+                      onPress={() => {
+                        option.onPress();
+                        onOptionSelect?.(option.value);
+                      }}
+                    />,
+                  );
+                });
              }
+            }

-              // Add Buttons for toggle options
-              toggleOptions.forEach((option, optionIndex) => {
-                items.push(
-                  <Button
-                    key={`toggle-${groupIndex}-${optionIndex}`}
-                    label={option.label}
-                    systemImage={
-                      option.value ? "checkmark.circle.fill" : "circle"
-                    }
-                    modifiers={option.disabled ? [disabled(true)] : undefined}
-                    onPress={() => {
-                      option.onToggle();
-                      onOptionSelect?.(option.value);
-                    }}
-                  />,
-                );
-              });
+            // Add Buttons for toggle options
+            toggleOptions.forEach((option, optionIndex) => {
+              items.push(
+                <Button
+                  key={`toggle-${groupIndex}-${optionIndex}`}
+                  label={option.label}
+                  systemImage={
+                    option.value ? "checkmark.circle.fill" : "circle"
+                  }
+                  modifiers={option.disabled ? [disabled(true)] : undefined}
+                  onPress={() => {
+                    option.onToggle();
+                    onOptionSelect?.(option.value);
+                  }}
+                />,
+              );
+            });

-              // Add Buttons for action options (no icon)
-              actionOptions.forEach((option, optionIndex) => {
-                items.push(
-                  <Button
-                    key={`action-${groupIndex}-${optionIndex}`}
-                    label={option.label}
-                    modifiers={option.disabled ? [disabled(true)] : undefined}
-                    onPress={() => {
-                      option.onPress();
-                    }}
-                  />,
-                );
-              });
+            // Add Buttons for action options (no icon)
+            actionOptions.forEach((option, optionIndex) => {
+              items.push(
+                <Button
+                  key={`action-${groupIndex}-${optionIndex}`}
+                  label={option.label}
+                  modifiers={option.disabled ? [disabled(true)] : undefined}
+                  onPress={() => {
+                    option.onPress();
+                  }}
+                />,
+              );
+            });

-              return items;
-            })}
-          </Menu>
-        </Host>
-      </View>
+            return items;
+          })}
+        </Menu>
+      </MeasuredTriggerHost>
    );
  }

--- a/components/common/ProgressBar.tsx
+++ b/components/common/ProgressBar.tsx
@@ -37,11 +37,12 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({ item }) => {
        }
      />
      <View
-        style={{
-          width: `${progress}%`,
-          backgroundColor: Platform.isTV ? "#ffffff" : undefined,
-        }}
-        className={`absolute bottom-0 left-0 h-1 w-full ${Platform.isTV ? "" : "bg-purple-600"}`}
+        style={
+          Platform.isTV
+            ? { width: `${progress}%`, backgroundColor: "#ffffff" }
+            : { width: `${progress}%` }
+        }
+        className={`absolute bottom-0 left-0 h-1 ${Platform.isTV ? "" : "bg-purple-600"}`}
      />
    </>
  );
--- a/components/common/dropdownShared.tsx
+++ b/components/common/dropdownShared.tsx
@@ -0,0 +1,142 @@
+// Shared internals for PlatformDropdown and PlayerSettingsPopover.
+// Both components host SwiftUI content (Menu / Popover) inside @expo/ui's
+// <Host>, both render an Android bottom-sheet card for the same three core
+// option types (radio / toggle / action), and both wear the same wrapper
+// boilerplate. This module is the single source of truth for those pieces.
+//
+// What lives here:
+//   - useTriggerSize()  — measures the RN trigger's intrinsic size
+//   - MeasuredTriggerHost — pins <Host> to that measured size (workaround
+//     for @expo/ui SDK 55 sizing behaviour; see notes below)
+//   - ToggleSwitch — the small purple switch used in the Android sheet
+//   - OptionGroupCard — the rounded dark card with optional title that
+//     wraps a group's option rows on Android
+//
+// What deliberately doesn't live here:
+//   - The iOS rendering — PlatformDropdown uses a Menu, PlayerSettingsPopover
+//     uses a hand-styled Popover. Nothing meaningful to share.
+//   - The Android per-row renderers — PlatformDropdown handles 3 option types,
+//     PlayerSettingsPopover handles 6 (adds slider/stepper/subgroup). Forcing
+//     a shared abstraction would couple them. Each owns its own OptionItem.
+
+import React, { useCallback, useState } from "react";
+import {
+  type LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  View,
+} from "react-native";
+import { Text } from "@/components/common/Text";
+
+// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
+// A static top-level import evaluates requireNativeModule('ExpoUI') at module
+// load and crashes the entire route tree on tvOS. Load it lazily and only
+// off-TV; both consumers also gate rendering on Platform.OS === "ios".
+const { Host } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui"))
+  : require("@expo/ui/swift-ui");
+
+type TriggerSize = { width: number; height: number };
+
+/**
+ * Measures and remembers the intrinsic size of a RN trigger view so the
+ * surrounding <Host> can be pinned to a concrete box.
+ *
+ * Returns `[size, handleLayout]` — pass `handleLayout` to a hidden,
+ * absolutely-positioned mirror of the trigger and use `size` as the
+ * wrapper's `style` once measured.
+ */
+export function useTriggerSize(): [
+  TriggerSize | null,
+  (e: LayoutChangeEvent) => void,
+] {
+  const [size, setSize] = useState<TriggerSize | null>(null);
+  const onLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize((prev) =>
+      prev && prev.width === width && prev.height === height
+        ? prev
+        : { width, height },
+    );
+  }, []);
+  return [size, onLayout];
+}
+
+interface MeasuredTriggerHostProps {
+  trigger: React.ReactNode;
+  hostStyle?: any;
+  children: React.ReactNode;
+}
+
+/**
+ * Pins @expo/ui's <Host> to the trigger's measured size.
+ *
+ * @expo/ui's <Host> (SDK 55) fills its parent and reports its own size via
+ * `setStyleSize`, so it can't size itself to content. If the wrapper has no
+ * size, the Host's `flex: 1` height depends on the parent while the parent
+ * depends on the Host — a circular dependency that collapses to 0 for any
+ * dropdown nested more than one level deep (so only the first, shallowest
+ * dropdown on screen stays visible).
+ *
+ * Giving the wrapper the measured trigger size breaks the cycle; the Host
+ * then fills a concrete box.
+ */
+export const MeasuredTriggerHost: React.FC<MeasuredTriggerHostProps> = ({
+  trigger,
+  hostStyle,
+  children,
+}) => {
+  const [size, handleMeasure] = useTriggerSize();
+  return (
+    <View style={size ?? { opacity: 0 }}>
+      {/* Hidden measurer: lays the trigger out off-flow to capture its
+          intrinsic size. Absolutely positioned WITHOUT right/bottom so it
+          sizes to the trigger's content rather than to its parent. */}
+      <View
+        style={{ position: "absolute", top: 0, left: 0, opacity: 0 }}
+        pointerEvents='none'
+        aria-hidden
+        onLayout={handleMeasure}
+      >
+        {trigger}
+      </View>
+      <Host style={[StyleSheet.absoluteFill, hostStyle as any]}>
+        {children}
+      </Host>
+    </View>
+  );
+};
+
+/** Small pill switch used by Android sheet rows. */
+export const ToggleSwitch: React.FC<{ value: boolean }> = ({ value }) => (
+  <View
+    className={`w-12 h-7 rounded-full ${value ? "bg-purple-600" : "bg-neutral-600"} flex-row items-center`}
+  >
+    <View
+      className={`w-5 h-5 rounded-full bg-white shadow-md transform transition-transform ${value ? "translate-x-6" : "translate-x-1"}`}
+    />
+  </View>
+);
+
+/**
+ * Rounded dark card with an optional title above it. Wraps a group's option
+ * rows in the Android bottom sheet.
+ */
+export const OptionGroupCard: React.FC<{
+  title?: string;
+  children: React.ReactNode;
+}> = ({ title, children }) => (
+  <View className='mb-6'>
+    {title && (
+      <Text className='text-lg font-semibold mb-3 text-neutral-300'>
+        {title}
+      </Text>
+    )}
+    <View
+      style={{ borderRadius: 12, overflow: "hidden" }}
+      className='bg-neutral-800 rounded-xl overflow-hidden'
+    >
+      {children}
+    </View>
+  </View>
+);
--- a/components/video-player/controls/AudioSlider.tsx
+++ b/components/video-player/controls/AudioSlider.tsx
@@ -105,14 +105,14 @@ const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {
        maximumValue={max}
        thumbWidth={0}
        onValueChange={handleValueChange}
+        renderBubble={() => null}
+        renderThumb={() => null}
        containerStyle={{
          borderRadius: 50,
        }}
        theme={{
          minimumTrackTintColor: "#FDFDFD",
          maximumTrackTintColor: "#5A5A5A",
-          bubbleBackgroundColor: "transparent", // Hide the value bubble
-          bubbleTextColor: "transparent", // Hide the value text
        }}
      />
      <Ionicons
--- a/components/video-player/controls/BrightnessSlider.tsx
+++ b/components/video-player/controls/BrightnessSlider.tsx
@@ -88,14 +88,14 @@ const BrightnessSlider = () => {
        maximumValue={max}
        thumbWidth={0}
        onValueChange={handleValueChange}
+        renderBubble={() => null}
+        renderThumb={() => null}
        containerStyle={{
          borderRadius: 50,
        }}
        theme={{
          minimumTrackTintColor: "#FDFDFD",
          maximumTrackTintColor: "#5A5A5A",
-          bubbleBackgroundColor: "transparent", // Hide the value bubble
-          bubbleTextColor: "transparent", // Hide the value text
        }}
      />
      <Ionicons
--- a/components/video-player/controls/TimeDisplay.tsx
+++ b/components/video-player/controls/TimeDisplay.tsx
@@ -1,4 +1,5 @@
 import type { FC } from "react";
+import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { formatTimeString } from "@/utils/time";
@@ -16,6 +17,8 @@ export const TimeDisplay: FC<TimeDisplayProps> = ({
  currentTime,
  remainingTime,
 }) => {
+  const { t } = useTranslation();
+
  const getFinishTime = () => {
    const now = new Date();
    // remainingTime is in ms
@@ -37,7 +40,7 @@ export const TimeDisplay: FC<TimeDisplayProps> = ({
          -{formatTimeString(remainingTime, "ms")}
        </Text>
        <Text className='text-[10px] text-neutral-500 opacity-70'>
-          ends at {getFinishTime()}
+          {t("player.ends_at", { time: getFinishTime() })}
        </Text>
      </View>
    </View>
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -3,10 +3,6 @@ import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
-import {
-  type OptionGroup,
-  PlatformDropdown,
-} from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import useRouter from "@/hooks/useAppRouter";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
@@ -14,20 +10,10 @@ import { useSettings } from "@/utils/atoms/settings";
 import { usePlayerContext } from "../contexts/PlayerContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { PlaybackSpeedScope } from "../utils/playback-speed-settings";
-
-// Subtitle scale presets (direct multiplier values)
-const SUBTITLE_SCALE_PRESETS = [
-  { label: "0.1x", value: 0.1 },
-  { label: "0.25x", value: 0.25 },
-  { label: "0.5x", value: 0.5 },
-  { label: "0.75x", value: 0.75 },
-  { label: "1.0x", value: 1.0 },
-  { label: "1.25x", value: 1.25 },
-  { label: "1.5x", value: 1.5 },
-  { label: "2.0x", value: 2.0 },
-  { label: "2.5x", value: 2.5 },
-  { label: "3.0x", value: 3.0 },
-] as const;
+import {
+  type OptionGroup,
+  PlayerSettingsPopover,
+} from "./PlayerSettingsPopover";

 interface DropdownViewProps {
  playbackSpeed?: number;
@@ -102,6 +88,7 @@ const DropdownView = ({
    if (!isOffline) {
      groups.push({
        title: "Quality",
+        icon: "gauge.with.dots.needle.50percent",
        options:
          BITRATES?.map((bitrate) => ({
            type: "radio" as const,
@@ -113,29 +100,41 @@ const DropdownView = ({
      });
    }

-    // Subtitle Section
+    // Subtitles section. iOS: tap the `...` opens a SwiftUI Popover with the
+    // section header "SUBTITLES" + a Track row (Menu) + a Size row (native
+    // Slider). Android: same shape in a bottom-sheet — tap the "Track" row to
+    // expand the list inline, Size shows a Material 3 Slider.
    if (subtitleTracks && subtitleTracks.length > 0) {
      groups.push({
        title: "Subtitles",
-        options: subtitleTracks.map((sub) => ({
-          type: "radio" as const,
-          label: sub.name,
-          value: sub.index.toString(),
-          selected: subtitleIndex === sub.index.toString(),
-          onPress: () => sub.setTrack(),
-        })),
-      });
-
-      // Subtitle Scale Section
-      groups.push({
-        title: "Subtitle Scale",
-        options: SUBTITLE_SCALE_PRESETS.map((preset) => ({
-          type: "radio" as const,
-          label: preset.label,
-          value: preset.value.toString(),
-          selected: (settings.mpvSubtitleScale ?? 1.0) === preset.value,
-          onPress: () => updateSettings({ mpvSubtitleScale: preset.value }),
-        })),
+        options: [
+          {
+            type: "subgroup" as const,
+            label: "Track",
+            icon: "captions.bubble",
+            options: subtitleTracks.map((sub) => ({
+              type: "radio" as const,
+              label: sub.name,
+              value: sub.index.toString(),
+              selected: subtitleIndex === sub.index.toString(),
+              onPress: () => sub.setTrack(),
+            })),
+          },
+          {
+            type: "slider" as const,
+            label: "Size",
+            icon: "textformat.size",
+            value: Math.round((settings.mpvSubtitleScale ?? 1.0) * 10) / 10,
+            step: 0.1,
+            min: 0.1,
+            max: 3.0,
+            format: (v: number) => `${v.toFixed(1)}x`,
+            onValueChange: (value: number) =>
+              updateSettings({
+                mpvSubtitleScale: Math.round(value * 10) / 10,
+              }),
+          },
+        ],
      });
    }

@@ -143,6 +142,7 @@ const DropdownView = ({
    if (audioTracks && audioTracks.length > 0) {
      groups.push({
        title: "Audio",
+        icon: "speaker.wave.2",
        options: audioTracks.map((track) => ({
          type: "radio" as const,
          label: track.name,
@@ -157,6 +157,7 @@ const DropdownView = ({
    if (setPlaybackSpeed) {
      groups.push({
        title: "Speed",
+        icon: "speedometer",
        options: PLAYBACK_SPEEDS.map((speed) => ({
          type: "radio" as const,
          label: speed.label,
@@ -176,6 +177,7 @@ const DropdownView = ({
            label: showTechnicalInfo
              ? "Hide Technical Info"
              : "Show Technical Info",
+            icon: "info.circle",
            onPress: onToggleTechnicalInfo,
          },
        ],
@@ -216,7 +218,7 @@ const DropdownView = ({
  if (Platform.isTV) return null;

  return (
-    <PlatformDropdown
+    <PlayerSettingsPopover
      title='Playback Options'
      groups={optionGroups}
      trigger={trigger}
--- a/components/video-player/controls/dropdown/PlayerSettingsPopover.tsx
+++ b/components/video-player/controls/dropdown/PlayerSettingsPopover.tsx
@@ -0,0 +1,930 @@
+import { Ionicons } from "@expo/vector-icons";
+import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import React, { useEffect, useState } from "react";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  MeasuredTriggerHost,
+  OptionGroupCard,
+  ToggleSwitch,
+} from "@/components/common/dropdownShared";
+import { Text } from "@/components/common/Text";
+import type {
+  ActionOption as BaseActionOption,
+  RadioOption as BaseRadioOption,
+  ToggleOption as BaseToggleOption,
+} from "@/components/PlatformDropdown";
+import { useGlobalModal } from "@/providers/GlobalModalProvider";
+
+// Player-only popover/sheet. Shares no rendering with `PlatformDropdown`:
+// that component is used by ~20 callers (settings, season pickers,
+// bitrate/audio/subtitle selectors, …) and must keep its small native
+// Menu look. This one targets the in-player `...` button and is allowed to
+// (a) host a real slider, (b) wear the Swift-mock visual style, and
+// (c) carry SF Symbol icons per row.
+//
+// Common boilerplate (trigger measurement, ToggleSwitch, Android option-card
+// shell) lives in @/components/common/dropdownShared and is reused with
+// PlatformDropdown.
+//
+// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
+// A static top-level import evaluates requireNativeModule('ExpoUI') at module
+// load and crashes the entire route tree on tvOS (expo-router requires every
+// route file). Load it lazily and only off-TV; TV never renders these.
+const {
+  Button,
+  HStack,
+  Image: SwiftImage,
+  Menu,
+  Popover,
+  Rectangle: SwiftRectangle,
+  Slider: SwiftSlider,
+  Spacer,
+  Stepper,
+  Text: SwiftText,
+  Toggle: SwiftToggle,
+  VStack,
+} = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui"))
+  : require("@expo/ui/swift-ui");
+const {
+  buttonStyle,
+  disabled,
+  font,
+  foregroundStyle,
+  frame,
+  opacity,
+  padding,
+  tint,
+} = Platform.isTV
+  ? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
+  : require("@expo/ui/swift-ui/modifiers");
+// Android-side Material 3 slider. Lives in @expo/ui/community/slider and is a
+// drop-in for react-native-community/slider on Android (and SwiftUI Slider on
+// iOS, but we use the swift-ui Slider directly inside the popover instead).
+const { Slider: CommunitySlider } = Platform.isTV
+  ? ({} as typeof import("@expo/ui/community/slider"))
+  : require("@expo/ui/community/slider");
+
+// ---------------------------------------------------------------------------
+// Option model
+// ---------------------------------------------------------------------------
+// Reuses PlatformDropdown's three base option types (so the 20+ shared callers
+// and the player popover stay in sync on shape), then adds:
+//   - `icon?: string` on every variant — SF Symbol shown in the iOS popover
+//   - Slider / Stepper / Subgroup variants for the player's extra controls
+
+type WithIcon = { icon?: string };
+
+export type RadioOption<T = any> = BaseRadioOption<T> & WithIcon;
+export type ToggleOption = BaseToggleOption & WithIcon;
+export type ActionOption = BaseActionOption & WithIcon;
+
+export type StepperOption = {
+  type: "stepper";
+  label: string;
+  value: number;
+  step: number;
+  min: number;
+  max: number;
+  onValueChange: (value: number) => void;
+  /** Optional value formatter for the displayed number. */
+  format?: (value: number) => string;
+  disabled?: boolean;
+} & WithIcon;
+
+export type SliderOption = {
+  type: "slider";
+  label: string;
+  value: number;
+  step: number;
+  min: number;
+  max: number;
+  onValueChange: (value: number) => void;
+  /** Optional value formatter for the displayed number. */
+  format?: (value: number) => string;
+  disabled?: boolean;
+} & WithIcon;
+
+/**
+ * A row that itself opens a nested dropdown. On iOS this renders as a
+ * SwiftUI `Menu` inside the popover (label = subgroup name, value =
+ * currently-selected child); on Android the row expands inline to show its
+ * options when tapped (and collapses again on a second tap).
+ */
+export type SubgroupOption = {
+  type: "subgroup";
+  label: string;
+  options: Option[];
+  disabled?: boolean;
+} & WithIcon;
+
+export type Option =
+  | RadioOption
+  | ToggleOption
+  | ActionOption
+  | StepperOption
+  | SliderOption
+  | SubgroupOption;
+
+export type OptionGroup = {
+  title?: string;
+  options: Option[];
+  /**
+   * Optional SF Symbol used for the group's row in the iOS popover when the
+   * entire group is compressed to a single Menu (e.g. radio-only groups).
+   */
+  icon?: string;
+};
+
+interface PlayerSettingsPopoverProps {
+  trigger?: React.ReactNode;
+  title?: string;
+  groups: OptionGroup[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onOptionSelect?: (value?: any) => void;
+  expoUIConfig?: {
+    hostStyle?: any;
+  };
+  bottomSheetConfig?: {
+    enableDynamicSizing?: boolean;
+    enablePanDownToClose?: boolean;
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Android bottom-sheet renderers
+// ---------------------------------------------------------------------------
+
+const StepperControl: React.FC<{
+  option: StepperOption;
+}> = ({ option }) => {
+  const display = option.format
+    ? option.format(option.value)
+    : option.value.toString();
+  const canDecrement = option.value > option.min;
+  const canIncrement = option.value < option.max;
+
+  const decrement = () => {
+    if (option.disabled) return;
+    const next = Math.max(option.min, option.value - option.step);
+    if (next !== option.value) option.onValueChange(next);
+  };
+  const increment = () => {
+    if (option.disabled) return;
+    const next = Math.min(option.max, option.value + option.step);
+    if (next !== option.value) option.onValueChange(next);
+  };
+
+  return (
+    <View className='flex flex-row items-center'>
+      <TouchableOpacity
+        onPress={decrement}
+        disabled={!canDecrement || option.disabled}
+        className={`w-8 h-8 bg-neutral-700 rounded-l-lg flex items-center justify-center ${!canDecrement || option.disabled ? "opacity-40" : ""}`}
+      >
+        <Text className='text-white'>-</Text>
+      </TouchableOpacity>
+      <View className='h-8 px-3 bg-neutral-700 flex items-center justify-center'>
+        <Text className='text-white'>{display}</Text>
+      </View>
+      <TouchableOpacity
+        onPress={increment}
+        disabled={!canIncrement || option.disabled}
+        className={`w-8 h-8 bg-neutral-700 rounded-r-lg flex items-center justify-center ${!canIncrement || option.disabled ? "opacity-40" : ""}`}
+      >
+        <Text className='text-white'>+</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+/**
+ * Android: full-width Material 3 slider inside the bottom sheet, with a
+ * label/value row above the track. The slider lives below the touch target so
+ * dragging it doesn't accidentally collapse the sheet.
+ */
+const SliderControl: React.FC<{
+  option: SliderOption;
+}> = ({ option }) => {
+  const display = option.format
+    ? option.format(option.value)
+    : option.value.toString();
+  return (
+    <View className='flex-1 px-4 py-3'>
+      <View className='flex flex-row items-center justify-between mb-2'>
+        <Text className='text-white'>{option.label}</Text>
+        <Text className='text-neutral-400'>{display}</Text>
+      </View>
+      <CommunitySlider
+        value={option.value}
+        minimumValue={option.min}
+        maximumValue={option.max}
+        step={option.step}
+        onValueChange={option.onValueChange}
+        disabled={option.disabled}
+        style={{ width: "100%", height: 40 }}
+      />
+    </View>
+  );
+};
+
+const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
+  option,
+  isLast,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const isToggle = option.type === "toggle";
+  const isAction = option.type === "action";
+  const isStepper = option.type === "stepper";
+  const isSlider = option.type === "slider";
+  const isSubgroup = option.type === "subgroup";
+
+  if (isSlider) {
+    return (
+      <>
+        <SliderControl option={option} />
+        {!isLast && (
+          <View
+            style={{ height: StyleSheet.hairlineWidth }}
+            className='bg-neutral-700 mx-4'
+          />
+        )}
+      </>
+    );
+  }
+
+  const handlePress = isToggle
+    ? option.onToggle
+    : isSubgroup
+      ? () => setExpanded((v) => !v)
+      : isStepper
+        ? undefined
+        : (option as RadioOption | ActionOption).onPress;
+
+  const selectedChild = isSubgroup
+    ? (option.options.find(
+        (o): o is RadioOption => o.type === "radio" && o.selected,
+      ) ?? undefined)
+    : undefined;
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={handlePress}
+        disabled={option.disabled || isStepper}
+        activeOpacity={isStepper ? 1 : 0.2}
+        className={`px-4 py-3 flex flex-row items-center justify-between ${option.disabled ? "opacity-50" : ""}`}
+      >
+        <Text className='flex-1 text-white'>{option.label}</Text>
+        {isToggle ? (
+          <ToggleSwitch value={option.value} />
+        ) : isStepper ? (
+          <StepperControl option={option} />
+        ) : isSubgroup ? (
+          <View className='flex flex-row items-center'>
+            {selectedChild && (
+              <Text className='text-neutral-400 mr-2'>
+                {selectedChild.label}
+              </Text>
+            )}
+            <Ionicons
+              name={expanded ? "chevron-up" : "chevron-down"}
+              size={20}
+              color='#9ca3af'
+            />
+          </View>
+        ) : isAction ? null : (option as RadioOption).selected ? (
+          <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
+        ) : (
+          <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
+        )}
+      </TouchableOpacity>
+
+      {isSubgroup && expanded && (
+        <View className='pl-4 bg-neutral-900'>
+          {option.options.map((child, childIndex) => (
+            <OptionItem
+              key={childIndex}
+              option={child}
+              isLast={childIndex === option.options.length - 1}
+            />
+          ))}
+        </View>
+      )}
+
+      {!isLast && (
+        <View
+          style={{ height: StyleSheet.hairlineWidth }}
+          className='bg-neutral-700 mx-4'
+        />
+      )}
+    </>
+  );
+};
+
+const OptionGroupComponent: React.FC<{ group: OptionGroup }> = ({ group }) => (
+  <OptionGroupCard title={group.title}>
+    {group.options.map((option, index) => (
+      <OptionItem
+        key={index}
+        option={option}
+        isLast={index === group.options.length - 1}
+      />
+    ))}
+  </OptionGroupCard>
+);
+
+const BottomSheetContent: React.FC<{
+  title?: string;
+  groups: OptionGroup[];
+  onOptionSelect?: (value?: any) => void;
+  onClose?: () => void;
+}> = ({ title, groups, onOptionSelect, onClose }) => {
+  const insets = useSafeAreaInsets();
+
+  // Recursively wrap options so radio/action presses also call
+  // onOptionSelect/onClose, including options nested inside subgroups.
+  const wrapOption = (option: Option): Option => {
+    if (option.type === "radio") {
+      return {
+        ...option,
+        onPress: () => {
+          option.onPress();
+          onOptionSelect?.(option.value);
+          onClose?.();
+        },
+      };
+    }
+    if (option.type === "toggle") {
+      return {
+        ...option,
+        onToggle: () => {
+          option.onToggle();
+          onOptionSelect?.(option.value);
+        },
+      };
+    }
+    if (option.type === "action") {
+      return {
+        ...option,
+        onPress: () => {
+          option.onPress();
+          onClose?.();
+        },
+      };
+    }
+    if (option.type === "subgroup") {
+      return { ...option, options: option.options.map(wrapOption) };
+    }
+    return option;
+  };
+
+  const wrappedGroups = groups.map((group) => ({
+    ...group,
+    options: group.options.map(wrapOption),
+  }));
+
+  return (
+    <BottomSheetScrollView
+      className='px-4 pb-8 pt-2'
+      style={{
+        paddingLeft: Math.max(16, insets.left),
+        paddingRight: Math.max(16, insets.right),
+      }}
+    >
+      {title && <Text className='font-bold text-2xl mb-6'>{title}</Text>}
+      {wrappedGroups.map((group, index) => (
+        <OptionGroupComponent key={index} group={group} />
+      ))}
+    </BottomSheetScrollView>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const PlayerSettingsPopoverComponent = ({
+  trigger,
+  title,
+  groups,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  onOptionSelect,
+  expoUIConfig,
+  bottomSheetConfig,
+}: PlayerSettingsPopoverProps) => {
+  const { showModal, hideModal, isVisible } = useGlobalModal();
+
+  // Android: controlled open routes through the global bottom-sheet modal.
+  useEffect(() => {
+    if (Platform.OS === "android" && controlledOpen === true) {
+      showModal(
+        <BottomSheetContent
+          title={title}
+          groups={groups}
+          onOptionSelect={onOptionSelect}
+          onClose={() => {
+            hideModal();
+            controlledOnOpenChange?.(false);
+          }}
+        />,
+        {
+          snapPoints: ["90%"],
+          enablePanDownToClose: bottomSheetConfig?.enablePanDownToClose ?? true,
+        },
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledOpen]);
+
+  useEffect(() => {
+    if (Platform.OS === "android" && controlledOpen === true && !isVisible) {
+      controlledOnOpenChange?.(false);
+    }
+  }, [isVisible, controlledOpen, controlledOnOpenChange]);
+
+  // Internal open state for the iOS popover. Synced both ways with
+  // `controlledOpen` when controlled.
+  const [iosOpen, setIosOpen] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS === "ios" && controlledOpen !== undefined) {
+      setIosOpen(controlledOpen);
+    }
+  }, [controlledOpen]);
+
+  const handleIosOpenChange = (value: boolean) => {
+    setIosOpen(value);
+    controlledOnOpenChange?.(value);
+  };
+
+  if (Platform.OS === "ios" && !Platform.isTV) {
+    const closePopover = () => handleIosOpenChange(false);
+
+    // ---- Swift-mock styled popover body ----
+    // Mirrors the reference Swift `PlayerSettingsViewController` design:
+    //   - small-caps section headers with a hairline rule to the trailing edge
+    //   - 44pt rows with leading SF Symbol, 15pt title, trailing value + glyph
+    //   - real native Slider rows for slider options
+    // Radio-only titled groups (Quality/Audio/Speed) are compressed to a
+    // single Menu row whose label is a styled HStack — tapping opens the
+    // selection menu without changing the panel's height.
+
+    type IconName = string | undefined;
+
+    const MENU_CHEVRON = "chevron.up.chevron.down" as const;
+    const TERTIARY = {
+      type: "hierarchical" as const,
+      style: "tertiary" as const,
+    };
+    const SECONDARY = {
+      type: "hierarchical" as const,
+      style: "secondary" as const,
+    };
+
+    /** 24pt-wide leading icon slot. Renders a transparent placeholder when
+     * no icon is set so titles stay aligned across rows. */
+    const renderIcon = (icon: IconName) => (
+      <SwiftImage
+        systemName={(icon ?? "circle") as any}
+        size={18}
+        modifiers={[
+          frame({ width: 24, alignment: "leading" }),
+          foregroundStyle(SECONDARY),
+          ...(icon ? [] : [opacity(0)]),
+        ]}
+      />
+    );
+
+    /** Small-caps section header + thin separator that fills the row width. */
+    const renderSectionHeader = (sectionTitle: string, key: string) => (
+      <HStack
+        key={key}
+        spacing={10}
+        alignment='center'
+        modifiers={[frame({ height: 28 })]}
+      >
+        <SwiftText
+          modifiers={[
+            font({ size: 11, weight: "semibold" }),
+            foregroundStyle(TERTIARY),
+          ]}
+        >
+          {sectionTitle.toUpperCase()}
+        </SwiftText>
+        <SwiftRectangle
+          modifiers={[frame({ height: 1 }), foregroundStyle(TERTIARY)]}
+        />
+      </HStack>
+    );
+
+    /** Bare hairline used to close out a multi-row titled section. */
+    const renderDivider = (key: string) => (
+      <SwiftRectangle
+        key={key}
+        modifiers={[
+          frame({ height: 1 }),
+          foregroundStyle(TERTIARY),
+          padding({ vertical: 2 }),
+        ]}
+      />
+    );
+
+    /** Render menu-safe children (radio/action) inside a SwiftUI Menu. */
+    const renderMenuChild = (option: Option, key: string): any => {
+      if (option.type === "radio") {
+        return (
+          <Button
+            key={key}
+            label={option.label}
+            systemImage={
+              (option.selected ? "checkmark.circle.fill" : "circle") as any
+            }
+            modifiers={option.disabled ? [disabled(true)] : undefined}
+            onPress={() => {
+              option.onPress();
+              onOptionSelect?.(option.value);
+              closePopover();
+            }}
+          />
+        );
+      }
+      if (option.type === "action") {
+        return (
+          <Button
+            key={key}
+            label={option.label}
+            modifiers={option.disabled ? [disabled(true)] : undefined}
+            onPress={() => {
+              option.onPress();
+              closePopover();
+            }}
+          />
+        );
+      }
+      return null;
+    };
+
+    /** Row that opens a SwiftUI Menu on tap. Used for compressed radio
+     * groups and for subgroup options inside a multi-row section. */
+    const renderMenuRow = ({
+      key,
+      icon,
+      title: rowTitle,
+      valueLabel,
+      children,
+    }: {
+      key: string;
+      icon: IconName;
+      title: string;
+      valueLabel?: string;
+      children: any;
+    }) => (
+      <Menu
+        key={key}
+        label={
+          <HStack
+            spacing={10}
+            alignment='center'
+            modifiers={[frame({ height: 44 })]}
+          >
+            {renderIcon(icon)}
+            <SwiftText modifiers={[font({ size: 15 })]}>{rowTitle}</SwiftText>
+            <Spacer />
+            {valueLabel ? (
+              <SwiftText
+                modifiers={[font({ size: 13 }), foregroundStyle(SECONDARY)]}
+              >
+                {valueLabel}
+              </SwiftText>
+            ) : null}
+            <SwiftImage
+              systemName={MENU_CHEVRON as any}
+              size={12}
+              modifiers={[foregroundStyle(TERTIARY)]}
+            />
+          </HStack>
+        }
+      >
+        {children}
+      </Menu>
+    );
+
+    const renderSliderRow = (option: SliderOption, key: string) => {
+      const display = option.format
+        ? option.format(option.value)
+        : option.value.toString();
+      return (
+        <HStack
+          key={key}
+          spacing={10}
+          alignment='center'
+          modifiers={[frame({ height: 44 })]}
+        >
+          {renderIcon(option.icon)}
+          <SwiftText
+            modifiers={[
+              font({ size: 15 }),
+              frame({ width: 64, alignment: "leading" }),
+            ]}
+          >
+            {option.label}
+          </SwiftText>
+          <SwiftSlider
+            value={option.value}
+            min={option.min}
+            max={option.max}
+            step={option.step}
+            modifiers={option.disabled ? [disabled(true)] : undefined}
+            onValueChange={option.onValueChange}
+          />
+          <SwiftText
+            modifiers={[
+              font({ size: 13, design: "monospaced" }),
+              foregroundStyle(SECONDARY),
+              frame({ width: 44, alignment: "trailing" }),
+            ]}
+          >
+            {display}
+          </SwiftText>
+        </HStack>
+      );
+    };
+
+    const renderStepperRow = (option: StepperOption, key: string) => {
+      const display = option.format
+        ? option.format(option.value)
+        : option.value.toString();
+      return (
+        <HStack
+          key={key}
+          spacing={10}
+          alignment='center'
+          modifiers={[frame({ height: 44 })]}
+        >
+          {renderIcon(option.icon)}
+          <SwiftText modifiers={[font({ size: 15 })]}>{option.label}</SwiftText>
+          <Spacer />
+          <Stepper
+            label={display}
+            value={option.value}
+            step={option.step}
+            min={option.min}
+            max={option.max}
+            modifiers={option.disabled ? [disabled(true)] : undefined}
+            onValueChange={option.onValueChange}
+          />
+        </HStack>
+      );
+    };
+
+    const renderToggleRow = (option: ToggleOption, key: string) => (
+      <HStack
+        key={key}
+        spacing={10}
+        alignment='center'
+        modifiers={[frame({ height: 44 })]}
+      >
+        {renderIcon(option.icon)}
+        <SwiftText modifiers={[font({ size: 15 })]}>{option.label}</SwiftText>
+        <Spacer />
+        <SwiftToggle
+          label=''
+          value={option.value}
+          modifiers={option.disabled ? [disabled(true)] : undefined}
+          onValueChange={() => {
+            option.onToggle();
+            onOptionSelect?.(option.value);
+          }}
+        />
+      </HStack>
+    );
+
+    const renderActionRow = (option: ActionOption, key: string) => (
+      <Button
+        key={key}
+        modifiers={[
+          buttonStyle("plain"),
+          ...(option.disabled ? [disabled(true)] : []),
+        ]}
+        onPress={() => {
+          option.onPress();
+          closePopover();
+        }}
+      >
+        <HStack
+          spacing={10}
+          alignment='center'
+          modifiers={[frame({ height: 44 })]}
+        >
+          {renderIcon(option.icon)}
+          <SwiftText modifiers={[font({ size: 15 })]}>{option.label}</SwiftText>
+          <Spacer />
+        </HStack>
+      </Button>
+    );
+
+    /** Render one Option as its own row inside a mixed (non-compressed)
+     * section. */
+    const renderOptionRow = (option: Option, key: string): any => {
+      if (option.type === "slider") return renderSliderRow(option, key);
+      if (option.type === "stepper") return renderStepperRow(option, key);
+      if (option.type === "toggle") return renderToggleRow(option, key);
+      if (option.type === "action") return renderActionRow(option, key);
+      if (option.type === "subgroup") {
+        const selectedChild = option.options.find(
+          (o): o is RadioOption => o.type === "radio" && o.selected,
+        );
+        return renderMenuRow({
+          key,
+          icon: option.icon,
+          title: option.label,
+          valueLabel: selectedChild?.label,
+          children: option.options.map((child, idx) =>
+            renderMenuChild(child, `${key}-c${idx}`),
+          ),
+        });
+      }
+      if (option.type === "radio") {
+        return (
+          <Button
+            key={key}
+            modifiers={[
+              buttonStyle("plain"),
+              ...(option.disabled ? [disabled(true)] : []),
+            ]}
+            onPress={() => {
+              option.onPress();
+              onOptionSelect?.(option.value);
+              closePopover();
+            }}
+          >
+            <HStack
+              spacing={10}
+              alignment='center'
+              modifiers={[frame({ height: 44 })]}
+            >
+              {renderIcon(option.icon)}
+              <SwiftText modifiers={[font({ size: 15 })]}>
+                {option.label}
+              </SwiftText>
+              <Spacer />
+              {option.selected ? (
+                <SwiftImage
+                  systemName={"checkmark" as any}
+                  size={14}
+                  modifiers={[foregroundStyle(SECONDARY)]}
+                />
+              ) : null}
+            </HStack>
+          </Button>
+        );
+      }
+      return null;
+    };
+
+    /**
+     * Render an entire OptionGroup.
+     *   - Titled group with only radio (or radio + action) options →
+     *     compressed to a single Menu row.
+     *   - Titled group containing slider/toggle/stepper/subgroup →
+     *     section header + individual rows.
+     *   - Untitled group → individual rows, no header.
+     */
+    const renderGroup = (group: OptionGroup, groupIndex: number): any[] => {
+      if (group.options.length === 0) return [];
+
+      const onlyMenuSafe = group.options.every(
+        (o) => o.type === "radio" || o.type === "action",
+      );
+
+      if (group.title && onlyMenuSafe) {
+        const selectedRadio = group.options.find(
+          (o): o is RadioOption => o.type === "radio" && o.selected,
+        );
+        return [
+          renderMenuRow({
+            key: `group-${groupIndex}`,
+            icon: group.icon,
+            title: group.title,
+            valueLabel: selectedRadio?.label,
+            children: group.options.map((opt, idx) =>
+              renderMenuChild(opt, `g${groupIndex}-c${idx}`),
+            ),
+          }),
+        ];
+      }
+
+      const rows: any[] = [];
+      if (group.title) {
+        rows.push(renderSectionHeader(group.title, `header-${groupIndex}`));
+      }
+      group.options.forEach((opt, idx) => {
+        rows.push(renderOptionRow(opt, `g${groupIndex}-o${idx}`));
+      });
+      return rows;
+    };
+
+    return (
+      <MeasuredTriggerHost
+        trigger={trigger}
+        hostStyle={expoUIConfig?.hostStyle}
+      >
+        <Popover
+          isPresented={iosOpen}
+          onIsPresentedChange={handleIosOpenChange}
+          arrowEdge='top'
+        >
+          <Popover.Trigger>
+            {/* Wrap the RN trigger view in a SwiftUI Button so tap handling
+                is captured at the SwiftUI layer (matches the codebase
+                pattern in SearchTabButtons.tsx). */}
+            <Button
+              modifiers={[buttonStyle("plain")]}
+              onPress={() => handleIosOpenChange(true)}
+            >
+              {trigger}
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content>
+            {/* Bare VStack — no Form/List chrome — so the panel reads as
+                the Swift mock's floating glass card. The popover itself
+                supplies the material background; we just stack rows
+                inside. Width pinned to ~320pt; height >= 480pt. */}
+            <VStack
+              spacing={0}
+              alignment='leading'
+              modifiers={[
+                padding({ horizontal: 18, top: 12, bottom: 12 }),
+                frame({
+                  minWidth: 300,
+                  idealWidth: 320,
+                  maxWidth: 360,
+                  minHeight: 480,
+                  idealHeight: 520,
+                }),
+                // Tint cascades to all child controls — Slider track, Menu
+                // checkmark, Stepper ± buttons, Toggle — so one modifier
+                // paints the whole popover white instead of system blue.
+                tint("white"),
+              ]}
+            >
+              {groups.flatMap((group, groupIndex) => {
+                const rows = renderGroup(group, groupIndex);
+                if (rows.length === 0) return [];
+                // After a multi-row titled section (Subtitles), append a
+                // bare hairline divider so it's clearly separated from
+                // the next group below.
+                const isMultiRow =
+                  !!group.title &&
+                  !group.options.every(
+                    (o) => o.type === "radio" || o.type === "action",
+                  );
+                const hasNext = groupIndex < groups.length - 1;
+                return isMultiRow && hasNext
+                  ? [...rows, renderDivider(`footer-${groupIndex}`)]
+                  : rows;
+              })}
+            </VStack>
+          </Popover.Content>
+        </Popover>
+      </MeasuredTriggerHost>
+    );
+  }
+
+  // Android: open the bottom sheet directly on press (uncontrolled mode).
+  const handlePress = () => {
+    showModal(
+      <BottomSheetContent
+        title={title}
+        groups={groups}
+        onOptionSelect={onOptionSelect}
+        onClose={hideModal}
+      />,
+      {
+        snapPoints: ["90%"],
+        enablePanDownToClose: bottomSheetConfig?.enablePanDownToClose ?? true,
+      },
+    );
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
+      {trigger || <Text className='text-white'>Open Menu</Text>}
+    </TouchableOpacity>
+  );
+};
+
+// Memoize to prevent unnecessary re-renders when parent re-renders.
+export const PlayerSettingsPopover = React.memo(
+  PlayerSettingsPopoverComponent,
+  (prevProps, nextProps) =>
+    prevProps.title === nextProps.title &&
+    prevProps.open === nextProps.open &&
+    prevProps.groups === nextProps.groups &&
+    prevProps.trigger === nextProps.trigger,
+);
--- a/eas.json
+++ b/eas.json
@@ -1,6 +1,7 @@
 {
  "cli": {
-    "version": ">= 9.1.0"
+    "version": ">= 16.0.0",
+    "appVersionSource": "remote"
  },
  "build": {
    "development": {
@@ -51,23 +52,26 @@
      }
    },
    "production": {
+      "bun": "1.3.5",
      "environment": "production",
-      "channel": "0.54.0",
+      "autoIncrement": true,
      "android": {
        "image": "latest"
      }
    },
    "production-apk": {
+      "bun": "1.3.5",
      "environment": "production",
-      "channel": "0.54.0",
+      "autoIncrement": true,
      "android": {
        "buildType": "apk",
        "image": "latest"
      }
    },
    "production-apk-tv": {
+      "bun": "1.3.5",
      "environment": "production",
-      "channel": "0.54.0",
+      "autoIncrement": true,
      "android": {
        "buildType": "apk",
        "image": "latest"
@@ -77,8 +81,9 @@
      }
    },
    "production_tv": {
+      "bun": "1.3.5",
      "environment": "production",
-      "channel": "0.54.0",
+      "autoIncrement": true,
      "env": {
        "EXPO_TV": "1"
      },
@@ -88,7 +93,22 @@
    }
  },
  "submit": {
-    "production": {},
-    "production_tv": {}
+    "production": {
+      "ios": {
+        "appleTeamId": "MWD5K362T8",
+        "ascAppId": "6593660679"
+      },
+      "android": {
+        "serviceAccountKeyPath": "./google-service-account.json",
+        "track": "internal",
+        "releaseStatus": "completed"
+      }
+    },
+    "production_tv": {
+      "ios": {
+        "appleTeamId": "MWD5K362T8",
+        "ascAppId": "6593660679"
+      }
+    }
  }
 }
--- a/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MPVLayerRenderer.kt
+++ b/modules/mpv-player/android/src/main/java/expo/modules/mpvplayer/MPVLayerRenderer.kt
@@ -715,9 +715,7 @@ class MPVLayerRenderer(private val context: Context) : MPVLib.EventObserver {
                // dropped), so we (re)apply here for embedded and external alike.
                // This is what makes a carried-over subtitle show up on the next
                // episode without a manual re-selection.
-                if (initialAudioId != null && initialAudioId > 0) {
-                    setAudioTrack(initialAudioId)
-                }
+                initialAudioId?.let { if (it > 0) setAudioTrack(it) }
                initialSubtitleId?.let { setSubtitleTrack(it) } ?: disableSubtitles()

                if (!isReadyToSeek) {
--- a/package.json
+++ b/package.json
@@ -32,9 +32,10 @@
    "@expo/react-native-action-sheet": "^4.1.1",
    "@expo/ui": "~56.0.14",
    "@expo/vector-icons": "^15.0.3",
-    "@gorhom/bottom-sheet": "5.2.8",
+    "@gorhom/bottom-sheet": "5.2.14",
    "@jellyfin/sdk": "^0.13.0",
    "@react-native-community/netinfo": "^12.0.0",
+    "@react-navigation/material-top-tabs": "7.4.28",
    "@react-navigation/native": "^7.2.5",
    "@shopify/flash-list": "2.0.2",
    "@tanstack/query-sync-storage-persister": "^5.100.14",
@@ -104,6 +105,7 @@
    "react-native-safe-area-context": "~5.7.0",
    "react-native-screens": "4.25.2",
    "react-native-svg": "15.15.4",
+    "react-native-tab-view": "4.3.0",
    "react-native-text-ticker": "^1.15.0",
    "react-native-track-player": "github:lovegaoshi/react-native-track-player#APM",
    "react-native-udp": "^4.1.7",
@@ -129,7 +131,7 @@
    "cross-env": "10.1.0",
    "expo-doctor": "1.19.7",
    "husky": "9.1.7",
-    "lint-staged": "17.0.6",
+    "lint-staged": "17.0.5",
    "react-test-renderer": "19.2.3",
    "typescript": "5.9.3"
  },
@@ -162,10 +164,5 @@
  },
  "trustedDependencies": [
    "unrs-resolver"
-  ],
-  "patchedDependencies": {
-    "react-native-udp@4.1.7": "bun-patches/react-native-udp@4.1.7.patch",
-    "react-native-bottom-tabs@1.2.0": "bun-patches/react-native-bottom-tabs@1.2.0.patch",
-    "react-native-ios-utilities@5.2.0": "bun-patches/react-native-ios-utilities@5.2.0.patch"
-  }
+  ]
 }
--- a/bun-patches/react-native-bottom-tabs@1.2.0.patch
+++ b/bun-patches/react-native-bottom-tabs@1.2.0.patch
@@ -1,10 +1,7 @@
-diff --git a/node_modules/react-native-bottom-tabs/.bun-tag-b32ab1c60a5dfcf7 b/.bun-tag-b32ab1c60a5dfcf7
-new file mode 100644
-index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
-diff --git a/ios/BottomAccessoryProvider.swift b/ios/BottomAccessoryProvider.swift
+diff --git a/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift b/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift
 index 539efee7156599e1fc795e11bf411b7dfaf12ec7..b2af39a2e6b014e9b1ae0a51b21115c19280df69 100644
--- a/ios/BottomAccessoryProvider.swift
-+++ b/ios/BottomAccessoryProvider.swift
+--- a/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift
+++ b/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift
@@ -8,7 +8,7 @@ import SwiftUI
     self.delegate = delegate
   }
@@ -14,10 +11,10 @@ index 539efee7156599e1fc795e11bf411b7dfaf12ec7..b2af39a2e6b014e9b1ae0a51b21115c1
   @available(iOS 26.0, *)
   public func emitPlacementChanged(_ placement: TabViewBottomAccessoryPlacement?) {
     var placementValue = "none"
-diff --git a/ios/TabView/NewTabView.swift b/ios/TabView/NewTabView.swift
+diff --git a/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift b/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift
 index 22c52cdf25ad0f7398d89197cb431ca8dc8e0f99..81411376e68803de8bd83515d42565cfa95daf2b 100644
--- a/ios/TabView/NewTabView.swift
-+++ b/ios/TabView/NewTabView.swift
+--- a/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift
@@ -78,11 +78,11 @@ struct ConditionalBottomAccessoryModifier: ViewModifier {
   }
 
@@ -56,10 +53,10 @@ index 22c52cdf25ad0f7398d89197cb431ca8dc8e0f99..81411376e68803de8bd83515d42565cf
 }
 #endif
 +
-diff --git a/ios/TabViewImpl.swift b/ios/TabViewImpl.swift
+diff --git a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
 index 72938be90540ea3a483d7db9a80fb74c04d31272..277278ffdd9268a96cb09869eb1d0c0d5e6ad300 100644
--- a/ios/TabViewImpl.swift
-+++ b/ios/TabViewImpl.swift
+--- a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift
@@ -281,7 +281,7 @@ extension View {
 
   @ViewBuilder
@@ -69,10 +66,10 @@ index 72938be90540ea3a483d7db9a80fb74c04d31272..277278ffdd9268a96cb09869eb1d0c0d
     if #available(iOS 26.0, macOS 26.0, *) {
         if let behavior {
           self.tabBarMinimizeBehavior(behavior.convert())
-diff --git a/ios/TabViewProps.swift b/ios/TabViewProps.swift
+diff --git a/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift b/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift
 index 9cfb29a983b34d3f84fc7a678d19ef4ff30e0325..6a5854483e66200b71722bbac12e100742222bd3 100644
--- a/ios/TabViewProps.swift
-+++ b/ios/TabViewProps.swift
+--- a/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift
@@ -6,7 +6,7 @@ internal enum MinimizeBehavior: String {
   case onScrollUp
   case onScrollDown
--- a/bun-patches/react-native-ios-utilities@5.2.0.patch
+++ b/bun-patches/react-native-ios-utilities@5.2.0.patch
@@ -1,7 +1,7 @@
-diff --git a/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift b/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift
+diff --git a/node_modules/react-native-ios-utilities/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift b/node_modules/react-native-ios-utilities/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift
 index 09be306d5aa39337c5114c2ad6ba7513218e0751..24ff8ee2c36fef8632a7e012514fd04db9bf89fd 100644
--- a/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift
-+++ b/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift
+--- a/node_modules/react-native-ios-utilities/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift
+++ b/node_modules/react-native-ios-utilities/ios/Sources/Extensions+Helpers/RCTView+Helpers.swift
@@ -25,15 +25,14 @@ public extension RCTView {
     return rootView.recursivelyFindSubview(whereType: targetType);
   };
--- a/bun-patches/react-native-udp@4.1.7.patch
+++ b/bun-patches/react-native-udp@4.1.7.patch
@@ -1,10 +1,7 @@
-diff --git a/node_modules/react-native-udp/.bun-tag-ea7df8754aa4db91 b/.bun-tag-ea7df8754aa4db91
-new file mode 100644
-index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
-diff --git a/react-native-udp.podspec b/react-native-udp.podspec
+diff --git a/node_modules/react-native-udp/react-native-udp.podspec b/node_modules/react-native-udp/react-native-udp.podspec
 index 7450cc7d0862aadfb47d796929c801a3dc423a57..fa3e42c0152ef2d87536b8c2e484f64d525e35ec 100644
--- a/react-native-udp.podspec
-+++ b/react-native-udp.podspec
+--- a/node_modules/react-native-udp/react-native-udp.podspec
+++ b/node_modules/react-native-udp/react-native-udp.podspec
@@ -9,7 +9,8 @@ Pod::Spec.new do |s|
   s.homepage       = package_json["homepage"]
   s.license        = package_json["license"]
--- a/plugins/with-runtime-framework-headers.js
+++ b/plugins/with-runtime-framework-headers.js
@@ -39,6 +39,28 @@ function buildPatch() {
    "    end",
    "  end",
    "",
+    "  # iOS 26 / Xcode 26: the APP target itself compiles ExpoModulesProvider.swift,",
+    "  # which imports SwiftUI-based modules (ExpoUI, ExpoGlassEffect, GlassPoster, ExpoBlur, …).",
+    "  # That emits a `-framework SwiftUICore` autolink into the app executable's OWN object",
+    "  # files, so the pods-only flag above is not enough — the app's link still fails with",
+    "  # `cannot link directly with 'SwiftUICore'`. Drop the autolink on the user app target",
+    "  # too. Phone-only — tvOS has no SwiftUICore split and must stay untouched.",
+    "  if ENV['EXPO_TV'] != '1'",
+    "    installer.aggregate_targets.each do |agg|",
+    "      next unless agg.user_project",
+    "      agg.user_project.native_targets.each do |target|",
+    "        target.build_configurations.each do |cfg|",
+    "          existing = cfg.build_settings['OTHER_SWIFT_FLAGS'] || '$(inherited)'",
+    "          existing = existing.join(' ') if existing.is_a?(Array)",
+    "          unless existing.include?('-disable-autolink-framework -Xfrontend SwiftUICore')",
+    "            cfg.build_settings['OTHER_SWIFT_FLAGS'] = existing + ' -Xfrontend -disable-autolink-framework -Xfrontend SwiftUICore'",
+    "          end",
+    "        end",
+    "      end",
+    "      agg.user_project.save",
+    "    end",
+    "  end",
+    "",
    "  # Safely patch RCTThirdPartyComponentsProvider.mm to avoid startup crash on unlinked Fabric components",
    '  filepath = "#{installer.sandbox.root}/../build/generated/ios/ReactCodegen/RCTThirdPartyComponentsProvider.mm"',
    "  if File.exist?(filepath)",
--- a/providers/JellyfinProvider.tsx
+++ b/providers/JellyfinProvider.tsx
@@ -53,7 +53,7 @@ const initialApi = (() => {
      const id = getOrSetDeviceId();
      const deviceName = getDeviceNameSync();
      const jellyfinInstance = new Jellyfin({
-        clientInfo: { name: "Streamyfin", version: "0.54.0" },
+        clientInfo: { name: "Streamyfin", version: "0.54.1" },
        deviceInfo: {
          name: deviceName,
          id,
@@ -128,7 +128,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
      const id = getOrSetDeviceId();
      const deviceName = getDeviceNameSync();
      return new Jellyfin({
-        clientInfo: { name: "Streamyfin", version: "0.54.0" },
+        clientInfo: { name: "Streamyfin", version: "0.54.1" },
        deviceInfo: {
          name: deviceName,
          id,
@@ -162,7 +162,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
    return {
      authorization: `MediaBrowser Client="Streamyfin", Device=${
        Platform.OS === "android" ? "Android" : "iOS"
-      }, DeviceId="${deviceId}", Version="0.54.0"`,
+      }, DeviceId="${deviceId}", Version="0.54.1"`,
    };
  }, [deviceId]);

--- a/targets/StreamyfinTopShelf/Info.plist
+++ b/targets/StreamyfinTopShelf/Info.plist
@@ -29,6 +29,10 @@
    <string>$(MARKETING_VERSION)</string>
    <key>CFBundleVersion</key>
    <string>$(CURRENT_PROJECT_VERSION)</string>
+    <key>UIRequiredDeviceCapabilities</key>
+    <array>
+      <string>arm64</string>
+    </array>
    <key>NSExtension</key>
    <dict>
      <key>NSExtensionPointIdentifier</key>
--- a/translations/de.json
+++ b/translations/de.json
@@ -608,7 +608,8 @@
    "downloaded_file_message": "Heruntergeladene Datei abspielen?",
    "downloaded_file_yes": "Ja",
    "downloaded_file_no": "Nein",
-    "downloaded_file_cancel": "Abbrechen"
+    "downloaded_file_cancel": "Abbrechen",
+    "ends_at": "Endet um {{time}}"
  },
  "item_card": {
    "next_up": "Als Nächstes",
--- a/translations/en.json
+++ b/translations/en.json
@@ -698,7 +698,7 @@
    "downloaded_file_no": "No",
    "downloaded_file_cancel": "Cancel",
    "swipe_down_settings": "Swipe down for settings",
-    "ends_at": "ends at",
+    "ends_at": "Ends at {{time}}",
    "search_subtitles": "Search Subtitles",
    "subtitle_tracks": "Tracks",
    "subtitle_search": "Search & Download",
Author	SHA1	Message	Date
Alex Kim	fef1e7f122	feat(video-player): Update in player controls to new UI	2026-05-31 23:53:12 +10:00
Fredrik Burmester	c981f59a50	fix(downloads): repair bottom sheets on iOS and restore downloads delete sheet Some checks are pending 🏗️ Build Apps / 🤖 Build Android APK (Phone) (push) Waiting to run Details 🏗️ Build Apps / 🤖 Build Android APK (TV) (push) Waiting to run Details 🏗️ Build Apps / 🍎 Build iOS IPA (Phone) (push) Waiting to run Details 🏗️ Build Apps / 🍎 Build iOS IPA (Phone - Unsigned) (push) Waiting to run Details 🏗️ Build Apps / 🍎 Build tvOS IPA (push) Waiting to run Details 🏗️ Build Apps / 🍎 Build tvOS IPA (Unsigned) (push) Waiting to run Details 🔒 Lockfile Consistency Check / 🔍 Check bun.lock and package.json consistency (push) Waiting to run Details 🛡️ CodeQL Analysis / 🔎 Analyze with CodeQL (actions) (push) Waiting to run Details 🛡️ CodeQL Analysis / 🔎 Analyze with CodeQL (javascript-typescript) (push) Waiting to run Details 🏷️🔀Merge Conflict Labeler / 🏷️ Labeling Merge Conflicts (push) Waiting to run Details 🌐 Translation Sync / sync-translations (push) Waiting to run Details 🚦 Security & Quality Gate / 📝 Validate PR Title (push) Waiting to run Details 🚦 Security & Quality Gate / 🔍 Vulnerable Dependencies (push) Waiting to run Details 🚦 Security & Quality Gate / 🚑 Expo Doctor Check (push) Waiting to run Details 🚦 Security & Quality Gate / 🔍 Lint & Test (check) (push) Waiting to run Details 🚦 Security & Quality Gate / 🔍 Lint & Test (format) (push) Waiting to run Details 🚦 Security & Quality Gate / 🔍 Lint & Test (lint) (push) Waiting to run Details 🚦 Security & Quality Gate / 🔍 Lint & Test (typecheck) (push) Waiting to run Details Bump @gorhom/bottom-sheet 5.2.8 -> 5.2.14, which fixes BottomSheetModal present() silently no-opping under Reanimated 4 / New Architecture (SDK 56). Affected every sheet app-wide: present() was called with a valid ref but nothing rendered (not even the backdrop). Verified on the iOS simulator that the download options sheet now opens. Also restore the downloads-page delete sheet (delete movies/series/other/all) that was accidentally dropped in the Expo 54 rewrite (#1174), which left an orphaned trigger button and underscore-silenced handlers.	2026-05-31 14:58:51 +02:00
Alex	62fc6f9a70	fix(progress-bar): Fix progress bar not reporting watch times (#1611 ) Co-authored-by: Gauvain <contact@uruk.dev>	2026-05-31 22:12:13 +10:00
Fredrik Burmester	eb8dd51b4e	feat(ci): EAS build + auto-submit release workflow for main (#1616 )	2026-05-31 13:23:02 +02:00
Fredrik Burmester	ea5a999f21	fix(deps): declare react-native-tab-view and material-top-tabs (#1617 )	2026-05-31 12:40:56 +02:00
Felix Schneider	dffcdef945	feat(i18n): Add translation for "ends at" (#1474 ) Co-authored-by: Gauvain <contact@uruk.dev>	2026-05-31 12:10:22 +02:00
Fredrik Burmester	fa1c3f3947	chore(eas): pin appleTeamId and ascAppId in submit profiles Some checks failed 🏗️ Build Apps / 🤖 Build Android APK (Phone) (push) Has been cancelled Details 🏗️ Build Apps / 🤖 Build Android APK (TV) (push) Has been cancelled Details 🏗️ Build Apps / 🍎 Build iOS IPA (Phone) (push) Has been cancelled Details 🏗️ Build Apps / 🍎 Build iOS IPA (Phone - Unsigned) (push) Has been cancelled Details 🏗️ Build Apps / 🍎 Build tvOS IPA (push) Has been cancelled Details 🏗️ Build Apps / 🍎 Build tvOS IPA (Unsigned) (push) Has been cancelled Details 🔒 Lockfile Consistency Check / 🔍 Check bun.lock and package.json consistency (push) Has been cancelled Details 🛡️ CodeQL Analysis / 🔎 Analyze with CodeQL (actions) (push) Has been cancelled Details 🛡️ CodeQL Analysis / 🔎 Analyze with CodeQL (javascript-typescript) (push) Has been cancelled Details 🏷️🔀Merge Conflict Labeler / 🏷️ Labeling Merge Conflicts (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Vulnerable Dependencies (push) Has been cancelled Details 🚦 Security & Quality Gate / 📝 Validate PR Title (push) Has been cancelled Details 🚦 Security & Quality Gate / 🚑 Expo Doctor Check (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Lint & Test (check) (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Lint & Test (format) (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Lint & Test (lint) (push) Has been cancelled Details 🚦 Security & Quality Gate / 🔍 Lint & Test (typecheck) (push) Has been cancelled Details Avoid the interactive Apple team picker and app-existence lookup on submit by pinning the Individual team (MWD5K362T8) and ASC App ID.	2026-05-31 11:22:59 +02:00
Fredrik Burmester	2761de5a74	chore(eas): use remote app version source with autoIncrement Switch cli.appVersionSource to remote and enable autoIncrement on all production profiles so EAS bumps the build number every release instead of resetting to 1. Remove the dead android.versionCode from app.json and the unused EAS Update channel (no expo-updates installed).	2026-05-31 11:22:59 +02:00
Fredrik Burmester	feca1d7e9c	fix(android): resolve mpv-player Kotlin smart-cast build error (#1614 )	2026-05-31 10:50:06 +02:00
Fredrik Burmester	6b6bfd1a89	fix(player): remove white blob artifacts on vertical sliders	2026-05-31 10:48:24 +02:00
Fredrik Burmester	d585b20f49	chore: version	2026-05-31 09:44:05 +02:00
Fredrik Burmester	692ccfdb2c	fix(tvos): add arm64 UIRequiredDeviceCapabilities to Top Shelf extension App Store Connect rejected TestFlight submissions because the Top Shelf extension binary has a 64-bit slice but did not declare arm64 under UIRequiredDeviceCapabilities in its Info.plist.	2026-05-31 09:42:09 +02:00
Fredrik Burmester	86e39c444c	fix(ios): SDK 56 / iOS 26 EAS build fixes (SwiftUICore autolink + patch-package) (#1613 )	2026-05-31 09:37:08 +02:00