From 9ff510a9f6d6c4d36acacdfc26d6f9ecdb37a49d Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Sat, 12 Feb 2022 03:35:10 +0100
Subject: [PATCH] update to version 1.0.6 (package updates + translate function
 for match-chat)

---
 package.json                           |   7 +-
 src/components/MatchChatHistory.vue    | 208 +++++++++++++++++--------
 src/components/TranslateChatButton.vue | 122 +++++++++++++++
 src/utils/ApiRequests.js               |  59 +++++--
 src/utils/index.js                     |   2 +
 yarn.lock                              | 141 ++++++++++++++++-
 6 files changed, 454 insertions(+), 85 deletions(-)
 create mode 100644 src/components/TranslateChatButton.vue

diff --git a/package.json b/package.json
index 935cd34..34839dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "csgowtf",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -16,10 +16,11 @@
     "echarts": "^5.3.0",
     "fork-awesome": "^1.2.0",
     "http-status-codes": "^2.2.0",
+    "iso-639-1": "^2.1.13",
     "jquery": "^3.6.0",
     "luxon": "^2.3.0",
     "string-sanitizer": "^2.0.2",
-    "vue": "^3.2.29",
+    "vue": "^3.2.30",
     "vue-matomo": "^4.1.0",
     "vue-router": "^4.0.12",
     "vue3-cookies": "^1.0.6",
@@ -31,7 +32,7 @@
     "@vue/cli-plugin-router": "~4.5.15",
     "@vue/cli-plugin-vuex": "~4.5.15",
     "@vue/cli-service": "~4.5.15",
-    "@vue/compiler-sfc": "^3.2.29",
+    "@vue/compiler-sfc": "^3.2.30",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^7.20.0",
diff --git a/src/components/MatchChatHistory.vue b/src/components/MatchChatHistory.vue
index fff606d..1df466d 100644
--- a/src/components/MatchChatHistory.vue
+++ b/src/components/MatchChatHistory.vue
@@ -1,20 +1,27 @@
 <template>
-  <div class="chat-history mt-2">
-    <table v-if="data.chat.length > 0" class="table table-borderless">
-      <tbody>
-      <tr v-for="(m, id) in data.chat" :key="id">
-        <td>
-          {{ ConvertTickToTime(m.tick, m.tick_rate) }}
-        </td>
-        <td class="td-avatar">
-          <img :class="'team-color-' + m.color"
-               :src="constructAvatarUrl(m.avatar)"
-               alt="Player avatar"
-               class="avatar">
-        </td>
-        <td :class="m.startSide === 1 ? 'text-info' : 'text-warning'"
-            class="name d-flex"
-            @click="GoToPlayer(m.steamid64)">
+  <div class="container w-50">
+    <TranslateChatButton
+        v-if="data.chat.length > 0"
+        :translated="data.translatedText.length > 0"
+        class="translate-btn"
+        @translated="handleTranslatedText"
+    />
+    <div v-if="data.chat.length > 0" class="chat-history mt-2">
+      <table class="table table-borderless">
+        <tbody>
+        <tr v-for="(m, id) in data.chat" :key="id">
+          <td class="td-time">
+            {{ ConvertTickToTime(m.tick, m.tick_rate) }}
+          </td>
+          <td class="td-avatar">
+            <img :class="'team-color-' + m.color"
+                 :src="constructAvatarUrl(m.avatar)"
+                 alt="Player avatar"
+                 class="avatar">
+          </td>
+          <td :class="m.startSide === 1 ? 'text-info' : 'text-warning'"
+              class="td-name d-flex"
+              @click="GoToPlayer(m.steamid64)">
           <span>
             <i v-if="m.tracked" class="fa fa-dot-circle-o text-success tracked" title="Tracked user"/>
             <span :class="(m.vac && FormatVacDate(m.vac_date, store.state.matchDetails.date) !== '')
@@ -29,19 +36,27 @@
               {{ m.player }}
             </span>
           </span>
-        </td>
-        <td>
-          <i class="fa fa-caret-right"/>
-          <span v-if="!m.all_chat" class="ms-1">
+          </td>
+          <td class="td-icon">
+            <i class="fa fa-caret-right"/>
+            <span v-if="!m.all_chat" class="ms-1">
             (team)
           </span>
-        </td>
-        <td class="message">
-          {{ m.message }}
-        </td>
-      </tr>
-      </tbody>
-    </table>
+          </td>
+          <td class="td-message">
+            {{ data.translatedText.length === 0 ? m.message : data.originalChat[id].message }}
+            <span v-if="m.translated_from"
+                  :class="m.translated_from ? 'text-success' : ''"
+                  :title="`Translated from ${ISO6391.getName(m.translated_from)}`"
+                  class="ms-2 helpicon">
+            <br/>
+            {{ m.message }}
+          </span>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
     <div v-else>
       <h3>No chat available</h3>
     </div>
@@ -51,24 +66,48 @@
 <script>
 import {useStore} from "vuex";
 import {onMounted, reactive} from "vue";
-import {GetChatHistory, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate, truncate} from "@/utils";
+import {constructAvatarUrl, ConvertTickToTime, FormatVacDate, GetChatHistory, GoToPlayer, truncate} from "@/utils";
+import TranslateChatButton from "@/components/TranslateChatButton";
+import ISO6391 from 'iso-639-1'
 
 export default {
   name: "MatchChatHistory",
+  components: {TranslateChatButton},
   setup() {
     const store = useStore()
 
     const data = reactive({
       chat: [],
+      translatedText: [],
+      originalChat: []
     })
 
+    const handleTranslatedText = async (e) => {
+      const res = await e
+
+      if (res === 'original' && data.originalChat.length > 0) {
+        data.chat = data.originalChat
+        return
+      }
+      if (res === 'already translated' && data.translatedText.length > 0) {
+        data.chat = data.translatedText
+        return
+      }
+      if (res !== null) {
+        data.translatedText = await setPlayer(sortChatHistory(res, true))
+        data.chat = data.translatedText
+      }
+    }
+
     const getChatHistory = async () => {
       const resData = await GetChatHistory(store, store.state.matchDetails.match_id)
-      if (resData !== null)
+      if (resData !== null) {
         data.chat = await setPlayer(sortChatHistory(resData))
+        data.originalChat = data.chat
+      }
     }
 
-    const sortChatHistory = (res = {}) => {
+    const sortChatHistory = (res = {}, translated = false) => {
       let arr = []
       if (res !== {}) {
         Object.keys(res).forEach(i => {
@@ -77,7 +116,9 @@ export default {
               player: i,
               tick: o.tick,
               all_chat: o.all_chat,
-              message: o.message
+              message: o.message,
+              translated_from: translated ? o.translated_from : null,
+              translated_to: translated ? o.translated_to : null
             })
             arr.push(obj)
           })
@@ -106,7 +147,9 @@ export default {
               tick: o.tick,
               tick_rate: store.state.matchDetails.tick_rate && store.state.matchDetails.tick_rate !== -1 ? store.state.matchDetails.tick_rate : 64,
               all_chat: o.all_chat,
-              message: o.message
+              message: o.message,
+              translated_from: o.translated_from,
+              translated_to: o.translated_to
             })
             arr.push(obj)
           }
@@ -119,66 +162,95 @@ export default {
       getChatHistory()
     })
 
-    return {data, store, constructAvatarUrl, GoToPlayer, ConvertTickToTime, FormatVacDate}
+    return {
+      data,
+      store,
+      ISO6391,
+      constructAvatarUrl,
+      GoToPlayer,
+      ConvertTickToTime,
+      FormatVacDate,
+      handleTranslatedText
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-table td {
-  padding: .5rem;
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.avatar {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
+.translate-btn {
+  margin-top: .5rem;
 }
 
-.name {
-  cursor: pointer;
-  text-align: left;
-  width: 20ch;
-  max-width: 20ch;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  .tracked {
-    font-size: .8rem;
-    margin-right: .2rem;
+table {
+  width: 700px;
+  max-width: 700px;
+  td {
+    padding: .5rem;
   }
 
-  .ban-shadow {
-    color: red;
-    text-shadow: 0 0 1rem orangered;
+  .td-time {
+    width: 80px;
   }
-}
 
-.fa-caret-right {
-  font-size: 1rem;
-}
+  .td-avatar {
+    width: 30px;
+    .avatar {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+    }
+  }
 
-.message {
-  width: auto;
-  max-width: 40ch;
-}
+  .td-name {
+    width: 250px;
+    max-width: 250px;
+    cursor: pointer;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 
-@media screen and (max-width: 991px) {
-  .chat-history {
-    margin-left: auto;
-    margin-right: auto;
+    .tracked {
+      font-size: .8rem;
+      margin-right: .2rem;
+    }
+
+    .ban-shadow {
+      color: red;
+      text-shadow: 0 0 1rem orangered;
+    }
+  }
+
+  .td-icon {
+    width: 20px;
+
+    .fa-caret-right {
+      font-size: 1rem;
+    }
+  }
+
+  .td-message {
+    width: 320px;
   }
 }
 
 @media screen and (max-width: 576px) {
-
   .td-avatar {
     display: none;
   }
-  .name {
+  .td-name {
     width: 120px;
     max-width: 120px;
   }
+  .td-message {
+    width: auto;
+  }
 }
 </style>
diff --git a/src/components/TranslateChatButton.vue b/src/components/TranslateChatButton.vue
new file mode 100644
index 0000000..05a8451
--- /dev/null
+++ b/src/components/TranslateChatButton.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="toggle-btn text-muted">
+    <div @click.prevent="$emit('translated', handleBtnClick())"
+         class="d-flex">
+      <span class="text-center mx-2">
+        <i id="toggle-off" class="fa fa-toggle-off show"/>
+        <i id="toggle-on" class="fa fa-toggle-on"/>
+      </span>
+      <div>
+        <span :class="toggle === 'translated' ? 'text-warning' : ''"
+            class="float-start">
+          <span class="text-uppercase">Translate to {{data.browserLang}}</span>
+          <span class="loading-icon ms-2" title="Translating..">
+            <i class="fa fa-spinner fa-pulse fa-fw"/>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {onMounted, reactive, ref} from "vue";
+import ISO6391 from 'iso-639-1'
+import {GetChatHistoryTranslated} from "@/utils";
+import {useStore} from "vuex";
+
+export default {
+  name: 'TranslateChatButton',
+  props: {
+    translated: {
+      type: Boolean,
+      required: true
+    }
+  },
+  setup(props) {
+    const store = useStore()
+
+    const data = reactive({
+      browserIsoCode: '',
+      browserLangCode: '',
+      browserLang: '',
+    })
+
+    const toggle = ref('original')
+
+    const setLanguageVariables = () => {
+      const navLangs = navigator.languages
+
+      data.browserIsoCode = navLangs.find((l) => l.length === 5)
+      data.browserLangCode = navLangs[0]
+
+      if (ISO6391.validate(data.browserLangCode)) {
+        data.browserLang = ISO6391.getNativeName(data.browserLangCode)
+      } else {
+        data.browserIsoCode = 'en-US'
+        data.browserLangCode = 'en'
+        data.browserLang = 'English'
+      }
+    }
+
+    const handleBtnClick = async () => {
+      let response
+
+      const refreshButton = document.querySelector('.loading-icon .fa-spinner')
+      refreshButton.classList.add('show')
+
+      toggleShow()
+
+      if (!props.translated && toggle.value === 'translated') {
+        response = await GetChatHistoryTranslated(store, store.state.matchDetails.match_id)
+      }
+      if (props.translated && toggle.value === 'translated')
+        response = 'already translated'
+      if (toggle.value === 'original')
+        response = 'original'
+
+      if (refreshButton.classList.contains('show'))
+        refreshButton.classList.remove('show')
+
+      return response
+    }
+
+    const toggleShow = () => {
+      const offBtn = document.getElementById('toggle-off')
+      const onBtn = document.getElementById('toggle-on')
+
+      if (offBtn.classList.contains('show')) {
+        offBtn.classList.remove('show')
+        onBtn.classList.add('show')
+        toggle.value = 'translated'
+      } else if (onBtn.classList.contains('show')) {
+        onBtn.classList.remove('show')
+        offBtn.classList.add('show')
+        toggle.value = 'original'
+      }
+    }
+
+    onMounted(() => {
+      setLanguageVariables()
+    })
+    return {data, toggle, handleBtnClick}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.toggle-btn {
+  margin: 0 auto;
+  cursor: pointer;
+
+  .fa {
+    display: none;
+    font-size: 1.2rem;
+    vertical-align: middle;
+
+    &.show {
+      display: inline-block;
+    }
+  }
+}
+</style>
diff --git a/src/utils/ApiRequests.js b/src/utils/ApiRequests.js
index 82e639b..428e4e4 100644
--- a/src/utils/ApiRequests.js
+++ b/src/utils/ApiRequests.js
@@ -34,7 +34,7 @@ export const GetUser = async (store, id) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
@@ -73,7 +73,7 @@ export const GetPlayerMeta = async (store, player_id, limit = 4) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
@@ -112,7 +112,7 @@ export const LoadMoreMatches = async (store, player_id, date) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
@@ -175,7 +175,7 @@ export const TrackMe = async (store, id64, authcode, sharecode = '') => {
     type: 'changeInfoState',
     data: {
       statuscode: status,
-      message: message,
+      message,
       type: 'error'
     }
   })
@@ -212,7 +212,7 @@ export const GetMatchDetails = async (store, match_id) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
@@ -251,7 +251,7 @@ export const GetPlayerValue = async (store, match_id) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
@@ -290,7 +290,7 @@ export const GetWeaponDmg = async (store, match_id) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
@@ -329,7 +329,46 @@ export const GetChatHistory = async (store, match_id) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
+          type: 'error'
+        }
+      })
+    })
+
+  return response
+}
+
+// /matches/<id>/chat/<langCode>   GET   returns chat history for match <id> with translated sections
+export const GetChatHistoryTranslated = async (store, match_id) => {
+  let response = null
+
+  await axios
+    .get(`${API_URL}/match/${match_id}/chat?translate=1`)
+    .then((res) => {
+      if (res.status === STATUS.OK)
+        response = res.data
+    })
+    .catch((err) => {
+      let message = ''
+
+      switch (err.response.status) {
+        case STATUS.BAD_REQUEST:
+          message = 'Bad request'
+          break
+        case STATUS.NOT_FOUND:
+          message = 'Chat was not found'
+          break
+        case STATUS.INTERNAL_SERVER_ERROR:
+          message = 'Unable to get chat'
+          break
+        default:
+          message = 'An unknown error occurred'
+      }
+      store.commit({
+        type: 'changeInfoState',
+        data: {
+          statuscode: err.response.status,
+          message,
           type: 'error'
         }
       })
@@ -365,7 +404,7 @@ export const GetMatches = async (store) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
@@ -401,7 +440,7 @@ export const LoadMoreMatchesExplore = async (store, date) => {
         type: 'changeInfoState',
         data: {
           statuscode: err.response.status,
-          message: message,
+          message,
           type: 'error'
         }
       })
diff --git a/src/utils/index.js b/src/utils/index.js
index 03b2974..88f0344 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -21,6 +21,7 @@ import {
   LoadMoreMatches,
   LoadMoreMatchesExplore,
   GetChatHistory,
+  GetChatHistoryTranslated,
   TrackMe
 } from "./ApiRequests";
 import {
@@ -42,6 +43,7 @@ import {
 
 export {
   MatchNotParsedTime,
+  GetChatHistoryTranslated,
   GetChatHistory,
   ConvertTickToTime,
   FormatDate,
diff --git a/yarn.lock b/yarn.lock
index 6cd1bc8..a2921ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1955,6 +1955,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-core@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/compiler-core@npm:3.2.30"
+  dependencies:
+    "@babel/parser": ^7.16.4
+    "@vue/shared": 3.2.30
+    estree-walker: ^2.0.2
+    source-map: ^0.6.1
+  checksum: 2faec7673ccaae02bdd8ceca4eaeddc354b045134b2c85f41d3b4c7f16eaf681f0a148a5b9123fab008d05304df09308f59e40953ec5e5017936ddeb21053b41
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-dom@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/compiler-dom@npm:3.2.29"
@@ -1965,7 +1977,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.2.29, @vue/compiler-sfc@npm:^3.2.29":
+"@vue/compiler-dom@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/compiler-dom@npm:3.2.30"
+  dependencies:
+    "@vue/compiler-core": 3.2.30
+    "@vue/shared": 3.2.30
+  checksum: e061156e2aeb33a18de0090bd3d9ff20b4dd3a6e481e75b866a65b1649cc8d5194e7179f976499aa26e75db299ba3cd0a5cb356a1ac88c0dfca2fb746662069d
+  languageName: node
+  linkType: hard
+
+"@vue/compiler-sfc@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/compiler-sfc@npm:3.2.29"
   dependencies:
@@ -1983,6 +2005,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-sfc@npm:3.2.30, @vue/compiler-sfc@npm:^3.2.30":
+  version: 3.2.30
+  resolution: "@vue/compiler-sfc@npm:3.2.30"
+  dependencies:
+    "@babel/parser": ^7.16.4
+    "@vue/compiler-core": 3.2.30
+    "@vue/compiler-dom": 3.2.30
+    "@vue/compiler-ssr": 3.2.30
+    "@vue/reactivity-transform": 3.2.30
+    "@vue/shared": 3.2.30
+    estree-walker: ^2.0.2
+    magic-string: ^0.25.7
+    postcss: ^8.1.10
+    source-map: ^0.6.1
+  checksum: 83d341a6829eac547401e311cca2c555346d976deeb875a89d4b0f64f9476bb2800bb60b08b871e972cc3e6dba948ca013f958447d699d35fe87931424f0c1a8
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-ssr@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/compiler-ssr@npm:3.2.29"
@@ -1993,6 +2033,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-ssr@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/compiler-ssr@npm:3.2.30"
+  dependencies:
+    "@vue/compiler-dom": 3.2.30
+    "@vue/shared": 3.2.30
+  checksum: 0b86bd0fe5de65268899c67f8fe73a97d0f1845a547a669a400ccfe78c093567c105af1c4e0db7a8d8d64d2a97a6f3dde59af657c504e2c88d870a1746db2256
+  languageName: node
+  linkType: hard
+
 "@vue/component-compiler-utils@npm:^3.1.0, @vue/component-compiler-utils@npm:^3.1.2":
   version: 3.2.2
   resolution: "@vue/component-compiler-utils@npm:3.2.2"
@@ -2043,6 +2093,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/reactivity-transform@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/reactivity-transform@npm:3.2.30"
+  dependencies:
+    "@babel/parser": ^7.16.4
+    "@vue/compiler-core": 3.2.30
+    "@vue/shared": 3.2.30
+    estree-walker: ^2.0.2
+    magic-string: ^0.25.7
+  checksum: 61c1f5b5bb229e1982d7585b4ac34e90836c6789b4c0b7dde9d3a089918f009fdf8f914486d9a47e210bd02fc7576996184a85b8d219594fcb3b7502d3241a66
+  languageName: node
+  linkType: hard
+
 "@vue/reactivity@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/reactivity@npm:3.2.29"
@@ -2052,6 +2115,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/reactivity@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/reactivity@npm:3.2.30"
+  dependencies:
+    "@vue/shared": 3.2.30
+  checksum: fc8a1b6461620a6903e00d3dcae2c026a4fb826c3ca2f30fc91cb9987dfe6fb8468eb026fd85dca146142b53f3285d2f6feb209ac540acbc69db581ea1e1db32
+  languageName: node
+  linkType: hard
+
 "@vue/runtime-core@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/runtime-core@npm:3.2.29"
@@ -2062,6 +2134,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/runtime-core@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/runtime-core@npm:3.2.30"
+  dependencies:
+    "@vue/reactivity": 3.2.30
+    "@vue/shared": 3.2.30
+  checksum: 8120a83f871c58d7863c5bda49f8c49ae70ca977801f1e6d0fd83c1e478f098e5c98237ac1d9093e1ca351b3a7723a8f537160f0c6639488a34a75eeadfe73ba
+  languageName: node
+  linkType: hard
+
 "@vue/runtime-dom@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/runtime-dom@npm:3.2.29"
@@ -2073,6 +2155,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/runtime-dom@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/runtime-dom@npm:3.2.30"
+  dependencies:
+    "@vue/runtime-core": 3.2.30
+    "@vue/shared": 3.2.30
+    csstype: ^2.6.8
+  checksum: 139236445f20e10f3a1def9f272c98ba47f78c0f83754240be395ca252d040fc4bbeac5548f07b0bc2f38b4e0293ec2a73fc5fc3e9c0d97832426173381f7fb9
+  languageName: node
+  linkType: hard
+
 "@vue/server-renderer@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/server-renderer@npm:3.2.29"
@@ -2085,6 +2178,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/server-renderer@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/server-renderer@npm:3.2.30"
+  dependencies:
+    "@vue/compiler-ssr": 3.2.30
+    "@vue/shared": 3.2.30
+  peerDependencies:
+    vue: 3.2.30
+  checksum: 49337246f54913428d4756a35cd5f443c9159f88d986ef702c77c7ae8c9e20bad7ea7456ad39c853958b0d135f5704ecd1bc1adee81df442564daaa2915ebe97
+  languageName: node
+  linkType: hard
+
 "@vue/shared@npm:3.2.29":
   version: 3.2.29
   resolution: "@vue/shared@npm:3.2.29"
@@ -2092,6 +2197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/shared@npm:3.2.30":
+  version: 3.2.30
+  resolution: "@vue/shared@npm:3.2.30"
+  checksum: 84f83c59b34622417b72787976e3291cb07dff048d1b11d3e64271e2c8161c64553d54714a8b459ae0c21ee167373658f31a7de19ae0f1b5d7f0aac4a15032ee
+  languageName: node
+  linkType: hard
+
 "@vue/web-component-wrapper@npm:^1.2.0":
   version: 1.3.0
   resolution: "@vue/web-component-wrapper@npm:1.3.0"
@@ -4037,7 +4149,7 @@ __metadata:
     "@vue/cli-plugin-router": ~4.5.15
     "@vue/cli-plugin-vuex": ~4.5.15
     "@vue/cli-service": ~4.5.15
-    "@vue/compiler-sfc": ^3.2.29
+    "@vue/compiler-sfc": ^3.2.30
     axios: ^0.25.0
     babel-eslint: ^10.1.0
     bootstrap: ^5.1.3
@@ -4048,12 +4160,13 @@ __metadata:
     eslint-plugin-vue: ^7.20.0
     fork-awesome: ^1.2.0
     http-status-codes: ^2.2.0
+    iso-639-1: ^2.1.13
     jquery: ^3.6.0
     luxon: ^2.3.0
     sass: ^1.49.7
     sass-loader: ^10.2.1
     string-sanitizer: ^2.0.2
-    vue: ^3.2.29
+    vue: ^3.2.30
     vue-matomo: ^4.1.0
     vue-router: ^4.0.12
     vue3-cookies: ^1.0.6
@@ -7086,6 +7199,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"iso-639-1@npm:^2.1.13":
+  version: 2.1.13
+  resolution: "iso-639-1@npm:2.1.13"
+  checksum: 53c0a76ad742b08dd1a5a525514f95457aa71aee4b9b71ad6bf8d5dc30b5db1cb9ec2dc3919ac6eb9b281c314a3e439b027760777e8c373068d38d003dd6812d
+  languageName: node
+  linkType: hard
+
 "isobject@npm:^2.0.0":
   version: 2.1.0
   resolution: "isobject@npm:2.1.0"
@@ -11746,7 +11866,7 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
-"vue@npm:3.2.29, vue@npm:^3.0.0, vue@npm:^3.2.29":
+"vue@npm:3.2.29, vue@npm:^3.0.0":
   version: 3.2.29
   resolution: "vue@npm:3.2.29"
   dependencies:
@@ -11759,6 +11879,19 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"vue@npm:3.2.30, vue@npm:^3.2.30":
+  version: 3.2.30
+  resolution: "vue@npm:3.2.30"
+  dependencies:
+    "@vue/compiler-dom": 3.2.30
+    "@vue/compiler-sfc": 3.2.30
+    "@vue/runtime-dom": 3.2.30
+    "@vue/server-renderer": 3.2.30
+    "@vue/shared": 3.2.30
+  checksum: 2ad50a295b7933b07875ea73f65b30c9fc8f81a0bcbfc2661d842a83c5384c6f6c6eb8019a5a084d27c96fcc17ef02ec2fb0c6d82c347ce4e9771f0053ae3963
+  languageName: node
+  linkType: hard
+
 "vuex@npm:^4.0.2":
   version: 4.0.2
   resolution: "vuex@npm:4.0.2"