Translate federation components

front/src/components/federation/LibraryCard.vue

@@ -7,41 +7,39 @@
     </div>
     <div class="content">
       <span class="right floated" v-if="following">
-        <i class="check icon"></i> Following
+        <i class="check icon"></i><i18next path="Following"/>
       </span>
       <span class="right floated" v-else-if="manuallyApprovesFollowers">
-        <i class="lock icon"></i> Followers only
+        <i class="lock icon"></i><i18next path="Followers only"/>
       </span>
       <span class="right floated" v-else>
-        <i class="open lock icon"></i> Open
+        <i class="open lock icon"></i><i18next path="Open"/>
       </span>
       <span v-if="totalItems">
         <i class="music icon"></i>
-        {{ totalItems }} tracks
+        <i18next path="{%0%} tracks">
+          {{ totalItems }}
+        </i18next>
       </span>
     </div>
     <div class="extra content">
       <template v-if="awaitingApproval">
         <i class="clock icon"></i>
-        Follow request pending approval
+        <i18next path="Follow request pending approval"/>
       </template>
       <div
         v-if="!library"
         @click="follow"
         :disabled="isLoading"
         :class="['ui', 'basic', {loading: isLoading}, 'green', 'button']">
-        <template v-if="manuallyApprovesFollowers">
-          Send a follow request
-        </template>
-        <template v-else>
-          Follow
-        </template>
+        <i18next v-if="manuallyApprovesFollowers" path="Send a follow request"/>
+        <i18next v-else path="Follow">
       </div>
       <router-link
         v-else
         class="ui basic button"
         :to="{name: 'federation.libraries.detail', params: {id: library.uuid }}">
-        Detail
+        <i18next path="Detail"/>
       </router-link>
     </div>
   </div>

front/src/components/federation/LibraryFollowTable.vue

@@ -8,7 +8,7 @@
         <div class="ui four wide inline field">
           <div class="ui checkbox">
             <input v-model="pending" type="checkbox">
-            <label>Pending approval</label>
+            <label><i18next path="Pending approval"/></label>
           </div>
         </div>
       </div>
@@ -17,10 +17,10 @@
     <table v-if="result" class="ui very basic single line unstackable table">
       <thead>
         <tr>
-          <th>Actor</th>
-          <th>Creation date</th>
-          <th>Status</th>
-          <th>Actions</th>
+          <i18next tag="th" path="Actor"/>
+          <i18next tag="th" path="Creation date"/>
+          <i18next tag="th" path="Status"/>
+          <i18next tag="th" path="Actions"/>
         </tr>
       </thead>
       <tbody>
@@ -33,27 +33,36 @@
           </td>
           <td>
             <template v-if="follow.approved === true">
-              <i class="check icon"></i> Approved
+              <i class="check icon"></i><i18next path="Approved"/>
             </template>
             <template v-else-if="follow.approved === false">
-              <i class="x icon"></i> Refused
+              <i class="x icon"></i><i18next path="Refused"/>
             </template>
             <template v-else>
-              <i class="clock icon"></i> Pending
+              <i class="clock icon"></i><i18next path="Pending"/>
             </template>
           </td>
           <td>
             <dangerous-button v-if="follow.approved !== false" class="tiny basic labeled icon" color='red' @confirm="updateFollow(follow, false)">
-              <i class="x icon"></i> Deny
-              <p slot="modal-header">Deny access?</p>
-              <p slot="modal-content">By confirming, {{ follow.actor.preferred_username }}@{{ follow.actor.domain }} will be denied access to your library.</p>
-              <p slot="modal-confirm">Deny</p>
+              <i class="x icon"></i><i18next path="Deny"/>
+              <p slot="modal-header"><i18next path="Deny access?"/></p>
+              <p slot="modal-content">
+                <i18next path="By confirming, {%0%}@{%1%} will be denied access to your library.">
+                  {{ follow.actor.preferred_username }}
+                  {{ follow.actor.domain }}
+                </i18next>
+              </p>
+              <p slot="modal-confirm"><i18next path="Deny"/></p>
             </dangerous-button>
             <dangerous-button v-if="follow.approved !== true" class="tiny basic labeled icon" color='green' @confirm="updateFollow(follow, true)">
-              <i class="x icon"></i> Approve
-              <p slot="modal-header">Approve access?</p>
-              <p slot="modal-content">By confirming, {{ follow.actor.preferred_username }}@{{ follow.actor.domain }} will be granted access to your library.</p>
-              <p slot="modal-confirm">Approve</p>
+              <i class="x icon"></i> <i18next path="Approve"/>
+              <p slot="modal-header"><i18next path="Approve access?"/></p>
+              <p slot="modal-content">
+                <i18next path="By confirming, {%0%}@{%1%} will be granted access to your library.">
+                  {{ follow.actor.preferred_username }}
+                  {{ follow.actor.domain }}
+                </i18next>
+              <p slot="modal-confirm"><i18next path="Approve"/></p>
             </dangerous-button>
           </td>
         </tr>
@@ -71,7 +80,12 @@
             ></pagination>
           </th>
           <th v-if="result && result.results.length > 0">
-            Showing results {{ ((page-1) * paginateBy) + 1 }}-{{ ((page-1) * paginateBy) + result.results.length }} on {{ result.count }}</th>
+            <i18next path="Showing results {%0%}-{%1%} on {%2%}">
+              {{ ((page-1) * paginateBy) + 1 }}
+              {{ ((page-1) * paginateBy) + result.results.length }}
+              {{ result.count }}
+            </i18next>
+          </th>
           <th></th>
           <th></th>
         </tr>

front/src/components/federation/LibraryForm.vue

 <template>
   <form class="ui form" @submit.prevent="fetchInstanceInfo">
-    <h3 class="ui header">Federate with a new instance</h3>
-    <p>Use this form to scan an instance and setup federation.</p>
+    <h3 class="ui header"><i18next path="Federate with a new instance"/></h3>
+    <p><i18next path="Use this form to scan an instance and setup federation."/></p>
     <div v-if="errors.length > 0 || scanErrors.length > 0" class="ui negative message">
-      <div class="header">Error while scanning library</div>
+      <div class="header"><i18next path="Error while scanning library"/></div>
       <ul class="list">
         <li v-for="error in errors">{{ error }}</li>
         <li v-for="error in scanErrors">{{ error }}</li>
@@ -11,7 +11,7 @@
     </div>
     <div class="ui two fields">
       <div class="ui field">
-        <label>Library name</label>
+        <label><i18next path="Library name"/></label>
         <input v-model="libraryUsername" type="text" placeholder="library@demo.funkwhale.audio" />
       </div>
       <div class="ui field">
@@ -21,7 +21,7 @@
           :disabled="isLoading"
           :class="['ui', 'icon', {loading: isLoading}, 'button']">
           <i class="search icon"></i>
-          Launch scan
+          <i18next path="Launch scan"/>
         </button>
       </div>
     </div>

front/src/components/federation/LibraryTrackTable.vue

@@ -14,11 +14,11 @@
                 :checked="result.results.length === checked.length"><label>&nbsp;</label>
             </div>
           </th>
-          <th>Title</th>
-          <th>Artist</th>
-          <th>Album</th>
-          <th>Published date</th>
-          <th v-if="showLibrary">Library</th>
+          <i18next tag="th" path="Title"/>
+          <i18next tag="th" path="Artist"/>
+          <i18next tag="th" path="Album"/>
+          <i18next tag="th" path="Published date"/>
+          <i18next tag="th" v-if="showLibrary" path="Library"/>
         </tr>
       </thead>
       <tbody>
@@ -31,7 +31,7 @@
                 :checked="checked.indexOf(track.id) > -1"><label>&nbsp;</label>
             </div>
             <div v-else class="ui label">
-              In library
+              <i18next path="In library"/>
             </div>
           </td>
           <td>
@@ -65,17 +65,22 @@
 
           </th>
           <th v-if="result && result.results.length > 0">
-            Showing results {{ ((page-1) * paginateBy) + 1 }}-{{ ((page-1) * paginateBy) + result.results.length }} on {{ result.count }}</th>
+            <i18next path="Showing results {%0%}-{%1%} on {%2%}">
+              {{ ((page-1) * paginateBy) + 1 }}
+              {{ ((page-1) * paginateBy) + result.results.length }}
+              {{ result.count }}
+            </i18next>
           <th>
             <button
               @click="launchImport"
               :disabled="checked.length === 0 || isImporting"
-              :class="['ui', 'green', {loading: isImporting}, 'button']">Import {{ checked.length }} tracks
+              :class="['ui', 'green', {loading: isImporting}, 'button']">
+              <i18next path="Import {%count%} tracks" :count="checked.length"/>
             </button>
             <router-link
               v-if="importBatch"
               :to="{name: 'library.import.batches.detail', params: {id: importBatch.id }}">
-              Import #{{ importBatch.id }} launched
+              <i18next path="Import #{%id%} launched" :id="importBatch.id"/>              
             </router-link>
           </th>
           <th></th>