diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx index c25fc0d5..427ccfe2 100644 --- a/src/components/media/MediaCard.tsx +++ b/src/components/media/MediaCard.tsx @@ -25,6 +25,7 @@ export interface MediaCardProps { percentage?: number; closable?: boolean; onClose?: () => void; + onClick?: () => void; } function checkReleased(media: MediaItem): boolean { @@ -48,6 +49,7 @@ function MediaCardContent({ percentage, closable, onClose, + onClick, }: MediaCardProps) { const { t } = useTranslation(); const percentageString = `${Math.round(percentage ?? 0).toFixed(0)}%`; @@ -75,6 +77,7 @@ function MediaCardContent({ }`} tabIndex={canLink ? 0 : -1} onKeyUp={(e) => e.key === "Enter" && e.currentTarget.click()} + onClick={onClick} > state.setPlayingTitle); + + const handleClick = useCallback(() => { + setPlayingTitle(props.media.id, props.media.title, props.media.type); + console.log( + usePlayerStore.getState().playingTitle.title, + usePlayerStore.getState().playingTitle.id, + usePlayerStore.getState().playingTitle.type, + ); + }, [setPlayingTitle, props.media.id, props.media.title, props.media.type]); + return ( ); } diff --git a/src/components/utils/Flare.tsx b/src/components/utils/Flare.tsx index 9c19e027..4b1bcbeb 100644 --- a/src/components/utils/Flare.tsx +++ b/src/components/utils/Flare.tsx @@ -18,12 +18,14 @@ function Base(props: { children?: ReactNode; tabIndex?: number; onKeyUp?: (e: React.KeyboardEvent) => void; + onClick?: (e: React.MouseEvent) => void; }) { return (
{props.children}
diff --git a/src/stores/player/slices/playing.ts b/src/stores/player/slices/playing.ts index 268cd873..6e54c0ca 100644 --- a/src/stores/player/slices/playing.ts +++ b/src/stores/player/slices/playing.ts @@ -11,8 +11,14 @@ export interface PlayingSlice { volume: number; playbackRate: number; }; + playingTitle: { + id: string; + title: string; + type: string; + }; play(): void; pause(): void; + setPlayingTitle(id: string, title: string, type: string): void; } export const createPlayingSlice: MakeSlice = (set) => ({ @@ -26,6 +32,11 @@ export const createPlayingSlice: MakeSlice = (set) => ({ volume: 1, playbackRate: 1, }, + playingTitle: { + id: "", + type: "", + title: "", + }, play() { set((state) => { state.mediaPlaying.isPlaying = true; @@ -35,7 +46,14 @@ export const createPlayingSlice: MakeSlice = (set) => ({ pause() { set((state) => { state.mediaPlaying.isPlaying = false; - state.mediaPlaying.isPaused = false; + state.mediaPlaying.isPaused = true; + }); + }, + setPlayingTitle(id: string, title: string, type: string) { + set((state) => { + state.playingTitle.id = id; + state.playingTitle.type = type; + state.playingTitle.title = title; }); }, });