@saooti/octopus-sdk 41.9.0 → 41.9.2

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # 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**
+
+- **12535** - Améliorations pour la traduction
+  - La régénration de la transcription invalide les données de
+    `PodcastRawTranscript`
+- **14406** - Ajout de `useDayjs` qui permet d'avoir des dates réactives 
+- Mise à jour des droits relatifs aux transcriptions/traductions
+- Ajout de nouveaux endpoints à `transcriptionApi`
+- Ajout nouveaux exports:
+  - composable `useTranslation`
+  - types `TranslationData`, `ModifyPodcastConfig`
+  - énumération `TranslationState`
+- Améliorations composants :
+  - `ClassicInputText` en mode `textarea` scrolle en haut du contenu par défaut
+  - `ClassicAlert` a maintenant un props `text` qui enlève le font et la bordure
+
+**Fixes**
+
+- **14330** - La page d'émission propose uniquement le dernier épisode
+  **valide** à la lecture
+
 ## 41.9.0 (31/03/2026)
 
 **Features**

package/index.ts

@@ -135,6 +135,7 @@ export { useSharePath } from "./src/components/composable/share/useSharePath.ts"
 export { useOrgaComputed } from "./src/components/composable/useOrgaComputed.ts";
 export { useSeoTitleUrl } from "./src/components/composable/route/useSeoTitleUrl.ts";
 export { useSeasonsManagement } from "./src/components/composable/useSeasonsManagement.ts";
+export { useTranslation } from "./src/components/composable/useTranslation.ts";
 
 //helper
 import domHelper from "./src/helper/domHelper.ts";
@@ -161,7 +162,7 @@ import classicApi from "./src/api/classicApi.ts";
 
 // API
 export { emissionApi } from "./src/api/emissionApi.ts";
-export { transcriptionApi } from "./src/api/transcriptionApi.ts";
+export { transcriptionApi, type TranslationData, TranslationState } from "./src/api/transcriptionApi.ts";
 export * from "./src/api/groupsApi.ts";
 export { organisationApi } from "./src/api/organisationApi.ts";
 export { playlistApi } from "./src/api/playlistApi.ts";

package/package.json

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

package/src/api/transcriptionApi.ts

@@ -1,3 +1,4 @@
+import { ModifyPodcastConfig } from "../stores/class/transcript/transcriptParams";
 import { ModuleApi } from "./apiConnection";
 import classicApi from "./classicApi";
 
@@ -100,8 +101,73 @@ async function getRawTranscription(podcastId: number): Promise<string> {
     });
 }
 
+/**
+ * Generate the transcription on the given podcast
+ * @param podcastId ID of the podcast on which to do the transcription
+ * @param langauge Target language. Should be the native language of the podcast
+ * @param params Transcription parameters
+ */
+async function generateTranscription(podcastId: number, language: string, params: ModifyPodcastConfig): Promise<void> {
+    await classicApi.putData({
+        api: ModuleApi.SPEECHTOTEXT,
+        path: `convert/${language}/${podcastId}`,
+        dataToSend: params
+    });
+}
+
+/**
+ * Regenerate the transcription on the given podcast
+ * Currently does the same as `generateTranscription`, but should be used when
+ * relevant in case of future evolutions.
+ * @param podcastId ID of the podcast on which to do the transcription
+ * @param langauge Target language. Should be the native language of the podcast
+ * @param params Transcription parameters
+ */
+async function regenerateTranscription(podcastId: number, language: string, params: ModifyPodcastConfig): Promise<void> {
+    await classicApi.putData({
+        api: ModuleApi.SPEECHTOTEXT,
+        path: `regenerate/${language}/${podcastId}`,
+        dataToSend: params
+    });
+}
+
+/**
+ * Change the visibility of the podcast
+ * @param podcastId ID of the podcast for which to change the visibility
+ * @param visibility New visibility state
+ */
+async function changeTranscriptionVisibility(podcastId: number, visibility: boolean): Promise<void> {
+    await classicApi.putData({
+        api: 11,
+        path: "visibility/" + podcastId,
+        parameters: {
+            visibility
+        }
+    });
+}
+
+/**
+ * Update the transcription of a podcast
+ * @param podcastId ID of the podcast
+ * @param transcript The new transcript
+ */
+async function updateTranscription(podcastId: number, transcript: string): Promise<void> {
+    await classicApi.postData({
+        api: ModuleApi.SPEECHTOTEXT,
+        path: "update/" + podcastId,
+        dataToSend: {
+            file: new File([transcript], "file")
+        },
+        contentType: "formData"
+    });
+}
+
 export const transcriptionApi = {
+    changeTranscriptionVisibility,
     getTranslations,
     getTranslation,
-    getRawTranscription
+    getRawTranscription,
+    generateTranscription,
+    regenerateTranscription,
+    updateTranscription
 };

package/src/components/composable/podcasts/usePodcastView.ts

@@ -1,18 +1,17 @@
 import { Conference } from '@/stores/class/conference/conference';
 import { Podcast } from '@/stores/class/general/podcast';
-import dayjs from 'dayjs';
-import duration from "dayjs/plugin/duration";
-dayjs.extend(duration);
 // @ts-expect-error Bibliothèque non typée
 import humanizeDuration from "humanize-duration";
 import {computed, Ref} from 'vue';
 import { useI18n } from 'vue-i18n';
 import {useOrgaComputed} from "../useOrgaComputed"
 import { state } from '../../../stores/ParamSdkStore';
+import { useDayjs } from '../useDayjs';
 
 export const usePodcastView = (podcast: Ref<Podcast|undefined>,  podcastConference: Ref<Conference|undefined>)=>{
 
   const {locale} = useI18n();
+  const { dayjs } = useDayjs();
 
   const {isEditRights, isPodcastmaker} = useOrgaComputed();
 

package/src/components/composable/useDayjs.ts

@@ -0,0 +1,24 @@
+import dayjs, { Dayjs } from "dayjs";
+import { useI18n } from "vue-i18n"
+
+import "dayjs/locale/de";
+import "dayjs/locale/es";
+import "dayjs/locale/fr";
+import "dayjs/locale/it";
+import "dayjs/locale/sl";
+
+import duration from "dayjs/plugin/duration";
+dayjs.extend(duration);
+
+export const useDayjs = () => {
+    const { locale } = useI18n();
+
+    function composableDayjs(param?: string|number|Date|Dayjs): Dayjs {
+        return dayjs(param).locale(locale.value);
+    }
+    composableDayjs.duration = dayjs.duration;
+
+    return {
+        dayjs: composableDayjs
+    }
+}

package/src/components/composable/useRights.ts

@@ -154,13 +154,21 @@ export const useRights = () => {
             return true;
         }
 
-        if (roleContainsAny('RESTRICTED_PRODUCTION', 'RESTRICTED_ANIMATION')) {
+        if (roleContainsAny('RESTRICTED_PRODUCTION', 'PODCAST_CRUD')) {
             return podcast.createdByUserId === authStore.authProfile?.userId;
         }
 
         return false;
     }
 
+    function canEditTranscriptVisibility(podcast: Podcast): boolean {
+        return roleContainsAny('ADMIN', 'ORGANISATION', 'PRODUCTION');
+    }
+
+    function canEditTranslation(podcast: Podcast): boolean {
+        return canEditTranscript(podcast);
+    }
+
     function canSeeHistory(): boolean {
         return roleContainsAny('ADMIN', 'ORGANISATION');
     }
@@ -198,6 +206,8 @@ export const useRights = () => {
         // Other
         canEditCodeInsertPlayer,
         canEditTranscript,
+        canEditTranslation,
+        canEditTranscriptVisibility,
         canSeeHistory,
         isRestrictedProduction
     }

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();
@@ -64,7 +70,7 @@ export const useTranslation = () => {
      * @param emission *(optional)* If set, will also check in emission settings
      * @returns Whether the language is available or not
      */
-    function translationConfig(language: string, emission?: Emission): CreateTranslation {
+    function getTranslationConfig(language: string, emission?: Emission): CreateTranslation {
         const orgAttributes = authStore.authOrganisation.attributes;
         const emissionTranslation = parseOrDefault(emission?.annotations['translation-config'] as string|undefined, true);
         const orgTranslation = parseOrDefault(orgAttributes?.['translation-config']);
@@ -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 = translationConfig(baseLanguage, emission);
-            const defaultLangConfig = translationConfig(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 };
     }
 
     /**
@@ -169,6 +194,7 @@ export const useTranslation = () => {
     return {
         convertSrtToPlainText,
         getMostRelevantLanguage,
-        getMostRelevantTranslation
+        getMostRelevantTranslation,
+        getTranslationConfig
     }
 };

package/src/components/display/podcasts/PodcastItemInfo.vue

@@ -60,7 +60,6 @@
 <script setup lang="ts">
 import AnimatorsItem from "./AnimatorsItem.vue";
 import {useOrgaComputed} from "../../composable/useOrgaComputed";
-import dayjs from "dayjs";
 import { computed, defineAsyncComponent } from "vue";
 import { Podcast, PodcastType } from "../../../stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
@@ -68,6 +67,7 @@ import { useI18n } from "vue-i18n";
 import { useSeasonsManagement } from "../../composable/useSeasonsManagement";
 import BullhornIcon from 'vue-material-design-icons/Bullhorn.vue';
 import GiftIcon from 'vue-material-design-icons/Gift.vue';
+import { useDayjs } from "../../composable/useDayjs";
 const PodcastPlayBar = defineAsyncComponent(
     () => import("./PodcastPlayBar.vue"),
 );
@@ -81,6 +81,7 @@ const props = defineProps({
 const { t } = useI18n();
 const { isPodcastmaker } = useOrgaComputed();
 const { formatSeason } = useSeasonsManagement();
+const { dayjs } = useDayjs();
 
 //Computed
 const date = computed(() => {
@@ -90,6 +91,7 @@ const date = computed(() => {
     }
     return dayjs(props.podcast.pubDate).format(format);
 });
+
 const orgaNameDisplay = computed(() =>{
     if (props.podcast.organisation.name.length > 30) {
         return props.podcast.organisation.name.substring(0, 30) + "...";

package/src/components/display/podcasts/PodcastModuleBox.vue

@@ -12,6 +12,7 @@
       v-else-if="editRight && isEditBox"
       :podcast="podcast"
       :display-studio-access="isDebriefing"
+      @update-transcription="resetTranscription"
       @validate-podcast="emit('updatePodcast', $event)"
     />
     <div class="mb-2 w-100">
@@ -158,7 +159,10 @@
       :orga-id="podcast.organisation.id"
       :rubrique-ids="podcastRubriques"
     />
-    <PodcastRawTranscript :podcast-id="podcast.podcastId" />
+    <PodcastRawTranscript
+      ref="podcastRawTranscript"
+      :podcast-id="podcast.podcastId"
+    />
     <SubscribeButtons
       v-if="isPodcastmaker"
       class="mt-4"
@@ -185,7 +189,7 @@ import { useRouter } from "vue-router";
 import { useSeasonsManagement } from "../../composable/useSeasonsManagement";
 import { SeasonMode } from "../../../stores/class/general/emission";
 
-import { defineAsyncComponent, toRefs, computed } from "vue";
+import { defineAsyncComponent, toRefs, computed, useTemplateRef } from "vue";
 const ErrorMessage = defineAsyncComponent(
   () => import("../../misc/ErrorMessage.vue"),
 );
@@ -243,6 +247,9 @@ const authStore = useAuthStore();
 const router = useRouter();
 const { areSeasonsEnabled } = useSeasonsManagement();
 
+/** Reference to the PodcastRqwTranscript */
+const podcastRawTranscript = useTemplateRef('podcastRawTranscript');
+
 //Computed
 const podcastRubriques = computed(() => {
   let rubriques = props.podcast?.rubriqueIds ?? [];
@@ -342,6 +349,10 @@ function removeDeleted(): void {
   }
 }
 
+function resetTranscription(): void {
+  podcastRawTranscript.value.reset();
+}
+
 const showTags = computed((): boolean => {
   if (state.podcastPage.hideTags === true) {
     return false;

package/src/components/display/podcasts/PodcastRawTranscript.vue

@@ -137,12 +137,14 @@ function saveAccessibility(accessibility: {fontSize: number,background: string,c
     isAccessibilityModal.value = false;
 }
 
-async function fetchTranscripts(): Promise<void> {
+async function fetchTranscripts(language?: string): Promise<void> {
     try {
         const translation = await transcriptionApi.getTranslations(props.podcastId);
-        const { ready, available } = await getMostRelevantLanguage(translation);
-        // If available language is set, it is better than ready, so use it
-        const language = available ?? ready;
+        if (language === undefined) {
+            const { ready, available } = await getMostRelevantLanguage(translation);
+            // If available language is set, it is better than ready, so use it
+            language = available ?? ready;
+        }
         const srt = await transcriptionApi.getTranslation(props.podcastId, language, true);
         transcript.value = convertSrtToPlainText(srt);
         
@@ -165,7 +167,7 @@ async function fetchTranscripts(): Promise<void> {
 async function changeLanguage(language: string): Promise<void> {
     loadingDone.value = false;
     currentLanguage.value = language;
-    transcript.value = '';
+    transcript.value = undefined;
     try {
         const srt = await transcriptionApi.getTranslation(props.podcastId, language);        
         transcript.value = convertSrtToPlainText(srt);
@@ -174,6 +176,15 @@ async function changeLanguage(language: string): Promise<void> {
     }
     loadingDone.value = true;
 }
+
+/** Force reloading */
+function reset(): void {
+    if (isOpen.value || loadingDone.value) {
+        fetchTranscripts(currentLanguage.value);
+    }
+}
+
+defineExpose({ reset });
 </script>
 
 <style scoped lang="scss">

package/src/components/form/ClassicInputText.vue

@@ -259,7 +259,17 @@ onMounted(()=>{
   if (props.errorVariable !== isError.value) {
     emit("update:errorVariable", isError.value);
   }
-})
+
+  if (props.isTextarea) {
+    // Delay a scroll back to the top of the text area
+    setTimeout(() => {
+      const textArea = document.getElementById(computedInputId.value);
+      if (textArea) {
+        textArea.scrollTop = 0;
+      }
+    }, 100);
+  }
+});
  
 //Methods
 function addEmojiSelected(emoji: string) {

package/src/components/misc/ClassicAlert.vue

@@ -8,7 +8,7 @@
 -->
 <template>
     <div
-        class="p-2 pe-4 my-2 rounded d-flex alert"
+        class="p-2 pe-4 rounded d-flex alert"
         :class="cardClass"
     >
         <!-- The icon -->
@@ -16,7 +16,7 @@
             :is="iconComponent"
             v-if="!noIcon"
             class="icon"
-            :size="30"
+            :size="text ? 22 : 30"
         />
 
         <!-- Main content -->
@@ -39,18 +39,26 @@ import CheckCircle from 'vue-material-design-icons/CheckCircle.vue';
 import CloseCircle from 'vue-material-design-icons/CloseCircle.vue';
 import Information from 'vue-material-design-icons/Information.vue';
 
-const { type } = defineProps<{
+const { type, text } = defineProps<{
     /** Disables the icon when true */
     noIcon?: boolean;
     /** An optional title for the alert */
     title?: string;
     /** The type of message */
     type: 'info'|'success'|'warning'|'error';
+    /** Use a simpler display */
+    text?: boolean;
 }>();
 
 /** The class applied to the alert */
-const cardClass = computed(() => {
-    return 'alert-' + type;
+const cardClass = computed((): Array<string> => {
+    const classes = ['alert-' + type];
+    if (text === true) {
+        classes.push('text-alert');
+    } else {
+        classes.push('my-2');
+    }
+    return classes;
 });
 
 const iconComponent = computed(() => {
@@ -70,9 +78,10 @@ const iconComponent = computed(() => {
 
 <style lang="scss" scoped>
 .alert {
-    //color: white;
-    border: 1px solid;
-    border-left: 8px solid;
+    &:not(.text-alert) {
+        border: 1px solid;
+        border-left: 8px solid;
+    }
 
     .icon {
         align-items: start !important;
@@ -98,14 +107,17 @@ const iconComponent = computed(() => {
         'error': var(--octopus-danger),
     );
 
-    &.alert {
-        @each $type, $color in $types {
-            &-#{$type} {
+    @each $type, $color in $types {
+        &-#{$type} {
+            &:not(.text-alert) {
                 background-color: hsl(from #{$color} h s 95) !important;
                 border-color: #{$color} !important;
-                .icon {
-                    color: #{$color};
-                }
+            }
+            &.text-alert {
+                color: #{$color} !important;
+            }
+            .icon {
+                color: #{$color};
             }
         }
     }

package/src/components/pages/EmissionPage.vue

@@ -269,8 +269,11 @@ async function getEmissionDetails(): Promise<void> {
   }
 }
 
+function isReadyAndVisibleAndValid(p: Podcast): boolean {
+  return "READY" === p.processingStatus && p.availability.visibility && p.valid === true;
+}
+
 function podcastsFetched(podcasts: Array<Podcast>, season: number|undefined) {
-  const isReadyAndVisible = (p: Podcast) => "READY" === p.processingStatus && p.availability.visibility;
 
   if (areSeasonsEnabled(emission.value)) {
     // Ignore results that are not from the last season
@@ -279,11 +282,11 @@ function podcastsFetched(podcasts: Array<Podcast>, season: number|undefined) {
       return;
     }
     // If seasons are enabled, take last element
-    lastPodcast.value = podcasts.findLast(isReadyAndVisible);
+    lastPodcast.value = podcasts.findLast(isReadyAndVisibleAndValid);
   } else {
     // If seasons are disabled, we have a standard date desc sort, so we take
     // first element
-    lastPodcast.value = podcasts.find(isReadyAndVisible);
+    lastPodcast.value = podcasts.find(isReadyAndVisibleAndValid);
   }
 }
 

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/src/i18n.ts

@@ -1,11 +1,5 @@
 import { nextTick } from "vue";
 import { createI18n } from "vue-i18n";
-import dayjs from "dayjs";
-import "dayjs/locale/de";
-import "dayjs/locale/es";
-import "dayjs/locale/fr";
-import "dayjs/locale/it";
-import "dayjs/locale/sl";
 
 export function setupI18n(options: { [key:string]: string|boolean }, isAuthenticated: boolean, isEducation: boolean) {
   const i18n = createI18n(options);
@@ -15,7 +9,6 @@ export function setupI18n(options: { [key:string]: string|boolean }, isAuthentic
 
 export function setI18nLanguage(i18n: any, locale: string) {
   i18n.locale.value= locale;
-  dayjs.locale(locale);
   const html = document.querySelector("html");
   if (html) {
     html.setAttribute("lang", locale);

package/src/stores/ParamSdkStore.ts

@@ -63,7 +63,7 @@ export interface ParamStore {
     /** If true, do not display subtitles on podcast pages */
     hideSubtitle?: boolean;
     /** Select whether to display description, summary, or both */
-    descriptionOrSummary: 'description'|'summary'|'both';
+    descriptionOrSummary?: 'description'|'summary'|'both';
   };
   emissionPage: {
     ShareButtons?: boolean;

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

@@ -256,7 +256,7 @@ describe('useRights', () => {
             });
         });
 
-        ['RESTRICTED_PRODUCTION', 'RESTRICTED_ANIMATION'].forEach(role => {
+        ['RESTRICTED_PRODUCTION', 'PODCAST_CRUD'].forEach(role => {
             it(`${role} can only edit transcript of own podcast`, async () => {
                 await setup([role]);
                 expect(useRights().canEditTranscript(ownPodcast)).toBe(true);
@@ -265,11 +265,53 @@ describe('useRights', () => {
         });
 
         it('denies unrelated roles', async () => {
-            await setup(['PODCAST_CRUD']);
+            await setup(['RESTRICTED_ANIMATION']);
             expect(useRights().canEditTranscript(ownPodcast)).toBe(false);
         });
     });
 
+    describe('canEditTranslation', () => {
+        const ownPodcast = { podcastId: 1, createdByUserId: 'test-user-123' } as Podcast;
+        const otherPodcast = { podcastId: 2, createdByUserId: 'other-user' } as Podcast;
+
+        ['ADMIN', 'ORGANISATION', 'PRODUCTION'].forEach(role => {
+            it(`allows ${role} to edit transcript of any podcast`, async () => {
+                await setup([role]);
+                expect(useRights().canEditTranslation(otherPodcast)).toBe(true);
+            });
+        });
+
+        ['RESTRICTED_PRODUCTION', 'PODCAST_CRUD'].forEach(role => {
+            it(`${role} can only edit transcript of own podcast`, async () => {
+                await setup([role]);
+                expect(useRights().canEditTranslation(ownPodcast)).toBe(true);
+                expect(useRights().canEditTranslation(otherPodcast)).toBe(false);
+            });
+        });
+
+        it('denies unrelated roles', async () => {
+            await setup(['RESTRICTED_ANIMATION']);
+            expect(useRights().canEditTranslation(ownPodcast)).toBe(false);
+        });
+    });
+
+    describe('canEditTranscriptVisibility', () => {
+        const ownPodcast = { podcastId: 1, createdByUserId: 'test-user-123' } as Podcast;
+        const otherPodcast = { podcastId: 2, createdByUserId: 'other-user' } as Podcast;
+
+        ['ADMIN', 'ORGANISATION', 'PRODUCTION'].forEach(role => {
+            it(`allows ${role} to edit transcript of any podcast`, async () => {
+                await setup([role]);
+                expect(useRights().canEditTranscriptVisibility(otherPodcast)).toBe(true);
+            });
+        });
+
+        it('denies unrelated roles', async () => {
+            await setup(['PODCAST_CRUD']);
+            expect(useRights().canEditTranscriptVisibility(ownPodcast)).toBe(false);
+        });
+    });
+
     describe('Other permissions', () => {
         describe('canEditCodeInsertPlayer', () => {
             ['ADMIN', 'ORGANISATION'].forEach(role => {

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 */