From f66d95663f0b993b25c1a076c19ccd77270415d5 Mon Sep 17 00:00:00 2001
From: jovuit <jvuitton@disroot.org>
Date: Thu, 14 Feb 2019 10:40:20 +0100
Subject: [PATCH] #662: Resolve "Add contexts to translatable strings"

---
 front/src/components/library/Albums.vue       | 18 +++---
 front/src/components/library/Artist.vue       | 18 +++---
 front/src/components/library/Artists.vue      | 18 +++---
 front/src/components/library/FileUpload.vue   | 50 ++++++++--------
 front/src/components/library/Home.vue         | 10 ++--
 front/src/components/library/Library.vue      | 12 ++--
 front/src/components/library/Radios.vue       | 24 ++++----
 front/src/components/library/Track.vue        | 58 +++++++++----------
 .../src/components/library/radios/Builder.vue | 38 ++++++------
 .../src/components/library/radios/Filter.vue  |  6 +-
 10 files changed, 126 insertions(+), 126 deletions(-)

diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 4884cf0ee..5934bbe3b 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -2,18 +2,18 @@
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate>Browsing albums</translate>
+        <translate :translate-context="'Content/Album/Title'">Browsing albums</translate>
       </h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">
         <div class="fields">
           <div class="field">
             <label>
-              <translate>Search</translate>
+              <translate :translate-context="'Content/Search/Input.Label/Verb'">Search</translate>
             </label>
             <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
           </div>
           <div class="field">
-            <label><translate>Ordering</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label/Noun'">Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
                 {{ sharedLabels.filters[option[1]] }}
@@ -21,14 +21,14 @@
             </select>
           </div>
           <div class="field">
-            <label><translate>Ordering direction</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label/Noun'">Ordering direction</translate></label>
             <select class="ui dropdown" v-model="orderingDirection">
-              <option value="+"><translate>Ascending</translate></option>
-              <option value="-"><translate>Descending</translate></option>
+              <option value="+"><translate :translate-context="'Content/Search/Dropdown'">Ascending</translate></option>
+              <option value="-"><translate :translate-context="'Content/Search/Dropdown'">Descending</translate></option>
             </select>
           </div>
           <div class="field">
-            <label><translate>Results per page</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label/Noun'">Results per page</translate></label>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
               <option :value="parseInt(25)">25</option>
@@ -116,8 +116,8 @@ export default {
   },
   computed: {
     labels() {
-      let searchPlaceholder = this.$gettext("Enter album title...")
-      let title = this.$gettext("Albums")
+      let searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', "Enter album title...")
+      let title = this.$pgettext('Head/Album/Title', "Albums")
       return {
         searchPlaceholder,
         title
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
index dd2be35ae..c5f6acfb7 100644
--- a/front/src/components/library/Artist.vue
+++ b/front/src/components/library/Artist.vue
@@ -11,7 +11,7 @@
             <div class="content">
               {{ artist.name }}
               <div class="sub header" v-if="albums">
-                <translate
+                <translate :translate-context="'Content/Artist/Paragraph'"
                   tag="div"
                   translate-plural="%{ count } tracks in %{ albumsCount } albums"
                   :translate-n="totalTracks"
@@ -24,16 +24,16 @@
           <div class="ui hidden divider"></div>
           <radio-button type="artist" :object-id="artist.id"></radio-button>
           <play-button :is-playable="isPlayable" class="orange" :artist="artist.id">
-            <translate>Play all albums</translate>
+            <translate :translate-context="'Content/Artist/Button.Label/Verb'">Play all albums</translate>
           </play-button>
 
           <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia w icon"></i>
-            <translate>Search on Wikipedia</translate>
+            <translate :translate-context="'Content/*/Button.Label/Verb'">Search on Wikipedia</translate>
           </a>
           <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
-            <translate>View on MusicBrainz</translate>
+            <translate :translate-context="'Content/*/Button.Label/Verb'">View on MusicBrainz</translate>
           </a>
         </div>
       </section>
@@ -42,7 +42,7 @@
       </section>
       <section v-else-if="albums && albums.length > 0" class="ui vertical stripe segment">
         <h2>
-          <translate>Albums by this artist</translate>
+          <translate :translate-context="'Content/Artist/Title'">Albums by this artist</translate>
         </h2>
         <div class="ui cards" >
           <album-card :mode="'rich'" :album="album" :key="album.id" v-for="album in albums"></album-card>
@@ -50,16 +50,16 @@
       </section>
       <section v-if="tracks.length > 0" class="ui vertical stripe segment">
         <h2>
-          <translate>Tracks by this artist</translate>
+          <translate :translate-context="'Content/Artist/Title'">Tracks by this artist</translate>
         </h2>
         <track-table :display-position="true" :tracks="tracks"></track-table>
       </section>
       <section class="ui vertical stripe segment">
         <h2>
-          <translate>User libraries</translate>
+          <translate :translate-context="'Content/Artist/Title'">User libraries</translate>
         </h2>
         <library-widget :url="'artists/' + id + '/libraries/'">
-          <translate slot="subtitle">This artist is present in the following libraries:</translate>
+          <translate :translate-context="'Content/Artist/Paragraph'" slot="subtitle">This artist is present in the following libraries:</translate>
         </library-widget>
       </section>
     </template>
@@ -132,7 +132,7 @@ export default {
   computed: {
     labels() {
       return {
-        title: this.$gettext("Artist")
+        title: this.$pgettext('Head/Artist/Title', "Artist")
       }
     },
     isPlayable() {
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 41b3b2c6f..4fc30977e 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -2,18 +2,18 @@
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate>Browsing artists</translate>
+        <translate :translate-context="'Content/Artist/Title'">Browsing artists</translate>
       </h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">
         <div class="fields">
           <div class="field">
             <label>
-              <translate>Search</translate>
+              <translate :translate-context="'Content/Search/Input.Label/Verb'">Search</translate>
             </label>
             <input type="text" name="search" v-model="query" :placeholder="labels.searchPlaceholder"/>
           </div>
           <div class="field">
-            <label><translate>Ordering</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label/Noun'">Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
                 {{ sharedLabels.filters[option[1]] }}
@@ -21,14 +21,14 @@
             </select>
           </div>
           <div class="field">
-            <label><translate>Ordering direction</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label/Noun'">Ordering direction</translate></label>
             <select class="ui dropdown" v-model="orderingDirection">
-              <option value="+"><translate>Ascending</translate></option>
-              <option value="-"><translate>Descending</translate></option>
+              <option value="+"><translate :translate-context="'Content/Search/Dropdown'">Ascending</translate></option>
+              <option value="-"><translate :translate-context="'Content/Search/Dropdown'">Descending</translate></option>
             </select>
           </div>
           <div class="field">
-            <label><translate>Results per page</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label'">Results per page</translate></label>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
               <option :value="parseInt(25)">25</option>
@@ -113,8 +113,8 @@ export default {
   },
   computed: {
     labels() {
-      let searchPlaceholder = this.$gettext("Enter artist name…")
-      let title = this.$gettext("Artists")
+      let searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', "Enter artist name…")
+      let title = this.$pgettext('Head/Artist/Title', "Artists")
       return {
         searchPlaceholder,
         title
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index b7c164eb1..dd29fa11d 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -1,9 +1,9 @@
   <template>
   <div>
     <div class="ui top attached tabular menu">
-      <a :class="['item', {active: currentTab === 'summary'}]" @click="currentTab = 'summary'"><translate>Summary</translate></a>
+      <a :class="['item', {active: currentTab === 'summary'}]" @click="currentTab = 'summary'"><translate :translate-context="'Content/Library/Tab.Title/Short'">Summary</translate></a>
       <a :class="['item', {active: currentTab === 'uploads'}]" @click="currentTab = 'uploads'">
-        <translate>Uploading</translate>
+        <translate :translate-context="'Content/Library/Tab.Title/Short'">Uploading</translate>
         <div v-if="files.length === 0" class="ui label">
           0
         </div>
@@ -15,7 +15,7 @@
         </div>
       </a>
       <a :class="['item', {active: currentTab === 'processing'}]" @click="currentTab = 'processing'">
-        <translate>Processing</translate>
+        <translate :translate-context="'Content/Library/Tab.Title/Short'">Processing</translate>
         <div v-if="processableFiles === 0" class="ui label">
           0
         </div>
@@ -29,19 +29,19 @@
     </div>
 
     <div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'summary'}]">
-      <h2 class="ui header"><translate>Upload new tracks</translate></h2>
+      <h2 class="ui header"><translate :translate-context="'Content/Library/Title/Verb'">Upload new tracks</translate></h2>
       <div class="ui message">
-        <p><translate>You are about to upload music to your library. Before proceeding, please ensure that:</translate></p>
+        <p><translate :translate-context="'Content/Library/Paragraph'">You are about to upload music to your library. Before proceeding, please ensure that:</translate></p>
         <ul>
           <li v-if="library.privacy_level != 'me'">
-            You are not uploading copyrighted content in a public library, otherwise you may be infringing the law
+						<translate :translate-context="'Content/Library/List item'">You are not uploading copyrighted content in a public library, otherwise you may be infringing the law</translate>
           </li>
           <li>
-            <translate>The music files you are uploading are tagged properly:</translate>
-            <a href="http://picard.musicbrainz.org/" target='_blank'><translate>We recommend using Picard for that purpose.</translate></a>
+            <translate :translate-context="'Content/Library/List item'">The music files you are uploading are tagged properly.</translate>&nbsp;
+            <a href="http://picard.musicbrainz.org/" target='_blank'><translate :translate-context="'Content/Library/Link'">We recommend using Picard for that purpose.</translate></a>
           </li>
           <li>
-            <translate>The uploaded music files are in OGG, Flac or MP3 format</translate>
+            <translate :translate-context="'Content/Library/List item'">The uploaded music files are in OGG, Flac or MP3 format</translate>
           </li>
         </ul>
       </div>
@@ -49,14 +49,14 @@
       <div class="ui form">
         <div class="fields">
           <div class="ui four wide field">
-            <label><translate>Import reference</translate></label>
-            <p><translate>This reference will be used to group imported files together.</translate></p>
+            <label><translate :translate-context="'Content/Library/Input.Label/Noun'">Import reference</translate></label>
+            <p><translate :translate-context="'Content/Library/Paragraph'">This reference will be used to group imported files together.</translate></p>
             <input name="import-ref" type="text" v-model="importReference" />
           </div>
         </div>
 
       </div>
-      <div class="ui green button" @click="currentTab = 'uploads'"><translate>Proceed</translate></div>
+      <div class="ui green button" @click="currentTab = 'uploads'"><translate :translate-context="'Content/Library/Button.Label'">Proceed</translate></div>
     </div>
     <div :class="['ui', 'bottom', 'attached', 'segment', {hidden: currentTab != 'uploads'}]">
       <div class="ui container">
@@ -73,18 +73,18 @@
           @input-file="inputFile"
           ref="upload">
           <i class="upload icon"></i>&nbsp;
-          <translate>Click to select files to upload or drag and drop files or directories</translate>
+          <translate :translate-context="'Content/Library/Paragraph/Call to action'">Click to select files to upload or drag and drop files or directories</translate>
           <br />
           <br />
-          <i><translate :translate-params="{extensions: supportedExtensions.join(', ')}">  Supported extensions: %{ extensions }</translate></i>
+          <i><translate :translate-context="'Content/Library/Paragraph'" :translate-params="{extensions: supportedExtensions.join(', ')}">Supported extensions: %{ extensions }</translate></i>
         </file-upload-widget>
       </div>
       <table v-if="files.length > 0" class="ui single line table">
         <thead>
           <tr>
-            <th><translate>Filename</translate></th>
-            <th><translate>Size</translate></th>
-            <th><translate>Status</translate></th>
+            <th><translate :translate-context="'Content/Library/Table.Label'">Filename</translate></th>
+            <th><translate :translate-context="'Content/Library/Table.Label'">Size</translate></th>
+            <th><translate :translate-context="'Content/Library/Table.Label'">Status</translate></th>
           </tr>
         </thead>
         <tbody>
@@ -98,14 +98,14 @@
                 </span>
               </span>
               <span v-else-if="file.success" class="ui green label">
-                <translate key="1">Uploaded</translate>
+                <translate :translate-context="'Content/Library/Table'" key="1">Uploaded</translate>
               </span>
               <span v-else-if="file.active" class="ui yellow label">
-                <translate key="2">Uploading…</translate>
+                <translate :translate-context="'Content/Library/Table'" key="2">Uploading…</translate>
                 ({{ parseInt(file.progress) }}%)
               </span>
               <template v-else>
-                <span class="ui label"><translate key="3">Pending</translate></span>
+                <span class="ui label"><translate :translate-context="'Content/Library/Table'" key="3">Pending</translate></span>
                 <button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
               </template>
             </td>
@@ -217,17 +217,17 @@ export default {
   },
   computed: {
     labels() {
-      let denied = this.$gettext(
+      let denied = this.$pgettext('Content/Library/Help text', 
         "Upload denied, ensure the file is not too big and that you have not reached your quota"
       );
-      let server = this.$gettext(
+      let server = this.$pgettext('Content/Library/Help text', 
         "Cannot upload this file, ensure it is not too big"
       );
-      let network = this.$gettext(
+      let network = this.$pgettext('Content/Library/Help text', 
         "A network error occured while uploading this file"
       );
-      let timeout = this.$gettext("Upload timeout, please try again");
-      let extension = this.$gettext(
+      let timeout = this.$pgettext('Content/Library/Help text', "Upload timeout, please try again");
+      let extension = this.$pgettext('Content/Library/Help text', 
         "Invalid file type, ensure you are uploading an audio file. Supported file extensions are %{ extensions }"
       );
       return {
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 5e81dbdc8..7e44a46d2 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -4,17 +4,17 @@
       <div class="ui stackable three column grid">
         <div class="column">
           <track-widget :url="'history/listenings/'" :filters="{scope: 'user', ordering: '-creation_date'}">
-            <template slot="title"><translate>Recently listened</translate></template>
+            <template slot="title"><translate :translate-context="'Content/Home/Title'">Recently listened</translate></template>
           </track-widget>
         </div>
         <div class="column">
           <track-widget :url="'favorites/tracks/'" :filters="{scope: 'user', ordering: '-creation_date'}">
-            <template slot="title"><translate>Recently favorited</translate></template>
+            <template slot="title"><translate :translate-context="'Content/Home/Title'">Recently favorited</translate></template>
           </track-widget>
         </div>
         <div class="column">
           <playlist-widget :url="'playlists/'" :filters="{scope: 'user', playable: true, ordering: '-creation_date'}">
-            <template slot="title"><translate>Playlists</translate></template>
+            <template slot="title"><translate :translate-context="'Content/Home/Title'">Playlists</translate></template>
           </playlist-widget>
         </div>
       </div>
@@ -22,7 +22,7 @@
       <div class="ui grid">
         <div class="ui row">
           <album-widget :filters="{playable: true, ordering: '-creation_date'}">
-            <template slot="title"><translate>Recently added</translate></template>
+            <template slot="title"><translate :translate-context="'Content/Home/Title'">Recently added</translate></template>
           </album-widget>
         </div>
       </div>
@@ -62,7 +62,7 @@ export default {
   computed: {
     labels() {
       return {
-        title: this.$gettext("Home")
+        title: this.$pgettext('Head/Home/Title', "Home")
       }
     }
   },
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index 0276c34d0..06fdd2bd3 100644
--- a/front/src/components/library/Library.vue
+++ b/front/src/components/library/Library.vue
@@ -2,19 +2,19 @@
   <div class="main library pusher">
     <nav class="ui secondary pointing menu" role="navigation" :aria-label="labels.secondaryMenu">
       <router-link class="ui item" to="/library" exact>
-        <translate>Browse</translate>
+        <translate :translate-context="'Menu/Home/Link/Verb'">Browse</translate>
       </router-link>
       <router-link class="ui item" to="/library/albums" exact>
-        <translate>Albums</translate>
+        <translate :translate-context="'Menu/Home/Link'">Albums</translate>
       </router-link>
       <router-link class="ui item" to="/library/artists" exact>
-        <translate>Artists</translate>
+        <translate :translate-context="'Menu/Home/Link'">Artists</translate>
       </router-link>
       <router-link class="ui item" to="/library/radios" exact>
-        <translate>Radios</translate>
+        <translate :translate-context="'Menu/Home/Link'">Radios</translate>
       </router-link>
       <router-link class="ui item" to="/library/playlists" exact>
-        <translate>Playlists</translate>
+        <translate :translate-context="'Menu/Home/Link'">Playlists</translate>
       </router-link>
     </nav>
     <router-view :key="$route.fullPath"></router-view>
@@ -32,7 +32,7 @@ export default {
     },
     labels() {
       return {
-        secondaryMenu: this.$gettext("Secondary menu")
+        secondaryMenu: this.$pgettext('Menu/*/Hidden text', "Secondary menu")
       }
     }
   }
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 5b433dcb2..273d6ca79 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -2,12 +2,12 @@
   <main v-title="labels.title">
     <section class="ui vertical stripe segment">
       <h2 class="ui header">
-        <translate>Browsing radios</translate>
+        <translate :translate-context="'Content/Radio/Title'">Browsing radios</translate>
       </h2>
       <div class="ui hidden divider"></div>
       <div class="ui row">
         <h3 class="ui header">
-          <translate>Instance radios</translate>
+          <translate :translate-context="'Content/Radio/Title'">Instance radios</translate>
         </h3>
         <div class="ui cards">
           <radio-card :type="'favorites'"></radio-card>
@@ -18,20 +18,20 @@
 
       <div class="ui hidden divider"></div>
       <h3 class="ui header">
-        <translate>User radios</translate>
+        <translate :translate-context="'Content/Radio/Title'">User radios</translate>
       </h3>
       <router-link class="ui green basic button" to="/library/radios/build" exact>
-        <translate>Create your own radio</translate>
+        <translate :translate-context="'Content/Radio/Button.Label/Verb'">Create your own radio</translate>
       </router-link>
       <div class="ui hidden divider"></div>
       <div :class="['ui', {'loading': isLoading}, 'form']">
         <div class="fields">
           <div class="field">
-            <label><translate>Search</translate></label>
+            <label><translate :translate-context="'Content/Search/Input.Label/Verb'">Search</translate></label>
             <input name="search" type="text" v-model="query" :placeholder="labels.searchPlaceholder"/>
           </div>
           <div class="field">
-            <label><translate>Ordering</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label'">Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
                 {{ sharedLabels.filters[option[1]] }}
@@ -39,18 +39,18 @@
             </select>
           </div>
           <div class="field">
-            <label><translate>Order</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label'">Order</translate></label>
             <select class="ui dropdown" v-model="orderingDirection">
               <option value="+">
-                <translate>Ascending</translate>
+                <translate :translate-context="'Content/Search/Dropdown'">Ascending</translate>
               </option>
               <option value="-">
-                <translate>Descending</translate>
+                <translate :translate-context="'Content/Search/Dropdown'">Descending</translate>
               </option>
             </select>
           </div>
           <div class="field">
-            <label><translate>Results per page</translate></label>
+            <label><translate :translate-context="'Content/Search/Dropdown.Label'">Results per page</translate></label>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
               <option :value="parseInt(25)">25</option>
@@ -138,8 +138,8 @@ export default {
   },
   computed: {
     labels() {
-      let searchPlaceholder = this.$gettext("Enter a radio name…")
-      let title = this.$gettext("Radios")
+      let searchPlaceholder = this.$pgettext('Content/Search/Input.Placeholder', "Enter a radio name…")
+      let title = this.$pgettext('Head/Radio/Title', "Radios")
       return {
         searchPlaceholder,
         title
diff --git a/front/src/components/library/Track.vue b/front/src/components/library/Track.vue
index 866231b62..2772ec208 100644
--- a/front/src/components/library/Track.vue
+++ b/front/src/components/library/Track.vue
@@ -15,7 +15,7 @@
             <div class="content">
               {{ track.title }}
               <div class="sub header">
-                <translate
+                <translate :translate-context="'Content/Track/Paragraph'"
                   :translate-params="{album: track.album.title, artist: track.artist.name}"
                 >From album %{ album } by %{ artist }</translate>
               </div>
@@ -25,46 +25,46 @@
                   class="ui button"
                   :to="{name: 'library.albums.detail', params: {id: track.album.id }}"
                 >
-                  <translate>Album page</translate>
+                  <translate :translate-context="'Content/Track/Button.Label'">Album page</translate>
                 </router-link>
                 <router-link
                   class="ui button"
                   :to="{name: 'library.artists.detail', params: {id: track.artist.id }}"
                 >
-                  <translate>Artist page</translate>
+                  <translate :translate-context="'Content/Track/Button.Label'">Artist page</translate>
                 </router-link>
               </div>
             </div>
           </h2>
 
           <play-button class="orange" :track="track">
-            <translate>Play</translate>
+            <translate :translate-context="'*/Queue/Button.Label/Short, Verb'">Play</translate>
           </play-button>
           <track-favorite-icon :track="track" :button="true"></track-favorite-icon>
           <track-playlist-icon :button="true" v-if="$store.state.auth.authenticated" :track="track"></track-playlist-icon>
 
           <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia w icon"></i>
-            <translate>Search on Wikipedia</translate>
+            <translate :translate-context="'Content/*/Link/Verb'">Search on Wikipedia</translate>
           </a>
           <a v-if="musicbrainzUrl" :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
-            <translate>View on MusicBrainz</translate>
+            <translate :translate-context="'Content/*/Link/Verb'">View on MusicBrainz</translate>
           </a>
           <a v-if="upload" :href="downloadUrl" target="_blank" class="ui button">
             <i class="download icon"></i>
-            <translate>Download</translate>
+            <translate :translate-context="'Content/Track/Link/Verb'">Download</translate>
           </a>
           <template v-if="publicLibraries.length > 0">
             <button
               @click="showEmbedModal = !showEmbedModal"
               class="ui button">
               <i class="code icon"></i>
-              <translate>Embed</translate>
+              <translate :translate-context="'Content/Track/Button.Label/Verb'">Embed</translate>
             </button>
             <modal :show.sync="showEmbedModal">
               <div class="header">
-                <translate>Embed this track on your website</translate>
+                <translate :translate-context="'Popup/Track/Title'">Embed this track on your website</translate>
               </div>
               <div class="content">
                 <div class="description">
@@ -74,7 +74,7 @@
               </div>
               <div class="actions">
                 <div class="ui deny button">
-                  <translate>Cancel</translate>
+                  <translate :translate-context="'Popup/Track/Button/Verb'">Cancel</translate>
                 </div>
               </div>
             </modal>
@@ -83,64 +83,64 @@
       </section>
       <section class="ui vertical stripe center aligned segment">
         <h2 class="ui header">
-          <translate>Track information</translate>
+          <translate :translate-context="'Content/Track/Title/Noun'">Track information</translate>
         </h2>
         <table class="ui very basic collapsing celled center aligned table">
           <tbody>
             <tr>
               <td>
-                <translate>Copyright</translate>
+                <translate :translate-context="'Content/Track/Table.Label/Noun'">Copyright</translate>
               </td>
               <td v-if="track.copyright" :title="track.copyright">{{ track.copyright|truncate(50) }}</td>
               <td v-else>
-                <translate>We don't have any copyright information for this track</translate>
+                <translate :translate-context="'Content/Track/Table.Paragraph'">No copyright information available for this track</translate>
               </td>
             </tr>
             <tr>
               <td>
-                <translate>License</translate>
+                <translate :translate-context="'Content/Track/Table.Label/Noun'">License</translate>
               </td>
               <td v-if="license">
                 <a :href="license.url" target="_blank" rel="noopener noreferrer">{{ license.name }}</a>
               </td>
               <td v-else>
-                <translate>We don't have any licensing information for this track</translate>
+                <translate :translate-context="'Content/Track/Table.Paragraph'">No licensing information for this track</translate>
               </td>
             </tr>
             <tr>
               <td>
-                <translate>Duration</translate>
+                <translate :translate-context="'Content/Track/Table.Label'">Duration</translate>
               </td>
               <td v-if="upload && upload.duration">{{ time.parse(upload.duration) }}</td>
               <td v-else>
-                <translate>N/A</translate>
+                <translate :translate-context="'*/*/*'">N/A</translate>
               </td>
             </tr>
             <tr>
               <td>
-                <translate>Size</translate>
+                <translate :translate-context="'Content/Track/Table.Label'">Size</translate>
               </td>
               <td v-if="upload && upload.size">{{ upload.size | humanSize }}</td>
               <td v-else>
-                <translate>N/A</translate>
+                <translate :translate-context="'*/*/*'">N/A</translate>
               </td>
             </tr>
             <tr>
               <td>
-                <translate>Bitrate</translate>
+                <translate :translate-context="'Content/Track/Table.Label'">Bitrate</translate>
               </td>
               <td v-if="upload && upload.bitrate">{{ upload.bitrate | humanSize }}/s</td>
               <td v-else>
-                <translate>N/A</translate>
+                <translate :translate-context="'*/*/*'">N/A</translate>
               </td>
             </tr>
             <tr>
               <td>
-                <translate>Type</translate>
+                <translate :translate-context="'Content/Track/Table.Label/Noun'">Type</translate>
               </td>
               <td v-if="upload && upload.extension">{{ upload.extension }}</td>
               <td v-else>
-                <translate>N/A</translate>
+                <translate :translate-context="'*/*/*'">N/A</translate>
               </td>
             </tr>
           </tbody>
@@ -148,7 +148,7 @@
       </section>
       <section class="ui vertical stripe center aligned segment">
         <h2>
-          <translate>Lyrics</translate>
+          <translate :translate-context="'Content/Track/Title'">Lyrics</translate>
         </h2>
         <div v-if="isLoadingLyrics" class="ui vertical segment">
           <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
@@ -156,20 +156,20 @@
         <div v-if="lyrics" v-html="lyrics.content_rendered"></div>
         <template v-if="!isLoadingLyrics & !lyrics">
           <p>
-            <translate>No lyrics available for this track.</translate>
+            <translate :translate-context="'Content/Track/Paragraph'">No lyrics available for this track.</translate>
           </p>
           <a class="ui button" target="_blank" :href="lyricsSearchUrl">
             <i class="search icon"></i>
-            <translate>Search on lyrics.wikia.com</translate>
+            <translate :translate-context="'Content/Track/Link/Verb'">Search on lyrics.wikia.com</translate>
           </a>
         </template>
       </section>
       <section class="ui vertical stripe segment">
         <h2>
-          <translate>User libraries</translate>
+          <translate :translate-context="'Content/Track/Title'">User libraries</translate>
         </h2>
         <library-widget @loaded="libraries = $event" :url="'tracks/' + id + '/libraries/'">
-          <translate slot="subtitle">This track is present in the following libraries:</translate>
+          <translate :translate-context="'Content/Track/Paragraph'" slot="subtitle">This track is present in the following libraries:</translate>
         </library-widget>
       </section>
     </template>
@@ -259,7 +259,7 @@ export default {
     },
     labels() {
       return {
-        title: this.$gettext("Track")
+        title: this.$pgettext('Head/Track/Title', "Track")
       }
     },
     upload() {
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 77a63b86d..2f543a752 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -3,52 +3,52 @@
     <div>
       <section>
         <h2 class="ui header">
-          <translate>Builder</translate>
+          <translate :translate-context="'Content/Radio/Title'">Builder</translate>
         </h2>
-        <p><translate>You can use this interface to build your own custom radio, which will play tracks according to your criteria.</translate></p>
+        <p><translate :translate-context="'Content/Radio/Paragraph'">You can use this interface to build your own custom radio, which will play tracks according to your criteria.</translate></p>
         <div class="ui form">
           <div v-if="success" class="ui positive message">
             <div class="header">
               <template v-if="radioName">
-                <translate>Radio updated</translate>
+                <translate :translate-context="'Content/Radio/Message'">Radio updated</translate>
               </template>
               <template v-else>
-                <translate>Radio created</translate>
+                <translate :translate-context="'Content/Radio/Message'">Radio created</translate>
               </template>
             </div>
           </div>
           <div class="">
             <div class="field">
-              <label for="name"><translate>Radio name</translate></label>
+              <label for="name"><translate :translate-context="'Content/Radio/Input.Label/Noun'">Radio name</translate></label>
               <input id="name" name="name" type="text" v-model="radioName" :placeholder="labels.placeholder.name" />
             </div>
             <div class="field">
-              <label for="description"><translate>Description</translate></label>
+              <label for="description"><translate :translate-context="'Content/Radio/Input.Label'">Description</translate></label>
               <textarea rows="2" id="description" type="text" v-model="radioDesc" :placeholder="labels.placeholder.description" />
             </div>
             <div class="inline field">
               <input id="public" type="checkbox" v-model="isPublic" />
-              <label for="public"><translate>Display publicly</translate></label>
+              <label for="public"><translate :translate-context="'Content/Radio/Checkbox.Label/Verb'">Display publicly</translate></label>
             </div>
             <button :disabled="!canSave" @click="save" :class="['ui', 'green', {loading: isLoading}, 'button']">
-              <translate>Save</translate>
+              <translate :translate-context="'Content/Radio/Button.Label/Verb'">Save</translate>
             </button>
             <radio-button v-if="id" type="custom" :custom-radio-id="id"></radio-button>
           </div>
         </div>
         <div class="ui form">
           <p>
-            <translate>Add filters to customize your radio</translate>
+            <translate :translate-context="'Content/Radio/Paragraph'">Add filters to customize your radio</translate>
           </p>
           <div class="inline field">
             <select class="ui dropdown" v-model="currentFilterType">
               <option value="">
-                <translate>Select a filter</translate>
+                <translate :translate-context="'Content/Radio/Dropdown.Placeholder/Verb'">Select a filter</translate>
               </option>
               <option v-for="f in availableFilters" :value="f.type">{{ f.label }}</option>
             </select>
             <button :disabled="!currentFilterType" @click="add" class="ui button">
-              <translate>Add filter</translate>
+              <translate :translate-context="'Content/Radio/Button.Label/Verb'">Add filter</translate>
             </button>
           </div>
           <p v-if="currentFilter">
@@ -58,11 +58,11 @@
         <table class="ui table">
           <thead>
             <tr>
-              <th class="two wide"><translate>Filter name</translate></th>
-              <th class="one wide"><translate>Exclude</translate></th>
-              <th class="six wide"><translate>Config</translate></th>
-              <th class="five wide"><translate>Candidates</translate></th>
-              <th class="two wide"><translate>Actions</translate></th>
+              <th class="two wide"><translate :translate-context="'Content/Radio/Table.Label/Noun'">Filter name</translate></th>
+              <th class="one wide"><translate :translate-context="'Content/Radio/Table.Label/Verb'">Exclude</translate></th>
+              <th class="six wide"><translate :translate-context="'Content/Radio/Table.Label/Verb (Value is a List of Parameters)'">Config</translate></th>
+              <th class="five wide"><translate :translate-context="'Content/Radio/Table.Label/Noun (Value is a number of Tracks)'">Candidates</translate></th>
+              <th class="two wide"><translate :translate-context="'Content/Radio/Table.Label/Noun (Value is a Button)'">Actions</translate></th>
             </tr>
           </thead>
           <tbody>
@@ -230,10 +230,10 @@ export default {
   },
   computed: {
     labels() {
-      let title = this.$gettext("Radio Builder")
+      let title = this.$pgettext('Head/Radio/Title', "Radio Builder")
       let placeholder = {
-        name: this.$gettext("My awesome radio"),
-        description: this.$gettext("My awesome description")
+        name: this.$pgettext('Content/Radio/Input.Placeholder', "My awesome radio"),
+        description: this.$pgettext('Content/Radio/Input.Placeholder', "My awesome description")
       }
       return {
         title,
diff --git a/front/src/components/library/radios/Filter.vue b/front/src/components/library/radios/Filter.vue
index fcf5efb8d..ad1fb2de4 100644
--- a/front/src/components/library/radios/Filter.vue
+++ b/front/src/components/library/radios/Filter.vue
@@ -42,7 +42,7 @@
       </span>
       <modal v-if="checkResult" :show.sync="showCandidadesModal">
         <div class="header">
-          <translate>Track matching filter</translate>
+          <translate :translate-context="'Popup/Radio/Title/Noun'">Tracks matching filter</translate>
         </div>
         <div class="content">
           <div class="description">
@@ -51,13 +51,13 @@
         </div>
         <div class="actions">
           <div class="ui black deny button">
-            <translate>Cancel</translate>
+            <translate :translate-context="'Popup/Radio/Button.Label/Verb'">Cancel</translate>
           </div>
         </div>
       </modal>
     </td>
     <td>
-      <button @click="$emit('delete', index)" class="ui basic red button"><translate>Remove</translate></button>
+      <button @click="$emit('delete', index)" class="ui basic red button"><translate :translate-context="'Content/Radio/Button.Label/Verb'">Remove</translate></button>
     </td>
   </tr>
 </template>