@saooti/octopus-sdk 31.0.35 → 31.0.38

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

@@ -0,0 +1,209 @@
+<template>
+  <button
+    v-if="isDownloadButton"
+    class="text-dark"
+    :class="getClass()"
+    :title="$t('Downloading')"
+    @click="onDownload(podcast.audioUrl, podcast.title)"
+  >
+    <div class="saooti-download-bounty" />
+  </button>
+  <template
+    v-for="button in arrayShareButtons"
+    :key="button.title"
+  >
+    <a
+      v-if="button.condition"
+      rel="noopener"
+      target="_blank"
+      :href="button.url"
+      :class="getClass(button.className)"
+      :title="button.title"
+    >
+      <div
+        :class="button.icon"
+      >
+        <div
+          v-for="index in button.nbPath"
+          :key="index"
+          :class="'path'+(index+1)"
+        />
+      </div>
+    </a>
+  </template>
+  <a
+    v-if="''!==rssUrl"
+    rel="noopener"
+    target="_blank"
+    :class="getClass()"
+    :href="rssUrl"
+    :title="$t('Subscribe to this emission')"
+    @click.prevent="openPopup()"
+  >
+    <div class="saooti-rss-bounty" />
+  </a>
+  <a
+    rel="noopener"
+    target="_blank"
+    :class="getClass()"
+    :title="$t('Copy this page URL')"
+    @click="onCopyCode(urlPage,afterCopy)"
+  >
+    <div class="saooti-link" />
+  </a>
+  <a
+    v-if="podcast"
+    rel="noopener"
+    target="_blank"
+    :class="getClass()"
+    :title="$t('Share newsletter')"
+    @click="newsletter = true"
+  >
+    <div class="saooti-newsletter" />
+  </a>
+  <a
+    rel="noopener"
+    target="_blank"
+    :class="getClass()"
+    :title="$t('Share QR Code')"
+    @click="qrCode = true"
+  >
+    <div class="saooti-qrcode" />
+  </a>
+  <ClipboardModal
+    v-if="dataRSSSave"
+    :link="rssUrl"
+    :emission="emission"
+    @close="dataRSSSave = false"
+    @copy="afterCopy"
+  />
+  <NewsletterModal
+    v-if="newsletter"
+    :closable="true"
+    :podcast="podcast"
+    @close="newsletter = false"
+  />
+  <QrCodeModal
+    v-if="qrCode"
+    :closable="true"
+    :url-page="urlPage"
+    @close="qrCode = false"
+  />
+  <Snackbar
+    ref="snackbar"
+    position="bottom-left"
+  />
+</template>
+
+<script lang="ts">
+import { Emission } from '@/store/class/general/emission';
+import { Podcast } from '@/store/class/general/podcast';
+import { state } from '../../../store/paramStore';
+import Snackbar from '../../misc/Snackbar.vue';
+import { displayMethods } from '../../mixins/functions';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import SnackbarVue from '../../misc/Snackbar.vue';
+const ClipboardModal = defineAsyncComponent(() => import('../../misc/modal/ClipboardModal.vue'));
+const NewsletterModal = defineAsyncComponent(() => import('../../misc/modal/NewsletterModal.vue'));
+const QrCodeModal = defineAsyncComponent(() => import('../../misc/modal/QrCodeModal.vue'));
+export default defineComponent({
+  components: {
+    ClipboardModal,
+    NewsletterModal,
+    QrCodeModal,
+    Snackbar,
+  },
+
+  mixins: [displayMethods],
+
+  props: {
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    emission: { default: undefined, type: Object as ()=> Emission},
+    participantId: { default: undefined, type: Number},
+    organisationId: { default: undefined, type: String},
+    notExclusive: { default: true, type: Boolean},
+  },
+
+  data() {
+    return {
+      dataRSSSave: false as boolean,
+      newsletter: false as boolean,
+      qrCode: false as boolean,
+    };
+  },
+  computed: {
+    arrayShareButtons(){
+      return [
+        { title: 'Facebook', icon:'saooti-facebook-bounty', nbPath:0, className:'btn-facebook', url :`https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`, condition: true},
+        { title: 'Twitter', icon:'saooti-twitter-bounty', nbPath:0, className:'btn-twitter', url :`https://twitter.com/intent/tweet?text=${this.urlPage}`, condition: true},
+        { title: 'Linkedin', icon:'saooti-linkedin1', nbPath:0, className:'btn-linkedin', url :`https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`, condition: true},
+        { title: 'Whatsapp', icon:'saooti-Whatsapp', nbPath:3, className:'btn-whatsapp', url :`whatsapp://send?text=${this.urlPage}`, condition:  window.matchMedia('(hover: none)').matches}
+      ]
+    },
+    isDownloadButton(): boolean{
+      return this.isDownloadButtonParam && undefined!==this.podcast && (!this.podcast.tags || !this.podcast.tags.includes('copyright'));
+    },
+    isDownloadButtonParam(): boolean {
+      return (state.podcastPage.downloadButton as boolean);
+    },
+    urlPage(): string{
+      return window.location.href;
+    },
+    verticalDisplay(): boolean {
+      return (
+        !this.authenticated &&
+        !this.participantId &&
+        !this.organisationId &&
+        !this.notExclusive
+      );
+    },
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+    rssUrl(): string {
+      let api = state.generalParameters.ApiUri+ 'rss/';
+      if (this.emission){
+        return api +'emission/' + this.emission.emissionId + '.rss';
+      }
+      if (this.organisationId){
+        return api +'productor/' + this.organisationId + '.rss';
+      }
+      if (this.participantId){
+        return api +'participant/' + this.participantId + '.rss';
+      }
+      return '';
+    },
+  },
+
+  methods: {
+    getClass(className='btn-rss'): string{
+      let returnString = `btn ${className} share-btn mb-2`;
+      returnString+= this.verticalDisplay ? '' : ' mx-2';
+      return returnString;
+    },
+    openPopup(): void {
+      this.dataRSSSave = !this.dataRSSSave;
+    },
+    afterCopy(): void{
+      (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Link in clipboard'));
+    },
+    onDownload(urlToDownload: string, nameOfDownload: string): void{
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', urlToDownload, true);
+      xhr.responseType = 'blob';
+      xhr.onload = function() {
+        const urlCreator = window.URL || window.webkitURL;
+        const imageUrl = urlCreator.createObjectURL(this.response);
+        const tag = document.createElement('a');
+        tag.href = imageUrl;
+        tag.target = '_blank';
+        tag.download = nameOfDownload.replace(/ /g, '_');
+        document.body.appendChild(tag);
+        tag.click();
+        document.body.removeChild(tag);
+      };
+      xhr.send();
+    },
+  },
+})
+</script>

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,52 +35,30 @@
           </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">
             <hr class="dropdown-divider">
-            <a
-              href="https://help.octopus.saooti.com/Aide/"
-              class="dropdown-item"
-              rel="noopener"
-              target="_blank"
-            >
-              {{ $t('Help') }}
-            </a>
-            <a
-              href="https://help.octopus.saooti.com/"
-              class="dropdown-item"
-              rel="noopener"
-              target="_blank"
-            >
-              {{ $t('TutoMag') }}
-            </a>
+            <template v-for="helpLink in helpLinks" :key="helpLink.title">
+              <a
+               :href="helpLink.href"
+                class="dropdown-item"
+                rel="noopener"
+                target="_blank"
+              >
+                {{ helpLink.title }}
+              </a>
+            </template>
           </template>
           <hr class="dropdown-divider">
           <a
@@ -90,6 +68,12 @@
             {{ $t('Logout') }}
           </a>
         </template>
+        <router-link
+          class="dropdown-item"
+          to="/main/pub/contact"
+        >
+          {{ $t('Contact') }}
+        </router-link>
       </div>
     </div>
   </div>
@@ -104,20 +88,26 @@ export default defineComponent({
   props: {
     isEducation: { default: false, type: Boolean},
   },
-
   computed: {
+    helpLinks(){
+      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: (state.generalParameters.isContribution as boolean)},
+        {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: (state.generalParameters.isOrganisation as boolean)}];
+    },
+    
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
     authenticated(): boolean {
       return this.$store.state.authentication.isAuthenticated;
     },
-    isOrganisation(): boolean {
-      return (state.generalParameters.isOrganisation as boolean);
-    },
-    isContribution(): boolean {
-      return (state.generalParameters.isContribution as boolean);
-    },
   },
 
   methods: {

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%;