feat: sélectionner la traduction par défaut selon la langue du navigateur

components/teks/teks.js

@@ -89,14 +89,14 @@ const LANG_NAMES = {
 }
 
 const TRAD_FIELDS = [
+  {field: 'japonais', title: '日本語'},
+  {field: 'coreen', title: '한국어'},
   {field: 'anglais', title: 'English'},
   {field: 'francais', title: 'Français'},
   {field: 'espagnol', title: 'Español'},
   {field: 'allemand', title: 'Deutsch'},
   {field: 'italien', title: 'Italiano'},
   {field: 'portugais', title: 'Português'},
-  {field: 'japonais', title: '日本語'},
-  {field: 'coreen', title: '한국어'},
 ]
 
 const langToArray = parole => {
@@ -106,7 +106,12 @@ const langToArray = parole => {
 
   return TRAD_FIELDS
     .filter(({field}) => parole.traductions[field])
-    .map(({field, title}) => ({title, lang: parole.traductions[field]}))
+    .map(({field, title}) => ({field, title, lang: parole.traductions[field]}))
+}
+
+const BROWSER_LANG_TO_FIELD = {
+  ja: 'japonais', ko: 'coreen', en: 'anglais', fr: 'francais',
+  es: 'espagnol', de: 'allemand', it: 'italien', pt: 'portugais',
 }
 
 const ExplicitTooltip = Tooltip
@@ -134,6 +139,20 @@ export default function Teks({parole}) {
     return () => setCurrentTrack(null)
   }, [parole, setCurrentTrack])
 
+  useEffect(() => {
+    const browserLang = navigator.language?.split('-')[0]?.toLowerCase()
+    if (!browserLang || browserLang === parole.langueSource) {
+      return
+    }
+
+    const champ = BROWSER_LANG_TO_FIELD[browserLang]
+    const index = langArray.findIndex(lang => lang.field === champ)
+    if (index !== -1) {
+      setTab(index + 1)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- ne doit s'exécuter qu'au montage, pas à chaque changement d'onglet
+  }, [])
+
   return (
     <Root className={classes.container}>
       <Box sx={{textAlign: 'center', marginTop: 12}}>