@saooti/octopus-sdk 31.0.6 → 31.0.9

package/README.md

@@ -567,6 +567,9 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.68 Parlement européen
  * 30.0.69 Parlement européen
  * 30.0.70 Améliorations 30
+ * 30.0.71 Parlement européen
+ * 30.0.72 Ajout des traductions
+ * 30.0.73 Ajout classe css 
 
  * 31.0.0 Passage en 31
  * 31.0.1 Ajout pocket casts
@@ -575,7 +578,10 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.4 Selection des customPlayers
  * 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
 
 
  
+

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.6",
+  "version": "31.0.9",
   "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.0",
+    "@saooti/octopus-api": "^0.31.1",
     "@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/filter/ProductorSearch.vue

@@ -119,7 +119,7 @@ export default defineComponent({
       this.keepOrganisation = false;
       if (organisation && organisation.id) {
         this.$emit('updateOrganisationId', organisation.id);
-        if(organisation.private){
+        if(organisation.privacy){
           this.$nextTick(() => {
             this.onKeepOrganisation();
           });

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/organisation/OrganisationChooserLight.vue

@@ -82,7 +82,7 @@ export default defineComponent({
       const data = await octopusApi.fetchOrganisation(this.value);
       this.organisation = data;
       this.actual = data.id;
-      this.privateOrganisation = data.private??false;
+      this.privateOrganisation = "PUBLIC"!==data.privacy;
       this.init = true;
     },
   },

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/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/PodcastPlaylistInlineList.vue

@@ -49,9 +49,9 @@
     <router-link
       class="btn btn-link align-self-center width-fit-content m-4"
       :to="{
-          name: 'playlist',
-          params: { playlistId: playlistId.toString() },
-        }"
+        name: 'playlist',
+        params: { playlistId: playlistId.toString() },
+      }"
     >
       {{ $t('See more') }}
       <div

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/PodcastInlineList.vue

@@ -8,17 +8,17 @@
       <div class="d-flex">
         <button
           class="btn btn-underline"
-          :class="{ active: popularSort }"
-          @click="sortPopular()"
+          :class="{ active: !popularSort }"
+          @click="sortChrono()"
         >
-          {{ $t('Most popular') }}
+          {{ $t('Last added') }}
         </button>
         <button
           class="btn btn-underline"
-          :class="{ active: !popularSort }"
-          @click="sortChrono()"
+          :class="{ active: popularSort }"
+          @click="sortPopular()"
         >
-          {{ $t('Last added') }}
+          {{ $t('Most popular') }}
         </button>
       </div>
       <div
@@ -68,6 +68,7 @@
     <router-link
       class="btn btn-link align-self-center width-fit-content m-4"
       :to="refTo"
+      @click="handleSeeMoreButton"
     >
       {{ buttonText }}
       <div
@@ -91,6 +92,7 @@ import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 import { RouteLocationRaw } from 'vue-router';
 import { AxiosError } from 'axios';
+import { Rubrique } from '@/store/class/rubrique/rubrique';
 export default defineComponent({
   name: 'PodcastInlineList',
   
@@ -126,7 +128,7 @@ export default defineComponent({
       first: 0 as number,
       size: 5 as number,
       totalCount: 0 as number,
-      popularSort: true as boolean,
+      popularSort: false as boolean,
       allPodcasts: [] as Array<Podcast>,
       direction: 1 as number,
       alignLeft: false as boolean,
@@ -214,6 +216,26 @@ export default defineComponent({
     this.fetchNext();
   },
   methods: {
+    handleSeeMoreButton(event: { preventDefault: () => void; }){
+      if(!this.rubriqueId || this.noRubriquageId.length){
+        return;
+      }
+      event.preventDefault();
+      const rubriqueChosenId = this.rubriqueId[this.rubriqueId.length - 1];
+      const rubriqueChosen =  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
+      const filterToAdd = {
+        rubriquageId: this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriquageId, 
+        rubriqueId: rubriqueChosenId, 
+        nameRubriquage:  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].title,
+        nameRubrique: rubriqueChosen.name
+      };
+      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
+      newFilter.push(filterToAdd);
+      this.$store.commit('filterRubrique', newFilter);
+      const queries = this.$route.query;
+      const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
+      this.$router.push({ name: 'podcasts',query: { ...queries, ...{ rubriquesId: queryString }} });
+    },
     async fetchNext(): Promise<void> {
       try {
         const data = await octopusApi.fetchPodcasts({

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;
   }