Skip to content
Snippets Groups Projects
Commit ef2dc038 authored by Auri's avatar Auri Committed by Eliot Berriot
Browse files

Resolve "UI for multi-disc albums"

parent 2b24f19d
No related branches found
No related tags found
No related merge requests found
Add UI elements for multi-disc albums (#631)
...@@ -392,4 +392,12 @@ button.reset { ...@@ -392,4 +392,12 @@ button.reset {
[role="button"] { [role="button"] {
cursor: pointer; cursor: pointer;
} }
.left.floated {
float: left;
}
.right.floated {
float: right;
}
</style> </style>
...@@ -39,12 +39,27 @@ ...@@ -39,12 +39,27 @@
</a> </a>
</div> </div>
</section> </section>
<section class="ui vertical stripe segment"> <template v-if="discs && discs.length > 1">
<h2> <section v-for="(tracks, disc_number) in discs" class="ui vertical stripe segment">
<translate>Tracks</translate> <translate
</h2> tag="h2"
<track-table v-if="album" :artist="album.artist" :display-position="true" :tracks="album.tracks"></track-table> class="left floated"
</section> :translate-params="{number: disc_number + 1}"
>Volume %{ number }</translate>
<play-button class="right floated orange" :tracks="tracks">
<translate>Play all</translate>
</play-button>
<track-table :artist="album.artist" :display-position="true" :tracks="tracks"></track-table>
</section>
</template>
<template v-else>
<section class="ui vertical stripe segment">
<h2>
<translate>Tracks</translate>
</h2>
<track-table v-if="album" :artist="album.artist" :display-position="true" :tracks="album.tracks"></track-table>
</section>
</template>
<section class="ui vertical stripe segment"> <section class="ui vertical stripe segment">
<h2> <h2>
<translate>User libraries</translate> <translate>User libraries</translate>
...@@ -67,6 +82,17 @@ import LibraryWidget from "@/components/federation/LibraryWidget" ...@@ -67,6 +82,17 @@ import LibraryWidget from "@/components/federation/LibraryWidget"
const FETCH_URL = "albums/" const FETCH_URL = "albums/"
function groupByDisc(acc, track) {
var dn = track.disc_number - 1
if (dn < 0) dn = 0
if (acc[dn] == undefined) {
acc.push([track])
} else {
acc[dn].push(track)
}
return acc
}
export default { export default {
props: ["id"], props: ["id"],
components: { components: {
...@@ -77,7 +103,8 @@ export default { ...@@ -77,7 +103,8 @@ export default {
data() { data() {
return { return {
isLoading: true, isLoading: true,
album: null album: null,
discs: []
} }
}, },
created() { created() {
...@@ -91,6 +118,7 @@ export default { ...@@ -91,6 +118,7 @@ export default {
logger.default.debug('Fetching album "' + this.id + '"') logger.default.debug('Fetching album "' + this.id + '"')
axios.get(url).then(response => { axios.get(url).then(response => {
self.album = backend.Album.clean(response.data) self.album = backend.Album.clean(response.data)
self.discs = self.album.tracks.reduce(groupByDisc, [])
self.isLoading = false self.isLoading = false
}) })
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment