mirror of
https://bitbucket.org/walplanet/deemix-gui
synced 2026-01-15 08:12:52 -03:00
update loader
This commit is contained in:
Walid Saleh
@@ -1,145 +1,151 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div class="favorites">
|
||||
<h1 class="mb-8 text-5xl">
|
||||
{{ $t('favorites.title') }}
|
||||
<div ref="reloadButton" aria-label="reload" class="inline-block clickable" role="button" @click="refreshFavorites">
|
||||
<i :class="{ spin: isRefreshingFavorites }" class="material-icons">sync</i>
|
||||
<i :class="{ hidden: isRefreshingFavorites }" class="material-icons">sync</i>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<BaseLoadingPlaceholder v-if="isRefreshingFavorites" :text="$t('globals.loading')" :hidden="!isRefreshingFavorites"
|
||||
additional-classes="absolute top-0 left-0 w-screen h-screen bg-black bg-opacity-50 z-50" />
|
||||
<div class="relative">
|
||||
<BaseLoadingPlaceholder v-if="isRefreshingFavorites" :text="$t('globals.loading')"
|
||||
additional-classes="absolute top-0 left-0 w-full" />
|
||||
|
||||
<BaseTabs>
|
||||
<BaseTab v-for="tab in tabs" :key="tab" :class="{ active: activeTab === tab }" @click="activeTab = tab">
|
||||
{{ $tc(`globals.listTabs.${tab}`, 2) }}
|
||||
</BaseTab>
|
||||
</BaseTabs>
|
||||
<div v-else class="favorites__content">
|
||||
<BaseTabs>
|
||||
<BaseTab v-for="tab in tabs" :key="tab" :class="{ active: activeTab === tab }" @click="activeTab = tab">
|
||||
{{ $tc(`globals.listTabs.${tab}`, 2) }}
|
||||
</BaseTab>
|
||||
</BaseTabs>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<div v-show="activeTab === 'playlist'">
|
||||
<div v-if="playlists.length + spotifyPlaylists.length" 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" custom
|
||||
v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
<div v-show="activeTab === 'playlist'">
|
||||
<div v-if="playlists.length + spotifyPlaylists.length" 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" custom
|
||||
v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded
|
||||
@click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
|
||||
'globals.listTabs.trackN',
|
||||
release.nb_tracks
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
|
||||
'globals.listTabs.trackN',
|
||||
release.nb_tracks
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
<div v-for="release in spotifyPlaylists" :key="release.id" class="release">
|
||||
<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" custom
|
||||
v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded
|
||||
@click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
|
||||
'globals.listTabs.trackN',
|
||||
release.nb_tracks
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>{{ $t('favorites.noPlaylists') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="release in spotifyPlaylists" :key="release.id" class="release">
|
||||
<router-link :to="{ name: 'Spotify Playlist', params: { id: release.id } }" class="cursor-pointer" custom
|
||||
v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<CoverContainer :cover="release.picture_medium" :link="release.link" is-rounded @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.title }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
<div v-show="activeTab === 'album'">
|
||||
<div v-if="albums.length === 0">
|
||||
<h1>{{ $t('favorites.noAlbums') }}</h1>
|
||||
</div>
|
||||
<div v-if="albums.length > 0" class="release-grid">
|
||||
<router-link v-for="release in albums" :key="release.id" :to="{ name: 'Album', params: { id: release.id } }"
|
||||
class="release clickable" custom v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<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>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="secondary-text">
|
||||
{{
|
||||
`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
|
||||
'globals.listTabs.trackN',
|
||||
release.nb_tracks
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
<div v-show="activeTab === 'artist'">
|
||||
<div v-if="artists.length == 0">
|
||||
<h1>{{ $t('favorites.noArtists') }}</h1>
|
||||
</div>
|
||||
<div v-if="artists.length > 0" class="release-grid">
|
||||
<router-link v-for="release in artists" :key="release.id" :to="{ name: 'Artist', params: { id: release.id } }"
|
||||
class="release clickable" custom v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.name }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'track'">
|
||||
<div v-if="tracks.length == 0">
|
||||
<h1>{{ $t('favorites.noTracks') }}</h1>
|
||||
</div>
|
||||
<table v-if="tracks.length > 0" class="table">
|
||||
<tr v-for="track in tracks" class="track_row">
|
||||
<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">
|
||||
<PreviewControls v-if="track.preview" />
|
||||
<img :src="track.album.cover_small" class="rounded coverart" />
|
||||
</span>
|
||||
</td>
|
||||
<td class="table__cell--large">
|
||||
{{
|
||||
track.title +
|
||||
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
|
||||
}}
|
||||
</td>
|
||||
<router-link :to="{ name: 'Artist', params: { id: track.artist.id } }"
|
||||
class="table__cell table__cell--medium table__cell--center clickable" custom v-slot="{ navigate }">
|
||||
<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Album', params: { id: track.album.id } }"
|
||||
class="table__cell--medium table__cell--center clickable" custom v-slot="{ navigate }">
|
||||
<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
|
||||
</router-link>
|
||||
<td class="table__cell--small">
|
||||
{{ convertDuration(track.duration) }}
|
||||
</td>
|
||||
<td :data-link="track.link" aria-label="download" class="cursor-pointer group" role="button"
|
||||
@click.stop="addToQueue">
|
||||
<div class="table__cell-content table__cell-content--vertical-center">
|
||||
<i :title="$t('globals.download_hint')"
|
||||
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary">
|
||||
get_app
|
||||
</i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>{{ $t('favorites.noPlaylists') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'album'">
|
||||
<div v-if="albums.length === 0">
|
||||
<h1>{{ $t('favorites.noAlbums') }}</h1>
|
||||
</div>
|
||||
<div v-if="albums.length > 0" class="release-grid">
|
||||
<router-link v-for="release in albums" :key="release.id" :to="{ name: 'Album', params: { id: release.id } }"
|
||||
class="release clickable" custom v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<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>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'artist'">
|
||||
<div v-if="artists.length == 0">
|
||||
<h1>{{ $t('favorites.noArtists') }}</h1>
|
||||
</div>
|
||||
<div v-if="artists.length > 0" class="release-grid">
|
||||
<router-link v-for="release in artists" :key="release.id" :to="{ name: 'Artist', params: { id: release.id } }"
|
||||
class="release clickable" custom v-slot="{ navigate }">
|
||||
<div @click="navigate" @keypress.enter="navigate" role="link">
|
||||
<CoverContainer :cover="release.picture_medium" :link="release.link" is-circle @click.stop="addToQueue" />
|
||||
<p class="primary-text">{{ release.name }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="activeTab === 'track'">
|
||||
<div v-if="tracks.length == 0">
|
||||
<h1>{{ $t('favorites.noTracks') }}</h1>
|
||||
</div>
|
||||
<table v-if="tracks.length > 0" class="table">
|
||||
<tr v-for="track in tracks" class="track_row">
|
||||
<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">
|
||||
<PreviewControls v-if="track.preview" />
|
||||
<img :src="track.album.cover_small" class="rounded coverart" />
|
||||
</span>
|
||||
</td>
|
||||
<td class="table__cell--large">
|
||||
{{
|
||||
track.title +
|
||||
(track.title_version && track.title.indexOf(track.title_version) == -1 ? ' ' + track.title_version : '')
|
||||
}}
|
||||
</td>
|
||||
<router-link :to="{ name: 'Artist', params: { id: track.artist.id } }"
|
||||
class="table__cell table__cell--medium table__cell--center clickable" custom v-slot="{ navigate }">
|
||||
<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.artist.name }}</td>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'Album', params: { id: track.album.id } }"
|
||||
class="table__cell--medium table__cell--center clickable" custom v-slot="{ navigate }">
|
||||
<td @click="navigate" @keypress.enter="navigate" role="link">{{ track.album.title }}</td>
|
||||
</router-link>
|
||||
<td class="table__cell--small">
|
||||
{{ convertDuration(track.duration) }}
|
||||
</td>
|
||||
<td :data-link="track.link" aria-label="download" class="cursor-pointer group" role="button"
|
||||
@click.stop="addToQueue">
|
||||
<div class="table__cell-content table__cell-content--vertical-center">
|
||||
<i :title="$t('globals.download_hint')"
|
||||
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary">
|
||||
get_app
|
||||
</i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user