I18n: library

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>

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>

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>

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>

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>

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>

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>

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"