Merge branch '652-escaping' into 'master'

Fixed #652: escaping issues in translated strings

See merge request funkwhale/funkwhale!658

changes/changelog.d/652.bugfix

+Fixed escaping issues in translated strings (#652)

front/src/components/audio/album/Card.vue

@@ -11,7 +11,7 @@
         <div class="meta">
           <span>
             <router-link tag="span" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
-              <translate :translate-params="{artist: album.artist.name}">By %{ artist }</translate>
+              <span v-translate="{artist: album.artist.name}" :translate-params="{artist: album.artist.name}">By %{ artist }</span>
             </router-link>
           </span><span class="time" v-if="album.release_date">– {{ album.release_date | year }}</span>
         </div>

front/src/components/library/Track.vue

@@ -15,9 +15,10 @@
             <div class="content">
               {{ track.title }}
               <div class="sub header">
-                <translate
+                <span
+                  v-translate="{album: track.album.title, artist: track.artist.name}"
                   :translate-params="{album: track.album.title, artist: track.artist.name}"
-                >From album %{ album } by %{ artist }</translate>
+                >From album %{ album } by %{ artist }</span>
               </div>
               <br>
               <div class="ui basic buttons">

front/src/components/playlists/Editor.vue

@@ -39,8 +39,8 @@
 
       <dangerous-button :disabled="plts.length === 0" class="labeled right floated icon" color='yellow' :action="clearPlaylist">
         <i class="eraser icon"></i> <translate>Clear playlist</translate>
-        <p slot="modal-header">
-          <translate :translate-params="{playlist: playlist.name}">Do you want to clear the playlist "%{ playlist }"?</translate>
+        <p slot="modal-header" v-translate="{playlist: playlist.name}" :translate-params="{playlist: playlist.name}">
+          Do you want to clear the playlist "%{ playlist }"?
         </p>
         <p slot="modal-content"><translate>This will remove all tracks from this playlist and cannot be undone.</translate></p>
         <p slot="modal-confirm"><translate>Clear playlist</translate></p>

front/src/components/playlists/PlaylistModal.vue

@@ -7,11 +7,11 @@
       <div class="description">
         <template v-if="track">
           <h4 class="ui header"><translate>Current track</translate></h4>
-          <translate
+          <span
             v-translate="{artist: track.artist.name, title: track.title}"
             :translate-params="{artist: track.artist.name, title: track.title}">
             "%{ title }", by %{ artist }
-          </translate>
+          </span>
           <div class="ui divider"></div>
         </template>
 

front/src/views/playlists/Detail.vue

@@ -32,8 +32,8 @@
         </button>
         <dangerous-button v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id" class="labeled icon" :action="deletePlaylist">
           <i class="trash icon"></i> <translate>Delete</translate>
-          <p slot="modal-header">
-            <translate :translate-params="{playlist: playlist.name}">Do you want to delete the playlist "%{ playlist }"?</translate>
+          <p slot="modal-header" v-translate="{playlist: playlist.name}" :translate-params="{playlist: playlist.name}">
+            Do you want to delete the playlist "%{ playlist }"?
           </p>
           <p slot="modal-content"><translate>This will completely delete this playlist and cannot be undone.</translate></p>
           <p slot="modal-confirm"><translate>Delete playlist</translate></p>

front/src/views/radios/Detail.vue

@@ -24,7 +24,7 @@
           </router-link>
           <dangerous-button class="labeled icon" :action="deleteRadio">
             <i class="trash icon"></i> Delete
-            <p slot="modal-header"><translate :translate-params="{radio: radio.name}">Do you want to delete the radio "%{ radio }"?</translate></p>
+            <p slot="modal-header" v-translate="{radio: radio.name}" :translate-params="{radio: radio.name}">Do you want to delete the radio "%{ radio }"?</p>
             <p slot="modal-content"><translate>This will completely delete this radio and cannot be undone.</translate></p>
             <p slot="modal-confirm"><translate>Delete radio</translate></p>
           </dangerous-button>