@saooti/octopus-sdk 30.0.45 → 30.0.49

package/README.md

@@ -541,4 +541,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.42 Resize rubriqueList
  * 30.0.43 Resize rubriqueList
  * 30.0.44 ProgressBar pour le soir
- * 30.0.45 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.45",
+  "version": "30.0.49",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -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/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/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"
@@ -106,6 +109,7 @@ export default defineComponent({
     rubriqueId: { default: () => [], type: Array as ()=> Array<number> },
     rubriquageId:{ default: () => [], type: Array as ()=> Array<number> },
     noRubriquageId: { default: () => [], type: Array as ()=> Array<number> },
+    query: { default: undefined, type: String},
   },
   emits: ['update:isArrow'],
 
@@ -130,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;
     },
@@ -170,7 +177,7 @@ export default defineComponent({
       return this.direction > 0 ? 'out-left' : 'out-right';
     },
     watchVariable():string{
-      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}`;
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
     }
   },
   watch: {
@@ -210,6 +217,7 @@ export default defineComponent({
         rubriquageId: this.rubriquageId.length ?this.rubriquageId : undefined,
         noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
         sort: this.popularSort ? 'POPULARITY' : 'DATE',
+        query: this.query,
       });
       this.loading = false;
       this.loaded = true;
@@ -247,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/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>

package/src/components/pages/Emission.vue

@@ -70,25 +70,27 @@
           :emission-id="emissionId"
         />
       </div>
-      <LiveHorizontalList
-        v-if="!isPodcastmaker"
-        :emission-id="emissionId"
-      />
-      <PodcastFilterList
-        v-if="!isOuestFrance"
-        :emission-id="emissionId"
-        :category-filter="false"
-        :edit-right="editRight"
-        :productor-id="emission.orga.id"
-        @fetch="fetch"
-      />
-      <PodcastList
-        v-else
-        :first="0"
-        :size="15"
-        :emission-id="emissionId"
-        @fetch="fetch"
-      />
+      <template v-if="isDisplayPodcasts">
+        <LiveHorizontalList
+          v-if="!isPodcastmaker"
+          :emission-id="emissionId"
+        />
+        <PodcastFilterList
+          v-if="!isOuestFrance"
+          :emission-id="emissionId"
+          :category-filter="false"
+          :edit-right="editRight"
+          :productor-id="emission.orga.id"
+          @fetch="fetch"
+        />
+        <PodcastList
+          v-else
+          :first="0"
+          :size="15"
+          :emission-id="emissionId"
+          @fetch="fetch"
+        />
+      </template>
     </div>
     <ClassicLoading
       :loading-text="!loaded?$t('Loading content ...'):undefined"
@@ -172,6 +174,9 @@ export default defineComponent({
     isRssButton(): boolean {
       return (state.emissionPage.rssButton as boolean);
     },
+    isDisplayPodcasts(): boolean {
+      return (state.emissionPage.isDisplayPodcasts as boolean);
+    },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },

package/src/store/paramStore.ts

@@ -55,6 +55,8 @@ const state:paramStore = {
   emissionPage: {
     ouestFranceStyle: false,
     rssButton: false,
+    isDisplayPodcasts:true,
+    overflowScroll:false
   },
   intervenantPage: {
     lightStyle: false,
@@ -142,6 +144,8 @@ export interface EmissionsPage{
 export interface EmissionPage{
   ouestFranceStyle?: boolean,
   rssButton?: boolean,
+  isDisplayPodcasts?:boolean,
+  overflowScroll?: boolean,
 }
 export interface IntervenantPage{
   lightStyle?: boolean,