@saooti/octopus-sdk 37.0.6 → 37.0.8

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

@@ -2,7 +2,7 @@
   <div class="module-box">
     <div class="d-flex align-items-center mb-3">
       <h2 class="big-h2 mb-0">
-        {{ $t('Share') }}
+        {{ $t("Share") }}
       </h2>
       <span
         v-if="authenticated"
@@ -11,7 +11,7 @@
         tabindex="0"
         class="saooti-help ms-2"
       />
-      <Popover
+      <ClassicPopover
         v-if="authenticated"
         target="popover-share-help"
         :title="$t('Help')"
@@ -31,31 +31,31 @@
 </template>
 
 <script lang="ts">
-import { Emission } from '@/stores/class/general/emission';
-import { Podcast } from '@/stores/class/general/podcast';
-import { state } from '../../../stores/ParamSdkStore';
-import displayMethods from '../../mixins/displayMethods';
-import Popover from '../../misc/Popover.vue';
-import ShareButtonsIntern from './ShareButtonsIntern.vue';
-import { defineComponent } from 'vue';
-import { Playlist } from '@/stores/class/general/playlist';
+import { Emission } from "@/stores/class/general/emission";
+import { Podcast } from "@/stores/class/general/podcast";
+import { state } from "../../../stores/ParamSdkStore";
+import displayMethods from "../../mixins/displayMethods";
+import ClassicPopover from "../../misc/ClassicPopover.vue";
+import ShareButtonsIntern from "./ShareButtonsIntern.vue";
+import { defineComponent } from "vue";
+import { Playlist } from "@/stores/class/general/playlist";
 export default defineComponent({
   components: {
     ShareButtonsIntern,
-    Popover,
+    ClassicPopover,
   },
   mixins: [displayMethods],
   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},
+    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 },
   },
   computed: {
     authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+      return state.generalParameters.authenticated as boolean;
     },
   },
-})
+});
 </script>

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

@@ -1,14 +1,11 @@
 <template>
   <div class="d-flex align-items-center justify-content-between">
-    <div class="d-flex flex-column me-2" v-if="!isGarStudent">
+    <div v-if="!isGarStudent" class="d-flex flex-column me-2">
       <div class="h4 mb-2">
-        {{ $t('Social networks') }}
+        {{ $t("Social networks") }}
       </div>
       <div class="d-flex align-items-center">
-        <template
-          v-for="button in arrayShareButtons"
-          :key="button.title"
-        >
+        <template v-for="button in arrayShareButtons" :key="button.title">
           <a
             v-if="button.condition"
             rel="noopener"
@@ -23,12 +20,9 @@
         </template>
       </div>
     </div>
-    <div
-      v-if="podcast || emission ||playlist"
-      class="d-flex flex-column me-2"
-    >
+    <div v-if="podcast || emission || playlist" class="d-flex flex-column me-2">
       <div class="h4 mb-2">
-        {{ $t('Newsletter') }}
+        {{ $t("Newsletter") }}
       </div>
       <div class="d-flex align-items-center justify-content-center">
         <button
@@ -42,7 +36,7 @@
 
     <div class="d-flex flex-column me-2">
       <div class="h4 mb-2">
-        {{ $t('QR Code') }}
+        {{ $t("QR Code") }}
       </div>
       <div class="d-flex align-items-center justify-content-center">
         <button
@@ -56,24 +50,21 @@
 
     <div class="d-flex flex-column me-2">
       <div class="h4 mb-2">
-        {{ $t('Copy this page URL') }}
+        {{ $t("Copy this page URL") }}
       </div>
       <div class="d-flex align-items-center justify-content-center">
         <button
           :class="getClass()"
           class="saooti-link"
           :title="$t('Copy this page URL')"
-          @click="onCopyCode(urlPage,afterCopy)"
+          @click="onCopyCode(urlPage, afterCopy)"
         />
       </div>
     </div>
 
-    <div
-      v-if="''!==rssUrl && displayRss"
-      class="d-flex flex-column me-2"
-    >
+    <div v-if="'' !== rssUrl && displayRss" class="d-flex flex-column me-2">
       <div class="h4 mb-2">
-        {{ $t('Rss feed') }}
+        {{ $t("Rss feed") }}
       </div>
       <div class="d-flex align-items-center justify-content-center">
         <a
@@ -87,8 +78,7 @@
         />
       </div>
     </div>
-  
-    
+
     <ClipboardModal
       v-if="dataRSSSave"
       :link="rssUrl"
@@ -110,44 +100,47 @@
       :url-page="urlPage"
       @close="qrCode = false"
     />
-    <Snackbar
-      ref="snackbar"
-      position="bottom-left"
-    />
+    <SnackBar ref="snackbar" position="bottom-left" />
   </div>
 </template>
 
 <script lang="ts">
-import { useAuthStore } from '@/stores/AuthStore';
-import { mapState } from 'pinia';
-import octopusApi from '@saooti/octopus-api';
-import { Emission } from '@/stores/class/general/emission';
-import { Podcast } from '@/stores/class/general/podcast';
-import { state } from '../../../stores/ParamSdkStore';
-import Snackbar from '../../misc/Snackbar.vue';
-import displayMethods from '../../mixins/displayMethods';
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { Playlist } from '@/stores/class/general/playlist';
-const ClipboardModal = defineAsyncComponent(() => import('../../misc/modal/ClipboardModal.vue'));
-const NewsletterModal = defineAsyncComponent(() => import('../../misc/modal/NewsletterModal.vue'));
-const QrCodeModal = defineAsyncComponent(() => import('../../misc/modal/QrCodeModal.vue'));
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState } from "pinia";
+import octopusApi from "@saooti/octopus-api";
+import { Emission } from "@/stores/class/general/emission";
+import { Podcast } from "@/stores/class/general/podcast";
+import { state } from "../../../stores/ParamSdkStore";
+import SnackBar from "../../misc/SnackBar.vue";
+import displayMethods from "../../mixins/displayMethods";
+import { defineComponent, defineAsyncComponent } from "vue";
+import { Playlist } from "@/stores/class/general/playlist";
+const ClipboardModal = defineAsyncComponent(
+  () => import("../../misc/modal/ClipboardModal.vue"),
+);
+const NewsletterModal = defineAsyncComponent(
+  () => import("../../misc/modal/NewsletterModal.vue"),
+);
+const QrCodeModal = defineAsyncComponent(
+  () => import("../../misc/modal/QrCodeModal.vue"),
+);
 export default defineComponent({
   components: {
     ClipboardModal,
     NewsletterModal,
     QrCodeModal,
-    Snackbar,
+    SnackBar,
   },
 
   mixins: [displayMethods],
 
   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},
-    isVertical: { default: false, type: Boolean},
+    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 },
+    isVertical: { default: false, type: Boolean },
   },
 
   data() {
@@ -159,65 +152,94 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState(useAuthStore, ['isGarStudent']),
-    titleRssButton(): string{
-      if(this.participantId){
-        return this.$t('Subscribe to this participant');
+    ...mapState(useAuthStore, ["isGarStudent"]),
+    titleRssButton(): string {
+      if (this.participantId) {
+        return this.$t("Subscribe to this participant");
       }
-      if(this.emission){
-        return this.$t('Subscribe to this emission');
+      if (this.emission) {
+        return this.$t("Subscribe to this emission");
       }
-      return this.$t('Subscribe to this RSS feed');
+      return this.$t("Subscribe to this RSS feed");
     },
-    arrayShareButtons(){
+    arrayShareButtons() {
       return [
-        { title: 'Facebook', icon:'saooti-facebook', className:'btn-facebook', url :`https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`, condition: true},
-        { title: 'Twitter', icon:'saooti-twitter', className:'btn-twitter', url :`https://twitter.com/intent/tweet?text=${this.urlPage}`, condition: true},
-        { title: 'Linkedin', icon:'saooti-linkedin', className:'btn-linkedin', url :`https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`, condition: true},
-        { title: 'Whatsapp', icon:'saooti-Whatsapp', className:'btn-whatsapp', url :`whatsapp://send?text=${this.urlPage}`, condition:  window.matchMedia('(hover: none)').matches}
-      ]
+        {
+          title: "Facebook",
+          icon: "saooti-facebook",
+          className: "btn-facebook",
+          url: `https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Twitter",
+          icon: "saooti-twitter",
+          className: "btn-twitter",
+          url: `https://twitter.com/intent/tweet?text=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Linkedin",
+          icon: "saooti-linkedin",
+          className: "btn-linkedin",
+          url: `https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Whatsapp",
+          icon: "saooti-Whatsapp",
+          className: "btn-whatsapp",
+          url: `whatsapp://send?text=${this.urlPage}`,
+          condition: window.matchMedia("(hover: none)").matches,
+        },
+      ];
     },
-    urlPage(): string{
+    urlPage(): string {
       return window.location.href;
     },
     authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
+      return state.generalParameters.authenticated as boolean;
     },
     rssUrl(): string {
-      let api = state.generalParameters.ApiUri+ 'rss/';
-      if (this.emission){
-        return api +'emission/' + this.emission.emissionId + '.rss';
+      let api = state.generalParameters.ApiUri + "rss/";
+      if (this.emission) {
+        return api + "emission/" + this.emission.emissionId + ".rss";
       }
-      if (this.participantId){
-        return api +'participant/' + this.participantId + '.rss';
+      if (this.participantId) {
+        return api + "participant/" + this.participantId + ".rss";
       }
-      if (this.organisationId){
-        return api +'productor/' + this.organisationId + '.rss';
+      if (this.organisationId) {
+        return api + "productor/" + this.organisationId + ".rss";
       }
-      if(this.playlist){
-        return api +'playlist/' + this.playlist.playlistId + '.rss';
+      if (this.playlist) {
+        return api + "playlist/" + this.playlist.playlistId + ".rss";
       }
-      return '';
+      return "";
     },
   },
-  async created(){
-    if(this.organisationId || this.participantId){
-      this.displayRss = await octopusApi.fetchDataPublic<boolean>(0,`rss/participants/allowed/${this.organisationId}`);
-    }else{
+  async created() {
+    if (this.organisationId || this.participantId) {
+      this.displayRss = await octopusApi.fetchDataPublic<boolean>(
+        0,
+        `rss/participants/allowed/${this.organisationId}`,
+      );
+    } else {
       this.displayRss = true;
     }
   },
 
   methods: {
-    getClass(className='btn-rss'): string{
+    getClass(className = "btn-rss"): string {
       return `btn ${className} share-btn mb-2 text-dark`;
     },
     openPopup(): void {
       this.dataRSSSave = !this.dataRSSSave;
     },
-    afterCopy(): void{
-      (this.$refs.snackbar as InstanceType<typeof Snackbar>).open(this.$t('Link in clipboard'));
+    afterCopy(): void {
+      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+        this.$t("Link in clipboard"),
+      );
     },
   },
-})
+});
 </script>

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

@@ -1,10 +1,10 @@
 <template>
   <div class="module-box">
     <h2 class="big-h2 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>
@@ -14,15 +14,12 @@
         class="btn btn-primary"
         :title="$t('Copy')"
         @click="onCopyCode(rss, afterCopy)"
-      >
+      />
     </div>
-    <RssSection
-      v-if="emission"
-      :emission="emission"
-    />
+    <RssSection v-if="emission" :emission="emission" />
     <div class="sharing-distribution-container">
-      <router-link 
-        v-for="platform in platformShare" 
+      <router-link
+        v-for="platform in platformShare"
         :key="platform.title"
         :to="platform.url"
         class="text-dark"
@@ -30,52 +27,84 @@
         <span :class="platform.icon" />{{ platform.title }}
       </router-link>
     </div>
-    <Snackbar
-      ref="snackbar"
-      position="bottom-left"
-    />
+    <SnackBar ref="snackbar" position="bottom-left" />
   </div>
 </template>
 
 <script lang="ts">
-import { state } from '../../../stores/ParamSdkStore';
-import octopusApi from '@saooti/octopus-api';
-import Snackbar from '../../misc/Snackbar.vue';
-import displayMethods from '../../mixins/displayMethods';
-import { Emission } from '@/stores/class/general/emission';
+import { state } from "../../../stores/ParamSdkStore";
+import octopusApi from "@saooti/octopus-api";
+import SnackBar from "../../misc/SnackBar.vue";
+import displayMethods from "../../mixins/displayMethods";
+import { Emission } from "@/stores/class/general/emission";
 
-import { defineComponent, defineAsyncComponent } from 'vue';
-const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));
+import { defineComponent, defineAsyncComponent } from "vue";
+const RssSection = defineAsyncComponent(
+  () => import("@/components/display/aggregator/RssSection.vue"),
+);
 export default defineComponent({
   components: {
-    Snackbar,
+    SnackBar,
     RssSection,
   },
   mixins: [displayMethods],
   props: {
-    emissionId: { default: undefined, type: Number},
+    emissionId: { default: undefined, type: Number },
   },
-  
+
   data() {
     return {
-      emission: undefined as Emission|undefined,
-      rss: '' as string,
+      emission: undefined as Emission | undefined,
+      rss: "" as string,
     };
   },
-  computed:{
-    platformShare(){
+  computed: {
+    platformShare() {
       return [
-      {url:this.getUrl('amazon'), icon:'saooti-amzn', title:'Amazon Music | Podcasters'},
-      {url:this.getUrl('apple'), icon:'saooti-apple', title:'Apple Podcast / iTunes'},
-      {url:this.getUrl('deezer'), icon:'saooti-deezer', title:'Deezer'},
-      {url:this.getUrl('googlePodcasts'), icon:'saooti-google-podcasts', title:'Google Podcasts'},
-      {url:this.getUrl('PlayerFM'), icon:'saooti-playerfm', title:'PlayerFM'},
-      {url:this.getUrl('PocketCasts'), icon:'saooti-pocket-casts', title:'Pocket Casts'},
-      {url:this.getUrl('PodcastAddict'), icon:'saooti-podcast-addict', title:'Podcast Addict'},
-      {url:this.getUrl('radioline'), icon:'saooti-radioline', title:'Radioline'},
-      {url:this.getUrl('spotify'), icon:'saooti-spotify', title:'Spotify'},
-      {url:this.getUrl('tuneIn'), icon:'saooti-tunin', title:'TuneIn'}];
-    }
+        {
+          url: this.getUrl("amazon"),
+          icon: "saooti-amzn",
+          title: "Amazon Music | Podcasters",
+        },
+        {
+          url: this.getUrl("apple"),
+          icon: "saooti-apple",
+          title: "Apple Podcast / iTunes",
+        },
+        { url: this.getUrl("deezer"), icon: "saooti-deezer", title: "Deezer" },
+        {
+          url: this.getUrl("googlePodcasts"),
+          icon: "saooti-google-podcasts",
+          title: "Google Podcasts",
+        },
+        {
+          url: this.getUrl("PlayerFM"),
+          icon: "saooti-playerfm",
+          title: "PlayerFM",
+        },
+        {
+          url: this.getUrl("PocketCasts"),
+          icon: "saooti-pocket-casts",
+          title: "Pocket Casts",
+        },
+        {
+          url: this.getUrl("PodcastAddict"),
+          icon: "saooti-podcast-addict",
+          title: "Podcast Addict",
+        },
+        {
+          url: this.getUrl("radioline"),
+          icon: "saooti-radioline",
+          title: "Radioline",
+        },
+        {
+          url: this.getUrl("spotify"),
+          icon: "saooti-spotify",
+          title: "Spotify",
+        },
+        { url: this.getUrl("tuneIn"), icon: "saooti-tunin", title: "TuneIn" },
+      ];
+    },
   },
 
   mounted() {
@@ -84,49 +113,54 @@ export default defineComponent({
   },
 
   methods: {
-    getUrl(platform: string): string{
+    getUrl(platform: string): string {
       return `/main/priv/distribution/${platform}/${this.emissionId}`;
     },
     async getEmissionDetails(): Promise<void> {
-      this.emission = await octopusApi.fetchData<Emission>(0,'emission/'+this.emissionId);
+      this.emission = await octopusApi.fetchData<Emission>(
+        0,
+        "emission/" + this.emissionId,
+      );
     },
     getRSS(): void {
       if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
       this.rss = `${state.octopusApi.url}rss/emission/${this.emissionId}.rss`;
     },
-    afterCopy(): void{
-      (this.$refs.snackbar as InstanceType<typeof Snackbar>).open(this.$t('Link in clipboard'));
-    }
+    afterCopy(): void {
+      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+        this.$t("Link in clipboard"),
+      );
+    },
   },
-})
+});
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-.sharing-distribution-container {
-  border: 0.05rem solid #dee2e6;
-  border-radius: $octopus-borderradius;
-  padding: 0.4rem;
-  margin: 0.2rem 1rem 0.2rem 0;
-  display: flex;
-  font-weight: 500;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  a {
+@import "@scss/_variables.scss";
+.octopus-app {
+  .sharing-distribution-container {
+    border: 0.05rem solid #dee2e6;
+    border-radius: $octopus-borderradius;
+    padding: 0.4rem;
+    margin: 0.2rem 1rem 0.2rem 0;
     display: flex;
+    font-weight: 500;
     align-items: center;
-    margin: 5px;
-  }
-  span {
-    font-size: 1.4rem;
-    margin: 0 0.3em 0 0;
-  }
-  @media (max-width: 960px) {
+    justify-content: space-between;
     flex-wrap: wrap;
-    margin: 0.2rem 0.5rem;
+    a {
+      display: flex;
+      align-items: center;
+      margin: 5px;
+    }
+    span {
+      font-size: 1.4rem;
+      margin: 0 0.3em 0 0;
+    }
+    @media (max-width: 960px) {
+      flex-wrap: wrap;
+      margin: 0.2rem 0.5rem;
+    }
   }
 }
-}
-</style>
+</style>