Add more

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -43,7 +43,6 @@ body:
       label: Version
       description: What version of Streamyfin are you running?
       options:
-        - 0.28.1
         - 0.28.0
         - 0.27.0
         - 0.26.1

.github/workflows/build-android_Miron.yml

@@ -1,82 +0,0 @@
-name: 🤖 Android APK Build
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-on:
-  workflow_dispatch:
-  pull_request:
-    branches: [develop, master,ninjalama-patch-1]
-  push:
-    branches: [develop, master, ninjalama-patch-1]
-
-jobs:
-  build:
-    runs-on: ubuntu-24.04
-    name: 🏗️ Build Android APK
-    permissions:
-      contents: read
-
-    steps:
-      - name: 📥 Checkout code
-        uses: actions/checkout@v4 # v4.2.2
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          show-progress: false
-          submodules: recursive
-          fetch-depth: 0
-
-      - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
-        with:
-          bun-version: '1.2.17'
-
-      - name: ☕ Setup JDK
-        uses: actions/setup-java@c5195efecf7bdfc987ee8bae7a71cb8b11521c00 # v4.7.1
-        with:
-          distribution: 'zulu'
-          java-version: '17'
-
-      - name: Set up Android SDK
-        uses: android-actions/setup-android@v2
-
-      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
-        with:
-          path: ~/.bun/install/cache
-          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-bun-cache-
-
-      - name: 📦 Install dependencies
-        run: |
-          bun install --frozen-lockfile
-          bun run submodule-reload
-
-      - name: 💾 Cache Android dependencies
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
-        with:
-          path: |
-            android/.gradle
-          key: ${{ runner.os }}-android-deps-${{ hashFiles('android/**/build.gradle') }}
-          restore-keys: |
-            ${{ runner.os }}-android-deps-
-
-      - name: 🛠️ Generate project files
-        run: bun run prebuild
-
-      - name: 🚀 Build APK via Bun
-        run: bun run build:android:local
-
-      - name: 📅 Set date tag
-        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
-
-      - name: 📤 Upload APK artifact
-        uses: actions/upload-artifact@v3
-        with:
-          name: streamyfin-apk-${{ env.DATE_TAG }}
-          path: |
-            android/app/build/outputs/apk/release/*.apk
-            android/app/build/outputs/bundle/release/*.aab
-          retention-days: 7

.github/workflows/build-ios.yaml

@@ -0,0 +1,49 @@
+name: Automatic Build and Deploy
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: macos-15
+    name: Build IOS
+    steps:
+      - uses: actions/checkout@v2
+        name: Check out repository
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+      - run: |
+          bun i && bun run submodule-reload
+          npx expo prebuild
+      - uses: sparkfabrik/ios-build-action@v2.3.0
+        with:
+          upload-to-testflight: false
+          increment-build-number: false
+          build-pods: true
+          pods-path: "ios/Podfile"
+          configuration: Release
+          # Change later to app-store if wanted
+          export-method: appstore
+          #export-method: ad-hoc
+          workspace-path: "ios/Streamyfin.xcodeproj/project.xcworkspace/"
+          project-path: "ios/Streamyfin.xcodeproj"
+          scheme: Streamyfin
+          apple-key-id: ${{ secrets.APPLE_KEY_ID }}
+          apple-key-issuer-id: ${{ secrets.APPLE_KEY_ISSUER_ID }}
+          apple-key-content: ${{ secrets.APPLE_KEY_CONTENT }}
+          team-id: ${{ secrets.TEAM_ID }}
+          team-name: ${{ secrets.TEAM_NAME }}
+          #match-password: ${{ secrets.MATCH_PASSWORD }}
+          #match-git-url: ${{ secrets.MATCH_GIT_URL }}
+          #match-git-basic-authorization: ${{ secrets.MATCH_GIT_BASIC_AUTHORIZATION }}
+          #match-build-type: "appstore"
+          #browserstack-upload: true
+          #browserstack-username: ${{ secrets.BROWSERSTACK_USERNAME }}
+          #browserstack-access-key: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+          #fastlane-env: stage
+          ios-app-id: com.stetsed.teststreamyfin
+          output-path: build-${{ github.sha }}.ipa

.github/workflows/build-ios.yml

@@ -1,70 +0,0 @@
-name: 🤖 iOS IPA Build
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-on:
-  workflow_dispatch:
-  pull_request:
-    branches: [develop, master]
-  push:
-    branches: [develop, master]
-
-jobs:
-  build:
-    runs-on: macos-15
-    name: 🏗️ Build iOS IPA
-    permissions:
-      contents: read
-
-    steps:
-      - name: 📥 Check out repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          show-progress: false
-          submodules: recursive
-          fetch-depth: 0
-
-      - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
-        with:
-          bun-version: '1.2.17'
-
-      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
-        with:
-          path: ~/.bun/install/cache
-          key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-bun-cache-
-
-      - name: 📦 Install & Prepare
-        run: |
-          bun install --frozen-lockfile
-          bun run submodule-reload
-
-      - name: 🛠️ Generate project files
-        run: bun run prebuild
-
-      - name: 🏗 Setup EAS
-        uses: expo/expo-github-action@main
-        with:
-          eas-version: 16.7.1
-          token: ${{ secrets.EXPO_TOKEN }}
-
-      - name: 🏗️ Build iOS app
-        run: |
-          eas build -p ios --local --non-interactive
-
-      - name: 📅 Set date tag
-        run: echo "DATE_TAG=$(date +%d-%m-%Y_%H-%M-%S)" >> $GITHUB_ENV
-
-      - name: 📤 Upload IPA artifact
-        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
-        with:
-          name: streamyfin-ipa-${{ env.DATE_TAG }}
-          path: |
-            build-*.ipa
-          retention-days: 7

.github/workflows/check-lockfile.yml

@@ -1,46 +0,0 @@
-name: 🔒 Lockfile Consistency Check
-
-on:
-  pull_request:
-    branches: [develop, master]
-  push:
-    branches: [develop, master]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  check-lockfile:
-    name: 🔍 Check bun.lock and package.json consistency
-    runs-on: ubuntu-24.04
-    permissions:
-      contents: read
-
-    steps:
-      - name: 📥 Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          show-progress: false
-          submodules: recursive
-          fetch-depth: 0
-
-      - name: 🍞 Setup Bun
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
-        with:
-          bun-version: '1.2.17'
-
-      - name: 💾 Cache Bun dependencies
-        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
-        with:
-          path: |
-            ~/.bun/install/cache
-          key: ${{ runner.os }}-bun-${{ hashFiles('bun.lock') }}
-
-      - name: 🛡️ Verify lockfile consistency
-        run: |
-          set -euxo pipefail
-          echo "➡️ Checking for discrepancies between bun.lock and package.json..."
-          bun install --frozen-lockfile --dry-run --ignore-scripts
-          echo "✅ Lockfile is consistent with package.json!"

.github/workflows/ci-codeql.yml

@@ -1,43 +0,0 @@
-name: 🛡️ CodeQL Analysis
-
-on:
-  push:
-    branches: [master, develop]
-  pull_request:
-    branches: [master, develop]
-  schedule:
-    - cron: '24 2 * * *'
-
-
-jobs:
-  analyze:
-    name: 🔎 Analyze with CodeQL
-    runs-on: ubuntu-24.04
-    permissions:
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript-typescript' ]
-
-    steps:
-      - name: 📥 Checkout repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.sha }}
-          show-progress: false
-          fetch-depth: 0
-
-      - name: 🏁 Initialize CodeQL
-        uses: github/codeql-action/init@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
-        with:
-          languages: ${{ matrix.language }}
-          queries: +security-extended,security-and-quality
-
-      - name: 🛠️ Autobuild
-        uses: github/codeql-action/autobuild@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2
-
-      - name: 🧪 Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@181d5eefc20863364f96762470ba6f862bdef56b # v3.29.2

.github/workflows/conflict.yml

@@ -1,24 +0,0 @@
-name: 🏷️🔀Merge Conflict Labeler
-
-on:
-  push:
-    branches: [develop]
-  pull_request_target:
-    branches: [develop]
-    types: [synchronize]
-
-jobs:
-  label:
-    name: 🏷️ Labeling Merge Conflicts
-    runs-on: ubuntu-24.04
-    if: ${{ github.repository == 'streamyfin/streamyfin' }}
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: 🚩 Apply merge conflict label
-        uses: eps1lon/actions-label-merge-conflict@1df065ebe6e3310545d4f4c4e862e43bdca146f0 # v3.0.3
-        with:
-          dirtyLabel: 'merge-conflict'
-          commentOnDirty: 'This pull request has merge conflicts. Please resolve the conflicts so the PR can be successfully reviewed and merged.'
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/lint-pr.yaml

@@ -0,0 +1,41 @@
+name: "Lint PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+
+permissions:
+  pull-requests: write
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: marocchino/sticky-pull-request-comment@v2
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Hey there and thank you for opening this pull request! 👋🏼
+            
+            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
+
+            Details:
+            
+            ```
+            ${{ steps.lint_pr_title.outputs.error_message }}
+            ```
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:   
+          header: pr-title-lint-error
+          delete: true

.github/workflows/lint.yaml

@@ -0,0 +1,28 @@
+name: Lint
+
+on:
+  pull_request:
+    branches: [ develop, master ]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run linting checks
+        run: bun run check

.github/workflows/linting.yml

@@ -1,95 +0,0 @@
-name: 🚦 Security & Quality Gate
-
-on:
-  pull_request_target:
-    types: [opened, edited, synchronize, reopened]
-    branches: [develop, master]
-  workflow_dispatch:
-
-permissions:
-  contents: read
-
-jobs:
-  validate_pr_title:
-    name: "📝 Validate PR Title"
-    runs-on: ubuntu-24.04
-    permissions:
-      pull-requests: write
-      contents: read
-    steps:
-      - uses: amannn/action-semantic-pull-request@0723387faaf9b38adef4775cd42cfd5155ed6017 # v5.5.3
-        id: lint_pr_title
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - uses: marocchino/sticky-pull-request-comment@d2ad0de260ae8b0235ce059e63f2949ba9e05943 # v2.9.3
-        if: always() && (steps.lint_pr_title.outputs.error_message != null)
-        with:
-          header: pr-title-lint-error
-          message: |
-            Hey there and thank you for opening this pull request! 👋🏼
-            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/).
-
-            **Error details:**
-            ```
-            ${{ steps.lint_pr_title.outputs.error_message }}
-            ```
-
-      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
-        uses: marocchino/sticky-pull-request-comment@d2ad0de260ae8b0235ce059e63f2949ba9e05943 # v2.9.3
-        with:
-          header: pr-title-lint-error
-          delete: true
-
-  dependency-review:
-    name: 🔍 Vulnerable Dependencies
-    runs-on: ubuntu-24.04
-    permissions:
-      contents: read
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 0
-
-      - name: Dependency Review
-        uses: actions/dependency-review-action@da24556b548a50705dd671f47852072ea4c105d9 # v4.7.1
-        with:
-          fail-on-severity: high
-          deny-licenses: GPL-3.0, AGPL-3.0
-          base-ref: ${{ github.event.pull_request.base.sha || 'develop' }}
-          head-ref: ${{ github.event.pull_request.head.sha || github.ref }}
-
-  code_quality:
-    name: "🔍 Lint & Test (${{ matrix.command }})"
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        command:
-          - "lint"
-          - "check"
-    steps:
-      - name: "📥 Checkout PR code"
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          submodules: recursive
-          fetch-depth: 0
-
-      - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
-        with:
-          node-version: '22.x'
-
-      - name: "🍞 Setup Bun"
-        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
-        with:
-          bun-version: '1.2.17'
-
-      - name: "📦 Install dependencies"
-        run: bun install --frozen-lockfile
-
-      - name: "🚨 Run ${{ matrix.command }}"
-        run: bun run ${{ matrix.command }}

.github/workflows/main.yml

@@ -0,0 +1,39 @@
+name: Handle Stale Issues
+on:
+  schedule:
+    - cron: "30 1 * * *" # Runs at 1:30 UTC every day
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+      - uses: actions/stale@v9
+        with:
+          # Issue specific settings
+          days-before-issue-stale: 90
+          days-before-issue-close: 7
+          stale-issue-label: "stale"
+          stale-issue-message: |
+            This issue has been automatically marked as stale because it has had no activity in the last 30 days.
+
+            If this issue is still relevant, please leave a comment to keep it open. 
+            Otherwise, it will be closed in 7 days if no further activity occurs.
+
+            Thank you for your contributions!
+          close-issue-message: |
+            This issue has been automatically closed because it has been inactive for 7 days since being marked as stale.
+
+            If you believe this issue is still relevant, please feel free to reopen it and add a comment explaining the current status.
+
+          # Pull request settings (disabled)
+          days-before-pr-stale: -1
+          days-before-pr-close: -1
+
+          # Other settings
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          operations-per-run: 100
+          exempt-issue-labels: "Roadmap v1,help needed,enhancement"

.github/workflows/notification.yaml

@@ -0,0 +1,18 @@
+name: Discord Pull Request Notification
+
+on:
+  pull_request:
+    types: [opened, reopened]
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: joelwmale/webhook-action@master
+        with:
+          url: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          body: |
+            {
+              "content": "New Pull Request: ${{ github.event.pull_request.title }}\nBy: ${{ github.event.pull_request.user.login }}\n\n${{ github.event.pull_request.html_url }}",
+              "avatar_url": "https://avatars.githubusercontent.com/u/193271640"
+            }

.github/workflows/notification.yml

@@ -1,23 +0,0 @@
-name: 🛎️ Discord Pull Request Notification
-
-on:
-  pull_request:
-    types: [opened, reopened]
-    branches: [develop]
-
-jobs:
-  notify:
-    runs-on: ubuntu-24.04
-    steps:
-      - name: 🛎️ Notify Discord
-        uses: Ilshidur/action-discord@0c4b27844ba47cb1c7bee539c8eead5284ce9fa9 # 0.3.2
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          DISCORD_AVATAR: https://avatars.githubusercontent.com/u/193271640
-        with:
-          args: |
-            📢 New Pull Request in **${{ github.repository }}**
-            **Title:** ${{ github.event.pull_request.title }}
-            **By:** ${{ github.event.pull_request.user.login }}
-            **Branch:** ${{ github.event.pull_request.head.ref }}
-            🔗 ${{ github.event.pull_request.html_url }}

.github/workflows/stale.yml

@@ -1,49 +0,0 @@
-name: 🕒 Handle Stale Issues
-
-on:
-  schedule:
-    # Runs daily at 1:30 AM UTC (3:30 AM CEST - France time)
-    - cron: "30 1 * * *"
-
-jobs:
-  stale-issues:
-    name: 🗑️ Cleanup Stale Issues
-    runs-on: ubuntu-24.04
-    permissions:
-      issues: write
-      pull-requests: write
-
-    steps:
-      - name: 🔄 Mark/Close Stale Issues
-        uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9.1.0
-        with:
-          # Global settings
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          operations-per-run: 500  # Increase if you have >1000 issues
-          log-level: debug
-
-          # Issue configuration
-          days-before-issue-stale: 90
-          days-before-issue-close: 7
-          stale-issue-label: "stale"
-          exempt-issue-labels: "Roadmap v1,help needed,enhancement"
-
-          # Notifications messages
-          stale-issue-message: |
-            ⏳ This issue has been automatically marked as **stale** because it has had no activity for 90 days.
-
-            **Next steps:**
-            - If this is still relevant, add a comment to keep it open
-            - Otherwise, it will be closed in 7 days
-
-            Thank you for your contributions! 🙌
-
-          close-issue-message: |
-            🚮 This issue has been automatically closed due to inactivity (7 days since being marked stale).
-
-            **Need to reopen?**
-            Click "Reopen" and add a comment explaining why this should stay open.
-
-          # Disable PR handling
-          days-before-pr-stale: -1
-          days-before-pr-close: -1

.gitignore

@@ -11,6 +11,7 @@ npm-debug.*
 web-build/
 modules/vlc-player/android/build
 modules/vlc-player/android/.gradle
+bun.lockb
 
 # macOS
 .DS_Store
@@ -19,7 +20,9 @@ expo-env.d.ts
 
 Streamyfin.app
 
+build-*
 *.mp4
+build-*
 Streamyfin.app
 package-lock.json
 
@@ -44,5 +47,4 @@ credentials.json
 modules/hls-downloader/android/build
 streamyfin-4fec1-firebase-adminsdk.json
 .env
-.env.local
-*.aab
+.env.local

.vscode/settings.json

@@ -4,12 +4,12 @@
     "editor.formatOnSave": true
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "vscode.typescript-language-features",
+    "editor.defaultFormatter": "biomejs.biome",
     "editor.formatOnSave": true
   },
   "prettier.printWidth": 120,
   "[swift]": {
-    "editor.defaultFormatter": "sswg.swift-lang"
+    "editor.defaultFormatter": "swiftlang.swift-vscode"
   },
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "biomejs.biome",

README.md

@@ -2,7 +2,7 @@
 
 <a href="https://www.buymeacoffee.com/fredrikbur3" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
 
-A simple and user-friendly Jellyfin video streaming client built with Expo. If you are looking for an alternative to other Jellyfin clients, we hope you find Streamyfin a useful addition to your media streaming toolbox.
+Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Expo. If you're looking for an alternative to other Jellyfin clients, we hope you'll find Streamyfin to be a useful addition to your media streaming toolbox.
 
 <div style="display: flex; flex-direction: row; gap: 8px">
   <img width=150 src="./assets/images/screenshots/screenshot1.png" />
@@ -15,47 +15,47 @@ A simple and user-friendly Jellyfin video streaming client built with Expo. If y
 
 - 🚀 **Skip Intro / Credits Support**
 - 🖼️ **Trickplay images**: The new golden standard for chapter previews when seeking.
+- 🔊 **Background audio**: Stream music in the background, even when locking the phone.
 - 📥 **Download media** (Experimental): Save your media locally and watch it offline.
 - 📡 **Chromecast** (Experimental): Cast your media to any Chromecast-enabled device.
 - 📡 **Settings management** (Experimental): Manage app settings for all your users with a JF plugin.
 - 🤖 **Jellyseerr integration**: Request media directly in the app.
-- 👁️ **Sessions View:** View all active sessions currently streaming on your server.
 
 ## 🧪 Experimental Features
 
-Streamyfin includes some exciting experimental features like media downloading and Chromecast support. These features are still in development, and your patience and feedback are much appreciated as we work to improve them.
+Streamyfin includes some exciting experimental features like media downloading and Chromecast support. These are still in development, and we appreciate your patience and feedback as we work to improve them.
 
-### 📥 Downloading
+### Downloading
 
 Downloading works by using ffmpeg to convert an HLS stream into a video file on the device. This means that you can download and view any file you can stream! The file is converted by Jellyfin on the server in real time as it is downloaded. This means a **bit longer download times** but supports any file that your server can transcode.
 
-### 🎥 Chromecast
+### Chromecast
 
-Chromecast support is still in development, and we're working on improving it. Currently, it supports casting videos, but we're working on adding support for subtitles and other features.
+Chromecast support is still in development, and we're working on improving it. Currently, it supports casting videos and audio, but we're working on adding support for subtitles and other features.
 
-### 🧩 Streamyfin Plugin
+### Streamyfin Plugin
 
-The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that holds all settings for the client Streamyfin. This allows you to synchronize settings across all your users, like for example:
+The Jellyfin Plugin for Streamyfin is a plugin you install into Jellyfin that hold all settings for the client Streamyfin. This allows you to syncronize settings accross all your users, like:
 
-- Auto log in to Jellyseerr without the user having to do anything
+- Auto log in to Jellyseerr without the user having to do anythin
 - Choose the default languages
 - Set download method and search provider
-- Customize home screen
-- And much more...
+- Customize homescreen
+- And more...
 
 [Streamyfin Plugin](https://github.com/streamyfin/jellyfin-plugin-streamyfin)
 
-### 🔍 Jellysearch
+### Jellysearch
 
 [Jellysearch](https://gitlab.com/DomiStyle/jellysearch) now works with Streamyfin! 🚀
 
 > A fast full-text search proxy for Jellyfin. Integrates seamlessly with most Jellyfin clients.
 
-## 🛣️ Roadmap for V1
+## Roadmap for V1
 
-Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To see what we're working on next, we are always open to feedback and suggestions. Please let us know if you have any ideas or feature requests.
+Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) to see what we're working on next. We are always open for feedback and suggestions, so please let us know if you have any ideas or feature requests.
 
-## 📥 Get it now
+## Get it now
 
 <div style="display: flex; gap: 5px;">
   <a href="https://apps.apple.com/app/streamyfin/id6593660679?l=en-GB"><img height=50 alt="Get Streamyfin on App Store" src="./assets/Download_on_the_App_Store_Badge.png"/></a>
@@ -64,9 +64,9 @@ Check out our [Roadmap](https://github.com/users/fredrikburmester/projects/5) To
 
 Or download the APKs [here on GitHub](https://github.com/streamyfin/streamyfin/releases) for Android.
 
-### 🧪 Beta testing
+### Beta testing
 
-To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and I'll know that you have subscribed. This is where I post APKs and IPAs. This won't give automatic access to the TestFlight, however, so you need to send me a DM with the email you use for Apple so that I can manually add you.
+To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where I post APKs and IPAs. This won't give automatic access to the TestFlight, however, so you need to send me a DM with the email you use for Apple so that i can manually add you.
 
 **Note**: Everyone who is actively contributing to the source code of Streamyfin will have automatic access to the betas.
 
@@ -81,7 +81,7 @@ To access the Streamyfin beta, you need to subscribe to the Member tier (or high
 
 We welcome any help to make Streamyfin better. If you'd like to contribute, please fork the repository and submit a pull request. For major changes, it's best to open an issue first to discuss your ideas.
 
-### 👨‍💻 Development info
+### Development info
 
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
@@ -118,13 +118,6 @@ If you have questions or need support, feel free to reach out:
 - GitHub Issues: Report bugs or request features here.
 - Email: [fredrik.burmester@gmail.com](mailto:fredrik.burmester@gmail.com)
 
-## ❓ FAQ
-
-1. Q: Why can't I see my libraries in Streamyfin?   
-   A: Make sure your server is running one of the latest versions and that you have at least one library that isn't audio only.
-2. Q: Why can't I see my music library?   
-   A: We don't currently support music and are unlikely to support music in the near future.
-
 ## 📝 Credits
 
 Streamyfin is developed by [Fredrik Burmester](https://github.com/fredrikburmester) and is not affiliated with Jellyfin. The app is built with Expo, React Native, and other open-source libraries.
@@ -135,7 +128,7 @@ We would like to thank the Jellyfin team for their great software and awesome su
 
 Special shoutout to the JF official clients for being an inspiration to ours.
 
-### 🏆 Core Developers
+### Core Developers
 
 Thanks to the following contributors for their significant contributions:
 
@@ -220,12 +213,6 @@ I'd also like to thank the following people and projects for their contributions
 - [Jellyseerr](https://github.com/Fallenbagel/jellyseerr) for enabling API integration with their project.
 - The Jellyfin devs for always being helpful in the Discord.
 
-## ⭐ Star History
+## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=streamyfin/streamyfin&type=Date)](https://star-history.com/#streamyfin/streamyfin&Date)
-
-## ⚠️ Disclaimer
-Streamyfin does not promote, support, or condone piracy in any form. The app is intended solely for streaming media that you personally own and control. It does not provide or include any media content. Any discussions or support requests related to piracy are strictly prohibited across all our channels.
-
-## 🤝 Sponsorship
-VPS hosting generously provided by [Hexabyte](https://hexabyte.se/en/vps/?currency=eur)

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.28.1",
+    "version": "0.28.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -27,19 +27,13 @@
         "usesNonExemptEncryption": false
       },
       "supportsTablet": true,
-      "bundleIdentifier": "com.fredrikburmester.streamyfin",
-      "icon": {
-        "dark": "./assets/images/icon-plain.png",
-        "light": "./assets/images/icon-ios-light.png",
-        "tinted": "./assets/images/icon-ios-tinted.png"
-      }
+      "bundleIdentifier": "com.fredrikburmester.streamyfin"
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 56,
+      "versionCode": 54,
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/icon-plain.png",
-        "monochromeImage": "./assets/images/icon-mono.png",
+        "foregroundImage": "./assets/images/adaptive_icon.png",
         "backgroundColor": "#464646"
       },
       "package": "com.fredrikburmester.streamyfin",
@@ -54,6 +48,7 @@
       "@react-native-tvos/config-tv",
       "expo-router",
       "expo-font",
+      "@config-plugins/ffmpeg-kit-react-native",
       [
         "react-native-video",
         {
@@ -118,7 +113,6 @@
       ["./plugins/withAndroidManifest.js"],
       ["./plugins/withTrustLocalCerts.js"],
       ["./plugins/withGradleProperties.js"],
-      ["./plugins/withRNBackgroundDownloader.js"],
       [
         "expo-splash-screen",
         {
@@ -133,12 +127,6 @@
           "icon": "./assets/images/notification.png",
           "color": "#9333EA"
         }
-      ],
-      [
-        "react-native-google-cast",
-        {
-          "useDefaultExpandedMediaControls": true
-        }
       ]
     ],
     "experiments": {

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -64,6 +64,12 @@ export default function IndexLayout() {
           title: t("home.settings.settings_title"),
         }}
       />
+      <Stack.Screen
+        name='settings/optimized-server/page'
+        options={{
+          title: "",
+        }}
+      />
       <Stack.Screen
         name='settings/marlin-search/page'
         options={{

app/(auth)/(tabs)/(home)/downloads/index.tsx

@@ -1,3 +1,13 @@
+import { Button } from "@/components/Button";
+import { Text } from "@/components/common/Text";
+import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
+import { DownloadSize } from "@/components/downloads/DownloadSize";
+import { MovieCard } from "@/components/downloads/MovieCard";
+import { SeriesCard } from "@/components/downloads/SeriesCard";
+import { type DownloadedItem, useDownload } from "@/providers/DownloadProvider";
+import { queueAtom } from "@/utils/atoms/queue";
+import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { writeToLog } from "@/utils/log";
 import { Ionicons } from "@expo/vector-icons";
 import {
   BottomSheetBackdrop,
@@ -6,58 +16,30 @@ import {
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { useNavigation, useRouter } from "expo-router";
+import { t } from "i18next";
 import { useAtom } from "jotai";
-import { useEffect, useMemo, useRef } from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import { ActiveDownloads } from "@/components/downloads/ActiveDownloads";
-import { DownloadSize } from "@/components/downloads/DownloadSize";
-import { MovieCard } from "@/components/downloads/MovieCard";
-import { SeriesCard } from "@/components/downloads/SeriesCard";
-import { useDownload } from "@/providers/DownloadProvider";
-import { type DownloadedItem } from "@/providers/Downloads/types";
-import { queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
-import { writeToLog } from "@/utils/log";
-
-function migration_20241124(
-  deleteAllFiles: () => Promise<void>,
-  router: any,
-  t: any,
-) {
-  Alert.alert(
-    t("home.downloads.new_app_version_requires_re_download"),
-    undefined,
-    [
-      {
-        text: t("common.cancel"),
-        onPress: () => router.back(),
-        style: "cancel",
-      },
-      {
-        text: t("common.continue"),
-        onPress: () => deleteAllFiles(),
-      },
-    ],
-  );
-}
 
 export default function page() {
   const navigation = useNavigation();
   const { t } = useTranslation();
   const [queue, setQueue] = useAtom(queueAtom);
-  const { deleteFileByType, downloadedFiles, removeProcess, deleteAllFiles } = useDownload();
+  const { removeProcess, downloadedFiles, deleteFileByType } = useDownload();
   const router = useRouter();
   const [settings] = useSettings();
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   const movies = useMemo(() => {
-    return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
+    try {
+      return downloadedFiles?.filter((f) => f.item.Type === "Movie") || [];
+    } catch {
+      migration_20241124();
+      return [];
+    }
   }, [downloadedFiles]);
 
   const groupedBySeries = useMemo(() => {
@@ -72,12 +54,12 @@ export default function page() {
       });
       return Object.values(series);
     } catch {
-      migration_20241124(deleteAllFiles, router, t);
+      migration_20241124();
       return [];
     }
-  }, [downloadedFiles, deleteAllFiles, router, t]);
+  }, [downloadedFiles]);
 
-  const _insets = useSafeAreaInsets();
+  const insets = useSafeAreaInsets();
 
   useEffect(() => {
     navigation.setOptions({
@@ -116,10 +98,16 @@ export default function page() {
 
   return (
     <>
-      <View style={{ flex: 1 }}>
-        <ScrollView showsVerticalScrollIndicator={false} className='flex-1'>
-          <View className='py-4'>
-            <View className='mb-4 flex flex-col space-y-4 px-4'>
+      <ScrollView
+        contentContainerStyle={{
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+          paddingBottom: 100,
+        }}
+      >
+        <View className='py-4'>
+          <View className='mb-4 flex flex-col space-y-4 px-4'>
+            {settings?.downloadMethod === DownloadMethod.Remux && (
               <View className='bg-neutral-900 p-4 rounded-2xl'>
                 <Text className='text-lg font-bold'>
                   {t("home.downloads.queue")}
@@ -163,74 +151,70 @@ export default function page() {
                   </Text>
                 )}
               </View>
+            )}
 
-              <ActiveDownloads />
-            </View>
-
-            {movies.length > 0 && (
-              <View className='mb-4'>
-                <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                  <Text className='text-lg font-bold'>
-                    {t("home.downloads.movies")}
-                  </Text>
-                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                    <Text className='text-xs font-bold'>{movies?.length}</Text>
-                  </View>
-                </View>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                  <View className='px-4 flex flex-row'>
-                    {movies?.map((item) => (
-                      <TouchableItemRouter
-                        item={item.item}
-                        isOffline
-                        key={item.item.Id}
-                      >
-                        <MovieCard item={item.item} />
-                      </TouchableItemRouter>
-                    ))}
-                  </View>
-                </ScrollView>
-              </View>
-            )}
-            {groupedBySeries.length > 0 && (
-              <View className='mb-4'>
-                <View className='flex flex-row items-center justify-between mb-2 px-4'>
-                  <Text className='text-lg font-bold'>
-                    {t("home.downloads.tvseries")}
-                  </Text>
-                  <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
-                    <Text className='text-xs font-bold'>
-                      {groupedBySeries?.length}
-                    </Text>
-                  </View>
-                </View>
-                <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-                  <View className='px-4 flex flex-row'>
-                    {groupedBySeries?.map((items) => (
-                      <View
-                        className='mb-2 last:mb-0'
-                        key={items[0].item.SeriesId}
-                      >
-                        <SeriesCard
-                          items={items.map((i) => i.item)}
-                          key={items[0].item.SeriesId}
-                        />
-                      </View>
-                    ))}
-                  </View>
-                </ScrollView>
-              </View>
-            )}
-            {downloadedFiles?.length === 0 && (
-              <View className='flex px-4'>
-                <Text className='opacity-50'>
-                  {t("home.downloads.no_downloaded_items")}
-                </Text>
-              </View>
-            )}
+            <ActiveDownloads />
           </View>
-        </ScrollView>
-      </View>
+
+          {movies.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                <Text className='text-lg font-bold'>
+                  {t("home.downloads.movies")}
+                </Text>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>{movies?.length}</Text>
+                </View>
+              </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {movies?.map((item) => (
+                    <View className='mb-2 last:mb-0' key={item.item.Id}>
+                      <MovieCard item={item.item} />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {groupedBySeries.length > 0 && (
+            <View className='mb-4'>
+              <View className='flex flex-row items-center justify-between mb-2 px-4'>
+                <Text className='text-lg font-bold'>
+                  {t("home.downloads.tvseries")}
+                </Text>
+                <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center'>
+                  <Text className='text-xs font-bold'>
+                    {groupedBySeries?.length}
+                  </Text>
+                </View>
+              </View>
+              <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                <View className='px-4 flex flex-row'>
+                  {groupedBySeries?.map((items) => (
+                    <View
+                      className='mb-2 last:mb-0'
+                      key={items[0].item.SeriesId}
+                    >
+                      <SeriesCard
+                        items={items.map((i) => i.item)}
+                        key={items[0].item.SeriesId}
+                      />
+                    </View>
+                  ))}
+                </View>
+              </ScrollView>
+            </View>
+          )}
+          {downloadedFiles?.length === 0 && (
+            <View className='flex px-4'>
+              <Text className='opacity-50'>
+                {t("home.downloads.no_downloaded_items")}
+              </Text>
+            </View>
+          )}
+        </View>
+      </ScrollView>
       <BottomSheetModal
         ref={bottomSheetModalRef}
         enableDynamicSizing
@@ -265,3 +249,23 @@ export default function page() {
     </>
   );
 }
+
+function migration_20241124() {
+  const router = useRouter();
+  const { deleteAllFiles } = useDownload();
+  Alert.alert(
+    t("home.downloads.new_app_version_requires_re_download"),
+    t("home.downloads.new_app_version_requires_re_download_description"),
+    [
+      {
+        text: t("home.downloads.back"),
+        onPress: () => router.back(),
+      },
+      {
+        text: t("home.downloads.delete"),
+        style: "destructive",
+        onPress: async () => await deleteAllFiles(),
+      },
+    ],
+  );
+}

app/(auth)/(tabs)/(home)/sessions/index.tsx

@@ -18,18 +18,12 @@ import {
   HardwareAccelerationType,
   type SessionInfoDto,
 } from "@jellyfin/sdk/lib/generated-client";
-import {
-  GeneralCommandType,
-  PlaystateCommand,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
 import { FlashList } from "@shopify/flash-list";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
-import { get } from "lodash";
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TouchableOpacity, View } from "react-native";
+import { View } from "react-native";
 
 export default function page() {
   const { sessions, isLoading } = useSessions({} as useSessionsProps);
@@ -116,77 +110,6 @@ const SessionCard = ({ session }: SessionCardProps) => {
     },
   });
 
-  // Handle session controls
-  const [isControlLoading, setIsControlLoading] = useState<
-    Record<string, boolean>
-  >({});
-
-  const handleSystemCommand = async (command: GeneralCommandType) => {
-    if (!api || !session.Id) return false;
-
-    setIsControlLoading({ ...isControlLoading, [command]: true });
-
-    try {
-      getSessionApi(api).sendSystemCommand({
-        sessionId: session.Id,
-        command,
-      });
-      return true;
-    } catch (error) {
-      console.error(`Error sending ${command} command:`, error);
-      return false;
-    } finally {
-      setIsControlLoading({ ...isControlLoading, [command]: false });
-    }
-  };
-
-  const handlePlaystateCommand = async (command: PlaystateCommand) => {
-    if (!api || !session.Id) return false;
-
-    setIsControlLoading({ ...isControlLoading, [command]: true });
-
-    try {
-      getSessionApi(api).sendPlaystateCommand({
-        sessionId: session.Id,
-        command,
-      });
-
-      return true;
-    } catch (error) {
-      console.error(`Error sending playstate ${command} command:`, error);
-      return false;
-    } finally {
-      setIsControlLoading({ ...isControlLoading, [command]: false });
-    }
-  };
-
-  const handlePlayPause = async () => {
-    console.log("handlePlayPause");
-    await handlePlaystateCommand(PlaystateCommand.PlayPause);
-  };
-
-  const handleStop = async () => {
-    await handlePlaystateCommand(PlaystateCommand.Stop);
-  };
-
-  const handlePrevious = async () => {
-    await handlePlaystateCommand(PlaystateCommand.PreviousTrack);
-  };
-
-  const handleNext = async () => {
-    await handlePlaystateCommand(PlaystateCommand.NextTrack);
-  };
-
-  const handleToggleMute = async () => {
-    await handleSystemCommand(GeneralCommandType.ToggleMute);
-  };
-  const handleVolumeUp = async () => {
-    await handleSystemCommand(GeneralCommandType.VolumeUp);
-  };
-  const handleVolumeDown = async () => {
-    await handleSystemCommand(GeneralCommandType.VolumeDown);
-  };
-
   useInterval(tick, 1000);
 
   return (
@@ -258,107 +181,6 @@ const SessionCard = ({ session }: SessionCardProps) => {
                 }}
               />
             </View>
-
-            {/* Session controls */}
-            <View className='flex flex-row mt-2 space-x-4 justify-center'>
-              <TouchableOpacity
-                onPress={handlePrevious}
-                disabled={isControlLoading[PlaystateCommand.PreviousTrack]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.PreviousTrack]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <MaterialCommunityIcons
-                  name='skip-previous'
-                  size={24}
-                  color='white'
-                />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handlePlayPause}
-                disabled={isControlLoading[PlaystateCommand.PlayPause]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.PlayPause]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                {session.PlayState?.IsPaused ? (
-                  <Ionicons name='play' size={24} color='white' />
-                ) : (
-                  <Ionicons name='pause' size={24} color='white' />
-                )}
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleStop}
-                disabled={isControlLoading[PlaystateCommand.Stop]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.Stop] ? 0.5 : 1,
-                }}
-              >
-                <Ionicons name='stop' size={24} color='white' />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleNext}
-                disabled={isControlLoading[PlaystateCommand.NextTrack]}
-                style={{
-                  opacity: isControlLoading[PlaystateCommand.NextTrack]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <MaterialCommunityIcons
-                  name='skip-next'
-                  size={24}
-                  color='white'
-                />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleVolumeDown}
-                disabled={isControlLoading[GeneralCommandType.VolumeDown]}
-                style={{
-                  opacity: isControlLoading[GeneralCommandType.VolumeDown]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <Ionicons name='volume-low' size={24} color='white' />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleToggleMute}
-                disabled={isControlLoading[GeneralCommandType.ToggleMute]}
-                style={{
-                  opacity: isControlLoading[GeneralCommandType.ToggleMute]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <Ionicons
-                  name='volume-mute'
-                  size={24}
-                  color={session.PlayState?.IsMuted ? "red" : "white"}
-                />
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                onPress={handleVolumeUp}
-                disabled={isControlLoading[GeneralCommandType.VolumeUp]}
-                style={{
-                  opacity: isControlLoading[GeneralCommandType.VolumeUp]
-                    ? 0.5
-                    : 1,
-                }}
-              >
-                <Ionicons name='volume-high' size={24} color='white' />
-              </TouchableOpacity>
-            </View>
           </View>
         </View>
       </View>

app/(auth)/(tabs)/(home)/settings/optimized-server/page.tsx

@@ -0,0 +1,93 @@
+import { Text } from "@/components/common/Text";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import { OptimizedServerForm } from "@/components/settings/OptimizedServerForm";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getOrSetDeviceId } from "@/utils/device";
+import { getStatistics } from "@/utils/optimize-server";
+import { useMutation } from "@tanstack/react-query";
+import { useNavigation } from "expo-router";
+import { useAtom } from "jotai";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { toast } from "sonner-native";
+
+export default function page() {
+  const navigation = useNavigation();
+
+  const { t } = useTranslation();
+
+  const [api] = useAtom(apiAtom);
+  const [settings, updateSettings, pluginSettings] = useSettings();
+
+  const [optimizedVersionsServerUrl, setOptimizedVersionsServerUrl] =
+    useState<string>(settings?.optimizedVersionsServerUrl || "");
+
+  const saveMutation = useMutation({
+    mutationFn: async (newVal: string) => {
+      if (newVal.length === 0 || !newVal.startsWith("http")) {
+        toast.error(t("home.settings.toasts.invalid_url"));
+        return;
+      }
+
+      const updatedUrl = newVal.endsWith("/") ? newVal : `${newVal}/`;
+
+      updateSettings({
+        optimizedVersionsServerUrl: updatedUrl,
+      });
+
+      return await getStatistics({
+        url: updatedUrl,
+        authHeader: api?.accessToken,
+        deviceId: getOrSetDeviceId(),
+      });
+    },
+    onSuccess: (data) => {
+      if (data) {
+        toast.success(t("home.settings.toasts.connected"));
+      } else {
+        toast.error(t("home.settings.toasts.could_not_connect"));
+      }
+    },
+    onError: () => {
+      toast.error(t("home.settings.toasts.could_not_connect"));
+    },
+  });
+
+  const onSave = (newVal: string) => {
+    saveMutation.mutate(newVal);
+  };
+
+  useEffect(() => {
+    if (!pluginSettings?.optimizedVersionsServerUrl?.locked) {
+      navigation.setOptions({
+        title: t("home.settings.downloads.optimized_server"),
+        headerRight: () =>
+          saveMutation.isPending ? (
+            <ActivityIndicator size={"small"} color={"white"} />
+          ) : (
+            <TouchableOpacity
+              onPress={() => onSave(optimizedVersionsServerUrl)}
+            >
+              <Text className='text-blue-500'>
+                {t("home.settings.downloads.save_button")}
+              </Text>
+            </TouchableOpacity>
+          ),
+      });
+    }
+  }, [navigation, optimizedVersionsServerUrl, saveMutation.isPending]);
+
+  return (
+    <DisabledSetting
+      disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
+      className='p-4'
+    >
+      <OptimizedServerForm
+        value={optimizedVersionsServerUrl}
+        onChangeValue={setOptimizedVersionsServerUrl}
+      />
+    </DisabledSetting>
+  );
+}

app/(auth)/(tabs)/(home,libraries,search,favorites)/items/page.tsx

@@ -1,4 +1,10 @@
+import { ItemContent } from "@/components/ItemContent";
+import { Text } from "@/components/common/Text";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams } from "expo-router";
+import { useAtom } from "jotai";
 import type React from "react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -9,18 +15,29 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { Text } from "@/components/common/Text";
-import { ItemContent } from "@/components/ItemContent";
-import { useItemQuery } from "@/hooks/useItemQuery";
 
 const Page: React.FC = () => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
   const { id } = useLocalSearchParams() as { id: string };
   const { t } = useTranslation();
 
-  const { offline } = useLocalSearchParams() as { offline?: string };
-  const isOffline = offline === "true";
+  const { data: item, isError } = useQuery({
+    queryKey: ["item", id],
+    queryFn: async () => {
+      if (!api || !user || !id) return;
+      const res = await getUserLibraryApi(api).getItem({
+        itemId: id,
+        userId: user?.Id,
+      });
 
-  const { data: item, isError } = useItemQuery(id, isOffline);
+      return res.data;
+    },
+    staleTime: 0,
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+    refetchOnReconnect: true,
+  });
 
   const opacity = useSharedValue(1);
   const animatedStyle = useAnimatedStyle(() => {
@@ -90,7 +107,7 @@ const Page: React.FC = () => {
         <View className='h-12 bg-neutral-900 rounded-lg w-full mb-2' />
         <View className='h-24 bg-neutral-900 rounded-lg mb-1 w-full' />
       </Animated.View>
-      {item && <ItemContent item={item} isOffline={isOffline} />}
+      {item && <ItemContent item={item} />}
     </View>
   );
 };

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/page.tsx

@@ -30,7 +30,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -46,7 +46,6 @@ const Page: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
   const { t } = useTranslation();
-  const router = useRouter();
 
   const { mediaTitle, releaseYear, posterSrc, mediaType, ...result } =
     params as unknown as {
@@ -237,65 +236,30 @@ const Page: React.FC = () => {
                   }}
                 />
               </View>
-              <View>
+              <View className='mb-4'>
                 <GenreTags genres={details?.genres?.map((g) => g.name) || []} />
               </View>
               {isLoading || isFetching ? (
-                <Button
-                  loading={true}
-                  disabled={true}
-                  color='purple'
-                  className='mt-4'
-                />
+                <Button loading={true} disabled={true} color='purple' />
               ) : canRequest ? (
-                <Button color='purple' onPress={request} className='mt-4'>
+                <Button color='purple' onPress={request}>
                   {t("jellyseerr.request_button")}
                 </Button>
               ) : (
-                details?.mediaInfo?.jellyfinMediaId && (
-                  <View className='flex flex-row space-x-2 mt-4'>
-                    <Button
-                      className='flex-1 bg-yellow-500/50 border-yellow-400 ring-yellow-400 text-yellow-100'
-                      color='transparent'
-                      onPress={() => bottomSheetModalRef?.current?.present()}
-                      iconLeft={
-                        <Ionicons
-                          name='warning-outline'
-                          size={20}
-                          color='white'
-                        />
-                      }
-                      style={{
-                        borderWidth: 1,
-                        borderStyle: "solid",
-                      }}
-                    >
-                      <Text className='text-sm'>
-                        {t("jellyseerr.report_issue_button")}
-                      </Text>
-                    </Button>
-                    <Button
-                      className='flex-1 bg-purple-600/50 border-purple-400 ring-purple-400 text-purple-100'
-                      onPress={() => {
-                        const url =
-                          mediaType === MediaType.MOVIE
-                            ? `/(auth)/(tabs)/(search)/items/page?id=${details?.mediaInfo.jellyfinMediaId}`
-                            : `/(auth)/(tabs)/(search)/series/${details?.mediaInfo.jellyfinMediaId}`;
-                        // @ts-expect-error
-                        router.push(url);
-                      }}
-                      iconLeft={
-                        <Ionicons name='play-outline' size={20} color='white' />
-                      }
-                      style={{
-                        borderWidth: 1,
-                        borderStyle: "solid",
-                      }}
-                    >
-                      <Text className='text-sm'>Play</Text>
-                    </Button>
-                  </View>
-                )
+                <Button
+                  className='bg-yellow-500/50 border-yellow-400 ring-yellow-400 text-yellow-100'
+                  color='transparent'
+                  onPress={() => bottomSheetModalRef?.current?.present()}
+                  iconLeft={
+                    <Ionicons name='warning-outline' size={24} color='white' />
+                  }
+                  style={{
+                    borderWidth: 1,
+                    borderStyle: "solid",
+                  }}
+                >
+                  {t("jellyseerr.report_issue_button")}
+                </Button>
               )}
               <OverviewText text={result.overview} className='mt-4' />
             </View>

app/(auth)/(tabs)/(home,libraries,search,favorites)/series/[id].tsx

@@ -69,16 +69,10 @@ const page: React.FC = () => {
         seriesId: item?.Id!,
         userId: user?.Id!,
         enableUserData: true,
-        // Note: Including trick play is necessary to enable trick play downloads
-        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
+        fields: ["MediaSources", "MediaStreams", "Overview"],
       });
       return res?.data.Items || [];
     },
-    select: (data) =>
-      // This needs to be sorted by parent index number and then index number, that way we can download the episodes in the correct order.
-      [...(data || [])].sort(
-        (a, b) => (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0) || (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0)
-      ),
     staleTime: 60,
     enabled: !!api && !!user?.Id && !!item?.Id,
   });
@@ -142,7 +136,7 @@ const page: React.FC = () => {
               resizeMode: "contain",
             }}
           />
-        ) : undefined
+        ) : null
       }
     >
       <View className='flex flex-col pt-4'>

app/(auth)/(tabs)/(libraries)/[libraryId].tsx

@@ -433,6 +433,15 @@ const Page = () => {
       </View>
     );
 
+  if (flatData.length === 0)
+    return (
+      <View className='h-full w-full flex justify-center items-center'>
+        <Text className='text-lg text-neutral-500'>
+          {t("library.no_items_found")}
+        </Text>
+      </View>
+    );
+
   return (
     <FlashList
       key={orientation}

app/(auth)/(tabs)/(search)/index.tsx

@@ -331,7 +331,7 @@ export default function search() {
             <View className={l1 || l2 ? "opacity-0" : "opacity-100"}>
               <SearchItemWrapper
                 header={t("search.movies")}
-                items={movies}
+                ids={movies?.map((m) => m.Id!)}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
                     key={item.Id}
@@ -349,7 +349,7 @@ export default function search() {
                 )}
               />
               <SearchItemWrapper
-                items={series}
+                ids={series?.map((m) => m.Id!)}
                 header={t("search.series")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
@@ -368,7 +368,7 @@ export default function search() {
                 )}
               />
               <SearchItemWrapper
-                items={episodes}
+                ids={episodes?.map((m) => m.Id!)}
                 header={t("search.episodes")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
@@ -382,7 +382,7 @@ export default function search() {
                 )}
               />
               <SearchItemWrapper
-                items={collections}
+                ids={collections?.map((m) => m.Id!)}
                 header={t("search.collections")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
@@ -398,7 +398,7 @@ export default function search() {
                 )}
               />
               <SearchItemWrapper
-                items={actors}
+                ids={actors?.map((m) => m.Id!)}
                 header={t("search.actors")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
@@ -434,10 +434,7 @@ export default function search() {
               <View className='mt-4 flex flex-col items-center space-y-2'>
                 {exampleSearches.map((e) => (
                   <TouchableOpacity
-                    onPress={() => {
-                      setSearch(e);
-                      searchBarRef.current?.setText(e);
-                    }}
+                    onPress={() => setSearch(e)}
                     key={e}
                     className='mb-2'
                   >

app/(auth)/player/_layout.tsx

@@ -1,8 +1,33 @@
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { useSettings } from "@/utils/atoms/settings";
 import { Stack } from "expo-router";
-import React from "react";
+import React, { useLayoutEffect } from "react";
+import { Platform } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 
 export default function Layout() {
+  const [settings] = useSettings();
+
+  useLayoutEffect(() => {
+    if (Platform.isTV) return;
+
+    if (!settings.followDeviceOrientation && settings.defaultVideoOrientation) {
+      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+    }
+
+    return () => {
+      if (Platform.isTV) return;
+
+      if (settings.followDeviceOrientation === true) {
+        ScreenOrientation.unlockAsync();
+      } else {
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP,
+        );
+      }
+    };
+  });
+
   return (
     <>
       <SystemBars hidden />

app/(auth)/player/direct-player.tsx

@@ -1,7 +1,35 @@
+import { BITRATES } from "@/components/BitrateSelector";
+import { Loader } from "@/components/Loader";
+import { Text } from "@/components/common/Text";
+import { Controls } from "@/components/video-player/controls/Controls";
+import { getDownloadedFileUrl } from "@/hooks/useDownloadedFileOpener";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useWebSocket } from "@/hooks/useWebsockets";
+import { MpvPlayerView, ProgressUpdatePayload, VlcPlayerView } from "@/modules";
+// import type {
+//   PipStartedPayload,
+//   PlaybackStatePayload,
+//   ProgressUpdatePayload,
+//   VlcPlayerViewRef,
+// } from "@/modules/VlcPlayer.types";
+
+import type {
+  MpvPlayerViewRef,
+  PipStartedPayload,
+  PlaybackStatePayload,
+} from "@/modules/MpvPlayer.types";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { writeToLog } from "@/utils/log";
+import native from "@/utils/profiles/native";
+import { msToTicks, ticksToSeconds } from "@/utils/time";
 import {
   type BaseItemDto,
   type MediaSourceInfo,
   PlaybackOrder,
+  type PlaybackProgressInfo,
   PlaybackStartInfo,
   RepeatMode,
 } from "@jellyfin/sdk/lib/generated-client";
@@ -10,42 +38,25 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
-import { router, useGlobalSearchParams, useNavigation } from "expo-router";
+import { useGlobalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, Platform, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { BITRATES } from "@/components/BitrateSelector";
-import { Text } from "@/components/common/Text";
-import { Loader } from "@/components/Loader";
-import { Controls } from "@/components/video-player/controls/Controls";
-import { useHaptic } from "@/hooks/useHaptic";
-import { usePlaybackManager } from "@/hooks/usePlaybackManager";
-import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
-import { useWebSocket } from "@/hooks/useWebsockets";
-import { VlcPlayerView } from "@/modules";
-import type {
-  PipStartedPayload,
-  PlaybackStatePayload,
-  ProgressUpdatePayload,
-  VlcPlayerViewRef,
-} from "@/modules/VlcPlayer.types";
-import { useDownload } from "@/providers/DownloadProvider";
-import { DownloadedItem } from "@/providers/Downloads/types";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { writeToLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
-import { generateDeviceProfile } from "@/utils/profiles/native";
-import { msToTicks, ticksToSeconds } from "@/utils/time";
-
-const IGNORE_SAFE_AREAS_KEY = "video_player_ignore_safe_areas";
+const downloadProvider = !Platform.isTV
+  ? require("@/providers/DownloadProvider")
+  : null;
 
 export default function page() {
-  const videoRef = useRef<VlcPlayerViewRef>(null);
+  const videoRef = useRef<MpvPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
   const { t } = useTranslation();
@@ -53,13 +64,8 @@ export default function page() {
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, _setShowControls] = useState(true);
-  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(() => {
-    // Load persisted state from storage
-    const saved = storage.getBoolean(IGNORE_SAFE_AREAS_KEY);
-    return saved ?? false;
-  });
+  const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [isMuted, setIsMuted] = useState(false);
   const [isBuffering, setIsBuffering] = useState(true);
   const [isVideoLoaded, setIsVideoLoaded] = useState(false);
   const [isPipStarted, setIsPipStarted] = useState(false);
@@ -67,11 +73,10 @@ export default function page() {
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
-  const VolumeManager = Platform.isTV
-    ? null
-    : require("react-native-volume-manager");
-
-  const downloadUtils = useDownload();
+  let getDownloadedItem = null;
+  if (!Platform.isTV) {
+    getDownloadedItem = downloadProvider.useDownload();
+  }
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
 
@@ -82,11 +87,6 @@ export default function page() {
     lightHapticFeedback();
   }, []);
 
-  // Persist ignoreSafeAreas state whenever it changes
-  useEffect(() => {
-    storage.set(IGNORE_SAFE_AREAS_KEY, ignoreSafeAreas);
-  }, [ignoreSafeAreas]);
-
   const {
     itemId,
     audioIndex: audioIndexStr,
@@ -94,7 +94,6 @@ export default function page() {
     mediaSourceId,
     bitrateValue: bitrateValueStr,
     offline: offlineStr,
-    playbackPosition: playbackPositionFromUrl,
   } = useGlobalSearchParams<{
     itemId: string;
     audioIndex: string;
@@ -102,13 +101,10 @@ export default function page() {
     mediaSourceId: string;
     bitrateValue: string;
     offline: string;
-    /** Playback position in ticks. */
-    playbackPosition?: string;
   }>();
   const [settings] = useSettings();
   const insets = useSafeAreaInsets();
   const offline = offlineStr === "true";
-  const playbackManager = usePlaybackManager();
 
   const audioIndex = audioIndexStr
     ? Number.parseInt(audioIndexStr, 10)
@@ -121,33 +117,19 @@ export default function page() {
     : BITRATES[0].value;
 
   const [item, setItem] = useState<BaseItemDto | null>(null);
-  const [downloadedItem, setDownloadedItem] = useState<DownloadedItem | null>(
-    null,
-  );
   const [itemStatus, setItemStatus] = useState({
     isLoading: true,
     isError: false,
   });
 
-  /** Gets the initial playback position from the URL. */
-  const getInitialPlaybackTicks = useCallback((): number => {
-    if (playbackPositionFromUrl) {
-      return Number.parseInt(playbackPositionFromUrl, 10);
-    }
-    return 0;
-  }, [playbackPositionFromUrl]);
-
   useEffect(() => {
     const fetchItemData = async () => {
       setItemStatus({ isLoading: true, isError: false });
       try {
         let fetchedItem: BaseItemDto | null = null;
         if (offline && !Platform.isTV) {
-          const data = downloadUtils.getDownloadedItemById(itemId);
-          if (data) {
-            fetchedItem = data.item as BaseItemDto;
-            setDownloadedItem(data);
-          }
+          const data = await getDownloadedItem.getDownloadedItem(itemId);
+          if (data) fetchedItem = data.item as BaseItemDto;
         } else {
           const res = await getUserLibraryApi(api!).getItem({
             itemId,
@@ -156,10 +138,11 @@ export default function page() {
           fetchedItem = res.data;
         }
         setItem(fetchedItem);
-        setItemStatus({ isLoading: false, isError: false });
       } catch (error) {
         console.error("Failed to fetch item:", error);
         setItemStatus({ isLoading: false, isError: true });
+      } finally {
+        setItemStatus({ isLoading: false, isError: false });
       }
     };
 
@@ -182,32 +165,26 @@ export default function page() {
 
   useEffect(() => {
     const fetchStreamData = async () => {
-      setStreamStatus({ isLoading: true, isError: false });
       try {
         let result: Stream | null = null;
-        if (offline && downloadedItem) {
-          if (!downloadedItem?.mediaSource) return;
-          const url = downloadedItem.videoFilePath;
+        if (offline && !Platform.isTV) {
+          const data = await getDownloadedItem.getDownloadedItem(itemId);
+          if (!data?.mediaSource) return;
+          const url = await getDownloadedFileUrl(data.item.Id!);
           if (item) {
-            result = {
-              mediaSource: downloadedItem.mediaSource,
-              sessionId: "",
-              url: url,
-            };
+            result = { mediaSource: data.mediaSource, sessionId: "", url };
           }
         } else {
-          const native = await generateDeviceProfile();
-          const transcoding = await generateDeviceProfile({ transcode: true });
           const res = await getStreamUrl({
             api,
             item,
-            startTimeTicks: getInitialPlaybackTicks(),
+            startTimeTicks: item?.UserData?.PlaybackPositionTicks!,
             userId: user?.Id,
             audioStreamIndex: audioIndex,
             maxStreamingBitrate: bitrateValue,
             mediaSourceId: mediaSourceId,
             subtitleStreamIndex: subtitleIndex,
-            deviceProfile: bitrateValue ? transcoding : native,
+            deviceProfile: native,
           });
           if (!res) return;
           const { mediaSource, sessionId, url } = res;
@@ -221,43 +198,34 @@ export default function page() {
           result = { mediaSource, sessionId, url };
         }
         setStream(result);
-        setStreamStatus({ isLoading: false, isError: false });
       } catch (error) {
         console.error("Failed to fetch stream:", error);
         setStreamStatus({ isLoading: false, isError: true });
+      } finally {
+        setStreamStatus({ isLoading: false, isError: false });
       }
     };
     fetchStreamData();
-  }, [
-    itemId,
-    mediaSourceId,
-    bitrateValue,
-    api,
-    item,
-    user?.Id,
-    downloadedItem,
-  ]);
+  }, [itemId, mediaSourceId, bitrateValue, api, item, user?.Id]);
 
   useEffect(() => {
-    if (!stream || !api) return;
+    if (!stream) return;
+
     const reportPlaybackStart = async () => {
-      console.log("reporting playback start", currentPlayStateInfo());
-      await getPlaystateApi(api).reportPlaybackStart({
+      await getPlaystateApi(api!).reportPlaybackStart({
         playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
       });
     };
+
     reportPlaybackStart();
-  }, [stream, api]);
+  }, [stream]);
 
   const togglePlay = async () => {
     lightHapticFeedback();
     setIsPlaying(!isPlaying);
     if (isPlaying) {
       await videoRef.current?.pause();
-      playbackManager.reportPlaybackProgress(
-        item?.Id!,
-        msToTicks(progress.get()),
-      );
+      reportPlaybackStopped();
     } else {
       videoRef.current?.play();
       await getPlaystateApi(api!).reportPlaybackStart({
@@ -267,6 +235,7 @@ export default function page() {
   };
 
   const reportPlaybackStopped = useCallback(async () => {
+    if (offline) return;
     const currentTimeInTicks = msToTicks(progress.get());
     await getPlaystateApi(api!).onPlaybackStopped({
       itemId: item?.Id!,
@@ -274,21 +243,14 @@ export default function page() {
       positionTicks: currentTimeInTicks,
       playSessionId: stream?.sessionId!,
     });
-  }, [
-    api,
-    item,
-    mediaSourceId,
-    stream,
-    progress,
-    offline,
-    revalidateProgressCache,
-  ]);
+
+    revalidateProgressCache();
+  }, [api, item, mediaSourceId, stream]);
 
   const stop = useCallback(() => {
     reportPlaybackStopped();
     setIsPlaybackStopped(true);
     videoRef.current?.stop();
-    revalidateProgressCache();
   }, [videoRef, reportPlaybackStopped]);
 
   useEffect(() => {
@@ -309,7 +271,7 @@ export default function page() {
       isPaused: !isPlaying,
       playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
       playSessionId: stream.sessionId,
-      isMuted: isMuted,
+      isMuted: false,
       canSeek: true,
       repeatMode: RepeatMode.RepeatNone,
       playbackOrder: PlaybackOrder.Default,
@@ -327,21 +289,11 @@ export default function page() {
 
       progress.set(currentTime);
 
-      // Update the playback position in the URL.
-      router.setParams({
-        playbackPosition: msToTicks(currentTime).toString(),
-      });
+      if (offline) return;
 
-      if (!item?.Id) return;
+      if (!item?.Id || !stream) return;
 
-      playbackManager.reportPlaybackProgress(
-        item.Id,
-        msToTicks(progress.get()),
-        {
-          AudioStreamIndex: audioIndex ?? -1,
-          SubtitleStreamIndex: subtitleIndex ?? -1,
-        },
-      );
+      reportPlaybackProgress();
     },
     [
       item?.Id,
@@ -361,87 +313,35 @@ export default function page() {
     setIsPipStarted(pipStarted);
   }, []);
 
-  /** Gets the initial playback position in seconds. */
+  const reportPlaybackProgress = useCallback(async () => {
+    if (!api || offline || !stream) return;
+    await getPlaystateApi(api).reportPlaybackProgress({
+      playbackProgressInfo: currentPlayStateInfo() as PlaybackProgressInfo,
+    });
+  }, [
+    api,
+    isPlaying,
+    offline,
+    stream,
+    item?.Id,
+    audioIndex,
+    subtitleIndex,
+    mediaSourceId,
+    progress,
+  ]);
+
   const startPosition = useMemo(() => {
-    return ticksToSeconds(getInitialPlaybackTicks());
-  }, [getInitialPlaybackTicks]);
-
-  const volumeUpCb = useCallback(async () => {
-    if (Platform.isTV) return;
-
-    try {
-      const { volume: currentVolume } = await VolumeManager.getVolume();
-      const newVolume = Math.min(currentVolume + 0.1, 1.0);
-
-      await VolumeManager.setVolume(newVolume);
-    } catch (error) {
-      console.error("Error adjusting volume:", error);
-    }
-  }, []);
-  const [previousVolume, setPreviousVolume] = useState<number | null>(null);
-
-  const toggleMuteCb = useCallback(async () => {
-    if (Platform.isTV) return;
-
-    try {
-      const { volume: currentVolume } = await VolumeManager.getVolume();
-      const currentVolumePercent = currentVolume * 100;
-
-      if (currentVolumePercent > 0) {
-        // Currently not muted, so mute
-        setPreviousVolume(currentVolumePercent);
-        await VolumeManager.setVolume(0);
-        setIsMuted(true);
-      } else {
-        // Currently muted, so restore previous volume
-        const volumeToRestore = previousVolume || 50; // Default to 50% if no previous volume
-        await VolumeManager.setVolume(volumeToRestore / 100);
-        setPreviousVolume(null);
-        setIsMuted(false);
-      }
-    } catch (error) {
-      console.error("Error toggling mute:", error);
-    }
-  }, [previousVolume]);
-  const volumeDownCb = useCallback(async () => {
-    if (Platform.isTV) return;
-
-    try {
-      const { volume: currentVolume } = await VolumeManager.getVolume();
-      const newVolume = Math.max(currentVolume - 0.1, 0); // Decrease by 10%
-      console.log(
-        "Volume Down",
-        Math.round(currentVolume * 100),
-        "→",
-        Math.round(newVolume * 100),
-      );
-      await VolumeManager.setVolume(newVolume);
-    } catch (error) {
-      console.error("Error adjusting volume:", error);
-    }
-  }, []);
-
-  const setVolumeCb = useCallback(async (newVolume: number) => {
-    if (Platform.isTV) return;
-
-    try {
-      const clampedVolume = Math.max(0, Math.min(newVolume, 100));
-      console.log("Setting volume to", clampedVolume);
-      await VolumeManager.setVolume(clampedVolume / 100);
-    } catch (error) {
-      console.error("Error setting volume:", error);
-    }
-  }, []);
+    if (offline) return 0;
+    return item?.UserData?.PlaybackPositionTicks
+      ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
+      : 0;
+  }, [item]);
 
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
     stopPlayback: stop,
     offline,
-    toggleMute: toggleMuteCb,
-    volumeUp: volumeUpCb,
-    volumeDown: volumeDownCb,
-    setVolume: setVolumeCb,
   });
 
   const onPlaybackStateChanged = useCallback(
@@ -449,24 +349,14 @@ export default function page() {
       const { state, isBuffering, isPlaying } = e.nativeEvent;
       if (state === "Playing") {
         setIsPlaying(true);
-        if (item?.Id) {
-          playbackManager.reportPlaybackProgress(
-            item.Id,
-            msToTicks(progress.get()),
-          );
-        }
+        reportPlaybackProgress();
         if (!Platform.isTV) await activateKeepAwakeAsync();
         return;
       }
 
       if (state === "Paused") {
         setIsPlaying(false);
-        if (item?.Id) {
-          playbackManager.reportPlaybackProgress(
-            item.Id,
-            msToTicks(progress.get()),
-          );
-        }
+        reportPlaybackProgress();
         if (!Platform.isTV) await deactivateKeepAwake();
         return;
       }
@@ -478,7 +368,7 @@ export default function page() {
         setIsBuffering(true);
       }
     },
-    [playbackManager, item?.Id, progress],
+    [reportPlaybackProgress],
   );
 
   const allAudio =
@@ -496,35 +386,34 @@ export default function page() {
     .filter((sub: any) => sub.DeliveryMethod === "External")
     .map((sub: any) => ({
       name: sub.DisplayTitle,
-      DeliveryUrl: offline ? sub.DeliveryUrl : api?.basePath + sub.DeliveryUrl,
+      DeliveryUrl: api?.basePath + sub.DeliveryUrl,
     }));
-  /** The text based subtitle tracks */
+
   const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
-  /** The user chosen subtitle track from the server */
+
   const chosenSubtitleTrack = allSubs.find(
     (sub) => sub.Index === subtitleIndex,
   );
-  /** The user chosen audio track from the server */
   const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
-  /** Whether the stream we're playing is not transcoding*/
-  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
-  /** The initial options to pass to the VLC Player */
-  const initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
-  if (
-    chosenSubtitleTrack &&
-    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
-  ) {
-    // If not transcoding, we can the index as normal.
-    // If transcoding, we need to reverse the text based subtitles, because VLC reverses the HLS subtitles.
-    const finalIndex = notTranscoding
-      ? allSubs.indexOf(chosenSubtitleTrack)
-      : [...textSubs].reverse().indexOf(chosenSubtitleTrack);
-    initOptions.push(`--sub-track=${finalIndex}`);
-  }
 
-  if (notTranscoding && chosenAudioTrack) {
-    initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
-  }
+  const notTranscoding = !stream?.mediaSource.TranscodingUrl;
+  const initOptions = [
+    `--sub-text-scale=${settings.subtitleSize}`,
+    `--start=${startPosition}`,
+  ];
+  // if (
+  //   chosenSubtitleTrack &&
+  //   (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
+  // ) {
+  //   const finalIndex = notTranscoding
+  //     ? allSubs.indexOf(chosenSubtitleTrack)
+  //     : textSubs.indexOf(chosenSubtitleTrack);
+  //   initOptions.push(`--sub-track=${finalIndex}`);
+  // }
+
+  // if (notTranscoding && chosenAudioTrack) {
+  //   initOptions.push(`--audio-track=${allAudio.indexOf(chosenAudioTrack)}`);
+  // }
 
   const [isMounted, setIsMounted] = useState(false);
 
@@ -534,7 +423,7 @@ export default function page() {
     return () => setIsMounted(false);
   }, []);
 
-  if (itemStatus.isLoading || streamStatus.isLoading || !item || !stream) {
+  if (itemStatus.isLoading || streamStatus.isLoading) {
     return (
       <View className='w-screen h-screen flex flex-col items-center justify-center bg-black'>
         <Loader />
@@ -542,7 +431,7 @@ export default function page() {
     );
   }
 
-  if (itemStatus.isError || streamStatus.isError)
+  if (!item || !stream || itemStatus.isError || streamStatus.isError)
     return (
       <View className='w-screen h-screen flex flex-col items-center justify-center bg-black'>
         <Text className='text-white'>{t("player.error")}</Text>
@@ -563,12 +452,12 @@ export default function page() {
           paddingRight: ignoreSafeAreas ? 0 : insets.right,
         }}
       >
-        <VlcPlayerView
+        <MpvPlayerView
           ref={videoRef}
           source={{
             uri: stream?.url || "",
             autoplay: true,
-            isNetwork: !offline,
+            isNetwork: true,
             startPosition,
             externalSubtitles,
             initOptions,
@@ -591,7 +480,7 @@ export default function page() {
           }}
         />
       </View>
-      {videoRef.current && !isPipStarted && isMounted === true && item ? (
+      {videoRef.current && !isPipStarted && isMounted === true ? (
         <Controls
           mediaSource={stream?.mediaSource}
           item={item}
@@ -607,7 +496,6 @@ export default function page() {
           setIgnoreSafeAreas={setIgnoreSafeAreas}
           ignoreSafeAreas={ignoreSafeAreas}
           isVideoLoaded={isVideoLoaded}
-          startPictureInPicture={videoRef?.current?.startPictureInPicture}
           play={videoRef.current?.play}
           pause={videoRef.current?.pause}
           seek={videoRef.current?.seekTo}

app/_layout.tsx

@@ -7,6 +7,7 @@ import {
   getOrSetDeviceId,
   getTokenFromStorage,
 } from "@/providers/JellyfinProvider";
+import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
 import { type Settings, useSettings } from "@/utils/atoms/settings";
@@ -22,6 +23,7 @@ import {
   writeToLog,
 } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
+import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
@@ -135,13 +137,16 @@ if (!Platform.isTV) {
   TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
     console.log("TaskManager ~ trigger");
 
+    const now = Date.now();
+
     const settingsData = storage.getString("settings");
 
     if (!settingsData) return BackgroundFetch.BackgroundFetchResult.NoData;
 
     const settings: Partial<Settings> = JSON.parse(settingsData);
+    const url = settings?.optimizedVersionsServerUrl;
 
-    if (!settings?.autoDownload)
+    if (!settings?.autoDownload || !url)
       return BackgroundFetch.BackgroundFetchResult.NoData;
 
     const token = getTokenFromStorage();
@@ -151,6 +156,74 @@ if (!Platform.isTV) {
     if (!token || !deviceId || !baseDirectory)
       return BackgroundFetch.BackgroundFetchResult.NoData;
 
+    const jobs = await getAllJobsByDeviceId({
+      deviceId,
+      authHeader: token,
+      url,
+    });
+
+    console.log("TaskManager ~ Active jobs: ", jobs.length);
+
+    for (const job of jobs) {
+      if (job.status === "completed") {
+        const downloadUrl = `${url}download/${job.id}`;
+        const tasks = await BackGroundDownloader.checkForExistingDownloads();
+
+        if (tasks.find((task: { id: string }) => task.id === job.id)) {
+          console.log("TaskManager ~ Download already in progress: ", job.id);
+          continue;
+        }
+
+        BackGroundDownloader.download({
+          id: job.id,
+          url: downloadUrl,
+          destination: `${baseDirectory}${job.item.Id}.mp4`,
+          headers: {
+            Authorization: token,
+          },
+        })
+          .begin(() => {
+            console.log("TaskManager ~ Download started: ", job.id);
+          })
+          .done(() => {
+            console.log("TaskManager ~ Download completed: ", job.id);
+            saveDownloadedItemInfo(job.item);
+            BackGroundDownloader.completeHandler(job.id);
+            cancelJobById({
+              authHeader: token,
+              id: job.id,
+              url: url,
+            });
+            Notifications.scheduleNotificationAsync({
+              content: {
+                title: job.item.Name,
+                body: "Download completed",
+                data: {
+                  url: "/downloads",
+                },
+              },
+              trigger: null,
+            });
+          })
+          .error((error: any) => {
+            console.log("TaskManager ~ Download error: ", job.id, error);
+            BackGroundDownloader.completeHandler(job.id);
+            Notifications.scheduleNotificationAsync({
+              content: {
+                title: job.item.Name,
+                body: "Download failed",
+                data: {
+                  url: "/downloads",
+                },
+              },
+              trigger: null,
+            });
+          });
+      }
+    }
+
+    console.log(`Auto download started: ${new Date(now).toISOString()}`);
+
     // Be sure to return the successful result type!
     return BackgroundFetch.BackgroundFetchResult.NewData;
   });
@@ -341,32 +414,21 @@ function Layout() {
     }, []);
 
     useEffect(() => {
-      if (Platform.isTV) {
-        return;
-      }
-
+      if (Platform.isTV) return;
       if (segments.includes("direct-player" as never)) {
-        if (
-          !settings.followDeviceOrientation &&
-          settings.defaultVideoOrientation
-        ) {
-          ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-        }
         return;
       }
 
+      // If the user has auto rotate enabled, unlock the orientation
       if (settings.followDeviceOrientation === true) {
         ScreenOrientation.unlockAsync();
       } else {
+        // If the user has auto rotate disabled, lock the orientation to portrait
         ScreenOrientation.lockAsync(
           ScreenOrientation.OrientationLock.PORTRAIT_UP,
         );
       }
-    }, [
-      settings.followDeviceOrientation,
-      settings.defaultVideoOrientation,
-      segments,
-    ]);
+    }, [settings.followDeviceOrientation, segments]);
 
     useEffect(() => {
       const subscription = AppState.addEventListener(
@@ -391,62 +453,64 @@ function Layout() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <JellyfinProvider>
-        <PlaySettingsProvider>
-          <LogProvider>
-            <WebSocketProvider>
-              <DownloadProvider>
-                <BottomSheetModalProvider>
-                  <SystemBars style='light' hidden={false} />
-                  <ThemeProvider value={DarkTheme}>
-                    <Stack initialRouteName='(auth)/(tabs)'>
-                      <Stack.Screen
-                        name='(auth)/(tabs)'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
+      <JobQueueProvider>
+        <JellyfinProvider>
+          <PlaySettingsProvider>
+            <LogProvider>
+              <WebSocketProvider>
+                <DownloadProvider>
+                  <BottomSheetModalProvider>
+                    <SystemBars style='light' hidden={false} />
+                    <ThemeProvider value={DarkTheme}>
+                      <Stack initialRouteName='(auth)/(tabs)'>
+                        <Stack.Screen
+                          name='(auth)/(tabs)'
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
+                          }}
+                        />
+                        <Stack.Screen
+                          name='(auth)/player'
+                          options={{
+                            headerShown: false,
+                            title: "",
+                            header: () => null,
+                          }}
+                        />
+                        <Stack.Screen
+                          name='login'
+                          options={{
+                            headerShown: true,
+                            title: "",
+                            headerTransparent: true,
+                          }}
+                        />
+                        <Stack.Screen name='+not-found' />
+                      </Stack>
+                      <Toaster
+                        duration={4000}
+                        toastOptions={{
+                          style: {
+                            backgroundColor: "#262626",
+                            borderColor: "#363639",
+                            borderWidth: 1,
+                          },
+                          titleStyle: {
+                            color: "white",
+                          },
                         }}
+                        closeButton
                       />
-                      <Stack.Screen
-                        name='(auth)/player'
-                        options={{
-                          headerShown: false,
-                          title: "",
-                          header: () => null,
-                        }}
-                      />
-                      <Stack.Screen
-                        name='login'
-                        options={{
-                          headerShown: true,
-                          title: "",
-                          headerTransparent: true,
-                        }}
-                      />
-                      <Stack.Screen name='+not-found' />
-                    </Stack>
-                    <Toaster
-                      duration={4000}
-                      toastOptions={{
-                        style: {
-                          backgroundColor: "#262626",
-                          borderColor: "#363639",
-                          borderWidth: 1,
-                        },
-                        titleStyle: {
-                          color: "white",
-                        },
-                      }}
-                      closeButton
-                    />
-                  </ThemeProvider>
-                </BottomSheetModalProvider>
-              </DownloadProvider>
-            </WebSocketProvider>
-          </LogProvider>
-        </PlaySettingsProvider>
-      </JellyfinProvider>
+                    </ThemeProvider>
+                  </BottomSheetModalProvider>
+                </DownloadProvider>
+              </WebSocketProvider>
+            </LogProvider>
+          </PlaySettingsProvider>
+        </JellyfinProvider>
+      </JobQueueProvider>
     </QueryClientProvider>
   );
 }

biome.json

@@ -1,14 +1,16 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
   "files": {
-    "includes": [
-      "**/*",
-      "!node_modules/**",
-      "!ios/**",
-      "!android/**",
-      "!Streamyfin.app/**",
-      "!utils/jellyseerr/**",
-      "!.expo/**"
+    "ignore": [
+      "node_modules",
+      "ios",
+      "android",
+      "Streamyfin.app",
+      "utils/jellyseerr",
+      ".expo"
     ]
   },
   "linter": {

components/ContinueWatchingPoster.tsx

@@ -1,12 +1,11 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useAtomValue } from "jotai";
-import type React from "react";
 import { useMemo } from "react";
+import type React from "react";
 import { View } from "react-native";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { ProgressBar } from "./common/ProgressBar";
 import { WatchedIndicator } from "./WatchedIndicator";
 
 type ContinueWatchingPosterProps = {
@@ -63,6 +62,18 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
     return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
   }, [item]);
 
+  const progress = useMemo(() => {
+    if (item.Type === "Program") {
+      const startDate = new Date(item.StartDate || "");
+      const endDate = new Date(item.EndDate || "");
+      const now = new Date();
+      const total = endDate.getTime() - startDate.getTime();
+      const elapsed = now.getTime() - startDate.getTime();
+      return (elapsed / total) * 100;
+    }
+    return item.UserData?.PlayedPercentage || 0;
+  }, [item]);
+
   if (!url)
     return <View className='aspect-video border border-neutral-800 w-44' />;
 
@@ -90,8 +101,22 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
           </View>
         )}
       </View>
-      {!item.UserData?.Played && <WatchedIndicator item={item} />}
-      <ProgressBar item={item} />
+      {!progress && <WatchedIndicator item={item} />}
+      {progress > 0 && (
+        <>
+          <View
+            className={
+              "absolute w-100 bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full"
+            }
+          />
+          <View
+            style={{
+              width: `${progress}%`,
+            }}
+            className={"absolute bottom-0 left-0 h-1 bg-purple-600 w-full"}
+          />
+        </>
+      )}
     </View>
   );
 };

components/DownloadItem.tsx

@@ -1,3 +1,12 @@
+//import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { queueActions, queueAtom } from "@/utils/atoms/queue";
+import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { saveDownloadItemInfoToDiskTmp } from "@/utils/optimize-server";
+import download from "@/utils/profiles/download";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import {
   BottomSheetBackdrop,
@@ -14,23 +23,17 @@ import { t } from "i18next";
 import { useAtom } from "jotai";
 import type React from "react";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, Platform, Switch, View, type ViewProps } from "react-native";
+import { Alert, Platform, View, type ViewProps } from "react-native";
 import { toast } from "sonner-native";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { queueAtom } from "@/utils/atoms/queue";
-import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getDownloadUrl } from "@/utils/jellyfin/media/getDownloadUrl";
 import { AudioTrackSelector } from "./AudioTrackSelector";
 import { type Bitrate, BitrateSelector } from "./BitrateSelector";
 import { Button } from "./Button";
-import { Text } from "./common/Text";
 import { Loader } from "./Loader";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import ProgressCircle from "./ProgressCircle";
 import { RoundButton } from "./RoundButton";
 import { SubtitleTrackSelector } from "./SubtitleTrackSelector";
+import { Text } from "./common/Text";
 
 interface DownloadProps extends ViewProps {
   items: BaseItemDto[];
@@ -52,11 +55,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const [queue, _setQueue] = useAtom(queueAtom);
+  const [queue, setQueue] = useAtom(queueAtom);
   const [settings] = useSettings();
-  const [downloadUnwatchedOnly, setDownloadUnwatchedOnly] = useState(false);
 
   const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
+  //const { startRemuxing } = useRemuxHlsToMp4();
 
   const [selectedMediaSource, setSelectedMediaSource] = useState<
     MediaSourceInfo | undefined | null
@@ -75,6 +78,10 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     () => user?.Policy?.EnableContentDownloading,
     [user],
   );
+  const usingOptimizedServer = useMemo(
+    () => settings?.downloadMethod === DownloadMethod.Optimized,
+    [settings],
+  );
 
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -82,7 +89,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     bottomSheetModalRef.current?.present();
   }, []);
 
-  const handleSheetChanges = useCallback((_index: number) => { }, []);
+  const handleSheetChanges = useCallback((index: number) => {}, []);
 
   const closeModal = useCallback(() => {
     bottomSheetModalRef.current?.dismiss();
@@ -96,13 +103,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     [items, downloadedFiles],
   );
 
-  const itemsToDownload = useMemo(() => {
-    if (downloadUnwatchedOnly) {
-      return itemsNotDownloaded.filter((item) => !item.UserData?.Played);
-    }
-    return itemsNotDownloaded;
-  }, [itemsNotDownloaded, downloadUnwatchedOnly]);
-
   const allItemsDownloaded = useMemo(() => {
     if (items.length === 0) return false;
     return itemsNotDownloaded.length === 0;
@@ -137,14 +137,50 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       firstItem.Type !== "Episode"
         ? "/downloads"
         : ({
-          pathname: `/downloads/${firstItem.SeriesId}`,
-          params: {
-            episodeSeasonIndex: firstItem.ParentIndexNumber,
-          },
-        } as Href),
+            pathname: `/downloads/${firstItem.SeriesId}`,
+            params: {
+              episodeSeasonIndex: firstItem.ParentIndexNumber,
+            },
+          } as Href),
     );
   };
 
+  const acceptDownloadOptions = useCallback(() => {
+    if (userCanDownload === true) {
+      if (itemsNotDownloaded.some((i) => !i.Id)) {
+        throw new Error("No item id");
+      }
+      closeModal();
+
+      if (usingOptimizedServer) initiateDownload(...itemsNotDownloaded);
+      else {
+        queueActions.enqueue(
+          queue,
+          setQueue,
+          ...itemsNotDownloaded.map((item) => ({
+            id: item.Id!,
+            execute: async () => await initiateDownload(item),
+            item,
+          })),
+        );
+      }
+    } else {
+      toast.error(
+        t("home.downloads.toasts.you_are_not_allowed_to_download_files"),
+      );
+    }
+  }, [
+    queue,
+    setQueue,
+    itemsNotDownloaded,
+    usingOptimizedServer,
+    userCanDownload,
+    maxBitrate,
+    selectedMediaSource,
+    selectedAudioStream,
+    selectedSubtitleStream,
+  ]);
+
   const initiateDownload = useCallback(
     async (...items: BaseItemDto[]) => {
       if (
@@ -157,53 +193,49 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           "DownloadItem ~ initiateDownload: No api or user or item",
         );
       }
-      const downloadDetailsPromises = items.map(async (item) => {
-        const { mediaSource, audioIndex, subtitleIndex } =
-          itemsNotDownloaded.length > 1
-            ? getDefaultPlaySettings(item, settings!)
-            : {
-              mediaSource: selectedMediaSource,
-              audioIndex: selectedAudioStream,
-              subtitleIndex: selectedSubtitleStream,
-            };
+      let mediaSource = selectedMediaSource;
+      let audioIndex: number | undefined = selectedAudioStream;
+      let subtitleIndex: number | undefined = selectedSubtitleStream;
 
-        const downloadDetails = await getDownloadUrl({
+      for (const item of items) {
+        if (itemsNotDownloaded.length > 1) {
+          const defaults = getDefaultPlaySettings(item, settings!);
+          mediaSource = defaults.mediaSource;
+          audioIndex = defaults.audioIndex;
+          subtitleIndex = defaults.subtitleIndex;
+          // Keep using the selected bitrate for consistency across all downloads
+        }
+
+        const res = await getStreamUrl({
           api,
           item,
-          userId: user.Id!,
-          mediaSource: mediaSource!,
-          audioStreamIndex: audioIndex ?? -1,
-          subtitleStreamIndex: subtitleIndex ?? -1,
-          maxBitrate,
-          deviceId: api.deviceInfo.id,
+          startTimeTicks: 0,
+          userId: user?.Id,
+          audioStreamIndex: audioIndex,
+          maxStreamingBitrate: maxBitrate.value,
+          mediaSourceId: mediaSource?.Id,
+          subtitleStreamIndex: subtitleIndex,
+          deviceProfile: download,
         });
 
-        return {
-          url: downloadDetails?.url,
-          item,
-          mediaSource: downloadDetails?.mediaSource,
-        };
-      });
-
-      const downloadDetails = await Promise.all(downloadDetailsPromises);
-      for (const { url, item, mediaSource } of downloadDetails) {
-        if (!url) {
+        if (!res) {
           Alert.alert(
             t("home.downloads.something_went_wrong"),
             t("home.downloads.could_not_get_stream_url_from_jellyfin"),
           );
           continue;
         }
-        if (!mediaSource) {
-          console.error(`Could not get download URL for ${item.Name}`);
-          toast.error(
-            t("Could not get download URL for {{itemName}}", {
-              itemName: item.Name,
-            }),
-          );
-          continue;
+
+        const { mediaSource: source, url } = res;
+
+        if (!url || !source) throw new Error("No url");
+
+        if (usingOptimizedServer) {
+          saveDownloadItemInfoToDiskTmp(item, source, url);
+          await startBackgroundDownload(url, item, source);
+        } else {
+          //await startRemuxing(item, url, source);
         }
-        await startBackgroundDownload(url, item, mediaSource, maxBitrate);
       }
     },
     [
@@ -215,25 +247,12 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       selectedSubtitleStream,
       settings,
       maxBitrate,
+      usingOptimizedServer,
       startBackgroundDownload,
+      //startRemuxing,
     ],
   );
 
-  const acceptDownloadOptions = useCallback(() => {
-    if (userCanDownload === true) {
-      if (itemsToDownload.some((i) => !i.Id)) {
-        throw new Error("No item id");
-      }
-      closeModal();
-
-      initiateDownload(...itemsToDownload);
-    } else {
-      toast.error(
-        t("home.downloads.toasts.you_are_not_allowed_to_download_files"),
-      );
-    }
-  }, [closeModal, initiateDownload, itemsToDownload, userCanDownload]);
-
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
       <BottomSheetBackdrop
@@ -250,6 +269,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       if (itemsNotDownloaded.length !== 1) return;
       const { bitrate, mediaSource, audioIndex, subtitleIndex } =
         getDefaultPlaySettings(items[0], settings);
+
       setSelectedMediaSource(mediaSource ?? undefined);
       setSelectedAudioStream(audioIndex ?? 0);
       setSelectedSubtitleStream(subtitleIndex ?? -1);
@@ -323,7 +343,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               <Text className='text-neutral-300'>
                 {subtitle ||
                   t("item_card.download.download_x_item", {
-                    item_count: itemsToDownload.length,
+                    item_count: itemsNotDownloaded.length,
                   })}
               </Text>
             </View>
@@ -333,15 +353,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                 onChange={setMaxBitrate}
                 selected={maxBitrate}
               />
-              {itemsNotDownloaded.length > 1 && (
-                <View className='flex flex-row items-center justify-between w-full py-2'>
-                  <Text>{t("item_card.download.download_unwatched_only")}</Text>
-                  <Switch
-                    onValueChange={setDownloadUnwatchedOnly}
-                    value={downloadUnwatchedOnly}
-                  />
-                </View>
-              )}
               {itemsNotDownloaded.length === 1 && (
                 <>
                   <MediaSourceSelector
@@ -366,7 +377,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                 </>
               )}
             </View>
-
             <Button
               className='mt-auto'
               onPress={acceptDownloadOptions}
@@ -374,6 +384,13 @@ export const DownloadItems: React.FC<DownloadProps> = ({
             >
               {t("item_card.download.download_button")}
             </Button>
+            <View className='opacity-70 text-center w-full flex items-center'>
+              <Text className='text-xs'>
+                {usingOptimizedServer
+                  ? t("item_card.download.using_optimized_server")
+                  : t("item_card.download.using_default_method")}
+              </Text>
+            </View>
           </View>
         </BottomSheetView>
       </BottomSheetModal>

components/ItemContent.tsx

@@ -1,3 +1,24 @@
+import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { type Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { DownloadSingleItem } from "@/components/DownloadItem";
+import { OverviewText } from "@/components/OverviewText";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+// const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
+import { PlayButton } from "@/components/PlayButton";
+import { PlayedStatus } from "@/components/PlayedStatus";
+import { SimilarItems } from "@/components/SimilarItems";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
+import { ItemImage } from "@/components/common/ItemImage";
+import { CastAndCrew } from "@/components/series/CastAndCrew";
+import { CurrentSeries } from "@/components/series/CurrentSeries";
+import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
+import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
+import { useImageColors } from "@/hooks/useImageColors";
+import { useOrientation } from "@/hooks/useOrientation";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import type {
   BaseItemDto,
   MediaSourceInfo,
@@ -8,35 +29,11 @@ import { useAtom } from "jotai";
 import React, { useEffect, useMemo, useState } from "react";
 import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { type Bitrate, BitrateSelector } from "@/components/BitrateSelector";
-import { ItemImage } from "@/components/common/ItemImage";
-import { DownloadSingleItem } from "@/components/DownloadItem";
-import { OverviewText } from "@/components/OverviewText";
-import { ParallaxScrollView } from "@/components/ParallaxPage";
-// const PlayButton = !Platform.isTV ? require("@/components/PlayButton") : null;
-import { PlayButton } from "@/components/PlayButton";
-import { PlayedStatus } from "@/components/PlayedStatus";
-import { SimilarItems } from "@/components/SimilarItems";
-import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
-import { CastAndCrew } from "@/components/series/CastAndCrew";
-import { CurrentSeries } from "@/components/series/CurrentSeries";
-import { SeasonEpisodesCarousel } from "@/components/series/SeasonEpisodesCarousel";
-import useDefaultPlaySettings from "@/hooks/useDefaultPlaySettings";
-import { useImageColors } from "@/hooks/useImageColors";
-import { useItemQuery } from "@/hooks/useItemQuery";
-import { useOrientation } from "@/hooks/useOrientation";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
 import { AddToFavorites } from "./AddToFavorites";
 import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 import { MediaSourceSelector } from "./MediaSourceSelector";
 import { MoreMoviesWithActor } from "./MoreMoviesWithActor";
-import { PlayInRemoteSessionButton } from "./PlayInRemoteSession";
-
 const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
 
 export type SelectedOptions = {
@@ -46,20 +43,13 @@ export type SelectedOptions = {
   subtitleIndex: number;
 };
 
-interface ItemContentProps {
-  item: BaseItemDto;
-  isOffline: boolean;
-}
-
-export const ItemContent: React.FC<ItemContentProps> = React.memo(
-  ({ item, isOffline }) => {
+export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
+  ({ item }) => {
     const [api] = useAtom(apiAtom);
     const [settings] = useSettings();
     const { orientation } = useOrientation();
     const navigation = useNavigation();
     const insets = useSafeAreaInsets();
-    const [user] = useAtom(userAtom);
-
     useImageColors({ item });
 
     const [loadingLogo, setLoadingLogo] = useState(true);
@@ -74,75 +64,62 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
       defaultBitrate,
       defaultMediaSource,
       defaultSubtitleIndex,
-    } = useDefaultPlaySettings(item!, settings);
-
-    const logoUrl = useMemo(
-      () => (item ? getLogoImageUrlById({ api, item }) : null),
-      [api, item],
-    );
-
-    const loading = useMemo(() => {
-      return Boolean(logoUrl && loadingLogo);
-    }, [loadingLogo, logoUrl]);
+    } = useDefaultPlaySettings(item, settings);
 
     // Needs to automatically change the selected to the default values for default indexes.
     useEffect(() => {
-      if (item) {
-        setSelectedOptions(() => ({
-          bitrate: defaultBitrate,
-          mediaSource: defaultMediaSource,
-          subtitleIndex: defaultSubtitleIndex ?? -1,
-          audioIndex: defaultAudioIndex,
-        }));
-      }
+      setSelectedOptions(() => ({
+        bitrate: defaultBitrate,
+        mediaSource: defaultMediaSource,
+        subtitleIndex: defaultSubtitleIndex ?? -1,
+        audioIndex: defaultAudioIndex,
+      }));
     }, [
       defaultAudioIndex,
       defaultBitrate,
       defaultSubtitleIndex,
       defaultMediaSource,
-      item,
     ]);
 
-    useEffect(() => {
-      if (Platform.isTV) {
-        return;
-      }
-      navigation.setOptions({
-        headerRight: () =>
-          item && (
-            <View className='flex flex-row items-center space-x-2'>
-              <Chromecast.Chromecast background='blur' width={22} height={22} />
-              {item.Type !== "Program" && (
-                <View className='flex flex-row items-center space-x-2'>
-                  {!Platform.isTV && !isOffline && (
-                    <DownloadSingleItem item={item} size='large' />
-                  )}
-                  {user?.Policy?.IsAdministrator && !isOffline && (
-                    <PlayInRemoteSessionButton item={item} size='large' />
-                  )}
-                  <PlayedStatus
-                    items={[item]}
-                    size='large'
-                    isOffline={isOffline}
-                  />
-                  {!isOffline && <AddToFavorites item={item} />}
-                </View>
-              )}
-            </View>
-          ),
-      });
-    }, [item, navigation, isOffline, user]);
+    if (!Platform.isTV) {
+      useEffect(() => {
+        navigation.setOptions({
+          headerRight: () =>
+            item && (
+              <View className='flex flex-row items-center space-x-2'>
+                <Chromecast.Chromecast
+                  background='blur'
+                  width={22}
+                  height={22}
+                />
+                {item.Type !== "Program" && (
+                  <View className='flex flex-row items-center space-x-2'>
+                    {!Platform.isTV && (
+                      <DownloadSingleItem item={item} size='large' />
+                    )}
+                    <PlayedStatus items={[item]} size='large' />
+                    <AddToFavorites item={item} />
+                  </View>
+                )}
+              </View>
+            ),
+        });
+      }, [item]);
+    }
 
     useEffect(() => {
-      if (item) {
-        if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
-          setHeaderHeight(230);
-        else if (item.Type === "Movie") setHeaderHeight(500);
-        else setHeaderHeight(350);
-      }
-    }, [item, orientation]);
+      if (orientation !== ScreenOrientation.OrientationLock.PORTRAIT_UP)
+        setHeaderHeight(230);
+      else if (item.Type === "Movie") setHeaderHeight(500);
+      else setHeaderHeight(350);
+    }, [item.Type, orientation]);
 
-    if (!item || !selectedOptions) return null;
+    const logoUrl = useMemo(() => getLogoImageUrlById({ api, item }), [item]);
+
+    const loading = useMemo(() => {
+      return Boolean(logoUrl && loadingLogo);
+    }, [loadingLogo, logoUrl]);
+    if (!selectedOptions) return null;
 
     return (
       <View
@@ -183,13 +160,13 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                 onLoad={() => setLoadingLogo(false)}
                 onError={() => setLoadingLogo(false)}
               />
-            ) : undefined
+            ) : null
           }
         >
           <View className='flex flex-col bg-transparent shrink'>
             <View className='flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink'>
               <ItemHeader item={item} className='mb-4' />
-              {item.Type !== "Program" && !Platform.isTV && !isOffline && (
+              {item.Type !== "Program" && !Platform.isTV && (
                 <View className='flex flex-row items-center justify-start w-full h-16'>
                   <BitrateSelector
                     className='mr-1'
@@ -248,34 +225,25 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                 className='grow'
                 selectedOptions={selectedOptions}
                 item={item}
-                isOffline={isOffline}
               />
             </View>
 
             {item.Type === "Episode" && (
-              <SeasonEpisodesCarousel
-                item={item}
-                loading={loading}
-                isOffline={isOffline}
-              />
+              <SeasonEpisodesCarousel item={item} loading={loading} />
             )}
 
-            {!isOffline && (
-              <ItemTechnicalDetails source={selectedOptions.mediaSource} />
-            )}
+            <ItemTechnicalDetails source={selectedOptions.mediaSource} />
             <OverviewText text={item.Overview} className='px-4 mb-4' />
 
             {item.Type !== "Program" && (
               <>
-                {item.Type === "Episode" && !isOffline && (
+                {item.Type === "Episode" && (
                   <CurrentSeries item={item} className='mb-4' />
                 )}
 
-                {!isOffline && (
-                  <CastAndCrew item={item} className='mb-4' loading={loading} />
-                )}
+                <CastAndCrew item={item} className='mb-4' loading={loading} />
 
-                {item.People && item.People.length > 0 && !isOffline && (
+                {item.People && item.People.length > 0 && (
                   <View className='mb-4'>
                     {item.People.slice(0, 3).map((person, idx) => (
                       <MoreMoviesWithActor
@@ -288,7 +256,7 @@ export const ItemContent: React.FC<ItemContentProps> = React.memo(
                   </View>
                 )}
 
-                {!isOffline && <SimilarItems itemId={item.Id} />}
+                <SimilarItems itemId={item.Id} />
               </>
             )}
           </View>

components/PlayButton.tsx

@@ -1,3 +1,14 @@
+import { useHaptic } from "@/hooks/useHaptic";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
+import { useSettings } from "@/utils/atoms/settings";
+import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
+import { chromecast } from "@/utils/profiles/chromecast";
+import { chromecasth265 } from "@/utils/profiles/chromecasth265";
+import ios from "@/utils/profiles/ios";
+import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
@@ -5,6 +16,7 @@ import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, Pressable } from "react-native";
 import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
@@ -22,23 +34,12 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { useHaptic } from "@/hooks/useHaptic";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
-import { useSettings } from "@/utils/atoms/settings";
-import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
-import { chromecast } from "@/utils/profiles/chromecast";
-import { chromecasth265 } from "@/utils/profiles/chromecasth265";
-import { runtimeTicksToMinutes } from "@/utils/time";
 import type { Button } from "./Button";
 import type { SelectedOptions } from "./ItemContent";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
   selectedOptions: SelectedOptions;
-  isOffline?: boolean;
 }
 
 const ANIMATION_DURATION = 500;
@@ -47,7 +48,6 @@ const MIN_PLAYBACK_WIDTH = 15;
 export const PlayButton: React.FC<Props> = ({
   item,
   selectedOptions,
-  isOffline,
   ...props
 }: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
@@ -67,17 +67,14 @@ export const PlayButton: React.FC<Props> = ({
   const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const [settings, updateSettings] = useSettings();
+  const [settings] = useSettings();
   const lightHapticFeedback = useHaptic("light");
 
   const goToPlayer = useCallback(
     (q: string) => {
-      if (settings.maxAutoPlayEpisodeCount.value !== -1) {
-        updateSettings({ autoPlayEpisodeCount: 0 });
-      }
       router.push(`/player/direct-player?${q}`);
     },
-    [router, isOffline],
+    [router],
   );
 
   const onPress = useCallback(async () => {
@@ -92,8 +89,6 @@ export const PlayButton: React.FC<Props> = ({
       subtitleIndex: selectedOptions.subtitleIndex?.toString() ?? "",
       mediaSourceId: selectedOptions.mediaSource?.Id ?? "",
       bitrateValue: selectedOptions.bitrate?.value?.toString() ?? "",
-      playbackPosition: item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-      offline: isOffline ? "true" : "false",
     });
 
     const queryString = queryParams.toString();

components/PlayInRemoteSession.tsx

@@ -1,194 +0,0 @@
-import { useAllSessions, type useSessionsProps } from "@/hooks/useSessions";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { Ionicons } from "@expo/vector-icons";
-import {
-  type BaseItemDto,
-  PlayCommand,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
-import { useAtomValue } from "jotai";
-import React, { useState } from "react";
-import {
-  FlatList,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { Loader } from "./Loader";
-import { RoundButton } from "./RoundButton";
-import { Text } from "./common/Text";
-
-interface Props extends React.ComponentProps<typeof View> {
-  item: BaseItemDto;
-  size?: "default" | "large";
-}
-
-export const PlayInRemoteSessionButton: React.FC<Props> = ({
-  item,
-  ...props
-}) => {
-  const [modalVisible, setModalVisible] = useState(false);
-  const api = useAtomValue(apiAtom);
-  const { sessions, isLoading } = useAllSessions({} as useSessionsProps);
-  const handlePlayInSession = async (sessionId: string) => {
-    if (!api || !item.Id) return;
-
-    try {
-      console.log(`Playing ${item.Name} in session ${sessionId}`);
-      getSessionApi(api).play({
-        sessionId,
-        itemIds: [item.Id],
-        playCommand: PlayCommand.PlayNow,
-      });
-
-      setModalVisible(false);
-    } catch (error) {
-      console.error("Error playing in remote session:", error);
-    }
-  };
-
-  return (
-    <View {...props}>
-      <RoundButton
-        icon='play-circle-outline'
-        onPress={() => setModalVisible(true)}
-        size={props.size}
-      />
-
-      <Modal
-        animationType='slide'
-        transparent={true}
-        visible={modalVisible}
-        onRequestClose={() => setModalVisible(false)}
-      >
-        <View style={styles.centeredView}>
-          <View style={styles.modalView}>
-            <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>Select Session</Text>
-              <TouchableOpacity onPress={() => setModalVisible(false)}>
-                <Ionicons name='close' size={24} color='white' />
-              </TouchableOpacity>
-            </View>
-
-            <View style={styles.modalContent}>
-              {isLoading ? (
-                <View style={styles.loadingContainer}>
-                  <Loader />
-                </View>
-              ) : !sessions || sessions.length === 0 ? (
-                <Text style={styles.noSessionsText}>
-                  No active sessions found
-                </Text>
-              ) : (
-                <FlatList
-                  data={sessions}
-                  keyExtractor={(session) => session.Id || "unknown"}
-                  renderItem={({ item: session }) => (
-                    <TouchableOpacity
-                      style={styles.sessionItem}
-                      onPress={() => handlePlayInSession(session.Id || "")}
-                    >
-                      <View style={styles.sessionInfo}>
-                        <Text style={styles.sessionName}>
-                          {session.DeviceName}
-                        </Text>
-                        <Text style={styles.sessionDetails}>
-                          {session.UserName} • {session.Client}
-                        </Text>
-                        {session.NowPlayingItem && (
-                          <Text style={styles.nowPlaying} numberOfLines={1}>
-                            Now playing:{" "}
-                            {session.NowPlayingItem.SeriesName
-                              ? `${session.NowPlayingItem.SeriesName} :`
-                              : ""}
-                            {session.NowPlayingItem.Name}
-                          </Text>
-                        )}
-                      </View>
-                      <Ionicons name='play-sharp' size={20} color='#888' />
-                    </TouchableOpacity>
-                  )}
-                  contentContainerStyle={styles.listContent}
-                />
-              )}
-            </View>
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "rgba(0, 0, 0, 0.7)",
-  },
-  modalView: {
-    width: "90%",
-    maxHeight: "80%",
-    backgroundColor: "#1c1c1c",
-    borderRadius: 20,
-    overflow: "hidden",
-    display: "flex",
-    flexDirection: "column",
-  },
-  modalHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: "#333",
-  },
-  modalContent: {
-    flex: 1,
-  },
-  modalTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-  },
-  loadingContainer: {
-    padding: 40,
-    alignItems: "center",
-  },
-  noSessionsText: {
-    padding: 40,
-    textAlign: "center",
-    color: "#888",
-  },
-  listContent: {
-    paddingVertical: 8,
-  },
-  sessionItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: "#333",
-  },
-  sessionInfo: {
-    flex: 1,
-  },
-  sessionName: {
-    fontSize: 16,
-    fontWeight: "500",
-    marginBottom: 4,
-  },
-  sessionDetails: {
-    fontSize: 13,
-    opacity: 0.7,
-    marginBottom: 2,
-  },
-  nowPlaying: {
-    fontSize: 12,
-    opacity: 0.5,
-    fontStyle: "italic",
-  },
-});

components/PlayedStatus.tsx

@@ -1,22 +1,50 @@
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { useQueryClient } from "@tanstack/react-query";
 import type React from "react";
 import { View, type ViewProps } from "react-native";
-import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
   items: BaseItemDto[];
-  isOffline?: boolean;
   size?: "default" | "large";
 }
 
-export const PlayedStatus: React.FC<Props> = ({
-  items,
-  isOffline = false,
-  ...props
-}) => {
+export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
+  const queryClient = useQueryClient();
+
+  const invalidateQueries = () => {
+    items.forEach((item) => {
+      queryClient.invalidateQueries({
+        queryKey: ["item", item.Id],
+      });
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["resumeItems"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["continueWatching"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["nextUp-all"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["nextUp"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["episodes"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["seasons"],
+    });
+    queryClient.invalidateQueries({
+      queryKey: ["home"],
+    });
+  };
+
   const allPlayed = items.every((item) => item.UserData?.Played);
-  const toggle = useMarkAsPlayed(items, isOffline);
+
+  const markAsPlayedStatus = useMarkAsPlayed(items);
 
   return (
     <View {...props}>
@@ -24,7 +52,8 @@ export const PlayedStatus: React.FC<Props> = ({
         fillColor={allPlayed ? "primary" : undefined}
         icon={allPlayed ? "checkmark" : "checkmark"}
         onPress={async () => {
-          await toggle(!allPlayed);
+          console.log(allPlayed);
+          await markAsPlayedStatus(!allPlayed);
         }}
         size={props.size}
       />

components/SubtitleTrackSelector.tsx

@@ -18,7 +18,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   selected,
   ...props
 }) => {
-  const { t } = useTranslation();
+  if (Platform.isTV) return null;
   const subtitleStreams = useMemo(() => {
     return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
   }, [source]);
@@ -28,7 +28,9 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     [subtitleStreams, selected],
   );
 
-  if (Platform.isTV || subtitleStreams?.length === 0) return null;
+  if (subtitleStreams?.length === 0) return null;
+
+  const { t } = useTranslation();
 
   return (
     <View

components/common/ProgressBar.tsx

@@ -1,47 +0,0 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React, { useMemo } from "react";
-import { View } from "react-native";
-
-interface ProgressBarProps {
-  item: BaseItemDto;
-}
-
-export const ProgressBar: React.FC<ProgressBarProps> = ({ item }) => {
-  const progress = useMemo(() => {
-    if (item.Type === "Program") {
-      if (!item.StartDate || !item.EndDate) {
-        return 0;
-      }
-      const startDate = new Date(item.StartDate);
-      const endDate = new Date(item.EndDate);
-      const now = new Date();
-      const total = endDate.getTime() - startDate.getTime();
-      if (total <= 0) {
-        return 0;
-      }
-      const elapsed = now.getTime() - startDate.getTime();
-      return (elapsed / total) * 100;
-    }
-    return item.UserData?.PlayedPercentage || 0;
-  }, [item]);
-
-  if (progress <= 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <View
-        className={
-          "absolute w-100 bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full"
-        }
-      />
-      <View
-        style={{
-          width: `${progress}%`,
-        }}
-        className={"absolute bottom-0 left-0 h-1 bg-purple-600 w-full"}
-      />
-    </>
-  );
-};

components/common/TouchableItemRouter.tsx

@@ -1,3 +1,5 @@
+import { useFavorite } from "@/hooks/useFavorite";
+import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import type {
   BaseItemDto,
@@ -6,12 +8,9 @@ import type {
 import { useRouter, useSegments } from "expo-router";
 import { type PropsWithChildren, useCallback } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import { useFavorite } from "@/hooks/useFavorite";
-import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
 
 interface Props extends TouchableOpacityProps {
   item: BaseItemDto;
-  isOffline?: boolean;
 }
 
 export const itemRouter = (
@@ -51,7 +50,6 @@ export const itemRouter = (
 
 export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
   item,
-  isOffline = false,
   children,
   ...props
 }) => {
@@ -107,10 +105,7 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         onLongPress={showActionSheet}
         onPress={() => {
-          let url = itemRouter(item, from);
-          if (isOffline) {
-            url += `&offline=true`;
-          }
+          const url = itemRouter(item, from);
           // @ts-expect-error
           router.push(url);
         }}
@@ -119,6 +114,4 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
         {children}
       </TouchableOpacity>
     );
-
-  return null;
 };

components/downloads/ActiveDownloads.tsx

@@ -1,3 +1,9 @@
+import { Text } from "@/components/common/Text";
+import { useDownload } from "@/providers/DownloadProvider";
+import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { storage } from "@/utils/mmkv";
+import type { JobStatus } from "@/utils/optimize-server";
+import { formatTimeString } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Image } from "expo-image";
@@ -13,22 +19,15 @@ import {
   type ViewProps,
 } from "react-native";
 import { toast } from "sonner-native";
-import { Text } from "@/components/common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { JobStatus } from "@/providers/Downloads/types";
-import { storage } from "@/utils/mmkv";
-import { formatTimeString } from "@/utils/time";
 import { Button } from "../Button";
-
 const BackGroundDownloader = !Platform.isTV
   ? require("@kesha-antonov/react-native-background-downloader")
   : null;
+//const FFmpegKitProvider = !Platform.isTV
+//  ? require("ffmpeg-kit-react-native")
+//  : null;
 
-interface Props extends ViewProps { }
-
-const bytesToMB = (bytes: number) => {
-  return bytes / 1024 / 1024;
-};
+interface Props extends ViewProps {}
 
 export const ActiveDownloads: React.FC<Props> = ({ ...props }) => {
   const { processes } = useDownload();
@@ -63,18 +62,37 @@ interface DownloadCardProps extends TouchableOpacityProps {
 }
 
 const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
-  const { startDownload, removeProcess } = useDownload();
+  const { processes, startDownload } = useDownload();
   const router = useRouter();
+  const { removeProcess, setProcesses } = useDownload();
+  const [settings] = useSettings();
   const queryClient = useQueryClient();
 
   const cancelJobMutation = useMutation({
     mutationFn: async (id: string) => {
       if (!process) throw new Error("No active download");
-      removeProcess(id);
+
+      if (settings?.downloadMethod === DownloadMethod.Optimized) {
+        try {
+          const tasks = await BackGroundDownloader.checkForExistingDownloads();
+          for (const task of tasks) {
+            if (task.id === id) {
+              task.stop();
+            }
+          }
+        } finally {
+          await removeProcess(id);
+          await queryClient.refetchQueries({ queryKey: ["jobs"] });
+        }
+      } else {
+        //FFmpegKitProvider.FFmpegKit.cancel(Number(id));
+        setProcesses((prev: any[]) =>
+          prev.filter((p: { id: string }) => p.id !== id),
+        );
+      }
     },
     onSuccess: () => {
       toast.success(t("home.downloads.toasts.download_cancelled"));
-      queryClient.invalidateQueries({ queryKey: ["downloads"] });
     },
     onError: (e) => {
       console.error(e);
@@ -83,14 +101,11 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
   });
 
   const eta = (p: JobStatus) => {
-    if (!p.speed || p.speed <= 0 || !p.estimatedTotalSizeBytes) return null;
+    if (!p.speed || !p.progress) return null;
 
-    const bytesRemaining = p.estimatedTotalSizeBytes - (p.bytesDownloaded || 0);
-    if (bytesRemaining <= 0) return null;
-
-    const secondsRemaining = bytesRemaining / p.speed;
-
-    return formatTimeString(secondsRemaining, "s");
+    const length = p?.item?.RunTimeTicks || 0;
+    const timeLeft = (length - length * (p.progress / 100)) / p.speed;
+    return formatTimeString(timeLeft, "tick");
   };
 
   const base64Image = useMemo(() => {
@@ -103,7 +118,8 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
       className='relative bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden'
       {...props}
     >
-      {process.status === "downloading" && (
+      {(process.status === "optimizing" ||
+        process.status === "downloading") && (
         <View
           className={`
         bg-purple-600 h-1 absolute bottom-0 left-0
@@ -143,10 +159,8 @@ const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
               ) : (
                 <Text className='text-xs'>{process.progress.toFixed(0)}%</Text>
               )}
-              {process.speed && process.speed > 0 && (
-                <Text className='text-xs'>
-                  {bytesToMB(process.speed).toFixed(2)} MB/s
-                </Text>
+              {process.speed && (
+                <Text className='text-xs'>{process.speed?.toFixed(2)}x</Text>
               )}
               {eta(process) && (
                 <Text className='text-xs'>

components/downloads/EpisodeCard.tsx

@@ -1,16 +1,25 @@
+import { useHaptic } from "@/hooks/useHaptic";
 import {
   ActionSheetProvider,
   useActionSheet,
 } from "@expo/react-native-action-sheet";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models/base-item-dto";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import type React from "react";
-import { useCallback } from "react";
-import { type TouchableOpacityProps, View } from "react-native";
+import { useCallback, useMemo } from "react";
+import {
+  TouchableOpacity,
+  type TouchableOpacityProps,
+  View,
+} from "react-native";
+
 import { Text } from "@/components/common/Text";
 import { DownloadSize } from "@/components/downloads/DownloadSize";
-import { useHaptic } from "@/hooks/useHaptic";
+import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
 import { useDownload } from "@/providers/DownloadProvider";
+import { storage } from "@/utils/mmkv";
 import { runtimeTicksToSeconds } from "@/utils/time";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
 import { TouchableItemRouter } from "../common/TouchableItemRouter";
 
@@ -18,17 +27,26 @@ interface EpisodeCardProps extends TouchableOpacityProps {
   item: BaseItemDto;
 }
 
-export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
+export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item, ...props }) => {
   const { deleteFile } = useDownload();
+  const { openFile } = useDownloadedFileOpener();
   const { showActionSheetWithOptions } = useActionSheet();
   const successHapticFeedback = useHaptic("success");
 
+  const base64Image = useMemo(() => {
+    return storage.getString(item.Id!);
+  }, [item]);
+
+  const handleOpenFile = useCallback(() => {
+    openFile(item);
+  }, [item, openFile]);
+
   /**
    * Handles deleting the file with haptic feedback.
    */
   const handleDeleteFile = useCallback(() => {
     if (item.Id) {
-      deleteFile(item.Id, "Episode");
+      deleteFile(item.Id);
       successHapticFeedback();
     }
   }, [deleteFile, item.Id]);
@@ -59,10 +77,10 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
   }, [showActionSheetWithOptions, handleDeleteFile]);
 
   return (
-    <TouchableItemRouter
-      item={item}
-      isOffline={true}
+    <TouchableOpacity
+      onPress={handleOpenFile}
       onLongPress={showActionSheet}
+      key={item.Id}
       className='flex flex-col mb-4'
     >
       <View className='flex flex-row items-start mb-2'>
@@ -86,7 +104,7 @@ export const EpisodeCard: React.FC<EpisodeCardProps> = ({ item }) => {
       <Text numberOfLines={3} className='text-xs text-neutral-500 shrink'>
         {item.Overview}
       </Text>
-    </TouchableItemRouter>
+    </TouchableOpacity>
   );
 };
 

components/downloads/MovieCard.tsx

@@ -1,18 +1,19 @@
+import { useHaptic } from "@/hooks/useHaptic";
 import {
   ActionSheetProvider,
   useActionSheet,
 } from "@expo/react-native-action-sheet";
-import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { Image } from "expo-image";
 import type React from "react";
 import { useCallback, useMemo } from "react";
-import { View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
+
 import { DownloadSize } from "@/components/downloads/DownloadSize";
+import { useDownloadedFileOpener } from "@/hooks/useDownloadedFileOpener";
 import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
-import { ProgressBar } from "../common/ProgressBar";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
+import { Ionicons } from "@expo/vector-icons";
+import { Image } from "expo-image";
 import { ItemCardText } from "../ItemCardText";
 
 interface MovieCardProps {
@@ -26,10 +27,16 @@ interface MovieCardProps {
  */
 export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
   const { deleteFile } = useDownload();
+  const { openFile } = useDownloadedFileOpener();
   const { showActionSheetWithOptions } = useActionSheet();
+  const successHapticFeedback = useHaptic("success");
+
+  const handleOpenFile = useCallback(() => {
+    openFile(item);
+  }, [item, openFile]);
 
   const base64Image = useMemo(() => {
-    return storage.getString(item?.Id!);
+    return storage.getString(item.Id!);
   }, []);
 
   /**
@@ -37,7 +44,8 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
    */
   const handleDeleteFile = useCallback(() => {
     if (item.Id) {
-      deleteFile(item.Id, "Movie");
+      deleteFile(item.Id);
+      successHapticFeedback();
     }
   }, [deleteFile, item.Id]);
 
@@ -67,9 +75,9 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
   }, [showActionSheetWithOptions, handleDeleteFile]);
 
   return (
-    <TouchableItemRouter onLongPress={showActionSheet} item={item} isOffline>
+    <TouchableOpacity onPress={handleOpenFile} onLongPress={showActionSheet}>
       {base64Image ? (
-        <View className='relative w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900'>
+        <View className='w-28 aspect-[10/15] rounded-lg overflow-hidden mr-2 border border-neutral-900'>
           <Image
             source={{
               uri: `data:image/jpeg;base64,${base64Image}`,
@@ -80,24 +88,22 @@ export const MovieCard: React.FC<MovieCardProps> = ({ item }) => {
               resizeMode: "cover",
             }}
           />
-          <ProgressBar item={item} />
         </View>
       ) : (
-        <View className='relative w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center'>
+        <View className='w-28 aspect-[10/15] rounded-lg bg-neutral-900 mr-2 flex items-center justify-center'>
           <Ionicons
             name='image-outline'
             size={24}
             color='gray'
             className='self-center mt-16'
           />
-          <ProgressBar item={item} />
         </View>
       )}
       <View className='w-28'>
         <ItemCardText item={item} />
       </View>
       <DownloadSize items={[item]} />
-    </TouchableItemRouter>
+    </TouchableOpacity>
   );
 };
 

components/home/ScrollingCollectionList.tsx

@@ -1,3 +1,5 @@
+import { Text } from "@/components/common/Text";
+import MoviePoster from "@/components/posters/MoviePoster";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   type QueryFunction,
@@ -6,11 +8,9 @@ import {
 } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { ScrollView, View, type ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
-import MoviePoster from "@/components/posters/MoviePoster";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
-import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import { ItemCardText } from "../ItemCardText";
+import { TouchableItemRouter } from "../common/TouchableItemRouter";
 import SeriesPoster from "../posters/SeriesPoster";
 
 interface Props extends ViewProps {
@@ -20,7 +20,6 @@ interface Props extends ViewProps {
   queryKey: QueryKey;
   queryFn: QueryFunction<BaseItemDto[]>;
   hideIfEmpty?: boolean;
-  isOffline?: boolean;
 }
 
 export const ScrollingCollectionList: React.FC<Props> = ({
@@ -30,7 +29,6 @@ export const ScrollingCollectionList: React.FC<Props> = ({
   queryFn,
   queryKey,
   hideIfEmpty = false,
-  isOffline = false,
   ...props
 }) => {
   const { data, isLoading } = useQuery({
@@ -92,7 +90,6 @@ export const ScrollingCollectionList: React.FC<Props> = ({
               <TouchableItemRouter
                 item={item}
                 key={item.Id}
-                isOffline={isOffline}
                 className={`mr-2 
                   ${orientation === "horizontal" ? "w-44" : "w-28"}
                 `}

components/search/SearchItemWrapper.tsx

@@ -9,6 +9,7 @@ import type { PropsWithChildren } from "react";
 import { Text } from "../common/Text";
 
 type SearchItemWrapperProps<T> = {
+  ids?: string[] | null;
   items?: T[];
   renderItem: (item: any) => React.ReactNode;
   header?: string;
@@ -16,6 +17,7 @@ type SearchItemWrapperProps<T> = {
 };
 
 export const SearchItemWrapper = <T,>({
+  ids,
   items,
   renderItem,
   header,
@@ -24,7 +26,33 @@ export const SearchItemWrapper = <T,>({
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
 
-  if (!items || items.length === 0) return null;
+  const { data, isLoading: l1 } = useQuery({
+    queryKey: ["items", ids],
+    queryFn: async () => {
+      if (!user?.Id || !api || !ids || ids.length === 0) {
+        return [];
+      }
+
+      const itemPromises = ids.map((id) =>
+        getUserItemData({
+          api,
+          userId: user.Id,
+          itemId: id,
+        }),
+      );
+
+      const results = await Promise.all(itemPromises);
+
+      // Filter out null items
+      return results.filter(
+        (item) => item !== null,
+      ) as unknown as BaseItemDto[];
+    },
+    enabled: !!ids && ids.length > 0 && !!api && !!user?.Id,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
+  if (!data && (!items || items.length === 0)) return null;
 
   return (
     <>
@@ -39,7 +67,7 @@ export const SearchItemWrapper = <T,>({
         keyExtractor={(_, index) => index.toString()}
         estimatedItemSize={250}
         /*@ts-ignore */
-        data={items}
+        data={data || items}
         onEndReachedThreshold={1}
         onEndReached={onEndReached}
         //@ts-ignore

components/series/SeasonEpisodesCarousel.tsx

@@ -1,35 +1,30 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { router } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
-import { TouchableOpacity, type ViewProps } from "react-native";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
 import ContinueWatchingPoster from "../ContinueWatchingPoster";
+import { ItemCardText } from "../ItemCardText";
 import {
   HorizontalScroll,
   type HorizontalScrollRef,
 } from "../common/HorrizontalScroll";
-import { ItemCardText } from "../ItemCardText";
 
 interface Props extends ViewProps {
   item?: BaseItemDto | null;
   loading?: boolean;
-  isOffline?: boolean;
 }
 
 export const SeasonEpisodesCarousel: React.FC<Props> = ({
   item,
   loading,
-  isOffline,
   ...props
 }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
-  const { downloadedFiles } = useDownload();
 
   const scrollRef = useRef<HorizontalScrollRef>(null);
 
@@ -46,28 +41,24 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
     isLoading,
     isFetching,
   } = useQuery({
-    queryKey: ["episodes", seasonId, isOffline],
+    queryKey: ["episodes", seasonId],
     queryFn: async () => {
-      if (isOffline) {
-        return downloadedFiles
-          ?.filter(
-            (f) => f.item.Type === "Episode" && f.item.SeasonId === seasonId,
-          )
-          .map((f) => f.item);
-      }
-      if (!api || !user?.Id || !item?.SeriesId) return [];
-      const response = await getTvShowsApi(api).getEpisodes({
-        userId: user.Id,
-        seasonId: seasonId || undefined,
-        seriesId: item.SeriesId,
-        fields: [
-          "ItemCounts",
-          "PrimaryImageAspectRatio",
-          "CanDelete",
-          "MediaSourceCount",
-          "Overview",
-        ],
-      });
+      if (!api || !user?.Id) return [];
+      const response = await api.axiosInstance.get(
+        `${api.basePath}/Shows/${item?.Id}/Episodes`,
+        {
+          params: {
+            userId: user?.Id,
+            seasonId,
+            Fields:
+              "ItemCounts,PrimaryImageAspectRatio,CanDelete,MediaSourceCount,Overview",
+          },
+          headers: {
+            Authorization: `MediaBrowser DeviceId="${api.deviceInfo.id}", Token="${api.accessToken}"`,
+          },
+        },
+      );
+
       return response.data.Items as BaseItemDto[];
     },
     enabled: !!api && !!user?.Id && !!seasonId,
@@ -132,7 +123,7 @@ export const SeasonEpisodesCarousel: React.FC<Props> = ({
       data={episodes}
       extraData={item}
       loading={loading || isLoading || isFetching}
-      renderItem={(_item, _idx) => (
+      renderItem={(_item, idx) => (
         <TouchableOpacity
           key={_item.Id}
           onPress={() => {

components/series/SeasonPicker.tsx

@@ -86,8 +86,7 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
         userId: user.Id,
         seasonId: selectedSeasonId,
         enableUserData: true,
-        // Note: Including trick play is necessary to enable trick play downloads
-        fields: ["MediaSources", "MediaStreams", "Overview", "Trickplay"],
+        fields: ["MediaSources", "MediaStreams", "Overview"],
       });
 
       if (res.data.TotalRecordCount === 0)
@@ -98,10 +97,6 @@ export const SeasonPicker: React.FC<Props> = ({ item, initialSeasonIndex }) => {
 
       return res.data.Items;
     },
-    select: (data) =>
-      [...(data || [])].sort(
-        (a, b) => (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0),
-      ),
     enabled: !!api && !!user?.Id && !!item.Id && !!selectedSeasonId,
   });
 

components/settings/DownloadSettings.tsx

@@ -1,20 +1,32 @@
 import { Stepper } from "@/components/inputs/Stepper";
+import { useDownload } from "@/providers/DownloadProvider";
 import {
+  DownloadMethod,
   type Settings,
   useSettings,
 } from "@/utils/atoms/settings";
+import { Ionicons } from "@expo/vector-icons";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "expo-router";
 import React, { useMemo } from "react";
+import { Platform, Switch, TouchableOpacity } from "react-native";
+const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useTranslation } from "react-i18next";
+import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
 export default function DownloadSettings({ ...props }) {
   const [settings, updateSettings, pluginSettings] = useSettings();
+  const { setProcesses } = useDownload();
+  const router = useRouter();
+  const queryClient = useQueryClient();
   const { t } = useTranslation();
 
   const allDisabled = useMemo(
     () =>
+      pluginSettings?.downloadMethod?.locked === true &&
       pluginSettings?.remuxConcurrentLimit?.locked === true &&
       pluginSettings?.autoDownload.locked === true,
     [pluginSettings],
@@ -25,10 +37,69 @@ export default function DownloadSettings({ ...props }) {
   return (
     <DisabledSetting disabled={allDisabled} {...props} className='mb-4'>
       <ListGroup title={t("home.settings.downloads.downloads_title")}>
+        <ListItem
+          title={t("home.settings.downloads.download_method")}
+          disabled={pluginSettings?.downloadMethod?.locked}
+        >
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
+                <Text className='mr-1 text-[#8E8D91]'>
+                  {settings.downloadMethod === DownloadMethod.Remux
+                    ? t("home.settings.downloads.default")
+                    : t("home.settings.downloads.optimized")}
+                </Text>
+                <Ionicons
+                  name='chevron-expand-sharp'
+                  size={18}
+                  color='#5A5960'
+                />
+              </TouchableOpacity>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content
+              loop={true}
+              side='bottom'
+              align='start'
+              alignOffset={0}
+              avoidCollisions={true}
+              collisionPadding={8}
+              sideOffset={8}
+            >
+              <DropdownMenu.Label>
+                {t("home.settings.downloads.download_method")}
+              </DropdownMenu.Label>
+              <DropdownMenu.Item
+                key='1'
+                onSelect={() => {
+                  updateSettings({ downloadMethod: DownloadMethod.Remux });
+                  setProcesses([]);
+                }}
+              >
+                <DropdownMenu.ItemTitle>
+                  {t("home.settings.downloads.default")}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                key='2'
+                onSelect={() => {
+                  updateSettings({ downloadMethod: DownloadMethod.Optimized });
+                  setProcesses([]);
+                  queryClient.invalidateQueries({ queryKey: ["search"] });
+                }}
+              >
+                <DropdownMenu.ItemTitle>
+                  {t("home.settings.downloads.optimized")}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </ListItem>
+
         <ListItem
           title={t("home.settings.downloads.remux_max_download")}
           disabled={
-            pluginSettings?.remuxConcurrentLimit?.locked
+            pluginSettings?.remuxConcurrentLimit?.locked ||
+            settings.downloadMethod !== DownloadMethod.Remux
           }
         >
           <Stepper
@@ -43,6 +114,33 @@ export default function DownloadSettings({ ...props }) {
             }
           />
         </ListItem>
+
+        <ListItem
+          title={t("home.settings.downloads.auto_download")}
+          disabled={
+            pluginSettings?.autoDownload?.locked ||
+            settings.downloadMethod !== DownloadMethod.Optimized
+          }
+        >
+          <Switch
+            disabled={
+              pluginSettings?.autoDownload?.locked ||
+              settings.downloadMethod !== DownloadMethod.Optimized
+            }
+            value={settings.autoDownload}
+            onValueChange={(value) => updateSettings({ autoDownload: value })}
+          />
+        </ListItem>
+
+        <ListItem
+          disabled={
+            pluginSettings?.optimizedVersionsServerUrl?.locked ||
+            settings.downloadMethod !== DownloadMethod.Optimized
+          }
+          onPress={() => router.push("/settings/optimized-server/page")}
+          showArrow
+          title={t("home.settings.downloads.optimized_versions_server")}
+        />
       </ListGroup>
     </DisabledSetting>
   );

components/settings/HomeIndex.tsx

@@ -1,3 +1,15 @@
+import { Button } from "@/components/Button";
+import { Loader } from "@/components/Loader";
+import { Text } from "@/components/common/Text";
+import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
+import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
+import { MediaListSection } from "@/components/medialists/MediaListSection";
+import { Colors } from "@/constants/Colors";
+import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { useSettings } from "@/utils/atoms/settings";
+import { eventBus } from "@/utils/eventBus";
 import { Feather, Ionicons } from "@expo/vector-icons";
 import type { Api } from "@jellyfin/sdk";
 import type {
@@ -13,31 +25,23 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import NetInfo from "@react-native-community/netinfo";
 import { type QueryFunction, useQuery } from "@tanstack/react-query";
-import { useNavigation, useRouter, useSegments } from "expo-router";
+import {
+  useNavigation,
+  usePathname,
+  useRouter,
+  useSegments,
+} from "expo-router";
 import { useAtomValue } from "jotai";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ActivityIndicator,
-  Platform,
   RefreshControl,
   ScrollView,
   TouchableOpacity,
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { LargeMovieCarousel } from "@/components/home/LargeMovieCarousel";
-import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
-import { Loader } from "@/components/Loader";
-import { MediaListSection } from "@/components/medialists/MediaListSection";
-import { Colors } from "@/constants/Colors";
-import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { eventBus } from "@/utils/eventBus";
 
 type ScrollingCollectionListSection = {
   type: "ScrollingCollectionList";
@@ -66,9 +70,9 @@ export const HomeIndex = () => {
   const [loading, setLoading] = useState(false);
   const [
     settings,
-    _updateSettings,
-    _pluginSettings,
-    _setPluginSettings,
+    updateSettings,
+    pluginSettings,
+    setPluginSettings,
     refreshStreamyfinPluginSettings,
   ] = useSettings();
 
@@ -82,24 +86,7 @@ export const HomeIndex = () => {
   const scrollViewRef = useRef<ScrollView>(null);
 
   const { downloadedFiles, cleanCacheDirectory } = useDownload();
-  const prevIsConnected = useRef<boolean | null>(false);
-  const invalidateCache = useInvalidatePlaybackProgressCache();
   useEffect(() => {
-    // Only invalidate cache when transitioning from offline to online
-    if (isConnected && !prevIsConnected.current) {
-      invalidateCache();
-    }
-    // Update the ref to the current state for the next render
-    prevIsConnected.current = isConnected;
-  }, [isConnected, invalidateCache]);
-
-  useEffect(() => {
-    if (Platform.isTV) {
-      navigation.setOptions({
-        headerLeft: () => null,
-      });
-      return;
-    }
     const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
     navigation.setOptions({
       headerLeft: () => (
@@ -120,7 +107,7 @@ export const HomeIndex = () => {
   }, [downloadedFiles, navigation, router]);
 
   useEffect(() => {
-    cleanCacheDirectory().catch((_e) =>
+    cleanCacheDirectory().catch((e) =>
       console.error("Something went wrong cleaning cache directory"),
     );
   }, []);
@@ -155,6 +142,10 @@ export const HomeIndex = () => {
       setIsConnected(state.isConnected);
     });
 
+    // cleanCacheDirectory().catch((e) =>
+    //   console.error("Something went wrong cleaning cache directory")
+    // );
+
     return () => {
       unsubscribe();
     };
@@ -195,6 +186,8 @@ export const HomeIndex = () => {
     );
   }, [userViews]);
 
+  const invalidateCache = useInvalidatePlaybackProgressCache();
+
   const refetch = async () => {
     setLoading(true);
     await refreshStreamyfinPluginSettings();
@@ -232,168 +225,166 @@ export const HomeIndex = () => {
     [api, user?.Id],
   );
 
-  const defaultSections = useMemo(() => {
-    if (!api || !user?.Id) return [];
+  let sections: Section[] = [];
+  if (!settings?.home || !settings?.home?.sections) {
+    sections = useMemo(() => {
+      if (!api || !user?.Id) return [];
 
-    const latestMediaViews = collections.map((c) => {
-      const includeItemTypes: BaseItemKind[] =
-        c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
-      const title = t("home.recently_added_in", { libraryName: c.Name });
-      const queryKey = [
-        "home",
-        `recentlyAddedIn${c.CollectionType}`,
-        user?.Id!,
-        c.Id!,
-      ];
-      return createCollectionConfig(
-        title || "",
-        queryKey,
-        includeItemTypes,
-        c.Id,
-      );
-    });
-
-    const ss: Section[] = [
-      {
-        title: t("home.continue_watching"),
-        queryKey: ["home", "resumeItems"],
-        queryFn: async () =>
-          (
-            await getItemsApi(api).getResumeItems({
-              userId: user.Id,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              includeItemTypes: ["Movie", "Series", "Episode"],
-            })
-          ).data.Items || [],
-        type: "ScrollingCollectionList",
-        orientation: "horizontal",
-      },
-      {
-        title: t("home.next_up"),
-        queryKey: ["home", "nextUp-all"],
-        queryFn: async () =>
-          (
-            await getTvShowsApi(api).getNextUp({
-              userId: user?.Id,
-              fields: ["MediaSourceCount"],
-              limit: 20,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              enableResumable: false,
-            })
-          ).data.Items || [],
-        type: "ScrollingCollectionList",
-        orientation: "horizontal",
-      },
-      ...latestMediaViews,
-      // ...(mediaListCollections?.map(
-      //   (ml) =>
-      //     ({
-      //       title: ml.Name,
-      //       queryKey: ["home", "mediaList", ml.Id!],
-      //       queryFn: async () => ml,
-      //       type: "MediaListSection",
-      //       orientation: "vertical",
-      //     } as Section)
-      // ) || []),
-      {
-        title: t("home.suggested_movies"),
-        queryKey: ["home", "suggestedMovies", user?.Id],
-        queryFn: async () =>
-          (
-            await getSuggestionsApi(api).getSuggestions({
-              userId: user?.Id,
-              limit: 10,
-              mediaType: ["Video"],
-              type: ["Movie"],
-            })
-          ).data.Items || [],
-        type: "ScrollingCollectionList",
-        orientation: "vertical",
-      },
-      {
-        title: t("home.suggested_episodes"),
-        queryKey: ["home", "suggestedEpisodes", user?.Id],
-        queryFn: async () => {
-          try {
-            const suggestions = await getSuggestions(api, user.Id);
-            const nextUpPromises = suggestions.map((series) =>
-              getNextUp(api, user.Id, series.Id),
-            );
-            const nextUpResults = await Promise.all(nextUpPromises);
-
-            return nextUpResults.filter((item) => item !== null) || [];
-          } catch (error) {
-            console.error("Error fetching data:", error);
-            return [];
-          }
-        },
-        type: "ScrollingCollectionList",
-        orientation: "horizontal",
-      },
-    ];
-    return ss;
-  }, [api, user?.Id, collections, createCollectionConfig, t]);
-
-  const customSections = useMemo(() => {
-    if (!api || !user?.Id) return [];
-    const ss: Section[] = [];
-
-    for (const key in settings.home?.sections) {
-      // @ts-expect-error
-      const section = settings.home?.sections[key];
-      const id = section.title || key;
-      ss.push({
-        title: id,
-        queryKey: ["home", id],
-        queryFn: async () => {
-          if (section.items) {
-            const response = await getItemsApi(api).getItems({
-              userId: user?.Id,
-              limit: section.items?.limit || 25,
-              recursive: true,
-              includeItemTypes: section.items?.includeItemTypes,
-              sortBy: section.items?.sortBy,
-              sortOrder: section.items?.sortOrder,
-              filters: section.items?.filters,
-              parentId: section.items?.parentId,
-            });
-            return response.data.Items || [];
-          }
-          if (section.nextUp) {
-            const response = await getTvShowsApi(api).getNextUp({
-              userId: user?.Id,
-              fields: ["MediaSourceCount"],
-              limit: section.items?.limit || 25,
-              enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-              enableResumable: section.items?.enableResumable,
-              enableRewatching: section.items?.enableRewatching,
-            });
-            return response.data.Items || [];
-          }
-
-          if (section.latest) {
-            const response = await getUserLibraryApi(api).getLatestMedia({
-              userId: user?.Id,
-              includeItemTypes: section.latest?.includeItemTypes,
-              limit: section.latest?.limit || 25,
-              isPlayed: section.latest?.isPlayed,
-              groupItems: section.latest?.groupItems,
-            });
-            return response.data || [];
-          }
-          return [];
-        },
-        type: "ScrollingCollectionList",
-        orientation: section?.orientation || "vertical",
+      const latestMediaViews = collections.map((c) => {
+        const includeItemTypes: BaseItemKind[] =
+          c.CollectionType === "tvshows" ? ["Series"] : ["Movie"];
+        const title = t("home.recently_added_in", { libraryName: c.Name });
+        const queryKey = [
+          "home",
+          `recentlyAddedIn${c.CollectionType}`,
+          user?.Id!,
+          c.Id!,
+        ];
+        return createCollectionConfig(
+          title || "",
+          queryKey,
+          includeItemTypes,
+          c.Id,
+        );
       });
-    }
-    return ss;
-  }, [api, user?.Id, settings.home?.sections]);
 
-  const sections: Section[] =
-    !settings?.home || !settings?.home?.sections
-      ? defaultSections
-      : customSections;
+      const ss: Section[] = [
+        {
+          title: t("home.continue_watching"),
+          queryKey: ["home", "resumeItems"],
+          queryFn: async () =>
+            (
+              await getItemsApi(api).getResumeItems({
+                userId: user.Id,
+                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+                includeItemTypes: ["Movie", "Series", "Episode"],
+              })
+            ).data.Items || [],
+          type: "ScrollingCollectionList",
+          orientation: "horizontal",
+        },
+        {
+          title: t("home.next_up"),
+          queryKey: ["home", "nextUp-all"],
+          queryFn: async () =>
+            (
+              await getTvShowsApi(api).getNextUp({
+                userId: user?.Id,
+                fields: ["MediaSourceCount"],
+                limit: 20,
+                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+                enableResumable: false,
+              })
+            ).data.Items || [],
+          type: "ScrollingCollectionList",
+          orientation: "horizontal",
+        },
+        ...latestMediaViews,
+        // ...(mediaListCollections?.map(
+        //   (ml) =>
+        //     ({
+        //       title: ml.Name,
+        //       queryKey: ["home", "mediaList", ml.Id!],
+        //       queryFn: async () => ml,
+        //       type: "MediaListSection",
+        //       orientation: "vertical",
+        //     } as Section)
+        // ) || []),
+        {
+          title: t("home.suggested_movies"),
+          queryKey: ["home", "suggestedMovies", user?.Id],
+          queryFn: async () =>
+            (
+              await getSuggestionsApi(api).getSuggestions({
+                userId: user?.Id,
+                limit: 10,
+                mediaType: ["Video"],
+                type: ["Movie"],
+              })
+            ).data.Items || [],
+          type: "ScrollingCollectionList",
+          orientation: "vertical",
+        },
+        {
+          title: t("home.suggested_episodes"),
+          queryKey: ["home", "suggestedEpisodes", user?.Id],
+          queryFn: async () => {
+            try {
+              const suggestions = await getSuggestions(api, user.Id);
+              const nextUpPromises = suggestions.map((series) =>
+                getNextUp(api, user.Id, series.Id),
+              );
+              const nextUpResults = await Promise.all(nextUpPromises);
+
+              return nextUpResults.filter((item) => item !== null) || [];
+            } catch (error) {
+              console.error("Error fetching data:", error);
+              return [];
+            }
+          },
+          type: "ScrollingCollectionList",
+          orientation: "horizontal",
+        },
+      ];
+      return ss;
+    }, [api, user?.Id, collections]);
+  } else {
+    sections = useMemo(() => {
+      if (!api || !user?.Id) return [];
+      const ss: Section[] = [];
+
+      for (const key in settings.home?.sections) {
+        // @ts-expect-error
+        const section = settings.home?.sections[key];
+        const id = section.title || key;
+        ss.push({
+          title: id,
+          queryKey: ["home", id],
+          queryFn: async () => {
+            if (section.items) {
+              const response = await getItemsApi(api).getItems({
+                userId: user?.Id,
+                limit: section.items?.limit || 25,
+                recursive: true,
+                includeItemTypes: section.items?.includeItemTypes,
+                sortBy: section.items?.sortBy,
+                sortOrder: section.items?.sortOrder,
+                filters: section.items?.filters,
+                parentId: section.items?.parentId,
+              });
+              return response.data.Items || [];
+            }
+            if (section.nextUp) {
+              const response = await getTvShowsApi(api).getNextUp({
+                userId: user?.Id,
+                fields: ["MediaSourceCount"],
+                limit: section.items?.limit || 25,
+                enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+                enableResumable: section.items?.enableResumable,
+                enableRewatching: section.items?.enableRewatching,
+              });
+              return response.data.Items || [];
+            }
+
+            if (section.latest) {
+              const response = await getUserLibraryApi(api).getLatestMedia({
+                userId: user?.Id,
+                includeItemTypes: section.latest?.includeItemTypes,
+                limit: section.latest?.limit || 25,
+                isPlayed: section.latest?.isPlayed,
+                groupItems: section.latest?.groupItems,
+              });
+              return response.data || [];
+            }
+            return [];
+          },
+          type: "ScrollingCollectionList",
+          orientation: section?.orientation || "vertical",
+        });
+      }
+      return ss;
+    }, [api, user?.Id, settings.home?.sections]);
+  }
 
   if (isConnected === false) {
     return (

components/settings/OptimizedServerForm.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { Linking, TextInput, View } from "react-native";
+import { Text } from "../common/Text";
+
+interface Props {
+  value: string;
+  onChangeValue: (value: string) => void;
+}
+
+export const OptimizedServerForm: React.FC<Props> = ({
+  value,
+  onChangeValue,
+}) => {
+  const handleOpenLink = () => {
+    Linking.openURL("https://github.com/streamyfin/optimized-versions-server");
+  };
+
+  const { t } = useTranslation();
+
+  return (
+    <View>
+      <View className='flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4'>
+        <View className={"flex flex-row items-center bg-neutral-900 h-11 pr-4"}>
+          <Text className='mr-4'>{t("home.settings.downloads.url")}</Text>
+          <TextInput
+            className='text-white'
+            placeholder={t("home.settings.downloads.server_url_placeholder")}
+            value={value}
+            keyboardType='url'
+            returnKeyType='done'
+            autoCapitalize='none'
+            textContentType='URL'
+            onChangeText={(text) => onChangeValue(text)}
+          />
+        </View>
+      </View>
+      <Text className='px-4 text-xs text-neutral-500 mt-1'>
+        {t("home.settings.downloads.optimized_version_hint")}{" "}
+        <Text className='text-blue-500' onPress={handleOpenLink}>
+          {t("home.settings.downloads.read_more_about_optimized_server")}
+        </Text>
+      </Text>
+    </View>
+  );
+};

components/settings/OtherSettings.tsx

@@ -10,7 +10,6 @@ import {
 } from "@/utils/background-tasks";
 import { Ionicons } from "@expo/vector-icons";
 import { useRouter } from "expo-router";
-import i18n, { TFunction } from "i18next";
 import type React from "react";
 import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -252,46 +251,7 @@ export const OtherSettings: React.FC = () => {
             }
           />
         </ListItem>
-        <ListItem title={t("home.settings.other.max_auto_play_episode_count")}>
-          <Dropdown
-            data={AUTOPLAY_EPISODES_COUNT(t)}
-            keyExtractor={(item) => item.key}
-            titleExtractor={(item) => item.key}
-            title={
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3'>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {t(settings?.maxAutoPlayEpisodeCount.key)}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </TouchableOpacity>
-            }
-            label={t("home.settings.other.max_auto_play_episode_count")}
-            onSelected={(maxAutoPlayEpisodeCount) =>
-              updateSettings({ maxAutoPlayEpisodeCount })
-            }
-          />
-        </ListItem>
       </ListGroup>
     </DisabledSetting>
   );
 };
-
-const AUTOPLAY_EPISODES_COUNT = (
-  t: TFunction<"translation", undefined>,
-): {
-  key: string;
-  value: number;
-}[] => [
-  { key: t("home.settings.other.disabled"), value: -1 },
-  { key: "1", value: 1 },
-  { key: "2", value: 2 },
-  { key: "3", value: 3 },
-  { key: "4", value: 4 },
-  { key: "5", value: 5 },
-  { key: "6", value: 6 },
-  { key: "7", value: 7 },
-];

components/settings/StorageSettings.tsx

@@ -1,11 +1,12 @@
-import { useQuery } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
-import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useDownload } from "@/providers/DownloadProvider";
+import { useQuery } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+import { useTranslation } from "react-i18next";
+import { View } from "react-native";
+import { toast } from "sonner-native";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
 
@@ -16,15 +17,22 @@ export const StorageSettings = () => {
   const errorHapticFeedback = useHaptic("error");
 
   const { data: size, isLoading: appSizeLoading } = useQuery({
-    queryKey: ["appSize"],
-    queryFn: appSizeUsage,
+    queryKey: ["appSize", appSizeUsage],
+    queryFn: async () => {
+      const app = await appSizeUsage;
+
+      const remaining = await FileSystem.getFreeDiskStorageAsync();
+      const total = await FileSystem.getTotalDiskCapacityAsync();
+
+      return { app, remaining, total, used: (total - remaining) / total };
+    },
   });
 
   const onDeleteClicked = async () => {
     try {
       await deleteAllFiles();
       successHapticFeedback();
-    } catch (_e) {
+    } catch (e) {
       errorHapticFeedback();
       toast.error(t("home.settings.toasts.error_deleting_files"));
     }
@@ -59,7 +67,10 @@ export const StorageSettings = () => {
               />
               <View
                 style={{
-                  width: `${((size.total - size.remaining - size.app) / size.total) * 100}%`,
+                  width: `${
+                    ((size.total - size.remaining - size.app) / size.total) *
+                    100
+                  }%`,
                   backgroundColor: Colors.primaryLightRGB,
                 }}
               />

components/video-player/controls/ContinueWatchingOverlay.tsx

@@ -1,49 +0,0 @@
-import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
-import { useSettings } from "@/utils/atoms/settings";
-import { useRouter } from "expo-router";
-import { t } from "i18next";
-import React from "react";
-import { View } from "react-native";
-
-export interface ContinueWatchingOverlayProps {
-  goToNextItem: (options: {
-    isAutoPlay: boolean;
-    resetWatchCount: boolean;
-  }) => void;
-}
-
-const ContinueWatchingOverlay: React.FC<ContinueWatchingOverlayProps> = ({
-  goToNextItem,
-}) => {
-  const [settings] = useSettings();
-  const router = useRouter();
-
-  return settings.autoPlayEpisodeCount >=
-    settings.maxAutoPlayEpisodeCount.value ? (
-    <View
-      className={
-        "absolute top-0 bottom-0 left-0 right-0 flex flex-col px-4 items-center justify-center bg-[#000000B3]"
-      }
-    >
-      <Text className='text-2xl font-bold text-white py-4 '>
-        Are you still watching ?
-      </Text>
-      <Button
-        onPress={() => {
-          goToNextItem({ isAutoPlay: false, resetWatchCount: true });
-        }}
-        color={"purple"}
-        className='my-4 w-2/3'
-      >
-        {t("player.continue_watching")}
-      </Button>
-
-      <Button onPress={router.back} color={"transparent"} className='w-2/3'>
-        {t("player.go_back")}
-      </Button>
-    </View>
-  ) : null;
-};
-
-export default ContinueWatchingOverlay;

components/video-player/controls/Controls.tsx

@@ -1,3 +1,25 @@
+import { Loader } from "@/components/Loader";
+import { Text } from "@/components/common/Text";
+import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
+import { useCreditSkipper } from "@/hooks/useCreditSkipper";
+import { useHaptic } from "@/hooks/useHaptic";
+import { useIntroSkipper } from "@/hooks/useIntroSkipper";
+import { useTrickplay } from "@/hooks/useTrickplay";
+import type { MpvPlayerViewRef, TrackInfo } from "@/modules/MpvPlayer.types";
+import { VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { VideoPlayer, useSettings } from "@/utils/atoms/settings";
+import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
+import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
+import { writeToLog } from "@/utils/log";
+import {
+  formatTimeString,
+  msToTicks,
+  secondsToMs,
+  ticksToMs,
+  ticksToSeconds,
+} from "@/utils/time";
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import type {
   BaseItemDto,
@@ -20,52 +42,31 @@ import {
 import {
   Platform,
   TouchableOpacity,
-  useWindowDimensions,
   View,
+  useWindowDimensions,
 } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import {
-  runOnJS,
   type SharedValue,
+  runOnJS,
   useAnimatedReaction,
   useSharedValue,
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { Text } from "@/components/common/Text";
-import { Loader } from "@/components/Loader";
-import ContinueWatchingOverlay from "@/components/video-player/controls/ContinueWatchingOverlay";
-import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
-import { useCreditSkipper } from "@/hooks/useCreditSkipper";
-import { useHaptic } from "@/hooks/useHaptic";
-import { useIntroSkipper } from "@/hooks/useIntroSkipper";
-import { useTrickplay } from "@/hooks/useTrickplay";
-import type { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
-import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
-import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
-import { writeToLog } from "@/utils/log";
-import {
-  formatTimeString,
-  msToTicks,
-  secondsToMs,
-  ticksToMs,
-  ticksToSeconds,
-} from "@/utils/time";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
-import { ControlProvider } from "./contexts/ControlContext";
-import { VideoProvider } from "./contexts/VideoContext";
-import DropdownView from "./dropdown/DropdownView";
 import { EpisodeList } from "./EpisodeList";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
 import SkipButton from "./SkipButton";
-import { useControlsTimeout } from "./useControlsTimeout";
 import { VideoTouchOverlay } from "./VideoTouchOverlay";
+import { ControlProvider } from "./contexts/ControlContext";
+import { VideoProvider } from "./contexts/VideoContext";
+import DropdownView from "./dropdown/DropdownView";
+import { useControlsTimeout } from "./useControlsTimeout";
 
 interface Props {
   item: BaseItemDto;
-  videoRef: MutableRefObject<VlcPlayerViewRef | null>;
+  videoRef: MutableRefObject<VlcPlayerViewRef | MpvPlayerViewRef | null>;
   isPlaying: boolean;
   isSeeking: SharedValue<boolean>;
   cacheProgress: SharedValue<number>;
@@ -81,7 +82,7 @@ interface Props {
   isVideoLoaded?: boolean;
   mediaSource?: MediaSourceInfo | null;
   seek: (ticks: number) => void;
-  startPictureInPicture: () => Promise<void>;
+  startPictureInPicture?: () => Promise<void>;
   play: (() => Promise<void>) | (() => void);
   pause: () => void;
   getAudioTracks?: (() => Promise<TrackInfo[] | null>) | (() => TrackInfo[]);
@@ -118,9 +119,10 @@ export const Controls: FC<Props> = ({
   setSubtitleTrack,
   setAudioTrack,
   offline = false,
+  enableTrickplay = true,
   isVlc = false,
 }) => {
-  const [settings, updateSettings] = useSettings();
+  const [settings] = useSettings();
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const [api] = useAtom(apiAtom);
@@ -132,16 +134,13 @@ export const Controls: FC<Props> = ({
   const [showAudioSlider, setShowAudioSlider] = useState(false);
 
   const { height: screenHeight, width: screenWidth } = useWindowDimensions();
-  const { previousItem, nextItem } = useAdjacentItems({
-    item,
-    isOffline: offline,
-  });
+  const { previousItem, nextItem } = useAdjacentItems({ item });
   const {
     trickPlayUrl,
     calculateTrickplayUrl,
     trickplayInfo,
     prefetchAllTrickplayImages,
-  } = useTrickplay(item);
+  } = useTrickplay(item, !offline && enableTrickplay);
 
   const [currentTime, setCurrentTime] = useState(0);
   const [remainingTime, setRemainingTime] = useState(Number.POSITIVE_INFINITY);
@@ -176,21 +175,19 @@ export const Controls: FC<Props> = ({
   }>();
 
   const { showSkipButton, skipIntro } = useIntroSkipper(
-    item?.Id!,
+    offline ? undefined : item.Id,
     currentTime,
     seek,
     play,
     isVlc,
-    offline,
   );
 
   const { showSkipCreditButton, skipCredit } = useCreditSkipper(
-    item?.Id!,
+    offline ? undefined : item.Id,
     currentTime,
     seek,
     play,
     isVlc,
-    offline,
   );
 
   const goToItemCommon = useCallback(
@@ -198,7 +195,9 @@ export const Controls: FC<Props> = ({
       if (!item || !settings) {
         return;
       }
+
       lightHapticFeedback();
+
       const previousIndexes = {
         subtitleIndex: subtitleIndex
           ? Number.parseInt(subtitleIndex)
@@ -216,18 +215,15 @@ export const Controls: FC<Props> = ({
         previousIndexes,
         mediaSource ?? undefined,
       );
+
       const queryParams = new URLSearchParams({
         itemId: item.Id ?? "",
         audioIndex: defaultAudioIndex?.toString() ?? "",
         subtitleIndex: defaultSubtitleIndex?.toString() ?? "",
         mediaSourceId: newMediaSource?.Id ?? "",
         bitrateValue: bitrateValue?.toString(),
-        playbackPosition:
-          item.UserData?.PlaybackPositionTicks?.toString() ?? "",
       }).toString();
 
-      console.log("queryParams", queryParams);
-
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
     },
@@ -241,85 +237,13 @@ export const Controls: FC<Props> = ({
     goToItemCommon(previousItem);
   }, [previousItem, goToItemCommon]);
 
-  const goToNextItem = useCallback(
-    ({
-      isAutoPlay,
-      resetWatchCount,
-    }: {
-      isAutoPlay?: boolean;
-      resetWatchCount?: boolean;
-    }) => {
-      if (!nextItem) {
-        return;
-      }
-
-      if (!isAutoPlay) {
-        // if we are not autoplaying, we won't update anything, we just go to the next item
-        goToItemCommon(nextItem);
-        if (resetWatchCount) {
-          updateSettings({
-            autoPlayEpisodeCount: 0,
-          });
-        }
-        return;
-      }
-
-      // Skip autoplay logic if maxAutoPlayEpisodeCount is -1
-      if (settings.maxAutoPlayEpisodeCount.value === -1) {
-        goToItemCommon(nextItem);
-        return;
-      }
-
-      if (
-        settings.autoPlayEpisodeCount + 1 <
-        settings.maxAutoPlayEpisodeCount.value
-      ) {
-        goToItemCommon(nextItem);
-      }
-
-      // Check if the autoPlayEpisodeCount is less than maxAutoPlayEpisodeCount for the autoPlay
-      if (
-        settings.autoPlayEpisodeCount < settings.maxAutoPlayEpisodeCount.value
-      ) {
-        // update the autoPlayEpisodeCount in settings
-        updateSettings({
-          autoPlayEpisodeCount: settings.autoPlayEpisodeCount + 1,
-        });
-      }
-    },
-    [nextItem, goToItemCommon],
-  );
-
-  // Add a memoized handler for autoplay next episode
-  const handleNextEpisodeAutoPlay = useCallback(() => {
-    goToNextItem({ isAutoPlay: true });
-  }, [goToNextItem]);
-
-  // Add a memoized handler for manual next episode
-  const handleNextEpisodeManual = useCallback(() => {
-    goToNextItem({ isAutoPlay: false });
-  }, [goToNextItem]);
-
-  // Add a memoized handler for ContinueWatchingOverlay
-  const handleContinueWatching = useCallback(
-    (options: { isAutoPlay?: boolean; resetWatchCount?: boolean }) => {
-      goToNextItem(options);
-    },
-    [goToNextItem],
-  );
+  const goToNextItem = useCallback(() => {
+    if (!nextItem) return;
+    goToItemCommon(nextItem);
+  }, [nextItem, goToItemCommon]);
 
   const goToItem = useCallback(
     async (itemId: string) => {
-      if (offline) {
-        const queryParams = new URLSearchParams({
-          itemId: itemId,
-          playbackPosition:
-            item.UserData?.PlaybackPositionTicks?.toString() ?? "",
-        }).toString();
-        // @ts-expect-error
-        router.replace(`player/direct-player?${queryParams}`);
-        return;
-      }
       const gotoItem = await getItemById(api, itemId);
       if (!gotoItem) return;
       goToItemCommon(gotoItem);
@@ -377,9 +301,7 @@ export const Controls: FC<Props> = ({
   };
 
   const handleSliderStart = useCallback(() => {
-    if (!showControls) {
-      return;
-    }
+    if (!showControls) return;
 
     setIsSliding(true);
     wasPlayingRef.current = isPlaying;
@@ -418,9 +340,7 @@ export const Controls: FC<Props> = ({
   );
 
   const handleSkipBackward = useCallback(async () => {
-    if (!settings?.rewindSkipTime) {
-      return;
-    }
+    if (!settings?.rewindSkipTime) return;
     wasPlayingRef.current = isPlaying;
     lightHapticFeedback();
     try {
@@ -452,9 +372,7 @@ export const Controls: FC<Props> = ({
           ? curr + secondsToMs(settings.forwardSkipTime)
           : ticksToSeconds(curr) + settings.forwardSkipTime;
         seek(Math.max(0, newTime));
-        if (wasPlayingRef.current) {
-          play();
-        }
+        if (wasPlayingRef.current) play();
       }
     } catch (error) {
       writeToLog("ERROR", "Error seeking video forwards", error);
@@ -537,6 +455,9 @@ export const Controls: FC<Props> = ({
 
   const onClose = async () => {
     lightHapticFeedback();
+    // await ScreenOrientation.lockAsync(
+    //   ScreenOrientation.OrientationLock.PORTRAIT_UP,
+    // );
     router.back();
   };
 
@@ -575,8 +496,8 @@ export const Controls: FC<Props> = ({
             pointerEvents={showControls ? "auto" : "none"}
             className={"flex flex-row w-full pt-2"}
           >
-            <View className='mr-auto'>
-              {!Platform.isTV && (!offline || !mediaSource?.TranscodingUrl) && (
+            {!Platform.isTV && (
+              <View className='mr-auto'>
                 <VideoProvider
                   getAudioTracks={getAudioTracks}
                   getSubtitleTracks={getSubtitleTracks}
@@ -586,25 +507,26 @@ export const Controls: FC<Props> = ({
                 >
                   <DropdownView />
                 </VideoProvider>
-              )}
-            </View>
+              </View>
+            )}
 
             <View className='flex flex-row items-center space-x-2 '>
-              {false && (
-                <TouchableOpacity
-                  onPress={startPictureInPicture}
-                  className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
-                >
-                  <MaterialIcons
-                    name='picture-in-picture'
-                    size={24}
-                    color='white'
-                    style={{ opacity: showControls ? 1 : 0 }}
-                  />
-                </TouchableOpacity>
-              )}
+              {!Platform.isTV &&
+                settings.defaultPlayer === VideoPlayer.VLC_4 && (
+                  <TouchableOpacity
+                    onPress={startPictureInPicture}
+                    className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
+                  >
+                    <MaterialIcons
+                      name='picture-in-picture'
+                      size={24}
+                      color='white'
+                      style={{ opacity: showControls ? 1 : 0 }}
+                    />
+                  </TouchableOpacity>
+                )}
 
-              {item?.Type === "Episode" && (
+              {item?.Type === "Episode" && !offline && (
                 <TouchableOpacity
                   onPress={() => {
                     switchOnEpisodeMode();
@@ -625,7 +547,7 @@ export const Controls: FC<Props> = ({
 
               {nextItem && !offline && (
                 <TouchableOpacity
-                  onPress={() => goToNextItem({ isAutoPlay: false })}
+                  onPress={goToNextItem}
                   className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
                 >
                   <Ionicons name='play-skip-forward' size={24} color='white' />
@@ -643,14 +565,16 @@ export const Controls: FC<Props> = ({
                   color='white'
                 />
               </TouchableOpacity>
+              {/* )} */}
               <TouchableOpacity
                 onPress={onClose}
-                className='aspect-square flex flex-col l items-center justify-center p-2'
+                className='aspect-square flex flex-col rounded-xl items-center justify-center p-2'
               >
                 <Ionicons name='close' size={24} color='white' />
               </TouchableOpacity>
             </View>
           </View>
+
           <View
             style={{
               position: "absolute",
@@ -818,21 +742,17 @@ export const Controls: FC<Props> = ({
                   onPress={skipCredit}
                   buttonText='Skip Credits'
                 />
-                {(settings.maxAutoPlayEpisodeCount.value === -1 ||
-                  settings.autoPlayEpisodeCount <
-                    settings.maxAutoPlayEpisodeCount.value) && (
-                  <NextEpisodeCountDownButton
-                    show={
-                      !nextItem
-                        ? false
-                        : isVlc
-                          ? remainingTime < 10000
-                          : remainingTime < 10
-                    }
-                    onFinish={handleNextEpisodeAutoPlay}
-                    onPress={handleNextEpisodeManual}
-                  />
-                )}
+                <NextEpisodeCountDownButton
+                  show={
+                    !nextItem
+                      ? false
+                      : isVlc
+                        ? remainingTime < 10000
+                        : remainingTime < 10
+                  }
+                  onFinish={goToNextItem}
+                  onPress={goToNextItem}
+                />
               </View>
             </View>
             <View
@@ -880,9 +800,6 @@ export const Controls: FC<Props> = ({
           </View>
         </>
       )}
-      {settings.maxAutoPlayEpisodeCount.value !== -1 && (
-        <ContinueWatchingOverlay goToNextItem={handleContinueWatching} />
-      )}
     </ControlProvider>
   );
 };

components/video-player/controls/EpisodeList.tsx

@@ -1,30 +1,26 @@
-import { Ionicons } from "@expo/vector-icons";
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useGlobalSearchParams } from "expo-router";
-import { atom, useAtom } from "jotai";
-import { useEffect, useMemo, useRef } from "react";
-import { TouchableOpacity, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
+import { DownloadSingleItem } from "@/components/DownloadItem";
+import { Loader } from "@/components/Loader";
 import {
   HorizontalScroll,
   type HorizontalScrollRef,
 } from "@/components/common/HorrizontalScroll";
 import { Text } from "@/components/common/Text";
-import { DownloadSingleItem } from "@/components/DownloadItem";
-import { Loader } from "@/components/Loader";
 import {
   SeasonDropdown,
   type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
-import { useItemQuery } from "@/hooks/useItemQuery";
-import { useDownload } from "@/providers/DownloadProvider";
-import type { DownloadedItem } from "@/providers/Downloads/types";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
 import { runtimeTicksToSeconds } from "@/utils/time";
+import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { atom, useAtom } from "jotai";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type Props = {
   item: BaseItemDto;
@@ -37,15 +33,12 @@ export const seasonIndexAtom = atom<SeasonIndexState>({});
 export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   const [api] = useAtom(apiAtom);
   const [user] = useAtom(userAtom);
+  const insets = useSafeAreaInsets(); // Get safe area insets
   const [seasonIndexState, setSeasonIndexState] = useAtom(seasonIndexAtom);
   const scrollViewRef = useRef<HorizontalScrollRef>(null); // Reference to the HorizontalScroll
   const scrollToIndex = (index: number) => {
     scrollViewRef.current?.scrollToIndex(index, 100);
   };
-  const { offline } = useGlobalSearchParams<{
-    offline: string;
-  }>();
-  const isOffline = offline === "true";
 
   // Set the initial season index
   useEffect(() => {
@@ -57,35 +50,23 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     }
   }, []);
 
-  const { downloadedFiles } = useDownload();
-
   const seasonIndex = seasonIndexState[item.SeriesId ?? ""];
-  const { data: seriesItem } = useItemQuery(item.SeriesId!, isOffline);
+  const [seriesItem, setSeriesItem] = useState<BaseItemDto | null>(null);
+
+  // This effect fetches the series item data/
+  useEffect(() => {
+    if (item.SeriesId) {
+      getUserItemData({ api, userId: user?.Id, itemId: item.SeriesId }).then(
+        (res) => {
+          setSeriesItem(res);
+        },
+      );
+    }
+  }, [item.SeriesId]);
 
   const { data: seasons } = useQuery({
     queryKey: ["seasons", item.SeriesId],
     queryFn: async () => {
-      if (isOffline) {
-        if (!item.SeriesId) return [];
-        const seriesEpisodes = downloadedFiles?.filter(
-          (f: DownloadedItem) => f.item.SeriesId === item.SeriesId,
-        );
-        const seasonNumbers = [
-          ...new Set(
-            seriesEpisodes
-              ?.map((f: DownloadedItem) => f.item.ParentIndexNumber)
-              .filter(Boolean),
-          ),
-        ];
-        // Create fake season objects
-        return seasonNumbers.map((seasonNumber) => ({
-          Id: seasonNumber,
-          IndexNumber: seasonNumber,
-          Name: `Season ${seasonNumber}`,
-          SeriesId: item.SeriesId,
-        }));
-      }
-
       if (!api || !user?.Id || !item.SeriesId) return [];
       const response = await api.axiosInstance.get(
         `${api.basePath}/Shows/${item.SeriesId}/Seasons`,
@@ -112,19 +93,9 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     [seasons, seasonIndex],
   );
 
-  const { data: episodes } = useQuery({
+  const { data: episodes, isFetching } = useQuery({
     queryKey: ["episodes", item.SeriesId, selectedSeasonId],
     queryFn: async () => {
-      if (isOffline) {
-        if (!item.SeriesId) return [];
-        return downloadedFiles
-          ?.filter(
-            (f: DownloadedItem) =>
-              f.item.SeriesId === item.SeriesId &&
-              f.item.ParentIndexNumber === seasonIndex,
-          )
-          .map((f: DownloadedItem) => f.item);
-      }
       if (!api || !user?.Id || !item.Id || !selectedSeasonId) return [];
       const res = await getTvShowsApi(api).getEpisodes({
         seriesId: item.SeriesId || "",
@@ -141,7 +112,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
 
   useEffect(() => {
     if (item?.Type === "Episode" && item.Id) {
-      const index = episodes?.findIndex((ep: BaseItemDto) => ep.Id === item.Id);
+      const index = episodes?.findIndex((ep) => ep.Id === item.Id);
       if (index !== undefined && index !== -1) {
         setTimeout(() => {
           scrollToIndex(index);
@@ -184,7 +155,7 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
   }
 
   return (
-    <SafeAreaView
+    <View
       style={{
         position: "absolute",
         backgroundColor: "black",
@@ -192,81 +163,92 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
         width: "100%",
       }}
     >
-      <View
-        style={{
-          justifyContent: "space-between",
-        }}
-        className={"flex flex-row items-center space-x-2 z-10 p-4"}
-      >
-        {seriesItem && (
-          <SeasonDropdown
-            item={seriesItem}
-            seasons={seasons}
-            state={seasonIndexState}
-            onSelect={(season) => {
-              setSeasonIndexState((prev) => ({
-                ...prev,
-                [item.SeriesId ?? ""]: season.IndexNumber,
-              }));
-            }}
-          />
-        )}
-        <TouchableOpacity
-          onPress={close}
-          className='aspect-square flex flex-col l items-center justify-center p-2'
+      <>
+        <View
+          style={{
+            justifyContent: "space-between",
+          }}
+          className={"flex flex-row items-center space-x-2 z-10 p-4"}
         >
-          <Ionicons name='close' size={24} color='white' />
-        </TouchableOpacity>
-      </View>
-
-      <HorizontalScroll
-        ref={scrollViewRef}
-        data={episodes}
-        extraData={item}
-        renderItem={(_item, _idx) => (
-          <View
-            key={_item.Id}
-            style={{}}
-            className={`flex flex-col w-44 ${item.Id !== _item.Id ? "opacity-75" : ""
-              }`}
-          >
-            <TouchableOpacity
-              onPress={() => {
-                goToItem(_item.Id);
+          {seriesItem && (
+            <SeasonDropdown
+              item={seriesItem}
+              seasons={seasons}
+              state={seasonIndexState}
+              onSelect={(season) => {
+                setSeasonIndexState((prev) => ({
+                  ...prev,
+                  [item.SeriesId ?? ""]: season.IndexNumber,
+                }));
               }}
+            />
+          )}
+          <TouchableOpacity
+            onPress={async () => {
+              close();
+            }}
+            className='aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2'
+          >
+            <Ionicons name='close' size={24} color='white' />
+          </TouchableOpacity>
+        </View>
+
+        <HorizontalScroll
+          ref={scrollViewRef}
+          data={episodes}
+          extraData={item}
+          renderItem={(_item, idx) => (
+            <View
+              key={_item.Id}
+              style={{}}
+              className={`flex flex-col w-44 ${
+                item.Id !== _item.Id ? "opacity-75" : ""
+              }`}
             >
-              <ContinueWatchingPoster
-                item={_item}
-                useEpisodePoster
-                showPlayButton={_item.Id !== item.Id}
-              />
-            </TouchableOpacity>
-            <View className='shrink'>
-              <Text
-                numberOfLines={2}
-                style={{
-                  lineHeight: 18, // Adjust this value based on your text size
-                  height: 36, // lineHeight * 2 for consistent two-line space
+              <TouchableOpacity
+                onPress={() => {
+                  goToItem(_item.Id);
                 }}
               >
-                {_item.Name}
-              </Text>
-              <Text numberOfLines={1} className='text-xs text-neutral-475'>
-                {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
-              </Text>
-              <Text className='text-xs text-neutral-500'>
-                {runtimeTicksToSeconds(_item.RunTimeTicks)}
+                <ContinueWatchingPoster
+                  item={_item}
+                  useEpisodePoster
+                  showPlayButton={_item.Id !== item.Id}
+                />
+              </TouchableOpacity>
+              <View className='shrink'>
+                <Text
+                  numberOfLines={2}
+                  style={{
+                    lineHeight: 18, // Adjust this value based on your text size
+                    height: 36, // lineHeight * 2 for consistent two-line space
+                  }}
+                >
+                  {_item.Name}
+                </Text>
+                <Text numberOfLines={1} className='text-xs text-neutral-475'>
+                  {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`}
+                </Text>
+                <Text className='text-xs text-neutral-500'>
+                  {runtimeTicksToSeconds(_item.RunTimeTicks)}
+                </Text>
+              </View>
+              <View className='self-start mt-2'>
+                <DownloadSingleItem item={_item} />
+              </View>
+              <Text
+                numberOfLines={5}
+                className='text-xs text-neutral-500 shrink'
+              >
+                {_item.Overview}
               </Text>
             </View>
-            <Text numberOfLines={5} className='text-xs text-neutral-500 shrink'>
-              {_item.Overview}
-            </Text>
-          </View>
-        )}
-        keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
-        estimatedItemSize={200}
-        showsHorizontalScrollIndicator={false}
-      />
-    </SafeAreaView>
+          )}
+          keyExtractor={(e: BaseItemDto) => e.Id ?? ""}
+          estimatedItemSize={200}
+          showsHorizontalScrollIndicator={false}
+        />
+      </>
+    </View>
   );
 };

components/video-player/controls/NextEpisodeCountDownButton.tsx

@@ -79,7 +79,7 @@ const NextEpisodeCountDownButton: React.FC<NextEpisodeCountDownButtonProps> = ({
     >
       <Animated.View style={animatedStyle} />
       <View className='px-3 py-3'>
-        <Text numberOfLines={1} className='text-center font-bold'>
+        <Text className='text-center font-bold'>
           {t("player.next_episode")}
         </Text>
       </View>

components/video-player/controls/contexts/VideoContext.tsx

@@ -1,16 +1,14 @@
-import { SubtitleDeliveryMethod } from "@jellyfin/sdk/lib/generated-client";
+import type { TrackInfo } from "@/modules/VlcPlayer.types";
 import { router, useLocalSearchParams } from "expo-router";
 import type React from "react";
 import {
-  createContext,
   type ReactNode,
+  createContext,
   useContext,
   useEffect,
   useMemo,
   useState,
 } from "react";
-import type { TrackInfo } from "@/modules/VlcPlayer.types";
-import { useSettings } from "@/utils/atoms/settings";
 import type { Track } from "../types";
 import { useControlContext } from "./ControlContext";
 
@@ -49,7 +47,6 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
 }) => {
   const [audioTracks, setAudioTracks] = useState<Track[] | null>(null);
   const [subtitleTracks, setSubtitleTracks] = useState<Track[] | null>(null);
-  const [_settings] = useSettings();
 
   const ControlContext = useControlContext();
   const isVideoLoaded = ControlContext?.isVideoLoaded;
@@ -58,27 +55,22 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   const allSubs =
     mediaSource?.MediaStreams?.filter((s) => s.Type === "Subtitle") || [];
 
-  const { itemId, audioIndex, bitrateValue, subtitleIndex, playbackPosition } =
+  const { itemId, audioIndex, bitrateValue, subtitleIndex } =
     useLocalSearchParams<{
       itemId: string;
       audioIndex: string;
       subtitleIndex: string;
       mediaSourceId: string;
       bitrateValue: string;
-      playbackPosition: string;
     }>();
 
-  const onTextBasedSubtitle = useMemo(() => {
-    return (
+  const onTextBasedSubtitle = useMemo(
+    () =>
       allSubs.find(
-        (s) =>
-          s.Index?.toString() === subtitleIndex &&
-          (s.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
-            s.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
-            s.DeliveryMethod === SubtitleDeliveryMethod.External),
-      ) || subtitleIndex === "-1"
-    );
-  }, [allSubs, subtitleIndex]);
+        (s) => s.Index?.toString() === subtitleIndex && s.IsTextSubtitleStream,
+      ) || subtitleIndex === "-1",
+    [allSubs, subtitleIndex],
+  );
 
   const setPlayerParams = ({
     chosenAudioIndex = audioIndex,
@@ -94,7 +86,6 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
       subtitleIndex: chosenSubtitleIndex,
       mediaSourceId: mediaSource?.Id ?? "",
       bitrateValue: bitrateValue,
-      playbackPosition: playbackPosition,
     }).toString();
 
     //@ts-ignore
@@ -133,32 +124,32 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
   useEffect(() => {
     const fetchTracks = async () => {
       if (getSubtitleTracks) {
-        let subtitleData = await getSubtitleTracks();
-        // Only FOR VLC 3, If we're transcoding, we need to reverse the subtitle data, because VLC reverses the HLS subtitles.
-        if (
-          mediaSource?.TranscodingUrl &&
-          subtitleData &&
-          subtitleData.length > 1
-        ) {
-          subtitleData = [subtitleData[0], ...subtitleData.slice(1).reverse()];
-        }
+        const subtitleData = await getSubtitleTracks();
 
-        let embedSubIndex = 1;
-        const processedSubs: Track[] = allSubs?.map((sub) => {
-          /** A boolean value determining if we should increment the embedSubIndex, currently only Embed and Hls subtitles are automatically added into VLC Player */
+        console.log("subtitleData", subtitleData);
+
+        // Step 1: Move external subs to the end, because VLC puts external subs at the end
+        const sortedSubs = allSubs.sort(
+          (a, b) => Number(a.IsExternal) - Number(b.IsExternal),
+        );
+
+        // Step 2: Apply VLC indexing logic
+        let textSubIndex = 0;
+        const processedSubs: Track[] = sortedSubs?.map((sub) => {
+          // Always increment for non-transcoding subtitles
+          // Only increment for text-based subtitles when transcoding
           const shouldIncrement =
-            sub.DeliveryMethod === SubtitleDeliveryMethod.Embed ||
-            sub.DeliveryMethod === SubtitleDeliveryMethod.Hls ||
-            sub.DeliveryMethod === SubtitleDeliveryMethod.External;
-          /** The index of subtitle inside VLC Player Itself */
-          const vlcIndex = subtitleData?.at(embedSubIndex)?.index ?? -1;
-          if (shouldIncrement) embedSubIndex++;
+            !mediaSource?.TranscodingUrl || sub.IsTextSubtitleStream;
+          const vlcIndex = subtitleData?.at(textSubIndex)?.index ?? -1;
+          const finalIndex = shouldIncrement ? vlcIndex : (sub.Index ?? -1);
+
+          if (shouldIncrement) textSubIndex++;
           return {
             name: sub.DisplayTitle || "Undefined Subtitle",
             index: sub.Index ?? -1,
             setTrack: () =>
               shouldIncrement
-                ? setTrackParams("subtitle", vlcIndex, sub.Index ?? -1)
+                ? setTrackParams("subtitle", finalIndex, sub.Index ?? -1)
                 : setPlayerParams({
                     chosenSubtitleIndex: sub.Index?.toString(),
                   }),
@@ -181,6 +172,7 @@ export const VideoProvider: React.FC<VideoProviderProps> = ({
         });
         setSubtitleTracks(subtitles);
       }
+
       if (getAudioTracks) {
         const audioData = await getAudioTracks();
 

components/video-player/controls/dropdown/DropdownView.tsx

@@ -1,11 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
-import { useCallback } from "react";
+import React, { useCallback } from "react";
 import { Platform, TouchableOpacity } from "react-native";
-
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useLocalSearchParams, useRouter } from "expo-router";
 import { BITRATES } from "@/components/BitrateSelector";
+import { useLocalSearchParams, useRouter } from "expo-router";
 import { useControlContext } from "../contexts/ControlContext";
 import { useVideoContext } from "../contexts/VideoContext";
 
@@ -19,18 +17,13 @@ const DropdownView = () => {
   ];
   const router = useRouter();
 
-  const { subtitleIndex, audioIndex, bitrateValue, playbackPosition, offline } =
-    useLocalSearchParams<{
-      itemId: string;
-      audioIndex: string;
-      subtitleIndex: string;
-      mediaSourceId: string;
-      bitrateValue: string;
-      playbackPosition: string;
-      offline: string;
-    }>();
-
-  const isOffline = offline === "true";
+  const { subtitleIndex, audioIndex, bitrateValue } = useLocalSearchParams<{
+    itemId: string;
+    audioIndex: string;
+    subtitleIndex: string;
+    mediaSourceId: string;
+    bitrateValue: string;
+  }>();
 
   const changeBitrate = useCallback(
     (bitrate: string) => {
@@ -40,12 +33,11 @@ const DropdownView = () => {
         subtitleIndex: subtitleIndex.toString() ?? "",
         mediaSourceId: mediaSource?.Id ?? "",
         bitrateValue: bitrate.toString(),
-        playbackPosition: playbackPosition,
       }).toString();
       // @ts-expect-error
       router.replace(`player/direct-player?${queryParams}`);
     },
-    [item, mediaSource, subtitleIndex, audioIndex, playbackPosition],
+    [item, mediaSource, subtitleIndex, audioIndex],
   );
 
   return (
@@ -64,34 +56,32 @@ const DropdownView = () => {
         collisionPadding={8}
         sideOffset={8}
       >
-        {!isOffline && (
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger key='qualitytrigger'>
-              Quality
-            </DropdownMenu.SubTrigger>
-            <DropdownMenu.SubContent
-              alignOffset={-10}
-              avoidCollisions={true}
-              collisionPadding={0}
-              loop={true}
-              sideOffset={10}
-            >
-              {BITRATES?.map((bitrate, idx: number) => (
-                <DropdownMenu.CheckboxItem
-                  key={`quality-item-${idx}`}
-                  value={bitrateValue === (bitrate.value?.toString() ?? "")}
-                  onValueChange={() =>
-                    changeBitrate(bitrate.value?.toString() ?? "")
-                  }
-                >
-                  <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
-                    {bitrate.key}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.CheckboxItem>
-              ))}
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        )}
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger key='qualitytrigger'>
+            Quality
+          </DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent
+            alignOffset={-10}
+            avoidCollisions={true}
+            collisionPadding={0}
+            loop={true}
+            sideOffset={10}
+          >
+            {BITRATES?.map((bitrate, idx: number) => (
+              <DropdownMenu.CheckboxItem
+                key={`quality-item-${idx}`}
+                value={bitrateValue === (bitrate.value?.toString() ?? "")}
+                onValueChange={() =>
+                  changeBitrate(bitrate.value?.toString() ?? "")
+                }
+              >
+                <DropdownMenu.ItemTitle key={`audio-item-title-${idx}`}>
+                  {bitrate.key}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.CheckboxItem>
+            ))}
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
         <DropdownMenu.Sub>
           <DropdownMenu.SubTrigger key='subtitle-trigger'>
             Subtitle

eas.json

@@ -47,14 +47,14 @@
     },
     "production": {
       "environment": "production",
-      "channel": "0.28.1",
+      "channel": "0.28.0",
       "android": {
         "image": "latest"
       }
     },
     "production-apk": {
       "environment": "production",
-      "channel": "0.28.1",
+      "channel": "0.28.0",
       "android": {
         "buildType": "apk",
         "image": "latest"
@@ -62,7 +62,7 @@
     },
     "production-apk-tv": {
       "environment": "production",
-      "channel": "0.28.1",
+      "channel": "0.28.0",
       "android": {
         "buildType": "apk",
         "image": "latest"

hooks/useAdjacentEpisodes.ts

@@ -1,63 +1,21 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getTvShowsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useMemo } from "react";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom } from "@/providers/JellyfinProvider";
 
 interface AdjacentEpisodesProps {
   item?: BaseItemDto | null;
-  isOffline?: boolean;
 }
 
-export const useAdjacentItems = ({
-  item,
-  isOffline = false,
-}: AdjacentEpisodesProps) => {
+export const useAdjacentItems = ({ item }: AdjacentEpisodesProps) => {
   const api = useAtomValue(apiAtom);
-  const { downloadedFiles } = useDownload();
 
   const { data: adjacentItems } = useQuery({
-    queryKey: ["adjacentItems", item?.Id, item?.SeriesId, isOffline],
+    queryKey: ["adjacentItems", item?.Id, item?.SeriesId],
     queryFn: async (): Promise<BaseItemDto[] | null> => {
-      if (!item || !item.SeriesId) {
-        return null;
-      }
-
-      if (isOffline) {
-        if (!downloadedFiles) return null;
-        const seriesEpisodes = downloadedFiles
-          .filter((f) => f.item.SeriesId === item.SeriesId)
-          .map((f) => f.item);
-
-        seriesEpisodes.sort((a, b) => {
-          if (a.ParentIndexNumber !== b.ParentIndexNumber) {
-            return (a.ParentIndexNumber ?? 0) - (b.ParentIndexNumber ?? 0);
-          }
-          return (a.IndexNumber ?? 0) - (b.IndexNumber ?? 0);
-        });
-
-        const currentIndex = seriesEpisodes.findIndex(
-          (ep) => ep.Id === item.Id,
-        );
-
-        if (currentIndex === -1) {
-          return null;
-        }
-
-        const result: BaseItemDto[] = [];
-        if (currentIndex > 0) {
-          result.push(seriesEpisodes[currentIndex - 1]);
-        }
-        result.push(seriesEpisodes[currentIndex]);
-        if (currentIndex < seriesEpisodes.length - 1) {
-          result.push(seriesEpisodes[currentIndex + 1]);
-        }
-        return result;
-      }
-
-      if (!api) {
+      if (!api || !item || !item.SeriesId) {
         return null;
       }
 
@@ -71,7 +29,7 @@ export const useAdjacentItems = ({
       return res.data.Items || null;
     },
     enabled:
-      (isOffline || !!api) &&
+      !!api &&
       !!item?.Id &&
       !!item?.SeriesId &&
       (item?.Type === "Episode" || item?.Type === "Audio"),

hooks/useCreditSkipper.ts

@@ -1,16 +1,33 @@
-import { useCallback, useEffect, useState } from "react";
-import { useSegments } from "@/utils/segments";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { writeToLog } from "@/utils/log";
 import { msToSeconds, secondsToMs } from "@/utils/time";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useState } from "react";
 import { useHaptic } from "./useHaptic";
 
+interface CreditTimestamps {
+  Introduction: {
+    Start: number;
+    End: number;
+    Valid: boolean;
+  };
+  Credits: {
+    Start: number;
+    End: number;
+    Valid: boolean;
+  };
+}
+
 export const useCreditSkipper = (
-  itemId: string,
+  itemId: string | undefined,
   currentTime: number,
   seek: (time: number) => void,
   play: () => void,
   isVlc = false,
-  isOffline = false,
 ) => {
+  const [api] = useAtom(apiAtom);
   const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
   const lightHapticFeedback = useHaptic("light");
 
@@ -26,28 +43,50 @@ export const useCreditSkipper = (
     seek(seconds);
   };
 
-  const { data: segments } = useSegments(itemId, isOffline);
-  const creditTimestamps = segments?.creditSegments?.[0];
+  const { data: creditTimestamps } = useQuery<CreditTimestamps | null>({
+    queryKey: ["creditTimestamps", itemId],
+    queryFn: async () => {
+      if (!itemId) {
+        return null;
+      }
+
+      const res = await api?.axiosInstance.get(
+        `${api.basePath}/Episode/${itemId}/Timestamps`,
+        {
+          headers: getAuthHeaders(api),
+        },
+      );
+
+      if (res?.status !== 200) {
+        return null;
+      }
+
+      return res?.data;
+    },
+    enabled: !!itemId,
+    retry: false,
+  });
 
   useEffect(() => {
     if (creditTimestamps) {
       setShowSkipCreditButton(
-        currentTime > creditTimestamps.startTime &&
-          currentTime < creditTimestamps.endTime,
+        currentTime > creditTimestamps.Credits.Start &&
+          currentTime < creditTimestamps.Credits.End,
       );
     }
   }, [creditTimestamps, currentTime]);
 
   const skipCredit = useCallback(() => {
     if (!creditTimestamps) return;
+    console.log(`Skipping credits to ${creditTimestamps.Credits.End}`);
     try {
       lightHapticFeedback();
-      wrappedSeek(creditTimestamps.endTime);
+      wrappedSeek(creditTimestamps.Credits.End);
       setTimeout(() => {
         play();
       }, 200);
     } catch (error) {
-      console.error("Error skipping credit", error);
+      writeToLog("ERROR", "Error skipping intro", error);
     }
   }, [creditTimestamps]);
 

hooks/useDefaultPlaySettings.ts

@@ -1,7 +1,10 @@
-import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useMemo } from "react";
-import { BITRATES } from "@/components/BitrateSelector";
+import { BITRATES, Bitrate } from "@/components/BitrateSelector";
 import type { Settings } from "@/utils/atoms/settings";
+import {
+  type BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client";
+import { useMemo } from "react";
 
 // Used only for initial play settings.
 const useDefaultPlaySettings = (
@@ -30,10 +33,10 @@ const useDefaultPlaySettings = (
 
     return {
       defaultAudioIndex:
-        preferedAudioIndex ?? defaultAudioIndex ?? firstAudioIndex ?? undefined,
-      defaultSubtitleIndex: mediaSource?.DefaultSubtitleStreamIndex ?? -1,
-      defaultMediaSource: mediaSource ?? undefined,
-      defaultBitrate: bitrate ?? undefined,
+        preferedAudioIndex || defaultAudioIndex || firstAudioIndex || undefined,
+      defaultSubtitleIndex: mediaSource?.DefaultSubtitleStreamIndex || -1,
+      defaultMediaSource: mediaSource || undefined,
+      defaultBitrate: bitrate || undefined,
     };
   }, [
     item.MediaSources,

hooks/useDownloadedFileOpener.ts

@@ -1,8 +1,31 @@
-import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useRouter } from "expo-router";
-import { useCallback } from "react";
 import { usePlaySettings } from "@/providers/PlaySettingsProvider";
 import { writeToLog } from "@/utils/log";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import * as FileSystem from "expo-file-system";
+import { useRouter } from "expo-router";
+import { useCallback } from "react";
+
+export const getDownloadedFileUrl = async (itemId: string): Promise<string> => {
+  const directory = FileSystem.documentDirectory;
+
+  if (!directory) {
+    throw new Error("Document directory is not available");
+  }
+
+  if (!itemId) {
+    throw new Error("Item ID is not available");
+  }
+
+  const files = await FileSystem.readDirectoryAsync(directory);
+  const path = itemId!;
+  const matchingFile = files.find((file) => file.startsWith(path));
+
+  if (!matchingFile) {
+    throw new Error(`No file found for item ${path}`);
+  }
+
+  return `${directory}${matchingFile}`;
+};
 
 export const useDownloadedFileOpener = () => {
   const router = useRouter();
@@ -10,19 +33,9 @@ export const useDownloadedFileOpener = () => {
 
   const openFile = useCallback(
     async (item: BaseItemDto) => {
-      if (!item.Id) {
-        writeToLog("ERROR", "Attempted to open a file without an ID.");
-        console.error("Attempted to open a file without an ID.");
-        return;
-      }
-      const queryParams = new URLSearchParams({
-        itemId: item.Id,
-        offline: "true",
-        playbackPosition:
-          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
-      });
       try {
-        router.push(`/player/direct-player?${queryParams.toString()}`);
+        // @ts-expect-error
+        router.push(`/player/direct-player?offline=true&itemId=${item.Id}`);
       } catch (error) {
         writeToLog("ERROR", "Error opening file", error);
         console.error("Error opening file:", error);

hooks/useIntroSkipper.ts

@@ -1,21 +1,34 @@
-import { useCallback, useEffect, useState } from "react";
-import { useSegments } from "@/utils/segments";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
+import { writeToLog } from "@/utils/log";
 import { msToSeconds, secondsToMs } from "@/utils/time";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useCallback, useEffect, useState } from "react";
 import { useHaptic } from "./useHaptic";
 
+interface IntroTimestamps {
+  EpisodeId: string;
+  HideSkipPromptAt: number;
+  IntroEnd: number;
+  IntroStart: number;
+  ShowSkipPromptAt: number;
+  Valid: boolean;
+}
+
 /**
  * Custom hook to handle skipping intros in a media player.
  *
  * @param {number} currentTime - The current playback time in seconds.
  */
 export const useIntroSkipper = (
-  itemId: string,
+  itemId: string | undefined,
   currentTime: number,
   seek: (ticks: number) => void,
   play: () => void,
   isVlc = false,
-  isOffline = false,
 ) => {
+  const [api] = useAtom(apiAtom);
   const [showSkipButton, setShowSkipButton] = useState(false);
   if (isVlc) {
     currentTime = msToSeconds(currentTime);
@@ -30,14 +43,35 @@ export const useIntroSkipper = (
     seek(seconds);
   };
 
-  const { data: segments } = useSegments(itemId, isOffline);
-  const introTimestamps = segments?.introSegments?.[0];
+  const { data: introTimestamps } = useQuery<IntroTimestamps | null>({
+    queryKey: ["introTimestamps", itemId],
+    queryFn: async () => {
+      if (!itemId) {
+        return null;
+      }
+
+      const res = await api?.axiosInstance.get(
+        `${api.basePath}/Episode/${itemId}/IntroTimestamps`,
+        {
+          headers: getAuthHeaders(api),
+        },
+      );
+
+      if (res?.status !== 200) {
+        return null;
+      }
+
+      return res?.data;
+    },
+    enabled: !!itemId,
+    retry: false,
+  });
 
   useEffect(() => {
     if (introTimestamps) {
       setShowSkipButton(
-        currentTime > introTimestamps.startTime &&
-          currentTime < introTimestamps.endTime,
+        currentTime > introTimestamps.ShowSkipPromptAt &&
+          currentTime < introTimestamps.HideSkipPromptAt,
       );
     }
   }, [introTimestamps, currentTime]);
@@ -46,12 +80,12 @@ export const useIntroSkipper = (
     if (!introTimestamps) return;
     try {
       lightHapticFeedback();
-      wrappedSeek(introTimestamps.endTime);
+      wrappedSeek(introTimestamps.IntroEnd);
       setTimeout(() => {
         play();
       }, 200);
     } catch (error) {
-      console.error("Error skipping intro", error);
+      writeToLog("ERROR", "Error skipping intro", error);
     }
   }, [introTimestamps]);
 

hooks/useItemQuery.ts

@@ -1,30 +0,0 @@
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useQuery } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-
-export const useItemQuery = (itemId: string, isOffline: boolean) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-  const { downloadedFiles } = useDownload();
-
-  return useQuery({
-    queryKey: ["item", itemId],
-    queryFn: async () => {
-      if (isOffline) {
-        const downloadedItem = downloadedFiles?.find((item) => item.item.Id === itemId);
-        if (downloadedItem) return downloadedItem.item;
-        return null;
-      }
-      if (!api || !user || !itemId) return null;
-      const res = await getUserLibraryApi(api).getItem({ itemId: itemId, userId: user?.Id });
-      return res.data;
-    },
-    staleTime: 0,
-    refetchOnMount: true,
-    refetchOnWindowFocus: true,
-    refetchOnReconnect: true,
-    networkMode: "always",
-  });
-};

hooks/useMarkAsPlayed.ts

@@ -1,39 +1,102 @@
+import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import { markAsNotPlayed } from "@/utils/jellyfin/playstate/markAsNotPlayed";
+import { markAsPlayed } from "@/utils/jellyfin/playstate/markAsPlayed";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { QueryKey, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
 import { useHaptic } from "./useHaptic";
-import { usePlaybackManager } from "./usePlaybackManager";
-import { useInvalidatePlaybackProgressCache } from "./useRevalidatePlaybackProgressCache";
 
 export const useMarkAsPlayed = (items: BaseItemDto[]) => {
+  const [api] = useAtom(apiAtom);
+  const [user] = useAtom(userAtom);
   const queryClient = useQueryClient();
   const lightHapticFeedback = useHaptic("light");
-  const { markItemPlayed, markItemUnplayed } = usePlaybackManager();
-  const invalidatePlaybackProgressCache = useInvalidatePlaybackProgressCache();
-  const invalidateQueries = async () => {
-    const queriesToInvalidate: QueryKey[] = [];
+
+  const invalidateQueries = () => {
+    const queriesToInvalidate = [
+      ["resumeItems"],
+      ["continueWatching"],
+      ["nextUp-all"],
+      ["nextUp"],
+      ["episodes"],
+      ["seasons"],
+      ["home"],
+    ];
+
     items.forEach((item) => {
       if (!item.Id) return;
       queriesToInvalidate.push(["item", item.Id]);
     });
-    await Promise.all(
-      queriesToInvalidate.map((queryKey) =>
-        queryClient.invalidateQueries({ queryKey }),
-      ),
-    );
+
+    queriesToInvalidate.forEach((queryKey) => {
+      queryClient.invalidateQueries({ queryKey });
+    });
   };
 
-  const toggle = async (played: boolean) => {
+  const markAsPlayedStatus = async (played: boolean) => {
     lightHapticFeedback();
-    // Process all items
-    await Promise.all(
-      items.map((item) => {
-        if (!item.Id) return Promise.resolve();
-        return played ? markItemPlayed(item.Id) : markItemUnplayed(item.Id);
-      }),
-    );
-    invalidatePlaybackProgressCache();
+
+    items.forEach((item) => {
+      // Optimistic update
+      queryClient.setQueryData(
+        ["item", item.Id],
+        (oldData: BaseItemDto | undefined) => {
+          if (oldData) {
+            return {
+              ...oldData,
+              UserData: {
+                ...oldData.UserData,
+                Played: played,
+              },
+            };
+          }
+          return oldData;
+        },
+      );
+    });
+
+    try {
+      // Process all items
+      await Promise.all(
+        items.map((item) =>
+          played
+            ? markAsPlayed({ api, item, userId: user?.Id })
+            : markAsNotPlayed({ api, itemId: item?.Id, userId: user?.Id }),
+        ),
+      );
+
+      // Bulk invalidate
+      queryClient.invalidateQueries({
+        queryKey: [
+          "resumeItems",
+          "continueWatching",
+          "nextUp-all",
+          "nextUp",
+          "episodes",
+          "seasons",
+          "home",
+          ...items.map((item) => ["item", item.Id]),
+        ].flat(),
+      });
+    } catch (error) {
+      // Revert all optimistic updates on any failure
+      items.forEach((item) => {
+        queryClient.setQueryData(
+          ["item", item.Id],
+          (oldData: BaseItemDto | undefined) =>
+            oldData
+              ? {
+                  ...oldData,
+                  UserData: { ...oldData.UserData, Played: played },
+                }
+              : oldData,
+        );
+      });
+      console.error("Error updating played status:", error);
+    }
+
     invalidateQueries();
   };
 
-  return toggle;
+  return markAsPlayedStatus;
 };

hooks/usePlaybackManager.ts

@@ -1,213 +0,0 @@
-import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
-import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api/user-library-api";
-import { useNetInfo } from "@react-native-community/netinfo";
-import { useAtomValue } from "jotai";
-import { useDownload } from "@/providers/DownloadProvider";
-import { DownloadedItem } from "@/providers/Downloads/types";
-import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-
-/**
- * A hook to manage playback state, abstracting away the complexities of
- * online/offline and local/remote state management.
- *
- * This provides a simple facade for player components to report playback
- * without needing to know the underlying details of data syncing.
- */
-export const usePlaybackManager = () => {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const netInfo = useNetInfo();
-  const { getDownloadedItemById, updateDownloadedItem } = useDownload();
-
-  /** Whether the device is online. actually it's connected to the internet. */
-  const isOnline = netInfo.isConnected;
-
-  /**
-   * Fetches the latest state of an item from the server and updates the local
-   * downloaded version to match. This ensures the local item has the
-   * canonical state from the server.
-   */
-  const _syncRemoteToLocal = async (localItem: DownloadedItem) => {
-    if (!isOnline || !api || !user) return;
-
-    try {
-      const remoteItem = (
-        await getUserLibraryApi(api).getItem({
-          itemId: localItem.item.Id!,
-          userId: user.Id,
-        })
-      ).data;
-      if (remoteItem) {
-        updateDownloadedItem(localItem.item.Id!, {
-          ...localItem,
-          item: {
-            ...localItem.item,
-            UserData: { ...remoteItem.UserData },
-          },
-        });
-      }
-    } catch (error) {
-      console.error("Failed to sync remote item state to local", error);
-    }
-  };
-
-  /**
-   * Reports playback progress.
-   *
-   * - If offline and the item is downloaded, updates are saved locally.
-   * - If online and the item is downloaded, it updates locally and syncs with the server.
-   * - If online and streaming, it reports directly to the server.
-   *
-   * @param itemId The ID of the item.
-   * @param positionTicks The current playback position in ticks.
-   */
-  const reportPlaybackProgress = async (
-    itemId: string,
-    positionTicks: number,
-    metadata?: {
-      AudioStreamIndex: number;
-      SubtitleStreamIndex: number;
-    },
-  ) => {
-    const localItem = getDownloadedItemById(itemId);
-
-    // Handle local state update for downloaded items
-    if (localItem) {
-      const isItemConsideredPlayed =
-        (localItem.item.UserData?.PlayedPercentage ?? 0) > 90;
-      updateDownloadedItem(itemId, {
-        ...localItem,
-        item: {
-          ...localItem.item,
-          UserData: {
-            ...localItem.item.UserData,
-            PlaybackPositionTicks: isItemConsideredPlayed ? 0 : positionTicks,
-            Played: isItemConsideredPlayed,
-            LastPlayedDate: new Date().toISOString(),
-            PlayedPercentage: isItemConsideredPlayed
-              ? 0
-              : (positionTicks / localItem.item.RunTimeTicks!) * 100,
-          },
-        },
-      });
-    }
-
-    // Handle remote state update if online
-    if (isOnline && api) {
-      try {
-        await getPlaystateApi(api).reportPlaybackProgress({
-          playbackProgressInfo: {
-            ItemId: itemId,
-            PositionTicks: positionTicks,
-            ...(metadata && { AudioStreamIndex: metadata.AudioStreamIndex }),
-            ...(metadata && {
-              SubtitleStreamIndex: metadata.SubtitleStreamIndex,
-            }),
-          },
-        });
-      } catch (error) {
-        console.error("Failed to report playback progress on server", error);
-      }
-      // If it was a downloaded item, re-sync with the server for the latest state.
-      // This is crucial because the server might have marked the item as "Played"
-      // based on its own rules (e.g., >95% progress).
-      if (localItem) {
-        await _syncRemoteToLocal(localItem);
-      }
-    }
-  };
-
-  /**
-   * Marks an item as played.
-   *
-   * - If offline and downloaded, it marks as played locally.
-   * - If online, it marks as played on the server and syncs the state back to the local item if it exists.
-   *
-   * @param itemId The ID of the item.
-   */
-  const markItemPlayed = async (itemId: string) => {
-    const localItem = getDownloadedItemById(itemId);
-
-    // Handle local state update for downloaded items
-    if (localItem) {
-      updateDownloadedItem(itemId, {
-        ...localItem,
-        item: {
-          ...localItem.item,
-          UserData: {
-            ...localItem.item.UserData,
-            Played: true,
-            PlaybackPositionTicks: 0,
-            PlayedPercentage: 0,
-            LastPlayedDate: new Date().toISOString(),
-          },
-        },
-      });
-    }
-
-    // Handle remote state update if online
-    if (isOnline && api && user) {
-      try {
-        await getPlaystateApi(api).markPlayedItem({
-          itemId,
-          userId: user.Id,
-        });
-
-        // If it was a downloaded item, re-sync with server for the latest state
-        if (localItem) {
-          await _syncRemoteToLocal(localItem);
-        }
-      } catch (error) {
-        console.error("Failed to mark item as played on server", error);
-      }
-    }
-  };
-
-  /**
-   * Marks an item as unplayed.
-   *
-   * - If offline and downloaded, it marks as unplayed locally.
-   * - If online, it marks as unplayed on the server and syncs the state back to the local item if it exists.
-   *
-   * @param itemId The ID of the item.
-   */
-  const markItemUnplayed = async (itemId: string) => {
-    const localItem = getDownloadedItemById(itemId);
-
-    // Handle local state update for downloaded items
-    if (localItem) {
-      updateDownloadedItem(itemId, {
-        ...localItem,
-        item: {
-          ...localItem.item,
-          UserData: {
-            ...localItem.item.UserData,
-            Played: false,
-            PlaybackPositionTicks: 0,
-            PlayedPercentage: 0,
-            LastPlayedDate: new Date().toISOString(), // Keep track of when it was marked unplayed
-          },
-        },
-      });
-    }
-
-    // Handle remote state update if online
-    if (isOnline && api && user) {
-      try {
-        await getPlaystateApi(api).markUnplayedItem({
-          itemId,
-          userId: user.Id,
-        });
-
-        // If it was a downloaded item, re-sync with server for the latest state
-        if (localItem) {
-          await _syncRemoteToLocal(localItem);
-        }
-      } catch (error) {
-        console.error("Failed to mark item as unplayed on server", error);
-      }
-    }
-  };
-
-  return { reportPlaybackProgress, markItemPlayed, markItemUnplayed };
-};

hooks/useRemuxHlsToMp4.ts

@@ -0,0 +1,231 @@
+import { useDownload } from "@/providers/DownloadProvider";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { getItemImage } from "@/utils/getItemImage";
+import { writeErrorLog, writeInfoLog } from "@/utils/log";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import { useQueryClient } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+import { useRouter } from "expo-router";
+
+// import { FFmpegKit, FFmpegSession, Statistics } from "ffmpeg-kit-react-native";
+const FFMPEGKitReactNative = !Platform.isTV
+  ? require("ffmpeg-kit-react-native")
+  : null;
+import { useSettings } from "@/utils/atoms/settings";
+import useDownloadHelper from "@/utils/download";
+import type { JobStatus } from "@/utils/optimize-server";
+import type { Api } from "@jellyfin/sdk";
+import { useAtomValue } from "jotai";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
+import { toast } from "sonner-native";
+import useImageStorage from "./useImageStorage";
+
+type FFmpegSession = typeof FFMPEGKitReactNative.FFmpegSession;
+type Statistics = typeof FFMPEGKitReactNative.Statistics;
+const FFmpegKit = Platform.isTV
+  ? null
+  : (FFMPEGKitReactNative.FFmpegKit as typeof FFMPEGKitReactNative.FFmpegKit);
+const createFFmpegCommand = (url: string, output: string) => [
+  "-y", // overwrite output files without asking
+  "-thread_queue_size 512", // https://ffmpeg.org/ffmpeg.html#toc-Advanced-options
+
+  // region ffmpeg protocol commands                    // https://ffmpeg.org/ffmpeg-protocols.html
+  "-protocol_whitelist file,http,https,tcp,tls,crypto", // whitelist
+  "-multiple_requests 1", // http
+  "-tcp_nodelay 1", // http
+  // endregion ffmpeg protocol commands
+
+  "-fflags +genpts", // format flags
+  `-i ${url}`, // infile
+  "-map 0:v -map 0:a", // select all streams for video & audio
+  "-c copy", // streamcopy, preventing transcoding
+  "-bufsize 25M", // amount of data processed before calculating current bitrate
+  "-max_muxing_queue_size 4096", // sets the size of stream buffer in packets for output
+  output,
+];
+
+/**
+ * Custom hook for remuxing HLS to MP4 using FFmpeg.
+ *
+ * @param url - The URL of the HLS stream
+ * @param item - The BaseItemDto object representing the media item
+ * @returns An object with remuxing-related functions
+ */
+export const useRemuxHlsToMp4 = () => {
+  const api = useAtomValue(apiAtom);
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  const [settings] = useSettings();
+  const { saveImage } = useImageStorage();
+  const { saveSeriesPrimaryImage } = useDownloadHelper();
+  const {
+    saveDownloadedItemInfo,
+    setProcesses,
+    processes,
+    APP_CACHE_DOWNLOAD_DIRECTORY,
+  } = useDownload();
+
+  const onSaveAssets = async (api: Api, item: BaseItemDto) => {
+    await saveSeriesPrimaryImage(item);
+    const itemImage = getItemImage({
+      item,
+      api,
+      variant: "Primary",
+      quality: 90,
+      width: 500,
+    });
+
+    await saveImage(item.Id, itemImage?.uri);
+  };
+
+  const completeCallback = useCallback(
+    async (session: FFmpegSession, item: BaseItemDto) => {
+      try {
+        console.log("completeCallback");
+        const returnCode = await session.getReturnCode();
+
+        if (returnCode.isValueSuccess()) {
+          const stat = await session.getLastReceivedStatistics();
+          await FileSystem.moveAsync({
+            from: `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`,
+            to: `${FileSystem.documentDirectory}${item.Id}.mp4`,
+          });
+          await queryClient.invalidateQueries({
+            queryKey: ["downloadedItems"],
+          });
+          saveDownloadedItemInfo(item, stat.getSize());
+          toast.success(t("home.downloads.toasts.download_completed"));
+        }
+
+        setProcesses((prev: any[]) => {
+          return prev.filter(
+            (process: { itemId: string | undefined }) =>
+              process.itemId !== item.Id,
+          );
+        });
+      } catch (e) {
+        console.error(e);
+      }
+
+      console.log("completeCallback ~ end");
+    },
+    [processes, setProcesses],
+  );
+
+  const statisticsCallback = useCallback(
+    (statistics: Statistics, item: BaseItemDto) => {
+      const videoLength =
+        (item.MediaSources?.[0]?.RunTimeTicks || 0) / 10000000; // In seconds
+      const fps = item.MediaStreams?.[0]?.RealFrameRate || 25;
+      const totalFrames = videoLength * fps;
+      const processedFrames = statistics.getVideoFrameNumber();
+      const speed = statistics.getSpeed();
+
+      const percentage =
+        totalFrames > 0 ? Math.floor((processedFrames / totalFrames) * 100) : 0;
+
+      if (!item.Id) throw new Error("Item is undefined");
+      setProcesses((prev: JobStatus[]) => {
+        return prev.map((process: JobStatus) => {
+          if (process.itemId === item.Id) {
+            return {
+              ...process,
+              id: statistics.getSessionId().toString(),
+              progress: percentage,
+              speed: Math.max(speed, 0),
+            };
+          }
+          return process;
+        });
+      });
+    },
+    [setProcesses, completeCallback],
+  );
+
+  const startRemuxing = useCallback(
+    async (item: BaseItemDto, url: string, mediaSource: MediaSourceInfo) => {
+      const cacheDir = await FileSystem.getInfoAsync(
+        APP_CACHE_DOWNLOAD_DIRECTORY,
+      );
+      if (!cacheDir.exists) {
+        await FileSystem.makeDirectoryAsync(APP_CACHE_DOWNLOAD_DIRECTORY, {
+          intermediates: true,
+        });
+      }
+
+      const output = `${APP_CACHE_DOWNLOAD_DIRECTORY}${item.Id}.mp4`;
+
+      if (!api) throw new Error("API is not defined");
+      if (!item.Id) throw new Error("Item must have an Id");
+
+      // First lets save any important assets we want to present to the user offline
+      await onSaveAssets(api, item);
+
+      toast.success(
+        t("home.downloads.toasts.download_started_for", { item: item.Name }),
+        {
+          action: {
+            label: "Go to download",
+            onClick: () => {
+              router.push("/downloads");
+              toast.dismiss();
+            },
+          },
+        },
+      );
+
+      try {
+        const job: JobStatus = {
+          id: "",
+          deviceId: "",
+          inputUrl: url,
+          item: item,
+          itemId: item.Id!,
+          outputPath: output,
+          progress: 0,
+          status: "downloading",
+          timestamp: new Date(),
+        };
+
+        writeInfoLog(`useRemuxHlsToMp4 ~ startRemuxing for item ${item.Name}`);
+        setProcesses((prev: any) => [...prev, job]);
+
+        await FFmpegKit.executeAsync(
+          createFFmpegCommand(url, output).join(" "),
+          (session: any) => completeCallback(session, item),
+          undefined,
+          (s: any) => statisticsCallback(s, item),
+        );
+      } catch (e) {
+        const error = e as Error;
+        console.error("Failed to remux:", error);
+        writeErrorLog(
+          `useRemuxHlsToMp4 ~ remuxing failed for item: ${item.Name}, 
+          Error: ${error.message}, Stack: ${error.stack}`,
+        );
+        setProcesses((prev: any[]) => {
+          return prev.filter(
+            (process: { itemId: string | undefined }) =>
+              process.itemId !== item.Id,
+          );
+        });
+        throw error; // Re-throw the error to propagate it to the caller
+      }
+    },
+    [settings, processes, setProcesses, completeCallback, statisticsCallback],
+  );
+
+  const cancelRemuxing = useCallback(() => {
+    FFmpegKit.cancel();
+    setProcesses([]);
+  }, []);
+
+  return { startRemuxing, cancelRemuxing };
+};

hooks/useRevalidatePlaybackProgressCache.ts

@@ -1,14 +1,10 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { useDownload } from "@/providers/DownloadProvider";
-import { useTwoWaySync } from "./useTwoWaySync";
 
 /**
  * useRevalidatePlaybackProgressCache invalidates queries related to playback progress.
  */
 export function useInvalidatePlaybackProgressCache() {
   const queryClient = useQueryClient();
-  const { downloadedFiles } = useDownload();
-  const { syncPlaybackState } = useTwoWaySync();
 
   const revalidate = async () => {
     // List of all the queries to invalidate
@@ -21,33 +17,11 @@ export function useInvalidatePlaybackProgressCache() {
       ["episodes"],
       ["seasons"],
       ["home"],
-      ["downloadedItems"],
     ];
 
-    // We Invalidate all the queries to the latest server versions
-    await Promise.all(
-      queriesToInvalidate.map((queryKey) =>
-        queryClient.invalidateQueries({ queryKey }),
-      ),
-    );
-
-    // Sync playback state for downloaded items
-    if (downloadedFiles) {
-      // We sync the playback state for the downloaded items
-      const syncResults = await Promise.all(
-        downloadedFiles.map((downloadedItem) =>
-          syncPlaybackState(downloadedItem.item.Id!),
-        ),
-      );
-      // We invalidate the queries again in case we have updated a server's playback progress.
-      const shouldInvalidate = syncResults.some((result) => result);
-
-      console.log("shouldInvalidate", shouldInvalidate);
-      if (shouldInvalidate) {
-        queriesToInvalidate.map((queryKey) =>
-          queryClient.invalidateQueries({ queryKey }),
-        );
-      }
+    // Invalidate each query
+    for (const queryKey of queriesToInvalidate) {
+      await queryClient.invalidateQueries({ queryKey });
     }
   };
 

hooks/useSessions.ts

@@ -44,27 +44,3 @@ export const useSessions = ({
 
   return { sessions: data, isLoading };
 };
-
-export const useAllSessions = ({
-  refetchInterval = 5 * 1000,
-  activeWithinSeconds = 360,
-}: useSessionsProps) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
-
-  const { data, isLoading } = useQuery({
-    queryKey: ["allSessions"],
-    queryFn: async () => {
-      if (!api || !user || !user.Policy?.IsAdministrator) {
-        return [];
-      }
-      const response = await getSessionApi(api).getSessions({
-        activeWithinSeconds: activeWithinSeconds,
-      });
-      return response.data;
-    },
-    refetchInterval: refetchInterval,
-  });
-
-  return { sessions: data, isLoading };
-};

hooks/useTrickplay.ts

@@ -1,69 +1,11 @@
+import { apiAtom } from "@/providers/JellyfinProvider";
+import { ticksToMs } from "@/utils/time";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
+import { useAtom } from "jotai";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { store } from "@/utils/store";
-import { ticksToMs } from "@/utils/time";
-import { useDownload } from "@/providers/DownloadProvider";
-import { useGlobalSearchParams } from "expo-router";
 
-interface TrickplayUrl {
-  x: number;
-  y: number;
-  url: string;
-}
-
-/** Hook to handle trickplay logic for a given item. */
-export const useTrickplay = (item: BaseItemDto) => {
-  const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
-  const { getDownloadedItemById } = useDownload();
-  const lastCalculationTime = useRef(0);
-  const throttleDelay = 200;
-  const isOffline = useGlobalSearchParams().offline === "true";
-  const trickplayInfo = useMemo(() => getTrickplayInfo(item), [item]);
-  
-  /** Generates the trickplay URL for the given item and sheet index. 
-   * We change between offline and online trickplay URLs depending on the state of the app. */
-  const getTrickplayUrl = useCallback((item: BaseItemDto, sheetIndex: number) => {
-    // If we are offline, we can use the downloaded item's trickplay data path
-    const downloadedItem = getDownloadedItemById(item.Id!);
-    if (isOffline && downloadedItem?.trickPlayData?.path) {
-      return `${downloadedItem.trickPlayData.path}${sheetIndex}.jpg`;
-    }
-    return generateTrickplayUrl(item, sheetIndex);
-  }, [trickplayInfo]);
-
-  /** Calculates the trickplay URL for the current progress. */
-  const calculateTrickplayUrl = useCallback(
-    (progress: number) => {
-      const now = Date.now();
-      if (!trickplayInfo || !item.Id || now - lastCalculationTime.current < throttleDelay) return;
-      lastCalculationTime.current = now;
-      const { sheetIndex, x, y } = calculateTrickplayTile(progress, trickplayInfo);
-      const url = getTrickplayUrl(item, sheetIndex);
-      if (url) setTrickPlayUrl({ x, y, url });
-    },
-    [trickplayInfo, item, throttleDelay, getTrickplayUrl],
-  );
-  
-  /** Prefetches all the trickplay images for the item. */
-  const prefetchAllTrickplayImages = useCallback(() => {
-    if (!trickplayInfo || !item.Id) return;
-    for (let index = 0; index < trickplayInfo.totalImageSheets; index++) {
-      const url = getTrickplayUrl(item, index);
-      if (url) Image.prefetch(url);
-    }
-  }, [trickplayInfo, item, getTrickplayUrl]);
-
-  return {
-    trickPlayUrl,
-    calculateTrickplayUrl,
-    prefetchAllTrickplayImages,
-    trickplayInfo,
-  };
-};
-
-export interface TrickplayData {
+interface TrickplayData {
   Interval?: number;
   TileWidth?: number;
   TileHeight?: number;
@@ -72,93 +14,141 @@ export interface TrickplayData {
   ThumbnailCount?: number;
 }
 
-export interface TrickplayInfo {
+interface TrickplayInfo {
   resolution: string;
   aspectRatio: number;
   data: TrickplayData;
-  totalImageSheets: number;
 }
 
-/** Generates a trickplay URL based on the item, resolution, and sheet index. */
-export const generateTrickplayUrl = (item: BaseItemDto, sheetIndex: number) => {
-  const api = store.get(apiAtom);
-  const resolution = getTrickplayInfo(item)?.resolution;
-  if (!resolution || !api) return null;
-  return `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${sheetIndex}.jpg?api_key=${api.accessToken}`;
-};
+interface TrickplayUrl {
+  x: number;
+  y: number;
+  url: string;
+}
 
-/**
- * Parses the trickplay metadata from a BaseItemDto.
- * @param item The Jellyfin media item.
- * @returns Parsed trickplay information or null if not available.
- */
-export const getTrickplayInfo = (item: BaseItemDto): TrickplayInfo | null => {
-  if (!item.Id || !item.Trickplay) return null;
+export const useTrickplay = (item: BaseItemDto, enabled = true) => {
+  const [api] = useAtom(apiAtom);
+  const [trickPlayUrl, setTrickPlayUrl] = useState<TrickplayUrl | null>(null);
+  const lastCalculationTime = useRef(0);
+  const throttleDelay = 200; // 200ms throttle
 
-  const mediaSourceId = item.Id;
-  const trickplayDataForSource = item.Trickplay[mediaSourceId];
+  const trickplayInfo = useMemo(() => {
+    if (!enabled || !item.Id || !item.Trickplay) {
+      return null;
+    }
 
-  if (!trickplayDataForSource) {
-    return null;
-  }
+    const mediaSourceId = item.Id;
+    const trickplayData = item.Trickplay[mediaSourceId];
 
-  const firstResolution = Object.keys(trickplayDataForSource)[0];
-  if (!firstResolution) {
-    return null;
-  }
+    if (!trickplayData) {
+      return null;
+    }
 
-  const data = trickplayDataForSource[firstResolution];
-  const { Interval, TileWidth, TileHeight, Width, Height } = data;
+    // Get the first available resolution
+    const firstResolution = Object.keys(trickplayData)[0];
+    return firstResolution
+      ? {
+          resolution: firstResolution,
+          aspectRatio:
+            trickplayData[firstResolution].Width! /
+            trickplayData[firstResolution].Height!,
+          data: trickplayData[firstResolution],
+        }
+      : null;
+  }, [item, enabled]);
 
-  if (
-    !Interval ||
-    !TileWidth ||
-    !TileHeight ||
-    !Width ||
-    !Height ||
-    !item.RunTimeTicks
-  ) {
-    return null;
-  }
+  // Takes in ticks.
+  const calculateTrickplayUrl = useCallback(
+    (progress: number) => {
+      if (!enabled) {
+        return null;
+      }
 
-  const tilesPerSheet = TileWidth * TileHeight;
-  const totalTiles = Math.ceil(ticksToMs(item.RunTimeTicks) / Interval);
-  const totalImageSheets = Math.ceil(totalTiles / tilesPerSheet);
+      const now = Date.now();
+      if (now - lastCalculationTime.current < throttleDelay) {
+        return null;
+      }
+      lastCalculationTime.current = now;
+
+      if (!trickplayInfo || !api || !item.Id) {
+        return null;
+      }
+
+      const { data, resolution } = trickplayInfo;
+      const { Interval, TileWidth, TileHeight, Width, Height } = data;
+
+      if (
+        !Interval ||
+        !TileWidth ||
+        !TileHeight ||
+        !resolution ||
+        !Width ||
+        !Height
+      ) {
+        throw new Error("Invalid trickplay data");
+      }
+
+      const currentTimeMs = Math.max(0, ticksToMs(progress));
+      const currentTile = Math.floor(currentTimeMs / Interval);
+
+      const tileSize = TileWidth * TileHeight;
+      const tileOffset = currentTile % tileSize;
+      const index = Math.floor(currentTile / tileSize);
+
+      const tileOffsetX = tileOffset % TileWidth;
+      const tileOffsetY = Math.floor(tileOffset / TileWidth);
+
+      const newTrickPlayUrl = {
+        x: tileOffsetX,
+        y: tileOffsetY,
+        url: `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${index}.jpg?api_key=${api.accessToken}`,
+      };
+
+      setTrickPlayUrl(newTrickPlayUrl);
+      return newTrickPlayUrl;
+    },
+    [trickplayInfo, item, api, enabled],
+  );
+
+  const prefetchAllTrickplayImages = useCallback(() => {
+    if (!api || !enabled || !trickplayInfo || !item.Id || !item.RunTimeTicks) {
+      return;
+    }
+
+    const { data, resolution } = trickplayInfo;
+    const { Interval, TileWidth, TileHeight, Width, Height } = data;
+
+    if (
+      !Interval ||
+      !TileWidth ||
+      !TileHeight ||
+      !resolution ||
+      !Width ||
+      !Height
+    ) {
+      throw new Error("Invalid trickplay data");
+    }
+
+    // Calculate tiles per sheet
+    const tilesPerRow = TileWidth;
+    const tilesPerColumn = TileHeight;
+    const tilesPerSheet = tilesPerRow * tilesPerColumn;
+    const totalTiles = Math.ceil(ticksToMs(item.RunTimeTicks) / Interval);
+    const totalIndexes = Math.ceil(totalTiles / tilesPerSheet);
+
+    // Prefetch all trickplay images
+    for (let index = 0; index < totalIndexes; index++) {
+      const url = `${api.basePath}/Videos/${item.Id}/Trickplay/${resolution}/${index}.jpg?api_key=${api.accessToken}`;
+      Image.prefetch(url);
+    }
+  }, [trickplayInfo, item, api, enabled]);
 
   return {
-    resolution: firstResolution,
-    aspectRatio: Width / Height,
-    data,
-    totalImageSheets,
+    trickPlayUrl: enabled ? trickPlayUrl : null,
+    calculateTrickplayUrl: enabled ? calculateTrickplayUrl : () => null,
+    prefetchAllTrickplayImages: enabled
+      ? prefetchAllTrickplayImages
+      : () => null,
+    trickplayInfo: enabled ? trickplayInfo : null,
   };
 };
-
-/**
- * Calculates the specific image sheet and tile offset for a given time.
- * @param progressTicks The current playback time in ticks.
- * @param trickplayInfo The parsed trickplay information object.
- * @returns An object with the image sheet index, and the X/Y coordinates for the tile.
- */
-const calculateTrickplayTile = (
-  progressTicks: number,
-  trickplayInfo: TrickplayInfo,
-) => {
-  const { data } = trickplayInfo;
-  const { Interval, TileWidth, TileHeight } = data;
-
-  if (!Interval || !TileWidth || !TileHeight) {
-    throw new Error("Invalid trickplay data provided to calculateTile");
-  }
-
-  const currentTimeMs = Math.max(0, ticksToMs(progressTicks));
-  const currentTile = Math.floor(currentTimeMs / Interval);
-
-  const tilesPerSheet = TileWidth * TileHeight;
-  const sheetIndex = Math.floor(currentTile / tilesPerSheet);
-  const tileIndexInSheet = currentTile % tilesPerSheet;
-
-  const x = tileIndexInSheet % TileWidth;
-  const y = Math.floor(tileIndexInSheet / TileWidth);
-
-  return { sheetIndex, x, y };
-};

hooks/useTwoWaySync.ts

@@ -1,81 +0,0 @@
-import { getItemsApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useNetInfo } from "@react-native-community/netinfo";
-import { useAtomValue } from "jotai";
-import { useDownload } from "@/providers/DownloadProvider";
-import { apiAtom, userAtom } from "../providers/JellyfinProvider";
-import { usePlaybackManager } from "./usePlaybackManager";
-
-/**
- * This hook is used to sync the playback state of a downloaded item with the server
- * when the application comes back online after being used offline.
- */
-export const useTwoWaySync = () => {
-  const api = useAtomValue(apiAtom);
-  const user = useAtomValue(userAtom);
-  const netInfo = useNetInfo();
-  const { getDownloadedItemById, updateDownloadedItem } = useDownload();
-  const { reportPlaybackProgress, markItemUnplayed, markItemPlayed } =
-    usePlaybackManager();
-
-  /**
-   * Syncs the playback state of an offline item with the server.
-   * It determines if the local or remote state is more recent and applies the necessary update.
-   *
-   * @returns A Promise<boolean> indicating whether a server update was made (true) or not (false).
-   */
-  const syncPlaybackState = async (itemId: string): Promise<boolean> => {
-    if (!api || !user || !netInfo.isConnected) {
-      // Cannot sync if offline or not logged in
-      return false;
-    }
-
-    const localItem = getDownloadedItemById(itemId);
-    if (!localItem) return false;
-
-    const remoteItem = (
-      await getUserLibraryApi(api).getItem({ itemId, userId: user.Id })
-    ).data;
-    if (!remoteItem) return false;
-
-    const localLastPlayed = localItem.item.UserData?.LastPlayedDate
-      ? new Date(localItem.item.UserData.LastPlayedDate)
-      : new Date(0);
-    const remoteLastPlayed = remoteItem.UserData?.LastPlayedDate
-      ? new Date(remoteItem.UserData.LastPlayedDate)
-      : new Date(0);
-
-    // If the remote item has been played more recently, we take the server's version as the source of truth.
-    if (remoteLastPlayed > localLastPlayed) {
-      updateDownloadedItem(itemId, {
-        ...localItem,
-        item: {
-          ...localItem.item,
-          UserData: {
-            ...localItem.item.UserData,
-            LastPlayedDate: remoteItem.UserData?.LastPlayedDate,
-            PlaybackPositionTicks: remoteItem.UserData?.PlaybackPositionTicks,
-            Played: remoteItem.UserData?.Played,
-            PlayedPercentage: remoteItem.UserData?.PlayedPercentage,
-          },
-        },
-      });
-      return false;
-    } else if (remoteLastPlayed < localLastPlayed) {
-      // Since we're this is the source of truth, essentially need to make sure the played status matches the local item.
-      await getItemsApi(api).updateItemUserData({
-        itemId: localItem.item.Id!,
-        userId: user.Id,
-        updateUserItemDataDto: {
-          Played: localItem.item.UserData?.Played,
-          PlaybackPositionTicks: localItem.item.UserData?.PlaybackPositionTicks,
-          PlayedPercentage: localItem.item.UserData?.PlayedPercentage,
-          LastPlayedDate: localItem.item.UserData?.LastPlayedDate,
-        },
-      });
-      return true;
-    }
-    return false;
-  };
-
-  return { syncPlaybackState };
-};

hooks/useWebsockets.ts

@@ -9,38 +9,6 @@ interface UseWebSocketProps {
   togglePlay: () => void;
   stopPlayback: () => void;
   offline: boolean;
-
-  nextTrack?: () => void;
-  previousTrack?: () => void;
-  rewindPlayback?: () => void;
-  fastForwardPlayback?: () => void;
-  seekPlayback?: (positionTicks: number) => void;
-  volumeUp?: () => void;
-  volumeDown?: () => void;
-  toggleMute?: () => void;
-  toggleOsd?: () => void;
-  toggleFullscreen?: () => void;
-  goHome?: () => void;
-  goToSettings?: () => void;
-  setAudioStreamIndex?: (index: number) => void;
-  setSubtitleStreamIndex?: (index: number) => void;
-
-  moveUp?: () => void;
-  moveDown?: () => void;
-  moveLeft?: () => void;
-  moveRight?: () => void;
-  select?: () => void;
-  pageUp?: () => void;
-  pageDown?: () => void;
-  setVolume?: (volume: number) => void;
-  setRepeatMode?: (mode: string) => void;
-  setShuffleMode?: (mode: string) => void;
-  togglePictureInPicture?: () => void;
-  takeScreenshot?: () => void;
-  sendString?: (text: string) => void;
-  sendKey?: (key: string) => void;
-  playMediaSource?: (itemIds: string[], startPositionTicks?: number) => void;
-  playTrailers?: (itemId: string) => void;
 }
 
 export const useWebSocket = ({
@@ -48,270 +16,38 @@ export const useWebSocket = ({
   togglePlay,
   stopPlayback,
   offline,
-  nextTrack,
-  previousTrack,
-  rewindPlayback,
-  fastForwardPlayback,
-  seekPlayback,
-  volumeUp,
-  volumeDown,
-  toggleMute,
-  toggleOsd,
-  toggleFullscreen,
-  goHome,
-  goToSettings,
-  setAudioStreamIndex,
-  setSubtitleStreamIndex,
-  moveUp,
-  moveDown,
-  moveLeft,
-  moveRight,
-  select,
-  pageUp,
-  pageDown,
-  setVolume,
-  setRepeatMode,
-  setShuffleMode,
-  togglePictureInPicture,
-  takeScreenshot,
-  sendString,
-  sendKey,
-  playMediaSource,
-  playTrailers,
 }: UseWebSocketProps) => {
   const router = useRouter();
-  const { lastMessage } = useWebSocketContext();
+  const { ws } = useWebSocketContext();
   const { t } = useTranslation();
-  const { clearLastMessage } = useWebSocketContext();
 
   useEffect(() => {
-    if (!lastMessage) return;
+    if (!ws) return;
     if (offline) return;
 
-    const messageType = lastMessage.MessageType;
-    const command: string | undefined =
-      lastMessage?.Data?.Command || lastMessage?.Data?.Name;
+    ws.onmessage = (e) => {
+      const json = JSON.parse(e.data);
+      const command = json?.Data?.Command;
 
-    const args = lastMessage?.Data?.Arguments as
-      | Record<string, string>
-      | undefined; // Arguments are Dictionary<string, string>
+      console.log("[WS] ~ ", json);
 
-    console.log("[WS] ~ ", lastMessage);
-
-    if (command === "PlayPause") {
-      console.log("Command ~ PlayPause");
-      togglePlay();
-    } else if (command === "Stop") {
-      console.log("Command ~ Stop");
-      stopPlayback();
-      router.canGoBack() && router.back();
-    } else if (command === "Pause") {
-      console.log("Command ~ Pause");
-      if (isPlaying) {
+      if (command === "PlayPause") {
+        console.log("Command ~ PlayPause");
         togglePlay();
+      } else if (command === "Stop") {
+        console.log("Command ~ Stop");
+        stopPlayback();
+        router.canGoBack() && router.back();
+      } else if (json?.Data?.Name === "DisplayMessage") {
+        console.log("Command ~ DisplayMessage");
+        const title = json?.Data?.Arguments?.Header;
+        const body = json?.Data?.Arguments?.Text;
+        Alert.alert(t("player.message_from_server", { message: title }), body);
       }
-    } else if (command === "Unpause") {
-      console.log("Command ~ Unpause");
-      if (!isPlaying) {
-        togglePlay();
-      }
-    } else if (command === "NextTrack") {
-      console.log("Command ~ NextTrack");
-      nextTrack?.();
-    } else if (command === "PreviousTrack") {
-      console.log("Command ~ PreviousTrack");
-      previousTrack?.();
-    } else if (command === "Rewind") {
-      console.log("Command ~ Rewind");
-      rewindPlayback?.();
-    } else if (command === "FastForward") {
-      console.log("Command ~ FastForward");
-      fastForwardPlayback?.();
-    } else if (command === "Seek") {
-      const positionStr = args?.SeekPositionTicks;
-      console.log("Command ~ Seek", { positionStr });
-      if (positionStr) {
-        const position = Number.parseInt(positionStr, 10);
-        if (!Number.isNaN(position)) {
-          seekPlayback?.(position);
-        }
-      }
-    } else if (command === "Back") {
-      console.log("Command ~ Back");
-      if (router.canGoBack()) {
-        router.back();
-      }
-    } else if (command === "GoHome") {
-      console.log("Command ~ GoHome");
-      goHome ? goHome() : router.push("/");
-    } else if (command === "GoToSettings") {
-      console.log("Command ~ GoToSettings");
-      goToSettings ? goToSettings() : router.push("/settings");
-    } else if (command === "VolumeUp") {
-      console.log("Command ~ VolumeUp");
-      volumeUp?.();
-    } else if (command === "VolumeDown") {
-      console.log("Command ~ VolumeDown");
-      volumeDown?.();
-    } else if (command === "ToggleMute") {
-      console.log("Command ~ ToggleMute");
+    };
 
-      toggleMute?.();
-    } else if (command === "ToggleOsd") {
-      console.log("Command ~ ToggleOsd");
-      toggleOsd?.();
-    } else if (command === "ToggleFullscreen") {
-      console.log("Command ~ ToggleFullscreen");
-      toggleFullscreen?.();
-    } else if (command === "SetAudioStreamIndex") {
-      const indexStr = args?.Index;
-      console.log("Command ~ SetAudioStreamIndex", { indexStr });
-      if (indexStr) {
-        const index = Number.parseInt(indexStr, 10);
-        if (!Number.isNaN(index)) {
-          setAudioStreamIndex?.(index);
-        }
-      }
-    } else if (command === "SetSubtitleStreamIndex") {
-      const indexStr = args?.Index;
-      console.log("Command ~ SetSubtitleStreamIndex", { indexStr });
-      if (indexStr) {
-        const index = Number.parseInt(indexStr, 10);
-        if (!Number.isNaN(index)) {
-          setSubtitleStreamIndex?.(index);
-        }
-      }
-    }
-    // Neue Befehle hier implementieren
-    else if (command === "MoveUp") {
-      console.log("Command ~ MoveUp");
-      moveUp?.();
-    } else if (command === "MoveDown") {
-      console.log("Command ~ MoveDown");
-      moveDown?.();
-    } else if (command === "MoveLeft") {
-      console.log("Command ~ MoveLeft");
-      moveLeft?.();
-    } else if (command === "MoveRight") {
-      console.log("Command ~ MoveRight");
-      moveRight?.();
-    } else if (command === "Select") {
-      console.log("Command ~ Select");
-      select?.();
-    } else if (command === "PageUp") {
-      console.log("Command ~ PageUp");
-      pageUp?.();
-    } else if (command === "PageDown") {
-      console.log("Command ~ PageDown");
-      pageDown?.();
-    } else if (command === "SetVolume") {
-      const volumeStr = args?.Volume;
-      console.log("Command ~ SetVolume", { volumeStr });
-      if (volumeStr) {
-        const volumeValue = Number.parseInt(volumeStr, 10);
-        if (!Number.isNaN(volumeValue)) {
-          setVolume?.(volumeValue);
-        }
-      }
-    } else if (command === "SetRepeatMode") {
-      const mode = args?.Mode;
-      console.log("Command ~ SetRepeatMode", { mode });
-      if (mode) {
-        setRepeatMode?.(mode);
-      }
-    } else if (command === "SetShuffleMode") {
-      const mode = args?.Mode;
-      console.log("Command ~ SetShuffleMode", { mode });
-      if (mode) {
-        setShuffleMode?.(mode);
-      }
-    } else if (command === "TogglePictureInPicture") {
-      console.log("Command ~ TogglePictureInPicture");
-      togglePictureInPicture?.();
-    } else if (command === "TakeScreenshot") {
-      console.log("Command ~ TakeScreenshot");
-      takeScreenshot?.();
-    } else if (command === "SendString") {
-      const text = args?.Text;
-      console.log("Command ~ SendString", { text });
-      if (text) {
-        sendString?.(text);
-      }
-    } else if (command === "SendKey") {
-      const key = args?.Key;
-      console.log("Command ~ SendKey", { key });
-      if (key) {
-        sendKey?.(key);
-      }
-    } else if (command === "PlayMediaSource") {
-      const itemIdsStr = args?.ItemIds;
-      const startPositionTicksStr = args?.StartPositionTicks;
-      console.log("Command ~ PlayMediaSource", {
-        itemIdsStr,
-        startPositionTicksStr,
-      });
-      if (itemIdsStr) {
-        const itemIds = itemIdsStr.split(",");
-        let startPositionTicks: number | undefined = undefined;
-        if (startPositionTicksStr) {
-          const parsedTicks = Number.parseInt(startPositionTicksStr, 10);
-          if (!Number.isNaN(parsedTicks)) {
-            startPositionTicks = parsedTicks;
-          }
-        }
-        playMediaSource?.(itemIds, startPositionTicks);
-      }
-    } else if (command === "PlayTrailers") {
-      const itemId = args?.ItemId;
-      console.log("Command ~ PlayTrailers", { itemId });
-      if (itemId) {
-        playTrailers?.(itemId);
-      }
-    } else if (command === "DisplayMessage") {
-      console.log("Command ~ DisplayMessage");
-      const title = args?.Header;
-      const body = args?.Text;
-      Alert.alert(t("player.message_from_server", { message: title }), body);
-    }
-    clearLastMessage();
-  }, [
-    lastMessage,
-    offline,
-    isPlaying,
-    togglePlay,
-    stopPlayback,
-    router,
-    nextTrack,
-    previousTrack,
-    rewindPlayback,
-    fastForwardPlayback,
-    seekPlayback,
-    volumeUp,
-    volumeDown,
-    toggleMute,
-    toggleOsd,
-    toggleFullscreen,
-    goHome,
-    goToSettings,
-    setAudioStreamIndex,
-    setSubtitleStreamIndex,
-    moveUp,
-    moveDown,
-    moveLeft,
-    moveRight,
-    select,
-    pageUp,
-    pageDown,
-    setVolume,
-    setRepeatMode,
-    setShuffleMode,
-    togglePictureInPicture,
-    takeScreenshot,
-    sendString,
-    sendKey,
-    playMediaSource,
-    playTrailers,
-    t,
-    clearLastMessage,
-  ]);
+    return () => {
+      ws.onmessage = null;
+    };
+  }, [ws, stopPlayback, togglePlay, isPlaying, router]);
 };

i18n.ts

@@ -1,9 +1,9 @@
-import { getLocales } from "expo-localization";
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
+
+import { getLocales } from "expo-localization";
 import de from "./translations/de.json";
 import en from "./translations/en.json";
-import eo from "./translations/eo.json";
 import es from "./translations/es.json";
 import fr from "./translations/fr.json";
 import it from "./translations/it.json";
@@ -11,11 +11,10 @@ import ja from "./translations/ja.json";
 import nl from "./translations/nl.json";
 import pl from "./translations/pl.json";
 import ptBR from "./translations/pt-BR.json";
-import ru from "./translations/ru.json";
 import sv from "./translations/sv.json";
-import tlh from "./translations/tlh.json";
+import ru from "./translations/ru.json";
 import tr from "./translations/tr.json";
-import uk from "./translations/uk.json";
+import ua from "./translations/ua.json";
 import zhCN from "./translations/zh-CN.json";
 import zhTW from "./translations/zh-TW.json";
 
@@ -23,19 +22,16 @@ export const APP_LANGUAGES = [
   { label: "Deutsch", value: "de" },
   { label: "English", value: "en" },
   { label: "Español", value: "es" },
-  { label: "Esperanto", value: "eo" },
   { label: "Français", value: "fr" },
   { label: "Italiano", value: "it" },
   { label: "日本語", value: "ja" },
-  { label: "Klingon", value: "tlh" },
   { label: "Türkçe", value: "tr" },
   { label: "Nederlands", value: "nl" },
   { label: "Polski", value: "pl" },
   { label: "Português (Brasil)", value: "pt-BR" },
   { label: "Svenska", value: "sv" },
   { label: "Русский", value: "ru" },
-  { label: "Українська", value: "uk" },
-  { label: "Українська", value: "uk" },
+  { label: "Українська", value: "ua" },
   { label: "简体中文", value: "zh-CN" },
   { label: "繁體中文", value: "zh-TW" },
 ];
@@ -46,7 +42,6 @@ i18n.use(initReactI18next).init({
     de: { translation: de },
     en: { translation: en },
     es: { translation: es },
-    eo: { translation: eo },
     fr: { translation: fr },
     it: { translation: it },
     ja: { translation: ja },
@@ -56,8 +51,7 @@ i18n.use(initReactI18next).init({
     sv: { translation: sv },
     ru: { translation: ru },
     tr: { translation: tr },
-    tlh: { translation: tlh },
-    uk: { translation: uk },
+    ua: { translation: ua },
     "zh-CN": { translation: zhCN },
     "zh-TW": { translation: zhTW },
   },

modules/MpvPlayer.types.ts

@@ -0,0 +1,98 @@
+import { ViewStyle } from "react-native";
+
+export type PlaybackStatePayload = {
+  nativeEvent: {
+    target: number;
+    state: "Opening" | "Buffering" | "Playing" | "Paused" | "Error";
+    currentTime: number;
+    duration: number;
+    isBuffering: boolean;
+    isPlaying: boolean;
+  };
+};
+
+export type ProgressUpdatePayload = {
+  nativeEvent: {
+    currentTime: number;
+    duration: number;
+    isPlaying: boolean;
+    isBuffering: boolean;
+  };
+};
+
+export type VideoLoadStartPayload = {
+  nativeEvent: {
+    target: number;
+  };
+};
+
+export type PipStartedPayload = {
+  nativeEvent: {
+    pipStarted: boolean;
+  };
+};
+
+export type VideoStateChangePayload = PlaybackStatePayload;
+
+export type VideoProgressPayload = ProgressUpdatePayload;
+
+export type MpvPlayerSource = {
+  uri: string;
+  type?: string;
+  isNetwork?: boolean;
+  autoplay?: boolean;
+  externalSubtitles: { name: string; DeliveryUrl: string }[];
+  initOptions?: any[];
+  mediaOptions?: { [key: string]: any };
+  startPosition?: number;
+};
+
+export type TrackInfo = {
+  name: string;
+  index: number;
+  language?: string;
+};
+
+export type ChapterInfo = {
+  name: string;
+  timeOffset: number;
+  duration: number;
+};
+
+export type MpvPlayerViewProps = {
+  source: MpvPlayerSource;
+  style?: ViewStyle | ViewStyle[];
+  progressUpdateInterval?: number;
+  paused?: boolean;
+  muted?: boolean;
+  volume?: number;
+  videoAspectRatio?: string;
+  onVideoProgress?: (event: ProgressUpdatePayload) => void;
+  onVideoStateChange?: (event: PlaybackStatePayload) => void;
+  onVideoLoadStart?: (event: VideoLoadStartPayload) => void;
+  onVideoLoadEnd?: (event: VideoLoadStartPayload) => void;
+  onVideoError?: (event: PlaybackStatePayload) => void;
+  onPipStarted?: (event: PipStartedPayload) => void;
+};
+
+export interface MpvPlayerViewRef {
+  startPictureInPicture: () => Promise<void>;
+  play: () => Promise<void>;
+  pause: () => Promise<void>;
+  stop: () => Promise<void>;
+  seekTo: (time: number) => Promise<void>;
+  setAudioTrack: (trackIndex: number) => Promise<void>;
+  getAudioTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleTrack: (trackIndex: number) => Promise<void>;
+  getSubtitleTracks: () => Promise<TrackInfo[] | null>;
+  setSubtitleDelay: (delay: number) => Promise<void>;
+  setAudioDelay: (delay: number) => Promise<void>;
+  takeSnapshot: (path: string, width: number, height: number) => Promise<void>;
+  setRate: (rate: number) => Promise<void>;
+  nextChapter: () => Promise<void>;
+  previousChapter: () => Promise<void>;
+  getChapters: () => Promise<ChapterInfo[] | null>;
+  setVideoCropGeometry: (geometry: string | null) => Promise<void>;
+  getVideoCropGeometry: () => Promise<string | null>;
+  setSubtitleURL: (url: string, name: string) => Promise<void>;
+}

modules/MpvPlayerView.tsx

@@ -0,0 +1,139 @@
+import { requireNativeViewManager } from "expo-modules-core";
+import * as React from "react";
+import { ViewStyle } from "react-native";
+import type {
+  MpvPlayerSource,
+  MpvPlayerViewProps,
+  MpvPlayerViewRef,
+} from "./MpvPlayer.types";
+
+interface NativeViewRef extends MpvPlayerViewRef {
+  setNativeProps?: (props: Partial<MpvPlayerViewProps>) => void;
+}
+
+const MpvViewManager = requireNativeViewManager("MpvPlayer");
+
+// Create a forwarded ref version of the native view
+const NativeView = React.forwardRef<NativeViewRef, MpvPlayerViewProps>(
+  (props, ref) => {
+    return <MpvViewManager {...props} ref={ref} />;
+  },
+);
+
+const MpvPlayerView = React.forwardRef<MpvPlayerViewRef, MpvPlayerViewProps>(
+  (props, ref) => {
+    const nativeRef = React.useRef<NativeViewRef>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      startPictureInPicture: async () => {
+        await nativeRef.current?.startPictureInPicture();
+      },
+      play: async () => {
+        await nativeRef.current?.play();
+      },
+      pause: async () => {
+        await nativeRef.current?.pause();
+      },
+      stop: async () => {
+        await nativeRef.current?.stop();
+      },
+      seekTo: async (time: number) => {
+        await nativeRef.current?.seekTo(time);
+      },
+      setAudioTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setAudioTrack(trackIndex);
+      },
+      getAudioTracks: async () => {
+        const tracks = await nativeRef.current?.getAudioTracks();
+        return tracks ?? null;
+      },
+      setSubtitleTrack: async (trackIndex: number) => {
+        await nativeRef.current?.setSubtitleTrack(trackIndex);
+      },
+      getSubtitleTracks: async () => {
+        const tracks = await nativeRef.current?.getSubtitleTracks();
+        return tracks ?? null;
+      },
+      setSubtitleDelay: async (delay: number) => {
+        await nativeRef.current?.setSubtitleDelay(delay);
+      },
+      setAudioDelay: async (delay: number) => {
+        await nativeRef.current?.setAudioDelay(delay);
+      },
+      takeSnapshot: async (path: string, width: number, height: number) => {
+        await nativeRef.current?.takeSnapshot(path, width, height);
+      },
+      setRate: async (rate: number) => {
+        await nativeRef.current?.setRate(rate);
+      },
+      nextChapter: async () => {
+        await nativeRef.current?.nextChapter();
+      },
+      previousChapter: async () => {
+        await nativeRef.current?.previousChapter();
+      },
+      getChapters: async () => {
+        const chapters = await nativeRef.current?.getChapters();
+        return chapters ?? null;
+      },
+      setVideoCropGeometry: async (geometry: string | null) => {
+        await nativeRef.current?.setVideoCropGeometry(geometry);
+      },
+      getVideoCropGeometry: async () => {
+        const geometry = await nativeRef.current?.getVideoCropGeometry();
+        return geometry ?? null;
+      },
+      setSubtitleURL: async (url: string, name: string) => {
+        await nativeRef.current?.setSubtitleURL(url, name);
+      },
+    }));
+
+    const {
+      source,
+      style,
+      progressUpdateInterval = 500,
+      paused,
+      muted,
+      volume,
+      videoAspectRatio,
+      onVideoLoadStart,
+      onVideoStateChange,
+      onVideoProgress,
+      onVideoLoadEnd,
+      onVideoError,
+      onPipStarted,
+      ...otherProps
+    } = props;
+
+    const processedSource: MpvPlayerSource =
+      typeof source === "string"
+        ? ({ uri: source } as unknown as MpvPlayerSource)
+        : source;
+
+    if (processedSource.startPosition !== undefined) {
+      processedSource.startPosition = Math.floor(processedSource.startPosition);
+    }
+
+    return (
+      <NativeView
+        {...otherProps}
+        ref={nativeRef}
+        source={processedSource}
+        style={[{ width: "100%", height: "100%" }, style as ViewStyle]}
+        progressUpdateInterval={progressUpdateInterval}
+        paused={paused}
+        muted={muted}
+        volume={volume}
+        videoAspectRatio={videoAspectRatio}
+        onVideoLoadStart={onVideoLoadStart}
+        onVideoLoadEnd={onVideoLoadEnd}
+        onVideoStateChange={onVideoStateChange}
+        onVideoProgress={onVideoProgress}
+        onVideoError={onVideoError}
+        onPipStarted={onPipStarted}
+      />
+    );
+  },
+);
+
+export default MpvPlayerView;

modules/VlcPlayer.types.ts

@@ -41,10 +41,10 @@ export type VlcPlayerSource = {
   type?: string;
   isNetwork?: boolean;
   autoplay?: boolean;
-  startPosition?: number;
-  externalSubtitles?: { name: string; DeliveryUrl: string }[];
+  externalSubtitles: { name: string; DeliveryUrl: string }[];
   initOptions?: any[];
   mediaOptions?: { [key: string]: any };
+  startPosition?: number;
 };
 
 export type TrackInfo = {
@@ -94,5 +94,5 @@ export interface VlcPlayerViewRef {
   getChapters: () => Promise<ChapterInfo[] | null>;
   setVideoCropGeometry: (geometry: string | null) => Promise<void>;
   getVideoCropGeometry: () => Promise<string | null>;
-  setSubtitleURL: (url: string) => Promise<void>;
+  setSubtitleURL: (url: string, name: string) => Promise<void>;
 }

modules/VlcPlayerView.tsx

@@ -1,6 +1,8 @@
 import { requireNativeViewManager } from "expo-modules-core";
 import * as React from "react";
-import { ViewStyle } from "react-native";
+
+import { VideoPlayer, useSettings } from "@/utils/atoms/settings";
+import { Platform, ViewStyle } from "react-native";
 import type {
   VlcPlayerSource,
   VlcPlayerViewProps,
@@ -11,12 +13,22 @@ interface NativeViewRef extends VlcPlayerViewRef {
   setNativeProps?: (props: Partial<VlcPlayerViewProps>) => void;
 }
 
+const VLCViewManager = requireNativeViewManager("VlcPlayer");
 const VLC3ViewManager = requireNativeViewManager("VlcPlayer3");
 
 // Create a forwarded ref version of the native view
 const NativeView = React.forwardRef<NativeViewRef, VlcPlayerViewProps>(
   (props, ref) => {
-    return <VLC3ViewManager {...props} ref={ref} />;
+    const [settings] = useSettings();
+
+    if (Platform.OS === "ios" || Platform.isTVOS) {
+      if (settings.defaultPlayer === VideoPlayer.VLC_3) {
+        console.log("[Apple] Using Vlc Player 3");
+        return <VLC3ViewManager {...props} ref={ref} />;
+      }
+    }
+    console.log("Using default Vlc Player");
+    return <VLCViewManager {...props} ref={ref} />;
   },
 );
 
@@ -83,8 +95,8 @@ const VlcPlayerView = React.forwardRef<VlcPlayerViewRef, VlcPlayerViewProps>(
         const geometry = await nativeRef.current?.getVideoCropGeometry();
         return geometry ?? null;
       },
-      setSubtitleURL: async (url: string) => {
-        await nativeRef.current?.setSubtitleURL(url);
+      setSubtitleURL: async (url: string, name: string) => {
+        await nativeRef.current?.setSubtitleURL(url, name);
       },
     }));
 

modules/index.ts

@@ -12,6 +12,13 @@ import {
 } from "./VlcPlayer.types";
 import VlcPlayerView from "./VlcPlayerView";
 
+import {
+  MpvPlayerSource,
+  MpvPlayerViewProps,
+  MpvPlayerViewRef,
+} from "./MpvPlayer.types";
+import MpvPlayerView from "./MpvPlayerView";
+
 export {
   VlcPlayerView,
   VlcPlayerViewProps,
@@ -24,4 +31,9 @@ export {
   VlcPlayerSource,
   TrackInfo,
   ChapterInfo,
+  // MPV Player exports
+  MpvPlayerView,
+  MpvPlayerViewProps,
+  MpvPlayerViewRef,
+  MpvPlayerSource,
 };

modules/mpv-player/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["ios", "tvos"],
+  "ios": {
+    "modules": ["MpvPlayerModule"]
+  }
+}

modules/mpv-player/ios/MpvPlayer.podspec

@@ -0,0 +1,23 @@
+Pod::Spec.new do |s|
+  s.name           = 'MpvPlayer'
+  s.version        = '0.40.0'
+  s.summary        = 'MPVKit player for iOS/tvOS'
+  s.description    = 'A module that integrates MPVKit for video playback in iOS and tvOS applications'
+  s.author         = ''
+  s.source         = { git: '' }
+  s.homepage       = 'https://github.com/mpvkit/MPVKit'
+  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+  s.dependency 'MPVKit', '~> 0.40.6'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "*.{h,m,mm,swift,hpp,cpp}"
+
+end

modules/mpv-player/ios/MpvPlayerModule.swift

@@ -0,0 +1,71 @@
+import ExpoModulesCore
+
+public class MpvPlayerModule: Module {
+    public func definition() -> ModuleDefinition {
+        Name("MpvPlayer")
+        View(MpvPlayerView.self) {
+            Prop("source") { (view: MpvPlayerView, source: [String: Any]) in
+                view.setSource(source)
+            }
+
+            Prop("paused") { (view: MpvPlayerView, paused: Bool) in
+                if paused {
+                    view.pause()
+                } else {
+                    view.play()
+                }
+            }
+
+            Events(
+                "onPlaybackStateChanged",
+                "onVideoStateChange",
+                "onVideoLoadStart",
+                "onVideoLoadEnd",
+                "onVideoProgress",
+                "onVideoError",
+                "onPipStarted"
+            )
+
+            AsyncFunction("startPictureInPicture") { (view: MpvPlayerView) in
+                view.startPictureInPicture()
+            }
+
+            AsyncFunction("play") { (view: MpvPlayerView) in
+                view.play()
+            }
+
+            AsyncFunction("pause") { (view: MpvPlayerView) in
+                view.pause()
+            }
+
+            AsyncFunction("stop") { (view: MpvPlayerView) in
+                view.stop()
+            }
+
+            AsyncFunction("seekTo") { (view: MpvPlayerView, time: Int32) in
+                view.seekTo(time)
+            }
+
+            AsyncFunction("setAudioTrack") { (view: MpvPlayerView, trackIndex: Int) in
+                view.setAudioTrack(trackIndex)
+            }
+
+            AsyncFunction("getAudioTracks") { (view: MpvPlayerView) -> [[String: Any]]? in
+                return view.getAudioTracks()
+            }
+
+            AsyncFunction("setSubtitleTrack") { (view: MpvPlayerView, trackIndex: Int) in
+                view.setSubtitleTrack(trackIndex)
+            }
+
+            AsyncFunction("getSubtitleTracks") { (view: MpvPlayerView) -> [[String: Any]]? in
+                return view.getSubtitleTracks()
+            }
+
+            AsyncFunction("setSubtitleURL") {
+                (view: MpvPlayerView, url: String, name: String) in
+                view.setSubtitleURL(url, name: name)
+            }
+        }
+    }
+}

modules/mpv-player/ios/MpvPlayerView.swift

@@ -0,0 +1,892 @@
+import ExpoModulesCore
+import Libmpv
+import SwiftUI
+import UIKit
+
+// MARK: - Metal Layer
+class MetalLayer: CAMetalLayer {
+    // Workaround for MoltenVK issue that sets drawableSize to 1x1
+    override var drawableSize: CGSize {
+        get { return super.drawableSize }
+        set {
+            if Int(newValue.width) > 1 && Int(newValue.height) > 1 {
+                super.drawableSize = newValue
+            }
+        }
+    }
+
+    // Handle extended dynamic range content on iOS 16+
+    @available(iOS 16.0, *)
+    override var wantsExtendedDynamicRangeContent: Bool {
+        get { return super.wantsExtendedDynamicRangeContent }
+        set {
+            if Thread.isMainThread {
+                super.wantsExtendedDynamicRangeContent = newValue
+            } else {
+                DispatchQueue.main.sync {
+                    super.wantsExtendedDynamicRangeContent = newValue
+                }
+            }
+        }
+    }
+
+    // Helper to set HDR content safely
+    func setHDRContent(_ enabled: Bool) {
+        if #available(iOS 16.0, *) {
+            if Thread.isMainThread {
+                self.wantsExtendedDynamicRangeContent = enabled
+            } else {
+                DispatchQueue.main.sync {
+                    self.wantsExtendedDynamicRangeContent = enabled
+                }
+            }
+        }
+    }
+}
+
+// MARK: - MPV Properties
+enum MpvProperty {
+    static let timePosition = "time-pos"
+    static let duration = "duration"
+    static let pause = "pause"
+    static let pausedForCache = "paused-for-cache"
+    static let videoParamsSigPeak = "video-params/sig-peak"
+}
+
+// MARK: - Protocol
+protocol MpvPlayerDelegate: AnyObject {
+    func propertyChanged(mpv: OpaquePointer, propertyName: String, value: Any?)
+}
+
+// MARK: - MPV Player View
+class MpvPlayerView: ExpoView {
+    // MARK: - Properties
+
+    private var playerController: MpvMetalViewController?
+    private var source: [String: Any]?
+    private var externalSubtitles: [[String: String]]?
+
+    // MARK: - Event Emitters
+
+    @objc var onVideoStateChange: RCTDirectEventBlock?
+    @objc var onVideoLoadStart: RCTDirectEventBlock?
+    @objc var onVideoLoadEnd: RCTDirectEventBlock?
+    @objc var onVideoProgress: RCTDirectEventBlock?
+    @objc var onVideoError: RCTDirectEventBlock?
+    @objc var onPlaybackStateChanged: RCTDirectEventBlock?
+    @objc var onPipStarted: RCTDirectEventBlock?
+
+    // MARK: - Initialization
+
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        setupView()
+    }
+
+    // MARK: - Setup
+
+    private func setupView() {
+        backgroundColor = .black
+
+        print("Setting up direct MPV view")
+
+        // Create player controller
+        let controller = MpvMetalViewController()
+
+        // Configure player delegate
+        controller.delegate = self
+        playerController = controller
+
+        // Add the controller's view to our view hierarchy
+        controller.view.translatesAutoresizingMaskIntoConstraints = false
+        controller.view.backgroundColor = .clear
+
+        addSubview(controller.view)
+        NSLayoutConstraint.activate([
+            controller.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+            controller.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+            controller.view.topAnchor.constraint(equalTo: topAnchor),
+            controller.view.bottomAnchor.constraint(equalTo: bottomAnchor),
+        ])
+    }
+
+    // MARK: - Public Methods
+
+    func setSource(_ source: [String: Any]) {
+        self.source = source
+
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.onVideoLoadStart?(["target": self.reactTag as Any])
+
+            // Store external subtitle data
+            self.externalSubtitles = source["externalSubtitles"] as? [[String: String]]
+
+            if let uri = source["uri"] as? String, let url = URL(string: uri) {
+                print("Loading file: \(url.absoluteString)")
+                self.playerController?.playUrl = url
+
+                // Set start position if available
+                if let startPosition = source["startPosition"] as? Double {
+                    self.playerController?.setStartPosition(startPosition)
+                }
+
+                self.playerController?.loadFile(url)
+
+                // Set video to fill the screen
+                self.setVideoScalingMode("cover")
+
+                // Add external subtitles after the video is loaded
+                self.setInitialExternalSubtitles()
+
+                self.onVideoLoadEnd?(["target": self.reactTag as Any])
+            } else {
+                self.onVideoError?(["error": "Invalid or empty URI"])
+            }
+        }
+    }
+
+    func startPictureInPicture() {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.onPipStarted?(["pipStarted": false, "target": self.reactTag as Any])
+        }
+    }
+
+    func play() {
+        playerController?.play()
+    }
+
+    func pause() {
+        playerController?.pause()
+    }
+
+    func stop() {
+        playerController?.command("stop", args: [])
+    }
+
+    func seekTo(_ time: Int32) {
+        let seconds = Double(time) / 1000.0
+        print("Seeking to absolute position: \(seconds) seconds")
+        playerController?.command("seek", args: ["\(seconds)", "absolute"])
+    }
+
+    func setAudioTrack(_ trackIndex: Int) {
+        playerController?.command("set", args: ["aid", "\(trackIndex)"])
+    }
+
+    func getAudioTracks() -> [[String: Any]] {
+        guard let playerController = playerController else {
+            return []
+        }
+
+        // Get track list as a node
+        guard let trackListStr = playerController.getNode("track-list") else {
+            return []
+        }
+
+        // Parse the JSON string into an array
+        guard let data = trackListStr.data(using: .utf8),
+            let trackList = try? JSONSerialization.jsonObject(with: data) as? [Any]
+        else {
+            return []
+        }
+
+        // Filter to audio tracks only
+        var audioTracks: [[String: Any]] = []
+        for case let track as [String: Any] in trackList {
+            if let type = track["type"] as? String, type == "audio" {
+                let id = track["id"] as? Int ?? 0
+                let title = track["title"] as? String ?? "Audio \(id)"
+                let lang = track["lang"] as? String ?? "unknown"
+                let selected = track["selected"] as? Bool ?? false
+
+                audioTracks.append([
+                    "id": id,
+                    "title": title,
+                    "language": lang,
+                    "selected": selected,
+                ])
+            }
+        }
+
+        return audioTracks
+    }
+
+    func setSubtitleTrack(_ trackIndex: Int) {
+        playerController?.command("set", args: ["sid", "\(trackIndex)"])
+    }
+
+    func getSubtitleTracks() -> [[String: Any]] {
+        guard let playerController = playerController else {
+            return []
+        }
+
+        // Get track list as a node
+        guard let trackListStr = playerController.getNode("track-list") else {
+            return []
+        }
+
+        // Parse the JSON string into an array
+        guard let data = trackListStr.data(using: .utf8),
+            let trackList = try? JSONSerialization.jsonObject(with: data) as? [Any]
+        else {
+            return []
+        }
+
+        // Filter to subtitle tracks only
+        var subtitleTracks: [[String: Any]] = []
+        for case let track as [String: Any] in trackList {
+            if let type = track["type"] as? String, type == "sub" {
+                let id = track["id"] as? Int ?? 0
+                let title = track["title"] as? String ?? "Subtitle \(id)"
+                let lang = track["lang"] as? String ?? "unknown"
+                let selected = track["selected"] as? Bool ?? false
+
+                subtitleTracks.append([
+                    "id": id,
+                    "title": title,
+                    "language": lang,
+                    "selected": selected,
+                ])
+            }
+        }
+
+        return subtitleTracks
+    }
+
+    func setSubtitleURL(_ subtitleURL: String, name: String) {
+        guard let url = URL(string: subtitleURL) else { return }
+
+        print("Adding subtitle: \(name) from \(subtitleURL)")
+
+        // Add the subtitle file
+        playerController?.command("sub-add", args: [url.absoluteString])
+    }
+
+    @objc
+    func setVideoScalingMode(_ mode: String) {
+        // Mode can be: "contain" (letterbox), "cover" (crop/fill), or "stretch"
+
+        guard let playerController = playerController else { return }
+
+        switch mode.lowercased() {
+        case "cover", "fill", "crop":
+            // Fill the screen, cropping if necessary
+            playerController.command("set", args: ["panscan", "1.0"])
+            playerController.command("set", args: ["video-unscaled", "no"])
+            playerController.command("set", args: ["video-aspect-override", "no"])
+            // Center the crop
+            playerController.command("set", args: ["video-align-x", "0.5"])
+            playerController.command("set", args: ["video-align-y", "0.5"])
+        case "stretch":
+            // Stretch to fill without maintaining aspect ratio
+            playerController.command("set", args: ["panscan", "0.0"])
+            playerController.command("set", args: ["video-unscaled", "no"])
+            playerController.command("set", args: ["video-aspect-override", "-1"])
+        // No need for alignment as it stretches to fill entire area
+        case "contain", "letterbox", "fit":
+            // Keep aspect ratio, fit within screen (letterbox)
+            playerController.command("set", args: ["panscan", "0.0"])
+            playerController.command("set", args: ["video-unscaled", "no"])
+            playerController.command("set", args: ["video-aspect-override", "no"])
+            // Set alignment to center
+            playerController.command("set", args: ["video-align-x", "0.5"])
+            playerController.command("set", args: ["video-align-y", "0.5"])
+        default:
+            break
+        }
+    }
+
+    private func setInitialExternalSubtitles() {
+        if let externalSubtitles = self.externalSubtitles {
+            for subtitle in externalSubtitles {
+                if let subtitleName = subtitle["name"],
+                    let subtitleURL = subtitle["DeliveryUrl"]
+                {
+                    print("Adding external subtitle: \(subtitleName) from \(subtitleURL)")
+                    setSubtitleURL(subtitleURL, name: subtitleName)
+                }
+            }
+        }
+    }
+
+    // MARK: - Private Methods
+
+    private func isPaused() -> Bool {
+        return playerController?.getFlag(MpvProperty.pause) ?? true
+    }
+
+    private func isBuffering() -> Bool {
+        return playerController?.getFlag(MpvProperty.pausedForCache) ?? false
+    }
+
+    private func getCurrentTime() -> Double {
+        return playerController?.getDouble(MpvProperty.timePosition) ?? 0
+    }
+
+    private func getVideoDuration() -> Double {
+        return playerController?.getDouble(MpvProperty.duration) ?? 0
+    }
+
+    // MARK: - Cleanup
+
+    override func removeFromSuperview() {
+        cleanup()
+        super.removeFromSuperview()
+    }
+
+    private func cleanup() {
+        // Check if we already cleaned up
+
+        print("Cleaning up player")
+        guard playerController != nil else { return }
+
+        // First stop playback
+        stop()
+
+        // Break reference cycles
+        playerController?.delegate = nil
+
+        // Remove from view hierarchy
+        playerController?.view.removeFromSuperview()
+
+        // Release references
+        playerController = nil
+    }
+
+    deinit {
+        cleanup()
+    }
+
+    // Check if player needs reset when the view appears
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+
+        // If we're returning to the window and player is missing, reset
+        if window != nil && playerController == nil {
+            setupView()
+
+            // Reload previous source if available
+            if let source = source {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+                    self?.setSource(source)
+                }
+            }
+        }
+    }
+}
+
+// MARK: - MPV Player Delegate
+extension MpvPlayerView: MpvPlayerDelegate {
+    // Move the static properties to class level
+    private static var lastTimePositionUpdate = Date(timeIntervalSince1970: 0)
+
+    func propertyChanged(mpv: OpaquePointer, propertyName: String, value: Any?) {
+        // Add throttling for frequently updated properties
+        switch propertyName {
+        case MpvProperty.timePosition:
+            // Throttle timePosition updates to once per second
+            let now = Date()
+            if now.timeIntervalSince(MpvPlayerView.lastTimePositionUpdate) < 1.0 {
+                return
+            }
+            MpvPlayerView.lastTimePositionUpdate = now
+
+            if let position = value as? Double {
+                let timeMs = position * 1000
+                DispatchQueue.main.async { [weak self] in
+                    guard let self = self else { return }
+                    print("IsPlaying: \(!self.isPaused())")
+                    self.onVideoProgress?([
+                        "currentTime": timeMs,
+                        "duration": self.getVideoDuration() * 1000,
+                        "isPlaying": !self.isPaused(),
+                        "isBuffering": self.isBuffering(),
+                        "target": self.reactTag as Any,
+                    ])
+                }
+            }
+
+        case MpvProperty.pausedForCache:
+            // We want to respond immediately to buffering state changes
+            let isBuffering = value as? Bool ?? false
+            DispatchQueue.main.async { [weak self] in
+                guard let self = self else { return }
+                self.onVideoStateChange?([
+                    "isBuffering": isBuffering, "target": self.reactTag as Any,
+                    "isPlaying": !self.isPaused(),
+                    "state": self.isPaused() ? "Paused" : "Playing",
+                ])
+            }
+
+        case MpvProperty.pause:
+            // We want to respond immediately to play/pause state changes
+            if let isPaused = value as? Bool {
+                let state = isPaused ? "Paused" : "Playing"
+                DispatchQueue.main.async { [weak self] in
+                    guard let self = self else { return }
+
+                    print("onPlaybackStateChanged: \(state)")
+                    self.onPlaybackStateChanged?([
+                        "state": state,
+                        "isPlaying": !isPaused,
+                        "isBuffering": self.isBuffering(),
+                        "currentTime": self.getCurrentTime() * 1000,
+                        "duration": self.getVideoDuration() * 1000,
+                        "target": self.reactTag as Any,
+                    ])
+                }
+            }
+
+        default:
+            break
+        }
+    }
+}
+
+// MARK: - Player Controller
+final class MpvMetalViewController: UIViewController {
+    // MARK: - Properties
+
+    var metalLayer = MetalLayer()
+    var mpv: OpaquePointer?
+    weak var delegate: MpvPlayerDelegate?
+    let mpvQueue = DispatchQueue(label: "mpv.queue", qos: .userInitiated)
+
+    private var isBeingDeallocated = false
+
+    // Use a static dictionary to store controller references instead of WeakContainer
+    private static var controllers = [UInt: MpvMetalViewController]()
+    private var controllerId: UInt = 0
+
+    var playUrl: URL?
+
+    var hdrAvailable: Bool {
+        if #available(iOS 16.0, *) {
+            let maxEDRRange = view.window?.screen.potentialEDRHeadroom ?? 1.0
+            let sigPeak = getDouble(MpvProperty.videoParamsSigPeak)
+            return maxEDRRange > 1.0 && sigPeak > 1.0
+        } else {
+            return false
+        }
+    }
+
+    var hdrEnabled = false {
+        didSet {
+            guard let mpv = mpv else { return }
+
+            if hdrEnabled {
+                mpv_set_option_string(mpv, "target-colorspace-hint", "yes")
+                metalLayer.setHDRContent(true)
+            } else {
+                mpv_set_option_string(mpv, "target-colorspace-hint", "no")
+                metalLayer.setHDRContent(false)
+            }
+        }
+    }
+
+    // Add a new property to track shutdown state
+    private var isShuttingDown = false
+    private let syncQueue = DispatchQueue(label: "com.mpv.sync", qos: .userInitiated)
+
+    private var startPosition: Double?
+
+    // MARK: - Lifecycle
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        setupMetalLayer()
+        DispatchQueue.main.asyncAfter(deadline: .now() + 1) { [weak self] in
+            self?.setupMPV()
+
+            if let url = self?.playUrl {
+                self?.loadFile(url)
+            }
+        }
+
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        metalLayer.frame = view.bounds
+    }
+
+    deinit {
+        // Flag that we're being deinitialized
+        isBeingDeallocated = true
+
+        // Clean up on main thread to avoid threading issues
+        if Thread.isMainThread {
+            safeCleanup()
+        } else {
+            DispatchQueue.main.sync {
+                self.safeCleanup()
+            }
+        }
+    }
+
+    private func safeCleanup() {
+        // Remove from controllers dictionary first
+        if controllerId != 0 {
+            MpvMetalViewController.controllers.removeValue(forKey: controllerId)
+        }
+
+        // Remove the wakeup callback
+        if let mpv = self.mpv {
+            mpv_set_wakeup_callback(mpv, nil, nil)
+        }
+
+        // Terminate and destroy MPV instance
+        if let mpv = self.mpv {
+            // Unobserve all properties
+            mpv_unobserve_property(mpv, 0)
+
+            // Store locally to avoid accessing after freeing
+            let mpvToDestroy = mpv
+            self.mpv = nil
+
+            // Terminate and destroy
+            mpv_terminate_destroy(mpvToDestroy)
+        }
+    }
+
+    // MARK: - Setup
+
+    private func setupMetalLayer() {
+        metalLayer.frame = view.bounds
+        metalLayer.contentsScale = UIScreen.main.nativeScale
+        metalLayer.framebufferOnly = true
+        metalLayer.backgroundColor = UIColor.black.cgColor
+
+        view.layer.addSublayer(metalLayer)
+    }
+
+    private func setupMPV() {
+        guard let mpvHandle = mpv_create() else {
+            print("Failed to create MPV instance")
+            return
+        }
+
+        mpv = mpvHandle
+
+        // Configure mpv options
+        #if DEBUG
+            // mpv_request_log_messages(mpvHandle, "debug")
+        #else
+            mpv_request_log_messages(mpvHandle, "no")
+        #endif
+
+        // Force a proper window setup to prevent black screens
+        mpv_set_option_string(mpvHandle, "force-window", "yes")
+        mpv_set_option_string(mpvHandle, "reset-on-next-file", "all")
+
+        // Set rendering options
+
+        var layerPtr = Unmanaged.passUnretained(metalLayer).toOpaque()
+        mpv_set_option(mpvHandle, "wid", MPV_FORMAT_INT64, &layerPtr)
+        mpv_set_option_string(mpvHandle, "vo", "gpu-next")
+        mpv_set_option_string(mpvHandle, "gpu-api", "metal")
+        mpv_set_option_string(mpvHandle, "gpu-context", "auto")
+        mpv_set_option_string(mpvHandle, "hwdec", "videotoolbox")
+
+        // Set subtitle options
+        mpv_set_option_string(mpvHandle, "subs-match-os-language", "yes")
+        mpv_set_option_string(mpvHandle, "subs-fallback", "yes")
+        mpv_set_option_string(mpvHandle, "sub-auto", "no")
+
+        // Disable subtitle selection at start
+        mpv_set_option_string(mpvHandle, "sid", "no")
+
+        // Set starting point if available
+        if let startPos = startPosition {
+            let startPosString = String(format: "%.1f", startPos)
+            print("Setting initial start position to \(startPosString)")
+            mpv_set_option_string(mpvHandle, "start", startPosString)
+        }
+
+        // Set video options
+        mpv_set_option_string(mpvHandle, "video-rotate", "no")
+        mpv_set_option_string(mpvHandle, "ytdl", "no")
+
+        // Initialize mpv
+        let status = mpv_initialize(mpvHandle)
+        if status < 0 {
+            print("Failed to initialize MPV: \(String(cString: mpv_error_string(status)))")
+            mpv_terminate_destroy(mpvHandle)
+            mpv = nil
+            return
+        }
+
+        // Observe properties
+        observeProperty(mpvHandle, MpvProperty.videoParamsSigPeak, MPV_FORMAT_DOUBLE)
+        observeProperty(mpvHandle, MpvProperty.pausedForCache, MPV_FORMAT_FLAG)
+        observeProperty(mpvHandle, MpvProperty.timePosition, MPV_FORMAT_DOUBLE)
+        observeProperty(mpvHandle, MpvProperty.duration, MPV_FORMAT_DOUBLE)
+        observeProperty(mpvHandle, MpvProperty.pause, MPV_FORMAT_FLAG)
+
+        // Store controller in static dictionary and set its unique ID
+        controllerId = UInt(bitPattern: ObjectIdentifier(self))
+        MpvMetalViewController.controllers[controllerId] = self
+
+        // Set wakeup callback using the static method
+        mpv_set_wakeup_callback(
+            mpvHandle, MpvMetalViewController.mpvWakeupCallback,
+            UnsafeMutableRawPointer(bitPattern: controllerId))
+
+        print("MPV initialized")
+    }
+
+    // Static callback function - no WeakContainer needed
+    private static let mpvWakeupCallback: (@convention(c) (UnsafeMutableRawPointer?) -> Void) = {
+        (ctx) in
+        guard let ctx = ctx else { return }
+
+        // Get the controllerId from the context pointer
+        let controllerId = UInt(bitPattern: ctx)
+
+        // Dispatch to main queue to handle UI updates safely
+        DispatchQueue.main.async {
+            // Get the controller safely from the dictionary
+            if let controller = MpvMetalViewController.controllers[controllerId] {
+                // Only process events if not being deallocated
+                if !controller.isBeingDeallocated {
+                    controller.processEvents()
+                }
+            }
+        }
+    }
+
+    // Helper method for safer property observation
+    private func observeProperty(_ handle: OpaquePointer, _ name: String, _ format: mpv_format) {
+        let status = mpv_observe_property(handle, 0, name, format)
+        if status < 0 {
+            print(
+                "Failed to observe property \(name): \(String(cString: mpv_error_string(status)))")
+        }
+    }
+
+    // MARK: - MPV Methods
+
+    func loadFile(_ url: URL) {
+        guard let mpv = mpv else { return }
+
+        print("Loading file: \(url.absoluteString)")
+
+        // Use string array extension for safer command execution
+        command("loadfile", args: [url.absoluteString, "replace"])
+    }
+
+    func play() {
+        setFlag(MpvProperty.pause, false)
+    }
+
+    func pause() {
+        print("Pausing")
+        setFlag(MpvProperty.pause, true)
+    }
+
+    func getDouble(_ name: String) -> Double {
+        guard let mpv = mpv else { return 0.0 }
+
+        var data = 0.0
+        let status = mpv_get_property(mpv, name, MPV_FORMAT_DOUBLE, &data)
+        if status < 0 {
+            print(
+                "Failed to get double property \(name): \(String(cString: mpv_error_string(status)))"
+            )
+        }
+        return data
+    }
+
+    func getNode(_ name: String) -> String? {
+        guard let mpv = mpv else { return nil }
+
+        guard let cString = mpv_get_property_string(mpv, name) else { return nil }
+        // Use defer to ensure memory is freed even if an exception occurs
+        defer {
+            mpv_free(UnsafeMutableRawPointer(mutating: cString))
+        }
+        return String(cString: cString)
+    }
+
+    func getString(_ name: String) -> String? {
+        guard let mpv = mpv else { return nil }
+
+        guard let cString = mpv_get_property_string(mpv, name) else { return nil }
+        // Use defer to ensure memory is freed even if an exception occurs
+        defer {
+            mpv_free(UnsafeMutableRawPointer(mutating: cString))
+        }
+        return String(cString: cString)
+    }
+
+    func getFlag(_ name: String) -> Bool {
+        guard let mpv = mpv else { return false }
+
+        var data: Int32 = 0
+        let status = mpv_get_property(mpv, name, MPV_FORMAT_FLAG, &data)
+        if status < 0 {
+            print(
+                "Failed to get flag property \(name): \(String(cString: mpv_error_string(status)))")
+        }
+        return data > 0
+    }
+
+    func setFlag(_ name: String, _ value: Bool) {
+        guard let mpv = mpv else { return }
+
+        var data: Int32 = value ? 1 : 0
+        print("Setting flag \(name) to \(value)")
+        let status = mpv_set_property(mpv, name, MPV_FORMAT_FLAG, &data)
+        if status < 0 {
+            print(
+                "Failed to set flag property \(name): \(String(cString: mpv_error_string(status)))")
+        }
+    }
+
+    func command(
+        _ command: String,
+        args: [String] = [],
+        checkErrors: Bool = true,
+        completion: ((Int32) -> Void)? = nil
+    ) {
+        guard let mpv = mpv else {
+            completion?(-1)
+            return
+        }
+
+        // Approach 1: Create array of C strings directly from Swift strings
+        let allArgs = [command] + args
+
+        // Allocate array of C string pointers of the correct type
+        let cArray = UnsafeMutablePointer<UnsafePointer<CChar>?>.allocate(
+            capacity: allArgs.count + 1)
+
+        // Convert Swift strings to C strings and store in the array
+        for i in 0..<allArgs.count {
+            cArray[i] = (allArgs[i] as NSString).utf8String
+        }
+
+        // Set final element to nil
+        cArray[allArgs.count] = nil
+
+        // Execute the command
+        let status = mpv_command(mpv, cArray)
+
+        // Clean up
+        cArray.deallocate()
+
+        if checkErrors && status < 0 {
+            print("MPV command error: \(String(cString: mpv_error_string(status)))")
+        }
+
+        completion?(status)
+    }
+
+    // MARK: - Event Processing
+
+    private func processEvents() {
+        // Exit if we're being deallocated
+        if isBeingDeallocated {
+            return
+        }
+
+        guard let mpv = mpv else { return }
+
+        // Process a limited number of events to avoid infinite loops
+        let maxEvents = 10
+        var eventCount = 0
+
+        while !isBeingDeallocated && eventCount < maxEvents {
+            guard let event = mpv_wait_event(mpv, 0) else { break }
+            if event.pointee.event_id == MPV_EVENT_NONE { break }
+
+            handleEvent(event)
+            eventCount += 1
+        }
+    }
+
+    private func handleEvent(_ event: UnsafePointer<mpv_event>) {
+        // Exit early if we're being deallocated
+        if isBeingDeallocated {
+            return
+        }
+
+        guard let mpv = mpv else { return }
+
+        switch event.pointee.event_id {
+        case MPV_EVENT_PROPERTY_CHANGE:
+            guard let propertyData = event.pointee.data else { break }
+
+            // Safely create a typed pointer to the property data
+            let propertyPtr = propertyData.bindMemory(
+                to: mpv_event_property.self, capacity: 1)
+
+            // Safely get the property name
+            guard let namePtr = propertyPtr.pointee.name else { break }
+            let propertyName = String(cString: namePtr)
+
+            var value: Any?
+
+            // Handle different property types safely
+            switch propertyName {
+            case MpvProperty.pausedForCache, MpvProperty.pause:
+                if propertyPtr.pointee.format == MPV_FORMAT_FLAG,
+                    let data = propertyPtr.pointee.data
+                {
+                    // Cast to Int32 which is MPV's flag format
+                    let flagPtr = data.bindMemory(to: Int32.self, capacity: 1)
+                    value = flagPtr.pointee != 0
+                }
+
+            case MpvProperty.timePosition, MpvProperty.duration:
+                if propertyPtr.pointee.format == MPV_FORMAT_DOUBLE,
+                    let data = propertyPtr.pointee.data
+                {
+                    // Cast to Double which is MPV's double format
+                    let doublePtr = data.bindMemory(to: Double.self, capacity: 1)
+                    value = doublePtr.pointee
+                }
+
+            default:
+                break
+            }
+
+            // Notify delegate on main thread
+            if let value = value {
+                DispatchQueue.main.async { [weak self] in
+                    guard let self = self, !self.isBeingDeallocated else { return }
+                    self.delegate?.propertyChanged(
+                        mpv: mpv, propertyName: propertyName, value: value)
+                }
+            }
+
+        case MPV_EVENT_SHUTDOWN:
+            print("MPV shutdown event received")
+            isBeingDeallocated = true
+
+        case MPV_EVENT_LOG_MESSAGE:
+            return
+
+        default:
+            if let eventName = mpv_event_name(event.pointee.event_id) {
+                print("MPV event: \(String(cString: eventName))")
+            }
+        }
+    }
+
+    // MARK: - Public Methods
+
+    func setStartPosition(_ position: Double) {
+        startPosition = position
+
+        // If MPV is already initialized, we need to update the option
+        if let mpv = mpv {
+            let positionString = String(format: "%.1f", position)
+            print("Setting start position to \(positionString)")
+            mpv_set_option_string(mpv, "start", positionString)
+        }
+    }
+}

modules/mpv-player/ios/MpvPlayerViewGL.swift

@@ -0,0 +1,831 @@
+import ExpoModulesCore
+import Foundation
+import GLKit
+import Libmpv
+import SwiftUI
+import UIKit
+
+// MARK: - MPV Properties
+enum MpvProperty {
+    static let timePosition = "time-pos"
+    static let duration = "duration"
+    static let pause = "pause"
+    static let pausedForCache = "paused-for-cache"
+    static let videoParamsSigPeak = "video-params/sig-peak"
+}
+
+// MARK: - Protocol
+protocol MpvPlayerDelegate: AnyObject {
+    func propertyChanged(mpv: OpaquePointer, propertyName: String, value: Any?)
+}
+
+// MARK: - MPV Player View
+class MpvPlayerView: ExpoView {
+    // MARK: - Properties
+
+    private var playerController: MpvGLViewController?
+    private var source: [String: Any]?
+    private var externalSubtitles: [[String: String]]?
+
+    // MARK: - Event Emitters
+
+    @objc var onVideoStateChange: RCTDirectEventBlock?
+    @objc var onVideoLoadStart: RCTDirectEventBlock?
+    @objc var onVideoLoadEnd: RCTDirectEventBlock?
+    @objc var onVideoProgress: RCTDirectEventBlock?
+    @objc var onVideoError: RCTDirectEventBlock?
+    @objc var onPlaybackStateChanged: RCTDirectEventBlock?
+    @objc var onPipStarted: RCTDirectEventBlock?
+
+    // MARK: - Initialization
+
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        setupView()
+    }
+
+    // MARK: - Setup
+
+    private func setupView() {
+        backgroundColor = .black
+
+        print("Setting up MPV GL view")
+
+        // Create player controller - IMPORTANT: Use init(nibName:bundle:) to ensure proper GLKView setup
+        let controller = MpvGLViewController(nibName: nil, bundle: nil)
+
+        // Force view loading immediately
+        _ = controller.view
+
+        // Configure player delegate
+        controller.mpvDelegate = self
+        playerController = controller
+
+        // Make sure controller view is properly set up as GLKView
+        controller.view.backgroundColor = .black
+
+        // Set explicit frame to ensure it's visible
+        controller.view.frame = bounds
+        controller.view.translatesAutoresizingMaskIntoConstraints = false
+        controller.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+
+        // Add to hierarchy
+        addSubview(controller.view)
+
+        // Use constraints to ensure proper sizing
+        NSLayoutConstraint.activate([
+            controller.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+            controller.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+            controller.view.topAnchor.constraint(equalTo: topAnchor),
+            controller.view.bottomAnchor.constraint(equalTo: bottomAnchor),
+        ])
+    }
+
+    // Override layoutSubviews to make sure the player view is properly sized
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        playerController?.view.frame = bounds
+    }
+
+    // MARK: - Public Methods
+
+    func setSource(_ source: [String: Any]) {
+        self.source = source
+
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.onVideoLoadStart?(["target": self.reactTag as Any])
+
+            // Store external subtitle data
+            self.externalSubtitles = source["externalSubtitles"] as? [[String: String]]
+
+            if let uri = source["uri"] as? String, let url = URL(string: uri) {
+                print("Loading file: \(url.absoluteString)")
+                self.playerController?.playUrl = url
+
+                // Set start position if available
+                if let startPosition = source["startPosition"] as? Double {
+                    self.playerController?.startPosition = startPosition
+                }
+
+                self.playerController?.loadFile(url)
+
+                // Set video to fill the screen
+                self.setVideoScalingMode("cover")
+
+                // Add external subtitles after the video is loaded
+                self.setInitialExternalSubtitles()
+
+                self.onVideoLoadEnd?(["target": self.reactTag as Any])
+            } else {
+                self.onVideoError?(["error": "Invalid or empty URI"])
+            }
+        }
+    }
+
+    func startPictureInPicture() {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            self.onPipStarted?(["pipStarted": false, "target": self.reactTag as Any])
+        }
+    }
+
+    func play() {
+        playerController?.play()
+    }
+
+    func pause() {
+        playerController?.pause()
+    }
+
+    func stop() {
+        playerController?.command("stop", args: [])
+    }
+
+    func seekTo(_ time: Int32) {
+        let seconds = Double(time) / 1000.0
+        print("Seeking to absolute position: \(seconds) seconds")
+        playerController?.command("seek", args: ["\(seconds)", "absolute"])
+    }
+
+    func setAudioTrack(_ trackIndex: Int) {
+        playerController?.command("set", args: ["aid", "\(trackIndex)"])
+    }
+
+    func getAudioTracks() -> [[String: Any]] {
+        guard let playerController = playerController else {
+            return []
+        }
+
+        // Get track list as a node
+        guard let trackListStr = playerController.getNode("track-list") else {
+            return []
+        }
+
+        // Parse the JSON string into an array
+        guard let data = trackListStr.data(using: .utf8),
+            let trackList = try? JSONSerialization.jsonObject(with: data) as? [Any]
+        else {
+            return []
+        }
+
+        // Filter to audio tracks only
+        var audioTracks: [[String: Any]] = []
+        for case let track as [String: Any] in trackList {
+            if let type = track["type"] as? String, type == "audio" {
+                let id = track["id"] as? Int ?? 0
+                let title = track["title"] as? String ?? "Audio \(id)"
+                let lang = track["lang"] as? String ?? "unknown"
+                let selected = track["selected"] as? Bool ?? false
+
+                audioTracks.append([
+                    "id": id,
+                    "title": title,
+                    "language": lang,
+                    "selected": selected,
+                ])
+            }
+        }
+
+        return audioTracks
+    }
+
+    func setSubtitleTrack(_ trackIndex: Int) {
+        playerController?.command("set", args: ["sid", "\(trackIndex)"])
+    }
+
+    func getSubtitleTracks() -> [[String: Any]] {
+        guard let playerController = playerController else {
+            return []
+        }
+
+        // Get track list as a node
+        guard let trackListStr = playerController.getNode("track-list") else {
+            return []
+        }
+
+        // Parse the JSON string into an array
+        guard let data = trackListStr.data(using: .utf8),
+            let trackList = try? JSONSerialization.jsonObject(with: data) as? [Any]
+        else {
+            return []
+        }
+
+        // Filter to subtitle tracks only
+        var subtitleTracks: [[String: Any]] = []
+        for case let track as [String: Any] in trackList {
+            if let type = track["type"] as? String, type == "sub" {
+                let id = track["id"] as? Int ?? 0
+                let title = track["title"] as? String ?? "Subtitle \(id)"
+                let lang = track["lang"] as? String ?? "unknown"
+                let selected = track["selected"] as? Bool ?? false
+
+                subtitleTracks.append([
+                    "id": id,
+                    "title": title,
+                    "language": lang,
+                    "selected": selected,
+                ])
+            }
+        }
+
+        return subtitleTracks
+    }
+
+    func setSubtitleURL(_ subtitleURL: String, name: String) {
+        guard let url = URL(string: subtitleURL) else { return }
+
+        print("Adding subtitle: \(name) from \(subtitleURL)")
+
+        // Add the subtitle file
+        playerController?.command("sub-add", args: [url.absoluteString])
+    }
+
+    @objc
+    func setVideoScalingMode(_ mode: String) {
+        // Mode can be: "contain" (letterbox), "cover" (crop/fill), or "stretch"
+
+        guard let playerController = playerController else { return }
+
+        switch mode.lowercased() {
+        case "cover", "fill", "crop":
+            // Fill the screen, cropping if necessary
+            playerController.command("set", args: ["panscan", "1.0"])
+            playerController.command("set", args: ["video-unscaled", "no"])
+            playerController.command("set", args: ["video-aspect-override", "no"])
+            // Center the crop
+            playerController.command("set", args: ["video-align-x", "0.5"])
+            playerController.command("set", args: ["video-align-y", "0.5"])
+        case "stretch":
+            // Stretch to fill without maintaining aspect ratio
+            playerController.command("set", args: ["panscan", "0.0"])
+            playerController.command("set", args: ["video-unscaled", "no"])
+            playerController.command("set", args: ["video-aspect-override", "-1"])
+        // No need for alignment as it stretches to fill entire area
+        case "contain", "letterbox", "fit":
+            // Keep aspect ratio, fit within screen (letterbox)
+            playerController.command("set", args: ["panscan", "0.0"])
+            playerController.command("set", args: ["video-unscaled", "no"])
+            playerController.command("set", args: ["video-aspect-override", "no"])
+            // Set alignment to center
+            playerController.command("set", args: ["video-align-x", "0.5"])
+            playerController.command("set", args: ["video-align-y", "0.5"])
+        default:
+            break
+        }
+    }
+
+    private func setInitialExternalSubtitles() {
+        if let externalSubtitles = self.externalSubtitles {
+            for subtitle in externalSubtitles {
+                if let subtitleName = subtitle["name"],
+                    let subtitleURL = subtitle["DeliveryUrl"]
+                {
+                    print("Adding external subtitle: \(subtitleName) from \(subtitleURL)")
+                    setSubtitleURL(subtitleURL, name: subtitleName)
+                }
+            }
+        }
+    }
+
+    // MARK: - Private Methods
+
+    private func isPaused() -> Bool {
+        return playerController?.getFlag(MpvProperty.pause) ?? true
+    }
+
+    private func isBuffering() -> Bool {
+        return playerController?.getFlag(MpvProperty.pausedForCache) ?? false
+    }
+
+    private func getCurrentTime() -> Double {
+        return playerController?.getDouble(MpvProperty.timePosition) ?? 0
+    }
+
+    private func getVideoDuration() -> Double {
+        return playerController?.getDouble(MpvProperty.duration) ?? 0
+    }
+
+    // MARK: - Cleanup
+
+    override func removeFromSuperview() {
+        cleanup()
+        super.removeFromSuperview()
+    }
+
+    private func cleanup() {
+        // Check if we already cleaned up
+
+        print("Cleaning up player")
+        guard playerController != nil else { return }
+
+        // First stop playback
+        stop()
+
+        // Break reference cycles
+        playerController?.mpvDelegate = nil
+
+        // Remove from view hierarchy
+        playerController?.view.removeFromSuperview()
+
+        // Release references
+        playerController = nil
+    }
+
+    deinit {
+        cleanup()
+    }
+
+    // Check if player needs reset when the view appears
+    override func didMoveToWindow() {
+        super.didMoveToWindow()
+
+        // If we're returning to the window and player is missing, reset
+        if window != nil && playerController == nil {
+            setupView()
+
+            // Reload previous source if available
+            if let source = source {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+                    self?.setSource(source)
+                }
+            }
+        }
+    }
+}
+
+// MARK: - MPV Player Delegate
+extension MpvPlayerView: MpvPlayerDelegate {
+    // Move the static properties to class level
+    private static var lastTimePositionUpdate = Date(timeIntervalSince1970: 0)
+
+    func propertyChanged(mpv: OpaquePointer, propertyName: String, value: Any?) {
+        // Add throttling for frequently updated properties
+        switch propertyName {
+        case MpvProperty.timePosition:
+            // Throttle timePosition updates to once per second
+            let now = Date()
+            if now.timeIntervalSince(MpvPlayerView.lastTimePositionUpdate) < 1.0 {
+                return
+            }
+            MpvPlayerView.lastTimePositionUpdate = now
+
+            if let position = value as? Double {
+                let timeMs = position * 1000
+                DispatchQueue.main.async { [weak self] in
+                    guard let self = self else { return }
+                    print("IsPlaying: \(!self.isPaused())")
+                    self.onVideoProgress?([
+                        "currentTime": timeMs,
+                        "duration": self.getVideoDuration() * 1000,
+                        "isPlaying": !self.isPaused(),
+                        "isBuffering": self.isBuffering(),
+                        "target": self.reactTag as Any,
+                    ])
+                }
+            }
+
+        case MpvProperty.pausedForCache:
+            // We want to respond immediately to buffering state changes
+            let isBuffering = value as? Bool ?? false
+            DispatchQueue.main.async { [weak self] in
+                guard let self = self else { return }
+                self.onVideoStateChange?([
+                    "isBuffering": isBuffering, "target": self.reactTag as Any,
+                    "isPlaying": !self.isPaused(),
+                    "state": self.isPaused() ? "Paused" : "Playing",
+                ])
+            }
+
+        case MpvProperty.pause:
+            // We want to respond immediately to play/pause state changes
+            if let isPaused = value as? Bool {
+                let state = isPaused ? "Paused" : "Playing"
+                DispatchQueue.main.async { [weak self] in
+                    guard let self = self else { return }
+
+                    print("onPlaybackStateChanged: \(state)")
+                    self.onPlaybackStateChanged?([
+                        "state": state,
+                        "isPlaying": !isPaused,
+                        "isBuffering": self.isBuffering(),
+                        "currentTime": self.getCurrentTime() * 1000,
+                        "duration": self.getVideoDuration() * 1000,
+                        "target": self.reactTag as Any,
+                    ])
+                }
+            }
+
+        default:
+            break
+        }
+    }
+}
+
+// MARK: - Player Controller
+final class MpvGLViewController: GLKViewController {
+    // MARK: - Properties
+    var mpv: OpaquePointer!
+    var mpvGL: OpaquePointer!
+    weak var mpvDelegate: MpvPlayerDelegate?
+    var queue: DispatchQueue = DispatchQueue(label: "mpv", qos: .userInteractive)
+    private var defaultFBO: GLint = -1
+
+    var playUrl: URL?
+    var startPosition: Double?
+
+    // MARK: - Lifecycle
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        setupContext()
+        setupMpv()
+
+        if let url = playUrl {
+            self.loadFile(url)
+        }
+    }
+
+    override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+        print("GLKViewController viewWillAppear")
+    }
+
+    override func viewDidAppear(_ animated: Bool) {
+        super.viewDidAppear(animated)
+        print("GLKViewController viewDidAppear")
+    }
+
+    deinit {
+        // Clean up on deallocation
+        if mpvGL != nil {
+            mpv_render_context_free(mpvGL)
+            mpvGL = nil
+        }
+
+        if mpv != nil {
+            mpv_terminate_destroy(mpv)
+            mpv = nil
+        }
+    }
+
+    // MARK: - Setup
+
+    func setupContext() {
+        print("Setting up OpenGL ES context")
+
+        let context = EAGLContext(api: .openGLES3)!
+        if context == nil {
+            print("ERROR: Failed to create OpenGL ES context")
+            return
+        }
+
+        let isSuccess = EAGLContext.setCurrent(context)
+        if !isSuccess {
+            print("ERROR: Failed to set current GL context")
+            return
+        }
+
+        // Set the context on our GLKView
+        let glkView = self.view as! GLKView
+        glkView.context = context
+
+        print("Successfully set up OpenGL ES context")
+    }
+
+    func setupMpv() {
+        print("Setting up MPV")
+
+        mpv = mpv_create()
+        if mpv == nil {
+            print("ERROR: failed creating mpv context\n")
+            exit(1)
+        }
+
+        // https://mpv.io/manual/stable/#options
+        #if DEBUG
+            checkError(mpv_request_log_messages(mpv, "debug"))
+        #else
+            checkError(mpv_request_log_messages(mpv, "no"))
+        #endif
+        #if os(macOS)
+            checkError(mpv_set_option_string(mpv, "input-media-keys", "yes"))
+        #endif
+
+        // Set options
+        checkError(mpv_set_option_string(mpv, "subs-match-os-language", "yes"))
+        checkError(mpv_set_option_string(mpv, "subs-fallback", "yes"))
+        checkError(mpv_set_option_string(mpv, "hwdec", "auto-copy"))
+        checkError(mpv_set_option_string(mpv, "vo", "libmpv"))
+        checkError(mpv_set_option_string(mpv, "profile", "gpu-hq"))
+        checkError(mpv_set_option_string(mpv, "gpu-api", "opengl"))
+
+        // Add in setupMpv before initialization
+        checkError(mpv_set_option_string(mpv, "opengl-es", "yes"))
+        checkError(mpv_set_option_string(mpv, "opengl-version", "3"))
+
+        // Initialize MPV
+        checkError(mpv_initialize(mpv))
+
+        // Set starting point if available
+        if let startPos = startPosition {
+            let startPosString = String(format: "%.1f", startPos)
+            print("Setting initial start position to \(startPosString)")
+            checkError(mpv_set_option_string(mpv, "start", startPosString))
+        }
+
+        // Set up rendering
+        print("Setting up MPV GL rendering context")
+        let api = UnsafeMutableRawPointer(
+            mutating: (MPV_RENDER_API_TYPE_OPENGL as NSString).utf8String)
+        var initParams = mpv_opengl_init_params(
+            get_proc_address: {
+                (ctx, name) in
+                return MpvGLViewController.getProcAddress(ctx, name)
+            },
+            get_proc_address_ctx: nil
+        )
+
+        withUnsafeMutablePointer(to: &initParams) { initParams in
+            var params = [
+                mpv_render_param(type: MPV_RENDER_PARAM_API_TYPE, data: api),
+                mpv_render_param(type: MPV_RENDER_PARAM_OPENGL_INIT_PARAMS, data: initParams),
+                mpv_render_param(),
+            ]
+
+            if mpv_render_context_create(&mpvGL, mpv, &params) < 0 {
+                puts("ERROR: failed to initialize mpv GL context")
+                exit(1)
+            }
+
+            print("Successfully created MPV GL render context")
+
+            mpv_render_context_set_update_callback(
+                mpvGL,
+                mpvGLUpdate,
+                UnsafeMutableRawPointer(Unmanaged.passUnretained(self.view).toOpaque())
+            )
+        }
+
+        // Observe properties
+        mpv_observe_property(mpv, 0, MpvProperty.videoParamsSigPeak, MPV_FORMAT_DOUBLE)
+        mpv_observe_property(mpv, 0, MpvProperty.pausedForCache, MPV_FORMAT_FLAG)
+        mpv_observe_property(mpv, 0, MpvProperty.timePosition, MPV_FORMAT_DOUBLE)
+        mpv_observe_property(mpv, 0, MpvProperty.duration, MPV_FORMAT_DOUBLE)
+        mpv_observe_property(mpv, 0, MpvProperty.pause, MPV_FORMAT_FLAG)
+
+        // Set wakeup callback
+        mpv_set_wakeup_callback(
+            self.mpv,
+            { (ctx) in
+                let client = unsafeBitCast(ctx, to: MpvGLViewController.self)
+                client.readEvents()
+            }, UnsafeMutableRawPointer(Unmanaged.passUnretained(self).toOpaque()))
+
+        print("MPV setup complete")
+
+        // Configure GLKView properly for better performance
+        let glkView = self.view as! GLKView
+        glkView.enableSetNeedsDisplay = false  // Allow continuous rendering
+        glkView.drawableMultisample = .multisample4X  // Might help or hurt - test both
+        glkView.drawableColorFormat = .RGBA8888
+
+        // Set higher preferred frame rate
+        self.preferredFramesPerSecond = 60  // Or even higher on newer devices
+    }
+
+    // MARK: - MPV Methods
+
+    func loadFile(_ url: URL) {
+        print("Loading file: \(url.absoluteString)")
+
+        var args = [url.absoluteString]
+        args.append("replace")
+
+        print("MPV Command: loadfile with args \(args)")
+        command("loadfile", args: args.map { $0 as String? })
+
+        // Set video settings for visibility
+        command("set", args: ["video-unscaled", "no"])
+        command("set", args: ["panscan", "1.0"])  // Ensure video fills screen
+    }
+
+    func togglePause() {
+        getFlag(MpvProperty.pause) ? play() : pause()
+    }
+
+    func play() {
+        setFlag(MpvProperty.pause, false)
+    }
+
+    func pause() {
+        setFlag(MpvProperty.pause, true)
+    }
+
+    func getDouble(_ name: String) -> Double {
+        var data = 0.0
+        mpv_get_property(mpv, name, MPV_FORMAT_DOUBLE, &data)
+        return data
+    }
+
+    func getNode(_ name: String) -> String? {
+        guard let cString = mpv_get_property_string(mpv, name) else { return nil }
+        defer {
+            mpv_free(UnsafeMutableRawPointer(mutating: cString))
+        }
+        return String(cString: cString)
+    }
+
+    func getFlag(_ name: String) -> Bool {
+        var data = Int64()
+        mpv_get_property(mpv, name, MPV_FORMAT_FLAG, &data)
+        return data > 0
+    }
+
+    func setFlag(_ name: String, _ flag: Bool) {
+        guard mpv != nil else { return }
+        var data: Int = flag ? 1 : 0
+        mpv_set_property(mpv, name, MPV_FORMAT_FLAG, &data)
+    }
+
+    func command(
+        _ command: String,
+        args: [String?] = [],
+        checkForErrors: Bool = true,
+        returnValueCallback: ((Int32) -> Void)? = nil
+    ) {
+        guard mpv != nil else {
+            return
+        }
+        var cargs = makeCArgs(command, args).map { $0.flatMap { UnsafePointer<CChar>(strdup($0)) } }
+        defer {
+            for ptr in cargs where ptr != nil {
+                free(UnsafeMutablePointer(mutating: ptr!))
+            }
+        }
+        let returnValue = mpv_command(mpv, &cargs)
+        if checkForErrors {
+            checkError(returnValue)
+        }
+        if let cb = returnValueCallback {
+            cb(returnValue)
+        }
+    }
+
+    private func makeCArgs(_ command: String, _ args: [String?]) -> [String?] {
+        if !args.isEmpty, args.last == nil {
+            fatalError("Command do not need a nil suffix")
+        }
+
+        var strArgs = args
+        strArgs.insert(command, at: 0)
+        strArgs.append(nil)
+
+        return strArgs
+    }
+
+    // MARK: - Event Processing
+
+    func readEvents() {
+        queue.async { [self] in
+            while self.mpv != nil {
+                let event = mpv_wait_event(self.mpv, 0)
+                if event!.pointee.event_id == MPV_EVENT_NONE {
+                    break
+                }
+                switch event!.pointee.event_id {
+                case MPV_EVENT_PROPERTY_CHANGE:
+                    let dataOpaquePtr = OpaquePointer(event!.pointee.data)
+                    if let property = UnsafePointer<mpv_event_property>(dataOpaquePtr)?.pointee {
+                        let propertyName = String(cString: property.name)
+
+                        // Handle different property types
+                        var value: Any?
+
+                        switch propertyName {
+                        case MpvProperty.pausedForCache, MpvProperty.pause:
+                            if property.format == MPV_FORMAT_FLAG,
+                                let data = property.data
+                            {
+                                let boolValue =
+                                    UnsafePointer<Bool>(OpaquePointer(data))?.pointee ?? false
+                                value = boolValue
+                            }
+
+                        case MpvProperty.timePosition, MpvProperty.duration:
+                            if property.format == MPV_FORMAT_DOUBLE,
+                                let data = property.data
+                            {
+                                let doubleValue =
+                                    UnsafePointer<Double>(OpaquePointer(data))?.pointee ?? 0.0
+                                value = doubleValue
+                            }
+
+                        default:
+                            break
+                        }
+
+                        // Notify delegate if we have a value
+                        if let value = value {
+                            DispatchQueue.main.async { [weak self] in
+                                guard let self = self else { return }
+                                self.mpvDelegate?.propertyChanged(
+                                    mpv: self.mpv, propertyName: propertyName, value: value)
+                            }
+                        }
+                    }
+                case MPV_EVENT_SHUTDOWN:
+                    mpv_render_context_free(mpvGL)
+                    mpv_terminate_destroy(mpv)
+                    mpv = nil
+                    print("event: shutdown\n")
+                    break
+                case MPV_EVENT_LOG_MESSAGE:
+                    let msg = UnsafeMutablePointer<mpv_event_log_message>(
+                        OpaquePointer(event!.pointee.data))
+                    print(
+                        "[\(String(cString: (msg!.pointee.prefix)!))] \(String(cString: (msg!.pointee.level)!)): \(String(cString: (msg!.pointee.text)!))",
+                        terminator: "")
+                default:
+                    let eventName = mpv_event_name(event!.pointee.event_id)
+                    print("event: \(String(cString: (eventName)!))")
+                }
+            }
+        }
+    }
+
+    private func checkError(_ status: CInt) {
+        if status < 0 {
+            print("MPV API error: \(String(cString: mpv_error_string(status)))\n")
+        }
+    }
+
+    private var machine: String {
+        var systeminfo = utsname()
+        uname(&systeminfo)
+        return withUnsafeBytes(of: &systeminfo.machine) { bufPtr -> String in
+            let data = Data(bufPtr)
+            if let lastIndex = data.lastIndex(where: { $0 != 0 }) {
+                return String(data: data[0...lastIndex], encoding: .isoLatin1)!
+            } else {
+                return String(data: data, encoding: .isoLatin1)!
+            }
+        }
+    }
+
+    // MARK: - GL Rendering
+
+    override func glkView(_ view: GLKView, drawIn rect: CGRect) {
+        guard let mpvGL else {
+            return
+        }
+
+        // fill black background
+        glClearColor(0, 0, 0, 0)
+        glClear(UInt32(GL_COLOR_BUFFER_BIT))
+
+        glGetIntegerv(UInt32(GL_FRAMEBUFFER_BINDING), &defaultFBO)
+
+        var dims: [GLint] = [0, 0, 0, 0]
+        glGetIntegerv(GLenum(GL_VIEWPORT), &dims)
+
+        var data = mpv_opengl_fbo(
+            fbo: Int32(defaultFBO),
+            w: Int32(dims[2]),
+            h: Int32(dims[3]),
+            internal_format: 0
+        )
+
+        var flip: CInt = 1
+        withUnsafeMutablePointer(to: &flip) { flip in
+            withUnsafeMutablePointer(to: &data) { data in
+                var params = [
+                    mpv_render_param(type: MPV_RENDER_PARAM_OPENGL_FBO, data: data),
+                    mpv_render_param(type: MPV_RENDER_PARAM_FLIP_Y, data: flip),
+                    mpv_render_param(),
+                ]
+                mpv_render_context_render(mpvGL, &params)
+            }
+        }
+
+    }
+
+    private static func getProcAddress(_: UnsafeMutableRawPointer?, _ name: UnsafePointer<Int8>?)
+        -> UnsafeMutableRawPointer?
+    {
+        let symbolName = CFStringCreateWithCString(
+            kCFAllocatorDefault, name, CFStringBuiltInEncodings.ASCII.rawValue)
+        let identifier = CFBundleGetBundleWithIdentifier("com.apple.opengles" as CFString)
+
+        return CFBundleGetFunctionPointerForName(identifier, symbolName)
+    }
+}
+
+private func mpvGLUpdate(_ ctx: UnsafeMutableRawPointer?) {
+    let glView = unsafeBitCast(ctx, to: GLKView.self)
+
+    DispatchQueue.main.async {
+        glView.display()
+    }
+}

modules/mpv-player/src/MpvPlayerModule.ts

@@ -0,0 +1,5 @@
+import { requireNativeModule } from "expo-modules-core";
+
+// It loads the native module object from the JSI or falls back to
+// the bridge module (from NativeModulesProxy) if the remote debugger is on.
+export default requireNativeModule("MpvPlayer");

modules/vlc-player-3/ios/VlcPlayer3Module.swift

@@ -54,10 +54,6 @@ public class VlcPlayer3Module: Module {
                 return view.getAudioTracks()
             }
 
-            AsyncFunction("setSubtitleURL") { (view: VlcPlayer3View, url: String, name: String) in
-                view.setSubtitleURL(url, name: name)
-            }
-
             AsyncFunction("setSubtitleTrack") { (view: VlcPlayer3View, trackIndex: Int) in
                 view.setSubtitleTrack(trackIndex)
             }
@@ -65,6 +61,11 @@ public class VlcPlayer3Module: Module {
             AsyncFunction("getSubtitleTracks") { (view: VlcPlayer3View) -> [[String: Any]]? in
                 return view.getSubtitleTracks()
             }
+
+            AsyncFunction("setSubtitleURL") {
+                (view: VlcPlayer3View, url: String, name: String) in
+                view.setSubtitleURL(url, name: name)
+            }
         }
     }
 }

modules/vlc-player-3/ios/VlcPlayer3View.swift

@@ -1,10 +1,10 @@
 import ExpoModulesCore
-
 #if os(tvOS)
-    import TVVLCKit
+import TVVLCKit
 #else
-    import MobileVLCKit
+import MobileVLCKit
 #endif
+import UIKit
 
 class VlcPlayer3View: ExpoView {
     private var mediaPlayer: VLCMediaPlayer?
@@ -16,14 +16,12 @@ class VlcPlayer3View: ExpoView {
     private var lastReportedIsPlaying: Bool?
     private var customSubtitles: [(internalName: String, originalName: String)] = []
     private var startPosition: Int32 = 0
-    private var externalSubtitles: [[String: String]]?
+    private var isMediaReady: Bool = false
     private var externalTrack: [String: String]?
     private var progressTimer: DispatchSourceTimer?
     private var isStopping: Bool = false  // Define isStopping here
     private var lastProgressCall = Date().timeIntervalSince1970
     var hasSource = false
-    var isTranscoding = false
-    private var initialSeekPerformed: Bool = false
 
     // MARK: - Initialization
 
@@ -63,7 +61,7 @@ class VlcPlayer3View: ExpoView {
     }
 
     // MARK: - Public Methods
-    func startPictureInPicture() {}
+    func startPictureInPicture() { }
 
     @objc func play() {
         self.mediaPlayer?.play()
@@ -90,6 +88,7 @@ class VlcPlayer3View: ExpoView {
             // If the specified time is greater than the duration, seek to the end
             let seekTime = time > duration ? duration - 1000 : time
             player.time = VLCTime(int: seekTime)
+
             if wasPlaying {
                 self.play()
             }
@@ -110,19 +109,13 @@ class VlcPlayer3View: ExpoView {
             self.externalTrack = source["externalTrack"] as? [String: String]
             var initOptions = source["initOptions"] as? [Any] ?? []
             self.startPosition = source["startPosition"] as? Int32 ?? 0
-            self.externalSubtitles = source["externalSubtitles"] as? [[String: String]]
+            initOptions.append("--start-time=\(self.startPosition)")
 
             guard let uri = source["uri"] as? String, !uri.isEmpty else {
                 print("Error: Invalid or empty URI")
                 self.onVideoError?(["error": "Invalid or empty URI"])
                 return
             }
-            
-            self.isTranscoding = uri.contains("m3u8")
-
-            if !self.isTranscoding, self.startPosition > 0 {
-                initOptions.append("--start-time=\(self.startPosition)")
-            }
 
             let autoplay = source["autoplay"] as? Bool ?? false
             let isNetwork = source["isNetwork"] as? Bool ?? false
@@ -132,7 +125,6 @@ class VlcPlayer3View: ExpoView {
             self.mediaPlayer?.delegate = self
             self.mediaPlayer?.drawable = self.videoView
             self.mediaPlayer?.scaleFactor = 0
-            self.initialSeekPerformed = false
 
             let media: VLCMedia
             if isNetwork {
@@ -151,8 +143,8 @@ class VlcPlayer3View: ExpoView {
             media.addOptions(mediaOptions)
 
             self.mediaPlayer?.media = media
-            self.setInitialExternalSubtitles()
             self.hasSource = true
+
             if autoplay {
                 print("Playing...")
                 self.play()
@@ -190,9 +182,9 @@ class VlcPlayer3View: ExpoView {
             return
         }
 
-        let result = self.mediaPlayer?.addPlaybackSlave(url, type: .subtitle, enforce: false)
+        let result = self.mediaPlayer?.addPlaybackSlave(url, type: .subtitle, enforce: true)
         if let result = result {
-            let internalName = "Track \(self.customSubtitles.count)"
+            let internalName = "Track \(self.customSubtitles.count + 1)"
             print("Subtitle added with result: \(result) \(internalName)")
             self.customSubtitles.append((internalName: internalName, originalName: name))
         } else {
@@ -200,19 +192,6 @@ class VlcPlayer3View: ExpoView {
         }
     }
 
-    private func setInitialExternalSubtitles() {
-        if let externalSubtitles = self.externalSubtitles {
-            for subtitle in externalSubtitles {
-                if let subtitleName = subtitle["name"],
-                    let subtitleURL = subtitle["DeliveryUrl"]
-                {
-                    print("Setting external subtitle: \(subtitleName) \(subtitleURL)")
-                    self.setSubtitleURL(subtitleURL, name: subtitleName)
-                }
-            }
-        }
-    }
-
     @objc func getSubtitleTracks() -> [[String: Any]]? {
         guard let mediaPlayer = self.mediaPlayer else {
             return nil
@@ -294,13 +273,18 @@ class VlcPlayer3View: ExpoView {
 
         let currentTimeMs = player.time.intValue
         let durationMs = player.media?.length.intValue ?? 0
-        
 
         print("Debug: Current time: \(currentTimeMs)")
         if currentTimeMs >= 0 && currentTimeMs < durationMs {
-            if self.isTranscoding, !self.initialSeekPerformed, self.startPosition > 0 {
-                player.time = VLCTime(int: self.startPosition * 1000)
-                self.initialSeekPerformed = true
+            if player.isPlaying && !self.isMediaReady {
+                self.isMediaReady = true
+                // Set external track subtitle when starting.
+                if let externalTrack = self.externalTrack {
+                    if let name = externalTrack["name"], !name.isEmpty {
+                        let deliveryUrl = externalTrack["DeliveryUrl"] ?? ""
+                        self.setSubtitleURL(deliveryUrl, name: name)
+                    }
+                }
             }
             self.onVideoProgress?([
                 "currentTime": currentTimeMs,

modules/vlc-player/android/build.gradle

@@ -29,7 +29,7 @@ if (useManagedAndroidSdkVersions) {
       mavenCentral()
     }
     dependencies {
-      classpath "com.android.tools.build:gradle:8.11.0"
+      classpath "com.android.tools.build:gradle:7.1.3"
     }
   }
   project.android {

modules/vlc-player/ios/VlcPlayer.podspec

@@ -12,6 +12,7 @@ Pod::Spec.new do |s|
   s.dependency 'ExpoModulesCore'
   s.ios.dependency 'VLCKit', s.version
   s.tvos.dependency 'VLCKit', s.version
+  s.dependency 'Alamofire', '~> 5.10'
 
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {

modules/vlc-player/ios/VlcPlayerView.swift

@@ -137,7 +137,10 @@ extension VLCPlayerWrapper: VLCMediaPlayerDelegate {
     }
 }
 
-
+// MARK: - VLCMediaDelegate
+extension VLCPlayerWrapper: VLCMediaDelegate {
+    // Implement VLCMediaDelegate methods if needed
+}
 
 class VlcPlayerView: ExpoView {
     let logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "VlcPlayerView")
@@ -151,10 +154,6 @@ class VlcPlayerView: ExpoView {
     private var isStopping: Bool = false  // Define isStopping here
     private var externalSubtitles: [[String: String]]?
     var hasSource = false
-    var initialSeekPerformed = false
-    // A flag variable determinging if we should perform the initial seek. Its either transcoding or offline playback. that makes
-    var shouldPerformInitialSeek: Bool = false
-    
 
     // MARK: - Initialization
     required init(appContext: AppContext? = nil) {
@@ -173,19 +172,6 @@ class VlcPlayerView: ExpoView {
         )
     }
 
-    // Workaround: When playing an HLS video for the first time, seeking to a specific time immediately can cause a crash.
-    // To avoid this, we wait until the video has started playing before performing the initial seek.
-    func performInitialSeek() {
-        guard !initialSeekPerformed,
-              startPosition > 0,
-              shouldPerformInitialSeek,
-              vlc.player.isSeekable else { return }
-
-        initialSeekPerformed = true
-        logger.debug("First time update, performing initial seek to \(self.startPosition) seconds")
-        vlc.player.time = VLCTime(int: startPosition * 1000)
-    }
-
     private func setupNotifications() {
         NotificationCenter.default.addObserver(
             self, selector: #selector(applicationWillResignActive),
@@ -268,8 +254,6 @@ class VlcPlayerView: ExpoView {
             let autoplay = source["autoplay"] as? Bool ?? false
             let isNetwork = source["isNetwork"] as? Bool ?? false
 
-            // Set shouldPeformIntial based on isTranscoding and is not a network stream
-            self.shouldPerformInitialSeek = uri.contains("m3u8") || !isNetwork
             self.onVideoLoadStart?(["target": self.reactTag ?? NSNull()])
 
             let media: VLCMedia!
@@ -293,11 +277,8 @@ class VlcPlayerView: ExpoView {
             self.hasSource = true
             if autoplay {
                 logger.info("Playing...")
-                // The Video is not transcoding so it its safe to seek to the start position.
-                if !self.shouldPerformInitialSeek {
-                    self.vlc.player.time = VLCTime(number: NSNumber(value: self.startPosition * 1000))
-                }
                 self.play()
+                self.vlc.player.time = VLCTime(number: NSNumber(value: self.startPosition * 1000))
             }
         }
     }
@@ -434,9 +415,6 @@ class VlcPlayerView: ExpoView {
 
     private func updatePlayerState() {
         let player = self.vlc.player
-        if player.isPlaying {
-            performInitialSeek()
-        }
         self.onVideoStateChange?([
             "target": self.reactTag ?? NSNull(),
             "currentTime": player.time.intValue,

package.json

@@ -6,21 +6,21 @@
     "submodule-reload": "git submodule update --init --remote --recursive",
     "clean": "echo y | expo prebuild --clean",
     "start": "bun run submodule-reload && expo start",
-    "ios": "cross-env EXPO_TV=0 expo run:ios",
-    "ios:tv": "cross-env EXPO_TV=1 expo run:ios",
-    "android": "cross-env EXPO_TV=0 expo run:android",
-    "android:tv": "cross-env EXPO_TV=1 expo run:android",
-    "prebuild": "cross-env EXPO_TV=0 bun run clean",
-    "prebuild:tv": "cross-env EXPO_TV=1 bun run clean",
-    "build:android:local": "cd android && cross-env NODE_ENV=production ./gradlew assembleRelease",
+    "ios": "EXPO_TV=0 expo run:ios",
+    "ios:tv": "EXPO_TV=1 expo run:ios",
+    "android": "EXPO_TV=0 expo run:android",
+    "android:tv": "EXPO_TV=1 expo run:android",
+    "prebuild": "EXPO_TV=0 bun run clean",
+    "prebuild:tv": "EXPO_TV=1 bun run clean",
     "prepare": "husky",
     "check": "biome check .",
     "lint": "biome check --write --unsafe"
   },
   "dependencies": {
-    "@bottom-tabs/react-navigation": "0.9.2",
+    "@bottom-tabs/react-navigation": "0.8.6",
+    "@config-plugins/ffmpeg-kit-react-native": "^9.0.0",
     "@expo/config-plugins": "~9.0.15",
-    "@expo/react-native-action-sheet": "^4.1.1",
+    "@expo/react-native-action-sheet": "^4.1.0",
     "@expo/vector-icons": "^14.0.4",
     "@futurejj/react-native-visibility-sensor": "^1.3.10",
     "@gorhom/bottom-sheet": "^5.1.0",
@@ -35,65 +35,65 @@
     "@tanstack/react-query": "^5.66.0",
     "add": "^2.0.6",
     "axios": "^1.7.9",
-    "expo": "~52.0.47",
-    "expo-asset": "~11.0.5",
-    "expo-background-fetch": "~13.0.6",
+    "expo": "^52.0.31",
+    "expo-asset": "~11.0.3",
+    "expo-background-fetch": "~13.0.5",
     "expo-blur": "~14.0.3",
     "expo-brightness": "~13.0.3",
-    "expo-build-properties": "~0.13.3",
-    "expo-constants": "~17.0.8",
+    "expo-build-properties": "~0.13.2",
+    "expo-constants": "~17.0.5",
     "expo-crypto": "~14.0.2",
-    "expo-dev-client": "~5.0.20",
-    "expo-device": "~7.0.3",
+    "expo-dev-client": "~5.0.11",
+    "expo-device": "~7.0.2",
     "expo-font": "~13.0.3",
     "expo-haptics": "~14.0.1",
-    "expo-image": "~2.0.7",
+    "expo-image": "~2.0.4",
     "expo-keep-awake": "~14.0.2",
     "expo-linear-gradient": "~14.0.2",
     "expo-linking": "~7.0.5",
     "expo-localization": "~16.0.1",
     "expo-network": "~7.0.5",
-    "expo-notifications": "~0.29.14",
-    "expo-router": "~4.0.21",
+    "expo-notifications": "~0.29.13",
+    "expo-router": "~4.0.17",
     "expo-screen-orientation": "~8.0.4",
     "expo-sensors": "~14.0.2",
-    "expo-sharing": "~13.0.1",
-    "expo-splash-screen": "~0.29.24",
+    "expo-sharing": "~13.1.0",
+    "expo-splash-screen": "~0.29.22",
     "expo-status-bar": "~2.0.1",
-    "expo-system-ui": "~4.0.9",
-    "expo-task-manager": "~12.0.6",
-    "expo-updates": "~0.27.4",
+    "expo-system-ui": "~4.0.8",
+    "expo-task-manager": "~12.0.5",
+    "expo-updates": "~0.26.17",
     "expo-web-browser": "~14.0.2",
-    "i18next": "^25.0.0",
+    "i18next": "^24.2.2",
     "jotai": "^2.11.3",
     "lodash": "^4.17.21",
     "nativewind": "^2.0.11",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-i18next": "^15.4.0",
-    "react-native": "npm:react-native-tvos@~0.77.2-0",
+    "react-native": "npm:react-native-tvos@~0.77.0-0",
     "react-native-awesome-slider": "^2.9.0",
-    "react-native-bottom-tabs": "0.9.2",
+    "react-native-bottom-tabs": "0.8.6",
     "react-native-circular-progress": "^1.4.1",
     "react-native-collapsible": "^1.6.2",
     "react-native-compressor": "^1.10.3",
     "react-native-country-flag": "^2.0.2",
     "react-native-device-info": "^14.0.4",
     "react-native-edge-to-edge": "^1.4.3",
-    "react-native-gesture-handler": "~2.24.0",
+    "react-native-gesture-handler": "2.22.0",
     "react-native-get-random-values": "^1.11.0",
     "react-native-google-cast": "^4.8.3",
     "react-native-image-colors": "^2.4.0",
     "react-native-ios-context-menu": "^3.1.0",
     "react-native-ios-utilities": "5.1.1",
     "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "6.6.0",
+    "react-native-pager-view": "6.5.1",
     "react-native-progress": "^5.0.1",
     "react-native-reanimated": "~3.16.7",
     "react-native-reanimated-carousel": "3.5.1",
-    "react-native-safe-area-context": "5.2.0",
-    "react-native-screens": "4.10.0",
-    "react-native-svg": "15.11.2",
+    "react-native-safe-area-context": "5.1.0",
+    "react-native-screens": "~4.5.0",
+    "react-native-svg": "15.11.1",
     "react-native-tab-view": "^4.0.5",
     "react-native-udp": "^4.1.7",
     "react-native-uitextview": "^1.4.0",
@@ -102,7 +102,7 @@
     "react-native-video": "6.10.0",
     "react-native-volume-manager": "^2.0.8",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.13.0",
+    "react-native-webview": "13.13.2",
     "sonner-native": "^0.17.0",
     "tailwindcss": "3.3.2",
     "use-debounce": "^10.0.4",
@@ -112,18 +112,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.8",
-    "@biomejs/biome": "^2.0.0",
-    "@react-native-community/cli": "18.0.0",
+    "@biomejs/biome": "^1.9.4",
+    "@react-native-community/cli": "15.1.3",
     "@react-native-tvos/config-tv": "^0.1.1",
-    "@types/jest": "^30.0.0",
+    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.15",
     "@types/react": "~18.3.12",
     "@types/react-native-vector-icons": "^6.4.18",
     "@types/react-test-renderer": "^19.0.0",
     "@types/uuid": "^10.0.0",
-    "cross-env": "^7.0.3",
     "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
+    "lint-staged": "^15.5.0",
     "postinstall-postinstall": "^2.1.0",
     "react-test-renderer": "19.0.0",
     "typescript": "~5.7.3"
@@ -131,17 +130,11 @@
   "private": true,
   "expo": {
     "install": {
-      "exclude": [
-        "react-native"
-      ]
+      "exclude": ["react-native"]
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "biome check --write --unsafe --no-errors-on-unmatched"
-    ],
-    "*.json": [
-      "biome format --write"
-    ]
+    "*.{js,jsx,ts,tsx}": ["biome check --write --unsafe"],
+    "*.{json,md}": ["biome format --write"]
   }
 }

providers/DownloadProvider.tv.tsx

@@ -0,0 +1,108 @@
+import { storage } from "@/utils/mmkv";
+import type { JobStatus } from "@/utils/optimize-server";
+import type {
+  BaseItemDto,
+  MediaSourceInfo,
+} from "@jellyfin/sdk/lib/generated-client/models";
+import * as Application from "expo-application";
+import * as FileSystem from "expo-file-system";
+import { atom, useAtom } from "jotai";
+import type React from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
+
+export type DownloadedItem = {
+  item: Partial<BaseItemDto>;
+  mediaSource: MediaSourceInfo;
+};
+
+export const processesAtom = atom<JobStatus[]>([]);
+
+const DownloadContext = createContext<ReturnType<
+  typeof useDownloadProvider
+> | null>(null);
+
+/**
+ * Dummy download provider for tvOS
+ */
+function useDownloadProvider() {
+  const [processes, setProcesses] = useAtom<JobStatus[]>(processesAtom);
+
+  const downloadedFiles: DownloadedItem[] = [];
+
+  const removeProcess = useCallback(async (id: string) => {}, []);
+
+  const startDownload = useCallback(async (process: JobStatus) => {
+    return null;
+  }, []);
+
+  const startBackgroundDownload = useCallback(
+    async (url: string, item: BaseItemDto, mediaSource: MediaSourceInfo) => {
+      return null;
+    },
+    [],
+  );
+
+  const deleteAllFiles = async (): Promise<void> => {};
+
+  const deleteFile = async (id: string): Promise<void> => {};
+
+  const deleteItems = async (items: BaseItemDto[]) => {};
+
+  const cleanCacheDirectory = async () => {};
+
+  const deleteFileByType = async (type: BaseItemDto["Type"]) => {};
+
+  const appSizeUsage = useMemo(async () => {
+    return 0;
+  }, []);
+
+  function getDownloadedItem(itemId: string): DownloadedItem | null {
+    return null;
+  }
+
+  function saveDownloadedItemInfo(item: BaseItemDto, size = 0) {}
+
+  function getDownloadedItemSize(itemId: string): number {
+    const size = storage.getString(`downloadedItemSize-${itemId}`);
+    return size ? Number.parseInt(size) : 0;
+  }
+
+  const APP_CACHE_DOWNLOAD_DIRECTORY = `${FileSystem.cacheDirectory}${Application.applicationId}/Downloads/`;
+
+  return {
+    processes,
+    startBackgroundDownload,
+    downloadedFiles,
+    deleteAllFiles,
+    deleteFile,
+    deleteItems,
+    saveDownloadedItemInfo,
+    removeProcess,
+    setProcesses,
+    startDownload,
+    getDownloadedItem,
+    deleteFileByType,
+    appSizeUsage,
+    getDownloadedItemSize,
+    APP_CACHE_DOWNLOAD_DIRECTORY,
+    cleanCacheDirectory,
+  };
+}
+
+export function DownloadProvider({ children }: { children: React.ReactNode }) {
+  const downloadProviderValue = useDownloadProvider();
+
+  return (
+    <DownloadContext.Provider value={downloadProviderValue}>
+      {children}
+    </DownloadContext.Provider>
+  );
+}
+
+export function useDownload() {
+  const context = useContext(DownloadContext);
+  if (context === null) {
+    throw new Error("useDownload must be used within a DownloadProvider");
+  }
+  return context;
+}

providers/Downloads/types.ts

@@ -1,117 +0,0 @@
-import type {
-  BaseItemDto,
-  MediaSourceInfo,
-} from "@jellyfin/sdk/lib/generated-client/models";
-import { Bitrate } from "@/components/BitrateSelector";
-
-/**
- * Represents the data for downloaded trickplay files.
- */
-export interface TrickPlayData {
-  /** The local directory path where trickplay image sheets are stored. */
-  path: string;
-  /** The total size of all trickplay images in bytes. */
-  size: number;
-}
-
-/**
- * Represents the user data for a downloaded item.
- */
-interface UserData {
-  subtitleStreamIndex: number;
-  /** The last known audio stream index. */
-  audioStreamIndex: number;
-}
-
-/** Represents a segment of time in a media item, used for intro/credit skipping. */
-export interface MediaTimeSegment {
-  startTime: number;
-  endTime: number;
-  text: string;
-}
-
-export interface Segment {
-  startTime: number;
-  endTime: number;
-  text: string;
-}
-
-/** Represents a single downloaded media item with all necessary metadata for offline playback. */
-export interface DownloadedItem {
-  /** The Jellyfin item DTO. */
-  item: BaseItemDto;
-  /** The media source information. */
-  mediaSource: MediaSourceInfo;
-  /** The local file path of the downloaded video. */
-  videoFilePath: string;
-  /** The size of the video file in bytes. */
-  videoFileSize: number;
-  /** The local file path of the downloaded trickplay images. */
-  trickPlayData?: TrickPlayData;
-  /** The intro segments for the item. */
-  introSegments?: MediaTimeSegment[];
-  /** The credit segments for the item. */
-  creditSegments?: MediaTimeSegment[];
-  /** The user data for the item. */
-  userData: UserData;
-}
-/**
- * Represents a downloaded Season, containing a map of its episodes.
- */
-export interface DownloadedSeason {
-  /** A map of episode numbers to their downloaded item data. */
-  episodes: Record<number, DownloadedItem>;
-}
-
-/**
- * Represents a downloaded series, containing seasons and their episodes.
- */
-export interface DownloadedSeries {
-  /** The Jellyfin item DTO for the series. */
-  seriesInfo: BaseItemDto;
-  /** A map of season numbers to their downloaded season data. */
-  seasons: Record<
-    number,
-    {
-      /** A map of episode numbers to their downloaded episode data. */
-      episodes: Record<number, DownloadedItem>;
-    }
-  >;
-}
-
-/**
- * The main structure for all downloaded content stored locally.
- * This object is what will be saved to your local storage.
- */
-export interface DownloadsDatabase {
-  /** A map of movie IDs to their downloaded movie data. */
-  movies: Record<string, DownloadedItem>;
-  /** A map of series IDs to their downloaded series data. */
-  series: Record<string, DownloadedSeries>;
-}
-
-/**
- * Represents the status of a download job.
- */
-export type JobStatus = {
-  id: string;
-  inputUrl: string;
-  item: BaseItemDto;
-  itemId: string;
-  deviceId: string;
-  progress: number;
-  status:
-    | "downloading"
-    | "paused"
-    | "error"
-    | "pending"
-    | "completed"
-    | "queued";
-  timestamp: Date;
-  mediaSource: MediaSourceInfo;
-  maxBitrate: Bitrate;
-  bytesDownloaded?: number;
-  lastProgressUpdateTime?: Date;
-  speed?: number;
-  estimatedTotalSizeBytes?: number;
-};

providers/JellyfinProvider.tsx

@@ -1,16 +1,22 @@
 import "@/augmentations";
+import { useInterval } from "@/hooks/useInterval";
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
+import { useSettings } from "@/utils/atoms/settings";
+import { writeErrorLog, writeInfoLog } from "@/utils/log";
+import { storage } from "@/utils/mmkv";
+import { store } from "@/utils/store";
 import { type Api, Jellyfin } from "@jellyfin/sdk";
 import type { UserDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getUserApi } from "@jellyfin/sdk/lib/utils/api";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import axios, { AxiosError } from "axios";
 import { router, useSegments } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { atom, useAtom } from "jotai";
 import type React from "react";
 import {
-  createContext,
   type ReactNode,
+  createContext,
   useCallback,
   useContext,
   useEffect,
@@ -21,12 +27,6 @@ import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
 import { getDeviceName } from "react-native-device-info";
 import uuid from "react-native-uuid";
-import { useInterval } from "@/hooks/useInterval";
-import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
-import { useSettings } from "@/utils/atoms/settings";
-import { writeErrorLog, writeInfoLog } from "@/utils/log";
-import { storage } from "@/utils/mmkv";
-import { store } from "@/utils/store";
 
 interface Server {
   address: string;
@@ -64,7 +64,7 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
       setJellyfin(
         () =>
           new Jellyfin({
-            clientInfo: { name: "Streamyfin", version: "0.28.1" },
+            clientInfo: { name: "Streamyfin", version: "0.28.0" },
             deviceInfo: {
               name: deviceName,
               id,
@@ -80,9 +80,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const [isPolling, setIsPolling] = useState<boolean>(false);
   const [secret, setSecret] = useState<string | null>(null);
   const [
-    _settings,
-    _updateSettings,
-    _pluginSettings,
+    settings,
+    updateSettings,
+    pluginSettings,
     setPluginSettings,
     refreshStreamyfinPluginSettings,
   ] = useSettings();
@@ -91,8 +91,9 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
   const headers = useMemo(() => {
     if (!deviceId) return {};
     return {
-      authorization: `MediaBrowser Client="Streamyfin", Device=${Platform.OS === "android" ? "Android" : "iOS"
-        }, DeviceId="${deviceId}", Version="0.28.1"`,
+      authorization: `MediaBrowser Client="Streamyfin", Device=${
+        Platform.OS === "android" ? "Android" : "iOS"
+      }, DeviceId="${deviceId}", Version="0.28.0"`,
     };
   }, [deviceId]);
 
@@ -286,8 +287,8 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
     mutationFn: async () => {
       api
         ?.delete(`/Streamyfin/device/${deviceId}`)
-        .then((_r) => writeInfoLog("Deleted expo push token for device"))
-        .catch((_e) =>
+        .then((r) => writeInfoLog("Deleted expo push token for device"))
+        .catch((e) =>
           writeErrorLog("Failed to delete expo push token for device"),
         );
 
@@ -379,6 +380,8 @@ function useProtectedRoute(user: UserDto | null, loaded = false) {
   useEffect(() => {
     if (loaded === false) return;
 
+    console.log("Loaded", user);
+
     const inAuthGroup = segments[0] === "(auth)";
 
     if (!user?.Id && inAuthGroup) {