@saooti/octopus-sdk 38.2.18 → 38.2.20

package/package.json

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

package/src/assets/share.scss

@@ -63,6 +63,7 @@
       color: white;
       font-weight: bold;
       font-size: 1rem;
+      text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
     }
   }
   .podcast-list {

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

@@ -7,50 +7,42 @@
   >
     <template #body>
       <div class="d-flex flex-column">
-        <h4 class="mb-3">
-          {{ $t("Configure your Newsletter tile") }}
-        </h4>
-        <div class="d-flex align-items-center mb-3">
-          <VSwatches
-            v-model="color"
-            class="c-hand me-2"
-            show-fallback
-            fallback-input-type="color"
-            colors="text-advanced"
-            popover-to="right"
-            :data-color="color"
-          />
-          <div class="d-flex flex-column">
-            <div class="fw-bold">{{ $t("Choose main color") }}</div>
-            <div>{{ $t("Newsletter elements") }}</div>
-          </div>
-        </div>
         <div class="d-flex">
-          <!-- eslint-disable vue/no-v-html -->
-          <div class="flex-grow-1 me-3" v-html="newsletterHtml" />
-          <!-- eslint-enable -->
-          <div class="d-flex flex-column">
-            <h4 class="mb-2">
-              {{ $t("Copy and embed the HTML code into your email tool") }}
+          <div class="d-flex flex-column flex-shrink-0 me-3">
+            <h4 class="mb-3">
+              {{ $t("Configure your Newsletter tile") }}
             </h4>
-            <textarea
-              id="newsletter_code_textarea"
-              v-model="newsletterHtml"
-              readonly
-              @click="selectAll"
-            />
-            <label
-              for="newsletter_code_textarea"
-              :title="$t('Copy and embed the HTML code into your email tool')"
-            />
-            <button
-              class="btn btn-primary width-fit-content mt-2"
-              @click="onCopyCode(newsletterHtml, afterCopy)"
+            <div 
+              v-for="colors in arrayColors"
+              :key="colors.mainText"
+              class="d-flex align-items-center mb-3"
             >
-              {{ $t("Copy") }}
-            </button>
+              <VSwatches
+                v-model="colors.color"
+                class="c-hand me-2"
+                show-fallback
+                fallback-input-type="color"
+                colors="text-advanced"
+                popover-to="right"
+                :data-color="colors.color"
+              />
+              <div class="d-flex flex-column">
+                <div class="fw-bold">{{ colors.mainText }}</div>
+                <div v-if="colors.secondText" class="descriptionText">{{ colors.secondText }}</div>
+              </div>
+            </div>
           </div>
+        <!-- eslint-disable vue/no-v-html -->
+          <div v-html="newsletterHtml" />
+          <!-- eslint-enable -->
         </div>
+        <button
+          class="btn flex-grow-1 mt-3 fw-bold"
+          @click="onCopyCode(newsletterHtml, afterCopy)"
+        >
+          <span class="saooti-copy me-2"/>
+          {{ $t("Copy and embed the HTML code into your email tool") }}
+        </button>
         <SnackBar ref="snackbar" position="bottom-left" />
       </div>
     </template>
@@ -98,11 +90,13 @@ export default defineComponent({
 
   data() {
     return {
-      color: "#40a372" as string,
+      arrayColors: [
+        {color:"#40a372", mainText: this.$t('Choose main color'),secondText: this.$t('Newsletter elements') },
+        {color:"#000000", mainText: this.$t('Choose text color') },
+        {color:"#FFFFFF", mainText: this.$t('Choose background color') }],
       shareUrl: window.location.href,
     };
   },
-
   computed: {
     ...mapState(useAuthStore, ["authOrganisation"]),
     newsletterInfo() {
@@ -112,33 +106,32 @@ export default defineComponent({
           imageUrl: `${this.podcast.imageUrl}" alt="${this.$t(
             "Podcast image",
           )}`,
-          title:
-            "Un super podcast de camille !Un super podcast de camille !Un super podcast de camille !!Un super podcast de camille ", //this.podcast.title,
+          title:this.podcast.title,
           description: this.podcast.description ?? "",
           shareText: this.$t("Listen this episode"),
-          emissionHtml: `<tr><td>
+          emissionHtml: `<tr><td style="padding:5px 0;">
           <div style="display:flex; margin-top:5px;">
-          <div style="font-size:20px; color:gray; margin-right:5px;">${this.$t(
+          <div style="font-size:20px; color:${this.arrayColors[1].color}; margin-right:5px;">${this.$t(
             "Emission",
           )} :</div>
           <a href="${this.shareUrl}" style="font-size: 18px;color: ${
-            this.color
+            this.arrayColors[0].color
           };">${this.podcast.emission.name}</a>
           </div></td></tr>`,
           articleHtml:
             !this.podcast?.article || 0 === this.podcast.article?.length
               ? ``
-              : `<tr><td>
+              : `<tr><td style="padding:5px 0;">
           <div style="display:flex;">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z"/></svg>
           <a href="${
             this.podcast.article
-          }" style="color: black;margin-top:2px">${this.$t(
+          }" style="color: ${this.arrayColors[1].color};margin-top:2px">${this.$t(
             "See associated article",
           )}</a>
           </div></td></tr>
           `,
-          colorTitle: `color:black;`,
+          colorTitle: `color:${this.arrayColors[1].color};`,
         };
       }
       if (this.emission) {
@@ -152,7 +145,7 @@ export default defineComponent({
           shareText: this.$t("Listen to all episodes"),
           emissionHtml: ``,
           articleHtml: ``,
-          colorTitle: `color:${this.color};`,
+          colorTitle: `color:${this.arrayColors[0].color};`,
         };
       }
       return {
@@ -165,29 +158,29 @@ export default defineComponent({
         shareText: this.$t("Listen to all episodes"),
         emissionHtml: ``,
         articleHtml: ``,
-        colorTitle: `color:${this.color};`,
+        colorTitle: `color:${this.arrayColors[0].color};`,
       };
     },
     newsletterHtml(): string {
-      return `<table style=" table-layout: fixed;width:100%;font-family: Arial,sans-serif;font-size: 14px;line-height: 20px; border:1px solid gray;">
+      return `<table style="background:${this.arrayColors[2].color};color:${this.arrayColors[1].color};table-layout: fixed;width:100%;font-size: 14px;line-height: 20px;">
 <tr>
-<td valign="top" width="30%" rowspan="7"><img width="100%" src="${
+<td valign="top" width="30%" rowspan="7" style="padding-right:5px;"><img width="100%" src="${
         this.newsletterInfo.imageUrl
-      }" style="border-radius: 4px; padding-right:5px;"></td>
-<td valign="top" width="70%"><div style="margin-top:5px;font-size: 24px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${
+      }" style="border-radius: 4px;"></td>
+<td valign="top" width="70%" style="padding:5px 0;"><div style="margin-top:5px;font-size: 24px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${
         this.newsletterInfo.colorTitle
       }">${this.newsletterInfo.title}</div></td>
 </tr>${this.newsletterInfo.emissionHtml}
-<tr><td><div style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;">${
+<tr><td style="padding:5px 0;"><div style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;">${
         this.newsletterInfo.description
       }</div></td></tr>
-<tr><td valign="top"><a href="${this.shareUrl}" style="font-size: 18px;color: ${
-        this.color
+<tr><td valign="top" style="padding:5px 0;"><a href="${this.shareUrl}" style="color: ${
+        this.arrayColors[0].color
       };">${this.$t("See more")}</a></td></tr>
 <tr>${this.newsletterInfo.articleHtml}
-<td width="1"><a href="${this.shareUrl}" style="font-size: 18px;color: ${
-        this.color
-      };text-decoration: none; display:flex;"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"/></svg><div style="margin-top: 15px; color:black;">${
+<td width="1" style="padding:5px 0;"><a href="${this.shareUrl}" style="font-size: 18px;color: ${
+        this.arrayColors[0].color
+      };text-decoration: none; display:flex;"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"/></svg><div style="margin-top: 15px; color:${this.arrayColors[1].color};">${
         this.newsletterInfo.shareText
       }</div></a></td>
 </tr>
@@ -203,13 +196,6 @@ export default defineComponent({
     closePopup(): void {
       this.$emit("close");
     },
-    selectAll(element: Event): void {
-      const target = element.target;
-      if (null !== target) {
-        (target as HTMLInputElement).focus();
-        (target as HTMLInputElement).select();
-      }
-    },
     afterCopy(): void {
       (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
         this.$t("Data in clipboard"),
@@ -231,11 +217,11 @@ export default defineComponent({
         state.generalParameters.podcastmaker &&
         state.generalParameters.podcastmakerColor
       ) {
-        this.color = state.generalParameters.podcastmakerColor;
+        this.arrayColors[0].color = state.generalParameters.podcastmakerColor;
         return;
       }
       if (Object.hasOwn(attributes, "COLOR")) {
-        this.color = attributes.COLOR as string;
+        this.arrayColors[0].color = attributes.COLOR as string;
       }
     },
   },
@@ -245,10 +231,8 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app {
   #newsletter-modal {
-    textarea {
-      border: 2px solid #eee;
-      height: 200px;
-      padding: 1em;
+    .octopus-modal-body{
+      overflow-x: inherit;
     }
     .octopus-modal-dialog {
       max-width: 80%;

package/src/locale/de.ts

@@ -354,4 +354,6 @@ export default {
   "Share the playlist in your newsletter": "Teilen Sie die Playlist in Ihrem Newsletter",
   "Listen to all episodes":"Hören Sie sich alle Folgen an",
   "Newsletter elements":"Piktogramm abspielen, Name der Show, Mehr anzeigen",
+  "Choose text color":"Wählen Sie Textfarbe",
+  "Choose background color":"Wählen Sie die Hintergrundfarbe",
 }

package/src/locale/en.ts

@@ -354,4 +354,6 @@ export default {
   "Share the playlist in your newsletter": "Share the playlist in your newsletter",
   "Listen to all episodes":"Listen to all episodes",
   "Newsletter elements":"Play pictogram, name of the show, See more",
+  "Choose text color":"Choose text color",
+  "Choose background color":"Choose background color",
 };

package/src/locale/es.ts

@@ -355,4 +355,6 @@ export default {
   "Share the playlist in your newsletter": "Comparte la lista de reproducción en tu newsletter",
   "Listen to all episodes":"Escuche todos los episodios",
   "Newsletter elements":"Pictograma de reproducción, nombre del programa, Ver más",
+  "Choose text color":"Elige el color del texto",
+  "Choose background color":"Elige el color de fondo",
 }

package/src/locale/fr.ts

@@ -205,7 +205,7 @@ export default {
   "Configure your Newsletter tile": "Configurez votre vignette Newsletter",
   "Copy and embed the HTML code into your email tool": "Copiez et intégrez le code HTML dans votre outil d'e-mailing",
   "Listen this episode": "Écouter ce podcast",
-  "Choose main color": "Choisir la couleur des éléments du module newsletter",
+  "Choose main color": "Choisir la couleur des éléments du module",
   "Octopus is ACPM Podcast accredited": "Octopus est accrédité ACPM Podcasts",
   "Live episode": "Épisode en live",
   "This live will start": "Ce live débutera",
@@ -361,4 +361,6 @@ export default {
   "Share the playlist in your newsletter": "Partagez la playlist dans votre newsletter",
   "Listen to all episodes":"Écouter tous les épisodes",
   "Newsletter elements":"Pictogramme Play, nom de l'émission, Voir plus",
+  "Choose text color":"Choisir la couleur du texte",
+  "Choose background color":"Choisir la couleur du fond",
 };

package/src/locale/it.ts

@@ -347,4 +347,6 @@ export default{
   "Share the playlist in your newsletter": "Condividi la playlist nella tua newsletter",
   "Listen to all episodes":"Ascolta tutti gli episodi",
   "Newsletter elements":"Riproduci pittogramma, nome dello spettacolo, vedi altro",
-  };
+  "Choose text color":"Scegli il colore del testo",
+  "Choose background color":"Scegli il colore dello sfondo",  
+};

package/src/locale/sl.ts

@@ -344,4 +344,6 @@ export default {
   "Share the playlist in your newsletter": "Delite seznam predvajanja v svojem glasilu",
   "Listen to all episodes":"Poslušaj vse epizode",
   "Newsletter elements":"Predvajaj piktogram, ime oddaje, Poglej več",
+  "Choose text color":"Izberite barvo besedila",
+  "Choose background color":"Izberite barvo ozadja",
 }