@saooti/octopus-sdk 38.0.11 → 38.0.13

package/package.json

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

package/public/css/fonts/style.css

@@ -1,7 +1,8 @@
 @font-face {
   font-family: 'icomoon';
   src:  url('/css/fonts/icomoon.eot?bv0n4g');
-  src:  url('/css/fonts/icomoon.eot?bv0n4g#iefix') format('embedded-opentype'),
+  src:  url('/css/fonts/icomoon.woff2?bv0n4g') format('woff2'),
+    url('/css/fonts/icomoon.eot?bv0n4g#iefix') format('embedded-opentype'),
     url('/css/fonts/icomoon.ttf?bv0n4g') format('truetype'),
     url('/css/fonts/icomoon.woff?bv0n4g') format('woff'),
     url('/css/fonts/icomoon.svg?bv0n4g#icomoon') format('svg');

package/src/App.vue

@@ -3,7 +3,7 @@
     <TopBar :is-education="false" />
     <CategoryFilter v-if="firstDisplayCategoryFilter" />
     <router-view />
-    <ClassicLazy v-if="pageFullyLoad" :min-height="125" :unrender="true">
+    <ClassicLazy v-if="pageFullyLoad" :min-height="125">
       <FooterOctopus />
     </ClassicLazy>
     <PlayerComponent />

package/src/components/display/categories/CategoryFilter.vue

@@ -5,11 +5,7 @@
     :style="backgroundDisplay"
   >
     <h1>{{ titleDisplay }}</h1>
-    <div
-      v-if="!isPhone"
-      v-show="isDisplay"
-      class="d-flex flex-column justify-content-end"
-    >
+    <div v-show="isDisplay" class="d-flex flex-column justify-content-end">
       <ol
         v-if="filterIab || filterRubrique.length"
         class="octopus-breadcrumb d-flex align-items-center justify-content-center flex-wrap"
@@ -71,7 +67,6 @@ import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { useFilterStore } from "@/stores/FilterStore";
 import { state } from "../../../stores/ParamSdkStore";
-import resizePhone from "../../mixins/resizePhone";
 import { mapState, mapActions } from "pinia";
 import { defineComponent, defineAsyncComponent } from "vue";
 const CategoryList = defineAsyncComponent(() => import("./CategoryList.vue"));
@@ -89,12 +84,9 @@ export default defineComponent({
     RubriqueList,
     RubriqueChooser,
   },
-  mixins: [resizePhone],
   data() {
     return {
       isCategories: false as boolean,
-      isPhone: false as boolean,
-      windowWidth: 0 as number,
     };
   },
   computed: {

package/src/components/display/categories/CategoryList.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="categories.length"
-    class="d-inline-flex w-100 mb-3 ps-3 pe-3 category-list"
+    class="d-inline-flex w-100 mb-3 ps-3 pe-3 category-list hide-phone"
   >
     <div ref="categoryListContainer" class="category-list-container">
       <button

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

@@ -23,7 +23,6 @@
           v-for="e in displayArray"
           :key="e.emissionId"
           :min-height="250"
-          :unrender="true"
         >
           <EmissionItem v-if="0 !== e.emissionId" :emission="e" />
           <template #preview>

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

@@ -21,7 +21,6 @@
           v-for="p in displayArray"
           :key="p.participantId"
           :min-height="360"
-          :unrender="true"
         >
           <ParticipantItem v-if="0 !== p.participantId" :participant="p" />
           <template #preview>

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

@@ -19,7 +19,6 @@
           v-for="p in displayArray"
           :key="p.playlistId"
           :min-height="250"
-          :unrender="true"
         >
           <PlaylistItem v-if="0 !== p.playlistId" :playlist="p" />
           <template #preview>

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

@@ -35,7 +35,6 @@
             v-for="p in podcastsDisplay"
             :key="p.podcastId"
             :min-height="410"
-            :unrender="true"
           >
             <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
             <template #preview>

package/src/components/display/podcasts/PodcastItem.vue

@@ -29,7 +29,10 @@
       <div ref="descriptionPodcast" v-html="description" />
       <!-- eslint-enable -->
     </div>
-    <div @mouseenter="showDescription" @mouseleave="hideDescription">
+    <div
+      @mouseenter="debounceShowDescriptionEvent"
+      @mouseleave="debounceHideDescriptionEvent"
+    >
       <PodcastItemInfo
         :podcast-id="podcast.podcastId"
         :title="podcast.title"
@@ -44,6 +47,7 @@
 </template>
 
 <script lang="ts">
+import { debounce } from "../../mixins/debounce";
 import PodcastItemInfo from "./PodcastItemInfo.vue";
 import PodcastImage from "./PodcastImage.vue";
 import { state } from "../../../stores/ParamSdkStore";
@@ -70,6 +74,8 @@ export default defineComponent({
       hoverDesc: false as boolean,
       arrowDirection: "up" as string,
       isDescriptionBig: false as boolean,
+      debounceShowDescriptionEvent: undefined as undefined | (() => void),
+      debounceHideDescriptionEvent: undefined as undefined | (() => void),
     };
   },
 
@@ -87,6 +93,10 @@ export default defineComponent({
       return this.podcast.description ?? "";
     },
   },
+  created() {
+    this.debounceShowDescriptionEvent = debounce(this.showDescription, 100);
+    this.debounceHideDescriptionEvent = debounce(this.hideDescription, 100);
+  },
 
   methods: {
     initDescription(): void {

package/src/components/display/podcasts/PodcastList.vue

@@ -25,7 +25,6 @@
           v-for="p in displayArray"
           :key="p.podcastId"
           :min-height="410"
-          :unrender="true"
         >
           <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
           <template #preview>

package/src/components/display/rubriques/RubriqueList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-inline-flex w-100 mb-3 px-3">
+  <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
     <div ref="rubriqueListContainer" class="rubrique-list-container">
       <label for="rubrique-list-select" class="hid">{{ $t("By topic") }}</label>
       <select

package/src/components/misc/ClassicLazy.vue

@@ -29,30 +29,43 @@ export default {
       type: Number,
       default: 0,
     },
+    initRenderDelay: {
+      type: Number,
+      default: 0,
+    },
     unrenderDelay: {
       type: Number,
       default: 10000,
     },
   },
   setup(props) {
+    const waitBeforeInit = ref(true);
     const shouldRender = ref(false);
     const targetEl = ref();
     const fixedMinHeight = ref(0);
     let unrenderTimer: ReturnType<typeof setTimeout> | undefined;
     let renderTimer: ReturnType<typeof setTimeout> | undefined;
-
+    setTimeout(() => {
+      waitBeforeInit.value = false;
+    }, props.initRenderDelay);
     const { stop } = useIntersectionObserver(
       targetEl,
       ([{ isIntersecting }]) => {
+        if (waitBeforeInit.value) {
+          return;
+        }
         if (isIntersecting) {
           // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer
           clearTimeout(unrenderTimer);
           // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
+
           renderTimer = setTimeout(
-            () => (shouldRender.value = true),
+            () => {
+              shouldRender.value = true;
+            },
             props.unrender ? 200 : 0,
           );
-          shouldRender.value = true;
+          //shouldRender.value = true;
           if (!props.unrender) {
             stop();
           }

package/src/components/mixins/debounce.ts

@@ -0,0 +1,12 @@
+export function debounce<Params extends any[]>(
+  func: (...args: Params) => any,
+  timeout: number,
+): (...args: Params) => void {
+  let timer: ReturnType<typeof setTimeout>;
+  return (...args: Params) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => {
+      func(...args)
+    }, timeout)
+  }
+}

package/src/components/mixins/resizePhone.ts

@@ -1,18 +1,21 @@
 
+import {debounce} from './debounce';
 import { defineComponent } from 'vue';
 export default defineComponent({
   data() {
     return {
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
+      debounceResizeEvent: undefined as undefined|((...args: any[]) => void)
     };
   },
   created() {
-    window.addEventListener('resize', this.handleResize);
+    this.debounceResizeEvent = debounce(this.handleResize, 500);
+    window.addEventListener('resize', this.debounceResizeEvent);
     this.handleResize();
   },
   unmounted() {
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('resize', this.debounceResizeEvent);
   },
   methods: {
     handleResize(): void {

package/src/components/pages/HomePage.vue

@@ -2,10 +2,10 @@
   <div class="page-box">
     <template v-if="0 === rubriquageFilter.length">
       <ClassicLazy
-        v-for="c in categories"
+        v-for="(c, index) in categories"
         :key="c.id"
         :min-height="0"
-        :unrender="true"
+        :init-render-delay="3 < index ? 1000 : 0"
       >
         <PodcastInlineList
           :iab-id="c.id"
@@ -19,10 +19,10 @@
     </template>
     <template v-else>
       <ClassicLazy
-        v-for="r in rubriqueToShow"
+        v-for="(r, index) in rubriqueToShow"
         :key="r.rubriqueId"
         :min-height="0"
-        :unrender="true"
+        :init-render-delay="3 < index ? 1000 : 0"
       >
         <PodcastInlineList
           :rubrique-id="rubriqueId.concat(r.rubriqueId)"

package/src/components/pages/PodcastPage.vue

@@ -46,7 +46,7 @@
           :title="$t('More episodes of this emission')"
           :button-text="$t('All podcast emission button')"
         />
-        <ClassicLazy :min-height="550" :unrender="true">
+        <ClassicLazy :min-height="550">
           <PodcastInlineList
             :podcast-id="podcastId"
             :title="$t('Suggested listening')"
@@ -56,7 +56,6 @@
           v-for="c in categories"
           :key="c.id"
           :min-height="550"
-          :unrender="true"
         >
           <PodcastInlineList
             :iab-id="c.id"

package/src/stores/ParamSdkStore.ts

@@ -3,16 +3,16 @@ import { Category } from "./class/general/category";
 
 const state: ParamStore = {
   generalParameters: {
-    organisationId:"ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c",
-    authenticated: true,
-    isAdmin: true,
-    isRoleLive: true,
-    isCommments: true,
-    isOrganisation:true,
-    isPlaylist: true,
-    isProduction: true,
-    isContribution: true,
-    ApiUri: "https://api.staging.saooti.org/",
+    organisationId:undefined/* "ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c" */,
+    authenticated: false,
+    isAdmin: false,
+    isRoleLive: false,
+    isCommments: false,
+    isOrganisation:false,
+    isPlaylist: false,
+    isProduction: false,
+    isContribution: false,
+    ApiUri: "https://api.preprod.saooti.org/",
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -26,8 +26,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.preprod.saooti.org/",
+    hlsUri: "https://hls.live.preprod.saooti.org/",
     mainRubrique: 0,
     resourceUrl: undefined,
     podcastItemShowEmission: false,
@@ -79,14 +79,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.preprod.saooti.org/",
+    commentsUrl: "https://comments.preprod.saooti.org/",
+    imageUrl: "https://imageproxy.preprod.saooti.org/",
+    studioUrl: "https://studio.preprod.saooti.org/",
+    playerUrl: "https://playerbeta.preprod.saooti.org/",
+    speechToTextUrl: "https://speech2text.preprod.saooti.org/",
+    radioUrl:"https://radio.preprod.saooti.org/",
+    recoUrl: "https://reco.preprod.saooti.org/",
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },