@saooti/octopus-sdk 34.0.4 → 34.0.6

package/package.json

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

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

@@ -295,6 +295,7 @@ export default defineComponent({
     color: white;
     text-transform: uppercase;
     position: absolute;
+    top:0;
   }
 
   .background-icon{

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

@@ -65,9 +65,9 @@
       />
     </div>
     <button
-      v-if="!radio"
-      :title="$t('Enlarge')"
-      class="btn play-button-box btn-transparent text-light saooti-up"
+      :title="''!=transcriptText ? $t('View transcript'): $t('Enlarge')"
+      class="btn play-button-box btn-transparent text-light"
+      :class="''!=transcriptText ? 'saooti-text-to-speech':'saooti-up'"
       @click="changePlayerLargeVersion"
     />
     <button

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

@@ -3,7 +3,7 @@ import DurationHelper from '../../../helper/duration';
 import { state } from '../../../store/paramStore';
 import { defineComponent } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
-import { MediaRadio, Radio } from '@/store/class/general/player';
+import { MediaRadio, MetadataRadio, Radio } from '@/store/class/general/player';
 import octopusApi from '@saooti/octopus-api';
 export const playerDisplay = defineComponent({
 	props: {
@@ -59,7 +59,7 @@ export const playerDisplay = defineComponent({
     },
 		podcastTitle(): string {
       if(this.$store.state.player.radio){
-        return this.$store.state.player.radio.metadata.title + " - " + this.$store.state.player.radio.metadata.artist;
+        return this.$store.state.player.radio.metadata.title + " " + this.$store.state.player.radio.metadata.artist;
       }
       if (this.$store.state.player.podcast) {
         if (this.isEmissionName)
@@ -109,8 +109,8 @@ export const playerDisplay = defineComponent({
   },
   methods: {
     async fetchRadioMetadata(): Promise<void>{
-      const metadata = await octopusApi.fetchData<MediaRadio>(14, 'player/playing/'+this.$store.state.player.radio.canalId);
-      this.$store.commit('player/radioMetadata', metadata);
+      const metadata = await octopusApi.fetchData<MetadataRadio>(14, 'player/playing/'+this.$store.state.player.radio.canalId);
+      this.$store.commit('player/radioMetadata', metadata.currently);
     },
     addKeyboardControl(event: KeyboardEvent): void{
       if(!event || null ===event){return;}

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

@@ -14,7 +14,8 @@ export const playerLive = defineComponent({
       lastSend: 0 as number,
       hlsReady: false as boolean,
       downloadId: null as string|null,
-      audioElement: null as HTMLAudioElement|null
+      audioElement: null as HTMLAudioElement|null,
+      hls: null as any,
     };
   },
   computed: {
@@ -84,18 +85,18 @@ export const playerLive = defineComponent({
         if (!Hls.isSupported()) {
           reject('Hls is not supported ! ');
         }
-        const hls = new Hls();
-        hls.on(Hls.Events.MANIFEST_PARSED, async () => {
+        this.hls = new Hls();
+        this.hls.on(Hls.Events.MANIFEST_PARSED, async () => {
           await this.initLiveDownloadId();
-          hls.attachMedia((this.audioElement as HTMLAudioElement));
+          this.hls.attachMedia((this.audioElement as HTMLAudioElement));
           await (this.audioElement as HTMLAudioElement).play();
           this.onPlay();
           resolve();
         });
-        hls.on(Hls.Events.ERROR, async() => {
+        this.hls.on(Hls.Events.ERROR, async() => {
           reject('There is an error while reading media content');
         });
-        hls.loadSource(hlsStreamUrl);
+        this.hls.loadSource(hlsStreamUrl);
       });
     },
     setDownloadId(newValue: string|null): void {
@@ -114,5 +115,13 @@ export const playerLive = defineComponent({
       this.lastSend = 0;
       this.listenTime = 0;
     },
+    endingLive():void{
+      const audio: HTMLElement|null = document.getElementById('audio-player');
+      if(audio && this.hls){
+        this.hls.destroy();
+        (audio as HTMLAudioElement).src = '';
+        this.hls = null;
+      }
+    }
   },
 })

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

@@ -113,7 +113,11 @@ export const playerLogic = defineComponent({
       }else if('PAUSED' === this.status){
         audioPlayer.pause();
       }else if ('PLAYING' === this.status && this.radio){
-        this.playRadio();
+        if(this.radio.isInit){
+          this.playRadio();
+        }else{
+          this.radio.isInit = true;
+        }
       }else if('PLAYING' === this.status){
         audioPlayer.play();
       }
@@ -163,6 +167,9 @@ export const playerLogic = defineComponent({
       this.setDownloadId(null);
       this.listenError = false;
       this.initComments();
+      if (this.live || this.radio) {
+        this.endingLive();
+      }
     },
     stopPlayer(): void {
       this.$store.commit('player/playPodcast');
@@ -260,11 +267,5 @@ export const playerLogic = defineComponent({
       }
       this.forceHide = true;
     },
-    endingLive():void{
-      const audio: HTMLElement|null = document.getElementById('audio-player');
-      if(audio){
-        (audio as HTMLAudioElement).src = '';
-      }
-    }
   },
 })

package/src/components/pages/Home.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="page-box">
-    <button @click="playRadio">Radio</button>
     <template v-if="0 === rubriquageFilter.length">
       <PodcastInlineList
         v-for="c in categories"
@@ -89,14 +88,6 @@ export default defineComponent({
       }
       this.rubriqueId = rubriqueId;
     },
-    playRadio(){
-      this.$store.commit('player/playPodcast', {
-        canalId: 3,
-        url: "https://c6884219-e191-45ec-a931-6f34683c6ac7.stream.dev2.saooti.org/live.m3u8",
-        metadata : ""
-      });
-
-    }
   }
 })
 </script>

package/src/locale/de.ts

@@ -309,4 +309,5 @@ export default{
   "If the transcript is available, show it":"Wenn die Abschrift vorhanden ist, zeigen Sie sie",
   "Photo credits":"Bildnachweis",
   "Audio credits":"Audio-Credits",
+  "View transcript":"Transkript ansehen",
 }

package/src/locale/en.ts

@@ -316,4 +316,5 @@ export default{
   "If the transcript is available, show it":"If the transcript is available, show it",
   "Photo credits":"Photo credits",
   "Audio credits":"Audio credits",
+  "View transcript":"View transcript",
 };

package/src/locale/es.ts

@@ -309,4 +309,5 @@ export default{
   "If the transcript is available, show it":"Si la transcripción está disponible, muéstrela",
   "Photo credits":"Créditos fotográficos",
   "Audio credits":"Créditos de audio",
+  "View transcript":"Ver transcripción",
 }

package/src/locale/fr.ts

@@ -316,4 +316,5 @@ export default{
   "If the transcript is available, show it":"Si la transcription est disponible, l'afficher",
   "Photo credits":"Crédits photo",
   "Audio credits":"Crédits audio",
+  "View transcript":"Afficher la transcription",
 };

package/src/locale/it.ts

@@ -306,4 +306,5 @@ export default{
     "If the transcript is available, show it":"Se la trascrizione è disponibile, mostrala",
     "Photo credits":"Crediti fotografici",
     "Audio credits":"Crediti audio",
+    "View transcript":"Visualizza trascrizione",
   };

package/src/locale/sl.ts

@@ -309,4 +309,5 @@ export default{
   "If the transcript is available, show it":"Če je prepis na voljo, ga pokažite",
   "Photo credits":"Avtorji fotografij",
   "Audio credits":"Avdio krediti",
+  "View transcript":"Ogled prepisa",
 }

package/src/store/ApiStore.ts

@@ -0,0 +1,33 @@
+import { ApiState, getDefaultApiState } from './classStore/typeApiStore';
+import { Module, MutationTree } from 'vuex';
+import { StoreState } from './classStore/typeAppStore';
+const mutations = <MutationTree<ApiState>>{
+  init(state, apiUrls: ApiState) {
+    state.apiUrl= apiUrls.apiUrl;
+    state.commentUrl= apiUrls.commentUrl;
+    state.frontendUrl= apiUrls.frontendUrl;
+    state.ftpUrl= apiUrls.ftpUrl;
+    state.hlsUrl= apiUrls.hlsUrl;
+    state.imageUrl= apiUrls.imageUrl;
+    state.keycloakUrl= apiUrls.keycloakUrl;
+    state.mediaUrl= apiUrls.mediaUrl;
+    state.miniplayerUrl= apiUrls.miniplayerUrl;
+    state.processorUrl= apiUrls.processorUrl;
+    state.recoUrl= apiUrls.recoUrl;
+    state.radioUrl= apiUrls.radioUrl;
+    state.rssUrl= apiUrls.rssUrl;
+    state.rtmpUrl= apiUrls.rtmpUrl;
+    state.speechToTextUrl= apiUrls.speechToTextUrl;
+    state.studioUrl= apiUrls.studioUrl;
+    state.videoMakerUrl= apiUrls.videoMakerUrl;
+    state.storageUrl= apiUrls.storageUrl;
+  },
+};
+
+const ApiModule: Module<ApiState, StoreState> = {
+  namespaced: true,
+  state: getDefaultApiState(),
+  mutations: mutations,
+};
+
+export default ApiModule;

package/src/store/AppStore.ts

@@ -1,72 +1,76 @@
-import { createStore } from 'vuex'
-import { AppStoreData } from './classStore/typeAppStore';
+import { createStore, MutationTree } from 'vuex';
+import ApiStore from '@/store/ApiStore';
 import PlayerStore from '@/store/PlayerStore';
+import { AppStoreData, StoreState } from './classStore/typeAppStore';
+
+const mutations = <MutationTree<StoreState>>{
+  categoriesSet(state, categories) {
+    state.categories = categories;
+  },
+  categoriesOrgaSet(state, categories) {
+    state.categoriesOrga = categories;
+  },
+  filterOrga(state, filter) {
+    state.filter.organisationId = filter.orgaId;
+    if (filter.imgUrl || !filter.orgaId) {
+      state.filter.imgUrl = filter.imgUrl;
+    }
+    if (filter.name || !filter.orgaId) {
+      state.filter.name = filter.name;
+    }
+    if(filter.rubriquageArray){
+      state.filter.rubriquageArray = filter.rubriquageArray;
+    }
+    state.filter.live = filter.isLive;
+    state.filter.iab = undefined;
+  },
+  filterIab(state, iab) {
+    state.filter.iab = iab;
+  },
+  filterRubrique(state, rubriqueFilter) {
+    state.filter.rubriqueFilter = rubriqueFilter;
+  },
+  filterRubriqueDisplay(state, rubriques) {
+    state.filter.rubriqueDisplay = rubriques;
+  },
+  filterMedia(state, filter) {
+    if (filter.type) {
+      state.filter.typeMedia = filter.type;
+    }
+    if (filter.order) {
+      state.filter.sortOrder = filter.order;
+    }
+    if (filter.field) {
+      state.filter.sortField = filter.field;
+    }
+  },
+  initFilter(state, data) {
+    state.filter = {
+      ...state.filter,
+      ...data,
+    };
+  },
+  liveUpdate(state, isBeforeLive) {
+    state.liveUpdate.isBeforeLive = isBeforeLive;
+  },
+  setCommentIdentity(state, identity) {
+    state.comments.knownIdentity = identity;
+  },
+  setCommentLoaded(state, data) {
+    state.comments.actualPodcastId = data.podcastId;
+    state.comments.loadedComments = data.comments;
+  },
+  isEducation(state, isEducation) {
+    state.general.education = isEducation;
+    state.general.logoUrl = '/img/logo_education.webp';
+    state.general.metaTitle = 'RadioEducation.org';
+  },
+};
 export default createStore({
   state: AppStoreData(),
   modules: {
+    api : ApiStore,
     player: PlayerStore
   },
-  mutations: {
-    categoriesSet(state, categories) {
-      state.categories = categories;
-    },
-    categoriesOrgaSet(state, categories) {
-      state.categoriesOrga = categories;
-    },
-    filterOrga(state, filter) {
-      state.filter.organisationId = filter.orgaId;
-      if (filter.imgUrl || !filter.orgaId) {
-        state.filter.imgUrl = filter.imgUrl;
-      }
-      if (filter.name || !filter.orgaId) {
-        state.filter.name = filter.name;
-      }
-      if(filter.rubriquageArray){
-        state.filter.rubriquageArray = filter.rubriquageArray;
-      }
-      state.filter.live = filter.isLive;
-      state.filter.iab = undefined;
-    },
-    filterIab(state, iab) {
-      state.filter.iab = iab;
-    },
-    filterRubrique(state, rubriqueFilter) {
-      state.filter.rubriqueFilter = rubriqueFilter;
-    },
-    filterRubriqueDisplay(state, rubriques) {
-      state.filter.rubriqueDisplay = rubriques;
-    },
-    filterMedia(state, filter) {
-      if (filter.type) {
-        state.filter.typeMedia = filter.type;
-      }
-      if (filter.order) {
-        state.filter.sortOrder = filter.order;
-      }
-      if (filter.field) {
-        state.filter.sortField = filter.field;
-      }
-    },
-    initFilter(state, data) {
-      state.filter = {
-        ...state.filter,
-        ...data,
-      };
-    },
-    liveUpdate(state, isBeforeLive) {
-      state.liveUpdate.isBeforeLive = isBeforeLive;
-    },
-    setCommentIdentity(state, identity) {
-      state.comments.knownIdentity = identity;
-    },
-    setCommentLoaded(state, data) {
-      state.comments.actualPodcastId = data.podcastId;
-      state.comments.loadedComments = data.comments;
-    },
-    isEducation(state, isEducation) {
-      state.general.education = isEducation;
-      state.general.logoUrl = '/img/logo_education.webp';
-      state.general.metaTitle = 'RadioEducation.org';
-    },
-  },
+  mutations: mutations,
 });

package/src/store/PlayerStore.ts

@@ -40,7 +40,7 @@ const mutations = <MutationTree<Player>>{
     } else if (podcast.mediaId) {
       state.media = podcast;
     }else if(podcast.canalId){
-      state.radio = podcast;
+      state.radio = {...podcast,...{isInit: false}};
     }
   },
 

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

@@ -5,6 +5,7 @@ export interface Radio{
   canalId: number;
   url: string;
   metadata: MediaRadio;
+  isInit: boolean,
 }
 export interface MediaRadio{
   artist:string;
@@ -18,6 +19,13 @@ export interface MediaRadio{
   uri:string;
 }
 
+export interface MetadataRadio{
+  channelId:number;
+  currently:MediaRadio;
+  previously:Array<MediaRadio>;
+}
+
+
 
 export interface Player{
     status: string; //STOPPED, LOADING, PLAYING, PAUSED

package/src/store/classStore/typeApiStore.ts

@@ -0,0 +1,43 @@
+
+export interface ApiState {
+    apiUrl: undefined,
+    commentUrl: undefined,
+    frontendUrl: undefined,
+    ftpUrl: undefined,
+    hlsUrl: undefined,
+    imageUrl: undefined,
+    keycloakUrl: undefined,
+    mediaUrl: undefined,
+    miniplayerUrl:undefined,
+    processorUrl: undefined,
+    radioUrl: undefined,
+    recoUrl:undefined,
+    rssUrl: undefined,
+    rtmpUrl: undefined,
+    speechToTextUrl: undefined,
+    studioUrl: undefined,
+    videoMakerUrl: undefined,
+    storageUrl: undefined,
+}
+export function getDefaultApiState(): ApiState {
+  return {
+    apiUrl: undefined,
+    commentUrl:undefined,
+    frontendUrl: undefined,
+    ftpUrl: undefined,
+    hlsUrl: undefined,
+    imageUrl: undefined,
+    keycloakUrl: undefined,
+    mediaUrl: undefined,
+    miniplayerUrl:undefined,
+    processorUrl: undefined,
+    radioUrl: undefined,
+    recoUrl:undefined,
+    rssUrl: undefined,
+    rtmpUrl: undefined,
+    speechToTextUrl: undefined,
+    studioUrl: undefined,
+    videoMakerUrl: undefined,
+    storageUrl: undefined,
+  };
+}

package/src/store/classStore/typeAppStore.ts

@@ -1,11 +1,12 @@
 import { Category } from '../class/general/category';
 import { CommentPodcast } from '../class/general/comment';
-import { Player } from '../class/general/player';
 import { Rubriquage } from '../class/rubrique/rubriquage';
 import { RubriquageFilter } from '../class/rubrique/rubriquageFilter';
 import { Rubrique } from '../class/rubrique/rubrique';
+import { ApiState } from './typeApiStore';
 import { AuthState } from './typeAuthStore';
 import { getDefaultPlayerState } from './typePlayerStore';
+import { Player } from '../class/general/player';
 
 export interface Filter{
   organisationId: string | undefined;
@@ -41,6 +42,7 @@ export interface StoreState {
   };
   player: Player;
   auth?: AuthState;
+  api?: ApiState;
 }
 
 export function AppStoreData(): StoreState {

package/src/store/paramStore.ts

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