@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -8,102 +8,160 @@
         type="button"
         :value="$t('Copy')"
         class="btn btn-primary"
-        @click="onCopyCode(rss,afterCopy)"
         :aria-label="$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"
+        :to="'/main/priv/distribution/amazon/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-deezer" />Deezer
+        <span class="saooti-amazon">
+          <div class="path1" />
+          <div class="path2" />
+          <div class="path3" />
+        </span> Amazon Music | Podcasters
       </router-link>
       <router-link
-        v-bind:to="'/main/priv/distribution/apple/' + emissionId"
+        :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"
-        class="text-dark"
-      >
-        <span class="saooti-tunin" />TuneIn
-      </router-link>
-      <router-link
-        v-bind:to="'/main/priv/distribution/audioNow/' + emissionId"
+        :to="'/main/priv/distribution/deezer/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-audionow"></span> Now
+        <span class="saooti-deezer" />Deezer
       </router-link>
       <router-link
-        v-bind:to="'/main/priv/distribution/tootak/' + emissionId"
+        :to="'/main/priv/distribution/PlayerFM/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-tootak" />Tootak
+        <span class="saooti-playerfm" />PlayerFM
       </router-link>
       <router-link
-        v-bind:to="'/main/priv/distribution/radioline/' + emissionId"
+        :to="'/main/priv/distribution/PocketCasts/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-radioline" />Radioline
+        <span class="saooti-pocket-casts" />Pocket Casts
       </router-link>
       <router-link
-        v-bind:to="'/main/priv/distribution/spotify/' + emissionId"
+        :to="'/main/priv/distribution/PodcastAddict/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-spotify" />Spotify
+        <span class="saooti-podcast-addict" />Podcast Addict
       </router-link>
-
       <router-link
-        v-bind:to="'/main/priv/distribution/PocketCasts/' + emissionId"
+        :to="'/main/priv/distribution/radioline/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-pocket-casts"></span>Pocket Casts
+        <span class="saooti-radioline" />Radioline
       </router-link>
       <router-link
-        v-bind:to="'/main/priv/distribution/PodcastAddict/' + emissionId"
+        :to="'/main/priv/distribution/spotify/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-podcast-addict" />Podcast Addict
+        <span class="saooti-spotify" />Spotify
       </router-link>
+
       <router-link
-        v-bind:to="'/main/priv/distribution/Stitcher/' + emissionId"
+        :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
+          <div class="path1" />
+          <div class="path2" />
+          <div class="path3" />
+          <div class="path4" />
+          <div class="path5" />
+          <div class="path6" />
+          <div class="path7" />
+          <div class="path8" />
+          <div class="path9" />
+          <div class="path10" />
+          <div class="path11" />
+          <div class="path12" />
+          <div class="path13" />
+          <div class="path14" />
+          <div class="path15" />
+          <div class="path16" />
+          <div class="path17" />
+          <div class="path18" /> </span>Stitcher
       </router-link>
+
       <router-link
-        v-bind:to="'/main/priv/distribution/PlayerFM/' + emissionId"
+        :to="'/main/priv/distribution/tuneIn/' + emissionId"
         class="text-dark"
       >
-        <span class="saooti-playerfm" />PlayerFM
+        <span class="saooti-tunin" />TuneIn
       </router-link>
     </div>
-    <Snackbar ref="snackbar" position="bottom-left"></Snackbar>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
   </div>
 </template>
+
+<script lang="ts">
+const octopusApi = require('@saooti/octopus-api');
+import Snackbar from '../../misc/Snackbar.vue';
+import { displayMethods } from '../../mixins/functions';
+import { Emission } from '@/store/class/emission';
+
+import { defineComponent, defineAsyncComponent } from '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,
+      error: false as boolean,
+      baseRss: '' as string,
+      rss: '' as string,
+    };
+  },
+
+  mounted() {
+    this.getEmissionDetails();
+    this.getRSS();
+  },
+
+  methods: {
+    async getEmissionDetails(): Promise<void> {
+      try {
+        const data = await octopusApi.fetchEmission(this.emissionId);
+        this.emission = data;
+      } catch {
+        this.error = true;
+      }
+    },
+    getRSS(): void {
+      if (!this.$props.emissionId || this.$props.emissionId <= 0) return;
+      this.baseRss = octopusApi.fetchRSS(this.emissionId);
+      this.rss = this.baseRss;
+    },
+    afterCopy(): void{
+      (this.$refs.snackbar as any).open(this.$t('Link in clipboard'));
+    }
+  },
+})
+</script>
+
 <style lang="scss">
 .sharing-distribution-container {
   border: 0.05rem solid #dee2e6;
@@ -115,29 +173,17 @@
   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;
-  }
   a {
     display: flex;
     align-items: center;
+    margin: 5px;
   }
   span {
     font-size: 1.3em;
@@ -159,61 +205,4 @@
     }
   }
 }
-</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>