@saooti/octopus-sdk 0.28.16 → 1.1.1

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

@@ -1,144 +1,142 @@
 <template>
-  <div class="d-flex flex-column align-items-center">
-    <div class="d-flex justify-content-center" v-if="loading">
-      <div class="spinner-border mr-3"></div>
-      <h3 class="mt-2">{{ $t('Loading podcasts ...') }}</h3>
-    </div>
-    <div v-if="loaded && !podcasts.length">
-      <p>{{ $t('No podcast match your query') }}</p>
-    </div>
-    <div
-      v-if="showCount && loaded && podcasts.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{ $t('Number podcasts', { nb: totalCount }) + sortText }}
-    </div>
-    <ul class="podcast-list" v-show="loaded">
-      <PodcastItem
-        v-bind:podcast="p"
-        v-for="p in podcasts"
-        v-bind:key="p.podcastId"
-      />
-    </ul>
-    <button
-      class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
-      @click="displayMore"
-      :disabled="inFetching"
-      v-show="!allFetched && loaded"
-      :aria-label="$t('See more')"
-    >
-      <template v-if="buttonPlus">{{ $t('See more') }}</template>
-      <div class="saooti-plus"></div>
-    </button>
-  </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"
+      >
+        <template
+          v-for="p in displayArray"
+          :key="p.podcastId"
+        >
+          <PodcastItem
+            v-if="0!==p.podcastId"
+            :podcast="p"
+          />
+        </template>
+      </ul>
+    </template>
+  </ListPaginate>
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
-const octopusApi = require('@saooti/octopus-api');
-import podcastApi from '@/api/podcasts';
+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 Vue from 'vue';
-import { Podcast } from '@/store/class/podcast';
-export default Vue.extend({
+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,
+    ListPaginate
   },
 
+  mixins: [handle403],
+
   props: {
-    first: { default: 0 as number},
-    size: { default: 12 as number },
-    organisationId: { default: undefined as string | undefined },
-    emissionId: { default: undefined as number | undefined },
-    iabId: { default: undefined as number | undefined },
-    participantId: { default: undefined as number | undefined },
-    query: { default: undefined as string | undefined },
-    monetization: { default: undefined as string | undefined },
-    popularSort: { default: false as boolean },
-    reload: { default: false as boolean },
-    before: { default: undefined as string | undefined },
-    after: { default: undefined as string | undefined },
-    includeHidden: { default: false as boolean},
-    showCount: { default: false as boolean },
-    sortCriteria: { default: undefined as string | undefined },
-    notValid: { default: undefined as boolean | undefined },
-    rubriqueId: { default: () => ([]) as Array<number> },
-    rubriquageId:{ default: () => ([]) as Array<number> },
-    noRubriquageId: { default: () => ([]) as Array<number> },
+    first: { default: 0, type: Number},
+    size: { default: 30, type: Number},
+    organisationId: { default: undefined, type: String},
+    emissionId: { default: undefined, type: Number},
+    iabId: { default: undefined, type: Number},
+    participantId: { default: undefined, type: Number},
+    query: { default: undefined, type: String},
+    monetization: { default: undefined, type: String},
+    popularSort: { default: false, type: Boolean},
+    reload: { default: false, type: Boolean},
+    before: { default: undefined, type: String},
+    after: { default: undefined, type: String},
+    includeHidden: { default: false, type: Boolean},
+    showCount: { default: false, type: Boolean },
+    sortCriteria: { default: undefined, type: String},
+    notValid: { default: undefined , type: Boolean},
+    rubriqueId: { default: () => [], type: Array as ()=>Array<number> },
+    rubriquageId:{ default: () => [], type: Array as ()=>Array<number> },
+    noRubriquageId: { default: () => [], type: Array as ()=>Array<number> },
   },
+  emits: ['fetch', 'emptyList'],
 
   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,
     };
   },
-  
-  created() {
-    this.fetchContent(true);
-  },
-  
+
   computed: {
-    allFetched(): boolean {
-      return this.dfirst >= this.totalCount;
-    },
-    buttonPlus(): boolean {
-      return state.generalParameters.buttonPlus;
-    },
+    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;
-      return undefined;
+      return this.organisationId ?? this.$store.state.filter.organisationId;
     },
     sort(): string {
-      if (this.popularSort) return 'POPULARITY';
-      return this.sortCriteria;
+      return this.popularSort? "POPULARITY" : this.sortCriteria??'DATE';
     },
     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;
+  },
+  watch: {
+    changed(): void {
+      this.reloadList();
+    },
+    reload(): void {
+      this.reloadList();
     },
+    dsize():void{
+      this.reloadList();
+		},
+		dfirst(): void{
+			if(!this.podcasts[this.dfirst] || 0===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.podcasts.length = 0;
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
-      }
-      const param: any = {
+      this.loading = true;
+      const param: FetchParam = {
         first: this.dfirst,
         size: this.dsize,
         organisationId: this.organisation,
@@ -153,54 +151,37 @@ export default Vue.extend({
         noRubriquageId: this.noRubriquageId.length ? this.noRubriquageId : undefined,
         rubriqueId: this.rubriqueId.length ? this.rubriqueId : undefined,
         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
       };
-      if (undefined !== this.notValid) {
-        param.validity = !this.notValid;
-      }
-      if (this.notValid && !this.isProduction) {
-        param.publisherId = this.$store.state.profile.userId;
-      }
-      if (this.includeHidden) {
-        param.includeHidden = this.includeHidden;
-        const data = await podcastApi.fetchPodcastsAdmin(this.$store.state, param);
-        this.afterFetching(reset, data);
-      } else {
-        const data = await octopusApi.fetchPodcasts(param);
+      try {
+        const data =await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',param, true);
         this.afterFetching(reset, data);
+      } catch (error) {
+        this.handle403((error as AxiosError));
       }
     },
-    afterFetching(reset: boolean, data: any): void {
+    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);
-    },
-  },
-  watch: {
-    changed(): void {
-      this.fetchContent(true);
-    },
-    reload(): void {
-      this.fetchContent(true);
+      this.loading = false;
     },
   },
-});
-</script>
+})
+</script>

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

@@ -0,0 +1,234 @@
+<template>
+  <div class="module-box">
+    <div
+      class="text-uppercase h4"
+    >
+      {{ podcast.title }}
+    </div>
+    <div class="mb-5 mt-3 d-flex">
+      <div class="w-100">
+        <PodcastImage
+          :class="[
+            !isLiveReadyToRecord
+              ? 'shadow-element'
+              : '',
+            isLiveReadyToRecord &&
+              fetchConference &&
+              'null' !== fetchConference &&
+              fetchConference.status
+              ? fetchConference.status.toLowerCase() + '-shadow'
+              : '',
+          ]"
+          class="me-3"
+          :podcast="podcast"
+          :hide-play="!isLiveReadyToRecord"
+          :playing-podcast="playingPodcast"
+          :fetch-conference="fetchConference"
+          :is-animator-live="isOctopusAndAnimator"
+          @playPodcast="playPodcast"
+        />
+        <div
+          class="d-flex flex-wrap mb-3"
+          :class="isLiveReady ? 'justify-content-between' : ''"
+        >
+          <div
+            v-if="0 !== date.length"
+            :class="!isLiveReady ? 'me-5' : ''"
+          >
+            {{ date }}
+          </div>
+          <div>
+            {{ $t('Duration', { duration: duration }) }}
+          </div>
+          <div
+            v-if="isLiveReady"
+            class="text-danger"
+          >
+            {{ $t('Episode record in live') }}
+          </div>
+        </div>
+        <!-- eslint-disable vue/no-v-html -->
+        <div
+          class="descriptionText html-wysiwyg-content"
+          v-html="urlify(podcast.description)"
+        />
+        <!-- eslint-enable -->
+        <div class="my-3">
+          <ParticipantDescription :participants="podcast.animators" />
+          <div>
+            {{ $t('Emission') + ' : ' }}
+            <router-link
+              class="fw-bold"
+              :to="{
+                name: 'emission',
+                params: { emissionId: podcast.emission.emissionId },
+                query: {
+                  productor: filterOrga,
+                },
+              }"
+            >
+              {{ podcast.emission.name }}
+            </router-link>
+          </div>
+          <div v-if="!isPodcastmaker">
+            {{ $t('Producted by : ') }}
+            <router-link
+              class="fw-bold"
+              :to="{
+                name: 'productor',
+                params: { productorId: podcast.organisation.id },
+                query: {
+                  productor: filterOrga,
+                },
+              }"
+            >
+              {{ podcast.organisation.name }}
+            </router-link>
+          </div>
+          <a
+            v-if="podcast.article"
+            class="btn d-flex align-items-center my-2 width-fit-content"
+            :href="podcast.article"
+            rel="noopener"
+            target="_blank"
+          >
+            <span class="saooti-newspaper me-1" />
+            <div>{{ $t('See associated article') }}</div>
+          </a>
+          <ParticipantDescription
+            :participants="podcast.guests"
+            :is-guest="true"
+          />
+          <PodcastPlayBar
+            :podcast="podcast"
+          />
+          <div v-if="editRight && !isPodcastmaker">
+            <div
+              v-if="podcast.annotations && podcast.annotations.RSS"
+              class="me-5"
+            >
+              {{ $t('From RSS') }}
+            </div>
+            <ErrorMessage
+              v-if="''!==errorMessage"
+              :message="errorMessage"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <TagList
+      :tag-list="podcast.tags"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import PodcastPlayBar from './PodcastPlayBar.vue';
+import PodcastImage from './PodcastImage.vue';
+import ParticipantDescription from './ParticipantDescription.vue';
+import TagList from './TagList.vue';
+import { state } from '../../../store/paramStore';
+import 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';
+
+import { defineComponent, defineAsyncComponent } from 'vue';
+const ErrorMessage = defineAsyncComponent(() => import('../../misc/ErrorMessage.vue'));
+export default defineComponent({
+  name: "PodcastModuleBox",
+  components: {
+    PodcastImage,
+    ParticipantDescription,
+    TagList,
+    ErrorMessage,
+    PodcastPlayBar
+  },
+
+  mixins:[displayMethods, orgaComputed],
+
+  props: {
+    playingPodcast: { default: undefined, type: Object as ()=> Podcast},
+    podcast: { default: undefined, type: Object as ()=> Podcast},
+    fetchConference: { default: undefined, type: Object as ()=> Conference},
+  },
+
+  emits: ['playPodcast'],
+
+  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');
+      }
+      return this.podcastNotValid ? this.$t('Podcast not validated') : '';
+    },
+    isPodcastmaker(): boolean {
+      return (state.generalParameters.podcastmaker 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');
+      }
+      return '';
+    },
+    duration(): string {
+      if (!this.podcast || this.podcast.duration <= 1) return '';
+      if (this.podcast.duration > 600000) {
+        return humanizeDuration(this.podcast.duration, {
+          language: this.$i18n.locale,
+          largest: 1,
+          round: true,
+        });
+      }
+      return humanizeDuration(this.podcast.duration, {
+        language: this.$i18n.locale,
+        largest: 2,
+        round: true,
+      });
+    },
+    editRight(): boolean {
+      return (true===this.authenticated &&
+        this.myOrganisationId === this.podcast?.organisation.id) ||true===state.generalParameters.isAdmin
+    },
+    isLiveReadyToRecord(): boolean {
+      return (undefined!==this.podcast && undefined!==this.podcast.conferenceId && 0 !== this.podcast.conferenceId && 'READY_TO_RECORD' === this.podcast.processingStatus);
+    },
+    isLiveReady(): boolean {
+      return (
+        undefined!==this.podcast?.conferenceId &&
+        0 !== this.podcast?.conferenceId &&
+        'READY' === this.podcast?.processingStatus
+      );
+    },
+    isNotRecorded(): boolean {
+      return (
+        this.isLiveReadyToRecord &&
+        undefined!==this.fetchConference &&
+        'DEBRIEFING' === this.fetchConference.status
+      );
+    },
+    isOctopusAndAnimator(): boolean {
+      return (
+        !this.isPodcastmaker &&
+        this.editRight &&
+        (state.generalParameters.isRoleLive as boolean)
+      );
+    },
+    podcastNotValid(): boolean {
+      return undefined!==this.podcast?.availability && false === this.podcast?.valid;
+    },
+  },
+  methods: {
+    playPodcast(podcast: Podcast): void {
+      this.$emit('playPodcast', podcast);
+    },
+  },
+})
+</script>

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

@@ -0,0 +1,101 @@
+<template>
+  <div
+    v-if="isProgressBar"
+    class="d-flex align-items-center podcast-play-bar"
+  >
+    <div class="me-2">
+      {{ playedTime }}
+    </div>
+    <div class="position-relative flex-grow-1">
+      <div
+        class="progress flex-grow-1 c-hand"
+        @mouseup="seekTo"
+      >
+        <div
+          class="progress-bar primary-bg"
+          role="progressbar"
+          aria-valuenow="0"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          :style="'width: ' + percentProgress + '%'"
+        />
+        <div
+          class="progress-bar-cursor"
+          :style="'left:' + percentProgress + '%'"
+        />
+      </div>
+    </div>
+    <div class="ms-2">
+      {{ totalTime }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import DurationHelper from '../../../helper/duration';
+import { displayMethods } from '../../mixins/functions';
+import { state } from '../../../store/paramStore';
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'PodcastPlayBar',
+  mixins: [displayMethods],
+  props: {
+    podcastId: { default: undefined, type: Number},
+    duration: { default: 0, type: Number},
+  },
+  computed: {
+    isProgressBar(): boolean{
+      return (state.emissionsPage.progressBar as boolean);
+    },
+    percentProgress(): number{
+      if(this.podcastId !== this.$store.state.player.podcast?.podcastId){
+        return 0;
+      }
+      return !this.$store.state.player.elapsed ? 0 : this.$store.state.player.elapsed * 100;
+    },
+    playedTime(): string{
+      if(this.podcastId === this.$store.state.player.podcast?.podcastId){
+        if (this.$store.state.player.elapsed && this.$store.state.player.elapsed > 0 && this.$store.state.player.total && this.$store.state.player.total > 0) {
+          return DurationHelper.formatDuration(
+            Math.round(this.$store.state.player.elapsed * this.$store.state.player.total)
+          );
+        }
+      }
+      return '00:00';
+    },
+    totalTime(): string {
+      return DurationHelper.formatDuration(Math.round(this.duration/1000));
+    },
+  },
+  methods: {
+    seekTo(event: MouseEvent): void {
+      if(!this.$store.state.player.podcast || this.podcastId !== this.$store.state.player.podcast.podcastId){return;}
+      const rect = (event.currentTarget as Element).getBoundingClientRect();
+      const barWidth = (event.currentTarget as Element).clientWidth;
+      const x = event.clientX - rect.left;
+      const percentPosition = x / barWidth;
+      if (percentPosition * 100 >= this.percentLiveProgress) return;
+      const seekTime = this.$store.state.player.total * percentPosition;
+      this.$store.commit("playerSeekTime", seekTime);
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.octopus-app{
+.podcast-play-bar {
+  .progress{
+    height: 6px;
+  }
+  .progress-bar-cursor{
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: black;
+    align-self: center;
+    position: absolute;
+  }
+}
+}
+</style>