Merge branch 'i18n-components' into 'develop'

Translate root components

See merge request funkwhale/funkwhale!142

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">

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,9 +22,9 @@
           <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>
+              <p>{{ $t('That\'s simple: we loved Grooveshark and we want to build something even better.') }}</p>
             </div>
             <div class="four wide left floated column">
               <img class="ui medium image" src="../assets/logo/logo.png" />
@@ -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>

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>

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 &nbsp;
+        {{ $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" v-if="$store.state.auth.authenticated" :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" v-if="$store.state.auth.authenticated" :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>