39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import type { SanityImageSource } from "@sanity/image-url";
|
|
import { IoDiscOutline, IoPlayOutline } from "react-icons/io5";
|
|
import { usePlayer } from "@/components/player/PlayerContext";
|
|
import { IconButton, IconButtonLink } from "@/components/IconButton";
|
|
import { buildPlayerTracks, type TrackData } from "@/components/release/Tracklist";
|
|
|
|
type Props = {
|
|
tracks: TrackData[];
|
|
albumCover?: SanityImageSource;
|
|
albumArtist?: string;
|
|
releaseSlug: string;
|
|
};
|
|
|
|
export function FeaturedReleaseActions({ tracks, albumCover, albumArtist, releaseSlug }: Props) {
|
|
const { loadPlaylist } = usePlayer();
|
|
|
|
const playerTracks = useMemo(
|
|
() => buildPlayerTracks(tracks, albumCover, albumArtist, releaseSlug),
|
|
[tracks, albumCover, albumArtist, releaseSlug],
|
|
);
|
|
|
|
return (
|
|
<div className="mt-4 flex gap-3">
|
|
<IconButtonLink href={`/release/${releaseSlug}`} aria-label="View release">
|
|
<IoDiscOutline />
|
|
</IconButtonLink>
|
|
<IconButton
|
|
onClick={() => loadPlaylist(playerTracks, 0)}
|
|
disabled={playerTracks.length === 0}
|
|
aria-label="Play album"
|
|
>
|
|
<IoPlayOutline />
|
|
</IconButton>
|
|
</div>
|
|
);
|
|
}
|