antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 10:23:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Album blur, allow clicking the playerbar to toggle the player, misc changes (#717)

Browse source 
* Album blur, allow clicking the playerbar to toggle the player

* Fix stopProporagion, sync package with upsteam, update translation

* recommit my existing changes

* Update default albumBackgroundBlur to 6

* according to git this commit resets the package files

* merge with our fork because pyx forgot to add it

* try adding a setting

* change the playerbar animation

* make the animation quicker bc its choppy

* change playerbar to use a bool instead

* requested opacity fix

* Refactor classes to use clsx

---------

Co-authored-by: iiPython <ben@iipython.dev>
Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>
This commit is contained in:
Pyx 2024-09-01 19:42:01 -04:00 • committed by GitHub
parent b93ad40571
commit eb50c69a35
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 197 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/renderer/features/albums/components/album-detail-header.tsx
View file

@ -13,7 +13,10 @@ import { useCurrentServer } from '/@/renderer/store';
import { formatDateAbsolute, formatDurationString } from '/@/renderer/utils';
interface AlbumDetailHeaderProps {
background: string;
background: {
background: string;
blur: number;
};
}
export const AlbumDetailHeader = forwardRef(
@ -24,6 +27,8 @@ export const AlbumDetailHeader = forwardRef(
const cq = useContainerQuery();
const { t } = useTranslation();
const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
const originalDifferentFromRelease =
detailQuery.data?.originalDate &&
detailQuery.data.originalDate !== detailQuery.data.releaseDate;
@ -78,16 +83,14 @@ export const AlbumDetailHeader = forwardRef(
});
};
const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
return (
<Stack ref={cq.ref}>
<LibraryHeader
ref={ref}
background={background}
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
title={detailQuery?.data?.name || ''}
{...background}
>
<Stack spacing="sm">
<Group spacing="sm">

17
src/renderer/features/albums/routes/album-detail-route.tsx
View file

@ -10,17 +10,18 @@ import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/api/types';
import { useCurrentServer } from '/@/renderer/store';
import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
const AlbumDetailRoute = () => {
const tableRef = useRef<AgGridReactType | null>(null);
const scrollAreaRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
const { albumBackground, albumBackgroundBlur } = useGeneralSettings();
const { albumId } = useParams() as { albumId: string };
const server = useCurrentServer();
const detailQuery = useAlbumDetail({ query: { id: albumId }, serverId: server?.id });
const { color: background, colorId } = useFastAverageColor({
const { color: backgroundColor, colorId } = useFastAverageColor({
id: albumId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
@ -38,16 +39,19 @@ const AlbumDetailRoute = () => {
});
};
if (!background || colorId !== albumId) {
if (!backgroundColor || colorId !== albumId) {
return <Spinner container />;
}
const backgroundUrl = detailQuery.data?.imageUrl || '';
const background = (albumBackground && `url(${backgroundUrl})`) || backgroundColor;
return (
<AnimatedPage key={`album-detail-${albumId}`}>
<NativeScrollArea
ref={scrollAreaRef}
pageHeaderProps={{
backgroundColor: background,
backgroundColor: backgroundColor || undefined,
children: (
<LibraryHeaderBar>
<LibraryHeaderBar.PlayButton onClick={handlePlay} />
@ -62,7 +66,10 @@ const AlbumDetailRoute = () => {
>
<AlbumDetailHeader
ref={headerRef}
background={background}
background={{
background,
blur: (albumBackground && albumBackgroundBlur) || 0,
}}
/>
<AlbumDetailContent
background={background}