@saooti/octopus-sdk 30.0.44 → 30.0.48

package/README.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.44",
+  "version": "30.0.48",
   "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/emission/EmissionPlayerItem.vue

@@ -77,36 +77,7 @@
               <!-- eslint-enable -->
             </div>
           </router-link>
-          <div
-            v-if="isProgressBar"
-            class="d-flex align-items-center"
-          >
-            <div class="me-2">
-              {{ playedTime(p) }}
-            </div>
-            <div class="position-relative flex-grow-1">
-              <div
-                class="progress flex-grow-1 c-hand"
-                @mouseup="seekTo($event, p)"
-              >
-                <div
-                  class="progress-bar primary-bg"
-                  role="progressbar"
-                  aria-valuenow="0"
-                  aria-valuemin="0"
-                  aria-valuemax="100"
-                  :style="'width: ' + percentProgress(p) + '%'"
-                />
-                <div
-                  class="progress-bar-cursor"
-                  :style="'left:' + percentProgress(p) + '%'"
-                />
-              </div>
-            </div>
-            <div class="ms-2">
-              {{ totalTime(p) }}
-            </div>
-          </div>
+          <PodcastPlayBar :podcast="p" />
         </div>
         <div
           v-if="
@@ -157,11 +128,15 @@ import octopusApi from '@saooti/octopus-api';
 import { Emission } from '@/store/class/general/emission';
 import { Podcast } from '@/store/class/general/podcast';
 import { state } from '../../../store/paramStore';
-import DurationHelper from '../../../helper/duration';
+import PodcastPlayBar from '../podcasts/PodcastPlayBar.vue';
 import { displayMethods } from '../../mixins/functions';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'EmissionPlayerItem',
+
+  components:{
+    PodcastPlayBar
+  },
   mixins: [displayMethods],
   props: {
     emission: { default: ()=>({}), type: Object as ()=>Emission },
@@ -190,9 +165,6 @@ export default defineComponent({
     organisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
-    isProgressBar(){
-      return (state.emissionsPage.progressBar as boolean);
-    },
     editRight(): boolean {
       if (
         (this.authenticated && this.organisationId === this.emission.orga.id) ||
@@ -221,36 +193,6 @@ export default defineComponent({
     }
   },
   methods: {
-    seekTo(event: MouseEvent, podcast: Podcast): void {
-      if(podcast!== this.$store.state.player.podcast){return;}
-      const rect = (event.currentTarget as Element).getBoundingClientRect();
-      const barWidth = (event.currentTarget as Element).clientWidth;
-      const x = event.clientX - rect.left;
-      const percentPosition = x / barWidth;
-      if (percentPosition * 100 >= this.percentLiveProgress) return;
-      const seekTime = this.$store.state.player.total * percentPosition;
-      this.$store.commit("playerSeekTime", seekTime);
-    },
-    percentProgress(podcast: Podcast): number{
-      if(podcast !== this.$store.state.player.podcast){
-        return 0;
-      }
-      if(!this.$store.state.player.elapsed){return 0;}
-      return this.$store.state.player.elapsed * 100;
-    },
-    playedTime(podcast: Podcast): string{
-      if(podcast === this.$store.state.player.podcast){
-        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)
-          );
-        }
-      }
-      return '00:00';
-    },
-    totalTime(podcast: Podcast): string {
-      return DurationHelper.formatDuration(Math.round(podcast.duration/1000));
-    },
     async loadPodcasts(): Promise<void> {
       const nb = this.nbPodcasts ? this.nbPodcasts : 2;
       const data = await octopusApi.fetchPodcasts({

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/PodcastItem.vue

@@ -60,6 +60,10 @@
           {{ title }}
         </div>
       </router-link>
+      <PodcastPlayBar
+        :podcast="podcast"
+        class="mx-2"
+      />
       <div class="d-flex justify-content-between">
         <router-link
           v-if="!isPodcastmaker"
@@ -88,7 +92,7 @@ import { state } from '../../../store/paramStore';
 import moment from 'moment';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
-
+import PodcastPlayBar from '../podcasts/PodcastPlayBar.vue';
 import { Podcast } from '@/store/class/general/podcast';
 import { Category } from '@/store/class/general/category';
 import { defineComponent } from 'vue'
@@ -98,6 +102,7 @@ export default defineComponent({
   components: {
     AnimatorsItem,
     PodcastImage,
+    PodcastPlayBar
   },
 
   props: {

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

@@ -116,6 +116,9 @@
             :participants="podcast.guests"
             :is-guest="true"
           />
+          <PodcastPlayBar
+            :podcast="podcast"
+          />
           <div v-if="editRight && !isPodcastmaker">
             <div
               v-if="podcast.annotations && podcast.annotations.RSS"
@@ -152,6 +155,7 @@
 </template>
 
 <script lang="ts">
+import PodcastPlayBar from './PodcastPlayBar.vue';
 import PodcastImage from './PodcastImage.vue';
 import ParticipantDescription from './ParticipantDescription.vue';
 import TagList from './TagList.vue';
@@ -174,6 +178,7 @@ export default defineComponent({
     ShareButtons,
     TagList,
     ErrorMessage,
+    PodcastPlayBar
   },
 
   mixins:[displayMethods],

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

@@ -0,0 +1,100 @@
+<template>
+  <div
+    v-if="isProgressBar"
+    class="d-flex align-items-center podcast-play-bar"
+  >
+    <div class="me-2">
+      {{ playedTime }}
+    </div>
+    <div class="position-relative flex-grow-1">
+      <div
+        class="progress flex-grow-1 c-hand"
+        @mouseup="seekTo"
+      >
+        <div
+          class="progress-bar primary-bg"
+          role="progressbar"
+          aria-valuenow="0"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :style="'width: ' + percentProgress + '%'"
+        />
+        <div
+          class="progress-bar-cursor"
+          :style="'left:' + percentProgress + '%'"
+        />
+      </div>
+    </div>
+    <div class="ms-2">
+      {{ totalTime }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Podcast } from '@/store/class/general/podcast';
+import DurationHelper from '../../../helper/duration';
+import { displayMethods } from '../../mixins/functions';
+import { state } from '../../../store/paramStore';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastPlayBar',
+  mixins: [displayMethods],
+  props: {
+    podcast: { default: ()=>({}), type: Object as ()=>Podcast },
+  },
+  computed: {
+    isProgressBar(): boolean{
+      return (state.emissionsPage.progressBar as boolean);
+    },
+    percentProgress(): number{
+      if(this.podcast !== this.$store.state.player.podcast){
+        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.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)
+          );
+        }
+      }
+      return '00:00';
+    },
+    totalTime(): string {
+      return DurationHelper.formatDuration(Math.round(this.podcast.duration/1000));
+    },
+  },
+  methods: {
+    seekTo(event: MouseEvent): void {
+      if(this.podcast!== this.$store.state.player.podcast){return;}
+      const rect = (event.currentTarget as Element).getBoundingClientRect();
+      const barWidth = (event.currentTarget as Element).clientWidth;
+      const x = event.clientX - rect.left;
+      const percentPosition = x / barWidth;
+      if (percentPosition * 100 >= this.percentLiveProgress) return;
+      const seekTime = this.$store.state.player.total * percentPosition;
+      this.$store.commit("playerSeekTime", seekTime);
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.podcast-play-bar {
+  .progress{
+    height: 6px;
+  }
+  .progress-bar-cursor{
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: black;
+    align-self: center;
+    position: absolute;
+  }
+}
+</style>

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,