@saooti/octopus-sdk 30.0.8 → 30.0.9

package/src/assets/transition.scss

@@ -1,5 +1,99 @@
 .octopus-app{
     .transition-height {
-        transition: height 1s;
+      transition: height 1s;
     }
+    .arrow-transform {
+      transform: rotate(180deg);
+    }
+    .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;
+          }
+      }
+    }
+    .out-left-enter-active,
+    .out-left-leave-active,
+    .out-right-enter-active,
+    .out-right-leave-active {
+      transition: all 0.3s ease;
+    }
+    
+    .out-left-leave-to,
+    .out-right-enter {
+      transform: translateX(-110%);
+      opacity: 0;
+    }
+    
+    .out-left-enter,
+    .out-right-leave-to {
+      transform: translateX(110%);
+      opacity: 0;
+    }
+    
+    .out-left-leave-to,
+    .out-right-leave-to {
+      position: absolute;
+    }
+    .out-right-leave-to {
+      right: 5rem;
+      z-index: -1;
+    }  
 }

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

@@ -56,7 +56,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-arrow_down octopus-arrow-down-2 octopus-arrow-down-top"
+            class="saooti-arrow_down octopus-arrow-down"
           />
         </div>
       </template>

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

@@ -19,13 +19,11 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle btn-secondary text-decoration-none text-dark category-item category-item-plus dropdown-toggle-no-caret"
+        class="btn dropdown-toggle category-rubrique-item-plus dropdown-toggle-no-caret saooti-plus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :aria-label="$t('See more')"
-      >
-        <i class="saooti-plus" />
-      </button>
+      />
       <ul class="dropdown-menu dropdown-menu-right px-4">
         <div
           v-for="category in hidenCategories"

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

@@ -5,7 +5,7 @@
   >
     <b
       v-if="knownIdentity && !editName"
-      class="small-Text mt-1 c-hand"
+      class="small-text mt-1 c-hand"
       @click="changeIdentity"
     >{{ knownIdentity }}</b>
     <div
@@ -14,7 +14,7 @@
     >
       <input
         v-model="temporaryName"
-        class="small-Text mt-1"
+        class="small-text mt-1"
         type="text"
         :class="{ 'border border-danger': temporaryName.length < 2 }"
       >

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

@@ -1,13 +1,13 @@
 <template>
   <div class="d-flex flex-column mt-2 mb-1 item-comment">
-    <div class="d-flex small-Text">
+    <div class="d-flex small-text">
       <template v-if="!isEditing">
         <b
           v-if="
             recordingInLive &&
               ('Live' === comment.phase || 'Prelive' === comment.phase)
           "
-          class="recording-bg me-1 text-light p-01"
+          class="recording-bg me-1 text-light p-1"
         >{{ $t('Live') }}</b>
         <b
           v-if="editRight || comment.status == 'Valid'"
@@ -92,7 +92,7 @@
     >
       <button
         v-if="null === comment.commentIdReferer && 'Valid' === comment.status"
-        class="btn btn-answer primary-color me-2"
+        class="btn py-1 px-3 primary-color me-2"
         :data-selenium="'answer-button-comment-' + seleniumFormat(comment.name)"
         @click="answerComment"
       >
@@ -104,7 +104,7 @@
             (isFlat && comment.commentIdReferer)
         "
         :id="'commentItem'+comment.comId"
-        class="primary-color c-hand d-flex align-items-center small-Text input-no-outline"
+        class="primary-color c-hand d-flex align-items-center small-text input-no-outline"
         type="button"
         data-bs-toggle="collapse"
         :data-bs-target="'#commentItemDetail'+comment.comId"
@@ -124,7 +124,7 @@
           <div v-else>
             {{ $t('In response to') }}
           </div>
-          <span class="saooti-arrow_down saooti-arrow_down-margin" />
+          <span class="saooti-arrow_down" />
         </div>
         <div class="d-flex align-items-center when-opened">
           <div v-if="comment.relatedComments">
@@ -134,7 +134,7 @@
             {{ $t('In response to') }}
           </div>
           <span
-            class="saooti-arrow_down saooti-arrow_down-margin arrow-transform me-2"
+            class="saooti-arrow_down arrow-transform me-2"
           />
         </div>
       </div>

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

@@ -10,7 +10,7 @@
       </div>
     </div>
     <div v-else>
-      <div class="d-flex small-Text">
+      <div class="d-flex small-text">
         <b class="me-2">{{ comment.name }}</b>
         <img
           v-if="comment.certified"

package/src/components/display/edit/EditCommentBox.vue

@@ -1,35 +1,27 @@
 <template>
   <div class="d-flex">
     <button
-      class="btn btn-circle primary-color me-1"
+      class="btn btn-comment-edit saooti-edit-bounty"
       aria-label="edit"
       @click="editComment"
-    >
-      <span class="saooti-edit-bounty" />
-    </button>
+    />
     <button
       v-if="'Pending' === comment.status || 'Invalid' === comment.status"
-      class="btn btn-circle primary-color me-1"
+      class="btn btn-comment-edit saooti-valid-stud"
       aria-label="valid"
       @click="validComment"
-    >
-      <span class="saooti-valid-stud" />
-    </button>
+    />
     <button
       v-if="'Pending' === comment.status || 'Valid' === comment.status"
-      class="btn btn-circle primary-color me-1"
+      class="btn btn-comment-edit saooti-cross"
       aria-label="invalid"
       @click="invalidComment"
-    >
-      <span class="saooti-cross" />
-    </button>
+    />
     <button
-      class="btn btn-circle primary-color me-1"
+      class="btn btn-comment-edit saooti-bin"
       aria-label="delete"
       @click="deleteComment"
-    >
-      <span class="saooti-bin" />
-    </button>
+    />
   </div>
 </template>
 

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

@@ -1,7 +1,6 @@
 <template>
   <div
     class="default-multiselect-width"
-    :class="{ 'multiselect-hide-arrow': !displayArrow }"
     :style="{ width: width }"
   >
     <label
@@ -72,7 +71,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-arrow_down octopus-arrow-down-2 octopus-arrow-down-top"
+            class="saooti-arrow_down octopus-arrow-down"
           />
         </div>
       </template>
@@ -120,7 +119,6 @@ export default defineComponent({
     defaultanswer: { default: '', type: String },
     organisationId: { default: undefined, type: String},
     emissionChosen: { default: undefined, type: Object as ()=>Emission},
-    displayArrow: { default: true, type: Boolean },
     distributedBy: { default: undefined, type: String},
     organisationDistributedBy: { default: undefined, type: String},
     reset: { default: false, type: Boolean },

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

@@ -37,7 +37,7 @@
         (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
       "
       :name="transitionName"
-      class="podcast-list-inline"
+      class="element-list-inline"
       tag="ul"
       :class="[
         alignLeft ? 'justify-content-start' : '',
@@ -257,7 +257,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.podcast-list-inline.overflowScroll {
+.list-episode {
+    padding: 2rem 0rem 1rem !important;
+    @media (max-width: 450px) {
+        padding: 0.5rem 0rem 1rem !important;
+    }
+    h2 {
+        margin-bottom: 1rem;
+    }
+}
+.element-list-inline.overflowScroll {
   display: flex;
   flex-wrap: wrap;
   -webkit-overflow-scrolling: touch;

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

@@ -1,11 +1,6 @@
 <template>
   <li
-    class="mt-3"
-    :class="
-      lightItems
-        ? 'noList emission-light-max-size'
-        : 'emission-item-container shadow-element'
-    "
+    class="mt-3 emission-item-container shadow-element"
   >
     <router-link
       :to="{
@@ -14,40 +9,14 @@
         query: { productor: $store.state.filter.organisationId },
       }"
       :aria-label="$t('Emission')"
-      class="text-dark"
+      class="d-flex text-dark"
     >
       <div
-        v-if="!lightItems"
         class="img-box"
         :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
       />
-      <div
-        v-else
-        class="d-flex"
-      >
+      <div class="emission-item-text">
         <div
-          class="img-box-light flex-shrink-0"
-          :style="{ 'background-image': 'url(\'' + emission.imageUrl + '\')' }"
-        />
-        <div class="emission-light-title">
-          {{ name }}
-        </div>
-      </div>
-    </router-link>
-    <div
-      class="emission-item-text"
-      :class="lightItems ? 'p-0' : ''"
-    >
-      <router-link
-        :to="{
-          name: 'emission',
-          params: { emissionId: emission.emissionId },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="text-dark"
-      >
-        <div
-          v-if="!lightItems"
           class="emission-name"
         >
           <img
@@ -55,36 +24,34 @@
             class="icon-caution"
             src="/img/caution.png"
             :title="$t('Emission have not podcasts')"
-          >{{ name }}
+          >{{ emission.name }}
         </div>
         <div
           :id="'description-emission-container-' + emission.emissionId"
           class="emission-description htms-wysiwyg-content"
-          :class="lightItems ? 'emission-small-description' : ''"
         >
           <!-- eslint-disable vue/no-v-html -->
           <div
             :id="'description-emission-' + emission.emissionId"
-            v-html="urlify(description)"
+            v-html="urlify(emission.description|| '')"
           />
-          <!-- eslint-enable -->
-        </div>
-      </router-link>
-      <div class="flex-grow-1" />
-      <router-link
-        v-if="!isPodcastmaker"
-        :to="{
-          name: 'productor',
-          params: { productorId: emission.orga.id },
-          query: { productor: $store.state.filter.organisationId },
-        }"
-        class="text-dark"
-      >
-        <div class="emission-producer primary-color">
-          © {{ emission.orga.name }}
+        <!-- eslint-enable -->
         </div>
-      </router-link>
-    </div>
+        <div class="flex-grow-1" />
+        <router-link
+          v-if="!isPodcastmaker"
+          :to="{
+            name: 'productor',
+            params: { productorId: emission.orga.id },
+            query: { productor: $store.state.filter.organisationId },
+          }"
+        >
+          <div class="emission-producer">
+            © {{ emission.orga.name }}
+          </div>
+        </router-link>
+      </div>
+    </router-link>
   </li>
 </template>
 
@@ -115,19 +82,10 @@ export default defineComponent({
     },
     organisation(): string {
       if(this.emission && this.emission.publisher && this.emission.publisher.organisation){
-        return '' + this.emission.publisher.organisation.name;
+        return this.emission.publisher.organisation.name;
       }
       return '';
     },
-    lightItems(): boolean {
-      return (state.emissionsPage.lightItems as boolean);
-    },
-    description(): string {
-      return this.emission.description || '';
-    },
-    name(): string {
-      return this.emission.name;
-    },
     organisationId(): string|undefined {
       return state.generalParameters.organisationId;
     },

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

@@ -1,68 +1,64 @@
 <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 emissions ...') }}
-      </h3>
-    </div>
-    <div
-      v-if="showCount && loaded && emissions.length > 1"
-      class="text-secondary mb-2"
-    >
-      {{ $t('Number emissions', { nb: displayCount }) + sortText }}
-    </div>
-    <ul
-      v-if="!itemPlayer"
-      class="emission-list"
-      :class="smallItems ? 'threeEmissions' : 'twoEmissions'"
-    >
-      <EmissionItem
-        v-for="e in emissions"
-        :key="e.emissionId"
-        :emission="e"
-      />
-    </ul>
-    <ul
-      v-show="
-        (displayRubriquage && rubriques) || !(displayRubriquage && loaded)
-      "
-      v-else
-      class="d-flex flex-wrap justify-content-around"
-    >
-      <EmissionPlayerItem
-        v-for="e in emissions"
-        :key="e.emissionId"
-        :emission="e"
-        class="m-3 flex-shrink-0"
-        :class="mainRubriquage(e)"
-        :rubrique-name="rubriquesId(e)"
-        @emissionNotVisible="displayCount--"
-      />
-    </ul>
-    <button
-      v-show="!allFetched && loaded"
-      class="btn"
-      :class="buttonPlus ? 'btn-linkPlus' : 'btn-more'"
-      :disabled="inFetching"
-      :aria-label="$t('See more')"
-      @click="displayMore"
-    >
-      <template v-if="buttonPlus">
-        {{ $t('See more') }}
-      </template>
-      <div class="saooti-plus" />
-    </button>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading emissions ...'):undefined"
+    />
+    <template v-if="isLoadingMoreOrFinished">
+      <div
+        v-if="showCount && emissions.length > 1"
+        class="text-secondary mb-2"
+      >
+        {{ $t('Number emissions', { nb: displayCount }) + sortText }}
+      </div>
+      <ul
+        v-if="!itemPlayer"
+        class="emission-list"
+        :class="smallItems ? 'three-emissions' : 'two-emissions'"
+      >
+        <EmissionItem
+          v-for="e in emissions"
+          :key="e.emissionId"
+          :emission="e"
+        />
+      </ul>
+      <div
+        v-show="
+          (displayRubriquage && rubriques) || !(displayRubriquage)
+        "
+        v-else
+        class="d-flex flex-wrap justify-content-around"
+      >
+        <EmissionPlayerItem
+          v-for="e in emissions"
+          :key="e.emissionId"
+          :emission="e"
+          class="m-3 flex-shrink-0"
+          :class="mainRubriquage(e)"
+          :rubrique-name="rubriquesId(e)"
+          @emissionNotVisible="displayCount--"
+        />
+      </div>
+      <button
+        v-show="!allFetched"
+        class="btn"
+        :class="buttonPlus ? 'btn-link-plus' : 'btn-more'"
+        :disabled="loading"
+        :aria-label="$t('See more')"
+        @click="fetchContent(false)"
+      >
+        <template v-if="buttonPlus">
+          {{ $t('See more') }}
+        </template>
+        <div class="saooti-plus" />
+      </button>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import octopusApi from '@saooti/octopus-api';
 import { state } from '../../../store/paramStore';
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
 import { Emission } from '@/store/class/general/emission';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { defineComponent, defineAsyncComponent } from 'vue';
@@ -75,6 +71,7 @@ export default defineComponent({
   components: {
     EmissionItem,
     EmissionPlayerItem,
+    ClassicLoading
   },
 
   props: {
@@ -97,18 +94,19 @@ 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,
       displayCount: 0 as number,
       emissions: [] as Array<Emission>,
       rubriques: undefined as Array<Rubrique>|undefined,
-      inFetching: false as boolean,
     };
   },
 
   computed: {
+    isLoadingMoreOrFinished():boolean{
+      return !this.loading || this.emissions.length > 1;
+    },
     allFetched(): boolean {
       return this.dfirst >= this.totalCount;
     },
@@ -165,12 +163,10 @@ export default defineComponent({
   },
   methods: {
     async fetchContent(reset: boolean): Promise<void> {
-      this.inFetching = true;
+      this.loading = true;
       if (reset) {
         this.emissions.length = 0;
         this.dfirst = 0;
-        this.loading = true;
-        this.loaded = false;
       }
       const param: FetchParam = {
         first: this.dfirst,
@@ -196,7 +192,6 @@ export default defineComponent({
         this.dfirst = 0;
       }
       this.loading = false;
-      this.loaded = true;
       this.displayCount = data.count;
       this.emissions = this.emissions.concat(data.result).filter((e: Emission|null) => {
         if (null === e) {
@@ -206,11 +201,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;
     },
     async fetchRubriques(): Promise<void> {
       const data = await octopusApi.fetchTopic(this.displayRubriquage);

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

@@ -1,5 +1,5 @@
 <template>
-  <li
+  <div
     class="emission-player-container shadow-element"
   >
     <router-link
@@ -17,7 +17,7 @@
         {{ rubriqueName }}
       </div>
       <div
-        class="img-box no-border-round"
+        class="img-box rounded-0"
         :style="{
           'background-image':
             'url(\'' + emission.imageUrl + '?dummy=' + dummyParam + '\')',
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div class="d-flex flex-column p-2">
-        <div class="fw-bold text-uppercase text-ellipsis">
+        <div class="fw-bold text-uppercase text-truncate">
           {{ emission.name }}
         </div>
         <div
@@ -61,7 +61,7 @@
           }"
           class="d-flex flex-column define-width text-dark"
         >
-          <div class="fw-bold text-ellipsis">
+          <div class="fw-bold text-truncate">
             {{ p.title }}
           </div>
           <div
@@ -117,7 +117,7 @@
         {{ $t('More episodes') }}
       </router-link>
     </div>
-  </li>
+  </div>
 </template>
 
 <script lang="ts">
@@ -238,6 +238,9 @@ export default defineComponent({
   height: min-content;
   border-radius: 0.8rem;
   overflow: hidden;
+  .emission-item-border-color {
+    border-color: #ddd;
+  }
   .emission-description {
     overflow: hidden;
     margin-top: 0.5em;
@@ -266,7 +269,5 @@ export default defineComponent({
     }
   }
 }
-.emission-item-border-color {
-  border-color: #ddd;
-}
+
 </style>