@saooti/octopus-sdk 40.1.21 → 40.2.1-SNAPSHOT

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

@@ -0,0 +1,291 @@
+<template>
+  <div v-if="!isLoading && !noSharing">
+    <button
+      id="anonymous-share-button"
+      :class="btnClass"
+      :title="$t('Share')"
+    >
+      <DotsHorizontalIcon />
+    </button>
+    <ClassicPopover
+      target="anonymous-share-button"
+      :relative-class="relativeClass"
+      :is-fixed="true"
+      :left-pos="true"
+      :only-click="true"
+    >
+      <div  
+        v-for="button in dropdownButtons"
+        :key="button.icon"
+        class="d-flex flex-column"
+      >
+        <button
+          v-if="button.condition"
+          :key="button.title"
+          class="btn-transparent d-flex flex-nowrap justify-content-start align-items-center octopus-dropdown-item py-2"
+          :title="button.title"
+          @mousedown="clickButton(button.emitName)"
+          @keydown.enter="clickButton(button.emitName)"
+        >
+          <component :is="button.icon" />
+          <div class="ms-1">{{ button.title }}</div>
+        </button>
+      </div>
+    </ClassicPopover>
+    <QrCodeModal
+      v-if="isQrCodeModal"
+      :url-page="urlPage"
+      :orga-for-color="organisationId"
+      @close="isQrCodeModal = false"
+    />
+    <PlayerAnonymousModal
+      v-if="isPlayerModal"
+      :podcast="podcast"
+      :emission="emission ?? podcast?.emission"
+      :exclusive="!playerCanBeSharedOthers"
+      :not-exclusive="playerCanBeSharedAnonymous"
+      @close="isPlayerModal = false"
+    />
+    <NewsletterModal
+      v-if="isNewsletterModal"
+      :closable="true"
+      :podcast="podcast"
+      :emission="emission"
+      :playlist="playlist"
+      @close="isNewsletterModal = false"
+    />
+    <ClipboardModal
+      v-if="isRssModal"
+      :link="rssUrl"
+      @close="isRssModal = false"
+      @copy="afterCopy"
+    />
+    <SnackBar
+      v-if="lazyLoadingSnackbar"
+      ref="snackbar"
+      position="bottom-left"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import QrcodeIcon from "vue-material-design-icons/Qrcode.vue";
+import LinkVariantIcon from "vue-material-design-icons/LinkVariant.vue";
+import DotsHorizontalIcon from "vue-material-design-icons/DotsHorizontal.vue";
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import displayHelper from "../../../helper/displayHelper";
+import { defineAsyncComponent, defineComponent } from "vue";
+import { useApiStore } from "../../../stores/ApiStore";
+import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { Podcast } from "@/stores/class/general/podcast";
+import { Emission } from "@/stores/class/general/emission";
+import { Playlist } from "@/stores/class/general/playlist";
+import { mapActions, mapState } from "pinia";
+import { state } from "../../../stores/ParamSdkStore";
+import classicApi from "../../../api/classicApi";
+const SnackBar = defineAsyncComponent(() => import("../../misc/SnackBar.vue"));
+const NewsletterModal = defineAsyncComponent(
+  () => import("../../misc/modal/NewsletterModal.vue"),
+);
+const QrCodeModal = defineAsyncComponent(
+  () => import("../../misc/modal/QrCodeModal.vue"),
+);
+const ClipboardModal = defineAsyncComponent(
+  () => import("../../misc/modal/ClipboardModal.vue"),
+);
+const PlayerAnonymousModal = defineAsyncComponent(
+  () => import("../sharing/PlayerAnonymousModal.vue"),
+);
+const CodeTagsIcon = defineAsyncComponent(
+  () => import("vue-material-design-icons/CodeTags.vue"),
+);
+const EmailNewsletterIcon = defineAsyncComponent(
+  () => import("vue-material-design-icons/EmailNewsletter.vue"),
+);
+const RssIcon = defineAsyncComponent(
+  () => import("vue-material-design-icons/Rss.vue"),
+);
+export default defineComponent({
+  name: "PodcastShareAnonymous",
+  components: {
+    ClassicPopover,
+    DotsHorizontalIcon,
+    LinkVariantIcon,
+    EmailNewsletterIcon,
+    QrcodeIcon,
+    CodeTagsIcon,
+    RssIcon,
+    SnackBar,
+    NewsletterModal,
+    QrCodeModal,
+    ClipboardModal,
+    PlayerAnonymousModal
+  },
+
+  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 },
+    relativeClass: { default: "page-element", type: String },
+    btnClass: { default: "btn btn-transparent", type: String },
+  },
+
+  data() {
+    return {
+      lazyLoadingSnackbar: false as boolean,
+      isNewsletterModal: false as boolean,
+      isQrCodeModal: false as boolean,
+      displayRss: false as boolean,
+      noSharing: true as boolean,
+      playerCanBeSharedAnonymous: false as boolean,
+      playerCanBeSharedOthers: false as boolean,
+      isLoading: true as boolean,
+      isRssModal: false as boolean,
+      isPlayerModal: false as boolean
+    };
+  },
+  computed:{
+    ...mapState(useAuthStore, ["isGarRole","authOrgaId"]),
+    ...mapState(useApiStore, ["apiUrl"]),
+    urlPage(): string {
+      return window.location.href;
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
+    rssUrl(): string {
+      const api = this.apiUrl + "rss/";
+      if (
+        (!this.isPodcastmaker && this.playlist) ||
+        this.podcast ||
+        this.emission
+      ) {
+        return "";
+      }
+      if (this.participantId) {
+        return api + "participant/" + this.participantId + ".rss";
+      }
+      if (this.playlist) {
+        return api + "playlist/" + this.playlist.playlistId + ".rss";
+      }
+      if (this.organisationId) {
+        return api + "productor/" + this.organisationId + ".rss";
+      }
+      return "";
+    },
+    titleRssButton(): string {
+      if (this.participantId) {
+        return this.$t("Subscribe to this participant");
+      }
+      if (this.emission) {
+        return this.$t("Subscribe to this emission");
+      }
+      return this.$t("Subscribe to this RSS feed");
+    },
+    dropdownButtons() {
+      return [
+        {
+          title: this.$t("Copy this page URL"),
+          icon: "LinkVariantIcon",
+          condition:true,
+          emitName: "link",
+        },
+        {
+          title: this.$t("Share the player"),
+          icon: "CodeTagsIcon",
+          condition: !this.isPodcastmaker && (this.playerCanBeSharedAnonymous || (this.playerCanBeSharedOthers && this.authOrgaId)),
+          emitName: "player",
+        },
+        {
+          title: this.$t("Share newsletter"),
+          icon: "EmailNewsletterIcon",
+          condition: this.podcast || this.emission || this.playlist,
+          emitName: "newsletter",
+        },
+        {
+          title: this.$t("Share QR Code"),
+          icon: "QrcodeIcon",
+          condition: true,
+          emitName: "qrcode",
+        },
+        {
+          title: this.titleRssButton,
+          icon: "RssIcon",
+          condition: '' !== this.rssUrl && this.displayRss && !this.isGarRole,
+          emitName: "rss",
+        },
+      ];
+    },
+  },
+  created() {
+    this.initShareButtons();
+  },
+  methods:{
+    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initShareButtons() {
+      if (undefined !== this.participantId) {
+        this.displayRss = await classicApi.fetchData<boolean>({
+          api: 0,
+          path: `rss/participants/allowed/${this.organisationId}`,
+          isNotAuth: true,
+        });
+      } else {
+        this.displayRss = true;
+      }
+      this.determinePlayerCanBeShared();
+      if (!this.organisationId) {
+        return;
+      }
+      const attributes = await this.getOrgaAttributes(this.organisationId);
+      this.noSharing = "true" === attributes.noSharing;
+      this.isLoading = false;
+    },
+    determinePlayerCanBeShared() {
+      const emissionAnnot = this.podcast?.emission.annotations ?? this.emission?.annotations;
+      if (!emissionAnnot) { return }
+      if (emissionAnnot.exclusive) {
+        this.playerCanBeSharedOthers = "true" !== emissionAnnot.exclusive;
+      }
+      if (emissionAnnot.notExclusive) {
+        this.playerCanBeSharedAnonymous = "true" === emissionAnnot.notExclusive;
+      }
+    },
+    clickButton(name: string) {
+      switch (name) {
+        case "link":
+          displayHelper.onCopyCode(this.urlPage, this.afterCopy);
+          break;
+        case "newsletter":
+          this.isNewsletterModal = true;
+          break;
+        case "qrcode":
+          this.isQrCodeModal = true;
+          break;
+        case "rss":
+          this.isRssModal = true;
+          break;
+        case "player": 
+          this.isPlayerModal = true;
+          break;
+        default:
+          break;
+      }
+    },
+    afterCopy(): void {
+      if (!this.lazyLoadingSnackbar) {
+        this.lazyLoadingSnackbar = true;
+        setTimeout(() => {
+          this.afterCopy();
+        }, 500);
+      } else {
+        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+          this.$t("Link in clipboard"),
+        );
+      }
+    },
+  }
+});
+</script>

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

@@ -0,0 +1,216 @@
+<template>
+  <div class="d-flex flex-column align-items-center">
+    <div class="d-flex flex-grow-1">
+      <div class="d-flex flex-column flex-shrink-0 me-3">
+        <h2 class="mb-3">
+          {{ $t("Configure your Newsletter tile") }}
+        </h2>
+        <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="description-text">
+              {{ colors.secondText }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- eslint-disable vue/no-v-html -->
+      <div class="border p-3" v-html="newsletterHtml" />
+      <!-- eslint-enable -->
+    </div>
+    <button
+      class="btn btn-primary w-fit-content my-3"
+      @click="onCopyCode(newsletterHtml, afterCopy)"
+    >
+      {{ $t("Copy code") }}
+    </button>
+    <div>{{ $t("And paste it in your newsletter") }}</div>
+    <SnackBar ref="snackbar" position="bottom-left" />
+  </div>
+</template>
+
+<script lang="ts">
+import SnackBar from "../../misc/SnackBar.vue";
+import { VSwatches } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
+import displayHelper from "../../../helper/displayHelper";
+import { Podcast } from "@/stores/class/general/podcast";
+import { defineComponent } from "vue";
+import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { mapState, mapActions } from "pinia";
+import { Emission } from "@/stores/class/general/emission";
+import { Playlist } from "@/stores/class/general/playlist";
+export default defineComponent({
+  name: "SahreNewsletter",
+
+  components: {
+    SnackBar,
+    VSwatches,
+  },
+
+  props: {
+    podcast: { default: undefined, type: Object as () => Podcast },
+    emission: { default: undefined, type: Object as () => Emission },
+    playlist: { default: undefined, type: Object as () => Playlist },
+  },
+
+  emits: ["close"],
+
+  data() {
+    return {
+      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, ["authOrgaId"]),
+    newsletterInfo() {
+      if (this.podcast) {
+        return {
+          imageUrl: `${this.podcast.imageUrl}" alt="${this.$t(
+            "Episode name image",
+            { name: this.podcast.title },
+          )}`,
+          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 {
+          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 {
+        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 {
+      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() {
+    this.initData();
+  },
+  methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    onCopyCode(link: string, callback: () => void){
+      displayHelper.onCopyCode(link, callback);
+    },
+    afterCopy(): void {
+      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+        this.$t("Data in clipboard"),
+      );
+    },
+    async initData(): Promise<void> {
+      const orgaId = this.authOrgaId;
+      if (!orgaId?.length) {
+        return;
+      }
+      const attributes = await this.getOrgaAttributes(orgaId ?? "");
+      if (
+        Object.hasOwn(attributes, "podcastmakerUrl") &&
+        (attributes.podcastmakerUrl as string | undefined | null)?.length
+      ) {
+        this.shareUrl =
+          attributes.podcastmakerUrl +
+          window.location.pathname +
+          window.location.search;
+      }
+      if (Object.hasOwn(attributes, "COLOR")) {
+        this.arrayColors[0].color = attributes.COLOR as string;
+      }
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,110 @@
+<template>
+  <section v-if="!isLoading && !isGarRole && (authOrgaId || !noSharing)" id="share-buttons-podcast-section" class="module-box">
+    <h3 class="mb-2">
+      {{ $t("Share in one click") }}
+    </h3>
+    <div class="d-flex align-items-center">
+      <template v-for="button in arrayShareButtons" :key="button.title">
+        <a
+          v-if="button.condition"
+          rel="noreferrer noopener"
+          target="_blank"
+          :href="button.url"
+          class="btn share-btn mb-2 text-dark me-2"
+          :title="$t('New window', {text: button.title})"
+        >
+          <component :is="button.icon" :size="34" />
+        </a>
+      </template>
+      <slot name="additional-buttons"/>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import XIcon from "../../icons/XIcon.vue";
+import BlueSkyIcon from "../../icons/BlueSkyIcon.vue";
+import WhatsappIcon from "vue-material-design-icons/Whatsapp.vue";
+import LinkedinIcon from "vue-material-design-icons/Linkedin.vue";
+import FacebookIcon from "vue-material-design-icons/Facebook.vue";
+import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
+import { mapActions, mapState } from "pinia";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    FacebookIcon,
+    LinkedinIcon,
+    WhatsappIcon,
+    XIcon,
+    BlueSkyIcon
+  },
+  props: {
+    organisationId: { default: undefined, type: String },
+  },
+  data() {
+    return {
+      noSharing: true as boolean,
+      isLoading: true as boolean,
+    };
+  },
+  computed: {
+    ...mapState(useAuthStore, [
+      "isGarRole",
+      "authOrgaId"
+    ]),
+    arrayShareButtons() {
+      return [
+        {
+          title: "Facebook",
+          icon: "FacebookIcon",
+          url: `https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "X",
+          icon: "XIcon",
+          url: `https://twitter.com/intent/tweet?text=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Linkedin",
+          icon: "LinkedinIcon",
+          url: `https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Bluesky",
+          icon: "BlueSkyIcon",
+          url: `https://bsky.app/intent/compose?text=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Whatsapp",
+          icon: "WhatsappIcon",
+          url: `whatsapp://send?text=${this.urlPage}`,
+          condition: window.matchMedia("(hover: none)").matches,
+        },
+      ];
+    },
+    urlPage(): string {
+      return window.location.href;
+    },
+  },
+  created() {
+    this.initShareButtons();
+  },
+  methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initShareButtons() {
+      if (!this.organisationId) {
+        return;
+      }
+      const attributes = await this.getOrgaAttributes(this.organisationId);
+      this.noSharing = "true" === attributes.noSharing;
+      this.isLoading = false;
+    },
+  },
+});
+</script>

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

@@ -116,6 +116,8 @@ export default defineComponent({
     return {
       hiddenLinks: [] as Array<Link>,
       lastWindowWidth: 420 as number,
+      exclusive: false as boolean,
+      notExclusive: false as boolean,
     };
   },
   computed: {

package/src/components/misc/ClassicNav.vue

@@ -89,6 +89,9 @@ export default defineComponent({
     border-bottom: solid 1px var(--octopus-border-default);
     background-color: var(--octopus-background);
   }
+  .octopus-nav.light  .octopus-tab-content{
+    border-top: solid 1px var(--octopus-border-default);
+  }
 
 
   .octopus-nav.light .octopus-nav-item {
@@ -122,10 +125,13 @@ export default defineComponent({
   }
 
   .octopus-nav.light .octopus-nav-link {
-    border-top: 0 !important;
-    border-right: 0 !important;
-    border-left: 0 !important;
     font-weight: bold;
+    background:var(--octopus-border-default);
+    &.active{
+      border-bottom-color: var(--octopus-primary);
+      background: transparent;
+      color: var(--octopus-primary);
+    }
   }
 
 

package/src/components/misc/ClassicPopover.vue

@@ -245,7 +245,7 @@ export default defineComponent({
         return;
       }
       //Exception timepicker in popover
-      var result = Array.from(e?.target?.classList ?? []).findIndex((val) => { return val.startsWith("dp__");});
+      const result = Array.from(e?.target?.classList ?? []).findIndex((val) => { return val.startsWith("dp__");});
       if (-1!==result) {
         return;
       }