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

fix container ref instances

Browse Source
This commit is contained in:
jeffvli
2025-11-16 01:10:40 -08:00
parent f1508b81a5
commit b68711f8ed
14 changed files with 155 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/grid-carousel/grid-carousel-v2.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ const pageVariants: Variants = {
export function GridCarousel(props: GridCarouselProps) { export function GridCarousel(props: GridCarouselProps) {
const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props; const { cards, hasNextPage, loadNextPage, onNextPage, onPrevPage, rowCount = 1, title } = props;
const cq = useContainerQuery({ const { ref, ...cq } = useContainerQuery({
lg: 900, lg: 900,
md: 600, md: 600,
sm: 360, sm: 360,
@@ -120,7 +120,7 @@ export function GridCarousel(props: GridCarouselProps) {
}, [handleNextPage, handlePrevPage, isNextDisabled, isPrevDisabled, x]); }, [handleNextPage, handlePrevPage, isNextDisabled, isPrevDisabled, x]);
return ( return (
<div className={styles.gridCarousel} ref={cq.ref}> <div className={styles.gridCarousel} ref={ref}>
{cq.isCalculated && ( {cq.isCalculated && (
<> <>
<div className={styles.navigation}> <div className={styles.navigation}>
src/renderer/features/albums/components/album-detail-content.tsx
+3 -3
View File
@@ -39,7 +39,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
albumQueries.detail({ query: { id: albumId }, serverId: server.id }), albumQueries.detail({ query: { id: albumId }, serverId: server.id }),
); );
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const { externalLinks, lastFM, musicBrainz } = useGeneralSettings(); const { externalLinks, lastFM, musicBrainz } = useGeneralSettings();
const genreRoute = useGenreRoute(); const genreRoute = useGenreRoute();
@@ -96,7 +96,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
const mbzId = detailQuery?.data?.mbzId; const mbzId = detailQuery?.data?.mbzId;
return ( return (
<div className={styles.contentContainer} ref={cq.ref}> <div className={styles.contentContainer} ref={ref}>
<LibraryBackgroundOverlay backgroundColor={background} /> <LibraryBackgroundOverlay backgroundColor={background} />
<div className={styles.detailContainer}> <div className={styles.detailContainer}>
<section> <section>
@@ -198,7 +198,7 @@ export const AlbumDetailContent = ({ background }: AlbumDetailContentProps) => {
</section> </section>
)} )}
<Stack gap="lg" mt="3rem" ref={cq.ref}> <Stack gap="lg" mt="3rem">
{cq.height || cq.width ? ( {cq.height || cq.width ? (
<> <>
{carousels {carousels
src/renderer/features/albums/components/album-detail-header.tsx
+128 -134
View File
@@ -1,12 +1,11 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { forwardRef, Ref, useMemo } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { generatePath, Link, useParams } from 'react-router'; import { generatePath, Link, useParams } from 'react-router';
import { albumQueries } from '/@/renderer/features/albums/api/album-api'; import { albumQueries } from '/@/renderer/features/albums/api/album-api';
import { LibraryHeader } from '/@/renderer/features/shared/components/library-header'; import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation'; import { useSetRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
import { useContainerQuery } from '/@/renderer/hooks';
import { AppRoute } from '/@/renderer/router/routes'; import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store'; import { useCurrentServer } from '/@/renderer/store';
import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils'; import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
@@ -26,144 +25,139 @@ interface AlbumDetailHeaderProps {
}; };
} }
export const AlbumDetailHeader = forwardRef( export const AlbumDetailHeader = ({ background }: AlbumDetailHeaderProps) => {
({ background }: AlbumDetailHeaderProps, ref: Ref<HTMLDivElement>) => { const { albumId } = useParams() as { albumId: string };
const { albumId } = useParams() as { albumId: string }; const server = useCurrentServer();
const server = useCurrentServer(); const detailQuery = useQuery(
const detailQuery = useQuery( albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
albumQueries.detail({ query: { id: albumId }, serverId: server?.id }), );
); const { t } = useTranslation();
const cq = useContainerQuery();
const { t } = useTranslation();
const showRating = const showRating =
detailQuery?.data?._serverType === ServerType.NAVIDROME || detailQuery?.data?._serverType === ServerType.NAVIDROME ||
detailQuery?.data?._serverType === ServerType.SUBSONIC; detailQuery?.data?._serverType === ServerType.SUBSONIC;
const originalDifferentFromRelease = const originalDifferentFromRelease =
detailQuery.data?.originalDate && detailQuery.data?.originalDate &&
detailQuery.data.originalDate !== detailQuery.data.releaseDate; detailQuery.data.originalDate !== detailQuery.data.releaseDate;
const releasePrefix = originalDifferentFromRelease const releasePrefix = originalDifferentFromRelease
? t('page.albumDetail.released', { postProcess: 'sentenceCase' }) ? t('page.albumDetail.released', { postProcess: 'sentenceCase' })
: '♫'; : '♫';
const releaseTypes = useMemo( const releaseTypes = useMemo(
() => () =>
normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({ normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({
id: type, id: type,
value: titleCase(type), value: titleCase(type),
})) || [], })) || [],
[detailQuery.data?.releaseTypes, t], [detailQuery.data?.releaseTypes, t],
); );
const metadataItems = releaseTypes.concat([ const metadataItems = releaseTypes.concat([
{ {
id: 'releaseDate', id: 'releaseDate',
value: value:
detailQuery?.data?.releaseDate && detailQuery?.data?.releaseDate &&
`${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`, `${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`,
}, },
{ {
id: 'songCount', id: 'songCount',
value: t('entity.trackWithCount', { value: t('entity.trackWithCount', {
count: detailQuery?.data?.songCount as number, count: detailQuery?.data?.songCount as number,
}),
},
{
id: 'duration',
value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
},
{
id: 'playCount',
value:
typeof detailQuery?.data?.playCount === 'number' &&
t('entity.play', {
count: detailQuery?.data?.playCount,
}), }),
},
{
id: 'version',
value: detailQuery.data?.version,
},
]);
if (originalDifferentFromRelease) {
const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`;
metadataItems.splice(0, 0, {
id: 'originalDate',
value: formatted,
});
}
const updateRatingMutation = useSetRating({});
const handleUpdateRating = (rating: number) => {
if (!detailQuery?.data) return;
updateRatingMutation.mutate({
apiClientProps: { serverId: detailQuery.data._serverId },
query: {
id: [detailQuery.data.id],
rating,
type: LibraryItem.ALBUM,
}, },
{ });
id: 'duration', };
value:
detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
},
{
id: 'playCount',
value:
typeof detailQuery?.data?.playCount === 'number' &&
t('entity.play', {
count: detailQuery?.data?.playCount,
}),
},
{
id: 'version',
value: detailQuery.data?.version,
},
]);
if (originalDifferentFromRelease) { return (
const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`; <Stack>
metadataItems.splice(0, 0, { <LibraryHeader
id: 'originalDate', imageUrl={detailQuery?.data?.imageUrl}
value: formatted, item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
}); title={detailQuery?.data?.name || ''}
} {...background}
>
const updateRatingMutation = useSetRating({}); <Stack gap="lg">
<Pill.Group>
const handleUpdateRating = (rating: number) => { {metadataItems.map(
if (!detailQuery?.data) return; (item, index) =>
item.value && (
updateRatingMutation.mutate({ <Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
apiClientProps: { serverId: detailQuery.data._serverId }, ),
query: {
id: [detailQuery.data.id],
rating,
type: LibraryItem.ALBUM,
},
});
};
return (
<Stack ref={cq.ref}>
<LibraryHeader
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
ref={ref}
title={detailQuery?.data?.name || ''}
{...background}
>
<Stack gap="lg">
<Pill.Group>
{metadataItems.map(
(item, index) =>
item.value && (
<Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
),
)}
</Pill.Group>
{showRating && (
<Rating
onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
value={detailQuery?.data?.userRating || 0}
/>
)} )}
<Group </Pill.Group>
gap="md" {showRating && (
mah="4rem" <Rating
style={{ onChange={handleUpdateRating}
overflow: 'hidden', readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
WebkitBoxOrient: 'vertical', value={detailQuery?.data?.userRating || 0}
WebkitLineClamp: 2, />
}} )}
> <Group
{detailQuery?.data?.albumArtists.map((artist) => ( gap="md"
<Text mah="4rem"
component={Link} style={{
fw={600} overflow: 'hidden',
isLink WebkitBoxOrient: 'vertical',
key={`artist-${artist.id}`} WebkitLineClamp: 2,
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { }}
albumArtistId: artist.id, >
})} {detailQuery?.data?.albumArtists.map((artist) => (
variant="subtle" <Text
> component={Link}
{artist.name} fw={600}
</Text> isLink
))} key={`artist-${artist.id}`}
</Group> to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
</Stack> albumArtistId: artist.id,
</LibraryHeader> })}
</Stack> variant="subtle"
); >
}, {artist.name}
); </Text>
))}
</Group>
</Stack>
</LibraryHeader>
</Stack>
);
};
src/renderer/features/albums/components/album-list-header-filters.tsx
+1 -4
View File
@@ -5,7 +5,6 @@ import { ListMusicFolderDropdown } from '/@/renderer/features/shared/components/
import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button'; import { ListRefreshButton } from '/@/renderer/features/shared/components/list-refresh-button';
import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown'; import { ListSortByDropdown } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button'; import { ListSortOrderToggleButton } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
import { useContainerQuery } from '/@/renderer/hooks';
import { Divider } from '/@/shared/components/divider/divider'; import { Divider } from '/@/shared/components/divider/divider';
import { Flex } from '/@/shared/components/flex/flex'; import { Flex } from '/@/shared/components/flex/flex';
import { Group } from '/@/shared/components/group/group'; import { Group } from '/@/shared/components/group/group';
@@ -13,11 +12,9 @@ import { AlbumListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-ty
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
export const AlbumListHeaderFilters = () => { export const AlbumListHeaderFilters = () => {
const cq = useContainerQuery();
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
<Group gap="sm" ref={cq.ref} w="100%"> <Group gap="sm" w="100%">
<ListSortByDropdown <ListSortByDropdown
defaultSortByValue={AlbumListSort.NAME} defaultSortByValue={AlbumListSort.NAME}
itemType={LibraryItem.ALBUM} itemType={LibraryItem.ALBUM}
src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+2 -2
View File
@@ -32,7 +32,7 @@ import { Text } from '/@/shared/components/text/text';
import { LibraryItem, SongDetailResponse } from '/@/shared/types/domain-types'; import { LibraryItem, SongDetailResponse } from '/@/shared/types/domain-types';
const DummyAlbumDetailRoute = () => { const DummyAlbumDetailRoute = () => {
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const { t } = useTranslation(); const { t } = useTranslation();
const { albumId } = useParams() as { albumId: string }; const { albumId } = useParams() as { albumId: string };
@@ -120,7 +120,7 @@ const DummyAlbumDetailRoute = () => {
return ( return (
<AnimatedPage key={`dummy-album-detail-${albumId}`}> <AnimatedPage key={`dummy-album-detail-${albumId}`}>
<Stack ref={cq.ref}> <Stack ref={ref}>
<LibraryHeader <LibraryHeader
background={background} background={background}
imageUrl={detailQuery?.data?.imageUrl} imageUrl={detailQuery?.data?.imageUrl}
src/renderer/features/artists/components/album-artist-detail-content.tsx
+3 -3
View File
@@ -48,7 +48,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
artistId?: string; artistId?: string;
}; };
const routeId = (artistId || albumArtistId) as string; const routeId = (artistId || albumArtistId) as string;
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
const server = useCurrentServer(); const server = useCurrentServer();
const genrePath = useGenreRoute(); const genrePath = useGenreRoute();
@@ -234,10 +234,10 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
detailQuery?.isLoading || detailQuery?.isLoading ||
(server?.type === ServerType.NAVIDROME && enabledItem.topSongs && topSongsQuery?.isLoading); (server?.type === ServerType.NAVIDROME && enabledItem.topSongs && topSongsQuery?.isLoading);
if (isLoading) return <div className={styles.contentContainer} ref={cq.ref} />; if (isLoading) return <div className={styles.contentContainer} ref={ref} />;
return ( return (
<div className={styles.contentContainer} ref={cq.ref}> <div className={styles.contentContainer} ref={ref}>
<LibraryBackgroundOverlay backgroundColor={background} /> <LibraryBackgroundOverlay backgroundColor={background} />
<div className={styles.detailContainer}> <div className={styles.detailContainer}>
<Group gap="md"> <Group gap="md">
src/renderer/features/artists/components/album-artist-list-header-filters.tsx
+2 -2
View File
@@ -12,11 +12,11 @@ import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/dom
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
export const AlbumArtistListHeaderFilters = () => { export const AlbumArtistListHeaderFilters = () => {
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
<Group gap="sm" ref={cq.ref} w="100%"> <Group gap="sm" ref={ref} w="100%">
<ListSortByDropdown <ListSortByDropdown
defaultSortByValue={AlbumArtistListSort.NAME} defaultSortByValue={AlbumArtistListSort.NAME}
itemType={LibraryItem.ALBUM_ARTIST} itemType={LibraryItem.ALBUM_ARTIST}
src/renderer/features/artists/components/artist-list-header-filters.tsx
+2 -2
View File
@@ -18,14 +18,14 @@ import { ArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-t
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
export const ArtistListHeaderFilters = () => { export const ArtistListHeaderFilters = () => {
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const server = useCurrentServer(); const server = useCurrentServer();
const rolesQuery = useQuery(sharedQueries.roles({ query: {}, serverId: server.id })); const rolesQuery = useQuery(sharedQueries.roles({ query: {}, serverId: server.id }));
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
<Group gap="sm" ref={cq.ref} w="100%"> <Group gap="sm" ref={ref} w="100%">
<ListSortByDropdown <ListSortByDropdown
defaultSortByValue={ArtistListSort.NAME} defaultSortByValue={ArtistListSort.NAME}
itemType={LibraryItem.ARTIST} itemType={LibraryItem.ARTIST}
src/renderer/features/genres/components/genre-list-header-filters.tsx
+2 -2
View File
@@ -13,11 +13,11 @@ import { GenreListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-ty
import { ItemListKey } from '/@/shared/types/types'; import { ItemListKey } from '/@/shared/types/types';
export const GenreListHeaderFilters = () => { export const GenreListHeaderFilters = () => {
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
<Group gap="sm" ref={cq.ref} w="100%"> <Group gap="sm" ref={ref} w="100%">
<ListSortByDropdown <ListSortByDropdown
defaultSortByValue={GenreListSort.NAME} defaultSortByValue={GenreListSort.NAME}
itemType={LibraryItem.GENRE} itemType={LibraryItem.GENRE}
src/renderer/features/playlists/components/playlist-detail-song-list-header-filters.tsx
+2 -2
View File
@@ -260,7 +260,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
); );
const isSmartPlaylist = detailQuery.data?.rules; const isSmartPlaylist = detailQuery.data?.rules;
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const sortByLabel = const sortByLabel =
(server?.type && (server?.type &&
@@ -331,7 +331,7 @@ export const PlaylistDetailSongListHeaderFilters = ({
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
<Group gap="sm" ref={cq.ref} w="100%"> <Group gap="sm" ref={ref} w="100%">
<DropdownMenu position="bottom-start"> <DropdownMenu position="bottom-start">
<DropdownMenu.Target> <DropdownMenu.Target>
<Button <Button
src/renderer/features/playlists/components/playlist-list-header-filters.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ import { ItemListKey } from '/@/shared/types/types';
export const PlaylistListHeaderFilters = () => { export const PlaylistListHeaderFilters = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const server = useCurrentServer(); const server = useCurrentServer();
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const handleCreatePlaylistModal = () => { const handleCreatePlaylistModal = () => {
openModal({ openModal({
@@ -32,7 +32,7 @@ export const PlaylistListHeaderFilters = () => {
return ( return (
<Flex justify="space-between"> <Flex justify="space-between">
<Group gap="sm" ref={cq.ref} w="100%"> <Group gap="sm" ref={ref} w="100%">
<ListSortByDropdown <ListSortByDropdown
defaultSortByValue={PlaylistListSort.NAME} defaultSortByValue={PlaylistListSort.NAME}
itemType={LibraryItem.PLAYLIST} itemType={LibraryItem.PLAYLIST}
src/renderer/features/search/components/search-header.tsx
+2 -2
View File
@@ -30,7 +30,7 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { itemType } = useParams() as { itemType: LibraryItem }; const { itemType } = useParams() as { itemType: LibraryItem };
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => { const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } }); setSearchParams({ query: e.target.value }, { replace: true, state: { navigationId } });
@@ -52,7 +52,7 @@ export const SearchHeader = ({ navigationId }: SearchHeaderProps) => {
}; };
return ( return (
<Stack gap={0} ref={cq.ref}> <Stack gap={0} ref={ref}>
<PageHeader> <PageHeader>
<Flex justify="space-between" w="100%"> <Flex justify="space-between" w="100%">
<LibraryHeaderBar> <LibraryHeaderBar>
src/renderer/features/settings/components/settings-header.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { reset } = useSettingsStoreActions(); const { reset } = useSettingsStoreActions();
const search = useSettingSearchContext(); const search = useSettingSearchContext();
const cq = useContainerQuery(); const { ref, ...cq } = useContainerQuery();
const handleResetToDefault = () => { const handleResetToDefault = () => {
reset(); reset();
@@ -41,7 +41,7 @@ export const SettingsHeader = ({ setSearch }: SettingsHeaderProps) => {
}; };
return ( return (
<Flex ref={cq.ref}> <Flex ref={ref}>
<PageHeader> <PageHeader>
<LibraryHeaderBar> <LibraryHeaderBar>
<Flex align="center" justify="space-between" w="100%"> <Flex align="center" justify="space-between" w="100%">
src/renderer/features/sidebar/components/action-bar.tsx
+2 -2
View File
@@ -15,12 +15,12 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
export const ActionBar = () => { export const ActionBar = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const cq = useContainerQuery({ md: 300 }); const { ref, ...cq } = useContainerQuery({ md: 300 });
const navigate = useNavigate(); const navigate = useNavigate();
const { open } = useCommandPalette(); const { open } = useCommandPalette();
return ( return (
<div className={styles.container} ref={cq.ref}> <div className={styles.container} ref={ref}>
<Grid display="flex" gutter="sm" px="1rem" w="100%"> <Grid display="flex" gutter="sm" px="1rem" w="100%">
<Grid.Col span={6}> <Grid.Col span={6}>
<TextInput <TextInput