feat: cache and download music

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

@@ -166,6 +166,24 @@ export default function IndexLayout() {
           ),
         }}
       />
+      <Stack.Screen
+        name='settings/music/page'
+        options={{
+          title: t("home.settings.music.title"),
+          headerBlurEffect: "none",
+          headerTransparent: Platform.OS === "ios",
+          headerShadowVisible: false,
+          headerLeft: () => (
+            <TouchableOpacity
+              onPress={() => _router.back()}
+              className='pl-0.5'
+              style={{ marginRight: Platform.OS === "android" ? 16 : 0 }}
+            >
+              <Feather name='chevron-left' size={28} color='white' />
+            </TouchableOpacity>
+          ),
+        }}
+      />
       <Stack.Screen
         name='settings/appearance/hide-libraries/page'
         options={{

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

@@ -70,6 +70,11 @@ export default function settings() {
               showArrow
               title={t("home.settings.audio_subtitles.title")}
             />
+            <ListItem
+              onPress={() => router.push("/settings/music/page")}
+              showArrow
+              title={t("home.settings.music.title")}
+            />
             <ListItem
               onPress={() => router.push("/settings/appearance/page")}
               showArrow

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

@@ -0,0 +1,75 @@
+import { useTranslation } from "react-i18next";
+import { Platform, ScrollView, View } from "react-native";
+import { Switch } from "react-native-gesture-handler";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+import { ListGroup } from "@/components/list/ListGroup";
+import { ListItem } from "@/components/list/ListItem";
+import { useSettings } from "@/utils/atoms/settings";
+
+export default function MusicSettingsPage() {
+  const insets = useSafeAreaInsets();
+  const { settings, updateSettings, pluginSettings } = useSettings();
+  const { t } = useTranslation();
+
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior='automatic'
+      contentContainerStyle={{
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
+    >
+      <View
+        className='p-4 flex flex-col'
+        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+      >
+        <ListGroup
+          title={t("home.settings.music.playback_title")}
+          description={
+            <Text className='text-[#8E8D91] text-xs'>
+              {t("home.settings.music.playback_description")}
+            </Text>
+          }
+        >
+          <ListItem
+            title={t("home.settings.music.prefer_downloaded")}
+            disabled={pluginSettings?.preferLocalAudio?.locked}
+          >
+            <Switch
+              value={settings.preferLocalAudio}
+              disabled={pluginSettings?.preferLocalAudio?.locked}
+              onValueChange={(value) =>
+                updateSettings({ preferLocalAudio: value })
+              }
+            />
+          </ListItem>
+        </ListGroup>
+
+        <View className='mt-4'>
+          <ListGroup
+            title={t("home.settings.music.caching_title")}
+            description={
+              <Text className='text-[#8E8D91] text-xs'>
+                {t("home.settings.music.caching_description")}
+              </Text>
+            }
+          >
+            <ListItem
+              title={t("home.settings.music.lookahead_enabled")}
+              disabled={pluginSettings?.audioLookaheadEnabled?.locked}
+            >
+              <Switch
+                value={settings.audioLookaheadEnabled}
+                disabled={pluginSettings?.audioLookaheadEnabled?.locked}
+                onValueChange={(value) =>
+                  updateSettings({ audioLookaheadEnabled: value })
+                }
+              />
+            </ListItem>
+          </ListGroup>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/album/[albumId].tsx

@@ -8,7 +8,12 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Dimensions, TouchableOpacity, View } from "react-native";
+import {
+  ActivityIndicator,
+  Dimensions,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -16,8 +21,13 @@ import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
 import { MusicTrackItem } from "@/components/music/MusicTrackItem";
 import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
 import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import {
+  downloadTrack,
+  isPermanentlyDownloaded,
+} from "@/providers/AudioStorage";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
+import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { runtimeTicksToMinutes } from "@/utils/time";
 
@@ -37,6 +47,7 @@ export default function AlbumDetailScreen() {
   const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
   const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
   const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   const handleTrackOptionsPress = useCallback((track: BaseItemDto) => {
     setSelectedTrack(track);
@@ -113,6 +124,30 @@ export default function AlbumDetailScreen() {
     }
   }, [playQueue, tracks]);
 
+  // Check if all tracks are already permanently downloaded
+  const allTracksDownloaded = useMemo(() => {
+    if (!tracks || tracks.length === 0) return false;
+    return tracks.every((track) => isPermanentlyDownloaded(track.Id));
+  }, [tracks]);
+
+  const handleDownloadAlbum = useCallback(async () => {
+    if (!tracks || !api || !user?.Id || isDownloading) return;
+
+    setIsDownloading(true);
+    try {
+      for (const track of tracks) {
+        if (!track.Id || isPermanentlyDownloaded(track.Id)) continue;
+        const result = await getAudioStreamUrl(api, user.Id, track.Id);
+        if (result?.url && !result.isTranscoding) {
+          await downloadTrack(track.Id, result.url, { permanent: true });
+        }
+      }
+    } catch {
+      // Silent fail
+    }
+    setIsDownloading(false);
+  }, [tracks, api, user?.Id, isDownloading]);
+
   const isLoading = loadingAlbum || loadingTracks;
 
   if (isLoading) {
@@ -184,7 +219,7 @@ export default function AlbumDetailScreen() {
           </Text>
 
           {/* Play buttons */}
-          <View className='flex flex-row mt-4'>
+          <View className='flex flex-row mt-4 items-center'>
             <TouchableOpacity
               onPress={handlePlayAll}
               className='flex flex-row items-center bg-purple-600 px-6 py-3 rounded-full mr-3'
@@ -196,13 +231,32 @@ export default function AlbumDetailScreen() {
             </TouchableOpacity>
             <TouchableOpacity
               onPress={handleShuffle}
-              className='flex flex-row items-center bg-neutral-800 px-6 py-3 rounded-full'
+              className='flex flex-row items-center bg-neutral-800 px-6 py-3 rounded-full mr-3'
             >
               <Ionicons name='shuffle' size={20} color='white' />
               <Text className='text-white font-medium ml-2'>
                 {t("music.shuffle")}
               </Text>
             </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleDownloadAlbum}
+              disabled={allTracksDownloaded || isDownloading}
+              className='flex items-center justify-center bg-neutral-800 p-3 rounded-full'
+            >
+              {isDownloading ? (
+                <ActivityIndicator size={20} color='white' />
+              ) : (
+                <Ionicons
+                  name={
+                    allTracksDownloaded
+                      ? "checkmark-circle"
+                      : "download-outline"
+                  }
+                  size={20}
+                  color={allTracksDownloaded ? "#22c55e" : "white"}
+                />
+              )}
+            </TouchableOpacity>
           </View>
         </View>
       }

app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx

@@ -8,7 +8,12 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Dimensions, TouchableOpacity, View } from "react-native";
+import {
+  ActivityIndicator,
+  Dimensions,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -16,8 +21,10 @@ import { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
 import { MusicTrackItem } from "@/components/music/MusicTrackItem";
 import { PlaylistPickerSheet } from "@/components/music/PlaylistPickerSheet";
 import { TrackOptionsSheet } from "@/components/music/TrackOptionsSheet";
+import { downloadTrack, getLocalPath } from "@/providers/AudioStorage";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
+import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { runtimeTicksToMinutes } from "@/utils/time";
 
@@ -37,6 +44,7 @@ export default function PlaylistDetailScreen() {
   const [trackOptionsOpen, setTrackOptionsOpen] = useState(false);
   const [playlistPickerOpen, setPlaylistPickerOpen] = useState(false);
   const [createPlaylistOpen, setCreatePlaylistOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   const handleTrackOptionsPress = useCallback((track: BaseItemDto) => {
     setSelectedTrack(track);
@@ -111,6 +119,30 @@ export default function PlaylistDetailScreen() {
     }
   }, [playQueue, tracks]);
 
+  // Check if all tracks are already downloaded
+  const allTracksDownloaded = useMemo(() => {
+    if (!tracks || tracks.length === 0) return false;
+    return tracks.every((track) => !!getLocalPath(track.Id));
+  }, [tracks]);
+
+  const handleDownloadPlaylist = useCallback(async () => {
+    if (!tracks || !api || !user?.Id || isDownloading) return;
+
+    setIsDownloading(true);
+    try {
+      for (const track of tracks) {
+        if (!track.Id || getLocalPath(track.Id)) continue;
+        const result = await getAudioStreamUrl(api, user.Id, track.Id);
+        if (result?.url && !result.isTranscoding) {
+          await downloadTrack(track.Id, result.url, { permanent: true });
+        }
+      }
+    } catch {
+      // Silent fail
+    }
+    setIsDownloading(false);
+  }, [tracks, api, user?.Id, isDownloading]);
+
   const isLoading = loadingPlaylist || loadingTracks;
 
   if (isLoading) {
@@ -180,7 +212,7 @@ export default function PlaylistDetailScreen() {
           </Text>
 
           {/* Play buttons */}
-          <View className='flex flex-row mt-4'>
+          <View className='flex flex-row mt-4 items-center'>
             <TouchableOpacity
               onPress={handlePlayAll}
               className='flex flex-row items-center bg-purple-600 px-6 py-3 rounded-full mr-3'
@@ -192,13 +224,32 @@ export default function PlaylistDetailScreen() {
             </TouchableOpacity>
             <TouchableOpacity
               onPress={handleShuffle}
-              className='flex flex-row items-center bg-neutral-800 px-6 py-3 rounded-full'
+              className='flex flex-row items-center bg-neutral-800 px-6 py-3 rounded-full mr-3'
             >
               <Ionicons name='shuffle' size={20} color='white' />
               <Text className='text-white font-medium ml-2'>
                 {t("music.shuffle")}
               </Text>
             </TouchableOpacity>
+            <TouchableOpacity
+              onPress={handleDownloadPlaylist}
+              disabled={allTracksDownloaded || isDownloading}
+              className='flex items-center justify-center bg-neutral-800 p-3 rounded-full'
+            >
+              {isDownloading ? (
+                <ActivityIndicator size={20} color='white' />
+              ) : (
+                <Ionicons
+                  name={
+                    allTracksDownloaded
+                      ? "checkmark-circle"
+                      : "download-outline"
+                  }
+                  size={20}
+                  color={allTracksDownloaded ? "#22c55e" : "white"}
+                />
+              )}
+            </TouchableOpacity>
           </View>
         </View>
       }

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

@@ -67,7 +67,6 @@ export default function PlaylistsScreen() {
     queryFn: async ({ pageParam = 0 }) => {
       const response = await getItemsApi(api!).getItems({
         userId: user?.Id,
-        parentId: libraryId,
         includeItemTypes: ["Playlist"],
         sortBy: ["SortName"],
         sortOrder: ["Ascending"],

app/(auth)/now-playing.tsx

@@ -411,7 +411,7 @@ const PlayerView: React.FC<PlayerViewProps> = ({
       </View>
 
       {/* Main Controls */}
-      <View className='flex flex-row items-center justify-center mb-4'>
+      <View className='flex flex-row items-center justify-center mb-2'>
         <TouchableOpacity
           onPress={onPrevious}
           disabled={!canGoPrevious || isLoading}
@@ -449,7 +449,7 @@ const PlayerView: React.FC<PlayerViewProps> = ({
       </View>
 
       {/* Shuffle & Repeat Controls */}
-      <View className='flex flex-row items-center justify-center mb-6'>
+      <View className='flex flex-row items-center justify-center mb-2'>
         <TouchableOpacity onPress={onToggleShuffle} className='p-3 mx-4'>
           <Ionicons
             name='shuffle'
@@ -465,7 +465,7 @@ const PlayerView: React.FC<PlayerViewProps> = ({
             color={repeatMode !== "off" ? "#9334E9" : "#666"}
           />
           {repeatMode === "one" && (
-            <View className='absolute -top-1 -right-1 bg-purple-600 rounded-full w-4 h-4 items-center justify-center'>
+            <View className='absolute right-0 bg-purple-600 rounded-full w-4 h-4 items-center justify-center'>
               <Text className='text-white text-[10px] font-bold'>1</Text>
             </View>
           )}
@@ -474,7 +474,7 @@ const PlayerView: React.FC<PlayerViewProps> = ({
 
       {/* Queue info */}
       {queue.length > 1 && (
-        <View className='items-center mb-8'>
+        <View className='items-center mb-4'>
           <Text className='text-neutral-500 text-sm'>
             {queueIndex + 1} of {queue.length}
           </Text>