diff --git a/packages/common/src/api/index.ts b/packages/common/src/api/index.ts index d0ef847a8eb..22d8f1e6597 100644 --- a/packages/common/src/api/index.ts +++ b/packages/common/src/api/index.ts @@ -32,6 +32,9 @@ export * from './tan-query/events' // Explore export * from './tan-query/collection/useExploreContent' +export * from './tan-query/collection/useTrendingAlbums' +export * from './tan-query/collection/useNewAlbumReleases' +export * from './tan-query/collection/useBestSellingAlbums' // Lineups export * from './tan-query/lineups/useFeed' diff --git a/packages/common/src/api/tan-query/collection/useBestSellingAlbums.ts b/packages/common/src/api/tan-query/collection/useBestSellingAlbums.ts new file mode 100644 index 00000000000..8af5e7f7997 --- /dev/null +++ b/packages/common/src/api/tan-query/collection/useBestSellingAlbums.ts @@ -0,0 +1,66 @@ +import { HashId } from '@audius/sdk' +import { useQuery } from '@tanstack/react-query' + +import { useQueryContext } from '~/api/tan-query/utils' +import { ID } from '~/models' + +import { QUERY_KEYS } from '../queryKeys' +import { QueryKey, QueryOptions } from '../types' +import { entityCacheOptions } from '../utils/entityCacheOptions' + +import { useCollections } from './useCollections' + +type UseBestSellingAlbumsArgs = { + limit?: number +} + +export const getBestSellingAlbumsQueryKey = ( + args: UseBestSellingAlbumsArgs +) => { + const { limit = 10 } = args + return [QUERY_KEYS.bestSellingAlbums, { limit }] as unknown as QueryKey +} + +export const useBestSellingAlbums = ( + args: UseBestSellingAlbumsArgs = {}, + options?: QueryOptions +) => { + const { limit = 10 } = args + const { audiusSdk } = useQueryContext() + + const idQuery = useQuery({ + queryKey: getBestSellingAlbumsQueryKey({ limit }), + queryFn: async (): Promise => { + const sdk = await audiusSdk() + const { data = [] } = await sdk.explore.getBestSelling({ + limit, + type: 'album' + }) + return data + .map((item) => HashId.parse(item.contentId)) + .filter((id): id is ID => !!id && id > 0) + }, + ...options, + ...entityCacheOptions, + enabled: options?.enabled !== false + }) + + const { + data: collections, + isPending: isCollectionsPending, + isLoading: isCollectionsLoading + } = useCollections(idQuery.data) + + const hasPendingCollections = + (idQuery.data?.length ?? 0) > 0 && isCollectionsPending + + return { + data: collections, + ids: idQuery.data, + isPending: idQuery.isPending || hasPendingCollections, + isLoading: + idQuery.isLoading || (hasPendingCollections && isCollectionsLoading), + isError: idQuery.isError, + isSuccess: idQuery.isSuccess + } +} diff --git a/packages/common/src/api/tan-query/collection/useNewAlbumReleases.ts b/packages/common/src/api/tan-query/collection/useNewAlbumReleases.ts new file mode 100644 index 00000000000..8b46674bb26 --- /dev/null +++ b/packages/common/src/api/tan-query/collection/useNewAlbumReleases.ts @@ -0,0 +1,70 @@ +import { useQuery, useQueryClient } from '@tanstack/react-query' + +import { userCollectionMetadataFromSDK } from '~/adapters/collection' +import { transformAndCleanList } from '~/adapters/utils' +import { useQueryContext } from '~/api/tan-query/utils' +import { ID } from '~/models' + +import { QUERY_KEYS } from '../queryKeys' +import { QueryKey, QueryOptions } from '../types' +import { entityCacheOptions } from '../utils/entityCacheOptions' +import { primeCollectionData } from '../utils/primeCollectionData' + +import { useCollections } from './useCollections' + +type UseNewAlbumReleasesArgs = { + limit?: number +} + +export const getNewAlbumReleasesQueryKey = (args: UseNewAlbumReleasesArgs) => { + const { limit = 10 } = args + return [QUERY_KEYS.newReleaseAlbums, { limit }] as unknown as QueryKey +} + +export const useNewAlbumReleases = ( + args: UseNewAlbumReleasesArgs = {}, + options?: QueryOptions +) => { + const { limit = 10 } = args + const { audiusSdk } = useQueryContext() + const queryClient = useQueryClient() + + const idQuery = useQuery({ + queryKey: getNewAlbumReleasesQueryKey({ limit }), + queryFn: async (): Promise => { + const sdk = await audiusSdk() + const { data = [] } = await sdk.playlists.getPlaylistsNewReleases({ + limit, + type: 'album' + }) + const collections = transformAndCleanList( + data, + userCollectionMetadataFromSDK + ) + primeCollectionData({ collections, queryClient }) + return collections.map((c) => c.playlist_id) + }, + ...options, + ...entityCacheOptions, + enabled: options?.enabled !== false + }) + + const { + data: collections, + isPending: isCollectionsPending, + isLoading: isCollectionsLoading + } = useCollections(idQuery.data) + + const hasPendingCollections = + (idQuery.data?.length ?? 0) > 0 && isCollectionsPending + + return { + data: collections, + ids: idQuery.data, + isPending: idQuery.isPending || hasPendingCollections, + isLoading: + idQuery.isLoading || (hasPendingCollections && isCollectionsLoading), + isError: idQuery.isError, + isSuccess: idQuery.isSuccess + } +} diff --git a/packages/common/src/api/tan-query/collection/useTrendingAlbums.ts b/packages/common/src/api/tan-query/collection/useTrendingAlbums.ts new file mode 100644 index 00000000000..06304f5c643 --- /dev/null +++ b/packages/common/src/api/tan-query/collection/useTrendingAlbums.ts @@ -0,0 +1,78 @@ +import { OptionalId } from '@audius/sdk' +import { useQuery, useQueryClient } from '@tanstack/react-query' + +import { userCollectionMetadataFromSDK } from '~/adapters/collection' +import { transformAndCleanList } from '~/adapters/utils' +import { useQueryContext } from '~/api/tan-query/utils' +import { ID } from '~/models' + +import { QUERY_KEYS } from '../queryKeys' +import { QueryKey, QueryOptions } from '../types' +import { useCurrentUserId } from '../users/account/useCurrentUserId' +import { entityCacheOptions } from '../utils/entityCacheOptions' +import { primeCollectionData } from '../utils/primeCollectionData' + +import { useCollections } from './useCollections' + +type UseTrendingAlbumsArgs = { + time?: 'week' | 'month' | 'year' | 'allTime' + limit?: number +} + +export const getTrendingAlbumsQueryKey = (args: UseTrendingAlbumsArgs) => { + const { time = 'month', limit = 10 } = args + return [QUERY_KEYS.trendingAlbums, { time, limit }] as unknown as QueryKey< + ID[] + > +} + +export const useTrendingAlbums = ( + args: UseTrendingAlbumsArgs = {}, + options?: QueryOptions +) => { + const { time = 'month', limit = 10 } = args + const { audiusSdk } = useQueryContext() + const { data: currentUserId } = useCurrentUserId() + const queryClient = useQueryClient() + + const idQuery = useQuery({ + queryKey: getTrendingAlbumsQueryKey({ time, limit }), + queryFn: async (): Promise => { + const sdk = await audiusSdk() + const { data = [] } = await sdk.playlists.getTrendingPlaylists({ + time, + limit, + type: 'album', + userId: OptionalId.parse(currentUserId) + }) + const collections = transformAndCleanList( + data, + userCollectionMetadataFromSDK + ) + primeCollectionData({ collections, queryClient }) + return collections.map((c) => c.playlist_id) + }, + ...options, + ...entityCacheOptions, + enabled: options?.enabled !== false + }) + + const { + data: collections, + isPending: isCollectionsPending, + isLoading: isCollectionsLoading + } = useCollections(idQuery.data) + + const hasPendingCollections = + (idQuery.data?.length ?? 0) > 0 && isCollectionsPending + + return { + data: collections, + ids: idQuery.data, + isPending: idQuery.isPending || hasPendingCollections, + isLoading: + idQuery.isLoading || (hasPendingCollections && isCollectionsLoading), + isError: idQuery.isError, + isSuccess: idQuery.isSuccess + } +} diff --git a/packages/common/src/api/tan-query/queryKeys.ts b/packages/common/src/api/tan-query/queryKeys.ts index 76792eb981e..9013c0f0cfe 100644 --- a/packages/common/src/api/tan-query/queryKeys.ts +++ b/packages/common/src/api/tan-query/queryKeys.ts @@ -83,6 +83,9 @@ export const QUERY_KEYS = { trendingIds: 'trendingIds', trendingUnderground: 'trendingUnderground', trendingWinners: 'trendingWinners', + trendingAlbums: 'trendingAlbums', + newReleaseAlbums: 'newReleaseAlbums', + bestSellingAlbums: 'bestSellingAlbums', trackPageLineup: 'trackPageLineup', connectedWallets: 'connectedWallets', audioBalance: 'audioBalance', diff --git a/packages/common/src/messages/explore.ts b/packages/common/src/messages/explore.ts index a51c720a327..bae78a93907 100644 --- a/packages/common/src/messages/explore.ts +++ b/packages/common/src/messages/explore.ts @@ -10,6 +10,9 @@ export const exploreMessages = { forYou: 'For You', recentlyListedForSale: 'Recently Listed for Sale', bestSelling: 'Best Selling', + topAlbumsThisMonth: 'Top Albums This Month', + newAlbumReleases: 'New Album Releases', + bestSellingAlbums: 'Best Selling Albums', exploreByMood: (category?: string) => `Explore${category ? ` ${category}` : ''} by Mood`, quickSearch: 'Quick Search', diff --git a/packages/common/src/models/Analytics.ts b/packages/common/src/models/Analytics.ts index 55b046f35a0..95de66d0969 100644 --- a/packages/common/src/models/Analytics.ts +++ b/packages/common/src/models/Analytics.ts @@ -1590,6 +1590,9 @@ export type ExploreSectionName = | 'Mood Grid' | 'Most Shared' | 'Best Selling' + | 'Best Selling Albums' + | 'Top Albums This Month' + | 'New Album Releases' | 'Recent Premium Tracks' | 'Feeling Lucky' | 'Recent Searches' diff --git a/packages/mobile/src/screens/explore-screen/components/BestSellingAlbums.tsx b/packages/mobile/src/screens/explore-screen/components/BestSellingAlbums.tsx new file mode 100644 index 00000000000..935d20a79b3 --- /dev/null +++ b/packages/mobile/src/screens/explore-screen/components/BestSellingAlbums.tsx @@ -0,0 +1,39 @@ +import React from 'react' + +import { useBestSellingAlbums } from '@audius/common/api' +import { exploreMessages as messages } from '@audius/common/messages' + +import { useTheme } from '@audius/harmony-native' +import { CollectionList } from 'app/components/collection-list' + +import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking' + +import { ExploreSection } from './ExploreSection' + +export const BestSellingAlbums = () => { + const { spacing } = useTheme() + const { InViewWrapper, inView } = useExploreSectionTracking( + 'Best Selling Albums' + ) + + const { ids, isError, isSuccess } = useBestSellingAlbums( + { limit: 10 }, + { enabled: inView } + ) + + if (isError || (isSuccess && !ids?.length)) { + return null + } + + return ( + + + + + + ) +} diff --git a/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx b/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx index c8eb8a4f607..8eb972f794b 100644 --- a/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx +++ b/packages/mobile/src/screens/explore-screen/components/ExploreContent.tsx @@ -7,12 +7,15 @@ import { RecentSearches } from 'app/screens/search-screen/RecentSearches' import { useSearchCategory } from 'app/screens/search-screen/searchState' import { ArtistSpotlight } from './ArtistSpotlight' +import { BestSellingAlbums } from './BestSellingAlbums' import { FeaturedPlaylists } from './FeaturedPlaylists' import { FeaturedRemixContests } from './FeaturedRemixContests' import { FeelingLucky } from './FeelingLucky' import { ForYouTracks } from './ForYouTracks' import { LabelSpotlight } from './LabelSpotlight' +import { NewAlbumReleases } from './NewAlbumReleases' import { RecentlyPlayedTracks } from './RecentlyPlayed' +import { TopAlbumsThisMonth } from './TopAlbumsThisMonth' export const ExploreContent = () => { const [category] = useSearchCategory() @@ -22,12 +25,16 @@ export const ExploreContent = () => { const showUserContextualContent = isCurrentUserIdLoading || !!currentUserId const showTrackContent = category === 'tracks' || category === 'all' const showPlaylistContent = category === 'playlists' || category === 'all' + const showAlbumContent = category === 'albums' || category === 'all' const showUserContent = category === 'users' || category === 'all' return ( {showTrackContent && showUserContextualContent && } {showPlaylistContent && } + {showAlbumContent && } + {showAlbumContent && } + {showAlbumContent && } {showTrackContent && } {showTrackContent && showUserContextualContent && ( diff --git a/packages/mobile/src/screens/explore-screen/components/NewAlbumReleases.tsx b/packages/mobile/src/screens/explore-screen/components/NewAlbumReleases.tsx new file mode 100644 index 00000000000..342848afd7e --- /dev/null +++ b/packages/mobile/src/screens/explore-screen/components/NewAlbumReleases.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +import { useNewAlbumReleases } from '@audius/common/api' +import { exploreMessages as messages } from '@audius/common/messages' + +import { useTheme } from '@audius/harmony-native' +import { CollectionList } from 'app/components/collection-list' + +import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking' + +import { ExploreSection } from './ExploreSection' + +export const NewAlbumReleases = () => { + const { spacing } = useTheme() + const { InViewWrapper, inView } = + useExploreSectionTracking('New Album Releases') + + const { ids, isError, isSuccess } = useNewAlbumReleases( + { limit: 10 }, + { enabled: inView } + ) + + if (isError || (isSuccess && !ids?.length)) { + return null + } + + return ( + + + + + + ) +} diff --git a/packages/mobile/src/screens/explore-screen/components/TopAlbumsThisMonth.tsx b/packages/mobile/src/screens/explore-screen/components/TopAlbumsThisMonth.tsx new file mode 100644 index 00000000000..3bff15aeae3 --- /dev/null +++ b/packages/mobile/src/screens/explore-screen/components/TopAlbumsThisMonth.tsx @@ -0,0 +1,39 @@ +import React from 'react' + +import { useTrendingAlbums } from '@audius/common/api' +import { exploreMessages as messages } from '@audius/common/messages' + +import { useTheme } from '@audius/harmony-native' +import { CollectionList } from 'app/components/collection-list' + +import { useExploreSectionTracking } from '../hooks/useExploreSectionTracking' + +import { ExploreSection } from './ExploreSection' + +export const TopAlbumsThisMonth = () => { + const { spacing } = useTheme() + const { InViewWrapper, inView } = useExploreSectionTracking( + 'Top Albums This Month' + ) + + const { ids, isError, isSuccess } = useTrendingAlbums( + { time: 'month', limit: 10 }, + { enabled: inView } + ) + + if (isError || (isSuccess && !ids?.length)) { + return null + } + + return ( + + + + + + ) +} diff --git a/packages/sdk/src/sdk/api/generated/default/apis/PlaylistsApi.ts b/packages/sdk/src/sdk/api/generated/default/apis/PlaylistsApi.ts index a91a1cb2e07..1fe76d6f04d 100644 --- a/packages/sdk/src/sdk/api/generated/default/apis/PlaylistsApi.ts +++ b/packages/sdk/src/sdk/api/generated/default/apis/PlaylistsApi.ts @@ -92,6 +92,12 @@ export interface GetPlaylistTracksRequest { playlistId: string; } +export interface GetPlaylistsNewReleasesRequest { + offset?: number; + limit?: number; + type?: GetPlaylistsNewReleasesTypeEnum; +} + export interface GetTrendingPlaylistsRequest { offset?: number; limit?: number; @@ -508,6 +514,52 @@ export class PlaylistsApi extends runtime.BaseAPI { return await response.value(); } + /** + * @hidden + * Returns recently released playlists or albums + */ + async getPlaylistsNewReleasesRaw(params: GetPlaylistsNewReleasesRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise> { + const queryParameters: any = {}; + + if (params.offset !== undefined) { + queryParameters['offset'] = params.offset; + } + + if (params.limit !== undefined) { + queryParameters['limit'] = params.limit; + } + + if (params.type !== undefined) { + queryParameters['type'] = params.type; + } + + const headerParameters: runtime.HTTPHeaders = {}; + + if (!headerParameters["Authorization"] && this.configuration && this.configuration.accessToken) { + const token = await this.configuration.accessToken("OAuth2", ["read"]); + if (token) { + headerParameters["Authorization"] = token; + } + } + + const response = await this.request({ + path: `/playlists/new-releases`, + method: 'GET', + headers: headerParameters, + query: queryParameters, + }, initOverrides); + + return new runtime.JSONApiResponse(response, (jsonValue) => TrendingPlaylistsResponseFromJSON(jsonValue)); + } + + /** + * Returns recently released playlists or albums + */ + async getPlaylistsNewReleases(params: GetPlaylistsNewReleasesRequest = {}, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise { + const response = await this.getPlaylistsNewReleasesRaw(params, initOverrides); + return await response.value(); + } + /** * @hidden * Returns trending playlists for a time period @@ -1076,6 +1128,14 @@ export class PlaylistsApi extends runtime.BaseAPI { } +/** + * @export + */ +export const GetPlaylistsNewReleasesTypeEnum = { + Playlist: 'playlist', + Album: 'album' +} as const; +export type GetPlaylistsNewReleasesTypeEnum = typeof GetPlaylistsNewReleasesTypeEnum[keyof typeof GetPlaylistsNewReleasesTypeEnum]; /** * @export */ diff --git a/packages/web/src/pages/search-explore-page/components/desktop/BestSellingAlbumsSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/BestSellingAlbumsSection.tsx new file mode 100644 index 00000000000..ed9b7133e2d --- /dev/null +++ b/packages/web/src/pages/search-explore-page/components/desktop/BestSellingAlbumsSection.tsx @@ -0,0 +1,36 @@ +import { useBestSellingAlbums } from '@audius/common/api' +import { exploreMessages as messages } from '@audius/common/messages' + +import { CollectionCard, CollectionCardSkeleton } from 'components/collection' +import { useIsMobile } from 'hooks/useIsMobile' + +import { Carousel } from './Carousel' +import { useExploreSectionTracking } from './useExploreSectionTracking' + +export const BestSellingAlbumsSection = () => { + const { ref, inView } = useExploreSectionTracking('Best Selling Albums') + + const { ids, isLoading, isError, isSuccess } = useBestSellingAlbums( + { limit: 10 }, + { enabled: inView } + ) + const isMobile = useIsMobile() + + if (isError || (isSuccess && !ids?.length)) { + return null + } + + return ( + + {!inView || !ids || isLoading + ? Array.from({ length: 6 }).map((_, i) => ( + + )) + : ids.map((id) => )} + + ) +} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/NewAlbumReleasesSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/NewAlbumReleasesSection.tsx new file mode 100644 index 00000000000..f9599894875 --- /dev/null +++ b/packages/web/src/pages/search-explore-page/components/desktop/NewAlbumReleasesSection.tsx @@ -0,0 +1,36 @@ +import { useNewAlbumReleases } from '@audius/common/api' +import { exploreMessages as messages } from '@audius/common/messages' + +import { CollectionCard, CollectionCardSkeleton } from 'components/collection' +import { useIsMobile } from 'hooks/useIsMobile' + +import { Carousel } from './Carousel' +import { useExploreSectionTracking } from './useExploreSectionTracking' + +export const NewAlbumReleasesSection = () => { + const { ref, inView } = useExploreSectionTracking('New Album Releases') + + const { ids, isLoading, isError, isSuccess } = useNewAlbumReleases( + { limit: 10 }, + { enabled: inView } + ) + const isMobile = useIsMobile() + + if (isError || (isSuccess && !ids?.length)) { + return null + } + + return ( + + {!inView || !ids || isLoading + ? Array.from({ length: 6 }).map((_, i) => ( + + )) + : ids.map((id) => )} + + ) +} diff --git a/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx b/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx index 5b58a5781aa..02ad2f35ff2 100644 --- a/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx +++ b/packages/web/src/pages/search-explore-page/components/desktop/SearchExplorePage.tsx @@ -40,16 +40,19 @@ import { } from 'pages/search-page/types' import { ArtistSpotlightSection } from './ArtistSpotlightSection' +import { BestSellingAlbumsSection } from './BestSellingAlbumsSection' import { FanClubsExploreSection } from './FanClubsExploreSection' import { FeaturedPlaylistsSection } from './FeaturedPlaylistsSection' import { FeaturedRemixContestsSection } from './FeaturedRemixContestsSection' import { FeelingLuckySection } from './FeelingLuckySection' import { LabelSpotlightSection } from './LabelSpotlightSection' import { MoodGrid } from './MoodGrid' +import { NewAlbumReleasesSection } from './NewAlbumReleasesSection' import { QuickSearchGrid } from './QuickSearchGrid' import { RecentSearchesSection } from './RecentSearchesSection' import { RecentlyPlayedSection } from './RecentlyPlayedSection' import { RecommendedTracksSection } from './RecommendedTracksSection' +import { TopAlbumsThisMonthSection } from './TopAlbumsThisMonthSection' import { UndergroundTrendingTracksSection } from './UndergroundTrendingTracksSection' export type SearchExplorePageProps = { @@ -203,6 +206,7 @@ const SearchExplorePage = ({ const isTracksTab = categoryKey === CategoryView.TRACKS const isPlaylistsTab = categoryKey === CategoryView.PLAYLISTS const isAlbumsTab = categoryKey === CategoryView.ALBUMS + const showAlbumContent = categoryKey === CategoryView.ALL || isAlbumsTab return ( ) : null} {showPlaylistContent ? : null} + {showAlbumContent ? : null} + {showAlbumContent ? : null} + {showAlbumContent ? : null} {showTrackContent ? : null} {categoryKey === CategoryView.ALL ? ( diff --git a/packages/web/src/pages/search-explore-page/components/desktop/TopAlbumsThisMonthSection.tsx b/packages/web/src/pages/search-explore-page/components/desktop/TopAlbumsThisMonthSection.tsx new file mode 100644 index 00000000000..688b8d12c59 --- /dev/null +++ b/packages/web/src/pages/search-explore-page/components/desktop/TopAlbumsThisMonthSection.tsx @@ -0,0 +1,36 @@ +import { useTrendingAlbums } from '@audius/common/api' +import { exploreMessages as messages } from '@audius/common/messages' + +import { CollectionCard, CollectionCardSkeleton } from 'components/collection' +import { useIsMobile } from 'hooks/useIsMobile' + +import { Carousel } from './Carousel' +import { useExploreSectionTracking } from './useExploreSectionTracking' + +export const TopAlbumsThisMonthSection = () => { + const { ref, inView } = useExploreSectionTracking('Top Albums This Month') + + const { ids, isLoading, isError, isSuccess } = useTrendingAlbums( + { time: 'month', limit: 10 }, + { enabled: inView } + ) + const isMobile = useIsMobile() + + if (isError || (isSuccess && !ids?.length)) { + return null + } + + return ( + + {!inView || !ids || isLoading + ? Array.from({ length: 6 }).map((_, i) => ( + + )) + : ids.map((id) => )} + + ) +} diff --git a/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx b/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx index b3f6f7ef282..5b262eecb00 100644 --- a/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx +++ b/packages/web/src/pages/search-explore-page/components/mobile/SearchExplorePage.tsx @@ -40,16 +40,19 @@ import { } from 'pages/search-page/types' import { ArtistSpotlightSection } from '../desktop/ArtistSpotlightSection' +import { BestSellingAlbumsSection } from '../desktop/BestSellingAlbumsSection' import { FanClubsExploreSection } from '../desktop/FanClubsExploreSection' import { FeaturedPlaylistsSection } from '../desktop/FeaturedPlaylistsSection' import { FeaturedRemixContestsSection } from '../desktop/FeaturedRemixContestsSection' import { FeelingLuckySection } from '../desktop/FeelingLuckySection' import { LabelSpotlightSection } from '../desktop/LabelSpotlightSection' import { MoodGrid } from '../desktop/MoodGrid' +import { NewAlbumReleasesSection } from '../desktop/NewAlbumReleasesSection' import { QuickSearchGrid } from '../desktop/QuickSearchGrid' import { RecentSearchesSection } from '../desktop/RecentSearchesSection' import { RecentlyPlayedSection } from '../desktop/RecentlyPlayedSection' import { RecommendedTracksSection } from '../desktop/RecommendedTracksSection' +import { TopAlbumsThisMonthSection } from '../desktop/TopAlbumsThisMonthSection' import { UndergroundTrendingTracksSection } from '../desktop/UndergroundTrendingTracksSection' export type SearchExplorePageProps = { @@ -181,6 +184,7 @@ const SearchExplorePage = ({ const isTracksTab = categoryKey === CategoryView.TRACKS const isPlaylistsTab = categoryKey === CategoryView.PLAYLISTS const isAlbumsTab = categoryKey === CategoryView.ALBUMS + const showAlbumContent = categoryKey === CategoryView.ALL || isAlbumsTab return ( ) : null} {showPlaylistContent ? : null} + {showAlbumContent ? : null} + {showAlbumContent ? : null} + {showAlbumContent ? : null} {showTrackContent ? : null} {categoryKey === CategoryView.ALL ? : null} {isTracksTab ? : null}