@saooti/octopus-sdk 37.0.57 → 37.0.59

package/index.html

@@ -17,13 +17,13 @@
     <!-- built files will be auto injected -->
   </body>
   <!-- Test digiteka video -->
-  <script type="text/javascript">
+  <!-- <script type="text/javascript">
     var _ultimedia_host = (window.location.protocol == 'https:' ? 'https' : 'http') + "://www.ultimedia.com";
     var _ultimedia_script = document.createElement("script");
   
     _ultimedia_script.setAttribute("type", "text/javascript");
     _ultimedia_script.setAttribute("src", _ultimedia_host + '/js/common/visible_player.js');
     document.getElementsByTagName('head')[0].appendChild(_ultimedia_script);
-  </script>
+  </script> -->
   <script type="module" src="./src/main.ts"></script>
 </html>

package/index.ts

@@ -30,6 +30,7 @@ export const getMessageModal = () => import("./src/components/misc/modal/Message
 export const getErrorMessage = () => import("./src/components/misc/ErrorMessage.vue");
 export const getPopover = () => import("./src/components/misc/ClassicPopover.vue");
 export const getClassicModal = () => import("./src/components/misc/modal/ClassicModal.vue");
+export const getClassicLazy = () => import("./src/components/misc/ClassicLazy.vue");
 
 
 //Display

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.57",
+  "version": "37.0.59",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -24,6 +24,7 @@
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
     "@vuepic/vue-datepicker": "^7.0.0",
+    "@vueuse/core": "^10.5.0",
     "autoprefixer": "^10.4.16",
     "axios": "^1.5.1",
     "dayjs": "^1.11.10",

package/src/App.vue

@@ -8,16 +8,22 @@
     />
     <CategoryFilter />
     <router-view />
-    <FooterOctopus />
+    <ClassicLazy
+      v-if="pageFullyLoad"
+      :min-height="125"
+      :unrender="true"
+    >
+      <FooterOctopus />
+    </ClassicLazy>
     <PlayerComponent />
   </div>
 </template>
 
 <script lang="ts">
 import TopBar from "@/components/misc/TopBar.vue";
-import FooterOctopus from "@/components/misc/FooterSection.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
 import CategoryFilter from "@/components/display/categories/CategoryFilter.vue";
+import ClassicLazy from "@/components/misc/ClassicLazy.vue";
 import { state } from "./stores/ParamSdkStore";
 import { Rubriquage } from "./stores/class/rubrique/rubriquage";
 import { RubriquageFilter } from "./stores/class/rubrique/rubriquageFilter";
@@ -31,6 +37,9 @@ import { Category } from "./stores/class/general/category";
 const LeftMenu = defineAsyncComponent(
   () => import("@/components/misc/LeftMenu.vue"),
 );
+const FooterOctopus = defineAsyncComponent(
+  () => import("@/components/misc/FooterSection.vue"),
+);
 export default defineComponent({
   name: "App",
 
@@ -40,6 +49,7 @@ export default defineComponent({
     CategoryFilter,
     FooterOctopus,
     PlayerComponent,
+    ClassicLazy
   },
 
   mixins: [initSDK],
@@ -49,6 +59,7 @@ export default defineComponent({
       displayMenu: false as boolean,
       reload: false as boolean,
       isInit: false as boolean,
+      pageFullyLoad: false as boolean
     };
   },
 
@@ -65,6 +76,9 @@ export default defineComponent({
   },
   async created() {
     await this.initApp();
+    setTimeout(()=>{
+      this.pageFullyLoad = true;
+    }, 2000)
   },
   methods: {
     ...mapActions(useFilterStore, ["filterUpdateIab", "filterUpdateRubrique"]),

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

@@ -19,9 +19,19 @@
         class="emission-list"
         :class="smallItems ? 'three-emissions' : 'two-emissions'"
       >
-        <template v-for="e in displayArray" :key="e.emissionId">
+        <ClassicLazy v-for="e in displayArray" :key="e.emissionId" :minHeight="250" :unrender="true">
           <EmissionItem v-if="0 !== e.emissionId" :emission="e" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'emission',
+                params: { emissionId: e.emissionId }
+              }"
+            >
+              {{ e.name }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
       <div
         v-else
@@ -46,6 +56,7 @@
 <script lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
 import octopusApi from "@saooti/octopus-api";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { handle403 } from "../../mixins/handle403";
 import { state } from "../../../stores/ParamSdkStore";
 import { Emission, emptyEmissionData } from "@/stores/class/general/emission";
@@ -67,6 +78,7 @@ export default defineComponent({
     EmissionItem,
     EmissionPlayerItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

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

@@ -59,7 +59,7 @@
               {{ p.title }}
             </div>
           </router-link>
-          <PodcastPlayBar :podcast-id="p.podcastId" :duration="p.duration" />
+          <PodcastPlayBar v-else :podcast-id="p.podcastId" :duration="p.duration" />
         </div>
         <button
           v-if="
@@ -99,13 +99,15 @@ import octopusApi from "@saooti/octopus-api";
 import { Emission } from "@/stores/class/general/emission";
 import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
-import PodcastPlayBar from "../podcasts/PodcastPlayBar.vue";
 import imageProxy from "../../mixins/imageProxy";
 import displayMethods from "../../mixins/displayMethods";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { useFilterStore } from "@/stores/FilterStore";
 import { mapState, mapActions } from "pinia";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const PodcastPlayBar = defineAsyncComponent(
+  () => import("../podcasts/PodcastPlayBar.vue"),
+);
 export default defineComponent({
   name: "EmissionPlayerItem",
 

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

@@ -17,9 +17,19 @@
   >
     <template #list>
       <div class="podcast-list">
-        <template v-for="p in displayArray" :key="p.participantId">
+        <ClassicLazy v-for="p in displayArray" :key="p.participantId" :minHeight="360" :unrender="true">
           <ParticipantItem v-if="0 !== p.participantId" :participant="p" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'participant',
+                params: { participantId: p.participantId },
+              }"
+            >
+              {{ p.lastName }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
     </template>
   </ListPaginate>
@@ -27,6 +37,7 @@
 
 <script lang="ts">
 import ListPaginate from "../list/ListPaginate.vue";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { handle403 } from "../../mixins/handle403";
 import octopusApi from "@saooti/octopus-api";
 import ParticipantItem from "./ParticipantItem.vue";
@@ -44,6 +55,7 @@ export default defineComponent({
   components: {
     ParticipantItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

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

@@ -15,15 +15,26 @@
   >
     <template #list>
       <div class="emission-list two-emissions">
-        <template v-for="p in displayArray" :key="p.playlistId">
+        <ClassicLazy v-for="p in displayArray" :key="p.playlistId" :minHeight="250" :unrender="true">
           <PlaylistItem v-if="0 !== p.playlistId" :playlist="p" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'playlist',
+                params: { playlistId: p.playlistId },
+              }"
+            >
+              {{ p.title }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
     </template>
   </ListPaginate>
 </template>
 
 <script lang="ts">
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import ListPaginate from "../list/ListPaginate.vue";
 import { handle403 } from "../../mixins/handle403";
 import octopusApi from "@saooti/octopus-api";
@@ -39,6 +50,7 @@ export default defineComponent({
   components: {
     PlaylistItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

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

@@ -31,9 +31,19 @@
     >
       <template #list>
         <div class="podcast-list">
-          <template v-for="p in podcastsDisplay" :key="p.podcastId">
+          <ClassicLazy v-for="p in podcastsDisplay" :key="p.podcastId" :minHeight="410" :unrender="true">
             <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
-          </template>
+            <template #preview>
+              <router-link
+                :to="{
+                  name: 'podcast',
+                  params: { podcastId: p.podcastId }
+                }"
+              >
+                {{ p.title }}
+              </router-link>
+            </template>
+          </ClassicLazy>
         </div>
       </template>
     </ListPaginate>
@@ -48,6 +58,7 @@ import octopusApi from "@saooti/octopus-api";
 import PodcastItem from "../podcasts/PodcastItem.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import ClassicSearch from "../../form/ClassicSearch.vue";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Playlist } from "@/stores/class/general/playlist";
 import { defineComponent } from "vue";
@@ -59,6 +70,7 @@ export default defineComponent({
     PodcastItem,
     ClassicSearch,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403, orgaComputed],

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

@@ -13,7 +13,7 @@
     >
       {{ title }}
     </router-link>
-    <PodcastPlayBar :podcast-id="podcastId" :duration="duration" class="mx-2" />
+    <PodcastPlayBar v-if="isProgressBar" :podcast-id="podcastId" :duration="duration" class="mx-2" />
 
     <div class="mx-2 d-flex align-items-center justify-content-between mt-2">
       <div v-if="isPodcastmaker" class="useless-div-for-podcastmaker" />
@@ -42,9 +42,11 @@ import AnimatorsItem from "./AnimatorsItem.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { orgaComputed } from "../../mixins/orgaComputed";
 import dayjs from "dayjs";
-import PodcastPlayBar from "./PodcastPlayBar.vue";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
 import { Participant } from "@/stores/class/general/participant";
+const PodcastPlayBar = defineAsyncComponent(
+  () => import("./PodcastPlayBar.vue"),
+);
 export default defineComponent({
   name: "PodcastItemInfo",
 
@@ -66,6 +68,9 @@ export default defineComponent({
   },
 
   computed: {
+    isProgressBar(): boolean {
+      return state.emissionsPage.progressBar as boolean;
+    },
     isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker as boolean;
     },

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

@@ -21,9 +21,19 @@
   >
     <template #list>
       <div class="podcast-list">
-        <template v-for="p in displayArray" :key="p.podcastId">
+        <ClassicLazy v-for="p in displayArray" :key="p.podcastId" :minHeight="410" :unrender="true">
           <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
-        </template>
+          <template #preview>
+            <router-link
+              :to="{
+                name: 'podcast',
+                params: { podcastId: p.podcastId }
+              }"
+            >
+              {{ p.title }}
+            </router-link>
+          </template>
+        </ClassicLazy>
       </div>
     </template>
   </ListPaginate>
@@ -34,6 +44,7 @@ import ListPaginate from "../list/ListPaginate.vue";
 import { handle403 } from "../../mixins/handle403";
 import octopusApi from "@saooti/octopus-api";
 import PodcastItem from "./PodcastItem.vue";
+import ClassicLazy from "../../misc/ClassicLazy.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import { useAuthStore } from "@/stores/AuthStore";
 import { useFilterStore } from "@/stores/FilterStore";
@@ -48,6 +59,7 @@ export default defineComponent({
   components: {
     PodcastItem,
     ListPaginate,
+    ClassicLazy
   },
 
   mixins: [handle403],

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

@@ -93,6 +93,7 @@
             :is-guest="true"
           />
           <PodcastPlayBar
+            v-if="isProgressBar"
             :podcast-id="podcast.podcastId"
             :duration="podcast.duration"
           />
@@ -129,7 +130,6 @@
 </template>
 
 <script lang="ts">
-import PodcastPlayBar from "./PodcastPlayBar.vue";
 import PodcastImage from "./PodcastImage.vue";
 import ParticipantDescription from "./ParticipantDescription.vue";
 import TagList from "./TagList.vue";
@@ -152,6 +152,9 @@ const RecordingItemButton = defineAsyncComponent(
 const EditBox = defineAsyncComponent(
   () => import("@/components/display/edit/EditBox.vue"),
 );
+const PodcastPlayBar = defineAsyncComponent(
+  () => import("./PodcastPlayBar.vue"),
+);
 export default defineComponent({
   name: "PodcastModuleBox",
   components: {
@@ -187,6 +190,9 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return state.generalParameters.podcastmaker as boolean;
     },
+    isProgressBar(): boolean {
+      return state.emissionsPage.progressBar as boolean;
+    },
     date(): string {
       if (!this.podcast || 1970 === dayjs(this.podcast.pubDate).year()) {
         return "";

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isProgressBar" class="d-flex align-items-center podcast-play-bar">
+  <div class="d-flex align-items-center podcast-play-bar">
     <div class="me-2">
       {{ playedTime }}
     </div>
@@ -20,7 +20,6 @@
 import ProgressBar from "../../misc/ProgressBar.vue";
 import DurationHelper from "../../../helper/duration";
 import displayMethods from "../../mixins/displayMethods";
-import { state } from "../../../stores/ParamSdkStore";
 import { usePlayerStore } from "@/stores/PlayerStore";
 import { mapState, mapActions } from "pinia";
 import { defineComponent } from "vue";
@@ -40,9 +39,6 @@ export default defineComponent({
       "playerElapsed",
       "playerTotal",
     ]),
-    isProgressBar(): boolean {
-      return state.emissionsPage.progressBar as boolean;
-    },
     percentProgress(): number {
       if (this.podcastId !== this.playerPodcast?.podcastId) {
         return 0;

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

@@ -34,9 +34,13 @@
 </template>
 
 <script lang="ts">
-import ClassicPopover from "../../misc/ClassicPopover.vue";
-import tagOfMixins from "../../mixins/tagOfMixins";
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent } from "vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../../misc/ClassicPopover.vue"),
+);
+const tagOfMixins = defineAsyncComponent(
+  () => import("../../mixins/tagOfMixins"),
+);
 export default defineComponent({
   name: "TagList",
   components: {

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

@@ -100,7 +100,7 @@
       :url-page="urlPage"
       @close="qrCode = false"
     />
-    <SnackBar ref="snackbar" position="bottom-left" />
+    <SnackBar v-if="lazyLoadingSnackbar" ref="snackbar" position="bottom-left" />
   </div>
 </template>
 
@@ -111,7 +111,6 @@ import octopusApi from "@saooti/octopus-api";
 import { Emission } from "@/stores/class/general/emission";
 import { Podcast } from "@/stores/class/general/podcast";
 import { state } from "../../../stores/ParamSdkStore";
-import SnackBar from "../../misc/SnackBar.vue";
 import displayMethods from "../../mixins/displayMethods";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { Playlist } from "@/stores/class/general/playlist";
@@ -124,6 +123,9 @@ const NewsletterModal = defineAsyncComponent(
 const QrCodeModal = defineAsyncComponent(
   () => import("../../misc/modal/QrCodeModal.vue"),
 );
+const SnackBar = defineAsyncComponent(
+  () => import("../../misc/SnackBar.vue"),
+);
 export default defineComponent({
   components: {
     ClipboardModal,
@@ -150,6 +152,7 @@ export default defineComponent({
       newsletter: false as boolean,
       qrCode: false as boolean,
       displayRss: false as boolean,
+      lazyLoadingSnackbar: false as boolean,
     };
   },
   computed: {
@@ -237,9 +240,16 @@ export default defineComponent({
       this.dataRSSSave = !this.dataRSSSave;
     },
     afterCopy(): void {
-      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-        this.$t("Link in clipboard"),
-      );
+      if(!this.lazyLoadingSnackbar){
+        this.lazyLoadingSnackbar = true;
+        setTimeout(() => {
+          this.afterCopy();
+        }, 500);
+      }else{
+        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+          this.$t("Link in clipboard"),
+        );
+      }
     },
   },
 });

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

@@ -27,7 +27,7 @@
         <span :class="platform.icon" />{{ platform.title }}
       </router-link>
     </div>
-    <SnackBar ref="snackbar" position="bottom-left" />
+    <SnackBar v-if="lazyLoadingSnackbar" ref="snackbar" position="bottom-left" />
   </div>
 </template>
 
@@ -56,6 +56,7 @@ export default defineComponent({
     return {
       emission: undefined as Emission | undefined,
       rss: "" as string,
+      lazyLoadingSnackbar: false as boolean,
     };
   },
   computed: {
@@ -128,9 +129,16 @@ export default defineComponent({
       this.rss = `${state.octopusApi.url}rss/emission/${this.emissionId}.rss`;
     },
     afterCopy(): void {
-      (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
-        this.$t("Link in clipboard"),
-      );
+      if(!this.lazyLoadingSnackbar){
+        this.lazyLoadingSnackbar = true;
+        setTimeout(() => {
+          this.afterCopy();
+        }, 500);
+      }else{
+        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+          this.$t("Link in clipboard"),
+        );
+      }
     },
   },
 });

package/src/components/misc/ClassicLazy.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    ref="targetEl"
+    :style="`min-height:${fixedMinHeight ? fixedMinHeight : minHeight}px`"
+  >
+    <slot v-if="shouldRender" />
+    <slot v-else name="preview" />
+  </div>
+</template>
+<script lang="ts">
+import { useIntersectionObserver } from "@vueuse/core";
+import { ref, nextTick } from "vue";
+
+function onIdle(cb = () => {}) {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(cb);
+  } else {
+    setTimeout(() => {
+      nextTick(cb);
+    }, 300);
+  }
+}
+
+export default {
+  props: {
+    renderOnIdle: Boolean,
+    unrender: Boolean,
+    minHeight: Number,
+    unrenderDelay: {
+      type: Number,
+      default: 10000,
+    },
+  },
+  setup(props) {
+    const shouldRender = ref(false);
+    const targetEl = ref();
+    const fixedMinHeight = ref(0);
+    let unrenderTimer;
+    let renderTimer;
+
+    const { stop } = useIntersectionObserver(
+      targetEl,
+      ([{ isIntersecting }]) => {
+        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),
+            props.unrender ? 200 : 0
+          );
+          shouldRender.value = true;
+          if (!props.unrender) {
+            stop();
+          }
+        } else if (props.unrender) {
+          // if the component was set to render, cancel that
+          clearTimeout(renderTimer);
+          unrenderTimer = setTimeout(() => {
+            fixedMinHeight.value = targetEl.value.clientHeight;
+            shouldRender.value = false;
+          }, props.unrenderDelay);
+        }
+      },
+      {
+        rootMargin: "600px",
+      }
+    );
+
+    if (props.renderOnIdle) {
+      onIdle(() => {
+        shouldRender.value = true;
+        if (!props.unrender) {
+          stop();
+        }
+      });
+    }
+
+    return { targetEl, shouldRender, fixedMinHeight };
+  },
+};
+</script>

package/src/components/misc/LeftMenu.vue

@@ -14,7 +14,7 @@
       </router-link>
     </template>
     <OrganisationChooserLight
-      v-if="!isPodcastmaker"
+      v-if="!isPodcastmaker && organisationId"
       width="auto"
       page="leftMenu"
       :defaultanswer="$t('No organisation filter')"

package/src/components/misc/TopBar.vue

@@ -28,7 +28,7 @@
       />
     </router-link>
     <OrganisationChooserLight
-      v-if="!isPodcastmaker"
+      v-if="!isPodcastmaker && organisationId"
       page="topBar"
       width="auto"
       :defaultanswer="$t('No organisation filter')"

package/src/components/pages/EmissionPage.vue

@@ -116,7 +116,7 @@ export default defineComponent({
     EditBox,
     SubscribeButtons,
     LiveHorizontalList,
-    ClassicLoading,
+    ClassicLoading
   },
   mixins: [displayMethods, handle403, orgaComputed, imageProxy],
   props: {

package/src/components/pages/HomePage.vue

@@ -1,22 +1,32 @@
 <template>
   <div class="page-box">
     <template v-if="0 === rubriquageFilter.length">
-      <PodcastInlineList
+      <ClassicLazy 
         v-for="c in categories"
         :key="c.id"
-        :iab-id="c.id"
-        :title="c.name"
-        :button-text="$t('All podcast button', { name: c.name })"
-      />
+        :minHeight="650" 
+        :unrender="true"
+      >
+        <PodcastInlineList
+          :iab-id="c.id"
+          :title="c.name"
+          :button-text="$t('All podcast button', { name: c.name })"
+        />
+      </ClassicLazy>
     </template>
     <template v-else>
-      <PodcastInlineList
+      <ClassicLazy 
         v-for="r in rubriqueToShow"
         :key="r.rubriqueId"
-        :rubrique-id="rubriqueId.concat(r.rubriqueId)"
-        :title="r.name"
-        :button-text="$t('All podcast button', { name: r.name })"
-      />
+        :minHeight="650" 
+        :unrender="true"
+      >
+        <PodcastInlineList
+          :rubrique-id="rubriqueId.concat(r.rubriqueId)"
+          :title="r.name"
+          :button-text="$t('All podcast button', { name: r.name })"
+        />
+      </ClassicLazy>
       <template v-if="rubriqueDisplay && rubriqueDisplay.length > 0">
         <PodcastInlineList
           v-if="rubriqueDisplay.length < rubriqueMaxDisplay"
@@ -48,6 +58,7 @@
 
 <script lang="ts">
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
+import ClassicLazy from "../misc/ClassicLazy.vue";
 import { state } from "../../stores/ParamSdkStore";
 import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
@@ -61,6 +72,7 @@ export default defineComponent({
   name: "HomePage",
   components: {
     PodcastInlineList,
+    ClassicLazy
   },
   data() {
     return {

package/src/components/pages/PodcastPage.vue

@@ -46,18 +46,28 @@
           :title="$t('More episodes of this emission')"
           :button-text="$t('All podcast emission button')"
         />
-        <PodcastInlineList
-          :podcast-id="podcastId"
-          :title="$t('Suggested listening')"
-        />
-        <PodcastInlineList
+        <ClassicLazy
+          :min-height="550"
+          :unrender="true"
+        >
+          <PodcastInlineList
+            :podcast-id="podcastId"
+            :title="$t('Suggested listening')"
+          />
+        </ClassicLazy>
+        <ClassicLazy
           v-for="c in categories"
           :key="c.id"
-          :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 })"
-        />
+          :min-height="550"
+          :unrender="true"
+        >
+          <PodcastInlineList
+            :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>
       </div>
     </template>
     <ClassicLoading
@@ -76,6 +86,7 @@ import imageProxy from "../mixins/imageProxy";
 import { orgaComputed } from "../mixins/orgaComputed";
 import PodcastInlineList from "../display/podcasts/PodcastInlineList.vue";
 import PodcastModuleBox from "../display/podcasts/PodcastModuleBox.vue";
+import ClassicLazy from "../misc/ClassicLazy.vue";
 import ClassicLoading from "../form/ClassicLoading.vue";
 import octopusApi from "@saooti/octopus-api";
 import crudApi from "@/api/classicCrud";
@@ -116,6 +127,7 @@ export default defineComponent({
     CommentSection,
     PodcastModuleBox,
     ClassicLoading,
+    ClassicLazy,
   },
 
   mixins: [handle403, orgaComputed, imageProxy],

package/src/stores/ParamSdkStore.ts

@@ -3,15 +3,15 @@ import { Category } from "./class/general/category";
 
 const state: ParamStore = {
   generalParameters: {
-    organisationId: /* "7e67406d-c1f5-4f98-91ca-dd45583aa1a6" */"ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c",
-    authenticated: true,
-    isAdmin: true,
-    isRoleLive: true,
+    organisationId: undefined/* "ecbd98d9-79bd-4312-ad5e-fc7c1c4a191c" */,
+    authenticated: false,
+    isAdmin: false,
+    isRoleLive: false,
     isCommments: false,
     isOrganisation: false,
     isPlaylist: false,
     isProduction: false,
-    isContribution: true,
+    isContribution: false,
     ApiUri: "https://api.dev2.saooti.org/",
     podcastmaker: false,
     buttonPlus: true,