@saooti/octopus-sdk 31.0.0 → 31.0.3

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

@@ -28,7 +28,6 @@
         class="d-flex align-items-center flex-grow-1 px-5"
       >
         <audio
-          v-if="!live"
           id="audio-player"
           :src="!live? audioUrl: undefined"
           autoplay
@@ -52,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"
@@ -194,6 +202,9 @@ export default defineComponent({
     commentsLoaded(): void {
       this.initComments(true);
     },
+    audioUrl(): void{
+      this.playerError = false;
+    }
   },
 
   mounted() {
@@ -202,6 +213,9 @@ export default defineComponent({
   },
   
   methods: {
+    stopPlayer(): void {
+      this.$store.commit('playerPlayPodcast');
+    },
     getListenerId(): string{
       let listenerId = this.getCookie("octopus_listenerId");
       if(!listenerId){
@@ -342,47 +356,49 @@ export default defineComponent({
       this.listenTime = 0;
     },
     async initHls(hlsStreamUrl: string): Promise<void> {
-      if(null === Hls){
-        //TODO -> Version light min quand ce sera possible
-        await import('hls.js/dist/hls.js').then((hlsLibrary) => {
-          Hls = hlsLibrary.default;
-        })
-          await import('hls.js').then((hlsLibrary) => {
-          Hls = hlsLibrary.default;
-        })
-      }
-      if (!Hls.isSupported()) {
-        throw 'Hls is not supported ! ';
-      }
-      const hls = new Hls();
-      hls.on(Hls.Events.MANIFEST_PARSED, async () => {
-        if(!this.live){ return; }
-        let downloadId = null;
-        try {
-          downloadId = await octopusApi.requestLiveDownloadId(
-            this.live.livePodcastId
-          );
-          await octopusApi.markPlayingLive(
-            this.live.livePodcastId,
-            downloadId,
-            'octopus',
-            this.$store.state.authentication.organisationId
-          );
-          this.setDownloadId(downloadId);
-        } catch (error) {
-          console.log('ERROR downloadId');
+      return new Promise<void>(async(resolve, reject) => {
+        if(null === Hls){
+          //TODO -> Version light min quand ce sera possible
+          await import('hls.js/dist/hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
+            await import('hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
         }
-        this.hlsReady = true;
-        const audio: HTMLElement|null = document.getElementById('audio-player');
-        hls.attachMedia((audio as HTMLAudioElement));
-        await (audio as HTMLAudioElement).play();
-        this.onPlay();
-        throw 400;
-      });
-      hls.on(Hls.Events.ERROR, async () => {
-        throw 'There is an error while reading media content';
+        if (!Hls.isSupported()) {
+          reject('Hls is not supported ! ');
+        }
+        const hls = new Hls();
+        hls.on(Hls.Events.MANIFEST_PARSED, async () => {
+          if(!this.live){ return; }
+          let downloadId = null;
+          try {
+            downloadId = await octopusApi.requestLiveDownloadId(
+              this.live.livePodcastId
+            );
+            await octopusApi.markPlayingLive(
+              this.live.livePodcastId,
+              downloadId,
+              'octopus',
+              this.$store.state.authentication.organisationId
+            );
+            this.setDownloadId(downloadId);
+          } catch (error) {
+            console.log('ERROR downloadId');
+          }
+          this.hlsReady = true;
+          const audio: HTMLElement|null = document.getElementById('audio-player');
+          hls.attachMedia((audio as HTMLAudioElement));
+          await (audio as HTMLAudioElement).play();
+          this.onPlay();
+          resolve();
+        });
+        hls.on(Hls.Events.ERROR, async() => {
+reject('There is an error while reading media content');
+        });
+        hls.loadSource(hlsStreamUrl);
       });
-      hls.loadSource(hlsStreamUrl);
     },
     async playLive(): Promise<void> {
       if (!this.live) return;
@@ -469,6 +485,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-container {
   position: fixed;
   overflow: hidden;
@@ -493,4 +510,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/PlayerButtons.vue

@@ -19,19 +19,10 @@
       :class="{
         'saooti-play2-bounty': isPaused,
         'saooti-pause-bounty': isPlaying,
+        'spinner-border':!isPaused&&!isPlaying
       }"
     />
   </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">
@@ -88,6 +79,9 @@ export default defineComponent({
 
   methods: {
     addKeyboardControl(event: KeyboardEvent): void{
+      if(!event || null ===event){return;}
+      const element = event.target as HTMLElement; 
+      if (!element || 'INPUT' == element.tagName.toUpperCase() || 'TEXTAREA' == element.tagName.toUpperCase()){return;}
       if (' ' === event.key || 'Spacebar' === event.key) {
         event.preventDefault();
         this.switchPausePlay();
@@ -110,9 +104,6 @@ export default defineComponent({
         this.onPause();
       }
     },
-    stopPlayer(): void {
-      this.$store.commit('playerPlayPodcast');
-    },
     onPlay(): void {
       this.$store.commit('playerPause', false);
     },
@@ -124,6 +115,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 .player-image {
   border-radius: 0.2rem;
   height: 2.4rem;
@@ -147,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'
+          });
+        }
+      }
+    },
+  },
+});

package/src/components/pages/Emission.vue

@@ -103,9 +103,11 @@
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
+import { handle403 } from '../mixins/handle403';
 import { Emission } from '@/store/class/general/emission';
 import ClassicLoading from '../form/ClassicLoading.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
+import { AxiosError } from 'axios';
 const PodcastFilterList = defineAsyncComponent(() => import('../display/podcasts/PodcastFilterList.vue'));
 const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
 const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
@@ -126,7 +128,7 @@ export default defineComponent({
     LiveHorizontalList,
     ClassicLoading
   },
-  mixins: [displayMethods],
+  mixins: [displayMethods, handle403],
   props: {
     emissionId: { default: undefined, type: Number},
     isEducation: { default: false, type: Boolean},
@@ -216,9 +218,13 @@ export default defineComponent({
         if (undefined !== this.emission.annotations.podcastAddict) count++;
         if (undefined !== this.emission.annotations.playerFm) count++;
         if (undefined !== this.emission.annotations.stitcher) count++;
+        if (undefined !== this.emission.annotations.pocketCasts) count++;
       }
       return count;
     },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
   },
   watch: {
     emissionId(): void {
@@ -230,12 +236,20 @@ export default defineComponent({
     this.getEmissionDetails();
   },
   methods: {
+    initError():void{
+      this.error = true;
+      this.loaded = true;
+    },
     async getEmissionDetails(): Promise<void> {
       this.loaded = false;
       this.error = false;
       try {
         const data: Emission = await octopusApi.fetchEmission(this.emissionId);
         this.emission = data;
+        if(this.emission.orga.private && this.filterOrga!==this.emission.orga.id){
+          this.initError();
+          return;
+        }
         this.$emit('emissionTitle', this.name);
         this.loaded = true;
         if (!this.emission.annotations) return;
@@ -251,9 +265,9 @@ export default defineComponent({
           this.notExclusive =
             'true' === this.emission.annotations.notExclusive ? true : false;
         }
-      } catch {
-        this.error = true;
-        this.loaded = true;
+      } catch(error) {
+        this.handle403((error as AxiosError));
+        this.initError();
       }
     },
     fetch(/* podcasts */) {

package/src/components/pages/Error403Page.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="page-box page-box-absolute bg-white justify-content-evenly">
+    <img
+      class="logo-octopus"
+      src="/img/logo_octopus_final.svg"
+      :alt="$t('Logo of main page')"
+    >
+    <h2>{{ $t('You do not have the right to access this page' ) }}</h2>
+    <a
+      class="btn btn-link"
+      href="/sso/logout"
+    >{{ $t('Logout') }}</a>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'Error403Page',
+  mounted() {
+    document.title = this.$store.state.general.metaTitle;
+  },
+});
+</script>

package/src/components/pages/Participant.vue

@@ -82,9 +82,11 @@
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
+import { handle403 } from '../mixins/handle403';
 import { Participant } from '@/store/class/general/participant';
 import ClassicLoading from '../form/ClassicLoading.vue';
 import { defineComponent, defineAsyncComponent } from 'vue';
+import { AxiosError } from 'axios';
 const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
 const PodcastFilterList = defineAsyncComponent(() => import('../display/podcasts/PodcastFilterList.vue'));
 const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
@@ -97,7 +99,7 @@ export default defineComponent({
     PodcastList,
     ClassicLoading
   },
-  mixins: [displayMethods],
+  mixins: [displayMethods, handle403],
   props: {
     participantId: { default: undefined, type: Number},
   },
@@ -160,6 +162,9 @@ export default defineComponent({
       }
       return false;
     },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
   },
   watch: {
     participant: {
@@ -173,16 +178,24 @@ export default defineComponent({
     this.getParticipantDetails();
   },
   methods: {
+    initError():void{
+      this.error = true;
+      this.loaded = true;
+    },
     async getParticipantDetails(): Promise<void> {
       this.loaded = false;
       try {
         const data = await octopusApi.fetchParticipant(this.participantId ? this.participantId.toString(): "");
+        if(data && data.orga && data.orga.private && this.filterOrga!==data.orga.id){
+          this.initError();
+          return;
+        }
         this.participant = data;
         this.$emit('participantTitle', this.name);
         this.loaded = true;
-      } catch {
-        this.error = true;
-        this.loaded = true;
+      } catch(error) {
+        this.handle403((error as AxiosError));
+        this.initError();
       }
     },
     updateParticipant(participant: Participant): void {
@@ -194,10 +207,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.octopus-app{
 @media (min-width: 950px) {
   .participant-desc {
     max-width: 50%;
     line-height: 1.5em;
   }
 }
+}
 </style>

package/src/components/pages/Playlist.vue

@@ -53,8 +53,10 @@ import PodcastList from '../display/playlist/PodcastList.vue';
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../store/paramStore';
 import { displayMethods } from '../mixins/functions';
+import { handle403 } from '../mixins/handle403';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent, defineAsyncComponent } from 'vue';
+import { AxiosError } from 'axios';
 const ShareButtons = defineAsyncComponent(() => import('../display/sharing/ShareButtons.vue'));
 const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
 const SharePlayer = defineAsyncComponent(() => import('../display/sharing/SharePlayer.vue'));
@@ -66,7 +68,7 @@ export default defineComponent({
     SharePlayer,
     ClassicLoading
   },
-  mixins:[displayMethods],
+  mixins:[displayMethods, handle403],
   props: {
     playlistId: { default: undefined, type: Number},
     isEducation: { default: false, type: Boolean},
@@ -117,6 +119,9 @@ export default defineComponent({
       }
       return false;
     },
+    filterOrga(): string {
+      return this.$store.state.filter.organisationId;
+    },
   },
   watch: {
     playlistId() {
@@ -128,15 +133,24 @@ export default defineComponent({
     this.getPlaylistDetails();
   },
   methods: {
+    initError():void{
+      this.error = true;
+      this.loaded = true;
+    },
     async getPlaylistDetails(): Promise<void> {
       try {
         this.loaded = false;
         this.error = false;
         const data: Playlist = await octopusApi.fetchPlaylist(this.playlistId ? this.playlistId.toString(): "");
         this.playlist = data;
+        if(this.playlist.organisation.private && this.filterOrga!==this.playlist.organisation.id){
+          this.initError();
+          return;
+        }
         this.$emit('playlistTitle', this.playlist.title);
-      } catch {
-        this.error = true;
+      } catch(error) {
+        this.handle403((error as AxiosError));
+        this.initError();
       }
       this.loaded = true;
     },