evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: setup charts with rest api

Browse Source
This commit is contained in:
Roberto Tonino 2021-03-12 20:01:19 +01:00
parent a685cbbf66
commit 236bfbb77e
3 changed files with 46490 additions and 4664 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51056
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

69
src/components/pages/Charts.vue
View File

@ -6,38 +6,38 @@
<div class="release-grid">
<div
v-for="release in countries"
role="button"
:aria-label="release.title"
class="w-40 h-40 release clickable"
@click="getTrackList"
:data-title="release.title"
:data-id="release.id"
:key="release.id"
:aria-label="release.title"
:data-id="release.id"
:data-title="release.title"
class="w-40 h-40 release clickable"
role="button"
@click="getTrackList"
>
<img class="w-full rounded coverart" :src="release.picture_medium" />
<img :src="release.picture_medium" class="w-full rounded coverart" />
</div>
</div>
</div>
<div v-else>
<button class="btn btn-primary" @click="onChangeCountry">{{ $t('charts.changeCountry') }}</button>
<button class="btn btn-primary" @click.stop="addToQueue" :data-link="'https://www.deezer.com/playlist/' + id">
<button :data-link="'https://www.deezer.com/playlist/' + id" class="btn btn-primary" @click.stop="addToQueue">
{{ $t('charts.download') }}
</button>
<table class="table table--charts">
<tbody>
<tr v-for="track in chart" class="track_row">
<td class="p-3 text-center cursor-default" :class="{ first: track.position === 1 }">
<td :class="{ first: track.position === 1 }" class="p-3 text-center cursor-default">
{{ track.position }}
</td>
<td class="table__icon table__icon--big">
<span
@click="playPausePreview"
class="relative inline-block rounded cursor-pointer"
:data-preview="track.preview"
class="relative inline-block rounded cursor-pointer"
@click="playPausePreview"
>
<PreviewControls v-if="track.preview" />
<img class="rounded coverart" :src="track.album.cover_small" />
<img :src="track.album.cover_small" class="rounded coverart" />
</span>
</td>
<td class="table__cell--large">
@ -47,16 +47,16 @@
}}
</td>
<router-link
tag="td"
class="table__cell table__cell--medium table__cell--center clickable"
:to="{ name: 'Artist', params: { id: track.artist.id } }"
class="table__cell table__cell--medium table__cell--center clickable"
tag="td"
>
{{ track.artist.name }}
</router-link>
<router-link
tag="td"
class="table__cell--medium table__cell--center clickable"
:to="{ name: 'Album', params: { id: track.album.id } }"
class="table__cell--medium table__cell--center clickable"
tag="td"
>
{{ track.album.title }}
</router-link>
@ -64,15 +64,15 @@
{{ convertDuration(track.duration) }}
</td>
<td
class="cursor-pointer group"
@click.stop="addToQueue"
:data-link="track.link"
role="button"
aria-label="download"
class="cursor-pointer group"
role="button"
@click.stop="addToQueue"
>
<i
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
:title="$t('globals.download_hint')"
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
>
get_app
</i>
@ -85,14 +85,14 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { socket } from '@/utils/socket'
import { sendAddToQueue } from '@/utils/downloads'
import { convertDuration } from '@/utils/utils'
import { getChartsData } from '@/data/charts'
import { getChartsData, getChartTracks } from '@/data/charts'
import PreviewControls from '@components/globals/PreviewControls.vue'
import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
import { fetchData } from '@/utils/api'
export default {
components: {
@ -116,12 +116,12 @@ export default {
}
},
async created() {
socket.on('setChartTracks', this.setTracklist)
this.$on('hook:destroyed', () => {
socket.off('setChartTracks')
})
// socket.on('setChartTracks', this.setTracklist)
// this.$on('hook:destroyed', () => {
// socket.off('setChartTracks')
// })
let chartsData = await getChartsData()
let { data: chartsData } = await getChartsData()
let worldwideChart
chartsData = chartsData.filter(item => {
@ -147,17 +147,13 @@ export default {
const {
currentTarget: {
dataset: { title }
},
currentTarget: {
dataset: { id }
dataset: { title, id }
}
} = event
this.country = title
localStorage.setItem('chart', this.country)
this.id = id
socket.emit('getChartTracks', this.id)
},
setTracklist(data) {
this.chart = data
@ -185,6 +181,15 @@ export default {
localStorage.setItem('chart', this.country)
}
}
},
watch: {
id(newId) {
const isActualChart = newId !== 0
if (isActualChart) {
getChartTracks(newId).then(response => this.setTracklist(response.result))
}
}
}
}
</script>

25
src/data/charts.js
View File

@ -1,24 +1,9 @@
import { socket } from '@/utils/socket'
import { fetchData } from '@/utils/api'
let chartsData = {}
let cached = false
export function getChartsData() {
if (cached) {
return chartsData
} else {
socket.emit('get_charts_data')
fetchData('getCharts')
return new Promise((resolve, reject) => {
socket.on('init_charts', data => {
chartsData = data
cached = true
socket.off('init_charts')
resolve(data)
})
})
}
return fetchData('getCharts')
}
export function getChartTracks(chartId) {
return fetchData('getChartTracks', { id: chartId })
}