@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -1,47 +1,142 @@
 <template>
   <div>
-    <b-modal
+    <div
       id="share-modal"
-      @close="closePopup"
-      @hide="closePopup"
-      @cancel="closePopup"
-      :title="$t('Share the player')"
+      class="modal"
     >
-      <template v-slot:default>
-        <b-tabs content-class="p-2 share-modal-border">
-          <b-tab :title="$t('Embed link')" class="tab-pane" active>
-            <p>{{ embedLink }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(embedLink, afterCopy)"
-            ></div>
-          </b-tab>
-          <b-tab :title="$t('Embedly link')" class="tab-pane">
-            <p>{{ embedlyLink }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(embedlyLink, afterCopy)"
-            ></div>
-          </b-tab>
-          <b-tab :title="$t('Direct link')" class="tab-pane" v-if="directLink">
-            <p>{{ directLink.audioUrl }}</p>
-            <div
-              class="saooti-copy"
-              @click="onCopyCode(directLink.audioUrl, afterCopy)"
-            ></div>
-          </b-tab>
-        </b-tabs>
-      </template>
-      <template v-slot:modal-footer>
-        <button class="btn btn-primary m-1" @click="closePopup">
-          {{ $t('Close') }}
-        </button>
-      </template>
-    </b-modal>
-    <Snackbar ref="snackbar" position="bottom-left"></Snackbar>
+      <div class="modal-backdrop" />
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              {{ $t('Share the player') }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              aria-label="Close"
+              @click="closePopup"
+            />
+          </div>
+          <div class="modal-body">
+            <ul class="nav nav-tabs">
+              <li
+                v-for="(tab, index) in tabs"
+                :key="tab"
+                class="nav-item"
+              >
+                <div
+                  class="nav-link"
+                  :class="activeTab === index? 'active':''"
+                  @click="activeTab = index"
+                >
+                  {{ tab }}
+                </div>
+              </li>
+            </ul>
+            <div class="tab-content p-2 share-modal-border">
+              <div
+                class="tab-pane tab-pane"
+                :class="activeTab === 0? 'active':''"
+              >
+                <p>{{ embedLink }}</p>
+                <div
+                  class="saooti-copy"
+                  @click="onCopyCode(embedLink, afterCopy)"
+                />
+              </div>
+              <div
+                class="tab-pane tab-pane"
+                :class="activeTab === 1? 'active':''"
+              >
+                <div class="d-flex flex-column">
+                  <div class="d-flex">
+                    <p>{{ embedlyLink }}</p>
+                    <div
+                      class="saooti-copy"
+                      @click="onCopyCode(embedlyLink, afterCopy)"
+                    />
+                  </div>
+                  <QrCode :url="embedlyLink" />
+                </div>
+              </div>
+              <div
+                v-if="directLink"
+                class="tab-pane tab-pane active"
+                :class="activeTab === 2? 'active':''"
+              >
+                <p>{{ directLink.audioUrl }}</p>
+                <div
+                  class="saooti-copy"
+                  @click="onCopyCode(directLink.audioUrl, snackbarRef)"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              class="btn btn-primary m-1"
+              @click="closePopup"
+            >
+              {{ $t('Close') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Snackbar
+      ref="snackbar"
+      position="bottom-left"
+    />
   </div>
 </template>
 
+<script lang="ts">
+import Snackbar from '../Snackbar.vue';
+import { displayMethods } from '../../mixins/functions';
+
+import QrCode from '../../display/sharing/QrCode.vue';
+import { defineComponent } from 'vue'
+import { Podcast } from '@/store/class/podcast';
+export default defineComponent({
+  name: 'ShareModalPlayer',
+
+  components: {
+    Snackbar,
+    QrCode
+  },
+  mixins: [displayMethods],
+  props: {
+    embedLink: { default: undefined, type: String},
+    embedlyLink: { default: undefined, type: String},
+    directLink: { default: undefined, type: Object as ()=>Podcast},
+  },
+  emits: ['close'],
+  data() {
+    return {
+      activeTab: 0 as number,
+    };
+  },
+  computed:{
+    tabs(): Array<string>{
+      if(this.directLink){
+        return [this.$t('Embed link'),this.$t('Embedly link'),this.$t('Direct link')];
+      }
+      return [this.$t('Embed link'),this.$t('Embedly link')];
+    }
+  },
+  methods: {
+    closePopup(event: { preventDefault: () => void }): void {
+      event.preventDefault();
+      this.$emit('close');
+    },
+    afterCopy(): void{
+      (this.$refs.snackbar as any).open(this.$t('Data in clipboard'));
+    }
+  },
+})
+</script>
+
 <style lang="scss">
 .share-modal-border {
   border-right: solid 1px rgb(222, 226, 230);
@@ -82,40 +177,4 @@
     align-self: center;
   }
 }
-</style>
-<script lang="ts">
-import Snackbar from '../Snackbar.vue';
-import { displayMethods } from '../../mixins/functions';
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'ShareModalPlayer',
-
-  props: ['embedLink', 'embedlyLink', 'directLink'],
-  emits: ['close'],
-
-  components: {
-    Snackbar,
-  },
-
-  mixins: [displayMethods],
-
-  mounted() {
-    /* this.$bvModal.show('share-modal'); */
-  },
-  computed: {
-    snackbarRef():any {
-      return this.$refs.snackbar;
-    },
-  },
-
-  methods: {
-    closePopup(event: { preventDefault: () => void; }) {
-      event.preventDefault();
-      this.$emit('close');
-    },
-    afterCopy(){
-      this.snackbarRef.open(this.$t('Data in clipboard'));
-    }
-  },
-});
-</script>
+</style>

package/src/components/mixins/functions.ts

@@ -1,23 +1,25 @@
-export const selenium = {
+
+export const selenium ={
   methods: {
-    seleniumFormat(string: string) {
+    seleniumFormat(string: string): string {
       return string.toLowerCase().replace(/\s/g, '');
     },
   },
 };
-export const cookies = {
+export const cookies =
+{
   methods: {
-    setCookie(name: string, value: any) {
-      var date = new Date();
+    setCookie(name: string, value: string, domain= ""): void {
+      const date = new Date();
       date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
-      var expires = '; expires=' + date.toUTCString();
-      document.cookie = name + '=' + (value || '') + expires + '; path=/';
+      const expires = '; expires=' + date.toUTCString();
+      document.cookie = name + '=' + (value || '') + expires +domain+ '; path=/';
     },
-    getCookie(name: string) {
-      var nameEQ = name + '=';
-      var ca = document.cookie.split(';');
-      for (var i = 0; i < ca.length; i++) {
-        var c = ca[i];
+    getCookie(name: string): string|null {
+      const nameEQ = name + '=';
+      const ca = document.cookie.split(';');
+      for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
         while (c.charAt(0) == ' ') c = c.substring(1, c.length);
         if (0 === c.indexOf(nameEQ))
           return c.substring(nameEQ.length, c.length);
@@ -27,21 +29,21 @@ export const cookies = {
   },
 };
 
-export const displayMethods = {
+export const displayMethods ={
   methods: {
-    urlify(text: string) {
-      let urlRegex = /(https?:\/\/[^\s]+)/g;
+    urlify(text: string): string {
+      const urlRegex = /(https?:\/\/[^\s<]+)/g;
       if (!text) return '';
       return text.replace(urlRegex, (url: string) => {
-        return '<a href="' + url + '" target="_blank">' + url + '</a>';
+        return '<a href="' + url + '" target="_blank" rel="noopener">' + url + '</a>';
       });
     },
-    async onCopyCode(link: string, callback: ()=>void) {
+    async onCopyCode(link: string, callback: () => void): Promise<any> {
       if ('undefined' !== typeof navigator.clipboard) {
         await navigator.clipboard.writeText(link);
         return callback();
       }
-      let textArea = document.createElement('textarea');
+      const textArea = document.createElement('textarea');
       textArea.value = link;
       textArea.style.position = 'fixed';
       document.body.appendChild(textArea);
@@ -53,3 +55,4 @@ export const displayMethods = {
     },
   },
 };
+

package/src/components/mixins/init.ts

@@ -0,0 +1,24 @@
+
+import { Category } from "@/store/class/category";
+import { orgaFilter } from '../mixins/organisationFilter';
+const octopusApi = require('@saooti/octopus-api');
+import { state } from '../../store/paramStore';
+import { defineComponent } from 'vue';
+export const initSDK = defineComponent({
+  mixins: [orgaFilter],
+  methods: {
+    async initSdk() {
+      if (0 === state.generalParameters.allCategories.length) {
+        octopusApi.fetchCategories({ lang: this.$i18n.locale }).then((data: Array<Category>) => {
+          this.$store.commit('categoriesSet', data);
+        });
+      }else{
+        this.$store.commit('categoriesSet', state.generalParameters.allCategories);
+      }
+      const captcha = (document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement);
+      if (captcha) {
+        captcha.style.display = 'none';
+      }
+    },
+  },
+});

package/src/components/mixins/organisationFilter.ts

@@ -0,0 +1,24 @@
+
+import { Rubriquage } from "@/store/class/rubriquage";
+const octopusApi = require('@saooti/octopus-api');
+import { defineComponent } from 'vue'
+export const orgaFilter = defineComponent({
+  methods: {
+    async selectOrganisation(organisationId: string): Promise<void> {
+      const response = await octopusApi.fetchOrganisation(organisationId);
+      const data = await octopusApi.fetchTopics(organisationId, {
+        sort:'HOMEPAGEORDER',
+        homePageOrder: true
+      });
+      const isLive = await octopusApi.liveEnabledOrganisation(organisationId);
+      this.$store.commit('filterOrga', {
+        orgaId: organisationId,
+        imgUrl: response.imageUrl,
+        rubriquageArray: data.filter((element: Rubriquage)=>{
+          return element.rubriques.length;
+        }),
+        isLive: isLive
+      });
+    },
+  },
+});

package/src/components/pages/Category.vue

@@ -2,60 +2,60 @@
   <div class="page-box">
     <h1>{{ title }}</h1>
     <PodcastList
-      :first="first"
-      :size="size"
-      :iabId="iabId"
-      :organisationId="filterOrga"
+      :first="firstRoute"
+      :size="sizeRoute"
+      :iab-id="iabId"
+      :organisation-id="filterOrga"
     />
   </div>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
-// @ is an alias to /src
 import PodcastList from '../display/podcasts/PodcastList.vue';
-import { state } from '../../store/paramStore';
 
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
     PodcastList,
   },
-
-  props: ['first', 'size', 'iabId'],
-
-  mounted() {
-    this.extractTitle(this.iabId);
+  props: {
+    firstRoute: { default: 0, type: Number},
+    sizeRoute: { default: 12, type: Number},
+    iabId: { default: undefined, type: Number},
   },
 
   data() {
     return {
-      title: '',
+      title: '' as string,
     };
   },
 
   computed: {
-    categories() {
-      return state.generalParameters.allCategories;
+    categories(): any {
+      return this.$store.state.categories;
     },
-    filterOrga():any {
+    filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
   },
+  watch: {
+    iabId(): void {
+      this.extractTitle();
+    },
+  },
 
+  mounted() {
+    this.extractTitle();
+  },
   methods: {
-    extractTitle(iabId: any) {
-      const matchCategories = this.categories.filter((c: any) => c.id === iabId);
-      if (1 !== matchCategories.length) return '';
+    extractTitle(): void {
+      const matchCategories = this.categories.filter((c: any) => c.id === this.iabId);
+      if (1 !== matchCategories.length) return;
       this.title = matchCategories[0]['name'];
-    },
-  },
 
-  watch: {
-    iabId(val) {
-      this.extractTitle(val);
     },
   },
-});
+})
 </script>
+
+<style lang="scss"></style>