@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -0,0 +1,225 @@
+<template>
+  <button
+    v-if="isDownloadButton"
+    class="text-dark"
+    :class="getClass()"
+    :title="$t('Downloading')"
+    @click="onDownload(podcast.audioUrl, podcast.title)"
+  >
+    <div class="saooti-download" />
+  </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 && displayRss"
+    rel="noopener"
+    target="_blank"
+    :class="getClass()"
+    :href="rssUrl"
+    :title="titleRssButton"
+    @click.prevent="openPopup()"
+  >
+    <div class="saooti-rss" />
+  </a>
+  <button
+    :class="getClass()"
+    :title="$t('Copy this page URL')"
+    @click="onCopyCode(urlPage,afterCopy)"
+  >
+    <div class="saooti-link" />
+  </button>
+  <button
+    v-if="podcast || emission ||playlist"
+    :class="getClass()"
+    :title="$t('Share newsletter')"
+    @click="newsletter = true"
+  >
+    <div class="saooti-newsletter" />
+  </button>
+  <button
+    :class="getClass()"
+    :title="$t('Share QR Code')"
+    @click="qrCode = true"
+  >
+    <div class="saooti-qrcode" />
+  </button>
+  <ClipboardModal
+    v-if="dataRSSSave"
+    :link="rssUrl"
+    :emission="emission"
+    @close="dataRSSSave = false"
+    @copy="afterCopy"
+  />
+  <NewsletterModal
+    v-if="newsletter"
+    :closable="true"
+    :podcast="podcast"
+    :emission="emission"
+    :playlist="playlist"
+    @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 octopusApi from '@saooti/octopus-api';
+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';
+import { Playlist } from '@/store/class/general/playlist';
+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},
+    playlist: { default: undefined, type: Object as ()=>Playlist},
+    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,
+      displayRss: false as boolean,
+    };
+  },
+  computed: {
+    titleRssButton(): string{
+      if(this.participantId){
+        return this.$t('Subscribe to this participant');
+      }
+      if(this.emission){
+        return this.$t('Subscribe to this emission');
+      }
+      return this.$t('Subscribe to this RSS feed');
+    },
+    arrayShareButtons(){
+      return [
+        { title: 'Facebook', icon:'saooti-facebook', nbPath:0, className:'btn-facebook', url :`https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`, condition: true},
+        { title: 'Twitter', icon:'saooti-twitter', nbPath:0, className:'btn-twitter', url :`https://twitter.com/intent/tweet?text=${this.urlPage}`, condition: true},
+        { title: 'Linkedin', icon:'saooti-linkedin', 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 '';
+    },
+  },
+  async created(){
+    if(this.organisationId){
+      this.displayRss = await octopusApi.fetchDataPublic<boolean>(0,`rss/participants/allowed/${this.organisationId}`);
+    }else{
+      this.displayRss = true;
+    }
+  },
+
+  methods: {
+    getClass(className='btn-rss'): string{
+      let returnString = `btn ${className} share-btn mb-2 text-dark`;
+      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/ShareDistribution.vue

@@ -3,107 +3,110 @@
     <h3>{{ $t('Distribute') }}</h3>
     <p class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
-      <span class="primary-color text-break">{{ rss }}</span>
+      <span class="primary-darker hide-small-screen text-break">{{ rss }}</span>
       <input
         type="button"
         :value="$t('Copy')"
         class="btn btn-primary"
+        :title="$t('Copy')"
         @click="onCopyCode(rss, afterCopy)"
-        :aria-label="$t('Copy')"
-      />
+      >
     </p>
-    <RssSection :emission="emission" v-if="emission" />
+    <RssSection
+      v-if="emission"
+      :emission="emission"
+    />
     <div class="sharing-distribution-container">
-      <router-link
-        v-bind:to="'/main/priv/distribution/amazon/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-amazon">
-          <div class="path1"></div>
-          <div class="path2"></div>
-          <div class="path3"></div>
-        </span> Amazon Music | Podcasters
-      </router-link>
-       <router-link
-        v-bind:to="'/main/priv/distribution/apple/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-apple" />Apple Podcast / iTunes
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/deezer/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-deezer" />Deezer
-      </router-link>
-       <router-link
-        v-bind:to="'/main/priv/distribution/PlayerFM/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-playerfm" />PlayerFM
-      </router-link>
-       <router-link
-        v-bind:to="'/main/priv/distribution/PocketCasts/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-pocket-casts"></span>Pocket Casts
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/PodcastAddict/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-podcast-addict" />Podcast Addict
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/radioline/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-radioline" />Radioline
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/spotify/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-spotify" />Spotify
-      </router-link>
-
-      <router-link
-        v-bind:to="'/main/priv/distribution/Stitcher/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-stitcher-logo">
-          <div class="path1"></div>
-          <div class="path2"></div>
-          <div class="path3"></div>
-          <div class="path4"></div>
-          <div class="path5"></div>
-          <div class="path6"></div>
-          <div class="path7"></div>
-          <div class="path8"></div>
-          <div class="path9"></div>
-          <div class="path10"></div>
-          <div class="path11"></div>
-          <div class="path12"></div>
-          <div class="path13"></div>
-          <div class="path14"></div>
-          <div class="path15"></div>
-          <div class="path16"></div>
-          <div class="path17"></div>
-          <div class="path18"></div> </span
-        >Stitcher
-      </router-link>
-
-      <router-link
-        v-bind:to="'/main/priv/distribution/tuneIn/' + emissionId"
+      <router-link 
+        v-for="platform in platformShare" 
+        :key="platform.title"
+        :to="platform.url"
         class="text-dark"
       >
-        <span class="saooti-tunin" />TuneIn
+        <span :class="platform.icon">
+          <div
+            v-for="index in platform.path"
+            :key="index"
+            :class="'path'+index"
+          />
+        </span>{{ platform.title }}
       </router-link>
     </div>
-    <Snackbar ref="snackbar" position="bottom-left"></Snackbar>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
   </div>
 </template>
+
+<script lang="ts">
+import { state } from '../../../store/paramStore';
+import octopusApi from '@saooti/octopus-api';
+import Snackbar from '../../misc/Snackbar.vue';
+import { displayMethods } from '../../mixins/functions';
+import { Emission } from '@/store/class/general/emission';
+
+import { defineComponent, defineAsyncComponent } from 'vue';
+import SnackbarVue from '../../misc/Snackbar.vue';
+const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));
+export default defineComponent({
+  components: {
+    Snackbar,
+    RssSection,
+  },
+  mixins: [displayMethods],
+  props: {
+    emissionId: { default: undefined, type: Number},
+  },
+  
+  data() {
+    return {
+      emission: undefined as Emission|undefined,
+      rss: '' as string,
+    };
+  },
+  computed:{
+    platformShare(){
+      return [
+      {url:this.getUrl('amazon'), icon:'saooti-amazon', title:'Amazon Music | Podcasters', path:3},
+      {url:this.getUrl('apple'), icon:'saooti-apple', title:'Apple Podcast / iTunes', path:0},
+      {url:this.getUrl('deezer'), icon:'saooti-deezer', title:'Deezer', path:0},
+      {url:this.getUrl('googlePodcasts'), icon:'saooti-google-podcasts', title:'Google Podcasts', path:7},
+      {url:this.getUrl('PlayerFM'), icon:'saooti-playerfm', title:'PlayerFM', path:0},
+      {url:this.getUrl('PocketCasts'), icon:'saooti-pocket-casts', title:'Pocket Casts', path:0},
+      {url:this.getUrl('PodcastAddict'), icon:'saooti-podcast-addict', title:'Podcast Addict', path:0},
+      {url:this.getUrl('radioline'), icon:'saooti-radioline', title:'Radioline', path:0},
+      {url:this.getUrl('spotify'), icon:'saooti-spotify', title:'Spotify', path:0},
+      {url:this.getUrl('Stitcher'), icon:'saooti-stitcher-logo', title:'Stitcher', path:18},
+      {url:this.getUrl('tuneIn'), icon:'saooti-tunin', title:'TuneIn', path:0}];
+    }
+  },
+
+  mounted() {
+    this.getEmissionDetails();
+    this.getRSS();
+  },
+
+  methods: {
+    getUrl(platform: string): string{
+      return `/main/priv/distribution/${platform}/${this.emissionId}`;
+    },
+    async getEmissionDetails(): Promise<void> {
+      this.emission = await octopusApi.fetchData<Emission>(0,'emission/'+this.emissionId);
+    },
+    getRSS(): void {
+      if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
+      this.rss = `${state.octopusApi.url}rss/emission/${this.emissionId}.rss`;
+    },
+    afterCopy(): void{
+      (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Link in clipboard'));
+    }
+  },
+})
+</script>
+
 <style lang="scss">
+.octopus-app{
 .sharing-distribution-container {
   border: 0.05rem solid #dee2e6;
   border-radius: 0.3rem;
@@ -121,6 +124,13 @@
       right: 0;
     }
   }
+  .saooti-google-podcasts {
+    width: 15px;
+    height: 20px;
+    div {
+      right: 0;
+    }
+  }
   a {
     display: flex;
     align-items: center;
@@ -140,57 +150,6 @@
     flex-wrap: wrap;
     margin: 0.2rem 0.5rem;
   }
-  @media (max-width: 450px) {
-    .primary-color {
-      display: none;
-    }
-  }
 }
-</style>
-<script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
-import Snackbar from '../../misc/Snackbar.vue';
-import { displayMethods } from '../../mixins/functions';
-import { Emission } from '@/store/class/emission';
-
-export default displayMethods.extend({
-  components: {
-    Snackbar,
-    RssSection: () => import('@/components/display/aggregator/RssSection.vue'),
-  },
-  props: {
-    emissionId: { default: undefined as number|undefined},
-  },
-  
-  data() {
-    return {
-      emission: undefined as Emission|undefined,
-      error: false as boolean,
-      rss: '' as string,
-    };
-  },
-
-  mounted() {
-    this.getEmissionDetails();
-    this.getRSS();
-  },
-
-  methods: {
-    async getEmissionDetails(): Promise<void> {
-      try {
-        const data = await octopusApi.fetchEmission(this.emissionId);
-        this.emission = data;
-      } catch {
-        this.error = true;
-      }
-    },
-    getRSS(): void {
-      if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
-      this.rss = octopusApi.fetchRSS(this.emissionId) + '.rss';
-    },
-    afterCopy(): void{
-      (this.$refs.snackbar as any).open(this.$t('Link in clipboard'));
-    }
-  },
-});
-</script>
+}
+</style>