@saooti/octopus-sdk 31.0.26 → 31.0.27

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/PodcastModuleBox.vue

@@ -1,26 +1,15 @@
 <template>
   <div class="module-box">
     <div
-      v-if="!isOuestFrance"
       class="text-uppercase h4"
     >
       {{ podcast.title }}
     </div>
-    <router-link
-      v-else
-      :to="{
-        name: 'emission',
-        params: { emissionId: podcast.emission.emissionId },
-        query: { productor: $store.state.filter.organisationId },
-      }"
-    >
-      <h1>{{ podcast.emission.name }}</h1>
-    </router-link>
     <div class="mb-5 mt-3 d-flex">
       <div class="w-100">
         <PodcastImage
           :class="[
-            !isOuestFrance && !isLiveReadyToRecord
+             !isLiveReadyToRecord
               ? 'shadow-element'
               : '',
             isLiveReadyToRecord &&
@@ -38,25 +27,16 @@
           :is-animator-live="isOctopusAndAnimator"
           @playPodcast="playPodcast"
         />
-        <h3 v-if="isOuestFrance">
-          {{ podcast.title }}
-        </h3>
         <div
           class="d-flex flex-wrap mb-3"
           :class="isLiveReady ? 'justify-content-between' : ''"
         >
           <div
-            v-if="!isOuestFrance && 0 !== date.length"
+            v-if="0 !== date.length"
             :class="!isLiveReady ? 'me-5' : ''"
           >
             {{ date }}
           </div>
-          <div>
-            <span
-              v-if="isOuestFrance"
-              class="saooti-clock3"
-            />{{ $t('Duration', { duration: duration }) }}
-          </div>
           <div
             v-if="isLiveReady"
             class="text-danger"
@@ -72,7 +52,7 @@
         <!-- eslint-enable -->
         <div class="my-3">
           <ParticipantDescription :participants="podcast.animators" />
-          <div v-if="!isOuestFrance">
+          <div>
             {{ $t('Emission') + ' : ' }}
             <router-link
               class="fw-bold"
@@ -198,9 +178,6 @@ export default defineComponent({
     authenticated(): boolean {
       return (state.generalParameters.authenticated as boolean);
     },
-    isOuestFrance(): boolean {
-      return (state.podcastPage.ouestFranceStyle as boolean);
-    },
     date(): string {
       if (this.podcast && 1970 !== moment(this.podcast.pubDate).year()){
         return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');

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

@@ -0,0 +1,209 @@
+<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"
+        class="mySwiper"
+      >
+        <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.fetchNext();
+  },
+  methods: {
+    handleResize(): void {
+      if (!this.$el) return;
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 2);
+      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%;
+  padding: 50px 20px;
+}
+.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/components/display/sharing/SharePlayer.vue

@@ -16,7 +16,7 @@
             :src="iFrameSrc"
             scrolling="no"
             frameborder="0"
-            :width="iFrameWidth"
+            width="100%"
             :height="iFrameHeight"
             class="max-iframe my-2"
           />
@@ -52,11 +52,11 @@
           :is-visible="isVisible"
           :chose-number-episode="displayChoiceAllEpisodes|| isLargeSuggestion"
           :display-choice-all-episodes="displayChoiceAllEpisodes"
-          @displayArticle="updateDisplayArticle"
-          @episodeNumbers="updateEpisodeNumber"
-          @proceedReading="updateProceedReading"
-          @isVisible="updateIsVisible"
-          @iFrameNumber="updateIframeNumber"
+          @displayArticle="displayArticle = $event"
+          @episodeNumbers="episodeNumbers = $event"
+          @proceedReading="proceedReading = $event"
+          @isVisible="isVisible = $event"
+          @iFrameNumber="iFrameNumber = $event"
         />
       </template>
       <div v-else-if="exclusive && authenticated">
@@ -236,27 +236,18 @@ export default defineComponent({
       }
       return url.join('');
     },
-    iFrameWidth(): string {
-      return '100%';
-    },
     iFrameHeight(): string {
       switch (this.iFrameModel) {
         case 'large':
           if (this.podcast) return '180px';
           if ('number' === this.episodeNumbers) {
             switch (this.iFrameNumber.toString()) {
-              case '1':
-                return '270px';
-              case '2':
-                return '320px';
-              case '3':
-                return '360px';
-              case '4':
-                return '420px';
-              case '5':
-                return '420px';
-              default:
-                return '420px';
+              case '1': return '270px';
+              case '2': return '320px';
+              case '3': return '360px';
+              case '4': return '420px';
+              case '5': return '420px';
+              default: return '420px';
             }
           }
           return '435px';
@@ -264,28 +255,21 @@ export default defineComponent({
         case 'largeSuggestion':
           if ('number' !== this.episodeNumbers) return '510px';
           switch (this.iFrameNumber.toString()) {
-            case '1':
-              return '315px';
-            case '2':
-              return '365px';
-            case '3':
-              return '420px';
-            case '4':
-              return '470px';
-            case '5':
-              return '470px';
-            default:
-              return '470px';
+            case '1':return '315px';
+            case '2':return '365px';
+            case '3':return '420px';
+            case '4':return '470px';
+            case '5':return '470px';
+            default:return '470px';
           }
-        case 'emission':
-          return '530px';
+        case 'emission':return '530px';
         default:
           if (this.podcast) return '520px';
           return '530px';
       }
     },
     iFrame(): string {
-      return `<iframe src="${this.iFrameSrc}" width="${this.iFrameWidth}" height="${this.iFrameHeight}" scrolling="no" frameborder="0"></iframe>`;
+      return `<iframe src="${this.iFrameSrc}" width="100%" height="${this.iFrameHeight}" scrolling="no" frameborder="0"></iframe>`;
     },
     isPodcastNotVisible(): boolean {
       return (
@@ -321,32 +305,9 @@ export default defineComponent({
           state.generalParameters.organisationId ? state.generalParameters.organisationId : ""
         );
       }
-      if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
-        this.color = data.COLOR;
-      } else {
-        this.color = '#40a372';
-      }
-      if (Object.prototype.hasOwnProperty.call(data,'THEME')) {
-        this.theme = data.THEME;
-      } else {
-        this.theme = '#000000';
-      }
-    },
-    updateEpisodeNumber(value: string): void {
-      this.episodeNumbers = value;
-    },
-    updateProceedReading(value: boolean): void {
-      this.proceedReading = value;
-    },
-    updateIframeNumber(value: string): void {
-      this.iFrameNumber = value;
+      this.color = Object.prototype.hasOwnProperty.call(data,'COLOR') ? data.COLOR : '#40a372';
+      this.theme = Object.prototype.hasOwnProperty.call(data,'THEME') ? data.THEME : '#000000';
     },
-    updateIsVisible(value: boolean): void {
-      this.isVisible = value;
-    },
-    updateDisplayArticle(value: boolean): void{
-      this.displayArticle = value;
-    }
   },
 })
 </script>
@@ -354,26 +315,26 @@ export default defineComponent({
 <style lang="scss">
 @import '../../../sass/_variables.scss';
 .octopus-app{
-.sticker {
-  align-self: center;
-  background: $octopus-primary-dark;
-  padding: 0.5rem;
-  transition: all 0.5s ease;
-  color: white;
-  font-weight: bold;
-  letter-spacing: 1px;
-  outline: none;
-  box-shadow: 10px 10px 34px -15px hsla(0, 0%, 0%, 0.4);
-  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
-  border: solid 2px #41403e;
-  &:hover {
-    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
-    background: transparent;
-    color: $octopus-primary-dark;
+  .sticker {
+    align-self: center;
+    background: $octopus-primary-dark;
+    padding: 0.5rem;
+    transition: all 0.5s ease;
+    color: white;
+    font-weight: bold;
+    letter-spacing: 1px;
+    outline: none;
+    box-shadow: 10px 10px 34px -15px hsla(0, 0%, 0%, 0.4);
+    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+    border: solid 2px #41403e;
+    &:hover {
+      box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
+      background: transparent;
+      color: $octopus-primary-dark;
+    }
+  }
+  .max-iframe {
+    max-width: 300px;
   }
-}
-.max-iframe {
-  max-width: 300px;
-}
 }
 </style>

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

@@ -47,30 +47,32 @@ export default defineComponent({
     };
   },
   watch:{
-    color(){
-      if(this.color !== this.internColor){
-        this.internColor = this.color;
-      }
-    },
     internColor(){
       if(this.color !== this.internColor){
         this.$emit('update:color', this.internColor);
       }
     },
-    theme(){
-      if(this.theme !== this.internTheme){
-        this.internTheme = this.theme;
-      }
-    },
     internTheme(){
       if(this.theme !== this.internTheme ){
         this.$emit('update:theme', this.internTheme);
       }
-    }
+    },
+    theme: {
+      immediate: true,
+      handler() {
+        if(this.theme !== this.internTheme){
+          this.internTheme = this.theme;
+        }
+      },
+    },
+    color: {
+      immediate: true,
+      handler() {
+        if(this.color !== this.internColor){
+          this.internColor = this.color;
+        }
+      },
+    },
   },
-  mounted(){
-    this.internColor= this.color;
-    this.internTheme= this.theme;
-  }
 })
 </script>