Use database to fetch playlist progress

Author: CalPinSW

backend/src/controllers/music_data.py

@@ -133,21 +133,23 @@ def get_playback_info():
         if playback_info is None:
             return ("", 204)
         if playback_info.playlist_id is not None:
+            playlist_name = get_playlist_by_id_or_none(playback_info.playlist_id).name
             playlist_duration = get_playlist_duration(playback_info.playlist_id)
             playlist_progress = (
                 get_playlist_duration_up_to_track(
                     playback_info.playlist_id, playback_info.track_id
                 )
                 + playback_info.track_progress
             )
-        return PlaylistProgression.model_validate(
-            {
-                "playlist_id": playback_info.playlist_id,
-                "playlist_title": "test",
-                "playlist_progress": playlist_progress,
-                "playlist_duration": playlist_duration,
+
+            playback_info_with_playlist = playback_info.model_dump()
+            playback_info_with_playlist["playlist"] = {
+                "id": playback_info.playlist_id,
+                "title": playlist_name,
+                "progress": playlist_progress,
+                "duration": playlist_duration,
             }
-        )
+            return playback_info_with_playlist
 
         return playback_info.model_dump_json()
 

backend/src/database/crud/playlist.py

@@ -300,7 +300,6 @@ def get_playlist_duration(playlist_id):
 
 
 def get_playlist_duration_up_to_track(playlist_id, track_id):
-    print(playlist_id)
     # Query to get all tracks in the albums of the playlist, with proper joins and ordering
     tracks_in_playlist = (
         DbTrack.select(DbTrack.id, DbTrack.duration_ms)
@@ -327,5 +326,4 @@ def get_playlist_duration_up_to_track(playlist_id, track_id):
         total_duration += track.duration_ms
         if track.id == track_id:
             break
-    print(total_duration)
     return total_duration

frontend/src/api/index.ts

@@ -1,5 +1,5 @@
 import { Album } from "../interfaces/Album";
-import { PlaybackInfo, PlaylistProgress } from "../interfaces/PlaybackInfo";
+import { PlaybackInfo } from "../interfaces/PlaybackInfo";
 import { Playlist } from "../interfaces/Playlist";
 import { User } from "../interfaces/User";
 import { backendUrl, request } from "./jsonRequest";
@@ -100,17 +100,7 @@ export const getPlaylistAlbums = async (
 };
 
 export const getPlaybackInfo = async (): Promise<PlaybackInfo> => {
-	return jsonRequest(`spotify/playback`, RequestMethod.GET, undefined, false);
-};
-
-export const getPlaylistProgress = async (
-	playbackInfo: PlaybackInfo,
-): Promise<PlaylistProgress> => {
-	return jsonRequest(
-		`spotify/playlist_progress`,
-		RequestMethod.POST,
-		playbackInfo,
-	);
+	return jsonRequest(`music/playback`, RequestMethod.GET, undefined, false);
 };
 
 export const findAssociatedPlaylists = async (

frontend/src/context/PlaybackContext.tsx

@@ -5,13 +5,12 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { PlaybackInfo, PlaylistProgress } from "../interfaces/PlaybackInfo";
+import { PlaybackInfo } from "../interfaces/PlaybackInfo";
 import { useQuery } from "@tanstack/react-query";
-import { getPlaybackInfo, getPlaylistProgress } from "../api";
+import { getPlaybackInfo } from "../api";
 
 interface PlaybackContext {
   playbackInfo?: PlaybackInfo;
-  playlistProgress?: PlaylistProgress;
 }
 
 export const PlaybackContext = createContext<PlaybackContext>({});
@@ -36,21 +35,9 @@ export const PlaybackContextProvider: FC<PlaybackContextProviderProps> = ({
   useEffect(() => {
     setPlaybackRefetchInterval(playbackInfo ? 10000 : 20000);
   }, [playbackInfo]);
-  const { data: playlistProgress } = useQuery<PlaylistProgress | undefined>({
-    queryKey: ["playlistProgress"],
-    queryFn: () => {
-      if (playbackInfo?.playlist_id) {
-        return getPlaylistProgress(playbackInfo);
-      }
-    },
-    retryDelay: playbackRefetchInterval,
-    refetchInterval: 60000,
-    refetchIntervalInBackground: false,
-    enabled: !!playbackInfo?.playlist_id,
-  });
 
   return (
-    <PlaybackContext.Provider value={{ playbackInfo, playlistProgress }}>
+    <PlaybackContext.Provider value={{ playbackInfo }}>
       {children}
     </PlaybackContext.Provider>
   );

frontend/src/interfaces/PlaybackInfo.ts

@@ -3,7 +3,6 @@ export interface PlaybackInfo {
   track_id: string;
   album_title: string;
   album_id: string;
-  playlist_id?: string;
   track_artists: string[];
   album_artists: string[];
   artwork_url: string;
@@ -12,11 +11,12 @@ export interface PlaybackInfo {
   album_progress: number;
   album_duration: number;
   is_playing: boolean;
+  playlist?: PlaylistProgress
 }
 
 export interface PlaylistProgress {
-  playlist_id: string;
-  playlist_title: string;
-  playlist_progress: number;
-  playlist_duration: number;
+  id: string;
+  title: string;
+  progress: number;
+  duration: number;
 }

frontend/src/presentational/PlaybackFooter.tsx

@@ -8,7 +8,7 @@ import { usePlaybackContext } from "../hooks/usePlaybackContext";
 import { Link } from "react-router-dom";
 
 const PlaybackFooter: FC = () => {
-  const { playbackInfo, playlistProgress } = usePlaybackContext();
+  const { playbackInfo } = usePlaybackContext();
 
   if (!playbackInfo) return null;
 
@@ -63,29 +63,29 @@ const PlaybackFooter: FC = () => {
             </div>
           </div>
 
-          {playbackInfo?.playlist_id && (
+          {playbackInfo.playlist?.id && (
             <div
               className={`flex flex-row justify-between ${
-                playlistProgress ? "" : "opacity-0"
+                playbackInfo.playlist ? "" : "opacity-0"
               }`}
             >
               <div className="flex flex-row space-x-2">
                 <PlaylistIcon className="my-auto w-8 h-8 fill-primary-darker" />
                 <div className="my-auto text-balance">
-                  {playlistProgress && (
-                    <Link to={`edit/${playlistProgress?.playlist_id}`}>
-                      {playlistProgress?.playlist_title}
+                  {playbackInfo.playlist && (
+                    <Link to={`edit/${playbackInfo.playlist?.id}`}>
+                      {playbackInfo.playlist?.title}
                     </Link>
                   )}
                 </div>
               </div>
               <div className="w-12 h-12 sm:w-16 sm:h-16 my-auto">
                 <ProgressCircle
                   percentage={
-                    playlistProgress
+                    playbackInfo.playlist
                       ? Math.round(
-                          (playlistProgress.playlist_progress /
-                            playlistProgress.playlist_duration) *
+                          (playbackInfo.playlist.progress /
+                            playbackInfo.playlist.duration) *
                             100
                         )
                       : 0