@saooti/octopus-sdk 35.1.7 → 35.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "35.1.7",
+  "version": "35.2.1",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -27,6 +27,7 @@
     "humanize-duration": "3.27.1",
     "jest": "^29.4.1",
     "jquery": "^3.6.3",
+    "pinia": "^2.0.30",
     "qrcode.vue": "^3.3.3",
     "sass": "^1.58.0",
     "sonarqube-scanner": "^3.0.0",
@@ -39,8 +40,7 @@
     "vue-recaptcha": "^2.0.3",
     "vue-router": "^4.1.6",
     "vue3-lazyload": "^0.3.6",
-    "vue3-swatches": "1.0.10",
-    "vuex": "^4.1.0"
+    "vue3-swatches": "1.0.10"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.16",

package/src/App.vue

@@ -25,13 +25,16 @@ import TopBar from '@/components/misc/TopBar.vue';
 import FooterOctopus from '@/components/misc/Footer.vue';
 import Player from '@/components/misc/player/Player.vue';
 import CategoryFilter from '@/components/display/categories/CategoryFilter.vue';
-import { state } from './store/paramStore';
-import { Rubriquage } from './store/class/rubrique/rubriquage';
-import { RubriquageFilter } from './store/class/rubrique/rubriquageFilter';
-import { Rubrique } from './store/class/rubrique/rubrique';
+import { state } from './stores/ParamSdkStore';
+import { Rubriquage } from './stores/class/rubrique/rubriquage';
+import { RubriquageFilter } from './stores/class/rubrique/rubriquageFilter';
+import { Rubrique } from './stores/class/rubrique/rubrique';
 import initSDK from './components/mixins/init';
-import { defineAsyncComponent, defineComponent } from 'vue'
-import { Category } from './store/class/general/category';
+import { useFilterStore } from '@/stores/FilterStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState, mapActions } from 'pinia';
+import { defineAsyncComponent, defineComponent } from 'vue';
+import { Category } from './stores/class/general/category';
 const LeftMenu = defineAsyncComponent(() => import('@/components/misc/LeftMenu.vue'));
 export default defineComponent({
   name: 'App',
@@ -54,6 +57,11 @@ export default defineComponent({
     };
   },
 
+  computed:{
+    ...mapState(useFilterStore, ['filterRubriquage', 'filterOrgaId']),
+    ...mapState(useGeneralStore, ['storedCategories']),
+  },
+
   watch: {
     '$i18n.locale'(){
       this.$forceUpdate();
@@ -64,6 +72,7 @@ export default defineComponent({
     await this.initApp();
   },
   methods:{
+    ...mapActions(useFilterStore, ['filterUpdateIab', 'filterUpdateRubrique']),
     async initApp(){
       await this.initSdk();
       await this.handleOrganisationFilter();
@@ -84,21 +93,21 @@ export default defineComponent({
       await this.selectOrganisation(orgaId);
     },
     handleIabIdFilter(){
-      if(this.$store.state.filter.organisationId){
+      if(this.filterOrgaId){
         return;
       }
       if (this.$route.query.iabId && 'string'===typeof this.$route.query.iabId) {
         const iabId = parseInt(this.$route.query.iabId, 10);
-        const category = this.$store.state.categories.filter((c: Category) => {
+        const category = this.storedCategories.filter((c: Category) => {
           return c.id === iabId;
         });
         if(category.length){
-          this.$store.commit('filterIab', category[0]);
+          this.filterUpdateIab(category[0]);
         }
       }
     },
     handleRubriquesFilter(){
-      if(0===this.$store.state.filter.rubriquageArray.length){
+      if(0===this.filterRubriquage.length){
         return;
       }
       if (this.$route.query.rubriquesId && 'string'===typeof this.$route.query.rubriquesId) {
@@ -107,7 +116,7 @@ export default defineComponent({
         const filterLength = arrayFilter.length;
         for (let index = 0; index < filterLength; index++) {
           const rubriqueFilter = arrayFilter[index].split(':');
-          const rubriquage = this.$store.state.filter.rubriquageArray.find((x: Rubriquage) => {
+          const rubriquage = this.filterRubriquage.find((x: Rubriquage) => {
             return x.rubriquageId === parseInt(rubriqueFilter[0]);
           });
           if(rubriquage){
@@ -118,7 +127,7 @@ export default defineComponent({
           }
         }
         if(rubriquesFilter.length){
-          this.$store.commit('filterRubrique', rubriquesFilter);
+          this.filterUpdateRubrique(rubriquesFilter);
         }
       }
     }

package/src/api/classicCrud.ts

@@ -1,4 +1,3 @@
-import { StoreState } from "@/store/classStore/typeAppStore";
 import axios from "axios";
 enum ModuleApi {
     DEFAULT = 0,
@@ -16,20 +15,20 @@ enum ModuleApi {
   }
 /* eslint-disable */
 export default {
-    async fetchData<Type>(state: StoreState,moduleName: ModuleApi,wsPath:string, forceRefresh?:boolean): Promise<Type>{
-        console.log(state,moduleName,wsPath,forceRefresh);
+    async fetchData<Type>(moduleName: ModuleApi,wsPath:string, forceRefresh?:boolean): Promise<Type>{
+        console.log(moduleName,wsPath,forceRefresh);
         const response = await axios.get('/mock');
         return response.data;
     },
-    async postData<Type>(state: StoreState,moduleName: ModuleApi,wsPath:string, elementToCreate: unknown): Promise<Type>{
-        console.log(state,moduleName,wsPath);
+    async postData<Type>(moduleName: ModuleApi,wsPath:string, elementToCreate: unknown): Promise<Type>{
+        console.log(moduleName,wsPath);
         const response = await axios.post('/mock', elementToCreate, {
         headers: {'Content-Type': 'application/json; charset=utf-8' },
         });
         return response.data;
     },
-    async deleteData(state: StoreState,moduleName: ModuleApi,wsPath:string): Promise<void>{
-        console.log(state,moduleName,wsPath);
+    async deleteData(moduleName: ModuleApi,wsPath:string): Promise<void>{
+        console.log(moduleName,wsPath);
         await axios.delete('/mock');
     },
 };

package/src/components/display/categories/CategoryChooser.vue

@@ -73,8 +73,9 @@ const getDefaultCategory = (defaultName: string) => {
   }
   return { name: defaultName, id: 0 };
 };
-
-import { Category } from '@/store/class/general/category';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState } from 'pinia';
+import { Category } from '@/stores/class/general/category';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
@@ -105,11 +106,12 @@ export default defineComponent({
 
 
   computed: {
+    ...mapState(useGeneralStore, ['storedCategories']),
     categoriesChosen(): Array<Category>{
       if(this.initCategories){
         return this.initCategories;
       }
-      return this.$store.state.categories;
+      return this.storedCategories;
     },
     allCategories(): Array<Category> {
       return [...this.categoriesChosen].sort((a: Category, b: Category) =>

package/src/components/display/categories/CategoryFilter.vue

@@ -4,7 +4,7 @@
     class="mt-3"
   >
     <ol
-      v-if="categoryFilter || rubriqueFilter.length"
+      v-if="filterIab || filterRubrique.length"
       class="octopus-breadcrumb d-flex align-items-center flex-wrap"
     >
       <li>
@@ -14,18 +14,18 @@
         >{{ $t('All') }}</a>
       </li>
       <li
-        v-if="categoryFilter"
+        v-if="filterIab"
       >
-        {{ categoryFilter.name }}
+        {{ filterIab.name }}
       </li>
       <li 
-        v-for="(filter, index) in rubriqueFilter" 
+        v-for="(filter, index) in filterRubrique" 
         :key="filter.rubriqueId"
         class="d-flex align-items-center"
-        :class="rubriqueFilter.length-1 === index ? 'active':''"
+        :class="filterRubrique.length-1 === index ? 'active':''"
       >
         <a
-          v-if="rubriqueFilter.length - 1 !== index"
+          v-if="filterRubrique.length - 1 !== index"
           href="#"
           @click="removeFilter(index,$event)"
         >{{ filter.nameRubriquage }}</a>
@@ -49,13 +49,13 @@
       </li>
     </ol>
     <CategoryList
-      v-if="!categoryFilter && !rubriquageFilter.length"
+      v-if="!filterIab && !rubriquageFilter.length"
       :is-filter="true"
       :is-display="isDisplay"
       @categoriesLength="checkIfCategories"
     />
     <RubriqueList
-      v-else-if="isDisplay && rubriquageFilter.length !== rubriqueFilter.length"
+      v-else-if="isDisplay && rubriquageFilter.length !== filterRubrique.length"
       :rubriquages="rubriquageFilter"
     />
   </div>
@@ -66,10 +66,11 @@
 </template>
 
 <script lang="ts">
-import { Category } from '@/store/class/general/category';
-import { Rubriquage } from '@/store/class/rubrique/rubriquage';
-import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
-import { Rubrique } from '@/store/class/rubrique/rubrique';
+import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { useFilterStore } from '@/stores/FilterStore';
+import { mapState, mapActions } from 'pinia';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CategoryList = defineAsyncComponent(() => import('./CategoryList.vue'));
 const RubriqueList = defineAsyncComponent(() => import('./../rubriques/RubriqueList.vue'));
@@ -88,55 +89,51 @@ export default defineComponent({
     };
   },
   computed: {
-    categoryFilter(): Category|undefined{
-      return this.$store.state.filter.iab;
-    },
-    rubriqueFilter(): Array<RubriquageFilter>{
-      return this.$store.state.filter.rubriqueFilter;
-    },
+    ...mapState(useFilterStore, ['filterIab', 'filterRubrique', 'filterRubriquage', 'filterOrgaId']),
     isDisplay(): boolean {
       return ("homePriv" === this.$route.name ||"home" === this.$route.name ||"podcasts" === this.$route.name||"emissions" === this.$route.name) 
-      && (this.isCategories || undefined!==this.categoryFilter || 0!==this.rubriqueFilter.length || 0!==this.rubriquageFilter.length);
+      && (this.isCategories || undefined!==this.filterIab || 0!==this.filterRubrique.length || 0!==this.rubriquageFilter.length);
     },
     rubriquageFilter(): Array<Rubriquage>{
-      return this.$store.state.filter.organisationId ? this.$store.state.filter.rubriquageArray : [];
+      return this.filterOrgaId ? this.filterRubriquage : [];
     },
   },
   methods:{
+    ...mapActions(useFilterStore, ['filterUpdateIab', 'filterUpdateRubrique']),
     checkIfCategories(length: number): void{
       this.isCategories = 0!==length;
     },
     onRubriqueSelected(index: number, rubrique: Rubrique): void {
-      if(!rubrique ||this.rubriqueFilter[index].rubriqueId === rubrique.rubriqueId){
+      if(!rubrique ||this.filterRubrique[index].rubriqueId === rubrique.rubriqueId){
         return;
       }
-      const filter = Array.from(this.rubriqueFilter);
+      const filter = Array.from(this.filterRubrique);
       filter[index].rubriqueId = rubrique.rubriqueId||0;
-      this.$store.commit('filterRubrique', filter);
+      this.filterUpdateRubrique(filter);
       const queryString = filter.map(value =>  value.rubriquageId+':'+value.rubriqueId).join();
       this.$router.replace({ query: { ...this.$route.query, ...{ rubriquesId: queryString }} });
     },
     getRubriques(rubriquageId: number): Array<Rubrique>{
-      const rubriquage = this.$store.state.filter.rubriquageArray.find((x: Rubriquage) => {
+      const rubriquage = this.filterRubriquage.find((x: Rubriquage) => {
         return x.rubriquageId === rubriquageId;
       });
       return rubriquage ? rubriquage.rubriques : [];
     },
     removeFilter(index: number, event?: { preventDefault: () => void }): void{
-      if(this.categoryFilter){
+      if(this.filterIab){
         if (this.$route.query.iabId) {
           this.$router.replace({ query: {...this.$route.query, ...{iabId: undefined} } });
         }
-        this.$store.commit('filterIab', undefined);
+        this.filterUpdateIab(undefined);
       }else{
-        const newFilter: Array<RubriquageFilter>  = Array.from(this.$store.state.filter.rubriqueFilter);
+        const newFilter: Array<RubriquageFilter>  = Array.from(this.filterRubrique);
         newFilter.splice(index + 1);
         if (this.$route.query.rubriquesId) {
           const queryString = newFilter.map(value => value.rubriquageId+':'+value.rubriqueId).join();
           this.$router.replace({ query: { ...this.$route.query, ...{ rubriquesId:"" !== queryString? queryString : undefined}} });
         }
 
-        this.$store.commit('filterRubrique', newFilter);
+        this.filterUpdateRubrique(newFilter);
       }
       if(event){
         event.preventDefault();

package/src/components/display/categories/CategoryList.vue

@@ -43,10 +43,13 @@
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import Popover from '../../misc/Popover.vue';
-import { Category } from '@/store/class/general/category';
-import { defineComponent } from 'vue'
+import { Category } from '@/stores/class/general/category';
+import { useFilterStore } from '@/stores/FilterStore';
+import { useGeneralStore } from '@/stores/GeneralStore';
+import { mapState, mapActions } from 'pinia';
+import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'CategoryList',
   components:{
@@ -66,20 +69,19 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(useGeneralStore, ['storedCategories', 'storedCategoriesOrga']),
+    ...mapState(useFilterStore, ['filterOrgaId']),
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    categoriesWatch(): Array<Category>{
-      return this.$store.state.categories;
-    },
     categories(): Array<Category> {
       let arrayCategories: Array<Category>  = [];
-      if (this.filterOrga) {
-        arrayCategories = this.$store.state.categoriesOrga.filter((c: Category) => {
+      if (this.filterOrgaId) {
+        arrayCategories = this.storedCategoriesOrga.filter((c: Category) => {
           return c.podcastOrganisationCount;
         });
       }else{
-        arrayCategories = this.$store.state.categories.filter((c: Category) => {
+        arrayCategories = this.storedCategories.filter((c: Category) => {
           if (this.isPodcastmaker) return c.podcastOrganisationCount;
           return c.podcastCount;
         });
@@ -87,14 +89,11 @@ export default defineComponent({
       this.$emit('categoriesLength', arrayCategories.length);
       return arrayCategories;
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     watchVariable(): string{
       return `${this.isDisplay}|${this.categories}`;
     },
     reloadVariable():string{
-      return `${this.filterOrga}|${this.categoriesWatch}`;
+      return `${this.filterOrgaId}|${this.storedCategories}`;
     }
   },
   watch: {
@@ -111,8 +110,8 @@ export default defineComponent({
       deep: true,
       immediate:true,
       handler(){
-        if (this.filterOrga) {
-          this.fetchCategories(this.filterOrga);
+        if (this.filterOrgaId) {
+          this.fetchCategories(this.filterOrgaId);
         }
       }
     }
@@ -125,12 +124,14 @@ export default defineComponent({
   },
   
   methods: {
+    ...mapActions(useFilterStore, ['filterUpdateIab']),
+    ...mapActions(useGeneralStore, ['storedUpdateCategoriesOrga']),
     checkIfFilter(category: Category): void{
       if(!this.isFilter){
         this.$router.push({
           name: 'category',
           params: { iabId: category.id.toString() },
-          query: { productor: this.filterOrga },
+          query: { productor: this.filterOrgaId },
         });
         return;
       }
@@ -138,7 +139,7 @@ export default defineComponent({
       if(!queries.iabId || ('string'===typeof queries.iabId &&  parseInt(queries.iabId ,10) !== category.id)) {
         this.$router.replace({ query: { ...queries, ...{ iabId: category.id.toString() }} });
       }
-      this.$store.commit('filterIab',category);
+      this.filterUpdateIab(category);
     },
     resizeWindow(): void {
       const categoryList = (this.$refs.categoryListContainer as HTMLElement);
@@ -168,7 +169,7 @@ export default defineComponent({
       const data = await octopusApi.fetchDataWithParams<Array<Category>>(0, `iab/list/${organisationId}`,{
         lang: this.$i18n.locale,
       });
-      this.$store.commit('categoriesOrgaSet', data);
+      this.storedUpdateCategoriesOrga(data);
     },
   },
 })

package/src/components/display/comments/AddCommentModal.vue

@@ -62,9 +62,11 @@
 
 <script lang="ts">
 import Constants from '../../../../public/config';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import ClassicModal from '../../misc/modal/ClassicModal.vue';
 import api from '@/api/initialize';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 import { VueRecaptcha } from 'vue-recaptcha';
 import { defineComponent } from 'vue';
 export default defineComponent({
@@ -87,6 +89,7 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useAuthStore, ['authProfile']),
     errorText():string {
       if(this.isCaptchaTest){
         return this.$t('Recaptcha not active');
@@ -110,7 +113,7 @@ export default defineComponent({
   methods: {
     initAuthenticatedName():void{
       if (!state.generalParameters.authenticated) { return; }
-      this.name = (`${this.$store.state.auth?.profile.firstname||''} ${this.$store.state.auth?.profile.lastname||''}`).trim();
+      this.name = (`${this.authProfile?.firstname||''} ${this.authProfile?.lastname||''}`).trim();
       this.isVerify = true;
     },
     async handleSuccess(token: string) {

package/src/components/display/comments/CommentBasicView.vue

@@ -49,7 +49,7 @@
 <script lang="ts">
 import selenium from '../../mixins/selenium';
 import displayMethods from '../../mixins/displayMethods';
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
 import dayjs from 'dayjs';
 import Popover from '../../misc/Popover.vue';
 import { defineComponent } from 'vue';

package/src/components/display/comments/CommentInput.vue

@@ -92,11 +92,14 @@
 import octopusApi from '@saooti/octopus-api';
 import crudApi from '@/api/classicCrud';
 import cookies from '../../mixins/cookies';
-import { state } from '../../../store/paramStore';
-import { Podcast } from '@/store/class/general/podcast';
-import { Conference } from '@/store/class/conference/conference';
-import { CommentPodcast } from '@/store/class/general/comment';
+import { state } from '../../../stores/ParamSdkStore';
+import { Podcast } from '@/stores/class/general/podcast';
+import { Conference } from '@/stores/class/conference/conference';
+import { CommentPodcast } from '@/stores/class/general/comment';
 import Constants from '../../../../public/config';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { useAuthStore } from '@/stores/AuthStore';
+import { mapState } from 'pinia';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const AddCommentModal = defineAsyncComponent(() => import('./AddCommentModal.vue'));
 const MessageModal = defineAsyncComponent(() => import('../../misc/modal/MessageModal.vue'));
@@ -132,6 +135,8 @@ export default defineComponent({
   },
 
   computed: {
+    ...mapState(usePlayerStore, ['playerPodcast', 'playerLive', 'playerElapsed', 'playerTotal']),
+    ...mapState(useAuthStore, ['authProfile']),
     validName(): boolean{
       return this.countName <= this.maxName;
     },
@@ -163,7 +168,7 @@ export default defineComponent({
         true === state.generalParameters.isAdmin;
     },
     userId(): string|undefined {
-      return state.generalParameters.authenticated ? this.$store.state.auth?.profile.userId : undefined;
+      return state.generalParameters.authenticated ? this.authProfile?.userId : undefined;
     },
     phase(): string|undefined {
       if(undefined === this.podcast){
@@ -235,18 +240,18 @@ export default defineComponent({
       this.$emit('cancelAction');
     },
     defineTimelineValue(): number{
-      let timeline = 0;
+      let timeline = 0; 
       if (
         undefined !== this.podcast &&(
-        (this.$store.state.player.podcast?.podcastId ===this.podcast.podcastId) ||
-        (this.$store.state.player.live?.livePodcastId ===this.podcast.podcastId))
+        (this.playerPodcast?.podcastId ===this.podcast.podcastId) ||
+        (this.playerLive?.livePodcastId ===this.podcast.podcastId))
       ) {
         timeline = Math.round(
-          this.$store.state.player.elapsed * this.$store.state.player.total
+          this.playerElapsed * this.playerTotal
         );
-        if (this.podcast.duration && this.$store.state.player.podcast) {
+        if (this.podcast.duration && this.playerPodcast) {
           timeline = Math.round(
-            timeline - (this.$store.state.player.total - this.podcast.duration / 1000)
+            timeline - (this.playerTotal - this.podcast.duration / 1000)
           );
         }
       }
@@ -274,7 +279,7 @@ export default defineComponent({
         let data;
         if (this.isCertified) {
           comment.status = 'Valid';
-          data = await crudApi.postData<CommentPodcast>(this.$store.state,2, 'registeredComment/' + comment.userId, {...comment, ...{userId: undefined}});
+          data = await crudApi.postData<CommentPodcast>(2, 'registeredComment/' + comment.userId, {...comment, ...{userId: undefined}});
         } else {
           data = await octopusApi.postDataPublic<CommentPodcast>(2,'unregisteredComment',comment);
         }

package/src/components/display/comments/CommentItem.vue

@@ -129,14 +129,16 @@
 </template>
 
 <script lang="ts">
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import selenium from '../../mixins/selenium';
 import displayMethods from '../../mixins/displayMethods';
-import { CommentPodcast } from '@/store/class/general/comment';
-import { Podcast } from '@/store/class/general/podcast';
-import { Conference } from '@/store/class/conference/conference';
+import { CommentPodcast } from '@/stores/class/general/comment';
+import { Podcast } from '@/stores/class/general/podcast';
+import { Conference } from '@/stores/class/conference/conference';
 import CommentBasicView from './CommentBasicView.vue';
 import Constants from '../../../../public/config';
+import { useCommentStore } from '@/stores/CommentStore';
+import { mapState, mapActions } from 'pinia';
 import { defineComponent, defineAsyncComponent } from 'vue';
 const CommentInput = defineAsyncComponent(() => import('./CommentInput.vue'));
 const CommentParentInfo = defineAsyncComponent(() => import('./CommentParentInfo.vue'));
@@ -177,6 +179,7 @@ export default defineComponent({
     };
   },
   computed: {
+    ...mapState(useCommentStore, ['commentKnownIdentity']),
     validName(): boolean{
       return this.countName <= this.maxName;
     },
@@ -200,10 +203,10 @@ export default defineComponent({
     },
     knownIdentity: {
       get(): string|null {
-        return this.$store.state.comments.knownIdentity;
+        return this.commentKnownIdentity;
       },
       set(value: string|null) {
-        this.$store.commit('setCommentIdentity', value);
+        this.setCommentIdentity(value);
       },
     },
     recordingInLive(): boolean {
@@ -215,6 +218,7 @@ export default defineComponent({
     },
   },
   methods: {
+    ...mapActions(useGeneralStore, ['setCommentIdentity']),
     answerComment(): void {
       this.collapseVisible = true;
       this.focus = !this.focus;

package/src/components/display/comments/CommentList.vue

@@ -35,13 +35,13 @@
 
 <script lang="ts">
 import ClassicLoading from '../../form/ClassicLoading.vue';
-import { state } from '../../../store/paramStore';
+import { state } from '../../../stores/ParamSdkStore';
 import octopusApi from '@saooti/octopus-api';
 import dayjs from 'dayjs';
-import { Podcast } from '@/store/class/general/podcast';
-import { Conference } from '@/store/class/conference/conference';
-import { CommentPodcast } from '@/store/class/general/comment';
-import { InterfacePageable } from '@/store/class/general/interfacePageable';
+import { Podcast } from '@/stores/class/general/podcast';
+import { Conference } from '@/stores/class/conference/conference';
+import { CommentPodcast } from '@/stores/class/general/comment';
+import { InterfacePageable } from '@/stores/class/general/interfacePageable';
 import { defineComponent, defineAsyncComponent } from 'vue';
 /* eslint-disable */
 const CommentItem: any = defineAsyncComponent(() => import('./CommentItem.vue'));

package/src/components/display/comments/CommentParentInfo.vue

@@ -15,7 +15,7 @@
 import octopusApi from '@saooti/octopus-api';
 import CommentBasicView from './CommentBasicView.vue';
 import ClassicLoading from '../../form/ClassicLoading.vue';
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentParentInfo',

package/src/components/display/comments/CommentPlayer.vue

@@ -36,8 +36,10 @@
 </template>
 
 <script lang="ts">
-import { CommentPodcast } from '@/store/class/general/comment';
+import { CommentPodcast } from '@/stores/class/general/comment';
 import selenium from '../../mixins/selenium';
+import { usePlayerStore } from '@/stores/PlayerStore';
+import { mapState } from 'pinia';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'CommentPlayer',
@@ -51,13 +53,14 @@ export default defineComponent({
       displayContent: undefined as CommentPodcast|undefined,
     };
   },
+  computed: {
+    ...mapState(usePlayerStore, ['playerPodcast'])
+  },
   methods: {
     percentPosition(time: number): number {
       let realDuration = this.totalTime;
-      if (this.$store.state.player.podcast?.duration) {
-        realDuration = Math.round(
-          this.$store.state.player.podcast.duration / 1000
-        );
+      if (this.playerPodcast?.duration) {
+        realDuration = Math.round(this.playerPodcast.duration / 1000);
       }
       if (realDuration < this.totalTime) {
         time = time + (this.totalTime - realDuration);