Merge branch 'develop' into fix/subtitles-ordering-fix

Fixed an issue where external and subrip subtitles were not ordered
correctly

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

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

@@ -12,16 +12,11 @@ import {
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
-import {
-  useFocusEffect,
-  useLocalSearchParams,
-  useNavigation,
-} from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
-  BackHandler,
   FlatList,
   Platform,
   ScrollView,
@@ -85,9 +80,8 @@ const Page = () => {
     sortBy?: string;
     sortOrder?: string;
     filterBy?: string;
-    fromSeeAll?: string;
   };
-  const { libraryId, fromSeeAll } = searchParams;
+  const { libraryId } = searchParams;
 
   const typography = useScaledTVTypography();
   const posterSizes = useScaledTVPosterSizes();
@@ -118,22 +112,6 @@ const Page = () => {
   const { t } = useTranslation();
   const router = useRouter();
   const { showOptions } = useTVOptionModal();
-
-  // When this library detail was opened from the home "See All" button, its
-  // libraries stack is just [detail], so the default TV Back would exit to home.
-  // Intercept Back (scoped to while this screen is focused via useFocusEffect) and
-  // route to the library list instead, so the user can switch libraries. Normal
-  // entries from the list keep their native pop-to-list behavior.
-  useFocusEffect(
-    useCallback(() => {
-      if (!Platform.isTV || fromSeeAll !== "true") return;
-      const sub = BackHandler.addEventListener("hardwareBackPress", () => {
-        router.replace("/(auth)/(tabs)/(libraries)");
-        return true;
-      });
-      return () => sub.remove();
-    }, [fromSeeAll, router]),
-  );
   const { showItemActions } = useTVItemActionModal();
 
   // TV Filter queries
@@ -291,23 +269,6 @@ const Page = () => {
     });
   }, [library]);
 
-  // If this See-All detail was deep-linked on top of the libraries index, collapse
-  // the libraries stack to just this screen. Otherwise the stack is [index, detail],
-  // which the native bottom tab reliably auto-pops back to the index (the detail
-  // "bounces" to the library list ~0.5s after opening). With [detail] alone it stays
-  // put, and Back is handled explicitly by the fromSeeAll interceptor above.
-  const didCollapseRef = useRef(false);
-  useEffect(() => {
-    if (!Platform.isTV || fromSeeAll !== "true" || didCollapseRef.current)
-      return;
-    const state = navigation.getState();
-    if (state?.routes && state.routes.length > 1) {
-      didCollapseRef.current = true;
-      const top = state.routes[state.routes.length - 1];
-      navigation.reset({ index: 0, routes: [top] } as any);
-    }
-  }, [navigation, fromSeeAll]);
-
   const fetchItems = useCallback(
     async ({
       pageParam,

components/WatchedIndicator.tsx

@@ -1,116 +1,43 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import React from "react";
-import { Platform, View, type ViewStyle } from "react-native";
-import { Text } from "@/components/common/Text";
-import { scaleSize } from "@/utils/scaleSize";
-
-const isAggregateType = (item: BaseItemDto) =>
-  item.Type === "Series" || item.Type === "BoxSet";
-
-// TV sizes are scaled relative to a 1920×1080 reference (see scaleSize).
-const tvBadgeBase: ViewStyle = {
-  position: "absolute",
-  top: scaleSize(8),
-  right: scaleSize(8),
-  height: scaleSize(28),
-  borderRadius: scaleSize(14),
-  backgroundColor: "rgba(255,255,255,0.92)",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-// Mobile uses raw dp — no scaling.
-const mobileBadgeBase: ViewStyle = {
-  position: "absolute",
-  top: 4,
-  right: 4,
-  height: 20,
-  borderRadius: 10,
-  backgroundColor: "#9333ea",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-/**
- * Renders the unplayed-episode count badge for Series/BoxSet items that still
- * have episodes left to watch. Returns null for non-aggregate types, fully
- * watched items, or items with no unplayed count, so it is safe to mount
- * unconditionally as an overlay (e.g. on top of the tvOS glass poster, where
- * the watched checkmark is drawn natively and only the count needs RN).
- */
-export const UnplayedCountBadge: React.FC<{ item: BaseItemDto }> = React.memo(
-  ({ item }) => {
-    if (!isAggregateType(item)) return null;
-    if (item.UserData?.Played) return null;
-    const unplayed = item.UserData?.UnplayedItemCount ?? 0;
-    if (unplayed <= 0) return null;
-
-    if (Platform.isTV) {
-      return (
-        <View
-          style={[
-            tvBadgeBase,
-            { minWidth: scaleSize(28), paddingHorizontal: scaleSize(7) },
-          ]}
-        >
-          <Text
-            style={{
-              fontSize: scaleSize(15),
-              fontWeight: "700",
-              color: "black",
-            }}
-          >
-            {unplayed}
-          </Text>
-        </View>
-      );
-    }
-
-    return (
-      <View style={[mobileBadgeBase, { minWidth: 20, paddingHorizontal: 5 }]}>
-        <Text style={{ fontSize: 12, fontWeight: "700", color: "white" }}>
-          {unplayed}
-        </Text>
-      </View>
-    );
-  },
-);
+import type React from "react";
+import { Platform, View } from "react-native";
 
 export const WatchedIndicator: React.FC<{ item: BaseItemDto }> = ({ item }) => {
-  const isMovieOrEpisode = item.Type === "Movie" || item.Type === "Episode";
-  const isAggregate = isAggregateType(item);
-  const isPlayed = item.UserData?.Played === true;
-
   if (Platform.isTV) {
-    // Fully watched → white checkmark badge (top-right)
-    if (isPlayed && (isMovieOrEpisode || isAggregate)) {
+    // TV: Show white checkmark when watched
+    if (
+      item.UserData?.Played &&
+      (item.Type === "Movie" || item.Type === "Episode")
+    ) {
       return (
-        <View style={[tvBadgeBase, { width: scaleSize(28) }]}>
-          <Ionicons name='checkmark' size={scaleSize(18)} color='black' />
+        <View
+          style={{
+            position: "absolute",
+            top: 8,
+            right: 8,
+            backgroundColor: "rgba(255,255,255,0.9)",
+            borderRadius: 14,
+            width: 28,
+            height: 28,
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Ionicons name='checkmark' size={18} color='black' />
         </View>
       );
     }
-    // Series/BoxSet with remaining episodes → count badge
-    return <UnplayedCountBadge item={item} />;
+    return null;
   }
 
-  // Mobile: purple corner ribbon for unwatched Movie/Episode (existing behavior)
+  // Mobile: Show purple triangle for unwatched
   return (
     <>
-      {isMovieOrEpisode && !isPlayed && (
-        <View className='bg-purple-600 w-8 h-8 absolute -top-4 -right-4 rotate-45' />
-      )}
-
-      {/* Fully watched Series/BoxSet → small purple checkmark */}
-      {isAggregate && isPlayed && (
-        <View style={[mobileBadgeBase, { width: 20 }]}>
-          <Ionicons name='checkmark' size={13} color='white' />
-        </View>
-      )}
-
-      {/* Series/BoxSet with remaining episodes → count badge */}
-      <UnplayedCountBadge item={item} />
+      {item.UserData?.Played === false &&
+        (item.Type === "Movie" || item.Type === "Episode") && (
+          <View className='bg-purple-600 w-8 h-8 absolute -top-4 -right-4 rotate-45' />
+        )}
     </>
   );
 };

components/home/InfiniteScrollingCollectionList.tv.tsx

@@ -201,18 +201,12 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
 
   const handleSeeAllPress = useCallback(() => {
     if (!parentId) return;
-    // Navigate into the library detail (lives in the libraries tab) sorted by most
-    // recently added. The `fromSeeAll` flag tells the detail page to (a) collapse
-    // the libraries stack so the native tab can't auto-pop it back to the list, and
-    // (b) intercept Back to route to the library list so the user can switch
-    // libraries. See app/(auth)/(tabs)/(libraries)/[libraryId].tsx.
     router.push({
-      pathname: "/[libraryId]",
+      pathname: "/(auth)/(tabs)/(libraries)/[libraryId]",
       params: {
         libraryId: parentId,
         sortBy: SortByOption.DateCreated,
         sortOrder: SortOrderOption.Descending,
-        fromSeeAll: "true",
       },
     } as any);
   }, [router, parentId]);
@@ -354,14 +348,11 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
           // contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
           // contentContainerStyle={{ paddingVertical: SCALE_PADDING }}
           ListFooterComponent={
-            // No fixed width: the footer must size to the "See All" card so the
-            // FlatList's scrollable content extends to fully reveal it. A fixed
-            // (narrow) width clipped the card at the right edge. Trailing space is
-            // provided by contentContainerStyle.paddingRight.
             <View
               style={{
                 flexDirection: "row",
                 alignItems: "center",
+                width: sizes.padding.horizontal,
               }}
             >
               {isFetchingNextPage && (

components/posters/ItemPoster.tsx

@@ -1,8 +1,8 @@
 import { type BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { useState } from "react";
 import { View, type ViewProps } from "react-native";
-import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { ItemImage } from "../common/ItemImage";
+import { WatchedIndicator } from "../WatchedIndicator";
 
 interface Props extends ViewProps {
   item: BaseItemDto;

components/posters/SeriesPoster.tsx

@@ -3,7 +3,6 @@ import { Image } from "expo-image";
 import { useAtom } from "jotai";
 import { useMemo } from "react";
 import { View } from "react-native";
-import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 
@@ -53,7 +52,6 @@ const SeriesPoster: React.FC<MoviePosterProps> = ({ item }) => {
           width: "100%",
         }}
       />
-      <WatchedIndicator item={item} />
     </View>
   );
 };

components/tv/TVPosterCard.tsx

@@ -12,10 +12,7 @@ import {
 } from "react-native";
 import { ProgressBar } from "@/components/common/ProgressBar";
 import { Text } from "@/components/common/Text";
-import {
-  UnplayedCountBadge,
-  WatchedIndicator,
-} from "@/components/WatchedIndicator";
+import { WatchedIndicator } from "@/components/WatchedIndicator";
 import { useScaledTVPosterSizes } from "@/constants/TVPosterSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import {
@@ -430,12 +427,6 @@ export const TVPosterCard: React.FC<TVPosterCardProps> = ({
           />
           {PlayButtonOverlay}
           {NowPlayingBadge}
-          {/*
-            The glass view draws the watched checkmark natively but cannot show
-            an unplayed-episode count, so render it as an RN overlay on top.
-            Returns null when not applicable (non-series / fully watched).
-          */}
-          <UnplayedCountBadge item={item} />
         </View>
       );
     }

utils/jellyfin/subtitleUtils.ts

@@ -44,9 +44,22 @@ export const isSubtitleInMpv = (
 /**
  * Calculate the MPV track ID for a given Jellyfin subtitle index.
  *
- * MPV track IDs are 1-based and only count subtitles that are actually in MPV.
- * We iterate through all subtitles, counting only those in MPV, until we find
- * the one matching the Jellyfin index.
+ * MPV track IDs are 1-based, but MPV's track list is NOT in MediaStreams order:
+ *   1. Embedded/HLS subs are enumerated from the container (or HLS playlist)
+ *      first, in MediaStreams order.
+ *   2. External subs are appended via `sub-add` AFTER the file loads, in the
+ *      order they are passed to MPV (here, also MediaStreams order — see
+ *      direct-player.tsx where the externalSubtitles array is built by
+ *      filtering MediaStreams).
+ *
+ * Iterating in pure MediaStreams order produces the wrong MPV ID whenever an
+ * External sub is listed before an Embed sub in MediaStreams (common when
+ * Jellyfin prepends a converted SRT/VTT ahead of an original PGS/ASS track),
+ * causing e.g. English to select Spanish. We therefore count in two phases
+ * that mirror MPV's actual ordering.
+ *
+ * Image-based subs (PGS/VOBSUB) during transcoding are burned into the video
+ * and absent from MPV's track list; they are skipped in both phases.
  *
  * @param mediaSource - The media source containing subtitle streams
  * @param jellyfinSubtitleIndex - The Jellyfin server-side subtitle index (-1 = disabled)
@@ -74,14 +87,30 @@ export const getMpvSubtitleId = (
     return undefined;
   }
 
-  // Count MPV track position (1-based)
+  const isExternal = (sub: MediaStream) =>
+    sub.DeliveryMethod === SubtitleDeliveryMethod.External;
+
   let mpvIndex = 0;
+
+  // Phase 1: embedded / HLS subs — these occupy MPV track IDs first because
+  // they come from the container or HLS playlist.
   for (const sub of allSubs) {
-    if (isSubtitleInMpv(sub, isTranscoding)) {
-      mpvIndex++;
-      if (sub.Index === jellyfinSubtitleIndex) {
-        return mpvIndex;
-      }
+    if (isExternal(sub)) continue;
+    if (!isSubtitleInMpv(sub, isTranscoding)) continue;
+    mpvIndex++;
+    if (sub.Index === jellyfinSubtitleIndex) {
+      return mpvIndex;
+    }
+  }
+
+  // Phase 2: external subs — appended via `sub-add` after the file loads,
+  // so they come last in MPV's track list.
+  for (const sub of allSubs) {
+    if (!isExternal(sub)) continue;
+    if (!isSubtitleInMpv(sub, isTranscoding)) continue;
+    mpvIndex++;
+    if (sub.Index === jellyfinSubtitleIndex) {
+      return mpvIndex;
     }
   }