@saooti/octopus-sdk 31.0.1 → 31.0.4

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

@@ -55,6 +55,7 @@
         alignLeft ? 'justify-content-start' : '',
         overflowScroll ? 'overflowScroll' : '',
       ]"
+      :css="isInlineAnimation"
     >
       <PodcastItem
         v-for="p in podcasts"
@@ -71,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';
@@ -88,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',
   
@@ -96,6 +99,8 @@ export default defineComponent({
     ClassicLoading
   },
 
+  mixins: [handle403],
+
   props: {
     organisationId: { default: undefined, type: String},
     emissionId: { default: undefined, type: Number},
@@ -137,6 +142,9 @@ export default defineComponent({
     overflowScroll(): boolean {
       return (state.emissionPage.overflowScroll as boolean);
     },
+    isInlineAnimation(): boolean {
+      return (state.generalParameters.isInlineAnimation as boolean);
+    },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
@@ -207,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:'');
-      }
-      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;
+      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.first += this.size;
     },
     displayPrevious(): void {
       this.direction = -1;

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

@@ -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/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')"
@@ -130,7 +130,7 @@ export default defineComponent({
       this.$store.commit('filterRubrique', newFilter);
       const queries = this.$route.query;
       const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
-      this.$router.push({ query: { ...queries, ...{ rubriquesId: queryString }} });
+      this.$router.replace({ query: { ...queries, ...{ rubriquesId: queryString }} });
       this.selectNewRubriquage();
     },
     selectNewRubriquage(){
@@ -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

@@ -33,7 +33,7 @@
               :podcast="podcast"
               :emission="emission"
               :playlist="playlist"
-              :custom-players="customPlayers"
+              :organisation-id="organisationId"
             />
           </div>
           <SharePlayerColors
@@ -82,7 +82,6 @@ import octopusApi from '@saooti/octopus-api';
 import { Podcast } from '@/store/class/general/podcast';
 import { Emission } from '@/store/class/general/emission';
 import { Playlist } from '@/store/class/general/playlist';
-import { CustomPlayer } from '@/store/class/general/customPlayer';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ShareModalPlayer = defineAsyncComponent(() => import('../../misc/modal/ShareModalPlayer.vue'));
 const PlayerParameters = defineAsyncComponent(() => import('./PlayerParameters.vue'));
@@ -119,7 +118,6 @@ export default defineComponent({
       iFrameNumber: '3' as string,
       isVisible: false as boolean,
       displayArticle: true as boolean,
-      customPlayers: [] as Array<CustomPlayer>,
       colors: ['#000000', '#ffffff'],
     };
   },
@@ -333,15 +331,6 @@ export default defineComponent({
       } else {
         this.theme = '#000000';
       }
-      let dataFetched = await octopusApi.fetchCustomPlayer('customPlayer/organisation/'+ this.organisationId);
-      this.customPlayers = dataFetched.content;
-      const totalCount = dataFetched.totalElements;
-      let index = 1;
-      while (totalCount > this.customPlayers.length) {
-        dataFetched =  await octopusApi.fetchCustomPlayer('customPlayer/organisation/'+ this.organisationId+'?start='+index);
-        this.customPlayers = this.customPlayers.concat(dataFetched.content);
-        ++index;
-      }
     },
     updateEpisodeNumber(value: string): void {
       this.episodeNumbers = value;
@@ -364,6 +353,7 @@ export default defineComponent({
 
 <style lang="scss">
 @import '../../../sass/_variables.scss';
+.octopus-app{
 .sticker {
   align-self: center;
   background: $octopus-primary-dark;
@@ -385,4 +375,5 @@ export default defineComponent({
 .max-iframe {
   max-width: 300px;
 }
+}
 </style>

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

@@ -48,6 +48,8 @@
 </template>
 
 <script lang="ts">
+import { state } from '../../../store/paramStore';
+import octopusApi from '@saooti/octopus-api';
 import { Podcast } from '@/store/class/general/podcast';
 import { CustomPlayer } from '@/store/class/general/customPlayer';
 import { defineComponent } from 'vue';
@@ -58,12 +60,21 @@ export default defineComponent({
     podcast: { default: undefined, type: Object as ()=> Podcast},
     emission: { default: undefined, type: Object as ()=> Emission},
     playlist: { default: undefined, type: Object as ()=> Playlist},
-    customPlayers: { default: ()=>[], type: Array as ()=> Array<CustomPlayer>},
     iFrameModel: { default: 'default', type: String},
+    organisationId: { default: undefined, type: String},
   },
   emits:['update:iFrameModel'],
 
+  data() {
+    return {
+      customPlayers: [] as Array<CustomPlayer>,
+    };
+  },
+
   computed: {
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
     customPlayersDisplay(): Array<CustomPlayer>{
       return this.customPlayers.filter((player: CustomPlayer)=>{
         return (('EPISODE' === player.typePlayer ||'SUGGESTION' === player.typePlayer) && this.podcast && this.podcast.podcastId) ||
@@ -71,5 +82,41 @@ export default defineComponent({
       });
     },
   },
+   async created() {
+    await this.initCustomPlayers();
+  },
+
+  methods: {
+    async fetchCustomPlayers(type:string, trySelect: boolean): Promise<boolean>{
+      let players = await octopusApi.fetchCustomPlayer('customPlayer/type/'+ this.organisationId+'/'+type);
+      let playersContent = players.content;
+      const totalCount = players.totalElements;
+      let index = 1;
+      while (totalCount > playersContent.length) {
+        players =  await octopusApi.fetchCustomPlayer('customPlayer/type/'+ this.organisationId+'/'+type+'?start='+index);
+        playersContent = playersContent.concat(players.content);
+        ++index;
+      }
+      this.customPlayers = this.customPlayers.concat(playersContent);
+      if(trySelect && this.customPlayers[0] && this.customPlayers[0].selected){
+        this.$emit('update:iFrameModel',this.customPlayers[0].customId);
+        return false;
+      }
+      return true;
+    },
+    async initCustomPlayers(): Promise<void> {
+      if (!this.authenticated) return;
+      if(this.playlist){
+        this.fetchCustomPlayers('PLAYLIST', true);
+      }else if(this.emission  && !this.podcast){
+        this.fetchCustomPlayers('EMISSION', true);
+      }else{
+        let playerTrySelect = true;
+        playerTrySelect = await this.fetchCustomPlayers('EPISODE', playerTrySelect);
+        playerTrySelect = await this.fetchCustomPlayers('EMISSION', playerTrySelect);
+        playerTrySelect = await this.fetchCustomPlayers('SUGGESTION', playerTrySelect);
+      }
+    },
+  }
 })
 </script>

package/src/components/form/ClassicSearch.vue

@@ -61,6 +61,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
+.octopus-app{
 .champs-searchPage{
   input {
     border: 2px solid #dee2e6;
@@ -81,4 +82,5 @@ export default defineComponent({
     margin: 1rem;
   }
 } 
+}
 </style>

package/src/components/misc/ErrorMessage.vue

@@ -28,10 +28,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .bg-error-message {
   background-color: #ffd84a9c;
 }
 .alert-text{
   color: darkred;
 }
+}
 </style>

package/src/components/misc/Footer.vue

@@ -201,6 +201,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 #footer{
   font-size: 0.7rem;
   .acpm_image {
@@ -221,4 +222,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/LeftMenu.vue

@@ -195,6 +195,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .left-menu-container {
   position: fixed;
   top: 3rem;
@@ -225,4 +226,5 @@ export default defineComponent({
     width: 94%;
   }
 }
+}
 </style>

package/src/components/misc/Player.vue

@@ -51,6 +51,15 @@
           :player-error="playerError"
           :listen-time="listenTime"
         />
+        <div
+          class="play-button-box primary-bg text-light"
+          @click="stopPlayer"
+        >
+          <div
+            class="saooti-cross"
+            :title="$t('Close')"
+          />
+        </div>
         <PlayerClockAndTimeline
           v-model:showTimeline="showTimeline"
           :comments="comments"
@@ -204,6 +213,9 @@ export default defineComponent({
   },
   
   methods: {
+    stopPlayer(): void {
+      this.$store.commit('playerPlayPodcast');
+    },
     getListenerId(): string{
       let listenerId = this.getCookie("octopus_listenerId");
       if(!listenerId){
@@ -473,6 +485,7 @@ reject('There is an error while reading media content');
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-container {
   position: fixed;
   overflow: hidden;
@@ -497,4 +510,5 @@ reject('There is an error while reading media content');
     }
   }
 }
+}
 </style>

package/src/components/misc/PlayerButtons.vue

@@ -23,16 +23,6 @@
       }"
     />
   </div>
-  <div
-    v-if="isPlaying || isPaused"
-    class="play-button-box primary-bg text-light"
-    @click="stopPlayer"
-  >
-    <div
-      class="saooti-stop-bounty"
-      :title="$t('Stop')"
-    />
-  </div>
 </template>
 
 <script lang="ts">
@@ -114,9 +104,6 @@ export default defineComponent({
         this.onPause();
       }
     },
-    stopPlayer(): void {
-      this.$store.commit('playerPlayPodcast');
-    },
     onPlay(): void {
       this.$store.commit('playerPause', false);
     },
@@ -128,6 +115,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-image {
   border-radius: 0.2rem;
   height: 2.4rem;
@@ -151,5 +139,5 @@ export default defineComponent({
   flex-shrink: 0;
   cursor: pointer;
 }
-
+}
 </style>

package/src/components/misc/PlayerClockAndTimeline.vue

@@ -61,6 +61,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 @import '../../sass/_variables.scss';
+.octopus-app{
 .player-container {
   .timeline-button {
     background: black;
@@ -82,4 +83,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/PlayerProgressBar.vue

@@ -146,6 +146,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-grow-content {
   display: flex;
   flex-direction: column;
@@ -165,4 +166,5 @@ export default defineComponent({
     position: absolute;
   }
 }
+}
 </style>

package/src/components/misc/Popover.vue

@@ -106,8 +106,13 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.octopus-app{
 .popover{
   max-height: 80vh;
   overflow: auto;
+  hr{
+    width: 100px;
+  }
+}
 }
 </style>

package/src/components/misc/Snackbar.vue

@@ -160,7 +160,9 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+.octopus-app{
 .snack-bar-wrap{
   bottom: 0px;
 }
+}
 </style>

package/src/components/misc/TopBar.vue

@@ -257,6 +257,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .top-bar-container {
   position: sticky;
   top: 0;
@@ -336,4 +337,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>