wip: Artist page written in composition API in order to improve it and resolve issue 18; style: changed tabs in Artist page

This commit is contained in:
Roberto Tonino
2020-11-14 01:13:15 +01:00
parent 2d7ec9ee6b
commit d04439857a
8 changed files with 245 additions and 212 deletions

35
src/data/artist.js Normal file
View File

@@ -0,0 +1,35 @@
import { getPropertyWithFallback } from '@/utils/utils'
export function formatArtistData(artistData) {
return {
artistID: getPropertyWithFallback(artistData, 'id'),
artistName: getPropertyWithFallback(artistData, 'name'),
artistPictureXL: getPropertyWithFallback(artistData, 'picture_xl'),
artistReleases: formatArtistReleases(getPropertyWithFallback(artistData, 'releases'))
}
}
function formatArtistReleases(artistReleases) {
let formattedReleases = {}
for (const releaseType in artistReleases) {
if (artistReleases.hasOwnProperty(releaseType)) {
const releases = artistReleases[releaseType]
formattedReleases[releaseType] = []
for (const release of releases) {
formattedReleases[releaseType].push({
releaseID: getPropertyWithFallback(release, 'id'),
releaseCover: getPropertyWithFallback(release, 'cover_small'),
releaseTitle: getPropertyWithFallback(release, 'title'),
releaseDate: getPropertyWithFallback(release, 'release_date'),
releaseTracksNumber: getPropertyWithFallback(release, 'nb_song'),
releaseLink: getPropertyWithFallback(release, 'link'),
isReleaseExplicit: getPropertyWithFallback(release, 'explicit_lyrics')
})
}
}
}
return formattedReleases
}

View File

@@ -1,7 +1,7 @@
import { getProperty } from '@/utils/utils'
import { getPropertyWithFallback } from '@/utils/utils'
/**
* @typedef {object} ReducedSearchResult
* @typedef {object} FormattedSearchResult
* @property {FormattedData} data
* @property {boolean} hasLoaded
*/
@@ -15,38 +15,11 @@ import { getProperty } from '@/utils/utils'
* @returns {FormattedData} formattedData
*/
/**
* Reduces passed data to a specific format decied by the formatter passed.
*
* @param {object} rawObj
* @param {Formatter} formatFunc
* @returns {null|ReducedSearchResult}
*/
export function formatSearchResults(rawObj, formatFunc) {
if (!rawObj.hasLoaded) {
return null
} else {
const { data: rawData } = rawObj
const formattedData = []
for (const dataElement of rawData) {
let formatted = formatFunc(dataElement)
formattedData.push(formatted)
}
return {
data: formattedData,
hasLoaded: rawObj.hasLoaded
}
}
}
/**
* @param {FormattedData} track
*/
export function formatSingleTrack(track) {
let isTrackExplicit = getProperty(track, 'explicit_lyrics', 'EXPLICIT_LYRICS')
let isTrackExplicit = getPropertyWithFallback(track, 'explicit_lyrics', 'EXPLICIT_LYRICS')
if (typeof isTrackExplicit === 'string') {
isTrackExplicit = isTrackExplicit !== '0'
@@ -54,28 +27,32 @@ export function formatSingleTrack(track) {
return {
/* Track */
trackTitle: getProperty(track, 'title', 'SNG_TITLE'),
trackTitleVersion: getProperty(track, 'title_version', 'VERSION'),
trackPreview: getProperty(track, 'preview'),
trackDuration: getProperty(track, 'duration', 'DURATION'),
trackLink: getProperty(track, 'link') || `https://www.deezer.com/track/${track.SNG_ID}`,
trackTitle: getPropertyWithFallback(track, 'title', 'SNG_TITLE'),
trackTitleVersion: getPropertyWithFallback(track, 'title_version', 'VERSION'),
trackPreview: getPropertyWithFallback(track, 'preview'),
trackDuration: getPropertyWithFallback(track, 'duration', 'DURATION'),
trackLink: getPropertyWithFallback(track, 'link') || `https://www.deezer.com/track/${track.SNG_ID}`,
isTrackExplicit,
/* Artist */
artistID: getProperty(track, 'artist.id', 'ART_ID'),
artistName: getProperty(track, 'artist.name', 'ART_NAME'),
artistID: getPropertyWithFallback(track, 'artist.id', 'ART_ID'),
artistName: getPropertyWithFallback(track, 'artist.name', 'ART_NAME'),
/* Album */
albumID: getProperty(track, 'album.id', 'ALB_ID'),
albumTitle: getProperty(track, 'album.title', 'ALB_TITLE'),
albumID: getPropertyWithFallback(track, 'album.id', 'ALB_ID'),
albumTitle: getPropertyWithFallback(track, 'album.title', 'ALB_TITLE'),
albumPicture:
getProperty(track, 'album.cover_small') ||
getPropertyWithFallback(track, 'album.cover_small') ||
`https://e-cdns-images.dzcdn.net/images/cover/${track.ALB_PICTURE}/32x32-000000-80-0-0.jpg`
}
}
export function formatAlbums(album) {
let isAlbumExplicit = getProperty(album, 'explicit_lyrics', 'EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS')
let isAlbumExplicit = getPropertyWithFallback(
album,
'explicit_lyrics',
'EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS'
)
if ('number' === typeof isAlbumExplicit) {
isAlbumExplicit = isAlbumExplicit === 1
@@ -83,49 +60,49 @@ export function formatAlbums(album) {
return {
/* Album */
albumID: getProperty(album, 'id', 'ALB_ID'),
albumTitle: getProperty(album, 'title', 'ALB_TITLE'),
albumID: getPropertyWithFallback(album, 'id', 'ALB_ID'),
albumTitle: getPropertyWithFallback(album, 'title', 'ALB_TITLE'),
albumCoverMedium:
getProperty(album, 'cover_medium') ||
getPropertyWithFallback(album, 'cover_medium') ||
`https://e-cdns-images.dzcdn.net/images/cover/${album.ALB_PICTURE}/156x156-000000-80-0-0.jpg`,
albumLink: getProperty(album, 'link') || `https://deezer.com/album/${album.ALB_ID}`,
albumTracks: getProperty(album, 'nb_tracks', 'NUMBER_TRACK'),
albumLink: getPropertyWithFallback(album, 'link') || `https://deezer.com/album/${album.ALB_ID}`,
albumTracks: getPropertyWithFallback(album, 'nb_tracks', 'NUMBER_TRACK'),
isAlbumExplicit,
/* Artist */
artistName: getProperty(album, 'artist.name', 'ART_NAME')
artistName: getPropertyWithFallback(album, 'artist.name', 'ART_NAME')
}
}
export function formatArtist(artist) {
return {
/* Artist */
artistID: getProperty(artist, 'id', 'ART_ID'),
artistName: getProperty(artist, 'name', 'ART_NAME'),
artistID: getPropertyWithFallback(artist, 'id', 'ART_ID'),
artistName: getPropertyWithFallback(artist, 'name', 'ART_NAME'),
artistPictureMedium:
getProperty(artist, 'picture_medium') ||
getPropertyWithFallback(artist, 'picture_medium') ||
`https://e-cdns-images.dzcdn.net/images/artist/${artist.ART_PICTURE}/156x156-000000-80-0-0.jpg`,
artistLink: getProperty(artist, 'link') || `https://deezer.com/artist/${artist.ART_ID}`,
artistLink: getPropertyWithFallback(artist, 'link') || `https://deezer.com/artist/${artist.ART_ID}`,
// TODO Fix
artistAlbumsNumber: getProperty(artist, 'nb_album', 'NB_FAN')
artistAlbumsNumber: getPropertyWithFallback(artist, 'nb_album', 'NB_FAN')
}
}
export function formatPlaylist(playlist) {
return {
/* Playlist */
playlistID: getProperty(playlist, 'id', 'PLAYLIST_ID'),
playlistTitle: getProperty(playlist, 'title', 'TITLE'),
playlistID: getPropertyWithFallback(playlist, 'id', 'PLAYLIST_ID'),
playlistTitle: getPropertyWithFallback(playlist, 'title', 'TITLE'),
playlistPictureMedium:
getProperty(playlist, 'picture_medium') ||
getPropertyWithFallback(playlist, 'picture_medium') ||
`https://e-cdns-images.dzcdn.net/images/${playlist.PICTURE_TYPE}/${
playlist.PLAYLIST_PICTURE
}/156x156-000000-80-0-0.jpg`,
playlistLink: getProperty(playlist, 'link') || `https://deezer.com/playlist/${playlist.PLAYLIST_ID}`,
playlistTracksNumber: getProperty(playlist, 'nb_tracks', 'NB_SONG'),
playlistLink: getPropertyWithFallback(playlist, 'link') || `https://deezer.com/playlist/${playlist.PLAYLIST_ID}`,
playlistTracksNumber: getPropertyWithFallback(playlist, 'nb_tracks', 'NB_SONG'),
/* Artist */
artistName: getProperty(playlist, 'user.name')
artistName: getPropertyWithFallback(playlist, 'user.name')
}
}

19
src/data/standardize.js Normal file
View File

@@ -0,0 +1,19 @@
export function standardizeData(rawObj, formatFunc) {
if (!rawObj.hasLoaded) {
return null
} else {
const { data: rawData } = rawObj
const formattedData = []
for (const dataElement of rawData) {
let formatted = formatFunc(dataElement)
formattedData.push(formatted)
}
return {
data: formattedData,
hasLoaded: rawObj.hasLoaded
}
}
}