fix: music downloading not playing + queue drag and drop

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

@@ -1,3 +1,5 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
 import { Switch } from "react-native-gesture-handler";
@@ -5,13 +7,68 @@ 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 { PlatformDropdown } from "@/components/PlatformDropdown";
 import { useSettings } from "@/utils/atoms/settings";
 
+const CACHE_SIZE_OPTIONS = [
+  { label: "100 MB", value: 100 },
+  { label: "250 MB", value: 250 },
+  { label: "500 MB", value: 500 },
+  { label: "1 GB", value: 1024 },
+  { label: "2 GB", value: 2048 },
+];
+
+const LOOKAHEAD_COUNT_OPTIONS = [
+  { label: "1 song", value: 1 },
+  { label: "2 songs", value: 2 },
+  { label: "3 songs", value: 3 },
+  { label: "5 songs", value: 5 },
+];
+
 export default function MusicSettingsPage() {
   const insets = useSafeAreaInsets();
   const { settings, updateSettings, pluginSettings } = useSettings();
   const { t } = useTranslation();
 
+  const cacheSizeOptions = useMemo(
+    () => [
+      {
+        options: CACHE_SIZE_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: String(option.value),
+          selected: option.value === settings?.audioMaxCacheSizeMB,
+          onPress: () => updateSettings({ audioMaxCacheSizeMB: option.value }),
+        })),
+      },
+    ],
+    [settings?.audioMaxCacheSizeMB, updateSettings],
+  );
+
+  const currentCacheSizeLabel =
+    CACHE_SIZE_OPTIONS.find((o) => o.value === settings?.audioMaxCacheSizeMB)
+      ?.label ?? `${settings?.audioMaxCacheSizeMB} MB`;
+
+  const lookaheadCountOptions = useMemo(
+    () => [
+      {
+        options: LOOKAHEAD_COUNT_OPTIONS.map((option) => ({
+          type: "radio" as const,
+          label: option.label,
+          value: String(option.value),
+          selected: option.value === settings?.audioLookaheadCount,
+          onPress: () => updateSettings({ audioLookaheadCount: option.value }),
+        })),
+      },
+    ],
+    [settings?.audioLookaheadCount, updateSettings],
+  );
+
+  const currentLookaheadLabel =
+    LOOKAHEAD_COUNT_OPTIONS.find(
+      (o) => o.value === settings?.audioLookaheadCount,
+    )?.label ?? `${settings?.audioLookaheadCount} songs`;
+
   return (
     <ScrollView
       contentInsetAdjustmentBehavior='automatic'
@@ -67,6 +124,51 @@ export default function MusicSettingsPage() {
                 }
               />
             </ListItem>
+            <ListItem
+              title={t("home.settings.music.lookahead_count")}
+              disabled={
+                pluginSettings?.audioLookaheadCount?.locked ||
+                !settings.audioLookaheadEnabled
+              }
+            >
+              <PlatformDropdown
+                groups={lookaheadCountOptions}
+                trigger={
+                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                    <Text className='mr-1 text-[#8E8D91]'>
+                      {currentLookaheadLabel}
+                    </Text>
+                    <Ionicons
+                      name='chevron-expand-sharp'
+                      size={18}
+                      color='#5A5960'
+                    />
+                  </View>
+                }
+                title={t("home.settings.music.lookahead_count")}
+              />
+            </ListItem>
+            <ListItem
+              title={t("home.settings.music.max_cache_size")}
+              disabled={pluginSettings?.audioMaxCacheSizeMB?.locked}
+            >
+              <PlatformDropdown
+                groups={cacheSizeOptions}
+                trigger={
+                  <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+                    <Text className='mr-1 text-[#8E8D91]'>
+                      {currentCacheSizeLabel}
+                    </Text>
+                    <Ionicons
+                      name='chevron-expand-sharp'
+                      size={18}
+                      color='#5A5960'
+                    />
+                  </View>
+                }
+                title={t("home.settings.music.max_cache_size")}
+              />
+            </ListItem>
           </ListGroup>
         </View>
       </View>

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

@@ -139,7 +139,10 @@ export default function AlbumDetailScreen() {
         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 });
+          await downloadTrack(track.Id, result.url, {
+            permanent: true,
+            container: result.mediaSource?.Container || undefined,
+          });
         }
       }
     } catch {
@@ -150,7 +153,8 @@ export default function AlbumDetailScreen() {
 
   const isLoading = loadingAlbum || loadingTracks;
 
-  if (isLoading) {
+  // Only show loading if we have no cached data to display
+  if (isLoading && !album) {
     return (
       <View className='flex-1 justify-center items-center bg-black'>
         <Loader />

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

@@ -120,7 +120,8 @@ export default function ArtistDetailScreen() {
 
   const isLoading = loadingArtist || loadingAlbums || loadingTracks;
 
-  if (isLoading) {
+  // Only show loading if we have no cached data to display
+  if (isLoading && !artist) {
     return (
       <View className='flex-1 justify-center items-center bg-black'>
         <Loader />

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

@@ -146,7 +146,10 @@ export default function PlaylistDetailScreen() {
         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 });
+          await downloadTrack(track.Id, result.url, {
+            permanent: true,
+            container: result.mediaSource?.Container || undefined,
+          });
         }
       }
     } catch {
@@ -157,7 +160,8 @@ export default function PlaylistDetailScreen() {
 
   const isLoading = loadingPlaylist || loadingTracks;
 
-  if (isLoading) {
+  // Only show loading if we have no cached data to display
+  if (isLoading && !playlist) {
     return (
       <View className='flex-1 justify-center items-center bg-black'>
         <Loader />

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

@@ -102,7 +102,8 @@ export default function ArtistsScreen() {
     );
   }
 
-  if (isLoading) {
+  // Only show loading if we have no cached data to display
+  if (isLoading && artists.length === 0) {
     return (
       <View className='flex-1 justify-center items-center bg-black'>
         <Loader />
@@ -110,7 +111,9 @@ export default function ArtistsScreen() {
     );
   }
 
-  if (isError) {
+  // Only show error if we have no cached data to display
+  // This allows offline access to previously cached artists
+  if (isError && artists.length === 0) {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>

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

@@ -124,7 +124,8 @@ export default function PlaylistsScreen() {
     );
   }
 
-  if (isLoading) {
+  // Only show loading if we have no cached data to display
+  if (isLoading && playlists.length === 0) {
     return (
       <View className='flex-1 justify-center items-center bg-black'>
         <Loader />
@@ -132,7 +133,9 @@ export default function PlaylistsScreen() {
     );
   }
 
-  if (isError) {
+  // Only show error if we have no cached data to display
+  // This allows offline access to previously cached playlists
+  if (isError && playlists.length === 0) {
     return (
       <View className='flex-1 justify-center items-center bg-black px-6'>
         <Text className='text-neutral-500 text-center'>

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

@@ -232,7 +232,8 @@ export default function SuggestionsScreen() {
     );
   }
 
-  if (isLoading) {
+  // Only show loading if we have no cached data to display
+  if (isLoading && sections.length === 0) {
     return (
       <View className='flex-1 justify-center items-center bg-black'>
         <Loader />
@@ -240,7 +241,12 @@ export default function SuggestionsScreen() {
     );
   }
 
-  if (isLatestError || isRecentlyPlayedError || isFrequentError) {
+  // Only show error if we have no cached data to display
+  // This allows offline access to previously cached suggestions
+  if (
+    (isLatestError || isRecentlyPlayedError || isFrequentError) &&
+    sections.length === 0
+  ) {
     const msg =
       (latestError as Error | undefined)?.message ||
       (recentlyPlayedError as Error | undefined)?.message ||

app/(auth)/now-playing.tsx

@@ -10,13 +10,16 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ActivityIndicator,
   Dimensions,
-  FlatList,
   Platform,
   ScrollView,
   TouchableOpacity,
   View,
 } from "react-native";
 import { Slider } from "react-native-awesome-slider";
+import DraggableFlatList, {
+  type RenderItemParams,
+  ScaleDecorator,
+} from "react-native-draggable-flatlist";
 import { useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Badge } from "@/components/Badge";
@@ -73,6 +76,7 @@ export default function NowPlayingScreen() {
     toggleShuffle,
     jumpToIndex,
     removeFromQueue,
+    reorderQueue,
     stop,
   } = useMusicPlayer();
 
@@ -244,6 +248,7 @@ export default function NowPlayingScreen() {
           queueIndex={queueIndex}
           onJumpToIndex={jumpToIndex}
           onRemoveFromQueue={removeFromQueue}
+          onReorderQueue={reorderQueue}
         />
       )}
     </View>
@@ -490,6 +495,7 @@ interface QueueViewProps {
   queueIndex: number;
   onJumpToIndex: (index: number) => void;
   onRemoveFromQueue: (index: number) => void;
+  onReorderQueue: (newQueue: BaseItemDto[]) => void;
 }
 
 const QueueView: React.FC<QueueViewProps> = ({
@@ -498,9 +504,11 @@ const QueueView: React.FC<QueueViewProps> = ({
   queueIndex,
   onJumpToIndex,
   onRemoveFromQueue,
+  onReorderQueue,
 }) => {
   const renderQueueItem = useCallback(
-    ({ item, index }: { item: BaseItemDto; index: number }) => {
+    ({ item, drag, isActive, getIndex }: RenderItemParams<BaseItemDto>) => {
+      const index = getIndex() ?? 0;
       const isCurrentTrack = index === queueIndex;
       const isPast = index < queueIndex;
 
@@ -512,80 +520,102 @@ const QueueView: React.FC<QueueViewProps> = ({
         : null;
 
       return (
-        <TouchableOpacity
-          onPress={() => onJumpToIndex(index)}
-          className={`flex-row items-center px-4 py-3 ${isCurrentTrack ? "bg-purple-900/30" : ""}`}
-          style={{ opacity: isPast ? 0.5 : 1 }}
-        >
-          {/* Track number / Now playing indicator */}
-          <View className='w-8 items-center'>
-            {isCurrentTrack ? (
-              <Ionicons name='musical-note' size={16} color='#9334E9' />
-            ) : (
-              <Text className='text-neutral-500 text-sm'>{index + 1}</Text>
-            )}
-          </View>
-
-          {/* Album art */}
-          <View className='w-12 h-12 rounded overflow-hidden bg-neutral-800 mr-3'>
-            {imageUrl ? (
-              <Image
-                source={{ uri: imageUrl }}
-                style={{ width: "100%", height: "100%" }}
-                contentFit='cover'
-                cachePolicy='memory-disk'
-              />
-            ) : (
-              <View className='flex-1 items-center justify-center'>
-                <Ionicons name='musical-note' size={16} color='#666' />
-              </View>
-            )}
-          </View>
-
-          {/* Track info */}
-          <View className='flex-1 mr-2'>
-            <Text
-              numberOfLines={1}
-              className={`text-base ${isCurrentTrack ? "text-purple-400 font-semibold" : "text-white"}`}
-            >
-              {item.Name}
-            </Text>
-            <Text numberOfLines={1} className='text-neutral-500 text-sm'>
-              {item.Artists?.join(", ") || item.AlbumArtist}
-            </Text>
-          </View>
-
-          {/* Remove button (not for current track) */}
-          {!isCurrentTrack && (
+        <ScaleDecorator>
+          <TouchableOpacity
+            onPress={() => onJumpToIndex(index)}
+            onLongPress={drag}
+            disabled={isActive}
+            className='flex-row items-center px-4 py-3'
+            style={{
+              opacity: isPast && !isActive ? 0.5 : 1,
+              backgroundColor: isActive
+                ? "#2a2a2a"
+                : isCurrentTrack
+                  ? "rgba(147, 52, 233, 0.3)"
+                  : "#121212",
+            }}
+          >
+            {/* Drag handle */}
             <TouchableOpacity
-              onPress={() => onRemoveFromQueue(index)}
+              onPressIn={drag}
+              disabled={isActive}
               hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-              className='p-2'
+              className='pr-2'
             >
-              <Ionicons name='close' size={20} color='#666' />
+              <Ionicons
+                name='reorder-three'
+                size={20}
+                color={isActive ? "#9334E9" : "#666"}
+              />
             </TouchableOpacity>
-          )}
-        </TouchableOpacity>
+
+            {/* Album art */}
+            <View className='w-12 h-12 rounded overflow-hidden bg-neutral-800 mr-3'>
+              {imageUrl ? (
+                <Image
+                  source={{ uri: imageUrl }}
+                  style={{ width: "100%", height: "100%" }}
+                  contentFit='cover'
+                  cachePolicy='memory-disk'
+                />
+              ) : (
+                <View className='flex-1 items-center justify-center'>
+                  <Ionicons name='musical-note' size={16} color='#666' />
+                </View>
+              )}
+            </View>
+
+            {/* Track info */}
+            <View className='flex-1 mr-2'>
+              <Text
+                numberOfLines={1}
+                className={`text-base ${isCurrentTrack ? "text-purple-400 font-semibold" : "text-white"}`}
+              >
+                {item.Name}
+              </Text>
+              <Text numberOfLines={1} className='text-neutral-500 text-sm'>
+                {item.Artists?.join(", ") || item.AlbumArtist}
+              </Text>
+            </View>
+
+            {/* Now playing indicator */}
+            {isCurrentTrack && (
+              <Ionicons name='musical-note' size={16} color='#9334E9' />
+            )}
+
+            {/* Remove button (not for current track) */}
+            {!isCurrentTrack && (
+              <TouchableOpacity
+                onPress={() => onRemoveFromQueue(index)}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                className='p-2'
+              >
+                <Ionicons name='close' size={20} color='#666' />
+              </TouchableOpacity>
+            )}
+          </TouchableOpacity>
+        </ScaleDecorator>
       );
     },
     [api, queueIndex, onJumpToIndex, onRemoveFromQueue],
   );
 
-  const _upNext = queue.slice(queueIndex + 1);
+  const handleDragEnd = useCallback(
+    ({ data }: { data: BaseItemDto[] }) => {
+      onReorderQueue(data);
+    },
+    [onReorderQueue],
+  );
+
   const history = queue.slice(0, queueIndex);
 
   return (
-    <FlatList
+    <DraggableFlatList
       data={queue}
       keyExtractor={(item, index) => `${item.Id}-${index}`}
       renderItem={renderQueueItem}
+      onDragEnd={handleDragEnd}
       showsVerticalScrollIndicator={false}
-      initialScrollIndex={queueIndex > 2 ? queueIndex - 2 : 0}
-      getItemLayout={(_, index) => ({
-        length: 72,
-        offset: 72 * index,
-        index,
-      })}
       ListHeaderComponent={
         <View className='px-4 py-2'>
           <Text className='text-neutral-400 text-xs uppercase tracking-wider'>