@saooti/octopus-sdk 41.8.4 → 41.9.1

package/.claude/settings.local.json

@@ -10,7 +10,8 @@
       "Bash(node --version:*)",
       "Bash(npm:*)",
       "Bash(npx vitest:*)",
-      "Bash(./node_modules/.bin/vitest run:*)"
+      "Bash(./node_modules/.bin/vitest run:*)",
+      "Bash(npx eslint:*)"
     ]
   }
 }

package/CHANGELOG.md

@@ -1,5 +1,69 @@
 # 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**
+
+- **12535** - Implémentation de la traduction des sous-titres
+  - Mise en place de l'api `transcriptionApi` pour simplifier les appels
+  - Ajout du composable `useTranslation` pour regrouper les opérations relatives
+    aux traductions
+  - `PodcastRawTranscript` permet maintenant de choisir la langue de la
+    transcription
+    - La langue la plus pertinente pour l'utilisateur est sélectionnée par
+      défaut
+  - La transcription affichée dans le player correspond à la langue la plus
+    pertinente disponible
+- **14357** - Affichage des sous-titres et résumés d'épisodes, et des
+  sous-titres des émissions
+  - Ajout de nouveaux paramètres pour contrôler cet affichage :
+    - `hideSubtitle` dans `emissionPage` & `podcastPage`, pour cacher les
+      sous-titres
+    - `descriptionOrSummary` dans `emissionPage`, pour choisir quel élément
+      afficher
+- **14387** - Affichage du numéro de saison et d'épisode, ainsi que du type
+  d'épisode dans les `PodcastItemInfo`
+- La configuration eslint est maintenant exportée, elle peut donc être intégrée
+  telle quelle dans les projets se basant sur le SDK
+- Ajout d'options de configuration pour `ClassicLoading` et `ClassicSpinner`
+
+**Fix**
+
+- **14404** - Correction affichage de la transcription dans le cas de preroll/
+  postrolls multiples
+- Correction `z-index` des boutons de `SwiperList`
+- La propriété `focus` de `ClassicInputText` est à `false` par défaut
+
+**Misc**
+
+- Correction warning avec les icônes de `useSharePlatforms`
+- Ajustement composants pour les podcastmakers
+- Mise à jour des dépendances
+- Les exports d'organisation viennent du SDK et non plus du package parent
+
 ## 41.8.4 (24/03/2026)
 
 **Fix**

package/eslint-config.d.ts

@@ -0,0 +1,3 @@
+import type { ConfigArray } from 'typescript-eslint';
+declare const config: ConfigArray;
+export default config;

package/eslint-config.mjs

@@ -0,0 +1,43 @@
+import eslint from '@eslint/js';
+import eslintPluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import typescriptEslint from 'typescript-eslint';
+
+export default typescriptEslint.config(
+  { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
+  {
+    extends: [
+      eslint.configs.recommended,
+      ...typescriptEslint.configs.recommended,
+      ...eslintPluginVue.configs['flat/recommended'],
+    ],
+    files: ['**/*.{ts,vue}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: globals.browser,
+      parserOptions: {
+        parser: typescriptEslint.parser,
+      },
+    },
+    rules: {
+      // your rules
+      "curly": ['error'],
+
+      // Please don't use console statements and duplicated imports, TODOs are marked
+      "no-console": ['warn', { allow: ['warn', 'error'] }],
+      "no-warning-comments": ['warn'],
+      "no-duplicate-imports": ['warn'],
+
+      // Prevent errors when testing on refs (instead of value of ref)
+      "vue/no-ref-as-operand": ['error'],
+
+      // Indentation
+      "vue/html-indent": ['warn', 4],
+      "vue/script-indent": ['warn', 4],
+
+      // Number of attributes per line (increase because sometimes two is not a lot)
+      "vue/max-attributes-per-line": ['warn', { singleline: 2 } ]
+    },
+  }
+);

package/eslint.config.mjs

@@ -1,43 +1,2 @@
-import eslint from '@eslint/js';
-import eslintPluginVue from 'eslint-plugin-vue';
-import globals from 'globals';
-import typescriptEslint from 'typescript-eslint';
-
-export default typescriptEslint.config(
-  { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
-  {
-    extends: [
-      eslint.configs.recommended,
-      ...typescriptEslint.configs.recommended,
-      ...eslintPluginVue.configs['flat/recommended'],
-    ],
-    files: ['**/*.{ts,vue}'],
-    languageOptions: {
-      ecmaVersion: 'latest',
-      sourceType: 'module',
-      globals: globals.browser,
-      parserOptions: {
-        parser: typescriptEslint.parser,
-      },
-    },
-    rules: {
-      // your rules
-      "curly": ['error'],
-
-      // Please don't use console statements and duplicated imports, TODOs are marked
-      "no-console": ['warn', { allow: ['warn', 'error'] }],
-      "no-warning-comments": ['warn'],
-      "no-duplicate-imports": ['warn'],
-
-      // Prevent errors when testing on refs (instead of value of ref)
-      "vue/no-ref-as-operand": ['error'],
-
-      // Indentation
-      "vue/html-indent": ['warn', 4],
-      "vue/script-indent": ['warn', 4],
-
-      // Number of attributes per line (increase because sometimes two is not a lot)
-      "vue/max-attributes-per-line": ['warn', { singleline: 2 } ]
-    },
-  }
-);
+import sdkConfig from './eslint-config.mjs';
+export default sdkConfig;

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,6 +162,7 @@ import classicApi from "./src/api/classicApi.ts";
 
 // API
 export { emissionApi } from "./src/api/emissionApi.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";
@@ -168,9 +170,23 @@ export { podcastApi, PodcastSort, type PodcastSearchOptions } from "./src/api/po
 
 // Types
 export { type Emission, SeasonMode, emptyEmissionData } from "./src/stores/class/general/emission.ts";
+export { type Organisation, type OrganisationAttributes, emptyOrganisationData, emptyOrgaData } from "./src/stores/class/general/organisation.ts";
 export { type Podcast, type PodcastAvailability, PodcastType } from "./src/stores/class/general/podcast.ts";
 export { type Playlist, type PlaylistRule } from "./src/stores/class/general/playlist.ts";
 export { type Annotations } from "./src/stores/class/general";
+export {
+    CreateTranslation,
+    type TranslationConfiguration,
+    defaultTranslationConfig,
+    defaultModifyPodcastConfig,
+    defaultTtsParams,
+    type ModifyPodcastConfig,
+    ModifyPodcastEnum,
+    type TranscriptParams,
+    type TtsParams,
+    type ProviderTts,
+    type Voice
+} from "./src/stores/class/transcript/transcriptParams.ts";
 
 //Icons
 export const getAmazonMusicIcon = () => import("./src/components/icons/AmazonMusicIcon.vue");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.8.4",
+  "version": "41.9.1",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -12,7 +12,7 @@
     "bundle": "vite-bundle-visualizer",
     "proxy_authentifié": "node proxy.ts",
     "proxy_non_authentifié": "node proxy.ts false",
-    "lint": "eslint --fix src",
+    "lint": "eslint --fix --max-warnings 0",
     "stylelint": "stylelint **/*.{scss,vue} --fix",
     "sonar": "sonar -Dsonar.host.url=http://localhost:9000"
   },
@@ -95,5 +95,17 @@
   },
   "peerDependencies": {
     "pinia": ">=2.3.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.ts"
+    },
+    "./src/*": "./src/*",
+    "./tests/*": "./tests/*",
+    "./eslint-config": {
+      "types": "./eslint-config.d.ts",
+      "default": "./eslint-config.mjs"
+    }
   }
 }

package/src/api/transcriptionApi.ts

@@ -1,4 +1,6 @@
-import { classicApi, ModuleApi } from ".yalc/@saooti/octopus-sdk";
+import { ModifyPodcastConfig } from "../stores/class/transcript/transcriptParams";
+import { ModuleApi } from "./apiConnection";
+import classicApi from "./classicApi";
 
 /** State of the translation */
 export enum TranslationState {
@@ -30,6 +32,11 @@ export interface PodcastTranslationData {
     translations: Array<TranslationData>;
 }
 
+interface TranslationProgress {
+    started: boolean;
+    percent: number;
+}
+
 /**
  * Returns the translations defined on the podcast
  * @param podcastId ID of the podcast
@@ -38,10 +45,129 @@ export interface PodcastTranslationData {
 async function getTranslations(podcastId: number): Promise<PodcastTranslationData> {
     return classicApi.fetchData<PodcastTranslationData>({
         api: ModuleApi.SPEECHTOTEXT,
-        path: 'transcription/' + podcastId
+        path: `transcription/${podcastId}/languages`
+    });
+}
+
+/**
+ * Returns the translation in a given language for the podcast
+ * @param podcastId ID of the podcast
+ * @param language The target language
+ * @param mayCreate *(optional)* If set to true, request creation if not available
+ * @returns The transcription
+ */
+async function getTranslation(podcastId: number, language: string, mayCreate?: boolean): Promise<string> {
+    let path = `transcription/${podcastId}/languages/${language}/srt`;
+    if (mayCreate !== undefined) {
+        path = `${path}?mayCreateIfNotExists=${mayCreate}`;
+    }
+
+    let found = false;
+    let timeout = 1000;
+    const timeoutStep = 100;
+    while (!found) {
+        const result = await classicApi.fetchData<string|TranslationProgress>({
+            api: ModuleApi.SPEECHTOTEXT,
+            path
+        });
+
+        // Stop when we get the proper result
+        if (typeof result === 'string') {
+            found = true;
+            return result;
+        }
+
+        // Wait some time before retrying
+        await new Promise((resolve) => setTimeout(resolve, timeout));
+        timeout += timeoutStep;
+
+        if (timeout >= 60 * 1000) {
+            break;
+        }
+    }
+
+    throw new Error('Timeout lors de la récupération de la transcription');
+}
+
+/**
+ * Get raw transcription for the given podcast
+ * @param podcastId ID of the podcast
+ * @returns The raw transcript
+ */
+async function getRawTranscription(podcastId: number): Promise<string> {
+    return classicApi.fetchData({
+        api: ModuleApi.SPEECHTOTEXT,
+        path: `transcription/text/${podcastId}`,
+    });
+}
+
+/**
+ * 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 = {
-    getTranslations
+    changeTranscriptionVisibility,
+    getTranslations,
+    getTranslation,
+    getRawTranscription,
+    generateTranscription,
+    regenerateTranscription,
+    updateTranscription
 };

package/src/components/composable/player/usePlayerDisplayTime.ts

@@ -20,6 +20,7 @@ export const usePlayerDisplayTime = ()=>{
     }
     return playerStore.totalTime;
   });
+
   const transcriptText = computed(() => { 
     return playerStore.transcriptText;
   });

package/src/components/composable/player/usePlayerTranscript.ts

@@ -2,45 +2,74 @@ import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useVastStore } from "../../../stores/VastStore";
 import classicApi from "../../../api/classicApi";
 import { AdserverOtherEmission } from "@/stores/class/adserver/adserverOtherEmission";
+import { useTranslation } from "../useTranslation";
+import { transcriptionApi } from "../../../api/transcriptionApi";
+import { ref } from "vue";
+
+/** Contains the language of the transcript being generated */
+const generatingTranscriptLanguage = ref<string|null>(null);
+
 export const usePlayerTranscript = ()=>{
 
   const playerStore = usePlayerStore();
   const vastStore = useVastStore();
+  const { getMostRelevantLanguage } = useTranslation();
 
   async function checkDelaytWithStitching(){
     playerStore.playerUpdateDelayStitching(0);
-    if(vastStore.useVastPlayerPodcast){return;}
+    if(vastStore.useVastPlayerPodcast){
+      return;
+    }
+
     const audioPlayer = document.querySelector("#audio-player") as HTMLAudioElement;
     if (!playerStore.playerTranscript || !audioPlayer || !playerStore.playerPodcast ||
-      audioPlayer.duration <= playerStore.playerPodcast.duration / 1000 + 5) 
-    {
+      audioPlayer.duration <= playerStore.playerPodcast.duration / 1000 + 5) {
       return;
     }
+
     const adserverConfig = await classicApi.fetchData<AdserverOtherEmission>({
       api:0,
       path:`ad/test/podcast/${playerStore.playerPodcast.podcastId}`,
       isNotAuth:true
     });
-    const doubletsLength = adserverConfig.config.doublets.length;
-    if(1=== doubletsLength &&  "pre" === adserverConfig.config.doublets[0].timing.insertion){
-      playerStore.playerUpdateDelayStitching( audioPlayer.duration - (playerStore.playerPodcast.duration / 1000));
-    }else if(0===doubletsLength || 1=== doubletsLength &&  "post" === adserverConfig.config.doublets[0].timing.insertion){
-      return;
-    }else{
+
+    // In case of midroll ads, we can't properly display transcription, so
+    // we disable it.
+    const hasOtherThanPreOrPost = adserverConfig.config.doublets
+      .filter(doublet => !(["pre", "post"].includes(doublet.timing.insertion)))
+      .length > 0;
+    if (hasOtherThanPreOrPost) {
+      console.warn("This episode's ad settings doesn't allow for transcription");
       playerStore.playerUpdateChaptering();
       playerStore.playerUpdateTranscript();
+      return;
+    }
+
+    // In case of preroll ads, delay start of transcription
+    const hasPre = adserverConfig.config.doublets
+      .filter(doublet => doublet.timing.insertion === "pre")
+      .length > 0;
+    if(hasPre) {
+      // Since we have the expected time (from playerStore) and effective time
+      // (from audioPlayer, which include ads), we just delay by the delta
+      playerStore.playerUpdateDelayStitching( audioPlayer.duration - (playerStore.playerPodcast.duration / 1000));
     }
   }
 
   async function getTranscription(): Promise<void> {
+    generatingTranscriptLanguage.value = null;
     if (!playerStore.playerPodcast) {
       playerStore.playerUpdateTranscript();
       return;
     }
-    const result = await classicApi.fetchData<string>({
-      api:11,
-      path:`response/${playerStore.playerPodcast.podcastId}`,
-    });
+
+    // Retrieve best language for transcription
+    const podcastId = playerStore.playerPodcast.podcastId;
+    const translationData = await transcriptionApi.getTranslations(podcastId);
+    const { ready, available } = await getMostRelevantLanguage(translationData);
+
+    // Retrieve transcription
+    const result = await transcriptionApi.getTranslation(podcastId, ready);
 
     const arrayTranscript = parseSrt(result);
     const actualText =
@@ -53,6 +82,26 @@ export const usePlayerTranscript = ()=>{
       actualText: actualText,
       value: arrayTranscript
     });
+
+    if (available !== undefined && ready !== available) {
+      generatingTranscriptLanguage.value = available;
+
+      // If there's a better language available, trigger its generation
+      const result = await transcriptionApi.getTranslation(podcastId, available, true);
+
+      const arrayTranscript = parseSrt(result);
+      const actualText =
+        arrayTranscript?.[0]?.startTime === 0 ? arrayTranscript[0].text : "";
+      if(!arrayTranscript){
+        return;
+      }
+      playerStore.playerUpdateTranscript({
+        actual: playerStore.playerTranscript?.actual,
+        actualText: actualText,
+        value: arrayTranscript
+      });
+      generatingTranscriptLanguage.value = null;
+    }
   }
 
   function parseSrt(transcript: string) {
@@ -110,11 +159,11 @@ export const usePlayerTranscript = ()=>{
     }
   }
 
-
-	return {
+  return {
     checkDelaytWithStitching,
     getTranscription,
     onTimeUpdateTranscript,
-    onSeekedTranscript
-	}
+    onSeekedTranscript,
+    generatingTranscriptLanguage
+  }
 }

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/share/useSharePath.ts

@@ -1,4 +1,4 @@
-import { OrganisationAttributes } from "@/stores/class/general/organisation";
+import { OrganisationAttributes } from "../../../stores/class/general/organisation";
 import { RouteLocationAsRelativeTyped, useRouter } from "vue-router";
 import { useSeoTitleUrl } from "../route/useSeoTitleUrl";
 

package/src/components/composable/share/useSharePlatforms.ts

@@ -14,7 +14,7 @@ import RadioFranceIcon from "../../icons/RadioFranceIcon.vue";
 import YoutubeIcon from "vue-material-design-icons/Youtube.vue";
 import SpotifyIcon from "vue-material-design-icons/Spotify.vue";
 import { Annotations } from "@/stores/class/general";
-import { computed, type Component } from "vue";
+import { computed, markRaw, type Component } from "vue";
 
 export enum SharePlatformName {
     APPLE = "applePodcast",
@@ -55,77 +55,77 @@ export const useSharePlatforms = () => {
     const platforms = computed((): Array<SharePlatform> => {
         return [{
             name: SharePlatformName.APPLE,
-            icon: ApplePodcastIcon,
+            icon: markRaw(ApplePodcastIcon),
             title: "Apple Podcast | iTunes",
             color:"#aa1dd3"
         }, {
             name: SharePlatformName.DEEZER,
-            icon: DeezerIcon,
+            icon: markRaw(DeezerIcon),
             title: "Deezer",
             color:"#a238ff",
         }, {
             name: SharePlatformName.SPOTIFY,
-            icon: SpotifyIcon,
+            icon: markRaw(SpotifyIcon),
             title: "Spotify",
             color: "#1ed760",
         }, {
             name: SharePlatformName.AMAZON,
-            icon: AmazonMusicIcon,
+            icon: markRaw(AmazonMusicIcon),
             title: "Amazon Music",
             color: "#0c6cb3",
         }, {
             name: SharePlatformName.I_HEART,
-            icon: IHeartIcon,
+            icon: markRaw(IHeartIcon),
             title: "iHeart",
             color:"#e11b22"
         }, {
             name: SharePlatformName.PLAYER_FM,
-            icon: PlayerFmIcon,
+            icon: markRaw(PlayerFmIcon),
             title: "Player FM",
             color:"#bb202a"
         }, {
             name: SharePlatformName.POCKET_CASTS,
-            icon: PocketCastIcon,
+            icon: markRaw(PocketCastIcon),
             title: "Pocket Casts",
             color:"#f43e37"
         }, {
             name: SharePlatformName.PODCAST_ADDICT,
-            icon: PodcastAddictIcon,
+            icon: markRaw(PodcastAddictIcon),
             title: "Podcast Addict",
             color:"#f4842d"
         }, {
             name: SharePlatformName.RADIOLINE,
-            icon: RadiolineIcon,
+            icon: markRaw(RadiolineIcon),
             title: "Radioline",
             color:"#1678bd"
         }, {
             name: SharePlatformName.TUNE_IN,
-            icon: TuninIcon,
+            icon: markRaw(TuninIcon),
             title: "TuneIn",
             color:"#36b4a7"
         }, {
             name: SharePlatformName.YOUTUBE,
-            icon: YoutubeIcon,
+            icon: markRaw(YoutubeIcon),
             title: "YouTube Music",
             color: "#fe0000",
         }, {
             name: SharePlatformName.CASTBOX,
-            icon: CastboxIcon,
+            icon: markRaw(CastboxIcon),
             title: "Castbox",
             color: "#fe6222",
         }, {
             name: SharePlatformName.PODBEAN,
-            icon: PodbeanIcon,
+            icon: markRaw(PodbeanIcon),
             title: "PodBean",
             color: "#428200",
         }, {
             name: SharePlatformName.PODCAST_REPUBLIC,
-            icon: PodcastRepublicIcon,
+            icon: markRaw(PodcastRepublicIcon),
             title: "Podcast Republic",
             color: "#5c85dd",
         }, {
             name: SharePlatformName.RADIO_FRANCE,
-            icon: RadioFranceIcon,
+            icon: markRaw(RadioFranceIcon),
             title: "Radio France",
             color: "#a90041",
         }];