pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove dynamic queue header color

Browse source
This commit is contained in:
jeffvli 2023-01-01 14:04:16 -08:00
parent b037329377
commit cdbd3f8c7b
1 changed files with 4 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/renderer/features/now-playing/components/now-playing-header.tsx
View file

@ -1,50 +1,13 @@
import { useEffect, useState } from 'react';
import { Group } from '@mantine/core'; import { Group } from '@mantine/core';
import { FastAverageColor } from 'fast-average-color';
import { PageHeader, TextTitle } from '/@/renderer/components'; import { PageHeader, TextTitle } from '/@/renderer/components';
import { useCurrentSong } from '/@/renderer/store';
import { getHeaderColor } from '/@/renderer/utils';
import { useTheme } from '/@/renderer/hooks';
export const NowPlayingHeader = () => { export const NowPlayingHeader = () => {
const [headerColor, setHeaderColor] = useState({ isDark: false, value: 'rgba(0, 0, 0, 0)' }); // const currentSong = useCurrentSong();
const currentSong = useCurrentSong(); // const theme = useTheme();
const theme = useTheme();
useEffect(() => {
const fac = new FastAverageColor();
const url = currentSong?.imageUrl;
if (url) {
fac
.getColorAsync(currentSong?.imageUrl, {
algorithm: 'simple',
ignoredColor: [
[255, 255, 255, 255], // White
[0, 0, 0, 255], // Black
],
mode: 'precision',
})
.then((color) => {
const isDark = color.isDark;
return setHeaderColor({
isDark,
value: getHeaderColor(color.rgb, theme === 'dark' ? 0.5 : 0.8),
});
})
.catch((e) => {
console.log(e);
});
}
return () => {
fac.destroy();
};
}, [currentSong?.imageUrl, theme]);
return ( return (
<PageHeader backgroundColor={headerColor.value}> <PageHeader>
<Group> <Group p="1rem">
<TextTitle <TextTitle
fw="bold" fw="bold"
order={3} order={3}