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
parent
2d7ec9ee6b
commit
d04439857a
File diff suppressed because one or more lines are too long
|
|
@ -1,43 +1,36 @@
|
|||
<template>
|
||||
<div id="artist_tab" class="relative image-header">
|
||||
<header
|
||||
class="flex items-center"
|
||||
:style="{
|
||||
'background-image':
|
||||
'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\'' + image + '\')'
|
||||
}"
|
||||
>
|
||||
<h1 class="m-0">{{ title }}</h1>
|
||||
<div class="relative image-header">
|
||||
<header class="flex items-center" :style="headerStyle">
|
||||
<h1 class="m-0">{{ artistName }}</h1>
|
||||
|
||||
<div
|
||||
role="button"
|
||||
aria-label="download"
|
||||
@click.stop="addToQueue"
|
||||
:data-link="link"
|
||||
class="grid w-16 h-16 ml-auto rounded-full cursor-pointer bg-primary text-grayscale-870 place-items-center"
|
||||
@click.stop="sendAddToQueue(downloadLink)"
|
||||
aria-label="download"
|
||||
role="button"
|
||||
>
|
||||
<i class="text-4xl material-icons" :title="$t('globals.download_hint')">get_app</i>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="my-4">
|
||||
<button
|
||||
v-for="(item, name) in body"
|
||||
<ul class="my-8 section-tabs">
|
||||
<li
|
||||
v-for="(item, name) in artistReleases"
|
||||
:key="name"
|
||||
class="mr-2 btn bg-background-main"
|
||||
:class="{ 'btn-primary': name === currentTab }"
|
||||
:href="'#artist_' + name"
|
||||
class="section-tabs__tab"
|
||||
@click="changeTab(name)"
|
||||
:class="{ active: currentTab === name }"
|
||||
>
|
||||
{{ $tc(`globals.listTabs.${name}`, 2) }}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="data in head"
|
||||
:key="data.title"
|
||||
@click="data.sortKey ? sortBy(data.sortKey) : null"
|
||||
:style="{ width: data.width ? data.width : 'auto' }"
|
||||
:class="{
|
||||
|
|
@ -53,22 +46,24 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="release in showTable" :key="release.id">
|
||||
<router-link tag="td" class="flex items-center clickable" :to="{ name: 'Album', params: { id: release.id } }">
|
||||
<tr v-for="release in showTable">
|
||||
<router-link
|
||||
tag="td"
|
||||
class="flex items-center clickable"
|
||||
:to="{ name: 'Album', params: { id: release.releaseID } }"
|
||||
>
|
||||
<img
|
||||
class="rounded coverart"
|
||||
:src="release.cover_small"
|
||||
:src="release.releaseCover"
|
||||
style="margin-right: 16px; width: 56px; height: 56px"
|
||||
/>
|
||||
<i v-if="release.explicit_lyrics" class="material-icons explicit-icon"> explicit </i>
|
||||
{{ release.title }}
|
||||
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color: #ff7300">
|
||||
fiber_new
|
||||
</i>
|
||||
<i v-if="release.isReleaseExplicit" class="material-icons explicit-icon">explicit</i>
|
||||
{{ release.releaseTitle }}
|
||||
<i v-if="checkNewRelease(release.releaseDate)" class="material-icons" style="color: #ff7300">fiber_new</i>
|
||||
</router-link>
|
||||
<td>{{ release.release_date }}</td>
|
||||
<td>{{ release.nb_song }}</td>
|
||||
<td @click.stop="addToQueue" :data-link="release.link" class="clickable">
|
||||
<td>{{ release.releaseDate }}</td>
|
||||
<td>{{ release.releaseTracksNumber }}</td>
|
||||
<td @click.stop="sendAddToQueue(release.releaseLink)" class="clickable">
|
||||
<i class="material-icons" :title="$t('globals.download_hint')"> file_download </i>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -78,65 +73,99 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { isEmpty, orderBy } from 'lodash-es'
|
||||
import { orderBy } from 'lodash-es'
|
||||
|
||||
import { socket } from '@/utils/socket'
|
||||
import Downloads from '@/utils/downloads'
|
||||
import { sendAddToQueue } from '@/utils/downloads'
|
||||
import EventBus from '@/utils/EventBus'
|
||||
import { formatArtistData } from '@/data/artist'
|
||||
import { standardizeData } from '@/data/standardize'
|
||||
import { ref, reactive, computed, onMounted, toRefs, onDeactivated } from '@vue/composition-api'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
setup() {
|
||||
const state = reactive({
|
||||
currentTab: '',
|
||||
sortKey: 'release_date',
|
||||
sortKey: 'releaseDate',
|
||||
sortOrder: 'desc',
|
||||
title: '',
|
||||
image: '',
|
||||
type: '',
|
||||
link: '',
|
||||
head: null,
|
||||
body: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showTable() {
|
||||
if (this.body) {
|
||||
if (this.sortKey == 'nb_song')
|
||||
return orderBy(
|
||||
this.body[this.currentTab],
|
||||
function (o) {
|
||||
return new Number(o.nb_song)
|
||||
},
|
||||
this.sortOrder
|
||||
)
|
||||
else return orderBy(this.body[this.currentTab], this.sortKey, this.sortOrder)
|
||||
} else return []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
socket.on('show_artist', this.showArtist)
|
||||
artistReleases: {},
|
||||
artistID: '',
|
||||
artistName: '',
|
||||
artistPicture: ''
|
||||
})
|
||||
|
||||
EventBus.$on('artistTab:updateSelected', this.updateSelected)
|
||||
EventBus.$on('artistTab:changeTab', this.changeTab)
|
||||
const currentRelease = computed(() => state.artistReleases[state.currentTab])
|
||||
|
||||
const setupData = data => {
|
||||
const {
|
||||
data: [{ artistID, artistName, artistPictureXL, artistReleases }]
|
||||
} = standardizeData({ data: [data], hasLoaded: true }, formatArtistData)
|
||||
|
||||
Object.assign(state, {
|
||||
artistID,
|
||||
artistName,
|
||||
artistPicture: artistPictureXL,
|
||||
artistReleases
|
||||
})
|
||||
|
||||
// ? Is it not granted that it's always 'all' ?
|
||||
state.currentTab = Object.keys(artistReleases)[0]
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
state.currentTab = ''
|
||||
state.sortKey = 'releaseDate'
|
||||
state.sortOrder = 'desc'
|
||||
}
|
||||
|
||||
onDeactivated(reset)
|
||||
|
||||
onMounted(() => {
|
||||
socket.on('show_artist', setupData)
|
||||
})
|
||||
|
||||
const showTable = computed(() => {
|
||||
if (Object.keys(state.artistReleases).length !== 0) {
|
||||
let sortKey = state.sortKey
|
||||
|
||||
if (sortKey == 'releaseTracksNumber') {
|
||||
sortKey = o => new Number(o.releaseTracksNumber)
|
||||
}
|
||||
|
||||
return orderBy(currentRelease.value, sortKey, state.sortOrder)
|
||||
}
|
||||
|
||||
return []
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
downloadLink: computed(() => `https://www.deezer.com/artist/${state.artistID}`),
|
||||
headerStyle: computed(() => ({
|
||||
backgroundImage: `linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(${state.artistPicture})`
|
||||
})),
|
||||
showTable,
|
||||
sendAddToQueue,
|
||||
currentRelease
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const $t = this.$t.bind(this)
|
||||
const $tc = this.$tc.bind(this)
|
||||
|
||||
return {
|
||||
head: [
|
||||
{ title: $tc('globals.listTabs.title', 1), sortKey: 'releaseTitle' },
|
||||
{ title: $t('globals.listTabs.releaseDate'), sortKey: 'releaseDate' },
|
||||
{ title: $tc('globals.listTabs.track', 2), sortKey: 'releaseTracksNumber' },
|
||||
{ title: '', width: '32px' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.title = 'Loading...'
|
||||
this.image = ''
|
||||
this.type = ''
|
||||
this.currentTab = ''
|
||||
this.sortKey = 'release_date'
|
||||
this.sortOrder = 'desc'
|
||||
this.link = ''
|
||||
this.head = []
|
||||
this.body = null
|
||||
},
|
||||
addToQueue(e) {
|
||||
e.stopPropagation()
|
||||
Downloads.sendAddToQueue(e.currentTarget.dataset.link)
|
||||
},
|
||||
sortBy(key) {
|
||||
if (key == this.sortKey) {
|
||||
this.sortOrder = this.sortOrder == 'asc' ? 'desc' : 'asc'
|
||||
if (key === this.sortKey) {
|
||||
this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
|
||||
} else {
|
||||
this.sortKey = key
|
||||
this.sortOrder = 'asc'
|
||||
|
|
@ -145,9 +174,6 @@ export default {
|
|||
changeTab(tab) {
|
||||
this.currentTab = tab
|
||||
},
|
||||
updateSelected() {
|
||||
// Last tab opened logic
|
||||
},
|
||||
checkNewRelease(date) {
|
||||
let g1 = new Date()
|
||||
let g2 = new Date(date)
|
||||
|
|
@ -155,30 +181,6 @@ export default {
|
|||
g1.setHours(0, 0, 0, 0)
|
||||
|
||||
return g1.getTime() <= g2.getTime()
|
||||
},
|
||||
showArtist(data) {
|
||||
this.reset()
|
||||
|
||||
const { name, picture_xl, id, releases } = data
|
||||
|
||||
this.title = name
|
||||
this.image = picture_xl
|
||||
this.type = 'Artist'
|
||||
this.link = `https://www.deezer.com/artist/${id}`
|
||||
if (this.currentTab === '') this.currentTab = Object.keys(releases)[0]
|
||||
this.sortKey = 'release_date'
|
||||
this.sortOrder = 'desc'
|
||||
this.head = [
|
||||
{ title: this.$tc('globals.listTabs.title', 1), sortKey: 'title' },
|
||||
{ title: this.$t('globals.listTabs.releaseDate'), sortKey: 'release_date' },
|
||||
{ title: this.$tc('globals.listTabs.track', 2), sortKey: 'nb_song' },
|
||||
{ title: '', width: '32px' }
|
||||
]
|
||||
if (isEmpty(releases)) {
|
||||
this.body = null
|
||||
} else {
|
||||
this.body = releases
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@ import { sendAddToQueue } from '@/utils/downloads'
|
|||
import { numberWithDots, convertDuration } from '@/utils/utils'
|
||||
import EventBus from '@/utils/EventBus'
|
||||
|
||||
import { formatSearchResults, formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
|
||||
import { formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
|
||||
import { standardizeData } from '@/data/standardize'
|
||||
|
||||
const resetObj = { data: [], next: 0, total: 0, hasLoaded: false }
|
||||
|
||||
|
|
@ -172,7 +173,7 @@ export default {
|
|||
return this.results.allTab
|
||||
}
|
||||
|
||||
return formatSearchResults(this.results[this.currentTab.viewInfo], this.currentTab.formatFunc)
|
||||
return standardizeData(this.results[this.currentTab.viewInfo], this.currentTab.formatFunc)
|
||||
},
|
||||
changeSearchTab(tabName) {
|
||||
tabName = tabName.toLowerCase()
|
||||
|
|
|
|||
|
|
@ -31,28 +31,28 @@
|
|||
|
||||
<ResultsTracks
|
||||
v-else-if="section === 'TRACK'"
|
||||
:viewInfo="formatSearchResults(viewInfo.TRACK, formatSingleTrack)"
|
||||
:viewInfo="standardizeData(viewInfo.TRACK, formatSingleTrack)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<ResultsAlbums
|
||||
v-else-if="section == 'ALBUM'"
|
||||
:viewInfo="formatSearchResults(viewInfo.ALBUM, formatAlbums)"
|
||||
:viewInfo="standardizeData(viewInfo.ALBUM, formatAlbums)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<ResultsPlaylists
|
||||
v-else-if="section == 'PLAYLIST'"
|
||||
:viewInfo="formatSearchResults(viewInfo.PLAYLIST, formatPlaylist)"
|
||||
:viewInfo="standardizeData(viewInfo.PLAYLIST, formatPlaylist)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
||||
<ResultsArtists
|
||||
v-else-if="section === 'ARTIST'"
|
||||
:viewInfo="formatSearchResults(viewInfo.ARTIST, formatArtist)"
|
||||
:viewInfo="standardizeData(viewInfo.ARTIST, formatArtist)"
|
||||
:itemsToShow="6"
|
||||
@add-to-queue="$emit('add-to-queue', $event)"
|
||||
/>
|
||||
|
|
@ -71,7 +71,8 @@ import ResultsAlbums from '@components/search/ResultsAlbums.vue'
|
|||
import ResultsArtists from '@components/search/ResultsArtists.vue'
|
||||
import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
|
||||
|
||||
import { formatSearchResults, formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
|
||||
import { formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
|
||||
import { standardizeData } from '@/data/standardize'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -105,7 +106,7 @@ export default {
|
|||
methods: {
|
||||
convertDuration,
|
||||
upperCaseFirstLowerCaseRest,
|
||||
formatSearchResults,
|
||||
standardizeData,
|
||||
formatSingleTrack,
|
||||
formatAlbums,
|
||||
formatArtist,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -96,7 +96,7 @@ export function copyToClipboard(text) {
|
|||
ghostInput.remove()
|
||||
}
|
||||
|
||||
export function getProperty(obj, ...props) {
|
||||
export function getPropertyWithFallback(obj, ...props) {
|
||||
for (const prop of props) {
|
||||
// Example: this.is.an.example
|
||||
let hasDotNotation = /\./.test(prop)
|
||||
|
|
|
|||
Loading…
Reference in New Issue