yetangitu/funkwhale
1
0
Fork 0
mirror of https://code.eliotberriot.com/funkwhale/funkwhale.git synced 2025-10-04 19:09:17 +02:00
Code Issues Releases Wiki Activity

See #170: UI for albums / series

Browse source
This commit is contained in:
Eliot Berriot 2020-04-07 17:19:17 +02:00
parent 2f0c01df1a
commit 9e447ab523
26 changed files with 573 additions and 596 deletions
Download patch file Download diff file Expand all files Collapse all files

58
front/src/components/audio/ChannelEntryCard.vue
View file

@ -1,33 +1,67 @@
<template>
<div class="channel-entry-card">
<img @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})" class="channel-image image" v-if="cover && cover.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<img @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})" class="channel-image image" v-else src="../../assets/audio/default-cover.png">
<div :class="[{active: currentTrack && isPlaying && entry.id === currentTrack.id}, 'channel-entry-card']">
<div class="controls">
<play-button class="basic circular icon" :discrete="true" :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'inverted orange', 'icon', 'button']" :track="entry"></play-button>
</div>
<img
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
class="channel-image image"
v-if="cover && cover.original"
v-lazy="$store.getters['instance/absoluteUrl'](cover.square_crop)">
<span
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
class="channel-image image"
v-else-if="entry.artist.content_category === 'podcast'">#{{ entry.position }}</span>
<img
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
class="channel-image image"
v-else-if="entry.album && entry.album.cover && entry.album.cover.original"
v-lazy="$store.getters['instance/absoluteUrl'](entry.album.cover.square_crop)">
<img
@click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
class="channel-image image"
v-else
src="../../assets/audio/default-cover.png">
<div class="ellipsis content">
<strong>
<router-link class="discrete link" :title="entry.title" :to="{name: 'library.tracks.detail', params: {id: entry.id}}">
{{ entry.title }}
</router-link>
</strong>
<div class="description">
<human-date :date="entry.creation_date"></human-date><template v-if="duration"> ·
<human-duration :duration="duration"></human-duration></template>
</div>
<br>
<human-date class="really discrete" :date="entry.creation_date"></human-date>
</div>
<div class="controls">
<play-button :icon-only="true" :is-playable="true" :button-classes="['ui', 'circular', 'orange', 'icon', 'button']" :track="entry"></play-button>
<div class="meta">
<template v-if="$store.state.auth.authenticated && $store.getters['favorites/isFavorite'](entry.id)">
<track-favorite-icon class="tiny" :track="entry"></track-favorite-icon>
</template>
<human-duration v-if="duration" :duration="duration"></human-duration>
</div>
</div>
</template>
<script>
import PlayButton from '@/components/audio/PlayButton'
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
import { mapGetters } from "vuex"
export default {
props: ['entry'],
components: {
PlayButton,
TrackFavoriteIcon,
},
computed: {
...mapGetters({
currentTrack: "queue/currentTrack",
}),
isPlaying () {
return this.$store.state.player.playing
},
imageUrl () {
let url = '../../assets/audio/default-cover.png'
let cover = this.cover
@ -42,9 +76,6 @@ export default {
if (this.entry.cover) {
return this.entry.cover
}
if (this.entry.album && this.entry.album.cover) {
return this.entry.album.cover
}
},
duration () {
let uploads = this.entry.uploads.filter((e) => {
@ -60,7 +91,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.default-cover {
background-image: url("../../assets/audio/default-cover.png") !important;
}
</style>