From 87c456f603c12211609ae941bad6f9bb20f239a8 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Tue, 7 Mar 2023 08:38:15 +0100
Subject: [PATCH] fix(eslint): fix i18n issues

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
---
 front/.eslintrc.js                    |  1 +
 front/src/components/Queue.vue        |  9 ++++++++-
 front/src/components/audio/Player.vue | 18 ++++++++++++++++--
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/front/.eslintrc.js b/front/.eslintrc.js
index f3e73be3d..c9ea0eb18 100644
--- a/front/.eslintrc.js
+++ b/front/.eslintrc.js
@@ -38,6 +38,7 @@ module.exports = {
     '@intlify/vue-i18n/valid-message-syntax': 'error',
     '@intlify/vue-i18n/no-i18n-t-path-prop': 'error',
     '@intlify/vue-i18n/no-missing-keys': 'error',
+    '@intlify/vue-i18n/no-dynamic-keys': 'error',
     '@intlify/vue-i18n/no-unused-keys': ['error', {
       extensions: ['.ts', '.vue'],
       enableFix: true
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 5ce0ce27a..023563feb 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -397,7 +397,14 @@ if (!isWebGLSupported) {
               {{ labels.queue }}
               <div class="sub header">
                 <div>
-                  <span v-t="{ path: 'components.Queue.meta.queuePosition', args: { index: currentIndex + 1, length: queue.length } }" />
+                  <i18n-t keypath="components.Queue.meta.queuePosition">
+                    <template #index>
+                      {{ currentIndex + 1 }}
+                    </template>
+                    <template #length>
+                      {{ queue.length }}
+                    </template>
+                  </i18n-t>
                   <span class="middle pipe symbol" />
                   <span v-t="'components.Queue.meta.end'" />
                   <span :title="labels.duration">
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 2bd5755a8..2e38e839a 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -301,14 +301,28 @@ const hideArtist = () => {
                 @click.stop="toggleMobilePlayer"
               >
                 <i class="stream icon" />
-                <span v-t="{ path: 'components.audio.Player.meta.position', args: { index: currentIndex + 1, length: queue.length } }" />
+                <i18n-t keypath="components.audio.Player.meta.position">
+                  <template #index>
+                    {{ currentIndex + 1 }}
+                  </template>
+                  <template #length>
+                    {{ queue.length }}
+                  </template>
+                </i18n-t>
               </button>
               <button
                 class="position circular control button desktop-and-below"
                 @click.stop="switchTab"
               >
                 <i class="stream icon" />
-                <span v-t="{ path: 'components.audio.Player.meta.position', args: { index: currentIndex + 1, length: queue.length } }" />
+                <i18n-t keypath="components.audio.Player.meta.position">
+                  <template #index>
+                    {{ currentIndex + 1 }}
+                  </template>
+                  <template #length>
+                    {{ queue.length }}
+                  </template>
+                </i18n-t>
               </button>
 
               <button