@saooti/octopus-sdk 36.0.37 → 37.0.0

package/package.json

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

package/src/assets/progressbar.scss

@@ -0,0 +1,50 @@
+@import '@scss/_variables.scss';
+.octopus-app{
+  .octopus-progress{
+    display: flex;
+    overflow: hidden;
+    background-color:#e9ecef;
+    border-radius: $octopus-borderradius;
+    position: relative;
+    cursor: pointer;
+
+    .octopus-progress-bar{
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+      color: white;
+      text-align: center;
+      white-space: nowrap;
+      background-color: $octopus-primary-color;
+      transition: width 0.6s ease;
+    }
+    &,.octopus-progress-bar{
+      height: 4px;
+      @media (max-width: 960px) {
+        height: 8px;
+      }
+    }
+    &.large,&.large .octopus-progress-bar{
+      height: 15px;
+    }
+    &.medium,&.medium .octopus-progress-bar{
+      height: 6px;
+    }
+    .octopus-progress-bar-duration {
+      width: 10px;
+    }
+    .octopus-progress-bar-cursor{
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: black;
+      align-self: center;
+      position: absolute;
+    }
+    .end-0{
+      right: 0;
+    }
+  }
+}

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

@@ -88,7 +88,7 @@ export default defineComponent({
     this.fetchCurrentlyPlaying();
     this.radioInterval = setInterval(() => {
       this.fetchCurrentlyPlaying();
-    }, 5000);
+    }, 10000);
   },
   methods: {
     async fetchCurrentlyPlaying(): Promise<void>{

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

@@ -146,7 +146,7 @@
     <EditBox
       v-else-if="editRight && isEditBox"
       :podcast="podcast"
-      :displayStudioAccess="isDebriefing"
+      :display-studio-access="isDebriefing"
       @validatePodcast="$emit('updatePodcast', $event)"
     />
     <TagList

package/src/components/misc/Popover.vue

@@ -169,7 +169,7 @@ export default defineComponent({
 		min-width: 200px;
 		.octopus-dropdown-item{
 			display: flex;
-    	justify-content: center;
+			justify-content: center;
 			color: rgb(29, 29, 29);
 			width: 100%;
 			padding: 0.25rem 1rem;

package/src/components/misc/ProgressBar.vue

@@ -99,54 +99,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-  .octopus-progress{
-    display: flex;
-    overflow: hidden;
-    background-color:#e9ecef;
-    border-radius: $octopus-borderradius;
-    position: relative;
-    cursor: pointer;
-
-    .octopus-progress-bar{
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      overflow: hidden;
-      color: white;
-      text-align: center;
-      white-space: nowrap;
-      background-color: $octopus-primary-color;
-      transition: width 0.6s ease;
-    }
-    &,.octopus-progress-bar{
-      height: 4px;
-      @media (max-width: 960px) {
-        height: 8px;
-      }
-    }
-    &.large,&.large .octopus-progress-bar{
-      height: 15px;
-    }
-    &.medium,&.medium .octopus-progress-bar{
-      height: 6px;
-    }
-    .octopus-progress-bar-duration {
-      width: 10px;
-    }
-    .octopus-progress-bar-cursor{
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: black;
-      align-self: center;
-      position: absolute;
-    }
-    .end-0{
-      right: 0;
-    }
-  }
-}
+@import '../../assets/progressbar.scss';
 </style>

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

@@ -63,6 +63,9 @@
         :listen-time="listenTime"
         @updateNotListenTime="$emit('update:notListenTime', $event)"
       />
+      <RadioProgressBar
+        v-else
+      />
     </div>
     <button
       :title="''!=transcriptText ? $t('View transcript'): $t('Enlarge')"
@@ -86,14 +89,16 @@ import { CommentPodcast } from '@/stores/class/general/comment';
 import { playerDisplay } from '../../mixins/player/playerDisplay';
 import imageProxy from '../../mixins/imageProxy';
 import Spinner from '../Spinner.vue';
-import PlayerProgressBar from './PlayerProgressBar.vue';
 import PlayerTimeline from './PlayerTimeline.vue';
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
+const RadioProgressBar = defineAsyncComponent(() => import('./radio/RadioProgressBar.vue'));
+const PlayerProgressBar = defineAsyncComponent(() => import('./PlayerProgressBar.vue'));
 export default defineComponent({
   name: 'PlayerCompact',
 
   components: {
     PlayerProgressBar,
+    RadioProgressBar,
     PlayerTimeline,
     Spinner
   },

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

@@ -32,6 +32,7 @@
     </div>
     <div class="player-grow-large-content">
       <PlayerProgressBar
+        v-if="!radioUrl"
         ref="progressbar"
         class-progress="large"
         :hls-ready="hlsReady"
@@ -44,11 +45,14 @@
         :listen-time="listenTime"
         @updateNotListenTime="$emit('update:notListenTime', $event)"
       />
+      <RadioProgressBar v-else />
       <div class="d-flex justify-content-between">
         <div>{{ playedTime }}</div>
         <div>{{ totalTime }}</div>
       </div>
+      <RadioHistory v-if="radioUrl" />
     </div>
+    
     <div
       v-if="''!=transcriptText"
       class="flex-grow-1 d-flex align-items-center w-100"
@@ -94,17 +98,21 @@
 import Spinner from '../Spinner.vue';
 import { playerDisplay } from '../../mixins/player/playerDisplay';
 import imageProxy from '../../mixins/imageProxy';
-import PlayerProgressBar from './PlayerProgressBar.vue';
 import PlayerTimeline from './PlayerTimeline.vue';
-import { defineComponent } from 'vue';
+import { defineAsyncComponent, defineComponent } from 'vue';
 import { CommentPodcast } from '@/stores/class/general/comment';
+const RadioProgressBar = defineAsyncComponent(() => import('./radio/RadioProgressBar.vue'));
+const RadioHistory = defineAsyncComponent(() => import('./radio/RadioHistory.vue'));
+const PlayerProgressBar = defineAsyncComponent(() => import('./PlayerProgressBar.vue'));
 export default defineComponent({
   name: 'PlayerLarge',
 
   components: {
     PlayerProgressBar,
+    RadioProgressBar,
     PlayerTimeline,
-    Spinner
+    Spinner,
+    RadioHistory
   },
     mixins:[playerDisplay, imageProxy],
 

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

@@ -30,7 +30,6 @@ export default defineComponent({
   },
   props: {
     classProgress:{ default: "", type: String},
-    hlsReady: { default: false, type: Boolean},
     showTimeline: { default: false, type: Boolean},
     comments: { default: ()=>[], type: Array as ()=>Array<CommentPodcast>},
     displayAlertBar: { default: false, type: Boolean},

package/src/components/misc/player/radio/RadioHistory.vue

@@ -0,0 +1,66 @@
+<template>
+  <div 
+    v-if="playerRadio.history.length"
+    class="d-flex align-items-center flex-wrap mt-3"
+  >
+    <div class="fw-bold me-3">
+      {{ $t('Previously') +':' }}
+    </div>
+    <div 
+      v-for="pastItem in playerRadio.history" 
+      :key="pastItem.title"
+      class="me-3"
+    >
+      <span class="me-2 hour-past-item">{{ displayTimeItem(pastItem) }}</span>
+      <span>{{ displayPreviousItem(pastItem) }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState } from 'pinia';
+import dayjs from 'dayjs';
+import {fetchRadioData} from '../../../mixins/radio/fetchRadioData';
+import { defineComponent } from 'vue';
+import { MediaRadio } from '@/stores/class/general/player';
+export default defineComponent({
+  name: 'RadioHistory',
+
+  components: {
+  },
+
+  mixins: [fetchRadioData],
+  emits: ['updateNotListenTime'],
+  data() {
+    return {
+    };
+  },
+  
+  computed: {
+    ...mapState(usePlayerStore, ['playerRadio']),
+  },
+  mounted(){
+    console.log(this.playerRadio);
+  },
+  methods:{
+    displayTimeItem(item: MediaRadio):string{
+      return dayjs(item.startDate).format('HH:mm');
+    },
+    displayPreviousItem(item: MediaRadio):string{
+      if(item.podcastId){
+        return item.title;
+      }
+      return this.displayTitle(item);
+    }
+  }
+})
+</script>
+<style lang="scss">
+.octopus-app{
+  .hour-past-item{
+    font-size: 0.8rem;
+    color: #dbdbdb;
+  }
+}
+</style>

package/src/components/misc/player/radio/RadioProgressBar.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="octopus-progress c-hand-auto mt-1"
+    :class="isAmbiance?'ambiance-progress':''"
+  >
+    <div
+      class="octopus-progress-bar"
+      role="progressbar"
+      aria-valuenow="0"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      :style="'width: ' + percentProgress + '%'"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState, mapActions } from 'pinia';
+import dayjs from 'dayjs';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'RadioProgressBar',
+
+  components: {
+  },
+  emits: ['updateNotListenTime'],
+  data() {
+    return {
+      percentInterval: undefined as ReturnType<typeof setTimeout>|undefined,
+    };
+  },
+  
+  computed: {
+    ...mapState(usePlayerStore, ['playerRadio', 'playerElapsed']),
+    isAmbiance(): boolean{
+      return !this.playerRadio?.podcast?.podcastId
+    },
+    percentProgress(): number{
+      if(!this.playerElapsed){return 0;}
+      return this.playerElapsed * 100;
+    },
+  },
+  mounted(){
+    this.handlePercentInterval();
+  },
+  methods:{
+    ...mapActions(usePlayerStore, ['playerUpdateElapsed']),
+    handlePercentInterval(/* clear: boolean */): void{
+     /*  if(clear){
+        clearInterval((this.percentInterval as unknown as number));
+        this.percentInterval = undefined;
+        return;
+      } */
+      this.percentInterval = setInterval(() => {
+        this.calculatePercent();
+      }, 1000);
+    },
+    calculatePercent(): void{
+      if(!this.playerRadio?.metadata){return;}
+      const actualMilliSecondsPlayed = dayjs().subtract(18, 'second').diff(dayjs(this.playerRadio.metadata.startDate));
+      const percentPlayed = (actualMilliSecondsPlayed) / (this.playerRadio?.metadata.mediaDuration * 1000);
+      this.playerUpdateElapsed(percentPlayed, this.playerRadio?.metadata.mediaDuration);
+    }
+  }
+
+})
+</script>
+<style lang="scss">
+@import '../../../../assets/progressbar.scss';
+.octopus-app{
+  .ambiance-progress{
+    background-color: #d1d1d1;
+    .octopus-progress-bar{
+      background-color: #747474;
+    }
+  }
+}
+</style>

package/src/components/mixins/player/playerDisplay.ts

@@ -88,7 +88,7 @@ export const playerDisplay = defineComponent({
           this.fetchCurrentlyPlaying();
           this.radioInterval = setInterval(() => {
             this.fetchCurrentlyPlaying();
-          }, 2000);
+          }, 10000);
         }
       }
     },
@@ -104,8 +104,8 @@ export const playerDisplay = defineComponent({
     async fetchCurrentlyPlaying(): Promise<void>{
       this.fetchRadioMetadata(this.playerRadio?.canalId??0,this.playerRadio?.metadata.title??"", this.updateMetadata);
     },
-    updateMetadata(metadata: MediaRadio, podcast?:Podcast): void{
-      this.playerMetadata(metadata);
+    updateMetadata(metadata: MediaRadio, podcast:Podcast|undefined, history?: Array<MediaRadio>): void{
+      this.playerMetadata(metadata, history??[]);
       this.playerRadioPodcast(podcast);
     },
     addKeyboardControl(event: KeyboardEvent): void{

package/src/components/mixins/player/playerLogic.ts

@@ -216,6 +216,9 @@ export const playerLogic = defineComponent({
       }
     },
     onTimeUpdate(event: Event): void {
+      if(this.playerRadio){
+        return;
+      }
       const mediaTarget = (event.currentTarget as HTMLMediaElement);
       if (this.playerPodcast || this.playerLive) {
         if (!this.downloadId) {

package/src/components/mixins/radio/fetchRadioData.ts

@@ -13,18 +13,18 @@ export const fetchRadioData = defineComponent({
     clearInterval((this.radioInterval as unknown as number));
   },
   methods: {
-    async fetchRadioMetadata(canalId: number, previousTitle: string,  callbackMetadata: (metadata: MediaRadio, podcast?:Podcast) => void): Promise<void>{
+    async fetchRadioMetadata(canalId: number, previousTitle: string,  callbackMetadata: (metadata: MediaRadio, podcast:Podcast|undefined,history?: Array<MediaRadio> ) => void): Promise<void>{
       const metadata = await octopusApi.fetchData<MetadataRadio>(14, 'player/playing/'+canalId);
       const arrayMetadata = metadata.previously;
       arrayMetadata.unshift(metadata.currently);
-      for (let el of arrayMetadata) {
-        if(dayjs().valueOf()-29000 > dayjs(el.startDate).valueOf()){
-          if(previousTitle !== el.title){
-            if(el.podcastId){
-              const data : Podcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+el.podcastId); 
-              callbackMetadata(el, data);
+      for (let index = 0, len = arrayMetadata.length; index < len; index++) {
+        if(dayjs().valueOf()-18000 > dayjs(arrayMetadata[index].startDate).valueOf()){
+          if(previousTitle !== arrayMetadata[index].title){
+            if(arrayMetadata[index].podcastId){
+              const data : Podcast = await octopusApi.fetchData<Podcast>(0, 'podcast/'+arrayMetadata[index].podcastId); 
+              callbackMetadata(arrayMetadata[index], data, arrayMetadata.slice(index, len));
             }else{
-              callbackMetadata(el);
+              callbackMetadata(arrayMetadata[index], undefined, arrayMetadata.slice(index, len));
             }
           }
           return;

package/src/locale/fr.ts

@@ -334,4 +334,8 @@ export default{
   'Canal name image': 'Image du canal {name}',
   "Show animated wave":"Afficher la vague animée",
   'Characters number calculated over HTML code':'Le nombre de caractères est calculé à partir du code HTML généré par cet éditeur. Vous pouvez voir ce code grâce au bouton "html".',
+
+
+  
+  'Previously':"Précédemment",
 };

package/src/stores/ParamSdkStore.ts

@@ -12,7 +12,7 @@ const state:ParamStore = {
     isPlaylist: false,
     isProduction: false,
     isContribution: true,
-    ApiUri: 'https://api.staging.saooti.org/',
+    ApiUri: 'https://api.dev2.saooti.org/',
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -26,8 +26,8 @@ const state:ParamStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: 'https://playerbeta.staging.saooti.org/',
-    hlsUri: 'https://hls.staging.saooti.org/',
+    MiniplayerUri: 'https://playerbeta.dev2.saooti.org/',
+    hlsUri: 'https://hls.dev2.saooti.org/',
     mainRubrique: 0,
     resourceUrl: undefined,
     podcastItemShowEmission: false,
@@ -79,13 +79,13 @@ const state:ParamStore = {
     userName: '',
   },
   octopusApi: {
-    url: 'https://api.staging.saooti.org/',
-    commentsUrl: 'https://comments.staging.saooti.org/',
-    imageUrl:'https://imageproxy.staging.saooti.org/',
-    studioUrl: 'https://studio.staging.saooti.org/',
-    playerUrl: 'https://playerbeta.staging.saooti.org/',
-    speechToTextUrl:'https://speech2text.staging.saooti.org/',
-    recoUrl: 'https://reco.staging.saooti.org/',
+    url: 'https://api.dev2.saooti.org/',
+    commentsUrl: 'https://comments.dev2.saooti.org/',
+    imageUrl:'https://imageproxy.dev2.saooti.org/',
+    studioUrl: 'https://studio.dev2.saooti.org/',
+    playerUrl: 'https://playerbeta.dev2.saooti.org/',
+    speechToTextUrl:'https://speech2text.dev2.saooti.org/',
+    recoUrl: 'https://reco.dev2.saooti.org/',
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },

package/src/stores/PlayerStore.ts

@@ -128,9 +128,10 @@ export const usePlayerStore = defineStore('PlayerStore', {
 			this.playerSeekTime = seekTime;
 		},
 
-		playerMetadata(metadata: MediaRadio){
+		playerMetadata(metadata: MediaRadio, history: Array<MediaRadio>){
 			if(!this.playerRadio){return;}
 			this.playerRadio.metadata = metadata;
+			this.playerRadio.history = history;
 		},
 		playerRadioPodcast(podcast: Podcast|undefined){
 			if(!this.playerRadio){return;}

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

@@ -5,18 +5,16 @@ export interface Radio{
   canalId: number;
   url: string;
   metadata: MediaRadio;
+  history: Array<MediaRadio>;
   isInit: boolean;
   podcast?: Podcast;
 }
 export interface MediaRadio{
   artist:string;
-  /* kind:string; */
   mediaId?:number;
-  /* mediaType:string|null; */
   podcastId:number;
   startDate:string;
   title:string;
-  /* uri:string; */
   mediaDuration: number,
   playDuration: number,
 }