i18n: playlists components

front/src/components/playlists/Card.vue

@@ -10,13 +10,16 @@
         <i class="user icon"></i> {{ playlist.user.username }}
       </div>
       <div class="meta">
-        <i class="clock icon"></i> Updated <human-date :date="playlist.modification_date"></human-date>
+        <i class="clock icon"></i>
+        <i18next path="Updated {%date%}">
+          <human-date :date="playlist.modification_date" />
+        </i18next>
       </div>
     </div>
     <div class="extra content">
       <span>
         <i class="sound icon"></i>
-        {{ playlist.tracks_count }} tracks
+        {{ $t('{%count%} tracks', { count: playlist.tracks_count }) }}
       </span>
       <play-button class="mini basic orange right floated" :playlist="playlist">Play all</play-button>
     </div>

front/src/components/playlists/Editor.vue

@@ -2,16 +2,16 @@
   <div class="ui text container">
     <playlist-form @updated="$emit('playlist-updated', $event)" :title="false" :playlist="playlist"></playlist-form>
     <h3 class="ui top attached header">
-      Playlist editor
+      {{ $t('Playlist editor') }}
     </h3>
     <div class="ui attached segment">
       <template v-if="status === 'loading'">
         <div class="ui active tiny inline loader"></div>
-        Syncing changes to server...
+        {{ $t('Syncing changes to server...') }}
       </template>
       <template v-else-if="status === 'errored'">
         <i class="red close icon"></i>
-        An error occured while saving your changes
+        {{ $t('An error occured while saving your changes') }}
         <div v-if="errors.length > 0" class="ui negative message">
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
@@ -19,7 +19,7 @@
         </div>
       </template>
       <template v-else-if="status === 'saved'">
-        <i class="green check icon"></i> Changes synced with server
+        <i class="green check icon"></i> {{ $t('Changes synced with server') }}
       </template>
     </div>
     <div class="ui bottom attached segment">
@@ -28,13 +28,15 @@
         :disabled="queueTracks.length === 0"
         :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
         title="Copy tracks from current queue to playlist">
-          <i class="plus icon"></i> Insert from queue ({{ queueTracks.length }} tracks)</div>
+          <i class="plus icon"></i>
+          {{ $t('Insert from queue ({%count%} tracks)', { count: queueTracks.length }) }}
+        </div>
 
       <dangerous-button :disabled="plts.length === 0" class="labeled right floated icon" color='yellow' :action="clearPlaylist">
-        <i class="eraser icon"></i> Clear playlist
-        <p slot="modal-header">Do you want to clear the playlist "{{ playlist.name }}"?</p>
-        <p slot="modal-content">This will remove all tracks from this playlist and cannot be undone.</p>
-        <p slot="modal-confirm">Clear playlist</p>
+        <i class="eraser icon"></i> {{ $t('Clear playlist') }}
+        <p slot="modal-header">{{ $t('Do you want to clear the playlist "{%name%}"?', { name: playlist.name }) }}</p>
+        <p slot="modal-content">{{ $t('This will remove all tracks from this playlist and cannot be undone.') }}</p>
+        <p slot="modal-confirm">{{ $t('Clear playlist') }}</p>
       </dangerous-button>
       <div class="ui hidden divider"></div>
       <template v-if="plts.length > 0">

front/src/components/playlists/Form.vue

@@ -1,29 +1,29 @@
 <template>
   <form class="ui form" @submit.prevent="submit()">
-    <h4 v-if="title" class="ui header">Create a new playlist</h4>
+    <h4 v-if="title" class="ui header">{{ $t('Create a new playlist') }}</h4>
     <div v-if="success" class="ui positive message">
       <div class="header">
         <template v-if="playlist">
-          Playlist updated
+          {{ $t('Playlist updated') }}
         </template>
         <template v-else>
-          Playlist created
+          {{ $t('Playlist created') }}
         </template>
       </div>
     </div>
     <div v-if="errors.length > 0" class="ui negative message">
-      <div class="header">We cannot create the playlist</div>
+      <div class="header">{{ $t('We cannot create the playlist') }}</div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
       </ul>
     </div>
     <div class="three fields">
       <div class="field">
-        <label>Playlist name</label>
+        <label>{{ $t('Playlist name') }}</label>
         <input v-model="name" required type="text" placeholder="My awesome playlist" />
       </div>
       <div class="field">
-        <label>Playlist visibility</label>
+        <label>{{ $t('Playlist visibility') }}</label>
         <select class="ui dropdown" v-model="privacyLevel">
           <option :value="c.value" v-for="c in privacyLevelChoices">{{ c.label }}</option>
         </select>
@@ -31,8 +31,8 @@
       <div class="field">
         <label>&nbsp;</label>
         <button :class="['ui', 'fluid', {'loading': isLoading}, 'button']" type="submit">
-          <template v-if="playlist">Update playlist</template>
-          <template v-else>Create playlist</template>
+          <template v-if="playlist">{{ $t('Update playlist') }}</template>
+          <template v-else>{{ $t('Create playlist') }}</template>
         </button>
       </div>
     </div>
@@ -61,15 +61,15 @@ export default {
       privacyLevelChoices: [
         {
           value: 'me',
-          label: 'Nobody except me'
+          label: this.$t('Nobody except me')
         },
         {
           value: 'instance',
-          label: 'Everyone on this instance'
+          label: this.$t('Everyone on this instance')
         },
         {
           value: 'everyone',
-          label: 'Everyone'
+          label: this.$t('Everyone')
         }
       ]
     }

front/src/components/playlists/PlaylistModal.vue

@@ -1,14 +1,14 @@
 <template>
   <modal @update:show="update" :show="$store.state.playlists.showModal">
     <div class="header">
-      Manage playlists
+      {{ $t('Manage playlists') }}
     </div>
     <div class="scrolling content">
       <div class="description">
         <template v-if="track">
-          <h4 class="ui header">Current track</h4>
+          <h4 class="ui header">{{ $t('Current track') }}</h4>
           <div>
-            "{{ track.title }}" by {{ track.artist.name }}
+            {{ $t('"{%title%}" by {%artist%}', { title: track.title, artist: track.artist.name }) }}
           </div>
           <div class="ui divider"></div>
         </template>
@@ -16,20 +16,20 @@
         <playlist-form></playlist-form>
         <div class="ui divider"></div>
         <div v-if="errors.length > 0" class="ui negative message">
-          <div class="header">We cannot add the track to a playlist</div>
+          <div class="header">{{ $t('We cannot add the track to a playlist') }}</div>
           <ul class="list">
             <li v-for="error in errors">{{ error }}</li>
           </ul>
         </div>
         </div>
-        <h4 class="ui header">Available playlists</h4>
+        <h4 class="ui header">{{ $t('Available playlists') }}</h4>
         <table class="ui unstackable very basic table">
           <thead>
             <tr>
               <th></th>
-              <th>Name</th>
-              <th class="sorted descending">Last modification</th>
-              <th>Tracks</th>
+              <th>{{ $t('Name') }}</th>
+              <th class="sorted descending">{{ $t('Last modification') }}</th>
+              <th>{{ $t('Tracks') }}</th>
               <th></th>
             </tr>
           </thead>
@@ -48,9 +48,9 @@
                 <div
                   v-if="track"
                   class="ui green icon basic small right floated button"
-                  title="Add to this playlist"
+                  :title="{{ $t('Add to this playlist') }}"
                   @click="addToPlaylist(playlist.id)">
-                  <i class="plus icon"></i> Add track
+                  <i class="plus icon"></i> {{ $t('Add track') }}
                 </div>
               </td>
             </tr>
@@ -59,7 +59,7 @@
       </div>
     </div>
     <div class="actions">
-      <div class="ui cancel button">Cancel</div>
+      <div class="ui cancel button">{{ $t('Cancel') }}</div>
     </div>
   </modal>
 </template>

front/src/components/playlists/TrackPlaylistIcon.vue

@@ -4,13 +4,13 @@
     v-if="button"
     :class="['ui', 'button']">
     <i class="list icon"></i>
-    Add to playlist...
+    {{ $t('Add to playlist...') }}
   </button>
   <i
     v-else
     @click="$store.commit('playlists/chooseTrack', track)"
     :class="['playlist-icon', 'list', 'link', 'icon']"
-    title="Add to playlist...">
+    :title="$t('Add to playlist...')">
   </i>
 </template>