@saooti/octopus-sdk 30.0.44 → 30.0.45

package/README.md

@@ -540,4 +540,5 @@ 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

package/package.json

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

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/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>