@saooti/octopus-sdk 35.1.7 → 35.2.1

package/src/components/misc/TopBar.vue

@@ -7,15 +7,15 @@
       class="top-bar-logo"
       :to="{
         name: 'home',
-        query: { productor: $store.state.filter.organisationId,
-                 iabId: $store.state.filter.iab?.id ,
+        query: { productor: filterOrgaId,
+                 iabId: filterIab?.id ,
                  rubriquesId: rubriqueQueryParam},
       }"
       @click="onDisplayMenu(true)"
     >
       <img
-        :src="!filterOrga || '' === imgUrl ? logoUrl : proxyImageUrl(imgUrl, '', '50')"
-        :alt="!filterOrga || '' === imgUrl ? $t('Logo of main page') : $t('Visual', {name: $store.state.filter?.name})"
+        :src="!filterOrgaId || '' === imgUrl ? logoUrl : proxyImageUrl(imgUrl, '', '50')"
+        :alt="!filterOrgaId || '' === imgUrl ? $t('Logo of main page') : $t('Visual', {name: filterName})"
         :class="isEducation ? 'educationLogo' : ''"
       >
     </router-link>
@@ -61,7 +61,7 @@
           :title="$t('Search')"
           :to="{
             name: 'podcasts',
-            query: { productor: $store.state.filter.organisationId },
+            query: { productor: filterOrgaId },
           }"
           class="btn admin-button m-1 saooti-search"
         />
@@ -71,12 +71,14 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 import HomeDropdown from './HomeDropdown.vue';
-import { Organisation } from '@/store/class/general/organisation';
+import { Organisation } from '@/stores/class/general/organisation';
 import orgaFilter from '../mixins/organisationFilter';
 import imageProxy from '../mixins/imageProxy';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
 import { defineComponent,defineAsyncComponent } from 'vue';
 const OrganisationChooserLight = defineAsyncComponent(() => import('../display/organisation/OrganisationChooserLight.vue'));
 export default defineComponent({
@@ -101,18 +103,19 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useFilterStore, ['filterLive', 'filterOrgaId', 'filterImgUrl', 'filterIab', 'filterRubrique', 'filterName']),
     routerLinkArray(){
       return [
-        {title : this.$t('Live'), routeName: 'lives', condition : (state.generalParameters.isLiveTab as boolean) &&((this.filterOrga && this.filterOrgaLive) || !this.filterOrga)},
+        {title : this.$t('Live'), routeName: 'lives', condition : (state.generalParameters.isLiveTab as boolean) &&((this.filterOrgaId && this.filterLive) || !this.filterOrgaId)},
         {title : this.$t('Podcasts'), routeName: 'podcasts', condition : true},
         {title : this.$t('Emissions'), routeName: 'emissions', condition : true},
         {title : this.$t('Speakers'), routeName: 'participants', condition : true},
         {title : this.$t('Playlists'), routeName: 'playlists', condition : true},
-        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrga || this.isEducation)}]
+        {title : this.$t('Productors'), routeName: 'productors', condition : !this.isPodcastmaker && (!this.filterOrgaId || this.isEducation)}]
     },
     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;
     },
@@ -122,24 +125,18 @@ export default defineComponent({
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
-    filterOrgaLive(): string {
-      return this.$store.state.filter.live;
-    },
     imgUrl(): string {
-      if (!this.$store.state.filter.imgUrl?.includes('emptypodcast'))
-        return `${this.$store.state.filter.imgUrl}`;
+      if (!this.filterImgUrl?.includes('emptypodcast'))
+        return `${this.filterImgUrl}`;
       return '';
     },
   },
   watch: {
-    filterOrga: {
+    filterOrgaId: {
       immediate: true,
       handler() {
-        if (this.filterOrga) {
-          this.organisationId = this.filterOrga;
+        if (this.filterOrgaId) {
+          this.organisationId = this.filterOrgaId;
         } else {
           this.reset = !this.reset;
         }
@@ -155,10 +152,10 @@ export default defineComponent({
   methods: {
     getQueriesRouter(routeName: string){
       if('podcasts' !== routeName && 'emissions' !== routeName){
-        return { productor: this.$store.state.filter.organisationId};
+        return { productor: this.filterOrgaId};
       }
-      return { productor: this.$store.state.filter.organisationId,
-                   iabId: this.$store.state.filter.iab?.id,
+      return { productor: this.filterOrgaId,
+                   iabId: this.filterIab?.id,
                    rubriquesId: this.rubriqueQueryParam}
     },
     handleScroll(): void {

package/src/components/misc/modal/ClipboardModal.vue

@@ -26,10 +26,10 @@
 
 <script lang="ts">
 import ClassicModal from '../modal/ClassicModal.vue';
-import { Emission } from '@/store/class/general/emission';
+import { Emission } from '@/stores/class/general/emission';
 import displayMethods from '../../mixins/displayMethods';
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));
 export default defineComponent({
   name: 'ClipboardModal',

package/src/components/misc/modal/NewsletterModal.vue

@@ -97,13 +97,15 @@ import VSwatches from 'vue3-swatches';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
 import displayMethods from '../../mixins/displayMethods';
-import { Participant } from '@/store/class/general/participant';
-import { Podcast } from '@/store/class/general/podcast';
-import { state } from '../../../store/paramStore';
-import { defineComponent } from 'vue'
+import { Participant } from '@/stores/class/general/participant';
+import { Podcast } from '@/stores/class/general/podcast';
+import { state } from '../../../stores/ParamSdkStore';
+import { defineComponent } from 'vue';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 import octopusApi from '@saooti/octopus-api';
-import { Emission } from '@/store/class/general/emission';
-import { Playlist } from '@/store/class/general/playlist';
+import { Emission } from '@/stores/class/general/emission';
+import { Playlist } from '@/stores/class/general/playlist';
 export default defineComponent({
   name: 'NewsletterModal',
 
@@ -135,6 +137,7 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useAuthStore, ['authOrganisation']),
     date(): string {
       if(!this.podcast || 1970 === dayjs(this.podcast.pubDate).year()){return '';}
       return dayjs(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
@@ -293,8 +296,8 @@ export default defineComponent({
     },
     async initData(): Promise<void> {
       let attributes;
-      if(this.$store.state.auth?.organisation?.attributes && Object.keys(this.$store.state.auth?.organisation.attributes).length > 1){
-        attributes = this.$store.state.auth?.organisation.attributes;
+      if(""!==this.authOrganisation.id && this.authOrganisation.attributes && Object.keys(this.authOrganisation.attributes).length > 1){
+        attributes = this.authOrganisation.attributes;
       }else{
         attributes = await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
       }
@@ -306,7 +309,7 @@ export default defineComponent({
         return;
       }
       if (Object.prototype.hasOwnProperty.call(attributes,'COLOR')) {
-        this.color = attributes.COLOR;
+        this.color = (attributes.COLOR as string);
       }
     },
   },

package/src/components/misc/modal/ShareModalPlayer.vue

@@ -72,7 +72,7 @@ import ClassicModal from '../modal/ClassicModal.vue';
 import Nav from '../Nav.vue';
 import QrCode from '../../display/sharing/QrCode.vue';
 import { defineComponent } from 'vue'
-import { Podcast } from '@/store/class/general/podcast';
+import { Podcast } from '@/stores/class/general/podcast';
 export default defineComponent({
   name: 'ShareModalPlayer',
 

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

@@ -7,7 +7,7 @@
     <template v-if="display">
       <audio
         id="audio-player"
-        :src="!live && !radio? audioUrlToPlay: undefined"
+        :src="!playerLive && !playerRadio? audioUrlToPlay: undefined"
         autoplay
         @timeupdate="onTimeUpdate"
         @ended="onFinished"
@@ -46,12 +46,12 @@
   </div>
 </template>
 <script lang="ts">
-import { mapState } from 'vuex';
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
 import { playerLogic } from '../../mixins/player/playerLogic';
-import { StoreState } from '@/store/classStore/typeAppStore';
 import PlayerCompact from '../player/PlayerCompact.vue';
 import PlayerLarge from '../player/PlayerLarge.vue';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState, mapActions } from 'pinia';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'Player',
@@ -82,16 +82,17 @@ export default defineComponent({
     };
   },
   computed: {
-    ...mapState({
-      display: (state: StoreState) => 'STOPPED' !== state.player.status,
-      playerHeight(state: StoreState) {
-        if ('STOPPED' === state.player.status || this.forceHide) return 0;
-        if (this.largeVersion) return '27rem';
-        if (window.innerWidth > 450 && !this.showTimeline) return '5rem';
-        if (window.innerWidth > 450 && this.showTimeline) return '6rem';
-        return '3.5rem';
-      },
-    }),
+    ...mapState(usePlayerStore, ['playerStatus']),
+    display(){
+      return 'STOPPED' !== this.playerStatus;
+    },
+    playerHeight() {
+      if ('STOPPED' === this.playerStatus || this.forceHide) return 0;
+      if (this.largeVersion) return '27rem';
+      if (window.innerWidth > 450 && !this.showTimeline) return '5rem';
+      if (window.innerWidth > 450 && this.showTimeline) return '6rem';
+      return '3.5rem';
+    },
   },
 
   watch: {
@@ -101,9 +102,10 @@ export default defineComponent({
   },
   
   methods: {
+    ...mapActions(usePlayerStore, ['playerPlay']),
     onHidden(): void {
       if (this.forceHide) {
-        this.$store.commit('player/playPodcast');
+        this.playerPlay();
         this.forceHide = false;
       }
     },

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

@@ -33,7 +33,7 @@
     <div class="text-light player-grow-content">
       <div 
         class="d-flex"
-        :class="!radio?'mb-1':''"
+        :class="!radioUrl?'mb-1':''"
       >
         <div
           v-if="playerError"
@@ -45,14 +45,14 @@
           {{ podcastTitle }}
         </div>
         <div
-          v-if="!playerError && !radio"
+          v-if="!playerError && !radioUrl"
           class="hide-phone"
         >
           {{ playedTime }} / {{ totalTime }}
         </div>
       </div>
       <PlayerProgressBar
-        v-if="!radio"
+        v-if="!radioUrl"
         :hls-ready="hlsReady"
         :show-timeline="showTimeline"
         :comments="comments"
@@ -76,14 +76,14 @@
       @click="stopPlayer"
     />
     <PlayerTimeline
-      v-if="!radio"
+      v-if="!radioUrl"
       v-model:showTimeline="showTimeline"
       :comments="comments"
     />
   </div>
 </template>
 <script lang="ts">
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
 import { playerDisplay } from '../../mixins/player/playerDisplay';
 import imageProxy from '../../mixins/imageProxy';
 import Spinner from '../Spinner.vue';

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

@@ -95,7 +95,7 @@ import imageProxy from '../../mixins/imageProxy';
 import PlayerProgressBar from './PlayerProgressBar.vue';
 import PlayerTimeline from './PlayerTimeline.vue';
 import { defineComponent } from 'vue';
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
 export default defineComponent({
   name: 'PlayerLarge',
 

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

@@ -9,14 +9,16 @@
   />
   <CommentPlayer
     v-if="showTimeline"
-    :total-time="totalSecondes"
+    :total-time="playerTotal"
     :comments="comments"
   />
 </template>
 
 <script lang="ts">
 import ProgressBar from '../ProgressBar.vue'
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState } from 'pinia';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CommentPlayer = defineAsyncComponent(() => import('../../display/comments/CommentPlayer.vue'));
 export default defineComponent({
@@ -40,12 +42,10 @@ export default defineComponent({
   emits: ['updateNotListenTime'],
   
   computed: {
+    ...mapState(usePlayerStore, ['playerElapsed', 'playerTotal', 'playerPodcast', 'playerLive']),
     percentProgress(): number{
-      if(!this.$store.state.player.elapsed){return 0;}
-      return this.$store.state.player.elapsed * 100;
-    },
-    totalSecondes(): number{
-      return this.$store.state.player.total;
+      if(!this.playerElapsed){return 0;}
+      return this.playerElapsed * 100;
     },
   },
 
@@ -59,11 +59,11 @@ export default defineComponent({
       const x = event.clientX - rect.left;
       const percentPosition = x / barWidth;
       if (percentPosition * 100 >= this.percentLiveProgress) return;
-      const seekTime = this.$store.state.player.total * percentPosition;
+      const seekTime = this.playerTotal * percentPosition;
       this.isSeekTo(audioPlayer, seekTime);
     },
     isSeekTo(audioPlayer: HTMLAudioElement, seekTime: number): void {
-      if (this.$store.state.player.podcast || this.$store.state.player.live) {
+      if (this.playerPodcast || this.playerLive) {
         this.$emit('updateNotListenTime',seekTime - this.listenTime);
       }
       audioPlayer.currentTime = seekTime;

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

@@ -13,9 +13,9 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import { defineComponent } from 'vue';
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
 export default defineComponent({
   name: 'PlayerTimeline',
 

package/src/components/mixins/handle403.ts

@@ -1,10 +1,15 @@
 import { AxiosError } from 'axios';
 import { defineComponent } from 'vue';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 export const handle403 = defineComponent({
+  computed: {
+    ...mapState(useAuthStore, ['authOrgaId']),
+  },
   methods: {
     handle403(error: AxiosError): void {
       if (403 === error.response?.status) {
-        if(undefined===this.$store.state.auth){
+        if(undefined===this.authOrgaId){
           window.location.href = window.location.origin + "/sso/login";
         }else{
           this.$router.push({

package/src/components/mixins/imageProxy.ts

@@ -1,4 +1,4 @@
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
 export default {
   methods: {
     proxyImageUrl(url:string, width:string, height?:string): string{

package/src/components/mixins/init.ts

@@ -1,19 +1,22 @@
 
-import { Category } from "@/store/class/general/category";
+import { Category } from "@/stores/class/general/category";
 import orgaFilter from '../mixins/organisationFilter';
 import octopusApi from '@saooti/octopus-api';
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapActions } from 'pinia';
 import { defineComponent } from 'vue';
 export default defineComponent({
   mixins: [orgaFilter],
   methods: {
+    ...mapActions(useGeneralStore, ['storedUpdateCategories']),
     async initSdk() {
       if (0 === (state.generalParameters.allCategories as Array<Category>).length) {
         octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list${state.octopusApi.organisationId? '/'+state.octopusApi.organisationId : ''}`, { lang: this.$i18n.locale }).then((data: Array<Category>) => {
-          this.$store.commit('categoriesSet', data);
+          this.storedUpdateCategories(data);
         });
       }else{
-        this.$store.commit('categoriesSet', (state.generalParameters.allCategories as Array<Category>));
+        this.storedUpdateCategories((state.generalParameters.allCategories as Array<Category>));
       }
       const captcha = (document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement);
       if (captcha) {

package/src/components/mixins/orgaComputed.ts

@@ -1,15 +1,15 @@
-import { state } from '../../store/paramStore';
+import { state } from '../../stores/ParamSdkStore';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
 export const orgaComputed = defineComponent({
   computed: {
+    ...mapState(useFilterStore, ['filterOrgaId']),
 		myOrganisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
     authenticated(): boolean {
       return (state.generalParameters.authenticated as boolean);
-    },
-		filterOrga(): string {
-      return this.$store.state.filter.organisationId;
     },
   },
 });

package/src/components/mixins/organisationFilter.ts

@@ -1,13 +1,16 @@
 
 import { handle403 } from '../mixins/handle403';
-import { Rubriquage } from "@/store/class/rubrique/rubriquage";
+import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import octopusApi from '@saooti/octopus-api';
-import { defineComponent } from 'vue'
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapActions } from 'pinia';
+import { defineComponent } from 'vue';
 import { AxiosError } from 'axios';
-import { Organisation } from '@/store/class/general/organisation';
+import { Organisation } from '@/stores/class/general/organisation';
 export default defineComponent({
   mixins: [handle403],
   methods: {
+    ...mapActions(useFilterStore, ['filterUpdateOrga']),
     async selectOrganisation(organisationId: string): Promise<void> {
       try {
         const response = await octopusApi.fetchData<Organisation>(0,`organisation/${organisationId}`);
@@ -16,7 +19,7 @@ export default defineComponent({
           homePageOrder: true
         }, true);
         const isLive = await octopusApi.fetchData<boolean>(0, 'organisation/liveEnabled/'+organisationId);
-        this.$store.commit('filterOrga', {
+        this.filterUpdateOrga({
           orgaId: organisationId,
           imgUrl: response.imageUrl,
           name: response.name,
@@ -35,7 +38,7 @@ export default defineComponent({
       if (this.$route.query.productor) {
         this.$router.push({ query: {...this.$route.query, ...{productor: undefined} } });
       }
-      this.$store.commit('filterOrga', { orgaId: undefined });
+      this.filterUpdateOrga({ orgaId: undefined });
     }
   },
 });

package/src/components/mixins/player/playerComment.ts

@@ -1,12 +1,12 @@
-
-import { mapState } from 'vuex';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
-import { CommentPodcast } from '@/store/class/general/comment';
-import { StoreState } from '@/store/classStore/typeAppStore';
+import { CommentPodcast } from '@/stores/class/general/comment';
 import { defineComponent } from 'vue';
-import { FetchParam } from '@/store/class/general/fetchParam';
-import { InterfacePageable } from '@/store/class/general/interfacePageable';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { useCommentStore } from '@/stores/CommentStore';
+import { mapState } from 'pinia';
+import { FetchParam } from '@/stores/class/general/fetchParam';
+import { InterfacePageable } from '@/stores/class/general/interfacePageable';
 export const playerComment = defineComponent({
   data() {
     return {
@@ -14,42 +14,33 @@ export const playerComment = defineComponent({
     };
   },
   computed: {
-    ...mapState({
-      commentsLoaded(state: StoreState){ return state.comments.loadedComments},
-      live(state: StoreState) { return state.player.live},
-      podcast(state: StoreState) { return state.player.podcast}
-    }),
+    ...mapState(useCommentStore, ['commentActualPodcastId', 'commentTotalCount', 'commentLoaded']),
+    ...mapState(usePlayerStore, ['playerPodcast', 'playerLive']),
     organisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },
   },
 
   watch: {
-    commentsLoaded(): void {
+    commentLoaded(): void {
       this.initComments(true);
     },
   },
   methods: {
     editRight(organisation: string): boolean {
-      if (
-        (state.generalParameters.isCommments &&
-          this.organisationId === organisation) ||
-        state.generalParameters.isAdmin
-      )
-        return true;
-      return false;
+      return (true===state.generalParameters.isCommments && this.organisationId === organisation) || true===state.generalParameters.isAdmin;
     },
     initCommentCurrentPodcast(podcastId?: number): Array<number>{
       if (
         podcastId &&
-        this.$store.state.comments.actualPodcastId === podcastId
+        this.commentActualPodcastId === podcastId
       ) {
-        this.comments = this.commentsLoaded;
+        this.comments = this.commentLoaded;
         if (
-          this.commentsLoaded &&
-          this.commentsLoaded.length < this.$store.state.comments.totalCount
+          this.commentLoaded &&
+          this.commentLoaded.length < this.commentTotalCount
         ) {
-          return [this.commentsLoaded.length, this.$store.state.comments.totalCount];
+          return [this.commentLoaded.length, this.commentTotalCount];
         }
       }
       return [0, 0];
@@ -75,17 +66,17 @@ export const playerComment = defineComponent({
     },
     async initComments(refresh = false): Promise<void> {
       let podcastId, organisation;
-      if (this.podcast) {
-        podcastId = this.podcast.podcastId;
-        organisation = this.podcast.organisation.id;
-      } else if (this.live) {
-        podcastId = this.live.livePodcastId;
-        organisation = this.live.organisation.id;
+      if (this.playerPodcast) {
+        podcastId = this.playerPodcast.podcastId;
+        organisation = this.playerPodcast.organisation.id;
+      } else if (this.playerLive) {
+        podcastId = this.playerLive.livePodcastId;
+        organisation = this.playerLive.organisation.id;
       }
       if (
         refresh &&
         podcastId &&
-        this.$store.state.comments.actualPodcastId !== podcastId
+        this.commentActualPodcastId !== podcastId
       ) {
         return;
       }
@@ -94,7 +85,7 @@ export const playerComment = defineComponent({
       let count = param[1];
       if (
         (!podcastId ||
-          this.$store.state.comments.actualPodcastId === podcastId) &&
+          this.commentActualPodcastId === podcastId) &&
         0 === first
       ){
         return;