@saooti/octopus-sdk 33.1.3 → 33.2.1

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

@@ -1,84 +1,77 @@
 <template>
-  <div
-    id="add-comment-modal"
-    class="modal"
+  <ClassicModal
+    id-modal="add-comment-modal"
+    :title-modal="$t('Welcome, thanks for your comment')"
+    :closable="false"
+    @close="closePopup"
   >
-    <div class="modal-backdrop" />
-    <div class="modal-dialog">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">
-            {{ $t('Welcome, thanks for your comment') }}
-          </h5>
+    <template #body>
+      <template v-if="!sending">
+        <div>{{ $t("Let's get acquainted :") }}</div>
+        <input
+          v-model="name"
+          class="form-input"
+          type="text"
+          :placeholder="$t('Your name')"
+          :class="{ 'border border-danger': 0 === countName || !validName }"
+        >
+        <p
+          class="d-flex justify-content-end h6"
+          :class="{ 'text-danger': !validName }"
+        >
+          {{ countName + ' / ' + maxName }}
+        </p>
+        <div
+          v-if="''!==errorText"
+          class="mt-1 text-danger"
+        >
+          {{ errorText }}
         </div>
-        <div class="modal-body">
-          <template v-if="!sending">
-            <div>{{ $t("Let's get acquainted :") }}</div>
-            <input
-              v-model="name"
-              class="form-input"
-              type="text"
-              :placeholder="$t('Your name')"
-              :class="{ 'border border-danger': 0 === countName || !validName }"
-            >
-            <p
-              class="d-flex justify-content-end small-text"
-              :class="{ 'text-danger': !validName }"
-            >
-              {{ countName + ' / ' + maxName }}
-            </p>
-            <div
-              v-if="''!==errorText"
-              class="mt-1 text-danger"
-            >
-              {{ errorText }}
-            </div>
-          </template>
-          <template v-else>
-            <div>{{ $t('Send in progress') }}</div>
-          </template>
-        </div>
-        <div class="modal-footer">
-          <button
-            class="btn m-1"
-            @click="closePopup"
-          >
-            {{ $t('Close') }}
-          </button>
-          <vue-recaptcha 
-            v-if="!isVerify"
-            ref="invisibleRecaptcha"
-            :load-recaptcha-script="true"
-            @verify="handleSuccess"
-            @expired="handleError"
-            size="invisible"
-            sitekey="6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh"
-          >
-          </vue-recaptcha>
-          <button
-            v-if="!sending"
-            class="btn btn-primary m-1"
-            :disabled="0 === countName || !validName"
-            @click="submit"
-          >
-            {{ $t('Validate') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+      </template>
+      <template v-else>
+        <div>{{ $t('Send in progress') }}</div>
+      </template>
+    </template>
+    <template #footer>
+      <button
+        class="btn m-1"
+        @click="closePopup"
+      >
+        {{ $t('Close') }}
+      </button>
+      <vue-recaptcha 
+        v-if="!isVerify"
+        ref="invisibleRecaptcha"
+        :load-recaptcha-script="true"
+        size="invisible"
+        sitekey="6LfyP_4ZAAAAAPODj8nov2LvosIwcX0GYeBSungh"
+        @verify="handleSuccess"
+        @expired="handleError"
+      />
+      <button
+        v-if="!sending"
+        class="btn btn-primary m-1"
+        :disabled="0 === countName || !validName"
+        @click="submit"
+      >
+        {{ $t('Validate') }}
+      </button>
+    </template>
+  </ClassicModal>
 </template>
 
 <script lang="ts">
 import Constants from '../../../../public/config';
 import { state } from '../../../store/paramStore';
+import ClassicModal from '../../misc/modal/ClassicModal.vue';
 import api from '@/api/initialize';
 import { VueRecaptcha } from 'vue-recaptcha';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'AddCommentModal',
   components:{
-    VueRecaptcha
+    VueRecaptcha,
+    ClassicModal
   },
 
   props: {},

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="d-flex small-text">
+    <div class="d-flex h6">
       <strong
         v-if="recordingInLive && ('Live' === comment.phase || 'Prelive' === comment.phase)"
         class="recording-bg me-1 text-light p-1"
@@ -17,9 +17,8 @@
       <Popover
         :disable="editRight || isValid"
         :target="'popover-comment' + comment.comId"
-      >
-        {{ $t('Comment waiting') }}
-      </Popover>
+        :content="$t('Comment waiting')"
+      />
       <span
         v-if="comment.certified"
         class="saooti-certified"

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

@@ -5,7 +5,7 @@
   >
     <strong
       v-if="knownIdentity && !editName"
-      class="small-text mt-1 c-hand"
+      class="h6 mt-1 c-hand"
       @click="changeIdentity"
     >{{ knownIdentity }}</strong>
     <div
@@ -15,12 +15,12 @@
       <div class="d-flex flex-column">
         <input
           v-model="temporaryName"
-          class="small-text mt-1"
+          class="h6 mt-1"
           type="text"
           :class="{ 'border border-danger': 0 === countName || !validName }"
         >
         <p
-          class="d-flex justify-content-end small-text mb-0"
+          class="d-flex justify-content-end h6 mb-0"
           :class="{ 'text-danger': !validName }"
         >
           {{ countName + ' / ' + maxName }}
@@ -51,7 +51,7 @@
     />
     <template v-if="textareaFocus">
       <p
-        class="d-flex justify-content-end small-text"
+        class="d-flex justify-content-end h6"
         :class="{ 'text-danger': !validComment }"
       >
         {{ countComment + ' / ' + maxComment }}

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

@@ -15,7 +15,7 @@
         :class="{ 'border border-danger': 0 === countName || !validName }"
       >
       <p
-        class="d-flex justify-content-end small-text"
+        class="d-flex justify-content-end h6"
         :class="{ 'text-danger': !validName }"
       >
         {{ countName + ' / ' + maxName }}
@@ -27,7 +27,7 @@
         type="text"
       />
       <p
-        class="d-flex justify-content-end small-text"
+        class="d-flex justify-content-end h6"
         :class="{ 'text-danger': !validComment }"
       >
         {{ countComment + ' / ' + maxComment }}

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

@@ -20,9 +20,9 @@
     </div>
     <div
       v-if="displayContent"
-      class="small-text mt-auto"
+      class="h6 mt-auto"
     >
-      <div class="primary-color flex-shrink-0">
+      <div class="text-primary flex-shrink-0">
         {{ displayContent.name }}
       </div>
       <div class="ms-1 me-1">

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

@@ -71,7 +71,7 @@
       <template #caret="">
         <div class="position-relative">
           <span
-            class="saooti-down octopus-arrow-down"
+            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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

@@ -22,7 +22,8 @@
           <span
             v-if="!activeEmission && !isPodcastmaker && editRight"
             :title="$t('Emission have not podcasts')"
-            class="saooti-warning text-danger me-1"/>
+            class="saooti-warning text-danger me-1"
+          />
           <div
             class="emission-name"
           >

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

@@ -251,17 +251,6 @@ export default defineComponent({
   height: min-content;
   border-radius: 0.8rem;
   overflow: hidden;
-  .progress{
-    height: 6px;
-  }
-  .progress-bar-cursor{
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: black;
-    align-self: center;
-    position: absolute;
-  }
   .emission-item-border-color {
     border-color: #ddd;
   }

package/src/components/display/filter/AdvancedSearch.vue

@@ -15,7 +15,7 @@
       class="advanced-search-container"
     >
       <div class="d-flex flex-column">
-        <div class="primary-darker mb-2">
+        <div class="text-primary mb-2">
           {{ $t('Filter') }}
         </div>
         <MonetizableFilter
@@ -59,7 +59,7 @@
         </div>
       </div>
       <div class="d-flex flex-column">
-        <div class="primary-darker mb-2">
+        <div class="text-primary mb-2">
           {{ $t('Sort') }}
         </div>
         <SearchOrder

package/src/components/display/filter/MonetizableFilter.vue

@@ -12,7 +12,7 @@
         <option value="YES">{{ $t('Authorized advertising') }}</option>
         <option value="NO">{{ $t('Prohibited advertising') }}</option>
       </select>
-      <div class="saooti-down octopus-arrow-down" />
+      <div class="saooti-down octopus-arrow-down octopus-arrow-down-absolute" />
     </label>
   </div>
 </template>

package/src/components/display/filter/RubriqueChoice.vue

@@ -13,7 +13,7 @@
         >{{ rubriquage.title }}</option>
       </select>
       <div
-        class="saooti-down octopus-arrow-down"
+        class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
       />
     </label>
     <template v-if="rubriquageId">

package/src/components/display/organisation/OrganisationChooser.vue

@@ -100,7 +100,7 @@
           class="position-relative"
         >
           <span
-            class="saooti-down octopus-arrow-down"
+            class="saooti-down octopus-arrow-down octopus-arrow-down-absolute"
           />
         </div>
       </template>

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

@@ -22,7 +22,8 @@
         <span
           v-if="!activeParticipant && !isPodcastmaker && editRight"
           :title="$t('Participant have not podcasts')"
-          class="saooti-warning text-danger me-1"/>
+          class="saooti-warning text-danger me-1"
+        />
         <div class="participant-name">
           {{ name }}
         </div>

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

@@ -23,7 +23,8 @@
           <span
             v-if="!activePlaylist && !isPodcastmaker"
             :title="$t('Playlist have not podcasts')"
-            class="saooti-warning text-danger me-1"/>
+            class="saooti-warning text-danger me-1"
+          />
           <div class="emission-name">
             {{ name }}
           </div>
@@ -49,7 +50,7 @@
           }"
           class="text-dark"
         >
-          <div class="emission-producer primary-darker">
+          <div class="emission-producer text-primary">
             © {{ playlist.organisation.name }}
           </div>
         </router-link>

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

@@ -13,6 +13,7 @@
     />
     <span class="mx-1">:</span>
     <Popover
+      :title="$t('Animated by')"
       :target="idPopover"
     >
       <div 
@@ -24,7 +25,7 @@
         <!-- eslint-disable vue/no-v-html -->
         <div
           v-if="participant.description"
-          class="h6 participant-desc html-wysiwyg-content"
+          class="participant-desc html-wysiwyg-content"
           v-html="participant.description"
         />
         <!-- eslint-enable -->

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

@@ -42,7 +42,7 @@
         <div
           v-show="!playingPodcast"
           :title="$t('Play')"
-          class="saooti-play primary-color"
+          class="saooti-play text-primary"
         />
         <div
           v-if="!classicPodcastPlay"
@@ -70,14 +70,14 @@
       </div>
       <div
         v-if="!classicPodcastPlay"
-        class="small-text mt-3 fw-bolder"
+        class="h6 mt-3 fw-bolder"
       >
         {{ textVisible }}
       </div>
     </button>
     <div
       v-if="displayDescription && isMobile"
-      class="background-icon primary-bg saooti-arrow-up"
+      class="background-icon bg-primary saooti-arrow-up"
       :class="isDescription ? 'saooti-arrow-down':'saooti-arrow-up'"
       :title="isDescription ? $t('Hide description'):$t('Show description')"
       @click="showDescription"

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

@@ -14,7 +14,7 @@
     :rubriquage-id="rubriquageId"
     :no-rubriquage-id="noRubriquageId"
     :query="query"
-    :podcastId="podcastId"
+    :podcast-id="podcastId"
     @update:isArrow="$emit('update:isArrow',$event)"
   />
   <PodcastSwiperList

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

@@ -12,7 +12,7 @@
     :previous-available="previousAvailable"
     :next-available="nextAvailable"
     :no-rubriquage-id="noRubriquageId"
-    :podcastId="podcastId"
+    :podcast-id="podcastId"
     @sortChrono="sortChrono"
     @sortPopular="sortPopular"
     @displayPrevious="displayPrevious"

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

@@ -4,7 +4,8 @@
   >
     <div 
       class="d-flex align-items-center"
-      :class="podcastId?'mb-4':'mb-2'">
+      :class="podcastId?'mb-4':'mb-2'"
+    >
       <h2 class="mb-0">
         {{ title }}
       </h2>
@@ -16,7 +17,10 @@
         @click="handleSeeMoreButton"
       />
     </div>
-    <div class="d-flex justify-content-between" v-if="!podcastId">
+    <div
+      v-if="!podcastId"
+      class="d-flex justify-content-between"
+    >
       <div class="d-flex">
         <button
           class="btn btn-underline"

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

@@ -1,12 +1,12 @@
 <template>
   <div class="d-contents podcast-item-info">
     <div class="d-flex justify-content-between flex-wrap text-secondary mb-3">
-      <div class="me-3 small-text">
+      <div class="me-3 h6">
         {{ date }}
       </div>
       <div
         v-if="0 !== durationString.length"
-        class="small-text"
+        class="h6"
       >
         {{ durationString }}
       </div>

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

@@ -7,23 +7,11 @@
       {{ playedTime }}
     </div>
     <div class="position-relative flex-grow-1">
-      <div
-        class="progress flex-grow-1 c-hand"
+      <ProgressBar
+        :main-progress="percentProgress"
+        class="medium"
         @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 }}
@@ -32,12 +20,16 @@
 </template>
 
 <script lang="ts">
+import ProgressBar from '../../misc/ProgressBar.vue';
 import DurationHelper from '../../../helper/duration';
 import displayMethods from '../../mixins/displayMethods';
 import { state } from '../../../store/paramStore';
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'PodcastPlayBar',
+  components:{
+    ProgressBar
+  },
   mixins: [displayMethods],
   props: {
     podcastId: { default: undefined, type: Number},
@@ -80,22 +72,4 @@ export default defineComponent({
     }
   },
 })
-</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>
+</script>

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

@@ -26,9 +26,7 @@
       <Popover
         v-if="isOuestFranceTag(tag)"
         :target="'tag-list-from-podcast-page'+index"
-        triggers="hover"
         :content="tag.substring(4,tag.length)"
-        placement="bottom"
       />
     </div>
   </div>

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-darker' : ''"
+          :class="option.rubriqueId <= 0 ? 'text-primary' : ''"
           :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-down octopus-arrow-down" />
+        <span class="saooti-down octopus-arrow-down octopus-arrow-down-absolute" />
       </template>
     </VueMultiselect>
   </div>

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

@@ -7,7 +7,7 @@
       <label
         for="rubrique-list-select"
         class="hid"
-      >{{$t('By topic')}}</label>
+      >{{ $t('By topic') }}</label>
       <select
         id="rubrique-list-select"
         v-model="rubriquage"
@@ -32,31 +32,32 @@
         {{ rubrique.name }}
       </button>
     </div>
-    <div
+    <button
       v-show="hidenRubriques.length"
-      class="dropdown btn-group"
+      id="rubriques-dropdown"
+      class="btn admin-button saooti-more"
+      :title="$t('See more')"
+    />
+    <Popover
+      target="rubriques-dropdown"
+      :only-click="true"
+      :is-fixed="true"
+      :left-pos="true"
     >
       <button
-        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-more"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        :title="$t('See more')"
-      />
-      <div class="dropdown-menu dropdown-menu-right px-4">
-        <div
-          v-for="rubrique in hidenRubriques"
-          :key="rubrique.rubriqueId"
-          class="me-3 dropdown-item"
-          @click="addFilter(rubrique)"
-        >
-          {{ rubrique.name }}
-        </div>
-      </div>
-    </div>
+        v-for="rubrique in hidenRubriques"
+        :key="rubrique.rubriqueId"
+        class="me-3 octopus-dropdown-item"
+        @mousedown="addFilter(rubrique)"
+      >
+        {{ rubrique.name }}
+      </button>
+    </Popover>
   </div>
 </template>
 
 <script lang="ts">
+import Popover from '../../misc/Popover.vue';
 import { Rubrique } from '@/store/class/rubrique/rubrique';
 import { Rubriquage } from '@/store/class/rubrique/rubriquage';
 import { RubriquageFilter } from '@/store/class/rubrique/rubriquageFilter';
@@ -64,9 +65,14 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'RubriqueList',
 
+  components:{
+    Popover
+  },
+
   props: {
     rubriquages: { default: () => [], type: Array as ()=>Array<Rubriquage>},
   },
+  
 
   data() {
     return {
@@ -114,7 +120,6 @@ export default defineComponent({
     window.removeEventListener('resize', this.resizeWindow);
   },
   methods: {
-    
     initRubriques(): void{
       if(!this.rubriquage){ return ;}
       this.$store.commit('filterRubriqueDisplay', this.rubriquage.rubriques);