Merge branch '676-notification-encoding' into 'master'

Fix #676: overescaping issue in notifications and album page

See merge request funkwhale/funkwhale!564

changes/changelog.d/676.bugfix

@@ -0,0 +1 @@
+Fixed overescaping issue in notifications and album page (#676)

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: {

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']" />