add store for playing media

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}
     >
       <Flare.Light
         flareSize={300}

src/components/media/WatchedMediaCard.tsx

@@ -1,5 +1,6 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
+import { usePlayerStore } from "@/stores/player/store";
 import { useProgressStore } from "@/stores/progress";
 import {
   ShowProgressResult,
@@ -38,6 +39,17 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
     ? (itemToDisplay.progress.watched / itemToDisplay.progress.duration) * 100
     : undefined;
 
+  const setPlayingTitle = usePlayerStore((state) => 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 (
     <MediaCard
       media={props.media}
@@ -46,6 +58,7 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
       percentage={percentage}
       onClose={props.onClose}
       closable={props.closable}
+      onClick={handleClick}
     />
   );
 }

src/components/utils/Flare.tsx

@@ -18,12 +18,14 @@ function Base(props: {
   children?: ReactNode;
   tabIndex?: number;
   onKeyUp?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }) {
   return (
     <div
       tabIndex={props.tabIndex}
       className={c(props.className, "relative")}
       onKeyUp={props.onKeyUp}
+      onClick={props.onClick}
     >
       {props.children}
     </div>

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<PlayingSlice> = (set) => ({
@@ -26,6 +32,11 @@ export const createPlayingSlice: MakeSlice<PlayingSlice> = (set) => ({
     volume: 1,
     playbackRate: 1,
   },
+  playingTitle: {
+    id: "",
+    type: "",
+    title: "",
+  },
   play() {
     set((state) => {
       state.mediaPlaying.isPlaying = true;
@@ -35,7 +46,14 @@ export const createPlayingSlice: MakeSlice<PlayingSlice> = (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;
     });
   },
 });