@saooti/octopus-sdk 33.0.1 → 33.0.3

package/README.md

@@ -688,3 +688,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 32.0.35 Enlever Dummy param
  * 32.0.36 Select -> font family
  * 32.0.40 Problème majeur !!! 
+
+ * 33.0.3 SpeechToText player octopus

package/package.json

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

package/src/assets/general.scss

@@ -198,7 +198,7 @@ body{
     display: contents;
   }
 
-  .img-box {
+  .img-box{
     height: 13rem;
     width: 13rem;
     background-size: cover;

package/src/assets/share.scss

@@ -32,11 +32,6 @@
 			border: 0;
 		}
 	}
-  .icon-caution {
-      margin-right: 5px;
-      margin-bottom: 2px;
-      height: 25px;
-  }
 
   .vue-swatches__trigger{
     border: solid 1px black;

package/src/components/display/emission/EmissionItem.vue

@@ -18,16 +18,16 @@
         :alt="$t('Emission name image', {name:emission.name})"
       >
       <div class="emission-item-text">
-        <div
-          class="emission-name"
-        >
-          <img
+        <div class="d-flex align-items-center">
+          <span
             v-if="!activeEmission && !isPodcastmaker && editRight"
-            class="icon-caution"
-            src="/img/caution.png"
             :title="$t('Emission have not podcasts')"
-            :alt="$t('Emission have not podcasts')"
-          >{{ emission.name }}
+            class="saooti-warning text-danger me-1"/>
+          <div
+            class="emission-name"
+          >
+            {{ emission.name }}
+          </div>
         </div>
         <div
           ref="descriptionEmissionContainer"

package/src/components/display/participant/ParticipantItem.vue

@@ -18,14 +18,14 @@
         :alt="$t('Animator image')"
         class="img-box-circle"
       >
-      <div class="participant-name">
-        <img
+      <div class="d-flex align-items-center">
+        <span
           v-if="!activeParticipant && !isPodcastmaker && editRight"
-          src="/img/caution.png"
-          class="icon-caution"
           :title="$t('Participant have not podcasts')"
-          :alt="$t('Participant have not podcasts')"
-        >{{ name }}
+          class="saooti-warning text-danger me-1"/>
+        <div class="participant-name">
+          {{ name }}
+        </div>
       </div>
       <div
         ref="descriptionParticipantContainer"

package/src/components/display/playlist/PlaylistItem.vue

@@ -19,14 +19,14 @@
         class="img-box"
       >
       <div class="emission-item-text">
-        <div class="emission-name">
-          <img
+        <div class="d-flex align-items-center">
+          <span
             v-if="!activePlaylist && !isPodcastmaker"
-            class="icon-caution"
-            src="/img/caution.png"
             :title="$t('Playlist have not podcasts')"
-            :alt="$t('Playlist have not podcasts')"
-          >{{ name }}
+            class="saooti-warning text-danger me-1"/>
+          <div class="emission-name">
+            {{ name }}
+          </div>
         </div>
         <div
           ref="descriptionPlaylistContainer"

package/src/components/misc/ErrorMessage.vue

@@ -6,11 +6,9 @@
     <div
       class="d-flex align-items-center bg-error-message p-2 rounded my-1"
     >
-      <img
-        src="/img/caution.png"
-        :alt="$t('Warning')"
-        class="icon-caution"
-      >
+      <span
+        :title="$t('Warning')"
+        class="saooti-warning text-danger me-1"/>
       <div class="alert-text">
         {{ message }}
       </div>

package/src/components/misc/TopBar.vue

@@ -14,7 +14,7 @@
       @click="onDisplayMenu(true)"
     >
       <img
-        :src="!filterOrga || '' === imgUrl ? logoUrl : proxyImageUrl(imgUrl, '160')"
+        :src="!filterOrga || '' === imgUrl ? logoUrl : proxyImageUrl(imgUrl, '', '50')"
         :alt="!filterOrga || '' === imgUrl ? $t('Logo of main page') : $t('Visual', {name: $store.state.filter?.name})"
         :class="isEducation ? 'educationLogo' : ''"
       >

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

@@ -18,6 +18,7 @@
           @playing="onPlay"
           @durationChange="onTimeUpdate"
           @error="onError"
+          @seeked="onSeeked"
         />
         <PlayerCompact
           v-if="!largeVersion"

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

@@ -12,7 +12,7 @@
       :to="podcastShareUrl"
     >
       <img
-        v-lazy="proxyImageUrl(podcastImage,'260')"
+        v-lazy="proxyImageUrl(podcastImage,'200')"
         :alt="$t('Podcast image')"
         class="img-box"
       >
@@ -46,7 +46,10 @@
         <div>{{ totalTime }}</div>
       </div>
     </div>
-    <div class="d-flex align-items-center">
+    <div class="flex-grow-1 d-flex align-items-center w-100" v-if="''!=transcriptText">
+      <div class="flex-grow-1 p-1 text-center mx-3 transcript-bg rounded">{{transcriptText}}</div>
+    </div>
+    <div class="d-flex align-items-center flex-grow-1">
       <button
         class="btn fs-1 bg-transparent text-light saooti-backward"
         @click="seekClick(-15)"
@@ -131,10 +134,8 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app{
   .player-container .img-box{
-    @media (max-width: 960px) {
-      width: 10rem;
-      height: 10rem;
-    }
+    width: 10rem;
+    height: 10rem;
   }
   .player-reduce-button{
     position: absolute;
@@ -163,5 +164,8 @@ export default defineComponent({
     flex-shrink: 0;
     cursor: pointer;
   }
+  .transcript-bg{
+    background: #3e3e3e;
+  }
 }
 </style>

package/src/components/mixins/functions.ts

@@ -9,12 +9,13 @@ export const selenium ={
 };
 export const imageProxy ={
   methods: {
-    proxyImageUrl(url:string, width:string): string{
+    proxyImageUrl(url:string, width:string, height?:string): string{
       if(!url){
         return "";
       }
       if(state.octopusApi.imageUrl && url.includes('http')){
-        return state.octopusApi.imageUrl+"image/"+btoa(url)+"?width="+width+"&useWebp=true";
+        const size = height ? "height="+height:"width="+width;
+        return state.octopusApi.imageUrl+"image/"+btoa(url)+"?"+size+"&useWebp=true";
       }
       return url;
     },

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

@@ -68,6 +68,9 @@ export const playerDisplay = defineComponent({
       if (this.$store.state.player.podcast) return this.$store.state.player.podcast.emission.name;
       return '';
     },
+    transcriptText():string{
+      return this.$store.state.player.transcript?.actualText ?? "";
+    }
 	},
 	created(){
     window.addEventListener('keydown', this.addKeyboardControl);

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

@@ -59,6 +59,7 @@ export const playerLogic = defineComponent({
       deep: true,
       handler(){
         this.reInitPlayer();
+        this.getTranscription();
       }
     },
     live: {
@@ -95,6 +96,40 @@ export const playerLogic = defineComponent({
   },
   
   methods: {
+    async getTranscription(): Promise<void>{
+      if(!this.podcast){
+        this.$store.commit('playerTranscript',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('playerTranscript',{actual: 0,actualText:actualText, value : arrayTranscript});
+    },
+    parseSrt(transcript: string){
+      var pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?(?=\n{2}|$))/gm;
+      var 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{
+      var 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);
@@ -184,11 +219,18 @@ 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;
       this.$store.commit('playerTotalTime', streamDuration);
       this.$store.commit('playerElapsed', currentTime / streamDuration);
+      this.onTimeUpdateTranscript(currentTime);
     },
     onTimeUpdateLive(streamDuration: number, currentTime:number){
       if(!this.live){return;}
@@ -236,6 +278,17 @@ export const playerLogic = defineComponent({
       }
       this.onTimeUpdateLive(streamDuration,mediaTarget.currentTime);
     },
+    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;
+      }
+    },
     onFinished(): void {
       this.setDownloadId(null);
       if (this.live) {

package/src/main.ts

@@ -10,7 +10,7 @@ import paramStore from '@/store/paramStore';
 const nameEQ = 'octopus-language=';
 const ca = document.cookie.split(';');
 let language = "";
-for (let valueCookie in ca) {
+for (let valueCookie of ca) {
   let c = valueCookie;
   while (c.charAt(0) == ' ') c = c.substring(1, c.length);
   if (0 === c.indexOf(nameEQ)){

package/src/sass/_variables.scss

@@ -2,7 +2,7 @@
 $body-bg: #f8fafc;
 
 // Typography
-$font-family-sans-serif: 'Roboto', sans-serif;
+$font-family-sans-serif: sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 $primary: #32815C;

package/src/store/AppStore.ts

@@ -80,6 +80,9 @@ export default createStore({
     playerSeekTime(state, seekTime) {
       state.player.seekTime = seekTime;
     },
+    playerTranscript(state, transcript) {
+      state.player.transcript = transcript;
+    },
 
     filterOrga(state, filter) {
       state.filter.organisationId = filter.orgaId;

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

@@ -11,4 +11,5 @@ export interface Player{
     live: Podcast|undefined;
     stop?: boolean;
     seekTime?: number;
+    transcript?:{actual: number, actualText:string, value : Array<{endTime: number, startTime:number, text: string}>};
   }