@saooti/octopus-sdk 31.0.34 → 31.0.37

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

@@ -8,11 +8,10 @@
       class="img-box"
       :alt="$t('Episode name image', {name:podcast.title})"
     >
-    <template v-if="isPodcastmaker">
-      <div
-        :class="mainRubrique? 'mainRubrique' : 'notMainRubrique'"
-      />
-    </template>
+    <div
+      v-if="isPodcastmaker"
+      :class="mainRubrique? 'mainRubrique' : 'notMainRubrique'"
+    />
     <div
       v-if="fetchConference"
       class="live-image-status"
@@ -77,15 +76,10 @@
       </div>
     </div>
     <div
-      v-if="!isDescription && displayDescription && isMobile"
+      v-if="displayDescription && isMobile"
       class="background-icon primary-bg saooti-arrow-up2"
-      :title="$t('Show description')"
-      @click="showDescription"
-    />
-    <div
-      v-if="isDescription && displayDescription && isMobile"
-      class="background-icon primary-bg saooti-arrow-down2"
-      :title="$t('Hide description')"
+      :class="isDescription ? 'saooti-arrow-down2':'saooti-arrow-up2'"
+      :title="isDescription ? $t('Hide description'):$t('Show description')"
       @click="showDescription"
     />
   </div>
@@ -210,21 +204,21 @@ export default defineComponent({
       if (!this.fetchConference) return '';
       switch (this.fetchConference.status) {
         case 'PLANNED':
-          return this.$t('live in few time').toString();
+          return this.$t('live in few time');
         case 'PENDING':
-          if (this.isAnimatorLive) return this.$t('Open studio').toString();
-          return this.$t('live upcoming').toString();
+          if (this.isAnimatorLive) return this.$t('Open studio');
+          return this.$t('live upcoming');
         case 'RECORDING':
-          return this.$t('In live').toString();
+          return this.$t('In live');
         case 'DEBRIEFING':
           if (!this.isAnimatorLive) return '';
           if ('READY_TO_RECORD' === this.podcast.processingStatus)
-            return this.$t('Not recording').toString();
-          return this.$t('Debriefing').toString();
+            return this.$t('Not recording');
+          return this.$t('Debriefing');
         case 'ERROR':
-          return this.$t('In error').toString();
+          return this.$t('In error');
         case 'PUBLISHING':
-          return this.$t('Publishing').toString();
+          return this.$t('Publishing');
         default:
           return '';
       }
@@ -297,83 +291,83 @@ export default defineComponent({
 
 <style lang="scss">
 .octopus-app{
-.live-image-status {
-  text-align: center;
-  width: 100%;
-  font-size: 0.6rem;
-  padding: 0.2rem 0;
-  color: white;
-  text-transform: uppercase;
-  position: absolute;
-}
-
-.background-icon{
-  border-radius: 50%;
-  width: 1rem;
-  height: 1rem;
-  font-size: 1rem;
-  right: 0;
-  bottom: 0;
-  margin: 5px;
-  position: absolute;
-  cursor: pointer;
-  z-index: 3;
-}
-.special-icon-play-button {
-  width: 30px;
-  height: 30px;
-  background-color: #ffd663;
-  border-radius: 50%;
-  position: absolute;
-  right: 4.5rem;
-  top: 6rem;
-  font-size: 0.9rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.transparent-background {
-  background-color: rgba(255, 255, 255, 0.5);
-}
-.podcast-image-play-button {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  cursor: pointer;
-  flex-direction: column;
+  .live-image-status {
+    text-align: center;
+    width: 100%;
+    font-size: 0.6rem;
+    padding: 0.2rem 0;
+    color: white;
+    text-transform: uppercase;
+    position: absolute;
+  }
 
-  .icon-container {
-    background: #00000050;
+  .background-icon{
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    font-size: 1rem;
+    right: 0;
+    bottom: 0;
+    margin: 5px;
+    position: absolute;
+    cursor: pointer;
+    z-index: 3;
+  }
+  .special-icon-play-button {
+    width: 30px;
+    height: 30px;
+    background-color: #ffd663;
     border-radius: 50%;
-    height: 3rem;
-    width: 3rem;
+    position: absolute;
+    right: 4.5rem;
+    top: 6rem;
+    font-size: 0.9rem;
+    font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
-    &.error-icon {
-      background: #00000050 !important;
-      cursor: default !important;
-    }
-    &:hover {
-      background: #00000030;
-    }
-    > .saooti-play2-bounty {
-      font-size: 2em;
-      position: relative;
-      right: -0.2rem;
-    }
-    .big-icon-error {
-      font-size: 2em;
-      position: relative;
+  }
+  .transparent-background {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+  .podcast-image-play-button {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+    flex-direction: column;
+
+    .icon-container {
+      background: #00000050;
+      border-radius: 50%;
+      height: 3rem;
+      width: 3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &.error-icon {
+        background: #00000050 !important;
+        cursor: default !important;
+      }
+      &:hover {
+        background: #00000030;
+      }
+      > .saooti-play2-bounty {
+        font-size: 2em;
+        position: relative;
+        right: -0.2rem;
+      }
+      .big-icon-error {
+        font-size: 2em;
+        position: relative;
+      }
+      z-index: 2;
     }
-    z-index: 2;
   }
 }
-}
 </style>

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

@@ -84,8 +84,7 @@ export default defineComponent({
       return moment(this.podcast.pubDate).format('X');
     },
     description(): string {
-      if (!this.podcast.description) return '';
-      return this.podcast.description;
+      return this.podcast.description ? this.podcast.description : '';
     },
   },
 

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

@@ -11,12 +11,15 @@
         {{ durationString }}
       </div>
     </div>
-    <AnimatorsItem :animators="animators" />
+    <AnimatorsItem
+      v-if="animators && 0!==animators.length"
+      :animator="animators[0]"
+    />
     <router-link
       :to="{
         name: 'podcast',
         params: { podcastId: podcastId },
-        query: { productor: $store.state.filter.organisationId },
+        query: { productor: filterOrga },
       }"
       class="text-dark d-flex flex-column flex-grow-1"
     >
@@ -35,7 +38,7 @@
         :to="{
           name: 'productor',
           params: { productorId: podcastOrganisationId },
-          query: { productor: $store.state.filter.organisationId },
+          query: { productor: filterOrga },
         }"
         class="text-dark producer-podcast-item"
       >
@@ -52,6 +55,7 @@
 <script lang="ts">
 import AnimatorsItem from './AnimatorsItem.vue';
 import { state } from '../../../store/paramStore';
+import { orgaComputed } from '../../mixins/orgaComputed';
 import moment from 'moment';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
@@ -66,6 +70,8 @@ export default defineComponent({
     PodcastPlayBar
   },
 
+  mixins:[orgaComputed],
+
   props: {
     podcastId: { default: undefined, type: Number},
     title: { default: "", type: String},
@@ -84,16 +90,10 @@ export default defineComponent({
     date(): string {
       return moment(this.pubDate).format('D MMMM YYYY, HH[h]mm');
     },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     editRight(): boolean {
       if (
         (this.authenticated &&
-          this.organisationId === this.podcastOrganisationId) ||
+          this.myOrganisationId === this.podcastOrganisationId) ||
         state.generalParameters.isAdmin
       )
         return true;

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

@@ -1,68 +1,57 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <ClassicLoading
-      :loading-text="loading?$t('Loading podcasts ...'):undefined"
-      :error-text="loaded && !podcasts.length?$t(`No podcast match your query`):undefined"
-    />
-    <template v-if="loaded">
-      <div
-        v-if="showCount && podcasts.length > 1"
-        class="text-secondary mb-2"
-      >
-        {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
-      </div>
+  <ListPaginate
+    id="podcastListPaginate"
+    v-model:first="dfirst"
+    v-model:rowsPerPage="dsize"
+    v-model:isMobile="isMobile"
+    :text-count="showCount && podcasts.length > 1 ? $t('Number podcasts', { nb: totalCount }) + sortText : undefined"
+    :total-count="totalCount"
+    :loading="loading"
+    :loading-text="loading?$t('Loading podcasts ...'):undefined"
+    :error-text="!loading && !podcasts.length?$t(`No podcast match your query`):undefined"
+  >
+    <template #list>
       <ul
         class="podcast-list"
       >
-        <PodcastItem
-          v-for="p in podcasts"
+        <template
+          v-for="p in displayArray"
           :key="p.podcastId"
-          :podcast="p"
-        />
-      </ul>
-      <button
-        v-show="!allFetched"
-        class="btn"
-        :class="buttonPlus ? 'btn-primary align-self-center width-fit-content m-4' : 'btn-more'"
-        :disabled="inFetching"
-        :title="$t('See more')"
-        @click="displayMore"
-      >
-        <template v-if="buttonPlus">
-          {{ $t('See more') }}
+        >
+          <PodcastItem
+            v-if="-1!==p.podcastId"
+            :podcast="p"
+          />
         </template>
-        <div
-          :class="buttonPlus?'ms-1':''"
-          class="saooti-more"
-        />
-      </button>
+      </ul>
     </template>
-  </div>
+  </ListPaginate>
 </template>
 
 <script lang="ts">
+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 ClassicLoading from '../../form/ClassicLoading.vue';
 import { Podcast } 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',
 
   components: {
     PodcastItem,
-    ClassicLoading
+    ListPaginate
   },
 
   mixins: [handle403],
 
   props: {
     first: { default: 0, type: Number},
-    size: { default: 12, type: Number},
+    size: { default: 30, type: Number},
     organisationId: { default: undefined, type: String},
     emissionId: { default: undefined, type: Number},
     iabId: { default: undefined, type: Number},
@@ -86,33 +75,29 @@ export default defineComponent({
   data() {
     return {
       loading: true as boolean,
-      loaded: false as boolean,
       dfirst: this.first as number,
       dsize: this.size as number,
       totalCount: 0 as number,
       podcasts: [] as Array<Podcast>,
-      inFetching: false as boolean,
+      isMobile: false as boolean,
     };
   },
 
   computed: {
-    allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus(): boolean {
-      return (state.generalParameters.buttonPlus as boolean);
-    },
+    displayArray(): Array<Podcast>{
+      if(this.isMobile){
+        return this.podcasts;
+      }
+      return this.podcasts.slice(this.dfirst, Math.min(this.dfirst + this.dsize,this.totalCount));
+		},
     changed(): string {
       return `${this.first}|${this.size}|${this.organisation}|${this.emissionId}|${this.sortCriteria}|${this.sort}
       ${this.iabId}|${this.participantId}|${this.query}|${this.monetization}|${this.popularSort}|
       ${this.rubriqueId}|${this.rubriquageId}|${this.before}|${this.after}|${this.includeHidden}|${this.noRubriquageId}|${this.notValid}`;
     },
-    filterOrga(): string {
-      return this.$store.state.filter.organisationId;
-    },
     organisation(): string|undefined {
       if (this.organisationId) return this.organisationId;
-      if (this.filterOrga) return this.filterOrga;
+      if (this.$store.state.filter.organisationId) return this.$store.state.filter.organisationId;
       return undefined;
     },
     sort(): string {
@@ -122,40 +107,39 @@ export default defineComponent({
     },
     sortText(): string {
       switch (this.sortCriteria) {
-        case 'SCORE':
-          return " "+this.$t('sort by score').toString();
-        case 'DATE':
-          return " "+this.$t('sort by date').toString();
-        case 'NAME':
-          return " "+this.$t('sort by alphabetical').toString();
-        default:
-          return " "+this.$t('sort by date').toString();
+        case 'SCORE':return " "+this.$t('sort by score');
+        case 'DATE':return " "+this.$t('sort by date');
+        case 'NAME':return " "+this.$t('sort by alphabetical');
+        default:return " "+this.$t('sort by date');
       }
     },
-    isProduction(): boolean {
-      return (state.generalParameters.isProduction as boolean);
-    },
   },
   watch: {
     changed(): void {
-      this.fetchContent(true);
+      this.reloadList();
     },
     reload(): void {
-      this.fetchContent(true);
+      this.reloadList();
     },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.podcasts[this.dfirst] || -1===this.podcasts[this.dfirst].podcastId){
+				this.fetchContent(false);
+			}
+		},
   },
-  
   async created() {
     await this.fetchContent(true);
   },
   methods: {
+    reloadList(){
+      this.dfirst = 0;
+      this.fetchContent(true);
+    },
     async fetchContent(reset: boolean): Promise<void> {
-      this.inFetching = true;
-      if (reset) {
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
-      }
+      this.loading = true;
       const param: FetchParam = {
         first: this.dfirst,
         size: this.dsize,
@@ -176,7 +160,7 @@ export default defineComponent({
       if (undefined !== this.notValid) {
         param.validity = !this.notValid;
       }
-      if (this.notValid && !this.isProduction) {
+      if (this.notValid && !(state.generalParameters.isProduction as boolean)) {
         param.publisherId = this.$store.state.profile.userId;
       }
       try {
@@ -189,26 +173,22 @@ export default defineComponent({
     afterFetching(reset: boolean, data:  {count: number, result: Array<Podcast>, sort: string}): void {
       if (reset) {
         this.podcasts.length = 0;
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
       }
-      this.loading = false;
-      this.loaded = true;
-      this.podcasts = this.podcasts.concat(data.result).filter((p: Podcast|null) => {
+      if(this.dfirst > this.podcasts.length){
+        for (let i = this.podcasts.length-1, len = this.dfirst + this.dsize; i < len; i++) {
+          this.podcasts.push(emptyPodcastData());
+        }
+      }
+      const responsePodcasts= data.result.filter((p: Podcast|null) => {
         return null !== p;
       });
+      this.podcasts = this.podcasts.slice(0, this.dfirst).concat(responsePodcasts).concat(this.podcasts.slice(this.dfirst+this.dsize, this.podcasts.length));
       this.$emit('fetch', this.podcasts);
-      this.dfirst += this.dsize;
       this.totalCount = data.count;
       if (0 === this.podcasts.length) {
         this.$emit('emptyList');
       }
-      this.inFetching = false;
-    },
-    displayMore(event: { preventDefault: () => void }): void {
-      event.preventDefault();
-      this.fetchContent(false);
+      this.loading = false;
     },
   },
 })

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

@@ -60,7 +60,7 @@
                 name: 'emission',
                 params: { emissionId: podcast.emission.emissionId },
                 query: {
-                  productor: $store.state.filter.organisationId,
+                  productor: filterOrga,
                 },
               }"
             >
@@ -75,7 +75,7 @@
                 name: 'productor',
                 params: { productorId: podcast.organisation.id },
                 query: {
-                  productor: $store.state.filter.organisationId,
+                  productor: filterOrga,
                 },
               }"
             >
@@ -107,16 +107,8 @@
               {{ $t('From RSS') }}
             </div>
             <ErrorMessage
-              v-if="!podcast.availability.visibility"
-              :message="$t('Podcast is not visible for listeners')"
-            />
-            <ErrorMessage
-              v-if="'ERROR' === podcast.processingStatus"
-              :message="$t('Podcast in ERROR, please contact Saooti')"
-            />
-            <ErrorMessage
-              v-if="podcastNotValid"
-              :message="$t('Podcast not validated')"
+              v-if="''!==errorMessage"
+              :message="errorMessage"
             />
           </div>
         </div>
@@ -138,6 +130,7 @@ import moment from 'moment';
 // @ts-ignore
 import humanizeDuration from 'humanize-duration';
 import { displayMethods } from '../../mixins/functions';
+import { orgaComputed } from '../../mixins/orgaComputed';
 import { Podcast } from '@/store/class/general/podcast';
 import { Conference } from '@/store/class/conference/conference';
 
@@ -153,7 +146,7 @@ export default defineComponent({
     PodcastPlayBar
   },
 
-  mixins:[displayMethods],
+  mixins:[displayMethods, orgaComputed],
 
   props: {
     playingPodcast: { default: undefined, type: Object as ()=> Podcast},
@@ -163,21 +156,22 @@ export default defineComponent({
 
   emits: ['playPodcast'],
 
-  data() {
-    return {
-    };
-  },
-
   computed: {
+    errorMessage(): string{
+      if(!this.podcast?.availability.visibility){
+        return this.$t('Podcast is not visible for listeners');
+      }
+      if('ERROR' === this.podcast?.processingStatus){
+        return this.$t('Podcast in ERROR, please contact Saooti');
+      }
+      if(this.podcastNotValid){
+        return this.$t('Podcast not validated');
+      }
+      return '';
+    },
     isPodcastmaker(): boolean {
       return (state.generalParameters.podcastmaker as boolean);
     },
-    organisationId(): string|undefined {
-      return state.generalParameters.organisationId;
-    },
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     date(): string {
       if (this.podcast && 1970 !== moment(this.podcast.pubDate).year()){
         return moment(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
@@ -202,7 +196,7 @@ export default defineComponent({
     editRight(): boolean {
       if ( this.podcast &&
         (this.authenticated &&
-          this.organisationId === this.podcast.organisation.id) ||
+          this.myOrganisationId === this.podcast.organisation.id) ||
         state.generalParameters.isAdmin
       )
         return true;

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

@@ -24,7 +24,6 @@
         :loop="true"
         :navigation="true"
         :modules="modules"
-        class="mySwiper"
       >
         <swiper-slide
           v-for="p in allPodcasts"
@@ -129,13 +128,14 @@ export default defineComponent({
 
 
   mounted() {
+    this.handleResize();
     this.fetchNext();
   },
   methods: {
     handleResize(): void {
       if (!this.$el) return;
       const width = (this.$el as HTMLElement).offsetWidth;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 2);
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
       this.numberItem = Math.floor(width / sixteen);
     },
     async fetchNext(): Promise<void> {
@@ -182,7 +182,6 @@ export default defineComponent({
 .swiper {
   width: 100%;
   height: 100%;
-  padding: 50px 20px;
 }
 .swiper-button-next, .swiper-button-prev{
   color: $octopus-primary-color !important;

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

@@ -47,8 +47,6 @@ export default defineComponent({
   props: {
     tagList: { default: () => [], type: Array as ()=>Array<string>},
   },
-  methods: {
-  },
 })
 </script>