deemix-webui/src/components/pages/Favorites.vue

<template>
	<div>
		<h1 class="mb-8 text-5xl">
			{{ $t('favorites.title') }}
			<div
				@click="refreshFavorites"
				class="inline-block clickable"
				ref="reloadButton"
				role="button"
				aria-label="reload"
			>
				<i class="material-icons" :class="{ spin: isRefreshingFavorites }">sync</i>
			</div>
		</h1>

		<BaseTabs>
			<BaseTab v-for="tab in tabs" :key="tab" :class="{ active: activeTab === tab }" @click="activeTab = tab">
				{{ $tc(`globals.listTabs.${tab}`, 2) }}
			</BaseTab>
		</BaseTabs>

		<button class="btn btn-primary" v-if="!activeTabEmpty" 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 == 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" />
						<p class="primary-text">{{ release.title }}</p>
					</router-link>

					<p class="secondary-text">
						{{
							`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
								'globals.listTabs.trackN',
								release.nb_tracks
							)}`
						}}
					</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" />
						<p class="primary-text">{{ release.title }}</p>
					</router-link>

					<p class="secondary-text">
						{{
							`${$t('globals.by', { artist: release.creator.name })} - ${$tc(
								'globals.listTabs.trackN',
								release.nb_tracks
							)}`
						}}
					</p>
				</div>
			</div>
		</div>

		<div v-show="activeTab === 'album'">
			<div v-if="albums.length == 0">
				<h1>{{ $t('favorites.noAlbums') }}</h1>
			</div>
			<div class="release-grid" v-if="albums.length > 0">
				<router-link
					tag="div"
					class="release clickable"
					v-for="release in albums"
					:key="release.id"
					:to="{ name: 'Album', params: { id: release.id } }"
				>
					<CoverContainer is-rounded :cover="release.cover_medium" :link="release.link" @click.stop="addToQueue" />
					<p class="primary-text">{{ release.title }}</p>
					<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>
				</router-link>
			</div>
		</div>

		<div v-show="activeTab === 'artist'">
			<div v-if="artists.length == 0">
				<h1>{{ $t('favorites.noArtists') }}</h1>
			</div>
			<div class="release-grid" v-if="artists.length > 0">
				<router-link
					tag="div"
					class="release clickable"
					v-for="release in artists"
					:key="release.id"
					:to="{ name: 'Artist', params: { id: release.id } }"
				>
					<CoverContainer is-circle :cover="release.picture_medium" :link="release.link" @click.stop="addToQueue" />
					<p class="primary-text">{{ release.name }}</p>
				</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="p-3 text-center cursor-default" :class="{ first: track.position === 1 }">
						{{ track.position }}
					</td>
					<td>
						<span
							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" />
						</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
						tag="td"
						class="table__cell table__cell--medium table__cell--center clickable"
						:to="{ name: 'Artist', params: { id: track.artist.id } }"
					>
						{{ 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 } }"
					>
						{{ track.album.title }}
					</router-link>
					<td class="table__cell--small">
						{{ convertDuration(track.duration) }}
					</td>
					<td
						class="cursor-pointer group"
						@click.stop="addToQueue"
						:data-link="track.link"
						role="button"
						aria-label="download"
					>
						<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')"
							>
								get_app
							</i>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, watchEffect, ref, computed, 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 { sendAddToQueue, aggregateDownloadLinks } from '@/utils/downloads'
import { convertDuration } from '@/utils/utils'
import { toast } from '@/utils/toasts'
import { useFavorites } from '@/use/favorites'

export default defineComponent({
	components: {
		PreviewControls,
		CoverContainer,
		BaseTabs,
		BaseTab
	},
	setup(props, ctx) {
		const state = reactive({
			activeTab: 'playlist',
			tabs: ['playlist', 'album', 'artist', 'track']
		})
		const {
			favoriteArtists,
			favoriteAlbums,
			favoriteSpotifyPlaylists,
			favoritePlaylists,
			favoriteTracks,
			isRefreshingFavorites,
			refreshFavorites
		} = useFavorites()
		const reloadButton = computed(() => ctx.refs.reloadButton)

		watch(isRefreshingFavorites, (newVal, oldVal) => {
			// If oldVal is true and newOne is false, it means that a refreshing has just terminated
			// because isRefreshingFavorites represents the status of the refresh functionality
			const isRefreshingTerminated = oldVal && !newVal

			if (!isRefreshingTerminated) return

			toast(ctx.root.$t('toasts.refreshFavs'), 'done', true)
		})

		return {
			...toRefs(state),
			tracks: favoriteTracks,
			albums: favoriteAlbums,
			artists: favoriteArtists,
			playlists: favoritePlaylists,
			spotifyPlaylists: favoriteSpotifyPlaylists,
			refreshFavorites,
			isRefreshingFavorites
		}
	},
	computed: {
		activeTabEmpty() {
			let toCheck = this.getActiveRelease()

			return toCheck?.length === 0
		}
	},
	methods: {
		playPausePreview,
		convertDuration,
		downloadAllOfType() {
			try {
				let toDownload = this.getActiveRelease()

				if (this.activeTab === 'track') {
					let lovedTracks = this.getLovedTracksPlaylist()

					sendAddToQueue(lovedTracks.link)
				} else {
					sendAddToQueue(aggregateDownloadLinks(toDownload))
				}
			} catch (error) {
				console.error(error.message)
			}
		},
		addToQueue(e) {
			sendAddToQueue(e.currentTarget.dataset.link)
		},
		getActiveRelease(tab = this.activeTab) {
			let toDownload
			// console.log({ tab, play: this.playlists })

			switch (tab) {
				case 'playlist':
					toDownload = this.playlists
					break
				case 'album':
					toDownload = this.albums
					break
				case 'artist':
					toDownload = this.artists
					break
				case 'track':
					toDownload = this.tracks
					break

				default:
					break
			}

			return toDownload
		},
		getTabLength(tab = this.activeTab) {
			let total = this[`${tab}s`]?.length
			// TODO: Add Spotify playlists to downlaod queue as well
			//if (tab === "playlist") total += this.spotifyPlaylists.length
			return total || 0
		},
		getLovedTracksPlaylist() {
			let lovedTracks = this.playlists.filter(playlist => {
				return playlist.is_loved_track
			})

			if (lovedTracks.length !== 0) {
				return lovedTracks[0]
			} else {
				throw new Error('No loved tracks playlist!')
			}
		}
	}
})
</script>