@saooti/octopus-sdk 36.0.1 → 36.0.3

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

@@ -10,7 +10,6 @@
     :iab-id="iabId"
     :rubrique-id="rubriqueId"
     :no-rubriquage-id="noRubriquageId"
-    :is-button-next-title="true"
     @sortChrono="sortChrono"
     @sortPopular="sortPopular"
   >
@@ -22,7 +21,7 @@
       <swiper
         v-if="!loading"
         :slides-per-view="numberItem"
-        :space-between="10"
+        :space-between="0"
         :loop="allPodcasts.length>=numberItem"
         :navigation="true"
         :modules="modules"
@@ -102,7 +101,10 @@ export default defineComponent({
       return `${this.emissionId}|${this.organisationId}|${this.filterOrgaId}|${this.iabId}|${this.rubriqueId}|${this.rubriquageId}|${this.query}`;
     },
     sizeItem(): number {
-      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 13;
+      if (window.innerWidth <= 450) {
+        return 12.5;
+      }
+      return state.generalParameters.podcastItem ? state.generalParameters.podcastItem: 16.5;
     },
   },
   watch: {
@@ -133,9 +135,9 @@ export default defineComponent({
   methods: {
     handleResize(): void {
       if (!this.$el) return;
-      const width = (this.$el as HTMLElement).offsetWidth;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
-      this.numberItem = Math.floor(width / sixteen);
+      const width = (this.$el as HTMLElement).offsetWidth - 95;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem+ 0.5);
+      this.numberItem = Math.max(1, Math.floor(width / sixteen));
     },
     async fetchNext(): Promise<void> {
       const data = await octopusApi.fetchDataWithParams<{count: number;result:Array<Podcast>;sort: string;}>(0, 'podcast/search',{
@@ -187,17 +189,25 @@ export default defineComponent({
   top: 0;
   bottom: 0;
   margin: 0;
-  width: 50px;
 }
 .swiper-button-next{
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,#fafafa 50%, #fafafa 100%);
   right: 0;
 }
 .swiper-button-prev{
-  background: linear-gradient(90deg, #fafafa 0%,#fafafa 50%, rgba(255, 255, 255, 0) 100%);
   left: 0;
 }
-
+.swiper-slide-active{
+  padding-left:27px;
+  @media (max-width: 550px) {
+    padding-left:0;
+  }
+}
+.swiper-slide-next{
+  padding-right:27px;
+}
+.swiper-button-lock{
+  display: flex;
+}
 .swiper-slide {
   display: flex;
   justify-content: center;

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

@@ -3,7 +3,7 @@
     v-if="undefined !== tagList && 0!==tagList.length"
     class="tag-list-component d-flex align-items-center flex-wrap"
   >
-    <div class="fw-bold">
+    <div>
       {{ $t('Podcast tags') + ": " }}
     </div>
     <div
@@ -14,6 +14,7 @@
       <div
         :id="'tag-list-from-podcast-page'+index"
         role="button"
+        class="d-flex align-items-center"
       >
         <img
           v-if="isOuestFranceTag(tag)"
@@ -29,6 +30,8 @@
         v-if="isOuestFranceTag(tag)"
         :target="'tag-list-from-podcast-page'+index"
         :content="tag.substring(4,tag.length)"
+        relativeClass="page-element"
+        :isFixed="true"
       />
     </div>
   </div>
@@ -51,6 +54,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
 .tag-list-component{
   .ouest-france-logo{
@@ -60,10 +64,11 @@ export default defineComponent({
   }
   .tag-list-element {
     display: flex;
+    align-items: center;
     margin: 0.4rem;
     padding: 0.2rem;
     border: 1px solid #999;
-    border-radius: 0.5rem;
+    border-radius: $octopus-borderradius;
   }
 }
 }

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

@@ -60,8 +60,8 @@
         {{ $t('No elements found. Consider changing the search query.') }}
       </template>
       <template #caret>
-        <span class="saooti-down octopus-arrow-down octopus-arrow-down-absolute" />
-      </template>
+        <span class="saooti-down octopus-arrow-down-absolute" />
+      </template> 
        <template #afterList="">
         <div
           v-if="rubriques.length > rubriqueLimit"

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

@@ -26,7 +26,7 @@
         v-for="rubrique in rubriqueDisplay"
         :ref="'rubrique' + rubrique.rubriqueId"
         :key="rubrique.rubriqueId"
-        class="rubrique-item bg-white"
+        class="btn btn-primary btn-on-dark m-1"
         @click="addFilter(rubrique)"
       >
         {{ rubrique.name }}
@@ -35,7 +35,7 @@
     <button
       v-show="hidenRubriques.length"
       id="rubriques-dropdown"
-      class="btn admin-button saooti-more"
+      class="btn btn-primary btn-on-dark m-1 saooti-more"
       :title="$t('See more')"
     />
     <Popover
@@ -175,12 +175,18 @@ export default defineComponent({
       if(null === rubriqueList){return}
       rubriqueList.style.justifyContent = 'flex-start';
       this.hidenRubriques.length = 0;
+      this.rubriqueDisplay.forEach((element: Rubrique) => {
+        const el = (this.$refs['rubrique' + element.rubriqueId] as Array<HTMLElement>)[0];
+        if (!el) return;
+        if (el.classList.contains('hid')) {
+          el.classList.remove('hid');
+        }
+      });
       this.rubriqueDisplay.forEach((element: Rubrique) => {
         const el = (this.$refs['rubrique' + element.rubriqueId] as Array<HTMLElement>)[0];
         if (!el) return;
         const parent = el.parentElement;
         if (null !== parent && el.offsetLeft + el.clientWidth <= parent.clientWidth - 20) {
-          el.classList.remove('hid');
           return;
         }
         this.hidenRubriques.push(element);
@@ -200,6 +206,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
 .rubrique-list-container {
   display: flex;
@@ -211,26 +218,11 @@ export default defineComponent({
   padding: 0 4rem;
   select{
     width: auto;
-    border-radius: 1.5rem;
+    border-radius: $octopus-borderradius;
     margin: 0.2rem;
     font-size: 0.6rem;
     padding: 0.5rem;
   }
 }
-.rubrique-item {
-  font-size: 0.6rem;
-  margin: 0.2rem;
-  padding: 0.5rem;
-  border-radius: 1.5rem;
-  border: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  flex-shrink: 0;
-  &:hover {
-    background: #eee !important;
-  }
-}
 }
 </style>

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

@@ -1,95 +1,79 @@
 <template>
-  <Accordion
-    class="mt-3"
-    :title="$t('player parameters')"
-    id-composer="playerParameters"
+  <div class="h4 mb-2 mt-3">{{ $t('player parameters') }}</div>
+  <template
+    v-if="choseNumberEpisode"
   >
     <div
-      v-if="choseNumberEpisode"
-      class="d-flex flex-column flex-grow-1"
+      v-if="displayChoiceAllEpisodes"
+      class="d-flex align-items-center flex-wrap mt-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-model="episodeNumbers"
+        class="form-check-input"
+        type="radio"
+        name="episodeNumbers"
+        value="all"
       >
-        <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')"
-      />
+      <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
     </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"
+      class="d-flex align-items-center flex-wrap"
+      :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
     >
-      <ClassicCheckbox
-        v-model:textInit="displayTranscript"
-        id-checkbox="display-transcript-checkbox"
-        :label="$t('If the transcript is available, show it')"
+      <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>
-  </Accordion>
+    <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')"
+    />
+  </template>
+  <ClassicCheckbox
+    v-if="displayArticleParam"
+    v-model:textInit="displayArticle"
+    id-checkbox="display-article-checkbox"
+    :label="$t('Display associated article')"
+  />
+  <ClassicCheckbox
+    v-if="displayTranscriptParam"
+    v-model:textInit="displayTranscript"
+    id-checkbox="display-transcript-checkbox"
+    :label="$t('If the transcript is available, show it')"
+  />
 </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
+    ClassicCheckbox
   },
   props: {
     isVisible: { default: false, type: Boolean},

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

@@ -1,40 +1,24 @@
 <template>
-  <div class="module-box text-center-mobile">
-    <template
-      v-if="!isVertical"
-    >
-      <div class="d-flex mb-2">
-        <h3 class="mb-0">
-          {{ $t('Share') }}
-        </h3>
-        <span
-          v-if="authenticated"
-          id="popover-share-help"
-          role="button"
-          tabindex="0"
-          class="saooti-help ms-2 align-items-start"
-        />
-        <Popover
-          v-if="authenticated"
-          target="popover-share-help"
-          :title="$t('Help')"
-          :content="$t('Share this page without edit and share blocks')"
-        />
-      </div>
-      <div class="d-flex align-items-center">
-        <ShareButtonsIntern
-          :podcast="podcast"
-          :emission="emission"
-          :playlist="playlist"
-          :participant-id="participantId"
-          :organisation-id="organisationId"
-        />
-      </div>
-    </template>
-    <div
-      v-else
-      class="d-flex-row"
-    >
+  <div class="module-box">
+    <div class="d-flex align-items-center mb-3">
+      <h2 class="big-h2 mb-0">{{ $t('Share') }}</h2>
+      <span
+        v-if="authenticated"
+        id="popover-share-help"
+        role="button"
+        tabindex="0"
+        class="saooti-help ms-2"
+      />
+      <Popover
+        v-if="authenticated"
+        target="popover-share-help"
+        :title="$t('Help')"
+        :content="$t('Share this page without edit and share blocks')"
+        relativeClass="page-element"
+        :isFixed="true"
+      />
+    </div>
+    <div class="d-flex align-items-center justify-content-between">
       <ShareButtonsIntern
         :podcast="podcast"
         :emission="emission"
@@ -67,7 +51,6 @@ export default defineComponent({
     playlist: { default: undefined, type: Object as ()=>Playlist},
     participantId: { default: undefined, type: Number},
     organisationId: { default: undefined, type: String},
-    isVertical: { default: false, type: Boolean},
   },
   computed: {
     authenticated(): boolean {

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

@@ -1,61 +1,78 @@
 <template>
-  <button
-    v-if="isDownloadButton"
-    class="text-dark"
-    :class="getClass()"
-    :title="$t('Downloading')"
-    @click="onDownload(podcast.audioUrl, podcast.title)"
-  >
-    <div class="saooti-download" />
-  </button>
-  <template
-    v-for="button in arrayShareButtons"
-    :key="button.title"
-  >
-    <a
-      v-if="button.condition"
-      rel="noopener"
-      target="_blank"
-      :href="button.url"
-      :class="getClass(button.className)"
-      :title="button.title"
-    >
-      <div :class="button.icon" />
-    </a>
-  </template>
-  <a
-    v-if="''!==rssUrl && displayRss"
-    rel="noopener"
-    target="_blank"
-    :class="getClass()"
-    :href="rssUrl"
-    :title="titleRssButton"
-    @click.prevent="openPopup()"
-  >
-    <div class="saooti-rss" />
-  </a>
-  <button
-    :class="getClass()"
-    :title="$t('Copy this page URL')"
-    @click="onCopyCode(urlPage,afterCopy)"
-  >
-    <div class="saooti-link" />
-  </button>
-  <button
-    v-if="podcast || emission ||playlist"
-    :class="getClass()"
-    :title="$t('Share newsletter')"
-    @click="newsletter = true"
-  >
-    <div class="saooti-newsletter" />
-  </button>
-  <button
-    :class="getClass()"
-    :title="$t('Share QR Code')"
-    @click="qrCode = true"
-  >
-    <div class="saooti-qrcode" />
-  </button>
+  <div class="d-flex flex-column me-2">
+    <div class="h4 mb-2">{{$t('Social networks')}}</div>
+    <div class="d-flex align-items-center">
+      <template
+        v-for="button in arrayShareButtons"
+        :key="button.title"
+      >
+        <a
+          v-if="button.condition"
+          rel="noopener"
+          target="_blank"
+          :href="button.url"
+          :class="getClass(button.className)"
+          class="me-2"
+          :title="button.title"
+        >
+          <div :class="button.icon" />
+        </a>
+      </template>
+    </div>
+  </div>
+  <div class="d-flex flex-column me-2">
+    <div class="h4 mb-2">{{$t('Newsletter')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <button
+        v-if="podcast || emission ||playlist"
+        :class="getClass()"
+        class="saooti-newsletter"
+        :title="$t('Share newsletter')"
+        @click="newsletter = true"
+      />
+    </div>
+  </div>
+
+  <div class="d-flex flex-column me-2">
+    <div class="h4 mb-2">{{$t('QR Code')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <button
+        :class="getClass()"
+        :title="$t('Share QR Code')"
+        @click="qrCode = true"
+        class="saooti-qrcode"
+      />
+    </div>
+  </div>
+
+  <div class="d-flex flex-column me-2">
+    <div class="h4 mb-2">{{$t('Copy this page URL')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <button
+        :class="getClass()"
+        class="saooti-link"
+        :title="$t('Copy this page URL')"
+        @click="onCopyCode(urlPage,afterCopy)"
+      />
+    </div>
+  </div>
+
+  <div class="d-flex flex-column me-2" v-if="''!==rssUrl && displayRss">
+    <div class="h4 mb-2">{{$t('Rss feed')}}</div>
+    <div class="d-flex align-items-center justify-content-center">
+      <a
+        rel="noopener"
+        target="_blank"
+        class="saooti-rss"
+        :class="getClass()"
+        :href="rssUrl"
+        :title="titleRssButton"
+        @click.prevent="openPopup()"
+      />
+    </div>
+  </div>
+ 
+  
   <ClipboardModal
     v-if="dataRSSSave"
     :link="rssUrl"
@@ -140,12 +157,6 @@ export default defineComponent({
         { title: 'Whatsapp', icon:'saooti-Whatsapp', className:'btn-whatsapp', url :`whatsapp://send?text=${this.urlPage}`, condition:  window.matchMedia('(hover: none)').matches}
       ]
     },
-    isDownloadButton(): boolean{
-      return this.isDownloadButtonParam && undefined!==this.podcast && (!this.podcast.tags || !this.podcast.tags.includes('copyright'));
-    },
-    isDownloadButtonParam(): boolean {
-      return (state.podcastPage.downloadButton as boolean);
-    },
     urlPage(): string{
       return window.location.href;
     },
@@ -179,9 +190,7 @@ export default defineComponent({
 
   methods: {
     getClass(className='btn-rss'): string{
-      let returnString = `btn ${className} share-btn mb-2 text-dark`;
-      returnString+= this.isVertical ? '' : ' mx-2';
-      return returnString;
+      return `btn ${className} share-btn mb-2 text-dark`;
     },
     openPopup(): void {
       this.dataRSSSave = !this.dataRSSSave;
@@ -189,23 +198,6 @@ export default defineComponent({
     afterCopy(): void{
       (this.$refs.snackbar as InstanceType<typeof Snackbar>).open(this.$t('Link in clipboard'));
     },
-    onDownload(urlToDownload: string, nameOfDownload: string): void{
-      const xhr = new XMLHttpRequest();
-      xhr.open('GET', urlToDownload, true);
-      xhr.responseType = 'blob';
-      xhr.onload = function() {
-        const urlCreator = window.URL || window.webkitURL;
-        const imageUrl = urlCreator.createObjectURL(this.response);
-        const tag = document.createElement('a');
-        tag.href = imageUrl;
-        tag.target = '_blank';
-        tag.download = nameOfDownload.replace(/ /g, '_');
-        document.body.appendChild(tag);
-        tag.click();
-        document.body.removeChild(tag);
-      };
-      xhr.send();
-    },
   },
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="module-box">
-    <h3>{{ $t('Distribute') }}</h3>
+    <h2 class="big-h2 mb-3">{{ $t('Distribute') }}</h2>
     <div class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
       <div class="text-primary hide-small-screen text-break">
@@ -101,10 +101,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import '@scss/_variables.scss';
 .octopus-app{
 .sharing-distribution-container {
   border: 0.05rem solid #dee2e6;
-  border-radius: 0.3rem;
+  border-radius: $octopus-borderradius;
   padding: 0.4rem;
   margin: 0.2rem 1rem 0.2rem 0;
   display: flex;