make playlist work for selections

sphinxrave · sphinxrave · commit 6badae1b4126 · 2024-12-30T18:37:59.000-08:00
diff --git a/packages/react/src/components/layout/SelectionFooter.tsx b/packages/react/src/components/layout/SelectionFooter.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { useAtom } from "jotai";
+import React, { Suspense, useState } from "react";
+import { useAtom, useAtomValue } from "jotai";
 import { Button } from "@/shadcn/ui/button";
 import { Dialog, DialogContent } from "@/shadcn/ui/dialog";
 import {
@@ -8,6 +8,11 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuGroup,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
 } from "@/shadcn/ui/dropdown-menu";
 import { useVideoSelection } from "@/hooks/useVideoSelection";
 import { siteIsSmallAtom } from "@/hooks/useFrame";
@@ -16,6 +21,14 @@ import { makeThumbnailUrl } from "@/lib/utils";
 import { VideoThumbnail } from "../video/VideoThumbnail";
 import { SelectionEditShortcuts } from "../edit/selection/SelectionEditShortcuts";
 import SelectionFooterTopicPicker from "../edit/selection/SelectionFooterTopicPicker";
+import {
+  usePlaylistVideoMassAddMutation,
+  usePlaylists,
+} from "@/services/playlist.service";
+import { userAtom } from "@/store/auth";
+import { Link } from "react-router-dom";
+import { LazyNewPlaylistDialog } from "../video/LazyNewPlaylistDialog";
+import { useToast } from "@/shadcn/ui/use-toast";
 const SelectedVideosModal = ({
   isSmall,
   open,
@@ -136,18 +149,27 @@ const SelectionFooter = () => {
                   disabled={!selectedVideos.length}
                   className="flex items-center"
                 >
-                  <span className="i-material-symbols:list-alt-outline mr-2" />
-                  Playlist
+                  <span className="i-heroicons:folder-open mr-2" />
+                  {t("component.mainNav.playlist")}
                   <div className="i-lucide:chevron-up ml-2 size-4"></div>
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuItem onClick={() => setPage(1)}>
-                  Add to current Playlist
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => setPage(2)}>
-                  Make into new Playlist
+                  <div className="i-heroicons:queue-list" />
+                  Add to Queue
                 </DropdownMenuItem>
+                <DropdownMenuGroup>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger className="bg-base-1">
+                      <div className="i-solar:playlist-broken" />
+                      Add to Playlist
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuPortal>
+                      <PlaylistMenuItems />
+                    </DropdownMenuPortal>
+                  </DropdownMenuSub>
+                </DropdownMenuGroup>
               </DropdownMenuContent>
             </DropdownMenu>
 
@@ -241,4 +263,65 @@ const SelectionFooter = () => {
   );
 };
 
+function PlaylistMenuItems() {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  const { mutate } = usePlaylistVideoMassAddMutation({
+    onSuccess: () => {
+      toast({
+        title: "Added to playlist",
+      });
+    },
+  });
+  const { data, isLoading } = usePlaylists();
+  const user = useAtomValue(userAtom);
+  const { selectedVideos } = useVideoSelection();
+  const videoIds = selectedVideos
+    .filter((v) => v.type === "stream" || v.type === "clip")
+    .map((v) => v.id);
+
+  return (
+    <DropdownMenuSubContent>
+      {!user ? (
+        <DropdownMenuItem asChild>
+          <Link to="/login">{t("component.mainNav.login")}</Link>
+        </DropdownMenuItem>
+      ) : (
+        <>
+          {data?.map(({ name, id }) => (
+            <DropdownMenuItem key={id} onClick={() => mutate({ id, videoIds })}>
+              {name}
+            </DropdownMenuItem>
+          ))}
+          {isLoading && (
+            <DropdownMenuItem className="justify-center" disabled>
+              <div className="i-lucide:loader-2 animate-spin leading-none" />
+            </DropdownMenuItem>
+          )}
+          {data?.length || isLoading ? <DropdownMenuSeparator /> : null}
+          {videoIds && (
+            <Suspense
+              fallback={
+                <div className="i-lucide:loader-2 animate-spin leading-none" />
+              }
+            >
+              <LazyNewPlaylistDialog
+                triggerElement={
+                  <DropdownMenuItem
+                    onSelect={(event) => event.preventDefault()}
+                  >
+                    {t("component.playlist.menu.new-playlist")}
+                  </DropdownMenuItem>
+                }
+                videoIds={videoIds}
+              />
+            </Suspense>
+          )}
+        </>
+      )}
+    </DropdownMenuSubContent>
+  );
+}
+
 export default SelectionFooter;
diff --git a/packages/react/src/components/playlist/IndividualPlaylist.tsx b/packages/react/src/components/playlist/IndividualPlaylist.tsx
@@ -91,7 +91,7 @@ export default function IndividualPlaylist({ playlist }: Props) {
     <div className="container">
       <div className="sticky top-0 z-10 bg-mauve-2">
         <div className="flex items-center">
-          <span className="i-solar:playlist-bold hidden text-9xl !text-base-7 md:block" />
+          <span className="i-solar:playlist-broken hidden text-9xl !text-base-7 md:block" />
           <div className="ml-6">
             <div className="flex gap-3">
               {renaming ? (
@@ -115,9 +115,9 @@ export default function IndividualPlaylist({ playlist }: Props) {
             <TypographyP className="!mt-1">
               {playlist.videos.length} Videos
             </TypographyP>
-            <div className="mt-4 flex gap-3">
-              <Button size="icon" variant="secondary">
-                <span className="i-heroicons:play-solid" />
+            <div className="mt-4 flex items-center gap-3">
+              <Button size="lg" variant="primary">
+                <span className="i-heroicons:play-solid" /> Play
               </Button>
               {userOwnsPlaylist ? (
                 <>
@@ -132,6 +132,7 @@ export default function IndividualPlaylist({ playlist }: Props) {
                   />
                   <Button
                     disabled={editedPlaylist === null}
+                    variant="secondary"
                     onClick={() =>
                       saveMutation.mutate({
                         id: editedPlaylist!.id,
diff --git a/packages/react/src/components/playlist/PlaylistEntry.tsx b/packages/react/src/components/playlist/PlaylistEntry.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
diff --git a/packages/react/src/components/video/LazyNewPlaylistDialog.tsx b/packages/react/src/components/video/LazyNewPlaylistDialog.tsx
@@ -0,0 +1,5 @@
+import { lazy } from "react";
+
+export const LazyNewPlaylistDialog = lazy(
+  () => import("@/components/playlist/NewPlaylistDialog"),
+);
diff --git a/packages/react/src/components/video/VideoMenu.tsx b/packages/react/src/components/video/VideoMenu.tsx
@@ -14,7 +14,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/shadcn/ui/dropdown-menu";
-import { ReactNode, Suspense, lazy, useState } from "react";
+import { ReactNode, Suspense, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useCopyToClipboard } from "usehooks-ts";
@@ -30,10 +30,7 @@ import {
 import { TLDexLogo } from "../common/TLDexLogo";
 import { userAtom } from "@/store/auth";
 import { videoReportAtom } from "@/store/video";
-
-const LazyNewPlaylistDialog = lazy(
-  () => import("@/components/playlist/NewPlaylistDialog"),
-);
+import { LazyNewPlaylistDialog } from "./LazyNewPlaylistDialog";
 
 interface VideoMenuProps {
   video: VideoCardType;
@@ -126,7 +123,7 @@ export function VideoMenu({ children, video, url }: VideoMenuProps) {
           <DropdownMenuGroup>
             <DropdownMenuSub>
               <DropdownMenuSubTrigger className="video-menu-item bg-base-1">
-                <div className="i-heroicons:queue-list" />
+                <div className="i-solar:playlist-broken" />
                 {t("component.mainNav.playlist")}
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
diff --git a/packages/react/src/services/playlist.service.ts b/packages/react/src/services/playlist.service.ts
@@ -25,7 +25,11 @@ export function usePlaylist(id: number, options?: UseQueryOptions<Playlist>) {
 
   return useQuery({
     queryKey: ["playlist", id],
-    queryFn: async () => await client<Playlist>(`/api/v2/playlist/${id}`),
+    queryFn: async () => {
+      const p = await client<Playlist>(`/api/v2/playlist/${id}`);
+      p.videos = p.videos || []; // null check this
+      return p;
+    },
     ...options,
   });
 }
@@ -40,6 +44,7 @@ export function usePlaylistInclude(
     queryKey: ["playlist", "include", videoId],
     queryFn: async () =>
       await client<PlaylistInclude[]>(`/api/v2/video-playlist/${videoId}`),
+    staleTime: 30000,
     ...options,
     enabled: options?.enabled && client.loggedIn,
   });
@@ -53,13 +58,60 @@ export function usePlaylistVideoMutation(
   >,
 ) {
   const client = useClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ id, videoId }) =>
       await client<boolean>(`/api/v2/video-playlist/${id}/${videoId}`, {
         method: "PUT",
       }),
     ...options,
+    onSuccess: (_, vars, c) => {
+      queryClient.invalidateQueries({
+        queryKey: ["playlist", "include", vars.videoId],
+      });
+      queryClient.invalidateQueries({ queryKey: ["playlist", vars.id] });
+      options?.onSuccess?.(_, vars, c);
+    },
+  });
+}
+
+export function usePlaylistVideoMassAddMutation(
+  options?: UseMutationOptions<
+    number,
+    HTTPError,
+    { id: number; videoIds: string[] }
+  >,
+) {
+  const client = useClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      id,
+      videoIds,
+    }: {
+      id: number;
+      videoIds: string[];
+    }) => {
+      const playlist = await client<PlaylistStub>(`/api/v2/playlist/${id}`);
+
+      playlist.video_ids = videoIds.concat(
+        playlist.video_ids.filter((id) => !videoIds.includes(id)),
+      );
+
+      return await client.post<number, PlaylistStub>(
+        `/api/v2/playlist/`,
+        playlist,
+      );
+    },
+    ...options,
+    onSuccess: (_, vars, c) => {
+      options?.onSuccess?.(_, vars, c);
+
+      queryClient.invalidateQueries({ queryKey: ["playlist", vars.id] });
+      queryClient.invalidateQueries({ queryKey: ["playlist", "include"] });
+    },
   });
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from "react";`
`2`	`1`	`import { Link } from "react-router-dom";`
`3`	`2`	`import { useAtomValue } from "jotai";`
`4`	`3`	`import { useTranslation } from "react-i18next";`