@saooti/octopus-sdk 38.3.1 → 38.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "38.3.1",
+  "version": "38.3.3",
   "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/display/sharing/ShareButtons.vue

@@ -28,7 +28,7 @@
         </div>
       </div>
       <div class="d-flex align-items-center">
-        <!-- <div
+        <div
           v-if="podcast || emission || playlist"
           class="d-flex flex-column ms-4"
         >
@@ -43,7 +43,7 @@
               @click="newsletter = true"
             />
           </div>
-        </div> -->
+        </div>
         <div class="d-flex flex-column ms-4">
           <div class="h2 mb-2">
             {{ $t("QR Code") }}

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

@@ -1,75 +1,50 @@
 <template>
   <ClassicModal
     id-modal="newsletter-modal"
-    :title-modal="$t('Share newsletter')"
+    :title-modal="newsletterInfo.titleModal"
     :closable="false"
     @close="closePopup"
   >
     <template #body>
-      <div class="d-flex justify-content-between">
-        <!-- eslint-disable vue/no-v-html -->
-        <div v-html="newsletterHtml" />
-        <!-- eslint-enable -->
-        <div class="d-flex flex-column flex-grow-1 ms-4">
-          <h4 class="mb-3">
-            {{ $t("Configuration") }}
-          </h4>
-          <label for="share-url-newsletter">{{ $t("Share") }}</label>
-          <input
-            id="share-url-newsletter"
-            v-model="shareUrl"
-            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"
-              class="c-hand me-2 mt-2"
-              show-fallback
-              fallback-input-type="color"
-              colors="text-advanced"
-              popover-to="right"
-              :data-color="color"
-            />
-            <div>{{ $t("Choose main color") }}</div>
-          </div>
-          <div
-            class="d-flex justify-content-between align-items-center mt-3 mb-2"
-          >
-            <h4 class="mb-0">
-              {{ $t("HTML Code") }}
+      <div class="d-flex flex-column">
+        <div class="d-flex">
+          <div class="d-flex flex-column flex-shrink-0 me-3">
+            <h4 class="mb-3">
+              {{ $t("Configure your Newsletter tile") }}
             </h4>
-            <input
-              type="button"
-              :value="$t('Copy')"
-              class="btn btn-primary"
-              :title="$t('Copy')"
-              @click="onCopyCode(newsletterHtml, afterCopy)"
-            />
+            <div 
+              v-for="colors in arrayColors"
+              :key="colors.mainText"
+              class="d-flex align-items-center mb-3"
+            >
+              <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>
-          <textarea
-            id="newsletter_code_textarea"
-            v-model="newsletterHtml"
-            readonly
-            @click="selectAll"
-          />
-          <label for="newsletter_code_textarea" :title="$t('HTML Code')" />
+        <!-- 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>
-      <SnackBar ref="snackbar" position="bottom-left" />
     </template>
     <template #footer>
       <button class="btn btn-primary m-1" @click="closePopup">
@@ -81,16 +56,11 @@
 
 <script lang="ts">
 import ClassicModal from "../modal/ClassicModal.vue";
-import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
 import SnackBar from "../../misc/SnackBar.vue";
-import dayjs from "dayjs";
 // @ts-ignore
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
-// @ts-ignore
-import humanizeDuration from "humanize-duration";
 import displayMethods from "../../mixins/displayMethods";
-import { Participant } from "@/stores/class/general/participant";
 import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
 import { defineComponent } from "vue";
@@ -105,7 +75,6 @@ export default defineComponent({
   components: {
     SnackBar,
     VSwatches,
-    ClassicCheckbox,
     ClassicModal,
   },
 
@@ -121,172 +90,102 @@ export default defineComponent({
 
   data() {
     return {
-      displayParticipantsNames: true as boolean,
-      displayEmissionName: true as boolean,
-      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"]),
-    date(): string {
-      if (!this.podcast || 1970 === dayjs(this.podcast.pubDate).year()) {
-        return "";
-      }
-      return dayjs(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 || !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 "";
-      }
-      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 ||
-        !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")}">
-						</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>`,
-          );
-        }
-        text.push(`</table>`);
-      });
-      return text.join("");
-    },
-    imageUrl(): string {
+    newsletterInfo() {
       if (this.podcast) {
-        return `${this.podcast.imageUrl}" alt="${this.$t("Podcast image")}`;
+        return {
+          titleModal: this.$t("Share the episode in your newsletter"),
+          imageUrl: `${this.podcast.imageUrl}" alt="${this.$t(
+            "Podcast image",
+          )}`,
+          title:this.podcast.title,
+          description: this.podcast.description ?? "",
+          shareText: this.$t("Listen this episode"),
+          emissionHtml: `<tr><td style="padding:5px 0;">
+          <div style="display:flex; margin-top:5px;">
+          <div style="font-size:20px; color:${this.arrayColors[1].color}; margin-right:5px;text-wrap: nowrap;">${this.$t(
+            "Emission",
+          )} :</div>
+          <a href="${this.shareUrl}" style="font-size: 18px;color: ${
+            this.arrayColors[0].color
+          };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${this.podcast.emission.name}</a>
+          </div></td></tr>`,
+          articleHtml:
+            !this.podcast?.article || 0 === this.podcast.article?.length
+              ? ``
+              : `<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: ${this.arrayColors[1].color};margin-top:2px">${this.$t(
+            "See associated article",
+          )}</a>
+          </div></td></tr>
+          `,
+          colorTitle: `color:${this.arrayColors[1].color};`,
+        };
       }
       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?.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?.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?.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>`;
+        return {
+          titleModal: this.$t("Share the series in your newsletter"),
+          imageUrl: `${this.emission.imageUrl}" alt="${this.$t(
+            "Emission image",
+          )}`,
+          title: this.emission.name,
+          description: this.emission.description ?? "",
+          shareText: this.$t("Listen to all episodes"),
+          emissionHtml: ``,
+          articleHtml: ``,
+          colorTitle: `color:${this.arrayColors[0].color};`,
+        };
+      }
+      return {
+        titleModal: this.$t("Share the playlist in your newsletter"),
+        imageUrl: `${this.playlist?.imageUrl}" alt="${this.$t(
+          "Playlist image",
+        )}`,
+        title: this.playlist?.title,
+        description: this.playlist?.description ?? "",
+        shareText: this.$t("Listen to all episodes"),
+        emissionHtml: ``,
+        articleHtml: ``,
+        colorTitle: `color:${this.arrayColors[0].color};`,
+      };
     },
     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>
-				<td valign="top" rowspan="4" style="vertical-align: top; padding: 10px;">
-						<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.title}
-				</td>
-		</tr>
-    ${this.emissionName}${this.description}`,
-      ];
-      html.push(
-        `</table>
-      <table width='100%' style="width:100%;background:#f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;">
-      <tr 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">
-        <td><a href="${this.shareUrl}">
-          <svg fill="#000000" height="30px" width="30px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17.804 17.804" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g id="c98_play"> <path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313 c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04 c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"></path> </g> <g id="Capa_1_78_"> </g> </g> </g></svg>
-        </a></td>
-        <td style="margin-left:10px"><a style="color: #000;text-decoration: none; margin-right:8px" href="${this.shareUrl}">${this.shareText}</a></td>
-        ${this.articleHtml}
-      </tr>
-      </table>${this.participantsName}`,
-      );
-      return html.join("");
+      return `<table style="background:${this.arrayColors[2].color};color:${this.arrayColors[1].color};table-layout: fixed;width:100%;font-size: 14px;">
+<tr>
+<td valign="top" width="30%" rowspan="7" style="padding-right:5px;"><img width="100%" src="${
+        this.newsletterInfo.imageUrl
+      }" 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 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" 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" 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>
+</table>
+`;
     },
   },
   created() {
@@ -297,16 +196,6 @@ export default defineComponent({
     closePopup(): void {
       this.$emit("close");
     },
-    getName(person: Participant): string {
-      return `${person.firstName ?? ""} ${person.lastName ?? ""}`.trim();
-    },
-    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"),
@@ -317,8 +206,11 @@ export default defineComponent({
         "" !== this.authOrganisation.id
           ? this.authOrganisation.id
           : state.generalParameters.organisationId;
+      if(!orgaId ||orgaId?.length){
+        return;
+      }
       const attributes = await this.getOrgaAttributes(orgaId ?? "");
-      if (Object.hasOwn(attributes, "podcastmakerUrl")) {
+      if (Object.hasOwn(attributes, "podcastmakerUrl") && (attributes.podcastmakerUrl as string|undefined|null)?.length) {
         this.shareUrl =
           attributes.podcastmakerUrl +
           window.location.pathname +
@@ -328,11 +220,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;
       }
     },
   },
@@ -342,10 +234,11 @@ 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;
+      @media (max-width: 500px){
+        overflow-x: auto;
+      }
     }
     .octopus-modal-dialog {
       max-width: 80%;

package/src/locale/de.ts

@@ -200,12 +200,10 @@ export default {
   Publishing: "Veröffentlichen",
   "select productor": "Produzenten wählen",
   "Share newsletter": "Einen Newsletter teilen",
-  Configuration: "Konfiguration",
-  "HTML Code": "HTML-Code",
+  "Configure your Newsletter tile": "Konfigurieren Sie Ihre Newsletter-Kachel",
+  "Copy and embed the HTML code into your email tool": "Kopieren Sie den HTML-Code und betten Sie ihn in Ihr E-Mail-Tool ein",
   "Listen this episode": "Diese Folge anhören",
-  "Display emission name": "Titel der Reihe anzeigen",
-  "Display participants list": "Liste der Sprecher anzeigen",
-  "Choose main color": "Wählen Sie die Hauptfarbe",
+  "Choose main color": "Wählen Sie die Farbe der Newsletter-Modulelemente",
   "Octopus is ACPM Podcast accredited": "Octopus ist von der ACPM zertifiziert",
   "Live episode": "Aktuelle Live-Übertragungen",
   "This live will start": "Diese Live-Übertragung beginnt",
@@ -351,4 +349,11 @@ export default {
   "Share in one click":"Mit einem Klick teilen",
   "Chaptering":"Kapitelaufteilung",
   "Listen to the latest episode":"Hören Sie sich die neueste Folge an",
+  "Share the episode in your newsletter": "Teilen Sie die Episode in Ihrem Newsletter",
+  "Share the series in your newsletter": "Teilen Sie die Show in Ihrem Newsletter",
+  "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

@@ -198,12 +198,10 @@ export default {
   Publishing: "Publishing",
   "select productor": "Select Producer",
   "Share newsletter": "Share a newsletter",
-  Configuration: "Configuration",
-  "HTML Code": "HTML Code",
+  "Configure your Newsletter tile": "Configure your Newsletter tile",
+  "Copy and embed the HTML code into your email tool": "Copy and embed the HTML code into your email tool",
   "Listen this episode": "Listen to this episode",
-  "Display emission name": "Display the series title",
-  "Display participants list": "Display the speakers list",
-  "Choose main color": "Choose the main color",
+  "Choose main color": "Choose the color of the newsletter module elements",
   "Octopus is ACPM Podcast accredited": "Octopus is ACPM accredited",
   "Live episode": "Current Live episodes",
   "This live will start": "This live will start",
@@ -351,4 +349,11 @@ export default {
   "Share in one click":"Share in one click",
   "Chaptering":"Chaptering",
   "Listen to the latest episode":"Listen to the latest episode",
+  "Share the episode in your newsletter": "Share the episode in your newsletter",
+  "Share the series in your newsletter": "Share the series in your newsletter",
+  "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

@@ -199,12 +199,10 @@ export default {
   Publishing: "En proceso de publicación",
   "select productor": "Seleccionar productor",
   "Share newsletter": "Compartir newsletter",
-  Configuration: "Configuración",
-  "HTML Code": "Código HTML",
+  "Configure your Newsletter tile": "Configure el mosaico de su boletín",
+  "Copy and embed the HTML code into your email tool": "Copie e incruste el código HTML en su herramienta de correo electrónico",
   "Listen this episode": "Escuchar este episodio",
-  "Display emission name": "Mostrar el título del programa",
-  "Display participants list": "Mostrar la lista de participantes",
-  "Choose main color": "Elegir el color principal",
+  "Choose main color": "Elija el color de los elementos del módulo de newsletter",
   "Octopus is ACPM Podcast accredited":
     "Octopus ha recibido la certificación ACPM",
   "Live episode": "Episodios en directo ahora",
@@ -352,4 +350,11 @@ export default {
   "Share in one click":"Comparte en un clic",
   "Chaptering":"Capítulos",
   "Listen to the latest episode":"Escuche el último episodio",
+  "Share the episode in your newsletter": "Comparte el episodio en tu newsletter",
+  "Share the series in your newsletter": "Comparte el programa en tu newsletter",
+  "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

@@ -201,13 +201,11 @@ export default {
   Debriefing: "Debriefing",
   Publishing: "Publication",
   "select productor": "Choisir un producteur",
-  "Share newsletter": "Partage d'une newsletter",
-  Configuration: "Configuration",
-  "HTML Code": "Code HTML",
+  "Share newsletter": "Partage dans votre newsletter",
+  "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",
-  "Display emission name": "Afficher le titre de l'émission",
-  "Display participants list": "Afficher la liste des intervenants",
-  "Choose main color": "Choisir la couleur principale",
+  "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",
@@ -358,4 +356,11 @@ export default {
   "Share in one click":"Partager en un clic",
   "Chaptering":"Chapitrage",
   "Listen to the latest episode":"Écouter le dernier épisode",
+  "Share the episode in your newsletter": "Partagez l'épisode dans votre newsletter",
+  "Share the series in your newsletter": "Partagez l'émission dans votre newsletter",
+  "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

@@ -197,12 +197,10 @@ export default{
     Publishing: 'In corso di pubblicazione',
     'select productor': 'Seleziona producer',
     'Share newsletter': "Condividi newsletter",
-    Configuration: 'Configurazione',
-    'HTML Code': 'Codice HTML',
+    "Configure your Newsletter tile": 'Configura il riquadro Newsletter',
+    "Copy and embed the HTML code into your email tool": 'Copia e incorpora il codice HTML nel tuo strumento di posta elettronica',
     'Listen this episode': 'Ascolta questo episodio',
-    'Display emission name': "Mostra il titolo della serie",
-    'Display participants list': 'Mostra la lista degli speaker',
-    'Choose main color': 'Seleziona colore principale',
+    'Choose main color': 'Scegli il colore degli elementi del modulo newsletter',
     'Octopus is ACPM Podcast accredited': 'Octopus è accreditata ACPM Podcast',
     'Live episode': 'Episodi live',
     'This live will start': 'Questo live inizierà',
@@ -344,4 +342,11 @@ export default{
   "Share in one click":"Condividi con un clic",
   "Chaptering":"Capitolazione",
   "Listen to the latest episode":"Ascolta l'ultimo episodio",
-  };
+  "Share the episode in your newsletter": "Condividi l'episodio nella tua newsletter",
+  "Share the series in your newsletter": "Condividi lo spettacolo nella tua newsletter",
+  "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

@@ -194,12 +194,10 @@ export default {
   Publishing: "Objava",
   "select productor": "Izberi producenta",
   "Share newsletter": "Deli glasilo",
-  Configuration: "Konfiguracija",
-  "HTML Code": "Koda HTML",
+  "Configure your Newsletter tile": "Konfigurirajte svojo ploščico Newsletter",
+  "Copy and embed the HTML code into your email tool": "Kopirajte in vdelajte kodo HTML v svoje e-poštno orodje",
   "Listen this episode": "Poslušajte to epizodo",
-  "Display emission name": "Prikaži naslov oddaje",
-  "Display participants list": "Prikaži seznam sodelujočih",
-  "Choose main color": "Izberi glavno barvo",
+  "Choose main color": "Izberite barvo elementov modula newsletter",
   "Octopus is ACPM Podcast accredited":
     "Octopus je akreditiran pri organizaciji ACPM",
   "Live episode": "Trenutne epizode v živo",
@@ -341,4 +339,11 @@ export default {
   "Share in one click":"Delite z enim klikom",
   "Chaptering":"Poglavje",
   "Listen to the latest episode":"Poslušajte najnovejšo epizodo",
+  "Share the episode in your newsletter": "Delite epizodo v svojem glasilu",
+  "Share the series in your newsletter": "Delite oddajo v svojem glasilu",
+  "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",
 }

package/src/stores/SaveFetchStore.ts

@@ -12,6 +12,9 @@ export const useSaveFetchStore = defineStore('SaveFetchStore', {
   }),
   actions:{
     async getOrgaAttributes(orgaId: string): Promise<{ [key: string]: string | number | boolean | undefined; }>{
+      if(!orgaId.length){
+        return {};
+      }
       if(this.orgaPublicAttributes[orgaId]){
         return this.orgaPublicAttributes[orgaId];
       }