@saooti/octopus-sdk 36.0.2 → 36.0.4

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

@@ -1,17 +1,9 @@
 <template>
   <div class="module-box">
-    <div
-      class="text-uppercase h4"
-    >
-      {{ podcast.title }}
-    </div>
-    <div class="mb-5 mt-3 d-flex">
+    <div class="mb-2 d-flex">
       <div class="w-100">
         <PodcastImage
           :class="[
-            !isLiveReadyToRecord
-              ? 'shadow-element'
-              : '',
             isLiveReadyToRecord &&
               fetchConference &&
               'null' !== fetchConference &&
@@ -28,8 +20,7 @@
           @playPodcast="playPodcast"
         />
         <div
-          class="d-flex flex-wrap mb-3"
-          :class="isLiveReady ? 'justify-content-between' : ''"
+          class="d-flex justify-content-between flex-wrap mb-2"
         >
           <div
             v-if="0 !== date.length"
@@ -38,7 +29,7 @@
             {{ date }}
           </div>
           <div>
-            {{ $t('Duration', { duration: duration }) }}
+            {{ duration}}
           </div>
           <div
             v-if="isLiveReady"
@@ -47,6 +38,11 @@
             {{ $t('Episode record in live') }}
           </div>
         </div>
+        <div
+          class="text-uppercase h2 mb-3"
+        >
+          {{ podcast.title }}
+        </div>
         <!-- eslint-disable vue/no-v-html -->
         <div
           class="descriptionText html-wysiwyg-content"
@@ -54,11 +50,10 @@
         />
         <!-- eslint-enable -->
         <div class="my-3">
-          <ParticipantDescription :participants="podcast.animators" />
-          <div>
+          <ParticipantDescription class="mb-1" :participants="podcast.animators" />
+          <div class="mb-1">
             {{ $t('Emission') + ' : ' }}
             <router-link
-              class="fw-bold"
               :to="{
                 name: 'emission',
                 params: { emissionId: podcast.emission.emissionId },
@@ -70,10 +65,9 @@
               {{ podcast.emission.name }}
             </router-link>
           </div>
-          <div v-if="!isPodcastmaker">
+          <div class="mb-1" v-if="!isPodcastmaker">
             {{ $t('Producted by : ') }}
             <router-link
-              class="fw-bold"
               :to="{
                 name: 'productor',
                 params: { productorId: podcast.organisation.id },
@@ -85,15 +79,15 @@
               {{ podcast.organisation.name }}
             </router-link>
           </div>
-          <div v-if="''!==photoCredit">
+          <div class="mb-1" v-if="''!==photoCredit">
             {{ $t('Photo credits') + " : "+ photoCredit }}
           </div>
-          <div v-if="''!==audioCredit">
+          <div class="mb-1" v-if="''!==audioCredit">
             {{ $t('Audio credits') + " : "+ audioCredit }}
           </div>
           <a
             v-if="podcast.article"
-            class="btn d-flex align-items-center my-2 width-fit-content"
+            class="btn d-flex align-items-center my-2 width-fit-content mb-1"
             :href="podcast.article"
             rel="noopener"
             target="_blank"
@@ -102,16 +96,18 @@
             <div>{{ $t('See associated article') }}</div>
           </a>
           <ParticipantDescription
+            class="mb-1"
             :participants="podcast.guests"
             :is-guest="true"
           />
           <PodcastPlayBar
-            :podcast="podcast"
+            :podcast-id="podcast.podcastId"
+            :duration="podcast.duration"
           />
           <div v-if="editRight && !isPodcastmaker">
             <div
               v-if="podcast.annotations && 'RSS'===podcast.annotations.SOURCE_KIND"
-              class="me-5"
+              class="me-5 text-secondary"
             >
               {{ $t('From RSS') }}
             </div>
@@ -123,6 +119,24 @@
         </div>
       </div>
     </div>
+    <RecordingItemButton
+      v-if="
+        !!fetchConference &&
+          isLiveReadyToRecord &&
+          !isNotRecorded &&
+          isOctopusAndAnimator
+      "
+      :podcast="podcast"
+      :live="true"
+      :recording="fetchConference"
+      @deleteItem="removeDeleted"
+      @validatePodcast="$emit('updatePodcast', $event)"
+    />
+    <EditBox
+      v-else-if="editRight && isEditBox"
+      :podcast="podcast"
+      @validatePodcast="$emit('updatePodcast', $event)"
+    />
     <TagList
       :tag-list="podcast.tags"
     />
@@ -145,6 +159,8 @@ import { Conference } from '@/stores/class/conference/conference';
 
 import { defineComponent, defineAsyncComponent } from 'vue';
 const ErrorMessage = defineAsyncComponent(() => import('../../misc/ErrorMessage.vue'));
+const RecordingItemButton = defineAsyncComponent(() => import('@/components/display/studio/RecordingItemButton.vue'));
+const EditBox = defineAsyncComponent(() => import('@/components/display/edit/EditBox.vue'));
 export default defineComponent({
   name: "PodcastModuleBox",
   components: {
@@ -152,7 +168,9 @@ export default defineComponent({
     ParticipantDescription,
     TagList,
     ErrorMessage,
-    PodcastPlayBar
+    PodcastPlayBar,
+    EditBox, 
+    RecordingItemButton
   },
 
   mixins:[displayMethods, orgaComputed],
@@ -163,7 +181,7 @@ export default defineComponent({
     fetchConference: { default: undefined, type: Object as ()=> Conference},
   },
 
-  emits: ['playPodcast'],
+  emits: ['playPodcast', 'updatePodcast'],
 
   computed: {
     errorMessage(): string{
@@ -180,7 +198,7 @@ export default defineComponent({
     },
     date(): string {
       if (this.podcast && 1970 !== dayjs(this.podcast.pubDate).year()){
-        return dayjs(this.podcast.pubDate).format('D MMMM YYYY, HH[h]mm');
+        return dayjs(this.podcast.pubDate).format('D MMMM YYYY');
       }
       return '';
     },
@@ -235,12 +253,22 @@ export default defineComponent({
     },
     audioCredit():string{
       return (this.podcast?.annotations?.audioCredit as string) ?? '';
-    }
+    },
+    isEditBox(): boolean{
+      return (state.podcastPage.EditBox as boolean)?? false;
+    },
   },
   methods: {
     playPodcast(podcast: Podcast): void {
       this.$emit('playPodcast', podcast);
     },
+    removeDeleted(): void {
+      if (window.history.length > 1) {
+        this.$router.go(-1);
+      } else {
+        this.$router.push('/');
+      }
+    },
   },
 })
 </script>

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 {