@saooti/octopus-sdk 40.1.21 → 40.2.0

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

@@ -1,6 +1,21 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <qrcode-vue
+    <div class="d-flex align-items-center mb-3">
+      <div class="form-label me-3">
+        {{ $t("Color of the QR Code") }}
+      </div>
+      <VSwatches
+        v-model:model-value="color"
+        class="c-hand"
+        show-fallback
+        fallback-input-type="color"
+        colors="text-advanced"
+        popover-to="right"
+        popover-y="bottom"
+        :data-color="color"
+      />
+    </div>
+    <qrcode-svg
       :value="url"
       :size="size"
       level="H"
@@ -8,14 +23,7 @@
       class="myQrCode"
       :margin="2"
     />
-    <ClassicCheckbox
-      v-if="'#000000' !== otherColor"
-      v-model:text-init="isNotBlack"
-      class="flex-shrink-0"
-      id-checkbox="is-black-qr-code"
-      :label="$t('Use organization color')"
-    />
-    <button class="btn m-3" @click="download">
+    <button class="btn btn-primary my-3" @click="download">
       {{ $t("Download") }}
     </button>
     <SnackBar ref="snackbar" position="bottom-left" />
@@ -23,63 +31,56 @@
 </template>
 
 <script lang="ts">
-import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import { VSwatches } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
 import SnackBar from "../../misc/SnackBar.vue";
-import QrcodeVue from "qrcode.vue";
+import { QrcodeSvg } from "qrcode.vue";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
-import { useAuthStore } from "../../../stores/AuthStore";
-import { mapState, mapActions } from "pinia";
+import { mapActions } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "QrCode",
 
   components: {
     SnackBar,
-    QrcodeVue,
-    ClassicCheckbox,
+    QrcodeSvg,
+    VSwatches,
   },
   props: {
     url: { default: "", type: String },
+    orgaForColor: { default: undefined, type: String },
   },
   data() {
     return {
       size: 200 as number,
       color: "#000000" as string,
-      otherColor: "#000000" as string,
-      isNotBlack: false as boolean,
     };
   },
-  computed: {
-    ...mapState(useAuthStore, ["authOrganisation", "authOrgaId"]),
-  },
-  watch: {
-    isNotBlack() {
-      this.color = this.isNotBlack ? this.otherColor : "#000000";
-    },
-  },
   created() {
-    this.initColor();
+    this.initDefaultColor();
   },
   methods: {
     ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
     download(): void {
-      const link = document.createElement("a");
-      link.download = "qrcode.png";
       const canvas = document.getElementsByClassName("myQrCode");
       if (canvas && canvas.length > 0 && canvas[0]) {
-        link.href = (canvas[0] as HTMLCanvasElement).toDataURL();
-        link.click();
+        var svgData = canvas[0].outerHTML;
+        var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
+        var svgUrl = URL.createObjectURL(svgBlob);
+        var downloadLink = document.createElement("a");
+        downloadLink.href = svgUrl;
+        downloadLink.download = "qrcode.svg";
+        downloadLink.click();
         (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
           this.$t("Download started"),
         );
       }
     },
-    async initColor(): Promise<void> {
-      if (undefined === this.authOrgaId) return;
-      const orgaId = this.authOrgaId;
-      const attributes = await this.getOrgaAttributes(orgaId ?? "");
+    async initDefaultColor(): Promise<void> {
+      if (undefined === this.orgaForColor) return;
+      const attributes = await this.getOrgaAttributes(this.orgaForColor);
       if (Object.hasOwn(attributes, "COLOR")) {
-        this.otherColor = attributes.COLOR as string;
+        this.color = attributes.COLOR as string;
       }
     },
   },

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

@@ -0,0 +1,290 @@
+<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"
+    />
+    <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/ShareDistribution.vue

@@ -8,9 +8,12 @@
       <div class="text-primary hide-small-screen text-break">
         {{ rss }}
       </div>
-      <button class="btn btn-primary" @click="onCopyCode(rss, afterCopy)">
-        {{ $t("Copy") }}
-      </button>
+      <ClassicCopyButton
+        :text="$t('Copy')"
+        :text-after-copy="$t('Copied!')"
+        :data-to-copy="rss"
+        :snackbar-text="$t('Link in clipboard')"
+      />
     </div>
     <RssSection v-if="emission" :emission="emission" />
     <div class="sharing-distribution-container">
@@ -27,15 +30,11 @@
         />{{ platform.title }}
       </router-link>
     </div>
-    <SnackBar
-      v-if="lazyLoadingSnackbar"
-      ref="snackbar"
-      position="bottom-left"
-    />
   </section>
 </template>
 
 <script lang="ts">
+import ClassicCopyButton from "../../form/ClassicCopyButton.vue";
 import RadiolineIcon from "../../icons/RadiolineIcon.vue";
 import TuninIcon from "../../icons/TuninIcon.vue";
 import PodcastAddictIcon from "../../icons/PodcastAddictIcon.vue";
@@ -49,8 +48,6 @@ import YoutubeIcon from "vue-material-design-icons/Youtube.vue";
 import SpotifyIcon from "vue-material-design-icons/Spotify.vue";
 import { useApiStore } from "../../../stores/ApiStore";
 import classicApi from "../../../api/classicApi";
-import SnackBar from "../../misc/SnackBar.vue";
-import displayHelper from "../../../helper/displayHelper";
 import { Emission } from "@/stores/class/general/emission";
 
 import { defineComponent, defineAsyncComponent } from "vue";
@@ -60,7 +57,6 @@ const RssSection = defineAsyncComponent(
 );
 export default defineComponent({
   components: {
-    SnackBar,
     RssSection,
     SpotifyIcon,
     YoutubeIcon,
@@ -73,6 +69,7 @@ export default defineComponent({
     PodcastAddictIcon,
     TuninIcon,
     RadiolineIcon,
+    ClassicCopyButton
   },
   props: {
     emissionId: { default: undefined, type: Number },
@@ -82,7 +79,6 @@ export default defineComponent({
     return {
       emission: undefined as Emission | undefined,
       rss: "" as string,
-      lazyLoadingSnackbar: false as boolean,
     };
   },
   computed: {
@@ -159,9 +155,6 @@ export default defineComponent({
   },
 
   methods: {
-    onCopyCode(link: string, callback: () => void){
-      displayHelper.onCopyCode(link, callback);
-    },
     getUrl(platform: string): string {
       return `/main/priv/distribution/${platform}/${this.emissionId}`;
     },
@@ -175,18 +168,6 @@ export default defineComponent({
       if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
       this.rss = `${this.apiUrl}rss/emission/${this.emissionId}.rss`;
     },
-    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>