refactor: improve music design

2026-05-31 19:18:26 +01:00 · 2026-01-05 21:28:00 +01:00
parent 090ed98233
commit a26980ddab
16 changed files with 497 additions and 144 deletions
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/artist/[artistId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/artist/[artistId].tsx
@@ -227,7 +227,7 @@ export default function ArtistDetailScreen() {
          {section.type === "albums" ? (
            <HorizontalScroll
              data={section.data}
-              height={200}
+              height={178}
              keyExtractor={(item) => item.Id!}
              renderItem={(item) => <MusicAlbumCard album={item} />}
            />
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/music/playlist/[playlistId].tsx
@@ -8,12 +8,7 @@ import { useLocalSearchParams, useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  ActivityIndicator,
-  Dimensions,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -30,8 +25,7 @@ import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { runtimeTicksToMinutes } from "@/utils/time";

-const { width: SCREEN_WIDTH } = Dimensions.get("window");
-const ARTWORK_SIZE = SCREEN_WIDTH * 0.5;
+const ARTWORK_SIZE = 120;

 export default function PlaylistDetailScreen() {
  const { playlistId } = useLocalSearchParams<{ playlistId: string }>();
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/_layout.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/_layout.tsx
@@ -13,8 +13,7 @@ import { useTranslation } from "react-i18next";
 const { Navigator } = createMaterialTopTabNavigator();

 const TAB_LABEL_FONT_SIZE = 13;
-const TAB_ITEM_HORIZONTAL_PADDING = 18;
-const TAB_ITEM_MIN_WIDTH = 110;
+const TAB_ITEM_HORIZONTAL_PADDING = 12;

 export const Tab = withLayoutContext<
  MaterialTopTabNavigationOptions,
@@ -48,7 +47,6 @@ const Layout = () => {
          },
          tabBarItemStyle: {
            width: "auto",
-            minWidth: TAB_ITEM_MIN_WIDTH,
            paddingHorizontal: TAB_ITEM_HORIZONTAL_PADDING,
          },
          tabBarStyle: { backgroundColor: "black" },
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/albums.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/albums.tsx
@@ -6,11 +6,11 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Dimensions, RefreshControl, View } from "react-native";
+import { RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
-import { MusicAlbumCard } from "@/components/music/MusicAlbumCard";
+import { MusicAlbumRowCard } from "@/components/music/MusicAlbumRowCard";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";

 const ITEMS_PER_PAGE = 40;
@@ -65,13 +65,6 @@ export default function AlbumsScreen() {
    return data?.pages.flatMap((page) => page.items) || [];
  }, [data]);

-  const numColumns = 2;
-  const screenWidth = Dimensions.get("window").width;
-  const gap = 12;
-  const padding = 16;
-  const itemWidth =
-    (screenWidth - padding * 2 - gap * (numColumns - 1)) / numColumns;
-
  const handleEndReached = useCallback(() => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
@@ -98,11 +91,10 @@ export default function AlbumsScreen() {
    <View className='flex-1 bg-black'>
      <FlashList
        data={albums}
-        numColumns={numColumns}
        contentContainerStyle={{
          paddingBottom: insets.bottom + 100,
-          paddingTop: 16,
-          paddingHorizontal: padding,
+          paddingTop: 8,
+          paddingHorizontal: 16,
        }}
        refreshControl={
          <RefreshControl
@@ -113,17 +105,7 @@ export default function AlbumsScreen() {
        }
        onEndReached={handleEndReached}
        onEndReachedThreshold={0.5}
-        renderItem={({ item, index }) => (
-          <View
-            style={{
-              width: itemWidth,
-              marginRight: index % numColumns === 0 ? gap : 0,
-              marginBottom: gap,
-            }}
-          >
-            <MusicAlbumCard album={item} width={itemWidth} />
-          </View>
-        )}
+        renderItem={({ item }) => <MusicAlbumRowCard album={item} />}
        keyExtractor={(item) => item.Id!}
        ListFooterComponent={
          isFetchingNextPage ? (
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/artists.tsx
@@ -6,7 +6,7 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Dimensions, RefreshControl, View } from "react-native";
+import { RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
@@ -71,13 +71,6 @@ export default function ArtistsScreen() {
    return data?.pages.flatMap((page) => page.items) || [];
  }, [data]);

-  const numColumns = 3;
-  const screenWidth = Dimensions.get("window").width;
-  const gap = 12;
-  const padding = 16;
-  const itemWidth =
-    (screenWidth - padding * 2 - gap * (numColumns - 1)) / numColumns;
-
  const handleEndReached = useCallback(() => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
@@ -135,11 +128,10 @@ export default function ArtistsScreen() {
    <View className='flex-1 bg-black'>
      <FlashList
        data={artists}
-        numColumns={numColumns}
        contentContainerStyle={{
          paddingBottom: insets.bottom + 100,
-          paddingTop: 16,
-          paddingHorizontal: padding,
+          paddingTop: 8,
+          paddingHorizontal: 16,
        }}
        refreshControl={
          <RefreshControl
@@ -150,17 +142,7 @@ export default function ArtistsScreen() {
        }
        onEndReached={handleEndReached}
        onEndReachedThreshold={0.5}
-        renderItem={({ item, index }) => (
-          <View
-            style={{
-              width: itemWidth,
-              marginRight: index % numColumns !== numColumns - 1 ? gap : 0,
-              marginBottom: gap,
-            }}
-          >
-            <MusicArtistCard artist={item} size={itemWidth} />
-          </View>
-        )}
+        renderItem={({ item }) => <MusicArtistCard artist={item} />}
        keyExtractor={(item) => item.Id!}
        ListFooterComponent={
          isFetchingNextPage ? (
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/playlists.tsx
@@ -7,17 +7,17 @@ import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
 import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Dimensions,
-  RefreshControl,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { RefreshControl, 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 { CreatePlaylistModal } from "@/components/music/CreatePlaylistModal";
 import { MusicPlaylistCard } from "@/components/music/MusicPlaylistCard";
+import {
+  type PlaylistSortOption,
+  type PlaylistSortOrder,
+  PlaylistSortSheet,
+} from "@/components/music/PlaylistSortSheet";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";

 const ITEMS_PER_PAGE = 40;
@@ -36,9 +36,20 @@ export default function PlaylistsScreen() {
  const { t } = useTranslation();

  const [createModalOpen, setCreateModalOpen] = useState(false);
+  const [sortSheetOpen, setSortSheetOpen] = useState(false);
+  const [sortBy, setSortBy] = useState<PlaylistSortOption>("SortName");
+  const [sortOrder, setSortOrder] = useState<PlaylistSortOrder>("Ascending");

  const isReady = Boolean(api && user?.Id && libraryId);

+  const handleSortChange = useCallback(
+    (newSortBy: PlaylistSortOption, newSortOrder: PlaylistSortOrder) => {
+      setSortBy(newSortBy);
+      setSortOrder(newSortOrder);
+    },
+    [],
+  );
+
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
@@ -63,13 +74,13 @@ export default function PlaylistsScreen() {
    isFetchingNextPage,
    refetch,
  } = useInfiniteQuery({
-    queryKey: ["music-playlists", libraryId, user?.Id],
+    queryKey: ["music-playlists", libraryId, user?.Id, sortBy, sortOrder],
    queryFn: async ({ pageParam = 0 }) => {
      const response = await getItemsApi(api!).getItems({
        userId: user?.Id,
        includeItemTypes: ["Playlist"],
-        sortBy: ["SortName"],
-        sortOrder: ["Ascending"],
+        sortBy: [sortBy],
+        sortOrder: [sortOrder],
        limit: ITEMS_PER_PAGE,
        startIndex: pageParam,
        recursive: true,
@@ -93,13 +104,6 @@ export default function PlaylistsScreen() {
    return data?.pages.flatMap((page) => page.items) || [];
  }, [data]);

-  const numColumns = 2;
-  const screenWidth = Dimensions.get("window").width;
-  const gap = 12;
-  const padding = 16;
-  const itemWidth =
-    (screenWidth - padding * 2 - gap * (numColumns - 1)) / numColumns;
-
  const handleEndReached = useCallback(() => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
@@ -171,11 +175,10 @@ export default function PlaylistsScreen() {
    <View className='flex-1 bg-black'>
      <FlashList
        data={playlists}
-        numColumns={numColumns}
        contentContainerStyle={{
          paddingBottom: insets.bottom + 100,
-          paddingTop: 16,
-          paddingHorizontal: padding,
+          paddingTop: 8,
+          paddingHorizontal: 16,
        }}
        refreshControl={
          <RefreshControl
@@ -186,17 +189,26 @@ export default function PlaylistsScreen() {
        }
        onEndReached={handleEndReached}
        onEndReachedThreshold={0.5}
-        renderItem={({ item, index }) => (
-          <View
-            style={{
-              width: itemWidth,
-              marginRight: index % numColumns === 0 ? gap : 0,
-              marginBottom: gap,
-            }}
+        ListHeaderComponent={
+          <TouchableOpacity
+            onPress={() => setSortSheetOpen(true)}
+            className='flex-row items-center mb-2 py-1'
          >
-            <MusicPlaylistCard playlist={item} width={itemWidth} />
-          </View>
-        )}
+            <Ionicons name='swap-vertical' size={18} color='#9334E9' />
+            <Text className='text-purple-500 text-sm ml-1.5'>
+              {t(
+                `music.sort.${sortBy === "SortName" ? "alphabetical" : "date_created"}`,
+              )}
+            </Text>
+            <Ionicons
+              name={sortOrder === "Ascending" ? "arrow-up" : "arrow-down"}
+              size={14}
+              color='#9334E9'
+              style={{ marginLeft: 4 }}
+            />
+          </TouchableOpacity>
+        }
+        renderItem={({ item }) => <MusicPlaylistCard playlist={item} />}
        keyExtractor={(item) => item.Id!}
        ListFooterComponent={
          isFetchingNextPage ? (
@@ -210,6 +222,13 @@ export default function PlaylistsScreen() {
        open={createModalOpen}
        setOpen={setCreateModalOpen}
      />
+      <PlaylistSortSheet
+        open={sortSheetOpen}
+        setOpen={setSortSheetOpen}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+        onSortChange={handleSortChange}
+      />
    </View>
  );
 }
--- a/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx
+++ b/app/(auth)/(tabs)/(libraries)/music/[libraryId]/suggestions.tsx
@@ -290,7 +290,7 @@ export default function SuggestionsScreen() {
            {section.type === "albums" ? (
              <HorizontalScroll
                data={section.data}
-                height={200}
+                height={178}
                keyExtractor={(item) => item.Id!}
                renderItem={(item) => <MusicAlbumCard album={item} />}
              />