@saooti/octopus-sdk 31.0.7 → 31.0.10

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
@@ -579,7 +582,6 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.5 Merge 30
  * 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

package/index.ts

@@ -56,6 +56,7 @@ import ClassicSearch from "./src/components/form/ClassicSearch.vue";
 import ClassicCheckbox from "./src/components/form/ClassicCheckbox.vue";
 import ClassicRadio from "./src/components/form/ClassicRadio.vue";
 import ClassicLoading from "./src/components/form/ClassicLoading.vue";
+import ClassicSelect from "./src/components/form/ClassicSelect.vue";
 
 //mixins
 import {selenium} from "./src/components/mixins/functions";
@@ -114,7 +115,8 @@ const components = {
     ClassicRadio,
     ClassicLoading,
     AdvancedSearch,
-    PodcastPlaylistInlineList
+    PodcastPlaylistInlineList,
+    ClassicSelect
 }
 
 export default components;
@@ -168,5 +170,6 @@ export {
     ClassicRadio,
     ClassicLoading,
     AdvancedSearch,
-    PodcastPlaylistInlineList
+    PodcastPlaylistInlineList,
+    ClassicSelect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "31.0.7",
+  "version": "31.0.10",
   "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>