@saooti/octopus-sdk 39.0.5 → 39.0.7-SNAPSHOT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.0.5",
+  "version": "39.0.7-SNAPSHOT",
   "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/assets/form.scss

@@ -12,7 +12,7 @@
 		padding: 0.5rem 0 0;
 		color: black;
 		font-weight: bold;
-		margin-bottom: 0.5rem;
+		margin-bottom: 0.2rem;
 	}
 	.counter-align-right{
 		flex-grow: 1;

package/src/components/display/live/LiveList.vue

@@ -52,11 +52,12 @@ import { orgaComputed } from "../../mixins/orgaComputed";
 import octopusApi from "@saooti/octopus-api";
 import { useFilterStore } from "@/stores/FilterStore";
 import { useAuthStore } from "@/stores/AuthStore";
-import { mapState } from "pinia";
+import { mapActions, mapState } from "pinia";
 import { state } from "../../../stores/ParamSdkStore";
 import { Conference } from "@/stores/class/conference/conference";
 import { defineComponent } from "vue";
 import { AxiosError } from "axios";
+import { useSaveFetchStore } from "@/stores/SaveFetchStore";
 export default defineComponent({
   name: "LiveList",
   components: {
@@ -163,13 +164,13 @@ export default defineComponent({
     },
   },
   methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaLiveEnabled"]),
     async checkIfLiveAuthorized(): Promise<void> {
       if (!this.filterOrgaUsed) {
         return;
       }
-      this.isLiveAuthorized = await octopusApi.fetchData<boolean>(
-        0,
-        "organisation/liveEnabled/" + this.filterOrgaUsed,
+      this.isLiveAuthorized = await this.getOrgaLiveEnabled(
+        this.filterOrgaUsed,
       );
     },
     endLoading(): void {

package/src/components/display/organisation/OrganisationChooser.vue

@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import { useAuthStore } from "@/stores/AuthStore";
-import { mapState } from "pinia";
+import { mapActions, mapState } from "pinia";
 import imageProxy from "../../mixins/imageProxy";
 import selenium from "../../mixins/selenium";
 import { orgaComputed } from "../../mixins/orgaComputed";
@@ -48,6 +48,7 @@ import {
   emptyOrgaData,
   Organisation,
 } from "@/stores/class/general/organisation";
+import { useSaveFetchStore } from "@/stores/SaveFetchStore";
 export default defineComponent({
   components: {
     ClassicMultiselect,
@@ -109,6 +110,7 @@ export default defineComponent({
     this.organisationChosen = this.getDefaultOrganisation;
   },
   methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaData"]),
     async onSearchOrganisation(query?: string): Promise<void> {
       const response = await octopusApi.fetchDataWithParams<{
         count: number;
@@ -145,9 +147,8 @@ export default defineComponent({
       ).afterSearch(notNullOrga, response.count);
     },
     async fetchOrganisation(): Promise<void> {
-      this.organisationChosen = await octopusApi.fetchData<Organisation>(
-        0,
-        `organisation/${this.orgaIdSelected}`,
+      this.organisationChosen = await this.getOrgaData(
+        this.orgaIdSelected ?? "",
       );
       this.initLoaded = true;
     },

package/src/components/display/organisation/OrganisationChooserLight.vue

@@ -27,7 +27,8 @@
 
 <script lang="ts">
 import { Organisation } from "@/stores/class/general/organisation";
-import octopusApi from "@saooti/octopus-api";
+import { useSaveFetchStore } from "@/stores/SaveFetchStore";
+import { mapActions } from "pinia";
 import { defineComponent } from "vue";
 export default defineComponent({
   props: {
@@ -64,6 +65,7 @@ export default defineComponent({
   },
 
   methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaData"]),
     onOrganisationSelected(): void {
       this.$emit(
         "selected",
@@ -74,12 +76,8 @@ export default defineComponent({
       if (!this.value) {
         return;
       }
-      const data = await octopusApi.fetchData<Organisation>(
-        0,
-        `organisation/${this.value}`,
-      );
-      this.organisation = data;
-      this.actual = data.id;
+      this.organisation = await this.getOrgaData(this.value);
+      this.actual = this.organisation.id;
       this.init = true;
     },
   },

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

@@ -0,0 +1,22 @@
+<template>
+  <ClassicCheckbox
+    :text-init="insertCode"
+    id-checkbox="insert-code-checkbox"
+    :label="$t('Insert custom code')"
+    @update:text-init="$emit('update:insertCode', $event)"
+  />
+</template>
+
+<script lang="ts">
+import ClassicCheckbox from "../../form/ClassicCheckbox.vue";
+import { defineComponent } from "vue";
+export default defineComponent({
+  components: {
+    ClassicCheckbox,
+  },
+  props: {
+    insertCode: { default: false, type: Boolean },
+  },
+  emits: ["update:insertCode"],
+});
+</script>

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

@@ -63,6 +63,10 @@
             @i-frame-number="iFrameNumber = $event"
             @episode-numbers="episodeNumbers = $event"
           />
+          <PlayerCommonParameters
+            v-if="displayInsertCode"
+            v-model:insertCode="insertCode"
+          />
           <ShareModalPlayer
             v-if="isShareModal"
             :embed-link="iFrame"
@@ -104,6 +108,9 @@ const ShareModalPlayer = defineAsyncComponent(
 const PlayerParameters = defineAsyncComponent(
   () => import("./PlayerParameters.vue"),
 );
+const PlayerCommonParameters = defineAsyncComponent(
+  () => import("./PlayerCommonParameters.vue"),
+);
 const SharePlayerTypes = defineAsyncComponent(
   () => import("./SharePlayerTypes.vue"),
 );
@@ -120,6 +127,7 @@ export default defineComponent({
     PlayerParameters,
     SharePlayerTypes,
     ClassicCheckbox,
+    PlayerCommonParameters,
   },
   mixins: [orgaComputed],
   props: {
@@ -149,6 +157,7 @@ export default defineComponent({
       orgaAttributes: undefined as
         | { [key: string]: string | number | boolean | undefined }
         | undefined,
+      insertCode: false as boolean,
     };
   },
 
@@ -167,6 +176,19 @@ export default defineComponent({
           "largeMore" === this.iFrameModel)
       );
     },
+    displayInsertCode(): boolean {
+      let orgaResourceId = "";
+      if (this.podcast) {
+        orgaResourceId = this.podcast.organisation.id;
+      }
+      if (this.emission) {
+        orgaResourceId = this.emission.orga.id;
+      }
+      if (this.playlist) {
+        orgaResourceId = this.playlist.organisation?.id ?? "";
+      }
+      return this.authenticated && orgaResourceId === this.myOrganisationId;
+    },
     displayTranscriptParam(): boolean {
       return (
         this.isTranscriptionAuthorize && (this.isDefault || this.isEmission)
@@ -376,6 +398,9 @@ export default defineComponent({
       if (this.isVisible) {
         url.push("&key=" + window.btoa(this.dataTitle.toString()));
       }
+      if (this.insertCode) {
+        url.push("&insertCode=true");
+      }
       return url;
     },
     initColor(): void {

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

@@ -10,10 +10,18 @@
         :src="iFrameSrc"
         width="100%"
         height="140px"
+        scrolling="no"
+        allow="clipboard-read; clipboard-write; autoplay"
+        frameborder="0"
         class="max-iframe mx-3 flex-grow-1"
       />
-      <div class="d-flex flex-column flex-grow-1 align-items-center">
+      <div class="d-flex flex-column">
         <SharePlayerColors v-model:color="color" v-model:theme="theme" />
+        <div class="h4 mb-2 mt-3">{{ $t("player parameters") }}</div>
+        <PlayerCommonParameters
+          v-if="displayInsertCode"
+          v-model:insertCode="insertCode"
+        />
         <ShareModalPlayer
           v-if="isShareModal"
           :embed-link="iFrame"
@@ -45,10 +53,14 @@ const ShareModalPlayer = defineAsyncComponent(
 const SharePlayerColors = defineAsyncComponent(
   () => import("./SharePlayerColors.vue"),
 );
+const PlayerCommonParameters = defineAsyncComponent(
+  () => import("./PlayerCommonParameters.vue"),
+);
 export default defineComponent({
   components: {
     ShareModalPlayer,
     SharePlayerColors,
+    PlayerCommonParameters,
   },
   mixins: [orgaComputed],
   props: {
@@ -64,19 +76,29 @@ export default defineComponent({
       orgaAttributes: undefined as
         | { [key: string]: string | number | boolean | undefined }
         | undefined,
+      insertCode: false as boolean,
     };
   },
 
   computed: {
     ...mapState(useAuthStore, ["authOrganisation"]),
+    displayInsertCode(): boolean {
+      return (
+        this.authenticated &&
+        this.canal?.organisationId === this.myOrganisationId
+      );
+    },
     iFrameSrc(): string {
-      return `${state.podcastPage.MiniplayerUri}miniplayer/radio/${
+      let url = `${state.podcastPage.MiniplayerUri}miniplayer/radio/${
         this.canal?.id
       }?distributorId=${this.organisationId}&color=${this.color.substring(
         1,
       )}&theme=${this.theme.substring(1)}`;
+      if (this.insertCode) {
+        url += "&insertCode=true";
+      }
+      return url;
     },
-
     iFrame(): string {
       return `<iframe src="${this.iFrameSrc}" width="100%" height="140px" scrolling="no" allow="clipboard-read; clipboard-write; autoplay" frameborder="0"></iframe>`;
     },

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/modal/NewsletterModal.vue

@@ -219,7 +219,7 @@ export default defineComponent({
         "" !== this.authOrganisation.id
           ? this.authOrganisation.id
           : state.generalParameters.organisationId;
-      if (!orgaId || orgaId?.length) {
+      if (!orgaId?.length) {
         return;
       }
       const attributes = await this.getOrgaAttributes(orgaId ?? "");

package/src/components/mixins/organisationFilter.ts

@@ -5,17 +5,15 @@ import { useFilterStore } from "@/stores/FilterStore";
 import { mapActions } from "pinia";
 import { defineComponent } from "vue";
 import { AxiosError } from "axios";
-import { Organisation } from "@/stores/class/general/organisation";
+import { useSaveFetchStore } from "@/stores/SaveFetchStore";
 export default defineComponent({
   mixins: [handle403],
   methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaLiveEnabled", "getOrgaData"]),
     ...mapActions(useFilterStore, ["filterUpdateOrga"]),
     async selectOrganisation(organisationId: string): Promise<void> {
       try {
-        const response = await octopusApi.fetchData<Organisation>(
-          0,
-          `organisation/${organisationId}`,
-        );
+        const response = await this.getOrgaData(organisationId);
         const data = await octopusApi.fetchDataWithParams<Array<Rubriquage>>(
           0,
           "rubriquage/find/" + organisationId,
@@ -25,10 +23,7 @@ export default defineComponent({
           },
           true,
         );
-        const isLive = await octopusApi.fetchData<boolean>(
-          0,
-          "organisation/liveEnabled/" + organisationId,
-        );
+        const isLive = await this.getOrgaLiveEnabled(organisationId);
         this.filterUpdateOrga({
           orgaId: organisationId,
           imgUrl: response.imageUrl,

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

@@ -258,7 +258,10 @@ export default defineComponent({
     },
     podcastsFetched(podcasts: Array<Podcast>) {
       for (const podcast of podcasts) {
-        if ("READY" === podcast.processingStatus) {
+        if (
+          "READY" === podcast.processingStatus &&
+          podcast.availability.visibility
+        ) {
           this.lastPodcast = podcast;
           return;
         }

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/locale/de.ts

@@ -357,4 +357,5 @@ export default {
   "Choose background color":"Wählen Sie die Hintergrundfarbe",
   "Skip ad":"Überspringen",
   "Skip ad in seconds":"Anzeige in {seconds} Sekunden überspringen",
+  "Insert custom code":"Fügen Sie benutzerdefinierten Code ein",
 }

package/src/locale/en.ts

@@ -358,4 +358,5 @@ export default {
   "Choose background color":"Choose background color",
   "Skip ad":"Skip ad",
   "Skip ad in seconds":"Skip ad in {seconds} seconds",
+  "Insert custom code":"Insert custom code",
 };

package/src/locale/es.ts

@@ -358,4 +358,5 @@ export default {
   "Choose background color":"Elige el color de fondo",
   "Skip ad":"Omitir aviso publicitario",
   "Skip ad in seconds":"Saltar anuncio en {segundos} segundos",
+  "Insert custom code":"Insertar código personalizado",
 }

package/src/locale/fr.ts

@@ -365,4 +365,5 @@ export default {
   "Choose background color":"Choisir la couleur du fond",
   "Skip ad":"Ignorer l'annonce",
   "Skip ad in seconds":"Ignorer l'annonce dans {seconds} secondes",
+  "Insert custom code":"Insérer le code personnalisé",
 };

package/src/locale/it.ts

@@ -351,4 +351,5 @@ export default{
   "Choose background color":"Scegli il colore dello sfondo",
   "Skip ad":"Salta annuncio",
   "Skip ad in seconds":"Salta l'annuncio tra {seconds} secondi",
+  "Insert custom code":"Inserisci il codice personalizzato",
 };

package/src/locale/sl.ts

@@ -348,4 +348,5 @@ export default {
   "Choose background color":"Izberite barvo ozadja",
   "Skip ad":"Preskočite oglas",
   "Skip ad in seconds":"Preskoči oglas čez {seconds} sekund",
+  "Insert custom code":"Vstavite kodo po meri",
 }

package/src/stores/SaveFetchStore.ts

@@ -2,13 +2,18 @@
 import { defineStore } from 'pinia';
 import octopusApi from '@saooti/octopus-api';
 import { useAuthStore } from '@/stores/AuthStore';
+import {Organisation} from "@/stores/class/general/organisation";
 
 interface SaveFetchState{
   orgaPublicAttributes: {[key:string]: {[key: string]:string|number|boolean|undefined}},
+  orgaLiveEnabled: {[key:string]: boolean},
+  orgaData: {[key:string]: Organisation},
 }
 export const useSaveFetchStore = defineStore('SaveFetchStore', {
   state: (): SaveFetchState => ({
-    orgaPublicAttributes:{}
+    orgaPublicAttributes:{},
+    orgaLiveEnabled:{},
+    orgaData:{},
   }),
   actions:{
     async getOrgaAttributes(orgaId: string): Promise<{ [key: string]: string | number | boolean | undefined; }>{
@@ -25,6 +30,28 @@ export const useSaveFetchStore = defineStore('SaveFetchStore', {
         this.orgaPublicAttributes[orgaId] = await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+orgaId);
       }
       return this.orgaPublicAttributes[orgaId];
+    },
+    async getOrgaData(orgaId: string): Promise<Organisation>{
+      if(this.orgaData[orgaId]){
+        return this.orgaData[orgaId];
+      }
+      const authStore = useAuthStore();
+      if(orgaId === authStore.authOrganisation.id){
+        this.orgaData[orgaId] = authStore.authOrganisation;
+      }else{
+        this.orgaData[orgaId] = await octopusApi.fetchData<Organisation>(0, 'organisation/'+orgaId);
+      }
+      return this.orgaData[orgaId];
+    },
+    async getOrgaLiveEnabled(orgaId: string): Promise<boolean>{
+      if(!orgaId.length){
+        return false;
+      }
+      if(this.orgaLiveEnabled[orgaId]){
+        return this.orgaLiveEnabled[orgaId];
+      }
+      this.orgaLiveEnabled[orgaId] = await octopusApi.fetchData<boolean>(0, "organisation/liveEnabled/"+orgaId);
+      return this.orgaLiveEnabled[orgaId];
     }
   }
 })

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;