fix finding associated playlists

Author: CalPinSW

backend/src/controllers/music_data.py

@@ -7,6 +7,7 @@
     get_playlist_track_list,
     get_recent_user_playlists,
     get_user_playlists,
+    search_playlist_names,
     update_playlist_info,
 )
 from src.dataclasses.playlist import Playlist
@@ -105,18 +106,11 @@ def get_playlist_tracks(id):
                 )
             ]
 
-    @music_controller.route("find_associated_playlists", methods=["POST"])
+    @music_controller.route("playlist/search", methods=["POST"])
     def find_associated_playlists():
-        access_token = request.cookies.get("spotify_access_token")
         user_id = request.cookies.get("user_id")
-        playlist = Playlist.model_validate(request.json)
-        associated_playlists = spotify.find_associated_playlists(
-            user_id=user_id, access_token=access_token, playlist=playlist
-        )
-        return [
-            associated_playlist.model_dump()
-            for associated_playlist in associated_playlists
-        ]
+        search = request.json
+        return search_playlist_names(user_id, search)
 
     @music_controller.route("playback", methods=["GET"])
     def get_playback_info():

backend/src/database/crud/playlist.py

@@ -303,3 +303,28 @@ def get_playlist_duration_up_to_track(playlist_id, track_id):
         if track.id == track_id:
             break
     return total_duration
+
+
+def search_playlist_names(user_id: str, search: str) -> List[dict]:
+    # Query playlists where name ends with the given date_str
+    playlists = (
+        DbPlaylist.select(
+            DbPlaylist.id, DbPlaylist.name, DbPlaylist.description, DbPlaylist.image_url
+        )
+        .where(DbPlaylist.name.contains(search))
+        .where(DbPlaylist.user_id == user_id)
+        .execute()
+    )
+
+    # Build a list of playlist details
+    result = [
+        {
+            "id": playlist.id,
+            "name": playlist.name,
+            "description": playlist.description,
+            "image_url": playlist.image_url,
+        }
+        for playlist in playlists
+    ]
+
+    return result

frontend/src/api/index.ts

@@ -114,13 +114,13 @@ export const getPlaybackInfo = async (): Promise<PlaybackInfo> => {
 	return jsonRequest(`music/playback`, RequestMethod.GET, undefined, false);
 };
 
-export const findAssociatedPlaylists = async (
-	playlist: Playlist,
+export const playlistSearch = async (
+	search: string,
 ): Promise<Playlist[]> => {
 	return jsonRequest(
-		`spotify/find_associated_playlists/${playlist.id}`,
+		`music/playlist/search`,
 		RequestMethod.POST,
-		playlist,
+		search,
 	);
 };
 

frontend/src/components/Carousel/Carousel.tsx

@@ -12,10 +12,11 @@ const Slide: FC<SlideProps> = ({children}) => {
 
 interface CarouselProps {
     slides: ReactNode[]
+    startIndex?: number
 }
 
-const Carousel: FC<CarouselProps> = ({slides}) => {
-  const [emblaRef] = useEmblaCarousel({skipSnaps: true})
+const Carousel: FC<CarouselProps> = ({slides, startIndex = 0}) => {
+  const [emblaRef] = useEmblaCarousel({skipSnaps: true, startIndex})
 
   return (
     <div className="overflow-hidden" ref={emblaRef}>

frontend/src/context/PlaybackContext.tsx

@@ -23,7 +23,7 @@ export const PlaybackContextProvider: FC<PlaybackContextProviderProps> = ({
   children,
 }) => {
   const [playbackRefetchInterval, setPlaybackRefetchInterval] = useState(10000);
-  const { data: playbackInfo } = useQuery<PlaybackInfo>({
+  const { data: playbackInfo, isError } = useQuery<PlaybackInfo>({
     queryKey: ["playbackInfo"],
     queryFn: () => {
       return getPlaybackInfo();
@@ -33,8 +33,8 @@ export const PlaybackContextProvider: FC<PlaybackContextProviderProps> = ({
     refetchIntervalInBackground: false,
   });
   useEffect(() => {
-    setPlaybackRefetchInterval(playbackInfo ? 10000 : 20000);
-  }, [playbackInfo]);
+    if (isError) {setPlaybackRefetchInterval(30000)}
+  }, [isError]);
 
   return (
     <PlaybackContext.Provider value={{ playbackInfo }}>

frontend/src/playlistExplorer/AlbumList/AlbumContainer.tsx

@@ -1,53 +1,30 @@
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useState } from "react";
 import { Album } from "../../interfaces/Album";
 import PlaylistIcon from "../../components/PlaylistIcon";
 import { RotatingBorderBox } from "../../components/RotatingBorderBox";
-import Modal from "../../components/Modal";
-import { Playlist } from "../../interfaces/Playlist";
-import { addAlbumToPlaylist, startPlayback } from "../../api";
-import { useModal } from "../../hooks/useModal";
-import Button from "../../components/Button";
 
 interface AlbumContainerProps {
   album: Album;
-  contextPlaylist: Playlist
-  associatedPlaylists: Playlist[];
+  onClick: (album: Album) => void;
   active?: boolean;
 }
 
 export const AlbumContainer: FC<AlbumContainerProps> = ({
   album,
-  contextPlaylist,
-  associatedPlaylists,
+  onClick,
   active,
 }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (active && ref.current) {
-      ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  }, [active]);
   const [showMoreInfo, setShowMoreInfo] = useState(false);
-  const { isModalOpen, openModal, closeModal } = useModal();
   return (
-    <>
-      <Modal isModalOpen={isModalOpen} closeModal={closeModal}>
-        <AlbumActionsModalContent
-          contextPlaylist={contextPlaylist}
-          associatedPlaylists={associatedPlaylists}
-          album={album}
-          closeModal={closeModal}
-        />
-      </Modal>
       <div
-        className={`group max-h-80 max-w-80 [perspective:1000px]`}
+        className={`group max-h-40 max-w-40 [perspective:1000px]`}
         onClick={() => {
           setShowMoreInfo((current) => !current);
+          onClick(album)
         }}
       >
         <RotatingBorderBox active={active}>
           <div
-            ref={ref}
             className={`m-1 relative transition-all duration-500 [transform-style:preserve-3d] ${
               showMoreInfo && "[transform:rotateY(180deg)]"
             }`}
@@ -57,85 +34,12 @@ export const AlbumContainer: FC<AlbumContainerProps> = ({
               <div className="absolute top-0 [transform:rotateY(180deg)] [backface-visibility:hidden]">
                 <div className="flex flex-col space-y-2 m-2">
                   <div>{album.name}</div>
-                  <div>
-                    {album.artists.map((artist) => artist.name).join(", ")}
-                  </div>
-                  <div>{album.genres}</div>
-                  <div>{album.label}</div>
-                  <div>{album.popularity}</div>
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      openModal();
-                    }}
-                  >
-                    Actions
-                  </button>
                 </div>
               </div>
             )}
           </div>
         </RotatingBorderBox>
       </div>
-    </>
-  );
-};
-
-interface AlbumActionsModalContentProps {
-  album: Album;
-  contextPlaylist: Playlist
-  associatedPlaylists: Playlist[];
-  closeModal: () => void;
-}
-const AlbumActionsModalContent: FC<AlbumActionsModalContentProps> = ({
-  album,
-  contextPlaylist,
-  associatedPlaylists,
-  closeModal,
-}) => {
-  const addAlbumToAssociatedPlaylist = (targetPlaylist: Playlist): void => {
-    addAlbumToPlaylist(targetPlaylist.id, album.id);
-    closeModal();
-  };
-  return (
-    <div>
-      <div className="flex flex-row justify-between">
-        <h2 className="my-auto text-m">Actions:</h2>
-        <button onClick={closeModal}>X</button>
-      </div>
-      <div className="flex flex-col my-2 space-y-2">
-        {associatedPlaylists.map((associatedPlaylist) => (
-          <Button
-            onClick={() => addAlbumToAssociatedPlaylist(associatedPlaylist)}
-            key={associatedPlaylist.id}
-          >
-            Add to {associatedPlaylist.name}
-          </Button>
-        ))}
-        <Button
-            onClick={() => (startPlayback({context_uri: contextPlaylist.uri, offset: {album_id: album.id} }))}
-          >
-            Play Album
-          </Button>
-      </div>
-    </div>
-  );
-};
-
-export const AlbumInfo: FC<AlbumContainerProps> = ({ album }) => {
-  return (
-    <div className="relative">
-      <AlbumCover album={album} blur />
-      <div className="absolute top-0">
-        <div className="flex flex-col space-y-2 m-2">
-          <div>{album.name}</div>
-          <div>{album.artists.map((artist) => artist.name).join(", ")}</div>
-          <div>{album.genres}</div>
-          <div>{album.label}</div>
-          <div>{album.popularity}</div>
-        </div>
-      </div>
-    </div>
   );
 };
 

frontend/src/playlistExplorer/AlbumList/AlbumList.tsx

@@ -1,8 +1,10 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import { Album } from "../../interfaces/Album";
 import { AlbumContainer } from "./AlbumContainer";
-import Box from "../../components/Box";
 import { Playlist } from "../../interfaces/Playlist";
+import Carousel from "../../components/Carousel/Carousel";
+import Button from "../../components/Button";
+import { addAlbumToPlaylist, startPlayback } from "../../api";
 
 interface AlbumListProps {
   albumList: Album[];
@@ -16,19 +18,54 @@ export const AlbumList: FC<AlbumListProps> = ({
   associatedPlaylists,
   activeAlbumId,
 }) => {
+  const activeAlbumIndex = albumList.findIndex((album) => album.id === activeAlbumId);
+  const [selectedAlbum, setSelectedAlbum] = useState<Album | undefined>(undefined)
+  const onAlbumClick = (album: Album) => {
+    if (selectedAlbum && selectedAlbum.id == album.id) {
+      setSelectedAlbum(undefined)
+    } else {
+      setSelectedAlbum(album)
+    }
+  }
+
   return (
-    <Box>
-      <div className="grid grid-cols-2 gap-2 sm:mx-24 h-[60vh] overflow-auto">
-        {albumList.map((album) => (
+    <div>
+      <Carousel startIndex={activeAlbumIndex != -1 ? activeAlbumIndex : 0} slides={albumList.map((album) => (
           <AlbumContainer
             album={album}
             key={album.id}
-            contextPlaylist={contextPlaylist}
-            associatedPlaylists={associatedPlaylists}
             active={album.id == activeAlbumId}
+            onClick={onAlbumClick}
           />
+        )
+      )}/>
+      {selectedAlbum && 
+      <div className="flex"> 
+        <div className="flex flex-col">
+          <div>album: {selectedAlbum.name}</div>
+          <div>
+            artists: {selectedAlbum.artists.map((artist) => artist.name).join(", ")}
+          </div>
+          <div>genres: {selectedAlbum.genres}</div>
+          <div>label: {selectedAlbum.label}</div>
+        </div>
+        <div className="flex flex-col">
+        {associatedPlaylists.map((associatedPlaylist) => (
+          <Button
+            onClick={() => addAlbumToPlaylist(associatedPlaylist.id, selectedAlbum.id)}
+            key={associatedPlaylist.id}
+          >
+            Add to {associatedPlaylist.name}
+        </Button>
         ))}
-      </div>
-    </Box>
+        <Button
+            onClick={() => (startPlayback({context_uri: contextPlaylist.uri, offset: {album_id: selectedAlbum.id} }))}
+          >
+            Play Album
+          </Button>
+        </div>
+      </div>}
+    </div>
   );
+  
 };

frontend/src/playlistExplorer/PlaylistExplorer.tsx

@@ -6,9 +6,9 @@ import InputLabel from "../components/InputLabel";
 import Button from "../components/Button";
 import { Form, useForm } from "react-hook-form";
 import {
-  findAssociatedPlaylists,
   getPlaylistAlbums,
   getPlaylistTracks,
+  playlistSearch,
   updatePlaylist,
 } from "../api";
 import { useQuery } from "@tanstack/react-query";
@@ -53,9 +53,9 @@ export const PlaylistExplorer: FC = () => {
 
   useEffect(() => {
     if (playlist.name.slice(0, 10) === "New Albums") {
-      findAssociatedPlaylists(playlist).then(
+      playlistSearch(playlist.name.slice(11)).then(
         (associatedPlaylists: Playlist[]) => {
-          setAssociatedPlaylists(associatedPlaylists);
+          setAssociatedPlaylists(associatedPlaylists.filter((associatedPlaylist) => associatedPlaylist.name !== playlist.name));
         }
       );
     }