@saooti/octopus-sdk 30.0.86 → 30.0.89

package/README.md

@@ -582,4 +582,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.83 Locales parlement
  * 30.0.84 Une émission non visible n'apparaît pas dans la page émission
  * 30.0.85 PB en cliquant sur le bouton "tous les épisodes de l'organisation" dans la page d'un épisode
- * 30.0.86 Podcastmaker newest
+ * 30.0.86 Podcastmaker newest
+ * 30.0.87 Podcastmaker newest (swiper list)
+ * 30.0.88 Podcastmaker newest (swiper list)
+ * 30.0.89 Podcastmaker newest (swiper list)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.86",
+  "version": "30.0.89",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -31,6 +31,7 @@
     "qrcode.vue": "^3.3.3",
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
+    "swiper": "^8.1.5",
     "v-calendar": "3.0.0-alpha.6",
     "vue": "^3.2.21",
     "vue-i18n": "^9.2.0-beta.17",

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

@@ -233,6 +233,9 @@ export default defineComponent({
           'PENDING' === this.fetchConference.status)
       );
     },
+    clickPlayGoPage():boolean{
+      return (state.podcastPage.clickPlayGoPage as boolean);
+    },
   },
   watch: {
     arrowDirection(): void {
@@ -261,16 +264,19 @@ export default defineComponent({
       }
       if (!this.recordingLive) {
         this.$store.commit('playerPlayPodcast', this.podcast);
-        return;
+      }else{
+        this.$store.commit('playerPlayPodcast', {
+          title: this.podcast.title,
+          audioUrl: this.podcast.audioUrl,
+          duration: this.podcast.duration,
+          conferenceId: this.fetchConference ? this.fetchConference.conferenceId : undefined,
+          livePodcastId: this.podcast.podcastId,
+          organisation: this.podcast.organisation,
+        });
+      }
+      if(this.clickPlayGoPage){
+        this.$router.push('/main/pub/podcast/'+this.podcast.podcastId);
       }
-      this.$store.commit('playerPlayPodcast', {
-        title: this.podcast.title,
-        audioUrl: this.podcast.audioUrl,
-        duration: this.podcast.duration,
-        conferenceId: this.fetchConference ? this.fetchConference.conferenceId : undefined,
-        livePodcastId: this.podcast.podcastId,
-        organisation: this.podcast.organisation,
-      });
     },
     showDescription(): void {
       if (this.isDescription) {

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

@@ -1,102 +1,51 @@
 <template>
-  <div
-    v-if="loading || (!loading && 0 !== allPodcasts.length)"
-    class="d-flex flex-column p-3"
-  >
-    <h2>{{ title }}</h2>
-    <div class="d-flex justify-content-between">
-      <div class="d-flex">
-        <button
-          class="btn btn-underline"
-          :class="{ active: !popularSort }"
-          @click="sortChrono()"
-        >
-          {{ $t('Last added') }}
-        </button>
-        <button
-          class="btn btn-underline"
-          :class="{ active: popularSort }"
-          @click="sortPopular()"
-        >
-          {{ $t('Most popular') }}
-        </button>
-      </div>
-      <div
-        v-if="!isArrow && !overflowScroll"
-        class="hide-phone"
-      >
-        <button
-          class="btn admin-button m-1"
-          :class="{ disabled: !previousAvailable }"
-          :title="$t('Display previous')"
-          @click="displayPrevious()"
-        >
-          <div class="saooti-left fw-bold" />
-        </button>
-        <button
-          class="btn admin-button m-1"
-          :class="{ disabled: !nextAvailable }"
-          :title="$t('Display next')"
-          @click="displayNext()"
-        >
-          <div class="saooti-right fw-bold" />
-        </button>
-      </div>
-    </div>
-    <ClassicLoading
-      :loading-text="loading?$t('Loading podcasts ...'):undefined"
-    />
-    <transition-group
-      v-show="loaded"
-      :name="transitionName"
-      class="element-list-inline"
-      tag="ul"
-      :class="[
-        alignLeft ? 'justify-content-start' : '',
-        overflowScroll ? 'overflowScroll' : '',
-      ]"
-      :css="isInlineAnimation"
-    >
-      <PodcastItem
-        v-for="p in podcasts"
-        :key="p.podcastId"
-        class="flex-shrink-0 item-phone-margin"
-        :podcast="p"
-        :class="[alignLeft ? 'me-3' : '']"
-      />
-    </transition-group>
-    <router-link
-      class="btn btn-link align-self-center width-fit-content m-4"
-      :to="refTo"
-      @click="handleSeeMoreButton"
-    >
-      {{ buttonText }}
-      <div
-        v-if="buttonPlus"
-        class="ms-1 saooti-more"
-      />
-    </router-link>
-  </div>
+  <PodcastInlineListClassic
+    v-if="listTypeClassic"
+    :organisation-id="organisationId"
+    :emission-id="emissionId"
+    :iab-id="iabId"
+    :title="title"
+    :href="href"
+    :button-text="buttonText"
+    :is-arrow="isArrow"
+    :require-popular-sort="requirePopularSort"
+    :button-plus="buttonPlus"
+    :rubrique-id="rubriqueId"
+    :rubriquage-id="rubriquageId"
+    :no-rubriquage-id="noRubriquageId"
+    :query="query"
+    @update:isArrow="$emit('update:isArrow',$event)"
+  />
+  <PodcastSwiperList
+    v-else
+    :organisation-id="organisationId"
+    :emission-id="emissionId"
+    :iab-id="iabId"
+    :title="title"
+    :href="href"
+    :button-text="buttonText"
+    :is-arrow="isArrow"
+    :require-popular-sort="requirePopularSort"
+    :button-plus="buttonPlus"
+    :rubrique-id="rubriqueId"
+    :rubriquage-id="rubriquageId"
+    :no-rubriquage-id="noRubriquageId"
+    :query="query"
+    @update:isArrow="$emit('update:isArrow',$event)"
+  />
 </template>
 
 <script lang="ts">
-import octopusApi from '@saooti/octopus-api';
-import domHelper from '../../../helper/dom';
-import PodcastItem from './PodcastItem.vue';
-import ClassicLoading from '../../form/ClassicLoading.vue';
-const PHONE_WIDTH = 960;
 import { state } from '../../../store/paramStore';
-import { Podcast } from '@/store/class/general/podcast';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
-import { defineComponent } from 'vue'
-import { RouteLocationRaw } from 'vue-router';
-import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { defineAsyncComponent, defineComponent } from 'vue';
+const PodcastInlineListClassic = defineAsyncComponent(() => import('./PodcastInlineListClassic.vue'));
+const PodcastSwiperList = defineAsyncComponent(() => import('./PodcastSwiperList.vue'));
 export default defineComponent({
   name: 'PodcastInlineList',
   
   components: {
-    PodcastItem,
-    ClassicLoading
+    PodcastInlineListClassic,
+    PodcastSwiperList,
   },
 
   props: {
@@ -116,217 +65,12 @@ export default defineComponent({
   },
   emits: ['update:isArrow'],
 
-  data() {
-    return {
-      loading: true as boolean,
-      loaded: true as boolean,
-      index: 0 as number,
-      first: 0 as number,
-      size: 5 as number,
-      totalCount: 0 as number,
-      popularSort: false as boolean,
-      allPodcasts: [] as Array<Podcast>,
-      direction: 1 as number,
-      alignLeft: false as boolean,
-    };
-  },
-  computed: {
-    podcasts(): Array<Podcast> {
-      return this.allPodcasts.slice(this.index, this.index + this.size);
-    },
-    sizeItem(): number {
-      return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
-    },
-    overflowScroll(): boolean {
-      return (state.emissionPage.overflowScroll as boolean);
-    },
-    isInlineAnimation(): boolean {
-      return (state.generalParameters.isInlineAnimation as boolean);
-    },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
-    organisation(): string|undefined {
-      if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
-      return undefined;
-    },
-    rubriqueQueryParam(): string|undefined{
-      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
-        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
-      }
-      return undefined;
+  computed:{
+    listTypeClassic(): boolean {
+      return (state.podcastPage.listTypeClassic as boolean);
     },
-    refTo(): string | RouteLocationRaw {
-      if (this.href) return this.href;
-      if(this.iabId){
-        return {
-          name: 'category',
-          params:{ 'iabId': this.iabId },
-          query: { productor: this.$store.state.filter.organisationId },
-        };
-      }
-      return {
-          name: 'podcasts',
-          query: { productor: this.$store.state.filter.organisationId, 
-                  iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
-                  rubriquesId: this.rubriqueQueryParam },
-        };
-    },
-    previousAvailable(): boolean {
-      return this.index > 0;
-    },
-    nextAvailable(): boolean {
-      return this.index + this.size < this.totalCount;
-    },
-    transitionName(): string {
-      return this.direction > 0 ? 'out-left' : 'out-right';
-    },
-    watchVariable():string{
-      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
-    }
-  },
-  watch: {
-    watchVariable(): void {
-      this.reset();
-      this.fetchNext();
-    },
-  },
-  
-  created() {
-    if (undefined !== this.requirePopularSort) {
-      this.popularSort = this.requirePopularSort;
-    }
-    if (undefined !== this.isArrow) {
-      this.$emit('update:isArrow', true);
-    }
-    window.addEventListener('resize', this.handleResize);
-  },
+  }
 
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
-  },
 
-  mounted() {
-    this.handleResize();
-    this.fetchNext();
-  },
-  methods: {
-    handleSeeMoreButton(event: { preventDefault: () => void; }){
-      if(!this.rubriqueId || 0===this.rubriqueId.length || this.noRubriquageId.length){
-        return;
-      }
-      event.preventDefault();
-      const rubriqueChosenId = this.rubriqueId[this.rubriqueId.length - 1];
-      let filterToAdd: RubriquageFilter = {
-        rubriquageId: 0, 
-        rubriqueId: rubriqueChosenId, 
-        nameRubriquage:  '',
-        nameRubrique: ''
-      };
-      if(this.$store.state.filter.rubriquageArray.length){
-        const rubriqueChosen =  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
-        filterToAdd = {
-          rubriquageId: this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriquageId, 
-          rubriqueId: rubriqueChosenId, 
-          nameRubriquage:  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].title,
-          nameRubrique: rubriqueChosen.name
-        };
-      }
-      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
-      newFilter.push(filterToAdd);
-      this.$store.commit('filterRubrique', newFilter);
-      const queries = this.$route.query;
-      const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
-      this.$router.push({ name: 'podcasts',query: { ...queries, ...{ rubriquesId: queryString }} });
-    },
-    async fetchNext(): Promise<void> {
-      const data = await octopusApi.fetchPodcasts({
-        first: this.first,
-        size: this.size + 1,
-        organisationId: this.organisation,
-        emissionId: this.emissionId,
-        iabId: this.iabId,
-        rubriqueId: this.rubriqueId.length ?this.rubriqueId:undefined,
-        rubriquageId: this.rubriquageId.length ?this.rubriquageId : undefined,
-        noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
-        sort: this.popularSort ? 'POPULARITY' : 'DATE',
-        query: this.query,
-      });
-      this.loading = false;
-      this.loaded = true;
-      this.totalCount = data.count;
-      if (this.allPodcasts.length + data.result.length < this.totalCount) {
-        const nexEl = data.result.pop() as Podcast;
-        if(nexEl){
-          this.preloadImage(nexEl.imageUrl?nexEl.imageUrl:'');
-        }
-      }
-      this.allPodcasts = this.allPodcasts.concat(
-        data.result.filter((pod: Podcast|null) => null !== pod)
-      );
-      if (this.allPodcasts.length <= 3) {
-        this.alignLeft = true;
-      } else {
-        this.alignLeft = false;
-      }
-      this.first += this.size;
-    },
-    displayPrevious(): void {
-      this.direction = -1;
-      if (this.previousAvailable) {
-        this.index -= 1;
-      }
-    },
-    displayNext(): void {
-      this.direction = 1;
-      if (!this.nextAvailable) return;
-      if (
-        this.first - (this.index + this.size) < 2 &&
-        this.allPodcasts.length < this.totalCount
-      ) {
-        this.fetchNext();
-      }
-      this.index += 1;
-    },
-    handleResize(): void {
-      if (!this.$el) return;
-      if (this.overflowScroll) {
-        this.size = 20;
-        return;
-      }
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
-      const width = (this.$el as HTMLElement).offsetWidth;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.7);
-      this.size = Math.floor(width / sixteen);
-    },
-    sortPopular(): void {
-      if (this.popularSort) return;
-      this.popularSort = true;
-      this.reset();
-      this.fetchNext();
-    },
-    sortChrono(): void {
-      if (!this.popularSort) return;
-      this.popularSort = false;
-      this.reset();
-      this.fetchNext();
-    },
-    reset(): void {
-      this.loading = true;
-      this.loaded = true;
-      this.index = 0;
-      this.first = 0;
-      this.totalCount = 0;
-      this.allPodcasts.length = 0;
-    },
-    preloadImage(url: string): void {
-      const img = new Image();
-      img.src = url;
-    },
-  },
 })
 </script>

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

@@ -0,0 +1,246 @@
+<template>
+  <PodcastInlineListTemplate
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    :display-arrow="true"
+    :popular-sort="popularSort"
+    :button-text="buttonText"
+    :button-plus="buttonPlus"
+    :title="title"
+    :href="href"
+    :iab-id="iabId"
+    :rubrique-id="rubriqueId"
+    :previous-available="previousAvailable"
+    :next-available="nextAvailable"
+    :no-rubriquage-id="noRubriquageId"
+    @sortChrono="sortChrono"
+    @sortPopular="sortPopular"
+    @displayPrevious="displayPrevious"
+    @displayNext="displayNext"
+  >
+    <template #list-inline>
+      <ClassicLoading
+        :loading-text="loading?$t('Loading podcasts ...'):undefined"
+      />
+      <transition-group
+        v-show="loaded"
+        :name="transitionName"
+        class="element-list-inline"
+        tag="ul"
+        :class="[
+          alignLeft ? 'justify-content-start' : '',
+          overflowScroll ? 'overflowScroll' : '',
+        ]"
+        :css="isInlineAnimation"
+      >
+        <PodcastItem
+          v-for="p in podcasts"
+          :key="p.podcastId"
+          class="flex-shrink-0 item-phone-margin"
+          :podcast="p"
+          :class="[alignLeft ? 'me-3' : '']"
+        />
+      </transition-group>
+    </template>
+  </PodcastInlineListTemplate>
+</template>
+
+<script lang="ts">
+import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
+import octopusApi from '@saooti/octopus-api';
+import domHelper from '../../../helper/dom';
+import PodcastItem from './PodcastItem.vue';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+const PHONE_WIDTH = 960;
+import { state } from '../../../store/paramStore';
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastInlineListClassic',
+  
+  components: {
+    PodcastItem,
+    ClassicLoading,
+    PodcastInlineListTemplate
+  },
+
+  props: {
+    organisationId: { default: undefined, type: String},
+    emissionId: { default: undefined, type: Number},
+    iabId: { default: undefined, type: Number},
+    title: { default: '', type: String},
+    href: { default: undefined, type: String},
+    buttonText: { default: undefined, type: String},
+    isArrow: { default: false, type: Boolean},
+    requirePopularSort: { default:undefined, type: Boolean},
+    buttonPlus: { default:false, type: Boolean},
+    rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
+    rubriquageId:{ default: () => [], type: Array as ()=> Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
+    query: { default: undefined, type: String},
+  },
+  emits: ['update:isArrow'],
+
+  data() {
+    return {
+      loading: true as boolean,
+      loaded: true as boolean,
+      index: 0 as number,
+      first: 0 as number,
+      size: 5 as number,
+      totalCount: 0 as number,
+      popularSort: false as boolean,
+      allPodcasts: [] as Array<Podcast>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
+    };
+  },
+  computed: {
+    podcasts(): Array<Podcast> {
+      return this.allPodcasts.slice(this.index, this.index + this.size);
+    },
+    sizeItem(): number {
+      return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
+    },
+    overflowScroll(): boolean {
+      return (state.emissionPage.overflowScroll as boolean);
+    },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    organisation(): string|undefined {
+      if (this.organisationId) return this.organisationId;
+      if (this.filterOrga) return this.filterOrga;
+      return undefined;
+    },
+    previousAvailable(): boolean {
+      return this.index > 0;
+    },
+    nextAvailable(): boolean {
+      return this.index + this.size < this.totalCount;
+    },
+    transitionName(): string {
+      return this.direction > 0 ? 'out-left' : 'out-right';
+    },
+    watchVariable():string{
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
+    }
+  },
+  watch: {
+    watchVariable(): void {
+      this.reset();
+      this.fetchNext();
+    },
+  },
+  
+  created() {
+    if (undefined !== this.requirePopularSort) {
+      this.popularSort = this.requirePopularSort;
+    }
+    if (undefined !== this.isArrow) {
+      this.$emit('update:isArrow', true);
+    }
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchNext();
+  },
+  methods: {
+    async fetchNext(): Promise<void> {
+      const data = await octopusApi.fetchPodcasts({
+        first: this.first,
+        size: this.size + 1,
+        organisationId: this.organisation,
+        emissionId: this.emissionId,
+        iabId: this.iabId,
+        rubriqueId: this.rubriqueId.length ?this.rubriqueId:undefined,
+        rubriquageId: this.rubriquageId.length ?this.rubriquageId : undefined,
+        noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
+        sort: this.popularSort ? 'POPULARITY' : 'DATE',
+        query: this.query,
+      });
+      this.loading = false;
+      this.loaded = true;
+      this.totalCount = data.count;
+      if (this.allPodcasts.length + data.result.length < this.totalCount) {
+        const nexEl = data.result.pop() as Podcast;
+        if(nexEl){
+          this.preloadImage(nexEl.imageUrl?nexEl.imageUrl:'');
+        }
+      }
+      this.allPodcasts = this.allPodcasts.concat(
+        data.result.filter((pod: Podcast|null) => null !== pod)
+      );
+      if (this.allPodcasts.length <= 3) {
+        this.alignLeft = true;
+      } else {
+        this.alignLeft = false;
+      }
+      this.first += this.size;
+    },
+    displayPrevious(): void {
+      this.direction = -1;
+      if (this.previousAvailable) {
+        this.index -= 1;
+      }
+    },
+    displayNext(): void {
+      this.direction = 1;
+      if (!this.nextAvailable) return;
+      if (
+        this.first - (this.index + this.size) < 2 &&
+        this.allPodcasts.length < this.totalCount
+      ) {
+        this.fetchNext();
+      }
+      this.index += 1;
+    },
+    handleResize(): void {
+      if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.7);
+      this.size = Math.floor(width / sixteen);
+    },
+    sortPopular(): void {
+      if (this.popularSort) return;
+      this.popularSort = true;
+      this.reset();
+      this.fetchNext();
+    },
+    sortChrono(): void {
+      if (!this.popularSort) return;
+      this.popularSort = false;
+      this.reset();
+      this.fetchNext();
+    },
+    reset(): void {
+      this.loading = true;
+      this.loaded = true;
+      this.index = 0;
+      this.first = 0;
+      this.totalCount = 0;
+      this.allPodcasts.length = 0;
+    },
+    preloadImage(url: string): void {
+      const img = new Image();
+      img.src = url;
+    },
+  },
+})
+</script>

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

@@ -0,0 +1,158 @@
+<template>
+  <div
+    class="d-flex flex-column p-3"
+  >
+    <h2>{{ title }}</h2>
+    <div class="d-flex justify-content-between">
+      <div class="d-flex">
+        <button
+          class="btn btn-underline"
+          :class="{ active: !popularSort }"
+          @click="sortChrono()"
+        >
+          {{ $t('Last added') }}
+        </button>
+        <button
+          class="btn btn-underline"
+          :class="{ active: popularSort }"
+          @click="sortPopular()"
+        >
+          {{ $t('Most popular') }}
+        </button>
+      </div>
+      <div
+        v-if="displayArrow"
+        class="hide-phone"
+      >
+        <button
+          class="btn admin-button m-1"
+          :class="{ disabled: !previousAvailable }"
+          :title="$t('Display previous')"
+          @click="displayPrevious()"
+        >
+          <div class="saooti-left fw-bold" />
+        </button>
+        <button
+          class="btn admin-button m-1"
+          :class="{ disabled: !nextAvailable }"
+          :title="$t('Display next')"
+          @click="displayNext()"
+        >
+          <div class="saooti-right fw-bold" />
+        </button>
+      </div>
+    </div>
+    <slot name="list-inline" />
+    <router-link
+      class="btn btn-link align-self-center width-fit-content m-4"
+      :to="refTo"
+      @click="handleSeeMoreButton"
+    >
+      {{ buttonText }}
+      <div
+        v-if="buttonPlus"
+        class="ms-1 saooti-more"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { defineComponent } from 'vue'
+import { RouteLocationRaw } from 'vue-router';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
+export default defineComponent({
+  name: 'PodcastInlineListTemplate',
+  
+  components: {
+  },
+
+  props: {
+    displayArrow: { default: true, type: Boolean},
+    previousAvailable: { default: false, type: Boolean},
+    nextAvailable: { default: false, type: Boolean},
+    popularSort: { default: false, type: Boolean},
+    buttonText: { default: undefined, type: String},
+    buttonPlus: { default:false, type: Boolean},
+    title: { default: '', type: String},
+    href: { default: undefined, type: String},
+    iabId: { default: undefined, type: Number},
+    rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
+  },
+  emits:['sortChrono','sortPopular', 'displayPrevious', 'displayNext'],
+  data() {
+    return {
+    };
+  },
+
+  computed: {
+    rubriqueQueryParam(): string|undefined{
+      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
+        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
+    },
+    refTo(): string | RouteLocationRaw {
+      if (this.href) return this.href;
+      if(this.iabId){
+        return {
+          name: 'category',
+          params:{ 'iabId': this.iabId },
+          query: { productor: this.$store.state.filter.organisationId },
+        };
+      }
+      return {
+          name: 'podcasts',
+          query: { productor: this.$store.state.filter.organisationId, 
+                  iabId: this.$store.state.filter.iab ? this.$store.state.filter.iab.id : undefined,
+                  rubriquesId: this.rubriqueQueryParam },
+        };
+    },
+  },
+
+  methods: {
+    sortChrono():void{
+      this.$emit('sortChrono');
+    },
+    sortPopular():void{
+      this.$emit('sortPopular');
+    },
+    displayPrevious():void{
+      this.$emit('displayPrevious');
+    },
+    displayNext():void{
+      this.$emit('displayNext');
+    },
+    handleSeeMoreButton(event: { preventDefault: () => void; }){
+      if(!this.rubriqueId || 0===this.rubriqueId.length || this.noRubriquageId.length){
+        return;
+      }
+      event.preventDefault();
+      const rubriqueChosenId = this.rubriqueId[this.rubriqueId.length - 1];
+      let filterToAdd: RubriquageFilter = {
+        rubriquageId: 0, 
+        rubriqueId: rubriqueChosenId, 
+        nameRubriquage:  '',
+        nameRubrique: ''
+      };
+      if(this.$store.state.filter.rubriquageArray.length){
+        const rubriqueChosen =  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
+        filterToAdd = {
+          rubriquageId: this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriquageId, 
+          rubriqueId: rubriqueChosenId, 
+          nameRubriquage:  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].title,
+          nameRubrique: rubriqueChosen.name
+        };
+      }
+      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
+      newFilter.push(filterToAdd);
+      this.$store.commit('filterRubrique', newFilter);
+      const queries = this.$route.query;
+      const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
+      this.$router.push({ name: 'podcasts',query: { ...queries, ...{ rubriquesId: queryString }} });
+    },
+  },
+})
+</script>

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

@@ -0,0 +1,208 @@
+<template>
+  <PodcastInlineListTemplate
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    :display-arrow="false"
+    :popular-sort="popularSort"
+    :button-text="buttonText"
+    :button-plus="buttonPlus"
+    :title="title"
+    :href="href"
+    :iab-id="iabId"
+    :rubrique-id="rubriqueId"
+    :no-rubriquage-id="noRubriquageId"
+    @sortChrono="sortChrono"
+    @sortPopular="sortPopular"
+  >
+    <template #list-inline>
+      <ClassicLoading
+        :loading-text="loading?$t('Loading podcasts ...'):undefined"
+      />
+      <swiper
+        v-show="loaded"
+        :slides-per-view="numberItem"
+        :space-between="10"
+        :loop="true"
+        :navigation="true"
+        :modules="modules"
+      >
+        <swiper-slide
+          v-for="p in allPodcasts"
+          :key="p.podcastId"
+        >
+          <PodcastItem
+            class="flex-shrink-0 item-phone-margin"
+            :podcast="p"
+          />
+        </swiper-slide>
+      </swiper>
+    </template>
+  </PodcastInlineListTemplate>
+</template>
+
+<script lang="ts">
+import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
+import octopusApi from '@saooti/octopus-api';
+import domHelper from '../../../helper/dom';
+import PodcastItem from './PodcastItem.vue';
+import { state } from '../../../store/paramStore';
+import ClassicLoading from '../../form/ClassicLoading.vue';
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation } from "swiper";
+import "swiper/css";
+import "swiper/css/navigation";
+import { Podcast } from '@/store/class/general/podcast';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastSwiperList',
+  
+  components: {
+    PodcastInlineListTemplate,
+    PodcastItem,
+    ClassicLoading,
+    Swiper,
+    SwiperSlide,
+  },
+
+  props: {
+    organisationId: { default: undefined, type: String},
+    emissionId: { default: undefined, type: Number},
+    iabId: { default: undefined, type: Number},
+    title: { default: '', type: String},
+    href: { default: undefined, type: String},
+    buttonText: { default: undefined, type: String},
+    isArrow: { default: false, type: Boolean},
+    requirePopularSort: { default:undefined, type: Boolean},
+    buttonPlus: { default:false, type: Boolean},
+    rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
+    rubriquageId:{ default: () => [], type: Array as ()=> Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
+    query: { default: undefined, type: String},
+  },
+  emits: ['update:isArrow'],
+
+  data() {
+    return {
+      loading: true as boolean,
+      loaded: true as boolean,
+      popularSort: false as boolean,
+      allPodcasts: [] as Array<Podcast>,
+      modules: [Navigation],
+      numberItem: 5 as number
+    };
+  },
+  computed: {
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
+    organisation(): string|undefined {
+      if (this.organisationId) return this.organisationId;
+      if (this.filterOrga) return this.filterOrga;
+      return undefined;
+    },
+    watchVariable():string{
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
+    },
+    sizeItem(): number {
+      return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
+    },
+  },
+  watch: {
+    watchVariable(): void {
+      this.reset();
+      this.fetchNext();
+    },
+  },
+  
+  created() {
+    if (undefined !== this.requirePopularSort) {
+      this.popularSort = this.requirePopularSort;
+    }
+    if (undefined !== this.isArrow) {
+      this.$emit('update:isArrow', true);
+    }
+    window.addEventListener('resize', this.handleResize);
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+
+  mounted() {
+    this.handleResize();
+    this.fetchNext();
+  },
+  methods: {
+    handleResize(): void {
+      if (!this.$el) return;
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
+      this.numberItem = Math.floor(width / sixteen);
+    },
+    async fetchNext(): Promise<void> {
+      const data = await octopusApi.fetchPodcasts({
+        first: 0,
+        size: 10,
+        organisationId: this.organisation,
+        emissionId: this.emissionId,
+        iabId: this.iabId,
+        rubriqueId: this.rubriqueId.length ?this.rubriqueId:undefined,
+        rubriquageId: this.rubriquageId.length ?this.rubriquageId : undefined,
+        noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
+        sort: this.popularSort ? 'POPULARITY' : 'DATE',
+        query: this.query,
+      });
+      this.loading = false;
+      this.loaded = true;
+      this.allPodcasts = this.allPodcasts.concat(
+        data.result.filter((pod: Podcast|null) => null !== pod)
+      );
+    },
+    sortPopular(): void {
+      if (this.popularSort) return;
+      this.popularSort = true;
+      this.reset();
+      this.fetchNext();
+    },
+    sortChrono(): void {
+      if (!this.popularSort) return;
+      this.popularSort = false;
+      this.reset();
+      this.fetchNext();
+    },
+    reset(): void {
+      this.loading = true;
+      this.loaded = true;
+      this.allPodcasts.length = 0;
+    },
+  },
+})
+</script>
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+.swiper-button-next, .swiper-button-prev{
+  color: $octopus-primary-color !important;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  width: 50px;
+}
+.swiper-button-next{
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,#fafafa 50%, #fafafa 100%);
+  right: 0;
+}
+.swiper-button-prev{
+  background: linear-gradient(90deg, #fafafa 0%,#fafafa 50%, rgba(255, 255, 255, 0) 100%);
+  left: 0;
+}
+
+.swiper-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/store/paramStore.ts

@@ -32,7 +32,9 @@ const state:paramStore = {
     hlsUri: 'https://hls.preprod.saooti.org/',
     mainRubrique: 0,
     resourceUrl: undefined,
-    podcastItemShowEmission: false
+    podcastItemShowEmission: false,
+    clickPlayGoPage:false,
+    listTypeClassic: true,
   },
   podcastsPage: {
     ProductorSearch: true,
@@ -126,6 +128,8 @@ export interface PodcastPage{
   mainRubrique?: number,
   resourceUrl?: string |undefined,
   podcastItemShowEmission?: boolean,
+  clickPlayGoPage?:boolean,
+  listTypeClassic?:boolean
 }
 export interface PodcastsPage{
   ProductorSearch?: boolean,