@saooti/octopus-sdk 30.0.41 → 30.0.45

package/README.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.41",
+  "version": "30.0.45",
   "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/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/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/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/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: {