From 3de249b54ce3cb7a6d6192f659f6651b0a04bb20 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 11 Jun 2019 14:21:59 +0200
Subject: [PATCH] Fix #833: broken translation on home and track detail page

---
 changes/changelog.d/833.bugfix             |  1 +
 front/src/components/Home.vue              | 11 +++++------
 front/src/components/library/TrackBase.vue | 10 +++++-----
 3 files changed, 11 insertions(+), 11 deletions(-)
 create mode 100644 changes/changelog.d/833.bugfix

diff --git a/changes/changelog.d/833.bugfix b/changes/changelog.d/833.bugfix
new file mode 100644
index 000000000..06ce086f5
--- /dev/null
+++ b/changes/changelog.d/833.bugfix
@@ -0,0 +1 @@
+Fixed broken translation on home and track detail page (#833)
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index b88369d95..9393d9b78 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -68,12 +68,7 @@
         <div class="ui list">
           <div class="item">
             <i class="tag icon"></i>
-            <div
-              class="content"
-              v-translate="{url: musicbrainzUrl}"
-              translate-context="Content/Home/List item/Verb">
-                Get quality metadata about your music thanks to <a href="%{ url }" target="_blank">MusicBrainz</a>
-            </div>
+            <div class="content" v-html="musicbrainzItem"></div>
           </div>
           <div class="item">
             <i class="plus icon"></i>
@@ -147,6 +142,10 @@ export default {
       return {
         title: this.$pgettext('Head/Home/Title', "Welcome")
       }
+    },
+    musicbrainzItem () {
+      let msg = this.$pgettext('Content/Home/List item/Verb', 'Get quality metadata about your music thanks to <a href="%{ url }" target="_blank">MusicBrainz</a>')
+      return this.$gettextInterpolate(msg, {url: this.musicbrainzUrl})
     }
   }
 }
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index 639c8f51b..4d396bd1a 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -14,11 +14,7 @@
             <i class="circular inverted music orange icon"></i>
             <div class="content">
               {{ track.title }}
-              <div class="sub header">
-                <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 class="sub header" v-html="subtitle"></div>
             </div>
           </h2>
           <div class="header-buttons">
@@ -218,6 +214,10 @@ export default {
         ")"
       )
     },
+    subtitle () {
+      let msg = this.$pgettext('Content/Track/Paragraph', 'From album <a class="internal" href="%{ albumUrl }">%{ album }</a> by <a class="internal" href="%{ artistUrl }">%{ artist }</a>')
+      return this.$gettextInterpolate(msg, {album: this.track.album.title, artist: this.track.artist.name, albumUrl: this.albumUrl, artistUrl: this.artistUrl})
+    }
   },
   watch: {
     id() {