ci(issue-form): auto-populate version dropdown from GitHub releases

Replaces the broken update workflow (it targeted a non-existent bug_report.yml
via the npm-based populate action; Streamyfin isn't on npm) with
scripts/update-issue-form.mjs (Bun, dep-free): reads release tags via gh and
rewrites the 'version' dropdown in issue_report.yml, preserving sentinels
(older, TestFlight/Development build), newest-first, capped at
ISSUE_FORM_LIMIT (5) — so each new release rotates the oldest entry out.

Drafts/prereleases are included on purpose: release.yml drafts
v<app.json version> for every TestFlight (iOS) / beta (Android) build, and the
app shows that nativeApplicationVersion to users (UserInfo.tsx), so those
in-flight versions must be selectable. Runs on release events + a weekly cron
safety net + workflow_dispatch, opens a PR and enables auto-merge. Seeds the
current versions.

.github/ISSUE_TEMPLATE/issue_report.yml

@@ -77,10 +77,12 @@ body:
       label: Streamyfin Version
       description: What version of Streamyfin are you running?
       options:
+        - 0.54.1 (TestFlight)
+        - 0.51.0
         - 0.47.1
         - 0.30.2
+        - 0.28.0
         - older
-        - TestFlight/Development build
     validations:
       required: true
 

.github/workflows/update-issue-form.yml

@@ -1,67 +1,91 @@
-name: 🐛 Update Bug Report Template
+name: 🐛 Update Issue Form Versions
 
 on:
   release:
-    types: [published]  # Run on every published release on any branch
+    # Also fire on drafts/prereleases so versions that aren't a full release yet
+    # (TestFlight / dev builds) still land in the dropdown.
+    types: [published, released, prereleased, created, deleted]
+  schedule:
+    - cron: "0 3 * * 1" # Weekly safety net (Mondays 03:00 UTC) in case a release event was missed
+  workflow_dispatch:
 
 concurrency:
   group: update-issue-form-${{ github.event.release.tag_name || github.run_id }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
-  update-bug-report:
+  update-issue-form:
+    name: 🔢 Populate version dropdown
+    runs-on: ubuntu-24.04
     permissions:
       contents: write
       pull-requests: write
-      issues: write
-    runs-on: ubuntu-24.04
-
     steps:
       - name: 📥 Checkout repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
-      - name: "🟢 Setup Node.js"
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      - name: 🍞 Setup Bun
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2.2.0
         with:
-          node-version: '24.x'
-          cache: 'npm'
+          bun-version: latest
 
-      - name: 🔍 Extract minor version from app.json
-        id: minor
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # main
-        with:
-          result-encoding: string
-          script: |
-            const fs = require('fs-extra');
-            const semver = require('semver');
-            const content = fs.readJsonSync('./app.json');
-            const version = content.expo.version;
-            const minorVersion = semver.minor(version);
-            return minorVersion.toString();
+      - name: 🔢 Populate version dropdown from GitHub releases
+        id: populate
+        run: bun scripts/update-issue-form.mjs
+        env:
+          GH_TOKEN: ${{ github.token }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
 
-      - name: 📝 Update bug report version
-        uses: ShaMan123/gha-populate-form-version@be012141ca560dbb92156e3fe098c46035f6260d #v2.0.5
-        with:
-          semver: '^0.${{ steps.minor.outputs.result }}.0'
-          dry_run: no-push
-
-      - name: ⚙️ Update bug report node version dropdown
-        uses: ShaMan123/gha-populate-form-version@be012141ca560dbb92156e3fe098c46035f6260d #v2.0.5
-        with:
-          dropdown: _node_version
-          package: node
-          semver: '>=24.0.0'
-          dry_run: no-push
-
-      - name: 📬 Commit and create pull request
+      - name: 📬 Create pull request
+        id: cpr
         uses: peter-evans/create-pull-request@5f6978faf089d4d20b00c7766989d076bb2fc7f1 # v8.1.1
         with:
-          add-paths: .github/ISSUE_TEMPLATE/bug_report.yml
-          branch: ci-update-bug-report
+          add-paths: .github/ISSUE_TEMPLATE/issue_report.yml
+          branch: ci/update-issue-form
           base: develop
           delete-branch: true
           labels: ⚙️ ci, 🤖 github-actions
-          title: 'chore(): Update bug report template to match release version'
+          commit-message: "chore: update issue form version dropdown"
+          title: "chore: update issue form version dropdown"
+          # Follows .github/pull_request_template.md so the bot PR isn't flagged by PR validation.
           body: |
-            Automated update to `.github/ISSUE_TEMPLATE/bug_report.yml`
-            Triggered by workflow run [${{ github.run_id }}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
+            # 📦 Pull Request
+
+            ## 📝 Description
+
+            Automated update of the **Streamyfin Version** dropdown in `.github/ISSUE_TEMPLATE/issue_report.yml`, populated from the latest GitHub releases by `scripts/update-issue-form.mjs` (draft releases shown as `X (TestFlight)`).
+
+            **Version dropdown now lists:** ${{ steps.populate.outputs.versions }}
+
+            Triggered by `${{ github.event_name }}`${{ github.event.release.tag_name && format(' — release {0}', github.event.release.tag_name) || '' }} · [run ${{ github.run_id }}](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}).
+
+            ## 🏷️ Ticket / Issue
+
+            N/A — automated maintenance.
+
+            ### 🖼️ Screenshots / GIFs (if UI)
+
+            N/A — issue-template metadata only, no app UI.
+
+            ## ✅ Checklist
+
+            - [x] I’ve read the [contribution guidelines](CONTRIBUTING.md)
+            - [x] Verified that changes behave as expected for all platforms
+            - [x] Code passes lint/formatting and type checks (`tsc`/`biome`)
+            - [x] No secrets, hardcoded credentials, or private config files are included
+            - [x] I've declared if AI was used to assist with this PR (by uncommenting the line at the bottom, or not)
+
+            ## 🔍 Testing Instructions
+
+            N/A — generated by CI from published releases; review the dropdown diff in `issue_report.yml`.
+
+      - name: 🔀 Enable auto-merge
+        if: steps.cpr.outputs.pull-request-operation == 'created'
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh pr merge --squash --auto "${{ steps.cpr.outputs.pull-request-number }}" \
+            || echo "::warning::Could not enable auto-merge — enable 'Allow auto-merge' in repo settings (and branch protection); merge the PR manually for now."

GLOBAL_MODAL_GUIDE.md

@@ -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
 
 The modal uses these default styles (can be overridden via options):

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

@@ -166,7 +166,7 @@ export default function IndexLayout() {
                 open={dropdownOpen}
                 onOpenChange={setDropdownOpen}
                 trigger={
-                  <View>
+                  <View className='pl-1.5'>
                     <Ionicons
                       name='ellipsis-horizontal-outline'
                       size={24}

augmentations/index.ts

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

augmentations/number.ts

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

augmentations/string.ts

@@ -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 {};

components/ExampleGlobalModalUsage.tsx

@@ -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>
+  );
+};

components/PlatformDropdown.tsx

@@ -1,7 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import React, { useEffect } from "react";
-import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import {
+  type LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
@@ -211,6 +217,24 @@ const PlatformDropdownComponent = ({
 }: PlatformDropdownProps) => {
   const { showModal, hideModal, isVisible } = useGlobalModal();
 
+  // @expo/ui's <Host> (SDK 55) fills its available space by default, and
+  // `matchContents` doesn't help here: it reports the native Menu's size via
+  // setStyleSize and overrides any explicit size. Instead we measure the
+  // trigger's intrinsic size in plain RN (off-layout) and pin it on the Host.
+  const [triggerSize, setTriggerSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const handleMeasureTrigger = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setTriggerSize((prev) =>
+      prev && prev.width === width && prev.height === height
+        ? prev
+        : { width, height },
+    );
+  };
+
   // Handle controlled open state for Android
   useEffect(() => {
     if (Platform.OS === "android" && controlledOpen === true) {
@@ -241,11 +265,25 @@ const PlatformDropdownComponent = ({
   }, [isVisible, controlledOpen, controlledOnOpenChange]);
 
   if (Platform.OS === "ios" && !Platform.isTV) {
-    // @expo/ui's <Host> can't size to content, so an in-flow invisible copy of
-    // the trigger sizes the wrapper while the Host overlays the real Menu.
+    // Pin the wrapper to the measured trigger size. @expo/ui's <Host> (SDK 55)
+    // fills its parent and reports its own size via setStyleSize, so it can't
+    // size itself to content. If the wrapper has no size, the Host's `flex: 1`
+    // height depends on the parent while the parent depends on the Host — a
+    // circular dependency that collapses to 0 for any selector nested more than
+    // one level deep (so only the first, shallowest dropdown stays visible).
+    // Giving the wrapper the measured size breaks the cycle; the Host then
+    // fills a concrete box.
     return (
-      <View>
-        <View pointerEvents='none' aria-hidden style={{ opacity: 0 }}>
+      <View style={triggerSize ?? { opacity: 0 }}>
+        {/* Hidden measurer: lays the trigger out off-flow to capture its
+            intrinsic size. Absolutely positioned WITHOUT right/bottom so it
+            sizes to the trigger's content rather than to its parent. */}
+        <View
+          style={{ position: "absolute", top: 0, left: 0, opacity: 0 }}
+          pointerEvents='none'
+          aria-hidden
+          onLayout={handleMeasureTrigger}
+        >
           {trigger}
         </View>
         <Host style={[StyleSheet.absoluteFill, expoUIConfig?.hostStyle as any]}>

components/chapters/ChapterList.tsx

@@ -11,7 +11,6 @@ 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 { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import {
   type ChapterEntry,
   chapterStartsMs,
@@ -39,7 +38,6 @@ function ChapterListComponent({
   onClose,
 }: ChapterListProps) {
   const { t } = useTranslation();
-  const safeArea = useControlsSafeAreaInsets();
   const listRef = useRef<FlatList<ChapterEntry>>(null);
 
   const entries = useMemo(() => sortedChapters(chapters), [chapters]);
@@ -81,17 +79,7 @@ function ChapterListComponent({
       supportedOrientations={["portrait", "landscape"]}
     >
       <Pressable onPress={onClose} style={styles.backdrop}>
-        <Pressable
-          onPress={(e) => e.stopPropagation()}
-          style={[
-            styles.sheet,
-            {
-              marginLeft: safeArea.left,
-              marginRight: safeArea.right,
-              paddingBottom: safeArea.bottom,
-            },
-          ]}
-        >
+        <Pressable onPress={(e) => e.stopPropagation()} style={styles.sheet}>
           <View style={styles.header}>
             <Text style={styles.title}>{t("chapters.title")}</Text>
             <Pressable
@@ -172,12 +160,14 @@ 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",

components/common/LargePoster.tsx

@@ -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>
+  );
+};

components/common/VerticalSkeleton.tsx

@@ -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>
+  );
+};

components/home/Home.tsx

@@ -133,6 +133,7 @@ const HomeMobile = () => {
           onPress={() => {
             router.push("/(auth)/downloads");
           }}
+          className='ml-1.5'
           style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
         >
           <Feather

components/navigation/TabBarIcon.tsx

@@ -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} />;
+}

components/posters/EpisodePoster.tsx

@@ -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>
+  );
+};

components/posters/ParentPoster.tsx

@@ -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;

components/search/TVJellyseerrSearchResults.tsx

@@ -401,6 +401,10 @@ export const TVJellyseerrSearchResults: React.FC<
 }) => {
   const { t } = useTranslation();
 
+  const hasMovies = movieResults && movieResults.length > 0;
+  const hasTv = tvResults && tvResults.length > 0;
+  const hasPersons = personResults && personResults.length > 0;
+
   if (loading) {
     return null;
   }
@@ -427,26 +431,22 @@ export const TVJellyseerrSearchResults: React.FC<
 
   return (
     <View>
-      {/* No section requests `hasTVPreferredFocus`: the native search field
-          keeps focus while typing, otherwise the first result would re-grab
-          focus on every keystroke as results re-render. The user navigates
-          down to the grid manually. */}
       <TVJellyseerrMovieSection
         title={t("search.request_movies")}
         items={movieResults}
-        isFirstSection={false}
+        isFirstSection={hasMovies}
         onItemPress={onMoviePress}
       />
       <TVJellyseerrTvSection
         title={t("search.request_series")}
         items={tvResults}
-        isFirstSection={false}
+        isFirstSection={!hasMovies && hasTv}
         onItemPress={onTvPress}
       />
       <TVJellyseerrPersonSection
         title={t("search.actors")}
         items={personResults}
-        isFirstSection={false}
+        isFirstSection={!hasMovies && !hasTv && hasPersons}
         onItemPress={onPersonPress}
       />
     </View>

components/search/TVSearchPage.tsx

@@ -235,13 +235,10 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
             module). It renders the native search bar + grid keyboard and
             forwards typed text into the existing query pipeline via setSearch;
             our own results grid renders below. */}
-        {/* No horizontal margin here: the native tvOS search bar centers itself
-            and renders a trailing "Hold to Dictate in <Language>" hint. Extra
-            margins squeeze the bar's width and clip that trailing hint, so let
-            the native view span the full width and own its own insets. */}
         <View
           style={{
             marginBottom: 24,
+            marginHorizontal: HORIZONTAL_PADDING,
             height: SEARCH_AREA_HEIGHT,
           }}
         >
@@ -283,17 +280,13 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
         {/* Library Search Results */}
         {isLibraryMode && !loading && (
           <View style={{ gap: SECTION_GAP }}>
-            {sections.map((section) => (
+            {sections.map((section, index) => (
               <TVSearchSection
                 key={section.key}
                 title={section.title}
                 items={section.items!}
                 orientation={section.orientation || "vertical"}
-                // Never auto-focus a result. The native search field owns focus
-                // while typing; `hasTVPreferredFocus` here would re-grab focus on
-                // every keystroke as results re-render. User navigates down to the
-                // grid manually.
-                isFirstSection={false}
+                isFirstSection={index === 0}
                 onItemPress={onItemPress}
                 onItemLongPress={onItemLongPress}
                 imageUrlGetter={

components/search/TVSearchSection.tsx

@@ -297,12 +297,12 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
         removeClippedSubviews={false}
         getItemLayout={getItemLayout}
         style={{ overflow: "visible" }}
-        // Edge padding via contentContainerStyle, NOT contentInset+contentOffset.
-        // contentOffset only applies on initial mount; since this FlatList is
-        // reused across searches (stable key), a second search left the inset
-        // without the offset and the grid snapped flush to the left edge.
+        contentInset={{
+          left: edgePadding,
+          right: edgePadding,
+        }}
+        contentOffset={{ x: -edgePadding, y: 0 }}
         contentContainerStyle={{
-          paddingHorizontal: edgePadding,
           paddingVertical: SCALE_PADDING,
         }}
       />

components/settings/Dashboard.tsx

@@ -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>
+  );
+};

components/settings/DownloadSettings.tsx

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

components/settings/DownloadSettings.tv.tsx

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

components/video-player/controls/BottomControls.tsx

@@ -8,10 +8,10 @@ import { useTranslation } from "react-i18next";
 import { Pressable, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { type SharedValue } from "react-native-reanimated";
+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 { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useSettings } from "@/utils/atoms/settings";
 import { chapterMarkers, chapterNameAt } from "@/utils/chapters";
 import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
@@ -75,6 +75,9 @@ interface BottomControlsProps {
     minutes: number;
     seconds: number;
   };
+
+  // Chapter props
+  chapterPositions?: number[];
 }
 
 export const BottomControls: FC<BottomControlsProps> = ({
@@ -108,10 +111,11 @@ export const BottomControls: FC<BottomControlsProps> = ({
   trickPlayUrl,
   trickplayInfo,
   time,
+  chapterPositions = [],
 }) => {
   const { settings } = useSettings();
   const { t } = useTranslation();
-  const insets = useControlsSafeAreaInsets();
+  const insets = useSafeAreaInsets();
   const [chapterListVisible, setChapterListVisible] = useState(false);
 
   // Only expose chapter UI when there are at least two real markers.
@@ -142,9 +146,13 @@ export const BottomControls: FC<BottomControlsProps> = ({
       style={[
         {
           position: "absolute",
-          right: insets.right,
-          left: insets.left,
-          bottom: Math.max(insets.bottom - 17, 0),
+          right:
+            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
+          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          bottom:
+            (settings?.safeAreaInControlsEnabled ?? true)
+              ? Math.max(insets.bottom - 17, 0)
+              : 0,
         },
       ]}
       className={"flex flex-col px-2"}
@@ -180,6 +188,17 @@ export const BottomControls: FC<BottomControlsProps> = ({
           ) : null}
         </View>
         <View className='flex flex-row items-center 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
             showButton={showSkipButton}
             onPress={skipIntro}
@@ -211,17 +230,6 @@ export const BottomControls: FC<BottomControlsProps> = ({
                 onPress={handleNextEpisodeManual}
               />
             )}
-          {hasChapters && (
-            <Pressable
-              onPress={() => setChapterListVisible(true)}
-              hitSlop={10}
-              className='justify-center ml-4'
-              accessibilityRole='button'
-              accessibilityLabel={t("chapters.open")}
-            >
-              <Ionicons name='bookmarks' size={24} color='white' />
-            </Pressable>
-          )}
         </View>
       </View>
       <View

components/video-player/controls/CenterControls.tsx

@@ -1,9 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { FC } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
-import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useSettings } from "@/utils/atoms/settings";
 import AudioSlider from "./AudioSlider";
 import BrightnessSlider from "./BrightnessSlider";
@@ -42,15 +42,15 @@ export const CenterControls: FC<CenterControlsProps> = ({
   goToNextChapter,
 }) => {
   const { settings } = useSettings();
-  const insets = useControlsSafeAreaInsets();
+  const insets = useSafeAreaInsets();
 
   return (
     <View
       style={{
         position: "absolute",
         top: "50%",
-        left: insets.left,
-        right: insets.right,
+        left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+        right: (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",

components/video-player/controls/Controls.tsx

@@ -219,6 +219,7 @@ export const Controls: FC<Props> = ({
     hasNextChapter,
     goToPreviousChapter,
     goToNextChapter,
+    chapterPositions,
   } = useChapterNavigation({
     chapters: item.Chapters,
     progress,
@@ -584,6 +585,7 @@ export const Controls: FC<Props> = ({
               trickPlayUrl={trickPlayUrl}
               trickplayInfo={trickplayInfo}
               time={isSliding || showRemoteBubble ? time : remoteTime}
+              chapterPositions={chapterPositions}
             />
           </Animated.View>
         </>

components/video-player/controls/Controls.tv.tsx

@@ -1254,7 +1254,7 @@ export const Controls: FC<Props> = ({
                 <Text
                   style={[styles.endsAtText, { fontSize: typography.callout }]}
                 >
-                  {t("player.ends_at", { time: getFinishTime() })}
+                  {t("player.ends_at")} {getFinishTime()}
                 </Text>
               </View>
             )}
@@ -1448,7 +1448,7 @@ export const Controls: FC<Props> = ({
                 <Text
                   style={[styles.endsAtText, { fontSize: typography.callout }]}
                 >
-                  {t("player.ends_at", { time: getFinishTime() })}
+                  {t("player.ends_at")} {getFinishTime()}
                 </Text>
               </View>
             )}

components/video-player/controls/EpisodeList.tsx

@@ -5,6 +5,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { atom, useAtom } from "jotai";
 import { useEffect, useMemo, useRef } from "react";
 import { TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import {
   HorizontalScroll,
@@ -16,10 +17,10 @@ import {
   SeasonDropdown,
   type SeasonIndexState,
 } from "@/components/series/SeasonDropdown";
-import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
+import { useSettings } from "@/utils/atoms/settings";
 import {
   getDownloadedEpisodesForSeason,
   getDownloadedSeasonNumbers,
@@ -45,7 +46,8 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
     scrollViewRef.current?.scrollToIndex(index, 100);
   };
   const isOffline = useOfflineMode();
-  const insets = useControlsSafeAreaInsets();
+  const { settings } = useSettings();
+  const insets = useSafeAreaInsets();
 
   // Set the initial season index
   useEffect(() => {
@@ -180,9 +182,12 @@ export const EpisodeList: React.FC<Props> = ({ item, close, goToItem }) => {
         backgroundColor: "black",
         height: "100%",
         width: "100%",
-        paddingTop: insets.top,
-        paddingLeft: insets.left,
-        paddingRight: insets.right,
+        paddingTop:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+        paddingLeft:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+        paddingRight:
+          (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
       }}
     >
       <View

components/video-player/controls/HeaderControls.tsx

@@ -5,11 +5,12 @@ import type {
 } from "@jellyfin/sdk/lib/generated-client";
 import { type FC, useCallback, useState } from "react";
 import { Platform, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import useRouter from "@/hooks/useAppRouter";
-import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import { useHaptic } from "@/hooks/useHaptic";
 import { useOrientation } from "@/hooks/useOrientation";
 import { OrientationLock } from "@/packages/expo-screen-orientation";
+import { useSettings } from "@/utils/atoms/settings";
 import { HEADER_LAYOUT, ICON_SIZES } from "./constants";
 import DropdownView from "./dropdown/DropdownView";
 import { PlaybackSpeedScope } from "./utils/playback-speed-settings";
@@ -57,8 +58,9 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
   showTechnicalInfo = false,
   onToggleTechnicalInfo,
 }) => {
+  const { settings } = useSettings();
   const router = useRouter();
-  const insets = useControlsSafeAreaInsets();
+  const insets = useSafeAreaInsets();
   const lightHapticFeedback = useHaptic("light");
   const { orientation, lockOrientation } = useOrientation();
   const [isTogglingOrientation, setIsTogglingOrientation] = useState(false);
@@ -97,9 +99,10 @@ export const HeaderControls: FC<HeaderControlsProps> = ({
       style={[
         {
           position: "absolute",
-          top: insets.top,
-          left: insets.left,
-          right: insets.right,
+          top: (settings?.safeAreaInControlsEnabled ?? true) ? insets.top : 0,
+          left: (settings?.safeAreaInControlsEnabled ?? true) ? insets.left : 0,
+          right:
+            (settings?.safeAreaInControlsEnabled ?? true) ? insets.right : 0,
           padding: HEADER_LAYOUT.CONTAINER_PADDING,
         },
       ]}

components/video-player/controls/TechnicalInfoOverlay.tsx

@@ -16,8 +16,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useScaledTVTypography } from "@/constants/TVTypography";
-import { useControlsSafeAreaInsets } from "@/hooks/useControlsSafeAreaInsets";
 import type { TechnicalInfo } from "@/modules/mpv-player";
+import { useSettings } from "@/utils/atoms/settings";
 import { HEADER_LAYOUT } from "./constants";
 
 type PlayMethod = "DirectPlay" | "DirectStream" | "Transcode";
@@ -184,8 +184,8 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
     currentAudioIndex,
   }) => {
     const typography = useScaledTVTypography();
+    const { settings } = useSettings();
     const insets = useSafeAreaInsets();
-    const safeInsets = useControlsSafeAreaInsets();
     const [info, setInfo] = useState<TechnicalInfo | null>(null);
 
     const opacity = useSharedValue(0);
@@ -268,8 +268,14 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
           left: Math.max(insets.left, 48) + 20,
         }
       : {
-          top: safeInsets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4,
-          left: safeInsets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20,
+          top:
+            (settings?.safeAreaInControlsEnabled ?? true)
+              ? insets.top + HEADER_LAYOUT.CONTAINER_PADDING + 4
+              : HEADER_LAYOUT.CONTAINER_PADDING + 4,
+          left:
+            (settings?.safeAreaInControlsEnabled ?? true)
+              ? insets.left + HEADER_LAYOUT.CONTAINER_PADDING + 20
+              : HEADER_LAYOUT.CONTAINER_PADDING + 20,
         };
 
     const textStyle = Platform.isTV

constants/Languages.ts

@@ -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" },
+];

hooks/useControlsSafeAreaInsets.ts

@@ -1,18 +0,0 @@
-import {
-  type EdgeInsets,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-import { useSettings } from "@/utils/atoms/settings";
-
-const ZERO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
-
-/**
- * Returns safe-area insets to apply to in-player controls, honoring the
- * `safeAreaInControlsEnabled` user setting. When the setting is disabled,
- * returns zero insets so controls can sit flush against the screen edges.
- */
-export const useControlsSafeAreaInsets = (): EdgeInsets => {
-  const { settings } = useSettings();
-  const insets = useSafeAreaInsets();
-  return settings.safeAreaInControlsEnabled ? insets : ZERO_INSETS;
-};

hooks/useControlsVisibility.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useSharedValue } from "react-native-reanimated";
+
+export const useControlsVisibility = (timeout = 3000) => {
+  const opacity = useSharedValue(1);
+
+  const hideControlsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
+  const showControls = useCallback(() => {
+    opacity.value = 1;
+    if (hideControlsTimerRef.current) {
+      clearTimeout(hideControlsTimerRef.current);
+    }
+    hideControlsTimerRef.current = setTimeout(() => {
+      opacity.value = 0;
+    }, timeout);
+  }, [timeout]);
+
+  const hideControls = useCallback(() => {
+    opacity.value = 0;
+    if (hideControlsTimerRef.current) {
+      clearTimeout(hideControlsTimerRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (hideControlsTimerRef.current) {
+        clearTimeout(hideControlsTimerRef.current);
+      }
+    };
+  }, []);
+
+  return { opacity, showControls, hideControls };
+};

hooks/useDownloadedFileOpener.ts

@@ -0,0 +1,35 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useCallback } from "react";
+import useRouter from "@/hooks/useAppRouter";
+import { usePlaySettings } from "@/providers/PlaySettingsProvider";
+import { writeToLog } from "@/utils/log";
+
+export const useDownloadedFileOpener = () => {
+  const router = useRouter();
+  const { setPlayUrl, setOfflineSettings } = usePlaySettings();
+
+  const openFile = useCallback(
+    async (item: BaseItemDto) => {
+      if (!item.Id) {
+        writeToLog("ERROR", "Attempted to open a file without an ID.");
+        console.error("Attempted to open a file without an ID.");
+        return;
+      }
+      const queryParams = new URLSearchParams({
+        itemId: item.Id,
+        offline: "true",
+        playbackPosition:
+          item.UserData?.PlaybackPositionTicks?.toString() ?? "0",
+      });
+      try {
+        router.push(`/player/direct-player?${queryParams.toString()}`);
+      } catch (error) {
+        writeToLog("ERROR", "Error opening file", error);
+        console.error("Error opening file:", error);
+      }
+    },
+    [setOfflineSettings, setPlayUrl, router],
+  );
+
+  return { openFile };
+};

hooks/useImageColors.ts

@@ -0,0 +1,120 @@
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import { useAtom, useAtomValue } from "jotai";
+import { useEffect, useMemo } from "react";
+import { Platform } from "react-native";
+import type * as ImageColorsType from "react-native-image-colors";
+import { apiAtom } from "@/providers/JellyfinProvider";
+
+// Conditionally import react-native-image-colors only on non-TV platforms
+const ImageColors = Platform.isTV
+  ? null
+  : (require("react-native-image-colors") as typeof ImageColorsType);
+
+import {
+  adjustToNearBlack,
+  calculateTextColor,
+  isCloseToBlack,
+  itemThemeColorAtom,
+} from "@/utils/atoms/primaryColor";
+import { getItemImage } from "@/utils/getItemImage";
+import { storage } from "@/utils/mmkv";
+
+/**
+ * Custom hook to extract and manage image colors for a given item.
+ *
+ * @param item - The BaseItemDto object representing the item.
+ * @param disabled - A boolean flag to disable color extraction.
+ *
+ */
+export const useImageColors = ({
+  item,
+  url,
+  disabled,
+}: {
+  item?: BaseItemDto | null;
+  url?: string | null;
+  disabled?: boolean;
+}) => {
+  const api = useAtomValue(apiAtom);
+  const [, setPrimaryColor] = useAtom(itemThemeColorAtom);
+
+  const isTv = Platform.isTV;
+
+  const source = useMemo(() => {
+    if (!api) return;
+    if (url) return { uri: url };
+    if (item)
+      return getItemImage({
+        item,
+        api,
+        variant: "Primary",
+        quality: 80,
+        width: 300,
+      });
+    return null;
+  }, [api, item, url]);
+
+  useEffect(() => {
+    if (isTv) return;
+    if (disabled) return;
+    if (source?.uri) {
+      const _primary = storage.getString(`${source.uri}-primary`);
+      const _text = storage.getString(`${source.uri}-text`);
+
+      if (_primary && _text) {
+        setPrimaryColor({
+          primary: _primary,
+          text: _text,
+        });
+        return;
+      }
+
+      // Extract colors from the image
+      if (!ImageColors?.getColors) return;
+
+      ImageColors.getColors(source.uri, {
+        fallback: "#fff",
+        cache: false,
+      })
+        .then((colors: ImageColorsType.ImageColorsResult) => {
+          let primary = "#fff";
+          let text = "#000";
+          let backup = "#fff";
+
+          // Select the appropriate color based on the platform
+          if (colors.platform === "android") {
+            primary = colors.dominant;
+            backup = colors.vibrant;
+          } else if (colors.platform === "ios") {
+            primary = colors.detail;
+            backup = colors.primary;
+          }
+
+          // Adjust the primary color if it's too close to black
+          if (primary && isCloseToBlack(primary)) {
+            if (backup && !isCloseToBlack(backup)) primary = backup;
+            primary = adjustToNearBlack(primary);
+          }
+
+          // Calculate the text color based on the primary color
+          if (primary) text = calculateTextColor(primary);
+
+          setPrimaryColor({
+            primary,
+            text,
+          });
+
+          // Cache the colors in storage
+          if (source.uri && primary) {
+            storage.set(`${source.uri}-primary`, primary);
+            storage.set(`${source.uri}-text`, text);
+          }
+        })
+        .catch((error: any) => {
+          console.error("Error getting colors", error);
+        });
+    }
+  }, [isTv, source?.uri, setPrimaryColor, disabled]);
+
+  if (isTv) return;
+};

modules/mpv-player/ios/MpvPlayerView.swift

@@ -81,6 +81,7 @@ class MpvPlayerView: ExpoView {
 	private func setupView() {
 		clipsToBounds = true
 		backgroundColor = .black
+		configureAudioSession()
 
 		videoContainer = UIView()
 		videoContainer.translatesAutoresizingMaskIntoConstraints = false
@@ -140,26 +141,21 @@ class MpvPlayerView: ExpoView {
 		CATransaction.commit()
 	}
 
-	// MARK: - Audio Session & Notifications
-
 	private func configureAudioSession() {
-		let session = AVAudioSession.sharedInstance()
+		let audioSession = AVAudioSession.sharedInstance()
 		do {
-			try session.setCategory(.playback, mode: .moviePlayback, policy: .longFormAudio, options: [])
-			try session.setActive(true)
+			try audioSession.setCategory(
+				.playback,
+				mode: .moviePlayback,
+				policy: .longFormAudio,
+				options: []
+			)
+			try audioSession.setActive(true)
 		} catch {
 			print("Failed to configure audio session: \(error)")
 		}
 	}
-
-	/// Deactivate the session AND reset the category — `setActive(false)` alone
-	/// leaves `.playback`/`.longFormAudio` on the shared singleton, so any later
-	/// reactivation (foreground, route change, other modules) re-steals audio.
-	private func tearDownAudioSession() {
-		let session = AVAudioSession.sharedInstance()
-		try? session.setActive(false, options: .notifyOthersOnDeactivation)
-		try? session.setCategory(.ambient, mode: .default, options: [.mixWithOthers])
-	}
+	// MARK: - Audio Session & Notifications
 
 	private func setupNotifications() {
 		// Handle audio session interruptions (e.g., incoming calls, other apps playing audio)
@@ -274,7 +270,6 @@ class MpvPlayerView: ExpoView {
 
 	func play() {
 		intendedPlayState = true
-		configureAudioSession()
 		setupRemoteCommands()
 		renderer?.play()
 		pipController?.setPlaybackRate(1.0)
@@ -445,7 +440,6 @@ class MpvPlayerView: ExpoView {
 		renderer?.stop()
 		displayLayer.removeFromSuperlayer()
 		clearNowPlayingInfo()
-		tearDownAudioSession()
 		NotificationCenter.default.removeObserver(self)
 	}
 }
@@ -525,7 +519,9 @@ extension MpvPlayerView: MPVLayerRendererDelegate {
 	}
 
 	func renderer(_: MPVLayerRenderer, didSelectAudioOutput audioOutput: String) {
-		print("[MPV] Audio output ready (\(audioOutput)), syncing Now Playing")
+		// Audio output is now active - this is the right time to activate audio session and set Now Playing
+		print("[MPV] Audio output ready (\(audioOutput)), activating audio session and syncing Now Playing")
+		nowPlayingManager.activateAudioSession()
 		syncNowPlaying(isPlaying: !isPaused())
 	}
 }

scripts/update-issue-form.mjs

@@ -0,0 +1,119 @@
+#!/usr/bin/env bun
+/**
+ * Populates the "Streamyfin Version" dropdown in the issue report form with the
+ * latest GitHub releases. Run by the "Update Issue Form Versions" workflow on
+ * release events + a weekly cron (and manually via workflow_dispatch).
+ *
+ * Source: GitHub releases, newest first, INCLUDING drafts and prereleases — those
+ * are the builds release.yml pushes to TestFlight (iOS) / beta (Android), and the
+ * app shows that same version to users. Draft releases are labelled "X (TestFlight)".
+ * Non-version sentinels (e.g. "older") are preserved at the end of the list.
+ *
+ * Usage:
+ *   bun scripts/update-issue-form.mjs            # rewrite the form in place
+ *   ISSUE_FORM_LIMIT=8 bun scripts/update-issue-form.mjs
+ *   bun scripts/update-issue-form.mjs --dry-run  # print the new options, don't write
+ *
+ * Env: GITHUB_REPOSITORY (owner/repo), GH_TOKEN/GITHUB_TOKEN (for gh, provided in CI).
+ */
+
+import { execFileSync } from "node:child_process";
+import {
+  appendFileSync,
+  readFileSync as read,
+  writeFileSync as write,
+} from "node:fs";
+
+const FORM = ".github/ISSUE_TEMPLATE/issue_report.yml";
+const DROPDOWN_ID = "version"; // the `id:` of the dropdown to populate
+const parsedLimit = Number.parseInt(process.env.ISSUE_FORM_LIMIT ?? "", 10);
+const LIMIT =
+  Number.isInteger(parsedLimit) && parsedLimit > 0 ? parsedLimit : 5;
+const REPO = process.env.GITHUB_REPOSITORY || "streamyfin/streamyfin";
+const DRY = process.argv.includes("--dry-run");
+
+// Matches "0.54.1" and prerelease/beta tags like "0.54.0-beta.1".
+const isVersion = (s) => /^\d+\.\d+/.test(s.trim());
+
+// 1. Fetch releases (newest first) with their draft flag. Drafts are the builds pushed
+//    to TestFlight (iOS) / beta (Android) by release.yml, so they aren't a full release
+//    yet — we label those "X (TestFlight)". (Listing drafts needs the token to have repo
+//    write access, which the workflow grants.)
+const raw = execFileSync(
+  "gh",
+  [
+    "api",
+    `repos/${REPO}/releases`,
+    "--paginate",
+    "--jq",
+    ".[] | [.tag_name, .draft] | @tsv",
+  ],
+  { encoding: "utf8" },
+);
+const seen = new Set();
+const versions = [];
+for (const line of raw.split("\n")) {
+  const [tag, draft] = line.split("\t");
+  if (!tag) continue;
+  const ver = tag.trim().replace(/^v/, "");
+  if (!isVersion(ver) || seen.has(ver)) continue;
+  seen.add(ver);
+  versions.push(draft === "true" ? `${ver} (TestFlight)` : ver);
+  if (versions.length >= LIMIT) break;
+}
+
+if (!versions.length) {
+  console.error("No release versions found — leaving the form untouched.");
+  process.exit(1);
+}
+
+// 2. rewrite the dropdown options, preserving non-version sentinels (e.g. "older").
+//    The old generic "TestFlight/Development build" entry is dropped — TestFlight
+//    versions are now shown individually as "X (TestFlight)".
+const lines = read(FORM, "utf8").split("\n");
+const idIdx = lines.findIndex((l) =>
+  l.match(new RegExp(`^\\s*id:\\s*${DROPDOWN_ID}\\s*$`)),
+);
+if (idIdx === -1)
+  throw new Error(`dropdown id: ${DROPDOWN_ID} not found in ${FORM}`);
+const optIdx = lines.findIndex(
+  (l, i) => i > idIdx && /^\s*options:\s*$/.test(l),
+);
+if (optIdx === -1)
+  throw new Error(`options: not found after id: ${DROPDOWN_ID}`);
+
+const itemIndent = lines[optIdx].match(/^\s*/)[0] + "  "; // options items are nested one level deeper
+let end = optIdx + 1;
+const sentinels = [];
+while (end < lines.length && /^\s*-\s+/.test(lines[end])) {
+  const val = lines[end].replace(/^\s*-\s+/, "");
+  if (!isVersion(val) && !/testflight/i.test(val)) sentinels.push(val);
+  end++;
+}
+
+const newOptions = [...versions, ...sentinels].map(
+  (v) => `${itemIndent}- ${v}`,
+);
+const updated = [
+  ...lines.slice(0, optIdx + 1),
+  ...newOptions,
+  ...lines.slice(end),
+].join("\n");
+
+console.log(
+  `Versions: ${versions.join(", ")}${sentinels.length ? ` | kept: ${sentinels.join(", ")}` : ""}`,
+);
+if (DRY) {
+  console.log("--dry-run: not writing.");
+} else {
+  write(FORM, updated);
+  console.log(`Updated ${FORM}.`);
+}
+
+// Expose the resulting list for the workflow (PR description).
+if (process.env.GITHUB_OUTPUT) {
+  appendFileSync(
+    process.env.GITHUB_OUTPUT,
+    `versions=${versions.join(", ")}\n`,
+  );
+}

utils/bToMb.ts

@@ -0,0 +1,18 @@
+/**
+ * Convert bits to megabits or gigabits
+ *
+ * Return nice looking string
+ * If under 1000Mb, return XXXMB, else return X.XGB
+ */
+
+export function convertBitsToMegabitsOrGigabits(bits?: number | null): string {
+  if (!bits) return "0MB";
+
+  const megabits = bits / 1000000;
+
+  if (megabits < 1000) {
+    return `${Math.round(megabits)}MB`;
+  }
+  const gigabits = megabits / 1000;
+  return `${gigabits.toFixed(1)}GB`;
+}

utils/collectionTypeToItemType.ts

@@ -0,0 +1,47 @@
+import {
+  BaseItemKind,
+  CollectionType,
+} from "@jellyfin/sdk/lib/generated-client";
+
+/**
+ * Converts a ColletionType to a BaseItemKind (also called ItemType)
+ *
+ * CollectionTypes
+ *  readonly Unknown: "unknown";
+    readonly Movies: "movies";
+    readonly Tvshows: "tvshows";
+    readonly Trailers: "trailers";
+    readonly Homevideos: "homevideos";
+    readonly Boxsets: "boxsets";
+    readonly Books: "books";
+    readonly Photos: "photos";
+    readonly Livetv: "livetv";
+    readonly Playlists: "playlists";
+    readonly Folders: "folders";
+ */
+export const colletionTypeToItemType = (
+  collectionType?: CollectionType | null,
+): BaseItemKind | undefined => {
+  if (!collectionType) return undefined;
+
+  switch (collectionType) {
+    case CollectionType.Movies:
+      return BaseItemKind.Movie;
+    case CollectionType.Tvshows:
+      return BaseItemKind.Series;
+    case CollectionType.Homevideos:
+      return BaseItemKind.Video;
+    case CollectionType.Books:
+      return BaseItemKind.Book;
+    case CollectionType.Playlists:
+      return BaseItemKind.Playlist;
+    case CollectionType.Folders:
+      return BaseItemKind.Folder;
+    case CollectionType.Photos:
+      return BaseItemKind.Photo;
+    case CollectionType.Trailers:
+      return BaseItemKind.Trailer;
+  }
+
+  return undefined;
+};

utils/hls/parseM3U8ForSubtitles.ts

@@ -0,0 +1,56 @@
+import axios from "axios";
+
+export interface SubtitleTrack {
+  index: number;
+  name: string;
+  uri: string;
+  language: string;
+  default: boolean;
+  forced: boolean;
+  autoSelect: boolean;
+}
+
+export async function parseM3U8ForSubtitles(
+  url: string,
+): Promise<SubtitleTrack[]> {
+  try {
+    const response = await axios.get(url, { responseType: "text" });
+    const lines = response.data.split(/\r?\n/);
+    const subtitleTracks: SubtitleTrack[] = [];
+    let index = 0;
+
+    lines.forEach((line: string) => {
+      if (line.startsWith("#EXT-X-MEDIA:TYPE=SUBTITLES")) {
+        const attributes = parseAttributes(line);
+        const track: SubtitleTrack = {
+          index: index++,
+          name: attributes.NAME || "",
+          uri: attributes.URI || "",
+          language: attributes.LANGUAGE || "",
+          default: attributes.DEFAULT === "YES",
+          forced: attributes.FORCED === "YES",
+          autoSelect: attributes.AUTOSELECT === "YES",
+        };
+        subtitleTracks.push(track);
+      }
+    });
+
+    return subtitleTracks;
+  } catch (error) {
+    console.error("Failed to fetch or parse the M3U8 file:", error);
+    throw error;
+  }
+}
+
+function parseAttributes(line: string): { [key: string]: string } {
+  const attributes: { [key: string]: string } = {};
+  const regex = /([A-Z-]+)=(?:"([^"]*)"|([^,]*))/g;
+
+  for (const match of line.matchAll(regex)) {
+    const key = match[1];
+    const value = match[2] ?? match[3]; // quoted or unquoted
+    attributes[key] = value;
+  }
+
+  return attributes;
+}

utils/jellyfin/session/capabilities.ts

@@ -0,0 +1,56 @@
+import type { Api } from "@jellyfin/sdk";
+import type { AxiosResponse } from "axios";
+import type { Settings } from "../../atoms/settings";
+import { generateDeviceProfile } from "../../profiles/native";
+import { getAuthHeaders } from "../jellyfin";
+
+interface PostCapabilitiesParams {
+  api: Api | null | undefined;
+  itemId: string | null | undefined;
+  sessionId: string | null | undefined;
+  deviceProfile: Settings["deviceProfile"];
+}
+
+/**
+ * Marks a media item as not played for a specific user.
+ *
+ * @param params - The parameters for marking an item as not played
+ * @returns A promise that resolves to true if the operation was successful, false otherwise
+ */
+export const postCapabilities = async ({
+  api,
+  itemId,
+  sessionId,
+}: PostCapabilitiesParams): Promise<AxiosResponse> => {
+  if (!api || !itemId || !sessionId) {
+    throw new Error("Missing parameters for marking item as not played");
+  }
+
+  try {
+    const d = api.axiosInstance.post(
+      `${api.basePath}/Sessions/Capabilities/Full`,
+      {
+        playableMediaTypes: ["Audio", "Video"],
+        supportedCommands: [
+          "PlayState",
+          "Play",
+          "ToggleFullscreen",
+          "DisplayMessage",
+          "Mute",
+          "Unmute",
+          "SetVolume",
+          "ToggleMute",
+        ],
+        supportsMediaControl: true,
+        id: sessionId,
+        DeviceProfile: generateDeviceProfile(),
+      },
+      {
+        headers: getAuthHeaders(api),
+      },
+    );
+    return d;
+  } catch (_error) {
+    throw new Error("Failed to mark as not played");
+  }
+};

utils/jellyfin/tvshows/nextUp.ts

@@ -0,0 +1,44 @@
+import type { Api } from "@jellyfin/sdk";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getAuthHeaders } from "../jellyfin";
+
+interface NextUpParams {
+  itemId?: string | null;
+  userId?: string | null;
+  api?: Api | null;
+}
+
+/**
+ * Fetches the next up episodes for a series or all series for a user.
+ *
+ * @param params - The parameters for fetching next up episodes
+ * @returns A promise that resolves to an array of BaseItemDto representing the next up episodes
+ */
+export const nextUp = async ({
+  itemId,
+  userId,
+  api,
+}: NextUpParams): Promise<BaseItemDto[]> => {
+  if (!userId || !api) {
+    console.error("Invalid parameters for nextUp: missing userId or api");
+    return [];
+  }
+
+  try {
+    const response = await api.axiosInstance.get<{ Items: BaseItemDto[] }>(
+      `${api.basePath}/Shows/NextUp`,
+      {
+        params: {
+          SeriesId: itemId || undefined,
+          UserId: userId,
+          Fields: "MediaSourceCount",
+        },
+        headers: getAuthHeaders(api),
+      },
+    );
+
+    return response.data.Items;
+  } catch (_error) {
+    return [];
+  }
+};

utils/jellyfin/user-library/getItemById.ts

@@ -0,0 +1,34 @@
+import type { Api } from "@jellyfin/sdk";
+import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
+import { getUserLibraryApi } from "@jellyfin/sdk/lib/utils/api";
+
+/**
+ * Retrieves an item by its ID from the API.
+ *
+ * @param api - The Jellyfin API instance.
+ * @param itemId - The ID of the item to retrieve.
+ * @returns The item object or undefined if no item matches the ID.
+ */
+export const getItemById = async (
+  api?: Api | null | undefined,
+  itemId?: string | null | undefined,
+): Promise<BaseItemDto | undefined> => {
+  if (!api || !itemId) {
+    return undefined;
+  }
+
+  try {
+    const itemData = await getUserLibraryApi(api).getItem({ itemId });
+
+    const item = itemData.data;
+    if (!item) {
+      console.error("No items found with the specified ID:", itemId);
+      return undefined;
+    }
+
+    return item;
+  } catch (error) {
+    console.error("Failed to retrieve the item:", error);
+    throw new Error(`Failed to retrieve the item due to an error: ${error}`);
+  }
+};

utils/secondsToTicks.ts

@@ -0,0 +1,5 @@
+// seconds to ticks util
+
+export function secondsToTicks(seconds: number): number {
+  return seconds * 10000000;
+}