Localized some strings

front/src/components/About.vue

 <template>
-  <div class="main pusher" v-title="'About This Instance'">
+  <div class="main pusher" v-title="labels.title">
     <div class="ui vertical center aligned stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
@@ -49,7 +49,12 @@ export default {
   computed: {
     ...mapState({
       instance: state => state.instance.settings.instance
-    })
+    }),
+    labels () {
+      return {
+        title: this.$gettext('About this instance')
+      }
+    }
   }
 }
 </script>

front/src/components/Home.vue

 <template>
-  <div class="main pusher" v-title="'Welcome'">
+  <div class="main pusher" v-title="labels.title">
     <div class="ui vertical center aligned stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
@@ -146,9 +146,12 @@
 <script>
 
 export default {
-  name: 'home',
-  data () {
-    return {}
+  computed: {
+    labels () {
+      return {
+        title: this.$gettext('Welcome')
+      }
+    }
   }
 }
 </script>

front/src/components/PageNotFound.vue

 <template>
-  <div class="main pusher" v-title="'Page Not Found'">
+  <div class="main pusher" :v-title="labels.title">
     <div class="ui vertical stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
@@ -26,6 +26,13 @@ export default {
     return {
       path: window.location.href
     }
+  },
+  computed: {
+    labels () {
+      return {
+        title: this.$gettext('Page Not Found')
+      }
+    }
   }
 }
 </script>

front/src/components/Sidebar.vue

@@ -70,7 +70,7 @@
               <i class="book icon"></i><translate>Library</translate>
               <div
                 :class="['ui', {'teal': $store.state.ui.notifications.importRequests > 0}, 'label']"
-                :title="$gettext('Pending import requests')">
+                :title="labels.pendingRequests">
                 {{ $store.state.ui.notifications.importRequests }}</div>
 
             </router-link>
@@ -87,7 +87,7 @@
               <i class="sitemap icon"></i><translate>Federation</translate>
               <div
                 :class="['ui', {'teal': $store.state.ui.notifications.federation > 0}, 'label']"
-                :title="$gettext('Pending follow requests')">
+                :title="labels.pendingFollows">
                 {{ $store.state.ui.notifications.federation }}</div>
             </router-link>
             <router-link
@@ -211,6 +211,14 @@ export default {
       queue: state => state.queue,
       url: state => state.route.path
     }),
+    labels () {
+      let pendingRequests = this.$gettext('Pending import requests')
+      let pendingFollows = this.$gettext('Pending follow requests')
+      return {
+        pendingRequests,
+        pendingFollows
+      }
+    },
     showAdmin () {
       let adminPermissions = [
         this.$store.state.auth.availablePermissions['federation'],

front/src/components/audio/PlayButton.vue

 <template>
   <div :title="title" :class="['ui', {'tiny': discrete}, 'buttons']">
     <button
-      :title="$gettext('Add to current queue')"
+      :title="labels.addToQueue"
       @click="addNext(true)"
       :disabled="!playable"
       :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
@@ -42,6 +42,11 @@ export default {
     jQuery(this.$el).find('.ui.dropdown').dropdown()
   },
   computed: {
+    labels () {
+      return {
+        addToQueue: this.$gettext('Add to current queue')
+      }
+    },
     title () {
       if (this.playable) {
         return this.$gettext('Play immediatly')

front/src/components/audio/Player.vue

@@ -57,44 +57,50 @@
 
       <div class="two wide column controls ui grid">
         <div
-          :title="$gettext('Previous track')"
+          :title="labels.previousTrack"
           class="two wide column control"
           :disabled="emptyQueue">
             <i @click="previous" :class="['ui', 'backward', {'disabled': emptyQueue}, 'big', 'icon']"></i>
         </div>
         <div
           v-if="!playing"
-          :title="$gettext('Play track')"
+          :title="labels.play"
           class="two wide column control">
             <i @click="togglePlay" :class="['ui', 'play', {'disabled': !currentTrack}, 'big', 'icon']"></i>
         </div>
         <div
           v-else
-          :title="$gettext('Pause track')"
+          :title="labels.pause"
           class="two wide column control">
             <i @click="togglePlay" :class="['ui', 'pause', {'disabled': !currentTrack}, 'big', 'icon']"></i>
         </div>
         <div
-          :title="$gettext('Next track')"
+          :title="labels.next"
           class="two wide column control"
           :disabled="!hasNext">
             <i @click="next" :class="['ui', {'disabled': !hasNext}, 'step', 'forward', 'big', 'icon']" ></i>
         </div>
         <div class="two wide column control volume-control">
-          <i :title="$gettext('Unmute')" @click="$store.commit('player/volume', 1)" v-if="volume === 0" class="volume off secondary icon"></i>
-          <i :title="$gettext('Mute')" @click="$store.commit('player/volume', 0)" v-else-if="volume < 0.5" class="volume down secondary icon"></i>
-          <i :title="$gettext('Mute')" @click="$store.commit('player/volume', 0)" v-else class="volume up secondary icon"></i>
+          <i
+            :title="labels.unmute"
+            @click="$store.commit('player/volume', 1)" v-if="volume === 0" class="volume off secondary icon"></i>
+          <i
+            :title="labels.mute"
+            @click="$store.commit('player/volume', 0)" v-else-if="volume < 0.5" class="volume down secondary icon"></i>
+          <i
+            :title="labels.mute"
+            @click="$store.commit('player/volume', 0)" v-else class="volume up secondary icon"></i>
           <input type="range" step="0.05" min="0" max="1" v-model="sliderVolume" />
         </div>
         <div class="two wide column control looping">
           <i
-            :title="$gettext('Looping disabled. Click to switch to single-track looping.')"
+            :title="labels.loopingDisabled"
             v-if="looping === 0"
             @click="$store.commit('player/looping', 1)"
             :disabled="!currentTrack"
             :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'secondary', 'icon']"></i>
           <i
-            :title="$gettext('Looping on a single track. Click to switch to whole queue looping.')"
+            :title="labels.loopingSingle"
             v-if="looping === 1"
             @click="$store.commit('player/looping', 2)"
             :disabled="!currentTrack"
@@ -102,7 +108,7 @@
             <span class="ui circular tiny orange label">1</span>
           </i>
           <i
-            :title="$gettext('Looping on whole queue. Click to disable looping.')"
+            :title="labels.loopingWhole"
             v-if="looping === 2"
             @click="$store.commit('player/looping', 0)"
             :disabled="!currentTrack"
@@ -111,7 +117,7 @@
         </div>
         <div
           :disabled="queue.tracks.length === 0"
-          :title="$gettext('Shuffle your queue')"
+          :title="labels.shuffle"
           class="two wide column control">
           <div v-if="isShuffling" class="ui inline shuffling inverted small active loader"></div>
           <i v-else @click="shuffle()" :class="['ui', 'random', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
@@ -119,7 +125,7 @@
         <div class="one wide column"></div>
         <div
           :disabled="queue.tracks.length === 0"
-          :title="$gettext('Clear your queue')"
+          :title="labels.clear"
           class="two wide column control">
           <i @click="clean()" :class="['ui', 'trash', 'secondary', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
         </div>
@@ -236,6 +242,32 @@ export default {
       currentTimeFormatted: 'player/currentTimeFormatted',
       progress: 'player/progress'
     }),
+    labels () {
+      let previousTrack = this.$gettext('Previous track')
+      let play = this.$gettext('Play track')
+      let pause = this.$gettext('Pause track')
+      let next = this.$gettext('Next track')
+      let unmute = this.$gettext('Unmute')
+      let mute = this.$gettext('Mute')
+      let loopingDisabled = this.$gettext('Looping disabled. Click to switch to single-track looping.')
+      let loopingSingle = this.$gettext('Looping on a single track. Click to switch to whole queue looping.')
+      let loopingWhole = this.$gettext('Looping on whole queue. Click to disable looping.')
+      let shuffle = this.$gettext('Shuffle your queue')
+      let clear = this.$gettext('Clear your queue')
+      return {
+        previousTrack,
+        play,
+        pause,
+        next,
+        unmute,
+        mute,
+        loopingDisabled,
+        loopingSingle,
+        loopingWhole,
+        shuffle,
+        clear
+      }
+    },
     style: function () {
       let style = {
         'background': this.ambiantGradiant

front/src/components/audio/Search.vue

@@ -4,7 +4,7 @@
     <div :class="['ui', {'loading': isLoading }, 'search']">
       <div class="ui icon big input">
         <i class="search icon"></i>
-        <input ref="search" class="prompt" placeholder="Artist, album, track..." v-model.trim="query" type="text" />
+        <input ref="search" class="prompt" :placeholder="labels.searchPlaceholder" v-model.trim="query" type="text" />
       </div>
     </div>
     <template v-if="query.length > 0">
@@ -59,6 +59,13 @@ export default {
     }
     this.search()
   },
+  computed: {
+    labels () {
+      return {
+        searchPlaceholder: this.$gettext('Artist, album, track...')
+      }
+    }
+  },
   methods: {
     search: _.debounce(function () {
       if (this.query.length < 1) {

front/src/components/audio/SearchBar.vue

 <template>
   <div class="ui fluid category search">
     <slot></slot><div class="ui icon input">
-      <input class="prompt" placeholder="Search for artists, albums, tracks..." type="text">
+      <input class="prompt" :placeholder="labels.placeholder" type="text">
       <i class="search icon"></i>
     </div>
     <div class="results"></div>
@@ -14,7 +14,17 @@ import jQuery from 'jquery'
 import router from '@/router'
 
 export default {
+  computed: {
+    labels () {
+      return {
+        placeholder: this.$gettext('Search for artists, albums, tracks...')
+      }
+    }
+  },
   mounted () {
+    let artistLabel = this.$gettext('Artist')
+    let albumLabel = this.$gettext('Album')
+    let trackLabel = this.$gettext('Track')
     let self = this
     jQuery(this.$el).search({
       type: 'category',
@@ -39,7 +49,7 @@ export default {
             {
               code: 'artists',
               route: 'library.artists.detail',
-              name: 'Artist',
+              name: artistLabel,
               getTitle (r) {
                 return r.name
               },
@@ -50,7 +60,7 @@ export default {
             {
               code: 'albums',
               route: 'library.albums.detail',
-              name: 'Album',
+              name: albumLabel,
               getTitle (r) {
                 return r.title
               },
@@ -61,7 +71,7 @@ export default {
             {
               code: 'tracks',
               route: 'library.tracks.detail',
-              name: 'Track',
+              name: trackLabel,
               getTitle (r) {
                 return r.title
               },

front/src/components/auth/Login.vue

 <template>
-  <div class="main pusher" v-title="'Log In'">
+  <div class="main pusher" v-title="labels.title">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2><translate>Log in to your Funkwhale account</translate></h2>
@@ -24,7 +24,7 @@
             required
             type="text"
             autofocus
-            placeholder="Enter your username or email"
+            :placeholder="labels.usernamePlaceholder"
             v-model="credentials.username"
             >
           </div>
@@ -72,6 +72,16 @@ export default {
   mounted () {
     this.$refs.username.focus()
   },
+  computed: {
+    labels () {
+      let usernamePlaceholder = this.$gettext('Enter your username or email')
+      let title = this.$gettext('Log In')
+      return {
+        usernamePlaceholder,
+        title
+      }
+    }
+  },
   methods: {
     submit () {
       var self = this

front/src/components/auth/Logout.vue

 <template>
-  <div class="main pusher" v-title="'Log Out'">
+  <div class="main pusher" v-title="labels.title">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>
@@ -14,7 +14,13 @@
 
 <script>
 export default {
-  name: 'logout'
+  computed: {
+    labels () {
+      return {
+        title: this.$gettext('Log Out')
+      }
+    }
+  }
 }
 </script>
 

front/src/components/auth/Profile.vue

 <template>
-  <div class="main pusher" v-title="username + '\'s Profile'">
+  <div class="main pusher" v-title="labels.usernameProfile">
     <div v-if="isLoading" class="ui vertical segment">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
@@ -39,6 +39,13 @@ export default {
     this.$store.dispatch('auth/fetchProfile')
   },
   computed: {
+    labels () {
+      let msg = this.$gettext('%{ username }\'s profile')
+      let usernameProfile = this.$gettextInterpolate(msg, {username: this.username})
+      return {
+        usernameProfile
+      }
+    },
     signupDate () {
       let d = new Date(this.$store.state.auth.profile.date_joined)
       return dateFormat(d, 'longDate')

front/src/components/auth/Settings.vue

 <template>
-  <div class="main pusher" v-title="'Account Settings'">
+  <div class="main pusher" v-title="labels.title">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2 class="ui header">
@@ -63,7 +63,7 @@
             <translate>Change password</translate>
             <p slot="modal-header"><translate>Change your password?</translate></p>
             <div slot="modal-content">
-              <p>{{ $gettext("Changing your password will have the following consequences") }}</p>
+              <p><translate>Changing your password will have the following consequences</translate></p>
               <ul>
                 <li><translate>You will be logged out from this session and have to log out with the new one</translate></li>
                 <li><translate>Your Subsonic password will be changed to a new, random one, logging you out from devices that used the old Subsonic password</translate></li>
@@ -175,6 +175,11 @@ export default {
     }
   },
   computed: {
+    labels () {
+      return {
+        title: this.$gettext('Account Settings')
+      }
+    },
     orderedSettingsFields () {
       let self = this
       return this.settings.order.map(id => {

front/src/components/auth/Signup.vue

 <template>
-  <div class="main pusher" v-title="'Sign Up'">
+  <div class="main pusher" v-title="labels.title">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
-        <h2>{{ $gettext("Create a funkwhale account") }}</h2>
+        <h2><translate>Create a funkwhale account</translate></h2>
         <form
           :class="['ui', {'loading': isLoadingInstanceSetting}, 'form']"
           @submit.prevent="submit()">
@@ -11,45 +11,45 @@
           </p>
 
           <div v-if="errors.length > 0" class="ui negative message">
-            <div class="header">{{ $gettext("We cannot create your account") }}</div>
+            <div class="header"><translate>We cannot create your account</translate></div>
             <ul class="list">
               <li v-for="error in errors">{{ error }}</li>
             </ul>
           </div>
           <div class="field">
-            <label>{{ $gettext("Username") }}</label>
+            <label><translate>Username</translate></label>
             <input
             ref="username"
             required
             type="text"
             autofocus
-            placeholder="Enter your username"
+            :placeholder="labels.usernamePlaceholder"
             v-model="username">
           </div>
           <div class="field">
-            <label>{{ $gettext("Email") }}</label>
+            <label><translate>Email</translate></label>
             <input
             ref="email"
             required
             type="email"
-            placeholder="Enter your email"
+            :placeholder="labels.emailPlaceholder"
             v-model="email">
           </div>
           <div class="field">
-            <label>{{ $gettext("Password") }}</label>
+            <label><translate>Password</translate></label>
             <password-input v-model="password" />
           </div>
           <div class="field">
-            <label v-if="!$store.state.instance.settings.users.registration_enabled.value">{{ $gettext("Invitation code") }}</label>
-            <label v-else>{{ $gettext("Invitation code (optional)") }}</label>
+            <label v-if="!$store.state.instance.settings.users.registration_enabled.value"><translate>Invitation code</translate></label>
+            <label v-else><translate>Invitation code (optional)</translate></label>
             <input
             :required="!$store.state.instance.settings.users.registration_enabled.value"
             type="text"
-            :placeholder="$gettext('Enter your invitation code (case insensitive)')"
+            :placeholder="labels.placeholder"
             v-model="invitation">
           </div>
           <button :class="['ui', 'green', {'loading': isLoading}, 'button']" type="submit">
-            {{ $gettext("Create my account") }}
+            <translate>Create my account</translate>
           </button>
         </form>
       </div>
@@ -89,6 +89,20 @@ export default {
       }
     })
   },
+  computed: {
+    labels () {
+      let title = this.$gettext('Sign Up')
+      let placeholder = this.$gettext('Enter your invitation code (case insensitive)')
+      let usernamePlaceholder = this.$gettext('Enter your username')
+      let emailPlaceholder = this.$gettext('Enter your email')
+      return {
+        title,
+        usernamePlaceholder,
+        emailPlaceholder,
+        placeholder
+      }
+    }
+  },
   methods: {
     submit () {
       var self = this

front/src/components/common/ActionTable.vue

@@ -35,7 +35,7 @@
                     </translate>
                   </p>
                   <p slot="modal-content">
-                    {{ $gettext('This may affect a lot of elements, please double check this is really what you want.')}}
+                    <translate>This may affect a lot of elements, please double check this is really what you want.</translate>
                   </p>
                   <p slot="modal-confirm"><translate>Launch</translate></p>
                 </dangerous-button>

front/src/components/favorites/List.vue

 <template>
-  <div class="main pusher" v-title="'Your Favorites'">
+  <div class="main pusher" v-title="labels.title">
     <div class="ui vertical center aligned stripe segment">
       <div :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
         <div class="ui text loader">
@@ -103,6 +103,13 @@ export default {
   mounted () {
     $('.ui.dropdown').dropdown()
   },
+  computed: {
+    labels () {
+      return {
+        title: this.$gettext('Your Favorites')
+      }
+    }
+  },
   methods: {
     updateQueryString: function () {
       this.$router.replace({

front/src/components/federation/LibraryFollowTable.vue

@@ -3,7 +3,7 @@
     <div class="ui form">
       <div class="fields">
         <div class="ui six wide field">
-          <input type="text" v-model="search" placeholder="Search by username, domain..." />
+          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
         </div>
         <div class="ui four wide inline field">
           <div class="ui checkbox">
@@ -134,6 +134,13 @@ export default {
   created () {
     this.fetchData()
   },
+  computed: {
+    labels () {
+      return {
+        searchPlaceholder: this.$gettext('Search by username, domain...')
+      }
+    }
+  },
   methods: {
     fetchData () {
       let params = _.merge({

front/src/components/federation/LibraryForm.vue

@@ -20,7 +20,7 @@
         <label>
           <translate>Library name</translate>
         </label>
-        <input v-model="libraryUsername" type="text" placeholder="library@demo.funkwhale.audio" />
+        <input v-model="libraryUsername" type="text" :placeholder="labels.namePlaceholder" />
       </div>
       <div class="ui field">
         <label>&nbsp;</label>
@@ -91,6 +91,11 @@ export default {
     }
   },
   computed: {
+    labels () {
+      return {
+        namePlaceholder: this.$gettext('library@demo.funkwhale.audio')
+      }
+    },
     scanErrors () {
       let errors = []
       if (!this.result) {

front/src/components/federation/LibraryTrackTable.vue

@@ -4,7 +4,7 @@
       <div class="fields">
         <div class="ui field">
           <label><translate>Search</translate></label>
-          <input type="text" v-model="search" placeholder="Search by title, artist, domain..." />
+          <input type="text" v-model="search" :placeholder="labels.searchPlaceholder" />
         </div>
         <div class="ui field">
           <label><translate>Import status</translate></label>
@@ -145,6 +145,11 @@ export default {
     }
   },
   computed: {
+    labels () {
+      return {
+        searchPlaceholder: this.$gettext('Search by title, artist, domain...')
+      }
+    },
     actionFilters () {
       var currentFilters = {
         q: this.search

front/src/components/forms/PasswordInput.vue

@@ -6,7 +6,7 @@
     :type="passwordInputType"
     @input="$emit('input', $event.target.value)"
     :value="value">
-    <span @click="showPassword = !showPassword" :title="$gettext('Show/hide password')" class="ui icon button">