58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<div class="album-entries">
|
|
<div :class="[{active: currentTrack && isPlaying && track.id === currentTrack.id}, 'album-entry']" v-for="track in tracks" :key="track.id">
|
|
<div class="actions">
|
|
<play-button class="basic circular icon" :button-classes="['circular inverted vibrant icon button']" :discrete="true" :icon-only="true" :track="track"></play-button>
|
|
</div>
|
|
<div class="position">{{ prettyPosition(track.position) }}</div>
|
|
<div class="content ellipsis">
|
|
<router-link :to="{name: 'library.tracks.detail', params: {id: track.id}}" class="discrete link">
|
|
<strong>{{ track.title }}</strong><br>
|
|
</router-link>
|
|
</div>
|
|
<div class="meta">
|
|
<template v-if="$store.state.auth.authenticated && $store.getters['favorites/isFavorite'](track.id)">
|
|
<track-favorite-icon class="tiny" :track="track"></track-favorite-icon>
|
|
</template>
|
|
<human-duration v-if="track.uploads[0] && track.uploads[0].duration" :duration="track.uploads[0].duration"></human-duration>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from '@/lodash'
|
|
import axios from 'axios'
|
|
import ChannelEntryCard from '@/components/audio/ChannelEntryCard'
|
|
import PlayButton from '@/components/audio/PlayButton'
|
|
import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
|
|
import { mapGetters } from "vuex"
|
|
|
|
|
|
export default {
|
|
props: {
|
|
tracks: Array,
|
|
},
|
|
components: {
|
|
PlayButton,
|
|
TrackFavoriteIcon
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
currentTrack: "queue/currentTrack",
|
|
}),
|
|
|
|
isPlaying () {
|
|
return this.$store.state.player.playing
|
|
},
|
|
},
|
|
methods: {
|
|
prettyPosition (position, size) {
|
|
var s = String(position);
|
|
while (s.length < (size || 2)) {s = "0" + s;}
|
|
return s;
|
|
}
|
|
}
|
|
}
|
|
</script>
|