Fix "Most Played" Not Displaying (#596)

Fix issue where the users "most played" artists didn't display for some users

src/api/queries/frequents/index.ts

@@ -33,7 +33,7 @@ export const useFrequentlyPlayedArtists = () => {
 
 	return useInfiniteQuery({
 		queryKey: FrequentlyPlayedArtistsQueryKey(user, library),
-		queryFn: ({ pageParam }) => fetchFrequentlyPlayedArtists(api, library, pageParam),
+		queryFn: ({ pageParam }) => fetchFrequentlyPlayedArtists(api, user, library, pageParam),
 		select: (data) => data.pages.flatMap((page) => page),
 		initialPageParam: 0,
 		getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => {

src/api/queries/frequents/utils/frequents.ts

@@ -6,10 +6,14 @@ import {
 } from '@jellyfin/sdk/lib/generated-client/models'
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api'
 import { Api } from '@jellyfin/sdk'
-import { isUndefined } from 'lodash'
+import { isEmpty, isNull, isUndefined } from 'lodash'
 import { JellifyLibrary } from '../../../../types/JellifyLibrary'
 import { fetchItem } from '../../item'
 import { ApiLimits } from '../../query.config'
+import { JellifyUser } from '@/src/types/JellifyUser'
+import { queryClient } from '../../../../constants/query-client'
+import { InfiniteData } from '@tanstack/react-query'
+import { FrequentlyPlayedTracksQueryKey } from '../keys'
 
 /**
  * Fetches the 100 most frequently played items from the user's library
@@ -58,6 +62,7 @@ export function fetchFrequentlyPlayed(
  */
 export function fetchFrequentlyPlayedArtists(
 	api: Api | undefined,
+	user: JellifyUser | undefined,
 	library: JellifyLibrary | undefined,
 	page: number,
 ): Promise<BaseItemDto[]> {
@@ -69,41 +74,49 @@ export function fetchFrequentlyPlayedArtists(
 		if (isUndefined(api)) return reject('Client instance not set')
 		if (isUndefined(library)) return reject('Library instance not set')
 
-		fetchFrequentlyPlayed(api, library, 0)
-			.then((frequentTracks) => {
-				return frequentTracks
-					.filter((track) => !isUndefined(track.AlbumArtists))
-					.map((track) => {
-						return {
-							artistId: track.AlbumArtists![0].Id!,
-							playCount: track.UserData?.PlayCount ?? 0,
-						}
-					})
-			})
-			.then((albumArtistsWithPlayCounts) => {
-				return albumArtistsWithPlayCounts.reduce(
-					(acc, { artistId, playCount }) => {
-						const existing = acc.find((a) => a.artistId === artistId)
-						if (existing) {
-							existing.playCount += playCount
-						} else {
-							acc.push({ artistId, playCount })
-						}
-						return acc
-					},
-					[] as { artistId: string; playCount: number }[],
-				)
-			})
-			.then((artistsWithPlayCounts) => {
-				console.debug('Fetching artists')
-				const artists = artistsWithPlayCounts
-					.sort((a, b) => b.playCount - a.playCount)
-					.map((artist) => {
-						return fetchItem(api, artist.artistId)
-					})
+		const frequentlyPlayed = queryClient.getQueryData<InfiniteData<BaseItemDto[]>>(
+			FrequentlyPlayedTracksQueryKey(user, library),
+		)
+		if (isUndefined(frequentlyPlayed)) {
+			return reject('Frequently played tracks not found in query client')
+		}
 
-				return Promise.all(artists)
+		const artistIdWithPlayCount = frequentlyPlayed.pages[page]
+			.filter(
+				(track) =>
+					!isUndefined(track.AlbumArtists) &&
+					!isNull(track.AlbumArtists) &&
+					!isEmpty(track.AlbumArtists) &&
+					!isUndefined(track.AlbumArtists![0].Id),
+			)
+			.map(({ AlbumArtists, UserData }) => {
+				return {
+					artistId: AlbumArtists![0].Id!,
+					playCount: UserData?.PlayCount ?? 0,
+				}
 			})
+
+		console.info('Artist IDs with play count:', artistIdWithPlayCount.length)
+
+		const artistPromises = artistIdWithPlayCount
+			.reduce(
+				(acc, { artistId, playCount }) => {
+					const existing = acc.find((a) => a.artistId === artistId)
+					if (existing) {
+						existing.playCount += playCount
+					} else {
+						acc.push({ artistId, playCount })
+					}
+					return acc
+				},
+				[] as { artistId: string; playCount: number }[],
+			)
+			.sort((a, b) => b.playCount - a.playCount)
+			.map((artist) => {
+				return fetchItem(api, artist.artistId)
+			})
+
+		return Promise.all(artistPromises)
 			.then((artists) => {
 				return resolve(artists.filter((artist) => !isUndefined(artist)))
 			})