@saooti/octopus-sdk 31.0.0 → 31.0.1

package/README.md

@@ -543,5 +543,14 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.44 ProgressBar pour le soir
  * 30.0.45 ProgressBar pour le soir
  * 30.0.46 Param pour le soir
-
+ * 30.0.47 Live error
+ * 30.0.48 Podcastmaker ScrollOverflow PodcastInlineList
+ * 30.0.49 Podcastmaker ProgressBar
+ * 30.0.50 Commentaires live
+ * 30.0.51 Commentaires live
+ * 30.0.52 Ajout rubriqueIdFilter
+ * 30.0.53 Commentaires live
+ * 30.0.54 Multiselect not reload on close
+ 
  * 31.0.0 Passage en 31
+ * 31.0.1 Ajout pocket casts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.0",
+  "version": "31.0.1",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -15,7 +15,7 @@
   "main": "./dist/octopus.common.js",
   "dependencies": {
     "@popperjs/core": "^2.11.0",
-    "@saooti/octopus-api": "^0.30.3",
+    "@saooti/octopus-api": "^0.30.4",
     "@vue/cli": "^5.0.0-rc.1",
     "@vue/compat": "^3.2.26",
     "axios": "^0.24.0",
@@ -79,7 +79,8 @@
       "no-console": "off",
       "no-debugger": "off",
       "@typescript-eslint/ban-ts-ignore": "off",
-      "@typescript-eslint/ban-ts-comment": "off"
+      "@typescript-eslint/ban-ts-comment": "off",
+      "no-async-promise-executor":"off"
     },
     "parserOptions": {
       "parser": "@typescript-eslint/parser"

package/src/assets/share.scss

@@ -66,6 +66,25 @@
       }
     }
   }
+  .element-list-inline.overflowScroll {
+    display: flex;
+    flex-wrap: wrap;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    padding-bottom: 1rem;
+    width: 100%;
+    height: 80vh;
+    overflow-y: auto;
+    grid-gap: inherit;
+    @media (max-width: 960px) {
+      overflow-x: hidden;
+      flex-direction: column;
+      flex-wrap: nowrap;
+    }
+    .item-phone-margin {
+      margin: 1rem 0.5rem !important;
+    }
+  }
 
   .emission-list {
     align-self: stretch;

package/src/components/display/categories/CategoryChooser.vue

@@ -28,9 +28,8 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      @open="clearAll"
+      @open="onOpen"
       @search-change="onSearchCategory"
-      @close="onClose"
       @select="onCategorySelected"
     >
       <template #singleLabel="{ option }">
@@ -169,14 +168,11 @@ export default defineComponent({
     }
   },
   methods: {
-    clearAll(): void {
+    onOpen(): void {
       (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
-      if (undefined === this.categoryArray) {
-        this.category = undefined;
-      }
       if (
         undefined !== this.categorySelected ||
         undefined !== this.categoryArray ||
@@ -199,14 +195,6 @@ export default defineComponent({
         this.categories = this.totalCategories;
       }
     },
-    onClose(): void {
-      if (!this.category && undefined === this.categoryArray) {
-        this.category = getDefaultCategory(this.defaultanswer);
-        if(this.category){
-          this.onCategorySelected(this.category);
-        }
-      }
-    },
     onSearchCategory(query: string): void {
       this.isLoading = true;
       const categoryDefault = getDefaultCategory(this.defaultanswer);

package/src/components/display/comments/AddCommentModal.vue

@@ -66,7 +66,6 @@
 </template>
 
 <script lang="ts">
-import { IReCaptchaComposition, useReCaptcha } from 'vue-recaptcha-v3';
 import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
 import api from '@/api/initialize';
@@ -130,11 +129,9 @@ export default defineComponent({
         this.sendComment();
         return;
       }
-      const iRecaptcha: IReCaptchaComposition|undefined = useReCaptcha();
-      if(!iRecaptcha){return;}
-      await iRecaptcha.recaptchaLoaded();
-      const token = await iRecaptcha.executeRecaptcha('login');
       try {
+        await this.$recaptchaLoaded()
+        const token = await this.$recaptcha('login');
         this.sendError = false;
         const ok = await api.checkToken(token);
         if (!ok) {

package/src/components/display/comments/CommentBasicView.vue

@@ -14,7 +14,7 @@
         comment.name
       }}</b>
       <Popover
-        v-if="!editRight && !isValid"
+        :disable="editRight || isValid"
         :target="'popover-comment' + comment.comId"
       >
         {{ $t('Comment waiting') }}

package/src/components/display/emission/EmissionChooser.vue

@@ -29,7 +29,6 @@
       :show-labels="false"
       @search-change="onSearchEmission"
       @open="onOpen"
-      @close="onClose"
       @select="onEmissionSelected"
     >
       <template #clear="{ props }">
@@ -152,16 +151,8 @@ export default defineComponent({
         'autocomplete',
         'off'
       );
-      this.clearAll();
       this.onSearchEmission();
     },
-    onClose(): void {
-      if (this.emission) return;
-      this.emission = this.defaultanswer
-        ? getDefaultEmission(this.defaultanswer)
-        : undefined;
-      this.$emit('selected', this.emission);
-    },
     onEmissionSelected(emission: Emission): void {
       this.$emit('selected', emission);
     },

package/src/components/display/emission/EmissionInlineList.vue

@@ -55,7 +55,6 @@
       />
     </transition-group>
     <router-link
-      v-if="!overflowScroll"
       :to="href"
       class="btn btn-link align-self-center width-fit-content m-4"
     >
@@ -203,14 +202,14 @@ export default defineComponent({
     },
     handleResize(): void {
       if (!this.$el) return;
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
       if (this.overflowScroll) {
         this.size = 20;
         return;
       }
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
       this.size = Math.floor(width / sixteen);
@@ -270,24 +269,5 @@ export default defineComponent({
           margin-bottom: 1rem;
       }
   }
-  .element-list-inline.overflowScroll {
-    display: flex;
-    flex-wrap: wrap;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-    padding-bottom: 1rem;
-    width: 100%;
-    height: 80vh;
-    overflow-y: auto;
-    grid-gap: inherit;
-    @media (max-width: 960px) {
-      overflow-x: hidden;
-      flex-direction: column;
-      flex-wrap: nowrap;
-    }
-    .item-phone-margin {
-      margin: 1rem 0.5rem !important;
-    }
-  }
 }
 </style>

package/src/components/display/organisation/OrganisationChooser.vue

@@ -31,7 +31,6 @@
       :class="{ 'multiselect-transparent': light }"
       @search-change="onSearchOrganisation"
       @open="onOpen"
-      @close="onClose"
       @select="onOrganisationSelected"
     >
       <template #clear="{ props }">
@@ -207,16 +206,8 @@ export default defineComponent({
         'autocomplete',
         'off'
       );
-      this.clearAll();
       this.onSearchOrganisation();
     },
-    onClose(): void {
-      if (this.organisation) return;
-      this.organisation = this.defaultanswer
-        ? getDefaultOrganistion(this.defaultanswer)
-        : undefined;
-      this.$emit('selected', this.organisation);
-    },
     onOrganisationSelected(organisation: Organisation|undefined): void {
       this.$emit('selected', organisation);
     },

package/src/components/display/podcasts/PodcastInlineList.vue

@@ -22,7 +22,7 @@
         </button>
       </div>
       <div
-        v-if="!isArrow"
+        v-if="!isArrow && !overflowScroll"
         class="hide-phone"
       >
         <button
@@ -51,7 +51,10 @@
       :name="transitionName"
       class="element-list-inline"
       tag="ul"
-      :class="[alignLeft ? 'justify-content-start' : '']"
+      :class="[
+        alignLeft ? 'justify-content-start' : '',
+        overflowScroll ? 'overflowScroll' : '',
+      ]"
     >
       <PodcastItem
         v-for="p in podcasts"
@@ -131,6 +134,9 @@ export default defineComponent({
     sizeItem(): number {
       return state.generalParameters.podcastItem ? (state.generalParameters.podcastItem as number): 13;
     },
+    overflowScroll(): boolean {
+      return (state.emissionPage.overflowScroll as boolean);
+    },
     filterOrga(): string {
       return this.$store.state.filter.organisationId;
     },
@@ -249,6 +255,10 @@ export default defineComponent({
     },
     handleResize(): void {
       if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
       if (window.innerWidth <= PHONE_WIDTH) {
         this.size = 10;
         return;

package/src/components/display/podcasts/PodcastPlayBar.vue

@@ -48,14 +48,14 @@ export default defineComponent({
       return (state.emissionsPage.progressBar as boolean);
     },
     percentProgress(): number{
-      if(this.podcast !== this.$store.state.player.podcast){
+      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){
         return 0;
       }
       if(!this.$store.state.player.elapsed){return 0;}
       return this.$store.state.player.elapsed * 100;
     },
     playedTime(): string{
-      if(this.podcast === this.$store.state.player.podcast){
+      if(this.$store.state.player.podcast && this.podcast.podcastId === this.$store.state.player.podcast.podcastId){
         if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
           return DurationHelper.formatDuration(
             Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
@@ -70,7 +70,7 @@ export default defineComponent({
   },
   methods: {
     seekTo(event: MouseEvent): void {
-      if(this.podcast!== this.$store.state.player.podcast){return;}
+      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){return;}
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -29,9 +29,8 @@
       :show-no-results="true"
       :hide-selected="true"
       :show-labels="false"
-      @open="clearAll"
+      @open="onOpen"
       @search-change="onSearchRubrique"
-      @close="onClose"
       @select="onRubriqueSelected"
     >
       <template #singleLabel="{ option }">
@@ -187,14 +186,11 @@ export default defineComponent({
         );
       }
     },
-    clearAll(): void {
+    onOpen(): void {
       (this.$refs.multiselectRef as VueMultiselect).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
-      if (undefined === this.rubriqueArray) {
-        this.rubrique = undefined;
-      }
       this.rubriques = this.initRubriquesArray();
     },
     onClose(): void {

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

@@ -66,6 +66,16 @@
       >
         <span class="saooti-playerfm" />
       </a>
+      <a
+        v-if="pocketCasts"
+        rel="noopener"
+        target="_blank"
+        class="btn me-3 mb-2 share-btn"
+        :href="pocketCasts"
+        title="pocketCasts"
+      >
+        <span class="saooti-pocket-casts" />
+      </a>
       <a
         v-if="podcastAddict"
         rel="noopener"
@@ -189,6 +199,10 @@ export default defineComponent({
         (this.emission && this.emission.annotations
           ? this.emission.annotations.googlePodcasts
           : undefined) as string | undefined,
+      pocketCasts:
+        (this.emission && this.emission.annotations
+          ? this.emission.annotations.pocketCasts
+          : undefined) as string | undefined,
     };
   },
 
@@ -205,6 +219,7 @@ export default defineComponent({
     this.stitcher = this.externaliseLinks(this.stitcher);
     this.amazon = this.externaliseLinks(this.amazon);
     this.googlePodcasts = this.externaliseLinks(this.googlePodcasts);
+    this.pocketCasts = this.externaliseLinks(this.pocketCasts);
   },
 
   methods: {

package/src/components/misc/Player.vue

@@ -28,7 +28,6 @@
         class="d-flex align-items-center flex-grow-1 px-5"
       >
         <audio
-          v-if="!live"
           id="audio-player"
           :src="!live? audioUrl: undefined"
           autoplay
@@ -194,6 +193,9 @@ export default defineComponent({
     commentsLoaded(): void {
       this.initComments(true);
     },
+    audioUrl(): void{
+      this.playerError = false;
+    }
   },
 
   mounted() {
@@ -342,47 +344,49 @@ export default defineComponent({
       this.listenTime = 0;
     },
     async initHls(hlsStreamUrl: string): Promise<void> {
-      if(null === Hls){
-        //TODO -> Version light min quand ce sera possible
-        await import('hls.js/dist/hls.js').then((hlsLibrary) => {
-          Hls = hlsLibrary.default;
-        })
-          await import('hls.js').then((hlsLibrary) => {
-          Hls = hlsLibrary.default;
-        })
-      }
-      if (!Hls.isSupported()) {
-        throw 'Hls is not supported ! ';
-      }
-      const hls = new Hls();
-      hls.on(Hls.Events.MANIFEST_PARSED, async () => {
-        if(!this.live){ return; }
-        let downloadId = null;
-        try {
-          downloadId = await octopusApi.requestLiveDownloadId(
-            this.live.livePodcastId
-          );
-          await octopusApi.markPlayingLive(
-            this.live.livePodcastId,
-            downloadId,
-            'octopus',
-            this.$store.state.authentication.organisationId
-          );
-          this.setDownloadId(downloadId);
-        } catch (error) {
-          console.log('ERROR downloadId');
+      return new Promise<void>(async(resolve, reject) => {
+        if(null === Hls){
+          //TODO -> Version light min quand ce sera possible
+          await import('hls.js/dist/hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
+            await import('hls.js').then((hlsLibrary) => {
+            Hls = hlsLibrary.default;
+          })
         }
-        this.hlsReady = true;
-        const audio: HTMLElement|null = document.getElementById('audio-player');
-        hls.attachMedia((audio as HTMLAudioElement));
-        await (audio as HTMLAudioElement).play();
-        this.onPlay();
-        throw 400;
-      });
-      hls.on(Hls.Events.ERROR, async () => {
-        throw 'There is an error while reading media content';
+        if (!Hls.isSupported()) {
+          reject('Hls is not supported ! ');
+        }
+        const hls = new Hls();
+        hls.on(Hls.Events.MANIFEST_PARSED, async () => {
+          if(!this.live){ return; }
+          let downloadId = null;
+          try {
+            downloadId = await octopusApi.requestLiveDownloadId(
+              this.live.livePodcastId
+            );
+            await octopusApi.markPlayingLive(
+              this.live.livePodcastId,
+              downloadId,
+              'octopus',
+              this.$store.state.authentication.organisationId
+            );
+            this.setDownloadId(downloadId);
+          } catch (error) {
+            console.log('ERROR downloadId');
+          }
+          this.hlsReady = true;
+          const audio: HTMLElement|null = document.getElementById('audio-player');
+          hls.attachMedia((audio as HTMLAudioElement));
+          await (audio as HTMLAudioElement).play();
+          this.onPlay();
+          resolve();
+        });
+        hls.on(Hls.Events.ERROR, async() => {
+reject('There is an error while reading media content');
+        });
+        hls.loadSource(hlsStreamUrl);
       });
-      hls.loadSource(hlsStreamUrl);
     },
     async playLive(): Promise<void> {
       if (!this.live) return;

package/src/components/misc/PlayerButtons.vue

@@ -19,6 +19,7 @@
       :class="{
         'saooti-play2-bounty': isPaused,
         'saooti-pause-bounty': isPlaying,
+        'spinner-border':!isPaused&&!isPlaying
       }"
     />
   </div>
@@ -88,6 +89,9 @@ export default defineComponent({
 
   methods: {
     addKeyboardControl(event: KeyboardEvent): void{
+      if(!event || null ===event){return;}
+      const element = event.target as HTMLElement; 
+      if (!element || 'INPUT' == element.tagName.toUpperCase() || 'TEXTAREA' == element.tagName.toUpperCase()){return;}
       if (' ' === event.key || 'Spacebar' === event.key) {
         event.preventDefault();
         this.switchPausePlay();

package/src/components/pages/Emission.vue

@@ -216,6 +216,7 @@ export default defineComponent({
         if (undefined !== this.emission.annotations.podcastAddict) count++;
         if (undefined !== this.emission.annotations.playerFm) count++;
         if (undefined !== this.emission.annotations.stitcher) count++;
+        if (undefined !== this.emission.annotations.pocketCasts) count++;
       }
       return count;
     },

package/src/components/pages/Podcast.vue

@@ -227,6 +227,7 @@ export default defineComponent({
         if (undefined !== this.podcast.emission.annotations.podcastAddict) count++;
         if (undefined !== this.podcast.emission.annotations.playerFm) count++;
         if (undefined !== this.podcast.emission.annotations.stitcher) count++;
+        if (undefined !== this.podcast.emission.annotations.pocketCasts) count++;
       }
       return count;
     },

package/src/main.ts

@@ -6,6 +6,7 @@ import I18nResources from './locale/messages';
 import router from '@/router/router';
 import moment from 'moment';
 import store from '@/store/AppStore';
+import paramStore from '@/store/paramStore';
 import { LocaleMessage } from '@intlify/core-base';
 /* import 'popper.js/dist/popper.min.js'; */
 /* import 'jquery/src/jquery.js'; */
@@ -32,6 +33,22 @@ const i18n = createI18n({
 });
 moment.locale(language);
 
+
+paramStore.initialize({
+  generalParameters: {},
+  podcastPage: {},
+  podcastsPage: {},
+  emissionsPage: {},
+  emissionPage: {},
+  intervenantPage: {},
+  intervenantsPage: {},
+  searchPage: {},
+  player: {},
+  footer: {},
+  organisation: {},
+  octopusApi: {}
+});
+
 // Initialisation store
 createApp(App)
 .use(i18n)

package/src/store/paramStore.ts

@@ -12,7 +12,7 @@ const state:paramStore = {
     isPlaylist: false,
     isProduction: true,
     isContribution: true,
-    ApiUri: 'https://api.dev2.saooti.org/',
+    ApiUri: 'https://api.staging.saooti.org/',
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -25,10 +25,10 @@ const state:paramStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: 'https://playerbeta.dev2.saooti.org/',
+    MiniplayerUri: 'https://playerbeta.staging.saooti.org/',
     ouestFranceStyle: false,
     downloadButton: false,
-    hlsUri: 'https://hls.dev2.saooti.org/',
+    hlsUri: 'https://hls.staging.saooti.org/',
     mainRubrique: 0,
     resourceUrl: undefined
   },
@@ -55,7 +55,8 @@ const state:paramStore = {
   emissionPage: {
     ouestFranceStyle: false,
     rssButton: false,
-    isDisplayPodcasts:true
+    isDisplayPodcasts:true,
+    overflowScroll:false
   },
   intervenantPage: {
     lightStyle: false,
@@ -83,11 +84,12 @@ const state:paramStore = {
     userName: '',
   },
   octopusApi: {
-    url: 'http://api.dev2.saooti.org/',
-    commentsUrl: 'http://comments.dev2.saooti.org/',
-    studioUrl: 'http://studio.dev2.saooti.org/',
-    playerUrl: 'https://playerbeta.dev2.saooti.org/',
+    url: 'http://api.staging.saooti.org/',
+    commentsUrl: 'http://comments.staging.saooti.org/',
+    studioUrl: 'http://studio.staging.saooti.org/',
+    playerUrl: 'https://playerbeta.staging.saooti.org/',
     organisationId: undefined,
+    rubriqueIdFilter: undefined,
   },
 };
 export interface GeneralParameters{
@@ -143,7 +145,8 @@ export interface EmissionsPage{
 export interface EmissionPage{
   ouestFranceStyle?: boolean,
   rssButton?: boolean,
-  isDisplayPodcasts?:boolean
+  isDisplayPodcasts?:boolean,
+  overflowScroll?: boolean,
 }
 export interface IntervenantPage{
   lightStyle?: boolean,
@@ -182,7 +185,8 @@ export interface OctopusApi{
     accessTokenUri: string,
     expiration: string,
     clientId: string,
-  }
+  },
+  rubriqueIdFilter?: Array<number>,
 }
 export interface paramStore{
   generalParameters:GeneralParameters,