@saooti/octopus-sdk 33.1.2 → 33.2.0

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/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>

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/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/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);

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

@@ -1,118 +1,95 @@
 <template>
-  <div
-    id="accordionParameters"
-    class="accordion mt-3"
+  <Accordion
+    class="mt-3"
+    :title="$t('player parameters')"
+    id-composer="playerParameters"
   >
-    <div class="accordion-item">
-      <h2
-        id="labelPlayerParameter"
-        class="accordion-header mb-0"
+    <div
+      v-if="choseNumberEpisode"
+      class="d-flex flex-column flex-grow-1"
+    >
+      <div
+        v-if="displayChoiceAllEpisodes"
+        class="d-flex align-items-center flex-wrap mt-1"
       >
-        <button
-          class="accordion-button collapsed"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#playerParameters"
-          aria-expanded="false"
-          aria-controls="playerParameters"
+        <input
+          v-model="episodeNumbers"
+          class="form-check-input"
+          type="radio"
+          name="episodeNumbers"
+          value="all"
         >
-          {{ $t('player parameters') }}
-        </button>
-      </h2>
+        <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
+      </div>
       <div
-        id="playerParameters"
-        class="accordion-collapse collapse"
-        titleledby="labelPlayerParameter"
-        data-bs-parent="#accordionParameters"
+        class="d-flex align-items-center flex-wrap"
+        :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
       >
-        <div class="accordion-body">
-          <div
-            v-if="choseNumberEpisode"
-            class="d-flex flex-column flex-grow-1"
-          >
-            <div
-              v-if="displayChoiceAllEpisodes"
-              class="d-flex align-items-center flex-wrap mt-1"
-            >
-              <input
-                v-model="episodeNumbers"
-                class="form-check-input"
-                type="radio"
-                name="episodeNumbers"
-                value="all"
-              >
-              <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
-            </div>
-            <div
-              class="d-flex align-items-center flex-wrap"
-              :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
-            >
-              <input
-                v-if="displayChoiceAllEpisodes"
-                v-model="episodeNumbers"
-                class="form-check-input"
-                type="radio"
-                name="episodeNumbers"
-                value="number"
-              >
-              <span class="flex-shrink-0">{{ $t('Show') }}</span>
-              <input
-                id="number-input"
-                v-model="iFrameNumber"
-                type="number"
-                min="1"
-                max="50"
-                class="input-share-player  text-center m-2"
-              >
-              <label
-                for="number-input"
-                :title="$t('Number of player podcasts')"
-              />
-              <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-if="displayArticleParam"
-            class="d-flex flex-column flex-grow-1"
-          >
-            <ClassicCheckbox
-              v-model:textInit="displayArticle"
-              id-checkbox="display-article-checkbox"
-              :label="$t('Display associated article')"
-            />
-          </div>
-          <div 
-            v-if="displayTranscriptParam"
-            class="d-flex flex-column flex-grow-1"
-          >
-            <ClassicCheckbox
-              v-model:textInit="displayTranscript"
-              id-checkbox="display-transcript-checkbox"
-              :label="$t('If the transcript is available, show it')"
-            />
-          </div>
-        </div>
+        <input
+          v-if="displayChoiceAllEpisodes"
+          v-model="episodeNumbers"
+          class="form-check-input"
+          type="radio"
+          name="episodeNumbers"
+          value="number"
+        >
+        <span class="flex-shrink-0">{{ $t('Show') }}</span>
+        <input
+          id="number-input"
+          v-model="iFrameNumber"
+          type="number"
+          min="1"
+          max="50"
+          class="input-share-player  text-center m-2"
+        >
+        <label
+          for="number-input"
+          :title="$t('Number of player podcasts')"
+        />
+        <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-if="displayArticleParam"
+      class="d-flex flex-column flex-grow-1"
+    >
+      <ClassicCheckbox
+        v-model:textInit="displayArticle"
+        id-checkbox="display-article-checkbox"
+        :label="$t('Display associated article')"
+      />
+    </div>
+    <div 
+      v-if="displayTranscriptParam"
+      class="d-flex flex-column flex-grow-1"
+    >
+      <ClassicCheckbox
+        v-model:textInit="displayTranscript"
+        id-checkbox="display-transcript-checkbox"
+        :label="$t('If the transcript is available, show it')"
+      />
     </div>
-  </div>
+  </Accordion>
 </template>
 
 <script lang="ts">
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import Accordion from '../../misc/Accordion.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components:{
     ClassicCheckbox,
+    Accordion
   },
   props: {
     isVisible: { default: false, type: Boolean},

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

@@ -13,15 +13,13 @@
           role="button"
           tabindex="0"
           class="saooti-help ms-2 align-items-start"
-          :title="$t('Help')"
         />
         <Popover
           v-if="authenticated"
           target="popover-share-help"
-          placement="right"
-        >
-          {{ $t('Share this page without edit and share blocks') }}
-        </Popover>
+          :title="$t('Help')"
+          :content="$t('Share this page without edit and share blocks')"
+        />
       </div>
       <div class="d-flex align-items-center">
         <ShareButtonsIntern

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

@@ -20,7 +20,7 @@
       :class="getClass(button.className)"
       :title="button.title"
     >
-      <div :class="button.icon"/>
+      <div :class="button.icon" />
     </a>
   </template>
   <a

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

@@ -3,15 +3,16 @@
     <h3>{{ $t('Distribute') }}</h3>
     <p class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
-      <div class="primary-darker hide-small-screen text-break">{{ rss }}</div>
-      <input
-        type="button"
-        :value="$t('Copy')"
-        class="btn btn-primary"
-        :title="$t('Copy')"
-        @click="onCopyCode(rss, afterCopy)"
-      >
-    </p>
+    </p><div class="primary-darker hide-small-screen text-break">
+      {{ rss }}
+    </div>
+    <input
+      type="button"
+      :value="$t('Copy')"
+      class="btn btn-primary"
+      :title="$t('Copy')"
+      @click="onCopyCode(rss, afterCopy)"
+    />
     <RssSection
       v-if="emission"
       :emission="emission"
@@ -23,7 +24,7 @@
         :to="platform.url"
         class="text-dark"
       >
-        <span :class="platform.icon"></span>{{ platform.title }}
+        <span :class="platform.icon" />{{ platform.title }}
       </router-link>
     </div>
     <Snackbar

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

@@ -18,7 +18,7 @@
         :href="sub.url"
         :title="sub.title"
       >
-        <span :class="sub.icon"></span>
+        <span :class="sub.icon" />
       </a>
     </template>
   </div>

package/src/components/form/ClassicLoading.vue

@@ -3,7 +3,7 @@
     v-if="loadingText"
     class="d-flex align-items-center justify-content-center"
   >
-    <div class="spinner-border me-3 flex-shrink-0" />
+    <Spinner class="me-3" />
     <div class="h3 mt-2">
       {{ loadingText }}
     </div>
@@ -17,9 +17,13 @@
 </template>
 
 <script lang="ts">
+import Spinner from '../misc/Spinner.vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: "ClassicLoading",
+  components:{
+    Spinner
+  },
   props: {
     loadingText: { default: undefined, type: String},
     errorText: { default: undefined, type: String},

package/src/components/misc/Accordion.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="octopus-accordion"
+  >
+    <button
+      class="btn-transparent w-100 p-2 text-start d-flex align-items-center"
+      @click="isOpen=!isOpen"
+    >
+      <span class="flex-grow-1">{{ title }}</span>
+      <span class="saooti-down" />
+    </button>
+    <div
+      v-show="isOpen"
+      class="body p-2"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: "Accordion",
+	props: {
+    title: { default: '', type: String },
+  },
+	emits:['open'],
+  data () {
+    return {
+			isOpen: false as boolean,
+    }
+  },
+  watch:{
+    isOpen(){
+      this.$emit('open');
+    }
+  }
+});
+</script>
+<style lang="scss">
+.octopus-accordion{
+	border: 1px solid #ccc;
+  .body{
+    border-top: 1px solid #ccc;
+  }
+}
+</style>

package/src/components/misc/ErrorMessage.vue

@@ -8,7 +8,8 @@
     >
       <span
         :title="$t('Warning')"
-        class="saooti-warning text-danger me-1"/>
+        class="saooti-warning text-danger me-1"
+      />
       <div class="alert-text">
         {{ message }}
       </div>