@saooti/octopus-sdk 36.0.8 → 36.0.10

package/package.json

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

package/src/assets/bootstrap.scss

@@ -240,6 +240,9 @@
 	.bg-secondary{
 		background: #eee !important;
 	}
+	.bg-complementary{
+		background: $octopus-complementary-color !important;
+	}
 	.w-50-responsive{
     display: flex;
     align-items: center;
@@ -250,6 +253,9 @@
 			padding: 0 !important;
     }
   }
+	.font-italic{
+		font-style: italic;
+	}
 }
 
 	

package/src/components/display/live/LiveItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="live"
-    class="d-flex w-100"
+    class="d-flex-column live-item-container w-100"
   >
     <router-link
       class="live-date-box"
@@ -29,7 +29,7 @@
       }"
     >
       <PodcastImage
-        class="me-3"
+        class="me-3 flex-shrink-0"
         :podcast="live"
         :hide-play="false"
         :playing-podcast="false"
@@ -37,7 +37,7 @@
         :is-animator-live="organisationRight"
       />
     </router-link>
-    <div class="d-flex flex-column live-special-width">
+    <div class="d-flex flex-column">
       <router-link
         class="text-uppercase fw-bold text-truncate"
         :to="{
@@ -246,36 +246,38 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.live-date-box {
-  width: 200px;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-}
-.font-size-smaller {
-  font-size: smaller;
-}
-.live-description-container {
-  overflow: hidden;
-  margin-top: 0.5em;
-  word-break: break-word;
-  max-height: 6rem;
-  position: relative;
-  &.after-live-description:after {
-    content: '...';
-    position: absolute;
-    padding-left: 1rem;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: bolder;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f3f3f3 40%);
+  .live-item-container{
+    @media (max-width: 960px) {
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .live-date-box {
+    width: 200px;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+  }
+  .font-size-smaller {
+    font-size: smaller;
+  }
+  .live-description-container {
+    overflow: hidden;
+    margin-top: 0.5em;
+    word-break: break-word;
+    max-height: 6rem;
+    position: relative;
+    &.after-live-description:after {
+      content: '...';
+      position: absolute;
+      padding-left: 1rem;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      font-size: 1rem;
+      font-weight: bolder;
+      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f3f3f3 40%);
+    }
   }
-}
-.live-special-width {
-  width: 0;
-  flex-grow: 1;
-}
 }
 </style>

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

@@ -372,8 +372,8 @@ export default defineComponent({
     background-color: #ffd663;
     border-radius: 50%;
     position: absolute;
-    right: 4.5rem;
-    top: 6rem;
+    left: 4.5rem;
+    bottom: 4rem;
     font-size: 0.9rem;
     font-weight: bold;
     display: flex;

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

@@ -156,19 +156,25 @@ export default defineComponent({
   },
   methods: {
     async fetchRecommendations(): Promise<void>{
-      const podcastIdsArray = await octopusApi.fetchDataPublicWithParams<Array<number>>(13, 'get_predicts',{
-        reco: this.podcastId,
-        n_neightbors: 5,
-      }); 
-      for (let podcastIdReco of podcastIdsArray) {
-        try {
-          const entirePodcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+podcastIdReco); 
-          this.allPodcasts.push(entirePodcast);
-        } catch {
-          //If doesn't exist, do nothing
+      try {
+        const podcastIdsArray = await octopusApi.fetchDataPublicWithParams<Array<number>>(13, 'get_predicts',{
+          reco: this.podcastId,
+          n_neightbors: 5,
+        }); 
+        for (let podcastIdReco of podcastIdsArray) {
+          try {
+            const entirePodcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+podcastIdReco); 
+            this.allPodcasts.push(entirePodcast);
+          } catch {
+            //If doesn't exist, do nothing
+          }
         }
+        this.totalCount = podcastIdsArray.length;
+        this.loading = false;
+      } catch {
+        this.allPodcasts=[];
+        this.totalCount = 0;
       }
-      this.totalCount = podcastIdsArray.length;
       this.loading = false;
     },
     async fetchNext(): Promise<void> {

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

@@ -71,6 +71,7 @@ import { RouteLocationRaw } from 'vue-router';
 import { useFilterStore } from '@/stores/FilterStore';
 import { mapState, mapActions } from 'pinia';
 import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
 export default defineComponent({
   name: 'PodcastInlineListTemplate',
   
@@ -150,13 +151,18 @@ export default defineComponent({
         nameRubrique: ''
       };
       if(this.filterRubriquage.length){
-        const rubriqueChosen =  this.filterRubriquage[this.rubriqueId.length - 1].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
-        filterToAdd = {
-          rubriquageId: this.filterRubriquage[this.rubriqueId.length - 1].rubriquageId, 
-          rubriqueId: rubriqueChosenId, 
-          nameRubriquage:  this.filterRubriquage[this.rubriqueId.length - 1].title,
-          nameRubrique: rubriqueChosen.name
-        };
+        this.filterRubriquage.forEach((element:Rubriquage) => {
+          const rubriqueChosen =  element.rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
+          if(rubriqueChosen){
+            filterToAdd = {
+              rubriquageId: element.rubriquageId??0, 
+              rubriqueId: rubriqueChosenId, 
+              nameRubriquage:  element.title,
+              nameRubrique: rubriqueChosen.name
+            };
+            return;
+          }
+        });
       }
       const newFilter: Array<RubriquageFilter> = Array.from(this.filterRubrique);
       newFilter.push(filterToAdd);

package/src/components/misc/ProgressBar.vue

@@ -11,6 +11,18 @@
       aria-valuemax="100"
       :style="'width: ' + secondaryProgress + '%'"
     />
+    <template v-if="playerMedia">
+      <div
+        v-if="mediaCueInPercent > 0"
+        class="octopus-progress-bar bg-complementary"
+        :style="{'width': + mediaCueInPercent + '%'}"
+      />
+      <div
+        v-if="mediaCueOutPercent < 100"
+        class="octopus-progress-bar end-0 bg-complementary"
+        :style="{'width': + 100- mediaCueOutPercent + '%'}"
+      />
+    </template>
     <div
       class="octopus-progress-bar bg-primary"
       role="progressbar"
@@ -19,6 +31,18 @@
       aria-valuemax="100"
       :style="'width: ' + mainProgress + '%'"
     />
+    <template v-if="playerMedia">
+      <div
+        v-if="mediaCueInPercent > 0"
+        class="octopus-progress-bar octopus-progress-bar-duration bg-complementary"
+        :style="{'left': + mediaCueInPercent + '%'}"
+      />
+      <div
+        v-if="mediaCueOutPercent < 100"
+        class="octopus-progress-bar end-0 octopus-progress-bar-duration bg-complementary"
+        :style="{'right': + 100- mediaCueOutPercent + '%'}"
+      />
+    </template>
     <div
       v-if="alertBar"
       class="octopus-progress-bar octopus-progress-bar-duration bg-danger"
@@ -33,6 +57,8 @@
 </template>
 
 <script lang="ts">
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'ProgressBar',
@@ -42,6 +68,33 @@ export default defineComponent({
     secondaryProgress: { default: 0, type: Number},
     isProgressCursor: { default: false, type: Boolean},
   },
+  data() {
+    return {
+      mediaCueInPercent: 0 as number,
+      mediaCueOutPercent: 100 as number,
+    };
+  },
+  computed:{
+    ...mapState(usePlayerStore, ['playerMedia']),
+  },
+  watch:{
+    playerMedia: {
+      deep: true,
+      immediate:true,
+      handler(){
+        if(this.playerMedia){
+          this.mediaCueInPercent = this.timeMediaToPercent(this.playerMedia.cueIn??0);
+          this.mediaCueOutPercent = this.timeMediaToPercent(this.playerMedia.cueOut??null);
+        }
+      }
+    },
+  },
+  methods:{
+    timeMediaToPercent(value: number|null):number{
+      if(null===value || !this.playerMedia){return 100;}
+      return (value*100)/(this.playerMedia?.duration??1);
+    },
+  }
 })
 </script>
 
@@ -91,6 +144,9 @@ export default defineComponent({
       align-self: center;
       position: absolute;
     }
+    .end-0{
+      right: 0;
+    }
   }
 }
 </style>

package/src/components/misc/player/Player.vue

@@ -15,6 +15,7 @@
         @durationChange="onTimeUpdate"
         @error="onError"
         @seeked="onSeeked"
+        @pause="onPause"
       />
       <PlayerCompact
         v-if="!playerLargeVersion"
@@ -93,13 +94,18 @@ export default defineComponent({
   },
   
   methods: {
-    ...mapActions(usePlayerStore, ['playerPlay', 'playerUpdateLargeVersion']),
+    ...mapActions(usePlayerStore, ['playerPlay', 'playerUpdateLargeVersion', 'playerChangeStatus']),
     onHidden(): void {
       if (this.forceHide) {
         this.playerPlay();
         this.forceHide = false;
       }
     },
+    onPause(){
+      if("PLAYING"===this.playerStatus){
+        this.playerChangeStatus(true);
+      }
+    }
   },
 })
 </script>

package/src/components/misc/player/PlayerCompact.vue

@@ -137,6 +137,7 @@ export default defineComponent({
     flex-shrink: 1;
     overflow: hidden;
     font-size: 0.8rem;
+    padding: 0 0.5rem;
   }
   .player-image {
     border-radius: $octopus-borderradius;

package/src/sass/_variables.scss

@@ -13,7 +13,7 @@ $secondary: #636C73 !default;
 $danger: #E22C27 !default;
 
 $blue-octopus: #08667E !default;
-
+$octopus-complementary-color: #813257;
 //SDK Octopus style
 $octopus-background: white !default;
 $octopus-primary-color: #1a8658 !default;

package/src/stores/class/general/media.ts

@@ -1,7 +1,6 @@
 export interface Media {
   mediaId: number;
-  imageUrl?: string;
-  organisationId: string;
+  organisationId?: string;
   title: string;
   year?: string;
   type?: string;
@@ -9,6 +8,21 @@ export interface Media {
   album?: string;
   creation?: string;
   duration?: number;
+  contentType?: string;
   filePath?: string;
   audioUrl?: string;
-}
+  cueIn?: number;
+  cueOut?: number;
+  bpm?: number;
+}
+
+export function emptyMediaData(): Media{
+  return {
+    mediaId: 0,
+    album: '',
+    artiste: '',
+    title: '',
+    type: '',
+    year: '',
+  }
+}