Fix #725: Merged artist/album buttons with title text on artist and album pages

changes/changelog.d/725.enhancement

@@ -0,0 +1 @@
+Merged artist/album buttons with title text on artist and album pages (#725)

front/src/App.vue

@@ -93,6 +93,18 @@ export default {
       handler: this.incrementNotificationCountInSidebar
     })
   },
+  mounted () {
+    let self = this
+
+    // slight hack to allow use to have internal links in <translate> tags
+    // while preserving router behaviour
+    document.documentElement.addEventListener('click', function (event) {
+      if (!event.target.matches('a.internal')) return;
+      self.$router.push(event.target.getAttribute('href'))
+      event.preventDefault();
+    }, false);
+
+  },
   destroyed () {
     this.$store.commit('ui/removeWebsocketEventHandler', {
       eventName: 'inbox.item_added',

front/src/components/library/Album.vue

@@ -12,11 +12,6 @@
               {{ album.title }}
               <div v-html="subtitle"></div>
             </div>
-            <div class="ui buttons">
-              <router-link class="ui button" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
-                <translate :translate-context="'Content/*/Button.Label/Name'">Artist page</translate>
-              </router-link>
-            </div>
           </h2>
           <div class="ui hidden divider"></div>
           <play-button class="orange" :tracks="album.tracks">
@@ -181,8 +176,9 @@ export default {
       )
     },
     subtitle () {
-      let msg = this.$npgettext('Content/Album/Header.Title', 'Album containing %{ count } track, by %{ artist }', 'Album containing %{ count } tracks, by %{ artist }', this.album.tracks.length)
-      return this.$gettextInterpolate(msg, {count: this.album.tracks.length, artist: this.album.artist.name})
+      let route = this.$router.resolve({name: 'library.artists.detail', params: {id: this.album.artist.id }})
+      let msg = this.$npgettext('Content/Album/Header.Title', 'Album containing %{ count } track, by <a class="internal" href="%{ artistUrl }">%{ artist }</a>', 'Album containing %{ count } tracks, by <a class="internal" href="%{ artistUrl }">%{ artist }</a>', this.album.tracks.length)
+      return this.$gettextInterpolate(msg, {count: this.album.tracks.length, artist: this.album.artist.name, artistUrl: route.location.path})
     }
   },
   watch: {

front/src/components/library/Track.vue

@@ -15,24 +15,9 @@
             <div class="content">
               {{ track.title }}
               <div class="sub header">
-                <translate :translate-context="'Content/Track/Paragraph'"
-                  :translate-params="{album: track.album.title, artist: track.artist.name}"
-                >From album %{ album } by %{ artist }</translate>
-              </div>
-              <br>
-              <div class="ui basic buttons">
-                <router-link
-                  class="ui button"
-                  :to="{name: 'library.albums.detail', params: {id: track.album.id }}"
-                >
-                  <translate :translate-context="'Content/Track/Button.Label'">Album page</translate>
-                </router-link>
-                <router-link
-                  class="ui button"
-                  :to="{name: 'library.artists.detail', params: {id: track.artist.id }}"
-                >
-                  <translate :translate-context="'Content/Track/Button.Label'">Artist page</translate>
-                </router-link>
+                <div :translate-context="'Content/Track/Paragraph'"
+                  v-translate="{album: track.album.title, artist: track.artist.name, albumUrl: albumUrl, artistUrl: artistUrl}"
+                >From album <a class="internal" href="%{ albumUrl }">%{ album }</a> by <a class="internal" href="%{ artistUrl }">%{ artist }</a></div>
               </div>
             </div>
           </h2>
@@ -299,6 +284,14 @@ export default {
     cover() {
       return null
     },
+    albumUrl () {
+      let route = this.$router.resolve({name: 'library.albums.detail', params: {id: this.track.album.id }})
+      return route.location.path
+    },
+    artistUrl () {
+      let route = this.$router.resolve({name: 'library.artists.detail', params: {id: this.track.artist.id }})
+      return route.location.path
+    },
     headerStyle() {
       if (!this.cover) {
         return ""