@saooti/octopus-sdk 31.0.34 → 31.0.37

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

@@ -56,18 +56,9 @@ export default defineComponent({
       isNotBlack: false as boolean,
     };
   },
-  computed:{
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
-  },
   watch:{
     isNotBlack(){
-      if(this.isNotBlack){
-        this.color = this.otherColor;
-      }else{
-        this.color = "#000000";
-      }
+      this.color = this.isNotBlack ? this.otherColor : "#000000";
     }
   },
   created(){
@@ -89,7 +80,7 @@ export default defineComponent({
         this.otherColor = state.generalParameters.podcastmakerColor;
         return;
       }
-      if (!this.authenticated) return;
+      if (!state.generalParameters.authenticated) return;
       let data;
       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;

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

@@ -1,238 +1,50 @@
 <template>
   <div class="module-box text-center-mobile">
-    <div class="d-flex align-items-center mb-3">
-      <h3
-        v-if="
-          !bigRound &&
-            (authenticated || participantId || organisationId || notExclusive)
-        "
-        class="mb-0"
-      >
-        {{ $t('Share') }}
-      </h3>
-      <span
-        v-if="authenticated"
-        id="popover-share-help"
-        role="button"
-        tabindex="-1"
-        class="saooti-help ms-2"
-        :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"
-      :class="[
-        bigRound && !audioUrl ? 'justify-content-center' : '',
-        verticalDisplay ? 'd-flex-row' : '',
-      ]"
+    <template
+      v-if="authenticated || participantId || organisationId || notExclusive"
     >
-      <button
-        v-if="isDownloadButton"
-        class="text-dark"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        :title="$t('Downloading')"
-        @click="onDownload(podcast.audioUrl, podcast.title)"
-      >
-        <div class="saooti-download-bounty" />
-      </button>
-      <a
-        rel="noopener"
-        target="_blank"
-        :href="facebookURL"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-facebook share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        title="Facebook"
-      >
-        <span
-          v-if="!bigRound"
-          class="saooti-facebook-bounty"
-        />
-        <div
-          v-else
-          class="saooti-facebook-bounty"
-        />
-      </a>
-      <a
-        rel="noopener"
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-twitter share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        :href="twitterURL"
-        title="Twitter"
-      >
-        <span
-          v-if="!bigRound"
-          class="saooti-twitter-bounty"
-        />
-        <div
-          v-else
-          class="saooti-twitter-bounty"
-        />
-      </a>
-      <a
-        rel="noopener"
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-primaryedin share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        :href="linkedinURL"
-        title="Linkedin"
-      >
-        <span
-          v-if="!bigRound"
-          class="saooti-linkedin1"
-        />
-        <div
-          v-else
-          class="saooti-linkedin1"
-        />
-      </a>
-      <a
-        v-if="''!==rssUrl"
-        rel="noopener"
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        :href="rssUrl"
-        :title="$t('Subscribe to this emission')"
-        @click.prevent="openPopup()"
-      >
+      <div class="d-flex mb-2">
+        <h3 class="mb-0">
+          {{ $t('Share') }}
+        </h3>
         <span
-          v-if="!bigRound"
-          class="saooti-rss-bounty"
+          v-if="authenticated"
+          id="popover-share-help"
+          role="button"
+          tabindex="-1"
+          class="saooti-help ms-2 align-items-start"
+          :title="$t('Help')"
         />
-        <div
-          v-else
-          class="saooti-rss-bounty"
-        />
-      </a>
-      <a
-        rel="noopener"
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        :title="$t('Copy this page URL')"
-        @click="onCopyCode(urlPage,afterCopy)"
-      >
-        <span
-          v-if="!bigRound"
-          class="saooti-link"
-        />
-        <div
-          v-else
-          class="saooti-link"
-        />
-      </a>
-      <a
-        v-if="podcast"
-        rel="noopener"
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        :title="$t('Share newsletter')"
-        @click="newsletter = true"
-      >
-        <span
-          v-if="!bigRound"
-          class="saooti-newsletter"
-        />
-        <div
-          v-else
-          class="saooti-newsletter"
-        />
-      </a>
-      <a
-        rel="noopener"
-        target="_blank"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-rss share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        :title="$t('Share QR Code')"
-        @click="qrCode = true"
-      >
-        <span
-          v-if="!bigRound"
-          class="saooti-qrcode"
-        />
-        <div
-          v-else
-          class="saooti-qrcode"
-        />
-      </a>
-      <a
-        v-if="isMobile"
-        rel="noopener"
-        target="_blank"
-        :href="whatsappURL"
-        :class="[
-          bigRound ? 'btn btn-big-round' : 'btn btn-whatsapp share-btn mb-2',
-          verticalDisplay ? '' : 'mx-2',
-        ]"
-        title="Whatsapp"
-      >
-        <span
-          v-if="!bigRound"
-          class="saooti-Whatsapp"
+        <Popover
+          v-if="authenticated"
+          target="popover-share-help"
+          placement="right"
         >
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-        </span>
-        <div
-          v-else
-          class="saooti-Whatsapp"
-        >
-          <div class="path1" />
-          <div class="path2" />
-          <div class="path3" />
-        </div>
-      </a>
+          {{ $t('Share this page without edit and share blocks') }}
+        </Popover>
+      </div>
+      <div class="d-flex align-items-center">
+        <ShareButtonsIntern
+          :podcast="podcast"
+          :emission="emission"
+          :participant-id="participantId"
+          :organisation-id="organisationId"
+          :not-exclusive="notExclusive"
+        />
+      </div>
+    </template>
+    <div
+      v-else
+      class="d-flex-row"
+    >
+      <ShareButtonsIntern
+        :podcast="podcast"
+        :emission="emission"
+        :participant-id="participantId"
+        :organisation-id="organisationId"
+        :not-exclusive="notExclusive"
+      />
     </div>
-    <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"
-    />
   </div>
 </template>
 
@@ -240,124 +52,27 @@
 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 Popover from '../../misc/Popover.vue';
-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'));
+import ShareButtonsIntern from './ShareButtonsIntern.vue';
+import { defineComponent } from 'vue';
 export default defineComponent({
   components: {
-    ClipboardModal,
-    NewsletterModal,
-    QrCodeModal,
-    Snackbar,
-    Popover
+    ShareButtonsIntern,
+    Popover,
   },
-
   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},
-    bigRound: { default: false, type: Boolean},
-    audioUrl: { default: undefined, type: String},
     notExclusive: { default: true, type: Boolean},
   },
-
-  data() {
-    return {
-      facebookURL: `https://www.facebook.com/sharer/sharer.php?u=${window.location.href}` as string,
-      twitterURL: `https://twitter.com/intent/tweet?text=${window.location.href}` as string,
-      linkedinURL: `https://www.linkedin.com/sharing/share-offsite/?url=${window.location.href}` as string,
-      whatsappURL: `whatsapp://send?text=${window.location.href}` as string,
-      dataRSSSave: false as boolean,
-      newsletter: false as boolean,
-      isMobile: false as boolean,
-      qrCode: false as boolean,
-    };
-  },
-
   computed: {
-    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 {
-      if (this.emission)
-        return (
-          state.generalParameters.ApiUri +
-          'rss/emission/' +
-          this.emission.emissionId + '.rss'
-        );
-      if (this.organisationId)
-        return (
-          state.generalParameters.ApiUri +
-          'rss/productor/' +
-          this.organisationId + '.rss'
-        );
-      if (this.participantId)
-        return (
-          state.generalParameters.ApiUri +
-          'rss/participant/' +
-          this.participantId + '.rss'
-        );
-      return '';
-    },
-  },
-
-  created(){
-    this.isMobile = this.checkIfDeviceMobile();
-  },
-  methods: {
-    openPopup(): void {
-      this.dataRSSSave = !this.dataRSSSave;
-    },
-    afterCopy(): void{
-      (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Link in clipboard'));
-    },
-    checkIfDeviceMobile(): boolean{
-      let check = false;
-      (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent);
-      return check;
-    },
-    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/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>