[web] Fix for error messages not displaying #1500

web-src/src/components/ModalDialogQueueItem.vue

@@ -85,7 +85,12 @@
                   <span class="heading" v-text="$t('dialog.queue-item.type')" />
                   <span class="title is-6">
                     <span
-                      v-text="[item.media_kind, item.data_kind].join(' - ')"
+                      v-text="
+                        [
+                          $t('media.kind.' + item.media_kind),
+                          $t('data.kind.' + item.data_kind)
+                        ].join(' - ')
+                      "
                     />
                     <span
                       v-if="item.data_kind === 'spotify'"

web-src/src/filter/index.js

@@ -1,4 +1,7 @@
 import { DateTime, Duration } from 'luxon'
+import i18n from '@/i18n'
+
+const { t, locale } = i18n.global
 
 export const filters = {
   durationInHours: function (value_ms) {
@@ -31,11 +34,11 @@ export const filters = {
   },
 
   date: function (value) {
-    return DateTime.fromISO(value).toLocaleString(DateTime.DATE_FULL)
+    return DateTime.fromISO(value).setLocale(locale.value).toLocaleString(DateTime.DATE_FULL)
   },
 
   datetime: function (value) {
-    return DateTime.fromISO(value).toLocaleString(DateTime.DATETIME_MED)
+    return DateTime.fromISO(value).setLocale(locale.value).toLocaleString(DateTime.DATETIME_MED)
   },
 
   timeFromNow: function (value) {
@@ -45,19 +48,19 @@ export const filters = {
   },
 
   number: function (value) {
-    return value.toLocaleString()
+    return value.toLocaleString(locale.value)
   },
 
   channels: function (value) {
     if (value === 1) {
-      return 'mono'
+      return t('filter.mono')
     }
     if (value === 2) {
-      return 'stereo'
+      return t('filter.stereo')
     }
     if (!value) {
       return ''
     }
-    return value + ' channels'
+    return t('filter.channels', { value })
   }
 }

web-src/src/lib/GroupByList.js

@@ -1,3 +1,6 @@
+import i18n from '@/i18n'
+
+const { t, locale } = i18n.global
 const GROUP_KEY_NONE = 'GROUP_KEY_NONE'
 
 export function noop() {
@@ -29,7 +32,7 @@ export function byName(field, defaultValue = '_') {
       const fieldA = a[field] || defaultValue
       const fieldB = b[field] || defaultValue
 
-      return fieldA.localeCompare(fieldB)
+      return fieldA.localeCompare(fieldB, locale.value)
     },
 
     groupKeyFn: (item) => {
@@ -45,7 +48,7 @@ export function byYear(field, { direction = 'asc', defaultValue = '0000' }) {
       const fieldA = a[field] || defaultValue
       const fieldB = b[field] || defaultValue
 
-      const result = fieldA.localeCompare(fieldB)
+      const result = fieldA.localeCompare(fieldB, locale.value)
       return direction === 'asc' ? result : result * -1
     },
 
@@ -62,7 +65,7 @@ export function byDateSinceToday(field, defaultValue = '0000') {
       const fieldA = a[field] || defaultValue
       const fieldB = b[field] || defaultValue
 
-      return fieldB.localeCompare(fieldA)
+      return fieldB.localeCompare(fieldA, locale.value)
     },
 
     groupKeyFn: (item) => {
@@ -76,13 +79,13 @@ export function byDateSinceToday(field, defaultValue = '0000') {
 
       if (diff < 86400000) {
         // 24h
-        return 'Today'
+        return t('group-by-list.today')
       } else if (diff < 604800000) {
         // 7 days
-        return 'Last week'
+        return t('group-by-list.last-week')
       } else if (diff < 2592000000) {
         // 30 days
-        return 'Last month'
+        return t('group-by-list.last-month')
       }
       return fieldValue.substring(0, 4)
     }

web-src/src/locales/en.json

@@ -87,8 +87,8 @@
     "queue-item": {
       "album-artist": "Album Artist",
       "album": "Album",
-      "bitrate": "{'|'} {rate} kbit/s",
-      "channels": "{'|'} {channels}",
+      "bitrate": " {'|'} {rate} kbit/s",
+      "channels": " {'|'} {channels}",
       "composer": "Composer",
       "duration": "Duration",
       "genre": "Genre",
@@ -97,7 +97,7 @@
       "position": "Disc / Track",
       "quality": "Quality",
       "remove": "Remove",
-      "samplerate": "{'|'} {rate} Hz",
+      "samplerate": " {'|'} {rate} Hz",
       "spotify-album": "album",
       "spotify-artist": "artist",
       "type": "Type",
@@ -150,7 +150,7 @@
       "added-on": "Added On",
       "album-artist": "Album Artist",
       "album": "Album",
-      "bitrate": " {'|'} {rate} Kb/s",
+      "bitrate": " {'|'} {rate} kbit/s",
       "channels": " {'|'} {channels}",
       "comment": "Comment",
       "composer": "Composer",
@@ -543,5 +543,10 @@
     "today": "Today",
     "last-week": "Last week",
     "last-month": "Last month"
+  },
+  "filter": {
+    "mono": "mono",
+    "stereo": "stereo",
+    "channels": "{count} channels"
   }
 }

web-src/src/locales/fr.json

@@ -87,8 +87,8 @@
     "queue-item": {
       "album-artist": "Artiste de l’album",
       "album": "Album",
-      "bitrate": "{'|'} {rate} kbit/s",
-      "channels": "{'|'} {channels}",
+      "bitrate": " {'|'} {rate} kbit/s",
+      "channels": " {'|'} {channels}",
       "composer": "Compositeur",
       "duration": "Durée",
       "genre": "Genre",
@@ -97,7 +97,7 @@
       "position": "Disque / Piste",
       "quality": "Qualité",
       "remove": "Supprimer",
-      "samplerate": "{'|'} {rate} Hz",
+      "samplerate": " {'|'} {rate} Hz",
       "spotify-album": "album",
       "spotify-artist": "artiste",
       "type": "Type",
@@ -150,7 +150,7 @@
       "added-on": "Ajouté le",
       "album-artist": "Artiste de l’album",
       "album": "Album",
-      "bitrate": " {'|'} {rate} Kb/s",
+      "bitrate": " {'|'} {rate} kbit/s",
       "channels": " {'|'} {channels}",
       "comment": "Commentaire",
       "composer": "Compositeur",
@@ -543,5 +543,10 @@
     "today": "Aujourd’hui",
     "last-week": "La semaine dernière",
     "last-month": "Le mois dernier"
+  },
+  "filter": {
+    "mono": "mono",
+    "stereo": "stéréo",
+    "channels": "{count} canaux"
   }
 }

web-src/src/webapi/index.js

@@ -1,14 +1,18 @@
 import axios from 'axios'
 import store from '@/store'
+import i18n from '@/i18n'
+
+const { t } = i18n.global
 
 axios.interceptors.response.use(
   function (response) {
     return response
   },
   function (error) {
+    console.log(i18n)
     if (error.request.status && error.request.responseURL) {
       store.dispatch('add_notification', {
-        text: this.$t('server.request-failed', {
+        text: t('server.request-failed', {
           status: error.request.status,
           cause: error.request.statusText,
           url: error.request.responseURL
@@ -81,7 +85,7 @@ export default {
   queue_add(uri) {
     return axios.post('./api/queue/items/add?uris=' + uri).then((response) => {
       store.dispatch('add_notification', {
-        text: this.$t('server.appended-tracks', { count: response.data.count }),
+        text: t('server.appended-tracks', { count: response.data.count }),
         type: 'info',
         timeout: 2000
       })
@@ -98,7 +102,7 @@ export default {
       .post('./api/queue/items/add?uris=' + uri + '&position=' + position)
       .then((response) => {
         store.dispatch('add_notification', {
-          text: this.$t('server.appended-tracks', {
+          text: t('server.appended-tracks', {
             count: response.data.count
           }),
           type: 'info',
@@ -116,7 +120,7 @@ export default {
       .post('./api/queue/items/add', undefined, { params: options })
       .then((response) => {
         store.dispatch('add_notification', {
-          text: this.$t('server.appended-tracks', {
+          text: t('server.appended-tracks', {
             count: response.data.count
           }),
           type: 'info',
@@ -138,7 +142,7 @@ export default {
       .post('./api/queue/items/add', undefined, { params: options })
       .then((response) => {
         store.dispatch('add_notification', {
-          text: this.$t('server.appended-tracks', {
+          text: t('server.appended-tracks', {
             count: response.data.count
           }),
           type: 'info',
@@ -153,7 +157,7 @@ export default {
       .post('./api/queue/save', undefined, { params: { name: name } })
       .then((response) => {
         store.dispatch('add_notification', {
-          text: this.$t('server.queue-saved', { name: name }),
+          text: t('server.queue-saved', { name: name }),
           type: 'info',
           timeout: 2000
         })