@saooti/octopus-sdk 30.0.43 → 30.0.47

package/README.md

@@ -539,4 +539,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.39 Listes inline taille item
  * 30.0.41 Inline list arrow
  * 30.0.42 Resize rubriqueList
- * 30.0.43 Resize rubriqueList
+ * 30.0.43 Resize rubriqueList
+ * 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.43",
+  "version": "30.0.47",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -53,29 +53,32 @@
       class="border-top emission-item-border-color p-2 secondary-bg d-flex"
     >
       <div class="d-flex justify-content-between flex-grow-1">
-        <router-link
-          :to="{
-            name: 'podcast',
-            params: { podcastId: p.podcastId },
-            query: { productor: $store.state.filter.organisationId },
-          }"
-          class="d-flex flex-column define-width text-dark"
-        >
-          <div class="fw-bold text-truncate">
-            {{ p.title }}
-          </div>
-          <div
-            :id="'description-podcast-container-' + p.podcastId"
-            class="emission-description html-wysiwyg-content"
+        <div class="d-flex flex-column">
+          <router-link
+            :to="{
+              name: 'podcast',
+              params: { podcastId: p.podcastId },
+              query: { productor: $store.state.filter.organisationId },
+            }"
+            class="d-flex flex-column define-width text-dark"
           >
-            <!-- eslint-disable vue/no-v-html -->
+            <div class="fw-bold text-truncate">
+              {{ p.title }}
+            </div>
             <div
-              :id="'description-podcast-' + p.podcastId"
-              v-html="urlify(p.description)"
-            />
-            <!-- eslint-enable -->
-          </div>
-        </router-link>
+              :id="'description-podcast-container-' + p.podcastId"
+              class="emission-description html-wysiwyg-content"
+            >
+              <!-- eslint-disable vue/no-v-html -->
+              <div
+                :id="'description-podcast-' + p.podcastId"
+                v-html="urlify(p.description)"
+              />
+              <!-- eslint-enable -->
+            </div>
+          </router-link>
+          <PodcastPlayBar :podcast="p" />
+        </div>
         <div
           v-if="
             $store.state.player.podcast !== p ||
@@ -125,10 +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 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 },
@@ -238,6 +246,17 @@ export default defineComponent({
   height: min-content;
   border-radius: 0.8rem;
   overflow: hidden;
+  .progress{
+    height: 6px;
+  }
+  .progress-bar-cursor{
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: black;
+    align-self: center;
+    position: absolute;
+  }
   .emission-item-border-color {
     border-color: #ddd;
   }

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

@@ -106,6 +106,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'],
 
@@ -170,7 +171,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 +211,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;

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
@@ -123,6 +122,7 @@ export default defineComponent({
         if(!state.player.elapsed){return 0;}
         return state.player.elapsed * 100;
       },
+      playerSeekTime: (state: StoreState) => state.player.seekTime,
     }),
     audioUrl(): string {
       if (this.media) return this.media.audioUrl? this.media.audioUrl:"";
@@ -150,6 +150,15 @@ export default defineComponent({
   },
 
   watch: {
+    playerSeekTime(){
+      if(!this.playerSeekTime){return;}
+      if (this.$store.state.player.podcast || this.$store.state.player.live) {
+        this.notListenTime = this.playerSeekTime - this.listenTime;
+      }
+      const audioPlayer: HTMLAudioElement | null = document.querySelector('#audio-player');
+      if (!audioPlayer) return;
+      audioPlayer.currentTime = this.playerSeekTime;
+    },
     live: {
       deep: true,
       async handler(){
@@ -184,6 +193,9 @@ export default defineComponent({
     commentsLoaded(): void {
       this.initComments(true);
     },
+    audioUrl(): void{
+      this.playerError = false;
+    }
   },
 
   mounted() {
@@ -332,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/AppStore.ts

@@ -77,6 +77,9 @@ export default createStore({
     playerVolume(state, volume) {
       state.player.volume = volume;
     },
+    playerSeekTime(state, seekTime) {
+      state.player.seekTime = seekTime;
+    },
 
     filterOrga(state, filter) {
       state.filter.organisationId = filter.orgaId;

package/src/store/class/general/player.ts

@@ -10,4 +10,5 @@ export interface Player{
     media: Media|undefined;
     live: Podcast|undefined;
     stop?: boolean;
+    seekTime?: number;
   }

package/src/store/paramStore.ts

@@ -50,10 +50,12 @@ const state:paramStore = {
     buttonMore: false,
     overflowScroll: false,
     titleInImage: false,
+    progressBar:false
   },
   emissionPage: {
     ouestFranceStyle: false,
     rssButton: false,
+    isDisplayPodcasts:true
   },
   intervenantPage: {
     lightStyle: false,
@@ -136,10 +138,12 @@ export interface EmissionsPage{
   buttonMore?: boolean,
   overflowScroll?: boolean,
   titleInImage?: boolean,
+  progressBar?:boolean
 }
 export interface EmissionPage{
   ouestFranceStyle?: boolean,
   rssButton?: boolean,
+  isDisplayPodcasts?:boolean
 }
 export interface IntervenantPage{
   lightStyle?: boolean,

package/src/store/typeAppStore.ts

@@ -199,6 +199,7 @@ export function emptyPodcastData(): Podcast{
             total: 0,
             media: undefined ,
             live: undefined ,
+            seekTime:0,
           },
       
           navigator: {