project_music_player
project_music_player copied to clipboard
music play from artist details page added
I have implemented new feature. User can now play music from artist details page (songs which are related to artists).
I think that’s a cool feature you’ve added. Being able to play songs from any part of the app is good for great UX
Is this working for you when i tried it i am getting error "Cannot read properties of undefined (reading 'length')" . I have actually used shazam Api not shazam core hence i needed different endpoint to fetch artists songs and therefore i have created one file in components named ' ArtistRelated ' it is exactly same as Related song but i am mapping the data which i am getting from artist songs endpoint.
I have implemented new feature. User can now play music from artist details page (songs which are related to artists).
The original lyrics api has depreciated and new one is https://shazam-core.p.rapidapi.com/v2/tracks/details'
However it still does not work?
My shazamCore Code looks like this:
`import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const shazamCoreApi = createApi({ reducerPath: "shazamCoreApi", baseQuery: fetchBaseQuery({ baseUrl: "https://shazam-core.p.rapidapi.com/", prepareHeaders: (headers) => { headers.set( "X-RapidAPI-Key", "e919fc6e47msh434a4c7817b528dp1d9dc2jsn46121b2f2e3d" ); return headers; }, }), endpoints: (builder) => ({ getTopCharts: builder.query({ query: () => "v1/charts/world" }), getSongsByGenre: builder.query({ query: (genre) => v1/charts/genre-world?genre_code=${genre}, }), getSongsByCountry: builder.query({ query: (countryCode) => v1/charts/country?country_code=${countryCode}, }), getSongsBySearch: builder.query({ query: (searchTerm) => v1/search/multi?search_type=SONGS_ARTISTS&query=${searchTerm}, }), getArtistDetails: builder.query({ query: (artistId) => v2/artists/details?artist_id=${artistId}, }), getSongDetails: builder.query({ query: ({ songid }) => v2/tracks/details?track_id=${songid}, }), getSongRelated: builder.query({ query: ({ songid }) => v1/tracks/related?track_id=${songid}, }), }), });
export const { useGetTopChartsQuery, useGetSongsByGenreQuery, useGetSongsByCountryQuery, useGetSongsBySearchQuery, useGetArtistDetailsQuery, useGetSongDetailsQuery, useGetSongRelatedQuery, } = shazamCoreApi; `
What am I doing wrong?