deemix-webui/src/js/components/TheMainSearch.vue

<template>
	<div id="search_tab" class="main_tabcontent" @click="handleSearchTabClick">
		<div :class="{ hide: results.query != '' }">
			<h2>Start searching!</h2>
			<p>
				You can search a track, a whole album, an artist, a playlist.... everything! You can also paste a Deezer link
			</p>
		</div>
		<div v-show="results.query !== ''">
			<ul class="section-tabs">
				<li class="section-tabs__tab search_tablinks" id="search_all_tab">All</li>
				<li class="section-tabs__tab search_tablinks" id="search_track_tab">Tracks</li>
				<li class="section-tabs__tab search_tablinks" id="search_album_tab">Album</li>
				<li class="section-tabs__tab search_tablinks" id="search_artist_tab">Artist</li>
				<li class="section-tabs__tab search_tablinks" id="search_playlist_tab">Playlist</li>
			</ul>
			<div id="search_tab_content">
				<!-- ### Main Search Tab ### -->
				<div id="main_search" class="search_tabcontent">
					<template v-for="section in results.allTab.ORDER">
						<section
							v-if="
								(section != 'TOP_RESULT' && results.allTab[section].data.length > 0) ||
									results.allTab[section].length > 0
							"
							class="search_section"
						>
							<h2
								@click="changeSearchTab(section)"
								class="search_header"
								:class="{ top_result_header: section === 'TOP_RESULT' }"
							>
								{{ names[section] }}
							</h2>
							<!-- Top result -->
							<div
								v-if="section == 'TOP_RESULT'"
								class="top_result clickable"
								@click="handleClickTopResult"
								:data-id="results.allTab.TOP_RESULT[0].id"
							>
								<div class="cover_container">
									<img
										aria-hidden="true"
										:src="results.allTab.TOP_RESULT[0].picture"
										:class="(results.allTab.TOP_RESULT[0].type == 'artist' ? 'circle' : 'rounded') + ' coverart'"
									/>
									<div
										role="button"
										aria-label="download"
										@contextmenu.prevent="openQualityModal"
										@click.stop="addToQueue"
										:data-link="results.allTab.TOP_RESULT[0].link"
										class="download_overlay"
									>
										<i class="material-icons">get_app</i>
									</div>
								</div>
								<div class="info_box">
									<p class="primary-text">{{ results.allTab.TOP_RESULT[0].title }}</p>
									<p class="secondary-text">
										{{
											results.allTab.TOP_RESULT[0].type == 'artist'
												? numberWithDots(results.allTab.TOP_RESULT[0].nb_fan) + ' fans'
												: 'by ' +
												  results.allTab.TOP_RESULT[0].artist +
												  ' - ' +
												  results.allTab.TOP_RESULT[0].nb_song +
												  ' tracks'
										}}
									</p>
									<span class="tag">{{
										results.allTab.TOP_RESULT[0].type.charAt(0).toUpperCase() +
											results.allTab.TOP_RESULT[0].type.substring(1)
									}}</span>
								</div>
							</div>
							<div v-else-if="section == 'TRACK'">
								<table class="table table--tracks">
									<tbody>
										<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
											<td class="table__icon" aria-hidden="true">
												<img
													class="rounded coverart"
													:src="
														'https://e-cdns-images.dzcdn.net/images/cover/' +
															track.ALB_PICTURE +
															'/32x32-000000-80-0-0.jpg'
													"
												/>
											</td>
											<td class="table__cell table__cell--large breakline">
												<div class="table__cell-content table__cell-content--vertical-center">
													<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
														explicit
													</i>
													{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
												</div>
											</td>
											<td class="table__cell table__cell--medium table__cell--center breakline">
												<span
													class="clickable"
													@click="artistView"
													:data-id="artist.ART_ID"
													v-for="artist in track.ARTISTS"
													>{{ artist.ART_NAME }}
												</span>
											</td>
											<td
												class="table__cell--medium table__cell--center breakline clickable"
												@click="albumView"
												:data-id="track.ALB_ID"
											>
												{{ track.ALB_TITLE }}
											</td>
											<td class="table__cell table__cell--center">
												{{ convertDuration(track.DURATION) }}
											</td>
											<td
												class="table__cell--download table__cell--center clickable"
												@contextmenu.prevent="openQualityModal"
												@click.stop="addToQueue"
												:data-link="'https://www.deezer.com/track/' + track.SNG_ID"
												role="button"
												aria-label="download"
											>
												<i class="material-icons">
													get_app
												</i>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
								<div
									v-for="release in results.allTab.ARTIST.data.slice(0, 10)"
									class="release clickable"
									@click="artistView"
									:data-id="release.ART_ID"
								>
									<div class="cover_container">
										<img
											aria-hidden="true"
											class="circle coverart"
											:src="
												'https://e-cdns-images.dzcdn.net/images/artist/' +
													release.ART_PICTURE +
													'/156x156-000000-80-0-0.jpg'
											"
										/>
										<div
											role="button"
											aria-label="download"
											@contextmenu.prevent="openQualityModal"
											@click.stop="addToQueue"
											:data-link="'https://deezer.com/artist/' + release.ART_ID"
											class="download_overlay"
										>
											<i class="material-icons">get_app</i>
										</div>
									</div>
									<p class="primary-text">{{ release.ART_NAME }}</p>
									<p class="secondary-text">{{ numberWithDots(release.NB_FAN) + ' fans' }}</p>
								</div>
							</div>
							<div v-else-if="section == 'ALBUM'" class="release_grid firstrow_only">
								<div
									v-for="release in results.allTab.ALBUM.data.slice(0, 10)"
									class="release clickable"
									@click="albumView"
									:data-id="release.ALB_ID"
								>
									<div class="cover_container">
										<img
											aria-hidden="true"
											class="rounded coverart"
											:src="
												'https://e-cdns-images.dzcdn.net/images/cover/' +
													release.ALB_PICTURE +
													'/156x156-000000-80-0-0.jpg'
											"
										/>
										<div
											role="button"
											aria-label="download"
											@contextmenu.prevent="openQualityModal"
											@click.stop="addToQueue"
											:data-link="'https://deezer.com/album/' + release.ALB_ID"
											class="download_overlay"
										>
											<i class="material-icons">get_app</i>
										</div>
									</div>
									<p class="primary-text inline-flex">
										<i
											v-if="[1, 4].indexOf(release.EXPLICIT_ALBUM_CONTENT.EXPLICIT_LYRICS_STATUS) != -1"
											class="material-icons explicit_icon"
											>explicit</i
										>
										{{ release.ALB_TITLE }}
									</p>
									<p class="secondary-text">{{ release.ART_NAME + ' - ' + release.NUMBER_TRACK + ' tracks' }}</p>
								</div>
							</div>
							<div v-else-if="section == 'PLAYLIST'" class="release_grid firstrow_only">
								<div
									v-for="release in results.allTab.PLAYLIST.data.slice(0, 10)"
									class="release clickable"
									@click="playlistView"
									:data-id="release.PLAYLIST_ID"
								>
									<div class="cover_container">
										<img
											aria-hidden="true"
											class="rounded coverart"
											:src="
												'https://e-cdns-images.dzcdn.net/images/' +
													release.PICTURE_TYPE +
													'/' +
													release.PLAYLIST_PICTURE +
													'/156x156-000000-80-0-0.jpg'
											"
										/>
										<div
											role="button"
											aria-label="download"
											@contextmenu.prevent="openQualityModal"
											@click.stop="addToQueue"
											:data-link="'https://deezer.com/playlist/' + release.PLAYLIST_ID"
											class="download_overlay"
										>
											<i class="material-icons">get_app</i>
										</div>
									</div>
									<p class="primary-text">{{ release.TITLE }}</p>
									<p class="secondary-text">{{ release.NB_SONG + ' tracks' }}</p>
								</div>
							</div>
						</section>
					</template>
					<div
						v-if="
							results.allTab.ORDER.every(section =>
								section == 'TOP_RESULT' ? results.allTab[section].length == 0 : results.allTab[section].data.length == 0
							)
						"
					>
						<h1>No results</h1>
					</div>
				</div>
				<!-- ### Track Search Tab ### -->
				<div id="track_search" class="search_tabcontent">
					<base-loading-placeholder v-if="!results.trackTab.loaded"></base-loading-placeholder>
					<div v-else-if="results.trackTab.data.length == 0">
						<h1>No Tracks found</h1>
					</div>
					<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
						<thead>
							<tr>
								<th colspan="2">Title</th>
								<th>Artists</th>
								<th>Album</th>
								<th>
									<i class="material-icons">
										timer
									</i>
								</th>
								<th style="width: 56px;"></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="track in results.trackTab.data">
								<td class="table__icon table__icon--big">
									<a
										href="#"
										@click="playPausePreview"
										:class="'rounded' + (track.preview ? ' single-cover' : '')"
										:data-preview="track.preview"
									>
										<i
											@mouseenter="previewMouseEnter"
											@mouseleave="previewMouseLeave"
											v-if="track.preview"
											class="material-icons preview_controls"
										>
											play_arrow
										</i>
										<img class="rounded coverart" :src="track.album.cover_small" />
									</a>
								</td>
								<td class="table__cell table__cell--large breakline">
									<div class="table__cell-content table__cell-content--vertical-center">
										<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
											explicit
										</i>
										{{
											track.title +
												(track.title_version && track.title.indexOf(track.title_version) == -1
													? ' ' + track.title_version
													: '')
										}}
									</div>
								</td>
								<td
									class="table__cell table__cell--medium table__cell--center breakline clickable"
									@click="artistView"
									:data-id="track.artist.id"
								>
									{{ track.artist.name }}
								</td>
								<td
									class="table__cell table__cell--medium table__cell--center breakline clickable"
									@click="albumView"
									:data-id="track.album.id"
								>
									{{ track.album.title }}
								</td>
								<td class="table__cell table__cell--small table__cell--center">
									{{ convertDuration(track.duration) }}
								</td>
								<td
									class="table__cell--download table__cell--center clickable"
									@contextmenu.prevent="openQualityModal"
									@click.stop="addToQueue"
									:data-link="track.link"
									role="button"
									aria-label="download"
								>
									<i class="material-icons">
										get_app
									</i>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- ### Album Search Tab ### -->
				<div id="album_search" class="search_tabcontent">
					<base-loading-placeholder v-if="!results.albumTab.loaded"></base-loading-placeholder>
					<div v-else-if="results.albumTab.data.length == 0">
						<h1>No Albums found</h1>
					</div>
					<div class="release_grid" v-if="results.albumTab.data.length > 0">
						<div
							v-for="release in results.albumTab.data"
							class="release clickable"
							@click="albumView"
							:data-id="release.id"
						>
							<div class="cover_container">
								<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
								<div
									role="button"
									aria-label="download"
									@contextmenu.prevent="openQualityModal"
									@click.stop="addToQueue"
									:data-link="release.link"
									class="download_overlay"
								>
									<i class="material-icons">get_app</i>
								</div>
							</div>
							<p class="primary-text inline-flex">
								<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
								{{ release.title }}
							</p>
							<p class="secondary-text">{{ 'by ' + release.artist.name + ' - ' + release.nb_tracks + ' tracks' }}</p>
						</div>
					</div>
				</div>
				<!-- ### Artist Search Tab ### -->
				<div id="artist_search" class="search_tabcontent">
					<base-loading-placeholder v-if="!results.artistTab.loaded"></base-loading-placeholder>
					<div v-else-if="results.artistTab.data.length == 0">
						<h1>No Artists found</h1>
					</div>
					<div class="release_grid" v-if="results.artistTab.data.length > 0">
						<div
							v-for="release in results.artistTab.data"
							class="release clickable"
							@click="artistView"
							:data-id="release.id"
						>
							<div class="cover_container">
								<img aria-hidden="true" class="circle coverart" :src="release.picture_medium" />
								<div
									role="button"
									aria-label="download"
									@contextmenu.prevent="openQualityModal"
									@click.stop="addToQueue"
									:data-link="release.link"
									class="download_overlay"
								>
									<i class="material-icons">get_app</i>
								</div>
							</div>
							<p class="primary-text">{{ release.name }}</p>
							<p class="secondary-text">{{ release.nb_album + ' releases' }}</p>
						</div>
					</div>
				</div>
				<!-- ### Playlist Search Tab ### -->
				<div id="playlist_search" class="search_tabcontent">
					<base-loading-placeholder v-if="!results.playlistTab.loaded"></base-loading-placeholder>
					<div v-else-if="results.playlistTab.data.length == 0">
						<h1>No Playlists found</h1>
					</div>
					<div class="release_grid" v-if="results.playlistTab.data.length > 0">
						<div
							v-for="release in results.playlistTab.data"
							class="release clickable"
							@click="playlistView"
							:data-id="release.id"
						>
							<div class="cover_container">
								<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
								<div
									role="button"
									aria-label="download"
									@contextmenu.prevent="openQualityModal"
									@click.stop="addToQueue"
									:data-link="release.link"
									class="download_overlay"
								>
									<i class="material-icons">get_app</i>
								</div>
							</div>
							<p class="primary-text">{{ release.title }}</p>
							<p class="secondary-text">{{ 'by ' + release.user.name + ' - ' + release.nb_tracks + ' tracks' }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { socket } from '@/js/socket.js'
import { showView } from '@/js/tabs.js'
import Downloads from '@/js/downloads.js'
import TrackPreview from '@/js/track-preview.js'
import Utils from '@/js/utils.js'
import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'

import { changeTab } from '@/js/tabs.js'
import EventBus from '@/js/EventBus.js'

export default {
	name: 'the-main-search-tab',
	components: {
		BaseLoadingPlaceholder
	},
	data() {
		return {
			names: {
				TOP_RESULT: 'Top Result',
				TRACK: 'Tracks',
				ARTIST: 'Artists',
				ALBUM: 'Albums',
				PLAYLIST: 'Playlists'
			},
			results: {
				query: '',
				allTab: {
					ORDER: [],
					TOP_RESULT: [],
					ALBUM: {},
					ARTIST: {},
					TRACK: {},
					PLAYLIST: {}
				},
				trackTab: {
					data: [],
					next: 0,
					total: 0,
					loaded: false
				},
				albumTab: {
					data: [],
					next: 0,
					total: 0,
					loaded: false
				},
				artistTab: {
					data: [],
					next: 0,
					total: 0,
					loaded: false
				},
				playlistTab: {
					data: [],
					next: 0,
					total: 0,
					loaded: false
				}
			}
		}
	},
	props: {
		scrolledSearchType: {
			type: String,
			required: false
		}
	},
	mounted() {
		EventBus.$on('mainSearch:checkLoadMoreContent', this.checkLoadMoreContent)

		this.$root.$on('mainSearch:showNewResults', this.showNewResults)
		socket.on('mainSearch', this.handleMainSearch)
		socket.on('search', this.handleSearch)
	},
	methods: {
		artistView: showView.bind(null, 'artist'),
		albumView: showView.bind(null, 'album'),
		playlistView: showView.bind(null, 'playlist'),
		playPausePreview: TrackPreview.playPausePreview,
		previewMouseEnter: TrackPreview.previewMouseEnter,
		previewMouseLeave: TrackPreview.previewMouseLeave,
		handleSearchTabClick(event) {
			const {
				target,
				target: { id }
			} = event
			let selectedTab = null

			switch (id) {
				case 'search_all_tab':
					selectedTab = 'main_search'
					break
				case 'search_track_tab':
					selectedTab = 'track_search'
					break
				case 'search_album_tab':
					selectedTab = 'album_search'
					break
				case 'search_artist_tab':
					selectedTab = 'artist_search'
					break
				case 'search_playlist_tab':
					selectedTab = 'playlist_search'
					break

				default:
					break
			}

			if (!selectedTab) return

			changeTab(target, 'search', selectedTab)
		},
		handleClickTopResult(event) {
			let topResultType = this.results.allTab.TOP_RESULT[0].type

			switch (topResultType) {
				case 'artist':
					this.artistView(event)
					break
				case 'album':
					this.albumView(event)
					break
				case 'playlist':
					this.playlistView(event)
					break

				default:
					break
			}
		},
		showNewResults(term, mainSelected) {
			if (term !== this.results.query || mainSelected == 'search_tab') {
				document.getElementById('search_tab_content').style.display = 'none'
				socket.emit('mainSearch', { term })

				// Showing loading placeholder
				document.getElementById('content').style.display = 'none'
				document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')
			} else {
				document.getElementById('search_tab_content').style.display = 'block'
				document.getElementById('main_search_tablink').click()
			}
		},
		checkLoadMoreContent(searchSelected) {
			if (this.results[searchSelected.split('_')[0] + 'Tab'].data.length !== 0) return

			this.search(searchSelected.split('_')[0])
		},
		changeSearchTab(section) {
			if (section === 'TOP_RESULT') return

			let tabID

			// Using the switch beacuse it's tricky to find refernces of the belo IDs
			switch (section) {
				case 'TRACK':
					tabID = 'search_track_tab'
					break
				case 'ALBUM':
					tabID = 'search_album_tab'
					break
				case 'ARTIST':
					tabID = 'search_artist_tab'
					break
				case 'PLAYLIST':
					tabID = 'search_playlist_tab'
					break

				default:
					break
			}

			document.getElementById(tabID).click()
		},
		addToQueue(e) {
			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
		},
		openQualityModal(e) {
			this.$root.$emit('QualityModal:open', e.currentTarget.dataset.link)
		},
		numberWithDots: Utils.numberWithDots,
		convertDuration: Utils.convertDuration,
		search(type) {
			socket.emit('search', {
				term: this.results.query,
				type: type,
				start: this.results[type + 'Tab'].next,
				nb: 30
			})
		},
		scrolledSearch(type) {
			let currentTab = type + 'Tab'

			if (this.results[currentTab].next < this.results[currentTab].total) {
				socket.emit('search', {
					term: this.results.query,
					type: type,
					start: this.results[currentTab].next,
					nb: 30
				})
			}
		},
		handleMainSearch(result) {
			// Hiding loading placeholder
			document.getElementById('content').style.display = ''
			document.getElementById('search_placeholder').classList.toggle('loading_placeholder--hidden')

			let resetObj = { data: [], next: 0, total: 0, loaded: false }

			this.results.allTab = result
			this.results.trackTab = { ...resetObj }
			this.results.albumTab = { ...resetObj }
			this.results.artistTab = { ...resetObj }
			this.results.playlistTab = { ...resetObj }

			if (this.results.query == '') document.getElementById('search_all_tab').click()

			this.results.query = result.QUERY
			document.getElementById('search_tab_content').style.display = 'block'
			document.getElementById('main_search_tablink').click()
		},
		handleSearch(result) {
			const { next: nextResult, total, type, data } = result

			let currentTab = type + 'Tab'
			let next = 0

			if (nextResult) {
				next = parseInt(nextResult.match(/index=(\d*)/)[1])
			} else {
				next = total
			}

			if (this.results[currentTab].total != total) {
				this.results[currentTab].total = total
			}

			if (this.results[currentTab].next != next) {
				this.results[currentTab].next = next
				this.results[currentTab].data = this.results[currentTab].data.concat(data)
			}

			this.results[currentTab].loaded = true
		}
	},
	watch: {
		scrolledSearchType(newType) {
			if (!newType) return

			this.scrolledSearch(newType)
		}
	}
}
</script>

<style>
</style>