Spotify Framework with Django/React

Using Django
1

Hi everyone! I’m having some trouble making a PUT request to Spotify using Django framework. The put request aims to reach the end point “…/player/seek” but it requires an argument of type integer. The use case is I click a button on the front end which seeks the currently playing track 15 seconds, and the argument I mention before is the time in milliseconds in the song. I’m not sure how to add this argument from the front end (in React) to the backend to reach the given endpoint. Anyone know how to help? Would be very grateful.

2

Could you explain more about this, or copy/link to the documentation that’s relevant. I don’t understand the situation.

3

Hey Tim, thanks for the reply. I’m apologize, I know the situation is confusing. I’ll link the github below and try to explain the flow of data a bit better.

Basically, it’s an audio player that uses the Spotify API with Django REST and React for the front-end. I’m working on a function that allows the user to seek the track by pressing a fast-forward 15 button and eventually using the scrubber.

Here’s a link to the Spotify API documentation I used as reference.

Since I originally posted, I got the button to be able to seek to a specific position in the track, signified by an integer which denotes the time in milliseconds that the user wishes to seek to.

I did this by creating an onClick for the button on the front end, which fetches an API endpoint, and that endpoint calls a View in my backend, which in turn calls a function that seeks (as I understand it.)

The front end function:

  const forwardFifteen = () => {
    console.log("Forward 15 pressed.");
    const requestOptions = {
      method: "PUT",
      headers: { "Content-Type": "applications.json" },
    };
    fetch("/spotify/seek", requestOptions);
  };

urls.py file:

urlpatterns = [
path('seek', ForwardFifteen.as_view())
]

views.py:

class ForwardFifteen(APIView):
    def put(self, response, format=None):
        room_code = self.request.session.get('room_code')
        room = Room.objects.filter(code=room_code)[0]
        if self.request.session.session_key == room.host or room.guest_can_pause:
            forward_fifteen(room.host)
            return Response({}, status=status.HTTP_204_NO_CONTENT)

        return Response({}, status=status.HTTP_403_FORBIDDEN)

utils.py file which contain the forward_fifteen function:

def skip_song(session_id):
    return execute_spotify_api_request(session_id, "player/next", post_=True)

final function call:

def execute_spotify_api_request_seek(session_id, endpoint, post_=False, put_=False):
    tokens = get_user_tokens(session_id)
    headers = {'Content-Type': 'application/json',
               'Authorization': "Bearer " + tokens.access_token}

    if post_:
        post(BASE_URL + endpoint, headers=headers)
    if put_:
        put(BASE_URL + endpoint, headers=headers, params={"position_ms": 50000})

    response = get(BASE_URL + endpoint, {}, headers=headers)
    try:
        return response.json()
    except:
        return {'Error': 'Issue with request'}

The params={"position_ms": 50000} allows me to seek to 50 seconds into the song, however what I want is to able to skip 15 seconds forward or backward from the current time.

I have the current time stored in state on the front end, retrieved through a view on the backend called CurrentSong.

I suspect the best way to do this would be to use the requestOptions on the front end, but I’m not sure how to implement that.

If you’re still with me at this point, any help would be highly valued.

Thanks & happy holidays :slight_smile:

4

Depending on the request type you use, you can either submit data via the query string or the body of the request. You’re currently using a PUT for the forward API endpoint. You can use either for that request type. Since you’re using fetch, I’d recommend reviewing the docs for it: fetch() - Web APIs | MDN. Then on the backend, you’ll need to access the query string or the body. Since you’re using a DRF APIView, here are the docs for parsing a request: Requests - Django REST framework.

Give those a read, try some things out and if you’re still stuck, let us know.

1 Like