@saooti/octopus-sdk 41.12.1-beta2 → 41.12.1-beta3

package/CHANGELOG.md

@@ -12,10 +12,16 @@
 
 - Correction d'une anomalie de chargement du style de la modale utilisée par
   `ClassicNotifications`
+- Ajout mode alternatif pour la récupération des épisodes dans
+  `PodcastPresentationList`
+- Affichage des infos additionelles dans PresentationItem même sans description
 
 **Misc**
 
 - Suppression de la marge entre le titre et le contenu pour `PresentationLayout`
+- Uniformisation espacement pour composants PM
+- Mise à jour règles eslint
+- Ajustement couleurs pour boutons secondaires
 
 ## 41.12.0 (13/07/2026)
 

package/eslint-config.mjs

@@ -45,6 +45,9 @@ export default typescriptEslint.config(
       // Number of attributes per line (increase because sometimes two is not a lot)
       "vue/max-attributes-per-line": ['warn', { singleline: 2 } ],
 
+      // Disable default values required for props
+      "vue/require-default-prop": ['off'],
+
       "@typescript-eslint/no-unused-vars": "warn"
     }
   }

package/package.json

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

package/src/api/podcastApi.ts

@@ -1,6 +1,5 @@
 import { Podcast, PodcastProcessingStatus, PodcastType, SimplifiedPodcast } from '../stores/class/general/podcast';
 import { ListClassicReturn } from '../stores/class/general/listReturn';
-import { useAuthStore } from '../stores/AuthStore';
 import classicApi from './classicApi';
 import { ModuleApi } from './apiConnection';
 import { unique } from '../helper/arrayHelper';

package/src/components/display/emission/EmissionInlineList.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="d-flex flex-column list-episode">
+    <h2 v-if="title" class="mb-0">
+      {{ title }}
+    </h2>
     <ClassicLoading
       :loading-text="loading ? t('Loading emissions ...') : undefined"
     />
     <SwiperList
       v-if="(displayRubriquage && rubriques) || !(displayRubriquage && loaded)"
-      :size-item-overload="itemSize"
+      :size-item-overload="sizeItemOverload"
       :list-object="allEmissions"
     >
       <template #octopusSlide="{ option }">
         <EmissionPresentationItem
           v-if="emissionDisplay === 'simple'"
           :emission="option"
-          class="mx-2 inline-list-element"
+          class="inline-list-element"
           is-description
           :is-vertical="emissionVertical"
         />
@@ -76,6 +79,8 @@ const props = defineProps<{
   rubriqueId?: number;
   /** Filter on rubriquage */
   rubriquageId?: number;
+  /** Title of the section */
+  title?: string;
 }>();
 
 
@@ -93,6 +98,16 @@ const {handle403} = useErrorHandler();
 //Computed
 const displayRubriquage = computed(() => state.emissionsPage.rubriquage);
  
+const sizeItemOverload = computed(() => {
+  if (props.itemSize) {
+    return props.itemSize;
+  } else if (props.emissionDisplay === 'simple') {
+    return 25;
+  } else {
+    return undefined;
+  }
+})
+
 onMounted(()=>{
   fetchNext();
   if (displayRubriquage.value) {

package/src/components/display/list/PaginateSection.vue

@@ -7,7 +7,7 @@
       <button
         v-for="paginateButton in buttonsLeft"
         :key="paginateButton.title"
-        class="btn"
+        class="btn btn-paginate"
         :title="paginateButton.title"
         :disabled="paginateButton.disabled"
         @click="paginateButton.action"
@@ -23,10 +23,10 @@
         </svg>
       </button>
       <template v-for="pageNumber in pagination" :key="pageNumber">
-        <span v-if="null === pageNumber" class="btn btn-min-width"> ... </span>
+        <span v-if="null === pageNumber" class="btn btn-min-width btn-paginate"> ... </span>
         <button
           v-else
-          class="btn btn-min-width"
+          class="btn btn-min-width btn-paginate"
           :class="{ active: page === pageNumber - 1 }"
           @click="changeFirst((pageNumber - 1) * rowsPerPage)"
         >
@@ -36,7 +36,7 @@
       <button
         v-for="paginateButton in buttonsRight"
         :key="paginateButton.title"
-        class="btn btn-min-width"
+        class="btn btn-min-width btn-paginate"
         :title="paginateButton.title"
         :disabled="paginateButton.disabled"
         @click="paginateButton.action"
@@ -176,6 +176,7 @@ function changeFirst(newFirst: number) {
   emit("update:first", newFirst);
 }
 </script>
+
 <style lang="scss">
 
 .octopus-app {
@@ -189,15 +190,18 @@ function changeFirst(newFirst: number) {
     padding: 0.5rem 0;
     z-index: 10;
 
-    .btn {
+    .btn.btn-paginate {
       border-radius: 0;
+      color: var(--octopus-btn-paginate-fg);
+      background: var(--octopus-btn-paginate-bg);
 
       &.active {
-        background: var(--octopus-primary-more-transparent);
+        color: var(--octopus-btn-paginate-active-fg);
+        background: var(--octopus-btn-paginate-active-bg);
       }
     }
   }
-  
+
   .module-box .paginate-fixed,
   .octopus-modal .paginate-fixed,
   .octopus-accordion .paginate-fixed {

package/src/components/display/list/SwiperList.vue

@@ -4,7 +4,7 @@
       <swiper
         :key="manualReload"
         :slides-per-view="numberItem"
-        :space-between="0"
+        :space-between="gapPx"
         :loop="loop"
         :slides-offset-before="offsetSwiper"
         :slides-offset-after="offsetSwiper"
@@ -47,7 +47,8 @@ const props = defineProps({
   sizeItemOverload: { default: undefined, type: Number },
 })
  
-//Data 
+//Data
+const gapPx = 10;
 const manualReload = ref(0);
 const numberItem = ref(5);
 const offsetSwiper = ref(0);
@@ -73,7 +74,10 @@ const sizeItem = computed(() => {
     ? state.generalParameters.podcastItem
     : 13.5;
 });
-const itemRecalculizedSize = computed(() => widthSwiperUsable.value / numberItem.value);
+const itemRecalculizedSize = computed(() => {
+  const totalGap = gapPx * Math.max(numberItem.value - 1, 0);
+  return (widthSwiperUsable.value - totalGap) / numberItem.value;
+});
 
 /** Indicates that the swiper should loop */
 const loop = computed((): boolean => {
@@ -119,10 +123,10 @@ function onWindowResize(){
   const el = rootRef?.value as HTMLElement;
   if (!el) return;
   widthSwiperUsable.value =el.offsetWidth - offsetSwiper.value * 2;
-  const sixteen = domHelper.convertRemToPixels(sizeItem.value + 0.5);
+  const itemSizePx = domHelper.convertRemToPixels(sizeItem.value + 0.5);
   numberItem.value = Math.max(
     1,
-    Math.floor(widthSwiperUsable.value / sixteen),
+    Math.floor((widthSwiperUsable.value + gapPx) / (itemSizePx + gapPx)),
   );
   itemSizeWithoutRecalculed.value =el.offsetWidth / numberItem.value;
 }
@@ -153,7 +157,7 @@ function slideChange() {
   );
   wrapper.style.transform =
     "translate3d(" +
-    (nbTransformItems * itemRecalculizedSize.value + offsetSwiper.value) +
+    (nbTransformItems * (itemRecalculizedSize.value + gapPx) + offsetSwiper.value) +
     "px, 0px, 0px)";
 }
 </script>

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

@@ -81,6 +81,7 @@ const props = withDefaults(defineProps<{
   before?: string;
   after?: string;
   includeHidden?: boolean;
+  /** Enable the display of number of items in ListPaginate */
   showCount?: boolean;
   displaySortText?: boolean;
   /** Criteria to sort on */

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

@@ -57,14 +57,34 @@ import { podcastApi, PodcastSort } from "../../../api/podcastApi";
 import { usePresentationItem } from "../../composable/usePresentationItem";
 
 //Props 
-const props = defineProps({
-    organisationId: { default: undefined, type: String },
-    title: { default: "", type: String },
-    href: { default: undefined, type: String },
-    buttonText: { default: undefined, type: String },
-    isDescription: { default: false, type: Boolean },
-    rubriquesId: { default: [], type: Array<number> },
-})
+const props = withDefaults(defineProps<{
+    /**
+     * ID of the organisation
+     */
+    organisationId?: string;
+    /**
+     * Title of the section
+     */
+    title?: string;
+    /**
+     * Link to the "more" section
+     */
+    href?: string;
+    /**
+     * Label for the "more" button
+     */
+    buttonText?: string;
+    /**
+     * Display podcasts exclusively from these rubriques
+     */
+    rubriquesId?: Array<number>;
+    /**
+     * Mode of retrieval for podcasts
+     */
+    retrievalMode?: 'by-emission'|'any';
+}>(), {
+    retrievalMode: 'by-emission'
+});
 
 //Data 
 const loading = ref(true);
@@ -92,47 +112,16 @@ watch(podcasts, async () => {
 async function fetchNext(): Promise<void> {
     loading.value = true;
     try {
-        // Retrieve latest emissions
-        const emissions = await classicApi.fetchData<ListClassicReturn<Emission>>({
-            api: 0,
-            path: "emission/search",
-            parameters: {
-                first: 0,
-                size: 5,
-                organisationId: props.organisationId,
-                sort: "LAST_PODCAST_DESC",
-                rubriqueId: props.rubriquesId
-            },
-            specialTreatement: true,
-        });
-
-        const promises: Array<Promise<SimplifiedPodcast>> = [];
-
-        for (let i = 0; i < emissions.result.length; i++) {
-            promises.push(podcastApi.search({
-                first: 0,
-                size: 1,
-                organisationId: [props.organisationId],
-                emissionId: [emissions.result[i].emissionId],
-                sort: PodcastSort.DATE,
-                rubriqueId: props.rubriquesId
-            }).then(r => r.result[0]));
+        let func: () => Promise<Array<Podcast>>;
+        if (props.retrievalMode === 'any') {
+            func = fetchPodcasts;
+        } else {
+            func = fetchPodcastsByEmission;
         }
-
-        // Retrieve the podcasts for these emissions
-        const data = await Promise.all(promises);
-
-        podcasts.value = podcasts.value.concat(
-            data.filter((em: SimplifiedPodcast | null) => null !== em && undefined !== em).map(p => {
-                // Get emission from podcast
-                const emission = emissions.result.find(e => e.emissionId === p.emissionId);
-                // Create full podcast from simplified + emission
-                return simplifiedToFull(p, emission.orga, emission);
-            })
-        );
+        const result = await func();
 
         // Sort podcasts by pub date so that the most recent one is focused
-        podcasts.value.sort((p1, p2) => {
+        podcasts.value = result.sort((p1, p2) => {
             return new Date(p2.pubDate).getTime() - new Date(p1.pubDate).getTime();
         });
     
@@ -145,6 +134,57 @@ async function fetchNext(): Promise<void> {
     loading.value = false;
 }
 
+async function fetchPodcasts(): Promise<Array<Podcast>> {
+    const response = await podcastApi.searchFull({
+        first: 0,
+        size: 5,
+        organisationId: [props.organisationId],
+        sort: PodcastSort.DATE,
+        rubriqueId: props.rubriquesId
+    }, true);
+
+    return response.result;
+}
+
+async function fetchPodcastsByEmission(): Promise<Array<Podcast>> {
+    // Retrieve latest emissions
+    const emissions = await classicApi.fetchData<ListClassicReturn<Emission>>({
+        api: 0,
+        path: "emission/search",
+        parameters: {
+            first: 0,
+            size: 5,
+            organisationId: props.organisationId,
+            sort: "LAST_PODCAST_DESC",
+            rubriqueId: props.rubriquesId
+        },
+        specialTreatement: true
+    });
+
+    const promises: Array<Promise<SimplifiedPodcast>> = [];
+
+    for (let i = 0; i < emissions.result.length; i++) {
+        promises.push(podcastApi.search({
+            first: 0,
+            size: 1,
+            organisationId: [props.organisationId],
+            emissionId: [emissions.result[i].emissionId],
+            sort: PodcastSort.DATE,
+            rubriqueId: props.rubriquesId
+        }, true).then(r => r.result[0]));
+    }
+
+    // Retrieve the podcasts for these emissions
+    const data = await Promise.all(promises);
+
+    return data.filter((em: SimplifiedPodcast | null) => null !== em && undefined !== em).map(p => {
+        // Get emission from podcast
+        const emission = emissions.result.find(e => e.emissionId === p.emissionId);
+        // Create full podcast from simplified + emission
+        return simplifiedToFull(p, emission.orga, emission);
+    });
+}
+
 function route(podcast: Podcast): RouteLocationRaw {
     return {
         name: 'podcast',

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

@@ -215,7 +215,6 @@ defineExpose({ reset });
     position: relative;
     border-radius: var(--octopus-border-radius);
     overflow: hidden;
-    background: var(--octopus-secondary);
     transition: all 0.2s linear 0s;
     
     &.open{

package/src/components/layouts/PresentationItem.vue

@@ -44,7 +44,7 @@
                     {{ name }}
                 </div>
                 <div
-                    v-if="!isPhone && description"
+                    v-if="!isPhone && (description || additionalInfo)"
                     ref="descriptionItemContainer"
                     class="element-description htms-wysiwyg-content mt-0"
                 >
@@ -59,6 +59,7 @@
                     </div>
                     <!-- eslint-disable vue/no-v-html -->
                     <div
+                        v-if="description"
                         ref="descriptionItem"
                         v-html="urlify(description || '')"
                     />

package/src/components/layouts/PresentationLayout.vue

@@ -2,7 +2,7 @@
   A simple layout to display 5 elements over 3 columns
 -->
 <template>
-  <div class="d-flex flex-column p-3">
+  <div class="d-flex flex-column py-3">
     <h2 v-if="title">
       {{ title }}
     </h2>
@@ -98,10 +98,10 @@ defineProps<{
 
   .column {
     flex-shrink: 0;
-    width: calc((100% - 420px) / 2);
+    width: calc((100% - 420px - 1rem) / 2);
 
     @media (width <= 1550px) {
-      width: calc((100% - 420px));
+      width: calc((100% - 420px - 1rem));
     }
 
     @media (width <= 960px) {

package/src/style/_variables.scss

@@ -46,11 +46,17 @@
     // Buttons
     --octopus-btn-primary-bg: var(--octopus-primary);
     --octopus-btn-primary-fg: var(--octopus-color-on-primary);
+    --octopus-btn-secondary-bg: var(--octopus-secondary);
+    --octopus-btn-secondary-fg: black;
     --octopus-btn-play-bg: var(--octopus-primary-less-transparent);
     --octopus-btn-play-fg: white;
     --octopus-btn-play-radius: var(--octopus-border-radius);
     --octopus-btn-social-bg: var(--octopus-secondary);
     --octopus-btn-social-fg: var(--octopus-primary);
+    --octopus-btn-paginate-fg: var(--octopus-btn-secondary-fg);
+    --octopus-btn-paginate-bg: var(--octopus-btn-secondary-bg);
+    --octopus-btn-paginate-active-fg: var(--octopus-btn-paginate-fg);
+    --octopus-btn-paginate-active-bg: var(--octopus-primary-more-transparent);
 
     // Player
     // Color for the transcript background

package/src/style/bootstrap.scss

@@ -88,7 +88,8 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 		font-size:.7rem;
 		border-radius: var(--octopus-border-radius);
-		background: var(--octopus-secondary); 
+		color: var(--octopus-btn-secondary-fg);
+		background: var(--octopus-btn-secondary-bg);
 		text-decoration: none !important;
 		white-space: nowrap;
 		border-width: 0;

package/tests/components/layouts/PresentationItem.spec.ts

@@ -28,9 +28,9 @@ describe('PresentationItem', () => {
             expect(wrapper.find('.text-secondary').exists()).toBe(false);
         });
 
-        it('does not render additionalInfo when there is no description', async () => {
+        it('renders each additionalInfo even when there is no description', async () => {
             const wrapper = await mount({ additionalInfo: ['Saooti'] });
-            expect(wrapper.find('.text-secondary').exists()).toBe(false);
+            expect(wrapper.find('.text-secondary').exists()).toBe(true);
         });
     });
 });