Compare commits

..

1 Commits

Author SHA1 Message Date
Gauvain
fd87cb05ea ci: [test] enable tvOS builds, disable other jobs (throwaway branch) 2026-05-28 20:25:25 +02:00
179 changed files with 3528 additions and 9376 deletions

View File

@@ -1,25 +0,0 @@
# Custom EAS Build config for Android phone APK (downloadable artifact).
# Same bun-forcing flow as android-production.yml, but builds an APK
# (assembleRelease) instead of an AAB — for sideloading / GitHub artifact.
# Referenced from eas.json: build.production-apk.android.config
build:
name: Android phone APK (bun)
steps:
- eas/checkout
- run:
name: Install dependencies (bun, frozen)
command: bun install --frozen-lockfile
- run:
name: Prebuild (Android, bun)
command: bunx expo prebuild --platform android --no-install
- eas/configure_android_version
- eas/inject_android_credentials
- eas/run_gradle:
inputs:
command: :app:assembleRelease
- eas/find_and_upload_build_artifacts

View File

@@ -1,27 +0,0 @@
# Custom EAS Build config for Android TV APK (downloadable artifact).
# Same bun-forcing flow, with EXPO_TV=1 (set via the profile env in
# eas.json) so prebuild generates the TV variant. Builds an APK for
# sideloading onto Android TV devices.
# Referenced from eas.json: build.production-apk-tv.android.config
build:
name: Android TV APK (bun)
steps:
- eas/checkout
- run:
name: Install dependencies (bun, frozen)
command: bun install --frozen-lockfile
# EXPO_TV=1 comes from the profile env, so prebuild targets Android TV.
- run:
name: Prebuild (Android TV, bun)
command: bunx expo prebuild --platform android --no-install
- eas/configure_android_version
- eas/inject_android_credentials
- eas/run_gradle:
inputs:
command: :app:assembleRelease
- eas/find_and_upload_build_artifacts

View File

@@ -1,38 +0,0 @@
# Custom EAS Build config for Android (production AAB).
#
# Why this exists: EAS's managed build can't detect Bun's text lockfile
# (bun.lock) and falls back to yarn, which breaks our install. The managed
# steps `eas/install_node_modules` and `eas/prebuild` both use "the package
# manager detected based on your project", so we replace them with explicit
# `bun` commands. Everything else uses EAS's built-in functions so we still
# get remote versioning, credentials, and artifact upload.
#
# Referenced from eas.json: build.production.android.config = android-production.yml
build:
name: Android production (bun)
steps:
- eas/checkout
- run:
name: Install dependencies (bun, frozen)
command: bun install --frozen-lockfile
# android/ is gitignored, so generate native code fresh. --no-install
# because deps are already installed above; bunx keeps it on bun.
- run:
name: Prebuild (Android, bun)
command: bunx expo prebuild --platform android --no-install
# Applies the EAS-resolved remote versionCode/versionName (autoIncrement
# in eas.json) into the freshly prebuilt android/ project.
- eas/configure_android_version
# Injects the remote Android keystore / signing config.
- eas/inject_android_credentials
# Build the Play Store app bundle (.aab).
- eas/run_gradle:
inputs:
command: :app:bundleRelease
- eas/find_and_upload_build_artifacts

View File

@@ -1,44 +0,0 @@
# Custom EAS Build config for iOS + tvOS (App Store), forcing bun.
#
# Shared by both the iPhone profile (production) and the tvOS profile
# (production_tv). The profile decides the rest:
# - production_tv sets EXPO_TV=1 (env) so prebuild targets tvOS, and
# credentialsSource: local (EAS can't manage tvOS creds remotely).
# - production uses remote-managed iOS credentials.
#
# Like the Android configs, this replaces eas/install_node_modules and
# eas/prebuild (both auto-detect the wrong package manager) with explicit
# bun commands, and keeps EAS built-ins for credentials/version/fastlane.
build:
name: iOS/tvOS App Store (bun)
steps:
- eas/checkout
- run:
name: Install dependencies (bun, frozen)
command: bun install --frozen-lockfile
- eas/resolve_apple_team_id_from_credentials:
id: resolve_team
# android/ + ios/ are gitignored, so generate native code fresh.
# EXPO_TV (from the profile env) selects iPhone vs tvOS. --no-install
# skips JS + pod install; we install pods explicitly below with bun deps.
- run:
name: Prebuild (iOS/tvOS, bun)
command: bunx expo prebuild --platform ios --no-install
- run:
name: Install CocoaPods
working_directory: ./ios
command: pod install
- eas/configure_ios_credentials
- eas/configure_ios_version
- eas/generate_gymfile_from_template:
inputs:
credentials: ${ eas.job.secrets.buildCredentials }
- eas/run_fastlane
- eas/find_and_upload_build_artifacts

View File

@@ -1,54 +1,91 @@
<!-- <!--
Use a conventional commit title for the PR title, Pull Request Template for Streamyfin
for example `feat(auth): add MFA` ====================================
All sections below are required. Write N/A if a section is not applicable. Use this template to help reviewers understand the purpose of your PR
If you use AI to help implement this PR, you must declare it below. It's very important that the feature or fix implemented has been tested thoroughly by you personally on all target platforms. Only adding AI generated code without proper testing is not allowed and this PR will be closed immediately. and to ensure all necessary checks are completed before merging.
--> -->
# 📦 Pull Request # 📦 Pull Request
## 🔖 Summary
<!-- <!--
🤖 AI ASSISTED? A concise description of the changes introduced by this PR.
Uncomment the line below if AI was used to assist with this PR: Example:
--> “Add real-time currency conversion widget to dashboard.”
<!--
[![AI Assisted](https://img.shields.io/badge/AI_Assisted-18181b?style=for-the-badge&logo=openai&logoColor=white)](#) -->
## 📝 Description
<!--
A short description of the changes and why you're making them.
Example: “Add option to clean image cache, to mitigate stuck/blank movie poster issues.”
--> -->
## 🏷️ Ticket / Issue ## 🏷️ Ticket / Issue
<!-- <!--
Link to the related ticket, issue or user story. Link to the related ticket, issue or user story.
Example: Fixes #123 You can also indicate if this PR supersedes a previous one.
Example:
- Closes #123
- Fixes STREAMYFIN-456
- Resolves #789
- Supersedes #120
- Related: #130
--> -->
### 🖼️ Screenshots / GIFs (if UI) ## 🛠️ Whats Changed
<!-- <!-- Use a Conventional Commit in the PR title, e.g., `feat(auth): add MFA`.
Include screenshots of relevant UI changes for both Android and iOS. If this PR introduces a breaking change, include a `BREAKING CHANGE:` block in the description.
Before/After, responsive states (if relevant). Spec: https://www.conventionalcommits.org/ -->
- Type: feat | fix | docs | style | refactor | perf | test | chore | build | ci | revert
- Scope (optional): e.g., auth, billing, mobile
- Short summary: what changed and why (12 lines)
--> -->
## 📋 Details
<!--
Provide more context or background. Explain any non-obvious decisions.
Include screenshots or GIFs for UI changes if applicable.
-->
### ⚠️ Breaking Changes
<!-- List any breaking API/contract changes and migration guidance. If none, write “None”. -->
### 🔐 Security & Privacy Impact
<!-- Data touched, new permissions/scopes, PII, secrets, threat considerations. If none, write “None”. -->
### ⚡ Performance Impact
<!-- Hot paths, memory/CPU/latency implications, benchmarks if available. -->
### 🖼️ Screenshots / GIFs (if UI)
<!-- Before/After, dark mode, responsive states. -->
## ✅ Checklist ## ✅ Checklist
<!-- <!--
Review and check off items as you complete them. Review and check off items as you complete them.
--> -->
- [ ] Ive read the [contribution guidelines](CONTRIBUTING.md) - [ ] Ive read the [contribution guidelines](CONTRIBUTING.md)
- [ ] Verified that changes behave as expected for all platforms - [ ] Code follows project style and passes lint/format (`npm|pnpm|yarn|bun` scripts)
- [ ] Code passes lint/formatting and type checks (`tsc`/`biome`) - [ ] Type checks pass (tsc/biome/etc.)
- [ ] No secrets, hardcoded credentials, or private config files are included - [ ] Docs updated (README/ADR/usage/API)
- [ ] I've declared if AI was used to assist with this PR (by uncommenting the line at the bottom, or not) - [ ] No secrets/credentials included; env vars documented
- [ ] Release notes/CHANGELOG entry added (if applicable)
- [ ] Verified locally that changes behave as expected
## 🔍 Testing Instructions ## 🔍 Testing Instructions
<!-- <!--
Describe how reviewers can test your changes. This will help the PR get merged faster. Describe how reviewers can test your changes.
Example: Example:
1. Open the settings page and scroll to the bottom 1. `git fetch origin pull/<PR_ID>/head:branchname && git checkout branchname`
2. Verify that the clear data button is visible and pressable 2. Install deps: `npm|pnpm|yarn|bun install`
3. Verify that when you click the clear data button, a dialog appears prompting you to confirm 3. Start service/app: `npm|pnpm|yarn|bun run [target]` (e.g., `npm run ios` or `bun run android:tv`)
4. Verify that when you click the confirm button, the data is cleared and a toast message is displayed 4. Run tests: `npm|pnpm|yarn|bun test`
5. Verification steps:
- [ ] Expected UI/endpoint behavior
- [ ] Logs show no errors
- [ ] Edge cases covered (list)
--> -->
## ⚙️ Deployment Notes
<!--
Describe any deployment considerations such as config, environment vars, or native builds.
-->
## 📝 Additional Notes
<!--
Any other information or references related to this PR.
-->

19
.github/renovate.json vendored
View File

@@ -25,25 +25,6 @@
"osvVulnerabilityAlerts": true, "osvVulnerabilityAlerts": true,
"configMigration": true, "configMigration": true,
"separateMinorPatch": true, "separateMinorPatch": true,
"customManagers": [
{
"customType": "regex",
"managerFilePatterns": ["/\\.ya?ml$/"],
"matchStrings": [
"# renovate: datasource=(?<datasource>\\S+) depName=(?<depName>\\S+)(?: versioning=(?<versioning>\\S+))?\\s+xcode-version:\\s*[\"']?(?<currentValue>[^\"'\\s]+)"
],
"versioningTemplate": "{{#if versioning}}{{{versioning}}}{{else}}loose{{/if}}"
}
],
"customDatasources": {
"xcode": {
"defaultRegistryUrlTemplate": "https://xcodereleases.com/data.json",
"format": "json",
"transformTemplates": [
"{ \"releases\": [$[version.release.release=true].{\"version\": version.number}] }"
]
}
},
"lockFileMaintenance": { "lockFileMaintenance": {
"vulnerabilityAlerts": { "vulnerabilityAlerts": {
"enabled": true, "enabled": true,

View File

@@ -13,7 +13,7 @@ on:
jobs: jobs:
build-android-phone: build-android-phone:
if: (!contains(github.event.head_commit.message, '[skip ci]')) if: false # [tvos-test] temporarily disabled to only run tvOS builds
runs-on: ubuntu-24.04 runs-on: ubuntu-24.04
name: 🤖 Build Android APK (Phone) name: 🤖 Build Android APK (Phone)
permissions: permissions:
@@ -96,7 +96,7 @@ jobs:
retention-days: 7 retention-days: 7
build-android-tv: build-android-tv:
if: (!contains(github.event.head_commit.message, '[skip ci]')) if: false # [tvos-test] temporarily disabled to only run tvOS builds
runs-on: ubuntu-24.04 runs-on: ubuntu-24.04
name: 🤖 Build Android APK (TV) name: 🤖 Build Android APK (TV)
permissions: permissions:
@@ -179,7 +179,7 @@ jobs:
retention-days: 7 retention-days: 7
build-ios-phone: build-ios-phone:
if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin')) if: false # [tvos-test] temporarily disabled to only run tvOS builds
runs-on: macos-26 runs-on: macos-26
name: 🍎 Build iOS IPA (Phone) name: 🍎 Build iOS IPA (Phone)
permissions: permissions:
@@ -218,8 +218,7 @@ jobs:
- name: 🔧 Setup Xcode - name: 🔧 Setup Xcode
uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1 uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
with: with:
# renovate: datasource=custom.xcode depName=xcode versioning=loose xcode-version: "26.2"
xcode-version: "26.4"
- name: 🏗️ Setup EAS - name: 🏗️ Setup EAS
uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
@@ -244,7 +243,7 @@ jobs:
retention-days: 7 retention-days: 7
build-ios-phone-unsigned: build-ios-phone-unsigned:
if: (!contains(github.event.head_commit.message, '[skip ci]')) if: false # [tvos-test] temporarily disabled to only run tvOS builds
runs-on: macos-26 runs-on: macos-26
name: 🍎 Build iOS IPA (Phone - Unsigned) name: 🍎 Build iOS IPA (Phone - Unsigned)
permissions: permissions:
@@ -283,8 +282,7 @@ jobs:
- name: 🔧 Setup Xcode - name: 🔧 Setup Xcode
uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1 uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
with: with:
# renovate: datasource=custom.xcode depName=xcode versioning=loose xcode-version: "26.2"
xcode-version: "26.4"
- name: 🚀 Build iOS app - name: 🚀 Build iOS app
env: env:
@@ -304,7 +302,7 @@ jobs:
build-ios-tv: build-ios-tv:
# Temporarily disabled until feat/tv-interface is merged (TV UI not ready). # Temporarily disabled until feat/tv-interface is merged (TV UI not ready).
# Re-enable by removing the `false &&` prefix below. # Re-enable by removing the `false &&` prefix below.
if: false && (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin')) if: (!contains(github.event.head_commit.message, '[skip ci]') && (github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name == 'streamyfin/streamyfin'))
runs-on: macos-26 runs-on: macos-26
name: 🍎 Build tvOS IPA name: 🍎 Build tvOS IPA
permissions: permissions:
@@ -343,8 +341,7 @@ jobs:
- name: 🔧 Setup Xcode - name: 🔧 Setup Xcode
uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1 uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
with: with:
# renovate: datasource=custom.xcode depName=xcode versioning=loose xcode-version: "26.2"
xcode-version: "26.4"
- name: 🏗️ Setup EAS - name: 🏗️ Setup EAS
uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
@@ -369,9 +366,8 @@ jobs:
retention-days: 7 retention-days: 7
build-ios-tv-unsigned: build-ios-tv-unsigned:
# Unsigned tvOS build is enabled (compiles without Apple credentials). # Temporarily disabled until feat/tv-interface is merged (TV UI not ready).
# The signed tvOS job above stays disabled until tvOS provisioning # Re-enable by removing the `false &&` prefix below.
# profiles are set up in EAS (app + TopShelf targets).
if: (!contains(github.event.head_commit.message, '[skip ci]')) if: (!contains(github.event.head_commit.message, '[skip ci]'))
runs-on: macos-26 runs-on: macos-26
name: 🍎 Build tvOS IPA (Unsigned) name: 🍎 Build tvOS IPA (Unsigned)
@@ -411,8 +407,7 @@ jobs:
- name: 🔧 Setup Xcode - name: 🔧 Setup Xcode
uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1 uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1
with: with:
# renovate: datasource=custom.xcode depName=xcode versioning=loose xcode-version: "26.2"
xcode-version: "26.4"
- name: 🚀 Build iOS app - name: 🚀 Build iOS app
env: env:

View File

@@ -1,216 +0,0 @@
name: 🚀 Release (EAS build + submit)
# On merge to main (gated by the `production` GitHub Environment approval),
# build all targets on EAS in parallel via custom bun build configs:
# 1. iOS phone → App Store (auto-submit)
# 2. tvOS → App Store (auto-submit)
# 3. Android AAB → Google Play (auto-submit)
# 4. Android phone APK→ downloadable artifact
# 5. Android TV APK → downloadable artifact
# Note: EAS queues builds based on your plan's concurrency; parallel jobs
# here just submit them — EAS may still run them serially.
concurrency:
group: release-${{ github.ref }}
cancel-in-progress: false
on:
push:
branches: [main]
workflow_dispatch:
jobs:
approve:
name: 🔐 Approve release
runs-on: ubuntu-24.04
environment: production
steps:
- name: ✅ Release approved
run: echo "Release approved for ${{ github.sha }}"
build:
name: 🚀 ${{ matrix.name }}
needs: approve
runs-on: ubuntu-24.04
permissions:
contents: read
strategy:
fail-fast: false
matrix:
include:
- name: 🍎 iOS
platform: ios
profile: production
submit: true
- name: 📺 tvOS
platform: ios
profile: production_tv
submit: true
- name: 🤖 Android AAB
platform: android
profile: production
submit: true
- name: 🤖 Android APK
platform: android
profile: production-apk
submit: false
artifact_name: streamyfin-android-phone-apk
- name: 📺 Android TV APK
platform: android
profile: production-apk-tv
submit: false
artifact_name: streamyfin-android-tv-apk
steps:
- name: 📥 Checkout code
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-depth: 0
submodules: recursive
show-progress: false
- name: 🍞 Setup Bun
uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
with:
bun-version: latest
- name: 💾 Cache Bun dependencies
uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
with:
path: ~/.bun/install/cache
key: ${{ runner.os }}-bun-cache-${{ hashFiles('bun.lock') }}
restore-keys: |
${{ runner.os }}-bun-cache
- name: 📦 Install dependencies and reload submodules
run: |
bun install --frozen-lockfile
bun run submodule-reload
- name: 🏗️ Setup EAS
uses: expo/expo-github-action@b184ff86a3c926240f1b6db41764c83a01c02eef # main
with:
eas-version: latest
token: ${{ secrets.EXPO_TOKEN }}
eas-cache: true
# tvOS uses credentialsSource: local — restore the gitignored
# credentials.json + cert + provisioning profiles from secrets.
- name: 🔐 Restore tvOS signing credentials
if: matrix.profile == 'production_tv'
env:
EAS_CREDENTIALS_JSON: ${{ secrets.EAS_CREDENTIALS_JSON }}
TVOS_DIST_CERT_P12_BASE64: ${{ secrets.TVOS_DIST_CERT_P12_BASE64 }}
TVOS_APP_PROFILE_BASE64: ${{ secrets.TVOS_APP_PROFILE_BASE64 }}
TVOS_TOPSHELF_PROFILE_BASE64: ${{ secrets.TVOS_TOPSHELF_PROFILE_BASE64 }}
run: |
mkdir -p certs profiles
printf '%s' "$EAS_CREDENTIALS_JSON" > credentials.json
echo "$TVOS_DIST_CERT_P12_BASE64" | base64 -d > certs/distribution.p12
echo "$TVOS_APP_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_tvOS_App_Store.mobileprovision
echo "$TVOS_TOPSHELF_PROFILE_BASE64" | base64 -d > profiles/Streamyfin_TopShelf_tvOS_App_Store.mobileprovision
# Android Play submit needs the Google Play service account JSON.
- name: 🔐 Restore Google Play service account
if: matrix.platform == 'android' && matrix.submit
env:
GOOGLE_SERVICE_ACCOUNT_KEY: ${{ secrets.GOOGLE_SERVICE_ACCOUNT_KEY }}
run: printf '%s' "$GOOGLE_SERVICE_ACCOUNT_KEY" > google-service-account.json
# App Store Connect API key for iOS/tvOS submit (raw-PEM or base64).
- name: 🔐 Restore App Store Connect API key
if: matrix.platform == 'ios'
env:
APPLE_KEY_CONTENT: ${{ secrets.APPLE_KEY_CONTENT }}
run: |
if printf '%s' "$APPLE_KEY_CONTENT" | grep -q "BEGIN PRIVATE KEY"; then
printf '%s' "$APPLE_KEY_CONTENT" > "$RUNNER_TEMP/asc_api_key.p8"
else
printf '%s' "$APPLE_KEY_CONTENT" | base64 -d > "$RUNNER_TEMP/asc_api_key.p8"
fi
# ── Submit builds: cloud build + auto-submit to the store ──
- name: 🚀 Build & submit (${{ matrix.name }})
if: matrix.submit
env:
EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
EXPO_ASC_API_KEY_PATH: ${{ runner.temp }}/asc_api_key.p8
EXPO_ASC_KEY_ID: ${{ secrets.APPLE_KEY_ID }}
EXPO_ASC_ISSUER_ID: ${{ secrets.APPLE_KEY_ISSUER_ID }}
run: |
eas build \
--platform ${{ matrix.platform }} \
--profile ${{ matrix.profile }} \
--auto-submit \
--non-interactive \
--wait
# ── Artifact builds: cloud build, then download + upload the APK ──
- name: 🏗️ Build artifact (${{ matrix.name }})
if: ${{ !matrix.submit }}
env:
EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
run: |
eas build \
--platform ${{ matrix.platform }} \
--profile ${{ matrix.profile }} \
--non-interactive \
--wait \
--json > build-result.json
URL=$(node -e "const b=require('./build-result.json'); const x=Array.isArray(b)?b[0]:b; console.log(x.artifacts.applicationArchiveUrl)")
echo "Downloading artifact: $URL"
curl -fL "$URL" -o "${{ matrix.artifact_name }}.apk"
- name: 📤 Upload APK artifact (${{ matrix.name }})
if: ${{ !matrix.submit }}
uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
with:
name: ${{ matrix.artifact_name }}
path: ${{ matrix.artifact_name }}.apk
retention-days: 14
# Draft a GitHub Release with the two APKs attached. The tag comes from the
# merged-in app version (app.json → expo.version), NOT the auto-incremented
# build number — so cutting a release is a deliberate version bump via PR.
github-release:
name: 📦 Draft GitHub Release
needs: build
if: ${{ !cancelled() }}
runs-on: ubuntu-24.04
permissions:
contents: write
actions: read # required for `gh run download` to list/fetch this run's artifacts
steps:
- name: 📥 Checkout code
uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
with:
fetch-depth: 0
show-progress: false
- name: 📦 Download APK artifacts from this run
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
mkdir -p apks
gh run download ${{ github.run_id }} --name streamyfin-android-phone-apk --dir apks
gh run download ${{ github.run_id }} --name streamyfin-android-tv-apk --dir apks
ls -la apks
- name: 📝 Draft release (tag = app.json version, not auto-bumped)
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
VERSION=$(node -e "console.log(require('./app.json').expo.version)")
TAG="v$VERSION"
echo "Release tag from merged app version: $TAG"
if gh release view "$TAG" >/dev/null 2>&1; then
echo "Release $TAG exists — updating APK assets"
gh release upload "$TAG" apks/*.apk --clobber
else
echo "Creating draft release $TAG"
gh release create "$TAG" \
--draft \
--generate-notes \
--title "$TAG" \
apks/*.apk
fi

11
.gitignore vendored
View File

@@ -18,9 +18,6 @@ web-build/
/androidmobile /androidmobile
/androidtv /androidtv
# Gradle caches (top-level + per-module native projects)
**/.gradle/
# Module-specific Builds # Module-specific Builds
modules/mpv-player/android/build modules/mpv-player/android/build
modules/player/android modules/player/android
@@ -76,12 +73,4 @@ modules/background-downloader/android/build/*
# ios:unsigned-build Artifacts # ios:unsigned-build Artifacts
build/ build/
# but keep EAS custom build configs (the generic build/ rule above matches .eas/build/)
!.eas/build/
!.eas/build/**
.claude/ .claude/
.agents/skills/**
skills-lock.json
# CI-injected Google Play service account key (written at build time)
google-service-account.json

View File

@@ -143,6 +143,14 @@ interface ModalOptions {
} }
``` ```
## Examples
See `components/ExampleGlobalModalUsage.tsx` for comprehensive examples including:
- Simple content modal
- Modal with custom snap points
- Complex component in modal
- Success/error modals triggered from functions
## Default Styling ## Default Styling
The modal uses these default styles (can be overridden via options): The modal uses these default styles (can be overridden via options):

View File

@@ -2,7 +2,7 @@
"expo": { "expo": {
"name": "Streamyfin", "name": "Streamyfin",
"slug": "streamyfin", "slug": "streamyfin",
"version": "0.54.1", "version": "0.54.0",
"orientation": "default", "orientation": "default",
"icon": "./assets/images/icon.png", "icon": "./assets/images/icon.png",
"scheme": "streamyfin", "scheme": "streamyfin",
@@ -36,6 +36,7 @@
"appleTeamId": "MWD5K362T8" "appleTeamId": "MWD5K362T8"
}, },
"android": { "android": {
"versionCode": 93,
"adaptiveIcon": { "adaptiveIcon": {
"foregroundImage": "./assets/images/icon-android-plain.png", "foregroundImage": "./assets/images/icon-android-plain.png",
"monochromeImage": "./assets/images/icon-android-themed.png", "monochromeImage": "./assets/images/icon-android-themed.png",
@@ -77,16 +78,15 @@
"expo-build-properties", "expo-build-properties",
{ {
"ios": { "ios": {
"deploymentTarget": "16.4", "deploymentTarget": "15.6",
"useFrameworks": "static", "useFrameworks": "static"
"forceStaticLinking": ["ExpoUI", "GlassEffectView", "GlassPoster"]
}, },
"android": { "android": {
"buildArchs": ["arm64-v8a", "x86_64", "armeabi-v7a"], "buildArchs": ["arm64-v8a", "x86_64", "armeabi-v7a"],
"compileSdkVersion": 36, "compileSdkVersion": 36,
"targetSdkVersion": 35, "targetSdkVersion": 35,
"buildToolsVersion": "35.0.0", "buildToolsVersion": "35.0.0",
"kotlinVersion": "2.1.20", "kotlinVersion": "2.0.21",
"minSdkVersion": 26, "minSdkVersion": 26,
"usesCleartextTraffic": true, "usesCleartextTraffic": true,
"packagingOptions": { "packagingOptions": {
@@ -143,8 +143,8 @@
[ [
"./plugins/withGitPod.js", "./plugins/withGitPod.js",
{ {
"podName": "MPVKit", "podName": "MPVKit-GPL",
"podspecUrl": "https://raw.githubusercontent.com/mpv-ios/MPVKit/0.41.0-av/MPVKit.podspec" "podspecUrl": "https://raw.githubusercontent.com/streamyfin/MPVKit/0.40.0-av/MPVKit-GPL.podspec"
} }
] ]
], ],

View File

@@ -16,7 +16,7 @@ export interface MenuLink {
icon: string; icon: string;
} }
export default function CustomLinksPage() { export default function menuLinks() {
const [api] = useAtom(apiAtom); const [api] = useAtom(apiAtom);
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const [menuLinks, setMenuLinks] = useState<MenuLink[]>([]); const [menuLinks, setMenuLinks] = useState<MenuLink[]>([]);

View File

@@ -5,7 +5,7 @@ import { Favorites } from "@/components/home/Favorites";
import { Favorites as TVFavorites } from "@/components/home/Favorites.tv"; import { Favorites as TVFavorites } from "@/components/home/Favorites.tv";
import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache"; import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
export default function FavoritesPage() { export default function favorites() {
const invalidateCache = useInvalidatePlaybackProgressCache(); const invalidateCache = useInvalidatePlaybackProgressCache();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);

View File

@@ -9,7 +9,6 @@ import useRouter from "@/hooks/useAppRouter";
const Chromecast = Platform.isTV ? null : require("@/components/Chromecast"); const Chromecast = Platform.isTV ? null : require("@/components/Chromecast");
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { HeaderBackButton } from "@/components/common/HeaderBackButton";
import { useSessions, type useSessionsProps } from "@/hooks/useSessions"; import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
import { userAtom } from "@/providers/JellyfinProvider"; import { userAtom } from "@/providers/JellyfinProvider";
@@ -48,7 +47,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
title: t("home.downloads.downloads_title"), title: t("home.downloads.downloads_title"),
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -59,7 +66,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -89,7 +104,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -100,7 +123,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -111,7 +142,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -122,7 +161,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -133,7 +180,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -144,7 +199,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -174,7 +237,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -185,7 +256,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -196,7 +275,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -207,7 +294,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -218,7 +313,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -229,7 +332,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
<Stack.Screen <Stack.Screen
@@ -240,7 +351,15 @@ export default function IndexLayout() {
headerBlurEffect: "none", headerBlurEffect: "none",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",
headerShadowVisible: false, headerShadowVisible: false,
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable
onPress={() => _router.back()}
className='pl-0.5'
style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
}} }}
/> />
{Object.entries(nestedTabPageScreenOptions).map(([name, options]) => ( {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
@@ -250,7 +369,11 @@ export default function IndexLayout() {
name='collections/[collectionId]' name='collections/[collectionId]'
options={{ options={{
title: "", title: "",
headerLeft: () => <HeaderBackButton />, headerLeft: () => (
<Pressable onPress={() => _router.back()} className='pl-0.5'>
<Feather name='chevron-left' size={28} color='white' />
</Pressable>
),
headerShown: !Platform.isTV, headerShown: !Platform.isTV,
headerBlurEffect: "prominent", headerBlurEffect: "prominent",
headerTransparent: Platform.OS === "ios", headerTransparent: Platform.OS === "ios",

View File

@@ -1,9 +1,4 @@
import { import { BottomSheetModal } from "@gorhom/bottom-sheet";
BottomSheetBackdrop,
type BottomSheetBackdropProps,
BottomSheetModal,
BottomSheetView,
} from "@gorhom/bottom-sheet";
import { useNavigation } from "expo-router"; import { useNavigation } from "expo-router";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
@@ -12,7 +7,6 @@ import { Alert, Platform, ScrollView, View } from "react-native";
import { Pressable } from "react-native-gesture-handler"; import { Pressable } from "react-native-gesture-handler";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import { toast } from "sonner-native"; import { toast } from "sonner-native";
import { Button } from "@/components/Button";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { TouchableItemRouter } from "@/components/common/TouchableItemRouter"; import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
import ActiveDownloads from "@/components/downloads/ActiveDownloads"; import ActiveDownloads from "@/components/downloads/ActiveDownloads";
@@ -26,7 +20,7 @@ import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
import { queueAtom } from "@/utils/atoms/queue"; import { queueAtom } from "@/utils/atoms/queue";
import { writeToLog } from "@/utils/log"; import { writeToLog } from "@/utils/log";
export default function DownloadsPage() { export default function page() {
const navigation = useNavigation(); const navigation = useNavigation();
const { t } = useTranslation(); const { t } = useTranslation();
const [_queue, _setQueue] = useAtom(queueAtom); const [_queue, _setQueue] = useAtom(queueAtom);
@@ -107,7 +101,7 @@ export default function DownloadsPage() {
navigation.setOptions({ navigation.setOptions({
headerRight: () => ( headerRight: () => (
<Pressable <Pressable
onPress={() => bottomSheetModalRef.current?.present()} onPress={bottomSheetModalRef.current?.present}
className='px-2' className='px-2'
> >
<DownloadSize items={downloadedFiles?.map((f) => f.item) || []} /> <DownloadSize items={downloadedFiles?.map((f) => f.item) || []} />
@@ -122,7 +116,7 @@ export default function DownloadsPage() {
} }
}, [showMigration]); }, [showMigration]);
const deleteMovies = () => const _deleteMovies = () =>
deleteFileByType("Movie") deleteFileByType("Movie")
.then(() => .then(() =>
toast.success( toast.success(
@@ -133,7 +127,7 @@ export default function DownloadsPage() {
writeToLog("ERROR", reason); writeToLog("ERROR", reason);
toast.error(t("home.downloads.toasts.failed_to_delete_all_movies")); toast.error(t("home.downloads.toasts.failed_to_delete_all_movies"));
}); });
const deleteShows = () => const _deleteShows = () =>
deleteFileByType("Episode") deleteFileByType("Episode")
.then(() => .then(() =>
toast.success( toast.success(
@@ -144,7 +138,7 @@ export default function DownloadsPage() {
writeToLog("ERROR", reason); writeToLog("ERROR", reason);
toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries")); toast.error(t("home.downloads.toasts.failed_to_delete_all_tvseries"));
}); });
const deleteOtherMedia = () => const _deleteOtherMedia = () =>
Promise.all( Promise.all(
otherMedia otherMedia
.filter((item) => item.item.Type) .filter((item) => item.item.Type)
@@ -168,9 +162,6 @@ export default function DownloadsPage() {
), ),
); );
const deleteAllMedia = async () =>
await Promise.all([deleteMovies(), deleteShows(), deleteOtherMedia()]);
return ( return (
<OfflineModeProvider isOffline={true}> <OfflineModeProvider isOffline={true}>
<ScrollView <ScrollView
@@ -265,42 +256,6 @@ export default function DownloadsPage() {
)} )}
</View> </View>
</ScrollView> </ScrollView>
<BottomSheetModal
ref={bottomSheetModalRef}
enableDynamicSizing
handleIndicatorStyle={{
backgroundColor: "white",
}}
backgroundStyle={{
backgroundColor: "#171717",
}}
backdropComponent={(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={0}
/>
)}
>
<BottomSheetView>
<View className='p-4 space-y-4 mb-4'>
<Button color='purple' onPress={deleteMovies}>
{t("home.downloads.delete_all_movies_button")}
</Button>
<Button color='purple' onPress={deleteShows}>
{t("home.downloads.delete_all_tvseries_button")}
</Button>
{otherMedia.length > 0 && (
<Button color='purple' onPress={deleteOtherMedia}>
{t("home.downloads.delete_all_other_media_button")}
</Button>
)}
<Button color='red' onPress={deleteAllMedia}>
{t("home.downloads.delete_all_button")}
</Button>
</View>
</BottomSheetView>
</BottomSheetModal>
</OfflineModeProvider> </OfflineModeProvider>
); );
} }

View File

@@ -23,7 +23,7 @@ import { formatBitrate } from "@/utils/bitrate";
import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl"; import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
import { formatTimeString } from "@/utils/time"; import { formatTimeString } from "@/utils/time";
export default function SessionsPage() { export default function page() {
const { sessions, isLoading } = useSessions({} as useSessionsProps); const { sessions, isLoading } = useSessions({} as useSessionsProps);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -72,7 +72,7 @@ const SessionCard = ({ session }: SessionCardProps) => {
}; };
const getProgressPercentage = () => { const getProgressPercentage = () => {
if (!session.NowPlayingItem?.RunTimeTicks) { if (!session.NowPlayingItem || !session.NowPlayingItem.RunTimeTicks) {
return 0; return 0;
} }

View File

@@ -59,17 +59,17 @@ function SettingsMobile() {
<QuickConnect className='mb-4' /> <QuickConnect className='mb-4' />
<View className='mb-4'> <TouchableOpacity
<ListGroup title={t("pairing.pair_with_phone_title")}> className='mb-4 p-4 rounded-xl bg-neutral-900 border border-neutral-800'
<ListItem onPress={() => router.push("/(auth)/(tabs)/(home)/companion-login")}
onPress={() => >
router.push("/(auth)/(tabs)/(home)/companion-login") <Text className='text-white font-bold text-base mb-1'>
} {t("pairing.pair_with_phone_title")}
title={t("pairing.pair_with_phone")} </Text>
textColor='blue' <Text className='text-neutral-400 text-sm'>
/> {t("pairing.pair_with_phone_description")}
</ListGroup> </Text>
</View> </TouchableOpacity>
<View className='mb-4'> <View className='mb-4'>
<AppLanguageSelector /> <AppLanguageSelector />

View File

@@ -12,7 +12,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider"; import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings"; import { useSettings } from "@/utils/atoms/settings";
export default function AppearanceHideLibrariesPage() { export default function page() {
const { settings, updateSettings, pluginSettings } = useSettings(); const { settings, updateSettings, pluginSettings } = useSettings();
const user = useAtomValue(userAtom); const user = useAtomValue(userAtom);
const api = useAtomValue(apiAtom); const api = useAtomValue(apiAtom);

View File

@@ -11,7 +11,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider"; import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings"; import { useSettings } from "@/utils/atoms/settings";
export default function HideLibrariesPage() { export default function page() {
const { settings, updateSettings, pluginSettings } = useSettings(); const { settings, updateSettings, pluginSettings } = useSettings();
const user = useAtomValue(userAtom); const user = useAtomValue(userAtom);
const api = useAtomValue(apiAtom); const api = useAtomValue(apiAtom);

View File

@@ -4,7 +4,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
import { JellyseerrSettings } from "@/components/settings/Jellyseerr"; import { JellyseerrSettings } from "@/components/settings/Jellyseerr";
import { useSettings } from "@/utils/atoms/settings"; import { useSettings } from "@/utils/atoms/settings";
export default function JellyseerrPluginPage() { export default function page() {
const { pluginSettings } = useSettings(); const { pluginSettings } = useSettings();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();

View File

@@ -4,7 +4,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
import { KefinTweaksSettings } from "@/components/settings/KefinTweaks"; import { KefinTweaksSettings } from "@/components/settings/KefinTweaks";
import { useSettings } from "@/utils/atoms/settings"; import { useSettings } from "@/utils/atoms/settings";
export default function KefinTweaksPage() { export default function page() {
const { pluginSettings } = useSettings(); const { pluginSettings } = useSettings();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();

View File

@@ -18,7 +18,7 @@ import DisabledSetting from "@/components/settings/DisabledSetting";
import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient"; import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
import { useSettings } from "@/utils/atoms/settings"; import { useSettings } from "@/utils/atoms/settings";
export default function MarlinSearchPage() { export default function page() {
const navigation = useNavigation(); const navigation = useNavigation();
const { t } = useTranslation(); const { t } = useTranslation();

View File

@@ -17,7 +17,7 @@ import { ListItem } from "@/components/list/ListItem";
import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient"; import { useNetworkAwareQueryClient } from "@/hooks/useNetworkAwareQueryClient";
import { useSettings } from "@/utils/atoms/settings"; import { useSettings } from "@/utils/atoms/settings";
export default function StreamystatsPage() { export default function page() {
const { t } = useTranslation(); const { t } = useTranslation();
const navigation = useNavigation(); const navigation = useNavigation();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();

View File

@@ -37,10 +37,8 @@ const Page: React.FC = () => {
ItemFields.MediaStreams, ItemFields.MediaStreams,
]); ]);
// Lazily preload item with full media sources in background — never cache // Lazily preload item with full media sources in background
const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, [], { const { data: itemWithSources } = useItemQuery(id, isOffline, undefined, []);
gcTime: 0,
});
const opacity = useSharedValue(1); const opacity = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => { const animatedStyle = useAnimatedStyle(() => {

View File

@@ -13,7 +13,7 @@ import {
} from "@/utils/jellyseerr/server/models/Search"; } from "@/utils/jellyseerr/server/models/Search";
import { COMPANY_LOGO_IMAGE_FILTER } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider"; import { COMPANY_LOGO_IMAGE_FILTER } from "@/utils/jellyseerr/src/components/Discover/NetworkSlider";
export default function JellyseerrCompanyPage() { export default function page() {
const local = useLocalSearchParams(); const local = useLocalSearchParams();
const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr(); const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();

View File

@@ -9,7 +9,7 @@ import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr"; import { Endpoints, useJellyseerr } from "@/hooks/useJellyseerr";
import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover"; import { DiscoverSliderType } from "@/utils/jellyseerr/server/constants/discover";
export default function JellyseerrGenrePage() { export default function page() {
const local = useLocalSearchParams(); const local = useLocalSearchParams();
const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr(); const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();

View File

@@ -6,7 +6,6 @@ import {
BottomSheetTextInput, BottomSheetTextInput,
BottomSheetView, BottomSheetView,
} from "@gorhom/bottom-sheet"; } from "@gorhom/bottom-sheet";
import type { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Image } from "expo-image"; import { Image } from "expo-image";
import { useLocalSearchParams, useNavigation } from "expo-router"; import { useLocalSearchParams, useNavigation } from "expo-router";
@@ -77,7 +76,7 @@ const MobilePage: React.FC = () => {
const [issueMessage, setIssueMessage] = useState<string>(); const [issueMessage, setIssueMessage] = useState<string>();
const [requestBody, _setRequestBody] = useState<MediaRequestBody>(); const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
const [issueTypeDropdownOpen, setIssueTypeDropdownOpen] = useState(false); const [issueTypeDropdownOpen, setIssueTypeDropdownOpen] = useState(false);
const advancedReqModalRef = useRef<BottomSheetModalMethods>(null); const advancedReqModalRef = useRef<BottomSheetModal>(null);
const bottomSheetModalRef = useRef<BottomSheetModal>(null); const bottomSheetModalRef = useRef<BottomSheetModal>(null);
const { const {

View File

@@ -11,7 +11,7 @@ import JellyseerrPoster from "@/components/posters/JellyseerrPoster";
import { useJellyseerr } from "@/hooks/useJellyseerr"; import { useJellyseerr } from "@/hooks/useJellyseerr";
import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person"; import type { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
export default function JellyseerrPersonPage() { export default function page() {
const local = useLocalSearchParams(); const local = useLocalSearchParams();
const { t } = useTranslation(); const { t } = useTranslation();

View File

@@ -1,13 +1,13 @@
import { Slot, Stack, withLayoutContext } from "expo-router";
import { import {
createMaterialTopTabNavigator, createMaterialTopTabNavigator,
MaterialTopTabNavigationEventMap, MaterialTopTabNavigationEventMap,
MaterialTopTabNavigationOptions, MaterialTopTabNavigationOptions,
} from "expo-router/js-top-tabs"; } from "@react-navigation/material-top-tabs";
import type { import type {
ParamListBase, ParamListBase,
TabNavigationState, TabNavigationState,
} from "expo-router/react-navigation"; } from "@react-navigation/native";
import { Slot, Stack, withLayoutContext } from "expo-router";
import { Platform } from "react-native"; import { Platform } from "react-native";
const { Navigator } = createMaterialTopTabNavigator(); const { Navigator } = createMaterialTopTabNavigator();

View File

@@ -8,7 +8,7 @@ import { ItemImage } from "@/components/common/ItemImage";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider"; import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
export default function LiveTvChannelsPage() { export default function page() {
const [api] = useAtom(apiAtom); const [api] = useAtom(apiAtom);
const [user] = useAtom(userAtom); const [user] = useAtom(userAtom);
const _insets = useSafeAreaInsets(); const _insets = useSafeAreaInsets();

View File

@@ -17,7 +17,7 @@ const ITEMS_PER_PAGE = 20;
const MemoizedLiveTVGuideRow = React.memo(LiveTVGuideRow); const MemoizedLiveTVGuideRow = React.memo(LiveTVGuideRow);
export default function LiveTvGuidePage() { export default function page() {
const [api] = useAtom(apiAtom); const [api] = useAtom(apiAtom);
const [user] = useAtom(userAtom); const [user] = useAtom(userAtom);
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();

View File

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

View File

@@ -40,7 +40,6 @@ import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
import { useScaledTVTypography } from "@/constants/TVTypography"; import { useScaledTVTypography } from "@/constants/TVTypography";
import useRouter from "@/hooks/useAppRouter"; import useRouter from "@/hooks/useAppRouter";
import { useOrientation } from "@/hooks/useOrientation"; import { useOrientation } from "@/hooks/useOrientation";
import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
import { useTVItemActionModal } from "@/hooks/useTVItemActionModal"; import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
import { useTVOptionModal } from "@/hooks/useTVOptionModal"; import { useTVOptionModal } from "@/hooks/useTVOptionModal";
import * as ScreenOrientation from "@/packages/expo-screen-orientation"; import * as ScreenOrientation from "@/packages/expo-screen-orientation";
@@ -105,10 +104,6 @@ const Page = () => {
const { orientation } = useOrientation(); const { orientation } = useOrientation();
// Fallback refresh for newly added content when returning to the library
// (primary path is the LibraryChanged WebSocket event).
useRefreshLibraryOnFocus();
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { showOptions } = useTVOptionModal(); const { showOptions } = useTVOptionModal();

View File

@@ -1,13 +1,13 @@
import { Stack, useLocalSearchParams, withLayoutContext } from "expo-router";
import { import {
createMaterialTopTabNavigator, createMaterialTopTabNavigator,
MaterialTopTabNavigationEventMap, MaterialTopTabNavigationEventMap,
MaterialTopTabNavigationOptions, MaterialTopTabNavigationOptions,
} from "expo-router/js-top-tabs"; } from "@react-navigation/material-top-tabs";
import type { import type {
ParamListBase, ParamListBase,
TabNavigationState, TabNavigationState,
} from "expo-router/react-navigation"; } from "@react-navigation/native";
import { Stack, useLocalSearchParams, withLayoutContext } from "expo-router";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const { Navigator } = createMaterialTopTabNavigator(); const { Navigator } = createMaterialTopTabNavigator();

View File

@@ -1,8 +1,8 @@
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api"; import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
import { useRoute } from "@react-navigation/native";
import { FlashList } from "@shopify/flash-list"; import { FlashList } from "@shopify/flash-list";
import { useInfiniteQuery } from "@tanstack/react-query"; import { useInfiniteQuery } from "@tanstack/react-query";
import { useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
import { useRoute } from "expo-router/react-navigation";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View File

@@ -1,8 +1,8 @@
import { getArtistsApi } from "@jellyfin/sdk/lib/utils/api"; import { getArtistsApi } from "@jellyfin/sdk/lib/utils/api";
import { useRoute } from "@react-navigation/native";
import { FlashList } from "@shopify/flash-list"; import { FlashList } from "@shopify/flash-list";
import { useInfiniteQuery } from "@tanstack/react-query"; import { useInfiniteQuery } from "@tanstack/react-query";
import { useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
import { useRoute } from "expo-router/react-navigation";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View File

@@ -1,9 +1,9 @@
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api"; import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
import { useNavigation, useRoute } from "@react-navigation/native";
import { FlashList } from "@shopify/flash-list"; import { FlashList } from "@shopify/flash-list";
import { useInfiniteQuery } from "@tanstack/react-query"; import { useInfiniteQuery } from "@tanstack/react-query";
import { useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
import { useNavigation, useRoute } from "expo-router/react-navigation";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useCallback, useLayoutEffect, useMemo, useState } from "react"; import { useCallback, useLayoutEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View File

@@ -1,9 +1,9 @@
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models"; import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { getItemsApi } from "@jellyfin/sdk/lib/utils/api"; import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
import { useRoute } from "@react-navigation/native";
import { FlashList } from "@shopify/flash-list"; import { FlashList } from "@shopify/flash-list";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
import { useRoute } from "expo-router/react-navigation";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";

View File

@@ -66,7 +66,7 @@ const exampleSearches = [
"The Mandalorian", "The Mandalorian",
]; ];
export default function SearchPage() { export default function search() {
const params = useLocalSearchParams(); const params = useLocalSearchParams();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const router = useRouter(); const router = useRouter();
@@ -221,7 +221,7 @@ export default function SearchPage() {
const ids = response1.data.ids; const ids = response1.data.ids;
if (!ids?.length) { if (!ids || !ids.length) {
return []; return [];
} }

View File

@@ -3,11 +3,11 @@ import {
type NativeBottomTabNavigationEventMap, type NativeBottomTabNavigationEventMap,
type NativeBottomTabNavigationOptions, type NativeBottomTabNavigationOptions,
} from "@bottom-tabs/react-navigation"; } from "@bottom-tabs/react-navigation";
import { withLayoutContext } from "expo-router";
import type { import type {
ParamListBase, ParamListBase,
TabNavigationState, TabNavigationState,
} from "expo-router/react-navigation"; } from "@react-navigation/native";
import { withLayoutContext } from "expo-router";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Platform, View } from "react-native"; import { Platform, View } from "react-native";
import { SystemBars } from "react-native-edge-to-edge"; import { SystemBars } from "react-native-edge-to-edge";

View File

@@ -63,7 +63,7 @@ import { writeToLog } from "@/utils/log";
import { msToTicks, ticksToSeconds } from "@/utils/time"; import { msToTicks, ticksToSeconds } from "@/utils/time";
import { generateDeviceProfile } from "../../../utils/profiles/native"; import { generateDeviceProfile } from "../../../utils/profiles/native";
export default function DirectPlayerPage() { export default function page() {
const videoRef = useRef<MpvPlayerViewRef>(null); const videoRef = useRef<MpvPlayerViewRef>(null);
const user = useAtomValue(userAtom); const user = useAtomValue(userAtom);
const api = useAtomValue(apiAtom); const api = useAtomValue(apiAtom);
@@ -185,11 +185,11 @@ export default function DirectPlayerPage() {
return undefined; return undefined;
}, [audioIndexFromUrl, offline, downloadedItem?.userData?.audioStreamIndex]); }, [audioIndexFromUrl, offline, downloadedItem?.userData?.audioStreamIndex]);
// Initialize TV audio/subtitle indices from URL params. // Initialize TV audio/subtitle indices from URL params
// No undefined guard: when a new episode's URL omits audioIndex, reset to
// undefined (media default) rather than leaking the previous episode's track.
useEffect(() => { useEffect(() => {
setCurrentAudioIndex(audioIndex); if (audioIndex !== undefined) {
setCurrentAudioIndex(audioIndex);
}
}, [audioIndex]); }, [audioIndex]);
useEffect(() => { useEffect(() => {
@@ -317,7 +317,7 @@ export default function DirectPlayerPage() {
} }
let result: Stream | null = null; let result: Stream | null = null;
if (offline && downloadedItem?.mediaSource) { if (offline && downloadedItem && downloadedItem.mediaSource) {
const url = downloadedItem.videoFilePath; const url = downloadedItem.videoFilePath;
if (item) { if (item) {
result = { result = {
@@ -470,11 +470,8 @@ export default function DirectPlayerPage() {
return { return {
ItemId: item.Id, ItemId: item.Id,
// Report the live selection so server-side session/resume state reflects AudioStreamIndex: audioIndex ? audioIndex : undefined,
// mid-playback track changes. Note: index 0 is valid (don't treat as SubtitleStreamIndex: subtitleIndex ? subtitleIndex : undefined,
// falsy); -1 means "off" and is reported as-is.
AudioStreamIndex: currentAudioIndex,
SubtitleStreamIndex: currentSubtitleIndex,
MediaSourceId: mediaSourceId, MediaSourceId: mediaSourceId,
PositionTicks: msToTicks(progress.get()), PositionTicks: msToTicks(progress.get()),
IsPaused: !isPlaying, IsPaused: !isPlaying,
@@ -488,8 +485,8 @@ export default function DirectPlayerPage() {
}, [ }, [
stream, stream,
item?.Id, item?.Id,
currentAudioIndex, audioIndex,
currentSubtitleIndex, subtitleIndex,
mediaSourceId, mediaSourceId,
progress, progress,
isPlaying, isPlaying,
@@ -556,8 +553,8 @@ export default function DirectPlayerPage() {
}, },
[ [
item?.Id, item?.Id,
currentAudioIndex, audioIndex,
currentSubtitleIndex, subtitleIndex,
mediaSourceId, mediaSourceId,
isPlaying, isPlaying,
stream, stream,
@@ -825,10 +822,12 @@ export default function DirectPlayerPage() {
], ],
); );
/** PiP handler for MPV */
const _onPictureInPictureChange = useCallback( const _onPictureInPictureChange = useCallback(
(e: { nativeEvent: { isActive: boolean } }) => { (e: { nativeEvent: { isActive: boolean } }) => {
const { isActive } = e.nativeEvent; const { isActive } = e.nativeEvent;
setIsPipMode(isActive); setIsPipMode(isActive);
// Hide controls when entering PiP
if (isActive) { if (isActive) {
_setShowControls(false); _setShowControls(false);
} }
@@ -846,9 +845,6 @@ export default function DirectPlayerPage() {
// Memoize video ref functions to prevent unnecessary re-renders // Memoize video ref functions to prevent unnecessary re-renders
const startPictureInPicture = useCallback(async () => { const startPictureInPicture = useCallback(async () => {
// Hide controls BEFORE entering PiP so the window captures a clean view
_setShowControls(false);
setIsPipMode(true);
return videoRef.current?.startPictureInPicture?.(); return videoRef.current?.startPictureInPicture?.();
}, []); }, []);
@@ -1013,9 +1009,8 @@ export default function DirectPlayerPage() {
subtitleIndex: defaultSubtitleIndex, subtitleIndex: defaultSubtitleIndex,
} = getDefaultPlaySettings(previousItem, settings, { } = getDefaultPlaySettings(previousItem, settings, {
indexes: { indexes: {
// Use the live selection, not the stale URL params (see goToNextItem). subtitleIndex: subtitleIndex,
subtitleIndex: currentSubtitleIndex, audioIndex: audioIndex,
audioIndex: currentAudioIndex,
}, },
source: stream?.mediaSource ?? undefined, source: stream?.mediaSource ?? undefined,
}); });
@@ -1034,8 +1029,8 @@ export default function DirectPlayerPage() {
}, [ }, [
previousItem, previousItem,
settings, settings,
currentSubtitleIndex, subtitleIndex,
currentAudioIndex, audioIndex,
stream?.mediaSource, stream?.mediaSource,
bitrateValue, bitrateValue,
router, router,
@@ -1080,10 +1075,8 @@ export default function DirectPlayerPage() {
subtitleIndex: defaultSubtitleIndex, subtitleIndex: defaultSubtitleIndex,
} = getDefaultPlaySettings(nextItem, settings, { } = getDefaultPlaySettings(nextItem, settings, {
indexes: { indexes: {
// Use the live selection (updated when the user changes tracks subtitleIndex: subtitleIndex,
// mid-playback), not the stale URL params the episode started with. audioIndex: audioIndex,
subtitleIndex: currentSubtitleIndex,
audioIndex: currentAudioIndex,
}, },
source: stream?.mediaSource ?? undefined, source: stream?.mediaSource ?? undefined,
}); });
@@ -1102,8 +1095,8 @@ export default function DirectPlayerPage() {
}, [ }, [
nextItem, nextItem,
settings, settings,
currentSubtitleIndex, subtitleIndex,
currentAudioIndex, audioIndex,
stream?.mediaSource, stream?.mediaSource,
bitrateValue, bitrateValue,
router, router,
@@ -1254,7 +1247,6 @@ export default function DirectPlayerPage() {
nowPlayingMetadata={nowPlayingMetadata} nowPlayingMetadata={nowPlayingMetadata}
onProgress={onProgress} onProgress={onProgress}
onPlaybackStateChange={onPlaybackStateChanged} onPlaybackStateChange={onPlaybackStateChanged}
onPictureInPictureChange={_onPictureInPictureChange}
onLoad={() => setIsVideoLoaded(true)} onLoad={() => setIsVideoLoaded(true)}
onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => { onError={(e: { nativeEvent: MpvOnErrorEventPayload }) => {
console.error("Video Error:", e.nativeEvent); console.error("Video Error:", e.nativeEvent);

View File

@@ -1248,7 +1248,7 @@ const styles = StyleSheet.create({
color: "#fff", color: "#fff",
}, },
downloadingOverlay: { downloadingOverlay: {
...StyleSheet.absoluteFill, ...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0,0,0,0.5)", backgroundColor: "rgba(0,0,0,0.5)",
borderRadius: scaleSize(14), borderRadius: scaleSize(14),
justifyContent: "center", justifyContent: "center",

View File

@@ -2,12 +2,12 @@ import "@/augmentations";
import { ActionSheetProvider } from "@expo/react-native-action-sheet"; import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet"; import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import NetInfo from "@react-native-community/netinfo"; import NetInfo from "@react-native-community/netinfo";
import { DarkTheme, ThemeProvider } from "@react-navigation/native";
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister"; import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { onlineManager, QueryClient } from "@tanstack/react-query"; import { onlineManager, QueryClient } from "@tanstack/react-query";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client"; import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
import * as BackgroundTask from "expo-background-task"; import * as BackgroundTask from "expo-background-task";
import * as Device from "expo-device"; import * as Device from "expo-device";
import { DarkTheme, ThemeProvider } from "expo-router/react-navigation";
import { Platform } from "react-native"; import { Platform } from "react-native";
import { GlobalModal } from "@/components/GlobalModal"; import { GlobalModal } from "@/components/GlobalModal";
import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler"; import { enableTVMenuKeyInterception } from "@/hooks/useTVBackHandler";
@@ -395,9 +395,8 @@ function Layout() {
maxAge: 1000 * 60 * 60 * 24, // 24 hours max cache age maxAge: 1000 * 60 * 60 * 24, // 24 hours max cache age
dehydrateOptions: { dehydrateOptions: {
shouldDehydrateQuery: (query) => { shouldDehydrateQuery: (query) => {
return ( // Only persist successful queries
query.state.status === "success" && query.options.gcTime !== 0 return query.state.status === "success";
);
}, },
}, },
}} }}

View File

@@ -1,3 +1,4 @@
export * from "./api"; export * from "./api";
export * from "./mmkv"; export * from "./mmkv";
export * from "./number"; export * from "./number";
export * from "./string";

View File

@@ -3,6 +3,7 @@ declare global {
bytesToReadable(decimals?: number): string; bytesToReadable(decimals?: number): string;
secondsToMilliseconds(): number; secondsToMilliseconds(): number;
minutesToMilliseconds(): number; minutesToMilliseconds(): number;
hoursToMilliseconds(): number;
} }
} }
@@ -27,4 +28,8 @@ Number.prototype.minutesToMilliseconds = function () {
return this.valueOf() * (60).secondsToMilliseconds(); return this.valueOf() * (60).secondsToMilliseconds();
}; };
Number.prototype.hoursToMilliseconds = function () {
return this.valueOf() * (60).minutesToMilliseconds();
};
export {}; export {};

14
augmentations/string.ts Normal file
View File

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

View File

@@ -1,5 +1,5 @@
{ {
"$schema": "https://biomejs.dev/schemas/2.4.16/schema.json", "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
"files": { "files": {
"includes": [ "includes": [
"**/*", "**/*",

View File

@@ -0,0 +1,29 @@
diff --git a/lib/generators/modules/GenerateModuleObjCpp/index.js b/lib/generators/modules/GenerateModuleObjCpp/index.js
index 927711514d2deaa3c795fb98e676e0a1f596eddc..0364d66204a76fccd3e06a0dc72bf801aa04a50d 100644
--- a/lib/generators/modules/GenerateModuleObjCpp/index.js
+++ b/lib/generators/modules/GenerateModuleObjCpp/index.js
@@ -67,9 +67,12 @@ const HeaderFileTemplate = ({
* must have a single output. More files => more genrule()s => slower builds.
*/
-#ifndef __cplusplus
-#error This file must be compiled as Obj-C++. If you are importing it, you must change your file extension to .mm.
-#endif
+// Patched: guard the Obj-C++ body with __cplusplus instead of hard-#error-ing.
+// With use_frameworks! :static + New Arch, plain Obj-C .m TUs can trigger a
+// Clang module build (via Swift-interop -Swift.h umbrellas) that pulls this
+// header in Obj-C mode. Skipping the body (instead of erroring) lets the module
+// build; .mm consumers still get the full Obj-C++ contents unchanged.
+#if defined(__cplusplus)
// Avoid multiple includes of ${headerFileNameWithNoExt} symbols
#ifndef ${headerFileNameWithNoExt}_H
@@ -93,7 +96,7 @@ const HeaderFileTemplate = ({
structInlineMethods +
(assumeNonnull ? '\nNS_ASSUME_NONNULL_END\n' : '\n') +
`#endif // ${headerFileNameWithNoExt}_H` +
- '\n'
+ '\n#endif // defined(__cplusplus)\n'
);
};
const SourceFileTemplate = ({headerFileName, moduleImplementations}) => `/**

View File

@@ -1,7 +1,10 @@
diff --git a/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift b/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift diff --git a/node_modules/react-native-bottom-tabs/.bun-tag-b32ab1c60a5dfcf7 b/.bun-tag-b32ab1c60a5dfcf7
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ios/BottomAccessoryProvider.swift b/ios/BottomAccessoryProvider.swift
index 539efee7156599e1fc795e11bf411b7dfaf12ec7..b2af39a2e6b014e9b1ae0a51b21115c19280df69 100644 index 539efee7156599e1fc795e11bf411b7dfaf12ec7..b2af39a2e6b014e9b1ae0a51b21115c19280df69 100644
--- a/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift --- a/ios/BottomAccessoryProvider.swift
+++ b/node_modules/react-native-bottom-tabs/ios/BottomAccessoryProvider.swift +++ b/ios/BottomAccessoryProvider.swift
@@ -8,7 +8,7 @@ import SwiftUI @@ -8,7 +8,7 @@ import SwiftUI
self.delegate = delegate self.delegate = delegate
} }
@@ -11,10 +14,10 @@ index 539efee7156599e1fc795e11bf411b7dfaf12ec7..b2af39a2e6b014e9b1ae0a51b21115c1
@available(iOS 26.0, *) @available(iOS 26.0, *)
public func emitPlacementChanged(_ placement: TabViewBottomAccessoryPlacement?) { public func emitPlacementChanged(_ placement: TabViewBottomAccessoryPlacement?) {
var placementValue = "none" var placementValue = "none"
diff --git a/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift b/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift diff --git a/ios/TabView/NewTabView.swift b/ios/TabView/NewTabView.swift
index 22c52cdf25ad0f7398d89197cb431ca8dc8e0f99..81411376e68803de8bd83515d42565cfa95daf2b 100644 index 22c52cdf25ad0f7398d89197cb431ca8dc8e0f99..81411376e68803de8bd83515d42565cfa95daf2b 100644
--- a/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift --- a/ios/TabView/NewTabView.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabView/NewTabView.swift +++ b/ios/TabView/NewTabView.swift
@@ -78,11 +78,11 @@ struct ConditionalBottomAccessoryModifier: ViewModifier { @@ -78,11 +78,11 @@ struct ConditionalBottomAccessoryModifier: ViewModifier {
} }
@@ -53,10 +56,10 @@ index 22c52cdf25ad0f7398d89197cb431ca8dc8e0f99..81411376e68803de8bd83515d42565cf
} }
#endif #endif
+ +
diff --git a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift diff --git a/ios/TabViewImpl.swift b/ios/TabViewImpl.swift
index 72938be90540ea3a483d7db9a80fb74c04d31272..277278ffdd9268a96cb09869eb1d0c0d5e6ad300 100644 index 72938be90540ea3a483d7db9a80fb74c04d31272..277278ffdd9268a96cb09869eb1d0c0d5e6ad300 100644
--- a/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift --- a/ios/TabViewImpl.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabViewImpl.swift +++ b/ios/TabViewImpl.swift
@@ -281,7 +281,7 @@ extension View { @@ -281,7 +281,7 @@ extension View {
@ViewBuilder @ViewBuilder
@@ -66,10 +69,10 @@ index 72938be90540ea3a483d7db9a80fb74c04d31272..277278ffdd9268a96cb09869eb1d0c0d
if #available(iOS 26.0, macOS 26.0, *) { if #available(iOS 26.0, macOS 26.0, *) {
if let behavior { if let behavior {
self.tabBarMinimizeBehavior(behavior.convert()) self.tabBarMinimizeBehavior(behavior.convert())
diff --git a/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift b/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift diff --git a/ios/TabViewProps.swift b/ios/TabViewProps.swift
index 9cfb29a983b34d3f84fc7a678d19ef4ff30e0325..6a5854483e66200b71722bbac12e100742222bd3 100644 index 9cfb29a983b34d3f84fc7a678d19ef4ff30e0325..6a5854483e66200b71722bbac12e100742222bd3 100644
--- a/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift --- a/ios/TabViewProps.swift
+++ b/node_modules/react-native-bottom-tabs/ios/TabViewProps.swift +++ b/ios/TabViewProps.swift
@@ -6,7 +6,7 @@ internal enum MinimizeBehavior: String { @@ -6,7 +6,7 @@ internal enum MinimizeBehavior: String {
case onScrollUp case onScrollUp
case onScrollDown case onScrollDown

View File

@@ -0,0 +1,191 @@
diff --git a/node_modules/react-native-screens/.bun-tag-10a3b0add1bd4de6 b/.bun-tag-10a3b0add1bd4de6
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/node_modules/react-native-screens/.bun-tag-6a8504b742d5cfff b/.bun-tag-6a8504b742d5cfff
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/node_modules/react-native-screens/.bun-tag-d28396854bc27a3d b/.bun-tag-d28396854bc27a3d
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ios/RNSScreenStack.mm b/ios/RNSScreenStack.mm
index 51f021831aed26a4eed3c85014020423b7b3108b..2f621547932806b94ab1e75ecc73772facd209d0 100644
--- a/ios/RNSScreenStack.mm
+++ b/ios/RNSScreenStack.mm
@@ -34,6 +34,11 @@
#import "integrations/RNSDismissibleModalProtocol.h"
#import "utils/UINavigationBar+RNSUtility.h"
+#if TARGET_OS_TV
+#import <React/RCTTVNavigationEventNotification.h>
+#import <React/RCTTVRemoteHandler.h>
+#endif // TARGET_OS_TV
+
#ifdef RNS_GAMMA_ENABLED
#import "RNSFrameCorrectionProvider.h"
#import "Swift-Bridging.h"
@@ -43,6 +48,12 @@
namespace react = facebook::react;
#endif // RCT_NEW_ARCH_ENABLED
+#if TARGET_OS_TV
+@interface RNSNavigationController ()
+@property (nonatomic, strong) UITapGestureRecognizer *rnscreens_menuGestureRecognizer;
+@end
+#endif // TARGET_OS_TV
+
@interface RNSScreenStackView () <
UINavigationControllerDelegate,
UIAdaptivePresentationControllerDelegate,
@@ -62,6 +73,57 @@ namespace react = facebook::react;
@implementation RNSNavigationController
+#if TARGET_OS_TV
+- (void)viewDidLoad
+{
+ [super viewDidLoad];
+
+ self.rnscreens_menuGestureRecognizer =
+ [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(rnscreens_menuPressed:)];
+ self.rnscreens_menuGestureRecognizer.allowedPressTypes = @[ @(UIPressTypeMenu) ];
+
+ [[NSNotificationCenter defaultCenter] addObserver:self
+ selector:@selector(rnscreens_enableMenuGesture)
+ name:RCTTVEnableMenuKeyNotification
+ object:nil];
+ [[NSNotificationCenter defaultCenter] addObserver:self
+ selector:@selector(rnscreens_disableMenuGesture)
+ name:RCTTVDisableMenuKeyNotification
+ object:nil];
+
+ if ([RCTTVRemoteHandler useMenuKey]) {
+ [self rnscreens_enableMenuGesture];
+ }
+}
+
+- (void)dealloc
+{
+ [[NSNotificationCenter defaultCenter] removeObserver:self];
+}
+
+- (void)rnscreens_enableMenuGesture
+{
+ if (![self.view.gestureRecognizers containsObject:self.rnscreens_menuGestureRecognizer]) {
+ [self.view addGestureRecognizer:self.rnscreens_menuGestureRecognizer];
+ }
+}
+
+- (void)rnscreens_disableMenuGesture
+{
+ if ([self.view.gestureRecognizers containsObject:self.rnscreens_menuGestureRecognizer]) {
+ [self.view removeGestureRecognizer:self.rnscreens_menuGestureRecognizer];
+ }
+}
+
+- (void)rnscreens_menuPressed:(UIGestureRecognizer *)recognizer
+{
+ [[NSNotificationCenter defaultCenter] postNavigationPressEventWithType:RCTTVRemoteEventMenu
+ keyAction:recognizer.eventKeyAction
+ tag:nil
+ target:nil];
+}
+#endif // TARGET_OS_TV
+
#if !TARGET_OS_TV
- (UIViewController *)childViewControllerForStatusBarStyle
{
diff --git a/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift b/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift
index 95c76ccf3528d3a8828e90b272a1d79b0828a139..f29d4df21440d23523ae7a2f6fe71c32154e3928 100644
--- a/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift
+++ b/ios/gamma/split-view/RNSSplitViewAppearanceApplicator.swift
@@ -79,11 +79,13 @@ class RNSSplitViewAppearanceApplicator {
maxWidth: splitView.maximumSupplementaryColumnWidth)
#if compiler(>=6.2)
+ #if !os(tvOS)
if #available(iOS 26.0, *) {
validateColumnConstraints(
minWidth: splitView.minimumInspectorColumnWidth,
maxWidth: splitView.maximumInspectorColumnWidth)
}
+ #endif
#endif
// Step 2.2 - applying updates to columns
@@ -126,6 +128,7 @@ class RNSSplitViewAppearanceApplicator {
}
#if compiler(>=6.2)
+ #if !os(tvOS)
if #available(iOS 26.0, *) {
if splitView.minimumSecondaryColumnWidth >= 0 {
splitViewController.minimumSecondaryColumnWidth = splitView.minimumSecondaryColumnWidth
@@ -159,6 +162,7 @@ class RNSSplitViewAppearanceApplicator {
splitView.preferredInspectorColumnWidthOrFraction
}
}
+ #endif
#endif
// Step 2.3 - manipulating with inspector column
diff --git a/ios/gamma/split-view/RNSSplitViewHostController.swift b/ios/gamma/split-view/RNSSplitViewHostController.swift
index 0421e3ea92fc7bcdf57417b5ee3a62348fce34f5..cd878ab638d3c78a661e2df4c4c1b21011dfcf48 100644
--- a/ios/gamma/split-view/RNSSplitViewHostController.swift
+++ b/ios/gamma/split-view/RNSSplitViewHostController.swift
@@ -386,7 +386,7 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
/// @param inspectors An array of inspector-type RNSSplitViewScreenComponentView subviews.
///
func maybeSetupInspector(_ inspectors: [RNSSplitViewScreenComponentView]) {
-
+ #if !os(tvOS)
if #available(iOS 26.0, *) {
let inspector = inspectors.first
if inspector != nil {
@@ -395,6 +395,7 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
setViewController(inspectorViewController, for: .inspector)
}
}
+ #endif
}
///
@@ -404,9 +405,11 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
/// Uses the UISplitViewController's new API introduced in iOS 26 to show the inspector column.
///
func maybeShowInspector() {
+ #if !os(tvOS)
if #available(iOS 26.0, *) {
show(.inspector)
}
+ #endif
}
///
@@ -416,9 +419,11 @@ extension RNSSplitViewHostController: RNSSplitViewNavigationControllerViewFrameO
/// Uses the UISplitViewController's new API introduced in iOS 26 to hide the inspector column.
///
func maybeHideInspector() {
+ #if !os(tvOS)
if #available(iOS 26.0, *) {
hide(.inspector)
}
+ #endif
}
}
#endif
@@ -444,6 +449,7 @@ extension RNSSplitViewHostController: UISplitViewControllerDelegate {
public func splitViewController(
_ svc: UISplitViewController, didHide column: UISplitViewController.Column
) {
+ #if !os(tvOS)
if #available(iOS 26.0, *) {
// TODO: we may consider removing this logic, because it could be handled by onViewDidDisappear on the column level
// On the other hand, maybe dedicated event related to the inspector would be a better approach.
@@ -461,6 +467,7 @@ extension RNSSplitViewHostController: UISplitViewControllerDelegate {
}
}
}
+ #endif
}
#endif

View File

@@ -1,7 +1,10 @@
diff --git a/node_modules/react-native-udp/react-native-udp.podspec b/node_modules/react-native-udp/react-native-udp.podspec diff --git a/node_modules/react-native-udp/.bun-tag-ea7df8754aa4db91 b/.bun-tag-ea7df8754aa4db91
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/react-native-udp.podspec b/react-native-udp.podspec
index 7450cc7d0862aadfb47d796929c801a3dc423a57..fa3e42c0152ef2d87536b8c2e484f64d525e35ec 100644 index 7450cc7d0862aadfb47d796929c801a3dc423a57..fa3e42c0152ef2d87536b8c2e484f64d525e35ec 100644
--- a/node_modules/react-native-udp/react-native-udp.podspec --- a/react-native-udp.podspec
+++ b/node_modules/react-native-udp/react-native-udp.podspec +++ b/react-native-udp.podspec
@@ -9,7 +9,8 @@ Pod::Spec.new do |s| @@ -9,7 +9,8 @@ Pod::Spec.new do |s|
s.homepage = package_json["homepage"] s.homepage = package_json["homepage"]
s.license = package_json["license"] s.license = package_json["license"]

684
bun.lock

File diff suppressed because it is too large Load Diff

View File

View File

@@ -9,7 +9,6 @@ import type {
BaseItemDto, BaseItemDto,
MediaSourceInfo, MediaSourceInfo,
} from "@jellyfin/sdk/lib/generated-client/models"; } from "@jellyfin/sdk/lib/generated-client/models";
import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
import { type Href } from "expo-router"; import { type Href } from "expo-router";
import { t } from "i18next"; import { t } from "i18next";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
@@ -200,30 +199,9 @@ export const DownloadItems: React.FC<DownloadProps> = ({
); );
} }
const downloadDetailsPromises = items.map(async (item) => { const downloadDetailsPromises = items.map(async (item) => {
// Ensure the snapshot we store offline carries the Chapters array.
// Page-level fetches sometimes use a fields filter that omits it; the
// offline player would then render no chapter ticks / list.
let itemForDownload = item;
if (!itemForDownload.Chapters && itemForDownload.Id) {
try {
const enriched = await getUserLibraryApi(api).getItem({
itemId: itemForDownload.Id,
userId: user.Id!,
});
if (enriched.data) {
itemForDownload = enriched.data;
}
} catch (e) {
console.warn(
"[DownloadItem] failed to refresh item for Chapters, falling back to original",
e,
);
}
}
const { mediaSource, audioIndex, subtitleIndex } = const { mediaSource, audioIndex, subtitleIndex } =
itemsNotDownloaded.length > 1 itemsNotDownloaded.length > 1
? getDefaultPlaySettings(itemForDownload, settings!) ? getDefaultPlaySettings(item, settings!)
: { : {
mediaSource: selectedOptions?.mediaSource, mediaSource: selectedOptions?.mediaSource,
audioIndex: selectedOptions?.audioIndex, audioIndex: selectedOptions?.audioIndex,
@@ -232,7 +210,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
const downloadDetails = await getDownloadUrl({ const downloadDetails = await getDownloadUrl({
api, api,
item: itemForDownload, item,
userId: user.Id!, userId: user.Id!,
mediaSource: mediaSource!, mediaSource: mediaSource!,
audioStreamIndex: audioIndex ?? -1, audioStreamIndex: audioIndex ?? -1,
@@ -244,7 +222,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
return { return {
url: downloadDetails?.url, url: downloadDetails?.url,
item: itemForDownload, item,
mediaSource: downloadDetails?.mediaSource, mediaSource: downloadDetails?.mediaSource,
}; };
}); });

View File

@@ -0,0 +1,203 @@
/**
* Example Usage of Global Modal
*
* This file demonstrates how to use the global modal system from anywhere in your app.
* You can delete this file after understanding how it works.
*/
import { Ionicons } from "@expo/vector-icons";
import { TouchableOpacity, View } from "react-native";
import { Text } from "@/components/common/Text";
import { useGlobalModal } from "@/providers/GlobalModalProvider";
/**
* Example 1: Simple Content Modal
*/
export const SimpleModalExample = () => {
const { showModal } = useGlobalModal();
const handleOpenModal = () => {
showModal(
<View className='p-6'>
<Text className='text-2xl font-bold mb-4 text-white'>Simple Modal</Text>
<Text className='text-white mb-4'>
This is a simple modal with just some text content.
</Text>
<Text className='text-neutral-400'>
Swipe down or tap outside to close.
</Text>
</View>,
);
};
return (
<TouchableOpacity
onPress={handleOpenModal}
className='bg-purple-600 px-4 py-2 rounded-lg'
>
<Text className='text-white font-semibold'>Open Simple Modal</Text>
</TouchableOpacity>
);
};
/**
* Example 2: Modal with Custom Snap Points
*/
export const CustomSnapPointsExample = () => {
const { showModal } = useGlobalModal();
const handleOpenModal = () => {
showModal(
<View className='p-6' style={{ minHeight: 400 }}>
<Text className='text-2xl font-bold mb-4 text-white'>
Custom Snap Points
</Text>
<Text className='text-white mb-4'>
This modal has custom snap points (25%, 50%, 90%).
</Text>
<View className='bg-neutral-800 p-4 rounded-lg'>
<Text className='text-white'>
Try dragging the modal to different heights!
</Text>
</View>
</View>,
{
snapPoints: ["25%", "50%", "90%"],
enableDynamicSizing: false,
},
);
};
return (
<TouchableOpacity
onPress={handleOpenModal}
className='bg-blue-600 px-4 py-2 rounded-lg'
>
<Text className='text-white font-semibold'>Custom Snap Points</Text>
</TouchableOpacity>
);
};
/**
* Example 3: Complex Component in Modal
*/
const SettingsModalContent = () => {
const { hideModal } = useGlobalModal();
const settings = [
{
id: 1,
title: "Notifications",
icon: "notifications-outline" as const,
enabled: true,
},
{ id: 2, title: "Dark Mode", icon: "moon-outline" as const, enabled: true },
{
id: 3,
title: "Auto-play",
icon: "play-outline" as const,
enabled: false,
},
];
return (
<View className='p-6'>
<Text className='text-2xl font-bold mb-6 text-white'>Settings</Text>
{settings.map((setting, index) => (
<View
key={setting.id}
className={`flex-row items-center justify-between py-4 ${
index !== settings.length - 1 ? "border-b border-neutral-700" : ""
}`}
>
<View className='flex-row items-center gap-3'>
<Ionicons name={setting.icon} size={24} color='white' />
<Text className='text-white text-lg'>{setting.title}</Text>
</View>
<View
className={`w-12 h-7 rounded-full ${
setting.enabled ? "bg-purple-600" : "bg-neutral-600"
}`}
>
<View
className={`w-5 h-5 rounded-full bg-white shadow-md transform ${
setting.enabled ? "translate-x-6" : "translate-x-1"
}`}
style={{ marginTop: 4 }}
/>
</View>
</View>
))}
<TouchableOpacity
onPress={hideModal}
className='bg-purple-600 px-4 py-3 rounded-lg mt-6'
>
<Text className='text-white font-semibold text-center'>Close</Text>
</TouchableOpacity>
</View>
);
};
export const ComplexModalExample = () => {
const { showModal } = useGlobalModal();
const handleOpenModal = () => {
showModal(<SettingsModalContent />);
};
return (
<TouchableOpacity
onPress={handleOpenModal}
className='bg-green-600 px-4 py-2 rounded-lg'
>
<Text className='text-white font-semibold'>Complex Component</Text>
</TouchableOpacity>
);
};
/**
* Example 4: Modal Triggered from Function (e.g., API response)
*/
export const useShowSuccessModal = () => {
const { showModal } = useGlobalModal();
return (message: string) => {
showModal(
<View className='p-6 items-center'>
<View className='bg-green-500 rounded-full p-4 mb-4'>
<Ionicons name='checkmark' size={48} color='white' />
</View>
<Text className='text-2xl font-bold mb-2 text-white'>Success!</Text>
<Text className='text-white text-center'>{message}</Text>
</View>,
);
};
};
/**
* Main Demo Component
*/
export const GlobalModalDemo = () => {
const showSuccess = useShowSuccessModal();
return (
<View className='p-6 gap-4'>
<Text className='text-2xl font-bold mb-4 text-white'>
Global Modal Examples
</Text>
<SimpleModalExample />
<CustomSnapPointsExample />
<ComplexModalExample />
<TouchableOpacity
onPress={() => showSuccess("Operation completed successfully!")}
className='bg-orange-600 px-4 py-2 rounded-lg'
>
<Text className='text-white font-semibold'>Show Success Modal</Text>
</TouchableOpacity>
</View>
);
};

View File

@@ -1,3 +1,11 @@
import {
Button,
Host,
Menu,
Picker,
Text as SwiftUIText,
} from "@expo/ui/swift-ui";
import { disabled, tag } from "@expo/ui/swift-ui/modifiers";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { BottomSheetScrollView } from "@gorhom/bottom-sheet"; import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
@@ -12,17 +20,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { useGlobalModal } from "@/providers/GlobalModalProvider"; import { useGlobalModal } from "@/providers/GlobalModalProvider";
// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
// A static top-level import evaluates requireNativeModule('ExpoUI') at module
// load and crashes the entire route tree on tvOS (expo-router requires every
// route file). Load it lazily and only off-TV; TV never renders these.
const { Button, Host, Menu } = Platform.isTV
? ({} as typeof import("@expo/ui/swift-ui"))
: require("@expo/ui/swift-ui");
const { disabled } = Platform.isTV
? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
: require("@expo/ui/swift-ui/modifiers");
// Option types // Option types
export type RadioOption<T = any> = { export type RadioOption<T = any> = {
type: "radio"; type: "radio";
@@ -264,29 +261,25 @@ const PlatformDropdownComponent = ({
} }
}, [isVisible, controlledOpen, controlledOnOpenChange]); }, [isVisible, controlledOpen, controlledOnOpenChange]);
if (Platform.OS === "ios" && !Platform.isTV) { if (Platform.OS === "ios") {
// Pin the wrapper to the measured trigger size. @expo/ui's <Host> (SDK 55)
// fills its parent and reports its own size via setStyleSize, so it can't
// size itself to content. If the wrapper has no size, the Host's `flex: 1`
// height depends on the parent while the parent depends on the Host — a
// circular dependency that collapses to 0 for any selector nested more than
// one level deep (so only the first, shallowest dropdown stays visible).
// Giving the wrapper the measured size breaks the cycle; the Host then
// fills a concrete box.
return ( return (
<View style={triggerSize ?? { opacity: 0 }}> <View>
{/* Hidden measurer: lays the trigger out off-flow to capture its {/* Hidden measurer: lays the trigger out normally to capture its
intrinsic size. Absolutely positioned WITHOUT right/bottom so it intrinsic size, which we then pin onto the Host below. */}
sizes to the trigger's content rather than to its parent. */} <View style={StyleSheet.absoluteFill} pointerEvents='none' aria-hidden>
<View <View
style={{ position: "absolute", top: 0, left: 0, opacity: 0 }} style={{ alignSelf: "flex-start" }}
pointerEvents='none' onLayout={handleMeasureTrigger}
aria-hidden >
onLayout={handleMeasureTrigger} {trigger}
> </View>
{trigger}
</View> </View>
<Host style={[StyleSheet.absoluteFill, expoUIConfig?.hostStyle as any]}> <Host
style={[
triggerSize ?? { opacity: 0 },
expoUIConfig?.hostStyle as any,
]}
>
<Menu label={trigger}> <Menu label={trigger}>
{groups.flatMap((group, groupIndex) => { {groups.flatMap((group, groupIndex) => {
// Check if this group has radio options // Check if this group has radio options
@@ -302,40 +295,41 @@ const PlatformDropdownComponent = ({
const items = []; const items = [];
// Group radio options under a submenu ONLY if there's a title // Add Picker for radio options ONLY if there's a group title
// Otherwise render as individual buttons // Otherwise render as individual buttons
if (radioOptions.length > 0) { if (radioOptions.length > 0) {
if (group.title) { if (group.title) {
// Use a nested Menu as a submenu for grouped options. This // Use Picker for grouped options.
// reads as "Title: Selected" and expands to the choices on // Use the option index (a stable primitive) as the
// tap, keeping the nested look while staying a dropdown. // tag/selection value and React key. Option `value`s can be
// (Menu opens on a single tap and nests cleanly; ContextMenu // objects (e.g. bitrate / media source), which collapse to
// would require a long-press and read as a context menu.) // "[object Object]" as a key and never match the Picker's
const selectedOption = radioOptions.find( // primitive selection.
const selectedRadioIndex = radioOptions.findIndex(
(opt) => opt.selected, (opt) => opt.selected,
); );
const displayTitle = selectedOption
? `${group.title}: ${selectedOption.label}`
: group.title;
items.push( items.push(
<Menu key={`submenu-${groupIndex}`} label={displayTitle}> <Picker
{radioOptions.map((option, optionIndex) => ( key={`picker-${groupIndex}`}
<Button label={group.title}
selection={
selectedRadioIndex >= 0 ? selectedRadioIndex : undefined
}
onSelectionChange={(index) => {
const selectedOption = radioOptions[index as number];
selectedOption?.onPress();
onOptionSelect?.(selectedOption?.value);
}}
>
{radioOptions.map((opt, optionIndex) => (
<SwiftUIText
key={`radio-${groupIndex}-${optionIndex}`} key={`radio-${groupIndex}-${optionIndex}`}
label={option.label} modifiers={[tag(optionIndex)]}
systemImage={ >
option.selected ? "checkmark.circle.fill" : "circle" {opt.label}
} </SwiftUIText>
modifiers={
option.disabled ? [disabled(true)] : undefined
}
onPress={() => {
option.onPress();
onOptionSelect?.(option.value);
}}
/>
))} ))}
</Menu>, </Picker>,
); );
} else { } else {
// Render radio options as direct buttons // Render radio options as direct buttons

View File

@@ -414,7 +414,7 @@ export const PlayButton: React.FC<Props> = ({
]); ]);
const derivedTargetWidth = useDerivedValue(() => { const derivedTargetWidth = useDerivedValue(() => {
if (!item?.RunTimeTicks) return 0; if (!item || !item.RunTimeTicks) return 0;
const userData = item.UserData; const userData = item.UserData;
if (userData?.PlaybackPositionTicks) { if (userData?.PlaybackPositionTicks) {
return userData.PlaybackPositionTicks > 0 return userData.PlaybackPositionTicks > 0

View File

@@ -78,7 +78,7 @@ export const PlayButton: React.FC<Props> = ({
}; };
const derivedTargetWidth = useDerivedValue(() => { const derivedTargetWidth = useDerivedValue(() => {
if (!item?.RunTimeTicks) return 0; if (!item || !item.RunTimeTicks) return 0;
const userData = item.UserData; const userData = item.UserData;
if (userData?.PlaybackPositionTicks) { if (userData?.PlaybackPositionTicks) {
return userData.PlaybackPositionTicks > 0 return userData.PlaybackPositionTicks > 0

View File

@@ -1,199 +0,0 @@
/**
* A modal listing an item's chapters. Each row shows the chapter name and its
* timestamp; the current chapter is highlighted. Tapping a row seeks to that
* chapter and closes the modal. Player-agnostic — the seek is injected.
*/
import { Ionicons } from "@expo/vector-icons";
import type { ChapterInfo } from "@jellyfin/sdk/lib/generated-client/models";
import { memo, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import { FlatList, Modal, Pressable, StyleSheet, View } from "react-native";
import { Text } from "@/components/common/Text";
import { Colors } from "@/constants/Colors";
import {
type ChapterEntry,
chapterStartsMs,
formatChapterTime,
sortedChapters,
} from "@/utils/chapters";
interface ChapterListProps {
visible: boolean;
chapters: ChapterInfo[] | null | undefined;
/** Current playback position in milliseconds (to highlight the row). */
currentPositionMs: number;
/** Seek the player to this millisecond position. */
onSeek: (positionMs: number) => void;
onClose: () => void;
}
const ROW_HEIGHT = 48;
function ChapterListComponent({
visible,
chapters,
currentPositionMs,
onSeek,
onClose,
}: ChapterListProps) {
const { t } = useTranslation();
const listRef = useRef<FlatList<ChapterEntry>>(null);
const entries = useMemo(() => sortedChapters(chapters), [chapters]);
// Memoize starts so currentChapterIndex computation doesn't re-sort/filter
// every tick — chapters is the only input that drives the underlying array.
const starts = useMemo(() => chapterStartsMs(chapters), [chapters]);
const activeIndex = useMemo(() => {
let idx = -1;
for (let i = 0; i < starts.length; i++) {
if (currentPositionMs >= starts[i]) idx = i;
else break;
}
return idx;
}, [currentPositionMs, starts]);
// FlatList.initialScrollIndex only fires at first mount; <Modal> keeps its
// children mounted across visible toggles, so subsequent opens never scroll.
// Trigger an imperative scroll each time the sheet becomes visible.
useEffect(() => {
if (!visible || activeIndex < 0 || entries.length === 0) return;
const raf = requestAnimationFrame(() => {
listRef.current?.scrollToIndex({
index: activeIndex,
animated: false,
viewPosition: 0.5,
});
});
return () => cancelAnimationFrame(raf);
}, [visible, activeIndex, entries.length]);
return (
<Modal
visible={visible}
transparent
animationType='slide'
onRequestClose={onClose}
// iOS defaults <Modal> to portrait-only; without this it rotates the app
// back to portrait when opened from the landscape player. Android ignores it.
supportedOrientations={["portrait", "landscape"]}
>
<Pressable onPress={onClose} style={styles.backdrop}>
<Pressable onPress={(e) => e.stopPropagation()} style={styles.sheet}>
<View style={styles.header}>
<Text style={styles.title}>{t("chapters.title")}</Text>
<Pressable
onPress={onClose}
hitSlop={10}
accessibilityRole='button'
accessibilityLabel={t("chapters.close")}
>
<Ionicons name='close' size={24} color={Colors.text} />
</Pressable>
</View>
<FlatList
ref={listRef}
data={entries}
keyExtractor={(item, index) => `${item.positionMs}-${index}`}
getItemLayout={(_, index) => ({
length: ROW_HEIGHT,
offset: ROW_HEIGHT * index,
index,
})}
onScrollToIndexFailed={(info) => {
// Required when getItemLayout is provided and the target index
// is outside the currently rendered window. Fallback to an
// offset-based scroll, then retry the precise scroll once a
// frame has elapsed.
listRef.current?.scrollToOffset({
offset: info.averageItemLength * info.index,
animated: false,
});
setTimeout(() => {
listRef.current?.scrollToIndex({
index: info.index,
animated: false,
viewPosition: 0.5,
});
}, 50);
}}
renderItem={({ item, index }) => {
const positionMs = item.positionMs;
const isActive = index === activeIndex;
return (
<Pressable
onPress={() => {
onSeek(positionMs);
onClose();
}}
style={[
styles.row,
isActive && { backgroundColor: `${Colors.primary}33` },
]}
>
<Text
style={[
styles.rowText,
{ color: isActive ? Colors.primary : Colors.text },
]}
numberOfLines={1}
>
{item.chapter.Name ||
t("chapters.chapter_number", { number: index + 1 })}
</Text>
<Text style={styles.rowTime}>
{formatChapterTime(positionMs)}
</Text>
</Pressable>
);
}}
/>
</Pressable>
</Pressable>
</Modal>
);
}
export const ChapterList = memo(ChapterListComponent);
const styles = StyleSheet.create({
backdrop: {
flex: 1,
justifyContent: "flex-end",
backgroundColor: "rgba(0,0,0,0.6)",
},
sheet: {
backgroundColor: Colors.background,
borderTopLeftRadius: 16,
borderTopRightRadius: 16,
maxHeight: "70%",
paddingBottom: 24,
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 16,
},
title: {
color: Colors.text,
fontSize: 17,
fontWeight: "700",
},
row: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 16,
height: ROW_HEIGHT,
},
rowText: {
fontSize: 15,
flex: 1,
},
rowTime: {
color: Colors.icon,
fontSize: 13,
marginLeft: 12,
},
});

View File

@@ -1,87 +0,0 @@
/**
* Chapter tick marks drawn as an absolute overlay over a progress slider.
* Renders nothing for media with one or zero chapters. `pointerEvents: "none"`
* so the slider underneath still receives touches.
*/
import { memo, useState } from "react";
import { type LayoutChangeEvent, PixelRatio, View } from "react-native";
import type { ChapterMarker } from "@/utils/chapters";
interface ChapterTicksProps {
/** Pre-computed markers (caller memoizes — avoids double-computing here). */
markers: ChapterMarker[];
/** Tick colour. */
color?: string;
/** Tick height in px — slightly less than the slider track thickness. */
height?: number;
/** Tick width in px — integer to avoid sub-pixel anti-aliasing. */
width?: number;
}
function ChapterTicksComponent({
markers,
// Semi-transparent black contrasts against both the filled progress
// (#fff) and the unfilled track (rgba(255,255,255,0.2)) so the ticks
// stay visible across the whole bar as playback advances.
color = "rgba(0,0,0,0.55)",
height = 14,
width = 2,
}: ChapterTicksProps) {
// Hooks must run unconditionally — keep them before any early return.
const [sliderWidth, setSliderWidth] = useState(0);
const handleLayout = (e: LayoutChangeEvent) => {
setSliderWidth(e.nativeEvent.layout.width);
};
// One chapter (typically a single marker at 0) is not worth marking.
if (markers.length <= 1) return null;
return (
<View
pointerEvents='none'
onLayout={handleLayout}
style={{
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
// Let ticks taller than this container bleed beyond its bounds.
overflow: "visible",
}}
>
{sliderWidth > 0 &&
markers
// Skip the leading 0ms marker — it overlaps the slider start and
// adds visual noise at an already-rendered boundary.
.filter((marker) => marker.positionMs > 0)
.map((marker, index) => {
// Align both the position AND the width onto the device's
// physical pixel grid. Without this, fractional dp values land
// at different sub-pixel fractions per tick — Android samples
// each one differently and some ticks render visibly thicker.
const centerDp = (marker.percent / 100) * sliderWidth;
const left = PixelRatio.roundToNearestPixel(centerDp - width / 2);
const snappedWidth = PixelRatio.roundToNearestPixel(width);
return (
<View
key={`${marker.positionMs}-${index}`}
style={{
position: "absolute",
left,
top: "50%",
marginTop: -height / 2,
height,
width: snappedWidth,
backgroundColor: color,
}}
/>
);
})}
</View>
);
}
export const ChapterTicks = memo(ChapterTicksComponent);

View File

@@ -10,7 +10,6 @@ import {
type TextInputProps, type TextInputProps,
View, View,
} from "react-native"; } from "react-native";
import { useScaledTVTypography } from "@/constants/TVTypography";
interface InputProps extends TextInputProps { interface InputProps extends TextInputProps {
extraClassName?: string; extraClassName?: string;
@@ -21,9 +20,6 @@ export function Input(props: InputProps) {
const inputRef = useRef<TextInput>(null); const inputRef = useRef<TextInput>(null);
const [isFocused, setIsFocused] = useState(false); const [isFocused, setIsFocused] = useState(false);
const scale = useRef(new Animated.Value(1)).current; const scale = useRef(new Animated.Value(1)).current;
// TV-only: scales the input font with the tvTypographyScale setting.
// Not consumed by the mobile branch below.
const tvTypography = useScaledTVTypography();
const animateFocus = (focused: boolean) => { const animateFocus = (focused: boolean) => {
Animated.timing(scale, { Animated.timing(scale, {
@@ -45,18 +41,8 @@ export function Input(props: InputProps) {
}; };
if (Platform.isTV) { if (Platform.isTV) {
// Scale the whole input (box height, padding, icon) proportionally with the
// font so the component grows/shrinks with the tvTypographyScale setting.
// Uses the `body` token (primary reading size); it resolves to 28 at Default.
const fontSize = tvTypography.body;
const factor = fontSize / 28;
const height = Math.round(56 * factor);
const paddingLeft = Math.round(24 * factor);
const iconSize = Math.round(26 * factor);
const iconMarginRight = Math.round(14 * factor);
const containerStyle = { const containerStyle = {
height, height: 48,
borderRadius: 50, borderRadius: 50,
borderWidth: isFocused ? 1.5 : 1, borderWidth: isFocused ? 1.5 : 1,
borderColor: isFocused borderColor: isFocused
@@ -65,16 +51,16 @@ export function Input(props: InputProps) {
overflow: "hidden" as const, overflow: "hidden" as const,
flexDirection: "row" as const, flexDirection: "row" as const,
alignItems: "center" as const, alignItems: "center" as const,
paddingLeft, paddingLeft: 16,
}; };
const inputElement = ( const inputElement = (
<> <>
<Ionicons <Ionicons
name='search' name='search'
size={iconSize} size={20}
color={isFocused ? "#999" : "#666"} color={isFocused ? "#999" : "#666"}
style={{ marginRight: iconMarginRight }} style={{ marginRight: 12 }}
/> />
<TextInput <TextInput
ref={inputRef} ref={inputRef}
@@ -83,8 +69,8 @@ export function Input(props: InputProps) {
style={[ style={[
{ {
flex: 1, flex: 1,
height, height: 48,
fontSize, fontSize: 18,
fontWeight: "400", fontWeight: "400",
color: "#FFFFFF", color: "#FFFFFF",
backgroundColor: "transparent", backgroundColor: "transparent",

View File

@@ -0,0 +1,20 @@
import { Image } from "expo-image";
import { View } from "react-native";
export const LargePoster: React.FC<{ url?: string | null }> = ({ url }) => {
if (!url)
return (
<View className='p-4 rounded-xl overflow-hidden '>
<View className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800' />
</View>
);
return (
<View className='p-4 rounded-xl overflow-hidden '>
<Image
source={{ uri: url }}
className='w-full aspect-video rounded-xl overflow-hidden border border-neutral-800'
/>
</View>
);
};

View File

@@ -37,12 +37,11 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({ item }) => {
} }
/> />
<View <View
style={ style={{
Platform.isTV width: `${progress}%`,
? { width: `${progress}%`, backgroundColor: "#ffffff" } backgroundColor: Platform.isTV ? "#ffffff" : undefined,
: { width: `${progress}%` } }}
} className={`absolute bottom-0 left-0 h-1 w-full ${Platform.isTV ? "" : "bg-purple-600"}`}
className={`absolute bottom-0 left-0 h-1 ${Platform.isTV ? "" : "bg-purple-600"}`}
/> />
</> </>
); );

View File

@@ -2,7 +2,6 @@ import { useActionSheet } from "@expo/react-native-action-sheet";
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models"; import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { useSegments } from "expo-router"; import { useSegments } from "expo-router";
import { type PropsWithChildren, useCallback } from "react"; import { type PropsWithChildren, useCallback } from "react";
import { useTranslation } from "react-i18next";
import { import {
Platform, Platform,
TouchableOpacity, TouchableOpacity,
@@ -150,7 +149,6 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
children, children,
...props ...props
}) => { }) => {
const { t } = useTranslation();
const segments = useSegments(); const segments = useSegments();
const { showActionSheetWithOptions } = useActionSheet(); const { showActionSheetWithOptions } = useActionSheet();
const markAsPlayedStatus = useMarkAsPlayed([item]); const markAsPlayedStatus = useMarkAsPlayed([item]);
@@ -184,13 +182,11 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
return; return;
const options: string[] = [ const options: string[] = [
t("common.mark_as_played"), "Mark as Played",
t("common.mark_as_not_played"), "Mark as Not Played",
isFavorite isFavorite ? "Unmark as Favorite" : "Mark as Favorite",
? t("music.track_options.remove_from_favorites") ...(isOffline ? ["Delete Download"] : []),
: t("music.track_options.add_to_favorites"), "Cancel",
...(isOffline ? [t("home.downloads.delete_download")] : []),
t("common.cancel"),
]; ];
const cancelButtonIndex = options.length - 1; const cancelButtonIndex = options.length - 1;
const destructiveButtonIndex = isOffline const destructiveButtonIndex = isOffline
@@ -223,7 +219,6 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
isOffline, isOffline,
deleteFile, deleteFile,
item.Id, item.Id,
t,
]); ]);
if ( if (

View File

@@ -0,0 +1,28 @@
import { View, type ViewProps } from "react-native";
interface Props extends ViewProps {
index: number;
}
export const VerticalSkeleton: React.FC<Props> = ({ index, ...props }) => {
return (
<View
key={index}
style={{
width: "32%",
}}
className='flex flex-col'
{...props}
>
<View
style={{
aspectRatio: "10/15",
}}
className='w-full bg-neutral-800 mb-2 rounded-lg'
/>
<View className='h-2 bg-neutral-800 rounded-full mb-1' />
<View className='h-2 bg-neutral-800 rounded-full mb-1' />
<View className='h-2 bg-neutral-800 rounded-full mb-2 w-1/2' />
</View>
);
};

View File

@@ -116,7 +116,7 @@ export const DownloadCard = ({ process, ...props }: DownloadCardProps) => {
}, [process?.progress]); }, [process?.progress]);
// Return null after all hooks have been called // Return null after all hooks have been called
if (!process?.item?.Id) { if (!process || !process.item || !process.item.Id) {
return null; return null;
} }

View File

@@ -35,7 +35,6 @@ import { MediaListSection } from "@/components/medialists/MediaListSection";
import { Colors } from "@/constants/Colors"; import { Colors } from "@/constants/Colors";
import useRouter from "@/hooks/useAppRouter"; import useRouter from "@/hooks/useAppRouter";
import { useNetworkStatus } from "@/hooks/useNetworkStatus"; import { useNetworkStatus } from "@/hooks/useNetworkStatus";
import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache"; import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
import { useDownload } from "@/providers/DownloadProvider"; import { useDownload } from "@/providers/DownloadProvider";
import { useIntroSheet } from "@/providers/IntroSheetProvider"; import { useIntroSheet } from "@/providers/IntroSheetProvider";
@@ -90,10 +89,6 @@ const HomeMobile = () => {
const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set()); const [loadedSections, setLoadedSections] = useState<Set<string>>(new Set());
const { showIntro } = useIntroSheet(); const { showIntro } = useIntroSheet();
// Fallback refresh for newly added content when returning to the home screen
// (primary path is the LibraryChanged WebSocket event).
useRefreshLibraryOnFocus();
// Show intro modal on first launch // Show intro modal on first launch
useEffect(() => { useEffect(() => {
const hasShownIntro = storage.getBoolean("hasShownIntro"); const hasShownIntro = storage.getBoolean("hasShownIntro");

View File

@@ -35,7 +35,6 @@ import { Loader } from "@/components/Loader";
import { useScaledTVTypography } from "@/constants/TVTypography"; import { useScaledTVTypography } from "@/constants/TVTypography";
import useRouter from "@/hooks/useAppRouter"; import useRouter from "@/hooks/useAppRouter";
import { useNetworkStatus } from "@/hooks/useNetworkStatus"; import { useNetworkStatus } from "@/hooks/useNetworkStatus";
import { useRefreshLibraryOnFocus } from "@/hooks/useRefreshLibraryOnFocus";
import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache"; import { useInvalidatePlaybackProgressCache } from "@/hooks/useRevalidatePlaybackProgressCache";
import { useTVItemActionModal } from "@/hooks/useTVItemActionModal"; import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
import { import {
@@ -87,10 +86,6 @@ export const Home = () => {
const _invalidateCache = useInvalidatePlaybackProgressCache(); const _invalidateCache = useInvalidatePlaybackProgressCache();
const { showItemActions } = useTVItemActionModal(); const { showItemActions } = useTVItemActionModal();
// Fallback refresh for newly added content when returning to the home screen
// (primary path is the LibraryChanged WebSocket event).
useRefreshLibraryOnFocus();
// Dynamic backdrop state with debounce // Dynamic backdrop state with debounce
const [focusedItem, setFocusedItem] = useState<BaseItemDto | null>(null); const [focusedItem, setFocusedItem] = useState<BaseItemDto | null>(null);
const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

View File

@@ -351,7 +351,7 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
// Get subtitle for episodes // Get subtitle for episodes
const episodeSubtitle = useMemo(() => { const episodeSubtitle = useMemo(() => {
if (activeItem?.Type !== "Episode") return null; if (!activeItem || activeItem.Type !== "Episode") return null;
return `S${activeItem.ParentIndexNumber} E${activeItem.IndexNumber} · ${activeItem.Name}`; return `S${activeItem.ParentIndexNumber} E${activeItem.IndexNumber} · ${activeItem.Name}`;
}, [activeItem]); }, [activeItem]);

View File

@@ -37,20 +37,7 @@ export const ItemPeopleSections: React.FC<Props> = ({ item, ...props }) => {
return { ...item, People: people } as BaseItemDto; return { ...item, People: people } as BaseItemDto;
}, [item, people]); }, [item, people]);
// Jellyfin can list the same person several times (e.g. an actor also const topPeople = useMemo(() => people.slice(0, 3), [people]);
// credited as writer). Dedupe by Id so the same actor section isn't rendered
// twice and we still surface 3 distinct people.
const topPeople = useMemo(() => {
const seen = new Set<string>();
const unique: BaseItemPerson[] = [];
for (const person of people) {
if (!person.Id || seen.has(person.Id)) continue;
seen.add(person.Id);
unique.push(person);
if (unique.length >= 3) break;
}
return unique;
}, [people]);
const renderActorSection = useCallback( const renderActorSection = useCallback(
(person: BaseItemPerson, idx: number, total: number) => { (person: BaseItemPerson, idx: number, total: number) => {

View File

@@ -180,4 +180,4 @@ const styles = StyleSheet.create({
}, },
}); });
export { CARD_HEIGHT, CARD_WIDTH }; export { CARD_WIDTH, CARD_HEIGHT };

View File

@@ -155,7 +155,7 @@ export const TVLiveTVGuide: React.FC = () => {
); );
// Fetch programs for visible channels // Fetch programs for visible channels
const { data: programsData } = useQuery({ const { data: programsData, isLoading: isLoadingPrograms } = useQuery({
queryKey: [ queryKey: [
"livetv", "livetv",
"tv-guide", "tv-guide",

View File

@@ -382,18 +382,16 @@ export const Login: React.FC = () => {
</View> </View>
</View> </View>
</View> </View>
<View className='absolute bottom-0 left-0 w-full px-4 mb-2' />
</View> </View>
) : ( ) : (
<View className='flex flex-col flex-1 items-center justify-center w-full'> <View className='flex flex-col flex-1 w-full'>
<View className='flex flex-col gap-y-2 px-4 w-full -mt-36'> <View className='flex flex-col gap-y-2 px-4 w-full'>
<Image <Image
style={{ style={{
width: 100, width: 100,
height: 100, height: 100,
marginLeft: -23,
marginBottom: -20, marginBottom: -20,
alignSelf: "center",
}} }}
source={require("@/assets/images/icon-ios-plain.png")} source={require("@/assets/images/icon-ios-plain.png")}
/> />
@@ -431,6 +429,8 @@ export const Login: React.FC = () => {
await handleConnect(server.address); await handleConnect(server.address);
}} }}
/> />
</View>
<View className='px-4 pb-2'>
<PreviousServersList <PreviousServersList
onServerSelect={async (s) => { onServerSelect={async (s) => {
await handleConnect(s.address); await handleConnect(s.address);

View File

@@ -14,7 +14,6 @@ import {
} from "react-native"; } from "react-native";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { useTVFocusAnimation } from "@/components/tv"; import { useTVFocusAnimation } from "@/components/tv";
import { useTVBackPress } from "@/hooks/useTVBackPress";
import { scaleSize } from "@/utils/scaleSize"; import { scaleSize } from "@/utils/scaleSize";
interface TVPasswordEntryModalProps { interface TVPasswordEntryModalProps {
@@ -202,13 +201,6 @@ export const TVPasswordEntryModal: React.FC<TVPasswordEntryModalProps> = ({
setIsReady(false); setIsReady(false);
}, [visible]); }, [visible]);
// Close the modal on the TV remote back/menu button while it is open.
useTVBackPress(() => {
if (!visible) return false;
onClose();
return true;
}, [visible, onClose]);
const handleSubmit = async () => { const handleSubmit = async () => {
if (!password) { if (!password) {
setError(t("password.enter_password")); setError(t("password.enter_password"));

View File

@@ -0,0 +1,12 @@
// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
import type { IconProps } from "@expo/vector-icons/build/createIconSet";
import Ionicons from "@expo/vector-icons/Ionicons";
import type { ComponentProps } from "react";
export function TabBarIcon({
style,
...rest
}: IconProps<ComponentProps<typeof Ionicons>["name"]>) {
return <Ionicons size={26} style={[{ marginBottom: -3 }, style]} {...rest} />;
}

View File

@@ -0,0 +1,63 @@
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { Image } from "expo-image";
import { useAtom } from "jotai";
import { useMemo, useState } from "react";
import { View } from "react-native";
import { WatchedIndicator } from "@/components/WatchedIndicator";
import { apiAtom } from "@/providers/JellyfinProvider";
type MoviePosterProps = {
item: BaseItemDto;
showProgress?: boolean;
};
export const EpisodePoster: React.FC<MoviePosterProps> = ({
item,
showProgress = false,
}) => {
const [api] = useAtom(apiAtom);
const url = useMemo(() => {
if (item.Type === "Episode") {
return `${api?.basePath}/Items/${item.ParentBackdropItemId}/Images/Thumb?fillHeight=389&quality=80&tag=${item.ParentThumbImageTag}`;
}
}, [item]);
const [progress, _setProgress] = useState(
item.UserData?.PlayedPercentage || 0,
);
const blurhash = useMemo(() => {
const key = item.ImageTags?.Primary as string;
return item.ImageBlurHashes?.Primary?.[key];
}, [item]);
return (
<View className='relative rounded-lg overflow-hidden border border-neutral-900'>
<Image
placeholder={{
blurhash,
}}
key={item.Id}
id={item.Id}
source={
url
? {
uri: url,
}
: null
}
cachePolicy={"memory-disk"}
contentFit='cover'
style={{
aspectRatio: "10/15",
width: "100%",
}}
/>
<WatchedIndicator item={item} />
{showProgress && progress > 0 && (
<View className='h-1 bg-red-600 w-full' />
)}
</View>
);
};

View File

@@ -0,0 +1,48 @@
import { Image } from "expo-image";
import { useAtom } from "jotai";
import { useMemo } from "react";
import { View } from "react-native";
import { apiAtom } from "@/providers/JellyfinProvider";
type PosterProps = {
id?: string;
showProgress?: boolean;
};
const ParentPoster: React.FC<PosterProps> = ({ id }) => {
const [api] = useAtom(apiAtom);
const url = useMemo(
() => `${api?.basePath}/Items/${id}/Images/Primary`,
[id],
);
if (!url || !id)
return (
<View
className='border border-neutral-900'
style={{
aspectRatio: "10/15",
}}
/>
);
return (
<View className='rounded-lg overflow-hidden border border-neutral-900'>
<Image
key={id}
id={id}
source={{
uri: url,
}}
cachePolicy={"memory-disk"}
contentFit='cover'
style={{
aspectRatio: "10/15",
}}
/>
</View>
);
};
export default ParentPoster;

View File

@@ -1,17 +1,15 @@
import {
Button,
ContextMenu,
Host,
Picker,
Text as SwiftUIText,
} from "@expo/ui/swift-ui";
import { buttonStyle, tag } from "@expo/ui/swift-ui/modifiers";
import { Platform, View } from "react-native"; import { Platform, View } from "react-native";
import { FilterButton } from "@/components/filters/FilterButton"; import { FilterButton } from "@/components/filters/FilterButton";
import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage"; import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage";
// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
// A static top-level import crashes the route tree on tvOS at module load.
// Load it lazily and only off-TV; TV never renders this component.
const { Button, Host, Menu } = Platform.isTV
? ({} as typeof import("@expo/ui/swift-ui"))
: require("@expo/ui/swift-ui");
const { buttonStyle } = Platform.isTV
? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
: require("@expo/ui/swift-ui/modifiers");
interface DiscoverFiltersProps { interface DiscoverFiltersProps {
searchFilterId: string; searchFilterId: string;
orderFilterId: string; orderFilterId: string;
@@ -37,7 +35,7 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
setJellyseerrSortOrder, setJellyseerrSortOrder,
t, t,
}) => { }) => {
if (Platform.OS === "ios" && !Platform.isTV) { if (Platform.OS === "ios") {
return ( return (
<Host <Host
style={{ style={{
@@ -49,54 +47,42 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
marginLeft: "auto", marginLeft: "auto",
}} }}
> >
<Menu <ContextMenu>
label={ <ContextMenu.Trigger>
<Button <Button
modifiers={[buttonStyle("glass")]} modifiers={[buttonStyle("glass")]}
systemImage='line.3.horizontal.decrease.circle' systemImage='line.3.horizontal.decrease.circle'
/> ></Button>
} </ContextMenu.Trigger>
> <ContextMenu.Items>
<Menu <Picker
label={`${t("library.filters.sort_by")}: ${t( label={t("library.filters.sort_by")}
`home.settings.plugins.jellyseerr.order_by.${jellyseerrOrderBy}`, selection={jellyseerrOrderBy as unknown as string}
)}`} onSelectionChange={(value) => {
> setJellyseerrOrderBy(value as unknown as JellyseerrSearchSort);
{sortOptions.map((item) => { }}
const isSelected = >
jellyseerrOrderBy === (item as unknown as JellyseerrSearchSort); {sortOptions.map((item) => (
return ( <SwiftUIText key={item} modifiers={[tag(item)]}>
<Button {t(`home.settings.plugins.jellyseerr.order_by.${item}`)}
key={item} </SwiftUIText>
label={t(`home.settings.plugins.jellyseerr.order_by.${item}`)} ))}
systemImage={isSelected ? "checkmark.circle.fill" : "circle"} </Picker>
onPress={() => <Picker
setJellyseerrOrderBy( label={t("library.filters.sort_order")}
item as unknown as JellyseerrSearchSort, selection={jellyseerrSortOrder}
) onSelectionChange={(value) => {
} setJellyseerrSortOrder(value as "asc" | "desc");
/> }}
); >
})} {orderOptions.map((item) => (
</Menu> <SwiftUIText key={item} modifiers={[tag(item)]}>
<Menu {t(`library.filters.${item}`)}
label={`${t("library.filters.sort_order")}: ${t( </SwiftUIText>
`library.filters.${jellyseerrSortOrder}`, ))}
)}`} </Picker>
> </ContextMenu.Items>
{orderOptions.map((item) => { </ContextMenu>
const isSelected = jellyseerrSortOrder === item;
return (
<Button
key={item}
label={t(`library.filters.${item}`)}
systemImage={isSelected ? "checkmark.circle.fill" : "circle"}
onPress={() => setJellyseerrSortOrder(item)}
/>
);
})}
</Menu>
</Menu>
</Host> </Host>
); );
} }

View File

@@ -1,16 +1,9 @@
import { Button, Host } from "@expo/ui/swift-ui";
import { buttonStyle } from "@expo/ui/swift-ui/modifiers";
import { Platform, TouchableOpacity, View } from "react-native"; import { Platform, TouchableOpacity, View } from "react-native";
import { Text } from "@/components/common/Text";
import { Tag } from "@/components/GenreTags"; import { Tag } from "@/components/GenreTags";
// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
// A static top-level import crashes the route tree on tvOS at module load.
// Load it lazily and only off-TV; TV never renders this component.
const { Button, Host, HStack, Spacer } = Platform.isTV
? ({} as typeof import("@expo/ui/swift-ui"))
: require("@expo/ui/swift-ui");
const { buttonStyle } = Platform.isTV
? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
: require("@expo/ui/swift-ui/modifiers");
type SearchType = "Library" | "Discover"; type SearchType = "Library" | "Discover";
interface SearchTabButtonsProps { interface SearchTabButtonsProps {
@@ -24,10 +17,18 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
setSearchType, setSearchType,
t, t,
}) => { }) => {
if (Platform.OS === "ios" && !Platform.isTV) { if (Platform.OS === "ios") {
return ( return (
<Host style={{ height: 40, flex: 1 }}> <>
<HStack spacing={8}> <Host
style={{
height: 40,
width: 80,
flexDirection: "row",
gap: 10,
justifyContent: "space-between",
}}
>
<Button <Button
modifiers={[ modifiers={[
buttonStyle( buttonStyle(
@@ -35,8 +36,19 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
), ),
]} ]}
onPress={() => setSearchType("Library")} onPress={() => setSearchType("Library")}
label={t("search.library")} >
/> <Text>{t("search.library")}</Text>
</Button>
</Host>
<Host
style={{
height: 40,
width: 100,
flexDirection: "row",
gap: 10,
justifyContent: "space-between",
}}
>
<Button <Button
modifiers={[ modifiers={[
buttonStyle( buttonStyle(
@@ -44,11 +56,11 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
), ),
]} ]}
onPress={() => setSearchType("Discover")} onPress={() => setSearchType("Discover")}
label={t("search.discover")} >
/> <Text>{t("search.discover")}</Text>
<Spacer /> </Button>
</HStack> </Host>
</Host> </>
); );
} }

View File

@@ -4,11 +4,10 @@ import { useMemo } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ScrollView, View } from "react-native"; import { ScrollView, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Input } from "@/components/common/Input";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { TVDiscover } from "@/components/jellyseerr/discover/TVDiscover"; import { TVDiscover } from "@/components/jellyseerr/discover/TVDiscover";
import { useScaledTVSizes } from "@/constants/TVSizes";
import { useScaledTVTypography } from "@/constants/TVTypography"; import { useScaledTVTypography } from "@/constants/TVTypography";
import { TvSearchView } from "@/modules/tv-search";
import { apiAtom } from "@/providers/JellyfinProvider"; import { apiAtom } from "@/providers/JellyfinProvider";
import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl"; import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
import type DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider"; import type DiscoverSlider from "@/utils/jellyseerr/server/entity/DiscoverSlider";
@@ -17,46 +16,36 @@ import type {
PersonResult, PersonResult,
TvResult, TvResult,
} from "@/utils/jellyseerr/server/models/Search"; } from "@/utils/jellyseerr/server/models/Search";
import { scaleSize } from "@/utils/scaleSize";
import { TVJellyseerrSearchResults } from "./TVJellyseerrSearchResults"; import { TVJellyseerrSearchResults } from "./TVJellyseerrSearchResults";
import { TVSearchSection } from "./TVSearchSection"; import { TVSearchSection } from "./TVSearchSection";
import { TVSearchTabBadges } from "./TVSearchTabBadges"; import { TVSearchTabBadges } from "./TVSearchTabBadges";
const HORIZONTAL_PADDING = 60; const HORIZONTAL_PADDING = 60;
const TOP_PADDING = 100; const TOP_PADDING = 100;
// Height of the native search bar itself. The tvOS grid keyboard presents as
// its own overlay when the field is focused, so we only reserve the bar height
// here — not the whole keyboard. Tunable once seen on device.
const SEARCH_AREA_HEIGHT = 250;
const SECTION_GAP = 10; const SECTION_GAP = 10;
const SCALE_PADDING = 20; const SCALE_PADDING = 20;
// Loading skeleton for TV. // Loading skeleton for TV
// Mirrors TVSearchSection's scaled layout (poster width, item gap, edge
// padding, heading typography, poster radius) so the placeholder lines up with
// the real content that replaces it.
const TVLoadingSkeleton: React.FC = () => { const TVLoadingSkeleton: React.FC = () => {
const typography = useScaledTVTypography(); const typography = useScaledTVTypography();
const sizes = useScaledTVSizes(); const itemWidth = 210;
const itemWidth = sizes.posters.poster;
return ( return (
<View style={{ overflow: "visible" }}> <View style={{ overflow: "visible" }}>
{/* Section header placeholder — matches the heading typography + margins */}
<View <View
style={{ style={{
width: itemWidth, width: 200,
height: typography.heading, height: 28,
backgroundColor: "#262626", backgroundColor: "#262626",
borderRadius: 8, borderRadius: 8,
marginBottom: 20, marginBottom: 16,
marginLeft: sizes.padding.horizontal, marginLeft: SCALE_PADDING,
}} }}
/> />
<View <View
style={{ style={{
flexDirection: "row", flexDirection: "row",
gap: sizes.gaps.item, gap: 16,
paddingLeft: sizes.padding.horizontal, paddingHorizontal: SCALE_PADDING,
paddingVertical: SCALE_PADDING, paddingVertical: SCALE_PADDING,
}} }}
> >
@@ -67,14 +56,15 @@ const TVLoadingSkeleton: React.FC = () => {
backgroundColor: "#262626", backgroundColor: "#262626",
width: itemWidth, width: itemWidth,
aspectRatio: 10 / 15, aspectRatio: 10 / 15,
borderRadius: scaleSize(24), borderRadius: 12,
marginBottom: scaleSize(8), marginBottom: 8,
}} }}
/> />
<View <View
style={{ style={{
borderRadius: 6, borderRadius: 6,
overflow: "hidden", overflow: "hidden",
marginBottom: 4,
alignSelf: "flex-start", alignSelf: "flex-start",
}} }}
> >
@@ -134,6 +124,7 @@ interface TVSearchPageProps {
} }
export const TVSearchPage: React.FC<TVSearchPageProps> = ({ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
search,
setSearch, setSearch,
debouncedSearch, debouncedSearch,
movies, movies,
@@ -224,129 +215,125 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
const currentNoResults = isLibraryMode ? noResults : jellyseerrNoResults; const currentNoResults = isLibraryMode ? noResults : jellyseerrNoResults;
return ( return (
<View style={{ flex: 1 }}> <ScrollView
{/* Sticky header: search field stays pinned while results scroll below. */} nestedScrollEnabled
showsVerticalScrollIndicator={false}
keyboardDismissMode='on-drag'
contentContainerStyle={{
paddingTop: insets.top + TOP_PADDING,
paddingBottom: insets.bottom + 60,
}}
>
{/* Search Input */}
<View <View
style={{ style={{
paddingTop: insets.top + TOP_PADDING, marginBottom: 24,
marginHorizontal: HORIZONTAL_PADDING + 200,
}} }}
> >
{/* Native tvOS search field (SwiftUI `.searchable`, our `tv-search` <Input
module). It renders the native search bar + grid keyboard and placeholder={t("search.search")}
forwards typed text into the existing query pipeline via setSearch; value={search}
our own results grid renders below. */} onChangeText={setSearch}
<View keyboardType='default'
style={{ returnKeyType='done'
marginBottom: 24, autoCapitalize='none'
marginHorizontal: HORIZONTAL_PADDING, clearButtonMode='while-editing'
height: SEARCH_AREA_HEIGHT, maxLength={500}
}} hasTVPreferredFocus={
> debouncedSearch.length === 0 &&
<TvSearchView sections.length === 0 &&
style={{ width: "100%", height: "100%" }} !showDiscover
placeholder={t("search.search")} }
onChangeText={(e) => setSearch(e.nativeEvent.text)} />
/>
</View>
</View> </View>
<ScrollView {/* Search Type Tab Badges */}
nestedScrollEnabled {showDiscover && (
showsVerticalScrollIndicator={false} <View style={{ marginHorizontal: HORIZONTAL_PADDING }}>
keyboardDismissMode='on-drag' <TVSearchTabBadges
contentContainerStyle={{ searchType={searchType}
paddingBottom: insets.bottom + 60, setSearchType={setSearchType}
}} showDiscover={showDiscover}
>
{/* Search Type Tab Badges */}
{showDiscover && (
<View style={{ marginHorizontal: HORIZONTAL_PADDING }}>
<TVSearchTabBadges
searchType={searchType}
setSearchType={setSearchType}
showDiscover={showDiscover}
/>
</View>
)}
{/* Loading State */}
{currentLoading && (
<View style={{ gap: SECTION_GAP }}>
<TVLoadingSkeleton />
<TVLoadingSkeleton />
</View>
)}
{/* Library Search Results */}
{isLibraryMode && !loading && (
<View style={{ gap: SECTION_GAP }}>
{sections.map((section, index) => (
<TVSearchSection
key={section.key}
title={section.title}
items={section.items!}
orientation={section.orientation || "vertical"}
isFirstSection={index === 0}
onItemPress={onItemPress}
onItemLongPress={onItemLongPress}
imageUrlGetter={
["artists", "albums", "songs", "playlists"].includes(
section.key,
)
? getImageUrl
: undefined
}
/>
))}
</View>
)}
{/* Jellyseerr/Discover Search Results */}
{isDiscoverMode && !jellyseerrLoading && debouncedSearch.length > 0 && (
<TVJellyseerrSearchResults
movieResults={jellyseerrMovies}
tvResults={jellyseerrTv}
personResults={jellyseerrPersons}
loading={jellyseerrLoading}
noResults={jellyseerrNoResults}
searchQuery={debouncedSearch}
onMoviePress={onJellyseerrMoviePress || (() => {})}
onTvPress={onJellyseerrTvPress || (() => {})}
onPersonPress={onJellyseerrPersonPress || (() => {})}
/> />
)} </View>
)}
{/* Discover Content (when no search query in Discover mode) */} {/* Loading State */}
{isDiscoverMode && {currentLoading && (
!jellyseerrLoading && <View style={{ gap: SECTION_GAP }}>
debouncedSearch.length === 0 && ( <TVLoadingSkeleton />
<TVDiscover sliders={discoverSliders} /> <TVLoadingSkeleton />
)} </View>
)}
{/* No Results State */} {/* Library Search Results */}
{!currentLoading && currentNoResults && debouncedSearch.length > 0 && ( {isLibraryMode && !loading && (
<View style={{ alignItems: "center", paddingTop: 40 }}> <View style={{ gap: SECTION_GAP }}>
<Text {sections.map((section, index) => (
style={{ <TVSearchSection
fontSize: typography.heading, key={section.key}
fontWeight: "bold", title={section.title}
color: "#FFFFFF", items={section.items!}
marginBottom: 8, orientation={section.orientation || "vertical"}
}} isFirstSection={index === 0}
> onItemPress={onItemPress}
{t("search.no_results_found_for")} onItemLongPress={onItemLongPress}
</Text> imageUrlGetter={
<Text ["artists", "albums", "songs", "playlists"].includes(
style={{ section.key,
fontSize: typography.body, )
color: "rgba(255,255,255,0.6)", ? getImageUrl
}} : undefined
> }
"{debouncedSearch}" />
</Text> ))}
</View> </View>
)} )}
</ScrollView>
</View> {/* Jellyseerr/Discover Search Results */}
{isDiscoverMode && !jellyseerrLoading && debouncedSearch.length > 0 && (
<TVJellyseerrSearchResults
movieResults={jellyseerrMovies}
tvResults={jellyseerrTv}
personResults={jellyseerrPersons}
loading={jellyseerrLoading}
noResults={jellyseerrNoResults}
searchQuery={debouncedSearch}
onMoviePress={onJellyseerrMoviePress || (() => {})}
onTvPress={onJellyseerrTvPress || (() => {})}
onPersonPress={onJellyseerrPersonPress || (() => {})}
/>
)}
{/* Discover Content (when no search query in Discover mode) */}
{isDiscoverMode && !jellyseerrLoading && debouncedSearch.length === 0 && (
<TVDiscover sliders={discoverSliders} />
)}
{/* No Results State */}
{!currentLoading && currentNoResults && debouncedSearch.length > 0 && (
<View style={{ alignItems: "center", paddingTop: 40 }}>
<Text
style={{
fontSize: typography.heading,
fontWeight: "bold",
color: "#FFFFFF",
marginBottom: 8,
}}
>
{t("search.no_results_found_for")}
</Text>
<Text
style={{
fontSize: typography.body,
color: "rgba(255,255,255,0.6)",
}}
>
"{debouncedSearch}"
</Text>
</View>
)}
</ScrollView>
); );
}; };

View File

@@ -20,8 +20,6 @@ interface TVSearchSectionProps extends ViewProps {
onItemPress: (item: BaseItemDto) => void; onItemPress: (item: BaseItemDto) => void;
onItemLongPress?: (item: BaseItemDto) => void; onItemLongPress?: (item: BaseItemDto) => void;
imageUrlGetter?: (item: BaseItemDto) => string | undefined; imageUrlGetter?: (item: BaseItemDto) => string | undefined;
/** Override the horizontal edge padding (defaults to the scaled TV padding). */
horizontalPadding?: number;
} }
export const TVSearchSection: React.FC<TVSearchSectionProps> = ({ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
@@ -33,14 +31,12 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
onItemPress, onItemPress,
onItemLongPress, onItemLongPress,
imageUrlGetter, imageUrlGetter,
horizontalPadding,
...props ...props
}) => { }) => {
const typography = useScaledTVTypography(); const typography = useScaledTVTypography();
const posterSizes = useScaledTVPosterSizes(); const posterSizes = useScaledTVPosterSizes();
const sizes = useScaledTVSizes(); const sizes = useScaledTVSizes();
const ITEM_GAP = sizes.gaps.item; const ITEM_GAP = sizes.gaps.item;
const edgePadding = horizontalPadding ?? sizes.padding.horizontal;
const flatListRef = useRef<FlatList<BaseItemDto>>(null); const flatListRef = useRef<FlatList<BaseItemDto>>(null);
const [focusedCount, setFocusedCount] = useState(0); const [focusedCount, setFocusedCount] = useState(0);
const prevFocusedCount = useRef(0); const prevFocusedCount = useRef(0);
@@ -277,7 +273,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
fontWeight: "700", fontWeight: "700",
color: "#FFFFFF", color: "#FFFFFF",
marginBottom: 20, marginBottom: 20,
marginLeft: edgePadding, marginLeft: sizes.padding.horizontal,
letterSpacing: 0.5, letterSpacing: 0.5,
}} }}
> >
@@ -298,10 +294,10 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
getItemLayout={getItemLayout} getItemLayout={getItemLayout}
style={{ overflow: "visible" }} style={{ overflow: "visible" }}
contentInset={{ contentInset={{
left: edgePadding, left: sizes.padding.horizontal,
right: edgePadding, right: sizes.padding.horizontal,
}} }}
contentOffset={{ x: -edgePadding, y: 0 }} contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
contentContainerStyle={{ contentContainerStyle={{
paddingVertical: SCALE_PADDING, paddingVertical: SCALE_PADDING,
}} }}

View File

@@ -193,7 +193,7 @@ const TVSeasonButton: React.FC<{
> >
<Text <Text
style={{ style={{
fontSize: typography.callout, fontSize: typography.body,
color: focused ? "#000" : "#FFFFFF", color: focused ? "#000" : "#FFFFFF",
fontWeight: "bold", fontWeight: "bold",
}} }}
@@ -538,7 +538,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
/> />
<Text <Text
style={{ style={{
fontSize: typography.callout, fontSize: typography.body,
fontWeight: "bold", fontWeight: "bold",
color: "#000000", color: "#000000",
}} }}

View File

@@ -0,0 +1,29 @@
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import useRouter from "@/hooks/useAppRouter";
import { useSessions, type useSessionsProps } from "@/hooks/useSessions";
import { useSettings } from "@/utils/atoms/settings";
import { ListGroup } from "../list/ListGroup";
import { ListItem } from "../list/ListItem";
export const Dashboard = () => {
const { settings } = useSettings();
const { sessions = [] } = useSessions({} as useSessionsProps);
const router = useRouter();
const { t } = useTranslation();
if (!settings) return null;
return (
<View>
<ListGroup title={t("home.settings.dashboard.title")} className='mt-4'>
<ListItem
className={sessions.length !== 0 ? "bg-purple-900" : ""}
onPress={() => router.push("/settings/dashboard/sessions")}
title={t("home.settings.dashboard.sessions_title")}
showArrow
/>
</ListGroup>
</View>
);
};

View File

@@ -0,0 +1,3 @@
export default function DownloadSettings() {
return null;
}

View File

@@ -0,0 +1,3 @@
export default function DownloadSettings() {
return null;
}

View File

@@ -229,7 +229,7 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
/> />
</OptionGroup> </OptionGroup>
<OptionGroup title={t("library.options.options_title")}> <OptionGroup title='Options'>
<ToggleItem <ToggleItem
label={t("library.options.show_titles")} label={t("library.options.show_titles")}
value={settings.showTitles} value={settings.showTitles}

View File

@@ -1,9 +1,14 @@
import { Stack } from "expo-router"; import type { ParamListBase, RouteProp } from "@react-navigation/native";
import type { ComponentProps } from "react"; import type { NativeStackNavigationOptions } from "@react-navigation/native-stack";
import { Platform } from "react-native"; import { Platform } from "react-native";
import { HeaderBackButton } from "../common/HeaderBackButton"; import { HeaderBackButton } from "../common/HeaderBackButton";
type ICommonScreenOptions = ComponentProps<typeof Stack.Screen>["options"]; type ICommonScreenOptions =
| NativeStackNavigationOptions
| ((prop: {
route: RouteProp<ParamListBase, string>;
navigation: any;
}) => NativeStackNavigationOptions);
export const commonScreenOptions: ICommonScreenOptions = { export const commonScreenOptions: ICommonScreenOptions = {
title: "", title: "",

View File

@@ -63,7 +63,6 @@ export const TVNextEpisodeCountdown: FC<TVNextEpisodeCountdownProps> = ({
const typography = useScaledTVTypography(); const typography = useScaledTVTypography();
const { t } = useTranslation(); const { t } = useTranslation();
const progress = useSharedValue(0); const progress = useSharedValue(0);
const cancelled = useSharedValue(false);
const onFinishRef = useRef(onFinish); const onFinishRef = useRef(onFinish);
const { focused, handleFocus, handleBlur, animatedStyle } = const { focused, handleFocus, handleBlur, animatedStyle } =
useTVFocusAnimation({ useTVFocusAnimation({
@@ -121,15 +120,13 @@ export const TVNextEpisodeCountdown: FC<TVNextEpisodeCountdownProps> = ({
return; return;
} }
cancelled.value = false;
// Resume from current position // Resume from current position
const remainingDuration = (1 - progress.value) * 8000; const remainingDuration = (1 - progress.value) * 8000;
progress.value = withTiming( progress.value = withTiming(
1, 1,
{ duration: remainingDuration, easing: Easing.linear }, { duration: remainingDuration, easing: Easing.linear },
(finished) => { (finished) => {
if (finished && !cancelled.value) { if (finished) {
runOnJS(onFinishRef.current)(); runOnJS(onFinishRef.current)();
} }
}, },
@@ -137,10 +134,9 @@ export const TVNextEpisodeCountdown: FC<TVNextEpisodeCountdownProps> = ({
// Cancel animation on unmount to prevent onFinish from firing after exit // Cancel animation on unmount to prevent onFinish from firing after exit
return () => { return () => {
cancelled.value = true;
cancelAnimation(progress); cancelAnimation(progress);
}; };
}, [show, isPlaying, progress, cancelled]); }, [show, isPlaying, progress]);
const progressStyle = useAnimatedStyle(() => ({ const progressStyle = useAnimatedStyle(() => ({
width: `${progress.value * 100}%`, width: `${progress.value * 100}%`,

View File

@@ -263,7 +263,7 @@ const createStyles = (typography: ReturnType<typeof useScaledTVTypography>) =>
color: "#fff", color: "#fff",
}, },
downloadingOverlay: { downloadingOverlay: {
...StyleSheet.absoluteFill, ...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0,0,0,0.5)", backgroundColor: "rgba(0,0,0,0.5)",
borderRadius: scaleSize(14), borderRadius: scaleSize(14),
justifyContent: "center", justifyContent: "center",

View File

@@ -105,14 +105,14 @@ const AudioSlider: React.FC<AudioSliderProps> = ({ setVisibility }) => {
maximumValue={max} maximumValue={max}
thumbWidth={0} thumbWidth={0}
onValueChange={handleValueChange} onValueChange={handleValueChange}
renderBubble={() => null}
renderThumb={() => null}
containerStyle={{ containerStyle={{
borderRadius: 50, borderRadius: 50,
}} }}
theme={{ theme={{
minimumTrackTintColor: "#FDFDFD", minimumTrackTintColor: "#FDFDFD",
maximumTrackTintColor: "#5A5A5A", maximumTrackTintColor: "#5A5A5A",
bubbleBackgroundColor: "transparent", // Hide the value bubble
bubbleTextColor: "transparent", // Hide the value text
}} }}
/> />
<Ionicons <Ionicons

View File

@@ -1,34 +1,19 @@
import { Ionicons } from "@expo/vector-icons"; import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
import type { import type { FC } from "react";
BaseItemDto, import { View } from "react-native";
ChapterInfo,
} from "@jellyfin/sdk/lib/generated-client";
import { type FC, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Pressable, View } from "react-native";
import { Slider } from "react-native-awesome-slider"; import { Slider } from "react-native-awesome-slider";
import { type SharedValue } from "react-native-reanimated"; import { type SharedValue } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import { ChapterList } from "@/components/chapters/ChapterList";
import { ChapterTicks } from "@/components/chapters/ChapterTicks";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { useSettings } from "@/utils/atoms/settings"; import { useSettings } from "@/utils/atoms/settings";
import { chapterMarkers, chapterNameAt } from "@/utils/chapters"; import { ChapterMarkers } from "./ChapterMarkers";
import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton"; import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
import SkipButton from "./SkipButton"; import SkipButton from "./SkipButton";
import { TimeDisplay } from "./TimeDisplay"; import { TimeDisplay } from "./TimeDisplay";
import { TrickplayBubble } from "./TrickplayBubble"; import { TrickplayBubble } from "./TrickplayBubble";
// Chapter tick height in dp — matches the slider track height for a clean,
// flush look (no top/bottom overflow).
const TICK_HEIGHT = 10;
interface BottomControlsProps { interface BottomControlsProps {
item: BaseItemDto; item: BaseItemDto;
/** Item chapters, used for the tick overlay and chapter list. */
chapters?: ChapterInfo[] | null;
/** Total media duration in milliseconds. */
durationMs: number;
showControls: boolean; showControls: boolean;
isSliding: boolean; isSliding: boolean;
showRemoteBubble: boolean; showRemoteBubble: boolean;
@@ -54,8 +39,6 @@ interface BottomControlsProps {
handleSliderChange: (value: number) => void; handleSliderChange: (value: number) => void;
handleTouchStart: () => void; handleTouchStart: () => void;
handleTouchEnd: () => void; handleTouchEnd: () => void;
/** Programmatic seek (chapter list, hotkeys) — bypasses slide gesture state. */
seekTo: (value: number) => void;
// Trickplay props // Trickplay props
trickPlayUrl: { trickPlayUrl: {
@@ -82,8 +65,6 @@ interface BottomControlsProps {
export const BottomControls: FC<BottomControlsProps> = ({ export const BottomControls: FC<BottomControlsProps> = ({
item, item,
chapters,
durationMs,
showControls, showControls,
isSliding, isSliding,
showRemoteBubble, showRemoteBubble,
@@ -107,39 +88,13 @@ export const BottomControls: FC<BottomControlsProps> = ({
handleSliderChange, handleSliderChange,
handleTouchStart, handleTouchStart,
handleTouchEnd, handleTouchEnd,
seekTo,
trickPlayUrl, trickPlayUrl,
trickplayInfo, trickplayInfo,
time, time,
chapterPositions = [], chapterPositions = [],
}) => { }) => {
const { settings } = useSettings(); const { settings } = useSettings();
const { t } = useTranslation();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
const [chapterListVisible, setChapterListVisible] = useState(false);
// Only expose chapter UI when there are at least two real markers.
const chapterMarkerList = useMemo(
() => chapterMarkers(chapters, durationMs),
[chapters, durationMs],
);
const hasChapters = chapterMarkerList.length > 1;
// Current chapter name for the always-visible header label (live playback).
const currentChapterName = useMemo(
() => (hasChapters ? chapterNameAt(currentTime, chapters) : null),
[hasChapters, currentTime, chapters],
);
// Chapter name at the scrubbed position for the trickplay bubble. `time` is
// an {h,m,s} object derived from the slider's dragged value — convert back
// to ms for the lookup. Only useful while actively scrubbing.
const scrubChapterName = useMemo(() => {
if (!hasChapters) return null;
const scrubMs =
(time.hours * 3600 + time.minutes * 60 + time.seconds) * 1000;
return chapterNameAt(scrubMs, chapters);
}, [hasChapters, time.hours, time.minutes, time.seconds, chapters]);
return ( return (
<View <View
@@ -181,24 +136,8 @@ export const BottomControls: FC<BottomControlsProps> = ({
{item?.Type === "Audio" && ( {item?.Type === "Audio" && (
<Text className='text-xs opacity-50'>{item?.Album}</Text> <Text className='text-xs opacity-50'>{item?.Album}</Text>
)} )}
{currentChapterName ? (
<Text className='text-xs opacity-70 mt-1' numberOfLines={1}>
{currentChapterName}
</Text>
) : null}
</View> </View>
<View className='flex flex-row items-center space-x-2 shrink-0'> <View className='flex flex-row space-x-2 shrink-0'>
{hasChapters && (
<Pressable
onPress={() => setChapterListVisible(true)}
hitSlop={10}
className='justify-center mr-4'
accessibilityRole='button'
accessibilityLabel={t("chapters.open")}
>
<Ionicons name='bookmarks' size={24} color='white' />
</Pressable>
)}
<SkipButton <SkipButton
showButton={showSkipButton} showButton={showSkipButton}
onPress={skipIntro} onPress={skipIntro}
@@ -242,9 +181,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
height: 10, height: 10,
justifyContent: "center", justifyContent: "center",
alignItems: "stretch", alignItems: "stretch",
// Allow chapter ticks taller than the 10px track to bleed out position: "relative",
// top/bottom (RN defaults to overflow: "hidden" on Android).
overflow: "visible",
}} }}
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
@@ -272,7 +209,6 @@ export const BottomControls: FC<BottomControlsProps> = ({
trickPlayUrl={trickPlayUrl} trickPlayUrl={trickPlayUrl}
trickplayInfo={trickplayInfo} trickplayInfo={trickplayInfo}
time={time} time={time}
chapterName={scrubChapterName}
/> />
) )
} }
@@ -282,7 +218,7 @@ export const BottomControls: FC<BottomControlsProps> = ({
minimumValue={min} minimumValue={min}
maximumValue={max} maximumValue={max}
/> />
<ChapterTicks markers={chapterMarkerList} height={TICK_HEIGHT} /> <ChapterMarkers chapterPositions={chapterPositions} />
</View> </View>
<TimeDisplay <TimeDisplay
currentTime={currentTime} currentTime={currentTime}
@@ -290,13 +226,6 @@ export const BottomControls: FC<BottomControlsProps> = ({
/> />
</View> </View>
</View> </View>
<ChapterList
visible={chapterListVisible}
chapters={chapters}
currentPositionMs={currentTime}
onSeek={seekTo}
onClose={() => setChapterListVisible(false)}
/>
</View> </View>
); );
}; };

View File

@@ -88,14 +88,14 @@ const BrightnessSlider = () => {
maximumValue={max} maximumValue={max}
thumbWidth={0} thumbWidth={0}
onValueChange={handleValueChange} onValueChange={handleValueChange}
renderBubble={() => null}
renderThumb={() => null}
containerStyle={{ containerStyle={{
borderRadius: 50, borderRadius: 50,
}} }}
theme={{ theme={{
minimumTrackTintColor: "#FDFDFD", minimumTrackTintColor: "#FDFDFD",
maximumTrackTintColor: "#5A5A5A", maximumTrackTintColor: "#5A5A5A",
bubbleBackgroundColor: "transparent", // Hide the value bubble
bubbleTextColor: "transparent", // Hide the value text
}} }}
/> />
<Ionicons <Ionicons

View File

@@ -267,7 +267,6 @@ export const Controls: FC<Props> = ({
handleTouchEnd, handleTouchEnd,
handleSliderComplete, handleSliderComplete,
handleSliderChange, handleSliderChange,
seekTo,
} = useVideoSlider({ } = useVideoSlider({
progress, progress,
isSeeking, isSeeking,
@@ -556,8 +555,6 @@ export const Controls: FC<Props> = ({
> >
<BottomControls <BottomControls
item={item} item={item}
chapters={item.Chapters}
durationMs={maxMs}
showControls={showControls} showControls={showControls}
isSliding={isSliding} isSliding={isSliding}
showRemoteBubble={showRemoteBubble} showRemoteBubble={showRemoteBubble}
@@ -581,7 +578,6 @@ export const Controls: FC<Props> = ({
handleSliderChange={handleSliderChange} handleSliderChange={handleSliderChange}
handleTouchStart={handleTouchStart} handleTouchStart={handleTouchStart}
handleTouchEnd={handleTouchEnd} handleTouchEnd={handleTouchEnd}
seekTo={seekTo}
trickPlayUrl={trickPlayUrl} trickPlayUrl={trickPlayUrl}
trickplayInfo={trickplayInfo} trickplayInfo={trickplayInfo}
time={isSliding || showRemoteBubble ? time : remoteTime} time={isSliding || showRemoteBubble ? time : remoteTime}

View File

@@ -59,7 +59,6 @@ import { useRemoteControl } from "./hooks/useRemoteControl";
import { useVideoTime } from "./hooks/useVideoTime"; import { useVideoTime } from "./hooks/useVideoTime";
import { TechnicalInfoOverlay } from "./TechnicalInfoOverlay"; import { TechnicalInfoOverlay } from "./TechnicalInfoOverlay";
import { TrickplayBubble } from "./TrickplayBubble"; import { TrickplayBubble } from "./TrickplayBubble";
import type { Track } from "./types";
import { useControlsTimeout } from "./useControlsTimeout"; import { useControlsTimeout } from "./useControlsTimeout";
interface Props { interface Props {
@@ -233,8 +232,14 @@ export const Controls: FC<Props> = ({
const api = useAtomValue(apiAtom); const api = useAtomValue(apiAtom);
const { settings } = useSettings(); const { settings } = useSettings();
const router = useRouter(); const router = useRouter();
const { bitrateValue } = useLocalSearchParams<{ const {
bitrateValue,
subtitleIndex: paramSubtitleIndex,
audioIndex: paramAudioIndex,
} = useLocalSearchParams<{
bitrateValue: string; bitrateValue: string;
subtitleIndex: string;
audioIndex: string;
}>(); }>();
const { nextItem: internalNextItem } = usePlaybackManager({ const { nextItem: internalNextItem } = usePlaybackManager({
@@ -310,31 +315,6 @@ export const Controls: FC<Props> = ({
[onSubtitleIndexChange], [onSubtitleIndexChange],
); );
// Re-fetch subtitle streams from the server (e.g. after a server-side
// download) and map them to the modal's Track shape. setTrack drives the
// player through the same handler used for manual subtitle selection.
const refreshSubtitleTracks = useCallback(async (): Promise<Track[]> => {
try {
const streams = (await onRefreshSubtitleTracks?.()) ?? [];
// Skip streams without a real index: `?? -1` would alias them to the
// "disable subtitles" sentinel and mis-route selection.
return streams
.filter((stream) => typeof stream.Index === "number")
.map((stream) => {
const index = stream.Index as number;
return {
name:
stream.DisplayTitle ||
`${stream.Language || "Unknown"} (${stream.Codec})`,
index,
setTrack: () => onSubtitleIndexChange?.(index),
};
});
} catch {
return [];
}
}, [onRefreshSubtitleTracks, onSubtitleIndexChange]);
const { const {
trickPlayUrl, trickPlayUrl,
calculateTrickplayUrl, calculateTrickplayUrl,
@@ -511,8 +491,6 @@ export const Controls: FC<Props> = ({
const goToNextItemRef = useRef<(opts?: { isAutoPlay?: boolean }) => void>( const goToNextItemRef = useRef<(opts?: { isAutoPlay?: boolean }) => void>(
() => {}, () => {},
); );
const exitingRef = useRef(false);
const [isExiting, setIsExiting] = useState(false);
const updateSeekBubbleTime = useCallback((ms: number) => { const updateSeekBubbleTime = useCallback((ms: number) => {
const totalSeconds = Math.floor(ms / 1000); const totalSeconds = Math.floor(ms / 1000);
@@ -577,22 +555,10 @@ export const Controls: FC<Props> = ({
const handleOpenSubtitleSheet = useCallback(() => { const handleOpenSubtitleSheet = useCallback(() => {
setLastOpenedModal("subtitle"); setLastOpenedModal("subtitle");
// Filter out the "Disable" option from VideoContext tracks since the modal adds its own "None" option. // Filter out the "Disable" option from VideoContext tracks since the modal adds its own "None" option
// Wrap each setTrack so selecting a subtitle ALSO updates the player's live const tracksWithoutDisable = (videoContextSubtitleTracks ?? []).filter(
// index via onSubtitleIndexChange. The modal is a separate route, so the (track) => track.index !== -1,
// VideoContext router.setParams inside setTrack targets the modal — not the );
// player — leaving currentSubtitleIndex stale. Without this sync, the next
// episode carries the previously-shown subtitle instead of the one the user
// just picked. (The audio sheet already uses onAudioIndexChange directly.)
const tracksWithoutDisable = (videoContextSubtitleTracks ?? [])
.filter((track) => track.index !== -1)
.map((track) => ({
...track,
setTrack: () => {
track.setTrack();
onSubtitleIndexChange?.(track.index);
},
}));
showSubtitleModal({ showSubtitleModal({
item, item,
mediaSourceId: mediaSource?.Id, mediaSourceId: mediaSource?.Id,
@@ -604,12 +570,8 @@ export const Controls: FC<Props> = ({
(t) => t.index === -1, (t) => t.index === -1,
); );
disableTrack?.setTrack(); disableTrack?.setTrack();
onSubtitleIndexChange?.(-1);
}, },
onLocalSubtitleDownloaded: handleLocalSubtitleDownloaded, onLocalSubtitleDownloaded: handleLocalSubtitleDownloaded,
refreshSubtitleTracks: onRefreshSubtitleTracks
? refreshSubtitleTracks
: undefined,
}); });
controlsInteractionRef.current(); controlsInteractionRef.current();
}, [ }, [
@@ -618,10 +580,7 @@ export const Controls: FC<Props> = ({
mediaSource?.Id, mediaSource?.Id,
videoContextSubtitleTracks, videoContextSubtitleTracks,
subtitleIndex, subtitleIndex,
onSubtitleIndexChange,
handleLocalSubtitleDownloaded, handleLocalSubtitleDownloaded,
onRefreshSubtitleTracks,
refreshSubtitleTracks,
]); ]);
const handleToggleTechnicalInfo = useCallback(() => { const handleToggleTechnicalInfo = useCallback(() => {
@@ -970,16 +929,6 @@ export const Controls: FC<Props> = ({
router.back(); router.back();
}, [router]); }, [router]);
const handleWillExit = useCallback(() => {
exitingRef.current = true;
setIsExiting(true);
}, []);
const handleCancelExit = useCallback(() => {
exitingRef.current = false;
setIsExiting(false);
}, []);
const { isSliding: isRemoteSliding } = useRemoteControl({ const { isSliding: isRemoteSliding } = useRemoteControl({
showControls: showControls, showControls: showControls,
toggleControls, toggleControls,
@@ -996,8 +945,6 @@ export const Controls: FC<Props> = ({
onVerticalDpad: handleVerticalDpad, onVerticalDpad: handleVerticalDpad,
onHideControls: hideControls, onHideControls: hideControls,
onBack: handleBack, onBack: handleBack,
onWillExit: handleWillExit,
onCancelExit: handleCancelExit,
videoTitle: item?.Name ?? undefined, videoTitle: item?.Name ?? undefined,
}); });
@@ -1039,12 +986,13 @@ export const Controls: FC<Props> = ({
return; return;
} }
// Use the live selection passed down from the player (currentSubtitleIndex
// / currentAudioIndex), not the stale URL params the episode started with.
// This path runs on autoplay; the manual "Next" button uses goToNextItemProp.
const previousIndexes = { const previousIndexes = {
subtitleIndex, subtitleIndex: paramSubtitleIndex
audioIndex, ? Number.parseInt(paramSubtitleIndex, 10)
: undefined,
audioIndex: paramAudioIndex
? Number.parseInt(paramAudioIndex, 10)
: undefined,
}; };
const { const {
@@ -1071,8 +1019,8 @@ export const Controls: FC<Props> = ({
[ [
nextItem, nextItem,
settings, settings,
subtitleIndex, paramSubtitleIndex,
audioIndex, paramAudioIndex,
mediaSource, mediaSource,
bitrateValue, bitrateValue,
router, router,
@@ -1082,7 +1030,6 @@ export const Controls: FC<Props> = ({
goToNextItemRef.current = goToNextItem; goToNextItemRef.current = goToNextItem;
const handleAutoPlayFinish = useCallback(() => { const handleAutoPlayFinish = useCallback(() => {
if (exitingRef.current) return;
goToNextItem({ isAutoPlay: true }); goToNextItem({ isAutoPlay: true });
}, [goToNextItem]); }, [goToNextItem]);
@@ -1157,7 +1104,7 @@ export const Controls: FC<Props> = ({
nextItem={nextItem} nextItem={nextItem}
api={api} api={api}
show={isCountdownActive} show={isCountdownActive}
isPlaying={isPlaying && !isExiting} isPlaying={isPlaying}
onFinish={handleAutoPlayFinish} onFinish={handleAutoPlayFinish}
onPlayNext={handleNextItemButton} onPlayNext={handleNextItemButton}
controlsVisible={showControls} controlsVisible={showControls}
@@ -1461,14 +1408,14 @@ export const Controls: FC<Props> = ({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
controlsContainer: { controlsContainer: {
...StyleSheet.absoluteFill, ...StyleSheet.absoluteFillObject,
}, },
darkOverlay: { darkOverlay: {
...StyleSheet.absoluteFill, ...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0, 0, 0, 0.4)", backgroundColor: "rgba(0, 0, 0, 0.4)",
}, },
focusStealingOverlay: { focusStealingOverlay: {
...StyleSheet.absoluteFill, ...StyleSheet.absoluteFillObject,
zIndex: 1, zIndex: 1,
}, },
bottomContainer: { bottomContainer: {

View File

@@ -1,5 +1,4 @@
import type { FC } from "react"; import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native"; import { View } from "react-native";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { formatTimeString } from "@/utils/time"; import { formatTimeString } from "@/utils/time";
@@ -17,8 +16,6 @@ export const TimeDisplay: FC<TimeDisplayProps> = ({
currentTime, currentTime,
remainingTime, remainingTime,
}) => { }) => {
const { t } = useTranslation();
const getFinishTime = () => { const getFinishTime = () => {
const now = new Date(); const now = new Date();
// remainingTime is in ms // remainingTime is in ms
@@ -40,7 +37,7 @@ export const TimeDisplay: FC<TimeDisplayProps> = ({
-{formatTimeString(remainingTime, "ms")} -{formatTimeString(remainingTime, "ms")}
</Text> </Text>
<Text className='text-[10px] text-neutral-500 opacity-70'> <Text className='text-[10px] text-neutral-500 opacity-70'>
{t("player.ends_at", { time: getFinishTime() })} ends at {getFinishTime()}
</Text> </Text>
</View> </View>
</View> </View>

View File

@@ -4,9 +4,7 @@ import { View } from "react-native";
import { Text } from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import { CONTROLS_CONSTANTS } from "./constants"; import { CONTROLS_CONSTANTS } from "./constants";
// Slightly larger preview (scale 1.6 vs old 1.4) to give the overlay text const BASE_IMAGE_SCALE = 1.4;
// more room and feel closer to the Jellyfin web style.
const BASE_IMAGE_SCALE = 1.6;
const BUBBLE_LEFT_OFFSET = 62; const BUBBLE_LEFT_OFFSET = 62;
const BUBBLE_WIDTH_MULTIPLIER = 1.5; const BUBBLE_WIDTH_MULTIPLIER = 1.5;
@@ -30,8 +28,12 @@ interface TrickplayBubbleProps {
}; };
/** Scale factor for the image (default 1). Does not affect timestamp text. */ /** Scale factor for the image (default 1). Does not affect timestamp text. */
imageScale?: number; imageScale?: number;
/** Chapter name at the scrubbed position, if any. */ }
chapterName?: string | null;
function formatTime(hours: number, minutes: number, seconds: number): string {
const pad = (n: number) => (n < 10 ? `0${n}` : `${n}`);
const prefix = hours > 0 ? `${hours}:` : "";
return `${prefix}${pad(minutes)}:${pad(seconds)}`;
} }
export const TrickplayBubble: FC<TrickplayBubbleProps> = ({ export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
@@ -39,7 +41,6 @@ export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
trickplayInfo, trickplayInfo,
time, time,
imageScale = 1, imageScale = 1,
chapterName,
}) => { }) => {
if (!trickPlayUrl || !trickplayInfo) { if (!trickPlayUrl || !trickplayInfo) {
return null; return null;
@@ -48,28 +49,19 @@ export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
const { x, y, url } = trickPlayUrl; const { x, y, url } = trickPlayUrl;
const tileWidth = CONTROLS_CONSTANTS.TILE_WIDTH; const tileWidth = CONTROLS_CONSTANTS.TILE_WIDTH;
const tileHeight = tileWidth / trickplayInfo.aspectRatio!; const tileHeight = tileWidth / trickplayInfo.aspectRatio!;
const timeStr = `${time.hours > 0 ? `${time.hours}:` : ""}${
time.minutes < 10 ? `0${time.minutes}` : time.minutes
}:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`;
const finalScale = BASE_IMAGE_SCALE * imageScale; const finalScale = BASE_IMAGE_SCALE * imageScale;
return ( return (
<View <View
style={{ style={{
position: "absolute", position: "absolute",
// Sit just above the slider — high enough not to overlap the
// progress bar, low enough to feel anchored to the thumb.
left: -BUBBLE_LEFT_OFFSET * imageScale, left: -BUBBLE_LEFT_OFFSET * imageScale,
bottom: 0, bottom: 0,
paddingTop: 12, paddingTop: 30,
paddingBottom: 5, paddingBottom: 5,
width: tileWidth * BUBBLE_WIDTH_MULTIPLIER * imageScale, width: tileWidth * BUBBLE_WIDTH_MULTIPLIER * imageScale,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
// Bring the bubble in front of the player title / overlays.
zIndex: 999,
elevation: 10,
}} }}
> >
<View <View
@@ -97,51 +89,10 @@ export const TrickplayBubble: FC<TrickplayBubbleProps> = ({
source={{ uri: url }} source={{ uri: url }}
contentFit='cover' contentFit='cover'
/> />
{/*
* Bottom-right overlay (Jellyfin web style) — chapter name (small,
* faded) above the timestamp (small, bold). Sits on top of the
* trickplay frame inside the same overflow:hidden container so it
* always stays within the bubble bounds.
*/}
<View
pointerEvents='none'
style={{
position: "absolute",
left: 4,
bottom: 3,
alignItems: "flex-start",
paddingHorizontal: 3,
paddingVertical: 1,
borderRadius: 3,
backgroundColor: "rgba(0,0,0,0.55)",
maxWidth: tileWidth - 8,
}}
>
{chapterName ? (
<Text
numberOfLines={1}
style={{
color: "#fff",
fontSize: 7,
opacity: 0.85,
lineHeight: 9,
}}
>
{chapterName}
</Text>
) : null}
<Text
style={{
color: "#fff",
fontSize: 8,
fontWeight: "600",
lineHeight: 10,
}}
>
{timeStr}
</Text>
</View>
</View> </View>
<Text style={{ marginTop: 30, fontSize: 16 }}>
{formatTime(time.hours, time.minutes, time.seconds)}
</Text>
</View> </View>
); );
}; };

View File

@@ -35,10 +35,6 @@ interface UseRemoteControlProps {
onLongSeekStop?: () => void; onLongSeekStop?: () => void;
/** Callback when up/down D-pad pressed (to show controls with play button focused) */ /** Callback when up/down D-pad pressed (to show controls with play button focused) */
onVerticalDpad?: () => void; onVerticalDpad?: () => void;
/** Called before the exit confirmation Alert is shown (e.g., to pause countdown) */
onWillExit?: () => void;
/** Called when the user cancels the exit confirmation Alert */
onCancelExit?: () => void;
// Legacy props - kept for backwards compatibility with mobile Controls.tsx // Legacy props - kept for backwards compatibility with mobile Controls.tsx
// These are ignored in the simplified implementation // These are ignored in the simplified implementation
progress?: SharedValue<number>; progress?: SharedValue<number>;
@@ -76,8 +72,6 @@ export function useRemoteControl({
onLongSeekRightStart, onLongSeekRightStart,
onLongSeekStop, onLongSeekStop,
onVerticalDpad, onVerticalDpad,
onWillExit,
onCancelExit,
}: UseRemoteControlProps) { }: UseRemoteControlProps) {
// Keep these for backward compatibility with the component // Keep these for backward compatibility with the component
const remoteScrubProgress = useSharedValue<number | null>(null); const remoteScrubProgress = useSharedValue<number | null>(null);
@@ -91,24 +85,13 @@ export function useRemoteControl({
const onHideControlsRef = useRef(onHideControls); const onHideControlsRef = useRef(onHideControls);
const onBackRef = useRef(onBack); const onBackRef = useRef(onBack);
const videoTitleRef = useRef(videoTitle); const videoTitleRef = useRef(videoTitle);
const onWillExitRef = useRef(onWillExit);
const onCancelExitRef = useRef(onCancelExit);
useEffect(() => { useEffect(() => {
showControlsRef.current = showControls; showControlsRef.current = showControls;
onHideControlsRef.current = onHideControls; onHideControlsRef.current = onHideControls;
onBackRef.current = onBack; onBackRef.current = onBack;
videoTitleRef.current = videoTitle; videoTitleRef.current = videoTitle;
onWillExitRef.current = onWillExit; }, [showControls, onHideControls, onBack, videoTitle]);
onCancelExitRef.current = onCancelExit;
}, [
showControls,
onHideControls,
onBack,
videoTitle,
onWillExit,
onCancelExit,
]);
// BackHandler owns player exit: Android TV sends hardware back here, and // BackHandler owns player exit: Android TV sends hardware back here, and
// react-native-tvos maps the Apple TV menu button to the same API. // react-native-tvos maps the Apple TV menu button to the same API.
@@ -119,9 +102,6 @@ export function useRemoteControl({
return true; return true;
} }
if (onBackRef.current) { if (onBackRef.current) {
// Signal Controls that exit is imminent (pauses countdown, sets guard)
onWillExitRef.current?.();
// Controls are hidden, so confirm before leaving playback. // Controls are hidden, so confirm before leaving playback.
Alert.alert( Alert.alert(
"Stop Playback", "Stop Playback",
@@ -129,11 +109,7 @@ export function useRemoteControl({
? `Stop playing "${videoTitleRef.current}"?` ? `Stop playing "${videoTitleRef.current}"?`
: "Are you sure you want to stop playback?", : "Are you sure you want to stop playback?",
[ [
{ { text: "Cancel", style: "cancel" },
text: "Cancel",
style: "cancel",
onPress: () => onCancelExitRef.current?.(),
},
{ text: "Stop", style: "destructive", onPress: onBackRef.current }, { text: "Stop", style: "destructive", onPress: onBackRef.current },
], ],
); );

View File

@@ -74,21 +74,6 @@ export function useVideoSlider({
[seek, play, progress, isSeeking], [seek, play, progress, isSeeking],
); );
// Programmatic seek (chapter list, hotkeys) that bypasses the slide gesture.
// Reads `isPlaying` directly instead of `wasPlayingRef`, which is only set
// during a real slide and would carry stale state on a tap-to-seek.
const seekTo = useCallback(
(value: number) => {
const seekValue = Math.max(0, Math.floor(value));
progress.value = seekValue;
seek(seekValue);
if (isPlaying) {
play();
}
},
[seek, play, progress, isPlaying],
);
const handleSliderChange = useCallback( const handleSliderChange = useCallback(
debounce((value: number) => { debounce((value: number) => {
// Convert ms to ticks for trickplay // Convert ms to ticks for trickplay
@@ -111,6 +96,5 @@ export function useVideoSlider({
handleTouchEnd, handleTouchEnd,
handleSliderComplete, handleSliderComplete,
handleSliderChange, handleSliderChange,
seekTo,
}; };
} }

View File

@@ -28,4 +28,4 @@ type Track = {
localPath?: string; localPath?: string;
}; };
export type { EmbeddedSubtitle, ExternalSubtitle, Track, TranscodedSubtitle }; export type { EmbeddedSubtitle, ExternalSubtitle, TranscodedSubtitle, Track };

39
constants/Languages.ts Normal file
View File

@@ -0,0 +1,39 @@
import type { DefaultLanguageOption } from "@/utils/atoms/settings";
export const LANGUAGES: DefaultLanguageOption[] = [
{ label: "English", value: "eng" },
{ label: "Spanish", value: "spa" },
{ label: "Chinese (Mandarin)", value: "cmn" },
{ label: "Hindi", value: "hin" },
{ label: "Arabic", value: "ara" },
{ label: "French", value: "fra" },
{ label: "Russian", value: "rus" },
{ label: "Portuguese", value: "por" },
{ label: "Japanese", value: "jpn" },
{ label: "German", value: "deu" },
{ label: "Italian", value: "ita" },
{ label: "Korean", value: "kor" },
{ label: "Turkish", value: "tur" },
{ label: "Dutch", value: "nld" },
{ label: "Polish", value: "pol" },
{ label: "Vietnamese", value: "vie" },
{ label: "Thai", value: "tha" },
{ label: "Indonesian", value: "ind" },
{ label: "Greek", value: "ell" },
{ label: "Swedish", value: "swe" },
{ label: "Danish", value: "dan" },
{ label: "Norwegian", value: "nor" },
{ label: "Finnish", value: "fin" },
{ label: "Czech", value: "ces" },
{ label: "Hungarian", value: "hun" },
{ label: "Romanian", value: "ron" },
{ label: "Ukrainian", value: "ukr" },
{ label: "Hebrew", value: "heb" },
{ label: "Bengali", value: "ben" },
{ label: "Punjabi", value: "pan" },
{ label: "Tagalog", value: "tgl" },
{ label: "Swahili", value: "swa" },
{ label: "Malay", value: "msa" },
{ label: "Persian", value: "fas" },
{ label: "Urdu", value: "urd" },
];

Some files were not shown because too many files have changed in this diff Show More