@saooti/octopus-sdk 30.0.40 → 30.0.44

package/README.md

@@ -536,4 +536,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.36 LiveList
  * 30.0.37 Commentaires
  * 30.0.38 EmissionList expose
- * 30.0.39 Listes inline taille item
+ * 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.44 ProgressBar pour le soir

package/package.json

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

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

@@ -58,7 +58,7 @@
       @categoriesLength="checkIfCategories"
     />
     <RubriqueList
-      v-else-if="rubriquageFilter.length !== rubriqueFilter.length"
+      v-else-if="isDisplay && rubriquageFilter.length !== rubriqueFilter.length"
       :rubriquages="rubriquageFilter"
     />
   </div>

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

@@ -11,7 +11,7 @@
           :title="$t('Display previous')"
           @click="displayPrevious()"
         >
-          <div class="saooti-arrow-left2" />
+          <div class="saooti-left fw-bold" />
         </button>
         <button
           class="btn admin-button m-1"
@@ -19,7 +19,7 @@
           :title="$t('Display next')"
           @click="displayNext()"
         >
-          <div class="saooti-arrow-right2" />
+          <div class="saooti-right fw-bold" />
         </button>
       </div>
     </div>

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

@@ -53,29 +53,61 @@
       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 -->
+              :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>
+          <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>
-        </router-link>
+        </div>
         <div
           v-if="
             $store.state.player.podcast !== p ||
@@ -125,6 +157,7 @@ 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 { displayMethods } from '../../mixins/functions';
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -157,6 +190,9 @@ 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) ||
@@ -185,6 +221,36 @@ 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({
@@ -238,6 +304,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

@@ -31,7 +31,7 @@
           :title="$t('Display previous')"
           @click="displayPrevious()"
         >
-          <div class="saooti-arrow-left2" />
+          <div class="saooti-left fw-bold" />
         </button>
         <button
           class="btn admin-button m-1"
@@ -39,7 +39,7 @@
           :title="$t('Display next')"
           @click="displayNext()"
         >
-          <div class="saooti-arrow-right2" />
+          <div class="saooti-right fw-bold" />
         </button>
       </div>
     </div>

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

@@ -113,7 +113,9 @@ export default defineComponent({
       if(!this.rubriquage){ return ;}
       this.$store.commit('filterRubriqueDisplay', this.rubriquage.rubriques);
       window.addEventListener('resize', this.resizeWindow);
-      this.resizeWindow();
+      this.$nextTick(() => {
+        this.resizeWindow();
+      });
     },
     addFilter(rubrique: Rubrique): void{
       if(!this.rubriquage){ return ;}

package/src/components/misc/Player.vue

@@ -123,6 +123,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 +151,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(){

package/src/components/pages/Home.vue

@@ -24,13 +24,6 @@
         :title="$t('Without rubric')"
         :button-text="$t('All podcast button', { name: $t('Without rubric') })"
       />
-      <PodcastInlineList
-        v-if="rubriqueDisplay && rubriqueDisplay.length"
-        :no-rubriquage-id="[rubriqueDisplay[0].rubriquageId]"
-        :rubrique-id="rubriqueId"
-        :title="$t('Without rubric')"
-        :button-text="$t('All podcast button', { name: $t('Without rubric') })"
-      />
     </template>
   </div>
 </template>

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,6 +50,7 @@ const state:paramStore = {
     buttonMore: false,
     overflowScroll: false,
     titleInImage: false,
+    progressBar:false
   },
   emissionPage: {
     ouestFranceStyle: false,
@@ -136,6 +137,7 @@ export interface EmissionsPage{
   buttonMore?: boolean,
   overflowScroll?: boolean,
   titleInImage?: boolean,
+  progressBar?:boolean
 }
 export interface EmissionPage{
   ouestFranceStyle?: boolean,

package/src/store/typeAppStore.ts

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