@saooti/octopus-sdk 41.9.1 → 41.9.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # CHANGELOG
 
+## 41.9.2 (07/04/2026)
+
+**Features**
+
+- **12535** - Amélioration de la sélection de la langue utilisée
+  - Prend maintenant en compte les langues alternatives du navigateur
+  - Prend en compte les langue "de base" des variantes (par exemple "fr" sera
+    utilisé pour un utilisateur "fr-CH")
+
+**Fixes**
+
+- Correction tests
+
 ## 41.9.1 (07/04/2026)
 
 **Features**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.9.1",
+  "version": "41.9.2",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/composable/useTranslation.ts

@@ -14,6 +14,12 @@ interface RelevantLanguages {
     available?: string;
 }
 
+enum Availability {
+    Available,
+    ToGenerate,
+    Unavailable
+}
+
 export const useTranslation = () => {
 
     const authStore = useAuthStore();
@@ -72,6 +78,32 @@ export const useTranslation = () => {
         return getConfigurationFor(language, emissionTranslation, orgTranslation);
     }
 
+    function getLanguageAvailability(language: string, emission: Emission, translationData: PodcastTranslationData): Availability {
+        
+        // 1. If language of podcast == language of browser, use that language
+        if (language === translationData.nativeLanguage) {
+            return Availability.Available;
+        } else {
+            const langConfig = getTranslationConfig(language, emission);
+
+            // 2. If the language of the browser is available, use it
+            if (langConfig === CreateTranslation.ALWAYS) {
+                return Availability.Available;
+            }
+            // 2b. If the language is on demand, check if generated
+            else if (langConfig === CreateTranslation.ON_DEMAND) {
+                // Check if translation is already generated
+                if (translationData.translations.find(t => t.language === language && t.state === TranslationState.FINISHED)) {
+                    return Availability.Available;
+                } else {
+                    return Availability.ToGenerate;
+                }
+            }
+        }
+
+        return Availability.Unavailable;
+    }
+
     /**
      * Get the relevant language for the current user
      * @param translationData The translation data for the podcast
@@ -81,56 +113,49 @@ export const useTranslation = () => {
      *                        undefined if *ready* is better)
      */
     async function getMostRelevantLanguage(translationData: PodcastTranslationData): Promise<RelevantLanguages> {
-        const languages: RelevantLanguages = {
-            ready: translationData.nativeLanguage
-        };
-        const baseLanguage = getLanguage();
-
-        // 1. If language of podcast == language of browser, use that language
-        if (baseLanguage === translationData.nativeLanguage) {
-            languages.ready = baseLanguage;
-        } else {
-            const podcast = await podcastApi.get(translationData.podcastId);
-            const emission = podcast.emission;
+        const userLanguage = getLanguage(false);
 
-            const baseLangConfig = getTranslationConfig(baseLanguage, emission);
-            const defaultLangConfig = getTranslationConfig(DEFAULT_LANGUAGE, emission);
+        // If user language is native, do not go further
+        if (userLanguage === translationData.nativeLanguage) {
+            return { ready: userLanguage };
+        }
 
-            // 2. If the language of the browser is available, use it
-            if (baseLangConfig === CreateTranslation.ALWAYS) {
-                languages.ready = baseLanguage;
+        // Compute all available languages. Use language set on site, then
+        // languages defined on browser, then default, and finally native language
+        const languages: string[] = [];
+        [userLanguage, ...navigator.languages, DEFAULT_LANGUAGE, translationData.nativeLanguage].forEach(l => {
+            if (!languages.includes(l)) {
+                languages.push(l);
             }
-            // 2b. If the language is on demand, check if generated
-            else if (baseLangConfig === CreateTranslation.ON_DEMAND && !languages.available) {
-                // Check if translation is already generated
-                if (translationData.translations.find(t => t.language === baseLanguage && t.state === TranslationState.FINISHED)) {
-                    languages.ready = baseLanguage;
-                } else {
-                    languages.available = baseLanguage;
+            // For each language, if it is a variant (for example fr-CH), also
+            // add the base language
+            if (l.includes('-')) {
+                const base = l.split('-')[0];
+                if (!languages.includes(base)) {
+                    languages.push(base);
                 }
             }
+        });
 
-            // 3. If default language is available, use it
-            else if (defaultLangConfig === CreateTranslation.ALWAYS) {
-                languages.ready = DEFAULT_LANGUAGE;
-            }
-            // 3b. If the language is on demand, it will be created
-            else if (defaultLangConfig === CreateTranslation.ON_DEMAND && !languages.available) {
-                // Check if translation is already generated
-                if (translationData.translations.find(t => t.language === DEFAULT_LANGUAGE && t.state === TranslationState.FINISHED)) {
-                    languages.ready = DEFAULT_LANGUAGE;
-                } else {
-                    languages.available = DEFAULT_LANGUAGE;
-                }
+        const podcast = await podcastApi.get(translationData.podcastId);
+        const emission = podcast.emission;
+
+        let bestReady: string|null = null;
+        let bestAvailable: string|null = null;
+
+        for (const language of languages) {
+            const avaibility = getLanguageAvailability(language, emission, translationData);
+            if (avaibility === Availability.Available && bestReady === null) {
+                bestReady = language;
+                break;
             }
 
-            // 4. Otherwise, use default language of podcast
-            else {
-                languages.ready = translationData.nativeLanguage;
+            if (avaibility === Availability.ToGenerate && bestAvailable === null) {
+                bestAvailable = language;
             }
         }
 
-        return languages;
+        return { ready: bestReady, available: bestAvailable ?? undefined };
     }
 
     /**

package/src/helper/language.ts

@@ -1,38 +1,57 @@
 /**
  * Utility function to retrieve most relevant language for the user
+ * @params forceToKnown When set to true (default), will limit language to one
+ *                      one of 6 known languages. When set to false, allow all
+ *                      languages.
  * @returns The most relevant language
  */
-export function getLanguage(): string {
-  const nameEQ = "octopus-language=";
-  const ca = document.cookie.split(";");
+export function getLanguage(forceToKnown = true): string {
+    const nameEQ = "octopus-language=";
+    const ca = document.cookie.split(";");
 
-  let language = "";
-  for (const valueCookie of ca) {
-    let c = valueCookie;
-    while (c.startsWith(" ")) {
-      c = c.substring(1, c.length);
+    let language = "";
+    for (const valueCookie of ca) {
+        let c = valueCookie;
+        while (c.startsWith(" ")) {
+            c = c.substring(1, c.length);
+        }
+        if (0 === c.indexOf(nameEQ)) {
+            language = c.substring(nameEQ.length, c.length);
+            break;
+        }
     }
-    if (0 === c.indexOf(nameEQ)) {
-      language = c.substring(nameEQ.length, c.length);
-      break;
-    }
-  }
 
-  if (0 === language.length) {
-    const navigatorLang = navigator.language;
-    language = "fr";
-    if (navigatorLang.includes("en")) {
-      language = "en";
-    } else if (navigatorLang.includes("it")) {
-      language = "it";
-    } else if (navigatorLang.includes("sl")) {
-      language = "sl";
-    } else if (navigatorLang.includes("es")) {
-      language = "es";
-    } else if (navigatorLang.includes("de")) {
-      language = "de";
+    if (0 === language.length) {
+        if (forceToKnown === true) {
+            // Choose best avilable language
+            for (const navigatorLang of navigator.languages) {
+                if (navigatorLang.includes("fr")) {
+                    language = "fr";
+                    break;
+                } else if (navigatorLang.includes("en")) {
+                    language = "en";
+                    break;
+                } else if (navigatorLang.includes("it")) {
+                    language = "it";
+                    break;
+                } else if (navigatorLang.includes("sl")) {
+                    language = "sl";
+                    break;
+                } else if (navigatorLang.includes("es")) {
+                    language = "es";
+                    break;
+                } else if (navigatorLang.includes("de")) {
+                    language = "de";
+                    break;
+                }
+            }
+            if (!language) {
+                language = "fr";
+            }
+        } else {
+            language = navigator.language;
+        }
     }
-  }
 
-  return language;
+    return language;
 }

package/tests/components/composable/useTranslation.spec.ts

@@ -76,6 +76,36 @@ describe('useTranslation', () => {
         });
     });
 
+    describe('getMostRelevantLanguage', () => {
+        it('bases its results on the language alternatives in the browser', async () => {
+            vi.mocked(getLanguage).mockReturnValue('de');
+
+            Object.defineProperty(navigator, 'languages', {
+                value: ['fr', 'it', 'de'],
+                configurable: true
+            });
+
+            const translationData = { nativeLanguage: 'it', podcastId: 0, translations: [] };
+
+            const result = await composable.getMostRelevantLanguage(translationData)
+            expect(result.ready).toBe('it');
+        });
+
+        it('takes into consideration the "base" languages of variants', async () => {
+            vi.mocked(getLanguage).mockReturnValue('fr-CH');
+
+            Object.defineProperty(navigator, 'languages', {
+                value: ['fr-CH', 'it', 'de'],
+                configurable: true
+            });
+
+            const translationData = { nativeLanguage: 'fr', podcastId: 0, translations: [] };
+
+            const result = await composable.getMostRelevantLanguage(translationData)
+            expect(result.ready).toBe('fr');
+        });
+    });
+
     describe('getMostRelevantTranslation', () => {
         it('uses the native language when it matches the browser language', async () => {
             await composable.getMostRelevantTranslation(makeTranslationData({ nativeLanguage: 'fr' }));

package/tests/components/display/podcasts/PodcastModuleBox.spec.ts

@@ -21,14 +21,14 @@ describe('PodcastModuleBox', () => {
 
         it('shows the date without time by default', async() => {
             const wrapper = await mount(podcast);
-            expect(wrapper.text()).toContain('1 December 2025');
+            expect(wrapper.text()).toContain('1 décembre 2025');
             expect(wrapper.text()).not.toContain('11:21');
         });
 
         it('shows the date with time when enabled in SdkParams', async() => {
             initialize({ generalParameters: { showTimeWithDates: true } });
             const wrapper = await mount(podcast);
-            expect(wrapper.text()).toContain('1 December 2025');
+            expect(wrapper.text()).toContain('1 décembre 2025');
             expect(wrapper.text()).toContain('11:21');
         });
     });

package/tests/components/pages/EmissionPage.spec.ts

@@ -33,6 +33,7 @@ function makeReadyPodcast(seasonMode: SeasonMode = SeasonMode.NO_SEASON) {
     podcast.seasonNumber = 1;
     podcast.seasonEpisodeNumber = 3;
     podcast.emission.seasonMode = seasonMode;
+    podcast.valid = true;
     return podcast;
 }
 

package/tests/helper/language.spec.ts

@@ -2,8 +2,8 @@ import { describe, it, expect, afterEach } from 'vitest';
 import { getLanguage } from '../../src/helper/language';
 
 function setNavigatorLanguage(lang: string) {
-    Object.defineProperty(navigator, 'language', {
-        value: lang,
+    Object.defineProperty(navigator, 'languages', {
+        value: [lang],
         configurable: true,
     });
 }
@@ -29,15 +29,15 @@ describe('language', () => {
 
         describe('navigator-based detection', () => {
             it.each([
-                ['en-US', 'en'],
-                ['it-IT', 'it'],
-                ['sl-SI', 'sl'],
-                ['de-DE', 'de'],
-                ['es-ES', 'es'],
-                ['fr-FR', 'fr'],
-                ['ja-JP', 'fr'],
-            ])('returns "%s" for navigator language %s', (navigatorLang, expected) => {
-                setNavigatorLanguage(navigatorLang);
+                { input: 'en-US', expected: 'en' },
+                { input: 'it-IT', expected: 'it' },
+                { input: 'sl-SI', expected: 'sl' },
+                { input: 'de-DE', expected: 'de' },
+                { input: 'es-ES', expected: 'es' },
+                { input: 'fr-FR', expected: 'fr' },
+                { input: 'ja-JP', expected: 'fr' }
+            ])('returns "$expected" for navigator language $input', ({ input , expected }) => {
+                setNavigatorLanguage(input);
                 expect(getLanguage()).toBe(expected);
             });
         });

package/vite.config.js

@@ -73,4 +73,4 @@ export default defineConfig(({ mode }) => {
   }
 });
 
-/* eslint-enable */
+/* eslint-enable */