@saooti/octopus-sdk 35.1.7 → 35.2.0

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

@@ -33,7 +33,9 @@ import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import PlaylistItem from './PlaylistItem.vue';
 import { Playlist, emptyPlaylistData } from '@/store/class/general/playlist';
-import { defineComponent } from 'vue'
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import { defineComponent } from 'vue';
 import { AxiosError } from 'axios';
 export default defineComponent({
   name: 'PlaylistList',
@@ -63,9 +65,9 @@ export default defineComponent({
       isMobile: false as boolean,
     };
   },
-
   
   computed: {
+    ...mapState(useFilterStore, ['filterOrgaId']),
     displayArray(): Array<Playlist>{
       if(this.isMobile){
         return this.playlists;
@@ -79,7 +81,7 @@ export default defineComponent({
       return !this.query ?'NAME': 'SCORE';
     },
     organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.$store.state.filter.organisationId;
+      return this.organisationId ?this.organisationId: this.filterOrgaId;
     },
   },
   watch: {

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

@@ -46,7 +46,7 @@ import { handle403 } from '../../mixins/handle403';
 import { orgaComputed } from '../../mixins/orgaComputed';
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import ClassicSearch from '../../form/ClassicSearch.vue';
 import { Podcast } from '@/store/class/general/podcast';
 import { Playlist } from '@/store/class/general/playlist';

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

@@ -63,7 +63,7 @@ import domHelper from '../../../helper/dom';
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 const PHONE_WIDTH = 960;
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import { Podcast } from '@/store/class/general/podcast';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'

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

@@ -7,7 +7,7 @@
       :to="{
         name: 'participant',
         params: { participantId: animator.participantId },
-        query: { productor: $store.state.filter.organisationId },
+        query: { productor: filterOrgaId },
       }"
       :title="$t('Participant')"
       class="podcast-item-animator text-dark"
@@ -19,7 +19,9 @@
 
 <script lang="ts">
 import { Participant } from '@/store/class/general/participant';
-import { defineComponent } from 'vue'
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'AnimatorsItem',
 
@@ -27,6 +29,7 @@ export default defineComponent({
     animator: { default: undefined, type: Object as ()=> Participant},
   },
   computed:{
+    ...mapState(useFilterStore, ['filterOrgaId']),
     animatorName(): string{
       return (`${this.animator?.firstName??''} ${this.animator?.lastName??''}`).trim();
     }

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

@@ -41,7 +41,7 @@
         name: 'participant',
         params: { participantId: participant.participantId },
         query: {
-          productor: $store.state.filter.organisationId,
+          productor: filterOrgaId,
         },
       }"
     >
@@ -53,7 +53,9 @@
 <script lang="ts">
 import Popover from '../../misc/Popover.vue';
 import { Participant } from '@/store/class/general/participant';
-import { defineComponent } from 'vue'
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'ParticipantDescription',
 
@@ -67,6 +69,7 @@ export default defineComponent({
   },
 
   computed:{
+    ...mapState(useFilterStore, ['filterOrgaId']),
     idPopover(): string{
       return this.isGuest ? "popover-guests-help" : "popover-animators-help";
     },

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

@@ -88,12 +88,12 @@
 </template>
 
 <script lang="ts">
-import { mapState } from 'vuex';
-import { state } from '../../../store/paramStore';
-import {StoreState} from '@/store/classStore/typeAppStore';
+import { state } from '../../../stores/ParamSdkStore';
 import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 import imageProxy from '../../mixins/imageProxy';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState, mapActions } from 'pinia';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastImage',
@@ -113,19 +113,14 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState({
-      playingPodcast(state: StoreState) {
-        return (
-          (state.player.podcast &&
-            state.player.podcast.podcastId === this.podcast.podcastId) ||
-          (this.fetchConference &&
-            'null' !== this.fetchConference &&
-            state.player.live &&
-            state.player.live.conferenceId ===
-              this.fetchConference.conferenceId)
-        );
-      },
-    }),
+    ...mapState(usePlayerStore, ['playerPodcast', 'playerLive', 'playerStatus']),
+    playingPodcast(){
+      return (
+        (this.playerPodcast?.podcastId === this.podcast.podcastId) ||
+        (this.fetchConference && 'null' !== this.fetchConference.toString() &&
+          this.playerLive?.conferenceId ===this.fetchConference.conferenceId)
+      );
+    },
     authenticated(): boolean {
       return (state.generalParameters.authenticated as boolean);
     },
@@ -252,18 +247,19 @@ export default defineComponent({
   },
  
   methods: {
+    ...mapActions(usePlayerStore, ['playerChangeStatus', 'playerPlay']),
     play(): void {
       if (this.isLiveToBeRecorded) {
         return;
       }
       if(this.playingPodcast){
-        this.$store.commit('player/pause', "PLAYING"===this.$store.state.player.status);
+        this.playerChangeStatus("PLAYING"===this.playerStatus);
         return;
       }
       if (!this.recordingLive) {
-        this.$store.commit('player/playPodcast', this.podcast);
+        this.playerPlay(this.podcast);
       }else{
-        this.$store.commit('player/playPodcast', {
+        this.playerPlay({
           title: this.podcast.title,
           audioUrl: this.podcast.audioUrl,
           duration: this.podcast.duration,

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

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import { defineAsyncComponent, defineComponent } from 'vue';
 const PodcastInlineListClassic = defineAsyncComponent(() => import('./PodcastInlineListClassic.vue'));
 const PodcastSwiperList = defineAsyncComponent(() => import('./PodcastSwiperList.vue'));

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

@@ -53,7 +53,9 @@ import domHelper from '../../../helper/dom';
 import PodcastItem from './PodcastItem.vue';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 const PHONE_WIDTH = 960;
-import { state } from '../../../store/paramStore';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import { state } from '../../../stores/ParamSdkStore';
 import { Podcast } from '@/store/class/general/podcast';
 import imageProxy from '../../mixins/imageProxy';
 import { defineComponent } from 'vue'
@@ -98,6 +100,7 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useFilterStore, ['filterOrgaId']),
     podcasts(): Array<Podcast> {
       return this.allPodcasts.slice(this.index, this.index + this.size);
     },
@@ -110,11 +113,8 @@ export default defineComponent({
     isInlineAnimation(): boolean {
       return (state.generalParameters.isInlineAnimation as boolean);
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.filterOrga;
+      return this.organisationId ?this.organisationId: this.filterOrgaId;
     },
     previousAvailable(): boolean {
       return this.index > 0;
@@ -126,7 +126,7 @@ export default defineComponent({
       return this.direction > 0 ? 'out-left' : 'out-right';
     },
     watchVariable():string{
-      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
     }
   },
   watch: {

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

@@ -75,6 +75,8 @@
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
 import { defineComponent } from 'vue'
 import { RouteLocationRaw } from 'vue-router';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState, mapActions } from 'pinia';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 export default defineComponent({
   name: 'PodcastInlineListTemplate',
@@ -104,9 +106,10 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useFilterStore, ['filterOrgaId', 'filterRubrique', 'filterIab', 'filterRubriquage']),
     rubriqueQueryParam(): string|undefined{
-      if(this.$store.state.filter?.rubriqueFilter?.length){
-        return this.$store.state.filter.rubriqueFilter.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
+      if(this.filterRubrique?.length){
+        return this.filterRubrique.map((value: RubriquageFilter) =>  value.rubriquageId+':'+value.rubriqueId).join();
       }
       return undefined;
     },
@@ -116,19 +119,20 @@ export default defineComponent({
         return {
           name: 'category',
           params:{ 'iabId': this.iabId },
-          query: { productor: this.$store.state.filter.organisationId },
+          query: { productor: this.filterOrgaId },
         };
       }
       return {
           name: 'podcasts',
-          query: { productor: this.$store.state.filter.organisationId, 
-                  iabId:this.$store.state.filter.iab?.id,
+          query: { productor: this.filterOrgaId, 
+                  iabId:this.filterIab?.id,
                   rubriquesId: this.rubriqueQueryParam },
         };
     },
   },
 
   methods: {
+    ...mapActions(useFilterStore, ['filterUpdateRubrique']),
     sortChrono():void{
       this.$emit('sortChrono');
     },
@@ -153,18 +157,18 @@ export default defineComponent({
         nameRubriquage:  '',
         nameRubrique: ''
       };
-      if(this.$store.state.filter.rubriquageArray.length){
-        const rubriqueChosen =  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
+      if(this.filterRubriquage.length){
+        const rubriqueChosen =  this.filterRubriquage[this.rubriqueId.length - 1].rubriques.find((element: Rubrique) => element.rubriqueId === rubriqueChosenId);
         filterToAdd = {
-          rubriquageId: this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].rubriquageId, 
+          rubriquageId: this.filterRubriquage[this.rubriqueId.length - 1].rubriquageId, 
           rubriqueId: rubriqueChosenId, 
-          nameRubriquage:  this.$store.state.filter.rubriquageArray[this.rubriqueId.length - 1].title,
+          nameRubriquage:  this.filterRubriquage[this.rubriqueId.length - 1].title,
           nameRubrique: rubriqueChosen.name
         };
       }
-      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
+      const newFilter: Array<RubriquageFilter> = Array.from(this.filterRubrique);
       newFilter.push(filterToAdd);
-      this.$store.commit('filterRubrique', newFilter);
+      this.filterUpdateRubrique(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 }} });

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

@@ -52,7 +52,7 @@
 <script lang="ts">
 import PodcastItemInfo from './PodcastItemInfo.vue';
 import PodcastImage from './PodcastImage.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import dayjs from 'dayjs';
 import { Podcast } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'

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

@@ -18,7 +18,7 @@
     :to="{
       name: 'podcast',
       params: { podcastId: podcastId },
-      query: { productor: filterOrga },
+      query: { productor: filterOrgaId },
     }"
     class="text-dark flex-grow-1 title-podcast-item"
   >
@@ -39,7 +39,7 @@
       :to="{
         name: 'productor',
         params: { productorId: podcastOrganisationId },
-        query: { productor: filterOrga },
+        query: { productor: filterOrgaId },
       }"
       class="text-dark producer-podcast-item"
     >
@@ -50,7 +50,7 @@
 
 <script lang="ts">
 import AnimatorsItem from './AnimatorsItem.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import { orgaComputed } from '../../mixins/orgaComputed';
 import dayjs from 'dayjs';
 // @ts-ignore

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

@@ -34,7 +34,10 @@ import ListPaginate from '../list/ListPaginate.vue';
 import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from './PodcastItem.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
+import { useAuthStore } from '@/stores/AuthStore';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
 import { Podcast, emptyPodcastData } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
 import { FetchParam } from '@/store/class/general/fetchParam';
@@ -86,6 +89,8 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useFilterStore, ['filterOrgaId']),
+    ...mapState(useAuthStore, ['authProfile']),
     displayArray(): Array<Podcast>{
       if(this.isMobile || this.justSizeChosen){
         return this.podcasts;
@@ -98,7 +103,7 @@ export default defineComponent({
       ${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.includeHidden}|${this.noRubriquageId}|${this.notValid}`;
     },
     organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.$store.state.filter.organisationId;
+      return this.organisationId ?this.organisationId: this.filterOrgaId;
     },
     sort(): string {
       return this.popularSort? "POPULARITY" : this.sortCriteria??'DATE';
@@ -158,7 +163,7 @@ export default defineComponent({
         rubriquageId: this.rubriquageId.length ? this.rubriquageId : undefined,
         includeHidden: this.includeHidden,
         validity: undefined !== this.notValid?!this.notValid: undefined,
-        publisherId:this.notValid && !(state.generalParameters.isProduction as boolean)?this.$store.state.auth?.profile.userId:undefined,
+        publisherId:this.notValid && !(state.generalParameters.isProduction as boolean)?this.authProfile.userId:undefined,
         includeStatus:["READY","PROCESSING"]
       };
       try {

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

@@ -63,7 +63,7 @@
                 name: 'emission',
                 params: { emissionId: podcast.emission.emissionId },
                 query: {
-                  productor: filterOrga,
+                  productor: filterOrgaId,
                 },
               }"
             >
@@ -78,7 +78,7 @@
                 name: 'productor',
                 params: { productorId: podcast.organisation.id },
                 query: {
-                  productor: filterOrga,
+                  productor: filterOrgaId,
                 },
               }"
             >
@@ -134,7 +134,7 @@ import PodcastPlayBar from './PodcastPlayBar.vue';
 import PodcastImage from './PodcastImage.vue';
 import ParticipantDescription from './ParticipantDescription.vue';
 import TagList from './TagList.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import dayjs from 'dayjs';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';

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

@@ -23,7 +23,9 @@
 import ProgressBar from '../../misc/ProgressBar.vue';
 import DurationHelper from '../../../helper/duration';
 import displayMethods from '../../mixins/displayMethods';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState, mapActions } from 'pinia';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastPlayBar',
@@ -36,21 +38,20 @@ export default defineComponent({
     duration: { default: 0, type: Number},
   },
   computed: {
+    ...mapState(usePlayerStore, ['playerPodcast', 'playerElapsed', 'playerTotal']),
     isProgressBar(): boolean{
       return (state.emissionsPage.progressBar as boolean);
     },
     percentProgress(): number{
-      if(this.podcastId !== this.$store.state.player.podcast?.podcastId){
+      if(this.podcastId !== this.playerPodcast?.podcastId){
         return 0;
       }
-      return !this.$store.state.player.elapsed ? 0 : this.$store.state.player.elapsed * 100;
+      return !this.playerElapsed ? 0 : this.playerElapsed * 100;
     },
     playedTime(): string{
-      if(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)
-          );
+      if(this.podcastId === this.playerPodcast?.podcastId){
+        if (this.playerElapsed && this.playerElapsed > 0 && this.playerTotal && this.playerTotal > 0) {
+          return DurationHelper.formatDuration(Math.round(this.playerElapsed * this.playerTotal));
         }
       }
       return '00:00';
@@ -60,15 +61,15 @@ export default defineComponent({
     },
   },
   methods: {
+    ...mapActions(usePlayerStore, ['playerUpdateSeekTime']),
     seekTo(event: MouseEvent): void {
-      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){return;}
+      if(!this.playerPodcast || this.podcastId !== this.playerPodcast.podcastId){return;}
       const rect = (event.currentTarget as Element).getBoundingClientRect();
       const barWidth = (event.currentTarget as Element).clientWidth;
       const x = event.clientX - rect.left;
       const percentPosition = x / barWidth;
       if (percentPosition * 100 >= this.percentLiveProgress) return;
-      const seekTime = this.$store.state.player.total * percentPosition;
-      this.$store.commit("playerSeekTime", seekTime);
+      this.playerUpdateSeekTime(this.playerTotal * percentPosition);
     }
   },
 })

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

@@ -46,12 +46,14 @@ import PodcastInlineListTemplate from './PodcastInlineListTemplate.vue';
 import octopusApi from '@saooti/octopus-api';
 import domHelper from '../../../helper/dom';
 import PodcastItem from './PodcastItem.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation } from "swiper";
 import "swiper/css";
 import "swiper/css/navigation";
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
 import { Podcast } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -92,14 +94,12 @@ export default defineComponent({
     };
   },
   computed: {
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
+    ...mapState(useFilterStore, ['filterOrgaId']),
     organisation(): string|undefined {
-      return this.organisationId ?this.organisationId: this.filterOrga;
+      return this.organisationId ?this.organisationId: this.filterOrgaId;
     },
     watchVariable():string{
-      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
     },
     sizeItem(): number {
       return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13;

package/src/components/display/rubriques/RubriqueList.vue

@@ -61,7 +61,9 @@ import Popover from '../../misc/Popover.vue';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { Rubriquage } from '@/store/class/rubrique/rubriquage';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
-import { defineComponent } from 'vue'
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState, mapActions } from 'pinia';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'RubriqueList',
 
@@ -83,17 +85,12 @@ export default defineComponent({
   },
 
   computed: {
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
-    rubriqueFilter(): Array<RubriquageFilter>{
-      return this.$store.state.filter.rubriqueFilter;
-    },
+    ...mapState(useFilterStore, ['filterRubrique', 'filterRubriqueDisplay']),
     rubriqueDisplay(): Array<Rubrique>{
-      return this.$store.state.filter.rubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
+      return this.filterRubriqueDisplay.filter((rubrique: Rubrique) => 0 !== rubrique.podcastCount );
     },
     rubriquageDisplay(): Array<Rubriquage>{
-      const elementToNotShow = Array.from(this.rubriqueFilter);
+      const elementToNotShow = Array.from(this.filterRubrique);
       if(elementToNotShow.length){
         const rubriquageIdToNotShow = elementToNotShow.map(a => a.rubriquageId);
         return this.rubriquages.filter((element)=>{
@@ -105,7 +102,7 @@ export default defineComponent({
     },
   },
   watch:{
-    rubriqueFilter:{
+    filterRubrique:{
       deep: true,
       handler(){
         this.selectNewRubriquage();
@@ -120,9 +117,10 @@ export default defineComponent({
     window.removeEventListener('resize', this.resizeWindow);
   },
   methods: {
+    ...mapActions(useFilterStore, ['filterUpdateRubrique', 'filterUpdateRubriqueDisplay']),
     initRubriques(): void{
       if(!this.rubriquage){ return ;}
-      this.$store.commit('filterRubriqueDisplay', this.rubriquage.rubriques);
+      this.filterUpdateRubriqueDisplay(this.rubriquage.rubriques);
       window.addEventListener('resize', this.resizeWindow);
       this.$nextTick(() => {
         this.resizeWindow();
@@ -136,9 +134,9 @@ export default defineComponent({
         nameRubriquage: this.rubriquage.title,
         nameRubrique: rubrique.name
       };
-      const newFilter: Array<RubriquageFilter> = Array.from(this.$store.state.filter.rubriqueFilter);
+      const newFilter: Array<RubriquageFilter> = Array.from(this.filterRubrique);
       newFilter.push(filterToAdd);
-      this.$store.commit('filterRubrique', newFilter);
+      this.filterUpdateRubrique(newFilter);
       const queries = this.$route.query;
       const queryString = newFilter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
       this.$router.replace({ query: { ...queries, ...{ rubriquesId: queryString }} });
@@ -146,11 +144,11 @@ export default defineComponent({
     },
     selectNewRubriquage(){
       const rubriquageLength = this.rubriquages.length;
-      if(rubriquageLength === this.rubriqueFilter.length){
+      if(rubriquageLength === this.filterRubrique.length){
         return;
       }
       let index = 0;
-      const rubriquageAlreadyFilter = this.rubriqueFilter.map(a => a.rubriquageId);
+      const rubriquageAlreadyFilter = this.filterRubrique.map(a => a.rubriquageId);
       for (index; index < rubriquageLength; index++) {
         const rubriquageIdIndex = this.rubriquages[index].rubriquageId;
         if(rubriquageIdIndex && !rubriquageAlreadyFilter.includes(rubriquageIdIndex)){

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

@@ -30,10 +30,12 @@
 
 <script lang="ts">
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
 import Snackbar from '../../misc/Snackbar.vue';
-import QrcodeVue from 'qrcode.vue'
+import QrcodeVue from 'qrcode.vue';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'QrCode',
@@ -46,7 +48,6 @@ export default defineComponent({
   props: {
     url: { default: '', type: String},
   },
-
   data() {
     return {
       size: 200 as number,
@@ -55,6 +56,9 @@ export default defineComponent({
       isNotBlack: false as boolean,
     };
   },
+  computed:{
+    ...mapState(useAuthStore, ['authOrganisation']),
+  },
   watch:{
     isNotBlack(){
       this.color = this.isNotBlack ? this.otherColor : "#000000";
@@ -81,13 +85,13 @@ export default defineComponent({
       }
       if (!state.generalParameters.authenticated) return;
       let data;
-      if(this.$store.state.auth?.organisation?.attributes && Object.keys(this.$store.state.auth?.organisation.attributes).length > 1){
-        data = this.$store.state.auth?.organisation.attributes;
+      if(""!==this.authOrganisation.id && this.authOrganisation.attributes && Object.keys(this.authOrganisation.attributes).length > 1){
+        data = this.authOrganisation.attributes;
       }else{
         data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
       }
       if (Object.prototype.hasOwnProperty.call(data,'COLOR')) {
-        this.otherColor = data.COLOR;
+        this.otherColor = (data.COLOR as string);
       }
     },
   }

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

@@ -49,7 +49,7 @@
 <script lang="ts">
 import { Emission } from '@/store/class/general/emission';
 import { Podcast } from '@/store/class/general/podcast';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import displayMethods from '../../mixins/displayMethods';
 import Popover from '../../misc/Popover.vue';
 import ShareButtonsIntern from './ShareButtonsIntern.vue';

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

@@ -87,7 +87,7 @@
 import octopusApi from '@saooti/octopus-api';
 import { Emission } from '@/store/class/general/emission';
 import { Podcast } from '@/store/class/general/podcast';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import Snackbar from '../../misc/Snackbar.vue';
 import displayMethods from '../../mixins/displayMethods';
 import { defineComponent, defineAsyncComponent } from 'vue';