2021-10-21 17:26:18 +00:00
|
|
|
<template>
|
|
|
|
<div
|
|
|
|
:class="[
|
|
|
|
{ active: currentTrack && track.id === currentTrack.id },
|
|
|
|
'track-row row mobile',
|
|
|
|
]"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
v-if="showArt"
|
|
|
|
class="image left floated column"
|
2021-12-06 10:35:20 +00:00
|
|
|
@click.prevent.exact="activateTrack(track, index)"
|
2021-10-21 17:26:18 +00:00
|
|
|
>
|
|
|
|
<img
|
|
|
|
v-if="
|
|
|
|
track.album && track.album.cover && track.album.cover.urls.original
|
|
|
|
"
|
|
|
|
v-lazy="
|
|
|
|
$store.getters['instance/absoluteUrl'](
|
|
|
|
track.album.cover.urls.medium_square_crop
|
|
|
|
)
|
|
|
|
"
|
|
|
|
alt=""
|
|
|
|
class="ui artist-track mini image"
|
2021-12-06 10:35:20 +00:00
|
|
|
>
|
|
|
|
<img
|
2021-10-21 17:26:18 +00:00
|
|
|
v-else-if="
|
|
|
|
track.cover
|
|
|
|
"
|
|
|
|
v-lazy="
|
|
|
|
$store.getters['instance/absoluteUrl'](
|
|
|
|
track.cover.urls.medium_square_crop
|
|
|
|
)
|
|
|
|
"
|
|
|
|
alt=""
|
|
|
|
class="ui artist-track mini image"
|
2021-12-06 10:35:20 +00:00
|
|
|
>
|
|
|
|
<img
|
2021-10-21 17:26:18 +00:00
|
|
|
v-else-if="
|
|
|
|
track.artist.cover
|
|
|
|
"
|
|
|
|
v-lazy="
|
|
|
|
$store.getters['instance/absoluteUrl'](
|
|
|
|
track.artist.cover.urls.medium_square_crop
|
|
|
|
)
|
|
|
|
"
|
|
|
|
alt=""
|
|
|
|
class="ui artist-track mini image"
|
2021-12-06 10:35:20 +00:00
|
|
|
>
|
|
|
|
<img
|
2021-10-21 17:26:18 +00:00
|
|
|
v-else
|
2021-12-06 10:35:20 +00:00
|
|
|
alt=""
|
|
|
|
class="ui artist-track mini image"
|
2021-10-21 17:26:18 +00:00
|
|
|
src="../../../assets/audio/default-cover.png"
|
2021-12-06 10:35:20 +00:00
|
|
|
>
|
2021-10-21 17:26:18 +00:00
|
|
|
</div>
|
|
|
|
<div
|
2021-12-06 10:35:20 +00:00
|
|
|
tabindex="0"
|
2021-10-21 17:26:18 +00:00
|
|
|
role="button"
|
|
|
|
class="content ellipsis left floated column"
|
2021-12-06 10:35:20 +00:00
|
|
|
@click="activateTrack(track, index)"
|
2021-10-21 17:26:18 +00:00
|
|
|
>
|
|
|
|
<p
|
|
|
|
:class="[
|
|
|
|
'track-title',
|
|
|
|
'mobile',
|
|
|
|
{ 'play-indicator': isPlaying && currentTrack && track.id === currentTrack.id },
|
|
|
|
]"
|
|
|
|
>
|
|
|
|
{{ track.title }}
|
|
|
|
</p>
|
2021-12-06 10:35:20 +00:00
|
|
|
<p
|
|
|
|
v-if="track.artist.content_category === 'podcast'"
|
|
|
|
class="track-meta mobile"
|
|
|
|
>
|
|
|
|
<human-date
|
|
|
|
class="really discrete"
|
|
|
|
:date="track.creation_date"
|
|
|
|
/>
|
2021-10-21 17:26:18 +00:00
|
|
|
<span>·</span>
|
|
|
|
<human-duration
|
|
|
|
v-if="track.uploads[0] && track.uploads[0].duration"
|
|
|
|
:duration="track.uploads[0].duration"
|
2021-12-06 10:35:20 +00:00
|
|
|
/>
|
2021-10-21 17:26:18 +00:00
|
|
|
</p>
|
2021-12-06 10:35:20 +00:00
|
|
|
<p
|
|
|
|
v-else
|
|
|
|
class="track-meta mobile"
|
|
|
|
>
|
2021-10-21 17:26:18 +00:00
|
|
|
{{ track.artist.name }} <span>·</span>
|
|
|
|
<human-duration
|
|
|
|
v-if="track.uploads[0] && track.uploads[0].duration"
|
|
|
|
:duration="track.uploads[0].duration"
|
2021-12-06 10:35:20 +00:00
|
|
|
/>
|
2021-10-21 17:26:18 +00:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
2021-12-06 10:35:20 +00:00
|
|
|
v-if="$store.state.auth.authenticated && track.artist.content_category !== 'podcast'"
|
2021-10-21 17:26:18 +00:00
|
|
|
:class="[
|
|
|
|
'meta',
|
|
|
|
'right',
|
|
|
|
'floated',
|
|
|
|
'column',
|
|
|
|
'mobile',
|
|
|
|
{ 'with-art': showArt },
|
|
|
|
]"
|
|
|
|
role="button"
|
|
|
|
>
|
|
|
|
<track-favorite-icon
|
|
|
|
class="tiny"
|
|
|
|
:border="false"
|
|
|
|
:track="track"
|
2021-12-06 10:35:20 +00:00
|
|
|
/>
|
2021-10-21 17:26:18 +00:00
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
role="button"
|
|
|
|
:aria-label="actionsButtonLabel"
|
|
|
|
:class="[
|
|
|
|
'modal-button',
|
|
|
|
'right',
|
|
|
|
'floated',
|
|
|
|
'column',
|
|
|
|
'mobile',
|
|
|
|
{ 'with-art': showArt },
|
|
|
|
]"
|
2021-12-06 10:35:20 +00:00
|
|
|
@click.prevent.exact="showTrackModal = !showTrackModal"
|
2021-10-21 17:26:18 +00:00
|
|
|
>
|
|
|
|
<i class="ellipsis large vertical icon" />
|
|
|
|
</div>
|
|
|
|
<track-modal
|
|
|
|
:show="showTrackModal"
|
|
|
|
:track="track"
|
|
|
|
:index="index"
|
|
|
|
:is-artist="isArtist"
|
|
|
|
:is-album="isAlbum"
|
2021-12-06 10:35:20 +00:00
|
|
|
@update:show="showTrackModal = $event;"
|
|
|
|
/>
|
2021-10-21 17:26:18 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-12-06 10:35:20 +00:00
|
|
|
import { mapActions, mapGetters } from 'vuex'
|
2022-04-23 07:37:43 +00:00
|
|
|
import TrackFavoriteIcon from '~/components/favorites/TrackFavoriteIcon.vue'
|
|
|
|
import TrackModal from '~/components/audio/track/Modal.vue'
|
|
|
|
import PlayOptionsMixin from '~/components/mixins/PlayOptions.vue'
|
2021-10-21 17:26:18 +00:00
|
|
|
|
|
|
|
export default {
|
2021-12-06 10:35:20 +00:00
|
|
|
|
|
|
|
components: {
|
|
|
|
TrackFavoriteIcon,
|
|
|
|
TrackModal
|
2021-10-21 17:26:18 +00:00
|
|
|
},
|
2021-12-06 10:35:20 +00:00
|
|
|
mixins: [PlayOptionsMixin],
|
2021-10-21 17:26:18 +00:00
|
|
|
props: {
|
2021-12-06 10:35:20 +00:00
|
|
|
tracks: { type: Array, required: true },
|
2021-10-21 17:26:18 +00:00
|
|
|
showAlbum: { type: Boolean, required: false, default: true },
|
|
|
|
showArtist: { type: Boolean, required: false, default: true },
|
|
|
|
showPosition: { type: Boolean, required: false, default: false },
|
|
|
|
showArt: { type: Boolean, required: false, default: true },
|
|
|
|
search: { type: Boolean, required: false, default: false },
|
|
|
|
filters: { type: Object, required: false, default: null },
|
|
|
|
nextUrl: { type: String, required: false, default: null },
|
|
|
|
displayActions: { type: Boolean, required: false, default: true },
|
|
|
|
showDuration: { type: Boolean, required: false, default: true },
|
|
|
|
index: { type: Number, required: true },
|
|
|
|
track: { type: Object, required: true },
|
2021-12-06 10:35:20 +00:00
|
|
|
isArtist: { type: Boolean, required: false, default: false },
|
|
|
|
isAlbum: { type: Boolean, required: false, default: false }
|
2021-10-21 17:26:18 +00:00
|
|
|
},
|
2021-12-06 10:35:20 +00:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
showTrackModal: false
|
|
|
|
}
|
2021-10-21 17:26:18 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapGetters({
|
2021-12-06 10:35:20 +00:00
|
|
|
currentTrack: 'queue/currentTrack'
|
2021-10-21 17:26:18 +00:00
|
|
|
}),
|
|
|
|
|
2021-12-06 10:35:20 +00:00
|
|
|
isPlaying () {
|
|
|
|
return this.$store.state.player.playing
|
2021-10-21 17:26:18 +00:00
|
|
|
},
|
|
|
|
actionsButtonLabel () {
|
2021-12-06 10:35:20 +00:00
|
|
|
return this.$pgettext('Content/Track/Icon.Tooltip/Verb', 'Show track actions')
|
|
|
|
}
|
2021-10-21 17:26:18 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2021-12-06 10:35:20 +00:00
|
|
|
prettyPosition (position, size) {
|
|
|
|
let s = String(position)
|
2021-10-21 17:26:18 +00:00
|
|
|
while (s.length < (size || 2)) {
|
2021-12-06 10:35:20 +00:00
|
|
|
s = '0' + s
|
2021-10-21 17:26:18 +00:00
|
|
|
}
|
2021-12-06 10:35:20 +00:00
|
|
|
return s
|
2021-10-21 17:26:18 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
...mapActions({
|
2021-12-06 10:35:20 +00:00
|
|
|
resumePlayback: 'player/resumePlayback',
|
|
|
|
pausePlayback: 'player/pausePlayback'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2021-10-21 17:26:18 +00:00
|
|
|
</script>
|