Merge branch '833-translation-issue-homepage' into 'master'

Fix #833: broken translation on homepage

See merge request funkwhale/funkwhale!784

changes/changelog.d/833.bugfix

+Fixed broken translation on home and track detail page (#833)

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})
     }
   }
 }

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() {