135 lines
3.6 KiB
Vue
135 lines
3.6 KiB
Vue
<template>
|
|
<section>
|
|
<BaseLoadingPlaceholder v-if="isLoading" />
|
|
|
|
<template v-else>
|
|
<div v-if="viewInfo.data.length === 0">
|
|
<h1>{{ $t('search.noResultsTrack') }}</h1>
|
|
</div>
|
|
|
|
<table v-else class="table w-full table--tracks">
|
|
<thead v-if="wantHeaders">
|
|
<tr class="capitalize">
|
|
<th class="h-12 pb-3" colspan="2">{{ $tc('globals.listTabs.title', 1) }}</th>
|
|
<th class="h-12 pb-3">{{ $tc('globals.listTabs.artist', 1) }}</th>
|
|
<th class="h-12 pb-3">{{ $tc('globals.listTabs.album', 1) }}</th>
|
|
<th class="h-12 pb-3">
|
|
<i class="material-icons">timer</i>
|
|
</th>
|
|
<th class="h-12 pb-3" style="width: 3.5rem"></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="track in viewInfo.data.slice(0, itemsToShow)" :key="track.trackLink">
|
|
<td class="table__icon table__icon--big">
|
|
<span
|
|
@click="playPausePreview($event)"
|
|
class="relative inline-block rounded cursor-pointer"
|
|
:data-preview="track.trackPreview"
|
|
>
|
|
<PreviewControls v-if="track.trackPreview" />
|
|
|
|
<img class="rounded coverart" :src="track.albumPicture" />
|
|
</span>
|
|
</td>
|
|
|
|
<td class="table__cell table__cell--large">
|
|
<div class="break-words table__cell-content table__cell-content--vertical-center">
|
|
<i v-if="track.isTrackExplicit" class="material-icons explicit-icon">explicit</i>
|
|
{{ formatTitle(track) }}
|
|
</div>
|
|
</td>
|
|
|
|
<router-link
|
|
tag="td"
|
|
class="break-words table__cell table__cell--medium table__cell--center"
|
|
:to="{ name: 'Artist', params: { id: track.artistID } }"
|
|
>
|
|
<span class="cursor-pointer hover:underline">
|
|
{{ track.artistName }}
|
|
</span>
|
|
</router-link>
|
|
|
|
<router-link
|
|
tag="td"
|
|
class="break-words table__cell table__cell--medium table__cell--center"
|
|
:to="{ name: 'Album', params: { id: track.albumID } }"
|
|
>
|
|
<span class="cursor-pointer hover:underline">
|
|
{{ track.albumTitle }}
|
|
</span>
|
|
</router-link>
|
|
|
|
<td class="table__cell table__cell--small table__cell--center">
|
|
{{ convertDuration(track.trackDuration) }}
|
|
</td>
|
|
|
|
<td
|
|
class="cursor-pointer table__cell--center group"
|
|
@click.stop="$emit('add-to-queue', $event)"
|
|
:data-link="track.trackLink"
|
|
aria-label="download"
|
|
>
|
|
<i
|
|
class="transition-colors duration-150 ease-in-out material-icons group-hover:text-primary"
|
|
:title="$t('globals.download_hint')"
|
|
>
|
|
get_app
|
|
</i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
|
|
import PreviewControls from '@components/globals/PreviewControls.vue'
|
|
|
|
import EventBus from '@/utils/EventBus'
|
|
import { convertDuration } from '@/utils/utils'
|
|
|
|
import { formatTitle } from '@/data/search'
|
|
|
|
export default {
|
|
components: {
|
|
BaseLoadingPlaceholder,
|
|
PreviewControls
|
|
},
|
|
props: {
|
|
viewInfo: {
|
|
validator: function (value) {
|
|
let isNull = Object.is(value, null)
|
|
let isObject = Object.prototype.toString.call(value) === '[object Object]'
|
|
|
|
return isNull || isObject
|
|
},
|
|
required: true
|
|
},
|
|
itemsToShow: {
|
|
type: Number,
|
|
required: false
|
|
},
|
|
wantHeaders: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
isLoading() {
|
|
return !this.viewInfo || !this.viewInfo.hasLoaded
|
|
}
|
|
},
|
|
methods: {
|
|
convertDuration,
|
|
formatTitle,
|
|
playPausePreview(e) {
|
|
EventBus.$emit('trackPreview:playPausePreview', e)
|
|
}
|
|
}
|
|
}
|
|
</script> |