@saooti/octopus-sdk 41.0.21 → 41.1.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # CHANGELOG
 
+## 41.1.1 (01/12/2025)
+
+**Fixes**
+
+- Passage de `pinia` en *peerDependency*
+
+## 41.1.0 (01/12/2025)
+
+**Features**
+
+- Accélération `selectOrganisation`
+- Ajout d'options de personnalisation à `EmissionInlineList`
+- Ajout d'options de personnalisation à `EmissionPresentationItem`
+- Ajout des composants `PresentationLayout` & `PresentationItem`
+  - `PresentationLayout` permet de simplement disposer quelques éléments
+  - `PresentationItem` permet de simplement afficher une image avec description
+- Ajout de `PodcastPresentationList`, pendant podcast de `EmissionPresentationList`
+
+**Fixes**
+
+- Correction taille variable de `EmissionItem`
+
+**Misc**
+
+- Réécriture de `EmissionPresentationItem` & `EmissionPresentationList` pour
+  utiliser `PresentationItem` & `PresentationLayout`
+
 ## 41.0.21 (25/11/2025)
 
 **Fixes**

package/index.ts

@@ -68,7 +68,7 @@ export const getLiveList = () => import("./src/components/display/live/LiveList.
 export const getEmissionPresentationList = () => import("./src/components/display/emission/EmissionPresentationList.vue");
 export const getPodcastPlayButton = () => import("./src/components/display/podcasts/PodcastPlayButton.vue");
 export const getParticipantInlineList = () => import("./src/components/display/participant/ParticipantInlineList.vue");
-
+export const getPodcastPresentationList = () => import("./src/components/display/podcasts/PodcastPresentationList.vue");
 
 //Radio
 export const getRadioCurrently = () => import("./src/components/display/live/RadioCurrently.vue");
@@ -193,4 +193,4 @@ export {
     setupRouter,
     SelectOption,
     ROUTE_PARAMS
-};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.0.21",
+  "version": "41.1.1",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -36,7 +36,6 @@
     "globals": "^16.5.0",
     "hls.js": "^1.6.14",
     "humanize-duration": "^3.33.1",
-    "pinia": "^3.0.4",
     "postcss-html": "^1.8.0",
     "qrcode.vue": "^3.6.0",
     "sass": "^1.94.1",
@@ -88,5 +87,8 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/saooti/octopus-sdk.git"
+  },
+  "peerDependencies": {
+    "pinia": "^2.3.0"
   }
 }

package/src/components/composable/useOrganisationFilter.ts

@@ -18,8 +18,8 @@ export const useOrganisationFilter= ()=>{
  
   async function  selectOrganisation(organisationId: string): Promise<void> {
     try {
-      const response = await saveFetchStore.getOrgaData(organisationId);
-      const data = await classicApi.fetchData<Array<Rubriquage>>({
+      const getOrgaData = saveFetchStore.getOrgaData(organisationId);
+      const fetchData = classicApi.fetchData<Array<Rubriquage>>({
         api: 0,
         path:"rubriquage/find/" + organisationId,
         parameters:{
@@ -28,7 +28,10 @@ export const useOrganisationFilter= ()=>{
         },
         specialTreatement:true
       });
-      const isLive = await saveFetchStore.getOrgaLiveEnabled(organisationId);
+      const getOrgaLive = saveFetchStore.getOrgaLiveEnabled(organisationId);
+
+      const [response, data, isLive] = await Promise.all([getOrgaData, fetchData, getOrgaLive]);
+      
       filterStore.filterUpdateOrga({
         orgaId: organisationId,
         imgUrl: response.imageUrl,
@@ -62,4 +65,4 @@ export const useOrganisationFilter= ()=>{
     selectOrganisation,
     removeSelectedOrga
 	}
-}
+}

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column p-3 list-episode">
+  <div class="d-flex flex-column list-episode">
     <ClassicLoading
       :loading-text="loading ? t('Loading emissions ...') : undefined"
     />
@@ -9,7 +9,16 @@
       :list-object="allEmissions"
     >
       <template #octopusSlide="{ option }">
+        <EmissionPresentationItem
+          v-if="emissionDisplay === 'simple'"
+          :emission="option"
+          class="mx-2"
+          is-description
+          :is-vertical="emissionVertical"
+        />
+
         <EmissionPlayerItem
+          v-else
           class="flex-shrink-0 item-phone-margin"
           :emission="option"
           :class="[mainRubriquage(option)]"
@@ -19,6 +28,7 @@
       </template>
     </SwiperList>
     <router-link
+      v-if="href"
       :to="href"
       class="btn btn-primary align-self-center w-fit-content m-4"
     >
@@ -30,6 +40,7 @@
 <script setup lang="ts">
 import SwiperList from "../list/SwiperList.vue";
 import classicApi from "../../../api/classicApi";
+import EmissionPresentationItem from "./EmissionPresentationItem.vue";
 import EmissionPlayerItem from "./EmissionPlayerItem.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import {useErrorHandler} from "../../composable/useErrorHandler";
@@ -41,17 +52,31 @@ import { AxiosError } from "axios";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 import { useI18n } from "vue-i18n";
+import { RouteParams } from "vue-router";
 
 //Props 
-const props = defineProps({
-  organisationId: { default: undefined, type: String },
-    href: { default: undefined, type: String },
-    buttonText: { default: undefined, type: String },
-    rubriqueId: { default: undefined, type: Number },
-    rubriquageId: { default: undefined, type: Number },
-    nbPodcasts: { default: undefined, type: Number },
-    itemSize: { default: undefined, type: Number },
-})
+const props = defineProps<{
+  /**
+   * Change style of emission item.
+   * Simple is what is seen everywhere, player displays a few podcasts that can
+   * be played directly
+   */
+  emissionDisplay?: 'player'|'simple';
+  /** When set to true with the 'simple' emissionDisplay, display emissions vertically */
+  emissionVertical?: boolean;
+  href?: string|RouteParams;
+  buttonText?: string;
+  /** Number of podcasts shown when using player display */
+  nbPodcasts?: number;
+  /** Size, in **rem**, of the emission items */
+  itemSize?: number;
+  /** Filter on organization */
+  organisationId?: string;
+  /** Filter on rubrique */
+  rubriqueId?: number;
+  /** Filter on rubriquage */
+  rubriquageId?: number;
+}>();
 
 
 //Data 
@@ -106,6 +131,7 @@ async function fetchRubriques(): Promise<void> {
   });
   rubriques.value = data.rubriques;
 }
+
 function rubriquesId(emission: Emission): string | undefined {
   if (
     !displayRubriquage.value ||
@@ -113,8 +139,10 @@ function rubriquesId(emission: Emission): string | undefined {
     0 === emission.rubriqueIds.length ||
     !rubriques.value ||
     !rubriques.value.length
-  )
+  ) {
     return undefined;
+  }
+
   const rubrique = rubriques.value.find(
     (element: Rubrique) =>
       element.rubriqueId &&
@@ -125,6 +153,7 @@ function rubriquesId(emission: Emission): string | undefined {
     return rubrique.name;
   }
 }
+
 function mainRubriquage(emission: Emission): string {
   return state.emissionsPage.mainRubrique &&
     emission.rubriqueIds?.includes(state.emissionsPage.mainRubrique)

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

@@ -22,7 +22,7 @@
       </ClassicImageBanner>
 
       <div class="classic-element-text">
-        <div class="d-flex align-items-center element-name basic-line-clamp">
+        <div class="d-flex align-items-center element-name">
           <AlertIcon
             v-if="!activeEmission && !isPodcastmaker && editRight"
             :size="16"
@@ -130,4 +130,10 @@ async function hasPodcast(): Promise<void> {
     activeEmission.value = false;
   }
 }
-</script>
+</script>
+
+<style scoped lang="scss">
+article {
+  max-height: 254px;  // Image size + a few pixels for border
+}
+</style>

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

@@ -142,8 +142,6 @@ async function loadPodcasts(): Promise<void> {
 </script>
 
 <style lang="scss">
-
-
 .emission-player-container {
   list-style: none;
   background: var(--octopus-background);

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

@@ -1,129 +1,34 @@
+<!--
+  Component to display an emission with its description
+-->
 <template>
-  <article
-    class="classic-element-container emission-presentation-container mt-3"
-    :class="isVertical ? 'emission-vertical-item' : ''"
-  >
-    <router-link
-      :to="{
-        name: 'emission',
-        params: { emissionId: emission.emissionId },
-      }"
-      :title="t('Series name page', { name: emission.name })"
-      class="d-flex-column flex-grow-1 text-dark"
-      :class="isVertical ? 'flex-column' : ''"
-    >
-      <img
-        v-lazy="useProxyImageUrl(emission.imageUrl, tailleImage)"
-        :width="tailleImage"
-        :height="tailleImage"
-        :class="isVertical ? 'img-box-bigger' : ''"
-        class="img-box"
-        aria-hidden="true"
-        alt=""
-        
-        :title="t('Emission name image', { name: emission.name })"
-      />
-      <div class="classic-element-text">
-        <div class="element-name mb-2 basic-line-clamp">
-          {{ emission.name }}
-        </div>
-        <div
-          v-if="!isPhone && isDescription"
-          ref="descriptionEmissionContainer"
-          class="element-description htms-wysiwyg-content"
-        >
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            ref="descriptionEmission"
-            v-html="urlify(emission.description || '')"
-          />
-          <!-- eslint-enable -->
-        </div>
-      </div>
-    </router-link>
-  </article>
+  <PresentationItem
+    :name="emission.name"
+    :route="route"
+    :image-url="emission.imageUrl"
+    :description="isDescription ? emission.description : undefined"
+    :vertical="isVertical"
+  />
 </template>
 
 <script setup lang="ts">
-import {useResizePhone} from "../../composable/useResizePhone";
 import { Emission } from "@/stores/class/general/emission";
-import {useImageProxy} from "../../composable/useImageProxy";
-import displayHelper from "../../../helper/displayHelper";
-import { nextTick, useTemplateRef, watch, computed } from "vue";
-import { useI18n } from "vue-i18n";
+import PresentationItem from "../../layout/PresentationItem.vue";
+import { computed } from "vue";
+import { RouteLocationRaw } from "vue-router";
 
 //Props 
-const props = defineProps({
-  emission: { default: () => ({}), type: Object as () => Emission },
-  isVertical: { default: false, type: Boolean },
-  isDescription: { default: false, type: Boolean },
-})
-
-//Data
-const descriptionEmissionRef = useTemplateRef('descriptionEmission');
-const descriptionEmissionContainerRef = useTemplateRef('descriptionEmissionContainer');
-
-
-//Composables
-const { t } = useI18n();
-const { isPhone } = useResizePhone();
-const { useProxyImageUrl } = useImageProxy();
-
-// Computed
-// Calcul de la taille de l'image
-const tailleImage = computed(() => {
-  // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
-  return props.isVertical ? '396' : '250';
+const props = defineProps<{
+  /** The emission to display */
+  emission: Emission;
+  /** When true display the card vertically */
+  isVertical?: boolean;
+  /** When true also display the description */
+  isDescription?: boolean;
+}>();
+
+const route = computed((): RouteLocationRaw => {
+  return 'emissions';//{ name: 'emissions'/*, params: { emissionId: props.emission.emissionId }*/ };
 });
 
-//Watch
-watch(isPhone, async () => {
-  nextTick(() => {
-    if (!props.isDescription || isPhone.value) {
-      return;
-    }
-    const emissionDesc = descriptionEmissionRef?.value as HTMLElement;
-    const emissionDescContainer = descriptionEmissionContainerRef?.value as HTMLElement;
-    if (
-      emissionDesc &&
-      emissionDescContainer &&
-      emissionDesc.clientHeight > emissionDescContainer.clientHeight
-    ) {
-      emissionDescContainer.classList.add("after-element-description");
-    }
-  });
-}, {immediate: true});
-
-//Methods
-function urlify(text:string|undefined){
-  return displayHelper.urlify(text);
-}
 </script>
-<style lang="scss">
-.octopus-app {
-  .emission-presentation-container {
-    @media (width <= 960px) {
-      width: 250px !important;
-      margin-right: 0.5rem;
-    }
-
-    .element-description {
-      height: 0;
-      flex-grow: 1;
-      max-height: unset;
-    }
-  }
-
-  .classic-element-container.emission-vertical-item {
-    flex-grow: 0;
-    width: 400px;
-    flex-shrink: 0;
-  }
-
-  .img-box-bigger {
-    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
-    width: 396px;
-    height: 396px;
-  }
-}
-</style>

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

@@ -1,60 +1,24 @@
 <template>
-  <div class="d-flex flex-column p-3">
-    <h2 class="mb-3">{{ title }}</h2>
-    <ClassicLoading
-      :loading-text="loading ? t('Loading emissions ...') : undefined"
-      :error-text="error ? t(`Error`) : undefined"
-    />
-    <template v-if="!loading && !error">
-      <div class="d-flex flex-nowrap align-items-stretch overflow-phone-auto">
-        <EmissionItemPresentation
-          v-if="allEmissions[0]"
-          :class="!isPhone ? 'me-3' : ''"
-          :emission="allEmissions[0]"
-          :is-vertical="!isPhone"
-          :is-description="isDescription"
-        />
-        <div
-          v-if="allEmissions.length > 1"
-          class="emission-column emission-column-margin d-flex-row flex-nowrap"
-          :class="allEmissions.length <= 3 ? 'flex-grow-1' : ''"
-        >
-          <EmissionItemPresentation
-            v-if="allEmissions[1]"
-            :emission="allEmissions[1]"
-            :is-description="isDescription"
-          />
-          <EmissionItemPresentation
-            v-if="allEmissions[2]"
-            :emission="allEmissions[2]"
-            :is-description="isDescription"
-          />
-        </div>
-        <div
-          v-if="allEmissions.length > 3"
-          class="emission-column d-flex-row flex-nowrap show-emission-column"
-        >
-          <EmissionItemPresentation
-            v-if="allEmissions[3]"
-            :emission="allEmissions[3]"
-            :is-description="isDescription"
-          />
-          <EmissionItemPresentation
-            v-if="allEmissions[4]"
-            :emission="allEmissions[4]"
-            :is-description="isDescription"
-          />
-        </div>
-      </div>
-      <router-link
-        v-if="buttonText && href"
-        :to="href"
-        class="btn btn-primary align-self-center w-fit-content m-4"
-      >
-        {{ buttonText }}
-      </router-link>
+  <ClassicLoading
+    :loading-text="loading ? $t('Loading emissions ...') : undefined"
+    :error-text="error ? $t(`Error`) : undefined"
+  />
+  <PresentationLayout
+    v-if="!loading && !error"
+    :title="title"
+    :items="allEmissions"
+    :route="href"
+    :button-text="buttonText"
+  >
+    <template #item="{ item, first }">
+      <EmissionItemPresentation
+        :class="!isPhone && first ? 'me-3' : ''"
+        :emission="item"
+        :is-vertical="!isPhone && first"
+        :is-description="isDescription"
+      />
     </template>
-  </div>
+  </PresentationLayout>
 </template>
 
 <script setup lang="ts">
@@ -66,7 +30,9 @@ import { defineAsyncComponent, onMounted, Ref, ref } from "vue";
 import { AxiosError } from "axios";
 import {useResizePhone} from "../../composable/useResizePhone";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
-import { useI18n } from "vue-i18n";
+
+import PresentationLayout from "../../layout/PresentationLayout.vue"; 
+
 const EmissionItemPresentation = defineAsyncComponent(
   () => import("./EmissionPresentationItem.vue"),
 );
@@ -87,7 +53,6 @@ const error = ref(false);
 const allEmissions: Ref<Array<Emission>> = ref([]);
   
 //Composables
-const { t } = useI18n();
 const { isPhone } = useResizePhone();
 const {handle403} = useErrorHandler();
 
@@ -121,47 +86,3 @@ async function fetchNext(): Promise<void> {
   loading.value = false;
 }
 </script>
-<style lang="scss">
-.octopus-app {
-  .overflow-phone-auto {
-    @media (width <= 960px) {
-      overflow-y: auto;
-      scroll-snap-type: x mandatory;
-
-      .classic-element-container{
-        scroll-snap-align: center;
-      }
-    }
-  }
-
-  .emission-column {
-    flex-shrink: 0;
-    width: calc((100% - 420px) / 2);
-
-    @media (width <= 1550px) {
-      width: calc((100% - 420px));
-    }
-
-    @media (width <= 960px) {
-      width: auto;
-      flex-direction: row !important;
-    }
-  }
-
-  .emission-column-margin {
-    margin-right: 1rem;
-
-    @media (width <= 960px) {
-      margin-right: 0;
-    }
-  }
-
-  .show-emission-column {
-    display: flex;
-
-    @media (width <= 1550px) and (width > 960px) {
-      display: none;
-    }
-  }
-}
-</style>

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

@@ -41,6 +41,7 @@ import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
 //Props 
 const props = defineProps({
   listObject: { default: () => [], type: Array as () => Array<unknown> },
+  /** Size, in **rem**, of the emission items */
   sizeItemOverload: { default: undefined, type: Number },
 })
  

package/src/components/display/playlist/PodcastPlaylistInlineList.vue

@@ -2,7 +2,7 @@
   <PodcastInlineListTemplate
     v-if="loading || (!loading && 0 !== allPodcasts.length)"
     :display-arrow="false"
-    :button-text="t('See more')"
+    :button-text="noMoreButton ? undefined : t('See more')"
     :button-plus="true"
     :title="playlist?.title ?? ''"
     :href="'/main/pub/playlist/' + playlistId"
@@ -42,10 +42,13 @@ import { onMounted, Ref, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 //Props 
-const props = defineProps({
-  playlistId: { default: undefined, type: Number },
-  sizeItemOverload: { default: undefined, type: Number }
-})
+const props = defineProps<{
+  /** ID of the playlist to display */
+  playlistId: number;
+  sizeItemOverload?: number;
+  /** When set to true, disable display of "see more" button */
+  noMoreButton?: boolean;
+}>();
 
 //Data 
 const loading = ref(true);

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

@@ -24,7 +24,7 @@
           :title="playingPodcast? t('Pause') : t('Play')"
           @mouseenter="hoverType = 'audio'"
           @mouseleave="hoverType = ''" 
-          @click="play(false)"
+          @click.prevent="play(false)"
         >
           <PlayIcon
             v-if="!playingPodcast || (playingPodcast && playerStore.playerVideo)"
@@ -43,7 +43,7 @@
           v-if="isVideoPodcast"
           :title="t('Video')" 
           :disabled="playerStore.playerVideo"
-          @click="play(true)"
+          @click.prevent="play(true)"
           @mouseenter="hoverType = 'video'"
           @mouseleave="hoverType = ''"
         >

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

@@ -0,0 +1,127 @@
+<!--
+  Simple component to display a few podcasts
+-->
+<template>
+  <PresentationLayout
+    v-if="!loading && !error"
+    :title="title"
+    :items="podcasts"
+    :route="href"
+    :button-text="buttonText"
+  >
+    <template #item="{ item, first }">
+      <PresentationItem
+        :class="!isPhone && first ? 'me-3' : ''"
+        :name="item.title"
+        :route="route(item)"
+        :image-url="item.imageUrl"
+        :description="item.description"
+        :vertical="!isPhone && first"
+      >
+        <template #after-image>
+          <PodcastPlayButton
+            :podcast="item"
+            :hide-play="false"
+            :show-processing="false"
+          />
+        </template>
+      </PresentationItem>
+    </template>
+  </PresentationLayout>
+  <ClassicLoading
+    v-else
+    :loading-text="loading ? $t('Loading emissions ...') : undefined"
+    :error-text="error ? $t(`Error`) : undefined"
+  />
+</template>
+
+<script setup lang="ts">
+import classicApi from "../../../api/classicApi";
+import {useErrorHandler} from "../../composable/useErrorHandler";
+import ClassicLoading from "../../form/ClassicLoading.vue";
+import { Emission } from "@/stores/class/general/emission";
+import { onMounted, Ref, ref } from "vue";
+import { AxiosError } from "axios";
+import {useResizePhone} from "../../composable/useResizePhone";
+import { ListClassicReturn } from "@/stores/class/general/listReturn";
+
+import PresentationLayout from "../../layout/PresentationLayout.vue"; 
+import { Podcast } from "@/stores/class/general/podcast";
+import { ModuleApi } from "../../../api/apiConnection";
+
+import PresentationItem from "../../layout/PresentationItem.vue"; 
+import PodcastPlayButton from "./PodcastPlayButton.vue"; 
+import { RouteLocationRaw } from "vue-router";
+
+//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> },
+})
+
+//Data 
+const loading = ref(true);
+const error = ref(false);
+const podcasts: Ref<Array<Podcast>> = ref([]);
+  
+//Composables
+const { isPhone } = useResizePhone();
+const {handle403} = useErrorHandler();
+
+onMounted(()=>fetchNext())
+
+//Methods
+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,
+    });
+
+    // Retrieve the podcasts for these emissions
+    const data = await classicApi.fetchData<ListClassicReturn<Podcast>>({
+      api: ModuleApi.DEFAULT,
+      path: "podcast/search",
+      parameters: {
+        first: 0,
+        size: 5,
+        organisationId: props.organisationId,
+        emissionId: emissions.result.map(e => e.emissionId),
+        sort: "DATE",
+        rubriqueId: props.rubriquesId
+      },
+      specialTreatement: true
+    });
+    
+    podcasts.value = podcasts.value.concat(
+      data.result.filter((em: Podcast | null) => null !== em),
+    );
+    loading.value = false;
+  } catch (errorWs) {
+    handle403(errorWs as AxiosError);
+    error.value = true;
+  }
+  loading.value = false;
+}
+
+function route(podcast: Podcast): RouteLocationRaw {
+  return {
+    name: 'podcast',
+    params: { podcastId: podcast.podcastId }
+  }
+}
+</script>

package/src/components/layout/PresentationItem.vue

@@ -0,0 +1,148 @@
+<!--
+  Component to display an element with its description
+-->
+<template>
+  <article
+    class="classic-element-container item-presentation-container mt-3"
+    :class="vertical ? 'vertical-item' : ''"
+  >
+    <router-link
+      :to="route"
+      class="d-flex-column flex-grow-1 text-dark"
+      :class="vertical ? 'flex-column' : ''"
+    >
+      <div
+        class="img-box"
+        :class="vertical ? 'img-box-bigger' : ''"
+      >
+        <img
+          v-lazy="useProxyImageUrl(imageUrl, tailleImage)"
+          :width="tailleImage"
+          :height="tailleImage"
+          aria-hidden="true"
+          :alt="name"
+          :title="name"
+        >
+
+        <slot name="after-image" />
+      </div>
+      
+      <div class="classic-element-text">
+        <div class="element-name mb-2 basic-line-clamp">
+          {{ name }}
+        </div>
+        <div
+          v-if="!isPhone && description"
+          ref="descriptionItemContainer"
+          class="element-description htms-wysiwyg-content"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            ref="descriptionItem"
+            v-html="urlify(description || '')"
+          />
+          <!-- eslint-enable -->
+        </div>
+      </div>
+    </router-link>
+  </article>
+</template>
+
+<script setup lang="ts">
+import {useResizePhone} from "../composable/useResizePhone";
+import {useImageProxy} from "../composable/useImageProxy";
+import displayHelper from "../../helper/displayHelper";
+import { nextTick, useTemplateRef, watch, computed } from "vue";
+import { RouteLocationRaw } from "vue-router";
+
+//Props 
+const props = defineProps<{
+  /** The route to which to redirect when clicking on element */
+  route: RouteLocationRaw|string;
+  /** The URL to the image */
+  imageUrl: string;
+  /** The name of the element */
+  name: string;
+  /** The description of the element */
+  description?: string;
+  /** When true display the card vertically */
+  vertical?: boolean;
+}>();
+
+//Data
+const descriptionItemRef = useTemplateRef('descriptionItem');
+const descriptionItemContainerRef = useTemplateRef('descriptionItemContainer');
+
+
+//Composables
+const { isPhone } = useResizePhone();
+const { useProxyImageUrl } = useImageProxy();
+
+// Computed
+// Calcul de la taille de l'image
+const tailleImage = computed(() => {
+  // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
+  return props.vertical ? '396' : '250';
+});
+
+//Watch
+watch(isPhone, async () => {
+  nextTick(() => {
+    if (!props.description || isPhone.value) {
+      return;
+    }
+    const itemDesc = descriptionItemRef?.value as HTMLElement;
+    const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;
+    if (
+      itemDesc &&
+      itemDescContainer &&
+      itemDesc.clientHeight > itemDescContainer.clientHeight
+    ) {
+      itemDescContainer.classList.add("after-element-description");
+    }
+  });
+}, { immediate: true });
+function urlify(text:string|undefined){
+  return displayHelper.urlify(text);
+}
+</script>
+
+<style lang="scss">
+.octopus-app {
+  .item-presentation-container {
+    @media (width <= 960px) {
+      width: 250px !important;
+      margin-right: 0.5rem;
+    }
+
+    .element-description {
+      height: 0;
+      flex-grow: 1;
+      max-height: unset;
+
+      p:first-child {
+        // Prevent unecessary space before first paragraph
+        margin-top: 0 !important;
+      }
+    }
+  }
+
+  .classic-element-container.vertical-item {
+    flex-grow: 0;
+    width: 400px;
+    flex-shrink: 0;
+  }
+
+  .img-box {
+    // Make it relative so that absolute elements associated with the image
+    // are positioned within the image box
+    position: relative;
+  }
+
+  .img-box-bigger {
+    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
+    width: 396px;
+    height: 396px;
+  }
+}
+</style>

package/src/components/layout/PresentationLayout.vue

@@ -0,0 +1,132 @@
+<!--
+  A simple layout to display 5 elements over 3 columns
+-->
+<template>
+  <div class="d-flex flex-column p-3">
+    <h2
+      v-if="title"
+      class="mb-3"
+    >
+      {{ title }}
+    </h2>
+    
+    <div class="d-flex flex-nowrap align-items-stretch overflow-phone-auto">
+      <!-- First column & first item -->
+      <slot
+        v-if="items[0]"
+        name="first" :item="items[0]"
+      >
+        <slot name="item" :item="items[0]" :first="true" />
+      </slot>
+
+      <!-- Second column & second/third items -->
+      <div
+        v-if="items.length > 1"
+        class="column column-margin d-flex-row flex-nowrap"
+        :class="items.length <= 3 ? 'flex-grow-1' : ''"
+      >
+        <slot
+          v-if="items[1]"
+          name="item"
+          :item="items[1]"
+          :first="false"
+        />
+        <slot
+          v-if="items[2]"
+          name="item"
+          :item="items[2]"
+          :first="false"
+        />
+      </div>
+
+      <!-- Third column & fourth/fifth items -->
+      <div
+        v-if="items.length > 3"
+        class="column d-flex-row flex-nowrap show-column"
+      >
+        <slot
+          v-if="items[3]"
+          name="item"
+          :item="items[3]"
+          :first="false"
+        />
+        <slot
+          v-if="items[4]"
+          name="item"
+          :item="items[4]"
+          :first="false"
+        />
+      </div>
+    </div>
+
+    <!-- Redirection button -->
+    <router-link
+      v-if="route"
+      :to="route"
+      class="btn btn-primary align-self-center w-fit-content m-4"
+    >
+      {{ buttonText || $t('See more') }}
+    </router-link>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { RouteParams } from 'vue-router';
+
+//Props 
+defineProps<{
+  /** The items to display */
+  items: Array<T>;
+  /** The title to display at the top of the layout */
+  title?: string;
+  /** If defined, the route to which the 'See more' button will redirect to */
+  route?: RouteParams|string;
+  /** The label on the 'See more' button */
+  buttonText?: string;
+}>();
+</script>
+
+<style lang="scss">
+.octopus-app {
+  .overflow-phone-auto {
+    @media (width <= 960px) {
+      overflow-y: auto;
+      scroll-snap-type: x mandatory;
+
+      .classic-element-container{
+        scroll-snap-align: center;
+      }
+    }
+  }
+
+  .column {
+    flex-shrink: 0;
+    width: calc((100% - 420px) / 2);
+
+    @media (width <= 1550px) {
+      width: calc((100% - 420px));
+    }
+
+    @media (width <= 960px) {
+      width: auto;
+      flex-direction: row !important;
+    }
+  }
+
+  .column-margin {
+    margin-right: 1rem;
+
+    @media (width <= 960px) {
+      margin-right: 0;
+    }
+  }
+
+  .show-column {
+    display: flex;
+
+    @media (width <= 1550px) and (width > 960px) {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/pages/HomePage.vue

@@ -18,6 +18,7 @@
         </template>
       </ClassicLazy>
     </template>
+    
     <template v-else>
       <ClassicLazy
         v-for="(r, index) in rubriqueToShow"

package/src/stores/class/general/podcast.ts

@@ -3,6 +3,7 @@ import { Organisation } from "./organisation";
 import { Participant } from "./participant";
 import { Person } from "../user/person";
 import { Video } from "./video";
+
 export interface Podcast {
   imageUrl?: string;
   animators?: Array<Participant>;