@saooti/octopus-sdk 39.0.4 → 39.0.6

package/package.json

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

package/src/App.vue

@@ -1,14 +1,15 @@
 <template>
-  <!-- v-if="isInit" -->
-  <div :key="reload" class="d-flex flex-column h-100 octopus-app">
-    <TopBar :is-education="false" />
-    <CategoryFilter v-if="firstDisplayCategoryFilter" />
-    <div v-else class="category-filter-no-filter" />
-    <router-view />
-    <ClassicLazy v-if="pageFullyLoad" :min-height="125">
-      <FooterOctopus />
-    </ClassicLazy>
-    <PlayerComponent />
+  <div class="d-flex flex-column h-100 octopus-app">
+    <template v-if="pageFullyLoad">
+      <TopBar :is-education="false" />
+      <CategoryFilter v-if="firstDisplayCategoryFilter" />
+      <div v-else class="category-filter-no-filter" />
+      <router-view />
+      <ClassicLazy :min-height="125">
+        <FooterOctopus />
+      </ClassicLazy>
+      <PlayerComponent />
+    </template>
   </div>
 </template>
 
@@ -48,7 +49,6 @@ export default defineComponent({
   data() {
     return {
       reload: false as boolean,
-      isInit: false as boolean,
       pageFullyLoad: false as boolean,
       firstDisplayCategoryFilter: false as boolean,
     };
@@ -98,7 +98,6 @@ export default defineComponent({
       await this.handleOrganisationFilter();
       this.handleIabIdFilter();
       this.handleRubriquesFilter();
-      this.isInit = true;
     },
     async handleOrganisationFilter() {
       let orgaId = "";

package/src/components/display/sharing/SubscribeButtons.vue

@@ -48,6 +48,7 @@
           target="_blank"
           class="octopus-dropdown-item justify-content-start"
           :href="link.url"
+          realLink="true"
         >
           <span :class="link.icon" class="me-1" /> {{ link.title }}
         </a>

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

@@ -17,6 +17,7 @@
       @error="onError"
       @seeked="onSeeked"
       @pause="onPause"
+      @loadedmetadata="checkDelaytWithStitching"
     />
     <div id="ad-container"></div>
     <template v-if="displayWithTimeout">

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

@@ -1,4 +1,5 @@
 import { state } from "../../../stores/ParamSdkStore";
+import dayjs from "dayjs";
 import { playerLogicProgress} from "./playerLogicProgress";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { useAuthStore } from "@/stores/AuthStore";
@@ -6,6 +7,7 @@ import { mapState, mapActions } from "pinia";
 /* eslint-disable */
 let Hls:any = null;
 /* eslint-enable */
+const maxMinutesSessionId = 1;
 import { defineComponent } from "vue";
 export const playerLive = defineComponent({
   mixins: [playerLogicProgress],
@@ -31,7 +33,20 @@ export const playerLive = defineComponent({
     },
     playRadio() {
       if (!this.playerRadio) return;
-      this.playHls(this.playerRadio.url);
+      this.handleSessionIdRadio();
+      this.playHls(this.playerRadio.url+"?origin=octopus&sessionId="+this.playerRadio.sessionId);
+    },
+    handleSessionIdRadio(){
+      if(!this.playerRadio) return;
+      if(this.playerRadio.sessionId && dayjs().diff(dayjs(this.playerRadio.dateSessionId), 'm')<maxMinutesSessionId){
+        return;
+      }
+      this.playerRadio.sessionId = this.uuidv4();
+    },
+    uuidv4() {
+      return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
+        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+      );
     },
     playLive() {
       if (!this.playerLive) return;

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

@@ -12,6 +12,7 @@ import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { FetchParam } from "@/stores/class/general/fetchParam";
 import { useVastStore } from "@/stores/VastStore";
+import dayjs from "dayjs";
 export const playerLogic = defineComponent({
   mixins: [cookies, playerLive, playerComment, playerTranscript, playerStitching],
   data() {
@@ -114,6 +115,7 @@ export const playerLogic = defineComponent({
         return;
       }
       if ("PAUSED" === this.playerStatus && this.playerRadio) {
+        this.playerRadio.dateSessionId = dayjs().toISOString();
         this.hlsReady = false;
         this.reInitPlayer();
         this.endingLive();

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

@@ -58,7 +58,6 @@ export const playerStitching = defineComponent({
       return this.useVastPlayerPodcast;
     },
     defineRadioInterval(){
-      //TODO remove tag en dur
       this.clearRadioInterval();
       const timeRemaining = dayjs(this.radioNextAdvertisingStartDate).diff(dayjs(), "millisecond");
       console.log("TimeRemaining "+timeRemaining);
@@ -66,6 +65,8 @@ export const playerStitching = defineComponent({
         return;
       }
       this.radioInterval = setTimeout(() => {
+        //If pause when ad needs to be played then skipped (TO THINK)
+        if("PAUSED"===this.playerStatus){return;}
         this.onRequestAd(this.getVastUrl(this.playerRadio?.nextAdvertising?.tag ??"5e385e1b51c86"));
       }, timeRemaining);
     },

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

@@ -2,13 +2,36 @@ import octopusApi from "@saooti/octopus-api";
 import { defineComponent } from "vue";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
+import { AdserverOtherEmission } from "@/stores/class/adserver/adserverOtherEmission";
+import { useVastStore } from "@/stores/VastStore";
 export const playerTranscript = defineComponent({
   computed: {
-    ...mapState(usePlayerStore, ["playerTranscript", "playerPodcast"]),
+    ...mapState(usePlayerStore, ["playerTranscript", "playerPodcast", "playerDelayStitching"]),
+    ...mapState(useVastStore, ["useVastPlayerPodcast"]),
   },
   methods: {
-    ...mapActions(usePlayerStore, ["playerUpdateTranscript", "playerUpdateChaptering"]),
-
+    ...mapActions(usePlayerStore, ["playerUpdateTranscript", "playerUpdateChaptering", "playerUpdateDelayStitching"]),
+    async checkDelaytWithStitching(){
+      this.playerUpdateDelayStitching(0);
+      if(this.useVastPlayerPodcast){return;}
+      const audioPlayer = document.querySelector("#audio-player") as HTMLAudioElement;
+      if (!this.playerTranscript || !audioPlayer || !this.playerPodcast ||
+        audioPlayer.duration <= this.playerPodcast.duration / 1000 + 5) 
+      {
+        return;
+      }
+      let adserverConfig = await octopusApi.fetchDataPublic<AdserverOtherEmission>(0,`ad/test/podcast/${this.playerPodcast.podcastId}`);
+      const doubletsLength = adserverConfig.config.doublets.length;
+      if(1=== doubletsLength &&  "pre" === adserverConfig.config.doublets[0].timing.insertion){
+        this.playerUpdateDelayStitching( audioPlayer.duration - (this.playerPodcast.duration / 1000));
+      }else if(0===doubletsLength || 1=== doubletsLength &&  "post" === adserverConfig.config.doublets[0].timing.insertion){
+        return;
+      }else{
+        // todo remove chaptering
+        this.playerUpdateChaptering();
+        this.playerUpdateTranscript();
+      }
+    },
     async getTranscription(): Promise<void> {
       if (!this.playerPodcast) {
         this.playerUpdateTranscript();
@@ -59,12 +82,12 @@ export const playerTranscript = defineComponent({
       if(!this.playerTranscript?.value.length){
         return;
       }
-      const startTime = (this.playerTranscript.value[this.playerTranscript.actual]?.startTime ?? 0);
+      const startTime = (this.playerTranscript.value[this.playerTranscript.actual]?.startTime ?? 0) + this.playerDelayStitching;
       if (startTime <= currentTime) {
         this.playerTranscript.actualText = this.playerTranscript.value[this.playerTranscript?.actual]?.text ??"";
       }
       if (
-        (this.playerTranscript.value[this.playerTranscript.actual]?.endTime ??Infinity) < currentTime
+        (this.playerTranscript.value[this.playerTranscript.actual]?.endTime ??Infinity) + this.playerDelayStitching< currentTime
       ) {
         this.playerTranscript.actual += 1;
         this.playerTranscript.actualText =
@@ -76,7 +99,7 @@ export const playerTranscript = defineComponent({
     onSeekedTranscript(currentTime: number) {
       if (this.playerTranscript) {
         let newActual = 0;
-        while (currentTime >(this.playerTranscript.value[newActual]?.endTime ?? Infinity)) {
+        while (currentTime >(this.playerTranscript.value[newActual]?.endTime ?? Infinity) + this.playerDelayStitching) {
           newActual += 1;
         }
         this.playerTranscript.actual = newActual;

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

@@ -31,7 +31,10 @@ export const fetchRadioData = defineComponent({
       );
       if(callbackAdvertising){
         //TODO remove mock
-        //callbackAdvertising("2024-03-12T15:25:00Z");
+        /* callbackAdvertising({
+          startDate: "2024-03-25T08:21:00Z",
+          tag: "5e385e1b51c86"
+        }); */
         callbackAdvertising(metadata.nextAdvertising);
       }
       const arrayMetadata = metadata.previously;

package/src/components/pages/PodcastPage.vue

@@ -44,22 +44,24 @@
           :podcast="podcast"
           :organisation-id="podcast.organisation.id"
         />
-        <ClassicLazy :min-height="550">
-          <PodcastInlineList
-            class="mt-4"
-            :podcast-id="podcastId"
-            :title="$t('Suggested listening')"
-          />
-        </ClassicLazy>
-        <ClassicLazy v-for="c in categories" :key="c.id" :min-height="550">
-          <PodcastInlineList
-            class="mt-4"
-            :iab-id="c.id"
-            :href="'/main/pub/category/' + c.id"
-            :title="$t('More episodes of this category : ', { name: c.name })"
-            :button-text="$t('All podcast button', { name: c.name })"
-          />
-        </ClassicLazy>
+        <template v-if="!hideSuggestions">
+          <ClassicLazy :min-height="550">
+            <PodcastInlineList
+              class="mt-4"
+              :podcast-id="podcastId"
+              :title="$t('Suggested listening')"
+            />
+          </ClassicLazy>
+          <ClassicLazy v-for="c in categories" :key="c.id" :min-height="550">
+            <PodcastInlineList
+              class="mt-4"
+              :iab-id="c.id"
+              :href="'/main/pub/category/' + c.id"
+              :title="$t('More episodes of this category : ', { name: c.name })"
+              :button-text="$t('All podcast button', { name: c.name })"
+            />
+          </ClassicLazy>
+        </template>
       </div>
     </template>
     <ClassicLoading
@@ -144,6 +146,14 @@ export default defineComponent({
 
   computed: {
     ...mapState(useGeneralStore, ["storedCategories"]),
+    hideSuggestions(): boolean {
+      return (
+        "true" ===
+        (this.podcast?.emission?.annotations?.["HIDE_SUGGESTIONS"] as
+          | string
+          | undefined)
+      );
+    },
     isComments(): boolean {
       if (!this.podcast) return true;
       let podcastComment = "INHERIT";

package/src/stores/ParamSdkStore.ts

@@ -13,7 +13,7 @@ const state: ParamStore = {
     isProduction: true,
     isContribution: true,
     isRadio: true,
-    ApiUri: "https://api.staging.saooti.org/",
+    ApiUri: "https://api.dev2.saooti.org/",
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -27,8 +27,8 @@ const state: ParamStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: "https://playerbeta.staging.saooti.org/",
-    hlsUri: "https://hls.live.staging.saooti.org/",
+    MiniplayerUri: "https://playerbeta.dev2.saooti.org/",
+    hlsUri: "https://hls.live.dev2.saooti.org/",
     mainRubrique: 0,
     resourceUrl: undefined,
     podcastItemShowEmission: false,
@@ -80,14 +80,14 @@ 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/",
-    radioUrl:"https://radio.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/",
+    radioUrl:"https://radio.dev2.saooti.org/",
+    recoUrl: "https://reco.dev2.saooti.org/",
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },

package/src/stores/PlayerStore.ts

@@ -26,6 +26,7 @@ interface PlayerState {
   playerLargeVersion: boolean;
   playerVideo: boolean;
   playerChaptering?: Chaptering;
+  playerDelayStitching: number;
 }
 export const usePlayerStore = defineStore("PlayerStore", {
   state: (): PlayerState => ({
@@ -42,6 +43,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerLargeVersion: false,
     playerVideo: false,
     playerChaptering: undefined,
+    playerDelayStitching:0,
   }),
   getters: {
     playerChapteringPercent(): ChapteringPercent|undefined{
@@ -230,6 +232,9 @@ export const usePlayerStore = defineStore("PlayerStore", {
     },
     playerUpdateChaptering(chaptering?: Chaptering){
       this.playerChaptering = chaptering;
-    }
+    },
+    playerUpdateDelayStitching(delay: number){
+      this.playerDelayStitching = delay;
+    },
   },
 });

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

@@ -9,6 +9,8 @@ export interface Radio {
   nextAdvertising:NextAdvertising;
   isInit: boolean;
   podcast?: Podcast;
+  sessionId?: string;
+  dateSessionId?:string;
 }
 export interface MediaRadio {
   artist: string;