@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -1,252 +1,82 @@
 <template>
-  <div class="module-box text-center-mobile share-button-page">
-    <div class="d-flex align-items-center mb-3 share-button-title">
-      <h3
-        class="mb-0"
-        v-if="
-          !bigRound &&
-            (authenticated || participantId || organisationId || notExclusive)
-        "
-      >
-        {{ $t('Share') }}
-      </h3>
-      <span
-        class="saooti-help ml-2"
-        id="popover-share-help"
-        :aria-label="$t('Help')"
-        v-if="authenticated"
-      ></span>
-      <b-popover
-        target="popover-share-help"
-        triggers="hover"
-        placement="right"
-        custom-class="wizard-help"
-        v-if="authenticated"
-      >
-        {{ $t('Share this page without edit and share blocks') }}
-      </b-popover>
-    </div>
+  <div class="module-box text-center-mobile">
+    <template
+      v-if="authenticated || participantId || organisationId || notExclusive"
+    >
+      <div class="d-flex mb-2">
+        <h3 class="mb-0">
+          {{ $t('Share') }}
+        </h3>
+        <span
+          v-if="authenticated"
+          id="popover-share-help"
+          role="button"
+          tabindex="0"
+          class="saooti-help ms-2 align-items-start"
+          :title="$t('Help')"
+        />
+        <Popover
+          v-if="authenticated"
+          target="popover-share-help"
+          placement="right"
+        >
+          {{ $t('Share this page without edit and share blocks') }}
+        </Popover>
+      </div>
+      <div class="d-flex align-items-center">
+        <ShareButtonsIntern
+          :podcast="podcast"
+          :emission="emission"
+          :playlist="playlist"
+          :participant-id="participantId"
+          :organisation-id="organisationId"
+          :not-exclusive="notExclusive"
+        />
+      </div>
+    </template>
     <div
-      class="d-flex"
-      :class="[
-        bigRound && !audioUrl ? 'justify-content-center' : '',
-        verticalDisplay ? 'flex-column' : '',
-      ]"
+      v-else
+      class="d-flex-row"
     >
-      <a
-        class="btn btn-bigRound"
-        :title="$t('Downloading')"
-        :href="audioUrl"
-        target="_blank"
-        download
-        v-if="audioUrl"
-        :aria-label="$t('Downloading')"
-      >
-        <div class="saooti-download-bounty"></div>
-      </a>
-      <a
-        target="_blank"
-        :href="facebookURL"
-        :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-facebook share-btn mb-2',
-          verticalDisplay ? '' : 'mr-2 ml-2',
-        ]"
-        aria-label="Facebook"
-      >
-        <span class="saooti-facebook-bounty" v-if="!bigRound"></span>
-        <div class="saooti-facebook-bounty" v-else></div>
-      </a>
-      <a
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-twitter share-btn mb-2',
-          verticalDisplay ? '' : 'mr-2 ml-2',
-        ]"
-        :href="twitterURL"
-        aria-label="Twitter"
-      >
-        <span class="saooti-twitter-bounty" v-if="!bigRound"></span>
-        <div class="saooti-twitter-bounty" v-else></div>
-      </a>
-      <a
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-linkedin share-btn mb-2',
-          verticalDisplay ? '' : 'mr-2 ml-2',
-        ]"
-        :href="linkedinURL"
-        aria-label="Linkedin"
-      >
-        <span class="saooti-linkedin1" v-if="!bigRound"></span>
-        <div class="saooti-linkedin1" v-else></div>
-      </a>
-      <a
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'mr-2 ml-2',
-        ]"
-        @click.prevent="openPopup()"
-        :href="rssUrl"
-        :title="$t('Subscribe to this emission')"
-        aria-label="RSS"
-        v-if="rssUrl"
-      >
-        <span class="saooti-rss-bounty" v-if="!bigRound"></span>
-        <div class="saooti-rss-bounty" v-else></div>
-      </a>
-      <a
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'mr-2 ml-2',
-        ]"
-        aria-label="copy"
-        @click="onCopyCode(window.location.href, afterCopy)"
-      >
-        <span class="saooti-link" v-if="!bigRound"></span>
-        <div class="saooti-link" v-else></div>
-      </a>
-      <a
-        target="_blank"
-        v-if="podcast"
-        :class="[
-          bigRound ? 'btn btn-bigRound' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'mr-2 ml-2',
-        ]"
-        :aria-label="$t('Share newsletter')"
-        @click="newsletter = true"
-      >
-        <span class="saooti-mail-bounty" v-if="!bigRound"></span>
-        <div class="saooti-mail-bounty" v-else></div>
-      </a>
+      <ShareButtonsIntern
+        :podcast="podcast"
+        :emission="emission"
+        :playlist="playlist"
+        :participant-id="participantId"
+        :organisation-id="organisationId"
+        :not-exclusive="notExclusive"
+      />
     </div>
-    <ClipboardModal
-      v-if="dataRSSSave"
-      :closable="true"
-      @close="closeModal()"
-      :link="rssUrl"
-      :emission="emission"
-      :title="$t('RSS Link')"
-    />
-    <NewsletterModal
-      v-if="newsletter"
-      :closable="true"
-      :podcast="podcast"
-      @close="newsletter = false"
-    />
-    <Snackbar ref="snackbar" position="bottom-left"></Snackbar>
   </div>
 </template>
 
-<style lang="scss">
-.share-button-page {
-  @media (max-width: 960px) {
-    .flex-column {
-      flex-direction: row !important;
-    }
-    .btn {
-      margin-right: 0.5rem;
-    }
-  }
-  @media (max-width: 450px) {
-    .flex-column {
-      flex-direction: row !important;
-      flex-wrap: wrap;
-    }
-  }
-}
-.share-button-title {
-  height: 2rem;
-}
-</style>
-
 <script lang="ts">
+import { Emission } from '@/store/class/general/emission';
+import { Podcast } from '@/store/class/general/podcast';
 import { state } from '../../../store/paramStore';
-import ClipboardModal from '../../misc/modal/ClipboardModal.vue';
-import NewsletterModal from '../../misc/modal/NewsletterModal.vue';
-import Snackbar from '../../misc/Snackbar.vue';
 import { displayMethods } from '../../mixins/functions';
-import { defineComponent } from 'vue'
+import Popover from '../../misc/Popover.vue';
+import ShareButtonsIntern from './ShareButtonsIntern.vue';
+import { defineComponent } from 'vue';
+import { Playlist } from '@/store/class/general/playlist';
 export default defineComponent({
-  props: [
-    'podcast',
-    'emission',
-    'participantId',
-    'organisationId',
-    'bigRound',
-    'audioUrl',
-    'notExclusive',
-  ],
-
   components: {
-    ClipboardModal,
-    NewsletterModal,
-    Snackbar,
+    ShareButtonsIntern,
+    Popover,
   },
-
   mixins: [displayMethods],
-
-  mounted() {},
-
-  data() {
-    return {
-      facebookURL: `https://www.facebook.com/sharer/sharer.php?u=${window.location.href}`,
-      twitterURL: `https://twitter.com/intent/tweet?text=${window.location.href}`,
-      linkedinURL: `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}`,
-      dataRSSSave: false,
-      newsletter: false,
-    };
+  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},
   },
-
   computed: {
-    snackbarRef():any {
-      return this.$refs.snackbar;
-    },
-    verticalDisplay():boolean {
-      return (
-        !this.authenticated &&
-        !this.participantId &&
-        !this.organisationId &&
-        !this.notExclusive
-      );
-    },
-    authenticated():boolean {
-      return state.generalParameters.authenticated;
-    },
-    rssUrl():any {
-      if (this.emission)
-        return (
-          state.generalParameters.ApiUri +
-          'rss/emission/' +
-          this.emission.emissionId
-        );
-      if (this.organisationId)
-        return (
-          state.generalParameters.ApiUri +
-          'rss/productor/' +
-          this.organisationId
-        );
-      if (this.participantId)
-        return (
-          state.generalParameters.ApiUri +
-          'rss/participant/' +
-          this.participantId
-        );
-      return null;
-    },
-  },
-
-  methods: {
-    openPopup() {
-      this.dataRSSSave = !this.dataRSSSave;
-    },
-    closeModal() {
-      this.dataRSSSave = false;
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
     },
-    afterCopy(){
-      this.snackbarRef.open(this.$t('Link in clipboard'));
-    }
   },
-});
+})
 </script>

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>