From ef2dc03808609ae0474ddc6f2d92a7efb6427d14 Mon Sep 17 00:00:00 2001
From: Auri <me@aurieh.me>
Date: Tue, 11 Dec 2018 10:17:05 +0100
Subject: [PATCH] Resolve "UI for multi-disc albums"
---
changes/changelog.d/631.enhacement | 1 +
front/src/App.vue | 8 +++++
front/src/components/library/Album.vue | 42 +++++++++++++++++++++-----
3 files changed, 44 insertions(+), 7 deletions(-)
create mode 100644 changes/changelog.d/631.enhacement
diff --git a/changes/changelog.d/631.enhacement b/changes/changelog.d/631.enhacement
new file mode 100644
index 00000000..faafd8c2
--- /dev/null
+++ b/changes/changelog.d/631.enhacement
@@ -0,0 +1 @@
+Add UI elements for multi-disc albums (#631)
diff --git a/front/src/App.vue b/front/src/App.vue
index c4c5edb0..6e6f45ff 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -392,4 +392,12 @@ button.reset {
[role="button"] {
cursor: pointer;
}
+
+.left.floated {
+ float: left;
+}
+
+.right.floated {
+ float: right;
+}
</style>
diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
index 943aa9fc..9a4adfaf 100644
--- a/front/src/components/library/Album.vue
+++ b/front/src/components/library/Album.vue
@@ -39,12 +39,27 @@
</a>
</div>
</section>
- <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 v-if="discs && discs.length > 1">
+ <section v-for="(tracks, disc_number) in discs" class="ui vertical stripe segment">
+ <translate
+ tag="h2"
+ class="left floated"
+ :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">
<h2>
<translate>User libraries</translate>
@@ -67,6 +82,17 @@ import LibraryWidget from "@/components/federation/LibraryWidget"
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 {
props: ["id"],
components: {
@@ -77,7 +103,8 @@ export default {
data() {
return {
isLoading: true,
- album: null
+ album: null,
+ discs: []
}
},
created() {
@@ -91,6 +118,7 @@ export default {
logger.default.debug('Fetching album "' + this.id + '"')
axios.get(url).then(response => {
self.album = backend.Album.clean(response.data)
+ self.discs = self.album.tracks.reduce(groupByDisc, [])
self.isLoading = false
})
}
--
GitLab