feishin/src/renderer/features/albums/routes/album-detail-route.tsx

import { NativeScrollArea } from '/@/renderer/components';
import { AnimatedPage, LibraryHeaderBar, PlayButton } from '/@/renderer/features/shared';
import { useRef } from 'react';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
import { useParams } from 'react-router';
import { useFastAverageColor } from '/@/renderer/hooks';
import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
import { usePlayQueueAdd } from '/@/renderer/features/player';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/renderer/api/types';

const AlbumDetailRoute = () => {
  const tableRef = useRef<AgGridReactType | null>(null);
  const scrollAreaRef = useRef<HTMLDivElement>(null);
  const headerRef = useRef<HTMLDivElement>(null);

  const { albumId } = useParams() as { albumId: string };
  const detailQuery = useAlbumDetail({ id: albumId });
  const background = useFastAverageColor(detailQuery.data?.imageUrl, !detailQuery.isLoading);
  const handlePlayQueueAdd = usePlayQueueAdd();
  const playButtonBehavior = usePlayButtonBehavior();

  const handlePlay = () => {
    handlePlayQueueAdd?.({
      byItemType: {
        id: [albumId],
        type: LibraryItem.ALBUM,
      },
      play: playButtonBehavior,
    });
  };

  if (!background) return null;

  return (
    <AnimatedPage key={`album-detail-${albumId}`}>
      <NativeScrollArea
        ref={scrollAreaRef}
        pageHeaderProps={{
          backgroundColor: background,
          children: (
            <LibraryHeaderBar>
              <PlayButton onClick={handlePlay} />
              <LibraryHeaderBar.Title>{detailQuery?.data?.name}</LibraryHeaderBar.Title>
            </LibraryHeaderBar>
          ),
          target: headerRef,
        }}
      >
        <AlbumDetailHeader
          ref={headerRef}
          background={background}
        />
        <AlbumDetailContent tableRef={tableRef} />
      </NativeScrollArea>
    </AnimatedPage>
  );
};

export default AlbumDetailRoute;