@saooti/octopus-sdk 33.0.2 → 33.0.4

package/README.md

@@ -688,3 +688,6 @@ 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
+ * 33.0.4 Image webp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.0.2",
+  "version": "33.0.4",
   "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/components/display/organisation/OrganisationChooser.vue

@@ -119,7 +119,7 @@ import { Organisation } from '@/store/class/general/organisation';
 
 const ELEMENTS_COUNT = 50;
 const DEFAULT_ORGANISATION_ID = "";
-const DEFAULT_ORGANISATION_IMAGE = '/img/emptypodcast.png';
+const DEFAULT_ORGANISATION_IMAGE = '/img/emptypodcast.webp';
 
 const getDefaultOrganistion = (defaultName: string) => {
   if(''===defaultName){

package/src/components/misc/Footer.vue

@@ -66,7 +66,7 @@
         >
           <img
             class="acpm_image"
-            src="/img/ACPM.png"
+            src="/img/ACPM.webp"
             :title="$t('Octopus is ACPM Podcast accredited')"
             :alt="$t('Octopus is ACPM Podcast accredited')"
           >

package/src/components/misc/TopBar.vue

@@ -117,7 +117,7 @@ export default defineComponent({
       return undefined;
     },
     logoUrl(): string {
-      return this.isEducation ?'/img/logo_education.png': '/img/logo_octopus_final.svg';
+      return this.isEducation ?'/img/logo_education.webp': '/img/logo_octopus_final.svg';
     },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);

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/PlayerCompact.vue

@@ -60,12 +60,12 @@
     </div>
     <button
       :title="$t('Enlarge')"
-      class="btn play-button-box primary-bg text-light saooti-up"
+      class="btn play-button-box saooti-up"
       @click="changePlayerLargeVersion"
     />
     <button
       :title="$t('Close')"
-      class="btn play-button-box primary-bg text-light saooti-remove"
+      class="btn play-button-box saooti-remove"
       @click="stopPlayer"
     />
     <PlayerTimeline

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/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/components/pages/Error403Page.vue

@@ -11,7 +11,7 @@
       </div>
       <img
         class="stop-octopus-img"
-        src="/img/403.jpeg"
+        src="/img/403.webp"
         :alt="$t('You do not have the right to access this page')"
       >
     </div>

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}>};
   }

package/src/store/paramStore.ts

@@ -78,15 +78,15 @@ const state:ParamStore = {
     contactLink: undefined,
   },
   organisation: {
-    imageUrl: '/img/emptypodcast.png',
+    imageUrl: '/img/emptypodcast.webp',
     name: 'Saooti',
     userName: '',
   },
   octopusApi: {
-    url: 'http://api.dev2.saooti.org/',
-    commentsUrl: 'http://comments.dev2.saooti.org/',
-    imageUrl:'http://imageproxy.dev2.saooti.org/',
-    studioUrl: 'http://studio.dev2.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/',