@saooti/octopus-sdk 1.0.0 → 1.1.1

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

@@ -3,108 +3,110 @@
     <h3>{{ $t('Distribute') }}</h3>
     <p class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
-      <span class="primary-color text-break">{{ rss }}</span>
+      <span class="primary-darker hide-small-screen text-break">{{ rss }}</span>
       <input
         type="button"
         :value="$t('Copy')"
         class="btn btn-primary"
-        @click="onCopyCode(rss,afterCopy)"
-        :aria-label="$t('Copy')"
-      />
+        :title="$t('Copy')"
+        @click="onCopyCode(rss, afterCopy)"
+      >
     </p>
-    <RssSection :emission="emission" v-if="emission" />
+    <RssSection
+      v-if="emission"
+      :emission="emission"
+    />
     <div class="sharing-distribution-container">
-      <router-link
-        v-bind:to="'/main/priv/distribution/deezer/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-deezer" />Deezer
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/apple/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-apple" />Apple Podcast / iTunes
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/tuneIn/' + emissionId"
+      <router-link 
+        v-for="platform in platformShare" 
+        :key="platform.title"
+        :to="platform.url"
         class="text-dark"
       >
-        <span class="saooti-tunin" />TuneIn
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/audioNow/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-audionow"></span> Now
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/tootak/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-tootak" />Tootak
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/radioline/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-radioline" />Radioline
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/spotify/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-spotify" />Spotify
-      </router-link>
-
-      <router-link
-        v-bind:to="'/main/priv/distribution/PocketCasts/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-pocket-casts"></span>Pocket Casts
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/PodcastAddict/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-podcast-addict" />Podcast Addict
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/Stitcher/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-stitcher-logo">
-          <div class="path1"></div>
-          <div class="path2"></div>
-          <div class="path3"></div>
-          <div class="path4"></div>
-          <div class="path5"></div>
-          <div class="path6"></div>
-          <div class="path7"></div>
-          <div class="path8"></div>
-          <div class="path9"></div>
-          <div class="path10"></div>
-          <div class="path11"></div>
-          <div class="path12"></div>
-          <div class="path13"></div>
-          <div class="path14"></div>
-          <div class="path15"></div>
-          <div class="path16"></div>
-          <div class="path17"></div>
-          <div class="path18"></div> </span
-        >Stitcher
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/PlayerFM/' + emissionId"
-        class="text-dark"
-      >
-        <span class="saooti-playerfm" />PlayerFM
+        <span :class="platform.icon">
+          <div
+            v-for="index in platform.path"
+            :key="index"
+            :class="'path'+index"
+          />
+        </span>{{ platform.title }}
       </router-link>
     </div>
-    <Snackbar ref="snackbar" position="bottom-left"></Snackbar>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
   </div>
 </template>
+
+<script lang="ts">
+import { state } from '../../../store/paramStore';
+import octopusApi from '@saooti/octopus-api';
+import Snackbar from '../../misc/Snackbar.vue';
+import { displayMethods } from '../../mixins/functions';
+import { Emission } from '@/store/class/general/emission';
+
+import { defineComponent, defineAsyncComponent } from 'vue';
+import SnackbarVue from '../../misc/Snackbar.vue';
+const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));
+export default defineComponent({
+  components: {
+    Snackbar,
+    RssSection,
+  },
+  mixins: [displayMethods],
+  props: {
+    emissionId: { default: undefined, type: Number},
+  },
+  
+  data() {
+    return {
+      emission: undefined as Emission|undefined,
+      rss: '' as string,
+    };
+  },
+  computed:{
+    platformShare(){
+      return [
+      {url:this.getUrl('amazon'), icon:'saooti-amazon', title:'Amazon Music | Podcasters', path:3},
+      {url:this.getUrl('apple'), icon:'saooti-apple', title:'Apple Podcast / iTunes', path:0},
+      {url:this.getUrl('deezer'), icon:'saooti-deezer', title:'Deezer', path:0},
+      {url:this.getUrl('googlePodcasts'), icon:'saooti-google-podcasts', title:'Google Podcasts', path:7},
+      {url:this.getUrl('PlayerFM'), icon:'saooti-playerfm', title:'PlayerFM', path:0},
+      {url:this.getUrl('PocketCasts'), icon:'saooti-pocket-casts', title:'Pocket Casts', path:0},
+      {url:this.getUrl('PodcastAddict'), icon:'saooti-podcast-addict', title:'Podcast Addict', path:0},
+      {url:this.getUrl('radioline'), icon:'saooti-radioline', title:'Radioline', path:0},
+      {url:this.getUrl('spotify'), icon:'saooti-spotify', title:'Spotify', path:0},
+      {url:this.getUrl('Stitcher'), icon:'saooti-stitcher-logo', title:'Stitcher', path:18},
+      {url:this.getUrl('tuneIn'), icon:'saooti-tunin', title:'TuneIn', path:0}];
+    }
+  },
+
+  mounted() {
+    this.getEmissionDetails();
+    this.getRSS();
+  },
+
+  methods: {
+    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);
+    },
+    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 SnackbarVue>).open(this.$t('Link in clipboard'));
+    }
+  },
+})
+</script>
+
 <style lang="scss">
+.octopus-app{
 .sharing-distribution-container {
   border: 0.05rem solid #dee2e6;
   border-radius: 0.3rem;
@@ -115,29 +117,24 @@
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  .saooti-stitcher-logo {
-    font-size: 1.7rem;
-    position: relative;
-    width: 25px;
+  .saooti-stitcher-logo, .saooti-amazon {
+    width: 35px;
     height: 20px;
     div {
-      position: absolute;
-      top: -7px;
       right: 0;
     }
   }
-  .saooti-tunin {
-    color: #36b4a7;
-  }
-  .saooti-radioline {
-    color: #2273b9;
-  }
-  .saooti-tootak {
-    color: #ff4d53;
+  .saooti-google-podcasts {
+    width: 15px;
+    height: 20px;
+    div {
+      right: 0;
+    }
   }
   a {
     display: flex;
     align-items: center;
+    margin: 5px;
   }
   span {
     font-size: 1.3em;
@@ -153,67 +150,6 @@
     flex-wrap: wrap;
     margin: 0.2rem 0.5rem;
   }
-  @media (max-width: 450px) {
-    .primary-color {
-      display: none;
-    }
-  }
 }
-</style>
-<script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
-import Snackbar from '../../misc/Snackbar.vue';
-import RssSection from '@/components/display/aggregator/RssSection.vue';
-import { displayMethods } from '../../mixins/functions';
-
-import { defineComponent } from 'vue'
-export default defineComponent({
-  components: {
-    Snackbar,
-    RssSection,
-  },
-
-  mounted() {
-    this.getEmissionDetails(this.emissionId);
-    this.getRSS();
-  },
-
-  props: ['emissionId'],
-
-  mixins: [displayMethods],
-
-  data() {
-    return {
-      emission: undefined as any,
-      error: false,
-      baseRss: '',
-      rss: '',
-    };
-  },
-
-  computed: {
-    snackbarRef():any {
-      return this.$refs.snackbar;
-    },
-  },
-
-  methods: {
-    async getEmissionDetails(emissionId: any) {
-      try {
-        const data = await octopusApi.fetchEmission(emissionId);
-        this.emission = data;
-      } catch {
-        this.error = true;
-      }
-    },
-    getRSS() {
-      if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
-      this.baseRss = octopusApi.fetchRSS(this.emissionId);
-      this.rss = this.baseRss;
-    },
-    afterCopy(){
-      this.snackbarRef.open(this.$t('Link in clipboard'));
-    }
-  },
-});
-</script>
+}
+</style>