@saooti/octopus-sdk 33.2.10 → 33.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "33.2.10",
+  "version": "33.2.12",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -12,9 +12,9 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
+        v-lazy="proxyImageUrl(emission.imageUrl, '260')"
         width="260"
         height="260"
-        v-lazy="proxyImageUrl(emission.imageUrl, '260')"
         class="img-box"
         :title="$t('Emission name image', {name:emission.name})"
         :alt="$t('Emission name image', {name:emission.name})"

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

@@ -20,9 +20,9 @@
         class="img-box rounded-0"
       >
         <img
+          v-lazy="proxyImageUrl(emission.imageUrl, '260')"
           width="260"
           height="260"
-          v-lazy="proxyImageUrl(emission.imageUrl, '260')"
           :title="$t('Emission name image', {name:emission.name})"
           :alt="$t('Emission name image', {name:emission.name})"
           class="img-box rounded-0"

package/src/components/display/filter/DateFilter.vue

@@ -16,7 +16,7 @@
       <ClassicDatePicker
         class="ps-3 pe-3"
         :date="fromDate"
-        templateClass="px-2 py-1 border rounded focus:border-blue-300"
+        template-class="px-2 py-1 border rounded focus:border-blue-300"
         @updateDate="fromDate=$event;updateFromDate"
       />
     </div>
@@ -30,7 +30,7 @@
       <ClassicDatePicker
         class="ps-3"
         :date="toDate"
-        templateClass="px-2 py-1 border rounded focus:border-blue-300"
+        template-class="px-2 py-1 border rounded focus:border-blue-300"
         @updateDate="toDate=$event;updateToDate"
       />
     </div>

package/src/components/display/filter/ProductorSearch.vue

@@ -30,11 +30,12 @@
       </div>
     </div>
     <ClassicSearch
-      v-model:textInit="queryIntern"
+      :text-init="searchPattern"
       class="d-flex align-items-center flex-grow-1"
       :autofocus="true"
       id-checkbox="productor-search-input"
       :label="searchText"
+      @update:textInit="$emit('update:searchPattern', $event)"
     />
   </div>
 </template>
@@ -60,16 +61,14 @@ export default defineComponent({
     searchPattern: { default: '', type: String },
     type: { default: 'podcast', type: String },
   },
-  emits: ['updateOrganisationId', 'updateSearchPattern'],
+  emits: ['update:organisationId', 'update:searchPattern'],
 
   data() {
     return {
       keepOrganisation: false as boolean,
       showBubble: false as boolean,
-      queryIntern: '' as string,
     };
   },
- 
   computed: {
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
@@ -85,22 +84,14 @@ export default defineComponent({
     },
   },
   watch: {
-    queryIntern(): void {
-      if(this.queryIntern !== this.searchPattern){
-        this.$emit('updateSearchPattern', this.queryIntern);
-      }
-    },
     filterOrga():void{
       this.keepOrganisation = undefined!==this.filterOrga;
       if (this.filterOrga) {
-        this.$emit('updateOrganisationId', this.filterOrga);
+        this.$emit('update:organisationId', this.filterOrga);
       }
     },
   },
   async created() {
-    if(this.searchPattern){
-      this.queryIntern=this.searchPattern;
-    }
     if (!this.organisationId) return;
     if(this.$store.state.filter.organisationId === this.organisationId){
       this.keepOrganisation = true;
@@ -114,7 +105,7 @@ export default defineComponent({
       this.$store.commit('filterOrga', {orgaId: undefined});
       this.keepOrganisation = false;
       if (organisation && organisation.id) {
-        this.$emit('updateOrganisationId', organisation.id);
+        this.$emit('update:organisationId', organisation.id);
         if("PUBLIC"!==organisation.privacy){
           this.$nextTick(() => {
             this.onKeepOrganisation();
@@ -126,7 +117,7 @@ export default defineComponent({
           }, 6000);
         }
       } else {
-        this.$emit('updateOrganisationId', undefined);
+        this.$emit('update:organisationId', undefined);
       }
     },
     async onKeepOrganisation(): Promise<void> {

package/src/components/display/list/Paginate.vue

@@ -7,8 +7,9 @@
       <label for="rows-per-page-select">{{ $t('Items per page :') }}</label>
       <select
         id="rows-per-page-select"
-        v-model="rowsPerPageIntern"
+        :model-value="rowsPerPage"
         class="c-hand p-1 mx-2"
+        @update:modelValue="$emit('update:rowsPerPage',$event)"
       >
         <option
           v-for="option in optionsRowsPerPage"
@@ -57,7 +58,7 @@
             v-else
             class="btn"
             :class="{ 'active': page === (pageNumber-1) }"
-            @click="changeFirst((pageNumber-1)*rowsPerPageIntern)"
+            @click="changeFirst((pageNumber-1)*rowsPerPage)"
           >
             {{ pageNumber }}
           </button>
@@ -87,26 +88,26 @@
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: "Paginate",
-  components: {
-  },
+
 	props: {
     totalCount: { default: 0, type: Number },
     first: { default: 0, type: Number },
 		rowsPerPage:{ default:0, type:Number},
     rangeSize:{default:1, type: Number}
   },
+
 	emits:['update:first', 'update:rowsPerPage'],
+
   data() {
     return {
-			rowsPerPageIntern: 30 as number,
 			optionsRowsPerPage: [5, 10, 15, 20, 25 , 30, 50] as Array<number>,
 		};
   },
+  
 	computed:{
     buttonsLeft(){
       return [{
@@ -144,18 +145,6 @@ export default defineComponent({
 			return (this.totalPage-1)*this.rowsPerPage;
 		}
 	},
-	watch: {
-    rowsPerPageIntern(){
-			if(this.rowsPerPage !== this.rowsPerPageIntern){
-				this.$emit('update:rowsPerPage', this.rowsPerPageIntern);
-			}
-		},
-		rowsPerPage(){
-			if(this.rowsPerPage !== this.rowsPerPageIntern){
-				this.rowsPerPageIntern =this.rowsPerPage;
-			}
-		}
-  },
 	created(){
 		this.initRowsPerPage();
 	},
@@ -189,11 +178,11 @@ export default defineComponent({
       return res;
     },
     initRowsPerPage(){
-      if(!this.optionsRowsPerPage.includes(this.rowsPerPage)){
-        this.optionsRowsPerPage.push(this.rowsPerPage);
-        this.optionsRowsPerPage.sort((a,b)=>a-b);
+      if(this.optionsRowsPerPage.includes(this.rowsPerPage)){
+        return;
       }
-      this.rowsPerPageIntern = this.rowsPerPage;
+      this.optionsRowsPerPage.push(this.rowsPerPage);
+      this.optionsRowsPerPage.sort((a,b)=>a-b);
     },
 		changeFirst(newFirst: number){
 			this.$emit('update:first', newFirst);

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

@@ -44,10 +44,10 @@
       <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
           <img
-            width="32"
-            height="32"
             v-if="!light"
             v-lazy="proxyImageUrl(option.imageUrl, '32')"
+            width="32"
+            height="32"
             class="option__image"
             :alt="option.name"
           >
@@ -66,10 +66,10 @@
           "
         >
           <img
-            width="32"
-            height="32"
             v-if="!light"
             v-lazy="proxyImageUrl(option.imageUrl, '32')"
+            width="32"
+            height="32"
             class="option__image"
             :alt="option.name"
           >

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

@@ -80,10 +80,10 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.organisation-chooser-light select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
+  .organisation-chooser-light select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
 }
 </style>

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

@@ -13,9 +13,9 @@
       :title="$t('Participant')"
     >
       <img
+        v-lazy="proxyImageUrl(participant.imageUrl, '200')"
         width="200"
         height="200"
-        v-lazy="proxyImageUrl(participant.imageUrl, '200')"
         :title="$t('Animator image')"
         :alt="$t('Animator image')"
         class="img-box-circle"

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

@@ -13,9 +13,9 @@
       class="d-flex flex-grow-1 text-dark"
     >
       <img
+        v-lazy="proxyImageUrl(playlist.imageUrl, '260')"
         width="260"
         height="260"
-        v-lazy="proxyImageUrl(playlist.imageUrl, '260')"
         :title="$t('Playlist name image', {name:name})"
         :alt="$t('Playlist name image', {name:name})"
         class="img-box"

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

@@ -4,9 +4,9 @@
     class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
   >
     <img
+      v-lazy="proxyImageUrl(podcast.imageUrl,'260')"
       width="260"
       height="260"
-      v-lazy="proxyImageUrl(podcast.imageUrl,'260')"
       class="img-box"
       :alt="$t('Episode name image', {name:podcast.title})"
     >

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

@@ -33,17 +33,20 @@
       />
     <!-- eslint-enable -->
     </div>
-    <PodcastItemInfo
-      :podcast-id="podcast.podcastId"
-      :title="podcast.title"
-      :pub-date="podcast.pubDate"
-      :podcast-organisation-id="podcast.organisation.id"
-      :podcast-organisation-name="podcast.organisation.name"
-      :duration="podcast.duration"
-      :animators="podcast.animators"
+    <div
       @mouseenter="showDescription"
       @mouseleave="hideDescription"
-    />
+    >
+      <PodcastItemInfo
+        :podcast-id="podcast.podcastId"
+        :title="podcast.title"
+        :pub-date="podcast.pubDate"
+        :podcast-organisation-id="podcast.organisation.id"
+        :podcast-organisation-name="podcast.organisation.name"
+        :duration="podcast.duration"
+        :animators="podcast.animators"
+      />
+    </div>
   </div>
 </template>
 

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

@@ -22,7 +22,7 @@
     }"
     class="text-dark flex-grow-1 title-podcast-item"
   >
-  {{ title }}
+    {{ title }}
   </router-link>
   <PodcastPlayBar
     :podcast-id="podcastId"
@@ -30,7 +30,10 @@
     class="mx-2"
   />
   <div class="d-flex justify-content-between">
-    <div v-if="isPodcastmaker" class="useless-div-for-podcastmaker" />
+    <div
+      v-if="isPodcastmaker"
+      class="useless-div-for-podcastmaker"
+    />
     <router-link
       v-if="!isPodcastmaker"
       :to="{

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

@@ -16,9 +16,9 @@
         role="button"
       >
         <img
+          v-if="isOuestFranceTag(tag)"
           width="20"
           height="20"
-          v-if="isOuestFranceTag(tag)"
           class="ouest-france-logo"
           alt="Ouest France Logo"
           src="/img/ouest_france_logo.svg"

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

@@ -3,23 +3,25 @@
     <div class="d-flex flex-column align-items-center flex-shrink-0 me-3">
       <div>{{ $t('Choose color') }}</div>
       <VSwatches
-        v-model="internColor"
+        :model-value="color"
         class="c-hand "
         show-fallback
         colors="text-advanced"
         popover-to="right"
-        :data-color="internColor"
+        :data-color="color"
+        @update:modelValue="$emit('update:color',$event)"
       />
     </div>
     <div class="d-flex flex-column align-items-center">
       <div>{{ $t('Choose theme') }}</div>
       <VSwatches
-        v-model="internTheme"
+        :model-value="theme"
         class="c-hand "
         show-fallback
         colors="text-advanced"
         popover-to="right"
-        :data-color="internTheme"
+        :data-color="theme"
+        @update:modelValue="$emit('update:theme',$event)"
       />
     </div>
   </div>
@@ -39,40 +41,5 @@ export default defineComponent({
     theme: { default: '#000000', type: String},
   },
   emits:['update:color', 'update:theme'],
-
-  data() {
-    return {
-      internColor:'#40a372' as string,
-      internTheme:'#000000' as string,
-    };
-  },
-  watch:{
-    internColor(){
-      if(this.color !== this.internColor){
-        this.$emit('update:color', this.internColor);
-      }
-    },
-    internTheme(){
-      if(this.theme !== this.internTheme ){
-        this.$emit('update:theme', this.internTheme);
-      }
-    },
-    theme: {
-      immediate: true,
-      handler() {
-        if(this.theme !== this.internTheme){
-          this.internTheme = this.theme;
-        }
-      },
-    },
-    color: {
-      immediate: true,
-      handler() {
-        if(this.color !== this.internColor){
-          this.internColor = this.color;
-        }
-      },
-    },
-  },
 })
 </script>

package/src/components/form/ClassicCheckbox.vue

@@ -5,17 +5,18 @@
     >
       <input
         :id="idCheckbox"
-        v-model="textValue"
+        :model-value="textInit"
         type="checkbox"
         :disabled="isDisabled"
         :title="displayLabel?'':label"
         :data-selenium="selenium"
+        @update:modelValue="$emit('update:textInit',$event)"
         @click="emitClickAction"
       >
       <span
         v-if="isSwitch"
         class="slider"
-        @click="textValue=!textValue;emitClickAction"
+        @click="$emit('update:textInit',!textInit);emitClickAction"
       />
     </div>
     <label
@@ -41,27 +42,6 @@ export default defineComponent({
     selenium: { default: '', type: String },
   },
   emits: ['update:textInit', 'clickAction'],
-
-  data() {
-    return {
-      textValue: false as boolean,
-    };
-  },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-					this.textValue =this.textInit;
-					}
-      },
-    },
-  },
   methods:{
     emitClickAction():void{
       this.$emit('clickAction');

package/src/components/form/ClassicDatePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <DatePicker
     ref="datePicker"
-    :modelValue="undefined!==range ? range : date"
+    :model-value="undefined!==range ? range : date"
     :mode="mode"
     color="green"
     is24hr
@@ -14,7 +14,10 @@
     :masks="isMask ? masks : undefined"
     @update:modelValue="$emit('updateDate', $event)"
   >
-    <template v-if="templateClass" #default="{ inputValue, inputEvents }">
+    <template
+      v-if="templateClass"
+      #default="{ inputValue, inputEvents }"
+    >
       <input
         :class="templateClass"
         :value="inputValue"

package/src/components/form/ClassicRadio.vue

@@ -11,11 +11,12 @@
     >
       <input
         :id="idRadio + option.value"
-        v-model="textValue"
+        :model-value="textInit"
         type="radio"
         :name="idRadio"
         :value="option.value"
         :disabled="isDisabled"
+        @update:modelValue="$emit('update:textInit',$event)"
       >
       <label
         class="c-hand"
@@ -40,27 +41,6 @@ export default defineComponent({
     isColumn: {default:true, type:Boolean}
   },
   emits: ['update:textInit'],
-
-  data() {
-    return {
-      textValue: undefined as string|undefined,
-    };
-  },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-          this.textValue =this.textInit;
-          }
-      },
-    },
-  }
 });
 </script>
 <style lang="scss">

package/src/components/form/ClassicSearch.vue

@@ -3,24 +3,25 @@
     <input
       :id="idSearch"
       ref="search"
-      v-model="textValue"
+      :model-value="textInit"
       type="text"
       class="search-input w-100 p-2 "
       :placeholder="label"
       :autofocus="autofocus"
+      @update:modelValue="$emit('update:textInit',$event)"
     >
     <label
       :for="idSearch"
       :title="label"
     />
     <div
-      v-if="!textValue"
+      v-if="!textInit"
       class="saooti-search search-icon-container"
     />
     <div
       v-else
       class="saooti-remove search-icon-container c-hand"
-      @click="textValue = ''"
+      @click="$emit('update:textInit','')"
     />
   </div>
 </template>
@@ -37,27 +38,6 @@ export default defineComponent({
   },
 
   emits: ['update:textInit'],
-
-  data() {
-    return {
-      textValue: '' as string,
-    };
-  },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-          this.textValue =this.textInit;
-          }
-      },
-    },
-  }
 });
 </script>
 <style lang="scss">

package/src/components/form/ClassicSelect.vue

@@ -7,11 +7,12 @@
     >{{ label }}</label>
     <select
       :id="idSelect"
-      v-model="textValue"
+      :model-value="textInit"
       :disabled="isDisabled"
       class="c-hand w-100"
       :class="transparent?'transparent':''"
       :style="getFontFamily"
+      @update:modelValue="$emit('update:textInit',$event)"
     >
       <option
         v-for="option in options"
@@ -38,15 +39,10 @@ export default defineComponent({
     textInit: { default: undefined, type: String },
   },
   emits: ['update:textInit'],
-  data() {
-    return {
-      textValue: undefined as string|undefined,
-    };
-  },
   computed:{
     getFontFamily(): string{
       const item = this.options.find((x) => {
-        return this.textValue === x.value;
+        return this.textInit === x.value;
       });
       if(item && item.fontFamily){
         return 'font-family:'+item.fontFamily;
@@ -54,21 +50,6 @@ export default defineComponent({
       return "";
     }
   },
-  watch: {
-    textValue(){
-			if(this.textInit !== this.textValue){
-				this.$emit('update:textInit', this.textValue)
-			}
-		},
-    textInit: {
-      immediate: true,
-      handler() {
-        if(this.textInit !== this.textValue){
-          this.textValue =this.textInit;
-        }
-      },
-    },
-  },
 });
 </script>
 <style lang="scss">

package/src/components/misc/Accordion.vue

@@ -14,9 +14,9 @@
         :class="icon"
       />
       <img
+        v-if="imageUrl"
         width="30"
         height="30"
-        v-if="imageUrl"
         class="img-accordion"
         :src="imageUrl"
         :alt="title"

package/src/components/misc/Footer.vue

@@ -4,7 +4,10 @@
     ref="footer"
     class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
-    <div class="d-flex align-items-center px-1" v-if="!isPodcastmaker">
+    <div
+      v-if="!isPodcastmaker"
+      class="d-flex align-items-center px-1"
+    >
       <div class="text-dark me-2">
         &copy; Saooti 2019
       </div>
@@ -23,11 +26,11 @@
         :label="$t('Change locale')"
         :transparent="true"
         :options="[{title:'Deutsch', value:'de'},
-                    {title:'English', value:'en'},
-                    {title:'Español', value:'es'},
-                    {title:'Français', value:'fr'},
-                    {title:'Italiano', value:'it'},
-                    {title:'Slovenščina', value:'sl'}]"
+                   {title:'English', value:'en'},
+                   {title:'Español', value:'es'},
+                   {title:'Français', value:'fr'},
+                   {title:'Italiano', value:'it'},
+                   {title:'Slovenščina', value:'sl'}]"
       />
     </div>
     <a

package/src/components/misc/Nav.vue

@@ -1,5 +1,8 @@
 <template>
-  <ul class="octopus-nav" :class="light?'light':''">
+  <ul
+    class="octopus-nav"
+    :class="light?'light':''"
+  >
     <li
       v-for="index in tabNumber"
       v-show="hasSlot(index-1)"
@@ -23,7 +26,10 @@
       class="octopus-tab-pane"
       :class="activeTab === (index-1)? 'active':''"
     >
-      <slot :name="'tab'+(index-1)" :isActive="activeTab === (index-1)" />
+      <slot
+        :name="'tab'+(index-1)"
+        :isActive="activeTab === (index-1)"
+      />
     </div>
   </div>
 </template>

package/src/components/misc/Popover.vue

@@ -110,7 +110,7 @@ export default defineComponent({
 							if("true"===myElement.getAttribute('reallink')){
 								await myElement.click();
 							}else{
-								await this.$router.push((myElement as any).pathname);
+								await this.$router.push((myElement as HTMLAnchorElement).pathname);
 							}
 						}
 						this.$nextTick(() => {

package/src/components/misc/player/PlayerCompact.vue

@@ -7,9 +7,9 @@
       :to="podcastShareUrl"
     >
       <img
+        v-lazy="proxyImageUrl(podcastImage,'48')"
         width="48"
         height="48"
-        v-lazy="proxyImageUrl(podcastImage,'48')"
         :alt="$t('Podcast image')"
         class="player-image"
       >

package/src/components/misc/player/PlayerLarge.vue

@@ -12,9 +12,9 @@
       :to="podcastShareUrl"
     >
       <img
+        v-lazy="proxyImageUrl(podcastImage,'200')"
         width="200"
         height="200"
-        v-lazy="proxyImageUrl(podcastImage,'200')"
         :alt="$t('Podcast image')"
         class="img-box"
       >

package/src/components/pages/Emission.vue

@@ -19,9 +19,9 @@
             </h2>
             <div class="mb-5 mt-3 descriptionText">
               <img
+                v-lazy="proxyImageUrl(imageUrl, '260')"
                 width="260"
                 height="260"
-                v-lazy="proxyImageUrl(imageUrl, '260')"
                 :alt="$t('Emission name image', { name: name })"
                 class="img-box shadow-element float-start me-3 mb-3"
               >

package/src/components/pages/Emissions.vue

@@ -4,7 +4,7 @@
     <ProductorSearch
       v-if="isProductorSearch"
       v-model:organisationId="organisationId"
-      :search-pattern="searchPattern"
+      v-model:search-pattern="searchPattern"
       type="emission"
       @updateOrganisationId="updateOrganisationId"
       @updateSearchPattern="updateSearchPattern"
@@ -27,8 +27,8 @@
     />
     <EmissionList
       :show-count="true"
-      :first="first"
-      :size="size"
+      :first="0"
+      :size="30"
       :query="searchPattern"
       :organisation-id="organisationId"
       :monetization="monetization"
@@ -66,8 +66,7 @@ export default defineComponent({
 
   data() {
     return {
-      first: 0 as number,
-      size: 30 as number,
+      isInit: false as boolean,
       searchPattern: '' as string,
       organisationId: undefined as string | undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -99,6 +98,18 @@ export default defineComponent({
       return this.organisationId?this.organisationId:this.filterOrga;
     },
   },
+  watch:{
+    organisationId(): void {
+      if(!this.isInit){return;}
+      this.resetRubriquage = !this.resetRubriquage;
+      this.rubriquageId = [];
+      this.rubriqueId = [];
+      this.noRubriquageId = [];
+    },
+    searchPattern(value: string): void {
+      this.sortEmission = '' !== value ? 'SCORE' : 'DATE';
+    },
+  },
 
   created() {
     this.initComponent();
@@ -132,17 +143,6 @@ export default defineComponent({
       this.rubriqueId = rubriqueId;
       this.noRubriquageId = noRubriquageId;
     },
-    updateOrganisationId(value: string | undefined): void {
-      this.resetRubriquage = !this.resetRubriquage;
-      this.rubriquageId = [];
-      this.rubriqueId = [];
-      this.noRubriquageId = [];
-      this.organisationId = value;
-    },
-    updateSearchPattern(value: string): void {
-      this.sortEmission = '' !== value ? 'SCORE' : 'LAST_PODCAST_DESC';
-      this.searchPattern = value;
-    },
   },
 })
 </script>

package/src/components/pages/Participant.vue

@@ -10,9 +10,9 @@
         class="d-flex flex-column align-items-center mb-3"
       >
         <img
+          v-lazy="proxyImageUrl(participant.imageUrl, '200')"
           width="200"
           height="200"
-          v-lazy="proxyImageUrl(participant.imageUrl, '200')"
           :title="$t('Animator image')"
           :alt="$t('Animator image')"
           class="img-box-circle mb-3"

package/src/components/pages/Participants.vue

@@ -2,11 +2,9 @@
   <div class="page-box">
     <h1>{{ titleDisplay }}</h1>
     <ProductorSearch
-      :organisation-id="organisationId"
-      :search-pattern="searchPattern"
+      v-model:organisation-id="organisationId"
+      v-model:search-pattern="searchPattern"
       type="participant"
-      @updateOrganisationId="organisationId = $event"
-      @updateSearchPattern="searchPattern = $event"
     />
     <ParticipantList
       :show-count="true"

package/src/components/pages/Playlist.vue

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

package/src/components/pages/Playlists.vue

@@ -13,10 +13,8 @@
     <ProductorSearch
       v-if="isProductorSearch"
       v-model:organisationId="organisationId"
-      :search-pattern="searchPattern"
+      v-model:search-pattern="searchPattern"
       type="playlist"
-      @updateOrganisationId="organisationId = $event"
-      @updateSearchPattern="searchPattern = $event"
     />
     <PlaylistList
       :show-count="true"

package/src/components/pages/Podcasts.vue

@@ -19,10 +19,8 @@
     </div>
     <ProductorSearch
       v-if="pageParameters.isProductorSearch"
-      :organisation-id="organisationId"
-      :search-pattern="searchPattern"
-      @updateOrganisationId="updateOrganisationId"
-      @updateSearchPattern="updateSearchPattern"
+      v-model:organisation-id="organisationId"
+      v-model:search-pattern="searchPattern"
     />
     <AdvancedSearch
       :is-education="isEducation"
@@ -43,8 +41,8 @@
     />
     <PodcastList
       :show-count="true"
-      :first="first"
-      :size="size"
+      :first="0"
+      :size="30"
       :organisation-id="organisationId"
       :query="searchPattern"
       :monetization="monetization"
@@ -89,8 +87,7 @@ export default defineComponent({
   },
   data() {
     return {
-      first: 0 as number,
-      size: 30 as number,
+      isInit: false as boolean,
       searchPattern: '' as string,
       organisationId: undefined as string|undefined,
       monetization: 'UNDEFINED' as string, // UNDEFINED, YES, NO
@@ -126,11 +123,21 @@ export default defineComponent({
       }
     }
   },
-
+  watch:{
+    organisationId(): void {
+      if(!this.isInit){return;}
+      this.resetRubriquage = !this.resetRubriquage;
+      this.rubriquageId = [];
+      this.rubriqueId = [];
+      this.noRubriquageId = [];
+    },
+    searchPattern(value: string): void {
+      this.sortCriteria = '' !== value ? 'SCORE' : 'DATE';
+    },
+  },
   created() {
     this.initPodcastsPage();
   },
-  
   methods: {
     initPodcastsPage(){
       this.searchPattern = this.searchInit ?? '';
@@ -140,6 +147,7 @@ export default defineComponent({
       if(this.$store.state.filter.rubriqueFilter.length){
         this.updateRubriquageFilter(this.$store.state.filter.rubriqueFilter);
       }
+      this.isInit=true;
     },
     updateRubriquageFilter(value: Array<RubriquageFilter>){
       const length = value.length;
@@ -159,17 +167,6 @@ export default defineComponent({
       this.rubriqueId = rubriqueId;
       this.noRubriquageId = noRubriquageId;
     },
-    updateOrganisationId(value: string): void {
-      this.resetRubriquage = !this.resetRubriquage;
-      this.rubriquageId = [];
-      this.rubriqueId = [];
-      this.noRubriquageId = [];
-      this.organisationId = value;
-    },
-    updateSearchPattern(value: string): void {
-      this.sortCriteria = '' !== value ? 'SCORE' : 'DATE';
-      this.searchPattern = value;
-    },
     emissionSelected(emission: Emission): void {
       this.emissionId = emission && emission.emissionId ? emission.emissionId : undefined;
     },