diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index 09a5ee24c523f8f8f5db77b47b7c6694ae74387b..524191250cf920fdbe4991381f827c1e50dd5ecd 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -3,15 +3,16 @@
<div class="ui vertical center aligned stripe segment">
<div class="ui text container">
<h1 class="ui huge header">
- <template v-if="instance.name.value">About {{ instance.name.value }}</template>
- <template v-else="instance.name.value">About this instance</template>
+ <template v-if="instance.name.value">{{ $t('About {%instance%}', { instance: instance.name.value }) }}</template>
+ <template v-else="instance.name.value">{{ $t('About this instance') }}</template>
</h1>
<stats></stats>
</div>
</div>
<div class="ui vertical stripe segment">
<p v-if="!instance.short_description.value && !instance.long_description.value">
- Unfortunately, owners of this instance did not yet take the time to complete this page.</p>
+ {{ $t('Unfortunately, owners of this instance did not yet take the time to complete this page.') }}
+ </p>
<div
v-if="instance.short_description.value"
class="ui middle aligned stackable text container">
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index ce1307ff0c8a84b934f027c7a27509644edc32a5..f54ebfe6e26f4b066fde97e2495d55e2109abae7 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -3,15 +3,15 @@
<div class="ui vertical center aligned stripe segment">
<div class="ui text container">
<h1 class="ui huge header">
- Welcome on Funkwhale
+ {{ $t('Welcome on Funkwhale') }}
</h1>
- <p>We think listening music should be simple.</p>
+ <p>{{ $t('We think listening music should be simple.') }}</p>
<router-link class="ui icon button" to="/about">
<i class="info icon"></i>
- Learn more about this instance
+ {{ $t('Learn more about this instance') }}
</router-link>
<router-link class="ui icon teal button" to="/library">
- Get me to the library
+ {{ $t('Get me to the library') }}
<i class="right arrow icon"></i>
</router-link>
</div>
@@ -22,10 +22,10 @@
<div class="row">
<div class="eight wide left floated column">
<h2 class="ui header">
- Why funkwhale?
+ {{ $t('Why funkwhale?') }}
</h2>
- <p>That's simple: we loved Grooveshark and we want to build something even better.</p>
- </div>
+ <p>{{('That\'s simple: we loved Grooveshark and we want to build something even better.') }}</p>
+ $t</div>
<div class="four wide left floated column">
<img class="ui medium image" src="../assets/logo/logo.png" />
</div>
@@ -35,26 +35,26 @@
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
- Unlimited music
+ {{ $t('Unlimited music') }}
</h2>
- <p>Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.</p>
+ <p>{{ $t('Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.') }}</p>
<div class="ui list">
<div class="item">
<i class="sound icon"></i>
<div class="content">
- Click once, listen for hours using built-in radios
+ {{ $t('Click once, listen for hours using built-in radios') }}
</div>
</div>
<div class="item">
<i class="heart icon"></i>
<div class="content">
- Keep a track of your favorite songs
+ {{ $t('Keep a track of your favorite songs') }}
</div>
</div>
<div class="item">
<i class="list icon"></i>
<div class="content">
- Playlists? We got them
+ {{ $t('Playlists? We got them') }}
</div>
</div>
</div>
@@ -62,26 +62,28 @@
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
- Clean library
+ {{ $t('Clean library') }}
</h2>
- <p>Funkwhale takes care of handling your music.</p>
+ <p>{{ $t('Funkwhale takes care of handling your music') }}.</p>
<div class="ui list">
<div class="item">
<i class="download icon"></i>
<div class="content">
- Import music from various platforms, such as YouTube or SoundCloud
+ {{ $t('Import music from various platforms, such as YouTube or SoundCloud') }}
</div>
</div>
<div class="item">
<i class="tag icon"></i>
<div class="content">
- Get quality metadata about your music thanks to <a href="https://musicbrainz.org" target="_blank">MusicBrainz</a>
+ <i18next path="Get quality metadata about your music thanks to {%0%}">
+ <a href="https://musicbrainz.org" target="_blank">{{ $t('MusicBrainz') }}</a>
+ </i18next>
</div>
</div>
<div class="item">
<i class="plus icon"></i>
<div class="content">
- Covers, lyrics, our goal is to have them all ;)
+ {{ $t('Covers, lyrics, our goal is to have them all ;)') }}
</div>
</div>
</div>
@@ -89,20 +91,20 @@
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
- Easy to use
+ {{ $t('Easy to use') }}
</h2>
- <p>Funkwhale is dead simple to use.</p>
+ <p>{{ $t('Funkwhale is dead simple to use.') }}</p>
<div class="ui list">
<div class="item">
<i class="book icon"></i>
<div class="content">
- No add-ons, no plugins : you only need a web library
+ {{ $t('No add-ons, no plugins : you only need a web library') }}
</div>
</div>
<div class="item">
<i class="wizard icon"></i>
<div class="content">
- Access your music from a clean interface that focus on what really matters
+ {{ $t('Access your music from a clean interface that focus on what really matters') }}
</div>
</div>
</div>
@@ -110,26 +112,26 @@
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
- Your music, your way
+ {{ $t('Your music, your way') }}
</h2>
- <p>Funkwhale is free and gives you control on your music.</p>
+ <p>{{ $t('Funkwhale is free and gives you control on your music.') }}</p>
<div class="ui list">
<div class="item">
<i class="smile icon"></i>
<div class="content">
- The plaform is free and open-source, you can install it and modify it without worries
+ {{ $t('The plaform is free and open-source, you can install it and modify it without worries') }}
</div>
</div>
<div class="item">
<i class="protect icon"></i>
<div class="content">
- We do not track you or bother you with ads
+ {{ $t('We do not track you or bother you with ads') }}
</div>
</div>
<div class="item">
<i class="users icon"></i>
<div class="content">
- You can invite friends and family to your instance so they can enjoy your music
+ {{ $t('You can invite friends and family to your instance so they can enjoy your music') }}
</div>
</div>
</div>
diff --git a/front/src/components/PageNotFound.vue b/front/src/components/PageNotFound.vue
index 25e6f86fd209a7cb6132c9c36812e918c1f116f9..b4d2250ca061db4b36c729b42dc22901d684cd7d 100644
--- a/front/src/components/PageNotFound.vue
+++ b/front/src/components/PageNotFound.vue
@@ -5,13 +5,13 @@
<h1 class="ui huge header">
<i class="warning icon"></i>
<div class="content">
- <strike>Whale</strike> Page not found!
+ <strike>{{ $t('Whale') }}</strike> {{ $t('Page not found!') }}
</div>
</h1>
- <p>We're sorry, the page you asked for does not exists.</p>
- <p>Requested URL: <a :href="path">{{ path }}</a></p>
+ <p>{{ $t('We\'re sorry, the page you asked for does not exists.') }}</p>
+ <i18next path="Requested URL: {%0%}"><a :href="path">{{ path }}</a></i18next>
<router-link class="ui icon button" to="/">
- Go to home page
+ {{ $t('Go to home page') }}
<i class="right arrow icon"></i>
</router-link>
</div>
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 45487b6fbe7d1d26643bd12d7fc6e5f8e69c84ff..602882123dde19fdceff68cd46f7d8f7f45c5b5c 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -18,12 +18,12 @@
<div class="ui compact fluid two item inverted menu">
<a class="active item" @click="selectedTab = 'library'" data-tab="library">Browse</a>
<a class="item" @click="selectedTab = 'queue'" data-tab="queue">
- Queue
+ {{ $t('Queue') }}
<template v-if="queue.tracks.length === 0">
- (empty)
+ {{ $t('(empty)') }}
</template>
<template v-else>
- ({{ queue.currentIndex + 1}} of {{ queue.tracks.length }})
+ {{ $t('({%index%} of {%length%})', { index: queue.currentIndex + 1, length: queue.tracks.length }) }}
</template>
</a>
</div>
@@ -31,23 +31,23 @@
<div class="tabs">
<div class="ui bottom attached active tab" data-tab="library">
<div class="ui inverted vertical fluid menu">
- <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'profile', params: {username: $store.state.auth.username}}"><i class="user icon"></i> Logged in as {{ $store.state.auth.username }}</router-link>
- <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i> Logout</router-link>
- <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> Login</router-link>
- <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>Browse library</router-link>
- <router-link class="item" :to="{path: '/favorites'}"><i class="heart icon"></i> Favorites</router-link>
+ <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'profile', params: {username: $store.state.auth.username}}"><i class="user icon"></i>{{ $t('Logged in as {%name%}', { name: $store.state.auth.username }) }}</router-link>
+ <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i> {{ $t('Logout') }}</router-link>
+ <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> {{ $t('Login') }}</router-link>
+ <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>{{ $t('Browse library') }}</router-link>
+ <router-link class="item" :to="{path: '/favorites'}"><i class="heart icon"></i> {{ $t('Favorites') }}</router-link>
<a
@click="$store.commit('playlists/chooseTrack', null)"
v-if="$store.state.auth.authenticated"
class="item">
- <i class="list icon"></i> Playlists
+ <i class="list icon"></i> {{ $t('Playlists') }}
</a>
<router-link
v-if="$store.state.auth.authenticated"
- class="item" :to="{path: '/activity'}"><i class="bell icon"></i> Activity</router-link>
+ class="item" :to="{path: '/activity'}"><i class="bell icon"></i> {{ $t('Activity') }}</router-link>
<router-link
class="item" v-if="$store.state.auth.availablePermissions['federation.manage']"
- :to="{path: '/manage/federation/libraries'}"><i class="sitemap icon"></i> Federation</router-link>
+ :to="{path: '/manage/federation/libraries'}"><i class="sitemap icon"></i> {{ $t('Federation') }}</router-link>
</div>
<player></player>
@@ -56,12 +56,12 @@
<i class="history icon"></i>
<div class="content">
<div class="header">
- Do you want to restore your previous queue?
+ {{ $t('Do you want to restore your previous queue?') }}
</div>
- <p>{{ queue.previousQueue.tracks.length }} tracks</p>
+ <p>{{ $t('{%count%} tracks', { count: queue.previousQueue.tracks.length }) }}</p>
<div class="ui two buttons">
- <div @click="queue.restore()" class="ui basic inverted green button">Yes</div>
- <div @click="queue.removePrevious()" class="ui basic inverted red button">No</div>
+ <div @click="queue.restore()" class="ui basic inverted green button">{{ $t('Yes') }}</div>
+ <div @click="queue.removePrevious()" class="ui basic inverted red button">{{ $t('No') }}</div>
</div>
</div>
</div>
@@ -93,10 +93,10 @@
<div class="content">
<div class="header">
- <i class="feed icon"></i> You have a radio playing
+ <i class="feed icon"></i> {{ $t('You have a radio playing') }}
</div>
- <p>New tracks will be appended here automatically.</p>
- <div @click="$store.dispatch('radios/stop')" class="ui basic inverted red button">Stop radio</div>
+ <p>{{ $t('New tracks will be appended here automatically.') }}</p>
+ <div @click="$store.dispatch('radios/stop')" class="ui basic inverted red button">{{ $t('Stop radio') }}</div>
</div>
</div>
</div>