@saooti/octopus-sdk 37.0.58 → 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.58",
+  "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/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/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/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/TopBar.vue

@@ -28,7 +28,7 @@
       />
     </router-link>
     <OrganisationChooserLight
-      v-if="!isPodcastmaker && organisation"
+      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],