Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 14:37:06 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Prevent wrong initial color on navigation on the same route

Browse Source
This commit is contained in:
jeffvli 2023-07-21 18:51:37 -07:00
parent 48eaddbeda
commit 853770ea8e
7 changed files with 62 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/renderer/features/albums/routes/album-detail-route.tsx
View File

@ -1,4 +1,4 @@
import { NativeScrollArea } from '/@/renderer/components';
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
@ -20,7 +20,11 @@ const AlbumDetailRoute = () => {
const { albumId } = useParams() as { albumId: string };
const server = useCurrentServer();
const detailQuery = useAlbumDetail({ query: { id: albumId }, serverId: server?.id });
const background = useFastAverageColor(detailQuery.data?.imageUrl, !detailQuery.isLoading);
const { color: background, colorId } = useFastAverageColor({
id: albumId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
});
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
@ -34,7 +38,9 @@ const AlbumDetailRoute = () => {
});
};
if (!background) return null;
if (!background || colorId !== albumId) {
return <Spinner container />;
}
return (
<AnimatedPage key={`album-detail-${albumId}`}>

18
src/renderer/features/artists/routes/album-artist-detail-route.tsx
View File

@ -1,4 +1,4 @@
import { NativeScrollArea } from '/@/renderer/components';
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useRef } from 'react';
import { useParams } from 'react-router';
@ -23,7 +23,11 @@ const AlbumArtistDetailRoute = () => {
query: { id: albumArtistId },
serverId: server?.id,
});
const background = useFastAverageColor(detailQuery.data?.imageUrl, !detailQuery.isLoading);
const { color, colorId } = useFastAverageColor({
id: albumArtistId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
});
const handlePlay = () => {
handlePlayQueueAdd?.({
@ -35,14 +39,16 @@ const AlbumArtistDetailRoute = () => {
});
};
if (detailQuery.isLoading || !background) return null;
if (detailQuery.isLoading || !color || colorId !== albumArtistId) {
return <Spinner container />;
}
return (
<AnimatedPage key={`album-artist-detail-${albumArtistId}`}>
<NativeScrollArea
ref={scrollAreaRef}
pageHeaderProps={{
backgroundColor: background,
backgroundColor: color,
children: (
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
@ -57,9 +63,9 @@ const AlbumArtistDetailRoute = () => {
>
<AlbumArtistDetailHeader
ref={headerRef}
background={background}
background={color}
/>
<AlbumArtistDetailContent background={background} />
<AlbumArtistDetailContent background={color} />
</NativeScrollArea>
</AnimatedPage>
);

6
src/renderer/features/player/components/full-screen-player-image.tsx
View File

@ -122,7 +122,11 @@ export const FullScreenPlayerImage = () => {
const { queue } = usePlayerData();
const useImageAspectRatio = useFullScreenPlayerStore((state) => state.useImageAspectRatio);
const currentSong = queue.current;
const background = useFastAverageColor(queue.current?.imageUrl, true, 'dominant');
const { color: background } = useFastAverageColor({
algorithm: 'dominant',
src: queue.current?.imageUrl,
srcLoaded: true,
});
const imageKey = `image-${background}`;
const [imageState, setImageState] = useSetState({

6
src/renderer/features/player/components/full-screen-player.tsx
View File

@ -193,7 +193,11 @@ export const FullScreenPlayer = () => {
}, [location, setStore]);
const currentSong = useCurrentSong();
const background = useFastAverageColor(currentSong?.imageUrl, true, 'dominant');
const { color: background } = useFastAverageColor({
algorithm: 'dominant',
src: currentSong?.imageUrl,
srcLoaded: true,
});
return (
<Container

16
src/renderer/features/playlists/components/playlist-detail-content.tsx
View File

@ -1,19 +1,16 @@
import { MutableRefObject, useMemo, useRef } from 'react';
import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Box, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { MutableRefObject, useMemo, useRef } from 'react';
import { RiMoreFill } from 'react-icons/ri';
import { generatePath, useNavigate, useParams } from 'react-router';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { useListStoreByKey } from '../../../store/list.store';
import { LibraryItem, QueueSong } from '/@/renderer/api/types';
import { Button, ConfirmModal, DropdownMenu, MotionGroup, toast } from '/@/renderer/components';
import {
getColumnDefs,
useFixedTableHeader,
VirtualTable,
} from '/@/renderer/components/virtual-table';
import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
import {
@ -30,7 +27,6 @@ import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { Play } from '/@/renderer/types';
import { useListStoreByKey } from '../../../store/list.store';
const ContentContainer = styled.div`
position: relative;
@ -97,8 +93,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
[playlistSongsQueryInfinite.data?.pages],
);
const { intersectRef, tableContainerRef } = useFixedTableHeader();
const deletePlaylistMutation = useDeletePlaylist({});
const handleDeletePlaylist = () => {
@ -166,7 +160,6 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
return (
<ContentContainer>
<Group
ref={intersectRef}
p="1rem"
position="apart"
>
@ -217,12 +210,13 @@ export const PlaylistDetailContent = ({ tableRef }: PlaylistDetailContentProps)
</Button>
</Group>
</Group>
<Box ref={tableContainerRef}>
<Box>
<VirtualTable
ref={tableRef}
autoFitColumns
autoHeight
deselectOnClickOutside
stickyHeader
suppressCellFocus
suppressHorizontalScroll
suppressLoadingOverlay

18
src/renderer/features/playlists/routes/playlist-detail-route.tsx
View File

@ -2,7 +2,7 @@ import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useParams } from 'react-router';
import { LibraryItem } from '/@/renderer/api/types';
import { NativeScrollArea } from '/@/renderer/components';
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { PlaylistDetailContent } from '/@/renderer/features/playlists/components/playlist-detail-content';
import { PlaylistDetailHeader } from '/@/renderer/features/playlists/components/playlist-detail-header';
@ -20,11 +20,12 @@ const PlaylistDetailRoute = () => {
const server = useCurrentServer();
const detailQuery = usePlaylistDetail({ query: { id: playlistId }, serverId: server?.id });
const background = useFastAverageColor(
detailQuery?.data?.imageUrl,
!detailQuery?.isLoading,
'sqrt',
);
const { color: background, colorId } = useFastAverageColor({
algorithm: 'sqrt',
id: playlistId,
src: detailQuery?.data?.imageUrl,
srcLoaded: !detailQuery?.isLoading,
});
const handlePlayQueueAdd = usePlayQueueAdd();
const playButtonBehavior = usePlayButtonBehavior();
@ -39,7 +40,9 @@ const PlaylistDetailRoute = () => {
});
};
if (!background) return null;
if (!background || colorId !== playlistId) {
return <Spinner container />;
}
return (
<AnimatedPage key={`playlist-detail-${playlistId}`}>
@ -55,6 +58,7 @@ const PlaylistDetailRoute = () => {
</LibraryHeaderBar.Title>
</LibraryHeaderBar>
),
offset: 200,
target: headerRef,
}}
>

24
src/renderer/hooks/use-fast-average-color.tsx
View File

@ -1,11 +1,15 @@
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import { FastAverageColor } from 'fast-average-color';
export const useFastAverageColor = (
src?: string | null,
srcLoaded?: boolean,
aglorithm?: 'dominant' | 'simple' | 'sqrt',
) => {
export const useFastAverageColor = (args: {
algorithm?: 'dominant' | 'simple' | 'sqrt';
id?: string;
src?: string | null;
srcLoaded?: boolean;
}) => {
const { algorithm, src, srcLoaded, id } = args;
const idRef = useRef<string | undefined>(id);
const [color, setColor] = useState<string | undefined>(undefined);
useEffect(() => {
@ -13,7 +17,7 @@ export const useFastAverageColor = (
if (src && srcLoaded) {
fac.getColorAsync(src, {
algorithm: aglorithm || 'dominant',
algorithm: algorithm || 'dominant',
ignoredColor: [
[255, 255, 255, 255, 90], // White
[0, 0, 0, 255, 30], // Black
@ -22,10 +26,12 @@ export const useFastAverageColor = (
mode: 'precision',
})
.then((color) => {
idRef.current = id;
return setColor(color.rgb);
})
.catch((e) => {
console.log('Error fetching average color', e);
idRef.current = id;
return setColor('rgba(0, 0, 0, 0)');
});
} else if (srcLoaded) {
@ -35,7 +41,7 @@ export const useFastAverageColor = (
return () => {
fac.destroy();
};
}, [aglorithm, srcLoaded, src]);
}, [algorithm, srcLoaded, src, id]);
return color;
return { color, colorId: idRef.current };
};