vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-06 20:10:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

temp 2

Browse Source
This commit is contained in:
jeffvli
2025-09-07 12:09:34 -07:00
parent a7430dae31
commit 0c7c0e488d
6 changed files with 195 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/home/routes/home-route.tsx
+180 -180
View File
@@ -33,198 +33,198 @@ const HomeRoute = () => {
const { windowBarStyle } = useWindowSettings(); const { windowBarStyle } = useWindowSettings();
const { homeFeature, homeItems } = useGeneralSettings(); const { homeFeature, homeItems } = useGeneralSettings();
const feature = useAlbumList({ // const feature = useAlbumList({
options: { // options: {
enabled: homeFeature, // enabled: homeFeature,
gcTime: 1000 * 60, // gcTime: 1000 * 60,
staleTime: 1000 * 60, // staleTime: 1000 * 60,
}, // },
query: { // query: {
limit: 20, // limit: 20,
offset: 0, // offset: 0,
sortBy: AlbumListSort.RANDOM, // sortBy: AlbumListSort.RANDOM,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
}, // },
serverId: server?.id, // serverId: server?.id,
}); // });
const featureItemsWithImage = useMemo(() => { // const featureItemsWithImage = useMemo(() => {
return feature.data?.items?.filter((item) => item.imageUrl) ?? []; // return feature.data?.items?.filter((item) => item.imageUrl) ?? [];
}, [feature.data?.items]); // }, [feature.data?.items]);
const random = useAlbumList({ // const random = useAlbumList({
options: { // options: {
staleTime: 1000 * 60 * 5, // staleTime: 1000 * 60 * 5,
}, // },
query: { // query: {
limit: itemsPerPage, // limit: itemsPerPage,
offset: 0, // offset: 0,
sortBy: AlbumListSort.RANDOM, // sortBy: AlbumListSort.RANDOM,
sortOrder: ListSortOrder.ASC, // sortOrder: ListSortOrder.ASC,
}, // },
serverId: server?.id, // serverId: server?.id,
}); // });
const recentlyPlayed = useRecentlyPlayed({ // const recentlyPlayed = useRecentlyPlayed({
options: { // options: {
staleTime: 0, // staleTime: 0,
}, // },
query: { // query: {
limit: itemsPerPage, // limit: itemsPerPage,
offset: 0, // offset: 0,
sortBy: AlbumListSort.RECENTLY_PLAYED, // sortBy: AlbumListSort.RECENTLY_PLAYED,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
}, // },
serverId: server?.id, // serverId: server?.id,
}); // });
const recentlyAdded = useAlbumList({ // const recentlyAdded = useAlbumList({
options: { // options: {
staleTime: 1000 * 60 * 5, // staleTime: 1000 * 60 * 5,
}, // },
query: { // query: {
limit: itemsPerPage, // limit: itemsPerPage,
offset: 0, // offset: 0,
sortBy: AlbumListSort.RECENTLY_ADDED, // sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
}, // },
serverId: server?.id, // serverId: server?.id,
}); // });
const mostPlayedAlbums = useAlbumList({ // const mostPlayedAlbums = useAlbumList({
options: { // options: {
enabled: server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME, // enabled: server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME,
staleTime: 1000 * 60 * 5, // staleTime: 1000 * 60 * 5,
}, // },
query: { // query: {
limit: itemsPerPage, // limit: itemsPerPage,
offset: 0, // offset: 0,
sortBy: AlbumListSort.PLAY_COUNT, // sortBy: AlbumListSort.PLAY_COUNT,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
}, // },
serverId: server?.id, // serverId: server?.id,
}); // });
const mostPlayedSongs = useSongList( // const mostPlayedSongs = useSongList(
{ // {
options: { // options: {
enabled: server?.type === ServerType.JELLYFIN, // enabled: server?.type === ServerType.JELLYFIN,
staleTime: 1000 * 60 * 5, // staleTime: 1000 * 60 * 5,
}, // },
query: { // query: {
limit: itemsPerPage, // limit: itemsPerPage,
offset: 0, // offset: 0,
sortBy: SongListSort.PLAY_COUNT, // sortBy: SongListSort.PLAY_COUNT,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
}, // },
serverId: server?.id, // serverId: server?.id,
}, // },
300, // 300,
); // );
const isLoading = // const isLoading =
random.isLoading || // random.isLoading ||
recentlyPlayed.isLoading || // recentlyPlayed.isLoading ||
recentlyAdded.isLoading || // recentlyAdded.isLoading ||
(server?.type === ServerType.JELLYFIN && mostPlayedSongs.isLoading) || // (server?.type === ServerType.JELLYFIN && mostPlayedSongs.isLoading) ||
((server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME) && // ((server?.type === ServerType.SUBSONIC || server?.type === ServerType.NAVIDROME) &&
mostPlayedAlbums.isLoading); // mostPlayedAlbums.isLoading);
if (isLoading) { // if (isLoading) {
return <Spinner container />; // return <Spinner container />;
} // }
const carousels = { // const carousels = {
[HomeItem.MOST_PLAYED]: { // [HomeItem.MOST_PLAYED]: {
data: // data:
server?.type === ServerType.JELLYFIN // server?.type === ServerType.JELLYFIN
? mostPlayedSongs?.data?.items // ? mostPlayedSongs?.data?.items
: mostPlayedAlbums?.data?.items, // : mostPlayedAlbums?.data?.items,
itemType: server?.type === ServerType.JELLYFIN ? LibraryItem.SONG : LibraryItem.ALBUM, // itemType: server?.type === ServerType.JELLYFIN ? LibraryItem.SONG : LibraryItem.ALBUM,
pagination: { // pagination: {
itemsPerPage, // itemsPerPage,
}, // },
sortBy: // sortBy:
server?.type === ServerType.JELLYFIN // server?.type === ServerType.JELLYFIN
? SongListSort.PLAY_COUNT // ? SongListSort.PLAY_COUNT
: AlbumListSort.PLAY_COUNT, // : AlbumListSort.PLAY_COUNT,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }), // title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
}, // },
[HomeItem.RANDOM]: { // [HomeItem.RANDOM]: {
data: random?.data?.items, // data: random?.data?.items,
itemType: LibraryItem.ALBUM, // itemType: LibraryItem.ALBUM,
sortBy: AlbumListSort.RANDOM, // sortBy: AlbumListSort.RANDOM,
sortOrder: ListSortOrder.ASC, // sortOrder: ListSortOrder.ASC,
title: t('page.home.explore', { postProcess: 'sentenceCase' }), // title: t('page.home.explore', { postProcess: 'sentenceCase' }),
}, // },
[HomeItem.RECENTLY_ADDED]: { // [HomeItem.RECENTLY_ADDED]: {
data: recentlyAdded?.data?.items, // data: recentlyAdded?.data?.items,
itemType: LibraryItem.ALBUM, // itemType: LibraryItem.ALBUM,
pagination: { // pagination: {
itemsPerPage, // itemsPerPage,
}, // },
sortBy: AlbumListSort.RECENTLY_ADDED, // sortBy: AlbumListSort.RECENTLY_ADDED,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }), // title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
}, // },
[HomeItem.RECENTLY_PLAYED]: { // [HomeItem.RECENTLY_PLAYED]: {
data: recentlyPlayed?.data?.items, // data: recentlyPlayed?.data?.items,
itemType: LibraryItem.ALBUM, // itemType: LibraryItem.ALBUM,
pagination: { // pagination: {
itemsPerPage, // itemsPerPage,
}, // },
sortBy: AlbumListSort.RECENTLY_PLAYED, // sortBy: AlbumListSort.RECENTLY_PLAYED,
sortOrder: ListSortOrder.DESC, // sortOrder: ListSortOrder.DESC,
title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }), // title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }),
}, // },
}; // };
const sortedCarousel = homeItems // const sortedCarousel = homeItems
.filter((item) => { // .filter((item) => {
if (item.disabled) { // if (item.disabled) {
return false; // return false;
} // }
if (server?.type === ServerType.JELLYFIN && item.id === HomeItem.RECENTLY_PLAYED) { // if (server?.type === ServerType.JELLYFIN && item.id === HomeItem.RECENTLY_PLAYED) {
return false; // return false;
} // }
return true; // return true;
}) // })
.map((item) => ({ // .map((item) => ({
...carousels[item.id], // ...carousels[item.id],
uniqueId: item.id, // uniqueId: item.id,
})); // }));
const invalidateCarouselQuery = (carousel: { // const invalidateCarouselQuery = (carousel: {
itemType: LibraryItem; // itemType: LibraryItem;
sortBy: AlbumListSort | SongListSort; // sortBy: AlbumListSort | SongListSort;
sortOrder: ListSortOrder; // sortOrder: ListSortOrder;
}) => { // }) => {
if (carousel.itemType === LibraryItem.ALBUM) { // if (carousel.itemType === LibraryItem.ALBUM) {
queryClient.invalidateQueries({ // queryClient.invalidateQueries({
exact: false, // exact: false,
queryKey: queryKeys.albums.list(server?.id, { // queryKey: queryKeys.albums.list(server?.id, {
limit: itemsPerPage, // limit: itemsPerPage,
sortBy: carousel.sortBy, // sortBy: carousel.sortBy,
sortOrder: carousel.sortOrder, // sortOrder: carousel.sortOrder,
startIndex: 0, // startIndex: 0,
}), // }),
}); // });
} // }
if (carousel.itemType === LibraryItem.SONG) { // if (carousel.itemType === LibraryItem.SONG) {
queryClient.invalidateQueries({ // queryClient.invalidateQueries({
exact: false, // exact: false,
queryKey: queryKeys.songs.list(server?.id, { // queryKey: queryKeys.songs.list(server?.id, {
limit: itemsPerPage, // limit: itemsPerPage,
sortBy: carousel.sortBy, // sortBy: carousel.sortBy,
sortOrder: carousel.sortOrder, // sortOrder: carousel.sortOrder,
startIndex: 0, // startIndex: 0,
}), // }),
}); // });
} // }
}; // };
return ( return (
<AnimatedPage> <AnimatedPage>
@@ -247,7 +247,7 @@ const HomeRoute = () => {
pt={windowBarStyle === Platform.WEB ? '5rem' : '3rem'} pt={windowBarStyle === Platform.WEB ? '5rem' : '3rem'}
px="2rem" px="2rem"
> >
{homeFeature && <FeatureCarousel data={featureItemsWithImage} />} {/* {homeFeature && <FeatureCarousel data={featureItemsWithImage} />} */}
<AlbumInfiniteCarousel <AlbumInfiniteCarousel
serverId={server?.id ?? ''} serverId={server?.id ?? ''}
src/renderer/features/shared/components/infinite-album-carousel/infinite-album-carousel.tsx
+6 -2
View File
@@ -8,7 +8,11 @@ import {
getInfiniteAlbumListQueryKey, getInfiniteAlbumListQueryKey,
} from '/@/renderer/features/albums/api/queries/get-album-list-query'; } from '/@/renderer/features/albums/api/queries/get-album-list-query';
import { GridCarousel } from '/@/shared/components/grid-carousel/grid-carousel'; import { GridCarousel } from '/@/shared/components/grid-carousel/grid-carousel';
import { AlbumListResponse, AlbumListSortOptions } from '/@/shared/types/domain/album-domain-types'; import {
Album,
AlbumListResponse,
AlbumListSortOptions,
} from '/@/shared/types/domain/album-domain-types';
import { ListSortOrder } from '/@/shared/types/domain/shared-domain-types'; import { ListSortOrder } from '/@/shared/types/domain/shared-domain-types';
interface AlbumCarouselProps { interface AlbumCarouselProps {
@@ -19,7 +23,7 @@ interface AlbumCarouselProps {
title: string; title: string;
} }
const MemoizedAlbumCard = memo(PosterCard); const MemoizedAlbumCard = memo(({ data }: { data: Album }) => <div>{data.name}</div>);
export function AlbumInfiniteCarousel(props: AlbumCarouselProps) { export function AlbumInfiniteCarousel(props: AlbumCarouselProps) {
const { rowCount = 1, serverId, sortBy, sortOrder, title } = props; const { rowCount = 1, serverId, sortBy, sortOrder, title } = props;
src/shared/api/subsonic/subsonic-normalize.ts
-1
View File
@@ -62,7 +62,6 @@ export const normalize = {
explicit: item.explicitStatus === 'explicit', explicit: item.explicitStatus === 'explicit',
genres: getGenres(item), genres: getGenres(item),
id: item.id.toString(), id: item.id.toString(),
imagePlaceholderUrl: null,
imageUrl, imageUrl,
isCompilation: getIsCompilation(item), isCompilation: getIsCompilation(item),
mbzId: item.musicBrainzId || null, mbzId: item.musicBrainzId || null,
src/shared/components/grid-carousel/grid-carousel.tsx
+3 -5
View File
@@ -86,22 +86,20 @@ export function GridCarousel(props: GridCarouselProps) {
return ( return (
<motion.div className={styles.gridCarousel} ref={containerRef}> <motion.div className={styles.gridCarousel} ref={containerRef}>
<div className={styles.navigation}> <div className={styles.navigation}>
<TextTitle order={1} size="lg"> <TextTitle order={1}>{title}</TextTitle>
{title}
</TextTitle>
<Group gap="xs" justify="end"> <Group gap="xs" justify="end">
<ActionIcon <ActionIcon
disabled={isPrevDisabled} disabled={isPrevDisabled}
icon="arrowLeftS" icon="arrowLeftS"
onClick={handlePrevPage} onClick={handlePrevPage}
size="lg" size="xs"
variant="default" variant="default"
/> />
<ActionIcon <ActionIcon
disabled={isNextDisabled} disabled={isNextDisabled}
icon="arrowRightS" icon="arrowRightS"
onClick={handleNextPage} onClick={handleNextPage}
size="lg" size="xs"
variant="default" variant="default"
/> />
</Group> </Group>
src/shared/hooks/use-container-breakpoints.ts
+6 -6
View File
@@ -6,12 +6,12 @@ import { Breakpoints } from '/@/shared/types/types';
export function useContainerBreakpoints() { export function useContainerBreakpoints() {
const [ref, rect] = useResizeObserver(); const [ref, rect] = useResizeObserver();
const [globalBreakpoints, setGlobalBreakpoints] = useState({ const [globalBreakpoints, setGlobalBreakpoints] = useState({
'2xl': 0,
'3xl': 0,
lg: 0, lg: 0,
md: 0, md: 0,
sm: 0, sm: 0,
xl: 0, xl: 0,
xxl: 0,
xxxl: 0,
}); });
useEffect(() => { useEffect(() => {
@@ -25,12 +25,12 @@ export function useContainerBreakpoints() {
}; };
setGlobalBreakpoints({ setGlobalBreakpoints({
'2xl': getBreakpointValue('2xl'),
'3xl': getBreakpointValue('3xl'),
lg: getBreakpointValue('lg'), lg: getBreakpointValue('lg'),
md: getBreakpointValue('md'), md: getBreakpointValue('md'),
sm: getBreakpointValue('sm'), sm: getBreakpointValue('sm'),
xl: getBreakpointValue('xl'), xl: getBreakpointValue('xl'),
xxl: getBreakpointValue('xxl'),
xxxl: getBreakpointValue('xxxl'),
}); });
}, []); }, []);
@@ -38,8 +38,8 @@ export function useContainerBreakpoints() {
const isLargerThanMd = rect?.width >= globalBreakpoints.md; const isLargerThanMd = rect?.width >= globalBreakpoints.md;
const isLargerThanLg = rect?.width >= globalBreakpoints.lg; const isLargerThanLg = rect?.width >= globalBreakpoints.lg;
const isLargerThanXl = rect?.width >= globalBreakpoints.xl; const isLargerThanXl = rect?.width >= globalBreakpoints.xl;
const isLargerThan2xl = rect?.width >= globalBreakpoints.xxl; const isLargerThan2xl = rect?.width >= globalBreakpoints['2xl'];
const isLargerThan3xl = rect?.width >= globalBreakpoints.xxxl; const isLargerThan3xl = rect?.width >= globalBreakpoints['3xl'];
const breakpoints: Breakpoints = { const breakpoints: Breakpoints = {
isLargerThan2xl, isLargerThan2xl,
src/shared/types/domain/album-domain-types.ts
-1
View File
@@ -165,7 +165,6 @@ export type Album = {
explicit: boolean | null; explicit: boolean | null;
genres: RelatedGenre[]; genres: RelatedGenre[];
id: string; id: string;
imagePlaceholderUrl: null | string;
imageUrl: null | string; imageUrl: null | string;
isCompilation: boolean | null; isCompilation: boolean | null;
mbzId: null | string; mbzId: null | string;