@saooti/octopus-sdk 31.0.8 → 31.0.11

package/README.md

@@ -569,6 +569,9 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.70 Améliorations 30
  * 30.0.71 Parlement européen
  * 30.0.72 Ajout des traductions
+ * 30.0.73 Ajout classe css 
+ * 30.0.74 Error locales en allemand (je sens que ça va être fun cette histoire)
+ * 30.0.75 Parlement
 
 
  * 31.0.0 Passage en 31
@@ -580,7 +583,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.6 Erreur de Merge 30
  * 31.0.7 Sécurisation
  * 31.0.8 Dropdown Lang + classicSelect
-
-
-
- 
+ * 31.0.9 LazyLoad image
+ * 31.0.10 Sécurisation
+ * 31.0.11 Sécurisation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.8",
+  "version": "31.0.11",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -15,7 +15,7 @@
   "main": "./dist/octopus.common.js",
   "dependencies": {
     "@popperjs/core": "^2.11.0",
-    "@saooti/octopus-api": "^0.31.1",
+    "@saooti/octopus-api": "^0.31.2",
     "@vue/cli": "^5.0.0-rc.1",
     "@vue/compat": "^3.2.26",
     "axios": "^0.24.0",
@@ -37,6 +37,7 @@
     "vue-multiselect": "^3.0.0-alpha.2",
     "vue-recaptcha-v3": "^2.0.1",
     "vue-router": "^4.0.12",
+    "vue3-lazyload": "^0.2.5-beta",
     "vue3-swatches": "^1.0.5",
     "vuex": "^4.0.2",
     "webpack": "^5.66.0"

package/src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div 
+  <div
+    v-if="isInit"
     id="app"
     :key="reload"
     class="octopus-app"
@@ -45,27 +46,21 @@ export default defineComponent({
   data() {
     return {
       displayMenu: false as boolean,
-      initQueryRouter: false,
       reload: false as boolean,
+      isInit: false as boolean,
     };
   },
 
   watch: {
-    '$route': {
-      deep: true,
-      handler(){
-      if(!this.initQueryRouter){
-        this.initQueryRouter = true;
-        this.initApp();
-      }
-      }
-    },
     '$i18n.locale'(){
       this.$forceUpdate();
       this.reload = !this.reload;
     }
   },
-
+  async created(){
+    await this.initApp();
+    this.isInit =true;
+  },
   methods:{
     async initApp(){
       await this.initSdk();

package/src/assets/general.scss

@@ -213,6 +213,7 @@ body{
     background-size: cover;
     box-shadow: 0px 8px 26px 6px rgba(64, 163, 114, 0.3);
     margin: auto;
+    display: flex;
   }
 
   .comma {

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

@@ -11,10 +11,10 @@
       :title="$t('Emission')"
       class="d-flex text-dark"
     >
-      <div
+      <img
+        v-lazy="emission.imageUrl"
         class="img-box"
-        :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
-      />
+      >
       <div class="emission-item-text">
         <div
           class="emission-name"

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

@@ -18,11 +18,11 @@
       </div>
       <div
         class="img-box rounded-0"
-        :style="{
-          'background-image':
-            'url(\'' + emission.imageUrl + '?dummy=' + dummyParam + '\')',
-        }"
       >
+        <img
+          v-lazy="emission.imageUrl"
+          class="img-box rounded-0"
+        >
         <div
           v-if="titleInImage"
           class="titleInImage"

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

@@ -44,8 +44,8 @@
         <div class="multiselect-octopus-proposition">
           <img
             v-if="!light"
+            v-lazy="option.imageUrl"
             class="option__image"
-            :src="option.imageUrl"
             :alt="option.name"
           >
           <span
@@ -64,8 +64,8 @@
         >
           <img
             v-if="!light"
+            v-lazy="option.imageUrl"
             class="option__image"
-            :src="option.imageUrl"
             :alt="option.name"
           >
           <span

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

@@ -12,10 +12,10 @@
       class="mt-3 text-dark"
       :title="$t('Participant')"
     >
-      <div
+      <img
+        v-lazy="participant.imageUrl"
         class="img-box-circle"
-        :style="{ 'background-image': 'url(\'' + participant.imageUrl + '\')' }"
-      />
+      >
       <div class="participant-name">
         <img
           v-if="!activeParticipant && !isPodcastmaker && editRight"

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

@@ -9,7 +9,7 @@
         class="text-secondary mb-2"
       >
         {{
-          $t('Number participants', { nb: displayCount }) + $t('sort by score')
+          $t('Number participants', { nb: displayCount }) +" "+ $t('sort by score')
         }}
       </div>
       <ul

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

@@ -12,13 +12,10 @@
       :title="$t('Playlist')"
       class="text-dark"
     >
-      <div
+      <img
+        v-lazy="playlist.imageUrl"
         class="img-box"
-        :style="{
-          'background-image':
-            'url(\'' + playlist.imageUrl + '?dummy=' + dummyParam + '\')',
-        }"
-      />
+      >
     </router-link>
     <div class="emission-item-text">
       <router-link

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

@@ -7,7 +7,7 @@
       v-if="loaded && playlists.length > 1"
       class="text-secondary mb-2"
     >
-      {{ $t('Number playlists', { nb: displayCount }) + $t('sort by score') }}
+      {{ $t('Number playlists', { nb: displayCount }) +" "+ $t('sort by score') }}
     </div>
     <ul class="emission-list two-emissions">
       <PlaylistItem

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

@@ -18,7 +18,7 @@
       v-if="loaded && podcasts.length > 1"
       class="text-secondary mb-4"
     >
-      {{ $t('Number podcasts', { nb: podcasts.length }) + $t('sort by score') }}
+      {{ $t('Number podcasts', { nb: podcasts.length }) +" "+ $t('sort by score') }}
     </div>
     <ClassicSearch
       v-if="notEmptyPlaylist"

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="animators && 0 !== animators.length"
-    class="d-flex align-items-center justify-content-start"
+    class="d-flex align-items-center justify-content-start animators-item"
   >
     <router-link
       v-for="(animator, index) in animators"
@@ -36,7 +36,6 @@ export default defineComponent({
       visibleIndex: 0 as number,
     };
   },
-
    methods: {
     getAnimatorName(animator: Participant): string {
       const first = animator.firstName || '';

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

@@ -2,8 +2,11 @@
   <div
     v-if="podcast"
     class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
-    :style="{ 'background-image': 'url(\'' + podcast.imageUrl + '\')' }"
   >
+    <img
+      v-lazy="podcast.imageUrl"
+      class="img-box"
+    >
     <template v-if="isPodcastmaker">
       <div
         :class="mainRubrique? 'mainRubrique' : 'notMainRubrique'"

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

@@ -31,78 +31,34 @@
       />
     <!-- eslint-enable -->
     </div>
-    <div
-      class="d-contents"
+    <PodcastItemInfo
+      :podcast-id="podcast.podcastId"
+      :title="podcast.title"
+      :pub-date="podcast.pubDate"
+      :podcast-organisation-id="podcast.organisation.id"
+      :podcast-organisation-name="podcast.organisation.name"
+      :podcast-order="podcast.order"
+      :duration="podcast.duration"
+      :animators="podcast.animators"
       @mouseenter="showDescription"
       @mouseleave="hideDescription"
-    >
-      <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-        <div class="me-3 small-text">
-          {{ date }}
-        </div>
-        <div
-          v-if="0 !== duration.length"
-          class="small-text"
-        >
-          {{ duration }}
-        </div>
-      </div>
-      <AnimatorsItem :animators="podcast.animators" />
-      <router-link
-        :to="{
-          name: 'podcast',
-          params: { podcastId: podcast.podcastId },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="text-dark d-flex flex-column flex-grow-1"
-      >
-        <div class="title-podcast-item">
-          {{ title }}
-        </div>
-      </router-link>
-      <PodcastPlayBar
-        :podcast="podcast"
-        class="mx-2"
-      />
-      <div class="d-flex justify-content-between">
-        <router-link
-          v-if="!isPodcastmaker"
-          :to="{
-            name: 'productor',
-            params: { productorId: podcast.organisation.id },
-            query: { productor: $store.state.filter.organisationId },
-          }"
-          class="text-dark producer-podcast-item"
-        >
-          <div>{{ '© ' + podcast.organisation.name }}</div>
-        </router-link>
-        <span
-          v-if="editRight && podcast.order && podcast.order > 1"
-          class="saooti-star-bounty text-danger pe-2"
-        />
-      </div>
-    </div>
+    />
   </li>
 </template>
 
 <script lang="ts">
-import AnimatorsItem from './AnimatorsItem.vue';
+import PodcastItemInfo from './PodcastItemInfo.vue';
 import PodcastImage from './PodcastImage.vue';
 import { state } from '../../../store/paramStore';
 import moment from 'moment';
-// @ts-ignore
-import humanizeDuration from 'humanize-duration';
-import PodcastPlayBar from '../podcasts/PodcastPlayBar.vue';
 import { Podcast } from '@/store/class/general/podcast';
-import { Category } from '@/store/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastItem',
   
   components: {
-    AnimatorsItem,
+    PodcastItemInfo,
     PodcastImage,
-    PodcastPlayBar
   },
 
   props: {
@@ -116,113 +72,24 @@ export default defineComponent({
       isDescriptionBig: false as boolean,
     };
   },
-  
+
   computed: {
-    isPodcastmaker(): boolean {
-      return (state.generalParameters.podcastmaker as boolean);
-    },
     podcastShadow(): boolean {
       return (state.podcastsPage.podcastShadow as boolean);
     },
     podcastBorderBottom(): boolean {
       return (state.podcastsPage.podcastBorderBottom as boolean);
     },
-    date(): string {
-      return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
-    },
     displayDate(): string {
       return moment(this.podcast.pubDate).format('X');
     },
-    category(): string {
-      const catIds = this.podcast.emission.iabIds;
-      return this.$store.state.categories
-        .filter((c: Category) => {
-          return catIds && catIds.includes(c.id);
-        })
-        .map((c: Category) => {
-          return c.name;
-        })
-        .join(', ');
-    },
     description(): string {
       if (!this.podcast.description) return '';
       return this.podcast.description;
     },
-    title(): string {
-      return this.podcast.title;
-    },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
-    editRight(): boolean {
-      if (
-        (this.authenticated &&
-          this.organisationId === this.podcast.organisation.id) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
-    },
-    duration(): string {
-      if (this.podcast.duration <= 1) return '';
-      if (this.podcast.duration > 600000) {
-        return humanizeDuration(this.podcast.duration, {
-          language: 'short'+this.$i18n.locale.charAt(0).toUpperCase() + this.$i18n.locale.slice(1),
-          largest: 1,
-          round: true,
-          languages: {
-            shortFr: {
-              y: () => 'années',
-              mo: () => 'mois',
-              w: () => 'semaines',
-              d: () => 'jours',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-            shortEn: {
-              y: () => 'years',
-              mo: () => 'months',
-              w: () => 'weeks',
-              d: () => 'days',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-            shortIt: {
-              y: () => 'anni',
-              mo: () => 'mesi',
-              w: () => 'settimane',
-              d: () => 'giorni',
-              h: () => 'h',
-              m: () => 'min',
-              s: () => 'sec',
-              ms: () => 'ms',
-            },
-          },
-        });
-      }
-      return humanizeDuration(this.podcast.duration, {
-        language: 'short',
-        largest: 2,
-        round: true,
-        languages: {
-          short: {
-            m: () => 'min',
-            s: () => 'sec',
-            ms: () => 'ms',
-          },
-        },
-      });
-    },
   },
 
-  mounted() {
+  created() {
     const podcastDesc = document.getElementById(
       'description-podcast-' + this.podcast.podcastId
     );
@@ -262,26 +129,7 @@ export default defineComponent({
   text-align: left;
   background: #fff;
   flex-shrink: 0;
-  .text-secondary {
-    margin: 0.5rem !important;
-  }
-  .saooti-star-bounty {
-    font-size: 22px;
-  }
-
-  .title-podcast-item {
-    font-weight: 700;
-    margin: 0.25rem 0.5rem 0.5rem;
-    overflow: hidden;
-    display: -webkit-box;
-    flex-grow: 1;
-    font-size: 0.7rem;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    min-height: 3rem;
-    line-height: 1rem;
-    word-break: break-word;
-  }
+ 
   .description-podcast-item {
     padding: 1rem;
     color: #333;
@@ -306,12 +154,6 @@ export default defineComponent({
       background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
     }
   }
-  .producer-podcast-item {
-    margin: 0.2rem 0.5rem 0.5rem;
-    font-size: 0.55rem;
-    color: #666;
-  }
-
   @media (max-width: 960px) {
     margin: 0.5rem !important;
   }

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="d-contents podcast-item-info">
+    <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
+      <div class="me-3 small-text">
+        {{ date }}
+      </div>
+      <div
+        v-if="0 !== durationString.length"
+        class="small-text"
+      >
+        {{ durationString }}
+      </div>
+    </div>
+    <AnimatorsItem :animators="animators" />
+    <router-link
+      :to="{
+        name: 'podcast',
+        params: { podcastId: podcastId },
+        query: { productor: $store.state.filter.organisationId },
+      }"
+      class="text-dark d-flex flex-column flex-grow-1"
+    >
+      <div class="title-podcast-item">
+        {{ title }}
+      </div>
+    </router-link>
+    <PodcastPlayBar
+      :podcast-id="podcastId"
+      :duration="duration"
+      class="mx-2"
+    />
+    <div class="d-flex justify-content-between">
+      <router-link
+        v-if="!isPodcastmaker"
+        :to="{
+          name: 'productor',
+          params: { productorId: podcastOrganisationId },
+          query: { productor: $store.state.filter.organisationId },
+        }"
+        class="text-dark producer-podcast-item"
+      >
+        <div>{{ '© ' + podcastOrganisationName }}</div>
+      </router-link>
+      <span
+        v-if="editRight && podcastOrder && podcastOrder > 1"
+        class="saooti-star-bounty text-danger pe-2"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import AnimatorsItem from './AnimatorsItem.vue';
+import { state } from '../../../store/paramStore';
+import moment from 'moment';
+// @ts-ignore
+import humanizeDuration from 'humanize-duration';
+import PodcastPlayBar from './PodcastPlayBar.vue';
+import { defineComponent } from 'vue'
+import { Participant } from '@/store/class/general/participant';
+export default defineComponent({
+  name: 'PodcastItemInfo',
+  
+  components: {
+    AnimatorsItem,
+    PodcastPlayBar
+  },
+
+  props: {
+    podcastId: { default: undefined, type: Number},
+    title: { default: "", type: String},
+    pubDate: { default: "", type: String},
+    podcastOrganisationId: { default: "", type: String},
+    podcastOrganisationName: { default: "", type: String},
+    podcastOrder: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
+    animators: { default: undefined, type: Object as ()=> Array<Participant>},
+  },
+  
+  computed: {
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker as boolean);
+    },
+    date(): string {
+      return moment(this.pubDate).format('D MMMM YYYY, HH[h]mm');
+    },
+    organisationId(): string|undefined {
+      return state.generalParameters.organisationId;
+    },
+    authenticated(): boolean {
+      return (state.generalParameters.authenticated as boolean);
+    },
+    editRight(): boolean {
+      if (
+        (this.authenticated &&
+          this.organisationId === this.podcastOrganisationId) ||
+        state.generalParameters.isAdmin
+      )
+        return true;
+      return false;
+    },
+    durationString(): string {
+      if (this.duration <= 1) return '';
+      if (this.duration > 600000) {
+        return humanizeDuration(this.duration, {
+          language: 'short',
+          largest: 1,
+          round: true,
+          languages: {
+            short: {
+              y: () => 'years',
+              mo: () => 'months',
+              w: () => 'weeks',
+              d: () => 'days',
+              h: () => 'h',
+              m: () => 'min',
+              s: () => 'sec',
+              ms: () => 'ms',
+            },
+          },
+        });
+      }
+      return humanizeDuration(this.duration, {
+        language: 'short',
+        largest: 2,
+        round: true,
+        languages: {
+          short: {
+            m: () => 'min',
+            s: () => 'sec',
+            ms: () => 'ms',
+          },
+        },
+      });
+    },
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.podcast-item-info {
+  .text-secondary {
+    margin: 0.5rem !important;
+  }
+  .saooti-star-bounty {
+    font-size: 22px;
+  }
+  .title-podcast-item {
+    font-weight: 700;
+    margin: 0.25rem 0.5rem 0.5rem;
+    overflow: hidden;
+    display: -webkit-box;
+    flex-grow: 1;
+    font-size: 0.7rem;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    min-height: 3rem;
+    line-height: 1rem;
+    word-break: break-word;
+  }
+
+  .producer-podcast-item {
+    margin: 0.2rem 0.5rem 0.5rem;
+    font-size: 0.55rem;
+    color: #666;
+  }
+}
+}
+</style>

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

@@ -4,38 +4,39 @@
       :loading-text="loading?$t('Loading podcasts ...'):undefined"
       :error-text="loaded && !podcasts.length?$t(`No podcast match your query`):undefined"
     />
-    <div
-      v-if="showCount && loaded && podcasts.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
-    </div>
-    <ul
-      v-show="loaded"
-      class="podcast-list"
-    >
-      <PodcastItem
-        v-for="p in podcasts"
-        :key="p.podcastId"
-        :podcast="p"
-      />
-    </ul>
-    <button
-      v-show="!allFetched && loaded"
-      class="btn"
-      :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
-      :disabled="inFetching"
-      :title="$t('See more')"
-      @click="displayMore"
-    >
-      <template v-if="buttonPlus">
-        {{ $t('See more') }}
-      </template>
+    <template v-if="loaded">
       <div
-        :class="buttonPlus?'ms-1':''"
-        class="saooti-more"
-      />
-    </button>
+        v-if="showCount && podcasts.length > 1"
+        class="text-secondary mb-2"
+      >
+        {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
+      </div>
+      <ul
+        class="podcast-list"
+      >
+        <PodcastItem
+          v-for="p in podcasts"
+          :key="p.podcastId"
+          :podcast="p"
+        />
+      </ul>
+      <button
+        v-show="!allFetched"
+        class="btn"
+        :class="buttonPlus ? 'btn-link align-self-center width-fit-content m-4' : 'btn-more'"
+        :disabled="inFetching"
+        :title="$t('See more')"
+        @click="displayMore"
+      >
+        <template v-if="buttonPlus">
+          {{ $t('See more') }}
+        </template>
+        <div
+          :class="buttonPlus?'ms-1':''"
+          class="saooti-more"
+        />
+      </button>
+    </template>
   </div>
 </template>
 
@@ -93,7 +94,7 @@ export default defineComponent({
       inFetching: false as boolean,
     };
   },
-  
+
   computed: {
     allFetched(): boolean {
       return this.dfirst >= this.totalCount;
@@ -144,8 +145,8 @@ export default defineComponent({
     },
   },
   
-  created() {
-    this.fetchContent(true);
+  async created() {
+    await this.fetchContent(true);
   },
   methods: {
     async fetchContent(reset: boolean): Promise<void> {

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

@@ -32,7 +32,6 @@
 </template>
 
 <script lang="ts">
-import { Podcast } from '@/store/class/general/podcast';
 import DurationHelper from '../../../helper/duration';
 import { displayMethods } from '../../mixins/functions';
 import { state } from '../../../store/paramStore';
@@ -41,21 +40,22 @@ export default defineComponent({
   name: 'PodcastPlayBar',
   mixins: [displayMethods],
   props: {
-    podcast: { default: ()=>({}), type: Object as ()=>Podcast },
+    podcastId: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
   },
   computed: {
     isProgressBar(): boolean{
       return (state.emissionsPage.progressBar as boolean);
     },
     percentProgress(): number{
-      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){
         return 0;
       }
       if(!this.$store.state.player.elapsed){return 0;}
       return this.$store.state.player.elapsed * 100;
     },
     playedTime(): string{
-      if(this.$store.state.player.podcast && this.podcast.podcastId === this.$store.state.player.podcast.podcastId){
+      if(this.$store.state.player.podcast && this.podcastId === this.$store.state.player.podcast.podcastId){
         if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
           return DurationHelper.formatDuration(
             Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
@@ -65,12 +65,12 @@ export default defineComponent({
       return '00:00';
     },
     totalTime(): string {
-      return DurationHelper.formatDuration(Math.round(this.podcast.duration/1000));
+      return DurationHelper.formatDuration(Math.round(this.duration/1000));
     },
   },
   methods: {
     seekTo(event: MouseEvent): void {
-      if(!this.$store.state.player.podcast || this.podcast.podcastId !== this.$store.state.player.podcast.podcastId){return;}
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){return;}
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;

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

@@ -99,7 +99,7 @@ export default defineComponent({
       }
       this.customPlayers = this.customPlayers.concat(playersContent);
       if(trySelect && this.customPlayers[0] && this.customPlayers[0].selected){
-        this.$emit('update:iFrameModel',this.customPlayers[0].customId);
+        this.$emit('update:iFrameModel',this.customPlayers[0].customId.toString());
         return false;
       }
       return true;

package/src/components/misc/PlayerButtons.vue

@@ -4,7 +4,7 @@
     :to="podcastShareUrl"
   >
     <img
-      :src="podcastImage"
+      v-lazy="podcastImage"
       :alt="$t('Podcast image')"
       class="player-image"
     >

package/src/components/mixins/handle403.ts

@@ -5,7 +5,7 @@ export const handle403 = defineComponent({
     handle403(error: AxiosError): void {
       if (403 === error.response?.status) {
         if(!this.$store.state.authentication.isAuthenticated){
-          this.$router.push("/sso/login");
+          window.location.href = window.location.origin + "/sso/login";
         }else{
           this.$router.push({
             path: '/main/pub/error'

package/src/components/mixins/organisationFilter.ts

@@ -1,24 +1,31 @@
 
+import { handle403 } from '../mixins/handle403';
 import { Rubriquage } from "@/store/class/rubrique/rubriquage";
 import octopusApi from '@saooti/octopus-api';
 import { defineComponent } from 'vue'
+import { AxiosError } from 'axios';
 export const orgaFilter = defineComponent({
+  mixins: [handle403],
   methods: {
     async selectOrganisation(organisationId: string): Promise<void> {
-      const response = await octopusApi.fetchOrganisation(organisationId);
-      const data = await octopusApi.fetchTopics(organisationId, {
-        sort:'HOMEPAGEORDER',
-        homePageOrder: true
-      });
-      const isLive = await octopusApi.liveEnabledOrganisation(organisationId);
-      this.$store.commit('filterOrga', {
-        orgaId: organisationId,
-        imgUrl: response.imageUrl,
-        rubriquageArray: data.filter((element: Rubriquage)=>{
-          return element.rubriques.length;
-        }),
-        isLive: isLive
-      });
+      try {
+        const response = await octopusApi.fetchOrganisation(organisationId);
+        const data = await octopusApi.fetchTopics(organisationId, {
+          sort:'HOMEPAGEORDER',
+          homePageOrder: true
+        });
+        const isLive = await octopusApi.liveEnabledOrganisation(organisationId);
+        this.$store.commit('filterOrga', {
+          orgaId: organisationId,
+          imgUrl: response.imageUrl,
+          rubriquageArray: data.filter((element: Rubriquage)=>{
+            return element.rubriques.length;
+          }),
+          isLive: isLive
+        });
+      } catch (error) {
+        this.handle403((error as AxiosError));
+      }
     },
   },
 });

package/src/components/pages/Emission.vue

@@ -26,7 +26,7 @@
             <div class="mb-5 mt-3 descriptionText">
               <img
                 v-if="!isOuestFrance"
-                :src="imageUrl"
+                v-lazy="imageUrl"
                 :alt="$t('Emission name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >

package/src/components/pages/Participant.vue

@@ -14,12 +14,10 @@
       <div
         class="d-flex flex-column align-items-center mb-3"
       >
-        <div
+        <img
+          v-lazy="participant.imageUrl"
           class="img-box-circle mb-3"
-          :style="{
-            'background-image': 'url(\'' + participant.imageUrl + '\')',
-          }"
-        />
+        >
         <h2 class="text-capitalize">
           {{ name }}
         </h2>

package/src/components/pages/Playlist.vue

@@ -15,7 +15,7 @@
             <h2>{{ name }}</h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
-                :src="imageUrl"
+                v-lazy="imageUrl"
                 :alt="$t('Playlist name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >

package/src/locale/de.ts

@@ -41,7 +41,7 @@ export default{
   Cancel: "Abbrechen",
   'Most popular': "Beliebteste",
   'Last added': "Neueste",
-  'All podcast button': 'Alle Podcasts von "{Name}"',
+  'All podcast button': 'Alle Podcasts von "{name}"',
   'Podcast search': "Podcasts durchsuchen",
   'No podcast match your query':
     "Kein Podcast entspricht Ihrer Suchanfrage.",
@@ -70,7 +70,7 @@ export default{
   'Episode name image': "Bild zur Folge {name}",
   'More episodes of this emission': "Mehr Folgen aus dieser Reihe",
   'More episodes of this category : {name}': "Mehr Folgen aus dieser Kategorie: {name}",
-  'All podcast serie button': "Alle Folgen dieser Reihe",
+  'All podcast emission button': "Alle Folgen dieser Reihe",
   Duration: "Dauer: {duration}",
   Animator: "Autor",
   'No category filter': "Keine Kategorie",
@@ -240,9 +240,9 @@ export default{
   'All live emission button': "Alle Live-Übertragungen der Reihe",
   'player parameters': "Player-Einstellungen",
   'Start at': "Beginnt um",
-  'sort by score': "Nach Relevanz",
-  'sort by alphabetical': "In alphabetischer Reihenfolge",
-  'sort by date': "Nach Datum",
+  'sort by score': "nach Relevanz",
+  'sort by alphabetical': "in alphabetischer Reihenfolge",
+  'sort by date': "nach Datum",
   'Be the first to react': "Ersten Kommentar hinterlassen",
   "Podcast's comments": "Kommentare zum Podcast",
   '()': '({nb})',

package/src/locale/en.ts

@@ -41,7 +41,7 @@ export default{
   Cancel: 'Cancel',
   'Most popular': 'Most popular',
   'Last added': 'Last added',
-  'All podcast button': 'All the podcasts of "{name}"',
+  'All podcast button': 'All the podcasts from "{name}"',
   'Podcast search': 'Search in the podcasts',
   'No podcast match your query':
     'No podcast matches your query',
@@ -51,26 +51,26 @@ export default{
   'All productors': 'All producers',
   'All emissions': 'All series',
   'Filter by keyword : ': 'Filter by keyword : ',
-  'Look for participant name': 'Search for speaker by name',
-  'Look for productor name': 'Search for Producer by title',
-  'Look for emission name': 'Search for serie by title',
-  'Look for podcast name': 'Search for podcast by title',
+  'Look for participant name': 'Search for a speaker by name',
+  'Look for productor name': 'Search for a producer by title',
+  'Look for emission name': 'Search for a series by title',
+  'Look for podcast name': 'Search for a podcast by title',
   'Type string to filter by organisation': 'Filter by organization',
-  'Type string to filter by emission': 'Filter by serie',
+  'Type string to filter by emission': 'Filter by series',
   'Type string to filter by podcast': 'Filter by podcast',
   'No organisation filter': 'No organization filter',
-  'No emission filter': 'No serie filter',
+  'No emission filter': 'No series filter',
   'No podcast filter': 'No podcast filter',
   'Loading participants ...': 'Loading speakers...',
   'Loading productors ...': 'Loading Producers...',
   'Loading emissions ...': 'Loading series...',
-  'Emission name image': "Image for the serie {name}",
+  'Emission name image': "Image for the series {name}",
   'Loading content ...': 'Loading content...',
   Episode: 'Episode',
   'Episode name image': "Episode {name} image",
-  'More episodes of this emission': "More episodes of this serie",
-  'More episodes of this category : {name}': "More episodes of this category : {name}",
-  'All podcast serie button': "All podcast serie button",
+  'More episodes of this emission': "More episodes from this series",
+  'More episodes of this category : {name}': "More episodes from this category : {name}",
+  'All podcast emission button': "All podcast from this series",
   Duration: 'Duration : {duration}',
   Animator: 'Host',
   'No category filter': 'No category filter',
@@ -113,15 +113,15 @@ export default{
   'Search results': 'Search results for "{query}"',
   'Search - no results': 'Search - no results for "{query}"',
   Downloading: 'Downloading',
-  'Subscribe to this emission': "Subscribe to this serie",
+  'Subscribe to this emission': "Subscribe to this series",
   'Subscribe to this participant': "Subscribe to this speakers",
-  'Emission have not podcasts': "This serie does not have any podcasts",
+  'Emission have not podcasts': "This series does not have any podcasts",
   'Participant have not podcasts':
     'Speaker is not associated to any podcasts',
   'Default version': 'Default version',
   'Large version': 'Large version',
   'Emission version': 'Serie version',
-  'Large emission version': 'Large serie version',
+  'Large emission version': 'Large series version',
   'Large suggestion version': 'Large suggestion version',
   'Embed link': 'Embed miniplayer',
   'Embedly link': 'Player link',
@@ -184,7 +184,7 @@ export default{
     "Share this page without edit and share blocks",
   'Podcast in cancelled status': 'Podcast has a cancelled status',
   'Show every episode': 'Show every episode',
-  'Subscribe emission': "Subscribe to the serie",
+  'Subscribe emission': "Subscribe to the series",
   'Rss feed parameters': 'RSS Feed settings',
   'Not share episodes before':
     'Do not share episodes before',
@@ -206,7 +206,7 @@ export default{
   Configuration: 'Configuration',
   'HTML Code': 'HTML Code',
   'Listen this episode': 'Listen to this episode',
-  'Display emission name': "Display the serie title",
+  'Display emission name': "Display the series title",
   'Display participants list': 'Display the speakers list',
   'Choose main color': 'Choose the main color',
   'Octopus is ACPM Podcast accredited': 'Octopus is ACPM accredited',
@@ -237,7 +237,7 @@ export default{
   'Podcasts in the playlist': 'All the Podcasts in the playlist',
   'No podcasts in the playlist': "No podcasts in the playlist",
   'Start in a while': 'Starts any minute',
-  'All live emission button': "All lives in the serie",
+  'All live emission button': "All lives in the series",
   'player parameters': 'Setting of player',
   'Start at': 'Start at',
   'sort by score': 'by relevancy score',

package/src/locale/es.ts

@@ -70,7 +70,7 @@ export default{
   'Episode name image': "Imagen del episodio {name}",
   'More episodes of this emission': "Más episodios de este programa",
   'More episodes of this category : {name}': "Más episodios de esta categoría: {name}",
-  'All podcast serie button': "Todos los episodios del programa",
+  'All podcast emission button': "Todos los episodios del programa",
   Duration: 'Duración: {duration}',
   Animator: 'Presentador/a',
   'No category filter': 'Sin filtro de categoría',

package/src/locale/sl.ts

@@ -70,7 +70,7 @@ export default{
   'Episode name image': "Slika epizode {name}",
   'More episodes of this emission': "Več oddaj iz tega niza",
   'More episodes of this category : ': 'Več oddaj iz te kategorije", {name}',
-  'All podcast emission buttonn': "Vsi podkasti iz tega sklopa",
+  'All podcast emission button': "Vsi podkasti iz tega sklopa",
   Duration: 'Trajanje: {duration}',
   Animator: 'Napovedovalec',
   'No category filter': 'Brez filtra za kategorijo',

package/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import { VueReCaptcha } from 'vue-recaptcha-v3';
+import VueLazyLoad from 'vue3-lazyload';
 import App from './App.vue';
 import { createI18n, VueMessageType } from 'vue-i18n';
 import I18nResources from './locale/messages';
@@ -66,5 +67,6 @@ createApp(App)
 .use(i18n)
 .use(store)
 .use(router)
+.use(VueLazyLoad)
 .use(VueReCaptcha, { siteKey: '6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh' })
 .mount('#app');

package/src/store/paramStore.ts

@@ -12,7 +12,7 @@ const state:paramStore = {
     isPlaylist: false,
     isProduction: true,
     isContribution: true,
-    ApiUri: 'https://api.staging.saooti.org/',
+    ApiUri: 'https://api.dev2.saooti.org/',
     podcastmaker: false,
     buttonPlus: true,
     allCategories: [],
@@ -26,10 +26,10 @@ const state:paramStore = {
     SharePlayer: true,
     ShareButtons: true,
     ShareDistribution: true,
-    MiniplayerUri: 'https://playerbeta.staging.saooti.org/',
+    MiniplayerUri: 'https://playerbeta.dev2.saooti.org/',
     ouestFranceStyle: false,
     downloadButton: false,
-    hlsUri: 'https://hls.staging.saooti.org/',
+    hlsUri: 'https://hls.dev2.saooti.org/',
     mainRubrique: 0,
     resourceUrl: undefined
   },
@@ -85,10 +85,10 @@ const state:paramStore = {
     userName: '',
   },
   octopusApi: {
-    url: 'http://api.staging.saooti.org/',
-    commentsUrl: 'http://comments.staging.saooti.org/',
-    studioUrl: 'http://studio.staging.saooti.org/',
-    playerUrl: 'https://playerbeta.staging.saooti.org/',
+    url: 'http://api.dev2.saooti.org/',
+    commentsUrl: 'http://comments.dev2.saooti.org/',
+    studioUrl: 'http://studio.dev2.saooti.org/',
+    playerUrl: 'https://playerbeta.dev2.saooti.org/',
     organisationId: undefined,
     rubriqueIdFilter: undefined,
   },