@saooti/octopus-sdk 31.0.34 → 31.0.37

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

@@ -77,6 +77,7 @@
 </template>
 
 <script lang="ts">
+import { orgaComputed } from '../../mixins/orgaComputed';
 import { state } from '../../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
 import { Podcast } from '@/store/class/general/podcast';
@@ -96,7 +97,7 @@ export default defineComponent({
     SharePlayerTypes,
     ClassicCheckbox
   },
-
+  mixins:[orgaComputed],
   props: {
     podcast: { default: undefined, type: Object as ()=> Podcast},
     emission: { default: undefined, type: Object as ()=> Emission},
@@ -126,7 +127,7 @@ export default defineComponent({
     displayChoiceAllEpisodes():boolean{
       return !this.podcast || this.isEmission || this.isLargeEmission;
     },
-    miniplayerBaseUrl(): string{
+    baseUrl(): string{
       return (state.podcastPage.MiniplayerUri as string); 
     },
     isEmission(): boolean {
@@ -164,67 +165,36 @@ export default defineComponent({
       }
       return false;
     },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     iFrameSrc(): string {
       const url = [''];
-      let iFrameNumber = '/' + this.iFrameNumber;
-      if (this.displayChoiceAllEpisodes && 'all' === this.episodeNumbers) {
-        iFrameNumber = '/0';
-      }
+      let iFrameNumber = this.displayChoiceAllEpisodes && 'all' === this.episodeNumbers ? '/0' : '/' + this.iFrameNumber;
+      url.push(`${this.baseUrl}miniplayer/`);
       if (!this.podcast && !this.playlist && this.emission) {
-        if ('default' === this.iFrameModel) {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/emission/${this.emission.emissionId}${iFrameNumber}`
-          );
-        }else if('large' === this.iFrameModel) {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/emissionLarge/${this.emission.emissionId}${iFrameNumber}`
-          );
-        }
-        else {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.emission.emissionId}${iFrameNumber}`
-          );
+        switch (this.iFrameModel) {
+          case 'default': url.push('emission'); break;
+          case 'large': url.push('emissionLarge'); break;
+          default: url.push(`${this.iFrameModel}`);break;
         }
+        url.push(`/${this.emission.emissionId}${iFrameNumber}`);
       } else if (this.playlist) {
-        if ('default' === this.iFrameModel) {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/playlist/${this.playlist.playlistId}`
-          );
-        } else if('large' === this.iFrameModel) {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/playlistLarge/${this.playlist.playlistId}`
-          );
-        }else {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.playlist.playlistId}`
-          );
+        switch (this.iFrameModel) {
+          case 'default': url.push('playlist'); break;
+          case 'large': url.push('playlistLarge'); break;
+          default: url.push(`${this.iFrameModel}`);break;
         }
+        url.push(`/${this.playlist.playlistId}`);
       } else if(this.emission && this.podcast){
+        url.push(`${this.iFrameModel}/`);
         if (this.isEmission || this.isLargeEmission) {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`
-          );
+          url.push(`${this.emission.emissionId}${iFrameNumber}/${this.podcast.podcastId}`);
         } else if (this.isLargeSuggestion) {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}${iFrameNumber}`
-          );
+          url.push(`${this.podcast.podcastId}${iFrameNumber}`);
         }  else {
-          url.push(
-            `${this.miniplayerBaseUrl}miniplayer/${this.iFrameModel}/${this.podcast.podcastId}`
-          );
+          url.push(`${this.podcast.podcastId}`);
         }
       }
       url.push('?distributorId=' + this.organisationId);
-      const theme = this.theme;
-      url.push(
-        '&color=' +
-          this.color.substring(1) +
-          '&theme=' +
-          theme.substring(1)
-      );
+      url.push(`&color=${this.color.substring(1)}&theme=${this.theme.substring(1)}`);
       if (!this.proceedReading) {
         url.push('&proceed=false');
       }
@@ -301,9 +271,7 @@ export default defineComponent({
       if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
         data = this.$store.state.organisation.attributes;
       }else{
-        data= await octopusApi.fetchOrganisationAttributes(
-          state.generalParameters.organisationId ? state.generalParameters.organisationId : ""
-        );
+        data= await octopusApi.fetchOrganisationAttributes(this.myOrganisationId||'');
       }
       this.color = Object.prototype.hasOwnProperty.call(data,'COLOR') ? data.COLOR : '#40a372';
       this.theme = Object.prototype.hasOwnProperty.call(data,'THEME') ? data.THEME : '#000000';

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

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="btn-split"
+    @mouseleave="mobileHoverEffect=false"
+  >
+    <div class="d-flex flex-wrap">
+      <slot name="inside-button" />
+    </div>
+    <div class="label">
+      {{ title }}
+    </div> 
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  props: {
+    title: { default: '', type:String},
+  },
+   
+  data() {
+    return {
+      mobileHoverEffect:false as boolean,
+    };
+  },
+  computed:{
+    isMobile(): boolean {
+      return window.matchMedia('(hover: none)').matches;
+    },
+  },
+
+  methods: {
+    linkClick(event: { preventDefault: () => void; }){
+      if(this.isMobile && !this.mobileHoverEffect){
+        this.mobileHoverEffect = true;
+        event.preventDefault();
+      }
+    },
+  },
+})
+</script>

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

@@ -1,31 +1,32 @@
 <template>
   <div class="module-box flex-grow-0">
-    <h3 class="mb-3">
+    <h3 class="mb-2 height-40">
       {{ $t('Subscribe emission') }}
     </h3>
-    <div class="d-flex flex-wrap">
-      <template
-        v-for="sub in subscriptions"
-        :key="sub.name"
+    <template
+      v-for="(sub, index) in subscriptionsDisplay"
+      :key="sub.name"
+    >
+      <a
+        rel="noopener"
+        target="_blank"
+        :class="[
+          0 === index? 'first': '',
+          subscriptionsDisplay.length-1 === index? 'last': '',
+        ]"
+        class="btn share-btn mb-2 mx-2"
+        :href="sub.url"
+        :title="sub.name"
       >
-        <a
-          v-if="getUrl(sub.name)"
-          rel="noopener"
-          target="_blank"
-          class="btn me-3 mb-2 share-btn"
-          :href="getUrl(sub.name)"
-          :title="sub.name"
-        >
-          <span :class="sub.icon">
-            <div
-              v-for="index in getPathNumber(sub.name)"
-              :key="index"
-              :class="'path'+(index+1)"
-            />
-          </span>
-        </a>
-      </template>
-    </div>
+        <span :class="sub.icon">
+          <div
+            v-for="indexPath in getPathNumber(sub.name)"
+            :key="indexPath"
+            :class="'path'+(indexPath+1)"
+          />
+        </span>
+      </a>
+    </template>
   </div>
 </template>
 
@@ -37,22 +38,23 @@ export default defineComponent({
     emission: { default: undefined, type: Object as ()=> Emission},
     podcastId: { default: undefined, type: Number},
   },
-   
-  data() {
-    return {
-      subscriptions : [
-        {name : 'amazon', icon : 'saooti-amazon'},
-        {name:'applePodcast', icon:'saooti-apple'},
-        {name:'deezer', icon:'saooti-deezer'},
-        {name:'googlePodcasts', icon:"saooti-google-podcasts"},
-        {name:'playerFm', icon: 'saooti-saooti-playerfm'},
-        {name:'pocketCasts', icon:'saooti-pocket-casts'},
-        {name:'podcastAddict', icon: 'saooti-podcast-addict'},
-        {name:'radioline', icon:'saooti-radioline'},
-        {name:'spotify', icon:'saooti-spotify'},
-        {name:'stitcher', icon:'saooti-stitcher-logo'},
-        {name:'tunein', icon:'saooti-tunin'}] as Array<{name:string, icon:string}>,
-    };
+  computed:{
+    subscriptionsDisplay(){
+      const sub = [
+        {name : 'amazon', icon : 'saooti-amazon', url : this.getUrl('amazon')},
+        {name:'applePodcast', icon:'saooti-apple', url : this.getUrl('applePodcast')},
+        {name:'deezer', icon:'saooti-deezer', url : this.getUrl('deezer')},
+        {name:'googlePodcasts', icon:"saooti-google-podcasts", url : this.getUrl('googlePodcasts')},
+        {name:'playerFm', icon: 'saooti-saooti-playerfm', url : this.getUrl('playerFm')},
+        {name:'pocketCasts', icon:'saooti-pocket-casts', url : this.getUrl('pocketCasts')},
+        {name:'podcastAddict', icon: 'saooti-podcast-addict', url : this.getUrl('podcastAddict')},
+        {name:'radioline', icon:'saooti-radioline', url : this.getUrl('radioline')},
+        {name:'spotify', icon:'saooti-spotify', url : this.getUrl('spotify')},
+        {name:'stitcher', icon:'saooti-stitcher-logo', url : this.getUrl('stitcher')},
+        {name:'tunein', icon:'saooti-tunin', url : this.getUrl('tunein')}
+      ];
+      return sub.filter(item=> item.url);
+    }
   },
 
   methods: {
@@ -77,3 +79,8 @@ export default defineComponent({
   },
 })
 </script>
+<style lang="scss">
+.height-40{
+  height: 40px;
+}
+</style>

package/src/components/misc/Footer.vue

@@ -119,7 +119,7 @@ export default defineComponent({
         {title : this.$t('Home'), routeName: 'home', condition : true},
         {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
         {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
-        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && !this.filterOrga},
+        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && !this.$store.state.filter.organisationId},
         {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
         {title : this.$t('Speakers'), routeName: 'participants', condition : true},]
     },
@@ -129,9 +129,6 @@ export default defineComponent({
         {title : this.$t('Term of use'), routeName: '/main/pub/cgu'},
         {title : this.$t('Used libraries'), routeName: "/main/pub/libraries"}]
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },

package/src/components/misc/HomeDropdown.vue

@@ -35,32 +35,16 @@
           </router-link>
         </template>
         <template v-else>
-          <router-link
-            v-if="isContribution && !isPodcastmaker"
-            class="btn btn-primary w-100"
-            to="/main/priv/upload"
+          <template
+            v-for="routerBack in routerBackoffice"
+            :key="routerBack.path"
           >
-            {{ $t('Upload') }}
-          </router-link>
-          <template v-if="!isPodcastmaker">
-            <router-link
-              to="/main/priv/backoffice"
-              class="show-phone dropdown-item"
-            >
-              {{ $t('My space') }}
-            </router-link>
-            <router-link
-              class="dropdown-item"
-              to="/main/priv/edit/profile"
-            >
-              {{ $t('Edit my profile') }}
-            </router-link>
             <router-link
-              v-if="isOrganisation"
-              class="dropdown-item"
-              to="/main/priv/edit/organisation"
+              v-if="!isPodcastmaker && routerBack.condition"
+              :class="routerBack.class"
+              :to="routerBack.path"
             >
-              {{ $t('Edit my organisation') }}
+              {{ routerBack.title }}
             </router-link>
           </template>
           <template v-if="!isEducation">
@@ -90,6 +74,12 @@
             {{ $t('Logout') }}
           </a>
         </template>
+        <router-link
+          class="dropdown-item"
+          to="/main/pub/contact"
+        >
+          {{ $t('Contact') }}
+        </router-link>
       </div>
     </div>
   </div>
@@ -104,8 +94,20 @@ export default defineComponent({
   props: {
     isEducation: { default: false, type: Boolean},
   },
-
   computed: {
+ /*    helpLink(){
+      return [
+        {title:this.$t('Help'), href:'https://help.octopus.saooti.com/Aide/'},
+        {title:this.$t('TutoMag'),href:"https://help.octopus.saooti.com/"}];
+    }, */
+    routerBackoffice(){
+      return [
+        {title:this.$t('Upload'),class:"btn btn-primary w-100", path:'/main/priv/upload', condition: this.isContribution},
+        {title:this.$t('My space'),class:"show-phone dropdown-item", path:'/main/priv/backoffice', condition: true},
+        {title:this.$t('Edit my profile'),class:"dropdown-item", path:'/main/priv/edit/profile', condition: true},
+        {title:this.$t('Edit my organisation'),class:"dropdown-item", path:'/main/priv/edit/organisation', condition: this.isOrganisation}];
+    },
+    
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },

package/src/components/misc/LeftMenu.vue

@@ -131,13 +131,9 @@ export default defineComponent({
     async onOrganisationSelected(organisation: Organisation|undefined) {
       if (organisation && organisation.id) {
         await this.selectOrganisation(organisation.id);
-      } else {
-        if (this.$route.query.productor) {
-          const queries = this.$route.query;
-          this.$router.push({ query: {...queries, ...{productor: undefined} } });
-        }
-        this.$store.commit('filterOrga', { orgaId: undefined });
+        return;
       }
+      this.removeSelectedOrga();
     },
   },
 })
@@ -149,7 +145,7 @@ export default defineComponent({
   position: fixed;
   top: 3rem;
   bottom: 0;
-  left: 0;
+  right: 0;
   z-index: 10;
   background: #fff;
   width: 20%;

package/src/components/misc/TopBar.vue

@@ -3,11 +3,6 @@
     class="top-bar-container"
     :class="{ 'shadow-element': scrolled }"
   >
-    <div
-      class="saooti-burger-menu"
-      :title="$t('open left Menu')"
-      @click="onDisplayMenu(false)"
-    />
     <router-link
       class="top-bar-logo"
       :to="{
@@ -51,6 +46,11 @@
         </router-link>
       </template>
     </div>
+    <div
+      class="saooti-burger-menu"
+      :title="$t('open left Menu')"
+      @click="onDisplayMenu(false)"
+    />
     <div class="d-flex flex-column">
       <div class="hosted-by">
         <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-darker">Saooti</span>
@@ -104,7 +104,7 @@ export default defineComponent({
   computed: {
     routerLinkArray(){
       return [
-        {title : this.$t('Live'), routeName: 'lives', condition : this.isLiveTab &&((this.filterOrga && this.filterOrgaLive) || !this.filterOrga)},
+        {title : this.$t('Live'), routeName: 'lives', condition : (state.generalParameters.isLiveTab as boolean) &&((this.filterOrga && this.filterOrgaLive) || !this.filterOrga)},
         {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
         {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
         {title : this.$t('Speakers'), routeName: 'participants', condition : true},
@@ -124,9 +124,6 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    isLiveTab(): boolean {
-      return (state.generalParameters.isLiveTab as boolean);
-    },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
@@ -199,14 +196,10 @@ export default defineComponent({
     async onOrganisationSelected(organisation: Organisation | undefined): Promise<void> {
       if (organisation && organisation.id) {
         await this.selectOrganisation(organisation.id);
-      } else {
-        this.organisationId = undefined;
-        if (this.$route.query.productor) {
-          const queries = this.$route.query;
-          this.$router.push({ query: { ...queries, ...{productor: undefined} } });
-        }
-        this.$store.commit('filterOrga', { orgaId: undefined });
+        return;
       }
+      this.organisationId = undefined;
+      this.removeSelectedOrga();
     },
   },
 })

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

@@ -9,7 +9,7 @@
           </div>
           <button
             type="button"
-            class="btn-close"
+            class="btn-close btn-close-white"
             title="Close"
             @click="closePopup"
           />

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

@@ -13,7 +13,7 @@
           <button
             v-if="closable"
             type="button"
-            class="btn-close"
+            class="btn-close btn-close-white"
             title="Close"
             @click="closePopup"
           />

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

@@ -12,7 +12,7 @@
           </h5>
           <button
             type="button"
-            class="btn-close"
+            class="btn-close btn-close-white"
             title="Close"
             @click="closePopup"
           />

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

@@ -13,7 +13,7 @@
             </h5>
             <button
               type="button"
-              class="btn-close"
+              class="btn-close btn-close-white"
               title="Close"
               @click="closePopup"
             />

package/src/components/mixins/organisationFilter.ts

@@ -29,5 +29,11 @@ export const orgaFilter = defineComponent({
         this.handle403((error as AxiosError));
       }
     },
+    removeSelectedOrga(): void{
+      if (this.$route.query.productor) {
+        this.$router.push({ query: {...this.$route.query, ...{productor: undefined} } });
+      }
+      this.$store.commit('filterOrga', { orgaId: undefined });
+    }
   },
 });

package/src/components/mixins/player/playerLive.ts

@@ -58,7 +58,7 @@ export const playerLive = defineComponent({
         let hls = new Hls();
         if(this.$store.state.authentication.isAuthenticated && this.$store.state.oAuthParam.accessToken){
           hls = new Hls({xhrSetup:
-            (xhr: any) => {
+            (xhr: XMLHttpRequest) => {
               xhr.setRequestHeader("Authorization", "Bearer " + this.$store.state.oAuthParam.accessToken);
             }
             }

package/src/components/pages/Category.vue

@@ -3,7 +3,7 @@
     <h1>{{ title }}</h1>
     <PodcastList
       :first="0"
-      :size="12"
+      :size="30"
       :iab-id="iabId"
       :organisation-id="filterOrga"
     />

package/src/components/pages/Emission.vue

@@ -30,11 +30,6 @@
               />
               <!-- eslint-enable -->
             </div>
-            <ShareButtons
-              v-if="pageParameters.isRssButton"
-              :emission="emission"
-              :big-round="true"
-            />
           </div>
           <SubscribeButtons
             v-if="pageParameters.isShareButtons && countLink >= 1"
@@ -140,7 +135,6 @@ export default defineComponent({
         isShareButtons: (state.podcastPage.ShareButtons as boolean),
         isSharePlayer: (state.podcastPage.SharePlayer as boolean),
         isShareDistribution:(state.podcastPage.ShareDistribution as boolean),
-        isRssButton:(state.emissionPage.rssButton as boolean),
         isDisplayPodcasts:(state.emissionPage.isDisplayPodcasts as boolean),
       };
     },

package/src/components/pages/Emissions.vue

@@ -67,7 +67,7 @@ export default defineComponent({
   data() {
     return {
       first: 0 as number,
-      size: 12 as number,
+      size: 30 as number,
       searchPattern: '' as string,
       organisationId: undefined as string | undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO

package/src/components/pages/Error403Page.vue

@@ -1,24 +1,60 @@
 <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>
+    <div class="not-auth-content d-flex-column justify-content-between">
+      <div class="d-flex flex-column justify-content-around">
+        <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>
+      </div>
+      <img
+        class="stop-octopus-img"
+        src="/img/403.jpeg"
+        :alt="$t('You do not have the right to access this page')"
+      >
+    </div>
+    
     <a
       class="btn btn-primary"
-      href="/sso/logout"
-    >{{ $t('Logout') }}</a>
+      :href="authenticated ?'/sso/logout':'/sso/login'"
+    >{{ authText }}</a>
   </div>
 </template>
 
 <script lang="ts">
+import { state } from '../../store/paramStore';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Error403Page',
+  computed: {
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+    authText():string{
+      return this.authenticated ? this.$t('Logout') : this.$t('Login');
+    }
+  },
   mounted() {
     document.title = this.$store.state.general.metaTitle;
   },
 });
 </script>
+<style lang="scss">
+.octopus-app .not-auth-content{
+  @media (max-width: 960px) {
+    align-items: center;
+  }
+  .stop-octopus-img{
+    width: 600px;
+    height: auto;
+    @media (max-width: 1400px) {
+      width: 400px;
+    }
+    @media (max-width: 450px) {
+      width: 80%;
+    }
+  }
+}
+</style>