@saooti/octopus-sdk 30.0.8 → 30.0.9

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

@@ -6,12 +6,7 @@
   >
     <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>

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,19 +43,13 @@
         </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' : '']"
     >
@@ -69,7 +63,7 @@
     </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" />

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="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
@@ -32,7 +32,7 @@
           >
             <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"
@@ -66,7 +66,6 @@
               >
               <label
                 for="number-input"
-                class="d-inline"
                 :aria-label="$t('Number of player podcasts')"
               />
               <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
@@ -158,28 +157,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.player-parameters.card {
-  border: 0;
-  .btn {
-    border-radius: 0;
+  .input-share-player {
+    border: 1px solid #ddd;
+    border-radius: 50px;
+    width: 60px;
   }
-  .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;
-    }
-  }
-}
 </style>