@saooti/octopus-sdk 30.0.6 → 30.0.10

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

@@ -1,48 +1,41 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <div
-      v-if="loading"
-      class="d-flex justify-content-center"
-    >
-      <div class="spinner-border me-3" />
-      <h3 class="mt-2">
-        {{ $t('Loading participants ...') }}
-      </h3>
-    </div>
-    <div
-      v-if="showCount && loaded && participants.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{
-        $t('Number participants', { nb: displayCount }) + $t('sort by score')
-      }}
-    </div>
-    <ul
-      v-show="loaded"
-      class="participant-list"
-    >
-      <ParticipantItem
-        v-for="p in participants"
-        :key="p.participantId"
-        :participant="p"
+    <ClassicLoading
+      :loading-text="loading?$t('Loading participants ...'):undefined"
+    />
+    <template v-if="isLoadingMoreOrFinished">
+      <div
+        v-if="showCount"
+        class="text-secondary mb-2"
+      >
+        {{
+          $t('Number participants', { nb: displayCount }) + $t('sort by score')
+        }}
+      </div>
+      <ul
+        class="participant-list"
+      >
+        <ParticipantItem
+          v-for="p in participants"
+          :key="p.participantId"
+          :participant="p"
+        />
+      </ul>
+      <button
+        v-show="!allFetched"
+        class="btn btn-more saooti-plus"
+        :aria-label="$t('See more')"
+        :disabled="loading"
+        @click="fetchContent(false)"
       />
-    </ul>
-    <button
-      v-show="!allFetched && loaded"
-      class="btn btn-more"
-      :aria-label="$t('See more')"
-      :disabled="inFetching"
-      @click="displayMore"
-    >
-      <div class="saooti-plus" />
-    </button>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
 import ParticipantItem from './ParticipantItem.vue';
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Participant } from '@/store/class/general/participant';
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -50,6 +43,7 @@ export default defineComponent({
 
   components: {
     ParticipantItem,
+    ClassicLoading
   },
   props: {
     first: { default: 0, type: Number },
@@ -62,18 +56,19 @@ export default defineComponent({
   data() {
     return {
       loading: true as boolean,
-      loaded: true as boolean,
       dfirst: this.first as number,
       dsize: this.size as number,
       totalCount: 0 as number,
       displayCount: 0 as number,
       participants: [] as Array<Participant>,
-      inFetching: false as boolean,
     };
   },
 
    
   computed: {
+    isLoadingMoreOrFinished():boolean{
+      return !this.loading || this.participants.length > 1;
+    },
     allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
@@ -100,21 +95,17 @@ export default defineComponent({
   },
   methods: {
     async fetchContent(reset: boolean): Promise<void> {
-      this.inFetching = true;
-      if (reset) {
-        this.participants.length = 0;
-        this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
-      }
+      this.loading = true;
       const data = await octopusApi.fetchParticipants({
         first: this.dfirst,
         size: this.dsize,
         query: this.query,
         organisationId: this.organisation,
       });
-      this.loading = false;
-      this.loaded = true;
+      if (reset) {
+        this.participants.length = 0;
+        this.dfirst = 0;
+      }
       this.displayCount = data.count;
       this.participants = this.participants.concat(data.result).filter((p: Participant | null) => {
         if (null === p) {
@@ -124,11 +115,7 @@ export default defineComponent({
       });
       this.dfirst += this.dsize;
       this.totalCount = data.count;
-      this.inFetching = false;
-    },
-    displayMore(event: { preventDefault: () => void }): void {
-      event.preventDefault();
-      this.fetchContent(false);
+      this.loading = false;
     },
   },
 })

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

@@ -1,7 +1,7 @@
 <template>
   <li
     v-if="editRight || activePlaylist"
-    class="mt-3 emission-item-container shadow-element"
+    class="emission-item-container shadow-element"
   >
     <router-link
       :to="{
@@ -49,7 +49,7 @@
           <!-- eslint-enable -->
         </div>
       </router-link>
-      <div class="flex-grow" />
+      <div class="flex-grow-1" />
       <router-link
         v-if="!isPodcastmaker && playlist.organisation"
         :to="{

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

@@ -1,21 +1,15 @@
 <template>
   <div class="d-flex flex-column align-items-center">
-    <div
-      v-if="loading"
-      class="d-flex justify-content-center"
-    >
-      <div class="spinner-border me-3" />
-      <h3 class="mt-2">
-        {{ $t('Loading content ...') }}
-      </h3>
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading content ...'):undefined"
+    />
     <div
       v-if="loaded && playlists.length > 1"
       class="text-secondary mb-2"
     >
       {{ $t('Number playlists', { nb: displayCount }) + $t('sort by score') }}
     </div>
-    <ul class="emission-list twoEmissions">
+    <ul class="emission-list two-emissions">
       <PlaylistItem
         v-for="p in playlists"
         :key="p.playlistId"
@@ -25,7 +19,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-linkPlus' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
       :disabled="inFetching"
       :aria-label="$t('See more')"
       @click="displayMore"
@@ -42,7 +36,7 @@
 import octopusApi from '@saooti/octopus-api';
 import PlaylistItem from './PlaylistItem.vue';
 import { state } from '../../../store/paramStore';
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
 export default defineComponent({
@@ -50,6 +44,7 @@ export default defineComponent({
 
   components: {
     PlaylistItem,
+    ClassicLoading
   },
   props: {
     first: { default: 0, type: Number },
@@ -140,8 +135,7 @@ export default defineComponent({
       this.totalCount = data.count;
       this.inFetching = false;
     },
-    displayMore(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    displayMore(): void {
       this.fetchContent(false);
     },
   },

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

@@ -1,54 +1,32 @@
 <template>
   <div class="d-flex flex-column align-items-center">
     <h2
-      v-if="notEmptyPlaylist"
-      class="mt-3 align-self-baseline"
-    >
-      {{ $t('Podcasts in the playlist') }}
-    </h2>
-    <h2
-      v-else
       class="mt-3 align-self-baseline"
     >
-      {{ $t('No podcasts in the playlist') }}
+      <template v-if="notEmptyPlaylist">
+        {{ $t('Podcasts in the playlist') }}
+      </template>
+      <template v-else>
+        {{ $t('No podcasts in the playlist') }}
+      </template>
     </h2>
-    <div
-      v-if="loading"
-      class="d-flex justify-content-center"
-    >
-      <div class="spinner-border me-3" />
-      <h3 class="mt-2">
-        {{ $t('Loading podcasts ...') }}
-      </h3>
-    </div>
-    <div v-if="loaded && !podcasts.length && notEmptyPlaylist">
-      <p>{{ $t('No podcast match your query') }}</p>
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+      :error-text="loaded && !podcasts.length && notEmptyPlaylist?$t(`No podcast match your query`):undefined"
+    />
     <div
       v-if="loaded && podcasts.length > 1"
       class="text-secondary mb-4"
     >
       {{ $t('Number podcasts', { nb: podcasts.length }) + $t('sort by score') }}
     </div>
-    <div
+    <ClassicSearch
       v-if="notEmptyPlaylist"
-      class="d-flex position-relative width-600 align-self-baseline"
-    >
-      <label
-        for="search"
-        class="d-inline"
-        :aria-label="$t('Search')"
-      />
-      <input
-        id="search"
-        v-model="searchPattern"
-        :placeholder="$t('Search')"
-        class="filter-search-input input-no-outline flex-grow"
-      >
-      <div
-        class="saooti-search-bounty filter-list-search-icon search-icon-container"
-      />
-    </div>
+      v-model:textInit="searchPattern"
+      class="width-600 align-self-baseline"
+      id-checkbox="podcast-list-search"
+      :label="$t('Search')"
+    />
     <ul
       v-show="loaded"
       class="podcast-list"
@@ -62,7 +40,7 @@
     <button
       v-show="size < podcasts.length && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link-plus':'btn-more'"
       :aria-label="$t('See more')"
       @click="displayMore"
     >
@@ -78,7 +56,8 @@
 import octopusApi from '@saooti/octopus-api';
 import PodcastItem from '../podcasts/PodcastItem.vue';
 import { state } from '../../../store/paramStore';
-
+import ClassicSearch from '../../form/ClassicSearch.vue';
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Podcast } from '@/store/class/general/podcast';
 import { Playlist } from '@/store/class/general/playlist';
 import { defineComponent } from 'vue'
@@ -87,6 +66,8 @@ export default defineComponent({
 
   components: {
     PodcastItem,
+    ClassicSearch,
+    ClassicLoading
   },
 
   props: {

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

@@ -12,7 +12,6 @@
         params: { participantId: animator.participantId },
         query: { productor: $store.state.filter.organisationId },
       }"
-      class="animator-item"
       :aria-label="$t('Participant')"
     >
       <div class="podcast-item-animator text-dark">

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

@@ -13,12 +13,11 @@
     <span class="mx-1">:</span>
     <Popover
       :target="idPopover"
-      custom-class="participant-help"
     >
       <div class="text-center font-weight-bold">
         {{ title }}
       </div>
-      <div class="horizontal-separator my-1" />
+      <hr>
       <div 
         v-for="participant in participants"
         :key="'desc-'+participant.participantId"
@@ -32,14 +31,14 @@
           v-html="participant.description"
         />
         <!-- eslint-enable -->
-        <div class="horizontal-separator my-1" />
+        <hr>
       </div>
     </Popover>
     <router-link
       v-for="participant in participants"
       :key="participant.participantId"
       :aria-label="$t('Participant')"
-      class="link-info"
+      class="fw-bold"
       :to="{
         name: 'participant',
         params: { participantId: participant.participantId },
@@ -69,10 +68,6 @@ export default defineComponent({
     isGuest: { default: false, type:  Boolean},
   },
 
-  data() {
-    return {
-    };
-  },
   computed:{
     idPopover(): string{
       if(this.isGuest){
@@ -97,11 +92,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.participant-help{
-  .horizontal-separator {
-    border-top: 1px solid #cccccc;
-    width: 100%;
-  }
-} 
-</style>
+<style lang="scss"></style>

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

@@ -1,37 +1,28 @@
 <template>
-  <div class="p-3 list-episodes">
-    <h2 v-if="name">
-      {{ $t('All podcast button', { name: name }) }}
-    </h2>
-    <h2 v-else>
-      {{ $t('All podcast emission button') }}
+  <div class="p-3">
+    <h2>
+      <template v-if="name">
+        {{ $t('All podcast button', { name: name }) }}
+      </template>
+      <template v-else>
+        {{ $t('All podcast emission button') }}
+      </template>
     </h2>
     <div class="d-flex align-items-center flex-wrap">
       <div
-        v-if="categoryFilter"
-        class="d-flex align-items-center flex-grow categories-filter"
+        class="d-flex align-items-center flex-grow-1 me-3"
       >
         <CategoryChooser
           :defaultanswer="$t('No category filter')"
           @selected="onCategorySelected"
         />
       </div>
-      <div class="d-flex position-relative small-flex-grow">
-        <label
-          for="search"
-          class="d-inline"
-          :aria-label="$t('Search')"
-        />
-        <input
-          id="search"
-          v-model="searchPattern"
-          :placeholder="$t('Search')"
-          class="filter-search-input input-no-outline flex-grow"
-        >
-        <div
-          class="saooti-search-bounty filter-list-search-icon search-icon-container"
-        />
-      </div>
+      <ClassicSearch
+        v-model:textInit="searchPattern"
+        class="flex-small-grow"
+        id-checkbox="podcast-filter-search"
+        :label="$t('Search')"
+      />
     </div>
     <PodcastList
       :first="first"
@@ -49,7 +40,7 @@
 </template>
 
 <script lang="ts">
-
+import ClassicSearch from '../../form/ClassicSearch.vue';
 import PodcastList from './PodcastList.vue';
 import { Category } from '@/store/class/general/category';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -59,6 +50,7 @@ export default defineComponent({
   components: {
     CategoryChooser,
     PodcastList,
+    ClassicSearch
   },
   props: {
     participantId: { default: undefined, type: Number},
@@ -91,21 +83,13 @@ export default defineComponent({
       this.reloadList = !this.reloadList;
     },
   },
-  created() {
-    if (this.$route.query.first && 'string' === typeof this.$route.query.first) {
-      this.first = parseInt(this.$route.query.first);
-    }
-    if (this.$route.query.size && 'string' === typeof this.$route.query.size) {
-      this.size = parseInt(this.$route.query.size);
-    }
-  },
   methods: {
     onCategorySelected(category: Category|undefined): void {
       if (category && category.id) {
         this.iabId = category.id;
-      } else {
-        this.iabId = undefined;
+        return;
       }
+      this.iabId = undefined;
     },
     fetch(podcasts: Array<Podcast>): void {
       this.$emit('fetch', podcasts);
@@ -114,31 +98,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.categories-filter {
-  .multiselect {
-    width: 75%;
-    @media (max-width: 600px) {
-      width: 100%;
-    }
-  }
-}
-.list-episodes {
-  padding: 2rem 0.5rem 1rem !important;
-  margin: 0 0.5rem;
-
-  @media (max-width: 450px) {
-    padding: 0.5rem 0rem 1rem !important;
-  }
-  h2 {
-    margin-bottom: 0.5rem;
-  }
-}
-.filter-list-search-icon {
-  right: 1.6rem !important;
-  font-weight: bold;
-}
-.small-flex-grow {
-  flex-grow: 0.3;
-}
-</style>
+<style lang="scss"></style>

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

@@ -1,17 +1,12 @@
 <template>
   <div
     v-if="podcast"
-    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink float-start"
+    class="img-box d-flex flex-column justify-content-start align-items-start position-relative justify rounded-lg flex-shrink-0 float-start"
     :style="{ 'background-image': 'url(\'' + podcast.imageUrl + '\')' }"
   >
     <template v-if="isPodcastmaker">
       <div
-        v-if="mainRubrique"
-        class="mainRubrique"
-      />
-      <div
-        v-else
-        class="notMainRubrique"
+        :class="mainRubrique? 'mainRubrique' : 'notMainRubrique'"
       />
     </template>
     <div
@@ -55,9 +50,9 @@
           v-show="playingPodcast"
           class="bloc-paddle"
         >
-          <span class="paddle1 primary-color" />
-          <span class="paddle2 primary-color" />
-          <span class="paddle3 primary-color" />
+          <span class="paddle1" />
+          <span class="paddle2" />
+          <span class="paddle3" />
         </div>
       </div>
       <div
@@ -72,20 +67,20 @@
       </div>
       <div
         v-if="!classicPodcastPlay"
-        class="small-Text mt-3 fw-bolder"
+        class="small-text mt-3 fw-bolder"
       >
         {{ textVisible }}
       </div>
     </div>
     <div
       v-if="!isDescription && displayDescription && isMobile"
-      class="background-icon saooti-arrow-up2"
+      class="background-icon primary-bg saooti-arrow-up2"
       :aria-label="$t('Show description')"
       @click="showDescription"
     />
     <div
       v-if="isDescription && displayDescription && isMobile"
-      class="background-icon saooti-arrow-down2"
+      class="background-icon primary-bg saooti-arrow-down2"
       :aria-label="$t('Hide description')"
       @click="showDescription"
     />
@@ -291,12 +286,26 @@ export default defineComponent({
 
 
 <style lang="scss">
-.no-visible-img {
-  width: 3rem;
-  height: 3rem;
+.live-image-status {
+  text-align: center;
+  width: 100%;
+  font-size: 0.6rem;
+  padding: 0.2rem 0;
+  color: white;
+  text-transform: uppercase;
+}
+
+.background-icon{
   border-radius: 50%;
-  padding: 0.7em;
-  background: rgba(0, 0, 0, 0.31);
+  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;
@@ -335,16 +344,13 @@ export default defineComponent({
     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;
@@ -357,68 +363,5 @@ export default defineComponent({
     z-index: 2;
   }
 }
-.bloc-paddle {
-  align-items: flex-end;
-  display: flex;
-  width: 2rem;
-  height: 2.6rem;
-  padding: 0.7rem;
-  justify-content: space-around;
-  align-content: flex-start;
-  border-radius: 50%;
-  background: transparent !important;
-
-  > span {
-    width: 0.1rem;
-    margin: 0.05rem;
-    background: #fff;
-  }
 
-  .paddle1 {
-    animation-duration: 0.6s;
-    animation-name: slidein;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  .paddle2 {
-    animation-duration: 0.3s;
-    animation-name: slidein2;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  .paddle3 {
-    animation-duration: 0.5s;
-    animation-name: slidein3;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-  @keyframes slidein {
-    0% {
-      height: 0;
-    }
-    100% {
-      height: 1rem;
-    }
-  }
-
-  @keyframes slidein2 {
-    0% {
-      height: 0.3rem;
-    }
-    100% {
-      height: 1.2rem;
-    }
-  }
-
-  @keyframes slidein3 {
-    0% {
-      height: 1.2rem;
-    }
-    100% {
-      height: 0;
-    }
-  }
-}
 </style>