feat: button to add songs from statistics to queue

client/src/view/Room/List/Statistics/Statistics.tsx

@@ -1,18 +1,28 @@
 import { useI18n } from "@solid-primitives/i18n";
 import { CircularLoadingSpinner } from "components/common/icon";
 import { Accessor, Component, For, Show } from "solid-js";
-import { Statistic } from "trpc/types";
+import { AddSongInput, PlayingSong, Song, Statistic } from "trpc/types";
 import { htmlDecode } from "utils/parse";
 import SongThumbnail from "view/Room/common/SongThumbnail";
 
 type Props = {
   statistics: Accessor<Statistic[]>;
+  songs: Song[];
+  playing: PlayingSong;
+  onAdd: (song: AddSongInput) => void;
   loading: Accessor<boolean>;
 };
 
 const StatisticsComponent: Component<Props> = (props) => {
   const [t] = useI18n();
 
+  const isInQueue = (song: Statistic) => {
+    return (
+      props.songs.some((s) => s.contentId === song.contentId) ||
+      (props.playing && props.playing.contentId === song.contentId)
+    );
+  };
+
   return (
     <div class="space-y h-full max-h-full space-y-2 overflow-y-auto pr-4">
       <Show
@@ -27,7 +37,7 @@ const StatisticsComponent: Component<Props> = (props) => {
       >
         <For each={props.statistics()}>
           {(statistic, index) => (
-            <div class="card flex w-full items-center justify-between p-2 px-4">
+            <div class="card flex w-full items-center justify-between space-x-2 p-2 px-4">
               <div class="flex items-center space-x-4">
                 <div class="w-4 flex-shrink-0">{index() + 1}</div>
                 <SongThumbnail song={statistic} />
@@ -42,6 +52,19 @@ const StatisticsComponent: Component<Props> = (props) => {
                   </div>
                 </div>
               </div>
+              <button
+                type="button"
+                class="ml-auto inline-flex shrink-0 items-center rounded border border-transparent bg-custom-primary-900 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-custom-primary-800 focus:outline-none focus:ring-2 focus:ring-custom-primary-500 focus:ring-offset-2 dark:bg-custom-primary-900 dark:hover:bg-custom-primary-800 dark:focus:ring-custom-primary-500"
+                onClick={() => props.onAdd([statistic])}
+                disabled={isInQueue(statistic)}
+              >
+                <Show
+                  when={!isInQueue(statistic)}
+                  fallback={t("common.inQueue")}
+                >
+                  {t("actions.addToQueue")}
+                </Show>
+              </button>
             </div>
           )}
         </For>

client/src/view/Room/List/Statistics/index.tsx

@@ -1,10 +1,13 @@
 import { useI18n } from "@solid-primitives/i18n";
+import { useRouteData } from "@solidjs/router";
 import { TabContainer } from "components/Tabs";
 import useSnackbar from "hooks/useSnackbar";
 import { DateTime } from "luxon";
 import { Component, createSignal, onMount } from "solid-js";
 import trpcClient from "trpc";
-import { Statistic, StatisticsInput } from "trpc/types";
+import { AddSongInput, Statistic, StatisticsInput } from "trpc/types";
+import { htmlDecode } from "utils/parse";
+import { RoomData } from "view/Room/data";
 import Filter from "./Filter";
 import Statistics from "./Statistics";
 
@@ -15,6 +18,7 @@ export type FormData = {
 const StatisticsComponent: Component = () => {
   const snackbar = useSnackbar();
   const [t] = useI18n();
+  const { room } = useRouteData<RoomData>();
 
   const [loading, setLoading] = createSignal(false);
   const [formData, setFormData] = createSignal<FormData>({
@@ -45,6 +49,32 @@ const StatisticsComponent: Component = () => {
     }
   };
 
+  const handleAdd = async (result: AddSongInput) => {
+    try {
+      const songs = await trpcClient.room.addSong.mutate(
+        result.map((r) => ({
+          contentId: r.contentId,
+          url: r.url,
+          title: r.title,
+          thumbnail: r.thumbnail ?? null,
+          type: r.type,
+        }))
+      );
+
+      const song = songs[0];
+
+      snackbar.success(
+        t(`snackbar.source.${song.type}.addedToQueue`, {
+          item: htmlDecode(song.title),
+        })
+      );
+    } catch (error) {
+      if (error instanceof Error) {
+        snackbar.error(t("snackbar.error", { error: error.message }));
+      }
+    }
+  };
+
   return (
     <TabContainer
       actions={
@@ -59,7 +89,13 @@ const StatisticsComponent: Component = () => {
         />
       }
     >
-      <Statistics statistics={result} loading={loading} />
+      <Statistics
+        statistics={result}
+        songs={room().songs}
+        playing={room().playing}
+        onAdd={handleAdd}
+        loading={loading}
+      />
     </TabContainer>
   );
 };