@saooti/octopus-sdk 34.0.1 → 34.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "34.0.1",
+  "version": "34.0.3",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -16,41 +16,41 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "@saooti/octopus-api": "^0.33.0",
+    "@saooti/octopus-api": "^0.34.0",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.2.45",
     "autoprefixer": "^10.4.13",
-    "axios": "^0.24.0",
+    "axios": "^1.2.1",
     "express": "^4.18.2",
     "hls.js": "^1.2.9",
     "humanize-duration": "^3.27.2",
     "jest": "^29.3.1",
-    "jquery": "^3.6.1",
+    "jquery": "^3.6.2",
     "moment": "^2.29.4",
     "qrcode.vue": "^3.3.3",
     "sass": "^1.56.2",
     "sonarqube-scanner": "^2.9.1",
     "swiper": "^8.4.5",
     "v-calendar": "^3.0.0-alpha.8",
-    "vite": "^3.2.5",
+    "vite": "^4.0.1",
     "vue": "^3.2.45",
     "vue-i18n": "^9.2.2",
     "vue-multiselect": "^3.0.0-alpha.2",
     "vue-recaptcha": "^2.0.3",
     "vue-router": "^4.1.6",
-    "vue3-lazyload": "^0.2.5-beta",
-    "vue3-swatches": "^1.0.10",
+    "vue3-lazyload": "^0.3.6",
+    "vue3-swatches": "1.0.10",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.14",
-    "@typescript-eslint/eslint-plugin": "^5.46.0",
-    "@typescript-eslint/parser": "^5.46.0",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/compiler-sfc": "^3.2.45",
-    "@vue/eslint-config-typescript": "^8.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "eslint": "^8.29.0",
-    "eslint-plugin-vue": "^7.17.0",
+    "eslint-plugin-vue": "^9.8.0",
     "typescript": "^4.9.4"
   },
   "eslintConfig": {

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

@@ -7,7 +7,7 @@
     <template v-if="display">
       <audio
         id="audio-player"
-        :src="!live? audioUrlToPlay: undefined"
+        :src="!live && !radio? audioUrlToPlay: undefined"
         autoplay
         @timeupdate="onTimeUpdate"
         @ended="onFinished"

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

@@ -31,7 +31,10 @@
       />
     </button>
     <div class="text-light player-grow-content">
-      <div class="d-flex mb-1">
+      <div 
+        class="d-flex"
+        :class="!radio?'mb-1':''"
+      >
         <div
           v-if="playerError"
           class="text-warning mx-2"
@@ -42,13 +45,14 @@
           {{ podcastTitle }}
         </div>
         <div
-          v-if="!playerError"
+          v-if="!playerError && !radio"
           class="hide-phone"
         >
           {{ playedTime }} / {{ totalTime }}
         </div>
       </div>
       <PlayerProgressBar
+        v-if="!radio"
         :hls-ready="hlsReady"
         :show-timeline="showTimeline"
         :comments="comments"
@@ -61,6 +65,7 @@
       />
     </div>
     <button
+      v-if="!radio"
       :title="$t('Enlarge')"
       class="btn play-button-box btn-transparent text-light saooti-up"
       @click="changePlayerLargeVersion"
@@ -71,6 +76,7 @@
       @click="stopPlayer"
     />
     <PlayerTimeline
+      v-if="!radio"
       v-model:showTimeline="showTimeline"
       :comments="comments"
     />

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

@@ -3,9 +3,16 @@ import DurationHelper from '../../../helper/duration';
 import { state } from '../../../store/paramStore';
 import { defineComponent } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
+import { Radio } from '@/store/class/general/player';
+import octopusApi from '@saooti/octopus-api';
 export const playerDisplay = defineComponent({
 	props: {
     hlsReady: { default: false , type: Boolean},
+  },
+  data() {
+    return {
+      radioInterval: undefined as  ReturnType<typeof setTimeout>|undefined,
+    };
   },
 	computed:{
 		playedTime(): string{
@@ -51,6 +58,9 @@ export const playerDisplay = defineComponent({
       return (state.player.emissionName as boolean);
     },
 		podcastTitle(): string {
+      if(this.$store.state.player.radio){
+        return this.$store.state.player.radio.metadata;
+      }
       if (this.$store.state.player.podcast) {
         if (this.isEmissionName)
           return this.emissionName + ' - ' + this.$store.state.player.podcast.title;
@@ -70,16 +80,38 @@ export const playerDisplay = defineComponent({
     },
     transcriptText():string{
       return this.$store.state.player.transcript?.actualText ?? "";
+    },
+    radio(): Radio{
+      return this.$store.state.player.radio;
     }
 	},
+  watch:{
+    radio: {
+      deep: true,
+      immediate:true,
+      handler(){
+        clearInterval((this.radioInterval as unknown as number));
+        if(this.radio){
+          this.fetchRadioMetadata();
+          this.radioInterval = setInterval(() => {
+            this.fetchRadioMetadata();
+          }, 2000);
+        }
+      }
+    },
+  },
 	created(){
     window.addEventListener('keydown', this.addKeyboardControl);
   },
   beforeUnmount() {
     window.removeEventListener('keydown', this.addKeyboardControl);
+    clearInterval((this.radioInterval as unknown as number));
   },
-
   methods: {
+    async fetchRadioMetadata(): Promise<void>{
+      const metadata = await octopusApi.fetchData<string>(14, 'player/playing/'+this.$store.state.player.radio.canalId);
+      this.$store.commit('player/radioMetadata', metadata);
+    },
     addKeyboardControl(event: KeyboardEvent): void{
       if(!event || null ===event){return;}
       const element = event.target as HTMLElement; 

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

@@ -26,18 +26,21 @@ export const playerLive = defineComponent({
     onPlay(): void {
       this.$store.commit('player/pause', false);
     },
-    async playLive(): Promise<void> {
+    playRadio(){
+      if (!this.radio) return;
+      this.playHls(this.radio.url);
+    },
+    playLive() {
       if (!this.live) return;
-      const hlsStreamUrl =
-        state.podcastPage.hlsUri +
-        'stream/dev.' +
-        this.live.conferenceId +
-        '/index.m3u8';
+      const hlsStreamUrl = `${state.podcastPage.hlsUri}stream/dev.${this.live.conferenceId}/index.m3u8`;
+      this.playHls(hlsStreamUrl);
+    },
+    async playHls(hlsStreamUrl: string): Promise<void>{
       try {
         this.audioElement = (document.getElementById('audio-player') as HTMLAudioElement);
         if(null===this.audioElement){
           setTimeout(() => {
-            this.playLive();
+            this.playHls(hlsStreamUrl);
           }, 1000);
           return;
         }
@@ -51,7 +54,7 @@ export const playerLive = defineComponent({
         }
       } catch (error) {
         setTimeout(() => {
-          this.playLive();
+          this.playHls(hlsStreamUrl);
         }, 1000);
       }
     },

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

@@ -4,11 +4,11 @@ import { CommentPodcast } from '@/store/class/general/comment';
 import cookies from '../cookies';
 import { playerLive } from './playerLive';
 import { playerComment } from './playerComment';
+import { playerTranscript } from './playerTranscript';
 import { defineComponent } from 'vue';
 import { Player } from '@/store/class/general/player';
-import { StoreState } from '@/store/classStore/typeAppStore';
 export const playerLogic = defineComponent({
-  mixins:[cookies,playerLive,playerComment],
+  mixins:[cookies,playerLive,playerComment, playerTranscript],
   data() {
     return {
       forceHide: false as boolean,
@@ -32,16 +32,15 @@ export const playerLogic = defineComponent({
       podcast (state: Player){ return state.podcast},
       media: (state: Player) => state.media,
       live: (state: Player) => state.live,
+      radio: (state: Player) => state.radio,
       volume: (state: Player) => state.volume,
+      status : (state: Player) => state.status,
       percentProgress: (state: Player) => {
         if(!state.elapsed){return 0;}
         return state.elapsed * 100;
       },
       playerSeekTime: (state: Player) => state.seekTime,
     }),
-    commentsLoaded(){
-      return this.$store.state.comments.loadedComments;
-    },
     audioUrl(): string {
       return this.getAudioUrl();
     },
@@ -71,12 +70,19 @@ export const playerLogic = defineComponent({
         this.$nextTick(async () => {
           this.hlsReady = false;
           this.reInitPlayer();
-          await this.playLive();
+          this.playLive();
         });
       }
     },
+    radio(){
+      this.$nextTick(async () => {
+        this.hlsReady = false;
+        this.reInitPlayer();
+        this.playRadio();
+      });
+    },
     async listenTime(newVal): Promise<void> {
-      if ((!this.podcast && !this.live)||(!this.downloadId)||(newVal - this.lastSend < 10)) {
+      if (this.radio && (!this.podcast && !this.live)||(!this.downloadId)||(newVal - this.lastSend < 10)) {
         return;
       }
       this.lastSend = newVal;
@@ -91,48 +97,34 @@ export const playerLogic = defineComponent({
       if (!audioPlayer) return;
       audioPlayer.currentTime = this.playerSeekTime;
     },
+    status() {
+      const audioPlayer: HTMLAudioElement | null = document.querySelector('#audio-player');
+      if (!audioPlayer) return;
+      if (this.live && !this.hlsReady) {
+        audioPlayer.pause();
+        this.percentLiveProgress = 0;
+        this.durationLivePosition = 0;
+        return;
+      }
+      if ('PAUSED' === this.status && this.radio) {
+        this.hlsReady = false;
+        this.reInitPlayer();
+        this.endingLive();
+      }else if('PAUSED' === this.status){
+        audioPlayer.pause();
+      }else if ('PLAYING' === this.status && this.radio){
+        this.playRadio();
+      }else if('PLAYING' === this.status){
+        audioPlayer.play();
+      }
+    },
   },
 
   mounted() {
     window.addEventListener('beforeunload', this.endListeningProgress);
-    this.watchPlayerStatus();
   },
   
   methods: {
-    async getTranscription(): Promise<void>{
-      if(!this.podcast){
-        this.$store.commit('player/transcript',undefined);
-        return;
-      }
-      const result = await octopusApi.fetchDataPublic<string>(11 , `response/${this.podcast.podcastId}`);
-      const arrayTranscript = this.parseSrt(result);
-      const actualText = arrayTranscript?.[0]?.startTime === 0 ? arrayTranscript[0].text : "";
-      this.$store.commit('player/transcript',{actual: 0,actualText:actualText, value : arrayTranscript});
-    },
-    parseSrt(transcript: string){
-      const pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?(?=\n{2}|$))/gm;
-      const result = [];
-      if (typeof(transcript) != 'string'){
-        return;
-      }
-      if (transcript == null){
-        return;
-      }
-      transcript = transcript.replace(/\r\n|\r|\n|\t/g, '\n');
-      let matches;
-      while ((matches = pattern.exec(transcript)) != null) {
-        result.push({
-          startTime: this.srtTimeToSeconds(matches[2]),
-          endTime: this.srtTimeToSeconds(matches[3]),
-          text: matches[4]
-        });
-      }
-      return result;
-    },
-    srtTimeToSeconds(time:string): number{
-      const a = time.split(':'); 
-      return (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+parseFloat(a[2])); 
-    },
     getDomain(): string{
       let domain = "";
       const domainArray: RegExpExecArray | null = /\.(.+)/.exec(window.location.host);
@@ -183,26 +175,6 @@ export const playerLogic = defineComponent({
       }
       return listenerId;
     },
-    watchPlayerStatus(): void {
-      this.$store.watch(
-        (state: StoreState) => state.player.status,
-        (newValue: string) => {
-          const audioPlayer: HTMLAudioElement | null = document.querySelector('#audio-player');
-          if (!audioPlayer) return;
-          if (this.live && !this.hlsReady) {
-            audioPlayer.pause();
-            this.percentLiveProgress = 0;
-            this.durationLivePosition = 0;
-            return;
-          }
-          if ('PAUSED' === newValue) {
-            audioPlayer.pause();
-          }else if ('PLAYING' === newValue){
-            audioPlayer.play();
-          }
-        }
-      );
-    },
     onError(): void {
       if (this.podcast && ""!==this.audioUrlToPlay &&  !this.listenError) {
         this.listenError = true;
@@ -222,12 +194,7 @@ export const playerLogic = defineComponent({
       }
       return streamDuration;
     },
-    onTimeUpdateTranscript(currentTime:number){
-      if((this.$store.state.player.transcript?.value[this.$store.state.player.transcript?.actual]?.endTime ?? Infinity) < currentTime){
-        this.$store.state.player.transcript.actual +=1;
-        this.$store.state.player.transcript.actualText = this.$store.state.player.transcript?.value[this.$store.state.player.transcript?.actual].text ?? "";
-      }
-    },
+    
     onTimeUpdatePodcast(streamDuration:number, currentTime:number){
       this.displayAlertBar = false;
       this.percentLiveProgress = 100;
@@ -284,23 +251,20 @@ export const playerLogic = defineComponent({
     onSeeked(event: Event):void {
       const mediaTarget = (event.currentTarget as HTMLMediaElement);
       const currentTime = mediaTarget.currentTime;
-      if(this.$store.state.player.transcript){
-        let newActual = 0;
-        while (currentTime > (this.$store.state.player.transcript.value[newActual]?.endTime ?? Infinity)){
-          newActual +=1;
-        }
-        this.$store.state.player.transcript.actual = newActual;
-      }
+      this.onSeekedTranscript(currentTime);
     },
     onFinished(): void {
       this.setDownloadId(null);
       if (this.live) {
-        const audio: HTMLElement|null = document.getElementById('audio-player');
-        if(audio){
-          (audio as HTMLAudioElement).src = '';
-        }
+        this.endingLive();
       }
       this.forceHide = true;
     },
+    endingLive():void{
+      const audio: HTMLElement|null = document.getElementById('audio-player');
+      if(audio){
+        (audio as HTMLAudioElement).src = '';
+      }
+    }
   },
 })

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

@@ -0,0 +1,55 @@
+import octopusApi from '@saooti/octopus-api';
+import { defineComponent } from 'vue';
+export const playerTranscript = defineComponent({
+  methods: {
+    async getTranscription(): Promise<void>{
+      if(!this.podcast){
+        this.$store.commit('player/transcript',undefined);
+        return;
+      }
+      const result = await octopusApi.fetchDataPublic<string>(11 , `response/${this.podcast.podcastId}`);
+      const arrayTranscript = this.parseSrt(result);
+      const actualText = arrayTranscript?.[0]?.startTime === 0 ? arrayTranscript[0].text : "";
+      this.$store.commit('player/transcript',{actual: 0,actualText:actualText, value : arrayTranscript});
+    },
+    parseSrt(transcript: string){
+      const pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?(?=\n{2}|$))/gm;
+      const result = [];
+      if (typeof(transcript) != 'string'){
+        return;
+      }
+      if (transcript == null){
+        return;
+      }
+      transcript = transcript.replace(/\r\n|\r|\n|\t/g, '\n');
+      let matches;
+      while ((matches = pattern.exec(transcript)) != null) {
+        result.push({
+          startTime: this.srtTimeToSeconds(matches[2]),
+          endTime: this.srtTimeToSeconds(matches[3]),
+          text: matches[4]
+        });
+      }
+      return result;
+    },
+    srtTimeToSeconds(time:string): number{
+      const a = time.split(':'); 
+      return (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+parseFloat(a[2])); 
+    },
+    onTimeUpdateTranscript(currentTime:number){
+      if((this.$store.state.player.transcript?.value[this.$store.state.player.transcript?.actual]?.endTime ?? Infinity) < currentTime){
+        this.$store.state.player.transcript.actual +=1;
+        this.$store.state.player.transcript.actualText = this.$store.state.player.transcript?.value[this.$store.state.player.transcript?.actual].text ?? "";
+      }
+    },
+    onSeekedTranscript(currentTime: number){
+      if(this.$store.state.player.transcript){
+        let newActual = 0;
+        while (currentTime > (this.$store.state.player.transcript.value[newActual]?.endTime ?? Infinity)){
+          newActual +=1;
+        }
+        this.$store.state.player.transcript.actual = newActual;
+      }
+    }
+  },
+})

package/src/store/PlayerStore.ts

@@ -10,6 +10,7 @@ const mutations = <MutationTree<Player>>{
       state.podcast = undefined;
       state.media = undefined;
       state.live = undefined;
+      state.radio = undefined;
       state.elapsed = 0;
       return;
     }
@@ -27,6 +28,7 @@ const mutations = <MutationTree<Player>>{
     state.podcast = undefined;
     state.media = undefined;
     state.live = undefined;
+    state.radio = undefined;
     state.elapsed = 0;
     if (
       podcast.conferenceId &&
@@ -37,9 +39,16 @@ const mutations = <MutationTree<Player>>{
       state.podcast = podcast;
     } else if (podcast.mediaId) {
       state.media = podcast;
+    }else if(podcast.canalId){
+      state.radio = podcast;
     }
   },
 
+  radioMetadata(state, metadata){
+    if(!state.radio){return;}
+    state.radio.metadata = metadata;
+  },
+
   pause(state, pause) {
     if (pause) {
       state.status = 'PAUSED';
@@ -63,6 +72,7 @@ const mutations = <MutationTree<Player>>{
   seekTime(state, seekTime) {
     state.seekTime = seekTime;
   },
+
   transcript(state, transcript) {
     state.transcript = transcript;
   },

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

@@ -1,6 +1,13 @@
 import { Media } from "./media";
 import { Podcast } from "./podcast";
 
+export interface Radio{
+  canalId: number;
+  url: string;
+  metadata: string;
+}
+
+
 export interface Player{
     status: string; //STOPPED, LOADING, PLAYING, PAUSED
     podcast: Podcast|undefined;
@@ -9,6 +16,7 @@ export interface Player{
     total?: number;
     media: Media|undefined;
     live: Podcast|undefined;
+    radio: Radio|undefined; 
     stop?: boolean;
     seekTime?: number;
     transcript?:{actual: number, actualText:string, value : Array<{endTime: number, startTime:number, text: string}>};

package/src/store/classStore/typePlayerStore.ts

@@ -9,6 +9,7 @@ export function getDefaultPlayerState(): Player {
     total: 0,
     media: undefined,
     live: undefined,
+    radio: undefined,
     seekTime:0,
   };
 }

package/src/store/paramStore.ts

@@ -181,6 +181,7 @@ export interface OctopusApi{
   imageUrl?: string,
   studioUrl?: string,
   playerUrl?: string,
+  radioUrl?:string,
   speechToTextUrl?:string,
   recoUrl?:string,
   organisationId?: string,