@saooti/octopus-sdk 31.0.0 → 31.0.3

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

@@ -0,0 +1,204 @@
+<template>
+  <div
+    v-if="loading || (!loading && 0 !== allPodcasts.length)"
+    class="d-flex flex-column p-3 playlist-inline-podcast"
+  >
+    <h2>{{ title }}</h2>
+    <div
+      v-if="!overflowScroll"
+      class="d-flex justify-content-end 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>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+    />
+    <transition-group
+      :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="{
+          name: 'playlist',
+          params: { playlistId: playlistId.toString() },
+        }"
+    >
+      {{ $t('See more') }}
+      <div
+        class="ms-1 saooti-more"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import octopusApi from '@saooti/octopus-api';
+import domHelper from '../../../helper/dom';
+import PodcastItem from '../podcasts/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'
+import { Playlist } from '@saooti/octopus-api/class/playlist';
+export default defineComponent({
+  name: 'PodcastPlaylistInlineList',
+  
+  components: {
+    PodcastItem,
+    ClassicLoading
+  },
+
+  props: {
+    playlistId: { default: undefined, type: Number},
+  },
+
+  data() {
+    return {
+      loading: true as boolean,
+      index: 0 as number,
+      first: 0 as number,
+      size: 5 as number,
+      totalCount: 0 as number,
+      playlist: undefined as Playlist|undefined,
+      allPodcasts: [] as Array<Podcast>,
+      direction: 1 as number,
+      alignLeft: false as boolean,
+    };
+  },
+  computed: {
+    title(): string{
+      if(this.playlist){
+        return this.playlist.title;
+      }
+      return "";
+    },
+    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);
+    },
+    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';
+    },
+  },
+  watch: {
+    playlistId(): void {
+      this.reset();
+      this.fetchContent();
+    },
+  },
+  
+  created() {
+    window.addEventListener('resize', this.handleResize);
+  },
+
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+
+  mounted() {
+    this.handleResize();
+    this.fetchContent();
+  },
+  methods: {
+    async fetchContent(): Promise<void> {
+      this.allPodcasts.length = 0;
+      this.loading = true;
+      this.playlist = await octopusApi.fetchPlaylist(this.playlistId ? this.playlistId.toString(): "");
+      this.allPodcasts = await octopusApi.fetchPlaylistContent(
+        this.playlist.playlistId.toString()
+      );
+      if (!((state.generalParameters.authenticated && state.generalParameters.organisationId === this.playlist.organisation.id) ||
+        state.generalParameters.isAdmin)) {
+        this.allPodcasts = this.allPodcasts.filter((p: Podcast|null) => {
+          return (
+            null !== p &&
+            (!p.availability || true === p.availability.visibility)
+          );
+        });
+      }
+      if (this.allPodcasts.length <= 3) {
+        this.alignLeft = true;
+      } else {
+        this.alignLeft = false;
+      }
+      this.loading = false;
+    },
+    displayPrevious(): void {
+      this.direction = -1;
+      if (this.previousAvailable) {
+        this.index -= 1;
+      }
+    },
+    displayNext(): void {
+      this.direction = 1;
+      if (!this.nextAvailable) return;
+      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);
+    },
+    reset(): void {
+      this.index = 0;
+      this.first = 0;
+      this.totalCount = 0;
+      this.allPodcasts.length = 0;
+    },
+  },
+})
+</script>

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

@@ -48,6 +48,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .podcast-item-animator {
   display: flex;
   align-items: flex-start;
@@ -58,4 +59,5 @@ export default defineComponent({
   text-transform: capitalize;
   margin: 00.25rem 0.5rem 0;
 }
+}
 </style>

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

@@ -8,16 +8,12 @@
       :id="idPopover"
       tabindex="-1"
       class="saooti-help m-0"
-      :title="$t('Help')"
+      :title="title"
     />
     <span class="mx-1">:</span>
     <Popover
       :target="idPopover"
     >
-      <div class="text-center font-weight-bold">
-        {{ title }}
-      </div>
-      <hr>
       <div 
         v-for="participant in participants"
         :key="'desc-'+participant.participantId"

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

@@ -286,6 +286,7 @@ export default defineComponent({
 
 
 <style lang="scss">
+.octopus-app{
 .live-image-status {
   text-align: center;
   width: 100%;
@@ -363,5 +364,5 @@ export default defineComponent({
     z-index: 2;
   }
 }
-
+}
 </style>

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

@@ -22,7 +22,7 @@
         </button>
       </div>
       <div
-        v-if="!isArrow"
+        v-if="!isArrow && !overflowScroll"
         class="hide-phone"
       >
         <button
@@ -51,7 +51,11 @@
       :name="transitionName"
       class="element-list-inline"
       tag="ul"
-      :class="[alignLeft ? 'justify-content-start' : '']"
+      :class="[
+        alignLeft ? 'justify-content-start' : '',
+        overflowScroll ? 'overflowScroll' : '',
+      ]"
+      :css="isInlineAnimation"
     >
       <PodcastItem
         v-for="p in podcasts"
@@ -68,13 +72,14 @@
       {{ buttonText }}
       <div
         v-if="buttonPlus"
-        class="ms-1 saooti-plus"
+        class="ms-1 saooti-more"
       />
     </router-link>
   </div>
 </template>
 
 <script lang="ts">
+import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import domHelper from '../../../helper/dom';
 import PodcastItem from './PodcastItem.vue';
@@ -85,6 +90,7 @@ import { Podcast } from '@/store/class/general/podcast';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 import { RouteLocationRaw } from 'vue-router';
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'PodcastInlineList',
   
@@ -93,6 +99,8 @@ export default defineComponent({
     ClassicLoading
   },
 
+  mixins: [handle403],
+
   props: {
     organisationId: { default: undefined, type: String},
     emissionId: { default: undefined, type: Number},
@@ -131,6 +139,12 @@ export default defineComponent({
     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;
     },
@@ -201,34 +215,38 @@ export default defineComponent({
   },
   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;
-        this.preloadImage(nexEl.imageUrl?nexEl.imageUrl:'');
+      try {
+        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;
+          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;
+      } catch (error) {
+        this.handle403((error as AxiosError));
       }
-      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;
@@ -249,6 +267,10 @@ export default defineComponent({
     },
     handleResize(): void {
       if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
       if (window.innerWidth <= PHONE_WIDTH) {
         this.size = 10;
         return;

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

@@ -197,6 +197,16 @@ export default defineComponent({
               s: () => 'sec',
               ms: () => 'ms',
             },
+            shortIt: {
+              y: () => 'anni',
+              mo: () => 'mesi',
+              w: () => 'settimane',
+              d: () => 'giorni',
+              h: () => 'h',
+              m: () => 'min',
+              s: () => 'sec',
+              ms: () => 'ms',
+            },
           },
         });
       }
@@ -243,6 +253,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .podcast-item-container {
   border-radius: 0.8rem;
   list-style: none;
@@ -308,4 +319,5 @@ export default defineComponent({
     margin: 0.5rem !important;
   }
 }
+}
 </style>

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

@@ -33,13 +33,14 @@
       </template>
       <div
         :class="buttonPlus?'ms-1':''"
-        class="saooti-plus"
+        class="saooti-more"
       />
     </button>
   </div>
 </template>
 
 <script lang="ts">
+import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from './PodcastItem.vue';
 import { state } from '../../../store/paramStore';
@@ -47,6 +48,7 @@ import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Podcast } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
 import { FetchParam } from '@/store/class/general/fetchParam';
+import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'PodcastList',
 
@@ -55,6 +57,8 @@ export default defineComponent({
     ClassicLoading
   },
 
+  mixins: [handle403],
+
   props: {
     first: { default: 0, type: Number},
     size: { default: 12, type: Number},
@@ -174,8 +178,12 @@ export default defineComponent({
       if (this.notValid && !this.isProduction) {
         param.publisherId = this.$store.state.profile.userId;
       }
-      const data = await octopusApi.fetchPodcasts(param);
-      this.afterFetching(reset, data);
+      try {
+        const data = await octopusApi.fetchPodcasts(param);
+        this.afterFetching(reset, data);
+      } catch (error) {
+        this.handle403((error as AxiosError));
+      }
     },
     afterFetching(reset: boolean, data:  {count: number, result: Array<Podcast>, sort: string}): void {
       if (reset) {

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

@@ -48,14 +48,14 @@ export default defineComponent({
       return (state.emissionsPage.progressBar as boolean);
     },
     percentProgress(): number{
-      if(this.podcast !== this.$store.state.player.podcast){
+      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){
         return 0;
       }
       if(!this.$store.state.player.elapsed){return 0;}
       return this.$store.state.player.elapsed * 100;
     },
     playedTime(): string{
-      if(this.podcast === this.$store.state.player.podcast){
+      if(this.$store.state.player.podcast && this.podcast.podcastId === this.$store.state.player.podcast.podcastId){
         if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
           return DurationHelper.formatDuration(
             Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
@@ -70,7 +70,7 @@ export default defineComponent({
   },
   methods: {
     seekTo(event: MouseEvent): void {
-      if(this.podcast!== this.$store.state.player.podcast){return;}
+      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){return;}
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;
@@ -84,6 +84,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .podcast-play-bar {
   .progress{
     height: 6px;
@@ -97,4 +98,5 @@ export default defineComponent({
     position: absolute;
   }
 }
+}
 </style>

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

@@ -51,6 +51,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .tag-list-component{
   .ouest-france-logo{
     width: 20px;
@@ -65,4 +66,5 @@ export default defineComponent({
     border-radius: 0.5rem;
   }
 }
+}
 </style>

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -29,9 +29,8 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      @open="clearAll"
+      @open="onOpen"
       @search-change="onSearchRubrique"
-      @close="onClose"
       @select="onRubriqueSelected"
     >
       <template #singleLabel="{ option }">
@@ -187,14 +186,11 @@ export default defineComponent({
         );
       }
     },
-    clearAll(): void {
+    onOpen(): void {
       (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
-      if (undefined === this.rubriqueArray) {
-        this.rubrique = undefined;
-      }
       this.rubriques = this.initRubriquesArray();
     },
     onClose(): void {

package/src/components/display/rubriques/RubriqueList.vue

@@ -31,7 +31,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"
@@ -179,6 +179,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 #rubrique-list-container {
   display: flex;
   justify-content: flex-start;
@@ -210,4 +211,5 @@ export default defineComponent({
     background: #eee !important;
   }
 }
+}
 </style>

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

@@ -157,9 +157,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
   .input-share-player {
     border: 1px solid #ddd;
     border-radius: 50px;
     width: 60px;
   }
+}
 </style>

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

@@ -50,6 +50,9 @@ export default defineComponent({
       return (state.generalParameters.authenticated as boolean);
     },
   },
+  created(){
+    this.initColor();
+  },
   methods:{
     download(): void{
       const link = document.createElement('a');
@@ -62,6 +65,10 @@ export default defineComponent({
       }
     },
     async initColor(): Promise<void> {
+      if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
+        this.color = state.generalParameters.podcastmakerColor;
+        return;
+      }
       if (!this.authenticated) return;
       let data;
       if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){

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

@@ -170,6 +170,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .sharing-distribution-container {
   border: 0.05rem solid #dee2e6;
   border-radius: 0.3rem;
@@ -214,4 +215,5 @@ export default defineComponent({
     margin: 0.2rem 0.5rem;
   }
 }
+}
 </style>

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

@@ -364,6 +364,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../../sass/_variables.scss';
+.octopus-app{
 .sticker {
   align-self: center;
   background: $octopus-primary-dark;
@@ -385,4 +386,5 @@ export default defineComponent({
 .max-iframe {
   max-width: 300px;
 }
+}
 </style>

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

@@ -66,6 +66,16 @@
       >
         <span class="saooti-playerfm" />
       </a>
+      <a
+        v-if="pocketCasts"
+        rel="noopener"
+        target="_blank"
+        class="btn me-3 mb-2 share-btn"
+        :href="pocketCasts"
+        title="pocketCasts"
+      >
+        <span class="saooti-pocket-casts" />
+      </a>
       <a
         v-if="podcastAddict"
         rel="noopener"
@@ -189,6 +199,10 @@ export default defineComponent({
         (this.emission && this.emission.annotations
           ? this.emission.annotations.googlePodcasts
           : undefined) as string | undefined,
+      pocketCasts:
+        (this.emission && this.emission.annotations
+          ? this.emission.annotations.pocketCasts
+          : undefined) as string | undefined,
     };
   },
 
@@ -205,6 +219,7 @@ export default defineComponent({
     this.stitcher = this.externaliseLinks(this.stitcher);
     this.amazon = this.externaliseLinks(this.amazon);
     this.googlePodcasts = this.externaliseLinks(this.googlePodcasts);
+    this.pocketCasts = this.externaliseLinks(this.pocketCasts);
   },
 
   methods: {