fix: loading conditionals (#753)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.env.development

@@ -0,0 +1 @@
+EXPO_PUBLIC_WRITE_DEBUG=1

.env.production

@@ -0,0 +1 @@
+EXPO_PUBLIC_WRITE_DEBUG=0

.gitattributes

@@ -0,0 +1 @@
+.modules/vlc-player/Frameworks/*.xcframework filter=lfs diff=lfs merge=lfs -text

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/workflows/build-android.yml

@@ -0,0 +1,80 @@
+name: 🤖 Android APK 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: ubuntu-24.04
+    name: 🏗️ Build Android APK
+    permissions:
+      contents: read
+
+    steps:
+      - name: 📥 Checkout code
+        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:
+          # @todo: update to 1.x once this is fixed: https://github.com/streamyfin/streamyfin/pull/690#discussion_r2089749689
+          bun-version: '1.2.13'
+
+      - name: ☕ Setup JDK
+        uses: actions/setup-java@c5195efecf7bdfc987ee8bae7a71cb8b11521c00 # v4.7.1
+        with:
+          distribution: 'zulu'
+          java-version: '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 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@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: streamyfin-apk-${{ github.sha }}-${{ 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

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

.github/workflows/build-ios.yml

@@ -0,0 +1,85 @@
+name: 🤖 iOS IPA Build
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+on:
+  workflow_dispatch:
+#  push:
+#    branches: [develop]
+
+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:
+          # @todo: update to 1.x once this is fixed: https://github.com/streamyfin/streamyfin/pull/690#discussion_r2089749689
+          bun-version: '1.2.13'
+
+      - 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 i && bun run submodule-reload
+          npx expo prebuild
+
+      - name: 🏗️ Build iOS app
+        uses: sparkfabrik/ios-build-action@be021d9f600b104d199a500db7ba479149a6b257 # v2.3.2
+        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
+
+      - 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-${{ github.sha }}-${{ env.DATE_TAG }}
+          path: build-*.ipa
+          retention-days: 7

.github/workflows/check-lockfile.yml

@@ -0,0 +1,47 @@
+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
+        # @todo: update to 1.x once this is fixed: https://github.com/streamyfin/streamyfin/pull/690#discussion_r2089749689
+        with:
+          bun-version: '1.2.13'
+
+      - 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

@@ -0,0 +1,43 @@
+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@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
+        with:
+          languages: ${{ matrix.language }}
+          queries: +security-extended,security-and-quality
+
+      - name: 🛠️ Autobuild
+        uses: github/codeql-action/autobuild@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18
+
+      - name: 🧪 Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@ff0a06e83cb2de871e5a09832bc6a81e7276941f # v3.28.18

.github/workflows/conflict.yml

@@ -0,0 +1,24 @@
+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

@@ -1,41 +0,0 @@
-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/linting.yml

@@ -0,0 +1,96 @@
+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@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+        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@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+        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: '20.x'
+
+      - name: "🍞 Setup Bun"
+        uses: oven-sh/setup-bun@735343b667d3e6f658f44d0eca948eb6282f2b76 # v2.0.2
+        with:
+          # @todo: update to 1.x once this is fixed: https://github.com/streamyfin/streamyfin/pull/690#discussion_r2089749689
+          bun-version: '1.2.13'
+
+      - name: "📦 Install dependencies"
+        run: bun install --frozen-lockfile
+
+      - name: "🚨 Run ${{ matrix.command }}"
+        run: bun run ${{ matrix.command }}

.github/workflows/main.yml

@@ -1,39 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -10,7 +10,7 @@ npm-debug.*
 *.orig.*
 web-build/
 modules/vlc-player/android/build
-bun.lockb
+modules/vlc-player/android/.gradle
 
 # macOS
 .DS_Store
@@ -19,9 +19,7 @@ expo-env.d.ts
 
 Streamyfin.app
 
-build-*
 *.mp4
-build-*
 Streamyfin.app
 package-lock.json
 
@@ -44,3 +42,7 @@ credentials.json
 .idea/
 .ruby-lsp
 modules/hls-downloader/android/build
+streamyfin-4fec1-firebase-adminsdk.json
+.env
+.env.local
+*.aab

.husky/pre-commit

@@ -0,0 +1 @@
+lint-staged

.vscode/settings.json

@@ -1,16 +1,24 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.defaultFormatter": "biomejs.biome",
     "editor.formatOnSave": true
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.defaultFormatter": "biomejs.biome",
     "editor.formatOnSave": true
   },
   "prettier.printWidth": 120,
   "[swift]": {
     "editor.defaultFormatter": "sswg.swift-lang"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome",
+    "editor.formatOnSave": true
   }
 }

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>
 
-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.
+Welcome to Streamyfin, a simple and user-friendly Jellyfin video streaming 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,11 +15,11 @@ Welcome to Streamyfin, a simple and user-friendly Jellyfin client built with Exp
 
 - 🚀 **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
 
@@ -31,16 +31,16 @@ Downloading works by using ffmpeg to convert an HLS stream into a video file on
 
 ### Chromecast
 
-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.
+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.
 
 ### Streamyfin Plugin
 
-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:
+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:
 
-- Auto log in to Jellyseerr without the user having to do anythin
+- Auto log in to Jellyseerr without the user having to do anything
 - Choose the default languages
 - Set download method and search provider
-- Customize homescreen
+- Customize home screen
 - And more...
 
 [Streamyfin Plugin](https://github.com/streamyfin/jellyfin-plugin-streamyfin)
@@ -66,7 +66,7 @@ Or download the APKs [here on GitHub](https://github.com/streamyfin/streamyfin/r
 
 ### Beta testing
 
-To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and i'll know that you have subscribed. This is where I post APKs and IPAs. This won't give automatic access to the TestFlight, however, so you need to send me a DM with the email you use for Apple so that i can manually add you.
+To access the Streamyfin beta, you need to subscribe to the Member tier (or higher) on [Patreon](https://www.patreon.com/streamyfin). This will give you immediate access to the ⁠🧪-public-beta channel on Discord and I'll know that you have subscribed. This is where I 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.
 
@@ -86,6 +86,7 @@ We welcome any help to make Streamyfin better. If you'd like to contribute, plea
 1. Use node `>20`
 2. Install dependencies `bun i && bun run submodule-reload`
 3. Make sure you have xcode and/or android studio installed. (follow the guides for expo: https://docs.expo.dev/workflow/android-studio-emulator/)
+4. Install BiomeJS extension in VSCode/Your IDE (https://biomejs.dev/)
 4. run `npm run prebuild`
 5. Create an expo dev build by running `npm run ios` or `npm run android`. This will open a simulator on your computer and run the app.
 
@@ -117,12 +118,23 @@ 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.
 
 ## ✨ Acknowledgements
 
+We would like to thank the Jellyfin team for their great software and awesome support on discord.
+
+Special shoutout to the JF official clients for being an inspiration to ours.
+
 ### Core Developers
 
 Thanks to the following contributors for their significant contributions:

app.config.js

@@ -1,11 +1,14 @@
 module.exports = ({ config }) => {
-  if (process.env.EXPO_TV != "1") {
+  if (process.env.EXPO_TV !== "1") {
     config.plugins.push([
       "react-native-google-cast",
       { useDefaultExpandedMediaControls: true },
     ]);
   }
   return {
+    android: {
+      googleServicesFile: process.env.GOOGLE_SERVICES_JSON,
+    },
     ...config,
   };
 };

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Streamyfin",
     "slug": "streamyfin",
-    "version": "0.27.0",
+    "version": "0.28.0",
     "orientation": "default",
     "icon": "./assets/images/icon.png",
     "scheme": "streamyfin",
@@ -27,26 +27,33 @@
         "usesNonExemptEncryption": false
       },
       "supportsTablet": true,
-      "bundleIdentifier": "com.fredrikburmester.streamyfin"
+      "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"
+      }
     },
     "android": {
       "jsEngine": "hermes",
-      "versionCode": 53,
+      "versionCode": 55,
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive_icon.png"
+        "foregroundImage": "./assets/images/icon-plain.png",
+        "monochromeImage": "./assets/images/icon-mono.png",
+        "backgroundColor": "#464646"
       },
       "package": "com.fredrikburmester.streamyfin",
       "permissions": [
         "android.permission.FOREGROUND_SERVICE",
         "android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK",
         "android.permission.WRITE_SETTINGS"
-      ]
+      ],
+      "googleServicesFile": "./google-services.json"
     },
     "plugins": [
       "@react-native-tvos/config-tv",
       "expo-router",
       "expo-font",
-      "@config-plugins/ffmpeg-kit-react-native",
       [
         "react-native-video",
         {
@@ -111,6 +118,7 @@
       ["./plugins/withAndroidManifest.js"],
       ["./plugins/withTrustLocalCerts.js"],
       ["./plugins/withGradleProperties.js"],
+      ["./plugins/withRNBackgroundDownloader.js"],
       [
         "expo-splash-screen",
         {
@@ -118,6 +126,13 @@
           "image": "./assets/images/StreamyFinFinal.png",
           "imageWidth": 100
         }
+      ],
+      [
+        "expo-notifications",
+        {
+          "icon": "./assets/images/notification.png",
+          "color": "#9333EA"
+        }
       ]
     ],
     "experiments": {
@@ -131,7 +146,7 @@
         "projectId": "e79219d1-797f-4fbe-9fa1-cfd360690a68"
       }
     },
-    "owner": "fredrikburmester",
+    "owner": "streamyfin",
     "runtimeVersion": {
       "policy": "appVersion"
     },

app/(auth)/(tabs)/(custom-links)/_layout.tsx

@@ -1,13 +1,13 @@
-import {Stack} from "expo-router";
-import { Platform } from "react-native";
+import { Stack } from "expo-router";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 
 export default function CustomMenuLayout() {
   const { t } = useTranslation();
   return (
     <Stack>
       <Stack.Screen
-        name="index"
+        name='index'
         options={{
           headerShown: true,
           headerLargeTitle: true,

app/(auth)/(tabs)/(custom-links)/index.tsx

@@ -1,13 +1,13 @@
+import { Text } from "@/components/common/Text";
+import { ListItem } from "@/components/list/ListItem";
+import { apiAtom } from "@/providers/JellyfinProvider";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { useAtom } from "jotai/index";
+import React, { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform } from "react-native";
 import { FlatList, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import React, { useCallback, useEffect, useState } from "react";
-import { useAtom } from "jotai/index";
-import { apiAtom } from "@/providers/JellyfinProvider";
-import { ListItem } from "@/components/list/ListItem";
-import Ionicons from "@expo/vector-icons/Ionicons";
-import { Text } from "@/components/common/Text";
-import { useTranslation } from "react-i18next";
 
 const WebBrowser = !Platform.isTV ? require("expo-web-browser") : null;
 
@@ -26,11 +26,11 @@ export default function menuLinks() {
   const getMenuLinks = useCallback(async () => {
     try {
       const response = await api?.axiosInstance.get(
-        api?.basePath + "/web/config.json"
+        `${api?.basePath}/web/config.json`,
       );
       const config = response?.data;
 
-      if (!config && !config.hasOwnProperty("menuLinks")) {
+      if (!config && !Object.hasOwn(config, "menuLinks")) {
         console.error("Menu links not found");
         return;
       }
@@ -46,7 +46,7 @@ export default function menuLinks() {
   }, []);
   return (
     <FlatList
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       contentContainerStyle={{
         paddingTop: 10,
         paddingLeft: insets.left,
@@ -63,7 +63,7 @@ export default function menuLinks() {
         >
           <ListItem
             title={item.name}
-            iconAfter={<Ionicons name="link" size={24} color="white" />}
+            iconAfter={<Ionicons name='link' size={24} color='white' />}
           />
         </TouchableOpacity>
       )}
@@ -76,8 +76,10 @@ export default function menuLinks() {
         />
       )}
       ListEmptyComponent={
-        <View className="flex flex-col items-center justify-center h-full">
-          <Text className="font-bold text-xl text-neutral-500">{t("custom_links.no_links")}</Text>
+        <View className='flex flex-col items-center justify-center h-full'>
+          <Text className='font-bold text-xl text-neutral-500'>
+            {t("custom_links.no_links")}
+          </Text>
         </View>
       }
     />

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

@@ -1,14 +1,14 @@
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
-import { Platform } from "react-native";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 
 export default function SearchLayout() {
   const { t } = useTranslation();
   return (
     <Stack>
       <Stack.Screen
-        name="index"
+        name='index'
         options={{
           headerShown: true,
           headerLargeTitle: true,
@@ -17,7 +17,7 @@ export default function SearchLayout() {
             backgroundColor: "black",
           },
           headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}
       />

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

@@ -18,7 +18,7 @@ export default function favorites() {
   return (
     <ScrollView
       nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       refreshControl={
         <RefreshControl refreshing={loading} onRefresh={refetch} />
       }
@@ -28,7 +28,7 @@ export default function favorites() {
         paddingBottom: 16,
       }}
     >
-      <View className="my-4">
+      <View className='my-4'>
         <Favorites />
       </View>
     </ScrollView>

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

@@ -1,12 +1,12 @@
 import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
-import { Ionicons, Feather } from "@expo/vector-icons";
+import { Feather, Ionicons } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
-import { Platform, TouchableOpacity, View } from "react-native";
 import { useTranslation } from "react-i18next";
-const Chromecast = !Platform.isTV ? require("@/components/Chromecast") : null;
-import { useAtom } from "jotai";
+import { Platform, TouchableOpacity, View } from "react-native";
+const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
+import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
 import { userAtom } from "@/providers/JellyfinProvider";
-import { useSessions, useSessionsProps } from "@/hooks/useSessions";
+import { useAtom } from "jotai";
 
 export default function IndexLayout() {
   const router = useRouter();
@@ -16,7 +16,7 @@ export default function IndexLayout() {
   return (
     <Stack>
       <Stack.Screen
-        name="index"
+        name='index'
         options={{
           headerShown: true,
           headerLargeTitle: true,
@@ -25,16 +25,14 @@ export default function IndexLayout() {
           headerLargeStyle: {
             backgroundColor: "black",
           },
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerRight: () => (
-            <View className="flex flex-row items-center space-x-2">
+            <View className='flex flex-row items-center space-x-2'>
               {!Platform.isTV && (
                 <>
                   <Chromecast.Chromecast />
-                   {user && user.Policy?.IsAdministrator && (
-                    <SessionsButton />
-                   )}
+                  {user?.Policy?.IsAdministrator && <SessionsButton />}
                   <SettingsButton />
                 </>
               )}
@@ -43,67 +41,61 @@ export default function IndexLayout() {
         }}
       />
       <Stack.Screen
-        name="downloads/index"
+        name='downloads/index'
         options={{
           title: t("home.downloads.downloads_title"),
         }}
       />
       <Stack.Screen
-        name="downloads/[seriesId]"
+        name='downloads/[seriesId]'
         options={{
           title: t("home.downloads.tvseries"),
         }}
       />
       <Stack.Screen
-        name="sessions/index"
+        name='sessions/index'
         options={{
           title: t("home.sessions.title"),
         }}
       />
       <Stack.Screen
-        name="settings"
+        name='settings'
         options={{
           title: t("home.settings.settings_title"),
         }}
       />
       <Stack.Screen
-        name="settings/optimized-server/page"
+        name='settings/optimized-server/page'
         options={{
           title: "",
         }}
       />
       <Stack.Screen
-        name="settings/marlin-search/page"
+        name='settings/marlin-search/page'
         options={{
           title: "",
         }}
       />
       <Stack.Screen
-        name="settings/dashboard/sessions"
-        options={{
-          title: t("home.settings.dashboard.sessions_title"),
-        }}
-      />
-      <Stack.Screen
-        name="settings/jellyseerr/page"
+        name='settings/jellyseerr/page'
         options={{
           title: "",
         }}
       />
       <Stack.Screen
-        name="settings/hide-libraries/page"
+        name='settings/hide-libraries/page'
         options={{
           title: "",
         }}
       />
       <Stack.Screen
-        name="settings/logs/page"
+        name='settings/logs/page'
         options={{
           title: "",
         }}
       />
       <Stack.Screen
-        name="intro/page"
+        name='intro/page'
         options={{
           headerShown: false,
           title: "",
@@ -114,12 +106,12 @@ export default function IndexLayout() {
         <Stack.Screen key={name} name={name} options={options} />
       ))}
       <Stack.Screen
-        name="collections/[collectionId]"
+        name='collections/[collectionId]'
         options={{
           title: "",
           headerShown: true,
           headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}
       />
@@ -136,14 +128,14 @@ const SettingsButton = () => {
         router.push("/(auth)/settings");
       }}
     >
-      <Feather name="settings" color={"white"} size={22} />
+      <Feather name='settings' color={"white"} size={22} />
     </TouchableOpacity>
   );
 };
 
 const SessionsButton = () => {
   const router = useRouter();
-  const { sessions = [], _ } = useSessions({} as useSessionsProps);
+  const { sessions = [] } = useSessions({} as useSessionsProps);
 
   return (
     <TouchableOpacity
@@ -151,9 +143,9 @@ const SessionsButton = () => {
         router.push("/(auth)/sessions");
       }}
     >
-      <View className="mr-4">
-        <Ionicons 
-          name="play-circle"
+      <View className='mr-4'>
+        <Ionicons
+          name='play-circle'
           color={sessions.length === 0 ? "white" : "#9333ea"}
           size={25}
         />

app/(auth)/(tabs)/(home)/downloads/[seriesId].tsx

@@ -1,16 +1,16 @@
 import { Text } from "@/components/common/Text";
-import { useDownload } from "@/providers/DownloadProvider";
-import { router, useLocalSearchParams, useNavigation } from "expo-router";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { ScrollView, TouchableOpacity, View, Alert } from "react-native";
 import { EpisodeCard } from "@/components/downloads/EpisodeCard";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   SeasonDropdown,
-  SeasonIndexState,
+  type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
+import { useDownload } from "@/providers/DownloadProvider";
 import { storage } from "@/utils/mmkv";
 import { Ionicons } from "@expo/vector-icons";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { router, useLocalSearchParams, useNavigation } from "expo-router";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
 
 export default function page() {
   const navigation = useNavigation();
@@ -21,7 +21,7 @@ export default function page() {
   };
 
   const [seasonIndexState, setSeasonIndexState] = useState<SeasonIndexState>(
-    {}
+    {},
   );
   const { downloadedFiles, deleteItems } = useDownload();
 
@@ -29,9 +29,9 @@ export default function page() {
     try {
       return (
         downloadedFiles
-          ?.filter((f) => f.item.SeriesId == seriesId)
+          ?.filter((f) => f.item.SeriesId === seriesId)
           ?.sort(
-            (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!
+            (a, b) => a?.item.ParentIndexNumber! - b.item.ParentIndexNumber!,
           ) || []
       );
     } catch {
@@ -64,7 +64,7 @@ export default function page() {
     () =>
       Object.values(groupBySeason)?.[0]?.ParentIndexNumber ??
       series?.[0]?.item?.ParentIndexNumber,
-    [groupBySeason]
+    [groupBySeason],
   );
 
   useEffect(() => {
@@ -92,14 +92,14 @@ export default function page() {
           onPress: () => deleteItems(groupBySeason),
           style: "destructive",
         },
-      ]
+      ],
     );
   }, [groupBySeason]);
 
   return (
-    <View className="flex-1">
+    <View className='flex-1'>
       {series.length > 0 && (
-        <View className="flex flex-row items-center justify-start my-2 px-4">
+        <View className='flex flex-row items-center justify-start my-2 px-4'>
           <SeasonDropdown
             item={series[0].item}
             seasons={series.map((s) => s.item)}
@@ -112,17 +112,17 @@ export default function page() {
               }));
             }}
           />
-          <View className="bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2">
-            <Text className="text-xs font-bold">{groupBySeason.length}</Text>
+          <View className='bg-purple-600 rounded-full h-6 w-6 flex items-center justify-center ml-2'>
+            <Text className='text-xs font-bold'>{groupBySeason.length}</Text>
           </View>
-          <View className="bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto">
+          <View className='bg-neutral-800/80 rounded-full h-9 w-9 flex items-center justify-center ml-auto'>
             <TouchableOpacity onPress={deleteSeries}>
-              <Ionicons name="trash" size={20} color="white" />
+              <Ionicons name='trash' size={20} color='white' />
             </TouchableOpacity>
           </View>
         </View>
       )}
-      <ScrollView key={seasonIndex} className="px-4">
+      <ScrollView key={seasonIndex} className='px-4'>
         {groupBySeason.map((episode, index) => (
           <EpisodeCard key={index} item={episode} />
         ))}

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

@@ -1,28 +1,28 @@
+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 { DownloadedItem, useDownload } from "@/providers/DownloadProvider";
+import { type DownloadedItem, useDownload } from "@/providers/DownloadProvider";
 import { queueAtom } from "@/utils/atoms/queue";
-import {DownloadMethod, useSettings} from "@/utils/atoms/settings";
+import { DownloadMethod, useSettings } from "@/utils/atoms/settings";
+import { writeToLog } from "@/utils/log";
 import { Ionicons } from "@expo/vector-icons";
-import { useNavigation, useRouter } from "expo-router";
-import { useAtom } from "jotai";
-import React, { useEffect, useMemo, useRef } from "react";
-import { Alert, ScrollView, TouchableOpacity, View } from "react-native";
-import { Button } from "@/components/Button";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTranslation } from "react-i18next";
-import { t } from 'i18next';
-import { DownloadSize } from "@/components/downloads/DownloadSize";
 import {
   BottomSheetBackdrop,
-  BottomSheetBackdropProps,
+  type BottomSheetBackdropProps,
   BottomSheetModal,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
+import { useNavigation, useRouter } from "expo-router";
+import { t } from "i18next";
+import { useAtom } from "jotai";
+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 { writeToLog } from "@/utils/log";
 
 export default function page() {
   const navigation = useNavigation();
@@ -45,7 +45,7 @@ export default function page() {
   const groupedBySeries = useMemo(() => {
     try {
       const episodes = downloadedFiles?.filter(
-        (f) => f.item.Type === "Episode"
+        (f) => f.item.Type === "Episode",
       );
       const series: { [key: string]: DownloadedItem[] } = {};
       episodes?.forEach((e) => {
@@ -73,14 +73,22 @@ export default function page() {
 
   const deleteMovies = () =>
     deleteFileByType("Movie")
-      .then(() => toast.success(t("home.downloads.toasts.deleted_all_movies_successfully")))
+      .then(() =>
+        toast.success(
+          t("home.downloads.toasts.deleted_all_movies_successfully"),
+        ),
+      )
       .catch((reason) => {
         writeToLog("ERROR", reason);
         toast.error(t("home.downloads.toasts.failed_to_delete_all_movies"));
       });
   const deleteShows = () =>
     deleteFileByType("Episode")
-      .then(() => toast.success(t("home.downloads.toasts.deleted_all_tvseries_successfully")))
+      .then(() =>
+        toast.success(
+          t("home.downloads.toasts.deleted_all_tvseries_successfully"),
+        ),
+      )
       .catch((reason) => {
         writeToLog("ERROR", reason);
         toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
@@ -97,26 +105,28 @@ export default function page() {
           paddingBottom: 100,
         }}
       >
-        <View className="py-4">
-          <View className="mb-4 flex flex-col space-y-4 px-4">
+        <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")}</Text>
-                <Text className="text-xs opacity-70 text-red-600">
+              <View className='bg-neutral-900 p-4 rounded-2xl'>
+                <Text className='text-lg font-bold'>
+                  {t("home.downloads.queue")}
+                </Text>
+                <Text className='text-xs opacity-70 text-red-600'>
                   {t("home.downloads.queue_hint")}
                 </Text>
-                <View className="flex flex-col space-y-2 mt-2">
+                <View className='flex flex-col space-y-2 mt-2'>
                   {queue.map((q, index) => (
                     <TouchableOpacity
                       onPress={() =>
                         router.push(`/(auth)/items/page?id=${q.item.Id}`)
                       }
-                      className="relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between"
+                      className='relative bg-neutral-900 border border-neutral-800 p-4 rounded-2xl overflow-hidden flex flex-row items-center justify-between'
                       key={index}
                     >
                       <View>
-                        <Text className="font-semibold">{q.item.Name}</Text>
-                        <Text className="text-xs opacity-50">
+                        <Text className='font-semibold'>{q.item.Name}</Text>
+                        <Text className='text-xs opacity-50'>
                           {q.item.Type}
                         </Text>
                       </View>
@@ -129,14 +139,16 @@ export default function page() {
                           });
                         }}
                       >
-                        <Ionicons name="close" size={24} color="red" />
+                        <Ionicons name='close' size={24} color='red' />
                       </TouchableOpacity>
                     </TouchableOpacity>
                   ))}
                 </View>
 
                 {queue.length === 0 && (
-                  <Text className="opacity-50">{t("home.downloads.no_items_in_queue")}</Text>
+                  <Text className='opacity-50'>
+                    {t("home.downloads.no_items_in_queue")}
+                  </Text>
                 )}
               </View>
             )}
@@ -145,17 +157,19 @@ export default function page() {
           </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 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">
+                <View className='px-4 flex flex-row'>
                   {movies?.map((item) => (
-                    <View className="mb-2 last:mb-0" key={item.item.Id}>
+                    <View className='mb-2 last:mb-0' key={item.item.Id}>
                       <MovieCard item={item.item} />
                     </View>
                   ))}
@@ -164,20 +178,22 @@ export default function page() {
             </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">
+            <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">
+                <View className='px-4 flex flex-row'>
                   {groupedBySeries?.map((items) => (
                     <View
-                      className="mb-2 last:mb-0"
+                      className='mb-2 last:mb-0'
                       key={items[0].item.SeriesId}
                     >
                       <SeriesCard
@@ -191,8 +207,10 @@ export default function page() {
             </View>
           )}
           {downloadedFiles?.length === 0 && (
-            <View className="flex px-4">
-              <Text className="opacity-50">{t("home.downloads.no_downloaded_items")}</Text>
+            <View className='flex px-4'>
+              <Text className='opacity-50'>
+                {t("home.downloads.no_downloaded_items")}
+              </Text>
             </View>
           )}
         </View>
@@ -215,14 +233,14 @@ export default function page() {
         )}
       >
         <BottomSheetView>
-          <View className="p-4 space-y-4 mb-4">
-            <Button color="purple" onPress={deleteMovies}>
+          <View className='p-4 space-y-4 mb-4'>
+            <Button color='purple' onPress={deleteMovies}>
               {t("home.downloads.delete_all_movies_button")}
             </Button>
-            <Button color="purple" onPress={deleteShows}>
+            <Button color='purple' onPress={deleteShows}>
               {t("home.downloads.delete_all_tvseries_button")}
             </Button>
-            <Button color="red" onPress={deleteAllMedia}>
+            <Button color='red' onPress={deleteAllMedia}>
               {t("home.downloads.delete_all_button")}
             </Button>
           </View>
@@ -248,6 +266,6 @@ function migration_20241124() {
         style: "destructive",
         onPress: async () => await deleteAllFiles(),
       },
-    ]
+    ],
   );
 }

app/(auth)/(tabs)/(home)/intro/page.tsx

@@ -15,26 +15,26 @@ export default function page() {
   useFocusEffect(
     useCallback(() => {
       storage.set("hasShownIntro", true);
-    }, [])
+    }, []),
   );
 
   return (
-    <View className="bg-neutral-900 h-full py-16 px-4 space-y-8">
+    <View className='bg-neutral-900 h-full py-16 px-4 space-y-8'>
       <View>
-        <Text className="text-3xl font-bold text-center mb-2">
+        <Text className='text-3xl font-bold text-center mb-2'>
           {t("home.intro.welcome_to_streamyfin")}
         </Text>
-        <Text className="text-center">
+        <Text className='text-center'>
           {t("home.intro.a_free_and_open_source_client_for_jellyfin")}
         </Text>
       </View>
 
       <View>
-        <Text className="text-lg font-bold">
+        <Text className='text-lg font-bold'>
           {t("home.intro.features_title")}
         </Text>
-        <Text className="text-xs">{t("home.intro.features_description")}</Text>
-        <View className="flex flex-row items-center mt-4">
+        <Text className='text-xs'>{t("home.intro.features_description")}</Text>
+        <View className='flex flex-row items-center mt-4'>
           <Image
             source={require("@/assets/icons/jellyseerr-logo.svg")}
             style={{
@@ -42,70 +42,70 @@ export default function page() {
               height: 50,
             }}
           />
-          <View className="shrink ml-2">
-            <Text className="font-bold mb-1">Jellyseerr</Text>
-            <Text className="shrink text-xs">
+          <View className='shrink ml-2'>
+            <Text className='font-bold mb-1'>Jellyseerr</Text>
+            <Text className='shrink text-xs'>
               {t("home.intro.jellyseerr_feature_description")}
             </Text>
           </View>
         </View>
-        <View className="flex flex-row items-center mt-4">
+        <View className='flex flex-row items-center mt-4'>
           <View
             style={{
               width: 50,
               height: 50,
             }}
-            className="flex items-center justify-center"
+            className='flex items-center justify-center'
           >
-            <Ionicons name="cloud-download-outline" size={32} color="white" />
+            <Ionicons name='cloud-download-outline' size={32} color='white' />
           </View>
-          <View className="shrink ml-2">
-            <Text className="font-bold mb-1">
+          <View className='shrink ml-2'>
+            <Text className='font-bold mb-1'>
               {t("home.intro.downloads_feature_title")}
             </Text>
-            <Text className="shrink text-xs">
+            <Text className='shrink text-xs'>
               {t("home.intro.downloads_feature_description")}
             </Text>
           </View>
         </View>
-        <View className="flex flex-row items-center mt-4">
+        <View className='flex flex-row items-center mt-4'>
           <View
             style={{
               width: 50,
               height: 50,
             }}
-            className="flex items-center justify-center"
+            className='flex items-center justify-center'
           >
-            <Feather name="cast" size={28} color={"white"} />
+            <Feather name='cast' size={28} color={"white"} />
           </View>
-          <View className="shrink ml-2">
-            <Text className="font-bold mb-1">Chromecast</Text>
-            <Text className="shrink text-xs">
+          <View className='shrink ml-2'>
+            <Text className='font-bold mb-1'>Chromecast</Text>
+            <Text className='shrink text-xs'>
               {t("home.intro.chromecast_feature_description")}
             </Text>
           </View>
         </View>
-        <View className="flex flex-row items-center mt-4">
+        <View className='flex flex-row items-center mt-4'>
           <View
             style={{
               width: 50,
               height: 50,
             }}
-            className="flex items-center justify-center"
+            className='flex items-center justify-center'
           >
-            <Feather name="settings" size={28} color={"white"} />
+            <Feather name='settings' size={28} color={"white"} />
           </View>
-          <View className="shrink ml-2">
-            <Text className="font-bold mb-1">
+          <View className='shrink ml-2'>
+            <Text className='font-bold mb-1'>
               {t("home.intro.centralised_settings_plugin_title")}
             </Text>
-            <Text className="shrink text-xs">
+            <Text className='shrink text-xs'>
               {t("home.intro.centralised_settings_plugin_description")}{" "}
               <Text
-                className="text-purple-600"
+                className='text-purple-600'
                 onPress={() => {
                   Linking.openURL(
-                    "https://github.com/streamyfin/jellyfin-plugin-streamyfin"
+                    "https://github.com/streamyfin/jellyfin-plugin-streamyfin",
                   );
                 }}
               >
@@ -120,7 +120,7 @@ export default function page() {
           onPress={() => {
             router.back();
           }}
-          className="mt-4"
+          className='mt-4'
         >
           {t("home.intro.done_button")}
         </Button>
@@ -129,9 +129,9 @@ export default function page() {
             router.back();
             router.push("/settings");
           }}
-          className="mt-4"
+          className='mt-4'
         >
-          <Text className="text-purple-600 text-center">
+          <Text className='text-purple-600 text-center'>
             {t("home.intro.go_to_settings_button")}
           </Text>
         </TouchableOpacity>

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

@@ -1,25 +1,35 @@
-import { Text } from "@/components/common/Text";
-import { useSessions, useSessionsProps } from "@/hooks/useSessions";
-import { FlashList } from "@shopify/flash-list";
-import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { Badge } from "@/components/Badge";
 import { Loader } from "@/components/Loader";
-import { SessionInfoDto } from "@jellyfin/sdk/lib/generated-client";
-import { useAtomValue } from "jotai";
-import { apiAtom } from "@/providers/JellyfinProvider";
+import { Text } from "@/components/common/Text";
 import Poster from "@/components/posters/Poster";
-import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { useInterval } from "@/hooks/useInterval";
-import React, { useEffect, useMemo, useState } from "react";
-import { formatTimeString } from "@/utils/time";
+import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
+import { apiAtom } from "@/providers/JellyfinProvider";
 import { formatBitrate } from "@/utils/bitrate";
+import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
+import { formatTimeString } from "@/utils/time";
 import {
-  Ionicons,
-  Entypo,
   AntDesign,
+  Entypo,
+  Ionicons,
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
-import { Badge } from "@/components/Badge";
+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";
 
 export default function page() {
   const { sessions, isLoading } = useSessions({} as useSessionsProps);
@@ -27,15 +37,15 @@ export default function page() {
 
   if (isLoading)
     return (
-      <View className="justify-center items-center h-full">
+      <View className='justify-center items-center h-full'>
         <Loader />
       </View>
     );
 
-  if (!sessions || sessions.length == 0)
+  if (!sessions || sessions.length === 0)
     return (
-      <View className="h-full w-full flex justify-center items-center">
-        <Text className="text-lg text-neutral-500">
+      <View className='h-full w-full flex justify-center items-center'>
+        <Text className='text-lg text-neutral-500'>
           {t("home.sessions.no_active_sessions")}
         </Text>
       </View>
@@ -43,7 +53,7 @@ export default function page() {
 
   return (
     <FlashList
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       contentContainerStyle={{
         paddingTop: 17,
         paddingHorizontal: 17,
@@ -77,7 +87,7 @@ const SessionCard = ({ session }: SessionCardProps) => {
 
     return Math.round(
       (100 / session.NowPlayingItem?.RunTimeTicks) *
-        (session.NowPlayingItem?.RunTimeTicks - remainingTicks)
+        (session.NowPlayingItem?.RunTimeTicks - remainingTicks),
     );
   };
 
@@ -95,26 +105,108 @@ const SessionCard = ({ session }: SessionCardProps) => {
     }
   }, [session]);
 
+  const { data: ipInfo } = useQuery({
+    queryKey: ["ipinfo", session.RemoteEndPoint],
+    cacheTime: Number.POSITIVE_INFINITY,
+    queryFn: async () => {
+      const resp = await api.axiosInstance.get(
+        `https://freeipapi.com/api/json/${session.RemoteEndPoint}`,
+      );
+      return resp.data;
+    },
+  });
+
+  // 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 (
-    <View className="flex flex-col shadow-md bg-neutral-900 rounded-2xl mb-4">
-      <View className="flex flex-row p-4">
-        <View className="w-20 pr-4">
+    <View className='flex flex-col shadow-md bg-neutral-900 rounded-2xl mb-4'>
+      <View className='flex flex-row p-4'>
+        <View className='w-20 pr-4'>
           <Poster
             id={session.NowPlayingItem?.Id}
             url={getPrimaryImageUrl({ api, item: session.NowPlayingItem })}
           />
         </View>
-        <View className="w-full flex-1">
-          <View className="flex flex-row justify-between">
-            <View className="flex-1 pr-4">
+        <View className='w-full flex-1'>
+          <View className='flex flex-row justify-between'>
+            <View className='flex-1 pr-4'>
               {session.NowPlayingItem?.Type === "Episode" ? (
                 <>
-                  <Text className="font-bold">
+                  <Text className='font-bold'>
                     {session.NowPlayingItem?.Name}
                   </Text>
-                  <Text numberOfLines={1} className="text-xs opacity-50">
+                  <Text numberOfLines={1} className='text-xs opacity-50'>
                     {`S${session.NowPlayingItem.ParentIndexNumber?.toString()}:E${session.NowPlayingItem.IndexNumber?.toString()}`}
                     {" - "}
                     {session.NowPlayingItem.SeriesName}
@@ -122,48 +214,151 @@ const SessionCard = ({ session }: SessionCardProps) => {
                 </>
               ) : (
                 <>
-                  <Text className="font-bold">
+                  <Text className='font-bold'>
                     {session.NowPlayingItem?.Name}
                   </Text>
-                  <Text className="text-xs opacity-50">
+                  <Text className='text-xs opacity-50'>
                     {session.NowPlayingItem?.ProductionYear}
                   </Text>
-                  <Text className="text-xs opacity-50">
+                  <Text className='text-xs opacity-50'>
                     {session.NowPlayingItem?.SeriesName}
                   </Text>
                 </>
               )}
             </View>
-            <Text className="text-xs opacity-50 align-right text-right">
+            <Text className='text-xs opacity-50 align-right text-right'>
               {session.UserName}
               {"\n"}
               {session.Client}
               {"\n"}
               {session.DeviceName}
+              {"\n"}
+              {ipInfo?.cityName} {ipInfo?.countryCode}
             </Text>
           </View>
-          <View className="flex-1" />
-          <View className="flex flex-col align-bottom">
-            <View className="flex flex-row justify-between align-bottom mb-1">
-              <Text className="-ml-0.5 text-xs opacity-50 align-left text-left">
+          <View className='flex-1' />
+          <View className='flex flex-col align-bottom'>
+            <View className='flex flex-row justify-between align-bottom mb-1'>
+              <Text className='-ml-0.5 text-xs opacity-50 align-left text-left'>
                 {!session.PlayState?.IsPaused ? (
-                  <Ionicons name="play" size={14} color="white" />
+                  <Ionicons name='play' size={14} color='white' />
                 ) : (
-                  <Ionicons name="pause" size={14} color="white" />
+                  <Ionicons name='pause' size={14} color='white' />
                 )}
               </Text>
-              <Text className="text-xs opacity-50 align-right text-right">
+              <Text className='text-xs opacity-50 align-right text-right'>
                 {formatTimeString(remainingTicks, "tick")} left
               </Text>
             </View>
-            <View className="align-bottom bg-gray-800 h-1">
+            <View className='align-bottom bg-gray-800 h-1'>
               <View
-                className={`bg-purple-600 h-full`}
+                className={"bg-purple-600 h-full"}
                 style={{
                   width: `${getProgressPercentage()}%`,
                 }}
               />
             </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>
@@ -178,20 +373,21 @@ interface TranscodingBadgesProps {
 
 const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
   const iconMap = {
-    bitrate: <Ionicons name="speedometer-outline" size={12} color="white" />,
-    codec: <Ionicons name="layers-outline" size={12} color="white" />,
+    bitrate: <Ionicons name='speedometer-outline' size={12} color='white' />,
+    codec: <Ionicons name='layers-outline' size={12} color='white' />,
     videoRange: (
-      <Ionicons name="color-palette-outline" size={12} color="white" />
+      <Ionicons name='color-palette-outline' size={12} color='white' />
     ),
-    resolution: <Ionicons name="film-outline" size={12} color="white" />,
-    language: <Ionicons name="language-outline" size={12} color="white" />,
-    audioChannels: <Ionicons name="mic-outline" size={12} color="white" />,
+    resolution: <Ionicons name='film-outline' size={12} color='white' />,
+    language: <Ionicons name='language-outline' size={12} color='white' />,
+    audioChannels: <Ionicons name='mic-outline' size={12} color='white' />,
+    hwType: <Ionicons name='hardware-chip-outline' size={12} color='white' />,
   } as const;
 
   const icon = (val: string) => {
     return (
       iconMap[val as keyof typeof iconMap] ?? (
-        <Ionicons name="layers-outline" size={12} color="white" />
+        <Ionicons name='layers-outline' size={12} color='white' />
       )
     );
   };
@@ -200,6 +396,8 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
     switch (key) {
       case "bitrate":
         return formatBitrate(val);
+      case "hwType":
+        return val === HardwareAccelerationType.None ? "sw" : "hw";
       default:
         return val;
     }
@@ -210,8 +408,8 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
     .map(([key]) => (
       <Badge
         key={key}
-        variant="gray"
-        className="m-0 p-0 pt-0.5 mr-1"
+        variant='gray'
+        className='m-0 p-0 pt-0.5 mr-1'
         text={formatVal(key, properties[key as keyof StreamProps])}
         iconLeft={icon(key)}
       />
@@ -219,6 +417,7 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => {
 };
 
 interface StreamProps {
+  hwType?: HardwareAccelerationType | null | undefined;
   resolution?: string | null | undefined;
   language?: string | null | undefined;
   codec?: string | null | undefined;
@@ -230,7 +429,7 @@ interface StreamProps {
 interface TranscodingStreamViewProps {
   title: string | undefined;
   value?: string;
-  isTranscoding: Boolean;
+  isTranscoding: boolean;
   transcodeValue?: string | undefined | null;
   properties: StreamProps;
   transcodeProperties?: StreamProps;
@@ -245,26 +444,26 @@ const TranscodingStreamView = ({
   transcodeValue,
 }: TranscodingStreamViewProps) => {
   return (
-    <View className="flex flex-col pt-2 first:pt-0">
-      <View className="flex flex-row">
-        <Text className="text-xs opacity-50 w-20 font-bold text-right pr-4">
+    <View className='flex flex-col pt-2 first:pt-0'>
+      <View className='flex flex-row'>
+        <Text className='text-xs opacity-50 w-20 font-bold text-right pr-4'>
           {title}
         </Text>
-        <Text className="flex-1">
+        <Text className='flex-1'>
           <TranscodingBadges properties={properties} />
         </Text>
       </View>
       {isTranscoding && transcodeProperties ? (
         <>
-          <View className="flex flex-row">
-            <Text className="-mt-0 text-xs opacity-50 w-20 font-bold text-right pr-4">
+          <View className='flex flex-row'>
+            <Text className='-mt-0 text-xs opacity-50 w-20 font-bold text-right pr-4'>
               <MaterialCommunityIcons
-                name="arrow-right-bottom"
+                name='arrow-right-bottom'
                 size={14}
-                color="white"
+                color='white'
               />
             </Text>
-            <Text className="flex-1 text-sm mt-1">
+            <Text className='flex-1 text-sm mt-1'>
               <TranscodingBadges properties={transcodeProperties} />
             </Text>
           </View>
@@ -277,7 +476,7 @@ const TranscodingStreamView = ({
 const TranscodingView = ({ session }: SessionCardProps) => {
   const videoStream = useMemo(() => {
     return session.NowPlayingItem?.MediaStreams?.filter(
-      (s) => s.Type == "Video"
+      (s) => s.Type === "Video",
     )[0];
   }, [session]);
 
@@ -296,35 +495,36 @@ const TranscodingView = ({ session }: SessionCardProps) => {
   }, [session.PlayState?.SubtitleStreamIndex]);
 
   const isTranscoding = useMemo(() => {
-    return session.PlayState?.PlayMethod == "Transcode";
-  }, [session.PlayState?.PlayMethod]);
+    return (
+      session.PlayState?.PlayMethod === "Transcode" && session.TranscodingInfo
+    );
+  }, [session.PlayState?.PlayMethod, session.TranscodingInfo]);
 
   const videoStreamTitle = () => {
     return videoStream?.DisplayTitle?.split(" ")[0];
   };
 
   return (
-    <View className="flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2">
+    <View className='flex flex-col bg-neutral-800 rounded-b-2xl p-4 pt-2'>
       <TranscodingStreamView
-        title="Video"
+        title='Video'
         properties={{
           resolution: videoStreamTitle(),
           bitrate: videoStream?.BitRate,
           codec: videoStream?.Codec,
         }}
         transcodeProperties={{
+          hwType: session.TranscodingInfo?.HardwareAccelerationType,
           bitrate: session.TranscodingInfo?.Bitrate,
           codec: session.TranscodingInfo?.VideoCodec,
         }}
         isTranscoding={
-          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
-            ? true
-            : false
+          !!(isTranscoding && !session.TranscodingInfo?.IsVideoDirect)
         }
       />
 
       <TranscodingStreamView
-        title="Audio"
+        title='Audio'
         properties={{
           language: audioStream?.Language,
           bitrate: audioStream?.BitRate,
@@ -332,29 +532,24 @@ const TranscodingView = ({ session }: SessionCardProps) => {
           audioChannels: audioStream?.ChannelLayout,
         }}
         transcodeProperties={{
-          bitrate: session.TranscodingInfo?.Bitrate,
           codec: session.TranscodingInfo?.AudioCodec,
           audioChannels: session.TranscodingInfo?.AudioChannels?.toString(),
         }}
         isTranscoding={
-          isTranscoding && !session.TranscodingInfo?.IsVideoDirect
-            ? true
-            : false
+          !!(isTranscoding && !session.TranscodingInfo?.IsVideoDirect)
         }
       />
 
       {subtitleStream && (
-        <>
-          <TranscodingStreamView
-            title="Subtitle"
-            isTranscoding={false}
-            properties={{
-              language: subtitleStream?.Language,
-              codec: subtitleStream?.Codec,
-            }}
-            transcodeValue={null}
-          />
-        </>
+        <TranscodingStreamView
+          title='Subtitle'
+          isTranscoding={false}
+          properties={{
+            language: subtitleStream?.Language,
+            codec: subtitleStream?.Codec,
+          }}
+          transcodeValue={null}
+        />
       )}
     </View>
   );

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

@@ -3,6 +3,7 @@ import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
 import { AppLanguageSelector } from "@/components/settings/AppLanguageSelector";
 import { AudioToggles } from "@/components/settings/AudioToggles";
+import { ChromecastSettings } from "@/components/settings/ChromecastSettings";
 import DownloadSettings from "@/components/settings/DownloadSettings";
 import { MediaProvider } from "@/components/settings/MediaContext";
 import { MediaToggles } from "@/components/settings/MediaToggles";
@@ -14,16 +15,15 @@ import { SubtitleToggles } from "@/components/settings/SubtitleToggles";
 import { UserInfo } from "@/components/settings/UserInfo";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useJellyfin } from "@/providers/JellyfinProvider";
+import { userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs } from "@/utils/log";
 import { storage } from "@/utils/mmkv";
 import { useNavigation, useRouter } from "expo-router";
 import { t } from "i18next";
+import { useAtom } from "jotai";
 import React, { useEffect } from "react";
 import { ScrollView, Switch, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAtom } from "jotai";
-import { userAtom } from "@/providers/JellyfinProvider";
-import { ChromecastSettings } from "@/components/settings/ChromecastSettings";
 
 export default function settings() {
   const router = useRouter();
@@ -46,7 +46,7 @@ export default function settings() {
             logout();
           }}
         >
-          <Text className="text-red-600">
+          <Text className='text-red-600'>
             {t("home.settings.log_out_button")}
           </Text>
         </TouchableOpacity>
@@ -61,15 +61,15 @@ export default function settings() {
         paddingRight: insets.right,
       }}
     >
-      <View className="p-4 flex flex-col gap-y-4">
+      <View className='p-4 flex flex-col gap-y-4'>
         <UserInfo />
 
-        <QuickConnect className="mb-4" />
+        <QuickConnect className='mb-4' />
 
         <MediaProvider>
-          <MediaToggles className="mb-4" />
-          <AudioToggles className="mb-4" />
-          <SubtitleToggles className="mb-4" />
+          <MediaToggles className='mb-4' />
+          <AudioToggles className='mb-4' />
+          <SubtitleToggles className='mb-4' />
         </MediaProvider>
 
         <OtherSettings />
@@ -90,7 +90,7 @@ export default function settings() {
             title={t("home.settings.intro.show_intro")}
           />
           <ListItem
-            textColor="red"
+            textColor='red'
             onPress={() => {
               storage.set("hasShownIntro", false);
             }}
@@ -98,7 +98,7 @@ export default function settings() {
           />
         </ListGroup>
 
-        <View className="mb-4">
+        <View className='mb-4'>
           <ListGroup title={t("home.settings.logs.logs_title")}>
             <ListItem
               onPress={() => router.push("/settings/logs/page")}
@@ -106,7 +106,7 @@ export default function settings() {
               title={t("home.settings.logs.logs_title")}
             />
             <ListItem
-              textColor="red"
+              textColor='red'
               onPress={onClearLogsClicked}
               title={t("home.settings.logs.delete_all_logs")}
             />

app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx

@@ -1,15 +1,15 @@
+import { Loader } from "@/components/Loader";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
-import { Loader } from "@/components/Loader";
+import DisabledSetting from "@/components/settings/DisabledSetting";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
 import { Switch, View } from "react-native";
-import { useTranslation } from "react-i18next"; 
-import DisabledSetting from "@/components/settings/DisabledSetting";
 
 export default function page() {
   const [settings, updateSettings, pluginSettings] = useSettings();
@@ -18,7 +18,7 @@ export default function page() {
 
   const { t } = useTranslation();
 
-  const { data, isLoading: isLoading } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ["user-views", user?.Id],
     queryFn: async () => {
       const response = await getUserViewsApi(api!).getUserViews({
@@ -33,7 +33,7 @@ export default function page() {
 
   if (isLoading)
     return (
-      <View className="mt-4">
+      <View className='mt-4'>
         <Loader />
       </View>
     );
@@ -41,7 +41,7 @@ export default function page() {
   return (
     <DisabledSetting
       disabled={pluginSettings?.hiddenLibraries?.locked === true}
-      className="px-4"
+      className='px-4'
     >
       <ListGroup>
         {data?.map((view) => (
@@ -59,8 +59,8 @@ export default function page() {
           </ListItem>
         ))}
       </ListGroup>
-      <Text className="px-4 text-xs text-neutral-500 mt-1">
-      {t("home.settings.other.select_liraries_you_want_to_hide")}
+      <Text className='px-4 text-xs text-neutral-500 mt-1'>
+        {t("home.settings.other.select_liraries_you_want_to_hide")}
       </Text>
     </DisabledSetting>
   );

app/(auth)/(tabs)/(home)/settings/jellyseerr/page.tsx

@@ -1,6 +1,6 @@
+import DisabledSetting from "@/components/settings/DisabledSetting";
 import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
 import { useSettings } from "@/utils/atoms/settings";
-import DisabledSetting from "@/components/settings/DisabledSetting";
 
 export default function page() {
   const [settings, updateSettings, pluginSettings] = useSettings();
@@ -8,7 +8,7 @@ export default function page() {
   return (
     <DisabledSetting
       disabled={pluginSettings?.jellyseerrServerUrl?.locked === true}
-      className="p-4"
+      className='p-4'
     >
       <JellyseerrSettings />
     </DisabledSetting>

app/(auth)/(tabs)/(home)/settings/logs/page.tsx

@@ -1,35 +1,157 @@
+import { Loader } from "@/components/Loader";
 import { Text } from "@/components/common/Text";
-import { useLog } from "@/utils/log";
-import { ScrollView, View } from "react-native";
+import { FilterButton } from "@/components/filters/FilterButton";
+import { LogLevel, useLog, writeErrorLog } from "@/utils/log";
+import * as FileSystem from "expo-file-system";
+import { useNavigation } from "expo-router";
+import * as Sharing from "expo-sharing";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ScrollView, TouchableOpacity, View } from "react-native";
+import Collapsible from "react-native-collapsible";
 
 export default function page() {
+  const navigation = useNavigation();
   const { logs } = useLog();
   const { t } = useTranslation();
 
+  const defaultLevels: LogLevel[] = ["INFO", "ERROR", "DEBUG", "WARN"];
+  const codeBlockStyle = {
+    backgroundColor: "#000",
+    padding: 10,
+    fontFamily: "monospace",
+    maxHeight: 300,
+  };
+
+  const [loading, setLoading] = useState<boolean>(false);
+  const [state, setState] = useState<Record<string, boolean>>({});
+
+  const [order, setOrder] = useState<"asc" | "desc">("desc");
+  const [levels, setLevels] = useState<LogLevel[]>(defaultLevels);
+
+  const filteredLogs = useMemo(
+    () =>
+      logs
+        ?.filter((log) => levels.includes(log.level))
+        ?.[
+          // Already in asc order as they are recorded. just reverse for desc
+          order === "desc" ? "reverse" : "concat"
+        ]?.(),
+    [logs, order, levels],
+  );
+
+  // Sharing it as txt while its formatted allows us to share it with many more applications
+  const share = useCallback(async () => {
+    const uri = `${FileSystem.documentDirectory}logs.txt`;
+
+    setLoading(true);
+    FileSystem.writeAsStringAsync(uri, JSON.stringify(filteredLogs))
+      .then(() => {
+        setLoading(false);
+        Sharing.shareAsync(uri, { mimeType: "txt", UTI: "txt" });
+      })
+      .catch((e) =>
+        writeErrorLog("Something went wrong attempting to export", e),
+      )
+      .finally(() => setLoading(false));
+  }, [filteredLogs]);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () =>
+        loading ? (
+          <Loader />
+        ) : (
+          <TouchableOpacity onPress={share}>
+            <Text>{t("home.settings.logs.export_logs")}</Text>
+          </TouchableOpacity>
+        ),
+    });
+  }, [share, loading]);
+
   return (
-    <ScrollView className="p-4">
-      <View className="flex flex-col space-y-2">
-        {logs?.map((log, index) => (
-          <View key={index} className="bg-neutral-900 rounded-xl p-3">
-            <Text
-              className={`
-                  mb-1
-              ${log.level === "INFO" && "text-blue-500"}
-              ${log.level === "ERROR" && "text-red-500"}
-                `}
-            >
-              {log.level}
-            </Text>
-            <Text uiTextView selectable className="text-xs">
-              {log.message}
-            </Text>
-          </View>
-        ))}
-        {logs?.length === 0 && (
-          <Text className="opacity-50">{t("home.settings.logs.no_logs_available")}</Text>
-        )}
+    <>
+      <View className='flex flex-row justify-end py-2 px-4 space-x-2'>
+        <FilterButton
+          id='order'
+          queryKey='log'
+          queryFn={async () => ["asc", "desc"]}
+          set={(values) => setOrder(values[0])}
+          values={[order]}
+          title={t("library.filters.sort_order")}
+          renderItemLabel={(order) => t(`library.filters.${order}`)}
+          showSearch={false}
+        />
+        <FilterButton
+          id='levels'
+          queryKey='log'
+          queryFn={async () => defaultLevels}
+          set={setLevels}
+          values={levels}
+          title={t("home.settings.logs.level")}
+          renderItemLabel={(level) => level}
+          showSearch={false}
+          multiple={true}
+        />
       </View>
-    </ScrollView>
+      <ScrollView className='pb-4 px-4'>
+        <View className='flex flex-col space-y-2'>
+          {filteredLogs?.map((log, index) => (
+            <View className='bg-neutral-900 rounded-xl p-3' key={index}>
+              <TouchableOpacity
+                disabled={!log.data}
+                onPress={() =>
+                  setState((v) => ({
+                    ...v,
+                    [log.timestamp]: !v[log.timestamp],
+                  }))
+                }
+              >
+                <View className='flex flex-row justify-between'>
+                  <Text
+                    className={`mb-1
+                      ${log.level === "INFO" && "text-blue-500"}
+                      ${log.level === "ERROR" && "text-red-500"}
+                      ${log.level === "DEBUG" && "text-purple-500"}
+                    `}
+                  >
+                    {log.level}
+                  </Text>
+
+                  <Text className='text-xs'>
+                    {new Date(log.timestamp).toLocaleString()}
+                  </Text>
+                </View>
+                <Text uiTextView selectable className='text-xs'>
+                  {log.message}
+                </Text>
+              </TouchableOpacity>
+
+              {log.data && (
+                <>
+                  {!state[log.timestamp] && (
+                    <Text className='text-xs mt-0.5'>
+                      {t("home.settings.logs.click_for_more_info")}
+                    </Text>
+                  )}
+                  <Collapsible collapsed={!state[log.timestamp]}>
+                    <View className='mt-2 flex flex-col space-y-2'>
+                      <ScrollView className='rounded-xl' style={codeBlockStyle}>
+                        <Text>{JSON.stringify(log.data, null, 2)}</Text>
+                      </ScrollView>
+                    </View>
+                  </Collapsible>
+                </>
+              )}
+            </View>
+          ))}
+          {filteredLogs?.length === 0 && (
+            <Text className='opacity-50'>
+              {t("home.settings.logs.no_logs_available")}
+            </Text>
+          )}
+        </View>
+      </ScrollView>
+    </>
   );
 }

app/(auth)/(tabs)/(home)/settings/marlin-search/page.tsx

@@ -6,7 +6,8 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useNavigation } from "expo-router";
 import { useTranslation } from "react-i18next";
 
-import React, {useEffect, useMemo, useState} from "react";
+import DisabledSetting from "@/components/settings/DisabledSetting";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   Linking,
   Switch,
@@ -15,7 +16,6 @@ import {
   View,
 } from "react-native";
 import { toast } from "sonner-native";
-import DisabledSetting from "@/components/settings/DisabledSetting";
 
 export default function page() {
   const navigation = useNavigation();
@@ -39,7 +39,10 @@ export default function page() {
   };
 
   const disabled = useMemo(() => {
-    return pluginSettings?.searchEngine?.locked === true && pluginSettings?.marlinServerUrl?.locked === true
+    return (
+      pluginSettings?.searchEngine?.locked === true &&
+      pluginSettings?.marlinServerUrl?.locked === true
+    );
   }, [pluginSettings]);
 
   useEffect(() => {
@@ -47,7 +50,9 @@ export default function page() {
       navigation.setOptions({
         headerRight: () => (
           <TouchableOpacity onPress={() => onSave(value)}>
-            <Text className="text-blue-500">{t("home.settings.plugins.marlin_search.save_button")}</Text>
+            <Text className='text-blue-500'>
+              {t("home.settings.plugins.marlin_search.save_button")}
+            </Text>
           </TouchableOpacity>
         ),
       });
@@ -57,17 +62,16 @@ export default function page() {
   if (!settings) return null;
 
   return (
-    <DisabledSetting
-      disabled={disabled}
-      className="px-4"
-    >
+    <DisabledSetting disabled={disabled} className='px-4'>
       <ListGroup>
         <DisabledSetting
           disabled={pluginSettings?.searchEngine?.locked === true}
           showText={!pluginSettings?.marlinServerUrl?.locked}
         >
           <ListItem
-            title={t("home.settings.plugins.marlin_search.enable_marlin_search")}
+            title={t(
+              "home.settings.plugins.marlin_search.enable_marlin_search",
+            )}
             onPress={() => {
               updateSettings({ searchEngine: "Jellyfin" });
               queryClient.invalidateQueries({ queryKey: ["search"] });
@@ -87,28 +91,30 @@ export default function page() {
       <DisabledSetting
         disabled={pluginSettings?.marlinServerUrl?.locked === true}
         showText={!pluginSettings?.searchEngine?.locked}
-        className="mt-2 flex flex-col rounded-xl overflow-hidden pl-4 bg-neutral-900 px-4"
+        className='mt-2 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.plugins.marlin_search.url")}</Text>
+        <View className={"flex flex-row items-center bg-neutral-900 h-11 pr-4"}>
+          <Text className='mr-4'>
+            {t("home.settings.plugins.marlin_search.url")}
+          </Text>
           <TextInput
             editable={settings.searchEngine === "Marlin"}
-            className="text-white"
-            placeholder={t("home.settings.plugins.marlin_search.server_url_placeholder")}
+            className='text-white'
+            placeholder={t(
+              "home.settings.plugins.marlin_search.server_url_placeholder",
+            )}
             value={value}
-            keyboardType="url"
-            returnKeyType="done"
-            autoCapitalize="none"
-            textContentType="URL"
+            keyboardType='url'
+            returnKeyType='done'
+            autoCapitalize='none'
+            textContentType='URL'
             onChangeText={(text) => setValue(text)}
           />
         </View>
       </DisabledSetting>
-      <Text className="px-4 text-xs text-neutral-500 mt-1">
+      <Text className='px-4 text-xs text-neutral-500 mt-1'>
         {t("home.settings.plugins.marlin_search.marlin_search_hint")}{" "}
-        <Text className="text-blue-500" onPress={handleOpenLink}>
+        <Text className='text-blue-500' onPress={handleOpenLink}>
           {t("home.settings.plugins.marlin_search.read_more_about_marlin")}
         </Text>
       </Text>

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

@@ -1,4 +1,5 @@
 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";
@@ -8,10 +9,9 @@ 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";
-import { useTranslation } from "react-i18next";
-import DisabledSetting from "@/components/settings/DisabledSetting";
 
 export default function page() {
   const navigation = useNavigation();
@@ -31,14 +31,14 @@ export default function page() {
         return;
       }
 
-      const updatedUrl = newVal.endsWith("/") ? newVal : newVal + "/";
+      const updatedUrl = newVal.endsWith("/") ? newVal : `${newVal}/`;
 
       updateSettings({
         optimizedVersionsServerUrl: updatedUrl,
       });
 
       return await getStatistics({
-        url: settings?.optimizedVersionsServerUrl,
+        url: updatedUrl,
         authHeader: api?.accessToken,
         deviceId: getOrSetDeviceId(),
       });
@@ -67,8 +67,12 @@ export default function page() {
           saveMutation.isPending ? (
             <ActivityIndicator size={"small"} color={"white"} />
           ) : (
-            <TouchableOpacity onPress={() => onSave(optimizedVersionsServerUrl)}>
-              <Text className="text-blue-500">{t("home.settings.downloads.save_button")}</Text>
+            <TouchableOpacity
+              onPress={() => onSave(optimizedVersionsServerUrl)}
+            >
+              <Text className='text-blue-500'>
+                {t("home.settings.downloads.save_button")}
+              </Text>
             </TouchableOpacity>
           ),
       });
@@ -78,7 +82,7 @@ export default function page() {
   return (
     <DisabledSetting
       disabled={pluginSettings?.optimizedVersionsServerUrl?.locked === true}
-      className="p-4"
+      className='p-4'
     >
       <OptimizedServerForm
         value={optimizedVersionsServerUrl}

app/(auth)/(tabs)/(home,libraries,search,favorites)/actors/[actorId].tsx

@@ -10,15 +10,15 @@ import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { BaseItemDtoQueryResult } from "@jellyfin/sdk/lib/generated-client/models";
+import type { BaseItemDtoQueryResult } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
-import { View } from "react-native";
 import { useTranslation } from "react-i18next";
+import { View } from "react-native";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
@@ -68,7 +68,7 @@ const page: React.FC = () => {
 
       return response.data;
     },
-    [api, user?.Id, actorId]
+    [api, user?.Id, actorId],
   );
 
   const backdropUrl = useMemo(
@@ -79,12 +79,12 @@ const page: React.FC = () => {
         quality: 90,
         width: 1000,
       }),
-    [item]
+    [item],
   );
 
   if (l1)
     return (
-      <View className="justify-center items-center h-full">
+      <View className='justify-center items-center h-full'>
         <Loader />
       </View>
     );
@@ -105,13 +105,13 @@ const page: React.FC = () => {
         />
       }
     >
-      <View className="flex flex-col space-y-4 my-4">
-        <View className="px-4 mb-4">
-          <MoviesTitleHeader item={item} className="mb-4" />
+      <View className='flex flex-col space-y-4 my-4'>
+        <View className='px-4 mb-4'>
+          <MoviesTitleHeader item={item} className='mb-4' />
           <OverviewText text={item.Overview} />
         </View>
 
-        <Text className="px-4 text-2xl font-bold mb-2 text-neutral-100">
+        <Text className='px-4 text-2xl font-bold mb-2 text-neutral-100'>
           {t("item_card.appeared_in")}
         </Text>
         <InfiniteHorizontalScroll
@@ -133,7 +133,7 @@ const page: React.FC = () => {
           queryFn={fetchItems}
           queryKey={["actor", "movies", actorId]}
         />
-        <View className="h-12"></View>
+        <View className='h-12' />
       </View>
     </ParallaxScrollView>
   );

app/(auth)/(tabs)/(home,libraries,search,favorites)/collections/[collectionId].tsx

@@ -1,22 +1,23 @@
+import { ItemCardText } from "@/components/ItemCardText";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
-import { ItemCardText } from "@/components/ItemCardText";
 import { ItemPoster } from "@/components/posters/ItemPoster";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
+  SortByOption,
+  SortOrderOption,
   genreFilterAtom,
   sortByAtom,
-  SortByOption,
   sortOptions,
   sortOrderAtom,
-  SortOrderOption,
   sortOrderOptions,
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
-import {
+import type {
   BaseItemDto,
   BaseItemDtoQueryResult,
   ItemSortBy,
@@ -29,11 +30,11 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { FlatList, View } from "react-native";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { FlatList, View } from "react-native";
 
 const page: React.FC = () => {
   const searchParams = useLocalSearchParams();
@@ -43,7 +44,7 @@ const page: React.FC = () => {
   const [user] = useAtom(userAtom);
   const navigation = useNavigation();
   const [orientation, setOrientation] = useState(
-    ScreenOrientation.Orientation.PORTRAIT_UP
+    ScreenOrientation.Orientation.PORTRAIT_UP,
   );
 
   const { t } = useTranslation();
@@ -111,7 +112,7 @@ const page: React.FC = () => {
         recursive: true,
         genres: selectedGenres,
         tags: selectedTags,
-        years: selectedYears.map((year) => parseInt(year)),
+        years: selectedYears.map((year) => Number.parseInt(year)),
         includeItemTypes: ["Movie", "Series"],
       });
 
@@ -126,7 +127,7 @@ const page: React.FC = () => {
       selectedTags,
       sortBy,
       sortOrder,
-    ]
+    ],
   );
 
   const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
@@ -151,14 +152,13 @@ const page: React.FC = () => {
       const totalItems = lastPage.TotalRecordCount;
       const accumulatedItems = pages.reduce(
         (acc, curr) => acc + (curr?.Items?.length || 0),
-        0
+        0,
       );
 
       if (accumulatedItems < totalItems) {
         return lastPage?.Items?.length * pages.length;
-      } else {
-        return undefined;
       }
+      return undefined;
     },
     initialPageParam: 0,
     enabled: !!api && !!user?.Id && !!collection,
@@ -188,8 +188,8 @@ const page: React.FC = () => {
               index % 3 === 0
                 ? "flex-end"
                 : (index + 1) % 3 === 0
-                ? "flex-start"
-                : "center",
+                  ? "flex-start"
+                  : "center",
             width: "89%",
           }}
         >
@@ -199,14 +199,14 @@ const page: React.FC = () => {
         </View>
       </TouchableItemRouter>
     ),
-    [orientation]
+    [orientation],
   );
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
 
   const ListHeaderComponent = useCallback(
     () => (
-      <View className="">
+      <View className=''>
         <FlatList
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -232,13 +232,13 @@ const page: React.FC = () => {
               key: "genre",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={collectionId}
-                  queryKey="genreFilter"
+                  className='mr-1'
+                  id={collectionId}
+                  queryKey='genreFilter'
                   queryFn={async () => {
                     if (!api) return null;
                     const response = await getFilterApi(
-                      api
+                      api,
                     ).getQueryFiltersLegacy({
                       userId: user?.Id,
                       parentId: collectionId,
@@ -259,13 +259,13 @@ const page: React.FC = () => {
               key: "year",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={collectionId}
-                  queryKey="yearFilter"
+                  className='mr-1'
+                  id={collectionId}
+                  queryKey='yearFilter'
                   queryFn={async () => {
                     if (!api) return null;
                     const response = await getFilterApi(
-                      api
+                      api,
                     ).getQueryFiltersLegacy({
                       userId: user?.Id,
                       parentId: collectionId,
@@ -284,13 +284,13 @@ const page: React.FC = () => {
               key: "tags",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={collectionId}
-                  queryKey="tagsFilter"
+                  className='mr-1'
+                  id={collectionId}
+                  queryKey='tagsFilter'
                   queryFn={async () => {
                     if (!api) return null;
                     const response = await getFilterApi(
-                      api
+                      api,
                     ).getQueryFiltersLegacy({
                       userId: user?.Id,
                       parentId: collectionId,
@@ -311,9 +311,9 @@ const page: React.FC = () => {
               key: "sortBy",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={collectionId}
-                  queryKey="sortBy"
+                  className='mr-1'
+                  id={collectionId}
+                  queryKey='sortBy'
                   queryFn={async () => sortOptions.map((s) => s.key)}
                   set={setSortBy}
                   values={sortBy}
@@ -331,9 +331,9 @@ const page: React.FC = () => {
               key: "sortOrder",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={collectionId}
-                  queryKey="sortOrder"
+                  className='mr-1'
+                  id={collectionId}
+                  queryKey='sortOrder'
                   queryFn={async () => sortOrderOptions.map((s) => s.key)}
                   set={setSortOrder}
                   values={sortOrder}
@@ -368,7 +368,7 @@ const page: React.FC = () => {
       sortOrder,
       setSortOrder,
       isFetching,
-    ]
+    ],
   );
 
   if (!collection) return null;
@@ -376,8 +376,10 @@ const page: React.FC = () => {
   return (
     <FlashList
       ListEmptyComponent={
-        <View className="flex flex-col items-center justify-center h-full">
-          <Text className="font-bold text-xl text-neutral-500">{t("search.no_results")}</Text>
+        <View className='flex flex-col items-center justify-center h-full'>
+          <Text className='font-bold text-xl text-neutral-500'>
+            {t("search.no_results")}
+          </Text>
         </View>
       }
       extraData={[
@@ -387,7 +389,7 @@ const page: React.FC = () => {
         sortBy,
         sortOrder,
       ]}
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       data={flatData}
       renderItem={renderItem}
       keyExtractor={keyExtractor}
@@ -409,7 +411,7 @@ const page: React.FC = () => {
             width: 10,
             height: 10,
           }}
-        ></View>
+        />
       )}
     />
   );

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

@@ -1,11 +1,13 @@
-import { Text } from "@/components/common/Text";
 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 React, { useEffect } from "react";
+import type React from "react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import Animated, {
   runOnJS,
@@ -13,7 +15,6 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { useTranslation } from "react-i18next";
 
 const Page: React.FC = () => {
   const [api] = useAtom(apiAtom);
@@ -75,36 +76,36 @@ const Page: React.FC = () => {
 
   if (isError)
     return (
-      <View className="flex flex-col items-center justify-center h-screen w-screen">
+      <View className='flex flex-col items-center justify-center h-screen w-screen'>
         <Text>{t("item_card.could_not_load_item")}</Text>
       </View>
     );
 
   return (
-    <View className="flex flex-1 relative">
+    <View className='flex flex-1 relative'>
       <Animated.View
         pointerEvents={"none"}
         style={[animatedStyle]}
-        className="absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black"
+        className='absolute top-0 left-0 flex flex-col items-start h-screen w-screen px-4 z-50 bg-black'
       >
         <View
           style={{
             height: item?.Type === "Episode" ? 300 : 450,
           }}
-          className="bg-transparent rounded-lg mb-4 w-full"
-        ></View>
-        <View className="h-6 bg-neutral-900 rounded mb-4 w-14"></View>
-        <View className="h-10 bg-neutral-900 rounded-lg mb-2 w-1/2"></View>
-        <View className="h-3 bg-neutral-900 rounded mb-3 w-8"></View>
-        <View className="flex flex-row space-x-1 mb-8">
-          <View className="h-6 bg-neutral-900 rounded mb-3 w-14"></View>
-          <View className="h-6 bg-neutral-900 rounded mb-3 w-14"></View>
-          <View className="h-6 bg-neutral-900 rounded mb-3 w-14"></View>
+          className='bg-transparent rounded-lg mb-4 w-full'
+        />
+        <View className='h-6 bg-neutral-900 rounded mb-4 w-14' />
+        <View className='h-10 bg-neutral-900 rounded-lg mb-2 w-1/2' />
+        <View className='h-3 bg-neutral-900 rounded mb-3 w-8' />
+        <View className='flex flex-row space-x-1 mb-8'>
+          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
+          <View className='h-6 bg-neutral-900 rounded mb-3 w-14' />
         </View>
-        <View className="h-3 bg-neutral-900 rounded w-2/3 mb-1"></View>
-        <View className="h-10 bg-neutral-900 rounded-lg w-full mb-2"></View>
-        <View className="h-12 bg-neutral-900 rounded-lg w-full mb-2"></View>
-        <View className="h-24 bg-neutral-900 rounded-lg mb-1 w-full"></View>
+        <View className='h-3 bg-neutral-900 rounded w-2/3 mb-1' />
+        <View className='h-10 bg-neutral-900 rounded-lg w-full mb-2' />
+        <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} />}
     </View>

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/company/[companyId].tsx

@@ -1,45 +1,45 @@
-import {router, useLocalSearchParams, useSegments,} from "expo-router";
-import React, {useMemo,} from "react";
-import {TouchableOpacity} from "react-native";
-import {useInfiniteQuery} from "@tanstack/react-query";
-import {Endpoints, useJellyseerr} from "@/hooks/useJellyseerr";
-import {Text} from "@/components/common/Text";
-import {Image} from "expo-image";
-import Poster from "@/components/posters/Poster";
-import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
-import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
 import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
-import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {COMPANY_LOGO_IMAGE_FILTER} from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
-import {uniqBy} from "lodash";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
+import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
+import {
+  type MovieResult,
+  Results,
+  type TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
+import { COMPANY_LOGO_IMAGE_FILTER } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useLocalSearchParams } from "expo-router";
+import { uniqBy } from "lodash";
+import React, { useMemo } from "react";
 
 export default function page() {
   const local = useLocalSearchParams();
-  const {jellyseerrApi} = useJellyseerr();
+  const { jellyseerrApi } = useJellyseerr();
 
-  const {companyId, name, image, type} = local as unknown as {
-    companyId: string,
-    name: string,
-    image: string,
-    type: DiscoverSliderType
+  const { companyId, name, image, type } = local as unknown as {
+    companyId: string;
+    name: string;
+    image: string;
+    type: DiscoverSliderType;
   };
 
-  const {data, fetchNextPage, hasNextPage} = useInfiniteQuery({
+  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
     queryKey: ["jellyseerr", "company", type, companyId],
-    queryFn: async ({pageParam}) => {
-      let params: any = {
+    queryFn: async ({ pageParam }) => {
+      const params: any = {
         page: Number(pageParam),
       };
 
       return jellyseerrApi?.discover(
-       (
-         type == DiscoverSliderType.NETWORKS
-           ? Endpoints.DISCOVER_TV_NETWORK
-           : Endpoints.DISCOVER_MOVIES_STUDIO
-       ) + `/${companyId}`,
-        params
-      )
+        `${
+          type === DiscoverSliderType.NETWORKS
+            ? Endpoints.DISCOVER_TV_NETWORK
+            : Endpoints.DISCOVER_MOVIES_STUDIO
+        }/${companyId}`,
+        params,
+      );
     },
     enabled: !!jellyseerrApi && !!companyId,
     initialPageParam: 1,
@@ -50,46 +50,58 @@ export default function page() {
   });
 
   const flatData = useMemo(
-    () => uniqBy(data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results ?? []), "id")?? [],
-    [data]
+    () =>
+      uniqBy(
+        data?.pages
+          ?.filter((p) => p?.results.length)
+          .flatMap((p) => p?.results ?? []),
+        "id",
+      ) ?? [],
+    [data],
   );
 
   const backdrops = useMemo(
-    () => jellyseerrApi
-      ? flatData.map((r) => jellyseerrApi.imageProxy((r as  TvResult | MovieResult).backdropPath, "w1920_and_h800_multi_faces"))
-      : [],
-    [jellyseerrApi, flatData]
+    () =>
+      jellyseerrApi
+        ? flatData.map((r) =>
+            jellyseerrApi.imageProxy(
+              (r as TvResult | MovieResult).backdropPath,
+              "w1920_and_h800_multi_faces",
+            ),
+          )
+        : [],
+    [jellyseerrApi, flatData],
   );
 
   return (
     <ParallaxSlideShow
       data={flatData}
       images={backdrops}
-      listHeader=""
+      listHeader=''
       keyExtractor={(item) => item.id.toString()}
       onEndReached={() => {
         if (hasNextPage) {
-          fetchNextPage()
+          fetchNextPage();
         }
       }}
       logo={
         <Image
           id={companyId}
           key={companyId}
-          className="bottom-1 w-1/2"
+          className='bottom-1 w-1/2'
           source={{
             uri: jellyseerrApi?.imageProxy(image, COMPANY_LOGO_IMAGE_FILTER),
           }}
           cachePolicy={"memory-disk"}
-          contentFit="contain"
+          contentFit='contain'
           style={{
             aspectRatio: "4/3",
           }}
         />
       }
-      renderItem={(item, index) =>
+      renderItem={(item, index) => (
         <JellyseerrPoster item={item as MovieResult | TvResult} />
-      }
+      )}
     />
   );
 }

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/genre/[genreId].tsx

@@ -1,42 +1,46 @@
-import {router, useLocalSearchParams, useSegments,} from "expo-router";
-import React, {useMemo,} from "react";
-import {TouchableOpacity} from "react-native";
-import {useInfiniteQuery} from "@tanstack/react-query";
-import {Endpoints, useJellyseerr} from "@/hooks/useJellyseerr";
-import {Text} from "@/components/common/Text";
-import Poster from "@/components/posters/Poster";
+import { Text } from "@/components/common/Text";
 import JellyseerrMediaIcon from "@/components/jellyseerr/JellyseerrMediaIcon";
-import {DiscoverSliderType} from "@/utils/jellyseerr/server/constants/discover";
 import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
-import {MovieResult, Results, TvResult} from "@/utils/jellyseerr/server/models/Search";
-import {uniqBy} from "lodash";
-import {textShadowStyle} from "@/components/jellyseerr/discover/GenericSlideCard";
+import { textShadowStyle } from "@/components/jellyseerr/discover/GenericSlideCard";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
+import Poster from "@/components/posters/Poster";
+import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
+import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
+import {
+  type MovieResult,
+  Results,
+  type TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { router, useLocalSearchParams, useSegments } from "expo-router";
+import { uniqBy } from "lodash";
+import React, { useMemo } from "react";
+import { TouchableOpacity } from "react-native";
 
 export default function page() {
   const local = useLocalSearchParams();
-  const {jellyseerrApi} = useJellyseerr();
+  const { jellyseerrApi } = useJellyseerr();
 
-  const {genreId, name, type} = local as unknown as {
-    genreId: string,
-    name: string,
-    type: DiscoverSliderType
+  const { genreId, name, type } = local as unknown as {
+    genreId: string;
+    name: string;
+    type: DiscoverSliderType;
   };
 
-  const {data, fetchNextPage, hasNextPage} = useInfiniteQuery({
+  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
     queryKey: ["jellyseerr", "company", type, genreId],
-    queryFn: async ({pageParam}) => {
-      let params: any = {
+    queryFn: async ({ pageParam }) => {
+      const params: any = {
         page: Number(pageParam),
-        genre: genreId
+        genre: genreId,
       };
 
       return jellyseerrApi?.discover(
-         type == DiscoverSliderType.MOVIE_GENRES
-           ? Endpoints.DISCOVER_MOVIES
-           : Endpoints.DISCOVER_TV,
-        params
-      )
+        type === DiscoverSliderType.MOVIE_GENRES
+          ? Endpoints.DISCOVER_MOVIES
+          : Endpoints.DISCOVER_TV,
+        params,
+      );
     },
     enabled: !!jellyseerrApi && !!genreId,
     initialPageParam: 1,
@@ -47,41 +51,54 @@ export default function page() {
   });
 
   const flatData = useMemo(
-    () => uniqBy(data?.pages?.filter((p) => p?.results.length).flatMap((p) => p?.results ?? []), "id")?? [],
-    [data]
+    () =>
+      uniqBy(
+        data?.pages
+          ?.filter((p) => p?.results.length)
+          .flatMap((p) => p?.results ?? []),
+        "id",
+      ) ?? [],
+    [data],
   );
 
   const backdrops = useMemo(
-    () => jellyseerrApi
-      ? flatData.map((r) => jellyseerrApi.imageProxy((r as  TvResult | MovieResult).backdropPath, "w1920_and_h800_multi_faces"))
-      : [],
-    [jellyseerrApi, flatData]
+    () =>
+      jellyseerrApi
+        ? flatData.map((r) =>
+            jellyseerrApi.imageProxy(
+              (r as TvResult | MovieResult).backdropPath,
+              "w1920_and_h800_multi_faces",
+            ),
+          )
+        : [],
+    [jellyseerrApi, flatData],
   );
 
   return (
     <ParallaxSlideShow
       data={flatData}
       images={backdrops}
-      listHeader=""
+      listHeader=''
       keyExtractor={(item) => item.id.toString()}
       onEndReached={() => {
         if (hasNextPage) {
-          fetchNextPage()
+          fetchNextPage();
         }
       }}
       logo={
         <Text
-          className="text-4xl font-bold text-center bottom-1"
+          className='text-4xl font-bold text-center bottom-1'
           style={{
             ...textShadowStyle.shadow,
-            shadowRadius: 10
-          }}>
+            shadowRadius: 10,
+          }}
+        >
           {name}
         </Text>
       }
-      renderItem={(item, index) =>
+      renderItem={(item, index) => (
         <JellyseerrPoster item={item as MovieResult | TvResult} />
-      }
+      )}
     />
   );
 }

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

@@ -1,66 +1,68 @@
 import { Button } from "@/components/Button";
-import { Text } from "@/components/common/Text";
 import { GenreTags } from "@/components/GenreTags";
-import Cast from "@/components/jellyseerr/Cast";
-import DetailFacts from "@/components/jellyseerr/DetailFacts";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { JellyserrRatings } from "@/components/Ratings";
+import { Text } from "@/components/common/Text";
+import Cast from "@/components/jellyseerr/Cast";
+import DetailFacts from "@/components/jellyseerr/DetailFacts";
 import JellyseerrSeasons from "@/components/series/JellyseerrSeasons";
 import { ItemActions } from "@/components/series/SeriesActions";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
 import {
-  IssueType,
+  type IssueType,
   IssueTypeName,
 } from "@/utils/jellyseerr/server/constants/issue";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import { MovieResult, TvResult } from "@/utils/jellyseerr/server/models/Search";
-import { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
-import { useTranslation } from "react-i18next";
+import type {
+  MovieResult,
+  TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
+import type { TvDetails } from "@/utils/jellyseerr/server/models/Tv";
 import { Ionicons } from "@expo/vector-icons";
 import {
   BottomSheetBackdrop,
-  BottomSheetBackdropProps,
+  type BottomSheetBackdropProps,
   BottomSheetModal,
   BottomSheetTextInput,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useLocalSearchParams, useNavigation, useRouter } from "expo-router";
+import type React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
 import RequestModal from "@/components/jellyseerr/RequestModal";
 import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
-import { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 
 const Page: React.FC = () => {
   const insets = useSafeAreaInsets();
   const params = useLocalSearchParams();
   const { t } = useTranslation();
+  const router = useRouter();
 
-  const { mediaTitle, releaseYear, posterSrc, ...result } =
+  const { mediaTitle, releaseYear, posterSrc, mediaType, ...result } =
     params as unknown as {
       mediaTitle: string;
       releaseYear: number;
       canRequest: string;
       posterSrc: string;
-    } & Partial<MovieResult | TvResult>;
+      mediaType: MediaType;
+    } & Partial<MovieResult | TvResult | MovieDetails | TvDetails>;
 
   const navigation = useNavigation();
   const { jellyseerrApi, requestMedia } = useJellyseerr();
 
   const [issueType, setIssueType] = useState<IssueType>();
   const [issueMessage, setIssueMessage] = useState<string>();
+  const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
   const advancedReqModalRef = useRef<BottomSheetModal>(null);
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
@@ -71,7 +73,7 @@ const Page: React.FC = () => {
     refetch,
   } = useQuery({
     enabled: !!jellyseerrApi && !!result && !!result.id,
-    queryKey: ["jellyseerr", "detail", result.mediaType, result.id],
+    queryKey: ["jellyseerr", "detail", mediaType, result.id],
     staleTime: 0,
     refetchOnMount: true,
     refetchOnReconnect: true,
@@ -79,9 +81,9 @@ const Page: React.FC = () => {
     retryOnMount: true,
     refetchInterval: 0,
     queryFn: async () => {
-      return result.mediaType === MediaType.MOVIE
-        ? jellyseerrApi?.movieDetails(result.id!!)
-        : jellyseerrApi?.tvDetails(result.id!!);
+      return mediaType === MediaType.MOVIE
+        ? jellyseerrApi?.movieDetails(result.id!)
+        : jellyseerrApi?.tvDetails(result.id!);
     },
   });
 
@@ -96,7 +98,7 @@ const Page: React.FC = () => {
         appearsOnIndex={0}
       />
     ),
-    []
+    [],
   );
 
   const submitIssue = useCallback(() => {
@@ -111,10 +113,18 @@ const Page: React.FC = () => {
     }
   }, [jellyseerrApi, details, result, issueType, issueMessage]);
 
+  const setRequestBody = useCallback(
+    (body: MediaRequestBody) => {
+      _setRequestBody(body);
+      advancedReqModalRef?.current?.present?.();
+    },
+    [requestBody, _setRequestBody, advancedReqModalRef],
+  );
+
   const request = useCallback(async () => {
     const body: MediaRequestBody = {
-      mediaId: Number(result.id!!),
-      mediaType: result.mediaType!!,
+      mediaId: Number(result.id!),
+      mediaType: mediaType!,
       tvdbId: details?.externalIds?.tvdbId,
       seasons: (details as TvDetails)?.seasons
         ?.filter?.((s) => s.seasonNumber !== 0)
@@ -122,7 +132,7 @@ const Page: React.FC = () => {
     };
 
     if (hasAdvancedRequestPermission) {
-      advancedReqModalRef?.current?.present?.(body);
+      setRequestBody(body);
       return;
     }
 
@@ -132,15 +142,15 @@ const Page: React.FC = () => {
   const isAnime = useMemo(
     () =>
       (details?.keywords.some((k) => k.id === ANIME_KEYWORD_ID) || false) &&
-      result.mediaType === MediaType.TV,
-    [details]
+      mediaType === MediaType.TV,
+    [details],
   );
 
   useEffect(() => {
     if (details) {
       navigation.setOptions({
         headerRight: () => (
-          <TouchableOpacity className="rounded-full p-2 bg-neutral-800/80">
+          <TouchableOpacity className='rounded-full p-2 bg-neutral-800/80'>
             <ItemActions item={details} />
           </TouchableOpacity>
         ),
@@ -150,14 +160,14 @@ const Page: React.FC = () => {
 
   return (
     <View
-      className="flex-1 relative"
+      className='flex-1 relative'
       style={{
         paddingLeft: insets.left,
         paddingRight: insets.right,
       }}
     >
       <ParallaxScrollView
-        className="flex-1 opacity-100"
+        className='flex-1 opacity-100'
         headerHeight={300}
         headerImage={
           <View>
@@ -172,7 +182,7 @@ const Page: React.FC = () => {
                 source={{
                   uri: jellyseerrApi?.imageProxy(
                     result.backdropPath,
-                    "w1920_and_h800_multi_faces"
+                    "w1920_and_h800_multi_faces",
                   ),
                 }}
               />
@@ -182,12 +192,12 @@ const Page: React.FC = () => {
                   width: "100%",
                   height: "100%",
                 }}
-                className="flex flex-col items-center justify-center border border-neutral-800 bg-neutral-900"
+                className='flex flex-col items-center justify-center border border-neutral-800 bg-neutral-900'
               >
                 <Ionicons
-                  name="image-outline"
+                  name='image-outline'
                   size={24}
-                  color="white"
+                  color='white'
                   style={{ opacity: 0.4 }}
                 />
               </View>
@@ -195,23 +205,31 @@ const Page: React.FC = () => {
           </View>
         }
       >
-        <View className="flex flex-col">
-          <View className="space-y-4">
-            <View className="px-4">
-              <View className="flex flex-row justify-between w-full">
-                <View className="flex flex-col w-56">
-                  <JellyserrRatings result={result as MovieResult | TvResult} />
+        <View className='flex flex-col'>
+          <View className='space-y-4'>
+            <View className='px-4'>
+              <View className='flex flex-row justify-between w-full'>
+                <View className='flex flex-col w-56'>
+                  <JellyserrRatings
+                    result={
+                      result as
+                        | MovieResult
+                        | TvResult
+                        | MovieDetails
+                        | TvDetails
+                    }
+                  />
                   <Text
                     uiTextView
                     selectable
-                    className="font-bold text-2xl mb-1"
+                    className='font-bold text-2xl mb-1'
                   >
                     {mediaTitle}
                   </Text>
-                  <Text className="opacity-50">{releaseYear}</Text>
+                  <Text className='opacity-50'>{releaseYear}</Text>
                 </View>
                 <Image
-                  className="absolute bottom-1 right-1 rounded-lg w-28 aspect-[10/15] border-2 border-neutral-800/50 drop-shadow-2xl"
+                  className='absolute bottom-1 right-1 rounded-lg w-28 aspect-[10/15] border-2 border-neutral-800/50 drop-shadow-2xl'
                   cachePolicy={"memory-disk"}
                   transition={300}
                   source={{
@@ -219,48 +237,80 @@ const Page: React.FC = () => {
                   }}
                 />
               </View>
-              <View className="mb-4">
+              <View>
                 <GenreTags genres={details?.genres?.map((g) => g.name) || []} />
               </View>
               {isLoading || isFetching ? (
-                <Button loading={true} disabled={true} color="purple"></Button>
+                <Button
+                  loading={true}
+                  disabled={true}
+                  color='purple'
+                  className='mt-4'
+                />
               ) : canRequest ? (
-                <Button color="purple" onPress={request}>
+                <Button color='purple' onPress={request} className='mt-4'>
                   {t("jellyseerr.request_button")}
                 </Button>
               ) : (
-                <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>
+                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>
+                )
               )}
-              <OverviewText text={result.overview} className="mt-4" />
+              <OverviewText text={result.overview} className='mt-4' />
             </View>
 
-            {result.mediaType === MediaType.TV && (
+            {mediaType === MediaType.TV && (
               <JellyseerrSeasons
                 isLoading={isLoading || isFetching}
-                result={result as TvResult}
                 details={details as TvDetails}
                 refetch={refetch}
                 hasAdvancedRequest={hasAdvancedRequestPermission}
-                onAdvancedRequest={(data) =>
-                  advancedReqModalRef?.current?.present(data)
-                }
+                onAdvancedRequest={(data) => setRequestBody(data)}
               />
             )}
             <DetailFacts
-              className="p-2 border border-neutral-800 bg-neutral-900 rounded-xl"
+              className='p-2 border border-neutral-800 bg-neutral-900 rounded-xl'
               details={details}
             />
             <Cast details={details} />
@@ -269,14 +319,17 @@ const Page: React.FC = () => {
       </ParallaxScrollView>
       <RequestModal
         ref={advancedReqModalRef}
+        requestBody={requestBody}
         title={mediaTitle}
-        id={result.id!!}
-        type={result.mediaType as MediaType}
+        id={result.id!}
+        type={mediaType}
         isAnime={isAnime}
         onRequested={() => {
+          _setRequestBody(undefined);
           advancedReqModalRef?.current?.close();
           refetch();
         }}
+        onDismiss={() => _setRequestBody(undefined)}
       />
       <BottomSheetModal
         ref={bottomSheetModalRef}
@@ -290,22 +343,22 @@ const Page: React.FC = () => {
         backdropComponent={renderBackdrop}
       >
         <BottomSheetView>
-          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
             <View>
-              <Text className="font-bold text-2xl text-neutral-100">
+              <Text className='font-bold text-2xl text-neutral-100'>
                 {t("jellyseerr.whats_wrong")}
               </Text>
             </View>
-            <View className="flex flex-col space-y-2 items-start">
-              <View className="flex flex-col">
+            <View className='flex flex-col space-y-2 items-start'>
+              <View className='flex flex-col'>
                 <DropdownMenu.Root>
                   <DropdownMenu.Trigger>
-                    <View className="flex flex-col">
-                      <Text className="opacity-50 mb-1 text-xs">
+                    <View className='flex flex-col'>
+                      <Text className='opacity-50 mb-1 text-xs'>
                         {t("jellyseerr.issue_type")}
                       </Text>
-                      <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
-                        <Text style={{}} className="" numberOfLines={1}>
+                      <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+                        <Text style={{}} className='' numberOfLines={1}>
                           {issueType
                             ? IssueTypeName[issueType]
                             : t("jellyseerr.select_an_issue")}
@@ -315,8 +368,8 @@ const Page: React.FC = () => {
                   </DropdownMenu.Trigger>
                   <DropdownMenu.Content
                     loop={false}
-                    side="bottom"
-                    align="center"
+                    side='bottom'
+                    align='center'
                     alignOffset={0}
                     avoidCollisions={true}
                     collisionPadding={0}
@@ -343,14 +396,14 @@ const Page: React.FC = () => {
                 </DropdownMenu.Root>
               </View>
 
-              <View className="p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full">
+              <View className='p-4 border border-neutral-800 rounded-xl bg-neutral-900 w-full'>
                 <BottomSheetTextInput
                   multiline
                   maxLength={254}
                   style={{ color: "white" }}
-                  clearButtonMode="always"
+                  clearButtonMode='always'
                   placeholder={t("jellyseerr.describe_the_issue")}
-                  placeholderTextColor="#9CA3AF"
+                  placeholderTextColor='#9CA3AF'
                   // Issue with multiline + Textinput inside a portal
                   // https://github.com/callstack/react-native-paper/issues/1668
                   defaultValue={issueMessage}
@@ -358,7 +411,7 @@ const Page: React.FC = () => {
                 />
               </View>
             </View>
-            <Button className="mt-auto" onPress={submitIssue} color="purple">
+            <Button className='mt-auto' onPress={submitIssue} color='purple'>
               {t("jellyseerr.submit_button")}
             </Button>
           </View>

app/(auth)/(tabs)/(home,libraries,search,favorites)/jellyseerr/person/[personId].tsx

@@ -1,25 +1,30 @@
-import {
-  useLocalSearchParams,
-  useSegments,
-} from "expo-router";
-import React, { useMemo } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
-import { Text } from "@/components/common/Text";
-import { Image } from "expo-image";
 import { OverviewText } from "@/components/OverviewText";
-import {orderBy, uniqBy} from "lodash";
-import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import { Text } from "@/components/common/Text";
 import ParallaxSlideShow from "@/components/jellyseerr/ParallaxSlideShow";
 import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
-import {MovieResult, TvResult} from "@/utils/jellyseerr/server/models/Search";
+import { useJellyseerr } from "@/hooks/useJellyseerr";
+import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
+import type {
+  MovieResult,
+  TvResult,
+} from "@/utils/jellyseerr/server/models/Search";
+import { useQuery } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { useLocalSearchParams, useSegments } from "expo-router";
+import { orderBy, uniqBy } from "lodash";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 export default function page() {
   const local = useLocalSearchParams();
   const { t } = useTranslation();
 
-  const { jellyseerrApi, jellyseerrUser, jellyseerrRegion: region, jellyseerrLocale: locale } = useJellyseerr();
+  const {
+    jellyseerrApi,
+    jellyseerrUser,
+    jellyseerrRegion: region,
+    jellyseerrLocale: locale,
+  } = useJellyseerr();
 
   const { personId } = local as { personId: string };
 
@@ -34,18 +39,27 @@ export default function page() {
 
   const castedRoles: PersonCreditCast[] = useMemo(
     () =>
-      uniqBy(orderBy(
-        data?.combinedCredits?.cast,
-        ["voteCount", "voteAverage"],
-        "desc"
-      ), 'id'),
-    [data?.combinedCredits]
+      uniqBy(
+        orderBy(
+          data?.combinedCredits?.cast,
+          ["voteCount", "voteAverage"],
+          "desc",
+        ),
+        "id",
+      ),
+    [data?.combinedCredits],
   );
   const backdrops = useMemo(
-    () => jellyseerrApi
-      ? castedRoles.map((c) => jellyseerrApi.imageProxy(c.backdropPath, "w1920_and_h800_multi_faces"))
-      : [],
-    [jellyseerrApi, data?.combinedCredits]
+    () =>
+      jellyseerrApi
+        ? castedRoles.map((c) =>
+            jellyseerrApi.imageProxy(
+              c.backdropPath,
+              "w1920_and_h800_multi_faces",
+            ),
+          )
+        : [],
+    [jellyseerrApi, data?.combinedCredits],
   );
 
   return (
@@ -58,15 +72,15 @@ export default function page() {
         <Image
           key={data?.details?.id}
           id={data?.details?.id.toString()}
-          className="rounded-full bottom-1"
+          className='rounded-full bottom-1'
           source={{
             uri: jellyseerrApi?.imageProxy(
               data?.details?.profilePath,
-              "w600_and_h600_bestv2"
+              "w600_and_h600_bestv2",
             ),
           }}
           cachePolicy={"memory-disk"}
-          contentFit="cover"
+          contentFit='cover'
           style={{
             width: 125,
             height: 125,
@@ -75,27 +89,27 @@ export default function page() {
       }
       HeaderContent={() => (
         <>
-          <Text className="font-bold text-2xl mb-1">
-            {data?.details?.name}
-          </Text>
-          <Text className="opacity-50">
+          <Text className='font-bold text-2xl mb-1'>{data?.details?.name}</Text>
+          <Text className='opacity-50'>
             {t("jellyseerr.born")}{" "}
-            {new Date(data?.details?.birthday!!).toLocaleDateString(
+            {new Date(data?.details?.birthday!).toLocaleDateString(
               `${locale}-${region}`,
               {
                 year: "numeric",
                 month: "long",
                 day: "numeric",
-              }
+              },
             )}{" "}
             | {data?.details?.placeOfBirth}
           </Text>
         </>
       )}
       MainContent={() => (
-        <OverviewText text={data?.details?.biography} className="mt-4" />
+        <OverviewText text={data?.details?.biography} className='mt-4' />
+      )}
+      renderItem={(item, index) => (
+        <JellyseerrPoster item={item as MovieResult | TvResult} />
       )}
-      renderItem={(item, index) => <JellyseerrPoster item={item as MovieResult | TvResult} />}
     />
   );
 }

app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/_layout.tsx

@@ -3,7 +3,10 @@ import type {
   MaterialTopTabNavigationOptions,
 } from "@react-navigation/material-top-tabs";
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-import { ParamListBase, TabNavigationState } from "@react-navigation/native";
+import type {
+  ParamListBase,
+  TabNavigationState,
+} from "@react-navigation/native";
 import { Stack, withLayoutContext } from "expo-router";
 import React from "react";
 
@@ -21,8 +24,8 @@ const Layout = () => {
     <>
       <Stack.Screen options={{ title: "Live TV" }} />
       <Tab
-        initialRouteName="programs"
-        keyboardDismissMode="none"
+        initialRouteName='programs'
+        keyboardDismissMode='none'
         screenOptions={{
           tabBarBounces: true,
           tabBarLabelStyle: { fontSize: 10 },
@@ -37,10 +40,10 @@ const Layout = () => {
           tabBarScrollEnabled: true,
         }}
       >
-        <Tab.Screen name="programs" />
-        <Tab.Screen name="guide" />
-        <Tab.Screen name="channels" />
-        <Tab.Screen name="recordings" />
+        <Tab.Screen name='programs' />
+        <Tab.Screen name='guide' />
+        <Tab.Screen name='channels' />
+        <Tab.Screen name='recordings' />
       </Tab>
     </>
   );

app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/channels.tsx

@@ -31,13 +31,13 @@ export default function page() {
   });
 
   return (
-    <View className="flex flex-1">
+    <View className='flex flex-1'>
       <FlashList
         data={channels?.Items}
         estimatedItemSize={76}
         renderItem={({ item }) => (
-          <View className="flex flex-row items-center px-4 mb-2">
-            <View className="w-22 mr-4 rounded-lg overflow-hidden">
+          <View className='flex flex-row items-center px-4 mb-2'>
+            <View className='w-22 mr-4 rounded-lg overflow-hidden'>
               <ItemImage
                 style={{
                   aspectRatio: "1/1",
@@ -47,7 +47,7 @@ export default function page() {
                 item={item}
               />
             </View>
-            <Text className="font-bold">{item.Name}</Text>
+            <Text className='font-bold'>{item.Name}</Text>
           </View>
         )}
       />

app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/guide.tsx

@@ -9,6 +9,7 @@ import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Button,
   Dimensions,
@@ -17,7 +18,6 @@ import {
   View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTranslation } from "react-i18next";
 
 const HOUR_HEIGHT = 30;
 const ITEMS_PER_PAGE = 20;
@@ -71,7 +71,7 @@ export default function page() {
           MaxStartDate: endOfDay.toISOString(),
           MinEndDate: isToday ? now.toISOString() : startOfDay.toISOString(),
           ChannelIds: channels?.Items?.map((c) => c.Id).filter(
-            Boolean
+            Boolean,
           ) as string[],
           ImageTypeLimit: 1,
           EnableImages: false,
@@ -100,7 +100,7 @@ export default function page() {
   return (
     <ScrollView
       nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       key={"home"}
       contentContainerStyle={{
         paddingLeft: insets.left,
@@ -117,16 +117,16 @@ export default function page() {
         }
       />
 
-      <View className="flex flex-row">
-        <View className="flex flex-col w-[64px]">
+      <View className='flex flex-row'>
+        <View className='flex flex-col w-[64px]'>
           <View
             style={{
               height: HOUR_HEIGHT,
             }}
-            className="bg-neutral-800"
-          ></View>
+            className='bg-neutral-800'
+          />
           {channels?.Items?.map((c, i) => (
-            <View className="h-16 w-16 mr-4 rounded-lg overflow-hidden" key={i}>
+            <View className='h-16 w-16 mr-4 rounded-lg overflow-hidden' key={i}>
               <ItemImage
                 style={{
                   width: "100%",
@@ -148,7 +148,7 @@ export default function page() {
             setScrollX(e.nativeEvent.contentOffset.x);
           }}
         >
-          <View className="flex flex-col">
+          <View className='flex flex-col'>
             <HourHeader height={HOUR_HEIGHT} />
             {channels?.Items?.map((c, i) => (
               <MemoizedLiveTVGuideRow
@@ -180,14 +180,14 @@ const PageButtons: React.FC<PageButtonsProps> = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <View className="flex flex-row justify-between items-center bg-neutral-800 w-full px-4 py-2">
+    <View className='flex flex-row justify-between items-center bg-neutral-800 w-full px-4 py-2'>
       <TouchableOpacity
         onPress={onPrevPage}
         disabled={currentPage === 1}
-        className="flex flex-row items-center"
+        className='flex flex-row items-center'
       >
         <Ionicons
-          name="chevron-back"
+          name='chevron-back'
           size={24}
           color={currentPage === 1 ? "gray" : "white"}
         />
@@ -199,11 +199,11 @@ const PageButtons: React.FC<PageButtonsProps> = ({
           {t("live_tv.previous")}
         </Text>
       </TouchableOpacity>
-      <Text className="text-white">Page {currentPage}</Text>
+      <Text className='text-white'>Page {currentPage}</Text>
       <TouchableOpacity
         onPress={onNextPage}
         disabled={isNextDisabled}
-        className="flex flex-row items-center"
+        className='flex flex-row items-center'
       >
         <Text
           className={`mr-1 ${isNextDisabled ? "text-gray-500" : "text-white"}`}
@@ -211,7 +211,7 @@ const PageButtons: React.FC<PageButtonsProps> = ({
           {t("live_tv.next")}
         </Text>
         <Ionicons
-          name="chevron-forward"
+          name='chevron-forward'
           size={24}
           color={isNextDisabled ? "gray" : "white"}
         />

app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/programs.tsx

@@ -1,13 +1,13 @@
 import { ScrollingCollectionList } from "@/components/home/ScrollingCollectionList";
 import { TAB_HEIGHT } from "@/constants/Values";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { getLiveTvApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtom } from "jotai";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTranslation } from "react-i18next";
 
 export default function page() {
   const [api] = useAtom(apiAtom);
@@ -19,7 +19,7 @@ export default function page() {
   return (
     <ScrollView
       nestedScrollEnabled
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       key={"home"}
       contentContainerStyle={{
         paddingLeft: insets.left,
@@ -28,7 +28,7 @@ export default function page() {
         paddingTop: 8,
       }}
     >
-      <View className="flex flex-col space-y-2">
+      <View className='flex flex-col space-y-2'>
         <ScrollingCollectionList
           queryKey={["livetv", "recommended"]}
           title={t("live_tv.on_now")}
@@ -45,7 +45,7 @@ export default function page() {
             });
             return res.data.Items || [];
           }}
-          orientation="horizontal"
+          orientation='horizontal'
         />
         <ScrollingCollectionList
           queryKey={["livetv", "shows"]}
@@ -67,7 +67,7 @@ export default function page() {
             });
             return res.data.Items || [];
           }}
-          orientation="horizontal"
+          orientation='horizontal'
         />
         <ScrollingCollectionList
           queryKey={["livetv", "movies"]}
@@ -85,7 +85,7 @@ export default function page() {
             });
             return res.data.Items || [];
           }}
-          orientation="horizontal"
+          orientation='horizontal'
         />
         <ScrollingCollectionList
           queryKey={["livetv", "sports"]}
@@ -103,7 +103,7 @@ export default function page() {
             });
             return res.data.Items || [];
           }}
-          orientation="horizontal"
+          orientation='horizontal'
         />
         <ScrollingCollectionList
           queryKey={["livetv", "kids"]}
@@ -121,7 +121,7 @@ export default function page() {
             });
             return res.data.Items || [];
           }}
-          orientation="horizontal"
+          orientation='horizontal'
         />
         <ScrollingCollectionList
           queryKey={["livetv", "news"]}
@@ -139,7 +139,7 @@ export default function page() {
             });
             return res.data.Items || [];
           }}
-          orientation="horizontal"
+          orientation='horizontal'
         />
       </View>
     </ScrollView>

app/(auth)/(tabs)/(home,libraries,search,favorites)/livetv/recordings.tsx

@@ -1,12 +1,12 @@
 import { Text } from "@/components/common/Text";
 import React from "react";
-import { View } from "react-native";
 import { useTranslation } from "react-i18next";
+import { View } from "react-native";
 
 export default function page() {
   const { t } = useTranslation();
   return (
-    <View className="flex items-center justify-center h-full -mt-12">
+    <View className='flex items-center justify-center h-full -mt-12'>
       <Text>{t("live_tv.coming_soon")}</Text>
     </View>
   );

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

@@ -14,9 +14,10 @@ import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useEffect, useMemo } from "react";
-import { Platform, View } from "react-native";
+import type React from "react";
+import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, View } from "react-native";
 
 const page: React.FC = () => {
   const navigation = useNavigation();
@@ -49,7 +50,7 @@ const page: React.FC = () => {
         quality: 90,
         width: 1000,
       }),
-    [item]
+    [item],
   );
 
   const logoUrl = useMemo(
@@ -58,7 +59,7 @@ const page: React.FC = () => {
         api,
         item,
       }),
-    [item]
+    [item],
   );
 
   const { data: allEpisodes, isLoading } = useQuery({
@@ -83,26 +84,24 @@ const page: React.FC = () => {
         item &&
         allEpisodes &&
         allEpisodes.length > 0 && (
-          <View className="flex flex-row items-center space-x-2">
+          <View className='flex flex-row items-center space-x-2'>
             <AddToFavorites item={item} />
             {!Platform.isTV && (
-              <>
-                <DownloadItems
-                  size="large"
-                  title={t("item_card.download.download_series")}
-                  items={allEpisodes || []}
-                  MissingDownloadIconComponent={() => (
-                    <Ionicons name="download" size={22} color="white" />
-                  )}
-                  DownloadedIconComponent={() => (
-                    <Ionicons
-                      name="checkmark-done-outline"
-                      size={24}
-                      color="#9333ea"
-                    />
-                  )}
-                />
-              </>
+              <DownloadItems
+                size='large'
+                title={t("item_card.download.download_series")}
+                items={allEpisodes || []}
+                MissingDownloadIconComponent={() => (
+                  <Ionicons name='download' size={22} color='white' />
+                )}
+                DownloadedIconComponent={() => (
+                  <Ionicons
+                    name='checkmark-done-outline'
+                    size={24}
+                    color='#9333ea'
+                  />
+                )}
+              />
             )}
           </View>
         ),
@@ -126,25 +125,23 @@ const page: React.FC = () => {
         />
       }
       logo={
-        <>
-          {logoUrl ? (
-            <Image
-              source={{
-                uri: logoUrl,
-              }}
-              style={{
-                height: 130,
-                width: "100%",
-                resizeMode: "contain",
-              }}
-            />
-          ) : null}
-        </>
+        logoUrl ? (
+          <Image
+            source={{
+              uri: logoUrl,
+            }}
+            style={{
+              height: 130,
+              width: "100%",
+              resizeMode: "contain",
+            }}
+          />
+        ) : null
       }
     >
-      <View className="flex flex-col pt-4">
+      <View className='flex flex-col pt-4'>
         <SeriesHeader item={item} />
-        <View className="mb-4">
+        <View className='mb-4'>
           <NextUp seriesId={seriesId} />
         </View>
         <SeasonPicker item={item} initialSeasonIndex={Number(seasonIndex)} />

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

@@ -1,35 +1,35 @@
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, { useCallback, useEffect, useMemo } from "react";
-import { FlatList, useWindowDimensions, View } from "react-native";
+import { FlatList, View, useWindowDimensions } from "react-native";
 
+import { ItemCardText } from "@/components/ItemCardText";
+import { Loader } from "@/components/Loader";
 import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
-import { ItemCardText } from "@/components/ItemCardText";
-import { Loader } from "@/components/Loader";
 import { ItemPoster } from "@/components/posters/ItemPoster";
 import { useOrientation } from "@/hooks/useOrientation";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
+  SortByOption,
+  SortOrderOption,
   genreFilterAtom,
   getSortByPreference,
   getSortOrderPreference,
   sortByAtom,
-  SortByOption,
   sortByPreferenceAtom,
   sortOptions,
   sortOrderAtom,
-  SortOrderOption,
   sortOrderOptions,
   sortOrderPreferenceAtom,
   tagsFilterAtom,
   yearFilterAtom,
 } from "@/utils/atoms/filters";
-import {
+import type {
   BaseItemDto,
   BaseItemDtoQueryResult,
   BaseItemKind,
@@ -40,8 +40,8 @@ import {
   getUserLibraryApi,
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTranslation } from "react-i18next";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const Page = () => {
   const searchParams = useLocalSearchParams();
@@ -58,7 +58,7 @@ const Page = () => {
   const [sortOrder, _setSortOrder] = useAtom(sortOrderAtom);
   const [sortByPreference, setSortByPreference] = useAtom(sortByPreferenceAtom);
   const [sortOrderPreference, setOderByPreference] = useAtom(
-    sortOrderPreferenceAtom
+    sortOrderPreferenceAtom,
   );
 
   const { orientation } = useOrientation();
@@ -88,7 +88,7 @@ const Page = () => {
       }
       _setSortBy(sortBy);
     },
-    [libraryId, sortByPreference]
+    [libraryId, sortByPreference],
   );
 
   const setSortOrder = useCallback(
@@ -102,7 +102,7 @@ const Page = () => {
       }
       _setSortOrder(sortOrder);
     },
-    [libraryId, sortOrderPreference]
+    [libraryId, sortOrderPreference],
   );
 
   const nrOfCols = useMemo(() => {
@@ -169,7 +169,7 @@ const Page = () => {
         fields: ["PrimaryImageAspectRatio", "SortName"],
         genres: selectedGenres,
         tags: selectedTags,
-        years: selectedYears.map((year) => parseInt(year)),
+        years: selectedYears.map((year) => Number.parseInt(year)),
         includeItemTypes: itemType ? [itemType] : undefined,
       });
 
@@ -185,7 +185,7 @@ const Page = () => {
       selectedTags,
       sortBy,
       sortOrder,
-    ]
+    ],
   );
 
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
@@ -211,14 +211,13 @@ const Page = () => {
         const totalItems = lastPage.TotalRecordCount;
         const accumulatedItems = pages.reduce(
           (acc, curr) => acc + (curr?.Items?.length || 0),
-          0
+          0,
         );
 
         if (accumulatedItems < totalItems) {
           return lastPage?.Items?.length * pages.length;
-        } else {
-          return undefined;
         }
+        return undefined;
       },
       initialPageParam: 0,
       enabled: !!api && !!user?.Id && !!library,
@@ -248,8 +247,8 @@ const Page = () => {
                 ? index % nrOfCols === 0
                   ? "flex-end"
                   : (index + 1) % nrOfCols === 0
-                  ? "flex-start"
-                  : "center"
+                    ? "flex-start"
+                    : "center"
                 : "center",
             width: "89%",
           }}
@@ -260,14 +259,14 @@ const Page = () => {
         </View>
       </TouchableItemRouter>
     ),
-    [orientation]
+    [orientation],
   );
 
   const keyExtractor = useCallback((item: BaseItemDto) => item.Id || "", []);
 
   const ListHeaderComponent = useCallback(
     () => (
-      <View className="">
+      <View className=''>
         <FlatList
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -286,13 +285,13 @@ const Page = () => {
               key: "genre",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={libraryId}
-                  queryKey="genreFilter"
+                  className='mr-1'
+                  id={libraryId}
+                  queryKey='genreFilter'
                   queryFn={async () => {
                     if (!api) return null;
                     const response = await getFilterApi(
-                      api
+                      api,
                     ).getQueryFiltersLegacy({
                       userId: user?.Id,
                       parentId: libraryId,
@@ -313,13 +312,13 @@ const Page = () => {
               key: "year",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={libraryId}
-                  queryKey="yearFilter"
+                  className='mr-1'
+                  id={libraryId}
+                  queryKey='yearFilter'
                   queryFn={async () => {
                     if (!api) return null;
                     const response = await getFilterApi(
-                      api
+                      api,
                     ).getQueryFiltersLegacy({
                       userId: user?.Id,
                       parentId: libraryId,
@@ -338,13 +337,13 @@ const Page = () => {
               key: "tags",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={libraryId}
-                  queryKey="tagsFilter"
+                  className='mr-1'
+                  id={libraryId}
+                  queryKey='tagsFilter'
                   queryFn={async () => {
                     if (!api) return null;
                     const response = await getFilterApi(
-                      api
+                      api,
                     ).getQueryFiltersLegacy({
                       userId: user?.Id,
                       parentId: libraryId,
@@ -365,10 +364,18 @@ const Page = () => {
               key: "sortBy",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={libraryId}
-                  queryKey="sortBy"
-                  queryFn={async () => sortOptions.map((s) => s.key)}
+                  className='mr-1'
+                  id={libraryId}
+                  queryKey='sortBy'
+                  queryFn={async () =>
+                    sortOptions
+                      .filter(
+                        (s) =>
+                          library?.CollectionType !== "movies" ||
+                          s.key !== SortByOption.DateLastContentAdded,
+                      )
+                      .map((s) => s.key)
+                  }
                   set={setSortBy}
                   values={sortBy}
                   title={t("library.filters.sort_by")}
@@ -385,9 +392,9 @@ const Page = () => {
               key: "sortOrder",
               component: (
                 <FilterButton
-                  className="mr-1"
-                  collectionId={libraryId}
-                  queryKey="sortOrder"
+                  className='mr-1'
+                  id={libraryId}
+                  queryKey='sortOrder'
                   queryFn={async () => sortOrderOptions.map((s) => s.key)}
                   set={setSortOrder}
                   values={sortOrder}
@@ -422,34 +429,29 @@ const Page = () => {
       sortOrder,
       setSortOrder,
       isFetching,
-    ]
+    ],
   );
 
   const insets = useSafeAreaInsets();
 
   if (isLoading || isLibraryLoading)
     return (
-      <View className="w-full h-full flex items-center justify-center">
+      <View className='w-full h-full flex items-center justify-center'>
         <Loader />
       </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}
       ListEmptyComponent={
-        <View className="flex flex-col items-center justify-center h-full">
-          <Text className="font-bold text-xl text-neutral-500">{t("library.no_results")}</Text>
+        <View className='flex flex-col items-center justify-center h-full'>
+          <Text className='font-bold text-xl text-neutral-500'>
+            {t("library.no_results")}
+          </Text>
         </View>
       }
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       data={flatData}
       renderItem={renderItem}
       extraData={[orientation, nrOfCols]}
@@ -474,7 +476,7 @@ const Page = () => {
             width: 10,
             height: 10,
           }}
-        ></View>
+        />
       )}
     />
   );

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

@@ -16,7 +16,7 @@ export default function IndexLayout() {
   return (
     <Stack>
       <Stack.Screen
-        name="index"
+        name='index'
         options={{
           headerShown: true,
           headerLargeTitle: true,
@@ -25,7 +25,7 @@ export default function IndexLayout() {
           headerLargeStyle: {
             backgroundColor: "black",
           },
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
           headerRight: () =>
             !pluginSettings?.libraryOptions?.locked &&
@@ -33,9 +33,9 @@ export default function IndexLayout() {
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger>
                   <Ionicons
-                    name="ellipsis-horizontal-outline"
+                    name='ellipsis-horizontal-outline'
                     size={24}
-                    color="white"
+                    color='white'
                   />
                 </DropdownMenu.Trigger>
                 <DropdownMenu.Content
@@ -50,9 +50,9 @@ export default function IndexLayout() {
                   <DropdownMenu.Label>
                     {t("library.options.display")}
                   </DropdownMenu.Label>
-                  <DropdownMenu.Group key="display-group">
+                  <DropdownMenu.Group key='display-group'>
                     <DropdownMenu.Sub>
-                      <DropdownMenu.SubTrigger key="image-style-trigger">
+                      <DropdownMenu.SubTrigger key='image-style-trigger'>
                         {t("library.options.display")}
                       </DropdownMenu.SubTrigger>
                       <DropdownMenu.SubContent
@@ -63,7 +63,7 @@ export default function IndexLayout() {
                         sideOffset={10}
                       >
                         <DropdownMenu.CheckboxItem
-                          key="display-option-1"
+                          key='display-option-1'
                           value={settings.libraryOptions.display === "row"}
                           onValueChange={() =>
                             updateSettings({
@@ -75,12 +75,12 @@ export default function IndexLayout() {
                           }
                         >
                           <DropdownMenu.ItemIndicator />
-                          <DropdownMenu.ItemTitle key="display-title-1">
+                          <DropdownMenu.ItemTitle key='display-title-1'>
                             {t("library.options.row")}
                           </DropdownMenu.ItemTitle>
                         </DropdownMenu.CheckboxItem>
                         <DropdownMenu.CheckboxItem
-                          key="display-option-2"
+                          key='display-option-2'
                           value={settings.libraryOptions.display === "list"}
                           onValueChange={() =>
                             updateSettings({
@@ -92,14 +92,14 @@ export default function IndexLayout() {
                           }
                         >
                           <DropdownMenu.ItemIndicator />
-                          <DropdownMenu.ItemTitle key="display-title-2">
+                          <DropdownMenu.ItemTitle key='display-title-2'>
                             {t("library.options.list")}
                           </DropdownMenu.ItemTitle>
                         </DropdownMenu.CheckboxItem>
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Sub>
                     <DropdownMenu.Sub>
-                      <DropdownMenu.SubTrigger key="image-style-trigger">
+                      <DropdownMenu.SubTrigger key='image-style-trigger'>
                         {t("library.options.image_style")}
                       </DropdownMenu.SubTrigger>
                       <DropdownMenu.SubContent
@@ -110,7 +110,7 @@ export default function IndexLayout() {
                         sideOffset={10}
                       >
                         <DropdownMenu.CheckboxItem
-                          key="poster-option"
+                          key='poster-option'
                           value={
                             settings.libraryOptions.imageStyle === "poster"
                           }
@@ -124,12 +124,12 @@ export default function IndexLayout() {
                           }
                         >
                           <DropdownMenu.ItemIndicator />
-                          <DropdownMenu.ItemTitle key="poster-title">
+                          <DropdownMenu.ItemTitle key='poster-title'>
                             {t("library.options.poster")}
                           </DropdownMenu.ItemTitle>
                         </DropdownMenu.CheckboxItem>
                         <DropdownMenu.CheckboxItem
-                          key="cover-option"
+                          key='cover-option'
                           value={settings.libraryOptions.imageStyle === "cover"}
                           onValueChange={() =>
                             updateSettings({
@@ -141,17 +141,17 @@ export default function IndexLayout() {
                           }
                         >
                           <DropdownMenu.ItemIndicator />
-                          <DropdownMenu.ItemTitle key="cover-title">
+                          <DropdownMenu.ItemTitle key='cover-title'>
                             {t("library.options.cover")}
                           </DropdownMenu.ItemTitle>
                         </DropdownMenu.CheckboxItem>
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Sub>
                   </DropdownMenu.Group>
-                  <DropdownMenu.Group key="show-titles-group">
+                  <DropdownMenu.Group key='show-titles-group'>
                     <DropdownMenu.CheckboxItem
                       disabled={settings.libraryOptions.imageStyle === "poster"}
-                      key="show-titles-option"
+                      key='show-titles-option'
                       value={settings.libraryOptions.showTitles}
                       onValueChange={(newValue: string) => {
                         if (settings.libraryOptions.imageStyle === "poster")
@@ -159,30 +159,30 @@ export default function IndexLayout() {
                         updateSettings({
                           libraryOptions: {
                             ...settings.libraryOptions,
-                            showTitles: newValue === "on" ? true : false,
+                            showTitles: newValue === "on",
                           },
                         });
                       }}
                     >
                       <DropdownMenu.ItemIndicator />
-                      <DropdownMenu.ItemTitle key="show-titles-title">
+                      <DropdownMenu.ItemTitle key='show-titles-title'>
                         {t("library.options.show_titles")}
                       </DropdownMenu.ItemTitle>
                     </DropdownMenu.CheckboxItem>
                     <DropdownMenu.CheckboxItem
-                      key="show-stats-option"
+                      key='show-stats-option'
                       value={settings.libraryOptions.showStats}
                       onValueChange={(newValue: string) => {
                         updateSettings({
                           libraryOptions: {
                             ...settings.libraryOptions,
-                            showStats: newValue === "on" ? true : false,
+                            showStats: newValue === "on",
                           },
                         });
                       }}
                     >
                       <DropdownMenu.ItemIndicator />
-                      <DropdownMenu.ItemTitle key="show-stats-title">
+                      <DropdownMenu.ItemTitle key='show-stats-title'>
                         {t("library.options.show_stats")}
                       </DropdownMenu.ItemTitle>
                     </DropdownMenu.CheckboxItem>
@@ -195,12 +195,12 @@ export default function IndexLayout() {
         }}
       />
       <Stack.Screen
-        name="[libraryId]"
+        name='[libraryId]'
         options={{
           title: "",
           headerShown: true,
           headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}
       />
@@ -208,12 +208,12 @@ export default function IndexLayout() {
         <Stack.Screen key={name} name={name} options={options} />
       ))}
       <Stack.Screen
-        name="collections/[collectionId]"
+        name='collections/[collectionId]'
         options={{
           title: "",
           headerShown: true,
           headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}
       />

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

@@ -1,6 +1,6 @@
+import { Loader } from "@/components/Loader";
 import { Text } from "@/components/common/Text";
 import { LibraryItemCard } from "@/components/library/LibraryItemCard";
-import { Loader } from "@/components/Loader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import {
@@ -11,9 +11,9 @@ import { FlashList } from "@shopify/flash-list";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTranslation } from "react-i18next";
 
 export default function index() {
   const [api] = useAtom(apiAtom);
@@ -23,7 +23,7 @@ export default function index() {
 
   const { t } = useTranslation();
 
-  const { data, isLoading: isLoading } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ["user-views", user?.Id],
     queryFn: async () => {
       const response = await getUserViewsApi(api!).getUserViews({
@@ -41,7 +41,7 @@ export default function index() {
         ?.filter((l) => !settings?.hiddenLibraries?.includes(l.Id!))
         .filter((l) => l.CollectionType !== "music")
         .filter((l) => l.CollectionType !== "books") || [],
-    [data, settings?.hiddenLibraries]
+    [data, settings?.hiddenLibraries],
   );
 
   useEffect(() => {
@@ -65,22 +65,24 @@ export default function index() {
 
   if (isLoading)
     return (
-      <View className="justify-center items-center h-full">
+      <View className='justify-center items-center h-full'>
         <Loader />
       </View>
     );
 
   if (!libraries)
     return (
-      <View className="h-full w-full flex justify-center items-center">
-        <Text className="text-lg text-neutral-500">{t("library.no_libraries_found")}</Text>
+      <View className='h-full w-full flex justify-center items-center'>
+        <Text className='text-lg text-neutral-500'>
+          {t("library.no_libraries_found")}
+        </Text>
       </View>
     );
 
   return (
     <FlashList
       extraData={settings}
-      contentInsetAdjustmentBehavior="automatic"
+      contentInsetAdjustmentBehavior='automatic'
       contentContainerStyle={{
         paddingTop: 17,
         paddingHorizontal: settings?.libraryOptions?.display === "row" ? 0 : 17,
@@ -97,10 +99,10 @@ export default function index() {
             style={{
               height: StyleSheet.hairlineWidth,
             }}
-            className="bg-neutral-800 mx-2 my-4"
-          ></View>
+            className='bg-neutral-800 mx-2 my-4'
+          />
         ) : (
-          <View className="h-4" />
+          <View className='h-4' />
         )
       }
       estimatedItemSize={200}

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

@@ -3,15 +3,15 @@ import {
   nestedTabPageScreenOptions,
 } from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
-import { Platform } from "react-native";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 
 export default function SearchLayout() {
   const { t } = useTranslation();
   return (
     <Stack>
       <Stack.Screen
-        name="index"
+        name='index'
         options={{
           headerShown: true,
           headerLargeTitle: true,
@@ -20,7 +20,7 @@ export default function SearchLayout() {
             backgroundColor: "black",
           },
           headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}
       />
@@ -28,26 +28,26 @@ export default function SearchLayout() {
         <Stack.Screen key={name} name={name} options={options} />
       ))}
       <Stack.Screen
-        name="collections/[collectionId]"
+        name='collections/[collectionId]'
         options={{
           title: "",
           headerShown: true,
           headerBlurEffect: "prominent",
-          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerTransparent: Platform.OS === "ios",
           headerShadowVisible: false,
         }}
       />
-      <Stack.Screen name="jellyseerr/page" options={commonScreenOptions} />
+      <Stack.Screen name='jellyseerr/page' options={commonScreenOptions} />
       <Stack.Screen
-        name="jellyseerr/person/[personId]"
+        name='jellyseerr/person/[personId]'
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name="jellyseerr/company/[companyId]"
+        name='jellyseerr/company/[companyId]'
         options={commonScreenOptions}
       />
       <Stack.Screen
-        name="jellyseerr/genre/[genreId]"
+        name='jellyseerr/genre/[genreId]'
         options={commonScreenOptions}
       />
     </Stack>

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

@@ -1,10 +1,13 @@
-import { Input } from "@/components/common/Input";
-import { Text } from "@/components/common/Text";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import { Tag } from "@/components/GenreTags";
 import { ItemCardText } from "@/components/ItemCardText";
-import { JellyserrIndexPage } from "@/components/jellyseerr/JellyseerrIndexPage";
+import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
+import { FilterButton } from "@/components/filters/FilterButton";
+import {
+  JellyseerrSearchSort,
+  JellyserrIndexPage,
+} from "@/components/jellyseerr/JellyseerrIndexPage";
 import MoviePoster from "@/components/posters/MoviePoster";
 import SeriesPoster from "@/components/posters/SeriesPoster";
 import { LoadingSkeleton } from "@/components/search/LoadingSkeleton";
@@ -12,14 +15,15 @@ import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
-import {
+import { eventBus } from "@/utils/eventBus";
+import type {
   BaseItemDto,
   BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi, getSearchApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
-import { Href, router, useLocalSearchParams, useNavigation } from "expo-router";
+import { router, useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import React, {
   useCallback,
@@ -29,11 +33,10 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useDebounce } from "use-debounce";
-import { useTranslation } from "react-i18next";
-import { eventBus } from "@/utils/eventBus";
 
 type SearchType = "Library" | "Discover";
 
@@ -50,6 +53,8 @@ export default function search() {
   const params = useLocalSearchParams();
   const insets = useSafeAreaInsets();
 
+  const [user] = useAtom(userAtom);
+
   const { t } = useTranslation();
 
   const { q } = params as { q: string };
@@ -60,17 +65,27 @@ export default function search() {
   const [debouncedSearch] = useDebounce(search, 500);
 
   const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
 
   const [settings] = useSettings();
   const { jellyseerrApi } = useJellyseerr();
+  const [jellyseerrOrderBy, setJellyseerrOrderBy] =
+    useState<JellyseerrSearchSort>(
+      JellyseerrSearchSort[
+        JellyseerrSearchSort.DEFAULT
+      ] as unknown as JellyseerrSearchSort,
+    );
+  const [jellyseerrSortOrder, setJellyseerrSortOrder] = useState<
+    "asc" | "desc"
+  >("desc");
 
   const searchEngine = useMemo(() => {
     return settings?.searchEngine || "Jellyfin";
   }, [settings]);
 
   useEffect(() => {
-    if (q && q.length > 0) setSearch(q);
+    if (q && q.length > 0) {
+      setSearch(q);
+    }
   }, [q]);
 
   const searchFn = useCallback(
@@ -81,45 +96,52 @@ export default function search() {
       types: BaseItemKind[];
       query: string;
     }): Promise<BaseItemDto[]> => {
-      if (!api || !query) return [];
+      if (!api || !query) {
+        return [];
+      }
 
       try {
         if (searchEngine === "Jellyfin") {
-          const searchApi = await getSearchApi(api).getSearchHints({
+          const searchApi = await getItemsApi(api).getItems({
             searchTerm: query,
             limit: 10,
             includeItemTypes: types,
+            recursive: true,
+            userId: user?.Id,
           });
 
-          return (searchApi.data.SearchHints as BaseItemDto[]) || [];
-        } else {
-          if (!settings?.marlinServerUrl) return [];
-
-          const url = `${
-            settings.marlinServerUrl
-          }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
-            .map((type) => encodeURIComponent(type))
-            .join("&includeItemTypes=")}`;
-
-          const response1 = await axios.get(url);
-
-          const ids = response1.data.ids;
-
-          if (!ids || !ids.length) return [];
-
-          const response2 = await getItemsApi(api).getItems({
-            ids,
-            enableImageTypes: ["Primary", "Backdrop", "Thumb"],
-          });
-
-          return (response2.data.Items as BaseItemDto[]) || [];
+          return (searchApi.data.Items as BaseItemDto[]) || [];
         }
+        if (!settings?.marlinServerUrl) {
+          return [];
+        }
+
+        const url = `${
+          settings.marlinServerUrl
+        }/search?q=${encodeURIComponent(query)}&includeItemTypes=${types
+          .map((type) => encodeURIComponent(type))
+          .join("&includeItemTypes=")}`;
+
+        const response1 = await axios.get(url);
+
+        const ids = response1.data.ids;
+
+        if (!ids || !ids.length) {
+          return [];
+        }
+
+        const response2 = await getItemsApi(api).getItems({
+          ids,
+          enableImageTypes: ["Primary", "Backdrop", "Thumb"],
+        });
+
+        return (response2.data.Items as BaseItemDto[]) || [];
       } catch (error) {
         console.error("Error during search:", error);
         return []; // Ensure an empty array is returned in case of an error
       }
     },
-    [api, searchEngine, settings]
+    [api, searchEngine, settings],
   );
 
   type HeaderSearchBarRef = {
@@ -149,8 +171,10 @@ export default function search() {
 
   useEffect(() => {
     const unsubscribe = eventBus.on("searchTabPressed", () => {
-      // Screen not actuve
-      if (!searchBarRef.current) return;
+      // Screen not active
+      if (!searchBarRef.current) {
+        return;
+      }
       // Screen is active, focus search bar
       searchBarRef.current?.focus();
     });
@@ -227,25 +251,28 @@ export default function search() {
   return (
     <>
       <ScrollView
-        keyboardDismissMode="on-drag"
-        contentInsetAdjustmentBehavior="automatic"
+        keyboardDismissMode='on-drag'
+        contentInsetAdjustmentBehavior='automatic'
         contentContainerStyle={{
           paddingLeft: insets.left,
           paddingRight: insets.right,
         }}
       >
         <View
-          className="flex flex-col"
+          className='flex flex-col'
           style={{
             marginTop: Platform.OS === "android" ? 16 : 0,
           }}
         >
           {jellyseerrApi && (
-            <View className="flex flex-row flex-wrap space-x-2 px-4 mb-2">
+            <ScrollView
+              horizontal
+              className='flex flex-row flex-wrap space-x-2 px-4 mb-2'
+            >
               <TouchableOpacity onPress={() => setSearchType("Library")}>
                 <Tag
                   text={t("search.library")}
-                  textClass="p-1"
+                  textClass='p-1'
                   className={
                     searchType === "Library" ? "bg-purple-600" : undefined
                   }
@@ -254,16 +281,49 @@ export default function search() {
               <TouchableOpacity onPress={() => setSearchType("Discover")}>
                 <Tag
                   text={t("search.discover")}
-                  textClass="p-1"
+                  textClass='p-1'
                   className={
                     searchType === "Discover" ? "bg-purple-600" : undefined
                   }
                 />
               </TouchableOpacity>
-            </View>
+              {searchType === "Discover" &&
+                !loading &&
+                noResults &&
+                debouncedSearch.length > 0 && (
+                  <View className='flex flex-row justify-end items-center space-x-1'>
+                    <FilterButton
+                      id='search'
+                      queryKey='jellyseerr_search'
+                      queryFn={async () =>
+                        Object.keys(JellyseerrSearchSort).filter((v) =>
+                          Number.isNaN(Number(v)),
+                        )
+                      }
+                      set={(value) => setJellyseerrOrderBy(value[0])}
+                      values={[jellyseerrOrderBy]}
+                      title={t("library.filters.sort_by")}
+                      renderItemLabel={(item) =>
+                        t(`home.settings.plugins.jellyseerr.order_by.${item}`)
+                      }
+                      showSearch={false}
+                    />
+                    <FilterButton
+                      id='order'
+                      queryKey='jellysearr_search'
+                      queryFn={async () => ["asc", "desc"]}
+                      set={(value) => setJellyseerrSortOrder(value[0])}
+                      values={[jellyseerrSortOrder]}
+                      title={t("library.filters.sort_order")}
+                      renderItemLabel={(item) => t(`library.filters.${item}`)}
+                      showSearch={false}
+                    />
+                  </View>
+                )}
+            </ScrollView>
           )}
 
-          <View className="mt-2">
+          <View className='mt-2'>
             <LoadingSkeleton isLoading={loading} />
           </View>
 
@@ -271,50 +331,50 @@ export default function search() {
             <View className={l1 || l2 ? "opacity-0" : "opacity-100"}>
               <SearchItemWrapper
                 header={t("search.movies")}
-                ids={movies?.map((m) => m.Id!)}
+                items={movies}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
                     key={item.Id}
-                    className="flex flex-col w-28 mr-2"
+                    className='flex flex-col w-28 mr-2'
                     item={item}
                   >
                     <MoviePoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
+                    <Text numberOfLines={2} className='mt-2'>
                       {item.Name}
                     </Text>
-                    <Text className="opacity-50 text-xs">
+                    <Text className='opacity-50 text-xs'>
                       {item.ProductionYear}
                     </Text>
                   </TouchableItemRouter>
                 )}
               />
               <SearchItemWrapper
-                ids={series?.map((m) => m.Id!)}
+                items={series}
                 header={t("search.series")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
                     key={item.Id}
                     item={item}
-                    className="flex flex-col w-28 mr-2"
+                    className='flex flex-col w-28 mr-2'
                   >
                     <SeriesPoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
+                    <Text numberOfLines={2} className='mt-2'>
                       {item.Name}
                     </Text>
-                    <Text className="opacity-50 text-xs">
+                    <Text className='opacity-50 text-xs'>
                       {item.ProductionYear}
                     </Text>
                   </TouchableItemRouter>
                 )}
               />
               <SearchItemWrapper
-                ids={episodes?.map((m) => m.Id!)}
+                items={episodes}
                 header={t("search.episodes")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
                     item={item}
                     key={item.Id}
-                    className="flex flex-col w-44 mr-2"
+                    className='flex flex-col w-44 mr-2'
                   >
                     <ContinueWatchingPoster item={item} />
                     <ItemCardText item={item} />
@@ -322,29 +382,29 @@ export default function search() {
                 )}
               />
               <SearchItemWrapper
-                ids={collections?.map((m) => m.Id!)}
+                items={collections}
                 header={t("search.collections")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
                     key={item.Id}
                     item={item}
-                    className="flex flex-col w-28 mr-2"
+                    className='flex flex-col w-28 mr-2'
                   >
                     <MoviePoster item={item} key={item.Id} />
-                    <Text numberOfLines={2} className="mt-2">
+                    <Text numberOfLines={2} className='mt-2'>
                       {item.Name}
                     </Text>
                   </TouchableItemRouter>
                 )}
               />
               <SearchItemWrapper
-                ids={actors?.map((m) => m.Id!)}
+                items={actors}
                 header={t("search.actors")}
                 renderItem={(item: BaseItemDto) => (
                   <TouchableItemRouter
                     item={item}
                     key={item.Id}
-                    className="flex flex-col w-28 mr-2"
+                    className='flex flex-col w-28 mr-2'
                   >
                     <MoviePoster item={item} />
                     <ItemCardText item={item} />
@@ -353,35 +413,39 @@ export default function search() {
               />
             </View>
           ) : (
-            <JellyserrIndexPage searchQuery={debouncedSearch} />
+            <JellyserrIndexPage
+              searchQuery={debouncedSearch}
+              sortType={jellyseerrOrderBy}
+              order={jellyseerrSortOrder}
+            />
           )}
 
-          {searchType === "Library" && (
-            <>
-              {!loading && noResults && debouncedSearch.length > 0 ? (
-                <View>
-                  <Text className="text-center text-lg font-bold mt-4">
-                    {t("search.no_results_found_for")}
-                  </Text>
-                  <Text className="text-xs text-purple-600 text-center">
-                    "{debouncedSearch}"
-                  </Text>
-                </View>
-              ) : debouncedSearch.length === 0 ? (
-                <View className="mt-4 flex flex-col items-center space-y-2">
-                  {exampleSearches.map((e) => (
-                    <TouchableOpacity
-                      onPress={() => setSearch(e)}
-                      key={e}
-                      className="mb-2"
-                    >
-                      <Text className="text-purple-600">{e}</Text>
-                    </TouchableOpacity>
-                  ))}
-                </View>
-              ) : null}
-            </>
-          )}
+          {searchType === "Library" &&
+            (!loading && noResults && debouncedSearch.length > 0 ? (
+              <View>
+                <Text className='text-center text-lg font-bold mt-4'>
+                  {t("search.no_results_found_for")}
+                </Text>
+                <Text className='text-xs text-purple-600 text-center'>
+                  "{debouncedSearch}"
+                </Text>
+              </View>
+            ) : debouncedSearch.length === 0 ? (
+              <View className='mt-4 flex flex-col items-center space-y-2'>
+                {exampleSearches.map((e) => (
+                  <TouchableOpacity
+                    onPress={() => {
+                      setSearch(e);
+                      searchBarRef.current?.setText(e);
+                    }}
+                    key={e}
+                    className='mb-2'
+                  >
+                    <Text className='text-purple-600'>{e}</Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            ) : null)}
         </View>
       </ScrollView>
     </>

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

@@ -1,26 +1,26 @@
 import React, { useCallback, useRef } from "react";
-import { Platform } from "react-native";
 import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 
 import { useFocusEffect, useRouter, withLayoutContext } from "expo-router";
 
 import {
+  type NativeBottomTabNavigationEventMap,
   createNativeBottomTabNavigator,
-  NativeBottomTabNavigationEventMap,
 } from "@bottom-tabs/react-navigation";
 
 const { Navigator } = createNativeBottomTabNavigator();
-import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
+import type { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs";
 
 import { Colors } from "@/constants/Colors";
 import { useSettings } from "@/utils/atoms/settings";
+import { eventBus } from "@/utils/eventBus";
 import { storage } from "@/utils/mmkv";
 import type {
   ParamListBase,
   TabNavigationState,
 } from "@react-navigation/native";
 import { SystemBars } from "react-native-edge-to-edge";
-import { eventBus } from "@/utils/eventBus";
 
 export const NativeTabs = withLayoutContext<
   BottomTabNavigationOptions,
@@ -46,12 +46,12 @@ export default function TabLayout() {
           clearTimeout(timer);
         };
       }
-    }, [])
+    }, []),
   );
 
   return (
     <>
-      <SystemBars hidden={false} style="light" />
+      <SystemBars hidden={false} style='light' />
       <NativeTabs
         sidebarAdaptable={false}
         ignoresTopSafeArea
@@ -59,20 +59,20 @@ export default function TabLayout() {
           backgroundColor: "#121212",
         }}
         tabBarActiveTintColor={Colors.primary}
-        scrollEdgeAppearance="default"
+        scrollEdgeAppearance='default'
       >
-        <NativeTabs.Screen redirect name="index" />
+        <NativeTabs.Screen redirect name='index' />
         <NativeTabs.Screen
           listeners={({ navigation }) => ({
             tabPress: (e) => {
               eventBus.emit("scrollToTop");
             },
           })}
-          name="(home)"
+          name='(home)'
           options={{
             title: t("tabs.home"),
             tabBarIcon:
-              Platform.OS == "android"
+              Platform.OS === "android"
                 ? ({ color, focused, size }) =>
                     require("@/assets/icons/house.fill.png")
                 : ({ focused }) =>
@@ -87,11 +87,11 @@ export default function TabLayout() {
               eventBus.emit("searchTabPressed");
             },
           })}
-          name="(search)"
+          name='(search)'
           options={{
             title: t("tabs.search"),
             tabBarIcon:
-              Platform.OS == "android"
+              Platform.OS === "android"
                 ? ({ color, focused, size }) =>
                     require("@/assets/icons/magnifyingglass.png")
                 : ({ focused }) =>
@@ -101,11 +101,11 @@ export default function TabLayout() {
           }}
         />
         <NativeTabs.Screen
-          name="(favorites)"
+          name='(favorites)'
           options={{
             title: t("tabs.favorites"),
             tabBarIcon:
-              Platform.OS == "android"
+              Platform.OS === "android"
                 ? ({ color, focused, size }) =>
                     focused
                       ? require("@/assets/icons/heart.fill.png")
@@ -117,11 +117,11 @@ export default function TabLayout() {
           }}
         />
         <NativeTabs.Screen
-          name="(libraries)"
+          name='(libraries)'
           options={{
             title: t("tabs.library"),
             tabBarIcon:
-              Platform.OS == "android"
+              Platform.OS === "android"
                 ? ({ color, focused, size }) =>
                     require("@/assets/icons/server.rack.png")
                 : ({ focused }) =>
@@ -131,13 +131,13 @@ export default function TabLayout() {
           }}
         />
         <NativeTabs.Screen
-          name="(custom-links)"
+          name='(custom-links)'
           options={{
             title: t("tabs.custom_links"),
             // @ts-expect-error
-            tabBarItemHidden: settings?.showCustomMenuLinks ? false : true,
+            tabBarItemHidden: !settings?.showCustomMenuLinks,
             tabBarIcon:
-              Platform.OS == "android"
+              Platform.OS === "android"
                 ? ({ focused }) => require("@/assets/icons/list.png")
                 : ({ focused }) =>
                     focused

app/(auth)/player/_layout.tsx

@@ -1,39 +1,39 @@
-import { Stack } from "expo-router";
-import React, { useEffect } from "react";
-import { SystemBars } from "react-native-edge-to-edge";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useSettings } from "@/utils/atoms/settings";
+import { Stack } from "expo-router";
+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();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (Platform.isTV) return;
 
-    if (settings.defaultVideoOrientation) {
+    if (!settings.followDeviceOrientation && settings.defaultVideoOrientation) {
       ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
     }
 
     return () => {
       if (Platform.isTV) return;
 
-      if (settings.autoRotate === true) {
+      if (settings.followDeviceOrientation === true) {
         ScreenOrientation.unlockAsync();
       } else {
         ScreenOrientation.lockAsync(
-          ScreenOrientation.OrientationLock.PORTRAIT_UP
+          ScreenOrientation.OrientationLock.PORTRAIT_UP,
         );
       }
     };
-  }, [settings]);
+  });
 
   return (
     <>
       <SystemBars hidden />
       <Stack>
         <Stack.Screen
-          name="direct-player"
+          name='direct-player'
           options={{
             headerShown: false,
             autoHideHomeIndicator: true,

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

@@ -1,41 +1,53 @@
 import { BITRATES } from "@/components/BitrateSelector";
-import { Text } from "@/components/common/Text";
 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 { VlcPlayerView } from "@/modules/vlc-player";
-import {
-  OnDiscoveryStateChangedPayload,
+import { VlcPlayerView } from "@/modules";
+import type {
   PipStartedPayload,
   PlaybackStatePayload,
   ProgressUpdatePayload,
-  VlcPlayerViewRef, VLCRendererItem,
-} from "@/modules/vlc-player/src/VlcPlayer.types";
-const downloadProvider = !Platform.isTV ? require("@/providers/DownloadProvider") : null;
+  VlcPlayerViewRef,
+} from "@/modules/VlcPlayer.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 generateDeviceProfile 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";
+import {
+  getPlaystateApi,
+  getUserLibraryApi,
+} from "@jellyfin/sdk/lib/utils/api";
 import { activateKeepAwakeAsync, deactivateKeepAwake } from "expo-keep-awake";
-import { getPlaystateApi, getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
-import { useHaptic } from "@/hooks/useHaptic";
 import { useGlobalSearchParams, useNavigation } from "expo-router";
 import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState, useEffect } from "react";
-import { Alert, View, Platform } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import { useSettings } from "@/utils/atoms/settings";
+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 { BaseItemDto, MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client";
-import {BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal, BottomSheetView} from "@gorhom/bottom-sheet";
-import {ListGroup} from "@/components/list/ListGroup";
-import {ListItem} from "@/components/list/ListItem";
-import {storage} from "@/utils/mmkv";
-import {t} from "i18next";
+const downloadProvider = !Platform.isTV
+  ? require("@/providers/DownloadProvider")
+  : null;
 
 export default function page() {
   const videoRef = useRef<VlcPlayerViewRef>(null);
@@ -48,15 +60,18 @@ export default function page() {
   const [showControls, _setShowControls] = useState(true);
   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);
-  const [rendererItems, setRendererItems] = useState<VLCRendererItem[]>([]);
-  const discoveryModal = useRef<BottomSheetModal>(null);
 
   const progress = useSharedValue(0);
   const isSeeking = useSharedValue(false);
   const cacheProgress = useSharedValue(0);
+  const VolumeManager = Platform.isTV
+    ? null
+    : require("react-native-volume-manager");
+
   let getDownloadedItem = null;
   if (!Platform.isTV) {
     getDownloadedItem = downloadProvider.useDownload();
@@ -90,9 +105,15 @@ export default function page() {
   const insets = useSafeAreaInsets();
   const offline = offlineStr === "true";
 
-  const audioIndex = audioIndexStr ? parseInt(audioIndexStr, 10) : undefined;
-  const subtitleIndex = subtitleIndexStr ? parseInt(subtitleIndexStr, 10) : -1;
-  const bitrateValue = bitrateValueStr ? parseInt(bitrateValueStr, 10) : BITRATES[0].value;
+  const audioIndex = audioIndexStr
+    ? Number.parseInt(audioIndexStr, 10)
+    : undefined;
+  const subtitleIndex = subtitleIndexStr
+    ? Number.parseInt(subtitleIndexStr, 10)
+    : -1;
+  const bitrateValue = bitrateValueStr
+    ? Number.parseInt(bitrateValueStr, 10)
+    : BITRATES[0].value;
 
   const [item, setItem] = useState<BaseItemDto | null>(null);
   const [itemStatus, setItemStatus] = useState({
@@ -116,11 +137,10 @@ 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 });
       }
     };
 
@@ -143,6 +163,8 @@ export default function page() {
 
   useEffect(() => {
     const fetchStreamData = async () => {
+      setStreamStatus({ isLoading: true, isError: false });
+      const native = await generateDeviceProfile();
       try {
         let result: Stream | null = null;
         if (offline && !Platform.isTV) {
@@ -167,32 +189,49 @@ export default function page() {
           if (!res) return;
           const { mediaSource, sessionId, url } = res;
           if (!sessionId || !mediaSource || !url) {
-            Alert.alert(t("player.error"), t("player.failed_to_get_stream_url"));
+            Alert.alert(
+              t("player.error"),
+              t("player.failed_to_get_stream_url"),
+            );
             return;
           }
           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]);
 
-  const togglePlay = useCallback(async () => {
-    if (!api) return;
+  useEffect(() => {
+    if (!stream) return;
 
+    const reportPlaybackStart = async () => {
+      await getPlaystateApi(api!).reportPlaybackStart({
+        playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
+      });
+    };
+
+    reportPlaybackStart();
+  }, [stream]);
+
+  const togglePlay = async () => {
     lightHapticFeedback();
+    setIsPlaying(!isPlaying);
     if (isPlaying) {
       await videoRef.current?.pause();
+      reportPlaybackProgress();
     } else {
       videoRef.current?.play();
+      await getPlaystateApi(api!).reportPlaybackStart({
+        playbackStartInfo: currentPlayStateInfo() as PlaybackStartInfo,
+      });
     }
-  }, [isPlaying, api, item, stream, videoRef, audioIndex, subtitleIndex, mediaSourceId, offline, progress]);
+  };
 
   const reportPlaybackStopped = useCallback(async () => {
     if (offline) return;
@@ -205,7 +244,15 @@ export default function page() {
     });
 
     revalidateProgressCache();
-  }, [api, item, mediaSourceId, stream]);
+  }, [
+    api,
+    item,
+    mediaSourceId,
+    stream,
+    progress,
+    offline,
+    revalidateProgressCache,
+  ]);
 
   const stop = useCallback(() => {
     reportPlaybackStopped();
@@ -220,6 +267,24 @@ export default function page() {
     };
   }, [navigation, stop]);
 
+  const currentPlayStateInfo = () => {
+    if (!stream) return;
+    return {
+      itemId: item?.Id!,
+      audioStreamIndex: audioIndex ? audioIndex : undefined,
+      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
+      mediaSourceId: mediaSourceId,
+      positionTicks: msToTicks(progress.get()),
+      isPaused: !isPlaying,
+      playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
+      playSessionId: stream.sessionId,
+      isMuted: isMuted,
+      canSeek: true,
+      repeatMode: RepeatMode.RepeatNone,
+      playbackOrder: PlaybackOrder.Default,
+    };
+  };
+
   const onProgress = useCallback(
     async (data: ProgressUpdatePayload) => {
       if (isSeeking.get() || isPlaybackStopped) return;
@@ -233,104 +298,143 @@ export default function page() {
 
       if (offline) return;
 
-      const currentTimeInTicks = msToTicks(currentTime);
-
       if (!item?.Id || !stream) return;
 
-      await getPlaystateApi(api!).onPlaybackProgress({
-        itemId: item.Id,
-        audioStreamIndex: audioIndex ? audioIndex : undefined,
-        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-        mediaSourceId: mediaSourceId,
-        positionTicks: Math.floor(currentTimeInTicks),
-        isPaused: !isPlaying,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream.sessionId,
-      });
+      reportPlaybackProgress();
     },
-    [item?.Id, audioIndex, subtitleIndex, mediaSourceId, isPlaying, stream, isSeeking, isPlaybackStopped, isBuffering]
+    [
+      item?.Id,
+      audioIndex,
+      subtitleIndex,
+      mediaSourceId,
+      isPlaying,
+      stream,
+      isSeeking,
+      isPlaybackStopped,
+      isBuffering,
+    ],
   );
 
-  const changePlaybackState = useCallback(
-    async (isPlaying: boolean) => {
-      if (!api || offline || !stream) return;
-      await getPlaystateApi(api).onPlaybackProgress({
-        itemId: item?.Id!,
-        audioStreamIndex: audioIndex ? audioIndex : undefined,
-        subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-        mediaSourceId: mediaSourceId,
-        positionTicks: msToTicks(progress.get()),
-        isPaused: !isPlaying,
-        playMethod: stream?.url.includes("m3u8") ? "Transcode" : "DirectStream",
-        playSessionId: stream.sessionId,
-      });
-    },
-    [api, offline, stream, item?.Id, audioIndex, subtitleIndex, mediaSourceId, progress]
-  );
-
-  const startPosition = useMemo(() => {
-    if (offline) return 0;
-    return item?.UserData?.PlaybackPositionTicks ? ticksToSeconds(item.UserData.PlaybackPositionTicks) : 0;
-  }, [item]);
-
-  const reportPlaybackStart = useCallback(async () => {
-    if (offline || !stream) return;
-    await getPlaystateApi(api!).onPlaybackStart({
-      itemId: item?.Id!,
-      audioStreamIndex: audioIndex ? audioIndex : undefined,
-      subtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
-      mediaSourceId: mediaSourceId,
-      playMethod: stream.url?.includes("m3u8") ? "Transcode" : "DirectStream",
-      playSessionId: stream?.sessionId ? stream?.sessionId : undefined,
-    });
-    hasReportedRef.current = true;
-  }, [api, item, stream]);
-
-  const hasReportedRef = useRef(false);
-  useEffect(() => {
-    if (stream && !hasReportedRef.current) {
-      reportPlaybackStart();
-      hasReportedRef.current = true; // Mark as reported
-    }
-  }, [stream]);
-
-  useWebSocket({
-    isPlaying: isPlaying,
-    togglePlay: togglePlay,
-    stopPlayback: stop,
-    offline,
-  });
-
   const onPipStarted = useCallback((e: PipStartedPayload) => {
     const { pipStarted } = e.nativeEvent;
     setIsPipStarted(pipStarted);
   }, []);
 
-  const onDiscoveryStateChanged = useCallback((e: OnDiscoveryStateChangedPayload) => {
-    const {renderers} = e.nativeEvent;
-    setRendererItems(renderers);
+  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(() => {
+    if (offline) return 0;
+    return item?.UserData?.PlaybackPositionTicks
+      ? ticksToSeconds(item.UserData.PlaybackPositionTicks)
+      : 0;
+  }, [item, offline]);
+
+  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 startDiscovery = useCallback(async () => {
-    videoRef?.current?.pause?.()
-    videoRef?.current?.stopDiscovery?.()
-    videoRef?.current?.startDiscovery?.()
-    discoveryModal?.current?.present?.()
-  }, [rendererItems, videoRef])
+  const setVolumeCb = useCallback(async (newVolume: number) => {
+    if (Platform.isTV) return;
 
-  const onPlaybackStateChanged = useCallback(async (e: PlaybackStatePayload) => {
-    const { state, isBuffering, isPlaying } = e.nativeEvent;
+    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);
+    }
+  }, []);
 
+  useWebSocket({
+    isPlaying: isPlaying,
+    togglePlay: togglePlay,
+    stopPlayback: stop,
+    offline,
+    toggleMute: toggleMuteCb,
+    volumeUp: volumeUpCb,
+    volumeDown: volumeDownCb,
+    setVolume: setVolumeCb,
+  });
+
+  const onPlaybackStateChanged = useCallback(
+    async (e: PlaybackStatePayload) => {
+      const { state, isBuffering, isPlaying } = e.nativeEvent;
       if (state === "Playing") {
         setIsPlaying(true);
-        await changePlaybackState(true);
+        reportPlaybackProgress();
         if (!Platform.isTV) await activateKeepAwakeAsync();
         return;
       }
 
       if (state === "Paused") {
         setIsPlaying(false);
-        await changePlaybackState(false);
+        reportPlaybackProgress();
         if (!Platform.isTV) await deactivateKeepAwake();
         return;
       }
@@ -342,16 +446,19 @@ export default function page() {
         setIsBuffering(true);
       }
     },
-    [changePlaybackState]
+    [reportPlaybackProgress],
   );
 
-  const allAudio = stream?.mediaSource.MediaStreams?.filter((audio) => audio.Type === "Audio") || [];
+  const allAudio =
+    stream?.mediaSource.MediaStreams?.filter(
+      (audio) => audio.Type === "Audio",
+    ) || [];
 
   // Move all the external subtitles last, because vlc places them last.
   const allSubs =
-    stream?.mediaSource.MediaStreams?.filter((sub) => sub.Type === "Subtitle").sort(
-      (a, b) => Number(a.IsExternal) - Number(b.IsExternal)
-    ) || [];
+    stream?.mediaSource.MediaStreams?.filter(
+      (sub) => sub.Type === "Subtitle",
+    ).sort((a, b) => Number(a.IsExternal) - Number(b.IsExternal)) || [];
 
   const externalSubtitles = allSubs
     .filter((sub: any) => sub.DeliveryMethod === "External")
@@ -362,13 +469,20 @@ export default function page() {
 
   const textSubs = allSubs.filter((sub) => sub.IsTextSubtitleStream);
 
-  const chosenSubtitleTrack = allSubs.find((sub) => sub.Index === subtitleIndex);
+  const chosenSubtitleTrack = allSubs.find(
+    (sub) => sub.Index === subtitleIndex,
+  );
   const chosenAudioTrack = allAudio.find((audio) => audio.Index === audioIndex);
 
   const notTranscoding = !stream?.mediaSource.TranscodingUrl;
-  let initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
-  if (chosenSubtitleTrack && (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)) {
-    const finalIndex = notTranscoding ? allSubs.indexOf(chosenSubtitleTrack) : textSubs.indexOf(chosenSubtitleTrack);
+  const initOptions = [`--sub-text-scale=${settings.subtitleSize}`];
+  if (
+    chosenSubtitleTrack &&
+    (notTranscoding || chosenSubtitleTrack.IsTextSubtitleStream)
+  ) {
+    const finalIndex = notTranscoding
+      ? allSubs.indexOf(chosenSubtitleTrack)
+      : textSubs.indexOf(chosenSubtitleTrack);
     initOptions.push(`--sub-track=${finalIndex}`);
   }
 
@@ -384,18 +498,18 @@ export default function page() {
     return () => setIsMounted(false);
   }, []);
 
-  if (itemStatus.isLoading || streamStatus.isLoading) {
+  if (itemStatus.isLoading || streamStatus.isLoading || !item || !stream) {
     return (
-      <View className="w-screen h-screen flex flex-col items-center justify-center bg-black">
+      <View className='w-screen h-screen flex flex-col items-center justify-center bg-black'>
         <Loader />
       </View>
     );
   }
 
-  if (!item || !stream || itemStatus.isError || streamStatus.isError)
+  if (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>
+      <View className='w-screen h-screen flex flex-col items-center justify-center bg-black'>
+        <Text className='text-white'>{t("player.error")}</Text>
       </View>
     );
 
@@ -428,88 +542,48 @@ export default function page() {
           progressUpdateInterval={1000}
           onVideoStateChange={onPlaybackStateChanged}
           onPipStarted={onPipStarted}
-          onDiscoveryStateChanged={onDiscoveryStateChanged}
           onVideoLoadEnd={() => {
             setIsVideoLoaded(true);
           }}
           onVideoError={(e) => {
             console.error("Video Error:", e.nativeEvent);
-            Alert.alert(t("player.error"), t("player.an_error_occured_while_playing_the_video"));
+            Alert.alert(
+              t("player.error"),
+              t("player.an_error_occured_while_playing_the_video"),
+            );
             writeToLog("ERROR", "Video Error", e.nativeEvent);
           }}
         />
       </View>
       {videoRef.current && !isPipStarted && isMounted === true ? (
-        <>
-          <Controls
-            mediaSource={stream?.mediaSource}
-            item={item}
-            videoRef={videoRef}
-            togglePlay={togglePlay}
-            isPlaying={isPlaying}
-            isSeeking={isSeeking}
-            progress={progress}
-            cacheProgress={cacheProgress}
-            isBuffering={isBuffering}
-            showControls={showControls}
-            setShowControls={setShowControls}
-            setIgnoreSafeAreas={setIgnoreSafeAreas}
-            ignoreSafeAreas={ignoreSafeAreas}
-            isVideoLoaded={isVideoLoaded}
-            startPictureInPicture={videoRef?.current?.startPictureInPicture}
-            play={videoRef.current?.play}
-            pause={videoRef.current?.pause}
-            seek={videoRef.current?.seekTo}
-            enableTrickplay={true}
-            getAudioTracks={videoRef.current?.getAudioTracks}
-            getSubtitleTracks={videoRef.current?.getSubtitleTracks}
-            offline={offline}
-            setSubtitleTrack={videoRef.current.setSubtitleTrack}
-            setSubtitleURL={videoRef.current.setSubtitleURL}
-            setAudioTrack={videoRef.current.setAudioTrack}
-            startDiscovery={startDiscovery}
-            isVlc
-          />
-          <BottomSheetModal
-            ref={discoveryModal}
-            enableDynamicSizing
-            enableDismissOnClose
-            snapPoints={["100%"]}
-            onDismiss={() => {
-              videoRef.current?.stopDiscovery?.()
-              videoRef.current?.play?.()
-            }}
-            handleIndicatorStyle={{
-              backgroundColor: "white",
-            }}
-            backgroundStyle={{
-              backgroundColor: "#171717",
-            }}
-            backdropComponent={(sheetProps: BottomSheetBackdropProps) =>
-              <BottomSheetBackdrop
-                {...sheetProps}
-                disappearsOnIndex={-1}
-                appearsOnIndex={0}
-              />
-            }
-          >
-            <BottomSheetView>
-              <ListGroup title={t("player.device_discovery")} className="mt-4 h-1/3">
-                {rendererItems.map((renderItem, index) => (
-                  <ListItem
-                    onPress={() => {
-                      // todo: set renderer item on player to change to device
-                    }}
-                    icon="cast"
-                    title={renderItem.name}
-                    key={index}
-                  />
-                ))}
-              </ListGroup>
-
-            </BottomSheetView>
-          </BottomSheetModal>
-        </>
+        <Controls
+          mediaSource={stream?.mediaSource}
+          item={item}
+          videoRef={videoRef}
+          togglePlay={togglePlay}
+          isPlaying={isPlaying}
+          isSeeking={isSeeking}
+          progress={progress}
+          cacheProgress={cacheProgress}
+          isBuffering={isBuffering}
+          showControls={showControls}
+          setShowControls={setShowControls}
+          setIgnoreSafeAreas={setIgnoreSafeAreas}
+          ignoreSafeAreas={ignoreSafeAreas}
+          isVideoLoaded={isVideoLoaded}
+          startPictureInPicture={videoRef?.current?.startPictureInPicture}
+          play={videoRef.current?.play}
+          pause={videoRef.current?.pause}
+          seek={videoRef.current?.seekTo}
+          enableTrickplay={true}
+          getAudioTracks={videoRef.current?.getAudioTracks}
+          getSubtitleTracks={videoRef.current?.getSubtitleTracks}
+          offline={offline}
+          setSubtitleTrack={videoRef.current.setSubtitleTrack}
+          setSubtitleURL={videoRef.current.setSubtitleURL}
+          setAudioTrack={videoRef.current.setAudioTrack}
+          isVlc
+        />
       ) : null}
     </View>
   );

app/+html.tsx

@@ -1,5 +1,5 @@
 import { ScrollViewStyleReset } from "expo-router/html";
-import { type PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
 
 /**
  * This file is web-only and used to configure the root HTML for every web page during static rendering.
@@ -7,13 +7,13 @@ import { type PropsWithChildren } from "react";
  */
 export default function Root({ children }: PropsWithChildren) {
   return (
-    <html lang="en">
+    <html lang='en'>
       <head>
-        <meta charSet="utf-8" />
-        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <meta httpEquiv='X-UA-Compatible' content='IE=edge' />
         <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          name='viewport'
+          content='width=device-width, initial-scale=1, shrink-to-fit=no'
         />
 
         {/*

app/+not-found.tsx

@@ -9,9 +9,9 @@ export default function NotFoundScreen() {
     <>
       <Stack.Screen options={{ title: "Oops!" }} />
       <ThemedView style={styles.container}>
-        <ThemedText type="title">This screen doesn't exist.</ThemedText>
+        <ThemedText type='title'>This screen doesn't exist.</ThemedText>
         <Link href={"/home"} style={styles.link}>
-          <ThemedText type="link">Go to home screen!</ThemedText>
+          <ThemedText type='link'>Go to home screen!</ThemedText>
         </Link>
       </ThemedView>
     </>

app/_layout.tsx

@@ -1,23 +1,33 @@
 import "@/augmentations";
-import { Platform } from "react-native";
 import i18n from "@/i18n";
 import { DownloadProvider } from "@/providers/DownloadProvider";
 import {
+  JellyfinProvider,
+  apiAtom,
   getOrSetDeviceId,
   getTokenFromStorage,
-  JellyfinProvider,
 } from "@/providers/JellyfinProvider";
 import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { PlaySettingsProvider } from "@/providers/PlaySettingsProvider";
 import { WebSocketProvider } from "@/providers/WebSocketProvider";
-import { Settings, useSettings } from "@/utils/atoms/settings";
-import { BACKGROUND_FETCH_TASK } from "@/utils/background-tasks";
-import { LogProvider, writeToLog } from "@/utils/log";
+import { type Settings, useSettings } from "@/utils/atoms/settings";
+import {
+  BACKGROUND_FETCH_TASK,
+  BACKGROUND_FETCH_TASK_SESSIONS,
+  registerBackgroundFetchAsyncSessions,
+} from "@/utils/background-tasks";
+import {
+  LogProvider,
+  writeDebugLog,
+  writeErrorLog,
+  writeToLog,
+} from "@/utils/log";
 import { storage } from "@/utils/mmkv";
 import { cancelJobById, getAllJobsByDeviceId } from "@/utils/optimize-server";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { Platform } from "react-native";
 const BackGroundDownloader = !Platform.isTV
   ? require("@kesha-antonov/react-native-background-downloader")
   : null;
@@ -26,20 +36,31 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 const BackgroundFetch = !Platform.isTV
   ? require("expo-background-fetch")
   : null;
+import * as Device from "expo-device";
 import * as FileSystem from "expo-file-system";
 const Notifications = !Platform.isTV ? require("expo-notifications") : null;
-import { router, Stack } from "expo-router";
-import * as SplashScreen from "expo-splash-screen";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { Stack, router, useSegments } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
 const TaskManager = !Platform.isTV ? require("expo-task-manager") : null;
 import { getLocales } from "expo-localization";
 import { Provider as JotaiProvider } from "jotai";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { I18nextProvider } from "react-i18next";
-import { Appearance, AppState } from "react-native";
+import { AppState, Appearance } from "react-native";
 import { SystemBars } from "react-native-edge-to-edge";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
+import { userAtom } from "@/providers/JellyfinProvider";
+import { store } from "@/utils/store";
+import { getSessionApi } from "@jellyfin/sdk/lib/utils/api/session-api";
+import type { EventSubscription } from "expo-modules-core";
+import type {
+  Notification,
+  NotificationResponse,
+} from "expo-notifications/build/Notifications.types";
+import type { ExpoPushToken } from "expo-notifications/build/Tokens.types";
+import { useAtom } from "jotai";
 import { Toaster } from "sonner-native";
 
 if (!Platform.isTV) {
@@ -80,13 +101,13 @@ function useNotificationObserver() {
           return;
         }
         redirect(response?.notification);
-      }
+      },
     );
 
     const subscription = Notifications.addNotificationResponseReceivedListener(
       (response: { notification: any }) => {
         redirect(response.notification);
-      }
+      },
     );
 
     return () => {
@@ -97,6 +118,22 @@ function useNotificationObserver() {
 }
 
 if (!Platform.isTV) {
+  TaskManager.defineTask(BACKGROUND_FETCH_TASK_SESSIONS, async () => {
+    console.log("TaskManager ~ sessions trigger");
+
+    const api = store.get(apiAtom);
+    if (api === null || api === undefined) return;
+
+    const response = await getSessionApi(api).getSessions({
+      activeWithinSeconds: 360,
+    });
+
+    const result = response.data.filter((s) => s.NowPlayingItem);
+    Notifications.setBadgeCountAsync(result.length);
+
+    return BackgroundFetch.BackgroundFetchResult.NewData;
+  });
+
   TaskManager.defineTask(BACKGROUND_FETCH_TASK, async () => {
     console.log("TaskManager ~ trigger");
 
@@ -127,9 +164,9 @@ if (!Platform.isTV) {
 
     console.log("TaskManager ~ Active jobs: ", jobs.length);
 
-    for (let job of jobs) {
+    for (const job of jobs) {
       if (job.status === "completed") {
-        const downloadUrl = url + "download/" + job.id;
+        const downloadUrl = `${url}download/${job.id}`;
         const tasks = await BackGroundDownloader.checkForExistingDownloads();
 
         if (tasks.find((task: { id: string }) => task.id === job.id)) {
@@ -162,7 +199,7 @@ if (!Platform.isTV) {
                 title: job.item.Name,
                 body: "Download completed",
                 data: {
-                  url: `/downloads`,
+                  url: "/downloads",
                 },
               },
               trigger: null,
@@ -176,7 +213,7 @@ if (!Platform.isTV) {
                 title: job.item.Name,
                 body: "Download failed",
                 data: {
-                  url: `/downloads`,
+                  url: "/downloads",
                 },
               },
               trigger: null,
@@ -195,7 +232,7 @@ if (!Platform.isTV) {
 const checkAndRequestPermissions = async () => {
   try {
     const hasAskedBefore = storage.getString(
-      "hasAskedForNotificationPermission"
+      "hasAskedForNotificationPermission",
     );
 
     if (hasAskedBefore !== "true") {
@@ -217,7 +254,7 @@ const checkAndRequestPermissions = async () => {
     writeToLog(
       "ERROR",
       "Error checking/requesting notification permissions:",
-      error
+      error,
     );
     console.error("Error checking/requesting notification permissions:", error);
   }
@@ -253,33 +290,145 @@ const queryClient = new QueryClient({
 
 function Layout() {
   const [settings] = useSettings();
+  const [user] = useAtom(userAtom);
+  const [api] = useAtom(apiAtom);
   const appState = useRef(AppState.currentState);
+  const segments = useSegments();
 
   useEffect(() => {
     i18n.changeLanguage(
-      settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en"
+      settings?.preferedLanguage ?? getLocales()[0].languageCode ?? "en",
     );
   }, [settings?.preferedLanguage, i18n]);
 
   if (!Platform.isTV) {
     useNotificationObserver();
 
+    const [expoPushToken, setExpoPushToken] = useState<ExpoPushToken>();
+    const notificationListener = useRef<EventSubscription>();
+    const responseListener = useRef<EventSubscription>();
+
     useEffect(() => {
-      checkAndRequestPermissions();
+      if (expoPushToken && api && user) {
+        api
+          ?.post("/Streamyfin/device", {
+            token: expoPushToken.data,
+            deviceId: getOrSetDeviceId(),
+            userId: user.Id,
+          })
+          .then((_) => console.log("Posted expo push token"))
+          .catch((_) =>
+            writeErrorLog("Failed to push expo push token to plugin"),
+          );
+      } else console.log("No token available");
+    }, [api, expoPushToken, user]);
+
+    async function registerNotifications() {
+      if (Platform.OS === "android") {
+        console.log("Setting android notification channel 'default'");
+        await Notifications?.setNotificationChannelAsync("default", {
+          name: "default",
+        });
+      }
+
+      await checkAndRequestPermissions();
+
+      if (!Platform.isTV && user && user.Policy?.IsAdministrator) {
+        await registerBackgroundFetchAsyncSessions();
+      }
+
+      // only create push token for real devices (pointless for emulators)
+      if (Device.isDevice) {
+        Notifications?.getExpoPushTokenAsync()
+          .then((token: ExpoPushToken) => token && setExpoPushToken(token))
+          .catch((reason: any) => console.log("Failed to get token", reason));
+      }
+    }
+
+    useEffect(() => {
+      registerNotifications();
+
+      notificationListener.current =
+        Notifications?.addNotificationReceivedListener(
+          (notification: Notification) => {
+            console.log(
+              "Notification received while app running",
+              notification,
+            );
+          },
+        );
+
+      responseListener.current =
+        Notifications?.addNotificationResponseReceivedListener(
+          (response: NotificationResponse) => {
+            // Currently the notifications supported by the plugin will send data for deep links.
+            const { title, data } = response.notification.request.content;
+
+            writeDebugLog(
+              `Notification ${title} opened`,
+              response.notification.request.content,
+            );
+
+            if (data && Object.keys(data).length > 0) {
+              const type = data?.type?.toLower?.();
+              const itemId = data?.id;
+
+              switch (type) {
+                case "movie":
+                  router.push(`/(auth)/(tabs)/home/items/page?id=${itemId}`);
+                  break;
+                case "episode":
+                  // We just clicked a notification for an individual episode.
+                  if (itemId) {
+                    router.push(`/(auth)/(tabs)/home/items/page?id=${itemId}`);
+                  }
+                  // summarized season notification for multiple episodes. Bring them to series season
+                  else {
+                    const seriesId = data.seriesId;
+                    const seasonIndex = data.seasonIndex;
+
+                    if (seasonIndex) {
+                      router.push(
+                        `/(auth)/(tabs)/home/series/${seriesId}?seasonIndex=${seasonIndex}`,
+                      );
+                    } else {
+                      router.push(`/(auth)/(tabs)/home/series/${seriesId}`);
+                    }
+                  }
+                  break;
+              }
+            }
+          },
+        );
+
+      return () => {
+        notificationListener.current &&
+          Notifications?.removeNotificationSubscription(
+            notificationListener.current,
+          );
+        responseListener.current &&
+          Notifications?.removeNotificationSubscription(
+            responseListener.current,
+          );
+      };
     }, []);
 
     useEffect(() => {
-      // If the user has auto rotate enabled, unlock the orientation
       if (Platform.isTV) return;
-      if (settings.autoRotate === true) {
+      if (segments.includes("direct-player" as never)) {
+        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
+          ScreenOrientation.OrientationLock.PORTRAIT_UP,
         );
       }
-    }, [settings]);
+    }, [settings.followDeviceOrientation, segments]);
 
     useEffect(() => {
       const subscription = AppState.addEventListener(
@@ -291,7 +440,7 @@ function Layout() {
           ) {
             BackGroundDownloader.checkForExistingDownloads();
           }
-        }
+        },
       );
 
       BackGroundDownloader.checkForExistingDownloads();
@@ -311,11 +460,11 @@ function Layout() {
               <WebSocketProvider>
                 <DownloadProvider>
                   <BottomSheetModalProvider>
-                    <SystemBars style="light" hidden={false} />
+                    <SystemBars style='light' hidden={false} />
                     <ThemeProvider value={DarkTheme}>
-                      <Stack initialRouteName="(auth)/(tabs)">
+                      <Stack initialRouteName='(auth)/(tabs)'>
                         <Stack.Screen
-                          name="(auth)/(tabs)"
+                          name='(auth)/(tabs)'
                           options={{
                             headerShown: false,
                             title: "",
@@ -323,7 +472,7 @@ function Layout() {
                           }}
                         />
                         <Stack.Screen
-                          name="(auth)/player"
+                          name='(auth)/player'
                           options={{
                             headerShown: false,
                             title: "",
@@ -331,14 +480,14 @@ function Layout() {
                           }}
                         />
                         <Stack.Screen
-                          name="login"
+                          name='login'
                           options={{
                             headerShown: true,
                             title: "",
                             headerTransparent: true,
                           }}
                         />
-                        <Stack.Screen name="+not-found" />
+                        <Stack.Screen name='+not-found' />
                       </Stack>
                       <Toaster
                         duration={4000}
@@ -369,7 +518,7 @@ function Layout() {
 function saveDownloadedItemInfo(item: BaseItemDto) {
   try {
     const downloadedItems = storage.getString("downloadedItems");
-    let items: BaseItemDto[] = downloadedItems
+    const items: BaseItemDto[] = downloadedItems
       ? JSON.parse(downloadedItems)
       : [];
 

app/login.tsx

@@ -1,16 +1,17 @@
 import { Button } from "@/components/Button";
-import { Input } from "@/components/common/Input";
-import { Text } from "@/components/common/Text";
 import JellyfinServerDiscovery from "@/components/JellyfinServerDiscovery";
 import { PreviousServersList } from "@/components/PreviousServersList";
+import { Input } from "@/components/common/Input";
+import { Text } from "@/components/common/Text";
 import { Colors } from "@/constants/Colors";
 import { apiAtom, useJellyfin } from "@/providers/JellyfinProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
+import type { PublicSystemInfo } from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import { useAtom, useAtomValue } from "jotai";
-import React, { useCallback, useEffect, useState } from "react";
+import { useAtomValue } from "jotai";
+import type React from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   Alert,
   KeyboardAvoidingView,
@@ -21,8 +22,8 @@ import {
 } from "react-native";
 import { Keyboard } from "react-native";
 
-import { z } from "zod";
 import { t } from "i18next";
+import { z } from "zod";
 const CredentialsSchema = z.object({
   username: z.string().min(1, t("login.username_required")),
 });
@@ -58,7 +59,7 @@ const Login: React.FC = () => {
   useEffect(() => {
     (async () => {
       if (_apiUrl) {
-        setServer({
+        await setServer({
           address: _apiUrl,
         });
 
@@ -81,10 +82,10 @@ const Login: React.FC = () => {
             onPress={() => {
               removeServer();
             }}
-            className="flex flex-row items-center"
+            className='flex flex-row items-center'
           >
-            <Ionicons name="chevron-back" size={18} color={Colors.primary} />
-            <Text className="ml-2 text-purple-600">
+            <Ionicons name='chevron-back' size={18} color={Colors.primary} />
+            <Text className='ml-2 text-purple-600'>
               {t("login.change_server")}
             </Text>
           </TouchableOpacity>
@@ -107,7 +108,7 @@ const Login: React.FC = () => {
       } else {
         Alert.alert(
           t("login.connection_failed"),
-          t("login.an_unexpected_error_occured")
+          t("login.an_unexpected_error_occured"),
         );
       }
     } finally {
@@ -176,12 +177,12 @@ const Login: React.FC = () => {
     if (result === undefined) {
       Alert.alert(
         t("login.connection_failed"),
-        t("login.could_not_connect_to_server")
+        t("login.could_not_connect_to_server"),
       );
       return;
     }
 
-    setServer({ address: url });
+    await setServer({ address: url });
   }, []);
 
   const handleQuickConnect = async () => {
@@ -195,13 +196,13 @@ const Login: React.FC = () => {
             {
               text: t("login.got_it"),
             },
-          ]
+          ],
         );
       }
     } catch (error) {
       Alert.alert(
         t("login.error_title"),
-        t("login.failed_to_initiate_quick_connect")
+        t("login.failed_to_initiate_quick_connect"),
       );
     }
   };
@@ -213,22 +214,20 @@ const Login: React.FC = () => {
       >
         {api?.basePath ? (
           <>
-            <View className="flex flex-col h-full relative items-center justify-center">
-              <View className="px-4 -mt-20 w-full">
-                <View className="flex flex-col space-y-2">
-                  <Text className="text-2xl font-bold -mb-2">
-                    <>
-                      {serverName ? (
-                        <>
-                          {t("login.login_to_title") + " "}
-                          <Text className="text-purple-600">{serverName}</Text>
-                        </>
-                      ) : (
-                        t("login.login_title")
-                      )}
-                    </>
+            <View className='flex flex-col h-full relative items-center justify-center'>
+              <View className='px-4 -mt-20 w-full'>
+                <View className='flex flex-col space-y-2'>
+                  <Text className='text-2xl font-bold -mb-2'>
+                    {serverName ? (
+                      <>
+                        {`${t("login.login_to_title")} `}
+                        <Text className='text-purple-600'>{serverName}</Text>
+                      </>
+                    ) : (
+                      t("login.login_title")
+                    )}
                   </Text>
-                  <Text className="text-xs text-neutral-400">
+                  <Text className='text-xs text-neutral-400'>
                     {api.basePath}
                   </Text>
                   <Input
@@ -237,12 +236,13 @@ const Login: React.FC = () => {
                       setCredentials({ ...credentials, username: text })
                     }
                     value={credentials.username}
-                    secureTextEntry={false}
-                    keyboardType="default"
-                    returnKeyType="done"
-                    autoCapitalize="none"
-                    textContentType="username"
-                    clearButtonMode="while-editing"
+                    keyboardType='default'
+                    returnKeyType='done'
+                    autoCapitalize='none'
+                    // Changed from username to oneTimeCode because it is a known issue in RN
+                    // https://github.com/facebook/react-native/issues/47106#issuecomment-2521270037
+                    textContentType='oneTimeCode'
+                    clearButtonMode='while-editing'
                     maxLength={500}
                   />
 
@@ -253,42 +253,42 @@ const Login: React.FC = () => {
                     }
                     value={credentials.password}
                     secureTextEntry
-                    keyboardType="default"
-                    returnKeyType="done"
-                    autoCapitalize="none"
-                    textContentType="password"
-                    clearButtonMode="while-editing"
+                    keyboardType='default'
+                    returnKeyType='done'
+                    autoCapitalize='none'
+                    textContentType='password'
+                    clearButtonMode='while-editing'
                     maxLength={500}
                   />
-                  <View className="flex flex-row items-center justify-between">
+                  <View className='flex flex-row items-center justify-between'>
                     <Button
                       onPress={handleLogin}
                       loading={loading}
-                      className="flex-1 mr-2"
+                      className='flex-1 mr-2'
                     >
                       {t("login.login_button")}
                     </Button>
                     <TouchableOpacity
                       onPress={handleQuickConnect}
-                      className="p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center"
+                      className='p-2 bg-neutral-900 rounded-xl h-12 w-12 flex items-center justify-center'
                     >
                       <MaterialCommunityIcons
-                        name="cellphone-lock"
+                        name='cellphone-lock'
                         size={24}
-                        color="white"
+                        color='white'
                       />
                     </TouchableOpacity>
                   </View>
                 </View>
               </View>
 
-              <View className="absolute bottom-0 left-0 w-full px-4 mb-2"></View>
+              <View className='absolute bottom-0 left-0 w-full px-4 mb-2' />
             </View>
           </>
         ) : (
           <>
-            <View className="flex flex-col h-full items-center justify-center w-full">
-              <View className="flex flex-col gap-y-2 px-4 w-full -mt-36">
+            <View className='flex flex-col h-full items-center justify-center w-full'>
+              <View className='flex flex-col gap-y-2 px-4 w-full -mt-36'>
                 <Image
                   style={{
                     width: 100,
@@ -298,19 +298,19 @@ const Login: React.FC = () => {
                   }}
                   source={require("@/assets/images/StreamyFinFinal.png")}
                 />
-                <Text className="text-3xl font-bold">Streamyfin</Text>
-                <Text className="text-neutral-500">
+                <Text className='text-3xl font-bold'>Streamyfin</Text>
+                <Text className='text-neutral-500'>
                   {t("server.enter_url_to_jellyfin_server")}
                 </Text>
                 <Input
-                  aria-label="Server URL"
+                  aria-label='Server URL'
                   placeholder={t("server.server_url_placeholder")}
                   onChangeText={setServerURL}
                   value={serverURL}
-                  keyboardType="url"
-                  returnKeyType="done"
-                  autoCapitalize="none"
-                  textContentType="URL"
+                  keyboardType='url'
+                  returnKeyType='done'
+                  autoCapitalize='none'
+                  textContentType='URL'
                   maxLength={500}
                 />
                 <Button
@@ -319,22 +319,22 @@ const Login: React.FC = () => {
                   onPress={async () => {
                     await handleConnect(serverURL);
                   }}
-                  className="w-full grow"
+                  className='w-full grow'
                 >
                   {t("server.connect_button")}
                 </Button>
                 <JellyfinServerDiscovery
-                  onServerSelect={(server) => {
+                  onServerSelect={async (server) => {
                     setServerURL(server.address);
                     if (server.serverName) {
                       setServerName(server.serverName);
                     }
-                    handleConnect(server.address);
+                    await handleConnect(server.address);
                   }}
                 />
                 <PreviousServersList
-                  onServerSelect={(s) => {
-                    handleConnect(s.address);
+                  onServerSelect={async (s) => {
+                    await handleConnect(s.address);
                   }}
                 />
               </View>

augmentations/api.ts

@@ -1,17 +1,21 @@
-import { Api, AUTHORIZATION_HEADER } from "@jellyfin/sdk";
-import { AxiosRequestConfig, AxiosResponse } from "axios";
-import { StreamyfinPluginConfig } from "@/utils/atoms/settings";
+import type { StreamyfinPluginConfig } from "@/utils/atoms/settings";
+import { AUTHORIZATION_HEADER, Api } from "@jellyfin/sdk";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
 
 declare module "@jellyfin/sdk" {
   interface Api {
     get<T, D = any>(
       url: string,
-      config?: AxiosRequestConfig<D>
+      config?: AxiosRequestConfig<D>,
     ): Promise<AxiosResponse<T>>;
     post<T, D = any>(
       url: string,
       data: D,
-      config?: AxiosRequestConfig<D>
+      config?: AxiosRequestConfig<D>,
+    ): Promise<AxiosResponse<T>>;
+    delete<T, D = any>(
+      url: string,
+      config?: AxiosRequestConfig<D>,
     ): Promise<AxiosResponse<T>>;
     getStreamyfinPluginConfig(): Promise<AxiosResponse<StreamyfinPluginConfig>>;
   }
@@ -19,7 +23,7 @@ declare module "@jellyfin/sdk" {
 
 Api.prototype.get = function <T, D = any>(
   url: string,
-  config: AxiosRequestConfig<D> = {}
+  config: AxiosRequestConfig<D> = {},
 ): Promise<AxiosResponse<T>> {
   return this.axiosInstance.get<T>(`${this.basePath}${url}`, {
     ...(config ?? {}),
@@ -30,11 +34,20 @@ Api.prototype.get = function <T, D = any>(
 Api.prototype.post = function <T, D = any>(
   url: string,
   data: D,
-  config: AxiosRequestConfig<D>
+  config: AxiosRequestConfig<D>,
 ): Promise<AxiosResponse<T>> {
-  return this.axiosInstance.post<T>(`${this.basePath}${url}`, {
+  return this.axiosInstance.post<T>(`${this.basePath}${url}`, data, {
+    ...(config || {}),
+    headers: { [AUTHORIZATION_HEADER]: this.authorizationHeader },
+  });
+};
+
+Api.prototype.delete = function <T, D = any>(
+  url: string,
+  config: AxiosRequestConfig<D>,
+): Promise<AxiosResponse<T>> {
+  return this.axiosInstance.delete<T>(`${this.basePath}${url}`, {
     ...(config || {}),
-    data,
     headers: { [AUTHORIZATION_HEADER]: this.authorizationHeader },
   });
 };

augmentations/mmkv.ts

@@ -1,22 +1,21 @@
-import {MMKV} from "react-native-mmkv";
+import { MMKV } from "react-native-mmkv";
 
 declare module "react-native-mmkv" {
   interface MMKV {
-    get<T>(key: string): T | undefined
-    setAny(key: string, value: any | undefined): void
+    get<T>(key: string): T | undefined;
+    setAny(key: string, value: any | undefined): void;
   }
 }
 
-MMKV.prototype.get = function <T> (key: string): T | undefined {
+MMKV.prototype.get = function <T>(key: string): T | undefined {
   const serializedItem = this.getString(key);
   return serializedItem ? JSON.parse(serializedItem) : undefined;
-}
+};
 
 MMKV.prototype.setAny = function (key: string, value: any | undefined): void {
   if (value === undefined) {
-    this.delete(key)
-  }
-  else {
+    this.delete(key);
+  } else {
     this.set(key, JSON.stringify(value));
   }
-}
+};

augmentations/number.ts

@@ -7,17 +7,17 @@ declare global {
   }
 }
 
-Number.prototype.bytesToReadable = function (decimals: number = 2) {
+Number.prototype.bytesToReadable = function (decimals = 2) {
   const bytes = this.valueOf();
-  if (bytes === 0) return '0 Bytes';
+  if (bytes === 0) return "0 Bytes";
 
   const k = 1024;
   const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
 
   const i = Math.floor(Math.log(bytes) / Math.log(k));
 
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
 };
 
 Number.prototype.secondsToMilliseconds = function () {

augmentations/string.ts

@@ -5,12 +5,10 @@ declare global {
 }
 
 String.prototype.toTitle = function () {
-  return this
-    .replaceAll("_", " ")
-    .replace(
-      /\w\S*/g,
-      text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()
-    );
-}
+  return this.replaceAll("_", " ").replace(
+    /\w\S*/g,
+    (text) => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase(),
+  );
+};
 
-export {};
+export {};

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function (api) {
+module.exports = (api) => {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],

biome.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "files": {
+    "ignore": [
+      "node_modules",
+      "ios",
+      "android",
+      "Streamyfin.app",
+      "utils/jellyseerr",
+      ".expo"
+    ]
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "style": {
+        "useImportType": "off",
+        "noNonNullAssertion": "off",
+        "noParameterAssign": "off",
+        "useLiteralEnumMembers": "off"
+      },
+      "complexity": {
+        "noForEach": "off"
+      },
+      "recommended": true,
+      "correctness": { "useExhaustiveDependencies": "off" },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": true,
+    "attributePosition": "auto",
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "bracketSpacing": true,
+      "jsxQuoteStyle": "single",
+      "quoteProperties": "asNeeded",
+      "semicolons": "always",
+      "lineWidth": 80
+    }
+  },
+  "json": {
+    "formatter": {
+      "trailingCommas": "none"
+    }
+  }
+}

bun.lock

@@ -5,9 +5,8 @@
       "name": "streamyfin",
       "dependencies": {
         "@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.0",
+        "@expo/react-native-action-sheet": "^4.1.1",
         "@expo/vector-icons": "^14.0.4",
         "@futurejj/react-native-visibility-sensor": "^1.3.10",
         "@gorhom/bottom-sheet": "^5.1.0",
@@ -44,13 +43,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.22",
         "expo-status-bar": "~2.0.1",
         "expo-system-ui": "~4.0.8",
         "expo-task-manager": "~12.0.5",
         "expo-updates": "~0.26.17",
         "expo-web-browser": "~14.0.2",
-        "ffmpeg-kit-react-native": "^6.0.2",
         "i18next": "^24.2.2",
         "jotai": "^2.11.3",
         "lodash": "^4.17.21",
@@ -58,10 +57,11 @@
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-i18next": "^15.4.0",
-        "react-native": "npm:react-native-tvos@~0.77.0-0",
+        "react-native": "npm:react-native-tvos@~0.77.2-0",
         "react-native-awesome-slider": "^2.9.0",
         "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",
@@ -98,6 +98,7 @@
       },
       "devDependencies": {
         "@babel/core": "^7.26.8",
+        "@biomejs/biome": "^1.9.4",
         "@react-native-community/cli": "15.1.3",
         "@react-native-tvos/config-tv": "^0.1.1",
         "@types/jest": "^29.5.14",
@@ -106,7 +107,9 @@
         "@types/react-native-vector-icons": "^6.4.18",
         "@types/react-test-renderer": "^19.0.0",
         "@types/uuid": "^10.0.0",
-        "patch-package": "^8.0.0",
+        "cross-env": "^7.0.3",
+        "husky": "^9.1.7",
+        "lint-staged": "^15.5.0",
         "postinstall-postinstall": "^2.1.0",
         "react-test-renderer": "19.0.0",
         "typescript": "~5.7.3",
@@ -376,9 +379,25 @@
 
     "@babel/types": ["@babel/types@7.26.9", "", { "dependencies": { "@babel/helper-string-parser": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9" } }, "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw=="],
 
-    "@bottom-tabs/react-navigation": ["@bottom-tabs/react-navigation@0.8.6", "", { "dependencies": { "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": ">=7", "react": "*", "react-native": "*", "react-native-bottom-tabs": "*" } }, "sha512-hLlyBAUz4ahaVK2Op2VcJeAkCSpm3KKho4IojkPyXsos4WEHtO44EYWC71TDbVGeOP5HQ9k7FSwAW3IiZs0wHw=="],
+    "@biomejs/biome": ["@biomejs/biome@1.9.4", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "1.9.4", "@biomejs/cli-darwin-x64": "1.9.4", "@biomejs/cli-linux-arm64": "1.9.4", "@biomejs/cli-linux-arm64-musl": "1.9.4", "@biomejs/cli-linux-x64": "1.9.4", "@biomejs/cli-linux-x64-musl": "1.9.4", "@biomejs/cli-win32-arm64": "1.9.4", "@biomejs/cli-win32-x64": "1.9.4" }, "bin": { "biome": "bin/biome" } }, "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog=="],
 
-    "@config-plugins/ffmpeg-kit-react-native": ["@config-plugins/ffmpeg-kit-react-native@9.0.0", "", { "dependencies": { "semver": "^7.3.5" }, "peerDependencies": { "expo": "^52" } }, "sha512-04bXwdq7pmUPoGqYV0YGsrW/8Db+TNicn2Hznb5t+Dl740z9QkNGP4A38y1Mdz7mCU2EW0riASwl/JTH+6rBvw=="],
+    "@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@1.9.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw=="],
+
+    "@biomejs/cli-darwin-x64": ["@biomejs/cli-darwin-x64@1.9.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg=="],
+
+    "@biomejs/cli-linux-arm64": ["@biomejs/cli-linux-arm64@1.9.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g=="],
+
+    "@biomejs/cli-linux-arm64-musl": ["@biomejs/cli-linux-arm64-musl@1.9.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA=="],
+
+    "@biomejs/cli-linux-x64": ["@biomejs/cli-linux-x64@1.9.4", "", { "os": "linux", "cpu": "x64" }, "sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg=="],
+
+    "@biomejs/cli-linux-x64-musl": ["@biomejs/cli-linux-x64-musl@1.9.4", "", { "os": "linux", "cpu": "x64" }, "sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg=="],
+
+    "@biomejs/cli-win32-arm64": ["@biomejs/cli-win32-arm64@1.9.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg=="],
+
+    "@biomejs/cli-win32-x64": ["@biomejs/cli-win32-x64@1.9.4", "", { "os": "win32", "cpu": "x64" }, "sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA=="],
+
+    "@bottom-tabs/react-navigation": ["@bottom-tabs/react-navigation@0.8.6", "", { "dependencies": { "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": ">=7", "react": "*", "react-native": "*", "react-native-bottom-tabs": "*" } }, "sha512-hLlyBAUz4ahaVK2Op2VcJeAkCSpm3KKho4IojkPyXsos4WEHtO44EYWC71TDbVGeOP5HQ9k7FSwAW3IiZs0wHw=="],
 
     "@dominicstop/ts-event-emitter": ["@dominicstop/ts-event-emitter@1.1.0", "", {}, "sha512-CcxmJIvUb1vsFheuGGVSQf4KdPZC44XolpUT34+vlal+LyQoBUOn31pjFET5M9ctOxEpt8xa0M3/2M7uUiAoJw=="],
 
@@ -418,7 +437,7 @@
 
     "@expo/prebuild-config": ["@expo/prebuild-config@8.0.28", "", { "dependencies": { "@expo/config": "~10.0.10", "@expo/config-plugins": "~9.0.15", "@expo/config-types": "^52.0.4", "@expo/image-utils": "^0.6.5", "@expo/json-file": "^9.0.2", "@react-native/normalize-colors": "0.76.7", "debug": "^4.3.1", "fs-extra": "^9.0.0", "resolve-from": "^5.0.0", "semver": "^7.6.0", "xml2js": "0.6.0" } }, "sha512-SDDgCKKS1wFNNm3de2vBP8Q5bnxcabuPDE9Mnk9p7Gb4qBavhwMbAtrLcAyZB+WRb4QM+yan3z3K95vvCfI/+A=="],
 
-    "@expo/react-native-action-sheet": ["@expo/react-native-action-sheet@4.1.0", "", { "dependencies": { "@types/hoist-non-react-statics": "^3.3.1", "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { "react": ">=18.0.0" } }, "sha512-RILoWhREgjMdr1NUSmZa/cHg8onV2YPDAMOy0iIP1c3H7nT9QQZf5dQNHK8ehcLM82sarVxriBJyYSSHAx7j6w=="],
+    "@expo/react-native-action-sheet": ["@expo/react-native-action-sheet@4.1.1", "", { "dependencies": { "@types/hoist-non-react-statics": "^3.3.1", "hoist-non-react-statics": "^3.3.0" }, "peerDependencies": { "react": ">=18.0.0" } }, "sha512-4KRaba2vhqDRR7ObBj6nrD5uJw8ePoNHdIOMETTpgGTX7StUbrF4j/sfrP1YUyaPEa1P8FXdwG6pB+2WtrJd1A=="],
 
     "@expo/rudder-sdk-node": ["@expo/rudder-sdk-node@1.1.1", "", { "dependencies": { "@expo/bunyan": "^4.0.0", "@segment/loosely-validate-event": "^2.0.0", "fetch-retry": "^4.1.1", "md5": "^2.2.1", "node-fetch": "^2.6.1", "remove-trailing-slash": "^0.1.0", "uuid": "^8.3.2" } }, "sha512-uy/hS/awclDJ1S88w9UGpc6Nm9XnNUjzOAAib1A3PVAnGQIwebg8DpFqOthFBTlZxeuV/BKbZ5jmTbtNZkp1WQ=="],
 
@@ -606,27 +625,27 @@
 
     "@react-native-tvos/config-tv": ["@react-native-tvos/config-tv@0.1.1", "", { "dependencies": { "getenv": "^1.0.0" }, "peerDependencies": { "expo": "^52" } }, "sha512-Le/5wGElcNarDcoafCbvk/HMxcG3s0/468xXMWqAsOtBhGAdGtyXtjWEgp/uEr4GgZJlEIdM3ZqiuB8P7p8sjw=="],
 
-    "@react-native-tvos/virtualized-lists": ["@react-native-tvos/virtualized-lists@0.77.0-0", "", { "dependencies": { "invariant": "^2.2.4", "nullthrows": "^1.1.1" }, "peerDependencies": { "@types/react": "^18.2.6", "react": "*", "react-native-tvos": "*" }, "optionalPeers": ["@types/react"] }, "sha512-em0PMjOD8XQvlygbFoNT4R76rSIRxekZ9TL6EbTIC/kJUDrSPB3W9RafA6n6p4OLoWgEF7MIJ9W+zfibdiVXbw=="],
+    "@react-native-tvos/virtualized-lists": ["@react-native-tvos/virtualized-lists@0.77.2-0", "", { "dependencies": { "invariant": "^2.2.4", "nullthrows": "^1.1.1" }, "peerDependencies": { "@types/react": "^18.2.6", "react": "*", "react-native": "*" }, "optionalPeers": ["@types/react"] }, "sha512-9l51YsjgrUv6f3Q8bmQPIPRuID6gLfc29CjLLQ3+RIeHFF1xzT/xwOp0+s7JMhDdZOZ5mcn9RiN7BbmcPej08A=="],
 
-    "@react-native/assets-registry": ["@react-native/assets-registry@0.77.0", "", {}, "sha512-Ms4tYYAMScgINAXIhE4riCFJPPL/yltughHS950l0VP5sm5glbimn9n7RFn9Tc8cipX74/ddbk19+ydK2iDMmA=="],
+    "@react-native/assets-registry": ["@react-native/assets-registry@0.77.2", "", {}, "sha512-AcEhFjndzBWVVhaHaASk36vhA83iDVkQbFYb0D0vATzjuJ67vhhHVLae0+JtHl5jhghotUFDg4Vj/1QbZNDyyQ=="],
 
     "@react-native/babel-plugin-codegen": ["@react-native/babel-plugin-codegen@0.76.7", "", { "dependencies": { "@react-native/codegen": "0.76.7" } }, "sha512-+8H4DXJREM4l/pwLF/wSVMRzVhzhGDix5jLezNrMD9J1U1AMfV2aSkWA1XuqR7pjPs/Vqf6TaPL7vJMZ4LU05Q=="],
 
     "@react-native/babel-preset": ["@react-native/babel-preset@0.76.7", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/plugin-proposal-export-default-from": "^7.24.7", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-export-default-from": "^7.24.7", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", "@babel/plugin-syntax-optional-chaining": "^7.8.3", "@babel/plugin-transform-arrow-functions": "^7.24.7", "@babel/plugin-transform-async-generator-functions": "^7.25.4", "@babel/plugin-transform-async-to-generator": "^7.24.7", "@babel/plugin-transform-block-scoping": "^7.25.0", "@babel/plugin-transform-class-properties": "^7.25.4", "@babel/plugin-transform-classes": "^7.25.4", "@babel/plugin-transform-computed-properties": "^7.24.7", "@babel/plugin-transform-destructuring": "^7.24.8", "@babel/plugin-transform-flow-strip-types": "^7.25.2", "@babel/plugin-transform-for-of": "^7.24.7", "@babel/plugin-transform-function-name": "^7.25.1", "@babel/plugin-transform-literals": "^7.25.2", "@babel/plugin-transform-logical-assignment-operators": "^7.24.7", "@babel/plugin-transform-modules-commonjs": "^7.24.8", "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7", "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7", "@babel/plugin-transform-numeric-separator": "^7.24.7", "@babel/plugin-transform-object-rest-spread": "^7.24.7", "@babel/plugin-transform-optional-catch-binding": "^7.24.7", "@babel/plugin-transform-optional-chaining": "^7.24.8", "@babel/plugin-transform-parameters": "^7.24.7", "@babel/plugin-transform-private-methods": "^7.24.7", "@babel/plugin-transform-private-property-in-object": "^7.24.7", "@babel/plugin-transform-react-display-name": "^7.24.7", "@babel/plugin-transform-react-jsx": "^7.25.2", "@babel/plugin-transform-react-jsx-self": "^7.24.7", "@babel/plugin-transform-react-jsx-source": "^7.24.7", "@babel/plugin-transform-regenerator": "^7.24.7", "@babel/plugin-transform-runtime": "^7.24.7", "@babel/plugin-transform-shorthand-properties": "^7.24.7", "@babel/plugin-transform-spread": "^7.24.7", "@babel/plugin-transform-sticky-regex": "^7.24.7", "@babel/plugin-transform-typescript": "^7.25.2", "@babel/plugin-transform-unicode-regex": "^7.24.7", "@babel/template": "^7.25.0", "@react-native/babel-plugin-codegen": "0.76.7", "babel-plugin-syntax-hermes-parser": "^0.25.1", "babel-plugin-transform-flow-enums": "^0.0.2", "react-refresh": "^0.14.0" } }, "sha512-/c5DYZ6y8tyg+g8tgXKndDT7mWnGmkZ9F+T3qNDfoE3Qh7ucrNeC2XWvU9h5pk8eRtj9l4SzF4aO1phzwoibyg=="],
 
-    "@react-native/codegen": ["@react-native/codegen@0.77.0", "", { "dependencies": { "@babel/parser": "^7.25.3", "glob": "^7.1.1", "hermes-parser": "0.25.1", "invariant": "^2.2.4", "jscodeshift": "^17.0.0", "nullthrows": "^1.1.1", "yargs": "^17.6.2" }, "peerDependencies": { "@babel/preset-env": "^7.1.6" } }, "sha512-rE9lXx41ZjvE8cG7e62y/yGqzUpxnSvJ6me6axiX+aDewmI4ZrddvRGYyxCnawxy5dIBHSnrpZse3P87/4Lm7w=="],
+    "@react-native/codegen": ["@react-native/codegen@0.77.2", "", { "dependencies": { "@babel/parser": "^7.25.3", "glob": "^7.1.1", "hermes-parser": "0.25.1", "invariant": "^2.2.4", "jscodeshift": "^17.0.0", "nullthrows": "^1.1.1", "yargs": "^17.6.2" }, "peerDependencies": { "@babel/preset-env": "^7.1.6" } }, "sha512-uJSGm9Sp9K5XAhb17cty6iOc2lZpORQKMpS61/B3gYwe9LNz9TJpcfq1L2+3Mv6lppqsulOH9+fslapo0OTfSQ=="],
 
-    "@react-native/community-cli-plugin": ["@react-native/community-cli-plugin@0.77.0", "", { "dependencies": { "@react-native/dev-middleware": "0.77.0", "@react-native/metro-babel-transformer": "0.77.0", "chalk": "^4.0.0", "debug": "^2.2.0", "invariant": "^2.2.4", "metro": "^0.81.0", "metro-config": "^0.81.0", "metro-core": "^0.81.0", "readline": "^1.3.0", "semver": "^7.1.3" }, "peerDependencies": { "@react-native-community/cli-server-api": "*" }, "optionalPeers": ["@react-native-community/cli-server-api"] }, "sha512-GRshwhCHhtupa3yyCbel14SlQligV8ffNYN5L1f8HCo2SeGPsBDNjhj2U+JTrMPnoqpwowPGvkCwyqwqYff4MQ=="],
+    "@react-native/community-cli-plugin": ["@react-native/community-cli-plugin@0.77.2", "", { "dependencies": { "@react-native/dev-middleware": "0.77.2", "@react-native/metro-babel-transformer": "0.77.2", "chalk": "^4.0.0", "debug": "^2.2.0", "invariant": "^2.2.4", "metro": "^0.81.3", "metro-config": "^0.81.3", "metro-core": "^0.81.3", "readline": "^1.3.0", "semver": "^7.1.3" }, "peerDependencies": { "@react-native-community/cli": "*" }, "optionalPeers": ["@react-native-community/cli"] }, "sha512-Dc93eXHhzhnRy+vF3wOdM8C4dplLpT7ItpUpYrDeA1ffHUImwWpcupB6vpX9+l3UaaJ1cPfdxTjB2d1ACVKOaA=="],
 
     "@react-native/debugger-frontend": ["@react-native/debugger-frontend@0.76.7", "", {}, "sha512-89ZtZXt7ZxE94i7T94qzZMhp4Gfcpr/QVpGqEaejAxZD+gvDCH21cYSF+/Rz2ttBazm0rk5MZ0mFqb0Iqp1jmw=="],
 
     "@react-native/dev-middleware": ["@react-native/dev-middleware@0.76.7", "", { "dependencies": { "@isaacs/ttlcache": "^1.4.1", "@react-native/debugger-frontend": "0.76.7", "chrome-launcher": "^0.15.2", "chromium-edge-launcher": "^0.2.0", "connect": "^3.6.5", "debug": "^2.2.0", "invariant": "^2.2.4", "nullthrows": "^1.1.1", "open": "^7.0.3", "selfsigned": "^2.4.1", "serve-static": "^1.13.1", "ws": "^6.2.3" } }, "sha512-Jsw8g9DyLPnR9yHEGuT09yHZ7M88/GL9CtU9WmyChlBwdXSeE3AmRqLegsV3XcgULQ1fqdemokaOZ/MwLYkjdA=="],
 
-    "@react-native/gradle-plugin": ["@react-native/gradle-plugin@0.77.0", "", {}, "sha512-rmfh93jzbndSq7kihYHUQ/EGHTP8CCd3GDCmg5SbxSOHAaAYx2HZ28ZG7AVcGUsWeXp+e/90zGIyfOzDRx0Zaw=="],
+    "@react-native/gradle-plugin": ["@react-native/gradle-plugin@0.77.2", "", {}, "sha512-M3kU6xnn/06CGdezd31wn64v/BuKdw19K3GjOcRe1L+zKYEeezRovEVgzCNsXLcNtXUfJvmrIN4uYnqmgrJGfg=="],
 
-    "@react-native/js-polyfills": ["@react-native/js-polyfills@0.77.0", "", {}, "sha512-kHFcMJVkGb3ptj3yg1soUsMHATqal4dh0QTGAbYihngJ6zy+TnP65J3GJq4UlwqFE9K1RZkeCmTwlmyPFHOGvA=="],
+    "@react-native/js-polyfills": ["@react-native/js-polyfills@0.77.2", "", {}, "sha512-qwKeYqRANL8CKzeVWOdhRZJ7LBqqoiXR+cb5yGwVKQxqesrx5Y7gYyq6GP1zRMnhv9iQAY7Rwub8TvDxi2YP6Q=="],
 
-    "@react-native/metro-babel-transformer": ["@react-native/metro-babel-transformer@0.77.0", "", { "dependencies": { "@babel/core": "^7.25.2", "@react-native/babel-preset": "0.77.0", "hermes-parser": "0.25.1", "nullthrows": "^1.1.1" } }, "sha512-19GfvhBRKCU3UDWwCnDR4QjIzz3B2ZuwhnxMRwfAgPxz7QY9uKour9RGmBAVUk1Wxi/SP7dLEvWnmnuBO39e2A=="],
+    "@react-native/metro-babel-transformer": ["@react-native/metro-babel-transformer@0.77.2", "", { "dependencies": { "@babel/core": "^7.25.2", "@react-native/babel-preset": "0.77.2", "hermes-parser": "0.25.1", "nullthrows": "^1.1.1" } }, "sha512-vSG1/d5peUo50aqaBbNnVGE5QxQTSY3j0OWmixfJqiX11wwO3tR2niKxH8OjB3WuSsROgJzosMe9kMsQJQ3ONA=="],
 
     "@react-native/normalize-colors": ["@react-native/normalize-colors@0.76.7", "", {}, "sha512-ST1xxBuYVIXPdD81dR6+tzIgso7m3pa9+6rOBXTh5Xm7KEEFik7tnQX+GydXYMp3wr1gagJjragdXkPnxK6WNg=="],
 
@@ -740,8 +759,6 @@
 
     "@xmldom/xmldom": ["@xmldom/xmldom@0.7.13", "", {}, "sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g=="],
 
-    "@yarnpkg/lockfile": ["@yarnpkg/lockfile@1.1.0", "", {}, "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ=="],
-
     "@zxing/text-encoding": ["@zxing/text-encoding@0.9.0", "", {}, "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA=="],
 
     "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
@@ -762,7 +779,7 @@
 
     "anser": ["anser@1.4.10", "", {}, "sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww=="],
 
-    "ansi-escapes": ["ansi-escapes@4.3.2", "", { "dependencies": { "type-fest": "^0.21.3" } }, "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="],
+    "ansi-escapes": ["ansi-escapes@7.0.0", "", { "dependencies": { "environment": "^1.0.0" } }, "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw=="],
 
     "ansi-fragments": ["ansi-fragments@0.2.1", "", { "dependencies": { "colorette": "^1.0.7", "slice-ansi": "^2.0.0", "strip-ansi": "^5.0.0" } }, "sha512-DykbNHxuXQwUDRv5ibc2b0x7uw7wmwOGLBUd5RmaQ5z8Lhx19vwvKV+FAsM5rEA6dEcHxX+/Ad5s9eF2k2bB+w=="],
 
@@ -920,6 +937,8 @@
 
     "cli-spinners": ["cli-spinners@2.9.2", "", {}, "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg=="],
 
+    "cli-truncate": ["cli-truncate@4.0.0", "", { "dependencies": { "slice-ansi": "^5.0.0", "string-width": "^7.0.0" } }, "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA=="],
+
     "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
 
     "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
@@ -936,7 +955,7 @@
 
     "color-string": ["color-string@1.9.1", "", { "dependencies": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" } }, "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="],
 
-    "colorette": ["colorette@1.4.0", "", {}, "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="],
+    "colorette": ["colorette@2.0.20", "", {}, "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="],
 
     "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 
@@ -966,6 +985,8 @@
 
     "cosmiconfig": ["cosmiconfig@9.0.0", "", { "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", "parse-json": "^5.2.0" }, "peerDependencies": { "typescript": ">=4.9.5" }, "optionalPeers": ["typescript"] }, "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg=="],
 
+    "cross-env": ["cross-env@7.0.3", "", { "dependencies": { "cross-spawn": "^7.0.1" }, "bin": { "cross-env": "src/bin/cross-env.js", "cross-env-shell": "src/bin/cross-env-shell.js" } }, "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw=="],
+
     "cross-fetch": ["cross-fetch@3.2.0", "", { "dependencies": { "node-fetch": "^2.7.0" } }, "sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q=="],
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
@@ -1072,6 +1093,8 @@
 
     "envinfo": ["envinfo@7.14.0", "", { "bin": { "envinfo": "dist/cli.js" } }, "sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg=="],
 
+    "environment": ["environment@1.1.0", "", {}, "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q=="],
+
     "eol": ["eol@0.9.1", "", {}, "sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg=="],
 
     "error-ex": ["error-ex@1.3.2", "", { "dependencies": { "is-arrayish": "^0.2.1" } }, "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g=="],
@@ -1102,6 +1125,8 @@
 
     "event-target-shim": ["event-target-shim@5.0.1", "", {}, "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="],
 
+    "eventemitter3": ["eventemitter3@5.0.1", "", {}, "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="],
+
     "events": ["events@3.3.0", "", {}, "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="],
 
     "exec-async": ["exec-async@2.2.0", "", {}, "sha512-87OpwcEiMia/DeiKFzaQNBNFeN3XkkpYIh9FyOqq5mS2oKv3CBE67PXoEKcr6nodWdXNogTiQ0jE2NGuoffXPw=="],
@@ -1176,6 +1201,8 @@
 
     "expo-sensors": ["expo-sensors@14.0.2", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": "*", "react-native": "*" } }, "sha512-nCb1Q3ctb0oVTZ9p6eFmQ2fINa6KoxXXIhagPpdN0qR82p00YosP27IuyxjVB3fnCJFeC4TffNxNjBxwAUk+nA=="],
 
+    "expo-sharing": ["expo-sharing@13.0.1", "", { "peerDependencies": { "expo": "*" } }, "sha512-qych3Nw65wlFcnzE/gRrsdtvmdV0uF4U4qVMZBJYPG90vYyWh2QM9rp1gVu0KWOBc7N8CC2dSVYn4/BXqJy6Xw=="],
+
     "expo-splash-screen": ["expo-splash-screen@0.29.22", "", { "dependencies": { "@expo/prebuild-config": "^8.0.27" }, "peerDependencies": { "expo": "*" } }, "sha512-f+bPpF06bqiuW1Fbrd3nxeaSsmTVTBEKEYe3epYt4IE6y4Ulli3qEUamMLlRQiDGuIXPU6zQlscpy2mdBUI5cA=="],
 
     "expo-status-bar": ["expo-status-bar@2.0.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-AkIPX7jWHRPp83UBZ1iXtVvyr0g+DgBVvIXTtlmPtmUsm8Vq9Bb5IGj86PW8osuFlgoTVAg7HI/+Ok7yEYwiRg=="],
@@ -1222,8 +1249,6 @@
 
     "fetch-retry": ["fetch-retry@4.1.1", "", {}, "sha512-e6eB7zN6UBSwGVwrbWVH+gdLnkW9WwHhmq2YDK1Sh30pzx1onRVGBvogTlUeWxwTa+L86NYdo4hFkh7O8ZjSnA=="],
 
-    "ffmpeg-kit-react-native": ["ffmpeg-kit-react-native@6.0.2", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-r9uSmahq8TeyIb7fXf3ft+uUXyoeWRFa99+khjo0TAzWO9y0z9wU7eGnab9JLw1MmCB9v64o4yojNluJhVm9nQ=="],
-
     "file-type": ["file-type@16.5.4", "", { "dependencies": { "readable-web-to-node-stream": "^3.0.0", "strtok3": "^6.2.4", "token-types": "^4.1.1" } }, "sha512-/yFHK0aGjFEgDJjEKP0pWCplsPFPhwyfwevf/pVxiN0tmE4L9LmwWxWukdJSHdoCli4VgQLehjJtwQBnqmsKcw=="],
 
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
@@ -1236,8 +1261,6 @@
 
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
 
-    "find-yarn-workspace-root": ["find-yarn-workspace-root@2.0.0", "", { "dependencies": { "micromatch": "^4.0.2" } }, "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ=="],
-
     "flow-enums-runtime": ["flow-enums-runtime@0.0.6", "", {}, "sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw=="],
 
     "flow-parser": ["flow-parser@0.261.2", "", {}, "sha512-RtunoakA3YjtpAxPSOBVW6lmP5NYmETwkpAfNkdr8Ovf86ENkbD3mtPWnswFTIUtRvjwv0i8ZSkHK+AzsUg1JA=="],
@@ -1270,6 +1293,8 @@
 
     "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
 
+    "get-east-asian-width": ["get-east-asian-width@1.3.0", "", {}, "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ=="],
+
     "get-intrinsic": ["get-intrinsic@1.2.7", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.0.0", "function-bind": "^1.1.2", "get-proto": "^1.0.0", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA=="],
 
     "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
@@ -1324,6 +1349,8 @@
 
     "human-signals": ["human-signals@2.1.0", "", {}, "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="],
 
+    "husky": ["husky@9.1.7", "", { "bin": { "husky": "bin.js" } }, "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA=="],
+
     "hyphenate-style-name": ["hyphenate-style-name@1.1.0", "", {}, "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw=="],
 
     "i18next": ["i18next@24.2.2", "", { "dependencies": { "@babel/runtime": "^7.23.2" }, "peerDependencies": { "typescript": "^5" }, "optionalPeers": ["typescript"] }, "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ=="],
@@ -1406,8 +1433,6 @@
 
     "is-wsl": ["is-wsl@2.2.0", "", { "dependencies": { "is-docker": "^2.0.0" } }, "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="],
 
-    "isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
-
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
     "isobject": ["isobject@3.0.1", "", {}, "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="],
@@ -1470,18 +1495,12 @@
 
     "json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
 
-    "json-stable-stringify": ["json-stable-stringify@1.2.1", "", { "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", "isarray": "^2.0.5", "jsonify": "^0.0.1", "object-keys": "^1.1.1" } }, "sha512-Lp6HbbBgosLmJbjx0pBLbgvx68FaFU1sdkmBuckmhhJ88kL13OA51CDtR2yJB50eCNMH9wRqtQNNiAqQH4YXnA=="],
-
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
     "jsonfile": ["jsonfile@4.0.0", "", { "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg=="],
 
-    "jsonify": ["jsonify@0.0.1", "", {}, "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg=="],
-
     "kind-of": ["kind-of@6.0.3", "", {}, "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="],
 
-    "klaw-sync": ["klaw-sync@6.0.0", "", { "dependencies": { "graceful-fs": "^4.1.11" } }, "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ=="],
-
     "kleur": ["kleur@3.0.3", "", {}, "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="],
 
     "leven": ["leven@3.1.0", "", {}, "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="],
@@ -1510,10 +1529,14 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.27.0", "", { "os": "win32", "cpu": "x64" }, "sha512-/OJLj94Zm/waZShL8nB5jsNj3CfNATLCTyFxZyouilfTmSoLDX7VlVAmhPHoZWVFp4vdmoiEbPEYC8HID3m6yw=="],
 
-    "lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
+    "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
 
     "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
+    "lint-staged": ["lint-staged@15.5.0", "", { "dependencies": { "chalk": "^5.4.1", "commander": "^13.1.0", "debug": "^4.4.0", "execa": "^8.0.1", "lilconfig": "^3.1.3", "listr2": "^8.2.5", "micromatch": "^4.0.8", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.7.0" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-WyCzSbfYGhK7cU+UuDDkzUiytbfbi0ZdPy2orwtM75P3WTtQBzmG40cCxIa8Ii2+XjfxzLH6Be46tUfWS85Xfg=="],
+
+    "listr2": ["listr2@8.2.5", "", { "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", "eventemitter3": "^5.0.1", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^9.0.0" } }, "sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ=="],
+
     "load-bmfont": ["load-bmfont@1.4.2", "", { "dependencies": { "buffer-equal": "0.0.1", "mime": "^1.3.4", "parse-bmfont-ascii": "^1.0.3", "parse-bmfont-binary": "^1.0.5", "parse-bmfont-xml": "^1.1.4", "phin": "^3.7.1", "xhr": "^2.0.1", "xtend": "^4.0.0" } }, "sha512-qElWkmjW9Oq1F9EI5Gt7aD9zcdHb9spJCW1L/dmPf7KzCCEJxq8nhHz5eCgI9aMf7vrG/wyaCqdsI+Iy9ZTlog=="],
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
@@ -1526,6 +1549,8 @@
 
     "log-symbols": ["log-symbols@4.1.0", "", { "dependencies": { "chalk": "^4.1.0", "is-unicode-supported": "^0.1.0" } }, "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg=="],
 
+    "log-update": ["log-update@6.1.0", "", { "dependencies": { "ansi-escapes": "^7.0.0", "cli-cursor": "^5.0.0", "slice-ansi": "^7.1.0", "strip-ansi": "^7.1.0", "wrap-ansi": "^9.0.0" } }, "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w=="],
+
     "logkitty": ["logkitty@0.7.1", "", { "dependencies": { "ansi-fragments": "^0.2.1", "dayjs": "^1.8.15", "yargs": "^15.1.0" }, "bin": { "logkitty": "bin/logkitty.js" } }, "sha512-/3ER20CTTbahrCrpYfPn7Xavv9diBROZpoXGVZDWMw4b/X4uuUwAC0ki85tgsdMRONURyIJbcOvS94QsUBYPbQ=="],
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
@@ -1552,33 +1577,33 @@
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
 
-    "metro": ["metro@0.81.1", "", { "dependencies": { "@babel/code-frame": "^7.24.7", "@babel/core": "^7.25.2", "@babel/generator": "^7.25.0", "@babel/parser": "^7.25.3", "@babel/template": "^7.25.0", "@babel/traverse": "^7.25.3", "@babel/types": "^7.25.2", "accepts": "^1.3.7", "chalk": "^4.0.0", "ci-info": "^2.0.0", "connect": "^3.6.5", "debug": "^2.2.0", "error-stack-parser": "^2.0.6", "flow-enums-runtime": "^0.0.6", "graceful-fs": "^4.2.4", "hermes-parser": "0.25.1", "image-size": "^1.0.2", "invariant": "^2.2.4", "jest-worker": "^29.6.3", "jsc-safe-url": "^0.2.2", "lodash.throttle": "^4.1.1", "metro-babel-transformer": "0.81.1", "metro-cache": "0.81.1", "metro-cache-key": "0.81.1", "metro-config": "0.81.1", "metro-core": "0.81.1", "metro-file-map": "0.81.1", "metro-resolver": "0.81.1", "metro-runtime": "0.81.1", "metro-source-map": "0.81.1", "metro-symbolicate": "0.81.1", "metro-transform-plugins": "0.81.1", "metro-transform-worker": "0.81.1", "mime-types": "^2.1.27", "nullthrows": "^1.1.1", "serialize-error": "^2.1.0", "source-map": "^0.5.6", "throat": "^5.0.0", "ws": "^7.5.10", "yargs": "^17.6.2" }, "bin": { "metro": "src/cli.js" } }, "sha512-fqRu4fg8ONW7VfqWFMGgKAcOuMzyoQah2azv9Y3VyFXAmG+AoTU6YIFWqAADESCGVWuWEIvxTJhMf3jxU6jwjA=="],
+    "metro": ["metro@0.81.5", "", { "dependencies": { "@babel/code-frame": "^7.24.7", "@babel/core": "^7.25.2", "@babel/generator": "^7.25.0", "@babel/parser": "^7.25.3", "@babel/template": "^7.25.0", "@babel/traverse": "^7.25.3", "@babel/types": "^7.25.2", "accepts": "^1.3.7", "chalk": "^4.0.0", "ci-info": "^2.0.0", "connect": "^3.6.5", "debug": "^2.2.0", "error-stack-parser": "^2.0.6", "flow-enums-runtime": "^0.0.6", "graceful-fs": "^4.2.4", "hermes-parser": "0.25.1", "image-size": "^1.0.2", "invariant": "^2.2.4", "jest-worker": "^29.7.0", "jsc-safe-url": "^0.2.2", "lodash.throttle": "^4.1.1", "metro-babel-transformer": "0.81.5", "metro-cache": "0.81.5", "metro-cache-key": "0.81.5", "metro-config": "0.81.5", "metro-core": "0.81.5", "metro-file-map": "0.81.5", "metro-resolver": "0.81.5", "metro-runtime": "0.81.5", "metro-source-map": "0.81.5", "metro-symbolicate": "0.81.5", "metro-transform-plugins": "0.81.5", "metro-transform-worker": "0.81.5", "mime-types": "^2.1.27", "nullthrows": "^1.1.1", "serialize-error": "^2.1.0", "source-map": "^0.5.6", "throat": "^5.0.0", "ws": "^7.5.10", "yargs": "^17.6.2" }, "bin": { "metro": "src/cli.js" } }, "sha512-YpFF0DDDpDVygeca2mAn7K0+us+XKmiGk4rIYMz/CRdjFoCGqAei/IQSpV0UrGfQbToSugpMQeQJveaWSH88Hg=="],
 
-    "metro-babel-transformer": ["metro-babel-transformer@0.81.1", "", { "dependencies": { "@babel/core": "^7.25.2", "flow-enums-runtime": "^0.0.6", "hermes-parser": "0.25.1", "nullthrows": "^1.1.1" } }, "sha512-JECKDrQaUnDmj0x/Q/c8c5YwsatVx38Lu+BfCwX9fR8bWipAzkvJocBpq5rOAJRDXRgDcPv2VO4Q4nFYrpYNQg=="],
+    "metro-babel-transformer": ["metro-babel-transformer@0.81.5", "", { "dependencies": { "@babel/core": "^7.25.2", "flow-enums-runtime": "^0.0.6", "hermes-parser": "0.25.1", "nullthrows": "^1.1.1" } }, "sha512-oKCQuajU5srm+ZdDcFg86pG/U8hkSjBlkyFjz380SZ4TTIiI5F+OQB830i53D8hmqmcosa4wR/pnKv8y4Q3dLw=="],
 
-    "metro-cache": ["metro-cache@0.81.1", "", { "dependencies": { "exponential-backoff": "^3.1.1", "flow-enums-runtime": "^0.0.6", "metro-core": "0.81.1" } }, "sha512-Uqcmn6sZ+Y0VJHM88VrG5xCvSeU7RnuvmjPmSOpEcyJJBe02QkfHL05MX2ZyGDTyZdbKCzaX0IijrTe4hN3F0Q=="],
+    "metro-cache": ["metro-cache@0.81.5", "", { "dependencies": { "exponential-backoff": "^3.1.1", "flow-enums-runtime": "^0.0.6", "metro-core": "0.81.5" } }, "sha512-wOsXuEgmZMZ5DMPoz1pEDerjJ11AuMy9JifH4yNW7NmWS0ghCRqvDxk13LsElzLshey8C+my/tmXauXZ3OqZgg=="],
 
-    "metro-cache-key": ["metro-cache-key@0.81.1", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-5fDaHR1yTvpaQuwMAeEoZGsVyvjrkw9IFAS7WixSPvaNY5YfleqoJICPc6hbXFJjvwCCpwmIYFkjqzR/qJ6yqA=="],
+    "metro-cache-key": ["metro-cache-key@0.81.5", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-lGWnGVm1UwO8faRZ+LXQUesZSmP1LOg14OVR+KNPBip8kbMECbQJ8c10nGesw28uQT7AE0lwQThZPXlxDyCLKQ=="],
 
-    "metro-config": ["metro-config@0.81.1", "", { "dependencies": { "connect": "^3.6.5", "cosmiconfig": "^5.0.5", "flow-enums-runtime": "^0.0.6", "jest-validate": "^29.6.3", "metro": "0.81.1", "metro-cache": "0.81.1", "metro-core": "0.81.1", "metro-runtime": "0.81.1" } }, "sha512-VAAJmxsKIZ+Fz5/z1LVgxa32gE6+2TvrDSSx45g85WoX4EtLmdBGP3DSlpQW3DqFUfNHJCGwMLGXpJnxifd08g=="],
+    "metro-config": ["metro-config@0.81.5", "", { "dependencies": { "connect": "^3.6.5", "cosmiconfig": "^5.0.5", "flow-enums-runtime": "^0.0.6", "jest-validate": "^29.7.0", "metro": "0.81.5", "metro-cache": "0.81.5", "metro-core": "0.81.5", "metro-runtime": "0.81.5" } }, "sha512-oDRAzUvj6RNRxratFdcVAqtAsg+T3qcKrGdqGZFUdwzlFJdHGR9Z413sW583uD2ynsuOjA2QB6US8FdwiBdNKg=="],
 
-    "metro-core": ["metro-core@0.81.1", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "lodash.throttle": "^4.1.1", "metro-resolver": "0.81.1" } }, "sha512-4d2/+02IYqOwJs4dmM0dC8hIZqTzgnx2nzN4GTCaXb3Dhtmi/SJ3v6744zZRnithhN4lxf8TTJSHnQV75M7SSA=="],
+    "metro-core": ["metro-core@0.81.5", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "lodash.throttle": "^4.1.1", "metro-resolver": "0.81.5" } }, "sha512-+2R0c8ByfV2N7CH5wpdIajCWa8escUFd8TukfoXyBq/vb6yTCsznoA25FhNXJ+MC/cz1L447Zj3vdUfCXIZBwg=="],
 
-    "metro-file-map": ["metro-file-map@0.81.1", "", { "dependencies": { "debug": "^2.2.0", "fb-watchman": "^2.0.0", "flow-enums-runtime": "^0.0.6", "graceful-fs": "^4.2.4", "invariant": "^2.2.4", "jest-worker": "^29.6.3", "micromatch": "^4.0.4", "nullthrows": "^1.1.1", "walker": "^1.0.7" } }, "sha512-aY72H2ujmRfFxcsbyh83JgqFF+uQ4HFN1VhV2FmcfQG4s1bGKf2Vbkk+vtZ1+EswcBwDZFbkpvAjN49oqwGzAA=="],
+    "metro-file-map": ["metro-file-map@0.81.5", "", { "dependencies": { "debug": "^2.2.0", "fb-watchman": "^2.0.0", "flow-enums-runtime": "^0.0.6", "graceful-fs": "^4.2.4", "invariant": "^2.2.4", "jest-worker": "^29.7.0", "micromatch": "^4.0.4", "nullthrows": "^1.1.1", "walker": "^1.0.7" } }, "sha512-mW1PKyiO3qZvjeeVjj1brhkmIotObA3/9jdbY1fQQYvEWM6Ml7bN/oJCRDGn2+bJRlG+J8pwyJ+DgdrM4BsKyg=="],
 
-    "metro-minify-terser": ["metro-minify-terser@0.81.1", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "terser": "^5.15.0" } }, "sha512-p/Qz3NNh1nebSqMlxlUALAnESo6heQrnvgHtAuxufRPtKvghnVDq9hGGex8H7z7YYLsqe42PWdt4JxTA3mgkvg=="],
+    "metro-minify-terser": ["metro-minify-terser@0.81.5", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "terser": "^5.15.0" } }, "sha512-/mn4AxjANnsSS3/Bb+zA1G5yIS5xygbbz/OuPaJYs0CPcZCaWt66D+65j4Ft/nJkffUxcwE9mk4ubpkl3rjgtw=="],
 
-    "metro-resolver": ["metro-resolver@0.81.1", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-E61t6fxRoYRkl6Zo3iUfCKW4DYfum/bLjcejXBMt1y3I7LFkK84TCR/Rs9OAwsMCY/7GOPB4+CREYZOtCC7CNA=="],
+    "metro-resolver": ["metro-resolver@0.81.5", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-6BX8Nq3g3go3FxcyXkVbWe7IgctjDTk6D9flq+P201DfHHQ28J+DWFpVelFcrNTn4tIfbP/Bw7u/0g2BGmeXfQ=="],
 
-    "metro-runtime": ["metro-runtime@0.81.1", "", { "dependencies": { "@babel/runtime": "^7.25.0", "flow-enums-runtime": "^0.0.6" } }, "sha512-pqu5j5d01rjF85V/K8SDDJ0NR3dRp6bE3z5bKVVb5O2Rx0nbR9KreUxYALQCRCcQHaYySqCg5fYbGKBHC295YQ=="],
+    "metro-runtime": ["metro-runtime@0.81.5", "", { "dependencies": { "@babel/runtime": "^7.25.0", "flow-enums-runtime": "^0.0.6" } }, "sha512-M/Gf71ictUKP9+77dV/y8XlAWg7xl76uhU7ggYFUwEdOHHWPG6gLBr1iiK0BmTjPFH8yRo/xyqMli4s3oGorPQ=="],
 
-    "metro-source-map": ["metro-source-map@0.81.1", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@babel/traverse--for-generate-function-map": "npm:@babel/traverse@^7.25.3", "@babel/types": "^7.25.2", "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "metro-symbolicate": "0.81.1", "nullthrows": "^1.1.1", "ob1": "0.81.1", "source-map": "^0.5.6", "vlq": "^1.0.0" } }, "sha512-1i8ROpNNiga43F0ZixAXoFE/SS3RqcRDCCslpynb+ytym0VI7pkTH1woAN2HI9pczYtPrp3Nq0AjRpsuY35ieA=="],
+    "metro-source-map": ["metro-source-map@0.81.5", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@babel/traverse--for-generate-function-map": "npm:@babel/traverse@^7.25.3", "@babel/types": "^7.25.2", "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "metro-symbolicate": "0.81.5", "nullthrows": "^1.1.1", "ob1": "0.81.5", "source-map": "^0.5.6", "vlq": "^1.0.0" } }, "sha512-Jz+CjvCKLNbJZYJTBeN3Kq9kIJf6b61MoLBdaOQZJ5Ajhw6Pf95Nn21XwA8BwfUYgajsi6IXsp/dTZsYJbN00Q=="],
 
-    "metro-symbolicate": ["metro-symbolicate@0.81.1", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "metro-source-map": "0.81.1", "nullthrows": "^1.1.1", "source-map": "^0.5.6", "vlq": "^1.0.0" }, "bin": { "metro-symbolicate": "src/index.js" } }, "sha512-Lgk0qjEigtFtsM7C0miXITbcV47E1ZYIfB+m/hCraihiwRWkNUQEPCWvqZmwXKSwVE5mXA0EzQtghAvQSjZDxw=="],
+    "metro-symbolicate": ["metro-symbolicate@0.81.5", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "metro-source-map": "0.81.5", "nullthrows": "^1.1.1", "source-map": "^0.5.6", "vlq": "^1.0.0" }, "bin": { "metro-symbolicate": "src/index.js" } }, "sha512-X3HV3n3D6FuTE11UWFICqHbFMdTavfO48nXsSpnNGFkUZBexffu0Xd+fYKp+DJLNaQr3S+lAs8q9CgtDTlRRuA=="],
 
-    "metro-transform-plugins": ["metro-transform-plugins@0.81.1", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/generator": "^7.25.0", "@babel/template": "^7.25.0", "@babel/traverse": "^7.25.3", "flow-enums-runtime": "^0.0.6", "nullthrows": "^1.1.1" } }, "sha512-7L1lI44/CyjIoBaORhY9fVkoNe8hrzgxjSCQ/lQlcfrV31cZb7u0RGOQrKmUX7Bw4FpejrB70ArQ7Mse9mk7+Q=="],
+    "metro-transform-plugins": ["metro-transform-plugins@0.81.5", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/generator": "^7.25.0", "@babel/template": "^7.25.0", "@babel/traverse": "^7.25.3", "flow-enums-runtime": "^0.0.6", "nullthrows": "^1.1.1" } }, "sha512-MmHhVx/1dJC94FN7m3oHgv5uOjKH8EX8pBeu1pnPMxbJrx6ZuIejO0k84zTSaQTZ8RxX1wqwzWBpXAWPjEX8mA=="],
 
-    "metro-transform-worker": ["metro-transform-worker@0.81.1", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/generator": "^7.25.0", "@babel/parser": "^7.25.3", "@babel/types": "^7.25.2", "flow-enums-runtime": "^0.0.6", "metro": "0.81.1", "metro-babel-transformer": "0.81.1", "metro-cache": "0.81.1", "metro-cache-key": "0.81.1", "metro-minify-terser": "0.81.1", "metro-source-map": "0.81.1", "metro-transform-plugins": "0.81.1", "nullthrows": "^1.1.1" } }, "sha512-M+2hVT3rEy5K7PBmGDgQNq3Zx53TjScOcO/CieyLnCRFtBGWZiSJ2+bLAXXOKyKa/y3bI3i0owxtyxuPGDwbZg=="],
+    "metro-transform-worker": ["metro-transform-worker@0.81.5", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/generator": "^7.25.0", "@babel/parser": "^7.25.3", "@babel/types": "^7.25.2", "flow-enums-runtime": "^0.0.6", "metro": "0.81.5", "metro-babel-transformer": "0.81.5", "metro-cache": "0.81.5", "metro-cache-key": "0.81.5", "metro-minify-terser": "0.81.5", "metro-source-map": "0.81.5", "metro-transform-plugins": "0.81.5", "nullthrows": "^1.1.1" } }, "sha512-lUFyWVHa7lZFRSLJEv+m4jH8WrR5gU7VIjUlg4XmxQfV8ngY4V10ARKynLhMYPeQGl7Qvf+Ayg0eCZ272YZ4Mg=="],
 
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
@@ -1590,6 +1615,8 @@
 
     "mimic-fn": ["mimic-fn@2.1.0", "", {}, "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="],
 
+    "mimic-function": ["mimic-function@5.0.1", "", {}, "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA=="],
+
     "min-document": ["min-document@2.19.0", "", { "dependencies": { "dom-walk": "^0.1.0" } }, "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ=="],
 
     "minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -1652,7 +1679,7 @@
 
     "nullthrows": ["nullthrows@1.1.1", "", {}, "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="],
 
-    "ob1": ["ob1@0.81.1", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-1PEbvI+AFvOcgdNcO79FtDI1TUO8S3lhiKOyAiyWQF3sFDDKS+aw2/BZvGlArFnSmqckwOOB9chQuIX0/OahoQ=="],
+    "ob1": ["ob1@0.81.5", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-iNpbeXPLmaiT9I5g16gFFFjsF3sGxLpYG2EGP3dfFB4z+l9X60mp/yRzStHhMtuNt8qmf7Ww80nOPQHngHhnIQ=="],
 
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
@@ -1676,7 +1703,7 @@
 
     "onetime": ["onetime@5.1.2", "", { "dependencies": { "mimic-fn": "^2.1.0" } }, "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg=="],
 
-    "open": ["open@7.4.2", "", { "dependencies": { "is-docker": "^2.0.0", "is-wsl": "^2.1.1" } }, "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q=="],
+    "open": ["open@6.4.0", "", { "dependencies": { "is-wsl": "^1.1.0" } }, "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg=="],
 
     "ora": ["ora@5.4.1", "", { "dependencies": { "bl": "^4.1.0", "chalk": "^4.1.0", "cli-cursor": "^3.1.0", "cli-spinners": "^2.5.0", "is-interactive": "^1.0.0", "is-unicode-supported": "^0.1.0", "log-symbols": "^4.1.0", "strip-ansi": "^6.0.0", "wcwidth": "^1.0.1" } }, "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ=="],
 
@@ -1714,8 +1741,6 @@
 
     "password-prompt": ["password-prompt@1.1.3", "", { "dependencies": { "ansi-escapes": "^4.3.2", "cross-spawn": "^7.0.3" } }, "sha512-HkrjG2aJlvF0t2BMH0e2LB/EHf3Lcq3fNMzy4GYHcQblAvOl+QQji1Lx7WRBMqpVK8p+KR7bCg7oqAMXtdgqyw=="],
 
-    "patch-package": ["patch-package@8.0.0", "", { "dependencies": { "@yarnpkg/lockfile": "^1.1.0", "chalk": "^4.1.2", "ci-info": "^3.7.0", "cross-spawn": "^7.0.3", "find-yarn-workspace-root": "^2.0.0", "fs-extra": "^9.0.0", "json-stable-stringify": "^1.0.2", "klaw-sync": "^6.0.0", "minimist": "^1.2.6", "open": "^7.4.2", "rimraf": "^2.6.3", "semver": "^7.5.3", "slash": "^2.0.0", "tmp": "^0.0.33", "yaml": "^2.2.2" }, "bin": { "patch-package": "index.js" } }, "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA=="],
-
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
     "path-is-absolute": ["path-is-absolute@1.0.1", "", {}, "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="],
@@ -1734,7 +1759,9 @@
 
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
-    "picomatch": ["picomatch@3.0.1", "", {}, "sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag=="],
+    "picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
+
+    "pidtree": ["pidtree@0.6.0", "", { "bin": { "pidtree": "bin/pidtree.js" } }, "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g=="],
 
     "pify": ["pify@2.3.0", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
 
@@ -1824,7 +1851,7 @@
 
     "react-is": ["react-is@19.0.0", "", {}, "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g=="],
 
-    "react-native": ["react-native-tvos@0.77.0-0", "", { "dependencies": { "@jest/create-cache-key-function": "^29.6.3", "@react-native-tvos/virtualized-lists": "0.77.0-0", "@react-native/assets-registry": "0.77.0", "@react-native/codegen": "0.77.0", "@react-native/community-cli-plugin": "0.77.0", "@react-native/gradle-plugin": "0.77.0", "@react-native/js-polyfills": "0.77.0", "@react-native/normalize-colors": "0.77.0", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-jest": "^29.7.0", "babel-plugin-syntax-hermes-parser": "0.25.1", "base64-js": "^1.5.1", "chalk": "^4.0.0", "commander": "^12.0.0", "event-target-shim": "^5.0.1", "flow-enums-runtime": "^0.0.6", "glob": "^7.1.1", "invariant": "^2.2.4", "jest-environment-node": "^29.6.3", "jsc-android": "^250231.0.0", "memoize-one": "^5.0.0", "metro-runtime": "^0.81.0", "metro-source-map": "^0.81.0", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^6.0.1", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.24.0-canary-efb381bbf-20230505", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "whatwg-fetch": "^3.0.0", "ws": "^6.2.3", "yargs": "^17.6.2" }, "peerDependencies": { "@types/react": "^18.2.6", "react": "^18.2.0" }, "optionalPeers": ["@types/react"], "bin": { "react-native": "cli.js" } }, "sha512-edIOqGrPadpXHmt5R/LuhekHHLx/0DyrfY5A9odS2AlS+03S0ada7H5oDvusOUVcyq1vc3isrwZpUSQzudoR1g=="],
+    "react-native": ["react-native-tvos@0.77.2-0", "", { "dependencies": { "@jest/create-cache-key-function": "^29.6.3", "@react-native-tvos/virtualized-lists": "0.77.2-0", "@react-native/assets-registry": "0.77.2", "@react-native/codegen": "0.77.2", "@react-native/community-cli-plugin": "0.77.2", "@react-native/gradle-plugin": "0.77.2", "@react-native/js-polyfills": "0.77.2", "@react-native/normalize-colors": "0.77.2", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-jest": "^29.7.0", "babel-plugin-syntax-hermes-parser": "0.25.1", "base64-js": "^1.5.1", "chalk": "^4.0.0", "commander": "^12.0.0", "event-target-shim": "^5.0.1", "flow-enums-runtime": "^0.0.6", "glob": "^7.1.1", "invariant": "^2.2.4", "jest-environment-node": "^29.6.3", "jsc-android": "^250231.0.0", "memoize-one": "^5.0.0", "metro-runtime": "^0.81.3", "metro-source-map": "^0.81.3", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^6.0.1", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.24.0-canary-efb381bbf-20230505", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "whatwg-fetch": "^3.0.0", "ws": "^6.2.3", "yargs": "^17.6.2" }, "peerDependencies": { "@types/react": "^18.2.6", "react": "^18.2.0" }, "optionalPeers": ["@types/react"], "bin": { "react-native": "cli.js" } }, "sha512-Ys0tka4VRxClE8oGV4itR0CaeQwtI7jQ51uO7DedmUpt3m8I5uUUFQANgH8IhdEeTtvyPFbnCUffbpcFm59jKg=="],
 
     "react-native-awesome-slider": ["react-native-awesome-slider@2.9.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-gesture-handler": ">=2.0.0", "react-native-reanimated": ">=3.0.0" } }, "sha512-sc5qgX4YtM6IxjtosjgQLdsal120MvU+YWs0F2MdgQWijps22AXLDCUoBnZZ8vxVhVyJ2WnnIPrmtVBvVJjSuQ=="],
 
@@ -1832,6 +1859,8 @@
 
     "react-native-circular-progress": ["react-native-circular-progress@1.4.1", "", { "dependencies": { "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">=16.0.0", "react-native": ">=0.50.0", "react-native-svg": ">=7.0.0" } }, "sha512-HEzvI0WPuWvsCgWE3Ff2HBTMgAEQB2GvTFw0KHyD/t1STAlDDRiolu0mEGhVvihKR3jJu3v3V4qzvSklY/7XzQ=="],
 
+    "react-native-collapsible": ["react-native-collapsible@1.6.2", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-MCOBVJWqHNjnDaGkvxX997VONmJeebh6wyJxnHEgg0L1PrlcXU1e/bo6eK+CDVFuMrCafw8Qh4DOv/C4V/+Iew=="],
+
     "react-native-compressor": ["react-native-compressor@1.10.4", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-58gbmJ+8IvsKP8JKK1E8XW5trfQY3dNuH7S0hYw0tSRQc6l0GZ3k8TYtoUbySOc1xcQSrUo51o0Chwe8x7mUTg=="],
 
     "react-native-country-flag": ["react-native-country-flag@2.0.2", "", {}, "sha512-5LMWxS79ZQ0Q9ntYgDYzWp794+HcQGXQmzzZNBR1AT7z5HcJHtX7rlk8RHi7RVzfp5gW6plWSZ4dKjRpu/OafQ=="],
@@ -1874,8 +1903,6 @@
 
     "react-native-tab-view": ["react-native-tab-view@4.0.5", "", { "dependencies": { "use-latest-callback": "^0.2.1" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*", "react-native-pager-view": ">= 6.0.0" } }, "sha512-Xn3TpYo4yvKRC/f4+cOcvsXlitdnSaYkacshckrEI3JiDmFKNFIRVNxtZFggm4MwbJafq2RzuzR6xrgKoxgkTw=="],
 
-    "react-native-tvos": ["react-native-tvos@0.77.0-0", "", { "dependencies": { "@jest/create-cache-key-function": "^29.6.3", "@react-native-tvos/virtualized-lists": "0.77.0-0", "@react-native/assets-registry": "0.77.0", "@react-native/codegen": "0.77.0", "@react-native/community-cli-plugin": "0.77.0", "@react-native/gradle-plugin": "0.77.0", "@react-native/js-polyfills": "0.77.0", "@react-native/normalize-colors": "0.77.0", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-jest": "^29.7.0", "babel-plugin-syntax-hermes-parser": "0.25.1", "base64-js": "^1.5.1", "chalk": "^4.0.0", "commander": "^12.0.0", "event-target-shim": "^5.0.1", "flow-enums-runtime": "^0.0.6", "glob": "^7.1.1", "invariant": "^2.2.4", "jest-environment-node": "^29.6.3", "jsc-android": "^250231.0.0", "memoize-one": "^5.0.0", "metro-runtime": "^0.81.0", "metro-source-map": "^0.81.0", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^6.0.1", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.24.0-canary-efb381bbf-20230505", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "whatwg-fetch": "^3.0.0", "ws": "^6.2.3", "yargs": "^17.6.2" }, "peerDependencies": { "@types/react": "^18.2.6", "react": "^18.2.0" }, "optionalPeers": ["@types/react"], "bin": { "react-native": "cli.js" } }, "sha512-edIOqGrPadpXHmt5R/LuhekHHLx/0DyrfY5A9odS2AlS+03S0ada7H5oDvusOUVcyq1vc3isrwZpUSQzudoR1g=="],
-
     "react-native-udp": ["react-native-udp@4.1.7", "", { "dependencies": { "buffer": "^5.6.0", "events": "^3.1.0" } }, "sha512-NUE3zewu61NCdSsLlj+l0ad6qojcVEZPT4hVG/x6DU9U4iCzwtfZSASh9vm7teAcVzLkdD+cO3411LHshAi/wA=="],
 
     "react-native-uitextview": ["react-native-uitextview@1.4.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-itm/frzkn/ma3+lwmKn2CkBOXPNo4bL8iVwQwjlzix5gVO59T2+axdfoj/Wi+Ra6F76KzNKxSah+7Y8dYmCHbQ=="],
@@ -1952,7 +1979,9 @@
 
     "reusify": ["reusify@1.0.4", "", {}, "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="],
 
-    "rimraf": ["rimraf@2.7.1", "", { "dependencies": { "glob": "^7.1.3" }, "bin": { "rimraf": "./bin.js" } }, "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w=="],
+    "rfdc": ["rfdc@1.4.1", "", {}, "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="],
+
+    "rimraf": ["rimraf@3.0.2", "", { "dependencies": { "glob": "^7.1.3" }, "bin": { "rimraf": "bin.js" } }, "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="],
 
     "rtl-detect": ["rtl-detect@1.1.2", "", {}, "sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ=="],
 
@@ -2018,9 +2047,9 @@
 
     "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
 
-    "slash": ["slash@2.0.0", "", {}, "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A=="],
+    "slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
 
-    "slice-ansi": ["slice-ansi@2.1.0", "", { "dependencies": { "ansi-styles": "^3.2.0", "astral-regex": "^1.0.0", "is-fullwidth-code-point": "^2.0.0" } }, "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ=="],
+    "slice-ansi": ["slice-ansi@5.0.0", "", { "dependencies": { "ansi-styles": "^6.0.0", "is-fullwidth-code-point": "^4.0.0" } }, "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ=="],
 
     "slugify": ["slugify@1.6.6", "", {}, "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw=="],
 
@@ -2054,6 +2083,8 @@
 
     "strict-uri-encode": ["strict-uri-encode@2.0.0", "", {}, "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="],
 
+    "string-argv": ["string-argv@0.3.2", "", {}, "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q=="],
+
     "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
     "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
@@ -2230,7 +2261,7 @@
 
     "wonka": ["wonka@6.3.4", "", {}, "sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg=="],
 
-    "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+    "wrap-ansi": ["wrap-ansi@9.0.0", "", { "dependencies": { "ansi-styles": "^6.2.1", "string-width": "^7.0.0", "strip-ansi": "^7.1.0" } }, "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q=="],
 
     "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
@@ -2282,8 +2313,6 @@
 
     "@babel/runtime/regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
 
-    "@config-plugins/ffmpeg-kit-react-native/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
-
     "@expo/bunyan/uuid": ["uuid@8.3.2", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="],
 
     "@expo/cli/arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
@@ -2294,8 +2323,12 @@
 
     "@expo/cli/ora": ["ora@3.4.0", "", { "dependencies": { "chalk": "^2.4.2", "cli-cursor": "^2.1.0", "cli-spinners": "^2.0.0", "log-symbols": "^2.2.0", "strip-ansi": "^5.2.0", "wcwidth": "^1.0.1" } }, "sha512-eNwHudNbO1folBP3JsZ19v9azXWtQZjICdr3Q0TDPIaeBQ3mXLrh54wM+er0+hSp+dWKf+Z8KM58CYzEyIYxYg=="],
 
+    "@expo/cli/picomatch": ["picomatch@3.0.1", "", {}, "sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag=="],
+
     "@expo/cli/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
+    "@expo/cli/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
     "@expo/cli/ws": ["ws@8.18.1", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w=="],
 
     "@expo/config/@babel/code-frame": ["@babel/code-frame@7.10.4", "", { "dependencies": { "@babel/highlight": "^7.10.4" } }, "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg=="],
@@ -2304,8 +2337,6 @@
 
     "@expo/config-plugins/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
-    "@expo/config-plugins/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
-
     "@expo/devcert/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
 
     "@expo/devcert/sudo-prompt": ["sudo-prompt@8.2.5", "", {}, "sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw=="],
@@ -2354,8 +2385,6 @@
 
     "@istanbuljs/load-nyc-config/js-yaml": ["js-yaml@3.14.1", "", { "dependencies": { "argparse": "^1.0.7", "esprima": "^4.0.0" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g=="],
 
-    "@jest/transform/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
-
     "@jest/transform/write-file-atomic": ["write-file-atomic@4.0.2", "", { "dependencies": { "imurmurhash": "^0.1.4", "signal-exit": "^3.0.7" } }, "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg=="],
 
     "@npmcli/fs/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
@@ -2388,15 +2417,13 @@
 
     "@react-native-community/cli-server-api/pretty-format": ["pretty-format@26.6.2", "", { "dependencies": { "@jest/types": "^26.6.2", "ansi-regex": "^5.0.0", "ansi-styles": "^4.0.0", "react-is": "^17.0.1" } }, "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg=="],
 
-    "@react-native-community/cli-tools/open": ["open@6.4.0", "", { "dependencies": { "is-wsl": "^1.1.0" } }, "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg=="],
-
     "@react-native-community/cli-tools/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
     "@react-native/babel-plugin-codegen/@react-native/codegen": ["@react-native/codegen@0.76.7", "", { "dependencies": { "@babel/parser": "^7.25.3", "glob": "^7.1.1", "hermes-parser": "0.23.1", "invariant": "^2.2.4", "jscodeshift": "^0.14.0", "mkdirp": "^0.5.1", "nullthrows": "^1.1.1", "yargs": "^17.6.2" }, "peerDependencies": { "@babel/preset-env": "^7.1.6" } }, "sha512-FAn585Ll65YvkSrKDyAcsdjHhhAGiMlSTUpHh0x7J5ntudUns+voYms0xMP+pEPt0XuLdjhD7zLIIlAWP407+g=="],
 
     "@react-native/codegen/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
 
-    "@react-native/community-cli-plugin/@react-native/dev-middleware": ["@react-native/dev-middleware@0.77.0", "", { "dependencies": { "@isaacs/ttlcache": "^1.4.1", "@react-native/debugger-frontend": "0.77.0", "chrome-launcher": "^0.15.2", "chromium-edge-launcher": "^0.2.0", "connect": "^3.6.5", "debug": "^2.2.0", "nullthrows": "^1.1.1", "open": "^7.0.3", "selfsigned": "^2.4.1", "serve-static": "^1.16.2", "ws": "^6.2.3" } }, "sha512-DAlEYujm43O+Dq98KP2XfLSX5c/TEGtt+JBDEIOQewk374uYY52HzRb1+Gj6tNaEj/b33no4GibtdxbO5zmPhg=="],
+    "@react-native/community-cli-plugin/@react-native/dev-middleware": ["@react-native/dev-middleware@0.77.2", "", { "dependencies": { "@isaacs/ttlcache": "^1.4.1", "@react-native/debugger-frontend": "0.77.2", "chrome-launcher": "^0.15.2", "chromium-edge-launcher": "^0.2.0", "connect": "^3.6.5", "debug": "^2.2.0", "invariant": "^2.2.4", "nullthrows": "^1.1.1", "open": "^7.0.3", "selfsigned": "^2.4.1", "serve-static": "^1.16.2", "ws": "^6.2.3" } }, "sha512-LBK0kY4XxE4vHVHJ3TwBGXmjl2ad9dsbbwnVgXwYNL/mkkWb2MHlmgHj6xlCMe1gtLtem2TpEF17TKg50ykPJw=="],
 
     "@react-native/community-cli-plugin/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
@@ -2404,7 +2431,9 @@
 
     "@react-native/dev-middleware/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
-    "@react-native/metro-babel-transformer/@react-native/babel-preset": ["@react-native/babel-preset@0.77.0", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/plugin-proposal-export-default-from": "^7.24.7", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-export-default-from": "^7.24.7", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", "@babel/plugin-syntax-optional-chaining": "^7.8.3", "@babel/plugin-transform-arrow-functions": "^7.24.7", "@babel/plugin-transform-async-generator-functions": "^7.25.4", "@babel/plugin-transform-async-to-generator": "^7.24.7", "@babel/plugin-transform-block-scoping": "^7.25.0", "@babel/plugin-transform-class-properties": "^7.25.4", "@babel/plugin-transform-classes": "^7.25.4", "@babel/plugin-transform-computed-properties": "^7.24.7", "@babel/plugin-transform-destructuring": "^7.24.8", "@babel/plugin-transform-flow-strip-types": "^7.25.2", "@babel/plugin-transform-for-of": "^7.24.7", "@babel/plugin-transform-function-name": "^7.25.1", "@babel/plugin-transform-literals": "^7.25.2", "@babel/plugin-transform-logical-assignment-operators": "^7.24.7", "@babel/plugin-transform-modules-commonjs": "^7.24.8", "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7", "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7", "@babel/plugin-transform-numeric-separator": "^7.24.7", "@babel/plugin-transform-object-rest-spread": "^7.24.7", "@babel/plugin-transform-optional-catch-binding": "^7.24.7", "@babel/plugin-transform-optional-chaining": "^7.24.8", "@babel/plugin-transform-parameters": "^7.24.7", "@babel/plugin-transform-private-methods": "^7.24.7", "@babel/plugin-transform-private-property-in-object": "^7.24.7", "@babel/plugin-transform-react-display-name": "^7.24.7", "@babel/plugin-transform-react-jsx": "^7.25.2", "@babel/plugin-transform-react-jsx-self": "^7.24.7", "@babel/plugin-transform-react-jsx-source": "^7.24.7", "@babel/plugin-transform-regenerator": "^7.24.7", "@babel/plugin-transform-runtime": "^7.24.7", "@babel/plugin-transform-shorthand-properties": "^7.24.7", "@babel/plugin-transform-spread": "^7.24.7", "@babel/plugin-transform-sticky-regex": "^7.24.7", "@babel/plugin-transform-typescript": "^7.25.2", "@babel/plugin-transform-unicode-regex": "^7.24.7", "@babel/template": "^7.25.0", "@react-native/babel-plugin-codegen": "0.77.0", "babel-plugin-syntax-hermes-parser": "0.25.1", "babel-plugin-transform-flow-enums": "^0.0.2", "react-refresh": "^0.14.0" } }, "sha512-Z4yxE66OvPyQ/iAlaETI1ptRLcDm7Tk6ZLqtCPuUX3AMg+JNgIA86979T4RSk486/JrBUBH5WZe2xjj7eEHXsA=="],
+    "@react-native/dev-middleware/open": ["open@7.4.2", "", { "dependencies": { "is-docker": "^2.0.0", "is-wsl": "^2.1.1" } }, "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q=="],
+
+    "@react-native/metro-babel-transformer/@react-native/babel-preset": ["@react-native/babel-preset@0.77.2", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/plugin-proposal-export-default-from": "^7.24.7", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-export-default-from": "^7.24.7", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", "@babel/plugin-syntax-optional-chaining": "^7.8.3", "@babel/plugin-transform-arrow-functions": "^7.24.7", "@babel/plugin-transform-async-generator-functions": "^7.25.4", "@babel/plugin-transform-async-to-generator": "^7.24.7", "@babel/plugin-transform-block-scoping": "^7.25.0", "@babel/plugin-transform-class-properties": "^7.25.4", "@babel/plugin-transform-classes": "^7.25.4", "@babel/plugin-transform-computed-properties": "^7.24.7", "@babel/plugin-transform-destructuring": "^7.24.8", "@babel/plugin-transform-flow-strip-types": "^7.25.2", "@babel/plugin-transform-for-of": "^7.24.7", "@babel/plugin-transform-function-name": "^7.25.1", "@babel/plugin-transform-literals": "^7.25.2", "@babel/plugin-transform-logical-assignment-operators": "^7.24.7", "@babel/plugin-transform-modules-commonjs": "^7.24.8", "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7", "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7", "@babel/plugin-transform-numeric-separator": "^7.24.7", "@babel/plugin-transform-object-rest-spread": "^7.24.7", "@babel/plugin-transform-optional-catch-binding": "^7.24.7", "@babel/plugin-transform-optional-chaining": "^7.24.8", "@babel/plugin-transform-parameters": "^7.24.7", "@babel/plugin-transform-private-methods": "^7.24.7", "@babel/plugin-transform-private-property-in-object": "^7.24.7", "@babel/plugin-transform-react-display-name": "^7.24.7", "@babel/plugin-transform-react-jsx": "^7.25.2", "@babel/plugin-transform-react-jsx-self": "^7.24.7", "@babel/plugin-transform-react-jsx-source": "^7.24.7", "@babel/plugin-transform-regenerator": "^7.24.7", "@babel/plugin-transform-runtime": "^7.24.7", "@babel/plugin-transform-shorthand-properties": "^7.24.7", "@babel/plugin-transform-spread": "^7.24.7", "@babel/plugin-transform-sticky-regex": "^7.24.7", "@babel/plugin-transform-typescript": "^7.25.2", "@babel/plugin-transform-unicode-regex": "^7.24.7", "@babel/template": "^7.25.0", "@react-native/babel-plugin-codegen": "0.77.2", "babel-plugin-syntax-hermes-parser": "0.25.1", "babel-plugin-transform-flow-enums": "^0.0.2", "react-refresh": "^0.14.0" } }, "sha512-If6X4I0z6W5aVzqZS4JOrN7sh08w1QzEL8Q66i3g0wI8K8ZK+V+/ARlEmboy14VtcOYlmmjXEqSCv+Z2o9cuKg=="],
 
     "@react-navigation/core/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
@@ -2412,11 +2441,9 @@
 
     "accepts/negotiator": ["negotiator@0.6.3", "", {}, "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="],
 
-    "ansi-escapes/type-fest": ["type-fest@0.21.3", "", {}, "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="],
+    "ansi-fragments/colorette": ["colorette@1.4.0", "", {}, "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g=="],
 
-    "anymatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
-    "babel-jest/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
+    "ansi-fragments/slice-ansi": ["slice-ansi@2.1.0", "", { "dependencies": { "ansi-styles": "^3.2.0", "astral-regex": "^1.0.0", "is-fullwidth-code-point": "^2.0.0" } }, "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ=="],
 
     "better-opn/open": ["open@8.4.2", "", { "dependencies": { "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", "is-wsl": "^2.2.0" } }, "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ=="],
 
@@ -2428,10 +2455,12 @@
 
     "chromium-edge-launcher/mkdirp": ["mkdirp@1.0.4", "", { "bin": { "mkdirp": "bin/cmd.js" } }, "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="],
 
-    "chromium-edge-launcher/rimraf": ["rimraf@3.0.2", "", { "dependencies": { "glob": "^7.1.3" }, "bin": { "rimraf": "bin.js" } }, "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="],
+    "cli-truncate/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
 
     "cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
+    "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
     "compressible/mime-db": ["mime-db@1.53.0", "", {}, "sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg=="],
 
     "compression/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
@@ -2442,10 +2471,6 @@
 
     "default-gateway/execa": ["execa@1.0.0", "", { "dependencies": { "cross-spawn": "^6.0.0", "get-stream": "^4.0.0", "is-stream": "^1.1.0", "npm-run-path": "^2.0.0", "p-finally": "^1.0.0", "signal-exit": "^3.0.0", "strip-eof": "^1.0.0" } }, "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA=="],
 
-    "del/rimraf": ["rimraf@3.0.2", "", { "dependencies": { "glob": "^7.1.3" }, "bin": { "rimraf": "bin.js" } }, "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="],
-
-    "del/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
-
     "error-ex/is-arrayish": ["is-arrayish@0.2.1", "", {}, "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="],
 
     "expo-build-properties/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
@@ -2474,8 +2499,6 @@
 
     "foreground-child/signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
 
-    "globby/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
-
     "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "hosted-git-info/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
@@ -2484,10 +2507,6 @@
 
     "import-fresh/resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
-    "jest-message-util/slash": ["slash@3.0.0", "", {}, "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="],
-
-    "jest-util/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
     "jest-worker/supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
 
     "jscodeshift/tmp": ["tmp@0.2.3", "", {}, "sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w=="],
@@ -2496,10 +2515,22 @@
 
     "lighthouse-logger/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
+    "lint-staged/chalk": ["chalk@5.4.1", "", {}, "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w=="],
+
+    "lint-staged/commander": ["commander@13.1.0", "", {}, "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw=="],
+
+    "lint-staged/execa": ["execa@8.0.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^8.0.1", "human-signals": "^5.0.0", "is-stream": "^3.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^5.1.0", "onetime": "^6.0.0", "signal-exit": "^4.1.0", "strip-final-newline": "^3.0.0" } }, "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg=="],
+
     "load-bmfont/mime": ["mime@1.6.0", "", { "bin": { "mime": "cli.js" } }, "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="],
 
     "load-bmfont/phin": ["phin@3.7.1", "", { "dependencies": { "centra": "^2.7.0" } }, "sha512-GEazpTWwTZaEQ9RhL7Nyz0WwqilbqgLahDM3D0hxWwmVDI52nXEybHqiN6/elwpkJBhcuj+WbBu+QfT0uhPGfQ=="],
 
+    "log-update/cli-cursor": ["cli-cursor@5.0.0", "", { "dependencies": { "restore-cursor": "^5.0.0" } }, "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw=="],
+
+    "log-update/slice-ansi": ["slice-ansi@7.1.0", "", { "dependencies": { "ansi-styles": "^6.2.1", "is-fullwidth-code-point": "^5.0.0" } }, "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg=="],
+
+    "log-update/strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
+
     "logkitty/yargs": ["yargs@15.4.1", "", { "dependencies": { "cliui": "^6.0.0", "decamelize": "^1.2.0", "find-up": "^4.1.0", "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", "yargs-parser": "^18.1.2" } }, "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A=="],
 
     "make-dir/pify": ["pify@4.0.1", "", {}, "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="],
@@ -2516,8 +2547,6 @@
 
     "metro-file-map/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
-    "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
     "minipass-flush/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
 
     "minipass-pipeline/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
@@ -2534,13 +2563,13 @@
 
     "npm-package-arg/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
+    "open/is-wsl": ["is-wsl@1.1.0", "", {}, "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw=="],
+
     "ora/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
     "parse-bmfont-xml/xml2js": ["xml2js@0.5.0", "", { "dependencies": { "sax": ">=0.6.0", "xmlbuilder": "~11.0.0" } }, "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA=="],
 
-    "patch-package/fs-extra": ["fs-extra@9.1.0", "", { "dependencies": { "at-least-node": "^1.0.0", "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ=="],
-
-    "patch-package/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
+    "password-prompt/ansi-escapes": ["ansi-escapes@4.3.2", "", { "dependencies": { "type-fest": "^0.21.3" } }, "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="],
 
     "path-scurry/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
@@ -2552,8 +2581,6 @@
 
     "postcss-css-variables/escape-string-regexp": ["escape-string-regexp@1.0.5", "", {}, "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="],
 
-    "postcss-load-config/lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
-
     "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
     "pretty-format/react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
@@ -2564,7 +2591,7 @@
 
     "react-dom/scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
 
-    "react-native/@react-native/normalize-colors": ["@react-native/normalize-colors@0.77.0", "", {}, "sha512-qjmxW3xRZe4T0ZBEaXZNHtuUbRgyfybWijf1yUuQwjBt24tSapmIslwhCjpKidA0p93ssPcepquhY0ykH25mew=="],
+    "react-native/@react-native/normalize-colors": ["@react-native/normalize-colors@0.77.2", "", {}, "sha512-knKStQKX4KM8GkieeayotcSTO7I7PIZxwI71nhK/zBeRPqhDTJMNJQh5TnZJ63fO1Y+EZclWkRIKEj+aFRsssw=="],
 
     "react-native/commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
 
@@ -2574,24 +2601,12 @@
 
     "react-native/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
-    "react-native-tvos/@react-native/normalize-colors": ["@react-native/normalize-colors@0.77.0", "", {}, "sha512-qjmxW3xRZe4T0ZBEaXZNHtuUbRgyfybWijf1yUuQwjBt24tSapmIslwhCjpKidA0p93ssPcepquhY0ykH25mew=="],
-
-    "react-native-tvos/commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
-
-    "react-native-tvos/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
-
-    "react-native-tvos/scheduler": ["scheduler@0.24.0-canary-efb381bbf-20230505", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-ABvovCDe/k9IluqSh4/ISoq8tIJnW8euVAWYt5j/bg6dRnqwQwiGO1F/V4AyK96NGF/FB04FhOUDuWj8IKfABA=="],
-
-    "react-native-tvos/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
-
     "react-native-web/@react-native/normalize-colors": ["@react-native/normalize-colors@0.74.89", "", {}, "sha512-qoMMXddVKVhZ8PA1AbUCk83trpd6N+1nF2A6k1i6LsQObyS92fELuk8kU/lQs6M7BsMHwqyLCpQJ1uFgNvIQXg=="],
 
     "react-native-web/memoize-one": ["memoize-one@6.0.0", "", {}, "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="],
 
     "readable-web-to-node-stream/readable-stream": ["readable-stream@4.7.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="],
 
-    "readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
     "recast/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
     "regjsparser/jsesc": ["jsesc@3.0.2", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g=="],
@@ -2610,9 +2625,9 @@
 
     "simple-plist/bplist-parser": ["bplist-parser@0.3.1", "", { "dependencies": { "big-integer": "1.6.x" } }, "sha512-PyJxiNtA5T2PlLIeBot4lbp7rj4OadzjnMZD/G5zuBNt8ei/yCU7+wW0h2bag9vr8c+/WuRWmSxbqAl9hL1rBA=="],
 
-    "slice-ansi/ansi-styles": ["ansi-styles@3.2.1", "", { "dependencies": { "color-convert": "^1.9.0" } }, "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="],
+    "slice-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
 
-    "slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@2.0.0", "", {}, "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="],
+    "slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@4.0.0", "", {}, "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ=="],
 
     "source-map-support/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
@@ -2628,6 +2643,8 @@
 
     "tailwindcss/arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
 
+    "tailwindcss/lilconfig": ["lilconfig@2.1.0", "", {}, "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="],
+
     "tailwindcss/postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
 
     "tar/fs-minipass": ["fs-minipass@2.1.0", "", { "dependencies": { "minipass": "^3.0.0" } }, "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg=="],
@@ -2642,6 +2659,8 @@
 
     "tempy/type-fest": ["type-fest@0.16.0", "", {}, "sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg=="],
 
+    "terminal-link/ansi-escapes": ["ansi-escapes@4.3.2", "", { "dependencies": { "type-fest": "^0.21.3" } }, "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="],
+
     "terser/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
 
     "test-exclude/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
@@ -2652,7 +2671,11 @@
 
     "whatwg-url/webidl-conversions": ["webidl-conversions@3.0.1", "", {}, "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="],
 
-    "wrap-ansi/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+    "wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
+
+    "wrap-ansi/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
+    "wrap-ansi/strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
 
     "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
@@ -2674,6 +2697,8 @@
 
     "@expo/cli/ora/log-symbols": ["log-symbols@2.2.0", "", { "dependencies": { "chalk": "^2.0.1" } }, "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg=="],
 
+    "@expo/cli/wrap-ansi/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
     "@expo/fingerprint/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
 
     "@expo/image-utils/fs-extra/jsonfile": ["jsonfile@6.1.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="],
@@ -2714,8 +2739,6 @@
 
     "@react-native-community/cli-server-api/pretty-format/react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
-    "@react-native-community/cli-tools/open/is-wsl": ["is-wsl@1.1.0", "", {}, "sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw=="],
-
     "@react-native/babel-plugin-codegen/@react-native/codegen/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
 
     "@react-native/babel-plugin-codegen/@react-native/codegen/hermes-parser": ["hermes-parser@0.23.1", "", { "dependencies": { "hermes-estree": "0.23.1" } }, "sha512-oxl5h2DkFW83hT4DAUJorpah8ou4yvmweUzLJmmr6YV2cezduCdlil1AvU/a/xSsAFo4WUcNA4GoV5Bvq6JffA=="],
@@ -2724,15 +2747,23 @@
 
     "@react-native/codegen/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
-    "@react-native/community-cli-plugin/@react-native/dev-middleware/@react-native/debugger-frontend": ["@react-native/debugger-frontend@0.77.0", "", {}, "sha512-glOvSEjCbVXw+KtfiOAmrq21FuLE1VsmBsyT7qud4KWbXP43aUEhzn70mWyFuiIdxnzVPKe2u8iWTQTdJksR1w=="],
+    "@react-native/community-cli-plugin/@react-native/dev-middleware/@react-native/debugger-frontend": ["@react-native/debugger-frontend@0.77.2", "", {}, "sha512-MRLjQLJr9C0M/TggoycEgYR7lUEZph4cg5PhUwBoNyRquV7lGHqMKNkfMBYBT09cuwKn9O+cFvQOmMNVqsPLxw=="],
+
+    "@react-native/community-cli-plugin/@react-native/dev-middleware/open": ["open@7.4.2", "", { "dependencies": { "is-docker": "^2.0.0", "is-wsl": "^2.1.1" } }, "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q=="],
 
     "@react-native/community-cli-plugin/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
     "@react-native/dev-middleware/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
-    "@react-native/metro-babel-transformer/@react-native/babel-preset/@react-native/babel-plugin-codegen": ["@react-native/babel-plugin-codegen@0.77.0", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@react-native/codegen": "0.77.0" } }, "sha512-5TYPn1k+jdDOZJU4EVb1kZ0p9TCVICXK3uplRev5Gul57oWesAaiWGZOzfRS3lonWeuR4ij8v8PFfIHOaq0vmA=="],
+    "@react-native/metro-babel-transformer/@react-native/babel-preset/@react-native/babel-plugin-codegen": ["@react-native/babel-plugin-codegen@0.77.2", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@react-native/codegen": "0.77.2" } }, "sha512-2PShbsfsa4NZS+Zt0y2tl1AoWza5podKFmPE5qcYjJoN915VoH3BRkiTVlSpYNKmdvs31o1aQuXAMQDTh7DZ/g=="],
 
-    "chromium-edge-launcher/rimraf/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
+    "ansi-fragments/slice-ansi/ansi-styles": ["ansi-styles@3.2.1", "", { "dependencies": { "color-convert": "^1.9.0" } }, "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA=="],
+
+    "ansi-fragments/slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@2.0.0", "", {}, "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="],
+
+    "cli-truncate/string-width/emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
+
+    "cli-truncate/string-width/strip-ansi": ["strip-ansi@7.1.0", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ=="],
 
     "compression/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
@@ -2746,8 +2777,6 @@
 
     "default-gateway/execa/npm-run-path": ["npm-run-path@2.0.2", "", { "dependencies": { "path-key": "^2.0.0" } }, "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw=="],
 
-    "del/rimraf/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
-
     "expo-modules-autolinking/fs-extra/jsonfile": ["jsonfile@6.1.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="],
 
     "expo-modules-autolinking/fs-extra/universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],
@@ -2758,6 +2787,28 @@
 
     "lighthouse-logger/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
+    "lint-staged/execa/get-stream": ["get-stream@8.0.1", "", {}, "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA=="],
+
+    "lint-staged/execa/human-signals": ["human-signals@5.0.0", "", {}, "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ=="],
+
+    "lint-staged/execa/is-stream": ["is-stream@3.0.0", "", {}, "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA=="],
+
+    "lint-staged/execa/npm-run-path": ["npm-run-path@5.3.0", "", { "dependencies": { "path-key": "^4.0.0" } }, "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ=="],
+
+    "lint-staged/execa/onetime": ["onetime@6.0.0", "", { "dependencies": { "mimic-fn": "^4.0.0" } }, "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ=="],
+
+    "lint-staged/execa/signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
+
+    "lint-staged/execa/strip-final-newline": ["strip-final-newline@3.0.0", "", {}, "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw=="],
+
+    "log-update/cli-cursor/restore-cursor": ["restore-cursor@5.1.0", "", { "dependencies": { "onetime": "^7.0.0", "signal-exit": "^4.1.0" } }, "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA=="],
+
+    "log-update/slice-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
+
+    "log-update/slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@5.0.0", "", { "dependencies": { "get-east-asian-width": "^1.0.0" } }, "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA=="],
+
+    "log-update/strip-ansi/ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
+
     "logkitty/yargs/cliui": ["cliui@6.0.0", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^6.2.0" } }, "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="],
 
     "logkitty/yargs/find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
@@ -2784,14 +2835,10 @@
 
     "parse-bmfont-xml/xml2js/xmlbuilder": ["xmlbuilder@11.0.1", "", {}, "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="],
 
-    "patch-package/fs-extra/jsonfile": ["jsonfile@6.1.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="],
-
-    "patch-package/fs-extra/universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],
+    "password-prompt/ansi-escapes/type-fest": ["type-fest@0.21.3", "", {}, "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="],
 
     "pkg-dir/find-up/locate-path": ["locate-path@3.0.0", "", { "dependencies": { "p-locate": "^3.0.0", "path-exists": "^3.0.0" } }, "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A=="],
 
-    "react-native-tvos/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
-
     "react-native/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
     "readable-web-to-node-stream/readable-stream/buffer": ["buffer@6.0.3", "", { "dependencies": { "base64-js": "^1.3.1", "ieee754": "^1.2.1" } }, "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA=="],
@@ -2800,14 +2847,18 @@
 
     "send/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
-    "slice-ansi/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
-
     "tar/fs-minipass/minipass": ["minipass@3.3.6", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw=="],
 
     "temp/rimraf/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
 
+    "terminal-link/ansi-escapes/type-fest": ["type-fest@0.21.3", "", {}, "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w=="],
+
     "test-exclude/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
 
+    "wrap-ansi/string-width/emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
+
+    "wrap-ansi/strip-ansi/ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
+
     "@babel/highlight/chalk/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
 
     "@babel/highlight/chalk/supports-color/has-flag": ["has-flag@3.0.0", "", {}, "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="],
@@ -2842,7 +2893,9 @@
 
     "@react-native/codegen/glob/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
 
-    "chromium-edge-launcher/rimraf/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+    "ansi-fragments/slice-ansi/ansi-styles/color-convert": ["color-convert@1.9.3", "", { "dependencies": { "color-name": "1.1.3" } }, "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg=="],
+
+    "cli-truncate/string-width/strip-ansi/ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
 
     "default-gateway/execa/cross-spawn/path-key": ["path-key@2.0.1", "", {}, "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw=="],
 
@@ -2854,7 +2907,13 @@
 
     "default-gateway/execa/npm-run-path/path-key": ["path-key@2.0.1", "", {}, "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw=="],
 
-    "del/rimraf/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+    "lint-staged/execa/npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
+
+    "lint-staged/execa/onetime/mimic-fn": ["mimic-fn@4.0.0", "", {}, "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw=="],
+
+    "log-update/cli-cursor/restore-cursor/onetime": ["onetime@7.0.0", "", { "dependencies": { "mimic-function": "^5.0.0" } }, "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ=="],
+
+    "log-update/cli-cursor/restore-cursor/signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
 
     "logkitty/yargs/cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
 
@@ -2872,14 +2931,10 @@
 
     "pkg-dir/find-up/locate-path/path-exists": ["path-exists@3.0.0", "", {}, "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ=="],
 
-    "react-native-tvos/glob/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
-
     "react-native/glob/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
 
     "rimraf/glob/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
 
-    "slice-ansi/ansi-styles/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
-
     "temp/rimraf/glob/minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
 
     "@babel/highlight/chalk/ansi-styles/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
@@ -2904,12 +2959,10 @@
 
     "@react-native/babel-plugin-codegen/@react-native/codegen/jscodeshift/recast/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
-    "chromium-edge-launcher/rimraf/glob/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
+    "ansi-fragments/slice-ansi/ansi-styles/color-convert/color-name": ["color-name@1.1.3", "", {}, "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="],
 
     "default-gateway/execa/cross-spawn/shebang-command/shebang-regex": ["shebang-regex@1.0.0", "", {}, "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ=="],
 
-    "del/rimraf/glob/minimatch/brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
-
     "logkitty/yargs/find-up/locate-path/p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
 
     "pkg-dir/find-up/locate-path/p-locate/p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],

components/AddToFavorites.tsx

@@ -1,20 +1,20 @@
-
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
-import { useFavorite } from "@/hooks/useFavorite";
-import { View } from "react-native";
 import { RoundButton } from "@/components/RoundButton";
+import { useFavorite } from "@/hooks/useFavorite";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { FC } from "react";
+import { View, type ViewProps } from "react-native";
 
 interface Props extends ViewProps {
   item: BaseItemDto;
 }
 
-export const AddToFavorites = ({ item, ...props }) => {
-  const { isFavorite, toggleFavorite, _} = useFavorite(item);
-  
+export const AddToFavorites: FC<Props> = ({ item, ...props }) => {
+  const { isFavorite, toggleFavorite } = useFavorite(item);
+
   return (
     <View {...props}>
       <RoundButton
-        size="large"
+        size='large'
         icon={isFavorite ? "heart" : "heart-outline"}
         fillColor={isFavorite ? "primary" : undefined}
         onPress={toggleFavorite}

components/AudioTrackSelector.tsx

@@ -1,9 +1,9 @@
-import { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
+import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { Text } from "./common/Text";
 import { useTranslation } from "react-i18next";
+import { Text } from "./common/Text";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -20,31 +20,31 @@ export const AudioTrackSelector: React.FC<Props> = ({
   if (Platform.isTV) return null;
   const audioStreams = useMemo(
     () => source?.MediaStreams?.filter((x) => x.Type === "Audio"),
-    [source]
+    [source],
   );
 
   const selectedAudioSteam = useMemo(
     () => audioStreams?.find((x) => x.Index === selected),
-    [audioStreams, selected]
+    [audioStreams, selected],
   );
 
   const { t } = useTranslation();
 
   return (
     <View
-      className="flex shrink"
+      className='flex shrink'
       style={{
         minWidth: 50,
       }}
     >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-          <View className="flex flex-col" {...props}>
-            <Text className="opacity-50 mb-1 text-xs">
+          <View className='flex flex-col' {...props}>
+            <Text className='opacity-50 mb-1 text-xs'>
               {t("item_card.audio")}
             </Text>
-            <TouchableOpacity className="bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
-              <Text className="" numberOfLines={1}>
+            <TouchableOpacity className='bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+              <Text className='' numberOfLines={1}>
                 {selectedAudioSteam?.DisplayTitle}
               </Text>
             </TouchableOpacity>
@@ -52,8 +52,8 @@ export const AudioTrackSelector: React.FC<Props> = ({
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           loop={true}
-          side="bottom"
-          align="start"
+          side='bottom'
+          align='start'
           alignOffset={0}
           avoidCollisions={true}
           collisionPadding={8}

components/Badge.tsx

@@ -1,4 +1,4 @@
-import { View, ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
 import { Text } from "./common/Text";
 
 interface Props extends ViewProps {
@@ -22,7 +22,7 @@ export const Badge: React.FC<Props> = ({
       ${variant === "gray" && "bg-neutral-800"}
       `}
     >
-      {iconLeft && <View className="mr-1">{iconLeft}</View>}
+      {iconLeft && <View className='mr-1'>{iconLeft}</View>}
       <Text
         className={`
           text-xs

components/BitrateSelector.tsx

@@ -1,8 +1,8 @@
 import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { Text } from "./common/Text";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { Text } from "./common/Text";
 
 export type Bitrate = {
   key: string;
@@ -40,7 +40,11 @@ export const BITRATES: Bitrate[] = [
     key: "250 Kb/s",
     value: 250000,
   },
-].sort((a, b) => (b.value || Infinity) - (a.value || Infinity));
+].sort(
+  (a, b) =>
+    (b.value || Number.POSITIVE_INFINITY) -
+    (a.value || Number.POSITIVE_INFINITY),
+);
 
 interface Props extends React.ComponentProps<typeof View> {
   onChange: (value: Bitrate) => void;
@@ -58,10 +62,14 @@ export const BitrateSelector: React.FC<Props> = ({
   const sorted = useMemo(() => {
     if (inverted)
       return BITRATES.sort(
-        (a, b) => (a.value || Infinity) - (b.value || Infinity)
+        (a, b) =>
+          (a.value || Number.POSITIVE_INFINITY) -
+          (b.value || Number.POSITIVE_INFINITY),
       );
     return BITRATES.sort(
-      (a, b) => (b.value || Infinity) - (a.value || Infinity)
+      (a, b) =>
+        (b.value || Number.POSITIVE_INFINITY) -
+        (a.value || Number.POSITIVE_INFINITY),
     );
   }, []);
 
@@ -69,7 +77,7 @@ export const BitrateSelector: React.FC<Props> = ({
 
   return (
     <View
-      className="flex shrink"
+      className='flex shrink'
       style={{
         minWidth: 60,
         maxWidth: 200,
@@ -77,12 +85,12 @@ export const BitrateSelector: React.FC<Props> = ({
     >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-          <View className="flex flex-col" {...props}>
-            <Text className="opacity-50 mb-1 text-xs">
+          <View className='flex flex-col' {...props}>
+            <Text className='opacity-50 mb-1 text-xs'>
               {t("item_card.quality")}
             </Text>
-            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between">
-              <Text style={{}} className="" numberOfLines={1}>
+            <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
+              <Text style={{}} className='' numberOfLines={1}>
                 {BITRATES.find((b) => b.value === selected?.value)?.key}
               </Text>
             </TouchableOpacity>
@@ -90,8 +98,8 @@ export const BitrateSelector: React.FC<Props> = ({
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           loop={false}
-          side="bottom"
-          align="center"
+          side='bottom'
+          align='center'
           alignOffset={0}
           avoidCollisions={true}
           collisionPadding={0}

components/Button.tsx

@@ -1,5 +1,6 @@
 import { useHaptic } from "@/hooks/useHaptic";
-import React, { PropsWithChildren, ReactNode, useMemo } from "react";
+import type React from "react";
+import { type PropsWithChildren, type ReactNode, useMemo } from "react";
 import { Platform, Text, TouchableOpacity, View } from "react-native";
 import { Loader } from "./Loader";
 
@@ -63,7 +64,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
       {...props}
     >
       {loading ? (
-        <View className="p-0.5">
+        <View className='p-0.5'>
           <Loader />
         </View>
       ) : (
@@ -72,7 +73,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
             flex flex-row items-center justify-between w-full
             ${justify === "between" ? "justify-between" : "justify-center"}`}
         >
-          {iconLeft ? iconLeft : <View className="w-4"></View>}
+          {iconLeft ? iconLeft : <View className='w-4' />}
           <Text
             className={`
           text-white font-bold text-base
@@ -84,7 +85,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
           >
             {children}
           </Text>
-          {iconRight ? iconRight : <View className="w-4"></View>}
+          {iconRight ? iconRight : <View className='w-4' />}
         </View>
       )}
     </TouchableOpacity>

components/Chromecast.tsx

@@ -1,6 +1,6 @@
 import { Feather } from "@expo/vector-icons";
 import React, { useCallback, useEffect } from "react";
-import { Platform, TouchableOpacity, ViewProps } from "react-native";
+import { Platform, TouchableOpacity, type ViewProps } from "react-native";
 import GoogleCast, {
   CastButton,
   CastContext,
@@ -45,18 +45,18 @@ export function Chromecast({
   const AndroidCastButton = useCallback(
     () =>
       Platform.OS === "android" ? (
-        <CastButton tintColor="transparent" />
+        <CastButton tintColor='transparent' />
       ) : (
         <></>
       ),
-    [Platform.OS]
+    [Platform.OS],
   );
 
   if (background === "transparent")
     return (
       <RoundButton
-        size="large"
-        className="mr-2"
+        size='large'
+        className='mr-2'
         background={false}
         onPress={() => {
           if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
@@ -65,13 +65,13 @@ export function Chromecast({
         {...props}
       >
         <AndroidCastButton />
-        <Feather name="cast" size={22} color={"white"} />
+        <Feather name='cast' size={22} color={"white"} />
       </RoundButton>
     );
 
   return (
     <RoundButton
-      size="large"
+      size='large'
       onPress={() => {
         if (mediaStatus?.currentItemId) CastContext.showExpandedControls();
         else CastContext.showCastDialog();
@@ -79,7 +79,7 @@ export function Chromecast({
       {...props}
     >
       <AndroidCastButton />
-      <Feather name="cast" size={22} color={"white"} />
+      <Feather name='cast' size={22} color={"white"} />
     </RoundButton>
   );
 }

components/ContinueWatchingPoster.tsx

@@ -1,12 +1,12 @@
 import { apiAtom } from "@/providers/JellyfinProvider";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+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 { useMemo } from "react";
+import type React from "react";
 import { View } from "react-native";
 import { WatchedIndicator } from "./WatchedIndicator";
-import React from "react";
-import { Ionicons } from "@expo/vector-icons";
 
 type ContinueWatchingPosterProps = {
   item: BaseItemDto;
@@ -27,33 +27,39 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
    * Get horizontal poster for movie and episode, with failover to primary.
    */
   const url = useMemo(() => {
-    if (!api) return;
+    if (!api) {
+      return;
+    }
     if (item.Type === "Episode" && useEpisodePoster) {
       return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
     }
     if (item.Type === "Episode") {
-      if (item.ParentBackdropItemId && item.ParentThumbImageTag)
+      if (item.ParentBackdropItemId && item.ParentThumbImageTag) {
         return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
-      else
-        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+      }
+
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
     }
     if (item.Type === "Movie") {
-      if (item.ImageTags?.["Thumb"])
-        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.["Thumb"]}`;
-      else
-        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+      if (item.ImageTags?.Thumb) {
+        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.Thumb}`;
+      }
+
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
     }
     if (item.Type === "Program") {
-      if (item.ImageTags?.["Thumb"])
-        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.["Thumb"]}`;
-      else
-        return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+      if (item.ImageTags?.Thumb) {
+        return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.Thumb}`;
+      }
+
+      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
     }
 
-    if (item.ImageTags?.["Thumb"])
-      return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.["Thumb"]}`;
-    else
-      return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
+    if (item.ImageTags?.Thumb) {
+      return `${api?.basePath}/Items/${item.Id}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ImageTags?.Thumb}`;
+    }
+
+    return `${api?.basePath}/Items/${item.Id}/Images/Primary?fillHeight=389&quality=80`;
   }, [item]);
 
   const progress = useMemo(() => {
@@ -64,15 +70,12 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       const total = endDate.getTime() - startDate.getTime();
       const elapsed = now.getTime() - startDate.getTime();
       return (elapsed / total) * 100;
-    } else {
-      return item.UserData?.PlayedPercentage || 0;
     }
+    return item.UserData?.PlayedPercentage || 0;
   }, [item]);
 
   if (!url)
-    return (
-      <View className="aspect-video border border-neutral-800 w-44"></View>
-    );
+    return <View className='aspect-video border border-neutral-800 w-44' />;
 
   return (
     <View
@@ -81,7 +84,7 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       ${size === "small" ? "w-32" : "w-44"}
     `}
     >
-      <View className="w-full h-full flex items-center justify-center">
+      <View className='w-full h-full flex items-center justify-center'>
         <Image
           key={item.Id}
           id={item.Id}
@@ -89,12 +92,12 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
             uri: url,
           }}
           cachePolicy={"memory-disk"}
-          contentFit="cover"
-          className="w-full h-full"
+          contentFit='cover'
+          className='w-full h-full'
         />
         {showPlayButton && (
-          <View className="absolute inset-0 flex items-center justify-center">
-            <Ionicons name="play-circle" size={40} color="white" />
+          <View className='absolute inset-0 flex items-center justify-center'>
+            <Ionicons name='play-circle' size={40} color='white' />
           </View>
         )}
       </View>
@@ -102,14 +105,16 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
       {progress > 0 && (
         <>
           <View
-            className={`absolute w-100 bottom-0 left-0 h-1 bg-neutral-700 opacity-80 w-full`}
-          ></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>
+            className={"absolute bottom-0 left-0 h-1 bg-purple-600 w-full"}
+          />
         </>
       )}
     </View>

components/DownloadItem.tsx

@@ -1,4 +1,3 @@
-import { useRemuxHlsToMp4 } from "@/hooks/useRemuxHlsToMp4";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { queueActions, queueAtom } from "@/utils/atoms/queue";
@@ -10,29 +9,30 @@ import download from "@/utils/profiles/download";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import {
   BottomSheetBackdrop,
-  BottomSheetBackdropProps,
+  type BottomSheetBackdropProps,
   BottomSheetModal,
   BottomSheetView,
 } from "@gorhom/bottom-sheet";
-import {
+import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { Href, router, useFocusEffect } from "expo-router";
+import { type Href, router, useFocusEffect } from "expo-router";
+import { t } from "i18next";
 import { useAtom } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, Platform, View, ViewProps } from "react-native";
+import type React from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Alert, Platform, View, type ViewProps } from "react-native";
 import { toast } from "sonner-native";
 import { AudioTrackSelector } from "./AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "./BitrateSelector";
+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 { t } from "i18next";
+import { Text } from "./common/Text";
 
 interface DownloadProps extends ViewProps {
   items: BaseItemDto[];
@@ -58,7 +58,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const [settings] = useSettings();
 
   const { processes, startBackgroundDownload, downloadedFiles } = useDownload();
-  const { startRemuxing } = useRemuxHlsToMp4();
+  //const { startRemuxing } = useRemuxHlsToMp4();
 
   const [selectedMediaSource, setSelectedMediaSource] = useState<
     MediaSourceInfo | undefined | null
@@ -70,16 +70,16 @@ export const DownloadItems: React.FC<DownloadProps> = ({
     settings?.defaultBitrate ?? {
       key: "Max",
       value: undefined,
-    }
+    },
   );
 
   const userCanDownload = useMemo(
     () => user?.Policy?.EnableContentDownloading,
-    [user]
+    [user],
   );
   const usingOptimizedServer = useMemo(
     () => settings?.downloadMethod === DownloadMethod.Optimized,
-    [settings]
+    [settings],
   );
 
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -99,7 +99,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const itemsNotDownloaded = useMemo(
     () =>
       items.filter((i) => !downloadedFiles?.some((f) => f.item.Id === i.Id)),
-    [items, downloadedFiles]
+    [items, downloadedFiles],
   );
 
   const allItemsDownloaded = useMemo(() => {
@@ -108,11 +108,11 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   }, [items, itemsNotDownloaded]);
   const itemsProcesses = useMemo(
     () => processes?.filter((p) => itemIds.includes(p.item.Id)),
-    [processes, itemIds]
+    [processes, itemIds],
   );
 
   const progress = useMemo(() => {
-    if (itemIds.length == 1)
+    if (itemIds.length === 1)
       return itemsProcesses.reduce((acc, p) => acc + p.progress, 0);
     return (
       ((itemIds.length -
@@ -125,7 +125,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
   const itemsQueued = useMemo(() => {
     return (
       itemsNotDownloaded.length > 0 &&
-      itemsNotDownloaded.every((p) => queue.some((q) => p.Id == q.item.Id))
+      itemsNotDownloaded.every((p) => queue.some((q) => p.Id === q.item.Id))
     );
   }, [queue, itemsNotDownloaded]);
   const navigateToDownloads = () => router.push("/downloads");
@@ -140,7 +140,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
             params: {
               episodeSeasonIndex: firstItem.ParentIndexNumber,
             },
-          } as Href)
+          } as Href),
     );
   };
 
@@ -151,21 +151,10 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       }
       closeModal();
 
-      if (usingOptimizedServer) initiateDownload(...itemsNotDownloaded);
-      else {
-        queueActions.enqueue(
-          queue,
-          setQueue,
-          ...itemsNotDownloaded.map((item) => ({
-            id: item.Id!,
-            execute: async () => await initiateDownload(item),
-            item,
-          }))
-        );
-      }
+      initiateDownload(...itemsNotDownloaded);
     } else {
       toast.error(
-        t("home.downloads.toasts.you_are_not_allowed_to_download_files")
+        t("home.downloads.toasts.you_are_not_allowed_to_download_files"),
       );
     }
   }, [
@@ -189,7 +178,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         (itemsNotDownloaded.length === 1 && !selectedMediaSource?.Id)
       ) {
         throw new Error(
-          "DownloadItem ~ initiateDownload: No api or user or item"
+          "DownloadItem ~ initiateDownload: No api or user or item",
         );
       }
       let mediaSource = selectedMediaSource;
@@ -202,7 +191,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           mediaSource = defaults.mediaSource;
           audioIndex = defaults.audioIndex;
           subtitleIndex = defaults.subtitleIndex;
-          // Keep using the selected bitrate for consistency across all downloads
         }
 
         const res = await getStreamUrl({
@@ -215,12 +203,14 @@ export const DownloadItems: React.FC<DownloadProps> = ({
           mediaSourceId: mediaSource?.Id,
           subtitleStreamIndex: subtitleIndex,
           deviceProfile: download,
+          download: true,
+          // deviceId: mediaSource?.Id,
         });
 
         if (!res) {
           Alert.alert(
             t("home.downloads.something_went_wrong"),
-            t("home.downloads.could_not_get_stream_url_from_jellyfin")
+            t("home.downloads.could_not_get_stream_url_from_jellyfin"),
           );
           continue;
         }
@@ -230,12 +220,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         if (!url || !source) throw new Error("No url");
 
         saveDownloadItemInfoToDiskTmp(item, source, url);
-
-        if (usingOptimizedServer) {
-          await startBackgroundDownload(url, item, source);
-        } else {
-          await startRemuxing(item, url, source);
-        }
+        await startBackgroundDownload(url, item, source, maxBitrate);
       }
     },
     [
@@ -249,8 +234,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       maxBitrate,
       usingOptimizedServer,
       startBackgroundDownload,
-      startRemuxing,
-    ]
+    ],
   );
 
   const renderBackdrop = useCallback(
@@ -261,7 +245,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         appearsOnIndex={0}
       />
     ),
-    []
+    [],
   );
   useFocusEffect(
     useCallback(() => {
@@ -274,31 +258,35 @@ export const DownloadItems: React.FC<DownloadProps> = ({
       setSelectedAudioStream(audioIndex ?? 0);
       setSelectedSubtitleStream(subtitleIndex ?? -1);
       setMaxBitrate(bitrate);
-    }, [items, itemsNotDownloaded, settings])
+    }, [items, itemsNotDownloaded, settings]),
   );
 
   const renderButtonContent = () => {
-    if (processes && itemsProcesses.length > 0) {
+    if (processes.length > 0 && itemsProcesses.length > 0) {
       return progress === 0 ? (
         <Loader />
       ) : (
-        <View className="-rotate-45">
+        <View className='-rotate-45'>
           <ProgressCircle
             size={24}
             fill={progress}
             width={4}
-            tintColor="#9334E9"
-            backgroundColor="#bdc3c7"
+            tintColor='#9334E9'
+            backgroundColor='#bdc3c7'
           />
         </View>
       );
-    } else if (itemsQueued) {
-      return <Ionicons name="hourglass" size={24} color="white" />;
-    } else if (allItemsDownloaded) {
-      return <DownloadedIconComponent />;
-    } else {
-      return <MissingDownloadIconComponent />;
     }
+
+    if (itemsQueued) {
+      return <Ionicons name='hourglass' size={24} color='white' />;
+    }
+
+    if (allItemsDownloaded) {
+      return <DownloadedIconComponent />;
+    }
+
+    return <MissingDownloadIconComponent />;
   };
 
   const onButtonPress = () => {
@@ -331,19 +319,19 @@ export const DownloadItems: React.FC<DownloadProps> = ({
         backdropComponent={renderBackdrop}
       >
         <BottomSheetView>
-          <View className="flex flex-col space-y-4 px-4 pb-8 pt-2">
+          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
             <View>
-              <Text className="font-bold text-2xl text-neutral-100">
+              <Text className='font-bold text-2xl text-neutral-100'>
                 {title}
               </Text>
-              <Text className="text-neutral-300">
+              <Text className='text-neutral-300'>
                 {subtitle ||
                   t("item_card.download.download_x_item", {
                     item_count: itemsNotDownloaded.length,
                   })}
               </Text>
             </View>
-            <View className="flex flex-col space-y-2 w-full items-start">
+            <View className='flex flex-col space-y-2 w-full items-start'>
               <BitrateSelector
                 inverted
                 onChange={setMaxBitrate}
@@ -357,7 +345,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
                     selected={selectedMediaSource}
                   />
                   {selectedMediaSource && (
-                    <View className="flex flex-col space-y-2">
+                    <View className='flex flex-col space-y-2'>
                       <AudioTrackSelector
                         source={selectedMediaSource}
                         onChange={setSelectedAudioStream}
@@ -374,14 +362,14 @@ export const DownloadItems: React.FC<DownloadProps> = ({
               )}
             </View>
             <Button
-              className="mt-auto"
+              className='mt-auto'
               onPress={acceptDownloadOptions}
-              color="purple"
+              color='purple'
             >
               {t("item_card.download.download_button")}
             </Button>
-            <View className="opacity-70 text-center w-full flex items-center">
-              <Text className="text-xs">
+            <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")}
@@ -404,17 +392,17 @@ export const DownloadSingleItem: React.FC<{
     <DownloadItems
       size={size}
       title={
-        item.Type == "Episode"
+        item.Type === "Episode"
           ? t("item_card.download.download_episode")
           : t("item_card.download.download_movie")
       }
       subtitle={item.Name!}
       items={[item]}
       MissingDownloadIconComponent={() => (
-        <Ionicons name="cloud-download-outline" size={24} color="white" />
+        <Ionicons name='cloud-download-outline' size={24} color='white' />
       )}
       DownloadedIconComponent={() => (
-        <Ionicons name="cloud-download" size={26} color="#9333ea" />
+        <Ionicons name='cloud-download' size={26} color='#9333ea' />
       )}
     />
   );

components/GenreTags.tsx

@@ -1,44 +1,57 @@
 // GenreTags.tsx
-import React from "react";
-import {StyleProp, TextStyle, View, ViewProps} from "react-native";
+import type React from "react";
+import {
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewProps,
+} from "react-native";
 import { Text } from "./common/Text";
 
 interface TagProps {
   tags?: string[];
-  textClass?: ViewProps["className"]
+  textClass?: ViewProps["className"];
 }
 
-export const Tag: React.FC<{ text: string, textClass?: ViewProps["className"], textStyle?: StyleProp<TextStyle>} & ViewProps> = ({
-  text,
-  textClass,
-  textStyle,
-  ...props
-}) => {
+export const Tag: React.FC<
+  {
+    text: string;
+    textClass?: ViewProps["className"];
+    textStyle?: StyleProp<TextStyle>;
+  } & ViewProps
+> = ({ text, textClass, textStyle, ...props }) => {
   return (
-    <View className="bg-neutral-800 rounded-full px-2 py-1" {...props}>
-      <Text className={textClass} style={textStyle}>{text}</Text>
+    <View className='bg-neutral-800 rounded-full px-2 py-1' {...props}>
+      <Text className={textClass} style={textStyle}>
+        {text}
+      </Text>
     </View>
   );
 };
 
-export const Tags: React.FC<TagProps & ViewProps> = ({ tags, textClass = "text-xs", ...props }) => {
+export const Tags: React.FC<
+  TagProps & { tagProps?: ViewProps } & ViewProps
+> = ({ tags, textClass = "text-xs", tagProps, ...props }) => {
   if (!tags || tags.length === 0) return null;
 
   return (
-    <View className={`flex flex-row flex-wrap gap-1 ${props.className}`} {...props}>
+    <View
+      className={`flex flex-row flex-wrap gap-1 ${props.className}`}
+      {...props}
+    >
       {tags.map((tag, idx) => (
         <View key={idx}>
-          <Tag key={idx} textClass={textClass} text={tag}/>
+          <Tag key={idx} textClass={textClass} text={tag} {...tagProps} />
         </View>
       ))}
     </View>
   );
 };
 
-export const GenreTags: React.FC<{ genres?: string[]}> = ({ genres }) => {
+export const GenreTags: React.FC<{ genres?: string[] }> = ({ genres }) => {
   return (
-    <View className="mt-2">
-      <Tags tags={genres}/>
+    <View className='mt-2'>
+      <Tags tags={genres} />
     </View>
   );
 };

components/ItemCardText.tsx

@@ -1,8 +1,8 @@
-import React from "react";
+import { tc } from "@/utils/textTools";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import type React from "react";
 import { View } from "react-native";
 import { Text } from "./common/Text";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { tc } from "@/utils/textTools";
 
 type ItemCardProps = {
   item: BaseItemDto;
@@ -10,13 +10,13 @@ type ItemCardProps = {
 
 export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
   return (
-    <View className="mt-2 flex flex-col">
+    <View className='mt-2 flex flex-col'>
       {item.Type === "Episode" ? (
         <>
-          <Text numberOfLines={1} className="">
+          <Text numberOfLines={1} ellipsizeMode='tail' className=''>
             {item.Name}
           </Text>
-          <Text numberOfLines={1} className="text-xs opacity-50">
+          <Text numberOfLines={1} className='text-xs opacity-50'>
             {`S${item.ParentIndexNumber?.toString()}:E${item.IndexNumber?.toString()}`}
             {" - "}
             {item.SeriesName}
@@ -24,8 +24,10 @@ export const ItemCardText: React.FC<ItemCardProps> = ({ item }) => {
         </>
       ) : (
         <>
-          <Text numberOfLines={2}>{item.Name}</Text>
-          <Text className="text-xs opacity-50">{item.ProductionYear}</Text>
+          <Text numberOfLines={1} ellipsizeMode='tail'>
+            {item.Name}
+          </Text>
+          <Text className='text-xs opacity-50'>{item.ProductionYear}</Text>
         </>
       )}
     </View>

components/ItemContent.tsx

@@ -1,5 +1,5 @@
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
-import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
+import { type Bitrate, BitrateSelector } from "@/components/BitrateSelector";
 import { DownloadSingleItem } from "@/components/DownloadItem";
 import { OverviewText } from "@/components/OverviewText";
 import { ParallaxScrollView } from "@/components/ParallaxPage";
@@ -17,9 +17,10 @@ import { useImageColors } from "@/hooks/useImageColors";
 import { useOrientation } from "@/hooks/useOrientation";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { apiAtom } from "@/providers/JellyfinProvider";
+import { userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
 import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import {
+import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
@@ -34,6 +35,7 @@ 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 = {
@@ -50,6 +52,8 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
     const { orientation } = useOrientation();
     const navigation = useNavigation();
     const insets = useSafeAreaInsets();
+    const [user] = useAtom(userAtom);
+
     useImageColors({ item });
 
     const [loadingLogo, setLoadingLogo] = useState(true);
@@ -86,18 +90,22 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
         navigation.setOptions({
           headerRight: () =>
             item && (
-              <View className="flex flex-row items-center space-x-2">
+              <View className='flex flex-row items-center space-x-2'>
                 <Chromecast.Chromecast
-                  background="blur"
+                  background='blur'
                   width={22}
                   height={22}
                 />
                 {item.Type !== "Program" && (
-                  <View className="flex flex-row items-center space-x-2">
+                  <View className='flex flex-row items-center space-x-2'>
                     {!Platform.isTV && (
-                      <DownloadSingleItem item={item} size="large" />
+                      <DownloadSingleItem item={item} size='large' />
                     )}
-                    <PlayedStatus items={[item]} size="large" />
+                    {user?.Policy?.IsAdministrator && (
+                      <PlayInRemoteSessionButton item={item} size='large' />
+                    )}
+
+                    <PlayedStatus items={[item]} size='large' />
                     <AddToFavorites item={item} />
                   </View>
                 )}
@@ -123,7 +131,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
 
     return (
       <View
-        className="flex-1 relative"
+        className='flex-1 relative'
         style={{
           paddingLeft: insets.left,
           paddingRight: insets.right,
@@ -147,40 +155,38 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
             </View>
           }
           logo={
-            <>
-              {logoUrl ? (
-                <Image
-                  source={{
-                    uri: logoUrl,
-                  }}
-                  style={{
-                    height: 130,
-                    width: "100%",
-                    resizeMode: "contain",
-                  }}
-                  onLoad={() => setLoadingLogo(false)}
-                  onError={() => setLoadingLogo(false)}
-                />
-              ) : null}
-            </>
+            logoUrl ? (
+              <Image
+                source={{
+                  uri: logoUrl,
+                }}
+                style={{
+                  height: 130,
+                  width: "100%",
+                  resizeMode: "contain",
+                }}
+                onLoad={() => setLoadingLogo(false)}
+                onError={() => setLoadingLogo(false)}
+              />
+            ) : null
           }
         >
-          <View className="flex flex-col bg-transparent shrink">
-            <View className="flex flex-col px-4 w-full space-y-2 pt-2 mb-2 shrink">
-              <ItemHeader item={item} className="mb-4" />
+          <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 && (
-                <View className="flex flex-row items-center justify-start w-full h-16">
+                <View className='flex flex-row items-center justify-start w-full h-16'>
                   <BitrateSelector
-                    className="mr-1"
+                    className='mr-1'
                     onChange={(val) =>
                       setSelectedOptions(
-                        (prev) => prev && { ...prev, bitrate: val }
+                        (prev) => prev && { ...prev, bitrate: val },
                       )
                     }
                     selected={selectedOptions.bitrate}
                   />
                   <MediaSourceSelector
-                    className="mr-1"
+                    className='mr-1'
                     item={item}
                     onChange={(val) =>
                       setSelectedOptions(
@@ -188,13 +194,13 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                           prev && {
                             ...prev,
                             mediaSource: val,
-                          }
+                          },
                       )
                     }
                     selected={selectedOptions.mediaSource}
                   />
                   <AudioTrackSelector
-                    className="mr-1"
+                    className='mr-1'
                     source={selectedOptions.mediaSource}
                     onChange={(val) => {
                       setSelectedOptions(
@@ -202,7 +208,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                           prev && {
                             ...prev,
                             audioIndex: val,
-                          }
+                          },
                       );
                     }}
                     selected={selectedOptions.audioIndex}
@@ -215,7 +221,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
                           prev && {
                             ...prev,
                             subtitleIndex: val,
-                          }
+                          },
                       )
                     }
                     selected={selectedOptions.subtitleIndex}
@@ -224,7 +230,7 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
               )}
 
               <PlayButton
-                className="grow"
+                className='grow'
                 selectedOptions={selectedOptions}
                 item={item}
               />
@@ -235,24 +241,24 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
             )}
 
             <ItemTechnicalDetails source={selectedOptions.mediaSource} />
-            <OverviewText text={item.Overview} className="px-4 mb-4" />
+            <OverviewText text={item.Overview} className='px-4 mb-4' />
 
             {item.Type !== "Program" && (
               <>
                 {item.Type === "Episode" && (
-                  <CurrentSeries item={item} className="mb-4" />
+                  <CurrentSeries item={item} className='mb-4' />
                 )}
 
-                <CastAndCrew item={item} className="mb-4" loading={loading} />
+                <CastAndCrew item={item} className='mb-4' loading={loading} />
 
                 {item.People && item.People.length > 0 && (
-                  <View className="mb-4">
+                  <View className='mb-4'>
                     {item.People.slice(0, 3).map((person, idx) => (
                       <MoreMoviesWithActor
                         currentItem={item}
                         key={idx}
                         actorId={person.Id!}
-                        className="mb-4"
+                        className='mb-4'
                       />
                     ))}
                   </View>
@@ -265,5 +271,5 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
         </ParallaxScrollView>
       </View>
     );
-  }
+  },
 );

components/ItemHeader.tsx

@@ -1,9 +1,9 @@
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React from "react";
-import { View, ViewProps } from "react-native";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import type React from "react";
+import { View, type ViewProps } from "react-native";
 import { GenreTags } from "./GenreTags";
-import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
 import { Ratings } from "./Ratings";
+import { MoviesTitleHeader } from "./movies/MoviesTitleHeader";
 import { EpisodeTitleHeader } from "./series/EpisodeTitleHeader";
 import { ItemActions } from "./series/SeriesActions";
 
@@ -15,21 +15,21 @@ export const ItemHeader: React.FC<Props> = ({ item, ...props }) => {
   if (!item)
     return (
       <View
-        className="flex flex-col space-y-1.5 w-full items-start h-32"
+        className='flex flex-col space-y-1.5 w-full items-start h-32'
         {...props}
       >
-        <View className="w-1/3 h-6 bg-neutral-900 rounded" />
-        <View className="w-2/3 h-8 bg-neutral-900 rounded" />
-        <View className="w-2/3 h-4 bg-neutral-900 rounded" />
-        <View className="w-1/4 h-4 bg-neutral-900 rounded" />
+        <View className='w-1/3 h-6 bg-neutral-900 rounded' />
+        <View className='w-2/3 h-8 bg-neutral-900 rounded' />
+        <View className='w-2/3 h-4 bg-neutral-900 rounded' />
+        <View className='w-1/4 h-4 bg-neutral-900 rounded' />
       </View>
     );
 
   return (
-    <View className="flex flex-col" {...props}>
-      <View className="flex flex-col" {...props}>
-        <View className="flex flex-row items-center justify-between">
-          <Ratings item={item} className="mb-2" />
+    <View className='flex flex-col' {...props}>
+      <View className='flex flex-col' {...props}>
+        <View className='flex flex-row items-center justify-between'>
+          <Ratings item={item} className='mb-2' />
           <ItemActions item={item} />
         </View>
         {item.Type === "Episode" && (

components/ItemTechnicalDetails.tsx

@@ -1,22 +1,23 @@
+import { formatBitrate } from "@/utils/bitrate";
 import { Ionicons } from "@expo/vector-icons";
 import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import type {
   MediaSourceInfo,
-  type MediaStream,
+  MediaStream,
 } from "@jellyfin/sdk/lib/generated-client";
-import React, { useMemo, useRef } from "react";
+import type React from "react";
+import { useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { TouchableOpacity, View } from "react-native";
 import { Badge } from "./Badge";
-import { Text } from "./common/Text";
-import {
-  BottomSheetModal,
-  BottomSheetBackdropProps,
-  BottomSheetBackdrop,
-  BottomSheetView,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
 import { Button } from "./Button";
-import { useTranslation } from "react-i18next";
-import { formatBitrate } from "@/utils/bitrate";
+import { Text } from "./common/Text";
 
 interface Props {
   source?: MediaSourceInfo;
@@ -27,13 +28,13 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source, ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <View className="px-4 mt-2 mb-4">
-      <Text className="text-lg font-bold mb-4">{t("item_card.video")}</Text>
+    <View className='px-4 mt-2 mb-4'>
+      <Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
       <TouchableOpacity onPress={() => bottomSheetModalRef.current?.present()}>
-        <View className="flex flex-row space-x-2">
+        <View className='flex flex-row space-x-2'>
           <VideoStreamInfo source={source} />
         </View>
-        <Text className="text-purple-600">{t("item_card.more_details")}</Text>
+        <Text className='text-purple-600'>{t("item_card.more_details")}</Text>
       </TouchableOpacity>
       <BottomSheetModal
         ref={bottomSheetModalRef}
@@ -53,37 +54,37 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source, ...props }) => {
         )}
       >
         <BottomSheetScrollView>
-          <View className="flex flex-col space-y-2 p-4 mb-4">
-            <View className="">
-              <Text className="text-lg font-bold mb-4">
+          <View className='flex flex-col space-y-2 p-4 mb-4'>
+            <View className=''>
+              <Text className='text-lg font-bold mb-4'>
                 {t("item_card.video")}
               </Text>
-              <View className="flex flex-row space-x-2">
+              <View className='flex flex-row space-x-2'>
                 <VideoStreamInfo source={source} />
               </View>
             </View>
 
-            <View className="">
-              <Text className="text-lg font-bold mb-2">
+            <View className=''>
+              <Text className='text-lg font-bold mb-2'>
                 {t("item_card.audio")}
               </Text>
               <AudioStreamInfo
                 audioStreams={
                   source?.MediaStreams?.filter(
-                    (stream) => stream.Type === "Audio"
+                    (stream) => stream.Type === "Audio",
                   ) || []
                 }
               />
             </View>
 
-            <View className="">
-              <Text className="text-lg font-bold mb-2">
+            <View className=''>
+              <Text className='text-lg font-bold mb-2'>
                 {t("item_card.subtitles")}
               </Text>
               <SubtitleStreamInfo
                 subtitleStreams={
                   source?.MediaStreams?.filter(
-                    (stream) => stream.Type === "Subtitle"
+                    (stream) => stream.Type === "Subtitle",
                   ) || []
                 }
               />
@@ -101,25 +102,25 @@ const SubtitleStreamInfo = ({
   subtitleStreams: MediaStream[];
 }) => {
   return (
-    <View className="flex flex-col">
+    <View className='flex flex-col'>
       {subtitleStreams.map((stream, index) => (
-        <View key={stream.Index} className="flex flex-col">
-          <Text className="text-xs mb-3 text-neutral-400">
+        <View key={stream.Index} className='flex flex-col'>
+          <Text className='text-xs mb-3 text-neutral-400'>
             {stream.DisplayTitle}
           </Text>
-          <View className="flex flex-row flex-wrap gap-2">
+          <View className='flex flex-row flex-wrap gap-2'>
             <Badge
-              variant="gray"
+              variant='gray'
               iconLeft={
-                <Ionicons name="language-outline" size={16} color="white" />
+                <Ionicons name='language-outline' size={16} color='white' />
               }
               text={stream.Language}
             />
             <Badge
-              variant="gray"
+              variant='gray'
               text={stream.Codec}
               iconLeft={
-                <Ionicons name="layers-outline" size={16} color="white" />
+                <Ionicons name='layers-outline' size={16} color='white' />
               }
             />
           </View>
@@ -131,40 +132,40 @@ const SubtitleStreamInfo = ({
 
 const AudioStreamInfo = ({ audioStreams }: { audioStreams: MediaStream[] }) => {
   return (
-    <View className="flex flex-col">
+    <View className='flex flex-col'>
       {audioStreams.map((audioStreams, index) => (
-        <View key={index} className="flex flex-col">
-          <Text className="mb-3 text-neutral-400 text-xs">
+        <View key={index} className='flex flex-col'>
+          <Text className='mb-3 text-neutral-400 text-xs'>
             {audioStreams.DisplayTitle}
           </Text>
-          <View className="flex-row flex-wrap gap-2">
+          <View className='flex-row flex-wrap gap-2'>
             <Badge
-              variant="gray"
+              variant='gray'
               iconLeft={
-                <Ionicons name="language-outline" size={16} color="white" />
+                <Ionicons name='language-outline' size={16} color='white' />
               }
               text={audioStreams.Language}
             />
             <Badge
-              variant="gray"
+              variant='gray'
               iconLeft={
                 <Ionicons
-                  name="musical-notes-outline"
+                  name='musical-notes-outline'
                   size={16}
-                  color="white"
+                  color='white'
                 />
               }
               text={audioStreams.Codec}
             />
             <Badge
-              variant="gray"
-              iconLeft={<Ionicons name="mic-outline" size={16} color="white" />}
+              variant='gray'
+              iconLeft={<Ionicons name='mic-outline' size={16} color='white' />}
               text={audioStreams.ChannelLayout}
             />
             <Badge
-              variant="gray"
+              variant='gray'
               iconLeft={
-                <Ionicons name="speedometer-outline" size={16} color="white" />
+                <Ionicons name='speedometer-outline' size={16} color='white' />
               }
               text={formatBitrate(audioStreams.BitRate)}
             />
@@ -180,48 +181,48 @@ const VideoStreamInfo = ({ source }: { source?: MediaSourceInfo }) => {
 
   const videoStream = useMemo(() => {
     return source.MediaStreams?.find(
-      (stream) => stream.Type === "Video"
+      (stream) => stream.Type === "Video",
     ) as MediaStream;
   }, [source.MediaStreams]);
 
   if (!videoStream) return null;
 
   return (
-    <View className="flex-row flex-wrap gap-2">
+    <View className='flex-row flex-wrap gap-2'>
       <Badge
-        variant="gray"
-        iconLeft={<Ionicons name="film-outline" size={16} color="white" />}
+        variant='gray'
+        iconLeft={<Ionicons name='film-outline' size={16} color='white' />}
         text={formatFileSize(source.Size)}
       />
       <Badge
-        variant="gray"
-        iconLeft={<Ionicons name="film-outline" size={16} color="white" />}
+        variant='gray'
+        iconLeft={<Ionicons name='film-outline' size={16} color='white' />}
         text={`${videoStream.Width}x${videoStream.Height}`}
       />
       <Badge
-        variant="gray"
+        variant='gray'
         iconLeft={
-          <Ionicons name="color-palette-outline" size={16} color="white" />
+          <Ionicons name='color-palette-outline' size={16} color='white' />
         }
         text={videoStream.VideoRange}
       />
       <Badge
-        variant="gray"
+        variant='gray'
         iconLeft={
-          <Ionicons name="code-working-outline" size={16} color="white" />
+          <Ionicons name='code-working-outline' size={16} color='white' />
         }
         text={videoStream.Codec}
       />
       <Badge
-        variant="gray"
+        variant='gray'
         iconLeft={
-          <Ionicons name="speedometer-outline" size={16} color="white" />
+          <Ionicons name='speedometer-outline' size={16} color='white' />
         }
         text={formatBitrate(videoStream.BitRate)}
       />
       <Badge
-        variant="gray"
-        iconLeft={<Ionicons name="play-outline" size={16} color="white" />}
+        variant='gray'
+        iconLeft={<Ionicons name='play-outline' size={16} color='white' />}
         text={`${videoStream.AverageFrameRate?.toFixed(0)} fps`}
       />
     </View>
@@ -233,6 +234,8 @@ const formatFileSize = (bytes?: number | null) => {
 
   const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
   if (bytes === 0) return "0 Byte";
-  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
-  return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + " " + sizes[i];
+  const i = Number.parseInt(
+    Math.floor(Math.log(bytes) / Math.log(1024)).toString(),
+  );
+  return `${Math.round((bytes / 1024 ** i) * 100) / 100} ${sizes[i]}`;
 };

components/JellyfinServerDiscovery.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
 import { useJellyfinDiscovery } from "@/hooks/useJellyfinDiscovery";
+import type React from "react";
+import { useTranslation } from "react-i18next";
+import { Text, TouchableOpacity, View } from "react-native";
 import { Button } from "./Button";
 import { ListGroup } from "./list/ListGroup";
 import { ListItem } from "./list/ListItem";
-import { useTranslation } from "react-i18next";
 
 interface Props {
   onServerSelect?: (server: { address: string; serverName?: string }) => void;
@@ -15,15 +15,17 @@ const JellyfinServerDiscovery: React.FC<Props> = ({ onServerSelect }) => {
   const { t } = useTranslation();
 
   return (
-    <View className="mt-2">
-      <Button onPress={startDiscovery} color="black">
-        <Text className="text-white text-center">
-          {isSearching ? t("server.searching") : t("server.search_for_local_servers")}
+    <View className='mt-2'>
+      <Button onPress={startDiscovery} color='black'>
+        <Text className='text-white text-center'>
+          {isSearching
+            ? t("server.searching")
+            : t("server.search_for_local_servers")}
         </Text>
       </Button>
 
       {servers.length ? (
-        <ListGroup title={t("server.servers")} className="mt-4">
+        <ListGroup title={t("server.servers")} className='mt-4'>
           {servers.map((server) => (
             <ListItem
               key={server.address}

components/Loader.tsx

@@ -1,6 +1,6 @@
 import {
   ActivityIndicator,
-  ActivityIndicatorProps,
+  type ActivityIndicatorProps,
   Platform,
   View,
 } from "react-native";

components/MediaSourceSelector.tsx

@@ -1,12 +1,12 @@
-import {
+import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import { useMemo } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
 const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-import { Text } from "./common/Text";
 import { useTranslation } from "react-i18next";
+import { Text } from "./common/Text";
 
 interface Props extends React.ComponentProps<typeof View> {
   item: BaseItemDto;
@@ -24,9 +24,9 @@ export const MediaSourceSelector: React.FC<Props> = ({
   const selectedName = useMemo(
     () =>
       item.MediaSources?.find((x) => x.Id === selected?.Id)?.MediaStreams?.find(
-        (x) => x.Type === "Video"
+        (x) => x.Type === "Video",
       )?.DisplayTitle || "",
-    [item, selected]
+    [item, selected],
   );
 
   const { t } = useTranslation();
@@ -54,26 +54,26 @@ export const MediaSourceSelector: React.FC<Props> = ({
 
   return (
     <View
-      className="flex shrink"
+      className='flex shrink'
       style={{
         minWidth: 50,
       }}
     >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
-          <View className="flex flex-col" {...props}>
-            <Text className="opacity-50 mb-1 text-xs">
+          <View className='flex flex-col' {...props}>
+            <Text className='opacity-50 mb-1 text-xs'>
               {t("item_card.video")}
             </Text>
-            <TouchableOpacity className="bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center">
+            <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'>
               <Text numberOfLines={1}>{selectedName}</Text>
             </TouchableOpacity>
           </View>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           loop={true}
-          side="bottom"
-          align="start"
+          side='bottom'
+          align='start'
           alignOffset={0}
           avoidCollisions={true}
           collisionPadding={8}

components/MoreMoviesWithActor.tsx

@@ -1,17 +1,17 @@
-import React from "react";
-import { View, ViewProps } from "react-native";
-import { Text } from "@/components/common/Text";
+import { ItemCardText } from "@/components/ItemCardText";
 import { HorizontalScroll } from "@/components/common/HorrizontalScroll";
+import { Text } from "@/components/common/Text";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import MoviePoster from "@/components/posters/MoviePoster";
-import { ItemCardText } from "@/components/ItemCardText";
-import { useAtom } from "jotai";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useQuery } from "@tanstack/react-query";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
+import { useQuery } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import type React from "react";
 import { useTranslation } from "react-i18next";
+import { View, type ViewProps } from "react-native";
 
 interface Props extends ViewProps {
   actorId: string;
@@ -63,9 +63,8 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
           const x = acc.find((item) => item.Id === current.Id);
           if (!x) {
             return acc.concat([current]);
-          } else {
-            return acc;
           }
+          return acc;
         }, [] as BaseItemDto[]) || [];
 
       return uniqueItems;
@@ -77,8 +76,8 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
 
   return (
     <View {...props}>
-      <Text className="text-lg font-bold mb-2 px-4">
-        {t("item_card.more_with", {name: actor?.Name})}
+      <Text className='text-lg font-bold mb-2 px-4'>
+        {t("item_card.more_with", { name: actor?.Name })}
       </Text>
       <HorizontalScroll
         data={items}
@@ -88,7 +87,7 @@ export const MoreMoviesWithActor: React.FC<Props> = ({
           <TouchableItemRouter
             key={idx}
             item={item}
-            className="flex flex-col w-28"
+            className='flex flex-col w-28'
           >
             <View>
               <MoviePoster item={item} />

components/OverviewText.tsx

@@ -1,8 +1,8 @@
-import { TouchableOpacity, View, ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import { tc } from "@/utils/textTools";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { TouchableOpacity, View, type ViewProps } from "react-native";
 
 interface Props extends ViewProps {
   text?: string | null;
@@ -20,20 +20,22 @@ export const OverviewText: React.FC<Props> = ({
   if (!text) return null;
 
   return (
-    <View className="flex flex-col" {...props}>
-      <Text className="text-lg font-bold mb-2">{t("item_card.overview")}</Text>
+    <View className='flex flex-col' {...props}>
+      <Text className='text-lg font-bold mb-2'>{t("item_card.overview")}</Text>
       <TouchableOpacity
         onPress={() =>
           setLimit((prev) =>
-            prev === characterLimit ? text.length : characterLimit
+            prev === characterLimit ? text.length : characterLimit,
           )
         }
       >
         <View>
           <Text>{tc(text, limit)}</Text>
           {text.length > characterLimit && (
-            <Text className="text-purple-600 mt-1">
-              {limit === characterLimit ? t("item_card.show_more") : t("item_card.show_less")}
+            <Text className='text-purple-600 mt-1'>
+              {limit === characterLimit
+                ? t("item_card.show_more")
+                : t("item_card.show_less")}
             </Text>
           )}
         </View>

components/ParallaxPage.tsx

@@ -1,6 +1,11 @@
 import { LinearGradient } from "expo-linear-gradient";
-import { type PropsWithChildren, type ReactElement } from "react";
-import {NativeScrollEvent, NativeSyntheticEvent, View, ViewProps} from "react-native";
+import type { PropsWithChildren, ReactElement } from "react";
+import {
+  type NativeScrollEvent,
+  NativeSyntheticEvent,
+  View,
+  type ViewProps,
+} from "react-native";
 import Animated, {
   interpolate,
   useAnimatedRef,
@@ -35,36 +40,40 @@ export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
           translateY: interpolate(
             scrollOffset.value,
             [-headerHeight, 0, headerHeight],
-            [-headerHeight / 2, 0, headerHeight * 0.75]
+            [-headerHeight / 2, 0, headerHeight * 0.75],
           ),
         },
         {
           scale: interpolate(
             scrollOffset.value,
             [-headerHeight, 0, headerHeight],
-            [2, 1, 1]
+            [2, 1, 1],
           ),
         },
       ],
     };
   });
 
-
-  function isCloseToBottom({layoutMeasurement, contentOffset, contentSize}: NativeScrollEvent) {
-    return layoutMeasurement.height + contentOffset.y >= contentSize.height - 20;
+  function isCloseToBottom({
+    layoutMeasurement,
+    contentOffset,
+    contentSize,
+  }: NativeScrollEvent) {
+    return (
+      layoutMeasurement.height + contentOffset.y >= contentSize.height - 20
+    );
   }
 
   return (
-    <View className="flex-1" {...props}>
+    <View className='flex-1' {...props}>
       <Animated.ScrollView
         style={{
           position: "relative",
         }}
         ref={scrollRef}
         scrollEventThrottle={16}
-        onScroll={e => {
-          if (isCloseToBottom(e.nativeEvent))
-            onEndReached?.()
+        onScroll={(e) => {
+          if (isCloseToBottom(e.nativeEvent)) onEndReached?.();
         }}
       >
         {logo && (
@@ -73,7 +82,7 @@ export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
               top: headerHeight - 200,
               height: 130,
             }}
-            className="absolute left-0 w-full z-40 px-4 flex justify-center items-center"
+            className='absolute left-0 w-full z-40 px-4 flex justify-center items-center'
           >
             {logo}
           </View>
@@ -95,7 +104,7 @@ export const ParallaxScrollView: React.FC<PropsWithChildren<Props>> = ({
           style={{
             top: -50,
           }}
-          className="relative flex-1  bg-transparent pb-24"
+          className='relative flex-1  bg-transparent pb-24'
         >
           <LinearGradient
             // Background Linear Gradient

components/PlatformBlurView.tsx

@@ -1,6 +1,6 @@
 import { BlurView } from "expo-blur";
-import React from "react";
-import { Platform, View, ViewProps } from "react-native";
+import type React from "react";
+import { Platform, View, type ViewProps } from "react-native";
 interface Props extends ViewProps {
   blurAmount?: number;
   blurType?: "light" | "dark" | "xlight";

components/PlayButton.tsx

@@ -1,18 +1,21 @@
-import { Platform, Pressable } from "react-native";
+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 ios from "@/utils/profiles/ios";
+import { chromecast } from "@/utils/profiles/chromecast";
+import { chromecasth265 } from "@/utils/profiles/chromecasth265";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform, Pressable } from "react-native";
 import { Alert, TouchableOpacity, View } from "react-native";
 import CastContext, {
   CastButton,
@@ -30,12 +33,8 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { Button } from "./Button";
-import { SelectedOptions } from "./ItemContent";
-import { chromecast } from "@/utils/profiles/chromecast";
-import { chromecasth265 } from "@/utils/profiles/chromecasth265";
-import { useTranslation } from "react-i18next";
-import { useHaptic } from "@/hooks/useHaptic";
+import type { Button } from "./Button";
+import type { SelectedOptions } from "./ItemContent";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
@@ -67,14 +66,17 @@ export const PlayButton: React.FC<Props> = ({
   const startColor = useSharedValue(colorAtom);
   const widthProgress = useSharedValue(0);
   const colorChangeProgress = useSharedValue(0);
-  const [settings] = useSettings();
+  const [settings, updateSettings] = 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]
+    [router],
   );
 
   const onPress = useCallback(async () => {
@@ -140,7 +142,7 @@ export const PlayButton: React.FC<Props> = ({
                     console.warn("No URL returned from getStreamUrl", data);
                     Alert.alert(
                       t("player.client_error"),
-                      t("player.could_not_create_stream_for_chromecast")
+                      t("player.could_not_create_stream_for_chromecast"),
                     );
                     return;
                   }
@@ -170,36 +172,36 @@ export const PlayButton: React.FC<Props> = ({
                                 ],
                               }
                             : item.Type === "Movie"
-                            ? {
-                                type: "movie",
-                                title: item.Name || "",
-                                subtitle: item.Overview || "",
-                                images: [
-                                  {
-                                    url: getPrimaryImageUrl({
-                                      api,
-                                      item,
-                                      quality: 90,
-                                      width: 2000,
-                                    })!,
-                                  },
-                                ],
-                              }
-                            : {
-                                type: "generic",
-                                title: item.Name || "",
-                                subtitle: item.Overview || "",
-                                images: [
-                                  {
-                                    url: getPrimaryImageUrl({
-                                      api,
-                                      item,
-                                      quality: 90,
-                                      width: 2000,
-                                    })!,
-                                  },
-                                ],
-                              },
+                              ? {
+                                  type: "movie",
+                                  title: item.Name || "",
+                                  subtitle: item.Overview || "",
+                                  images: [
+                                    {
+                                      url: getPrimaryImageUrl({
+                                        api,
+                                        item,
+                                        quality: 90,
+                                        width: 2000,
+                                      })!,
+                                    },
+                                  ],
+                                }
+                              : {
+                                  type: "generic",
+                                  title: item.Name || "",
+                                  subtitle: item.Overview || "",
+                                  images: [
+                                    {
+                                      url: getPrimaryImageUrl({
+                                        api,
+                                        item,
+                                        quality: 90,
+                                        width: 2000,
+                                      })!,
+                                    },
+                                  ],
+                                },
                       },
                       startTime: 0,
                     })
@@ -222,7 +224,7 @@ export const PlayButton: React.FC<Props> = ({
           case cancelButtonIndex:
             break;
         }
-      }
+      },
     );
   }, [
     item,
@@ -239,11 +241,11 @@ export const PlayButton: React.FC<Props> = ({
   const derivedTargetWidth = useDerivedValue(() => {
     if (!item || !item.RunTimeTicks) return 0;
     const userData = item.UserData;
-    if (userData && userData.PlaybackPositionTicks) {
+    if (userData?.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
         ? Math.max(
             (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
-            MIN_PLAYBACK_WIDTH
+            MIN_PLAYBACK_WIDTH,
           )
         : 0;
     }
@@ -260,7 +262,7 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.7, 0, 0.3, 1.0),
       });
     },
-    [item]
+    [item],
   );
 
   useAnimatedReaction(
@@ -273,7 +275,7 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [colorAtom]
+    [colorAtom],
   );
 
   useEffect(() => {
@@ -294,7 +296,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary]
+      [startColor.value.primary, endColor.value.primary],
     ),
   }));
 
@@ -302,7 +304,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary]
+      [startColor.value.primary, endColor.value.primary],
     ),
   }));
 
@@ -310,7 +312,7 @@ export const PlayButton: React.FC<Props> = ({
     width: `${interpolate(
       widthProgress.value,
       [0, 1],
-      [startWidth.value, targetWidth.value]
+      [startWidth.value, targetWidth.value],
     )}%`,
   }));
 
@@ -318,7 +320,7 @@ export const PlayButton: React.FC<Props> = ({
     color: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.text, endColor.value.text]
+      [startColor.value.text, endColor.value.text],
     ),
   }));
   /**
@@ -328,13 +330,13 @@ export const PlayButton: React.FC<Props> = ({
   return (
     <TouchableOpacity
       disabled={!item}
-      accessibilityLabel="Play button"
-      accessibilityHint="Tap to play the media"
+      accessibilityLabel='Play button'
+      accessibilityHint='Tap to play the media'
       onPress={onPress}
-      className={`relative`}
+      className={"relative"}
       {...props}
     >
-      <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
+      <View className='absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden'>
         <Animated.View
           style={[
             animatedPrimaryStyle,
@@ -348,7 +350,7 @@ export const PlayButton: React.FC<Props> = ({
 
       <Animated.View
         style={[animatedAverageStyle, { opacity: 0.5 }]}
-        className="absolute w-full h-full top-0 left-0 rounded-xl"
+        className='absolute w-full h-full top-0 left-0 rounded-xl'
       />
       <View
         style={{
@@ -356,25 +358,25 @@ export const PlayButton: React.FC<Props> = ({
           borderColor: colorAtom.primary,
           borderStyle: "solid",
         }}
-        className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
+        className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
       >
-        <View className="flex flex-row items-center space-x-2">
+        <View className='flex flex-row items-center space-x-2'>
           <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
             {runtimeTicksToMinutes(item?.RunTimeTicks)}
           </Animated.Text>
           <Animated.Text style={animatedTextStyle}>
-            <Ionicons name="play-circle" size={24} />
+            <Ionicons name='play-circle' size={24} />
           </Animated.Text>
           {client && (
             <Animated.Text style={animatedTextStyle}>
-              <Feather name="cast" size={22} />
-              <CastButton tintColor="transparent" />
+              <Feather name='cast' size={22} />
+              <CastButton tintColor='transparent' />
             </Animated.Text>
           )}
           {!client && settings?.openInVLC && (
             <Animated.Text style={animatedTextStyle}>
               <MaterialCommunityIcons
-                name="vlc"
+                name='vlc'
                 size={18}
                 color={animatedTextStyle.color}
               />

components/PlayButton.tv.tsx

@@ -1,14 +1,16 @@
-import { Platform } from "react-native";
+import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
 import { runtimeTicksToMinutes } from "@/utils/time";
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useRouter } from "expo-router";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Platform } from "react-native";
 import { Alert, TouchableOpacity, View } from "react-native";
 import Animated, {
   Easing,
@@ -20,10 +22,8 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
-import { Button } from "./Button";
-import { SelectedOptions } from "./ItemContent";
-import { useTranslation } from "react-i18next";
-import { useHaptic } from "@/hooks/useHaptic";
+import type { Button } from "./Button";
+import type { SelectedOptions } from "./ItemContent";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item: BaseItemDto;
@@ -34,10 +34,10 @@ const ANIMATION_DURATION = 500;
 const MIN_PLAYBACK_WIDTH = 15;
 
 export const PlayButton: React.FC<Props> = ({
-                                              item,
-                                              selectedOptions,
-                                              ...props
-                                            }: Props) => {
+  item,
+  selectedOptions,
+  ...props
+}: Props) => {
   const { showActionSheetWithOptions } = useActionSheet();
   const { t } = useTranslation();
 
@@ -60,7 +60,7 @@ export const PlayButton: React.FC<Props> = ({
     (q: string) => {
       router.push(`/player/direct-player?${q}`);
     },
-    [router]
+    [router],
   );
 
   const onPress = () => {
@@ -85,12 +85,12 @@ export const PlayButton: React.FC<Props> = ({
   const derivedTargetWidth = useDerivedValue(() => {
     if (!item || !item.RunTimeTicks) return 0;
     const userData = item.UserData;
-    if (userData && userData.PlaybackPositionTicks) {
+    if (userData?.PlaybackPositionTicks) {
       return userData.PlaybackPositionTicks > 0
         ? Math.max(
-          (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
-          MIN_PLAYBACK_WIDTH
-        )
+            (userData.PlaybackPositionTicks / item.RunTimeTicks) * 100,
+            MIN_PLAYBACK_WIDTH,
+          )
         : 0;
     }
     return 0;
@@ -106,7 +106,7 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.7, 0, 0.3, 1.0),
       });
     },
-    [item]
+    [item],
   );
 
   useAnimatedReaction(
@@ -119,7 +119,7 @@ export const PlayButton: React.FC<Props> = ({
         easing: Easing.bezier(0.9, 0, 0.31, 0.99),
       });
     },
-    [colorAtom]
+    [colorAtom],
   );
 
   useEffect(() => {
@@ -140,7 +140,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary]
+      [startColor.value.primary, endColor.value.primary],
     ),
   }));
 
@@ -148,7 +148,7 @@ export const PlayButton: React.FC<Props> = ({
     backgroundColor: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.primary, endColor.value.primary]
+      [startColor.value.primary, endColor.value.primary],
     ),
   }));
 
@@ -156,7 +156,7 @@ export const PlayButton: React.FC<Props> = ({
     width: `${interpolate(
       widthProgress.value,
       [0, 1],
-      [startWidth.value, targetWidth.value]
+      [startWidth.value, targetWidth.value],
     )}%`,
   }));
 
@@ -164,7 +164,7 @@ export const PlayButton: React.FC<Props> = ({
     color: interpolateColor(
       colorChangeProgress.value,
       [0, 1],
-      [startColor.value.text, endColor.value.text]
+      [startColor.value.text, endColor.value.text],
     ),
   }));
   /**
@@ -173,13 +173,13 @@ export const PlayButton: React.FC<Props> = ({
 
   return (
     <TouchableOpacity
-      accessibilityLabel="Play button"
-      accessibilityHint="Tap to play the media"
+      accessibilityLabel='Play button'
+      accessibilityHint='Tap to play the media'
       onPress={onPress}
-      className={`relative`}
+      className={"relative"}
       {...props}
     >
-      <View className="absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden">
+      <View className='absolute w-full h-full top-0 left-0 rounded-xl z-10 overflow-hidden'>
         <Animated.View
           style={[
             animatedPrimaryStyle,
@@ -193,7 +193,7 @@ export const PlayButton: React.FC<Props> = ({
 
       <Animated.View
         style={[animatedAverageStyle, { opacity: 0.5 }]}
-        className="absolute w-full h-full top-0 left-0 rounded-xl"
+        className='absolute w-full h-full top-0 left-0 rounded-xl'
       />
       <View
         style={{
@@ -201,19 +201,19 @@ export const PlayButton: React.FC<Props> = ({
           borderColor: colorAtom.primary,
           borderStyle: "solid",
         }}
-        className="flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full "
+        className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
       >
-        <View className="flex flex-row items-center space-x-2">
+        <View className='flex flex-row items-center space-x-2'>
           <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
             {runtimeTicksToMinutes(item?.RunTimeTicks)}
           </Animated.Text>
           <Animated.Text style={animatedTextStyle}>
-            <Ionicons name="play-circle" size={24} />
+            <Ionicons name='play-circle' size={24} />
           </Animated.Text>
           {settings?.openInVLC && (
             <Animated.Text style={animatedTextStyle}>
               <MaterialCommunityIcons
-                name="vlc"
+                name='vlc'
                 size={18}
                 color={animatedTextStyle.color}
               />

components/PlayInRemoteSession.tsx

@@ -0,0 +1,194 @@
+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,8 +1,8 @@
 import { useMarkAsPlayed } from "@/hooks/useMarkAsPlayed";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useQueryClient } from "@tanstack/react-query";
-import React from "react";
-import { View, ViewProps } from "react-native";
+import type React from "react";
+import { View, type ViewProps } from "react-native";
 import { RoundButton } from "./RoundButton";
 
 interface Props extends ViewProps {
@@ -18,7 +18,7 @@ export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
       queryClient.invalidateQueries({
         queryKey: ["item", item.Id],
       });
-    })
+    });
     queryClient.invalidateQueries({
       queryKey: ["resumeItems"],
     });
@@ -51,9 +51,9 @@ export const PlayedStatus: React.FC<Props> = ({ items, ...props }) => {
       <RoundButton
         fillColor={allPlayed ? "primary" : undefined}
         icon={allPlayed ? "checkmark" : "checkmark"}
-        onPress={async () => {    
+        onPress={async () => {
           console.log(allPlayed);
-          await markAsPlayedStatus(!allPlayed)
+          await markAsPlayedStatus(!allPlayed);
         }}
         size={props.size}
       />

components/PreviousServersList.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from "react";
+import type React from "react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import { useMMKVString } from "react-native-mmkv";
 import { ListGroup } from "./list/ListGroup";
 import { ListItem } from "./list/ListItem";
-import { useTranslation } from "react-i18next";
 
 interface Server {
   address: string;
@@ -29,7 +30,7 @@ export const PreviousServersList: React.FC<PreviousServersListProps> = ({
 
   return (
     <View>
-      <ListGroup title={t("server.previous_servers")} className="mt-4">
+      <ListGroup title={t("server.previous_servers")} className='mt-4'>
         {previousServers.map((s) => (
           <ListItem
             key={s.address}
@@ -43,7 +44,7 @@ export const PreviousServersList: React.FC<PreviousServersListProps> = ({
             setPreviousServers("[]");
           }}
           title={t("server.clear_button")}
-          textColor="red"
+          textColor='red'
         />
       </ListGroup>
     </View>