@saooti/octopus-sdk 41.9.6 → 41.10.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # CHANGELOG
 
+## 41.10.1 (04/05/2026)
+
+**Fixes**
+
+- **14469** - Correction récupération incorrecte de la configuration de
+  traduction de l'organisation
+
+## 41.10.0 (04/05/2026)
+
+**Features**
+
+- **14384** - Changements système d'aggregateurs
+  - Mise en place de `aggregatorsApi` pour faciliter les requêtes
+  - Ajout de fonctions utilitaires pour les droits
+  - Intégration des plateformes personnalisées à `useSharePlatforms`
+- Ajout d'un composant `ClassicAvatar` pour identifier des éléments avec une
+  image ou lettre sur fond coloré
+- Ajout event `blur` sur `ClassicInputText`
+- Amélioration accessibilité `ClassicInputText`
+- Ajout composant `ClassicButtonGroup`
+- `ClassicRadio` calcule automatiquement un id si non défini
+- Ajout `radioApi`
+- Ajout d'un helper `gap-X` pour contrôler l'espacement des éléments flex
+  - Fonctionne comme le helper de marges `mt-X`
+- Utilisation d'un store à la place d'un composable pour la gestion des
+  notifications
+
+**Fixes**
+
+- **14353** - Correction erreur sur page radio
+- **14354** - Correction recherche par tag
+- Correction timer dans `ClassicInputText` faisant échouer les tests de manière
+  aléatoire
+
+**Misc**
+
+- Ajustement affichage bouton play de `RadioImage`
+- Correction vulnérabilité xmidom
+- Mise à jour dépendances
+
 ## 41.9.6 (20/04/2026)
 
 **Features**

package/index.ts

@@ -55,6 +55,11 @@ export {
 import ActionButton from "./src/components/buttons/ActionButton.vue";
 export { ActionButton };
 
+// Form
+import ClassicButtonGroup from "./src/components/form/ClassicButtonGroup.vue";
+export { ClassicButtonGroup };
+export type { ButtonGroupOption } from "./src/components/form/ClassicButtonGroup.vue";
+
 //Display
 export const getCategoryChooser = () => import("./src/components/display/categories/CategoryChooser.vue");
 export const getCategoryList = () => import("./src/components/display/categories/CategoryList.vue");
@@ -129,8 +134,7 @@ import {useOrganisationFilter} from "./src/components/composable/useOrganisation
 import {useInit} from "./src/components/composable/useInit.ts";
 import {useErrorHandler} from "./src/components/composable/useErrorHandler.ts";
 import { useSimplePageParam } from "./src/components/composable/route/useSimplePageParam";
-import { useNotifications } from "./src/components/composable/useNotifications.ts";
-export { useSharePlatforms, SharePlatformName, type SharePlatform } from "./src/components/composable/share/useSharePlatforms.ts";
+export { useSharePlatforms, PREDEFINED_PLATFORMS, SharePlatformName, type SharePlatform } from "./src/components/composable/share/useSharePlatforms.ts";
 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";
@@ -158,6 +162,7 @@ import {useFilterStore} from "./src/stores/FilterStore.ts";
 import {useCommentStore} from "./src/stores/CommentStore.ts";
 import {useApiStore} from "./src/stores/ApiStore.ts";
 import {useAuthStore} from "./src/stores/AuthStore.ts";
+export * from "./src/stores/NotificationStore.ts";
 import {getApiUrl, ModuleApi} from "./src/api/apiConnection.ts";
 import classicApi from "./src/api/classicApi.ts";
 
@@ -168,6 +173,8 @@ export * from "./src/api/groupsApi.ts";
 export { organisationApi } from "./src/api/organisationApi.ts";
 export { playlistApi } from "./src/api/playlistApi.ts";
 export { podcastApi, PodcastSort, type PodcastSearchOptions } from "./src/api/podcastApi.ts";
+export { radioApi } from "./src/api/radioApi.ts";
+export * from "./src/api/aggregatorsApi.ts";
 
 // Types
 export { type Emission, SeasonMode, emptyEmissionData } from "./src/stores/class/general/emission.ts";
@@ -188,6 +195,7 @@ export {
     type ProviderTts,
     type Voice
 } from "./src/stores/class/transcript/transcriptParams.ts";
+export { type Canal } from "./src/stores/class/radio/canal.ts";
 
 //Icons
 export const getAmazonMusicIcon = () => import("./src/components/icons/AmazonMusicIcon.vue");
@@ -233,7 +241,6 @@ export {
     useInit,
     useErrorHandler,
     useSimplePageParam,
-    useNotifications,
     debounce,
     useVastStore,
     useSaveFetchStore,

package/package.json

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

package/src/api/aggregatorsApi.ts

@@ -0,0 +1,53 @@
+import { ModuleApi } from "./apiConnection";
+import classicApi from "./classicApi";
+
+export interface Aggregator {
+    /** ID of the aggregator */
+    aggregatorId: number;
+    /** Name of the aggregator */
+    name: string;
+    /** User who created this aggregator */
+    createdBy: string;
+    /** Link to image for aggregator */
+    image?: string;
+    /** IP criteria */
+    ip?: string;
+    /** IP range criteria */
+    ipRange?: string;
+    /** Regex for referer criteria */
+    refererRegexp?: string;
+    /** Slug criteria */
+    slug?: string;
+    /** Regex for user agent criteria */
+    uaRegexp?: string;
+}
+
+export type PredefinedAggregator = Pick<Aggregator, 'name' | 'image'>;
+
+/**
+ * Return the list of predefined aggregators
+ */
+async function getPredefined(): Promise<Array<PredefinedAggregator>> {
+    return classicApi.fetchData<Array<PredefinedAggregator>>({
+        api: ModuleApi.DEFAULT,
+        path: 'rss/aggregator/distributions'
+    });
+}
+
+/**
+ * Return the list of all user-defined aggregators
+ * @param organisationId If defined, the aggregators will be filtered for this
+ *                       organisation
+ */
+async function getAll(organisationId?: string): Promise<Array<Aggregator>> {
+    return classicApi.fetchData<Array<Aggregator>>({
+        api: ModuleApi.DEFAULT,
+        path: 'rss/aggregator/list',
+        parameters: organisationId ? { organisationId } : undefined
+    });
+}
+
+export const aggregatorsApi = {
+    getPredefined,
+    getAll
+};

package/src/api/podcastApi.ts

@@ -120,7 +120,7 @@ function processSearchParameters(search: PodcastSearchOptions): FetchParam {
         } else if (key === 'processingStatus') {
             parameters.includeStatus = value;
         } else if (key === 'tags') {
-            parameters.includeTags = value;
+            parameters.includeTag = value;
         } else if (key === 'pubDateBefore') {
             parameters.before = value;
         } else if (key === 'pubDateAfter') {

package/src/api/radioApi.ts

@@ -0,0 +1,19 @@
+import { Canal } from "../stores/class/radio/canal";
+import classicApi from "./classicApi";
+import { ModuleApi } from "./apiConnection";
+
+/**
+ * Retrieve a radio canal by its id
+ * @param radioId Id of the radio to retrieve
+ * @returns The canal data
+ */
+async function get(radioId: number): Promise<Canal> {
+    return classicApi.fetchData<Canal>({
+        api: ModuleApi.RADIO,
+        path: `canal/${radioId}`
+    });
+}
+
+export const radioApi = {
+    get
+};

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

@@ -14,7 +14,11 @@ 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, markRaw, type Component } from "vue";
+import { h, markRaw, onMounted, ref, type Component } from "vue";
+import { aggregatorsApi } from "../../../api/aggregatorsApi";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { useNotificationStore } from "../../../stores/NotificationStore";
+import ClassicAvatar from "../../misc/ClassicAvatar.vue";
 
 export enum SharePlatformName {
     APPLE = "applePodcast",
@@ -36,13 +40,15 @@ export enum SharePlatformName {
 
 export interface SharePlatform {
     /** ID of the platform */
-    name: SharePlatformName;
+    name: SharePlatformName|string;
     /** Icon of the platform */
     icon: Component;
     /** Display text/title for buttons */
     title: string;
     /** Color of the icon */
     color: string;
+    /** Annotation to use for url */
+    annotation?: string;
 }
 
 export interface SharePlatformUrl extends SharePlatform {
@@ -50,87 +56,111 @@ export interface SharePlatformUrl extends SharePlatform {
     url: string;
 }
 
+export const PREDEFINED_PLATFORMS: Array<SharePlatform> = [{
+    name: SharePlatformName.APPLE,
+    icon: markRaw(ApplePodcastIcon),
+    title: "Apple Podcast | iTunes",
+    color: "#aa1dd3"
+}, {
+    name: SharePlatformName.DEEZER,
+    icon: markRaw(DeezerIcon),
+    title: "Deezer",
+    color: "#a238ff",
+}, {
+    name: SharePlatformName.SPOTIFY,
+    icon: markRaw(SpotifyIcon),
+    title: "Spotify",
+    color: "#1ed760",
+}, {
+    name: SharePlatformName.AMAZON,
+    icon: markRaw(AmazonMusicIcon),
+    title: "Amazon Music",
+    color: "#0c6cb3",
+}, {
+    name: SharePlatformName.I_HEART,
+    icon: markRaw(IHeartIcon),
+    title: "iHeart",
+    color: "#e11b22"
+}, {
+    name: SharePlatformName.PLAYER_FM,
+    icon: markRaw(PlayerFmIcon),
+    title: "Player FM",
+    color: "#bb202a"
+}, {
+    name: SharePlatformName.POCKET_CASTS,
+    icon: markRaw(PocketCastIcon),
+    title: "Pocket Casts",
+    color: "#f43e37"
+}, {
+    name: SharePlatformName.PODCAST_ADDICT,
+    icon: markRaw(PodcastAddictIcon),
+    title: "Podcast Addict",
+    color: "#f4842d"
+}, {
+    name: SharePlatformName.RADIOLINE,
+    icon: markRaw(RadiolineIcon),
+    title: "Radioline",
+    color: "#1678bd"
+}, {
+    name: SharePlatformName.TUNE_IN,
+    icon: markRaw(TuninIcon),
+    title: "TuneIn",
+    color: "#36b4a7"
+}, {
+    name: SharePlatformName.YOUTUBE,
+    icon: markRaw(YoutubeIcon),
+    title: "YouTube Music",
+    color: "#fe0000",
+}, {
+    name: SharePlatformName.CASTBOX,
+    icon: markRaw(CastboxIcon),
+    title: "Castbox",
+    color: "#fe6222",
+}, {
+    name: SharePlatformName.PODBEAN,
+    icon: markRaw(PodbeanIcon),
+    title: "PodBean",
+    color: "#428200",
+}, {
+    name: SharePlatformName.PODCAST_REPUBLIC,
+    icon: markRaw(PodcastRepublicIcon),
+    title: "Podcast Republic",
+    color: "#5c85dd",
+}, {
+    name: SharePlatformName.RADIO_FRANCE,
+    icon: markRaw(RadioFranceIcon),
+    title: "Radio France",
+    color: "#a90041",
+}];
+
 export const useSharePlatforms = () => {
-    
-    const platforms = computed((): Array<SharePlatform> => {
-        return [{
-            name: SharePlatformName.APPLE,
-            icon: markRaw(ApplePodcastIcon),
-            title: "Apple Podcast | iTunes",
-            color:"#aa1dd3"
-        }, {
-            name: SharePlatformName.DEEZER,
-            icon: markRaw(DeezerIcon),
-            title: "Deezer",
-            color:"#a238ff",
-        }, {
-            name: SharePlatformName.SPOTIFY,
-            icon: markRaw(SpotifyIcon),
-            title: "Spotify",
-            color: "#1ed760",
-        }, {
-            name: SharePlatformName.AMAZON,
-            icon: markRaw(AmazonMusicIcon),
-            title: "Amazon Music",
-            color: "#0c6cb3",
-        }, {
-            name: SharePlatformName.I_HEART,
-            icon: markRaw(IHeartIcon),
-            title: "iHeart",
-            color:"#e11b22"
-        }, {
-            name: SharePlatformName.PLAYER_FM,
-            icon: markRaw(PlayerFmIcon),
-            title: "Player FM",
-            color:"#bb202a"
-        }, {
-            name: SharePlatformName.POCKET_CASTS,
-            icon: markRaw(PocketCastIcon),
-            title: "Pocket Casts",
-            color:"#f43e37"
-        }, {
-            name: SharePlatformName.PODCAST_ADDICT,
-            icon: markRaw(PodcastAddictIcon),
-            title: "Podcast Addict",
-            color:"#f4842d"
-        }, {
-            name: SharePlatformName.RADIOLINE,
-            icon: markRaw(RadiolineIcon),
-            title: "Radioline",
-            color:"#1678bd"
-        }, {
-            name: SharePlatformName.TUNE_IN,
-            icon: markRaw(TuninIcon),
-            title: "TuneIn",
-            color:"#36b4a7"
-        }, {
-            name: SharePlatformName.YOUTUBE,
-            icon: markRaw(YoutubeIcon),
-            title: "YouTube Music",
-            color: "#fe0000",
-        }, {
-            name: SharePlatformName.CASTBOX,
-            icon: markRaw(CastboxIcon),
-            title: "Castbox",
-            color: "#fe6222",
-        }, {
-            name: SharePlatformName.PODBEAN,
-            icon: markRaw(PodbeanIcon),
-            title: "PodBean",
-            color: "#428200",
-        }, {
-            name: SharePlatformName.PODCAST_REPUBLIC,
-            icon: markRaw(PodcastRepublicIcon),
-            title: "Podcast Republic",
-            color: "#5c85dd",
-        }, {
-            name: SharePlatformName.RADIO_FRANCE,
-            icon: markRaw(RadioFranceIcon),
-            title: "Radio France",
-            color: "#a90041",
-        }];
-    });
 
+    const platforms = ref<Array<SharePlatform>>([]);
+
+    const { authOrgaId } = useAuthStore();
+    const { addNotification } = useNotificationStore();
+
+    onMounted(async (): Promise<void> => {
+        platforms.value.push(...PREDEFINED_PLATFORMS);
+        try {
+            const customPlatforms = await aggregatorsApi.getAll(authOrgaId);
+            customPlatforms.forEach(platform => {
+                platforms.value.push({
+                    name: platform.name,
+                    title: platform.name,
+                    icon: markRaw(() => h(ClassicAvatar, { name: platform.name, imageUrl: platform.image })),
+                    color: "white",
+                    annotation: `ptfaudio_${platform.name}`
+                });
+            });
+        } catch(error) {
+            addNotification({
+                type: 'error',
+                message: error
+            });
+        }
+    });
+    
     /**
      * Helper to retrieve configuration of a specific platform
      * @param platform The ID of the platform
@@ -149,7 +179,7 @@ export const useSharePlatforms = () => {
     function getPlatformsWithLinks(annotations: Annotations|undefined): Array<SharePlatformUrl> {
         const ary: Array<SharePlatformUrl> = [];
         platforms.value.forEach(p => {
-            const url = getUrl(p.name, annotations);
+            const url = getUrl(p.annotation ?? p.name, annotations);
             if (url) {
                 ary.push({
                     ...p,

package/src/components/composable/useRights.ts

@@ -12,6 +12,7 @@ export enum EditRight {
     Restricted,    // User cannot edit because element is used elsewhere
     Full           // User can edit
 }
+
 /**
  * Composable to manage rights.
  * Based on AuthStore, but converts roles to easily usable tests for various
@@ -177,6 +178,21 @@ export const useRights = () => {
         return roleContainsAny('RESTRICTED_PRODUCTION') && !roleContainsAny('ADMIN', 'ORGANISATION', 'PRODUCTION');
     }
 
+    /** Can the current user create an aggregator */
+    function canCreateAggregator(): boolean {
+        return roleContainsAny('ADMIN', 'ORGANISATION');
+    }
+
+    /** Can the current user edit an aggregator */
+    function canEditAggregator(): boolean {
+        return roleContainsAny('ADMIN', 'ORGANISATION');
+    }
+
+    /** Can the current user delete an aggregator */
+    function canDeleteAggregator(): boolean {
+        return roleContainsAny('ADMIN', 'ORGANISATION');
+    }
+
     return {
         // Emissions
         canCreateEmission,
@@ -203,6 +219,11 @@ export const useRights = () => {
         canEditParticipant,
         canDeleteParticipant,
 
+        // Aggregators
+        canCreateAggregator,
+        canEditAggregator,
+        canDeleteAggregator,
+
         // Other
         canEditCodeInsertPlayer,
         canEditTranscript,

package/src/components/composable/useTranslation.ts

@@ -3,6 +3,8 @@ import { transcriptionApi, TranslationState, type PodcastTranslationData } from
 import { CreateTranslation, defaultTranslationConfig, TranslationConfiguration } from "../../stores/class/transcript/transcriptParams";
 import { podcastApi } from "../../api/podcastApi";
 import { Emission } from "../../stores/class/general/emission";
+import { OrganisationAttributes } from "@/stores/class/general/organisation";
+import { organisationApi } from "../../api/organisationApi";
 
 const DEFAULT_LANGUAGE = 'en';
 
@@ -67,21 +69,20 @@ export const useTranslation = () => {
      * @param emission *(optional)* If set, will also check in emission settings
      * @returns Whether the language is available or not
      */
-    function getTranslationConfig(language: string, emission: Emission): CreateTranslation {
-        const orgAttributes = emission.orga.attributes;
-        const emissionTranslation = parseOrDefault(emission?.annotations?.['translation-config'] as string|undefined, true);
-        const orgTranslation = parseOrDefault(orgAttributes?.['translation-config']);
+    function getTranslationConfig(language: string, emission: Emission, orgaAttributes: OrganisationAttributes): CreateTranslation {
+        const emissionTranslation = parseOrDefault(emission.annotations?.['translation-config'] as string|undefined, true);
+        const orgTranslation = parseOrDefault(orgaAttributes?.['translation-config']);
 
         return getConfigurationFor(language, emissionTranslation, orgTranslation);
     }
 
-    function getLanguageAvailability(language: string, emission: Emission, translationData: PodcastTranslationData): Availability {
+    function getLanguageAvailability(language: string, emission: Emission, orgaAttributes: OrganisationAttributes, 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);
+            const langConfig = getTranslationConfig(language, emission, orgaAttributes);
 
             // 2. If the language of the browser is available, use it
             if (langConfig === CreateTranslation.ALWAYS) {
@@ -136,12 +137,13 @@ export const useTranslation = () => {
 
         const podcast = await podcastApi.get(translationData.podcastId);
         const emission = podcast.emission;
+        const orgaAttributes = await organisationApi.getAttributes(podcast.organisation.id);
 
         let bestReady: string|null = null;
         let bestAvailable: string|null = null;
 
         for (const language of languages) {
-            const avaibility = getLanguageAvailability(language, emission, translationData);
+            const avaibility = getLanguageAvailability(language, emission, orgaAttributes, translationData);
             if (avaibility === Availability.Available && bestReady === null) {
                 bestReady = language;
                 break;

package/src/components/display/live/RadioCurrently.vue

@@ -104,6 +104,7 @@ function updateMetadata(metadata: MediaRadio|undefined, podcast?: Podcast): void
   currentPodcast.value = podcast;
 }
 </script>
+
 <style lang="scss">
 .octopus-app .small-img-box {
   height: 80px;

package/src/components/display/live/RadioImage.vue

@@ -18,8 +18,8 @@
     />
     <button class="radio-play-button" @click="playRadio">
       <PlayIcon v-if="!playingRadio" :title="t('Play')" :size="40" />
-      <PodcastIsPlaying v-else/>
-      <div class="ms-2">
+      <PodcastIsPlaying v-else />
+      <div class="mx-2">
         {{ playText }}
       </div>
     </button>
@@ -84,4 +84,4 @@ function playRadio(): void {
   padding:  0.2rem;
   border: 0;
 }
-</style>
+</style>

package/src/components/display/sharing/SubscribeButtons.vue

@@ -21,7 +21,12 @@
         :href="sub.url"
         :title="t('New window', {text: sub.title})"
       >
-        <component :is="sub.icon" :fill-color="fillColor(sub)" :size="iconSize" />
+        <component
+          :is="sub.icon"
+          :fill-color="fillColor(sub)"
+          :size="iconSize"
+          non-decorative
+        />
       </a>
     </div>
     <a

package/src/components/form/ClassicButtonGroup.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="classic-button-group">
+        <button
+            v-for="option in options"
+            :key="option.value"
+            type="button"
+            class="btn"
+            :class="{ active: modelValue.includes(option.value) }"
+            @click="toggle(option.value)"
+        >
+            {{ option.label }}
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+export interface ButtonGroupOption {
+    label: string;
+    value: string;
+}
+
+const props = defineProps<{
+    options: ButtonGroupOption[];
+    modelValue: string[];
+}>();
+
+const emit = defineEmits<{
+    'update:modelValue': [values: string[]];
+}>();
+
+function toggle(value: string): void {
+    const isSelected = props.modelValue.includes(value);
+    if (isSelected && props.modelValue.length <= 1) { return; }
+    const newValues = isSelected
+        ? props.modelValue.filter(v => v !== value)
+        : [...props.modelValue, value];
+    emit('update:modelValue', newValues);
+}
+</script>
+
+<style lang="scss" scoped>
+.classic-button-group {
+    display: inline-flex;
+    border: 1px solid var(--octopus-border-default);
+    border-radius: var(--octopus-border-radius);
+    overflow: hidden;
+
+    .btn {
+        border: none;
+        border-right: 1px solid var(--octopus-border-default);
+        border-radius: 0;
+        background-color: var(--octopus-secondary);
+        color: var(--octopus-gray-text);
+        font-size: 0.8rem;
+        transition: background-color 0.15s ease;
+
+        &:last-child {
+            border-right: none;
+        }
+
+        &:hover:not(.active) {
+            background-color: var(--octopus-secondary-darker);
+        }
+
+        &.active {
+            background-color: var(--octopus-primary);
+            color: white;
+        }
+    }
+}
+</style>

package/src/components/form/ClassicInputText.vue

@@ -60,7 +60,9 @@
       }"
       :disabled="isDisable || disabled"
       :required="!canBeNull"
+      :aria-required="!canBeNull"
       :autocomplete="autocompleteType"
+      @blur="emit('blur')"
     >
     <textarea
       v-else-if="isTextarea"
@@ -129,7 +131,7 @@
 <script setup lang="ts">
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
-import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from "vue";
+import { computed, defineAsyncComponent, onMounted, onUnmounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from "vue";
 import { useI18n } from "vue-i18n";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
@@ -187,7 +189,7 @@ const props = defineProps({
 })
 
 //Emits
-const emit = defineEmits(["update:textInit", "update:errorVariable"]);
+const emit = defineEmits(["update:textInit", "update:errorVariable", "blur"]);
 
 //Data 
 const textValue : Ref<string | undefined>= ref(undefined);
@@ -262,7 +264,7 @@ onMounted(()=>{
 
   if (props.isTextarea) {
     // Delay a scroll back to the top of the text area
-    setTimeout(() => {
+    scrollTimer = setTimeout(() => {
       const textArea = document.getElementById(computedInputId.value);
       if (textArea) {
         textArea.scrollTop = 0;
@@ -270,6 +272,11 @@ onMounted(()=>{
     }, 100);
   }
 });
+
+let scrollTimer: ReturnType<typeof setTimeout> | undefined;
+onUnmounted(() => {
+  clearTimeout(scrollTimer);
+});
  
 //Methods
 function addEmojiSelected(emoji: string) {

package/src/components/form/ClassicRadio.vue

@@ -18,15 +18,15 @@
       :class="isColumn !== false ? 'd-flex flex-nowrap align-items-center' : 'me-2'"
     >
       <input
-        :id="idRadio + option.value"
+        :id="computedId + option.value"
         :checked="textInit === option.value"
         type="radio"
-        :name="idRadio"
+        :name="computedId"
         :value="option.value"
         :disabled="isDisabled"
         @input="onChange($event.target.value)"
       >
-      <label class="c-hand" :for="idRadio + option.value">
+      <label class="c-hand" :for="computedId + option.value">
         <slot :name="'label-' + option.value" v-bind="slotBindings(option)">{{ option.title }}</slot>
       </label>
 
@@ -36,8 +36,10 @@
 </template>
 
 <script setup generic="T extends { title: string; value: string|undefined; }" lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+
 //Props 
-const { textInit, isColumn = true } = defineProps<{
+const { textInit, isColumn = true, idRadio } = defineProps<{
   options: Array<T>;
   textInit?: string;
   idRadio?: string;
@@ -50,6 +52,15 @@ const emit = defineEmits<{
   (e: 'update:textInit', value: string): void;
 }>();
 
+const uid = getCurrentInstance()?.uid;
+const computedId = computed((): string => {
+  if (idRadio !== undefined) {
+    return idRadio;
+  } else {
+    return 'classic-radio-' + uid;
+  }
+});
+
 //Methods
 function onChange(value: string){
   emit('update:textInit', value)

package/src/components/misc/ClassicAlert.vue

@@ -15,6 +15,8 @@
         <component
             :is="iconComponent"
             v-if="!noIcon"
+            aria-hidden="true"
+            focusable="false"
             class="icon"
             :size="text ? 22 : 30"
         />

package/src/components/misc/ClassicAvatar.vue

@@ -0,0 +1,62 @@
+<template>
+    <div
+        class="avatar-container d-flex align-items-center justify-content-center"
+        :aria-hidden="!nonDecorative"
+        :style="containerStyle"
+    >
+        <img
+            v-if="imageUrl"
+            :alt="nonDecorative ? name : ''"
+            :width="size"
+            :height="size"
+            :src="useProxyImageUrl(imageUrl, '' + size)"
+        >
+        <template v-else>
+            {{ name.length > 0 ? name[0].toUpperCase() : '?' }}
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type StyleValue } from 'vue';
+import { useImageProxy } from '../composable/useImageProxy';
+import { colorFromString } from '../../helper/colorFromString';
+
+const props = withDefaults(defineProps<{
+    /** Name of the element to display */
+    name: string;
+    /** URL to the image to be displayed */
+    imageUrl?: string;
+    /** Size of the avatar */
+    size?: number;
+    /**
+     * Indicates that this element is not decorative.
+     * Use this when this element is the only thing to identify a platform.
+     * Will use accessibility options to hide this element if true.
+     */
+    nonDecorative?: boolean;
+}>(), {
+    imageUrl: undefined,
+    size: 24
+});
+
+const { useProxyImageUrl } = useImageProxy();
+
+const containerStyle = computed((): StyleValue => {
+    const size = `${props.size}px`;
+    return {
+        'background-color': colorFromString(props.name),
+        'font-size': `${props.size / 2}px`,
+        height: size,
+        width: size
+    };
+});
+</script>
+
+<style scoped lang="scss">
+.avatar-container {
+    border-radius: 30%;
+    font-weight: 800;
+    color: black;
+}
+</style>

package/src/components/misc/ClassicNotifications.vue

@@ -3,21 +3,24 @@
 -->
 <template>
     <MessageModal
-        v-if="notification !== null"
-        :title="notification.title"
-        :message="notification.message"
-        :closeable="notification.closeable !== false"
-        @close="clearNotifications"
+        v-if="currentNotification"
+        :title="currentNotification.title"
+        :message="currentNotification.message"
+        :closeable="currentNotification.closeable !== false"
+        @close="clearNotification"
     />
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useNotificationStore } from '../../stores/NotificationStore';
 import MessageModal from './modal/MessageModal.vue';
 
-import { useNotifications } from '../composable/useNotifications';
+const {
+    clearNotification
+} = useNotificationStore();
 
 const {
-    notification,
-    clearNotifications
-} = useNotifications();
+    currentNotification,
+} = storeToRefs(useNotificationStore());
 </script>

package/src/components/misc/TopBar.vue

@@ -26,7 +26,7 @@
         {{ titleToDisplay }}
       </h1>
       <SubscribeButtons
-        v-if="!authStore.isGarRole"
+        v-if="!authStore.isGarRole && content"
         v-show="!scrolled"
         :content="content"
         :window-width="windowWidth"

package/src/helper/colorFromString.ts

@@ -0,0 +1,15 @@
+/**
+ * Get a color from a string.
+ * Using the same string, the color will always be the same.
+ * @param str The string used for the color
+ * @param saturation Saturation of the color
+ * @param lightness Lightness of the color
+ * @returns A color
+ */
+export function colorFromString(str: string, saturation = 80, lightness = 70) {
+    let hash = 0;
+    str.split('').forEach(char => {
+        hash = char.charCodeAt(0) + ((hash << 5) - hash);
+    });
+    return `hsl(${(hash + 360) % 360}, ${saturation}%, ${lightness}%)`;
+}

package/src/stores/NotificationStore.ts

@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+type NotificationType = 'success'|'info'|'warning'|'error';
+
+/**
+ * Type for notifications
+ */
+interface Notification {
+    /** Optional title of the notification */
+    title?: string;
+    /** Message displayed by the notification */
+    message: string;
+    /** Type of notification, may affect display */
+    type: NotificationType;
+    /** When set to false, disallow manual closing of modal notification (default: true) */
+    closeable?: boolean;
+}
+
+export const useNotificationStore = defineStore('notifications', () => {
+    const notificationQueue = ref<Array<Notification>>([]);
+
+    /**
+     * Add a notification to the queue
+     * @param notification The notification to add
+     */
+    function addNotification(notification: Notification): void {
+        notificationQueue.value.push(notification);
+    }
+
+    /** Remove the current notification from the queue */
+    function clearNotification(): void {
+        const notif = currentNotification.value;
+        if (notif !== null) {
+            const idx = notificationQueue.value.indexOf(notif);
+            notificationQueue.value.splice(idx, 1);
+        }
+    }
+
+    /** The currently active notification */
+    const currentNotification = computed((): Notification|undefined => {
+        if (notificationQueue.value.length > 0) {
+            return notificationQueue.value[0];
+        }
+        return undefined;
+    });
+
+
+    return {
+        addNotification,
+        currentNotification,
+        clearNotification
+    }
+});

package/src/stores/PlayerStore.ts

@@ -241,7 +241,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         return;
       }
       if (param.canalId) {
-        this.playerRadio = { ...param, ...{ isInit: false } };
+        this.playerRadio = { ...param, isInit: false };
         this.playerCurrentChange = -param.canalId;
       }
     },

package/src/style/_utilities.scss

@@ -168,6 +168,12 @@ $utilities: map.merge(
       class: flex,
       values: wrap nowrap
     ),
+    "gap": (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $spacers
+    ),
     "justify-content": (
       responsive: true,
       property: justify-content,
@@ -428,4 +434,4 @@ $utilities: map.merge(
   @if meta.type-of($utility) == "map" {
     @include generate-utility($utility, "");
   }
-}
+}

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

@@ -312,6 +312,24 @@ describe('useRights', () => {
         });
     });
 
+    describe('Aggregator permissions', () => {
+        ['canCreateAggregator', 'canEditAggregator', 'canDeleteAggregator'].forEach(method => {
+            describe(method, () => {
+                ['ADMIN', 'ORGANISATION'].forEach(role => {
+                    it(`allows ${role}`, async () => {
+                        await setup([role]);
+                        expect(useRights()[method as 'canCreateAggregator']()).toBe(true);
+                    });
+                });
+
+                it('denies unrelated roles', async () => {
+                    await setup(['PRODUCTION']);
+                    expect(useRights()[method as 'canCreateAggregator']()).toBe(false);
+                });
+            });
+        });
+    });
+
     describe('Other permissions', () => {
         describe('canEditCodeInsertPlayer', () => {
             ['ADMIN', 'ORGANISATION'].forEach(role => {

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

@@ -19,19 +19,26 @@ vi.mock('@/api/podcastApi', () => ({
     },
 }));
 
+vi.mock('@/api/organisationApi', () => ({
+    organisationApi: {
+        getAttributes: vi.fn()
+    }
+}));
+
 vi.mock('@/helper/language', () => ({
     getLanguage: vi.fn().mockReturnValue('fr'),
 }));
 
 import { transcriptionApi, type PodcastTranslationData } from '@/api/transcriptionApi';
 import { podcastApi } from '@/api/podcastApi';
+import { organisationApi } from '@/api/organisationApi';
 import { getLanguage } from '@/helper/language';
 
 function makeTranslationData(overrides: Partial<PodcastTranslationData> = {}): PodcastTranslationData {
     return { podcastId: 1, nativeLanguage: 'fr', translations: [], ...overrides };
 }
 
-function makeEmission(orgConfig?: object): Emission {
+function makeEmission(): Emission {
     return {
         emissionId: 0,
         name: '',
@@ -40,7 +47,6 @@ function makeEmission(orgConfig?: object): Emission {
             id: 'test-org',
             imageUrl: '',
             name: 'Test Org',
-            attributes: orgConfig ? { 'translation-config': JSON.stringify(orgConfig) } : undefined,
         },
         beneficiaries: [],
         rubriqueIds: [],
@@ -50,7 +56,17 @@ function makeEmission(orgConfig?: object): Emission {
 }
 
 function setOrgTranslationConfig(config: object) {
-    vi.mocked(podcastApi.get).mockResolvedValue({ emission: makeEmission(config) } as never);
+    vi.mocked(podcastApi.get).mockResolvedValue({
+        emission: makeEmission(),
+        organisation: { id: 1 }
+    } as never);
+    setOrgAttributes(config);
+}
+
+function setOrgAttributes(orgConfig: object) {
+    vi.mocked(organisationApi.getAttributes).mockResolvedValue({
+        'translation-config': JSON.stringify(orgConfig)
+    });
 }
 
 describe('useTranslation', () => {
@@ -97,6 +113,10 @@ describe('useTranslation', () => {
             });
 
             const translationData = { nativeLanguage: 'it', podcastId: 0, translations: [] };
+            setOrgTranslationConfig({
+                createTranslation: { en: CreateTranslation.ALWAYS },
+                otherLanguage: CreateTranslation.NEVER,
+            });
 
             const result = await composable.getMostRelevantLanguage(translationData)
             expect(result.ready).toBe('it');
@@ -111,6 +131,10 @@ describe('useTranslation', () => {
             });
 
             const translationData = { nativeLanguage: 'fr', podcastId: 0, translations: [] };
+            setOrgTranslationConfig({
+                createTranslation: { en: CreateTranslation.ALWAYS },
+                otherLanguage: CreateTranslation.NEVER,
+            });
 
             const result = await composable.getMostRelevantLanguage(translationData)
             expect(result.ready).toBe('fr');

package/tests/components/form/ClassicButtonGroup.spec.ts

@@ -0,0 +1,52 @@
+import ClassicButtonGroup from '@/components/form/ClassicButtonGroup.vue';
+import { mount } from '@tests/utils';
+import { describe, expect, it } from 'vitest';
+
+const options = [
+    { label: 'Audio', value: 'PODCAST' },
+    { label: 'Video', value: 'VIDEO' },
+    { label: 'Live', value: 'LIVE' },
+];
+
+describe('ClassicButtonGroup', () => {
+    it('renders one button per option', async () => {
+        const wrapper = await mount(ClassicButtonGroup, {
+            props: { options, modelValue: ['PODCAST'] },
+        });
+        expect(wrapper.findAll('button')).toHaveLength(3);
+    });
+
+    it('applies active class to selected options only', async () => {
+        const wrapper = await mount(ClassicButtonGroup, {
+            props: { options, modelValue: ['PODCAST', 'LIVE'] },
+        });
+        const buttons = wrapper.findAll('button');
+        expect(buttons[0].classes()).toContain('active');
+        expect(buttons[1].classes()).not.toContain('active');
+        expect(buttons[2].classes()).toContain('active');
+    });
+
+    it('emits update:modelValue with added value when clicking inactive button', async () => {
+        const wrapper = await mount(ClassicButtonGroup, {
+            props: { options, modelValue: ['PODCAST'] },
+        });
+        await wrapper.findAll('button')[1].trigger('click');
+        expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['PODCAST', 'VIDEO']]);
+    });
+
+    it('emits update:modelValue without removed value when clicking active button (not last)', async () => {
+        const wrapper = await mount(ClassicButtonGroup, {
+            props: { options, modelValue: ['PODCAST', 'VIDEO'] },
+        });
+        await wrapper.findAll('button')[0].trigger('click');
+        expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['VIDEO']]);
+    });
+
+    it('does not emit when clicking the only active button', async () => {
+        const wrapper = await mount(ClassicButtonGroup, {
+            props: { options, modelValue: ['PODCAST'] },
+        });
+        await wrapper.findAll('button')[0].trigger('click');
+        expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+    });
+});

package/tests/components/form/ClassicInputText.spec.ts

@@ -0,0 +1,23 @@
+import '@tests/mocks/i18n';
+
+import ClassicInputText from '@/components/form/ClassicInputText.vue';
+import { mount } from '@tests/utils';
+import { describe, expect, it } from 'vitest';
+
+describe('ClassicInputText', () => {
+    describe('aria-required', () => {
+        it('sets aria-required to true when canBeNull is false (default)', async () => {
+            const wrapper = await mount(ClassicInputText, {
+                props: { canBeNull: false }
+            });
+            expect(wrapper.find('input').attributes('aria-required')).toBe('true');
+        });
+
+        it('sets aria-required to false when canBeNull is true', async () => {
+            const wrapper = await mount(ClassicInputText, {
+                props: { canBeNull: true }
+            });
+            expect(wrapper.find('input').attributes('aria-required')).toBe('false');
+        });
+    });
+});

package/tests/components/misc/ClassicAvatar.spec.ts

@@ -0,0 +1,68 @@
+import ClassicAvatar from '@/components/misc/ClassicAvatar.vue';
+import { mount } from '@tests/utils';
+import { describe, expect, it } from 'vitest';
+
+const IMAGE_URL = 'https://example.com/avatar.png';
+
+describe('ClassicAvatar', () => {
+    const mountAvatar = async (props: Record<string, unknown> = {}) =>
+        mount(ClassicAvatar, { props: { name: 'Spotify', ...props } });
+
+    describe('image rendering', () => {
+        it('renders an img with correct src when imageUrl is provided', async () => {
+            const wrapper = await mountAvatar({ imageUrl: IMAGE_URL });
+            expect(wrapper.find('img').exists()).toBe(true);
+            expect(wrapper.find('img').attributes('src')).toContain('example.com');
+        });
+
+        it('does not render an img without imageUrl', async () => {
+            const wrapper = await mountAvatar();
+            expect(wrapper.find('img').exists()).toBe(false);
+        });
+    });
+
+    describe('initial letter fallback', () => {
+        it('shows the first letter uppercased', async () => {
+            const wrapper = await mountAvatar({ name: 'spotify' });
+            expect(wrapper.text()).toBe('S');
+        });
+
+        it('shows ? when name is empty', async () => {
+            const wrapper = await mountAvatar({ name: '' });
+            expect(wrapper.text()).toBe('?');
+        });
+    });
+
+    describe('container style', () => {
+        it('applies size-based dimensions and font-size from size prop', async () => {
+            const wrapper = await mountAvatar({ size: 48 });
+            const style = (wrapper.element as HTMLElement).style;
+            expect(style.height).toBe('48px');
+            expect(style.width).toBe('48px');
+            expect(style.fontSize).toBe('24px');
+        });
+
+        it('defaults to 24px size and applies a background-color', async () => {
+            const wrapper = await mountAvatar();
+            const style = (wrapper.element as HTMLElement).style;
+            expect(style.height).toBe('24px');
+            expect(style.width).toBe('24px');
+            expect(style.fontSize).toBe('12px');
+            expect(style.backgroundColor).toBeTruthy();
+        });
+    });
+
+    describe('accessibility', () => {
+        it('is aria-hidden and has empty alt on img when decorative', async () => {
+            const wrapper = await mountAvatar({ imageUrl: IMAGE_URL });
+            expect(wrapper.attributes('aria-hidden')).toBe('true');
+            expect(wrapper.find('img').attributes('alt')).toBe('');
+        });
+
+        it('is not aria-hidden and uses name as alt on img when nonDecorative', async () => {
+            const wrapper = await mountAvatar({ imageUrl: IMAGE_URL, nonDecorative: true });
+            expect(wrapper.attributes('aria-hidden')).not.toBe('true');
+            expect(wrapper.find('img').attributes('alt')).toBe('Spotify');
+        });
+    });
+});

package/src/components/composable/useNotifications.ts

@@ -1,50 +0,0 @@
-import { ref } from "vue";
-
-type NotificationType = 'success'|'info'|'warning'|'error';
-
-/**
- * Type for notifications
- */
-interface Notification {
-    /** Optional title of the notification */
-    title?: string;
-    /** Message displayed by the notification */
-    message: string;
-    /** Type of notification, may affect display */
-    type: NotificationType;
-    /** When set to false, disallow manual closing of modal notification (default: true) */
-    closeable?: boolean;
-}
-
-/** The notification currently displayed */
-const notification = ref<Notification|null>(null);
-
-/**
- * Composable used to manage notifications
- */
-export const useNotifications = () => {
-    /**
-     * Add & display a notification
-     * @param newNotif The data of the new notification
-     */
-    function addNotification(newNotif: Notification): void {
-        notification.value = { ...newNotif };
-    }
-
-    /**
-     * Remove all notifications
-     */
-    function clearNotifications(): void {
-        notification.value = null;
-    }
-
-    return {
-        /** The currently active notification */
-        notification,
-        
-        /** Add a new notification to be displayed */
-        addNotification,
-        /** Remove all active notifications */
-        clearNotifications
-    }
-};

package/src/stores/class/rss/aggregator.ts

@@ -1,28 +0,0 @@
-export interface Aggregator {
-  aggregatorId: number;
-  createdBy: string;
-  image?: string;
-  matchers: Array<Matcher>;
-  name: string;
-}
-export interface Matcher {
-  ip?: string;
-  ipRange?: string;
-  matchDisplayname?: boolean;
-  matcherId?: number;
-  uaRegexp?: string;
-}
-export interface RuleRss {
-  ruleId: number;
-  aggregatorIds: Array<number>;
-  emissionId?: number;
-  organisationId?: string;
-  parameters: Array<ParamRss>;
-}
-export interface ParamRss {
-  forbid: boolean;
-  maxAge: string;
-  maxItem: number;
-  minAge: string;
-  parameterId: number;
-}