@saooti/octopus-sdk 38.2.19 → 38.3.0

package/package.json

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

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,58 +1,75 @@
 <template>
   <ClassicModal
     id-modal="newsletter-modal"
-    :title-modal="newsletterInfo.titleModal"
+    :title-modal="$t('Share newsletter')"
     :closable="false"
     @close="closePopup"
   >
     <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 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 }"
           />
-          <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") }}
-            </h4>
-            <textarea
-              id="newsletter_code_textarea"
-              v-model="newsletterHtml"
-              readonly
-              @click="selectAll"
+          <template v-if="podcast">
+            <ClassicCheckbox
+              v-model:textInit="displayEmissionName"
+              id-checkbox="display-emission-name"
+              :label="$t('Display emission name')"
             />
-            <label
-              for="newsletter_code_textarea"
-              :title="$t('Copy and embed the HTML code into your email tool')"
+            <ClassicCheckbox
+              v-model:textInit="displayParticipantsNames"
+              id-checkbox="display-participants-names"
+              :label="$t('Display participants list')"
             />
-            <button
-              class="btn btn-primary width-fit-content mt-2"
+          </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") }}
+            </h4>
+            <input
+              type="button"
+              :value="$t('Copy')"
+              class="btn btn-primary"
+              :title="$t('Copy')"
               @click="onCopyCode(newsletterHtml, afterCopy)"
-            >
-              {{ $t("Copy") }}
-            </button>
+            />
           </div>
+          <textarea
+            id="newsletter_code_textarea"
+            v-model="newsletterHtml"
+            readonly
+            @click="selectAll"
+          />
+          <label for="newsletter_code_textarea" :title="$t('HTML Code')" />
         </div>
-        <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">
@@ -64,11 +81,16 @@
 
 <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";
@@ -83,6 +105,7 @@ export default defineComponent({
   components: {
     SnackBar,
     VSwatches,
+    ClassicCheckbox,
     ClassicModal,
   },
 
@@ -98,6 +121,8 @@ export default defineComponent({
 
   data() {
     return {
+      displayParticipantsNames: true as boolean,
+      displayEmissionName: true as boolean,
       color: "#40a372" as string,
       shareUrl: window.location.href,
     };
@@ -105,93 +130,163 @@ export default defineComponent({
 
   computed: {
     ...mapState(useAuthStore, ["authOrganisation"]),
-    newsletterInfo() {
+    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 {
       if (this.podcast) {
-        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>
-          <div style="display:flex; margin-top:5px;">
-          <div style="font-size:20px; color:gray; margin-right:5px;">${this.$t(
-            "Emission",
-          )} :</div>
-          <a href="${this.shareUrl}" style="font-size: 18px;color: ${
-            this.color
-          };">${this.podcast.emission.name}</a>
-          </div></td></tr>`,
-          articleHtml:
-            !this.podcast?.article || 0 === this.podcast.article?.length
-              ? ``
-              : `<tr><td>
-          <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(
-            "See associated article",
-          )}</a>
-          </div></td></tr>
-          `,
-          colorTitle: `color:black;`,
-        };
+        return `${this.podcast.imageUrl}" alt="${this.$t("Podcast image")}`;
       }
       if (this.emission) {
-        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.color};`,
-        };
+        return `${this.emission.imageUrl}" alt="${this.$t("Emission image")}`;
+      }
+      if (this.playlist) {
+        return `${this.playlist.imageUrl}" alt="${this.$t("Playlist image")}`;
       }
-      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.color};`,
-      };
+      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>`;
     },
     newsletterHtml(): string {
-      return `<table style="background:white;color:black;table-layout: fixed;width:100%;font-family: Arial,sans-serif;font-size: 14px;line-height: 20px; border:1px solid gray;">
-<tr>
-<td valign="top" width="30%" rowspan="7"><img width="100%" src="${
-        this.newsletterInfo.imageUrl
-      }" style="border-radius: 4px;"></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;${
-        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;">${
-        this.newsletterInfo.description
-      }</div></td></tr>
-<tr><td valign="top"><a href="${this.shareUrl}" style="color: ${
-        this.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;">${
-        this.newsletterInfo.shareText
-      }</div></a></td>
-</tr>
-</table>
-`;
+      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("");
     },
   },
   created() {
@@ -202,6 +297,9 @@ 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) {

package/src/components/pages/Error403Page.vue

@@ -6,7 +6,7 @@
           width="250"
           height="auto"
           class="logo-octopus"
-          src="/img/logo_octopus_final.svg"
+          src="/img/logo_octopus_black.png"
           :alt="$t('Logo of main page')"
         />
         <h2>{{ $t("You do not have the right to access this page") }}</h2>

package/src/locale/de.ts

@@ -200,10 +200,12 @@ export default {
   Publishing: "Veröffentlichen",
   "select productor": "Produzenten wählen",
   "Share newsletter": "Einen Newsletter teilen",
-  "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",
+  Configuration: "Konfiguration",
+  "HTML Code": "HTML-Code",
   "Listen this episode": "Diese Folge anhören",
-  "Choose main color": "Wählen Sie die Farbe der Newsletter-Modulelemente",
+  "Display emission name": "Titel der Reihe anzeigen",
+  "Display participants list": "Liste der Sprecher anzeigen",
+  "Choose main color": "Wählen Sie die Hauptfarbe",
   "Octopus is ACPM Podcast accredited": "Octopus ist von der ACPM zertifiziert",
   "Live episode": "Aktuelle Live-Übertragungen",
   "This live will start": "Diese Live-Übertragung beginnt",
@@ -349,9 +351,4 @@ 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",
 }

package/src/locale/en.ts

@@ -198,10 +198,12 @@ export default {
   Publishing: "Publishing",
   "select productor": "Select Producer",
   "Share newsletter": "Share a newsletter",
-  "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",
+  Configuration: "Configuration",
+  "HTML Code": "HTML Code",
   "Listen this episode": "Listen to this episode",
-  "Choose main color": "Choose the color of the newsletter module elements",
+  "Display emission name": "Display the series title",
+  "Display participants list": "Display the speakers list",
+  "Choose main color": "Choose the main color",
   "Octopus is ACPM Podcast accredited": "Octopus is ACPM accredited",
   "Live episode": "Current Live episodes",
   "This live will start": "This live will start",
@@ -349,9 +351,4 @@ 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",
 };

package/src/locale/es.ts

@@ -199,10 +199,12 @@ export default {
   Publishing: "En proceso de publicación",
   "select productor": "Seleccionar productor",
   "Share newsletter": "Compartir newsletter",
-  "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",
+  Configuration: "Configuración",
+  "HTML Code": "Código HTML",
   "Listen this episode": "Escuchar este episodio",
-  "Choose main color": "Elija el color de los elementos del módulo de newsletter",
+  "Display emission name": "Mostrar el título del programa",
+  "Display participants list": "Mostrar la lista de participantes",
+  "Choose main color": "Elegir el color principal",
   "Octopus is ACPM Podcast accredited":
     "Octopus ha recibido la certificación ACPM",
   "Live episode": "Episodios en directo ahora",
@@ -350,9 +352,4 @@ 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",
 }

package/src/locale/fr.ts

@@ -201,11 +201,13 @@ export default {
   Debriefing: "Debriefing",
   Publishing: "Publication",
   "select productor": "Choisir un producteur",
-  "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",
+  "Share newsletter": "Partage d'une newsletter",
+  Configuration: "Configuration",
+  "HTML Code": "Code HTML",
   "Listen this episode": "Écouter ce podcast",
-  "Choose main color": "Choisir la couleur des éléments du module newsletter",
+  "Display emission name": "Afficher le titre de l'émission",
+  "Display participants list": "Afficher la liste des intervenants",
+  "Choose main color": "Choisir la couleur principale",
   "Octopus is ACPM Podcast accredited": "Octopus est accrédité ACPM Podcasts",
   "Live episode": "Épisode en live",
   "This live will start": "Ce live débutera",
@@ -356,9 +358,4 @@ 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",
 };

package/src/locale/it.ts

@@ -197,10 +197,12 @@ export default{
     Publishing: 'In corso di pubblicazione',
     'select productor': 'Seleziona producer',
     'Share newsletter': "Condividi newsletter",
-    "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',
+    Configuration: 'Configurazione',
+    'HTML Code': 'Codice HTML',
     'Listen this episode': 'Ascolta questo episodio',
-    'Choose main color': 'Scegli il colore degli elementi del modulo newsletter',
+    'Display emission name': "Mostra il titolo della serie",
+    'Display participants list': 'Mostra la lista degli speaker',
+    'Choose main color': 'Seleziona colore principale',
     'Octopus is ACPM Podcast accredited': 'Octopus è accreditata ACPM Podcast',
     'Live episode': 'Episodi live',
     'This live will start': 'Questo live inizierà',
@@ -342,9 +344,4 @@ 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",
   };

package/src/locale/sl.ts

@@ -194,10 +194,12 @@ export default {
   Publishing: "Objava",
   "select productor": "Izberi producenta",
   "Share newsletter": "Deli glasilo",
-  "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",
+  Configuration: "Konfiguracija",
+  "HTML Code": "Koda HTML",
   "Listen this episode": "Poslušajte to epizodo",
-  "Choose main color": "Izberite barvo elementov modula newsletter",
+  "Display emission name": "Prikaži naslov oddaje",
+  "Display participants list": "Prikaži seznam sodelujočih",
+  "Choose main color": "Izberi glavno barvo",
   "Octopus is ACPM Podcast accredited":
     "Octopus je akreditiran pri organizaciji ACPM",
   "Live episode": "Trenutne epizode v živo",
@@ -339,9 +341,4 @@ 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č",
 }

package/src/stores/GeneralStore.ts

@@ -19,7 +19,7 @@ export const useGeneralStore = defineStore("GeneralStore", {
   state: (): GeneralState => ({
     metaTitle: "Octopus by Saooti",
     platformEducation: false,
-    generalLogoUrl: "/img/logo_octopus_final.svg",
+    generalLogoUrl: "/img/logo_octopus_black.png",
     storedCategories: [],
     storedCategoriesOrga: [],
     isBeforeLive: true,

package/public/img/logo_octopus_final.svg

@@ -1,68 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 193.6 55.8" style="enable-background:new 0 0 193.6 55.8;" xml:space="preserve">
-<style type="text/css">
-	.st0{enable-background:new    ;}
-	.st1{fill:#188658;}
-</style>
-<g class="st0">
-	<path d="M130.2,41.3c1.7,0,2.6,0.8,2.6,2.3c0,1.5-1,2.4-2.6,2.4h-1.5v2h-1.1v-6.6H130.2z M128.7,44.9h1.5c1,0,1.6-0.4,1.6-1.3
-		c0-0.9-0.6-1.3-1.6-1.3h-1.5V44.9z"/>
-	<path d="M138.6,45.4c0,1.5-1.1,2.6-2.6,2.6c-1.6,0-2.6-1-2.6-2.6c0-1.5,1.1-2.5,2.6-2.5C137.6,42.8,138.6,43.9,138.6,45.4z
-		 M134.5,45.4c0,1,0.6,1.6,1.5,1.6c0.9,0,1.5-0.7,1.5-1.6c0-1-0.6-1.6-1.5-1.6C135.1,43.8,134.5,44.4,134.5,45.4z"/>
-	<path d="M144.6,47.9h-1.1v-0.9c-0.4,0.6-1,0.9-1.8,0.9c-1.4,0-2.4-1-2.4-2.6c0-1.5,1-2.5,2.4-2.5c0.8,0,1.4,0.3,1.8,0.9v-2.9h1.1
-		V47.9z M143.5,45.4c0-1-0.6-1.7-1.5-1.7c-0.9,0-1.5,0.7-1.5,1.7c0,1,0.6,1.6,1.5,1.6C142.8,47.1,143.5,46.4,143.5,45.4z"/>
-	<path d="M150.3,43.7l-0.6,0.7c-0.3-0.4-0.8-0.6-1.4-0.6c-0.9,0-1.5,0.7-1.5,1.6s0.6,1.6,1.5,1.6c0.6,0,1.1-0.2,1.5-0.6l0.6,0.6
-		c-0.5,0.6-1.2,0.9-2.1,0.9c-1.5,0-2.5-1-2.5-2.5c0-1.5,1-2.6,2.5-2.6C149.2,42.8,149.9,43.1,150.3,43.7z"/>
-	<path d="M154.3,47.3c-0.4,0.4-0.9,0.7-1.7,0.7c-1.1,0-1.8-0.7-1.8-1.6c0-0.9,0.7-1.5,1.9-1.5h1.5v-0.2c0-0.6-0.4-1-1.2-1
-		c-0.5,0-1,0.2-1.5,0.5l-0.4-0.8c0.7-0.4,1.2-0.6,2.2-0.6c1.3,0,2,0.7,2,1.8l0,3.3h-1.1V47.3z M154.3,46.1v-0.5H153
-		c-0.7,0-1,0.2-1,0.7c0,0.5,0.4,0.7,1,0.7C153.7,47.1,154.3,46.7,154.3,46.1z"/>
-	<path d="M160.1,43.3l-0.4,0.8c-0.4-0.3-1-0.4-1.4-0.4c-0.4,0-0.7,0.1-0.7,0.5c0,0.9,2.7,0.4,2.7,2.2c0,1-0.9,1.5-1.9,1.5
-		c-0.7,0-1.5-0.2-2-0.7l0.4-0.8c0.4,0.4,1.1,0.6,1.7,0.6c0.5,0,0.8-0.2,0.8-0.5c0-1-2.6-0.5-2.6-2.3c0-1,0.9-1.5,1.9-1.5
-		C159,42.8,159.7,43,160.1,43.3z"/>
-	<path d="M164.1,47.6c-0.4,0.2-0.8,0.4-1.2,0.4c-0.8,0-1.4-0.4-1.4-1.5v-2.6h-0.7v-0.8h0.7v-1.4h1.1v1.4h1.5v0.8h-1.5v2.4
-		c0,0.5,0.2,0.7,0.5,0.7c0.2,0,0.5-0.1,0.8-0.2L164.1,47.6z"/>
-	<path d="M171.4,47.1c-0.6,0.6-1.3,0.9-2,0.9c-1.2,0-2.1-0.8-2.1-1.9c0-0.9,0.7-1.4,1.4-1.8c-0.4-0.6-0.6-1.1-0.6-1.5
-		c0-0.9,0.7-1.5,1.7-1.5c1,0,1.7,0.6,1.7,1.4c0,0.9-0.8,1.4-1.6,1.8c0.4,0.4,0.8,0.9,1.4,1.4c0.2-0.3,0.4-0.7,0.6-1.2l0.7,0.5
-		c-0.2,0.5-0.4,0.9-0.7,1.3l1.1,1l-0.6,0.6L171.4,47.1z M170.8,46.5c-0.7-0.7-1.2-1.2-1.6-1.7c-0.5,0.3-1,0.7-1,1.2
-		c0,0.7,0.5,1.1,1.2,1.1C169.9,47.1,170.4,46.9,170.8,46.5z M169.5,43.9c0.6-0.3,1.2-0.7,1.2-1.3c0-0.4-0.3-0.7-0.8-0.7
-		c-0.5,0-0.9,0.3-0.9,0.8C169,43.1,169.1,43.5,169.5,43.9z"/>
-	<path d="M180.3,46.9v1h-4v-6.6h1.1v5.6H180.3z"/>
-	<path d="M182.5,41.5c0,0.4-0.3,0.7-0.6,0.7c-0.4,0-0.6-0.3-0.6-0.7c0-0.4,0.3-0.7,0.6-0.7C182.2,40.8,182.5,41.1,182.5,41.5z
-		 M181.3,47.9v-5h1.1v5H181.3z"/>
-	<path d="M185.1,47.9l-1.9-5h1.1l1.4,4l1.4-4h1.1l-1.9,5H185.1z"/>
-	<path d="M193.2,45.8h-3.8c0.2,0.8,0.8,1.3,1.6,1.3c0.5,0,1-0.2,1.4-0.6l0.6,0.6c-0.5,0.5-1.2,0.9-2.1,0.9c-1.5,0-2.6-1-2.6-2.5
-		c0-1.5,1-2.5,2.5-2.6C192.6,42.8,193.3,44,193.2,45.8z M192.2,45c0-0.8-0.6-1.3-1.4-1.3c-0.8,0-1.4,0.5-1.5,1.3H192.2z"/>
-</g>
-<g>
-	<path d="M32.7,15.6c0,8.7-7.1,15.5-16.2,15.5S0.4,24.3,0.4,15.6c0-8.8,7.1-15.4,16.2-15.4S32.7,6.9,32.7,15.6z M5.7,15.6
-		c0,6.1,5,10.8,11,10.8s10.8-4.8,10.8-10.8c0-6.1-4.9-10.8-10.8-10.8C10.6,4.9,5.7,9.6,5.7,15.6z"/>
-	<path d="M59.2,11.3l-2.7,3.2c-1.6-1.7-3.8-2.7-6.6-2.6c-4,0-6.9,3-6.9,7.4s2.9,7.4,6.9,7.4c2.9,0,5.3-1,6.8-2.8l2.8,2.8
-		C57.3,29.5,54,31,49.6,31c-6.9,0-11.7-4.7-11.7-11.7S42.7,7.5,49.6,7.5C53.8,7.5,57,8.9,59.2,11.3z"/>
-	<path d="M79.9,29.4c-1.8,1.1-3.7,1.7-5.7,1.7c-3.5,0-6.5-2-6.5-6.7v-12h-3.3V8.6h3.3V2.2h5v6.4h6.8v3.7h-6.8v11.1
-		c0,2.4,0.9,3.1,2.5,3.1c1,0,2.1-0.3,3.5-1L79.9,29.4z"/>
-	<path d="M140.2,19.4c0,6.9-4.4,11.7-11,11.7c-3.7,0-6.5-1.5-8.2-4.2v21h-5V7.7h5v4c1.7-2.7,4.5-4.2,8.1-4.2
-		C135.7,7.5,140.2,12.3,140.2,19.4z M135.2,19.2c0-4.3-2.9-7.5-7.1-7.5c-4.1,0-7.1,3.1-7.1,7.5c0,4.5,2.9,7.6,7.1,7.6
-		C132.3,26.8,135.2,23.6,135.2,19.2z"/>
-	<path d="M168.7,30.9h-5v-4.5c-1.6,3.2-4.5,4.7-8.3,4.7c-5.3,0-8.5-3.4-8.5-8.9V7.7h5v13c0,3.5,2,5.6,5.4,5.6c4-0.1,6.4-3.2,6.4-7.2
-		V7.7h5L168.7,30.9L168.7,30.9z"/>
-	<path d="M193.2,9.8l-1.8,3.7c-2-1.3-4.6-2-6.7-2c-2,0-3.4,0.7-3.4,2.3c0,4.3,12.3,2,12.3,10.4c0,4.7-4.2,6.9-8.9,6.9
-		c-3.4,0-7-1.1-9.3-3.2l1.8-3.6c2,1.8,5.2,2.9,7.7,2.9c2.1,0,3.8-0.7,3.8-2.5c0-4.7-12.2-2.1-12.1-10.4c0-4.7,4.1-6.7,8.5-6.7
-		C188.1,7.5,191.2,8.4,193.2,9.8z"/>
-</g>
-<g>
-	<path class="st1" d="M94.1,38.4c-1.8,2-2.5,4.9-1.6,7.7c1.3,4.1,5.8,6.3,9.9,5s6.3-5.8,5-9.9c-0.5-1.7-1.6-3-2.9-3.9l-0.9,1
-		c1.1,0.8,2.1,1.9,2.5,3.3c1.1,3.4-0.7,7-4.1,8.2c-3.4,1.1-7-0.7-8.2-4.1c-0.7-2.3-0.2-4.6,1.3-6.3L94.1,38.4z"/>
-	<path class="st1" d="M88.6,47.4c2.1,6.4,9,9.8,15.3,7.7c6.4-2.1,9.8-9,7.7-15.3c-0.8-2.5-2.4-4.5-4.4-6l-0.9,1
-		c1.8,1.3,3.2,3.1,4,5.4c1.9,5.7-1.2,11.8-6.9,13.7c-5.7,1.9-11.8-1.2-13.7-6.9c-1.3-3.8-0.3-7.8,2.2-10.6l-1-0.9
-		c-0.7,0.7-1.2,1.6-1.7,2.5c-0.1,0-1.9,0.1-2.5-1.3c0,0-0.4-1.4,0.6-2.3l-0.9-1c-1.6,1.5-1,3.6-1,3.7c0.6,1.6,2,2.1,3.1,2.2
-		c-0.4,0.9-0.6,1.9-0.7,3c-0.9-0.2-3.4-0.9-4.6-3c-1.1-1.9-0.9-4.6,0.5-7.9L82.6,31c-1.8,3.3-1.7,7-0.6,9c1.6,2.8,4.8,3.5,5.7,3.7
-		C88,44.8,88.2,46.1,88.6,47.4z"/>
-	<path class="st1" d="M101,46.9c1.8-0.6,2.8-2.6,2.2-4.4c-0.6-1.8-2.6-2.8-4.4-2.2s-2.8,2.6-2.2,4.4C97.2,46.5,99.2,47.5,101,46.9z
-		 M99.2,41.5c1.1-0.4,2.4,0.2,2.7,1.4c0.4,1.1-0.2,2.4-1.4,2.7c-1.1,0.4-2.4-0.2-2.7-1.4C97.5,43.1,98.1,41.9,99.2,41.5z"/>
-</g>
-<path class="st1" d="M97.7,31.6c6.7,0,12.1-5.4,12.1-12.1S104.3,7.4,97.7,7.4c-6.7,0-12.1,5.4-12.1,12.1S91,31.6,97.7,31.6z"/>
-<path class="st1" d="M97.7,34.8c8.4,0,15.2-6.8,15.2-15.2S106,4.4,97.7,4.4s-15.2,6.8-15.2,15.2S89.3,34.8,97.7,34.8z M97.7,5.7
-	c7.7,0,13.9,6.3,13.9,13.9s-6.3,13.9-13.9,13.9c-7.7,0-13.9-6.3-13.9-13.9S90,5.7,97.7,5.7z"/>
-</svg>