@saooti/octopus-sdk 30.0.5 → 30.0.9

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="loading || (!loading && 0 !== allPodcasts.length)"
-    class="d-flex flex-column p-3 list-episode"
+    class="d-flex flex-column p-3"
   >
     <h2>{{ title }}</h2>
     <div class="d-flex justify-content-between">
@@ -43,33 +43,27 @@
         </button>
       </div>
     </div>
-    <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>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+    />
     <transition-group
       v-show="loaded"
       :name="transitionName"
-      class="podcast-list-inline"
+      class="element-list-inline"
       tag="ul"
       :class="[alignLeft ? 'justify-content-start' : '']"
     >
       <PodcastItem
         v-for="p in podcasts"
         :key="p.podcastId"
-        class="flex-shrink item-phone-margin"
+        class="flex-shrink-0 item-phone-margin"
         :podcast="p"
         :class="[alignLeft ? 'me-3' : '']"
       />
     </transition-group>
     <router-link
       class="btn btn-link"
-      :class="buttonPlus ? 'btn-linkPlus' : ''"
+      :class="buttonPlus ? 'btn-link-plus' : ''"
       :to="refTo"
     >
       {{ buttonText }}
@@ -85,7 +79,7 @@
 import octopusApi from '@saooti/octopus-api';
 import domHelper from '../../../helper/dom';
 import PodcastItem from './PodcastItem.vue';
-
+import ClassicLoading from '../../form/ClassicLoading.vue';
 const PHONE_WIDTH = 960;
 
 import { Podcast } from '@/store/class/general/podcast';
@@ -96,7 +90,8 @@ export default defineComponent({
   name: 'PodcastInlineList',
   
   components: {
-    PodcastItem
+    PodcastItem,
+    ClassicLoading
   },
 
   props: {
@@ -171,30 +166,13 @@ export default defineComponent({
     },
     transitionName(): string {
       return this.direction > 0 ? 'out-left' : 'out-right';
+    },
+    watchVariable():string{
+      return `${this.emissionId}|${this.organisationId}|${this.filterOrga}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}`;
     }
   },
   watch: {
-    emissionId(): void {
-      this.reset();
-      this.fetchNext();
-    },
-    organisationId(): void {
-      this.reset();
-      this.fetchNext();
-    },
-    filterOrga(): void {
-      this.reset();
-      this.fetchNext();
-    },
-    iabId(): void {
-      this.reset();
-      this.fetchNext();
-    },
-    rubriqueId(): void {
-      this.reset();
-      this.fetchNext();
-    },
-    rubriquageId(): void {
+    watchVariable(): void {
       this.reset();
       this.fetchNext();
     },

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

@@ -1,6 +1,6 @@
 <template>
   <li
-    class="podcast-item-container m-0"
+    class="podcast-item-container"
     :class="[
       podcastShadow ? 'shadow-element' : '',
       podcastBorderBottom ? 'border-bottom' : '',
@@ -37,14 +37,14 @@
       @mouseleave="hideDescription"
     >
       <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-        <div class="me-3 small-Text">
+        <div class="me-3 small-text">
           {{ date }}
         </div>
         <div
           v-if="0 !== duration.length"
-          class="small-Text"
+          class="small-text"
         >
-          <!-- <span class="saooti-clock3"></span> -->{{ duration }}
+          {{ duration }}
         </div>
       </div>
       <AnimatorsItem :animators="podcast.animators" />
@@ -54,7 +54,7 @@
           params: { podcastId: podcast.podcastId },
           query: { productor: $store.state.filter.organisationId },
         }"
-        class="text-dark d-flex flex-column flex-grow"
+        class="text-dark d-flex flex-column flex-grow-1"
       >
         <div class="title-podcast-item">
           {{ title }}

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

@@ -1,17 +1,9 @@
 <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 podcasts ...') }}
-      </h3>
-    </div>
-    <div v-if="loaded && !podcasts.length">
-      <p>{{ $t('No podcast match your query') }}</p>
-    </div>
+    <ClassicLoading
+      :loading-text="loading?$t('Loading podcasts ...'):undefined"
+      :error-text="loaded && !podcasts.length?$t(`No podcast match your query`):undefined"
+    />
     <div
       v-if="showCount && loaded && podcasts.length > 1"
       class="text-secondary mb-2"
@@ -31,7 +23,7 @@
     <button
       v-show="!allFetched && loaded"
       class="btn"
-      :class="buttonPlus ? 'btn-linkPlus mt-3' : 'btn-more'"
+      :class="buttonPlus ? 'btn-link-plus' : 'btn-more'"
       :disabled="inFetching"
       :aria-label="$t('See more')"
       @click="displayMore"
@@ -48,7 +40,7 @@
 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';
@@ -57,6 +49,7 @@ export default defineComponent({
 
   components: {
     PodcastItem,
+    ClassicLoading
   },
 
   props: {

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

@@ -1,11 +1,11 @@
 <template>
   <div class="module-box">
-    <h2
+    <div
       v-if="!isOuestFrance"
-      class="text-uppercase fw-bold title-page-podcast"
+      class="text-uppercase h4"
     >
       {{ podcast.title }}
-    </h2>
+    </div>
     <router-link
       v-else
       :to="{
@@ -42,7 +42,7 @@
           {{ podcast.title }}
         </h3>
         <div
-          class="date-text-zone"
+          class="d-flex flex-wrap mb-3"
           :class="isLiveReady ? 'justify-content-between' : ''"
         >
           <div
@@ -51,7 +51,7 @@
           >
             {{ date }}
           </div>
-          <div class="ms-2 me-2 duration">
+          <div>
             <span
               v-if="isOuestFrance"
               class="saooti-clock3"
@@ -70,12 +70,12 @@
           v-html="urlify(podcast.description)"
         />
         <!-- eslint-enable -->
-        <div class="mt-3 mb-3">
+        <div class="my-3">
           <ParticipantDescription :participants="podcast.animators" />
           <div v-if="!isOuestFrance">
             {{ $t('Emission') + ' : ' }}
             <router-link
-              class="link-info"
+              class="fw-bold"
               :to="{
                 name: 'emission',
                 params: { emissionId: podcast.emission.emissionId },
@@ -90,7 +90,7 @@
           <div v-if="!isPodcastmaker">
             {{ $t('Producted by : ') }}
             <router-link
-              class="link-info"
+              class="fw-bold"
               :to="{
                 name: 'productor',
                 params: { productorId: podcast.organisation.id },
@@ -283,23 +283,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.title-page-podcast {
-  font-size: 0.9rem;
-}
-.width-fit-content{
-  width: fit-content;
-}
-
-.date-text-zone {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 1rem;
-  @media (max-width: 600px) {
-    display: initial;
-    .duration {
-      margin-left: 0 !important;
-    }
-  }
-}
-</style>
+<style lang="scss"></style>

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

@@ -6,11 +6,10 @@
     <div
       v-for="(tag, index) in tagList"
       :key="tag"
-      class="tagListElement"
+      class="tag-list-element"
     >
       <div
         :id="'tag-list-from-podcast-page'+index"
-        class="tagListLink"
       >
         <img
           v-if="isOuestFranceTag(tag)"
@@ -55,7 +54,7 @@ export default defineComponent({
     height: 20px;
     margin-right: 5px;
   }
-  .tagListElement {
+  .tag-list-element {
     display: flex;
     margin: 0.4rem;
     padding: 0.2rem;

package/src/components/display/rubriques/RubriqueChooser.vue

@@ -47,7 +47,7 @@
         <div
           v-if="undefined!==option"
           class="multiselect-octopus-proposition"
-          :class="option.rubriqueId <= 0 ? 'primary-dark' : ''"
+          :class="option.rubriqueId <= 0 ? 'primary-darker' : ''"
           :data-selenium="'rubric-chooser-' + seleniumFormat(option.name)"
         >
           <span class="option__title">{{ option.name }}</span>
@@ -60,7 +60,7 @@
         {{ $t('No elements found. Consider changing the search query.') }}
       </template>
       <template #caret>
-        <span class="saooti-arrow_down octopus-arrow-down octopus-arrow-down-top" />
+        <span class="saooti-arrow_down octopus-arrow-down" />
       </template>
     </VueMultiselect>
   </div>

package/src/components/display/rubriques/RubriqueList.vue

@@ -1,12 +1,11 @@
 <template>
-  <div class="d-inline-flex w-100 mb-3 ps-3 pe-3 hide-phone rubrique-list">
+  <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
     <div
       id="rubrique-list-container"
-      class="rubrique-list-container"
     >
       <select
         v-model="rubriquage"
-        class="basic-select border c-hand mb-0"
+        class="c-hand"
         @change="onRubriquageSelected"
       >
         <option
@@ -32,13 +31,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="rubrique in hidenRubriques"
@@ -180,7 +177,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.rubrique-list-container {
+#rubrique-list-container {
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -193,7 +190,6 @@ export default defineComponent({
     border-radius: 1.5rem;
     margin: 0.2rem;
     font-size: 0.6rem;
-    margin: 0.2rem;
     padding: 0.5rem;
   }
 }
@@ -201,8 +197,6 @@ export default defineComponent({
   font-size: 0.6rem;
   margin: 0.2rem;
   padding: 0.5rem;
-  display: block;
-  height: 1.5rem;
   border-radius: 1.5rem;
   border: 0;
   display: flex;
@@ -210,22 +204,8 @@ export default defineComponent({
   justify-content: center;
   white-space: nowrap;
   flex-shrink: 0;
-}
-button.rubrique-item {
-  .router-link-active {
-    background: #ddd !important;
-  }
   &:hover {
     background: #ddd !important;
   }
 }
-
-.rubrique-list .rubrique-item-plus {
-  display: flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.5rem;
-}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     id="accordionParameters"
-    class="accordion player-parameters mt-3"
+    class="accordion mt-3"
   >
     <div class="accordion-item">
       <h2
@@ -28,11 +28,11 @@
         <div class="accordion-body">
           <div
             v-if="choseNumberEpisode"
-            class="d-flex flex-column flex-grow"
+            class="d-flex flex-column flex-grow-1"
           >
             <div
               v-if="displayChoiceAllEpisodes"
-              class="d-flex align-items-center w-100 flex-wrap mt-1"
+              class="d-flex align-items-center flex-wrap mt-1"
             >
               <input
                 v-model="episodeNumbers"
@@ -41,7 +41,7 @@
                 name="episodeNumbers"
                 value="all"
               >
-              <span class="flex-shrink">{{ $t('Show every episode') }}</span>
+              <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
             </div>
             <div
               class="d-flex align-items-center flex-wrap"
@@ -55,7 +55,7 @@
                 name="episodeNumbers"
                 value="number"
               >
-              <span class="flex-shrink">{{ $t('Show') }}</span>
+              <span class="flex-shrink-0">{{ $t('Show') }}</span>
               <input
                 id="number-input"
                 v-model="iFrameNumber"
@@ -66,56 +66,30 @@
               >
               <label
                 for="number-input"
-                class="d-inline"
                 :aria-label="$t('Number of player podcasts')"
               />
-              <span class="flex-shrink">{{ $t('Last podcasts') }}</span>
-            </div>
-            <div>
-              <input
-                id="proceedCheck"
-                v-model="proceedReading"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="proceedCheck"
-              >{{
-                $t('Proceed reading')
-              }}</label>
-            </div>
-            <div>
-              <input
-                id="isVisibleCheckbox"
-                v-model="isVisibleTemp"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label me-2"
-                for="isVisibleCheckbox"
-              >{{ $t('Podcasts still available') }}</label>
+              <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
             </div>
+            <ClassicCheckbox
+              v-model:textInit="proceedReading"
+              id-checkbox="proceed-reading-checkbox"
+              :label="$t('Proceed reading')"
+            />
+            <ClassicCheckbox
+              v-model:textInit="isVisibleTemp"
+              id-checkbox="is-visible-checkbox"
+              :label="$t('Podcasts still available')"
+            />
           </div>
           <div
             v-else
-            class="d-flex flex-column flex-grow"
+            class="d-flex flex-column flex-grow-1"
           >
-            <div>
-              <input
-                id="proceedCheck"
-                v-model="displayArticle"
-                type="checkbox"
-                class="form-check-input"
-              >
-              <label
-                class="form-check-label"
-                for="proceedCheck"
-              >{{
-                $t('Display associated article')
-              }}</label>
-            </div>
+            <ClassicCheckbox
+              v-model:textInit="displayArticle"
+              id-checkbox="display-article-checkbox"
+              :label="$t('Display associated article')"
+            />
           </div>
         </div>
       </div>
@@ -124,8 +98,12 @@
 </template>
 
 <script lang="ts">
+import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
+  components:{
+    ClassicCheckbox,
+  },
   props: {
     isVisible: { default: false, type: Boolean},
     choseNumberEpisode: {default: false, type: Boolean},
@@ -179,28 +157,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.player-parameters.card {
-  border: 0;
-  .btn {
-    border-radius: 0;
-  }
-  .card-header {
-    border: 0;
-    background-color: #fafafa;
-    padding: 0;
-  }
-  .card-body {
-    padding: 0.25rem;
-    border: 0.05rem solid #eee;
-    background-color: #fafafa;
-    .custom-control {
-      padding-left: 0;
-    }
-    input[type='number'] {
-      padding-left: 10px;
-      text-align: center;
-      width: 90px;
-    }
+  .input-share-player {
+    border: 1px solid #ddd;
+    border-radius: 50px;
+    width: 60px;
   }
-}
 </style>