Add pause/play functionality to the playback footer

backend/src/controllers/spotify.py

@@ -1,5 +1,6 @@
 from flask import Blueprint, make_response, request
 from src.dataclasses.playback_info import PlaybackInfo
+from src.dataclasses.playback_request import StartPlaybackRequest
 from src.dataclasses.playlist import Playlist
 from src.spotify import SpotifyClient
 
@@ -125,4 +126,16 @@ def add_album_to_playlist():
             access_token=access_token, playlist_id=playlist_id, album_id=album_id
         )
 
+    @spotify_controller.route("pause_playback", methods=["PUT"])
+    def pause_playback():
+        access_token = request.cookies.get("spotify_access_token")
+        return spotify.pause_playback(access_token)
+
+    @spotify_controller.route("start_playback", methods=["PUT"])
+    def start_playback():
+        access_token = request.cookies.get("spotify_access_token")
+        request_body = request.json
+        start_playback_request_body = StartPlaybackRequest.model_validate(request_body)
+        return spotify.start_playback(access_token, start_playback_request_body)
+
     return spotify_controller

backend/src/dataclasses/playback_info.py

@@ -23,6 +23,7 @@ class PlaybackInfo(BaseModel):
     track_duration: float
     album_progress: float
     album_duration: float
+    is_playing: bool
 
     def get_formatted_artists(self) -> str:
         return ", ".join(self.track_artists)

backend/src/dataclasses/playback_request.py

@@ -0,0 +1,19 @@
+from pydantic import BaseModel
+from typing import List, Optional
+
+
+class StartPlaybackRequestPositionOffset(BaseModel):
+    position: int
+
+
+class StartPlaybackRequestUriOffset(BaseModel):
+    uri: str
+
+
+class StartPlaybackRequest(BaseModel):
+    context_uri: Optional[str] = None
+    uris: Optional[List[str]] = None
+    offset: Optional[
+        StartPlaybackRequestPositionOffset | StartPlaybackRequestUriOffset
+    ] = None
+    position_ms: Optional[int] = None

backend/src/spotify.py

@@ -5,6 +5,7 @@
 from flask import Response, make_response, redirect
 from src.dataclasses.album import Album
 from src.dataclasses.playback_info import PlaybackInfo, PlaylistProgression
+from src.dataclasses.playback_request import StartPlaybackRequest
 from src.dataclasses.playback_state import PlaybackState
 from src.dataclasses.playlist import Playlist
 from src.dataclasses.playlist_info import CurrentUserPlaylists, SimplifiedPlaylist
@@ -28,6 +29,7 @@
     "playlist-read-collaborative",
     "playlist-modify-private",
     "playlist-modify-public",
+    "user-modify-playback-state",
 ]
 
 
@@ -293,7 +295,7 @@ def get_album(self, access_token, id):
         album = Album.model_validate(api_album)
         return album
 
-    def get_current_playback(self, access_token):
+    def get_current_playback(self, access_token) -> PlaybackState | None:
         response = requests.get(
             f"https://api.spotify.com/v1/me/player",
             auth=BearerAuth(access_token),
@@ -345,6 +347,7 @@ def get_my_current_playback(self, access_token) -> PlaybackInfo | None:
                 "track_duration": api_playback.item.duration_ms,
                 "album_progress": album_progress,
                 "album_duration": album_duration,
+                "is_playing": api_playback.is_playing,
             }
         )
 
@@ -366,11 +369,13 @@ def get_playlist_progression(self, access_token, api_playback: PlaybackInfo):
             }
         )
 
-    def search_albums(self, access_token, search=None, offset=0) -> List[Album]:
+    def search_albums(
+        self, access_token, search=None, offset=0, limit=50
+    ) -> List[Album]:
         if search:
             response = requests.get(
                 f"https://api.spotify.com/v1/albums/{id}",
-                data={"q": search, "type": "album", "limit": 50, "offset": offset},
+                data={"q": search, "type": "album", "limit": limit, "offset": offset},
                 headers={
                     "content-type": "application/json",
                 },
@@ -456,6 +461,41 @@ def is_album_in_playlist(self, access_token, playlist_id, album: Album) -> bool:
         album_track_ids = [track.id for track in album.tracks.items]
         return all(e in playlist_track_ids for e in album_track_ids)
 
+    def pause_playback(self, access_token) -> Response:
+        response = requests.put(
+            url="https://api.spotify.com/v1/me/player/pause",
+            headers={
+                "content-type": "application/json",
+            },
+            auth=BearerAuth(access_token),
+        )
+        foo = self.response_handler(
+            make_response("", response.status_code), jsonify=False
+        )
+        return foo
+
+    def start_playback(
+        self, access_token, start_playback_request_body: StartPlaybackRequest = None
+    ) -> Response:
+        request_json = start_playback_request_body.model_dump_json(exclude_none=True)
+        if request_json == {}:
+            data = None
+        else:
+            data = request_json
+
+        response = requests.put(
+            url="https://api.spotify.com/v1/me/player/play",
+            data=data,
+            headers={
+                "content-type": "application/json",
+            },
+            auth=BearerAuth(access_token),
+        )
+        foo = self.response_handler(
+            make_response("", response.status_code), jsonify=False
+        )
+        return foo
+
 
 def get_playlist_duration(playlist_info: List[PlaylistTrackObject]) -> int:
     return sum(track.track.duration_ms for track in playlist_info)

compose.yaml

@@ -4,7 +4,7 @@ services:
         build:
             context: frontend
             dockerfile: Dockerfile
-            target: production
+            target: development
         ports:
             - "8080:8080"
         env_file:
@@ -21,7 +21,7 @@ services:
         build:
             context: backend
             dockerfile: Dockerfile
-            target: production
+            target: development
         ports:
             - "5000:5000"
         env_file:

frontend/src/api/index.ts

@@ -104,3 +104,21 @@ export const addAlbumToPlaylist = async (
 		albumId,
 	});
 };
+
+export const pausePlayback = async (): Promise<Response> => {
+	return jsonRequest(`spotify/pause_playback`, RequestMethod.PUT);
+};
+
+export const startPlayback = async (
+	context_uri?: string, 
+	uris?: string[], 
+	offset?: {position: number} | {uri: string}, 
+	position_ms?: number
+): Promise<Response> => {
+	return jsonRequest(`spotify/start_playback`, RequestMethod.PUT, {
+		context_uri,
+		uris,
+		offset,
+		position_ms
+	});
+};

frontend/src/api/jsonRequest.ts

@@ -5,6 +5,7 @@ export const backendUrl = process.env.BACKEND_URL;
 export enum RequestMethod {
 	GET = "get",
 	POST = "post",
+	PUT = "put",
 }
 
 export const jsonRequest = async <I, O>(
@@ -16,6 +17,7 @@ export const jsonRequest = async <I, O>(
 	let fetchOptions: RequestInit = { credentials: "include" };
 	switch (method) {
 		case RequestMethod.POST:
+		case RequestMethod.PUT:
 			fetchOptions = {
 				...fetchOptions,
 				method: method,

frontend/src/context/PlaybackContext.tsx

@@ -6,11 +6,12 @@ import React, {
   useState,
 } from "react";
 import { PlaybackInfo, PlaylistProgress } from "../interfaces/PlaybackInfo";
-import { useQuery } from "@tanstack/react-query";
+import { QueryObserverResult, RefetchOptions, useQuery } from "@tanstack/react-query";
 import { getPlaybackInfo, getPlaylistProgress } from "../api";
 
 interface PlaybackContext {
   playbackInfo?: PlaybackInfo;
+  refetchPlaybackInfo?: (options?: RefetchOptions) => Promise<QueryObserverResult<PlaybackInfo, Error>>
   playlistProgress?: PlaylistProgress;
 }
 
@@ -24,7 +25,7 @@ export const PlaybackContextProvider: FC<PlaybackContextProviderProps> = ({
   children,
 }) => {
   const [playbackRefetchInterval, setPlaybackRefetchInterval] = useState(5000);
-  const { data: playbackInfo } = useQuery<PlaybackInfo>({
+  const { data: playbackInfo, refetch: refetchPlaybackInfo } = useQuery<PlaybackInfo>({
     queryKey: ["playbackInfo"],
     queryFn: () => {
       return getPlaybackInfo();
@@ -50,7 +51,7 @@ export const PlaybackContextProvider: FC<PlaybackContextProviderProps> = ({
   });
 
   return (
-    <PlaybackContext.Provider value={{ playbackInfo, playlistProgress }}>
+    <PlaybackContext.Provider value={{ playbackInfo, playlistProgress, refetchPlaybackInfo }}>
       {children}
     </PlaybackContext.Provider>
   );

frontend/src/interfaces/PlaybackInfo.ts

@@ -11,6 +11,7 @@ export interface PlaybackInfo {
   track_duration: number;
   album_progress: number;
   album_duration: number;
+  is_playing: boolean;
 }
 
 export interface PlaylistProgress {

frontend/src/presentational/PlaybackFooter.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import React, { FC, useEffect, useState } from "react";
-import { getPlaybackInfo, getPlaylistProgress } from "../api";
+import { getPlaybackInfo, getPlaylistProgress, pausePlayback, startPlayback } from "../api";
 import { PlaybackInfo, PlaylistProgress } from "../interfaces/PlaybackInfo";
 import { ProgressCircle } from "../components/ProgressCircle";
 import useWindowSize from "../hooks/useWindowSize";
@@ -12,14 +12,26 @@ import { Link } from "react-router-dom";
 
 const PlaybackFooter: FC = () => {
   const { isMobileView } = useWindowSize();
-  const { playbackInfo, playlistProgress } = usePlaybackContext();
+  const { playbackInfo, playlistProgress, refetchPlaybackInfo } = usePlaybackContext();
 
   if (!playbackInfo) return null;
+
+  const handlePausePlayClick = (): void => {
+    if (playbackInfo.is_playing) {
+      pausePlayback()
+    } else {
+      startPlayback()
+    }
+    refetchPlaybackInfo?.()
+  }
+
   return (
     <div className="w-full h-fit bg-primary-300 px-4 py-2 text-sm sm:text-base">
       <div className="flex space-x-4 sm:space-x-6">
         <div className="flex flex-col space-y-2 w-1/5 max-w-32">
-          <img src={playbackInfo.artwork_url}></img>
+          <button className="opacity-80 w-full h-full" onClick={handlePausePlayClick}>
+            <img src={playbackInfo.artwork_url}></img>
+          </button>
           <div>Playing:</div>
           <div className="text-balance">
             {playbackInfo.album_artists.join(", ")}