feat: KSPlayer as an option for iOS + other improvements (#1266)

components/common/TouchableItemRouter.tsx

@@ -16,6 +16,10 @@ export const itemRouter = (item: BaseItemDto, from: string) => {
     return `/(auth)/(tabs)/${from}/livetv`;
   }
 
+  if ("CollectionType" in item && item.CollectionType === "music") {
+    return `/(auth)/(tabs)/(libraries)/music/${item.Id}`;
+  }
+
   if (item.Type === "Series") {
     return `/(auth)/(tabs)/${from}/series/${item.Id}`;
   }
@@ -50,6 +54,13 @@ export const getItemNavigation = (item: BaseItemDto, _from: string) => {
     };
   }
 
+  if ("CollectionType" in item && item.CollectionType === "music") {
+    return {
+      pathname: "/music/[libraryId]" as const,
+      params: { libraryId: item.Id! },
+    };
+  }
+
   if (item.Type === "Series") {
     return {
       pathname: "/series/[id]" as const,
@@ -99,6 +110,25 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
 
   const from = (segments as string[])[2] || "(home)";
 
+  const handlePress = useCallback(() => {
+    // For offline mode, we still need to use query params
+    if (isOffline) {
+      const url = `${itemRouter(item, from)}&offline=true`;
+      router.push(url as any);
+      return;
+    }
+
+    // Force music libraries to navigate via the explicit string route.
+    // This avoids losing the dynamic [libraryId] param when going through a nested navigator.
+    if ("CollectionType" in item && item.CollectionType === "music") {
+      router.push(itemRouter(item, from) as any);
+      return;
+    }
+
+    const navigation = getItemNavigation(item, from);
+    router.push(navigation as any);
+  }, [from, isOffline, item, router]);
+
   const showActionSheet = useCallback(() => {
     if (
       !(
@@ -108,13 +138,14 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
       )
     )
       return;
-    const options = [
+
+    const options: string[] = [
       "Mark as Played",
       "Mark as Not Played",
       isFavorite ? "Unmark as Favorite" : "Mark as Favorite",
       "Cancel",
     ];
-    const cancelButtonIndex = 3;
+    const cancelButtonIndex = options.length - 1;
 
     showActionSheetWithOptions(
       {
@@ -131,28 +162,24 @@ export const TouchableItemRouter: React.FC<PropsWithChildren<Props>> = ({
         }
       },
     );
-  }, [showActionSheetWithOptions, isFavorite, markAsPlayedStatus]);
+  }, [
+    showActionSheetWithOptions,
+    isFavorite,
+    markAsPlayedStatus,
+    toggleFavorite,
+  ]);
 
   if (
     from === "(home)" ||
     from === "(search)" ||
     from === "(libraries)" ||
-    from === "(favorites)"
+    from === "(favorites)" ||
+    from === "(watchlists)"
   )
     return (
       <TouchableOpacity
         onLongPress={showActionSheet}
-        onPress={() => {
-          if (isOffline) {
-            // For offline mode, we still need to use query params
-            const url = `${itemRouter(item, from)}&offline=true`;
-            router.push(url as any);
-            return;
-          }
-
-          const navigation = getItemNavigation(item, from);
-          router.push(navigation as any);
-        }}
+        onPress={handlePress}
         {...props}
       >
         {children}