@saooti/octopus-sdk 1.0.0 → 29.0.2

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

@@ -1,131 +1,193 @@
 <template>
   <div class="module-box flex-no-grow">
     <div class="d-flex align-items-center mb-3">
-      <h3 class="mb-0 share-button-title">{{ $t('Subscribe emission') }}</h3>
+      <h3 class="mb-0 share-button-title">
+        {{ $t('Subscribe emission') }}
+      </h3>
     </div>
-    <div class="d-flex">
+    <div class="d-flex flex-wrap">
       <a
+        v-if="amazon"
+        rel="noopener"
         target="_blank"
-        class="btn mr-3 mb-2 share-btn"
-        :href="applePodcast"
+        class="btn me-3 mb-2 share-btn"
+        :href="amazon"
+        aria-label="amazon"
+      >
+        <span class="saooti-amazon">
+          <div class="path1" />
+          <div class="path2" />
+          <div class="path3" />
+        </span>
+      </a>
+      <a
         v-if="applePodcast"
+        rel="noopener"
+        target="_blank"
+        class="btn me-3 mb-2 share-btn"
+        :href="applePodcast"
         aria-label="Apple"
       >
-        <span class="saooti-apple"></span>
+        <span class="saooti-apple" />
       </a>
       <a
+        v-if="deezer"
+        rel="noopener"
         target="_blank"
-        class="btn mr-3 mb-2 share-btn"
+        class="btn me-3 mb-2 share-btn"
         :href="deezer"
-        v-if="deezer"
         aria-label="Deezer"
       >
-        <span class="saooti-deezer"></span>
+        <span class="saooti-deezer" />
       </a>
       <a
+        v-if="playerFm"
+        rel="noopener"
         target="_blank"
-        class="btn mr-3 mb-2 share-btn"
-        :href="spotify"
-        v-if="spotify"
-        aria-label="Spotify"
+        class="btn me-3 mb-2 share-btn"
+        :href="playerFm"
+        aria-label="playerFm"
       >
-        <span class="saooti-spotify"></span>
+        <span class="saooti-playerfm" />
       </a>
       <a
+        v-if="podcastAddict"
+        rel="noopener"
         target="_blank"
-        class="btn mr-3 mb-2 share-btn"
-        :href="tunein"
-        v-if="tunein"
-        aria-label="Tunin"
+        class="btn me-3 mb-2 share-btn"
+        :href="podcastAddict"
+        aria-label="podcastAddict"
       >
-        <span class="saooti-tunin"></span>
+        <span class="saooti-podcast-addict" />
       </a>
       <a
+        v-if="radioline"
+        rel="noopener"
         target="_blank"
-        class="btn mr-3 mb-2 btn-tootak share-btn"
-        :href="tootak"
-        v-if="tootak"
-        aria-label="Tootak"
+        class="btn me-3 mb-2 btn-radioline share-btn"
+        :href="radioline"
+        aria-label="Radioline"
       >
-        <span class="saooti-tootak"></span>
+        <span class="saooti-radioline" />
       </a>
       <a
+        v-if="spotify"
+        rel="noopener"
         target="_blank"
-        class="btn mr-3 mb-2 btn-radioline share-btn"
-        :href="radioline"
-        v-if="radioline"
-        aria-label="Radioline"
+        class="btn me-3 mb-2 share-btn"
+        :href="spotify"
+        aria-label="Spotify"
+      >
+        <span class="saooti-spotify" />
+      </a>
+      <a
+        v-if="stitcher"
+        rel="noopener"
+        target="_blank"
+        class="btn me-3 mb-2 share-btn"
+        :href="stitcher"
+        aria-label="stitcher"
+      >
+        <span class="saooti-stitcher-logo">
+          <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>
+      </a>
+      <a
+        v-if="tunein"
+        rel="noopener"
+        target="_blank"
+        class="btn me-3 mb-2 share-btn"
+        :href="tunein"
+        aria-label="Tunin"
       >
-        <span class="saooti-radioline"></span>
+        <span class="saooti-tunin" />
       </a>
     </div>
   </div>
 </template>
 
-<style lang="scss">
-.saooti-tunin {
-  color: #36b4a7;
-}
-.saooti-radioline {
-  color: #2273b9;
-}
-.saooti-tootak {
-  color: #ff4d53;
-}
-.flex-no-grow {
-  flex-grow: 0 !important;
-}
-</style>
-
 <script lang="ts">
+import { Emission } from '@/store/class/emission';
 import { defineComponent } from 'vue'
 export default defineComponent({
-  props: ['podcastId', 'emission'],
-
-  components: {},
-
-  mounted() {
-    this.applePodcast = this.externaliseLinks(this.applePodcast);
-    this.deezer = this.externaliseLinks(this.deezer);
-    this.spotify = this.externaliseLinks(this.spotify);
-    this.tunein = this.externaliseLinks(this.tunein);
-    this.tootak = this.externaliseLinks(this.tootak);
-    this.radioline = this.externaliseLinks(this.radioline);
+  props: {
+    emission: { default: undefined, type: Object as ()=> Emission},
+    podcastId: { default: undefined, type: Number},
   },
-
+   
   data() {
     return {
       applePodcast:
         this.emission && this.emission.annotations
           ? this.emission.annotations.applePodcast
-          : undefined as any,
+          : undefined as string | undefined,
       deezer:
         this.emission && this.emission.annotations
           ? this.emission.annotations.deezer
-          : undefined as any,
+          : undefined as string | undefined,
       spotify:
         this.emission && this.emission.annotations
           ? this.emission.annotations.spotify
-          : undefined as any,
+          : undefined as string | undefined,
       tunein:
         this.emission && this.emission.annotations
           ? this.emission.annotations.tunein
-          : undefined as any,
-      tootak:
-        this.emission && this.emission.annotations
-          ? this.emission.annotations.tootak
-          : undefined as any,
+          : undefined as string | undefined,
       radioline:
         this.emission && this.emission.annotations
           ? this.emission.annotations.radioline
-          : undefined as any,
+          : undefined as string | undefined,
+      podcastAddict:
+        this.emission && this.emission.annotations
+          ? this.emission.annotations.podcastAddict
+          : undefined as string | undefined,
+      playerFm:
+        this.emission && this.emission.annotations
+          ? this.emission.annotations.playerFm
+          : undefined as string | undefined,
+      stitcher:
+        this.emission && this.emission.annotations
+          ? this.emission.annotations.stitcher
+          : undefined as string | undefined,
+      amazon:
+        this.emission && this.emission.annotations
+          ? this.emission.annotations.amazon
+          : undefined as string | undefined,
     };
   },
 
   computed: {},
 
+  mounted() {
+    this.applePodcast = this.externaliseLinks(this.applePodcast);
+    this.deezer = this.externaliseLinks(this.deezer);
+    this.spotify = this.externaliseLinks(this.spotify);
+    this.tunein = this.externaliseLinks(this.tunein);
+    this.radioline = this.externaliseLinks(this.radioline);
+    this.podcastAddict = this.externaliseLinks(this.podcastAddict);
+    this.playerFm = this.externaliseLinks(this.playerFm);
+    this.stitcher = this.externaliseLinks(this.stitcher);
+    this.amazon = this.externaliseLinks(this.amazon);
+  },
+
   methods: {
-    externaliseLinks(link?: string) {
+    externaliseLinks(link?: string): string|undefined {
       if (!link) return link;
       link = link.trim();
       if (!link.startsWith('http') && !link.startsWith('//'))
@@ -133,5 +195,7 @@ export default defineComponent({
       return link;
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>

package/src/components/display/studio/RecordingItemButton.vue

@@ -1,10 +1,10 @@
 <template>
-  <div></div>
+  <div />
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
-export default defineComponent({});
+export default defineComponent({})
 </script>
+
+<style lang="scss"></style>

package/src/components/misc/ErrorMessage.vue

@@ -1,29 +1,34 @@
 <template>
-  <div class="d-flex" v-if="message && message.length">
+  <div
+    v-if="message && message.length"
+    class="d-flex"
+  >
     <div
       class="d-flex align-items-center bg-error-message p-2 rounded mt-1 mb-1"
     >
-      <img src="/img/caution.png" class="icon-caution" />
-      <div class="alert-text">{{ message }}</div>
+      <img
+        src="/img/caution.png"
+        class="icon-caution"
+      >
+      <div class="alert-text">
+        {{ message }}
+      </div>
     </div>
   </div>
 </template>
-<style lang="scss">
-.bg-error-message {
-  background-color: #ffd84a9c;
-}
-.icon-caution {
-  margin-right: 5px;
-  margin-bottom: 2px;
-  height: 25px;
-}
-</style>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'ErrorMessage',
-
-  props: ['message'],
-});
+  props: {
+    message: { default: undefined, type: String},
+  },
+})
 </script>
+
+<style lang="scss">
+.bg-error-message {
+  background-color: #ffd84a9c;
+}
+</style>

package/src/components/misc/Footer.vue

@@ -9,97 +9,197 @@
           <router-link
             :to="{
               name: 'home',
-              query: { productor: this.$store.state.filter.organisationId },
+              query: { productor: $store.state.filter.organisationId,
+                       iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                       rubriquesId: rubriqueQueryParam },
             }"
             class="linkHover"
-            >{{ $t('Home') }}</router-link
           >
+            {{ $t('Home') }}
+          </router-link>
           <router-link
             :to="{
               name: 'podcasts',
-              query: { productor: this.$store.state.filter.organisationId },
+              query: { productor: $store.state.filter.organisationId,
+                       iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined,
+                       rubriquesId: rubriqueQueryParam},
             }"
             class="linkHover"
-            >{{ $t('Podcasts') }}</router-link
           >
+            {{ $t('Podcasts') }}
+          </router-link>
           <router-link
             :to="{
               name: 'emissions',
-              query: { productor: this.$store.state.filter.organisationId },
+              query: { productor: $store.state.filter.organisationId,
+                       iabId: $store.state.filter.iab ? $store.state.filter.iab.id : undefined },
             }"
             class="linkHover"
-            >{{ $t('Emissions') }}</router-link
           >
+            {{ $t('Emissions') }}
+          </router-link>
           <router-link
+            v-if="!isPodcastmaker"
             :to="{
               name: 'productors',
-              query: { productor: this.$store.state.filter.organisationId },
+              query: { productor: $store.state.filter.organisationId },
             }"
             class="linkHover"
-            v-if="!isPodcastmaker"
-            >{{ $t('Productors') }}</router-link
           >
+            {{ $t('Productors') }}
+          </router-link>
           <router-link
             :to="{
               name: 'participants',
-              query: { productor: this.$store.state.filter.organisationId },
+              query: { productor: $store.state.filter.organisationId },
             }"
             class="linkHover"
-            >{{ $t('Speakers') }}</router-link
           >
+            {{ $t('Speakers') }}
+          </router-link>
         </div>
       </div>
-      <hr class="divided-line show-phone" />
+      <hr class="divided-line show-phone">
       <div
-        class="d-flex flex-grow align-items-center flex-column"
         v-if="!isPodcastmaker"
+        class="d-flex flex-grow align-items-center flex-column"
       >
         <div class="d-flex flex-column">
-          <div class="text-dark">&copy; Saooti 2019</div>
-          <router-link class="linkHover" to="/main/pub/contact">{{
-            $t('Contact')
-          }}</router-link>
-          <router-link class="linkHover" to="/main/pub/cgu">{{
-            $t('Term of use')
-          }}</router-link>
-          <router-link class="linkHover" to="/main/pub/libraries">{{
-            $t('Used libraries')
-          }}</router-link>
+          <div class="text-dark">
+            &copy; Saooti 2019
+          </div>
+          <router-link
+            class="linkHover"
+            to="/main/pub/contact"
+          >
+            {{
+              $t('Contact')
+            }}
+          </router-link>
+          <router-link
+            class="linkHover"
+            to="/main/pub/cgu"
+          >
+            {{
+              $t('Term of use')
+            }}
+          </router-link>
+          <router-link
+            class="linkHover"
+            to="/main/pub/libraries"
+          >
+            {{
+              $t('Used libraries')
+            }}
+          </router-link>
+          <a
+            class="linkHover c-hand"
+            @click="changeLanguage"
+          >{{
+            $t('Change locale')
+          }}</a>
         </div>
       </div>
-      <hr class="divided-line show-phone" />
+      <hr class="divided-line show-phone">
       <div class="flex-grow">
         <a
           href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
+          rel="noopener"
           target="_blank"
           :aria-label="$t('Octopus is ACPM Podcast accredited')"
         >
           <img
             class="acpm_image"
-            src="/img/ACPM.PNG"
+            src="/img/ACPM.png"
             :title="$t('Octopus is ACPM Podcast accredited')"
             :alt="$t('Octopus is ACPM Podcast accredited')"
-          />
+          >
         </a>
       </div>
       <div
-        class="d-flex flex-grow align-items-center flex-column"
         v-if="isPodcastmaker && isContactLink"
+        class="d-flex flex-grow align-items-center flex-column"
       >
         <div class="d-flex flex-column">
           <a
-            class="linkHover"
             id="footer-contact"
+            class="linkHover"
             :href="isContactLink"
+            rel="noopener"
             target="_blank"
-            >{{ $t('Contact') }}</a
-          >
+          >{{ $t('Contact') }}</a>
         </div>
       </div>
     </div>
     <Player @hide="showBlackBorder" />
   </div>
 </template>
+
+<script lang="ts">
+import Player from './Player.vue';
+import { state } from '../../store/paramStore';
+const octopusApi = require('@saooti/octopus-api');
+const moment = require('moment');
+import { Category } from '@/store/class/category';
+import { RubriquageFilter } from '@/store/class/rubriquageFilter';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Footer',
+  components: {
+    Player,
+  },
+
+  computed: {
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker;
+    },
+    isBarTop(): boolean {
+      return state.player.barTop;
+    },
+    isContactLink(): string {
+      return state.footer.contactLink;
+    },
+    rubriqueQueryParam(): string|undefined{
+      if(this.$store.state.filter && this.$store.state.filter.rubriqueFilter && this.$store.state.filter.rubriqueFilter.length){
+        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      }
+      return undefined;
+    },
+  },
+
+  methods: {
+    showBlackBorder(hide: boolean): void {
+      const footerElement = document.getElementById('footer');
+      if(null===footerElement){return}
+      if (hide) {
+        footerElement.classList.remove('border-round');
+      } else if (!this.isBarTop) {
+        footerElement.className += ' border-round';
+      }
+    },
+    changeLanguage(): void{
+      if('fr'===this.$i18n.locale){
+        this.$i18n.locale= "en";
+      }else{
+        this.$i18n.locale= "fr";
+      }
+      moment.locale(this.$i18n.locale);
+      octopusApi.fetchCategories({ lang: this.$i18n.locale }).then((data: Array<Category>) => {
+        this.$store.commit('categoriesSet', data);
+        if(this.$store.state.filter.iab){
+          const category = this.$store.state.categories.filter((c: any) => {
+            return c.id === this.$store.state.filter.iab.id;
+          });
+          if(category.length){
+            this.$store.commit('filterIab', category[0]);
+          }
+        }
+      });
+    }
+  },
+})
+</script>
+
 <style lang="scss">
 #footer {
   font-size: 0.7rem;
@@ -130,39 +230,4 @@
     }
   }
 }
-</style>
-
-<script lang="ts">
-import Player from './Player.vue';
-import { state } from '../../store/paramStore';
-
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'Footer',
-  components: {
-    Player,
-  },
-
-  computed: {
-    isPodcastmaker() {
-      return state.generalParameters.podcastmaker;
-    },
-    isBarTop() {
-      return state.player.barTop;
-    },
-    isContactLink() {
-      return state.footer.contactLink;
-    },
-  },
-
-  methods: {
-    showBlackBorder(hide:any) {
-      if (hide) {
-        document.getElementById('footer')!.classList.remove('border-round');
-      } else if (!this.isBarTop) {
-        document.getElementById('footer')!.className += ' border-round';
-      }
-    },
-  },
-});
-</script>
+</style>