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)
if (connectResponse.autologin) {
console.info('Autologin successful')
console.info('Autologin')
let arl = localStorage.getItem('arl')
const accountNum = localStorage.getItem('accountNum')
@ -111,7 +111,6 @@ socket.on('message', function (msg) {
})
function loggedIn(data) {
console.log({ data })
const { status, user } = data
switch (status) {

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

@ -3,13 +3,13 @@
<h1 class="mb-8 text-5xl">
{{ $t('favorites.title') }}
<div
@click="refreshFavorites"
class="inline-block clickable"
ref="reloadButton"
role="button"
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>
</h1>
@ -19,7 +19,7 @@
</BaseTab>
</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()) }) }}
</button>
@ -27,10 +27,10 @@
<div v-if="playlists.length == 0">
<h1>{{ $t('favorites.noPlaylists') }}</h1>
</div>
<div class="release-grid" v-if="playlists.length > 0 || spotifyPlaylists > 0">
<div class="release" v-for="release in playlists" :key="release.id">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Playlist', params: { id: release.id } }">
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<div v-if="playlists.length > 0 || spotifyPlaylists > 0" class="release-grid">
<div v-for="release in playlists" :key="release.id" class="release">
<router-link :to="{ name: 'Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
</router-link>
@ -44,9 +44,9 @@
</p>
</div>
<div class="release" v-for="release in spotifyPlaylists" :key="release.id">
<router-link tag="div" class="cursor-pointer" :to="{ name: 'Spotify Playlist', params: { id: release.id } }">
<CoverContainer is-rounded :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
<div v-for="release in spotifyPlaylists" :key="release.id" class="release">
<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" tag="div">
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
<p class="primary-text">{{ release.title }}</p>
</router-link>
@ -66,15 +66,15 @@
<div v-if="albums.length == 0">
<h1>{{ $t('favorites.noAlbums') }}</h1>
</div>
<div class="release-grid" v-if="albums.length > 0">
<div v-if="albums.length > 0" class="release-grid">
<router-link
tag="div"
class="release clickable"
v-for="release in albums"
:key="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="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
</router-link>
@ -85,15 +85,15 @@
<div v-if="artists.length == 0">
<h1>{{ $t('favorites.noArtists') }}</h1>
</div>
<div class="release-grid" v-if="artists.length > 0">
<div v-if="artists.length > 0" class="release-grid">
<router-link
tag="div"
class="release clickable"
v-for="release in artists"
:key="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>
</router-link>
</div>
@ -105,17 +105,17 @@
</div>
<table v-if="tracks.length > 0" class="table">
<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 }}
</td>
<td>
<span
:data-preview="track.preview"
class="relative inline-block rounded cursor-pointer"
@click="playPausePreview"
:data-preview="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>
</td>
<td class="table__cell--large">
@ -125,16 +125,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>
@ -142,16 +142,16 @@
{{ 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"
>
<div class="table__cell-content table__cell-content--vertical-center">
<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>
@ -164,14 +164,14 @@
</template>
<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 CoverContainer from '@components/globals/CoverContainer.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 { toast } from '@/utils/toasts'
import { useFavorites } from '@/use/favorites'

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

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

2
src/data/charts.js
View File

@ -1,4 +1,5 @@
import { socket } from '@/utils/socket'
import { fetchData } from '@/utils/api'
let chartsData = {}
let cached = false
@ -8,6 +9,7 @@ export function getChartsData() {
return chartsData
} else {
socket.emit('get_charts_data')
fetchData('getCharts')
return new Promise((resolve, reject) => {
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 Settings from '@components/pages/Settings.vue'
import Tracklist from '@components/pages/Tracklist.vue'
import { fetchData } from '@/utils/api'
Vue.use(VueRouter)
@ -159,6 +160,7 @@ router.beforeEach((to, from, next) => {
if (getTracklistParams) {
socket.emit('getTracklist', getTracklistParams)
fetchData('getTracklist', getTracklistParams)
}
next()

12
src/use/favorites.js
View File

@ -2,6 +2,7 @@ import { ref } from '@vue/composition-api'
import store from '@/store'
import { socket } from '@/utils/socket'
import { fetchData } from '@/utils/api'
const favoriteArtists = ref([])
const favoriteAlbums = ref([])
@ -15,15 +16,19 @@ if (store.getters.isLoggedIn) {
refreshFavorites({ isInitial: true })
}
function refreshFavorites({ isInitial = false }) {
async function refreshFavorites({ isInitial = false }) {
if (!isInitial) {
isRefreshingFavorites.value = true
}
socket.emit('get_favorites_data')
const favorites = await fetchData('getFavorites')
setAllFavorites(favorites)
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
// isRefreshingFavorites.value = false
})
socket.on('init_favorites', data => {
setAllFavorites(data)
isRefreshingFavorites.value = false