@saooti/octopus-sdk 33.0.8 → 33.1.0

package/README.md

@@ -695,4 +695,5 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 33.0.5 Change recaptcha
  * 33.0.6 Crédits
  * 33.0.7 Test refactor podcastmaker with scss variables
+ * 33.1.0 Refacto store
 

package/package.json

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

package/src/App.vue

@@ -10,7 +10,8 @@
       :is-education="false"
     />
     <LeftMenu
-      v-model:displayMenu="displayMenu"
+      v-if="displayMenu"
+      @close="displayMenu=false"
       :is-education="false"
     />
     <CategoryFilter />
@@ -21,7 +22,6 @@
 
 <script lang="ts">
 import TopBar from '@/components/misc/TopBar.vue';
-import LeftMenu from '@/components/misc/LeftMenu.vue';
 import Footer from '@/components/misc/Footer.vue';
 import CategoryFilter from '@/components/display/categories/CategoryFilter.vue';
 import { state } from './store/paramStore';
@@ -29,8 +29,9 @@ import { Rubriquage } from './store/class/rubrique/rubriquage';
 import { RubriquageFilter } from './store/class/rubrique/rubriquageFilter';
 import { Rubrique } from './store/class/rubrique/rubrique';
 import { initSDK } from './components/mixins/init';
-import { defineComponent } from 'vue'
+import { defineAsyncComponent, defineComponent } from 'vue'
 import { Category } from './store/class/general/category';
+const LeftMenu = defineAsyncComponent(() => import('@/components/misc/LeftMenu.vue'));
 export default defineComponent({
   name: 'App',
   

package/src/api/classicCrud.ts

@@ -1,4 +1,4 @@
-import { StoreState } from "@/store/typeAppStore";
+import { StoreState } from "@/store/classStore/typeAppStore";
 import axios from "axios";
 enum ModuleApi {
     DEFAULT = 0,

package/src/assets/form.scss

@@ -77,4 +77,15 @@
 	.vc-select select{
 		padding: 0 20px 0 8px !important;
 	}
+	.vc-date{
+		.vc-month,.vc-day,.vc-year{
+			color: $octopus-primary-color !important;
+		}
+	}
+	.vc-highlight{
+		background-color: $octopus-primary-color !important;
+	}
+	.vc-select select:focus{
+		border-color: $octopus-primary-color !important;
+	}
 }

package/src/assets/general.scss

@@ -116,11 +116,11 @@ body{
     border-radius: 1rem;
     flex-grow: 1;
     overflow: auto;
-    box-shadow: 0px 12px 48px 6px $primaryColorMoreTransparent !important;
+    box-shadow: 0px 12px 48px 6px $primaryColorReallyTransparent !important;
     @media (max-width: 500px){
       margin: 0.3rem;
       padding: 0.8rem;
-      box-shadow:0px 6px 20px 3px $primaryColorMoreTransparent !important;
+      box-shadow:0px 6px 20px 3px $primaryColorReallyTransparent !important;
     }
   }
 

package/src/assets/multiselect.scss

@@ -1,5 +1,4 @@
 /* Added styles */
-@import '../sass/_variables.scss';
 .octopus-app{
 
     .default-multiselect-width {

package/src/assets/share.scss

@@ -1,4 +1,3 @@
-@import '../sass/_variables.scss';
 .octopus-app{
   .page-box-absolute{
 		position: absolute;

package/src/assets/transition.scss

@@ -1,7 +1,4 @@
 .octopus-app{
-    .transition-height {
-      transition: height 1s;
-    }
     .arrow-transform {
       transform: rotate(180deg);
     }

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

@@ -171,7 +171,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import '../../../sass/_variables.scss';
+@import '@scss/_variables.scss';
 .octopus-app{
   .category-list-container {
     display: inline-flex;

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

@@ -117,7 +117,7 @@ export default defineComponent({
   methods: {
     initAuthenticatedName():void{
       if (!state.generalParameters.authenticated) { return; }
-      this.name = (`${this.$store.state.profile.firstname||''} ${this.$store.state.profile.lastname||''}`).trim();
+      this.name = (`${this.$store.state.auth?.profile.firstname||''} ${this.$store.state.auth?.profile.lastname||''}`).trim();
       this.isVerify = true;
     },
     async handleSuccess(token: string) {

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

@@ -163,7 +163,7 @@ export default defineComponent({
         true === state.generalParameters.isAdmin;
     },
     userId(): string|undefined {
-      return state.generalParameters.authenticated ? this.$store.state.profile.userId : undefined;
+      return state.generalParameters.authenticated ? this.$store.state.auth?.profile.userId : undefined;
     },
     phase(): string|undefined {
       if(undefined === this.podcast){
@@ -290,7 +290,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../../sass/_variables.scss';
+@import '@scss/_variables.scss';
 .octopus-app{
   .comment-input-container {
     textarea::placeholder {

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

@@ -52,12 +52,11 @@ import ListPaginate from '../list/ListPaginate.vue';
 import octopusApi from '@saooti/octopus-api';
 import { handle403 } from '../../mixins/handle403';
 import { state } from '../../../store/paramStore';
-import { Emission } from '@/store/class/general/emission';
+import { Emission, emptyEmissionData } from '@/store/class/general/emission';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { FetchParam } from '@/store/class/general/fetchParam';
 import { AxiosError } from 'axios';
-import { emptyEmissionData } from '@/store/typeAppStore';
 import { Rubriquage } from '@/store/class/rubrique/rubriquage';
 const EmissionItem = defineAsyncComponent(() => import('./EmissionItem.vue'));
 const EmissionPlayerItem = defineAsyncComponent(() => import('./EmissionPlayerItem.vue'));

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

@@ -176,7 +176,7 @@ export default defineComponent({
       return (state.emissionsPage.titleInImage as boolean);
     },
     authenticated(): boolean {
-      return this.$store.state.authentication.isAuthenticated;
+      return state.generalParameters.authenticated??false;
     },
     organisationId(): string|undefined {
       return state.generalParameters.organisationId;
@@ -226,13 +226,13 @@ export default defineComponent({
     },
     play(podcast: Podcast): void {
       if (podcast === this.$store.state.player.podcast) {
-        this.$store.commit('playerPause', false);
+        this.$store.commit('player/pause', false);
       } else {
-        this.$store.commit('playerPlayPodcast', podcast);
+        this.$store.commit('player/playPodcast', podcast);
       }
     },
     pause(): void {
-      this.$store.commit('playerPause', true);
+      this.$store.commit('player/pause', true);
     },
   },
 })

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

@@ -142,7 +142,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../../sass/_variables.scss';
+@import '@scss/_variables.scss';
 .octopus-app{
   .filter-speech-bubble {
     position: absolute;

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

@@ -202,7 +202,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-@import '../../../sass/_variables.scss';
+@import '@scss/_variables.scss';
 .octopus-app .paginate{
 	display: flex;
 	justify-content: flex-end;

package/src/components/display/live/LiveHorizontalList.vue

@@ -37,9 +37,8 @@
 import ListPaginate from '../list/ListPaginate.vue';
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
-import { Podcast } from '@/store/class/general/podcast';
+import { Podcast, emptyPodcastData } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
-import { emptyPodcastData } from '@/store/typeAppStore';
 export default defineComponent({
   name: 'LiveHorizontalList',
 

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

@@ -183,7 +183,7 @@ export default defineComponent({
   async created() {
     if (
       this.authenticated &&
-      undefined === this.$store.state.organisation.imageUrl
+      undefined === this.$store.state.auth?.organisation.imageUrl
     ) {
       const data = await octopusApi.fetchData<Organisation>(0,`organisation/${this.myOrganisationId ?this.myOrganisationId:""}`);
       this.myImage = data.imageUrl;

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

@@ -32,8 +32,7 @@ import ListPaginate from '../list/ListPaginate.vue';
 import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import ParticipantItem from './ParticipantItem.vue';
-import { Participant } from '@/store/class/general/participant';
-import { emptyParticipantData } from '@/store/typeAppStore';
+import { Participant, emptyParticipantData } from '@/store/class/general/participant';
 import { defineComponent } from 'vue'
 import { AxiosError } from 'axios';
 export default defineComponent({

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

@@ -32,8 +32,7 @@ import ListPaginate from '../list/ListPaginate.vue';
 import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import PlaylistItem from './PlaylistItem.vue';
-import { emptyPlaylistData } from '@/store/typeAppStore';
-import { Playlist } from '@/store/class/general/playlist';
+import { Playlist, emptyPlaylistData } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
 import { AxiosError } from 'axios';
 export default defineComponent({

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

@@ -88,7 +88,7 @@
 <script lang="ts">
 import { mapState } from 'vuex';
 import { state } from '../../../store/paramStore';
-import {StoreState} from '@/store/typeAppStore';
+import {StoreState} from '@/store/classStore/typeAppStore';
 import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 import { imageProxy } from '../../mixins/functions';
@@ -251,13 +251,13 @@ export default defineComponent({
         return;
       }
       if(this.playingPodcast){
-        this.$store.commit('playerPause', "PLAYING"===this.$store.state.player.status);
+        this.$store.commit('player/pause', "PLAYING"===this.$store.state.player.status);
         return;
       }
       if (!this.recordingLive) {
-        this.$store.commit('playerPlayPodcast', this.podcast);
+        this.$store.commit('player/playPodcast', this.podcast);
       }else{
-        this.$store.commit('playerPlayPodcast', {
+        this.$store.commit('player/playPodcast', {
           title: this.podcast.title,
           audioUrl: this.podcast.audioUrl,
           duration: this.podcast.duration,

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

@@ -35,11 +35,10 @@ import { handle403 } from '../../mixins/handle403';
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from './PodcastItem.vue';
 import { state } from '../../../store/paramStore';
-import { Podcast } from '@/store/class/general/podcast';
+import { Podcast, emptyPodcastData } from '@/store/class/general/podcast';
 import { defineComponent } from 'vue'
 import { FetchParam } from '@/store/class/general/fetchParam';
 import { AxiosError } from 'axios';
-import { emptyPodcastData } from '@/store/typeAppStore';
 export default defineComponent({
   name: 'PodcastList',
 
@@ -155,7 +154,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.profile.userId:undefined
+        publisherId:this.notValid && !(state.generalParameters.isProduction as boolean)?this.$store.state.auth?.profile.userId:undefined
       };
       try {
         const data =await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',param, true);

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

@@ -175,7 +175,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import '../../../sass/_variables.scss';
+@import '@scss/_variables.scss';
 .swiper {
   width: 100%;
   height: 100%;

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

@@ -81,8 +81,8 @@ export default defineComponent({
       }
       if (!state.generalParameters.authenticated) return;
       let data;
-      if(this.$store.state.organisation?.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
-        data = this.$store.state.organisation.attributes;
+      if(this.$store.state.auth?.organisation?.attributes && Object.keys(this.$store.state.auth?.organisation.attributes).length > 1){
+        data = this.$store.state.auth?.organisation.attributes;
       }else{
         data= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
       }

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

@@ -299,8 +299,8 @@ export default defineComponent({
       return url;
     },
     async fetchOrgaAttributes(): Promise<void>{
-      if(this.$store.state.organisation?.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
-        this.orgaAttributes = this.$store.state.organisation.attributes;
+      if(this.$store.state.auth?.organisation?.attributes && Object.keys(this.$store.state.auth?.organisation.attributes).length > 1){
+        this.orgaAttributes = this.$store.state.auth?.organisation.attributes;
       }else{
         this.orgaAttributes= await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+this.myOrganisationId);
       }
@@ -315,7 +315,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@import '../../../sass/_variables.scss';
+@import '@scss/_variables.scss';
 .octopus-app{
   .sticker {
     align-self: center;

package/src/components/misc/HomeDropdown.vue

@@ -94,7 +94,7 @@ export default defineComponent({
   },
   computed: {
     organisationsAvailable(): Array<Organisation>{
-      return this.$store.state.profile.organisations?? [];
+      return this.$store.state.auth?.profile.organisations?? [];
     },
     helpLinks(){
       return [
@@ -113,7 +113,7 @@ export default defineComponent({
       return (state.generalParameters.podcastmaker as boolean);
     },
     authenticated(): boolean {
-      return this.$store.state.authentication.isAuthenticated;
+      return state.generalParameters.authenticated??false;
     },
   },
 

package/src/components/misc/LeftMenu.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-show="displayMenu"
     class="left-menu-container"
     @mouseleave="onMenuClick"
   >
@@ -61,10 +60,9 @@ export default defineComponent({
   },
   mixins:[orgaFilter],
   props: {
-    displayMenu: { default: false, type: Boolean},
     isEducation: { default: false, type: Boolean},
   },
-  emits: ['update:displayMenu'],
+  emits: ['close'],
   data() {
     return {
       organisationId: undefined as string|undefined,
@@ -127,7 +125,7 @@ export default defineComponent({
                    rubriquesId: this.rubriqueQueryParam}
     },
     onMenuClick() {
-      this.$emit('update:displayMenu', false);
+      this.$emit('close');
     },
     async onOrganisationSelected(organisation: Organisation|undefined) {
       if (organisation?.id) {

package/src/components/misc/TopBar.vue

@@ -53,7 +53,7 @@
     />
     <div class="d-flex flex-column">
       <div class="hosted-by">
-        <span>{{ $t('Hosted by') }}</span><span class="ms-1 me-1 primary-darker">Saooti</span>
+        {{ $t('Hosted by') }}<span class="ms-1 me-1 primary-darker">Saooti</span>
       </div>
       <div class="d-flex justify-content-end flex-nowrap">
         <HomeDropdown :is-education="isEducation" />

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

@@ -41,6 +41,7 @@
 import { Emission } from '@/store/class/general/emission';
 import { displayMethods } from '../../mixins/functions';
 import { defineComponent, defineAsyncComponent } from 'vue';
+import { state } from '@/store/paramStore';
 const RssSection = defineAsyncComponent(() => import('@/components/display/aggregator/RssSection.vue'));
 export default defineComponent({
   name: 'ClipboardModal',
@@ -56,7 +57,7 @@ export default defineComponent({
   emits: ['close', 'copy'],
   computed: {
     authenticated(): boolean {
-      return this.$store.state.authentication.isAuthenticated;
+      return state.generalParameters.authenticated??false;
     },
   },
   mounted(){

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

@@ -302,8 +302,8 @@ export default defineComponent({
     },
     async initData(): Promise<void> {
       let attributes;
-      if(this.$store.state.organisation?.attributes && Object.keys(this.$store.state.organisation.attributes).length > 1){
-        attributes = this.$store.state.organisation.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;
       }else{
         attributes = await octopusApi.fetchData<{[key:string]:string}>(0, 'organisation/attributes/'+state.generalParameters.organisationId);
       }

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

@@ -1,60 +1,55 @@
 <template>
   <div
-    class="w-100 transition-height bg-dark"
+    class="player-container"
     :style="{ height: playerHeight }"
+    @transitionend="onHidden"
   >
-    <div
-      class="player-container"
-      :style="{ height: playerHeight }"
-      @transitionend="onHidden"
-    >
-      <template v-if="display">
-        <audio
-          id="audio-player"
-          :src="!live? audioUrlToPlay: undefined"
-          autoplay
-          @timeupdate="onTimeUpdate"
-          @ended="onFinished"
-          @playing="onPlay"
-          @durationChange="onTimeUpdate"
-          @error="onError"
-          @seeked="onSeeked"
-        />
-        <PlayerCompact
-          v-if="!largeVersion"
-          v-model:notListenTime="notListenTime"
-          :player-error="playerError"
-          :hls-ready="hlsReady"
-          :comments="comments"
-          :display-alert-bar="displayAlertBar"
-          :percent-live-progress="percentLiveProgress"
-          :duration-live-position="durationLivePosition"
-          :listen-time="listenTime"
-          @stopPlayer="stopPlayer"
-          @changePlayerLargeVersion="largeVersion = true"
-        />
-        <PlayerLarge
-          v-else
-          v-model:notListenTime="notListenTime"
-          :player-error="playerError"
-          :hls-ready="hlsReady"
-          :comments="comments"
-          :display-alert-bar="displayAlertBar"
-          :percent-live-progress="percentLiveProgress"
-          :duration-live-position="durationLivePosition"
-          :listen-time="listenTime"
-          @stopPlayer="stopPlayer"
-          @changePlayerLargeVersion="largeVersion = false"
-        />
-      </template>
-    </div>
+    <template v-if="display">
+      <audio
+        id="audio-player"
+        :src="!live? audioUrlToPlay: undefined"
+        autoplay
+        @timeupdate="onTimeUpdate"
+        @ended="onFinished"
+        @playing="onPlay"
+        @durationChange="onTimeUpdate"
+        @error="onError"
+        @seeked="onSeeked"
+      />
+      <PlayerCompact
+        v-if="!largeVersion"
+        v-model:notListenTime="notListenTime"
+        :player-error="playerError"
+        :hls-ready="hlsReady"
+        :comments="comments"
+        :display-alert-bar="displayAlertBar"
+        :percent-live-progress="percentLiveProgress"
+        :duration-live-position="durationLivePosition"
+        :listen-time="listenTime"
+        @stopPlayer="stopPlayer"
+        @changePlayerLargeVersion="largeVersion = true"
+      />
+      <PlayerLarge
+        v-else
+        v-model:notListenTime="notListenTime"
+        :player-error="playerError"
+        :hls-ready="hlsReady"
+        :comments="comments"
+        :display-alert-bar="displayAlertBar"
+        :percent-live-progress="percentLiveProgress"
+        :duration-live-position="durationLivePosition"
+        :listen-time="listenTime"
+        @stopPlayer="stopPlayer"
+        @changePlayerLargeVersion="largeVersion = false"
+      />
+    </template>
   </div>
 </template>
 <script lang="ts">
 import { mapState } from 'vuex';
 import { CommentPodcast } from '@/store/class/general/comment';
 import { playerLogic } from '../../mixins/player/playerLogic';
-import { StoreState } from '@/store/typeAppStore';
+import { StoreState } from '@/store/classStore/typeAppStore';
 import PlayerCompact from '../player/PlayerCompact.vue';
 import PlayerLarge from '../player/PlayerLarge.vue';
 import { defineComponent } from 'vue';
@@ -108,7 +103,7 @@ export default defineComponent({
   methods: {
     onHidden(): void {
       if (this.forceHide) {
-        this.$store.commit('playerPlayPodcast');
+        this.$store.commit('player/playPodcast');
         this.forceHide = false;
       }
     },

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

@@ -60,12 +60,12 @@
     </div>
     <button
       :title="$t('Enlarge')"
-      class="btn play-button-box saooti-up"
+      class="btn play-button-box btn-transparent text-light saooti-up"
       @click="changePlayerLargeVersion"
     />
     <button
       :title="$t('Close')"
-      class="btn play-button-box saooti-remove"
+      class="btn play-button-box btn-transparent text-light saooti-remove"
       @click="stopPlayer"
     />
     <PlayerTimeline

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

@@ -34,7 +34,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import '../../../sass/_variables.scss';
+@import '@scss/_variables.scss';
 .octopus-app{
 .player-container {
   .timeline-button {

package/src/components/mixins/handle403.ts

@@ -4,7 +4,7 @@ export const handle403 = defineComponent({
   methods: {
     handle403(error: AxiosError): void {
       if (403 === error.response?.status) {
-        if(!this.$store.state.authentication.isAuthenticated){
+        if(undefined===this.$store.state.auth){
           window.location.href = window.location.origin + "/sso/login";
         }else{
           this.$router.push({

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

@@ -3,7 +3,7 @@ import { mapState } from 'vuex';
 import { state } from '../../../store/paramStore';
 import octopusApi from '@saooti/octopus-api';
 import { CommentPodcast } from '@/store/class/general/comment';
-import { StoreState } from '@/store/typeAppStore';
+import { StoreState } from '@/store/classStore/typeAppStore';
 import { defineComponent } from 'vue';
 import { FetchParam } from '@/store/class/general/fetchParam';
 import { InterfacePageable } from '@/store/class/general/interfacePageable';

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

@@ -107,10 +107,10 @@ export const playerDisplay = defineComponent({
       }
     },
     onPlay(): void {
-      this.$store.commit('playerPause', false);
+      this.$store.commit('player/pause', false);
     },
     onPause(): void {
-      this.$store.commit('playerPause', true);
+      this.$store.commit('player/pause', true);
     },
 	}
 });