@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

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

@@ -3,7 +3,7 @@
     <button
       id="anonymous-share-button"
       :class="btnClass"
-      :title="$t('Share')"
+      :title="t('Share')"
     >
       <DotsHorizontalIcon />
     </button>
@@ -67,22 +67,22 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup 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 { computed, defineAsyncComponent, onBeforeMount, ref, useTemplateRef } 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";
+import { useI18n } from "vue-i18n";
 const SnackBar = defineAsyncComponent(() => import("../../misc/SnackBar.vue"));
 const NewsletterModal = defineAsyncComponent(
   () => import("../../misc/modal/NewsletterModal.vue"),
@@ -105,186 +105,168 @@ const EmailNewsletterIcon = defineAsyncComponent(
 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 },
-  },
+//Props 
+const props = defineProps({
+  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",
-        },
-      ];
+//Data 
+const lazyLoadingSnackbar = ref(false);
+const isNewsletterModal = ref(false);
+const isQrCodeModal = ref(false);
+const displayRss = ref(false);
+const noSharing = ref(true);
+const playerCanBeSharedAnonymous = ref(false);
+const playerCanBeSharedOthers = ref(false);
+const isLoading = ref(true);
+const isRssModal = ref(false);
+const isPlayerModal = ref(false);
+const snackBarRef = useTemplateRef('snackbar');
+
+
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+const apiStore = useApiStore();
+const saveFetchStore = useSaveFetchStore();
+
+
+//Computed
+const urlPage = computed(() => window.location.href);
+const isPodcastmaker = computed(() => state.generalParameters.podcastmaker);
+const rssUrl = computed(() => {
+  const api = apiStore.apiUrl + "rss/";
+  if (
+    (!isPodcastmaker.value && props.playlist) ||
+    props.podcast ||
+    props.emission
+  ) {
+    return "";
+  }
+  if (props.participantId) {
+    return api + "participant/" + props.participantId + ".rss";
+  }
+  if (props.playlist) {
+    return api + "playlist/" + props.playlist.playlistId + ".rss";
+  }
+  if (props.organisationId) {
+    return api + "productor/" + props.organisationId + ".rss";
+  }
+  return "";
+});
+const titleRssButton = computed(() => {
+  if (props.participantId) {
+    return t("Subscribe to this participant");
+  }
+  if (props.emission) {
+    return t("Subscribe to this emission");
+  }
+  return t("Subscribe to this RSS feed");
+});
+const dropdownButtons = computed(() => {
+  return [
+    {
+      title: t("Copy this page URL"),
+      icon: LinkVariantIcon,
+      condition:true,
+      emitName: "link",
     },
-  },
-  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;
+    {
+      title: t("Share the player"),
+      icon: CodeTagsIcon,
+      condition: !isPodcastmaker.value && (playerCanBeSharedAnonymous.value || (playerCanBeSharedOthers.value && authStore.authOrgaId)),
+      emitName: "player",
     },
-    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;
-      }
+    {
+      title: t("Share newsletter"),
+      icon: EmailNewsletterIcon,
+      condition: props.podcast || props.emission || props.playlist,
+      emitName: "newsletter",
     },
-    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;
-      }
+    {
+      title: t("Share QR Code"),
+      icon: QrcodeIcon,
+      condition: true,
+      emitName: "qrcode",
     },
-    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"),
-        );
-      }
+    {
+      title: titleRssButton.value,
+      icon: RssIcon,
+      condition: '' !== rssUrl.value && displayRss.value && !authStore.isGarRole,
+      emitName: "rss",
     },
-  }
+  ];
 });
+
+
+onBeforeMount(()=>initShareButtons())
+
+
+//Methods
+async function initShareButtons() {
+  if (undefined !== props.participantId) {
+    displayRss.value = await classicApi.fetchData<boolean>({
+      api: 0,
+      path: `rss/participants/allowed/${props.organisationId}`,
+      isNotAuth: true,
+    });
+  } else {
+    displayRss.value = true;
+  }
+  determinePlayerCanBeShared();
+  if (!props.organisationId) {
+    return;
+  }
+  const attributes = await saveFetchStore.getOrgaAttributes(props.organisationId);
+  noSharing.value = "true" === attributes.noSharing;
+  isLoading.value = false;
+}
+function determinePlayerCanBeShared() {
+  const emissionAnnot = props.podcast?.emission.annotations ?? props.emission?.annotations;
+  if (!emissionAnnot) { return }
+  if (emissionAnnot.exclusive) {
+    playerCanBeSharedOthers.value = "true" !== emissionAnnot.exclusive;
+  }
+  if (emissionAnnot.notExclusive) {
+    playerCanBeSharedAnonymous.value = "true" === emissionAnnot.notExclusive;
+  }
+}
+function clickButton(name: string) {
+  switch (name) {
+    case "link":
+      displayHelper.onCopyCode(urlPage.value, afterCopy);
+      break;
+    case "newsletter":
+      isNewsletterModal.value = true;
+      break;
+    case "qrcode":
+      isQrCodeModal.value = true;
+      break;
+    case "rss":
+      isRssModal.value = true;
+      break;
+    case "player": 
+      isPlayerModal.value = true;
+      break;
+    default:
+      break;
+  }
+}
+function afterCopy(): void {
+  if (!lazyLoadingSnackbar.value) {
+    lazyLoadingSnackbar.value = true;
+    setTimeout(() => {
+      afterCopy();
+    }, 500);
+  } else {
+    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t("Link in clipboard"));
+  }
+}
 </script>

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

@@ -1,18 +1,18 @@
 <template>
   <section class="module-box">
     <h2 class="mb-3">
-      {{ $t("Distribute") }}
+      {{ t("Distribute") }}
     </h2>
     <div class="sharing-distribution-container">
-      {{ $t("Rss feed:") }}
+      {{ t("Rss feed:") }}
       <div class="text-primary hide-small-screen text-break">
         {{ rss }}
       </div>
       <ClassicCopyButton
-        :text="$t('Copy')"
-        :text-after-copy="$t('Copied!')"
+        :text="t('Copy')"
+        :text-after-copy="t('Copied!')"
         :data-to-copy="rss"
-        :snackbar-text="$t('Link in clipboard')"
+        :snackbar-text="t('Link in clipboard')"
       />
     </div>
     <RssSection v-if="emission" :emission="emission" />
@@ -33,7 +33,7 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import ClassicCopyButton from "../../form/ClassicCopyButton.vue";
 import RadiolineIcon from "../../icons/RadiolineIcon.vue";
 import TuninIcon from "../../icons/TuninIcon.vue";
@@ -50,126 +50,112 @@ import { useApiStore } from "../../../stores/ApiStore";
 import classicApi from "../../../api/classicApi";
 import { Emission } from "@/stores/class/general/emission";
 
-import { defineComponent, defineAsyncComponent } from "vue";
-import { mapState } from "pinia";
+import {  defineAsyncComponent, ref, Ref, computed, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 const RssSection = defineAsyncComponent(
   () => import("@/components/display/aggregator/RssSection.vue"),
 );
-export default defineComponent({
-  components: {
-    RssSection,
-    SpotifyIcon,
-    YoutubeIcon,
-    ApplePodcastIcon,
-    DeezerIcon,
-    AmazonMusicIcon,
-    IHeartIcon,
-    PlayerFmIcon,
-    PocketCastIcon,
-    PodcastAddictIcon,
-    TuninIcon,
-    RadiolineIcon,
-    ClassicCopyButton
-  },
-  props: {
-    emissionId: { default: undefined, type: Number },
-  },
-
-  data() {
-    return {
-      emission: undefined as Emission | undefined,
-      rss: "" as string,
-    };
-  },
-  computed: {
-    ...mapState(useApiStore, ["apiUrl"]),
-    platformShare() {
-      return [
-        {
-          url: this.getUrl("amazon"),
-          icon: "AmazonMusicIcon",
-          title: "Amazon Music",
-          color: "#0c6cb3",
-        },
-        {
-          url: this.getUrl("apple"),
-          icon: "ApplePodcastIcon",
-          title: "Apple Podcast / iTunes",
-          color:"#aa1dd3"
-        },
-        { url: this.getUrl("deezer"), 
-          icon: "DeezerIcon", 
-          title: "Deezer",
-          color:"#a238ff" },
-        { url: this.getUrl("iHeart"), 
-          icon: "IHeartIcon",
-          title: "iHeart",
-          color:"#e11b22" },
-        {
-          url: this.getUrl("PlayerFM"),
-          icon: "PlayerFmIcon",
-          title: "PlayerFM",
-          color:"#bb202a"
-        },
-        {
-          url: this.getUrl("PocketCasts"),
-          icon: "PocketCastIcon",
-          title: "Pocket Casts",
-          color:"#f43e37"
-        },
-        {
-          url: this.getUrl("PodcastAddict"),
-          icon: "PodcastAddictIcon",
-          title: "Podcast Addict",
-          color:"#f4842d"
-        },
-        {
-          url: this.getUrl("radioline"),
-          icon: "RadiolineIcon",
-          title: "Radioline",
-          color:"#1678bd"
-        },
-        {
-          url: this.getUrl("spotify"),
-          icon: "SpotifyIcon",
-          title: "Spotify",
-          color: "#1ed760",
-        },
-        { url: this.getUrl("tuneIn"), 
-        icon: "TuninIcon", 
-        title: "TuneIn",
-      color:"#36b4a7" },
-        {
-          url: this.getUrl("youtube"),
-          icon: "YoutubeIcon",
-          title: "YouTube Music",
-          color: "#fe0000",
-        },
-      ];
-    },
-  },
 
-  mounted() {
-    this.getEmissionDetails();
-    this.getRSS();
-  },
+//Props 
+const props = defineProps({
+  emissionId: { default: undefined, type: Number },
+})
+
+//Data 
+const rss = ref("");
+const emission : Ref<Emission | undefined>= ref(undefined);
 
-  methods: {
-    getUrl(platform: string): string {
-      return `/main/priv/distribution/${platform}/${this.emissionId}`;
+//Composables
+const { t } = useI18n();
+const apiStore = useApiStore();
+
+//Computed
+const platformShare = computed(() => {
+  return [
+    {
+      url: getUrl("amazon"),
+      icon: AmazonMusicIcon,
+      title: "Amazon Music",
+      color: "#0c6cb3",
+    },
+    {
+      url: getUrl("apple"),
+      icon: ApplePodcastIcon,
+      title: "Apple Podcast / iTunes",
+      color:"#aa1dd3"
+    },
+    { url: getUrl("deezer"), 
+      icon: DeezerIcon, 
+      title: "Deezer",
+      color:"#a238ff" },
+    { url: getUrl("iHeart"), 
+      icon: IHeartIcon,
+      title: "iHeart",
+      color:"#e11b22" },
+    {
+      url: getUrl("PlayerFM"),
+      icon: PlayerFmIcon,
+      title: "PlayerFM",
+      color:"#bb202a"
+    },
+    {
+      url: getUrl("PocketCasts"),
+      icon: PocketCastIcon,
+      title: "Pocket Casts",
+      color:"#f43e37"
+    },
+    {
+      url: getUrl("PodcastAddict"),
+      icon: PodcastAddictIcon,
+      title: "Podcast Addict",
+      color:"#f4842d"
+    },
+    {
+      url: getUrl("radioline"),
+      icon: RadiolineIcon,
+      title: "Radioline",
+      color:"#1678bd"
     },
-    async getEmissionDetails(): Promise<void> {
-      this.emission = await classicApi.fetchData<Emission>({
-        api: 0,
-        path: "emission/" + this.emissionId,
-      });
+    {
+      url: getUrl("spotify"),
+      icon: SpotifyIcon,
+      title: "Spotify",
+      color: "#1ed760",
     },
-    getRSS(): void {
-      if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
-      this.rss = `${this.apiUrl}rss/emission/${this.emissionId}.rss`;
+    { url: getUrl("tuneIn"), 
+    icon: TuninIcon, 
+    title: "TuneIn",
+    color:"#36b4a7" },
+    {
+      url: getUrl("youtube"),
+      icon: YoutubeIcon,
+      title: "YouTube Music",
+      color: "#fe0000",
     },
-  },
+  ];
 });
+
+
+onMounted(()=>{
+  getEmissionDetails();
+  getRSS();
+})
+
+
+//Methods
+function getUrl(platform: string): string {
+  return `/main/priv/distribution/${platform}/${props.emissionId}`;
+}
+async function getEmissionDetails(): Promise<void> {
+  emission.value = await classicApi.fetchData<Emission>({
+    api: 0,
+    path: "emission/" + props.emissionId,
+  });
+}
+function getRSS(): void {
+  if (!props.emissionId || props.emissionId <= 0) return;
+  rss.value = `${apiStore.apiUrl}rss/emission/${props.emissionId}.rss`;
+}
 </script>
 
 <style lang="scss">