From c7b39cf9c931b2e36c6628c93bbb216233836b94 Mon Sep 17 00:00:00 2001
From: Bat <baptiste@gelez.xyz>
Date: Sun, 15 Apr 2018 11:45:56 +0100
Subject: [PATCH] I18n: library

---
 front/src/components/library/Album.vue   | 16 +++---
 front/src/components/library/Artist.vue  | 15 ++++--
 front/src/components/library/Artists.vue | 10 ++--
 front/src/components/library/Home.vue    |  6 +--
 front/src/components/library/Library.vue | 17 +++---
 front/src/components/library/Radios.vue  | 18 ++++---
 front/src/components/library/Track.vue   | 31 ++++++-----
 po/funkwhale.pot                         | 68 ++++++++++++++++++++++++
 8 files changed, 129 insertions(+), 52 deletions(-)

diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
index 1e96757c3..1681d46e3 100644
--- a/front/src/components/library/Album.vue
+++ b/front/src/components/library/Album.vue
@@ -10,30 +10,30 @@
             <i class="circular inverted sound yellow icon"></i>
             <div class="content">
               {{ album.title }}
-              <div class="sub header">
-                Album containing {{ album.tracks.length }} tracks,
-                by <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
+              <i18next tag="div" class="sub header" path="Album containing {%0%} tracks, by {%1%}">
+                {{ album.tracks.length }}
+                <router-link :to="{name: 'library.artists.detail', params: {id: album.artist.id }}">
                   {{ album.artist.name }}
                 </router-link>
-              </div>
+              </i18next>
             </div>
           </h2>
           <div class="ui hidden divider"></div>
           </button>
-          <play-button class="orange" :tracks="album.tracks">Play all</play-button>
+          <play-button class="orange" :tracks="album.tracks"><i18next path="Play all"/></play-button>
 
           <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia icon"></i>
-            Search on wikipedia
+            <i18next path="Search on Wikipedia"/>
           </a>
           <a :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
-            View on MusicBrainz
+            <i18next path="View on MusicBrainz"/>
           </a>
         </div>
       </div>
       <div class="ui vertical stripe segment">
-        <h2>Tracks</h2>
+        <h2><i18next path="Tracks"/></h2>
         <track-table v-if="album" :display-position="true" :tracks="album.tracks"></track-table>
       </div>
     </template>
diff --git a/front/src/components/library/Artist.vue b/front/src/components/library/Artist.vue
index 07d8cbbc7..5c17ac6af 100644
--- a/front/src/components/library/Artist.vue
+++ b/front/src/components/library/Artist.vue
@@ -10,26 +10,31 @@
             <i class="circular inverted users violet icon"></i>
             <div class="content">
               {{ artist.name }}
-              <div class="sub header">{{ totalTracks }} tracks in {{ albums.length }} albums</div>
+              <div class="sub header">
+                <i18next path="{%0%} tracks in {%1%} albums">
+                  {{ totalTracks }}
+                  {{ albums.length }}
+                </i18next>
+              </div>
             </div>
           </h2>
           <div class="ui hidden divider"></div>
           <radio-button type="artist" :object-id="artist.id"></radio-button>
           </button>
-          <play-button class="orange" :tracks="allTracks">Play all albums</play-button>
+          <play-button class="orange" :tracks="allTracks"><i18next path="Play all albums"/></play-button>
 
           <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia icon"></i>
-            Search on wikipedia
+            <i18next path="Search on Wikipedia"/>
           </a>
           <a :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
-            View on MusicBrainz
+            <i18next path="View on MusicBrainz"/>
           </a>
         </div>
       </div>
       <div class="ui vertical stripe segment">
-        <h2>Albums by this artist</h2>
+        <h2><i18next path="Albums by this artist"/></h2>
         <div class="ui stackable doubling three column grid">
           <div class="column" :key="album.id" v-for="album in sortedAlbums">
             <album-card :mode="'rich'" class="fluid" :album="album"></album-card>
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 72ad108f1..0811f0aa7 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-title="'Artists'">
     <div class="ui vertical stripe segment">
-      <h2 class="ui header">Browsing artists</h2>
+      <h2 class="ui header"><i18next path="Browsing artists"/></h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">
         <div class="fields">
           <div class="field">
-            <label>Search</label>
+            <label><i18next path="Search"/></label>
             <input type="text" v-model="query" placeholder="Enter an artist name..."/>
           </div>
           <div class="field">
-            <label>Ordering</label>
+            <i18next tag="label" path="Ordering"/>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
                 {{ option[1] }}
@@ -17,14 +17,14 @@
             </select>
           </div>
           <div class="field">
-            <label>Ordering direction</label>
+            <i18next tag="label" path="Ordering direction"/>
             <select class="ui dropdown" v-model="orderingDirection">
               <option value="">Ascending</option>
               <option value="-">Descending</option>
             </select>
           </div>
           <div class="field">
-            <label>Results per page</label>
+            <i18next tag="label" path="Results per page"/>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
               <option :value="parseInt(25)">25</option>
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 26352d1fd..e69ecea80 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -6,20 +6,20 @@
     <div class="ui vertical stripe segment">
       <div class="ui stackable three column grid">
         <div class="column">
-          <h2 class="ui header">Latest artists</h2>
+          <h2 class="ui header"><i18next path="Latest artists"/></h2>
           <div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
           <div v-if="artists.length > 0" v-for="artist in artists.slice(0, 3)" :key="artist.id" class="ui cards">
             <artist-card :artist="artist"></artist-card>
           </div>
         </div>
         <div class="column">
-          <h2 class="ui header">Radios</h2>
+          <h2 class="ui header"><i18next path="Radios"/></h2>
           <radio-card :type="'favorites'"></radio-card>
           <radio-card :type="'random'"></radio-card>
           <radio-card :type="'less-listened'"></radio-card>
         </div>
         <div class="column">
-          <h2 class="ui header">Music requests</h2>
+          <h2 class="ui header"><i18next path="Music requests"/></h2>
           <request-form v-if="$store.state.auth.authenticated"></request-form>
         </div>
       </div>
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index 161d4519b..507ecd269 100644
--- a/front/src/components/library/Library.vue
+++ b/front/src/components/library/Library.vue
@@ -1,17 +1,20 @@
 <template>
   <div class="main library pusher">
     <div class="ui secondary pointing menu">
-      <router-link class="ui item" to="/library" exact>Browse</router-link>
-      <router-link class="ui item" to="/library/artists" exact>Artists</router-link>
-      <router-link class="ui item" to="/library/radios" exact>Radios</router-link>
-      <router-link class="ui item" to="/library/playlists" exact>Playlists</router-link>
+      <router-link class="ui item" to="/library" exact><i18next path="Browse"/></router-link>
+      <router-link class="ui item" to="/library/artists" exact><i18next path="Artists"/></router-link>
+      <router-link class="ui item" to="/library/radios" exact><i18next path="Radios"/></router-link>
+      <router-link class="ui item" to="/library/playlists" exact><i18next path="Playlists"/></router-link>
       <div class="ui secondary right menu">
         <router-link v-if="$store.state.auth.authenticated" class="ui item" to="/library/requests/" exact>
-          Requests
+          <i18next path="Requests"/>
           <div class="ui teal label">{{ requestsCount }}</div>
         </router-link>
-        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>Import</router-link>
-        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">Import batches
+        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/launch" exact>
+          <i18next path="Import"/>
+        </router-link>
+        <router-link v-if="$store.state.auth.availablePermissions['import.launch']" class="ui item" to="/library/import/batches">
+          <i18next path="Import batches"/>
         </router-link>
       </div>
     </div>
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index 7ab14ab14..9fcadf0a6 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -1,17 +1,19 @@
 <template>
   <div v-title="'Radios'">
     <div class="ui vertical stripe segment">
-      <h2 class="ui header">Browsing radios</h2>
-      <router-link class="ui green basic button" to="/library/radios/build" exact>Create your own radio</router-link>
+      <h2 class="ui header"><i18next path="Browsing radios"/></h2>
+      <router-link class="ui green basic button" to="/library/radios/build" exact>
+        <i18next path="Create your own radio"/>
+      </router-link>
       <div class="ui hidden divider"></div>
       <div :class="['ui', {'loading': isLoading}, 'form']">
         <div class="fields">
           <div class="field">
-            <label>Search</label>
+            <i18next tag="label" path="Search"/>
             <input type="text" v-model="query" placeholder="Enter a radio name..."/>
           </div>
           <div class="field">
-            <label>Ordering</label>
+            <i18next tag="label" path="Ordering"/>
             <select class="ui dropdown" v-model="ordering">
               <option v-for="option in orderingOptions" :value="option[0]">
                 {{ option[1] }}
@@ -19,14 +21,14 @@
             </select>
           </div>
           <div class="field">
-            <label>Ordering direction</label>
+            <i18next tag="label" path="Ordering direction"/>
             <select class="ui dropdown" v-model="orderingDirection">
-              <option value="">Ascending</option>
-              <option value="-">Descending</option>
+              <option value=""><i18next path="Ascending"/></option>
+              <option value="-"><i18next path="Descending"/></option>
             </select>
           </div>
           <div class="field">
-            <label>Results per page</label>
+            <i18next tag="label" path="Results per page"/>
             <select class="ui dropdown" v-model="paginateBy">
               <option :value="parseInt(12)">12</option>
               <option :value="parseInt(25)">25</option>
diff --git a/front/src/components/library/Track.vue b/front/src/components/library/Track.vue
index e614635c9..940086e02 100644
--- a/front/src/components/library/Track.vue
+++ b/front/src/components/library/Track.vue
@@ -11,18 +11,19 @@
             <div class="content">
               {{ track.title }}
               <div class="sub header">
-                From album
-                <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
-                  {{ track.album.title }}
-                </router-link>
-                by <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
-                  {{ track.artist.name }}
-                </router-link>
+                <i18next path="From album {%0%} by {%1%}">
+                  <router-link :to="{name: 'library.albums.detail', params: {id: track.album.id }}">
+                    {{ track.album.title }}
+                  </router-link>
+                  <router-link :to="{name: 'library.artists.detail', params: {id: track.artist.id }}">
+                    {{ track.artist.name }}
+                  </router-link>
+                </i18next>
               </div>
             </div>
           </h2>
 
-          <play-button class="orange" :track="track">Play</play-button>
+          <play-button class="orange" :track="track"><i18next path="Play"/></play-button>
           <track-favorite-icon :track="track" :button="true"></track-favorite-icon>
           <track-playlist-icon
             :button="true"
@@ -31,32 +32,30 @@
 
           <a :href="wikipediaUrl" target="_blank" class="ui button">
             <i class="wikipedia icon"></i>
-            Search on wikipedia
+            <i18next path="Search on Wikipedia"/>
           </a>
           <a :href="musicbrainzUrl" target="_blank" class="ui button">
             <i class="external icon"></i>
-            View on MusicBrainz
+            <i18next path="View on MusicBrainz"/>
           </a>
           <a v-if="downloadUrl" :href="downloadUrl" target="_blank" class="ui button">
             <i class="download icon"></i>
-            Download
+            <i18next path="Download"/>
           </a>
         </div>
       </div>
       <div class="ui vertical stripe center aligned segment">
-        <h2>Lyrics</h2>
+        <h2><i18next path="Lyrics"/></h2>
         <div v-if="isLoadingLyrics" class="ui vertical segment">
           <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
         </div>
         <div v-if="lyrics" v-html="lyrics.content_rendered">
         </div>
         <template v-if="!isLoadingLyrics & !lyrics">
-          <p>
-            No lyrics available for this track.
-          </p>
+          <i18next tag="p" path="No lyrics available for this track."/>
           <a class="ui button" target="_blank" :href="lyricsSearchUrl">
             <i class="search icon"></i>
-            Search on lyrics.wikia.com
+            <i18next path="Search on lyrics.wikia.com"/>
           </a>
         </template>
       </div>
diff --git a/po/funkwhale.pot b/po/funkwhale.pot
index 88ce3e676..17d6c996e 100644
--- a/po/funkwhale.pot
+++ b/po/funkwhale.pot
@@ -495,3 +495,71 @@ msgstr "Search query"
 msgid "Imported URL"
 msgstr "Imported URL"
 
+msgid "Album containing {%0%} tracks, by {%1%}"
+msgstr "Album containing {%0%} tracks, by {%1%}"
+
+msgid "Search on Wikipedia"
+msgstr "Search on Wikipedia"
+
+msgid "View on MusicBrainz"
+msgstr "View on MusicBrainz"
+
+msgid "{%0%} tracks in {%1%} albums"
+msgstr "{%0%} tracks in {%1%} albums"
+
+msgid "Play all albums"
+msgstr "Play all albums"
+
+msgid "Albums by this artist"
+msgstr "Albums by this artist"
+
+msgid "Browsing artists"
+msgstr "Browsing artists"
+
+msgid "Search"
+msgstr "Search"
+
+msgid "Latest artists"
+msgstr "Latest artists"
+
+msgid "Radios"
+msgstr "Radios"
+
+msgid "Music requests"
+msgstr "Music requests"
+
+msgid "Browse"
+msgstr "Browse"
+
+msgid "Playlists"
+msgstr "Playlists"
+
+msgid "Requests"
+msgstr "Requests"
+
+msgid "Import"
+msgstr "Import"
+
+msgid "Import batches"
+msgstr "Import batches"
+
+msgid "Browsing radios"
+msgstr "Browsing radios"
+
+msgid "Create your own radio"
+msgstr "Create your own radio"
+
+msgid "From album {%0%} by {%1%}"
+msgstr "From album {%0%} by {%1%}"
+
+msgid "Download"
+msgstr "Download"
+
+msgid "Lyrics"
+msgstr "Lyrics"
+
+msgid "No lyrics available for this track."
+msgstr "No lyrics available for this track."
+
+msgid "Search on lyrics.wikia.com"
+msgstr "Search on lyrics.wikia.com"