@saooti/octopus-sdk 31.0.1 → 31.0.2

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')"
@@ -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/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>

package/src/components/misc/modal/NewsletterModal.vue

@@ -242,9 +242,7 @@ export default defineComponent({
           `" title="` +
           this.$t('Listen this episode') +
           `">
-          <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="` +
-          this.resourcesUrl +
-          `/img/play-podcast.png">
+          <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAAAxElEQVRIie3WMWpCURBG4Q8FSRrtbC2SPhvICmzchVuwtXQLbsE2pVUIkjqQHVgqNmIj6EvxGHhFQAIvcxt/OPVhhrlzh3sKZ4MvTLLFVYNPvJYQB294LiGucMYSw2xxcMQcj9niYIsputni4BvjEuJgjZcS4goXrDDKFgcnLDDIFgd7zNDLFgfvTUHnL23ISJuV7iS3Ooarn1VxkeeUvkDSV2b6J3FQT+pDW8Jb4vRD4Kqe1Kf/Ev4mTj32PhQ6b+9pPT+XHgysHrPM6QAAAABJRU5ErkJggg=="/>
         </a>
         <a style="color: #000;text-decoration: none; margin-right:8px" href="` +
           window.location.href +
@@ -283,6 +281,9 @@ export default defineComponent({
       });
     },
   },
+  created(){
+    this.initColor();
+  },
   methods: {
     closePopup(event: { preventDefault: () => void }): void {
       event.preventDefault();
@@ -302,12 +303,18 @@ export default defineComponent({
     },
     afterCopy(): void{
       (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Data in clipboard'));
+    },
+    initColor(): void {
+      if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
+        this.color = state.generalParameters.podcastmakerColor;
+      }
     }
   },
 })
 </script>
 
 <style lang="scss">
+.octopus-app{
 #newsletter-modal {
   textarea {
     border: 2px solid #eee;
@@ -323,4 +330,5 @@ export default defineComponent({
     max-width: 60%;
   }
 }
+}
 </style>

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -139,6 +139,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .share-modal-border {
   border-right: solid 1px rgb(222, 226, 230);
   border-left: solid 1px rgb(222, 226, 230);
@@ -178,4 +179,5 @@ export default defineComponent({
     align-self: center;
   }
 }
+}
 </style>

package/src/components/mixins/handle403.ts

@@ -0,0 +1,17 @@
+import { AxiosError } from 'axios';
+import { defineComponent } from 'vue';
+export const handle403 = defineComponent({
+  methods: {
+    handle403(error: AxiosError): void {
+      if (403 === error.response?.status) {
+        if(!this.$store.state.authentication.isAuthenticated){
+          this.$router.push("/sso/login");
+        }else{
+          this.$router.push({
+            path: '/main/pub/error'
+          });
+        }
+      }
+    },
+  },
+});