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

wip: setup favorites and autologin with rest api

Browse Source
This commit is contained in:
Roberto Tonino 2021-03-01 23:09:14 +01:00
parent 079fd8ad64
commit b0efec811e
7 changed files with 69 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

3
src/app.js
View File

@ -38,7 +38,7 @@ async function startApp() {
store.dispatch('setAppInfo', connectResponse.update) store.dispatch('setAppInfo', connectResponse.update)
if (connectResponse.autologin) { if (connectResponse.autologin) {
console.info('Autologin successful') console.info('Autologin')
let arl = localStorage.getItem('arl') let arl = localStorage.getItem('arl')
const accountNum = localStorage.getItem('accountNum') const accountNum = localStorage.getItem('accountNum')
@ -111,7 +111,6 @@ socket.on('message', function (msg) {
}) })
function loggedIn(data) { function loggedIn(data) {
console.log({ data })
const { status, user } = data const { status, user } = data
switch (status) { switch (status) {

68
src/components/pages/Favorites.vue
View File

@ -3,13 +3,13 @@
<h1 class="mb-8 text-5xl"> <h1 class="mb-8 text-5xl">
{{ $t('favorites.title') }} {{ $t('favorites.title') }}
<div <div
@click="refreshFavorites"
class="inline-block clickable"
ref="reloadButton" ref="reloadButton"
role="button"
aria-label="reload" aria-label="reload"
class="inline-block clickable"
role="button"
@click="refreshFavorites"
> >
<i class="material-icons" :class="{ spin: isRefreshingFavorites }">sync</i> <i :class="{ spin: isRefreshingFavorites }" class="material-icons">sync</i>
</div> </div>
</h1> </h1>
@ -19,7 +19,7 @@
</BaseTab> </BaseTab>
</BaseTabs> </BaseTabs>
<button class="btn btn-primary" v-if="!activeTabEmpty" style="margin-bottom: 2rem" @click="downloadAllOfType"> <button v-if="!activeTabEmpty" class="btn btn-primary" style="margin-bottom: 2rem" @click="downloadAllOfType">
{{ $t('globals.download', { thing: $tc(`globals.listTabs.${activeTab}N`, getTabLength()) }) }} {{ $t('globals.download', { thing: $tc(`globals.listTabs.${activeTab}N`, getTabLength()) }) }}
</button> </button>
@ -27,10 +27,10 @@
<div v-if="playlists.length == 0"> <div v-if="playlists.length == 0">
<h1>{{ $t('favorites.noPlaylists') }}</h1> <h1>{{ $t('favorites.noPlaylists') }}</h1>
</div> </div>
<div class="release-grid" v-if="playlists.length > 0 || spotifyPlaylists > 0"> <div v-if="playlists.length > 0 || spotifyPlaylists > 0" class="release-grid">
<div class="release" v-for="release in playlists" :key="release.id"> <div v-for="release in playlists" :key="release.id" class="release">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }"> <router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" /> <CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
</router-link> </router-link>
@ -44,9 +44,9 @@
</p> </p>
</div> </div>
<div class="release" v-for="release in spotifyPlaylists" :key="release.id"> <div v-for="release in spotifyPlaylists" :key="release.id" class="release">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Spotify Playlist', params: { id: release.id } }"> <router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" /> <CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
</router-link> </router-link>
@ -66,15 +66,15 @@
<div v-if="albums.length == 0"> <div v-if="albums.length == 0">
<h1>{{ $t('favorites.noAlbums') }}</h1> <h1>{{ $t('favorites.noAlbums') }}</h1>
</div> </div>
<div class="release-grid" v-if="albums.length > 0"> <div v-if="albums.length > 0" class="release-grid">
<router-link <router-link
tag="div"
class="release clickable"
v-for="release in albums" v-for="release in albums"
:key="release.id" :key="release.id"
:to="{ name: 'Album', params: { id: release.id } }" :to="{ name: 'Album', params: { id: release.id } }"
class="release clickable"
tag="div"
> >
<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" /> <CoverContainer :cover="release.cover_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p> <p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</router-link> </router-link>
@ -85,15 +85,15 @@
<div v-if="artists.length == 0"> <div v-if="artists.length == 0">
<h1>{{ $t('favorites.noArtists') }}</h1> <h1>{{ $t('favorites.noArtists') }}</h1>
</div> </div>
<div class="release-grid" v-if="artists.length > 0"> <div v-if="artists.length > 0" class="release-grid">
<router-link <router-link
tag="div"
class="release clickable"
v-for="release in artists" v-for="release in artists"
:key="release.id" :key="release.id"
:to="{ name: 'Artist', params: { id: release.id } }" :to="{ name: 'Artist', params: { id: release.id } }"
class="release clickable"
tag="div"
> >
<CoverContainer is-circle :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" /> <CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
<p class="primary-text">{{ release.name }}</p> <p class="primary-text">{{ release.name }}</p>
</router-link> </router-link>
</div> </div>
@ -105,17 +105,17 @@
</div> </div>
<table v-if="tracks.length > 0" class="table"> <table v-if="tracks.length > 0" class="table">
<tr v-for="track in tracks" class="track_row"> <tr v-for="track in tracks" 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 }} {{ track.position }}
</td> </td>
<td> <td>
<span <span
:data-preview="track.preview"
class="relative inline-block rounded cursor-pointer" class="relative inline-block rounded cursor-pointer"
@click="playPausePreview" @click="playPausePreview"
:data-preview="track.preview"
> >
<PreviewControls v-if="track.preview" /> <PreviewControls v-if="track.preview" />
<img class="rounded coverart" :src="track.album.cover_small" /> <img :src="track.album.cover_small" class="rounded coverart" />
</span> </span>
</td> </td>
<td class="table__cell--large"> <td class="table__cell--large">
@ -125,16 +125,16 @@
}} }}
</td> </td>
<router-link <router-link
tag="td"
class="table__cell table__cell--medium table__cell--center clickable"
:to="{ name: 'Artist', params: { id: track.artist.id } }" :to="{ name: 'Artist', params: { id: track.artist.id } }"
class="table__cell table__cell--medium table__cell--center clickable"
tag="td"
> >
{{ track.artist.name }} {{ track.artist.name }}
</router-link> </router-link>
<router-link <router-link
tag="td"
class="table__cell--medium table__cell--center clickable"
:to="{ name: 'Album', params: { id: track.album.id } }" :to="{ name: 'Album', params: { id: track.album.id } }"
class="table__cell--medium table__cell--center clickable"
tag="td"
> >
{{ track.album.title }} {{ track.album.title }}
</router-link> </router-link>
@ -142,16 +142,16 @@
{{ convertDuration(track.duration) }} {{ convertDuration(track.duration) }}
</td> </td>
<td <td
class="cursor-pointer group"
@click.stop="addToQueue"
:data-link="track.link" :data-link="track.link"
role="button"
aria-label="download" aria-label="download"
class="cursor-pointer group"
role="button"
@click.stop="addToQueue"
> >
<div class="table__cell-content table__cell-content--vertical-center"> <div class="table__cell-content table__cell-content--vertical-center">
<i <i
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
:title="$t('globals.download_hint')" :title="$t('globals.download_hint')"
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
> >
get_app get_app
</i> </i>
@ -164,14 +164,14 @@
</template> </template>
<script> <script>
import { defineComponent, onMounted, reactive, toRefs, watchEffect, ref, computed, watch } from '@vue/composition-api' import { computed, defineComponent, reactive, toRefs, watch } from '@vue/composition-api'
import PreviewControls from '@components/globals/PreviewControls.vue' import PreviewControls from '@components/globals/PreviewControls.vue'
import CoverContainer from '@components/globals/CoverContainer.vue' import CoverContainer from '@components/globals/CoverContainer.vue'
import { playPausePreview } from '@components/globals/TheTrackPreview.vue' import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
import { BaseTabs, BaseTab } from '@components/globals/BaseTabs' import { BaseTab, BaseTabs } from '@components/globals/BaseTabs'
import { sendAddToQueue, aggregateDownloadLinks } from '@/utils/downloads' import { aggregateDownloadLinks, sendAddToQueue } from '@/utils/downloads'
import { convertDuration } from '@/utils/utils' import { convertDuration } from '@/utils/utils'
import { toast } from '@/utils/toasts' import { toast } from '@/utils/toasts'
import { useFavorites } from '@/use/favorites' import { useFavorites } from '@/use/favorites'

16
src/components/pages/Settings.vue
View File

@ -783,6 +783,7 @@ import { copyToClipboard } from '@/utils/utils'
import BaseAccordion from '@/components/globals/BaseAccordion.vue' import BaseAccordion from '@/components/globals/BaseAccordion.vue'
import TemplateVariablesList from '@components/settings/TemplateVariablesList.vue' import TemplateVariablesList from '@components/settings/TemplateVariablesList.vue'
import { fetchData, sendToServer } from '@/utils/api'
export default { export default {
components: { components: {
@ -825,7 +826,7 @@ export default {
get() { get() {
return this.previewVolume return this.previewVolume
}, },
set: debounce(function(value) { set: debounce(function (value) {
this.setPreviewVolume(value) this.setPreviewVolume(value)
}, 20) }, 20)
}, },
@ -949,16 +950,17 @@ export default {
this.lastCredentials = JSON.parse(JSON.stringify(credentials)) this.lastCredentials = JSON.parse(JSON.stringify(credentials))
this.spotifyFeatures = JSON.parse(JSON.stringify(credentials)) this.spotifyFeatures = JSON.parse(JSON.stringify(credentials))
}, },
loggedInViaDeezer(arl) { async loggedInViaDeezer(arl) {
this.dispatchARL({ arl }) this.dispatchARL({ arl })
socket.emit('login', arl, true, this.accountNum)
// this.login() // this.login()
// const res = await fetchData('login', { arl, force: true, child: this.accountNum })
}, },
login() { async login() {
let newArl = this.$refs.loginInput.value.trim() let newArl = this.$refs.loginInput.value.trim()
if (newArl && newArl !== this.arl) { if (newArl && newArl !== this.arl) {
socket.emit('login', newArl, true, this.accountNum) const res = await fetchData('login', { arl: newArl, force: true, child: this.accountNum })
this.loggedInViaDeezer(res.arl)
} }
}, },
appLogin(e) { appLogin(e) {
@ -969,9 +971,7 @@ export default {
}, },
accountChanged(user, accountNum) { accountChanged(user, accountNum) {
this.$refs.username.innerText = user.name this.$refs.username.innerText = user.name
this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${ this.$refs.userpicture.src = `https://e-cdns-images.dzcdn.net/images/user/${user.picture}/125x125-000000-80-0-0.jpg`
user.picture
}/125x125-000000-80-0-0.jpg`
this.accountNum = accountNum this.accountNum = accountNum
localStorage.setItem('accountNum', this.accountNum) localStorage.setItem('accountNum', this.accountNum)

2
src/data/charts.js
View File

@ -1,4 +1,5 @@
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'
import { fetchData } from '@/utils/api'
let chartsData = {} let chartsData = {}
let cached = false let cached = false
@ -8,6 +9,7 @@ export function getChartsData() {
return chartsData return chartsData
} else { } else {
socket.emit('get_charts_data') socket.emit('get_charts_data')
fetchData('getCharts')
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
socket.on('init_charts', data => { socket.on('init_charts', data => {

2
src/router.js
View File

@ -15,6 +15,7 @@ import LinkAnalyzer from '@components/pages/LinkAnalyzer.vue'
import Search from '@components/pages/Search.vue' import Search from '@components/pages/Search.vue'
import Settings from '@components/pages/Settings.vue' import Settings from '@components/pages/Settings.vue'
import Tracklist from '@components/pages/Tracklist.vue' import Tracklist from '@components/pages/Tracklist.vue'
import { fetchData } from '@/utils/api'
Vue.use(VueRouter) Vue.use(VueRouter)
@ -159,6 +160,7 @@ router.beforeEach((to, from, next) => {
if (getTracklistParams) { if (getTracklistParams) {
socket.emit('getTracklist', getTracklistParams) socket.emit('getTracklist', getTracklistParams)
fetchData('getTracklist', getTracklistParams)
} }
next() next()

12
src/use/favorites.js
View File

@ -2,6 +2,7 @@ import { ref } from '@vue/composition-api'
import store from '@/store' import store from '@/store'
import { socket } from '@/utils/socket' import { socket } from '@/utils/socket'
import { fetchData } from '@/utils/api'
const favoriteArtists = ref([]) const favoriteArtists = ref([])
const favoriteAlbums = ref([]) const favoriteAlbums = ref([])
@ -15,15 +16,19 @@ if (store.getters.isLoggedIn) {
refreshFavorites({ isInitial: true }) refreshFavorites({ isInitial: true })
} }
function refreshFavorites({ isInitial = false }) { async function refreshFavorites({ isInitial = false }) {
if (!isInitial) { if (!isInitial) {
isRefreshingFavorites.value = true isRefreshingFavorites.value = true
} }
socket.emit('get_favorites_data') const favorites = await fetchData('getFavorites')
setAllFavorites(favorites)
if (store.getters.isLoggedWithSpotify) { if (store.getters.isLoggedWithSpotify) {
socket.emit('update_userSpotifyPlaylists', store.getters.getSpotifyUser.id) // TODO
const res = await fetchData('getUserSpotifyPlaylists', { spotifyUser: store.getters.getSpotifyUser.id })
// socket.emit('update_userSpotifyPlaylists', store.getters.getSpotifyUser.id)
} }
} }
@ -54,6 +59,7 @@ socket.on('updated_userFavorites', data => {
// therefore isRefreshingFavorites is never set to true // therefore isRefreshingFavorites is never set to true
// isRefreshingFavorites.value = false // isRefreshingFavorites.value = false
}) })
socket.on('init_favorites', data => { socket.on('init_favorites', data => {
setAllFavorites(data) setAllFavorites(data)
isRefreshingFavorites.value = false isRefreshingFavorites.value = false