@saooti/octopus-sdk 41.9.0 → 41.9.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # CHANGELOG
 
+## 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.1",
   "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

@@ -64,7 +64,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']);
@@ -93,8 +93,8 @@ export const useTranslation = () => {
             const podcast = await podcastApi.get(translationData.podcastId);
             const emission = podcast.emission;
 
-            const baseLangConfig = translationConfig(baseLanguage, emission);
-            const defaultLangConfig = translationConfig(DEFAULT_LANGUAGE, emission);
+            const baseLangConfig = getTranslationConfig(baseLanguage, emission);
+            const defaultLangConfig = getTranslationConfig(DEFAULT_LANGUAGE, emission);
 
             // 2. If the language of the browser is available, use it
             if (baseLangConfig === CreateTranslation.ALWAYS) {
@@ -169,6 +169,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/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 => {