From baa18bbdc7f49f615b3e63c82650b314ef71d6e8 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 26 Jan 2019 13:13:48 +0100
Subject: [PATCH] Fix #676: overescaping issue in notifications and album page

---
 changes/changelog.d/676.bugfix                       |  1 +
 front/src/components/library/Album.vue               | 12 +++++-------
 .../src/components/notifications/NotificationRow.vue |  6 +++---
 3 files changed, 9 insertions(+), 10 deletions(-)
 create mode 100644 changes/changelog.d/676.bugfix

diff --git a/changes/changelog.d/676.bugfix b/changes/changelog.d/676.bugfix
new file mode 100644
index 000000000..30829cd19
--- /dev/null
+++ b/changes/changelog.d/676.bugfix
@@ -0,0 +1 @@
+Fixed overescaping issue in notifications and album page (#676)
diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
index ba354914e..bb33b7e7f 100644
--- a/front/src/components/library/Album.vue
+++ b/front/src/components/library/Album.vue
@@ -10,13 +10,7 @@
             <i class="circular inverted sound yellow icon"></i>
             <div class="content">
               {{ album.title }}
-              <translate
-                tag="div"
-                translate-plural="Album containing %{ count } tracks, by %{ artist }"
-                :translate-n="album.tracks.length"
-                :translate-params="{count: album.tracks.length, artist: album.artist.name}">
-                Album containing %{ count } track, by %{ artist }
-              </translate>
+              <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 }}">
@@ -184,6 +178,10 @@ export default {
         this.$store.getters["instance/absoluteUrl"](this.album.cover.original) +
         ")"
       )
+    },
+    subtitle () {
+      let msg = this.$ngettext('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})
     }
   },
   watch: {
diff --git a/front/src/components/notifications/NotificationRow.vue b/front/src/components/notifications/NotificationRow.vue
index db5918c47..b134bc96b 100644
--- a/front/src/components/notifications/NotificationRow.vue
+++ b/front/src/components/notifications/NotificationRow.vue
@@ -4,10 +4,10 @@
       <actor-link class="user" :actor="item.activity.actor" />
     </td>
     <td>
-      <router-link tag="span" class="link" v-if="notificationData.detailUrl" :to="notificationData.detailUrl">
-        {{ notificationData.message }}
+      <router-link tag="span" class="link" v-if="notificationData.detailUrl" :to="notificationData.detailUrl" v-html="notificationData.message">
+
       </router-link>
-      <template v-else>{{ notificationData.message }}</template>
+      <template v-else v-html="notificationData.message"></template>
       <template v-if="notificationData.action">&nbsp;
         <div @click="handleAction(notificationData.action.handler)" :class="['ui', 'basic', 'tiny', notificationData.action.buttonClass || '', 'button']">
           <i v-if="notificationData.action.icon" :class="[notificationData.action.icon, 'icon']" />