@saooti/octopus-sdk 32.0.1 → 32.0.2

package/README.md

@@ -641,3 +641,4 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
  * 32.0.0 Passage en 32
  * 32.0.1 Navigation clavier
+ * 32.0.2 Newsletter pour emission & playlist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "32.0.1",
+  "version": "32.0.2",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -27,6 +27,7 @@
         <ShareButtonsIntern
           :podcast="podcast"
           :emission="emission"
+          :playlist="playlist"
           :participant-id="participantId"
           :organisation-id="organisationId"
           :not-exclusive="notExclusive"
@@ -40,6 +41,7 @@
       <ShareButtonsIntern
         :podcast="podcast"
         :emission="emission"
+        :playlist="playlist"
         :participant-id="participantId"
         :organisation-id="organisationId"
         :not-exclusive="notExclusive"
@@ -56,6 +58,7 @@ import { displayMethods } from '../../mixins/functions';
 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({
   components: {
     ShareButtonsIntern,
@@ -65,6 +68,7 @@ export default defineComponent({
   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},

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

@@ -50,7 +50,7 @@
     <div class="saooti-link" />
   </button>
   <button
-    v-if="podcast"
+    v-if="podcast || emission ||playlist"
     :class="getClass()"
     :title="$t('Share newsletter')"
     @click="newsletter = true"
@@ -75,6 +75,8 @@
     v-if="newsletter"
     :closable="true"
     :podcast="podcast"
+    :emission="emission"
+    :playlist="playlist"
     @close="newsletter = false"
   />
   <QrCodeModal
@@ -98,6 +100,7 @@ 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'));
@@ -114,6 +117,7 @@ export default defineComponent({
   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},

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

@@ -21,16 +21,26 @@
                 <h4 class="mb-3">
                   {{ $t('Configuration') }}
                 </h4>
-                <ClassicCheckbox
-                  v-model:textInit="displayEmissionName"
-                  id-checkbox="display-emission-name"
-                  :label="$t('Display emission name')"
-                />
-                <ClassicCheckbox
-                  v-model:textInit="displayParticipantsNames"
-                  id-checkbox="display-participants-names"
-                  :label="$t('Display participants list')"
-                />
+                <label for="share-url-newsletter">{{$t('Share')}}</label>
+                <input
+                  v-model="shareUrl"
+                  id="share-url-newsletter"
+                  class="form-input mb-2"
+                  type="text"
+                  :class="{ 'border border-danger': 0 === shareUrl }"
+                >
+                <template v-if="podcast">
+                  <ClassicCheckbox
+                    v-model:textInit="displayEmissionName"
+                    id-checkbox="display-emission-name"
+                    :label="$t('Display emission name')"
+                  />
+                  <ClassicCheckbox
+                    v-model:textInit="displayParticipantsNames"
+                    id-checkbox="display-participants-names"
+                    :label="$t('Display participants list')"
+                  />
+                </template>
                 <div class="d-flex align-items-center mt-2">
                   <VSwatches
                     v-model="color"
@@ -101,6 +111,9 @@ import { Podcast } from '@/store/class/general/podcast';
 import { state } from '../../../store/paramStore';
 import { defineComponent } from 'vue'
 import SnackbarVue from '../../misc/Snackbar.vue';
+import octopusApi from '@saooti/octopus-api';
+import { Emission } from '@/store/class/general/emission';
+import { Playlist } from '@/store/class/general/playlist';
 export default defineComponent({
   name: 'NewsletterModal',
 
@@ -113,7 +126,9 @@ export default defineComponent({
   mixins: [displayMethods],
 
   props: {
-    podcast: { default: ()=>({}), type: Object as ()=> Podcast},
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    emission: { default: undefined, type: Object as ()=> Emission},
+    playlist: { default: undefined, type: Object as ()=>Playlist},
   },
 
   emits: ['close'],
@@ -123,164 +138,150 @@ export default defineComponent({
       displayParticipantsNames: true as boolean,
       displayEmissionName: true as boolean,
       color: '#40a372' as string,
-      dummyParam: new Date().getTime().toString() as string,
+      shareUrl: window.location.href as string,
+
     };
   },
 
   computed: {
-    resourcesUrl(): string{
-      return state.podcastPage.resourceUrl? state.podcastPage.resourceUrl : window.location.origin;
+    date(): string {
+      if(!this.podcast || 1970 === moment(this.podcast.pubDate).year()){return '';}
+      return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
+    },
+    duration(): string {
+      if (!this.podcast || this.podcast.duration <= 1) return '';
+      if (this.podcast.duration > 600000) {
+        return humanizeDuration(this.podcast.duration, {
+          language: this.$i18n.locale,
+          largest: 1,
+          round: true,
+        });
+      }
+      return humanizeDuration(this.podcast.duration, {
+        language: this.$i18n.locale,
+        largest: 2,
+        round: true,
+      });
     },
     emissionName(): string {
-      if (this.displayEmissionName)
-        return (
-          `<tr><td colspan="2" style="font-size: 16px;line-height:24px;font-weight: bold;">` +
-          this.podcast.emission.name +
-          `</td></tr>`
-        );
-      return '';
+      if (!this.displayEmissionName || !this.podcast){return ''}
+      return (
+        `<tr><td colspan="2" style="font-size: 16px;line-height:24px;font-weight: bold;">${this.podcast.emission.name}</td></tr>`
+      );
     },
     articleHtml(): string{
-      if(this.podcast.article && 0 !== this.podcast.article.length){
-        return (`<a href="` +
-          this.podcast.article +
-          `" title="` +
-          this.$t('See associated article') +
-          `">
-          <img width="44" height="44" style="display: inline-block;vertical-align: middle; margin-right:3px" src="` +
-          this.resourcesUrl + `/img/article.png">
-        </a>
-        <a style="color: #000;text-decoration: none;" href="` +
-          this.podcast.article +
-          `">` +
-          this.$t('See associated article') +
-          `</a>`);
-      }
-      return '';
+      if (!this.podcast || this.podcast.article ||0 !== this.podcast.article?.length){return ''}
+      return (`<a href="${this.podcast.article}" title="${this.$t('See associated article')}">
+        <img width="44" height="44" style="display: inline-block;vertical-align: middle; margin-right:3px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA6UlEQVRIie3WPUpEMRTF8R9+4QpEBGttrcdeV+E2pp3KdYi7GBRttNVCZgOCjSuQ+UCLJzLIe7l3HpFpPJAuOf+T5F4SYh3jFZ/JMVlevJUwv8c+HvEQzD/FIBEaHOFtKdkosWb0PfdHGwXzOxxk03SpDVDNvA1Q1bwNcFMwn/cB/K6iQ+3VMsVVDQDcylVMSl1VBOea5FFjTXHWZVJqtCdcYjcI+YHnPoB3FY6qdERVVNrBHi6wGXgscK3Z8UqAE80dbAeAGV4wXhUwxk5gHurP72CtgP9Gw5oabYBhT7/wwZ/If09S35Yv52lVAXwyqt0AAAAASUVORK5CYII=">
+      </a>
+      <a style="color: #000;text-decoration: none;" href="${this.podcast.article}">${this.$t('See associated article')}</a>`);
     },
     participantsName(): string {
-      if (!this.displayParticipantsNames || !this.podcast.animators) return '';
+      if (!this.displayParticipantsNames || !this.podcast || !this.podcast.animators) return '';
       const text = [''];
       this.podcast.animators.forEach((element: Participant) => {
         text.push(
           `<table width='100%' style="width:100%;background: #f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;border-bottom-left-radius: 1.5em;border-bottom-right-radius: 1.5em;">
 					<tr>
 						<td width="90" rowspan="2" style="text-align:left; vertical-align: top; width: 90px;padding:0 15px 15px 10px">
-							<img width="72"  style="width: 62px;height: 62px;border-radius: 50%;background-color: #fff;" src="` +
-            element.imageUrl +
-            `" alt="` +
-            this.$t('Animator image') +
-            `">
+							<img width="72"  style="width: 62px;height: 62px;border-radius: 50%;background-color: #fff;" src="${element.imageUrl}" alt="${this.$t('Animator image')}">
 						</td>
-						<td height="1" style="height: 1px;text-align:left; font-size: 14px;line-height:20px;vertical-align: top;font-weight: bold;padding-top: 23px;">` +
-            this.getName(element) +
-            `</td>
+						<td height="1" style="height: 1px;text-align:left; font-size: 14px;line-height:20px;vertical-align: top;font-weight: bold;padding-top: 23px;">${this.getName(element)}</td>
 					</tr>`
         );
         if (element.description) {
           text.push(
-            `<tr>
-							<td style="height: 100%;text-align:justify;padding-bottom: 15px;padding-right: 15px; font-size: 12px;line-height:16px;vertical-align: top">
-								` +
-              element.description +
-              `
-							</td>
-						</tr>`
+            `<tr><td style="height: 100%;text-align:justify;padding-bottom: 15px;padding-right: 15px; font-size: 12px;line-height:16px;vertical-align: top">
+							${element.description}</td></tr>`
           );
         }
         text.push(`</table>`);
       });
       return text.join('');
     },
+    imageUrl():string{
+      if(this.podcast){
+        return `${this.podcast.imageUrl}" alt="${this.$t('Podcast image')}`;
+      }
+      if(this.emission){
+        return `${this.emission.imageUrl}" alt="${this.$t('Emission image')}`;
+      }
+      if(this.playlist){
+        return `${this.playlist.imageUrl}" alt="${this.$t('Playlist image')}`;
+      }
+      return '';
+    },
+    title():string{
+      if(this.podcast){
+        return this.podcast.title;
+      }
+      if(this.emission){
+        return this.emission.name;
+      }
+      if(this.playlist){
+        return this.playlist.title;
+      }
+      return '';
+    },
+    description():string{
+      if (this.podcast && this.podcast.description) {
+        return `<tr><td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">${this.podcast.description}</td></tr>`;
+      }
+      if(this.emission && this.emission.description){
+        return `<tr><td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">${this.emission.description}</td></tr>`;
+      }
+      if(this.playlist && this.playlist.description){
+        return `<tr><td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">${this.playlist.description}</td></tr>`;
+      }
+      return '';
+    },
+    shareText():string{
+      if (this.podcast) {
+        return this.$t('Listen this episode');
+      }
+      if (this.emission) {
+        return this.$t('All podcast emission button');
+      }
+      return this.$t('Podcasts in the playlist');
+    },
+    durationPodcast():string{
+      if(!this.podcast){return ''}
+      return `<td colspan="2" style="height: 1px;color: #666;font-size: 12px;line-height: 16px;padding-top:15px;">
+          <span>${this.date}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <span style="padding: 0 10px">${this.$t('Duration', { duration: this.duration })}</span>
+				</td>`;
+    },
     newsletterHtml(): string {
       const html = [
         `<table width='100%' style="width:100%;background:#f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;border-top-left-radius: 1.5em;border-top-right-radius: 1.5em;">
-		<tr>
+        <tr>
 				<td valign="top" rowspan="4" style="vertical-align: top; padding: 10px;">
-						<img width="140" height="140" src="` +
-          this.podcast.imageUrl +
-          `" alt="` +
-          this.$t('Podcast image') +
-          `" style="width: 140px;border-radius: 16px; box-shadow: 0px 12px 48px 6px rgba(64, 163, 114, 0.2);">
-				</td>
-				<td colspan="2" style="height: 1px;color: #666;font-size: 12px;line-height: 16px;padding-top:15px;">
-						<span>` +
-          this.date +
-          `</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="padding: 0 10px">` +
-          this.$t('Duration', { duration: this.duration }) +
-          `</span>
+						<img width="140" height="140" src="${this.imageUrl}" style="width: 140px;border-radius: 16px; box-shadow: 0px 12px 48px 6px rgba(64, 163, 114, 0.2);">
 				</td>
+				${this.durationPodcast}
 		</tr>
 		<tr>
-				<td colspan="2" valign="top" style="line-height:24px;color: ` +
-          this.color +
-          `;font-size: 17px;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 400px;padding-top: 0.5em;">
-						` +
-          this.podcast.title +
-          `
+				<td colspan="2" valign="top" style="line-height:24px;color: ${this.color};font-size: 17px;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 400px;padding-top: 0.5em;">
+          ${this.title}
 				</td>
 		</tr>
-		` +
-          this.emissionName,
+    ${this.emissionName},${this.description}`
       ];
-      if (this.podcast.description) {
-        html.push(
-          `<tr>
-				<td colspan="2" valign="top" style="line-height:24px;font-size: 14px;max-width: 500px;">
-						` +
-            this.podcast.description +
-            `
-				</td>
-		</tr>`
-        );
-      }
       html.push(
-        `
-    </table>
+      `</table>
       <div style="font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background: #f3f3f3;vertical-align: middle;padding: 15px 10px;display: flex; align-items:center; flex-wrap:wrap">
-        <a href="` +
-          window.location.href +
-          `" title="` +
-          this.$t('Listen this episode') +
-          `">
+        <a href="${this.shareUrl}">
           <img width="44" height="44" style="display: inline-block;vertical-align: middle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABmJLR0QA/wD/AP+gvaeTAAAAxElEQVRIie3WMWpCURBG4Q8FSRrtbC2SPhvICmzchVuwtXQLbsE2pVUIkjqQHVgqNmIj6EvxGHhFQAIvcxt/OPVhhrlzh3sKZ4MvTLLFVYNPvJYQB294LiGucMYSw2xxcMQcj9niYIsputni4BvjEuJgjZcS4goXrDDKFgcnLDDIFgd7zNDLFgfvTUHnL23ISJuV7iS3Ooarn1VxkeeUvkDSV2b6J3FQT+pDW8Jb4vRD4Kqe1Kf/Ev4mTj32PhQ6b+9pPT+XHgysHrPM6QAAAABJRU5ErkJggg=="/>
         </a>
-        <a style="color: #000;text-decoration: none; margin-right:8px" href="` +
-          window.location.href +
-          `">` +
-          this.$t('Listen this episode') +
-          `</a>` + this.articleHtml + `
-      </div>
-		` +
-          this.participantsName
+        <a style="color: #000;text-decoration: none; margin-right:8px" href="${this.shareUrl}">${this.shareText}</a>
+        ${this.articleHtml}
+      </div>${this.participantsName}`
       );
       return html.join('');
     },
-    
-    date(): string {
-      if (1970 !== moment(this.podcast.pubDate).year()){
-        return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
-      }
-      return '';
-    },
-    duration(): string {
-      if (this.podcast.duration <= 1) return '';
-      if (this.podcast.duration > 600000) {
-        return humanizeDuration(this.podcast.duration, {
-          language: this.$i18n.locale,
-          largest: 1,
-          round: true,
-        });
-      }
-      return humanizeDuration(this.podcast.duration, {
-        language: this.$i18n.locale,
-        largest: 2,
-        round: true,
-      });
-    },
   },
   created(){
-    this.initColor();
+    this.initData();
   },
   methods: {
     closePopup(event: { preventDefault: () => void }): void {
@@ -302,11 +303,24 @@ export default defineComponent({
     afterCopy(): void{
       (this.$refs.snackbar as InstanceType<typeof SnackbarVue>).open(this.$t('Data in clipboard'));
     },
-    initColor(): void {
+    async initData(): Promise<void> {
+      let attributes;
+      if(this.$store.state.organisation && this.$store.state.organisation.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
+        attributes = this.$store.state.organisation.attributes;
+      }else{
+        attributes = await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
+      }
+      if (Object.prototype.hasOwnProperty.call(attributes,'podcastmakerUrl')) {
+        this.shareUrl = attributes.podcastmakerUrl + window.location.pathname+window.location.search;
+      }
       if(state.generalParameters.podcastmaker && state.generalParameters.podcastmakerColor){
         this.color = state.generalParameters.podcastmakerColor;
+        return;
       }
-    }
+      if (Object.prototype.hasOwnProperty.call(attributes,'COLOR')) {
+        this.color = attributes.COLOR;
+      }
+    },
   },
 })
 </script>

package/src/components/pages/Playlist.vue

@@ -34,7 +34,7 @@
             :organisation-id="myOrganisationId"
             :is-education="isEducation"
           />
-          <ShareButtons v-if="pageParameters.isShareButtons" />
+          <ShareButtons v-if="pageParameters.isShareButtons" :playlist="playlist" />
         </div>
       </div>
       <PodcastList :playlist="playlist" />