Merge branch '662-playlist-detail' into 'develop'

Added i18n string context

See merge request funkwhale/funkwhale!589

CONTRIBUTING.rst

@@ -432,7 +432,7 @@ This hierarchical structure is made of several parts:
     - ``Content``
     - ``Footer``
     - ``Menu``
-    - ``Modal``
+    - ``Popup``
     - ``Sidebar``
     - ``Head``
     - ``Popup``
@@ -492,7 +492,7 @@ Here are a few examples of valid context hierarchies:
 - ``Content/Home/Button/Call to action``
 - ``Footer/*/Help text``
 - ``*/*/*/Verb, Short``
-- ``Modal/Playlist/Button``
+- ``Popup/Playlist/Button``
 
 It's possible to nest multiple component parts to reach a higher level of detail. The component parts are then separated by a dot:
 

front/src/views/playlists/Detail.vue

@@ -13,7 +13,8 @@
               <translate
                 translate-plural="Playlist containing %{ count } tracks, by %{ username }"
                 :translate-n="playlist.tracks_count"
-                :translate-params="{count: playlist.tracks_count, username: playlist.user.username}">
+                :translate-params="{count: playlist.tracks_count, username: playlist.user.username}"
+								:translate-context="'Content/Playlist/Header.Subtitle'">
                 Playlist containing %{ count } track, by %{ username }
               </translate><br>
               <duration :seconds="playlist.duration" />
@@ -21,22 +22,22 @@
           </div>
         </h2>
         <div class="ui hidden divider"></div>
-        <play-button class="orange" :is-playable="playlist.is_playable" :tracks="tracks"><translate>Play all</translate></play-button>
+        <play-button class="orange" :is-playable="playlist.is_playable" :tracks="tracks"><translate :translate-context="'Content/*/Button.Label/Verb, Short'">Play all</translate></play-button>
         <button
           class="ui icon button"
           v-if="$store.state.auth.profile && playlist.user.id === $store.state.auth.profile.id"
           @click="edit = !edit">
           <i class="pencil icon"></i>
-          <template v-if="edit"><translate>End edition</translate></template>
-          <template v-else><translate>Edit…</translate></template>
+          <template v-if="edit"><translate :translate-context="'Content/Playlist/Button.Label/Verb'">End edition</translate></template>
+          <template v-else><translate :translate-context="'Content/*/Button.Label/Verb'">Edit…</translate></template>
         </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>
+          <i class="trash icon"></i> <translate :translate-context="'Content/*/Button.Label/Verb'">Delete</translate>
           <p slot="modal-header">
-            <translate :translate-params="{playlist: playlist.name}">Do you want to delete the playlist "%{ playlist }"?</translate>
+            <translate :translate-params="{playlist: playlist.name}" :translate-context="'Popup/Playlist/Title/Call to action'">Do you want to delete the playlist "%{ playlist }"?</translate>
           </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>
+          <p slot="modal-content"><translate :translate-context="'Popup/Playlist/Paragraph'">This will completely delete this playlist and cannot be undone.</translate></p>
+          <p slot="modal-confirm"><translate :translate-context="'Popup/Playlist/Button.Label/Verb'">Delete playlist</translate></p>
         </dangerous-button>
       </div>
     </section>
@@ -48,7 +49,7 @@
           :playlist="playlist" :playlist-tracks="playlistTracks"></playlist-editor>
       </template>
       <template v-else>
-        <h2><translate>Tracks</translate></h2>
+        <h2><translate :translate-context="'Content/*/Title/Name'">Tracks</translate></h2>
         <track-table :display-position="true" :tracks="tracks"></track-table>
       </template>
     </section>
@@ -87,7 +88,7 @@ export default {
   computed: {
     labels() {
       return {
-        playlist: this.$gettext("Playlist")
+        playlist: this.$gettext('Playlist')
       }
     }
   },