diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue
index 1e96757c342a9b325cb293f8363ea2078f358aff..1681d46e3b44466f022f18d22ffa3ba78e1643b7 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 07d8cbbc74cff682e2251eb0c22515ca0fc8a9c0..5c17ac6af3d338fbdafff69511d7cc35c42877de 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 72ad108f1d2d78ce32357753d163045284263715..0811f0aa79083da03b5c12b74795ef9ddefb7c8f 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 26352d1fd6c0314129dc7e212d7ddb7d97dd4519..e69ecea805c8fda726d3c02e50e46dc93d881c41 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 161d4519b2fab561022fc4a8b8f706e67dc3258c..507ecd269cadb7897299ee7ab015bf9f90d0a2b4 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 7ab14ab14f8d3dbc4fa02a52c34758d69b38b5e9..9fcadf0a6101c518a7f7ecf8b738f6a21ae2e0b0 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 e614635c9877ca315743d16cf0d4ebba47679597..940086e02aa9263bcab6924a75c161aacb5aa5dd 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 88ce3e676eccc00256ff387adc853c30c3d55cd3..17d6c996e08627afb8b0725072a2d7e2aa5ce598 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"