Fix individual playlist page

espidev · Jul 26, 2023 · 1f3be91 · 1f3be91
1 parent 098ef42
commit 1f3be91
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 19 deletions.
diff --git a/website/app/api/playlist/[playlistId]/route.ts b/website/app/api/playlist/[playlistId]/route.ts
@@ -5,8 +5,8 @@ import { NextResponse } from "next/server";
 // GET /playlist/[playlistId]
 // Get playlist details
 
-export async function GET(request: Request, { params }: { params: { accountUuid: string } }) {
-  const playlistId = params.accountUuid;
+export async function GET(request: Request, { params }: { params: { playlistId: string } }) {
+  const playlistId = params.playlistId;
 
   // Check authorization
   const tokenUuid = await checkAuthenticated();
@@ -25,7 +25,7 @@ export async function GET(request: Request, { params }: { params: { accountUuid:
     await conn.end();
 
     if (playlistRes.rowCount === 0) {
-      return NextResponse.json({ error: "Playlist not found or not authorized to access" }, { status: 404 });
+      return NextResponse.json({ error: "playlist not found or not authorized to access" }, { status: 404 });
     }
 
     const playlist = playlistRes.rows[0];
@@ -34,7 +34,7 @@ export async function GET(request: Request, { params }: { params: { accountUuid:
   } catch (error) {
     await conn.end();
     console.error("Error fetching playlist:", error);
-    return NextResponse.json({ error: "An error occurred while fetching the playlist" }, { status: 500 });
+    return NextResponse.json({ error: "an error occurred while fetching the playlist" }, { status: 500 });
   }
 }
 

diff --git a/website/app/api/playlist/[playlistId]/tracks/route.ts b/website/app/api/playlist/[playlistId]/tracks/route.ts
@@ -10,8 +10,8 @@ import { NextResponse } from "next/server";
 // GET /api/playlist/[playlistId]/tracks
 // get a playlist's track list
 
-export async function GET(request: Request, { params }: { params: { albumId: string } }) {
-  const albumId = params.albumId;
+export async function GET(request: Request, { params }: { params: { playlistId: string } }) {
+  const albumId = params.playlistId;
 
   // check authorization
   const tokenUuid = await checkAuthenticated();
@@ -43,6 +43,7 @@ export async function GET(request: Request, { params }: { params: { albumId: str
       INNER JOIN track as t ON t.id = playlist_tracks.track_id
       LEFT OUTER JOIN track_to_artist ON t.id = track_to_artist.track_id
       LEFT OUTER JOIN artist ON track_to_artist.artist_id = artist.id
+      LEFT OUTER JOIN track_to_album ON t.id = track_to_album.album_id
       LEFT OUTER JOIN album ON track_to_album.album_id = album.id
       LEFT OUTER JOIN track_to_genre ON t.id = track_to_genre.track_id
       LEFT OUTER JOIN genre ON track_to_genre.genre_id = genre.id

diff --git a/website/app/collection/playlists/[playlistId]/page.tsx b/website/app/collection/playlists/[playlistId]/page.tsx
@@ -9,6 +9,7 @@ import { AlertEntry } from "@/components/alerts";
 import { apiGetPlaylist, apiGetPlaylistTracks, apiPostCreatePlaylist } from "@/components/apiclient";
 import { APITrack } from "@/util/models/track";
 import TrackTable from "@/components/trackTable";
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import { useAppStateContext } from "@/components/appstateprovider";
 
 function formatDuration(duration: number): string {
@@ -50,12 +51,17 @@ export default function CollectionPlaylistPage({params} : {params: {playlistId:
     // load playlist content
     apiGetPlaylist(playlistId)
       .then(res => {
-          setPlaylist(res.data as APIPlaylist);
+        setPlaylist(res.data as APIPlaylist);
+
+        // Fetch and set the tracks
+        apiGetPlaylistTracks(playlistId).then(resTracks => {
+          setTracks(resTracks.data as APITrack[]);
+        })
+        .catch(err => {
+          setAlerts([...alerts, { severity: "error", message: "Error fetching playlist track list, see console for details." }]);
+          console.error(err);
+        });
 
-          // Fetch and set the tracks
-          apiGetPlaylistTracks(playlistId).then(res_tracks => {
-            setTracks(res_tracks.data as APITrack[]);
-          })
       })
       .catch(err => {
         setAlerts([...alerts, { severity: "error", message: "Error fetching playlist, see console for details." }]);
@@ -76,7 +82,8 @@ export default function CollectionPlaylistPage({params} : {params: {playlistId:
     appState.playCurrentTrack();
   }
 
-  const totalTime = tracks.reduce((acc, track) => acc + track.audio_length, 0);
+  const totalTime = formatDuration(tracks.reduce((acc, track) => acc + track.audio_length, 0));
+  const suffix = tracks.length === 1 ? 'song' : 'songs';
 
   return (
     <div>
@@ -89,11 +96,26 @@ export default function CollectionPlaylistPage({params} : {params: {playlistId:
             zIndex: 2,
           }
         }>
+          <Box
+            component="img"
+            alt="album_cover"
+            sx={{ width: "15em", height: "15em", objectFit: "cover", padding: 2, margin: 2 }}
+            src={`/api/playlist/${playlistId}/thumbnail`}
+          />
+
           <div style={{ display: 'flex', flexDirection: "column"}}>
             <Typography variant="h3">{playlist.name}</Typography>
-            <Typography variant="subtitle2" sx={{marginTop: '1em'}}>
-              {tracks.length} songs • Total duration: {formatDuration(totalTime)}
-            </Typography>
+            <Typography variant="subtitle2">{tracks.length} {suffix} • {totalTime}</Typography>
+            <Button 
+              variant="outlined"  
+              style={{ width: '5vw', marginTop: '2em' }}
+              onClick={() => {
+                appState.changeQueue(tracks, 0);
+                appState.playCurrentTrack();
+              }}
+            >
+              <PlayArrowIcon fontSize="medium" style={{ marginLeft: '-0.3em' }} />Play
+            </Button>
           </div>
         </div>
 

diff --git a/website/app/collection/playlists/page.tsx b/website/app/collection/playlists/page.tsx
@@ -106,9 +106,11 @@ export default function CollectionPlaylistsPage() {
         </Button>
       </Grid>
 
-      {playlists.map((playlist) => {
-        return <PlaylistCard key={playlist.id} playlist={playlist} />;
-      })}
+      {
+        playlists.map((playlist, index) => {
+          return <PlaylistCard key={index} playlist={playlist} />;
+        })
+      }
     </Grid>
   );
 }
diff --git a/website/components/playlistCard.tsx b/website/components/playlistCard.tsx
@@ -24,7 +24,7 @@ export default function PlaylistCard(props: { playlist: APIPlaylist }) {
       onClick={() => {
         router.push(`/collection/playlists/${props.playlist.id}`);
       }}
-      >
+    >
       <CardActionArea>
         <CardMedia
           component="img"