@saooti/octopus-sdk 39.4.9 → 39.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.4.9",
+  "version": "39.4.11",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/components/display/categories/CategoryChooser.vue

@@ -15,6 +15,7 @@
     :width="width"
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
+    :display-required="displayRequired"
     @on-search="onSearchCategory"
     @selected="onCategorySelected"
   />
@@ -50,6 +51,7 @@ export default defineComponent({
     label:{default: undefined, type: String },
     displayLabel: { default: false, type: Boolean },
     textDanger :{ default: undefined, type: String },
+    displayRequired: { default: false, type: Boolean },
   },
   emits: [
     "update:categorySelected",

package/src/components/display/categories/CategoryFilter.vue

@@ -13,7 +13,7 @@
     >
       <ol
         v-if="filterIab || filterRubrique.length"
-        class="octopus-breadcrumb d-flex align-items-center justify-content-center flex-wrap"
+        class="octopus-breadcrumb"
       >
         <li class="octopus-breadcrumb-li">
           <a href="#" @click="removeFilter(-1, $event)">{{ $t("All") }}</a>
@@ -24,7 +24,7 @@
         <li
           v-for="(filter, index) in filterRubrique"
           :key="filter.rubriqueId"
-          class="d-flex align-items-center octopus-breadcrumb-li"
+          class="octopus-breadcrumb-li"
           :class="filterRubrique.length - 1 === index ? 'active' : ''"
         >
           <a
@@ -289,10 +289,15 @@ export default defineComponent({
   }
 
   .octopus-breadcrumb {
-    padding: 1rem;
+    display: flex;
     align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 1rem;
 
     .octopus-breadcrumb-li {
+      display: flex;
+      align-items: center;
       list-style: none;
       color: white !important;
 

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

@@ -197,13 +197,8 @@ export default defineComponent({
 <style lang="scss">
 .octopus-app .comment-input-container {
   .comment-input {
-    border-top: 0;
-    border-right: 0;
-    border-left: 0;
-    border-bottom: 0.1rem solid var(--octopus-border-default) !important;
-    overflow: hidden !important;
-    box-shadow: unset !important;
-    background: transparent !important;
+    border-bottom: 0.1rem solid var(--octopus-border-default);
+    overflow: hidden;
     min-height: 36px;
     resize: none;
   }

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

@@ -98,7 +98,7 @@ export default defineComponent({
     @media (width <= 960px) {
       display: none;
     }
-
+    
     .comment-border {
       width: auto;
       position: absolute;

package/src/components/display/comments/like/LikeButton.vue

@@ -81,7 +81,6 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-
 @use "sass:color";
 
 .octopus-app .btn-like-comment {

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

@@ -20,7 +20,7 @@
     </SwiperList>
     <router-link
       :to="href"
-      class="btn btn-primary align-self-center width-fit-content m-4"
+      class="btn btn-primary align-self-center w-fit-content m-4"
     >
       {{ buttonText }}
     </router-link>

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

@@ -1,5 +1,5 @@
 <template>
-  <article class="mt-3 emission-item-container">
+  <article class="classic-element-container">
     <router-link
       :to="{
         name: 'emission',
@@ -17,8 +17,8 @@
         alt=""
         :title="$t('Emission name image', { name: emission.name })"
       />
-      <div class="emission-item-text">
-        <div class="d-flex align-items-center emission-name">
+      <div class="classic-element-text">
+        <div class="d-flex align-items-center element-name basic-line-clamp">
           <AlertIcon
             v-if="!activeEmission && !isPodcastmaker && editRight"
             :size="16"
@@ -29,7 +29,7 @@
         </div>
         <div
           ref="descriptionEmissionContainer"
-          class="emission-description htms-wysiwyg-content"
+          class="element-description htms-wysiwyg-content"
         >
           <!-- eslint-disable vue/no-v-html -->
           <div
@@ -103,7 +103,7 @@ export default defineComponent({
       null !== emissionDescContainer &&
       emissionDesc.clientHeight > emissionDescContainer.clientHeight
     ) {
-      emissionDescContainer.classList.add("after-emission-description");
+      emissionDescContainer.classList.add("after-element-description");
     }
   },
   methods: {

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

@@ -15,11 +15,12 @@
     :player-responsive="true"
   >
     <template #list>
-      <div v-if="!itemPlayer" class="emission-list two-emissions">
+      <div v-if="!itemPlayer" class="octopus-element-list two-items-list">
         <ClassicLazy
           v-for="e in displayArray"
           :key="e.emissionId"
           :min-height="250"
+          class="d-flex flex-column flex-grow-1"
         >
           <EmissionItem v-if="0 !== e.emissionId" :emission="e" />
           <template #preview>

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

@@ -11,7 +11,7 @@
       <div v-if="rubriqueName" class="emission-player-item-info">
         {{ rubriqueName }}
       </div>
-      <div class="img-box rounded-0">
+      <div class="img-box">
         <img
           v-lazy="proxyImageUrl(emission.imageUrl, '330')"
           width="330"
@@ -19,7 +19,7 @@
           role="presentation"
           alt=""
           :title="$t('Emission name image', { name: emission.name })"
-          class="img-box rounded-0"
+          class="img-box"
         />
       </div>
       <div class="fw-bold text-uppercase text-truncate p-2">
@@ -38,7 +38,7 @@
           params: { podcastId: p.podcastId },
         }"
         :title="$t('Episode name page', { name: p.title })"
-        class="text-dark fw-bold two-line-clamp"
+        class="text-dark fw-bold basic-line-clamp"
       >
         {{ p.title }}
       </router-link>

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

@@ -1,6 +1,6 @@
 <template>
   <article
-    class="emission-item-container emission-presentation-container mt-3"
+    class="classic-element-container emission-presentation-container mt-3"
     :class="isVertical ? 'emission-vertical-item' : ''"
   >
     <router-link
@@ -22,14 +22,14 @@
         alt=""
         :title="$t('Emission name image', { name: emission.name })"
       />
-      <div class="emission-item-text">
-        <div class="emission-name mb-2">
+      <div class="classic-element-text">
+        <div class="element-name mb-2 basic-line-clamp">
           {{ emission.name }}
         </div>
         <div
           v-if="!isPhone && isDescription"
           ref="descriptionEmissionContainer"
-          class="emission-description htms-wysiwyg-content"
+          class="element-description htms-wysiwyg-content"
         >
           <!-- eslint-disable vue/no-v-html -->
           <div
@@ -85,7 +85,7 @@ export default defineComponent({
             emissionDescContainer &&
             emissionDesc.clientHeight > emissionDescContainer.clientHeight
           ) {
-            emissionDescContainer.classList.add("after-emission-description");
+            emissionDescContainer.classList.add("after-element-description");
           }
         });
       },
@@ -101,14 +101,14 @@ export default defineComponent({
       margin-right: 0.5rem;
     }
 
-    .emission-description {
+    .element-description {
       height: 0;
       flex-grow: 1;
       max-height: unset;
     }
   }
 
-  .emission-item-container.emission-vertical-item {
+  .classic-element-container.emission-vertical-item {
     flex-grow: 0;
     width: 400px;
     flex-shrink: 0;

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

@@ -48,7 +48,7 @@
       <router-link
         v-if="buttonText && href"
         :to="href"
-        class="btn btn-primary align-self-center width-fit-content m-4"
+        class="btn btn-primary align-self-center w-fit-content m-4"
       >
         {{ buttonText }}
       </router-link>
@@ -135,7 +135,7 @@ export default defineComponent({
       overflow-y: auto;
       scroll-snap-type: x mandatory;
 
-      .emission-item-container{
+      .classic-element-container{
         scroll-snap-align: center;
       }
     }
@@ -166,12 +166,8 @@ export default defineComponent({
   .show-emission-column {
     display: flex;
 
-    @media (width <= 1550px) {
-      display: none !important;
-    }
-
-    @media (width <= 960px) {
-      display: flex !important;
+    @media (width <= 1550px) and (width > 960px) {
+      display: none;
     }
   }
 }

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

@@ -12,10 +12,10 @@
       v-show="showFilters"
       class="advanced-search-container"
     >
-      <div class="d-flex flex-column">
-        <div class="text-primary mb-2">
+      <fieldset class="d-flex flex-column flex-grow-3">
+        <legend class="text-primary mb-2">
           {{ $t("Filter") }}
-        </div>
+        </legend>
         <MonetizableFilter
           v-if="!isPodcastmaker && !platformEducation"
           :is-emission="isEmission"
@@ -63,7 +63,7 @@
           :label="$t('Show only episodes with video')"
           @update:text-init="updateOnlyVideo"
         />
-      </div>
+      </fieldset>
       <SearchOrder
         :is-emission="isEmission"
         :sort="sort"
@@ -268,3 +268,18 @@ export default defineComponent({
   },
 });
 </script>
+<style lang="scss">
+.octopus-app {
+  .advanced-search-container {
+    background: var(--octopus-background);
+    display: flex;
+    width: 100%;
+    margin-bottom: 1rem;
+    justify-content: space-around;
+
+    @media (width <= 720px) {
+      flex-wrap: wrap;
+    }
+  }
+}
+</style>

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

@@ -145,7 +145,6 @@ export default defineComponent({
 
 <style lang="scss">
 
-
 .octopus-app {
   .filter-speech-bubble {
     position: absolute;

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

@@ -5,10 +5,11 @@
     :options="optionsArray"
     :radio-label="$t('Sort')"
     class-label="text-primary mb-2"
+    :type-tag="typeTag"
+    class="flex-grow-1"
     @update:text-init="$emit('update:sort', $event)"
   />
 </template>
-
 <script lang="ts">
 import ClassicRadioLabel from "../../form/ClassicRadioLabel.vue";
 import { defineComponent } from "vue";
@@ -19,6 +20,7 @@ export default defineComponent({
   props: {
     isEmission: { default: false, type: Boolean },
     sort: { default: "DATE", type: String },
+    typeTag: { default: "fieldset", type: String },
   },
 
   emits: ["update:sort"],

package/src/components/display/list/ListPaginate.vue

@@ -33,12 +33,7 @@
     <button
       v-show="first + rowsPerPage < totalCount && (isPhone || justSizeChosen)"
       :disabled="loading"
-      class="btn"
-      :class="
-        buttonPlus
-          ? 'btn-primary align-self-center width-fit-content m-4'
-          : 'btn-more'
-      "
+      class="btn btn-primary align-self-center w-fit-content m-4"
       :title="$t('See more')"
       @click="fetchMore"
     >

package/src/components/display/list/SwiperList.vue

@@ -138,7 +138,6 @@ export default defineComponent({
 </script>
 <style lang="scss">
 
-
 :root {
   --swiper-navigation-sides-offset: 0;
 }
@@ -152,8 +151,7 @@ export default defineComponent({
 .swiper-button-prev {
   color: var(--octopus-primary) !important;
   height: 100%;
-  top: 0;
-  bottom: 0;
+  inset-block:0;
   margin: 0;
   width: 40px;
   background: var(--octopus-background);

package/src/components/display/live/LiveHorizontalList.vue

@@ -13,7 +13,7 @@
       :player-responsive="true"
     >
       <template #list>
-        <div class="podcast-list">
+        <div class="octopus-element-list">
           <template v-for="p in displayArray" :key="p.podcastId">
             <PodcastItem v-if="0 !== p.podcastId" :podcast="p" />
           </template>

package/src/components/display/live/RadioCurrently.vue

@@ -107,14 +107,12 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-.octopus-app {
-  .small-img-box {
-    height: 80px;
-    width: 80px;
-    border-radius: 0.2rem;
-    overflow: hidden;
-    flex-shrink: 0;
-    margin: 0.5rem;
-  }
+.octopus-app .small-img-box {
+  height: 80px;
+  width: 80px;
+  border-radius: var(--octopus-border-radius);
+  overflow: hidden;
+  flex-shrink: 0;
+  margin: 0.5rem;
 }
 </style>

package/src/components/display/live/RadioImage.vue

@@ -81,20 +81,16 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-
-
-.octopus-app {
-  .radio-play-button{
-    display: flex;
-    align-items: center;
-    position: absolute;
-    bottom: 0;
-    font-size: 1rem;
-    color: white;
-    background-color: var(--octopus-primary-less-transparent);
-    border-radius: var(--octopus-border-radius);
-    padding:  0.2rem;
-    border: 0;
-  }
+.octopus-app .radio-play-button{
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  font-size: 1rem;
+  color: var(--octopus-color-on-primary);
+  background-color: var(--octopus-primary-less-transparent);
+  border-radius: var(--octopus-border-radius);
+  padding:  0.2rem;
+  border: 0;
 }
 </style>

package/src/components/display/live/RadioItem.vue

@@ -6,13 +6,13 @@
         name: 'radio',
         params: { canalId: radio.id },
       }"
-      class="text-dark emission-item-text"
+      class="text-dark classic-element-text"
       :title="$t('Radio name page', { name: radio.name })"
     >
-      <div class="emission-name mb-2">
+      <div class="element-name mb-2 basic-line-clamp">
         {{ radio.name }}
       </div>
-      <div v-if="radio.description" class="ten-line-clamp">
+      <div v-if="radio.description" class="basic-line-clamp ten-line">
         {{ radio.description }}
       </div>
       <RadioCurrently :radio="radio" />

package/src/components/display/live/RadioPlanning.vue

@@ -8,8 +8,8 @@
         <button
           v-for="day in displayArrayDays"
           :key="day.date"
-          class="d-flex flex-column align-items-center flex-grow-1 button-date"
-          :class="day.date == daySelected ? 'bg-primary text-white' : ''"
+          class="button-date border"
+          :class="day.date == daySelected ? 'bg-primary' : ''"
           @click="changeDate(day.date)"
         >
           <span class="text-capitalize" >{{ day.dayOfWeek }}</span>
@@ -367,12 +367,14 @@ export default defineComponent({
   }
 
   .button-date {
-    border: 1px solid var(--octopus-border-default);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
     padding: 0.5rem;
-    color: black !important;
 
-    &.text-white{
-      color: white !important;
+    &.bg-primary{
+      color: var(--octopus-color-on-primary) !important;
     }
 
     &:hover {

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

@@ -18,7 +18,7 @@
     </SwiperList>
     <router-link
       :to="href"
-      class="btn btn-primary align-self-center width-fit-content m-4"
+      class="btn btn-primary align-self-center w-fit-content m-4"
     >
       {{ buttonText }}
     </router-link>

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

@@ -28,7 +28,7 @@
       </div>
       <div
         ref="descriptionParticipantContainer"
-        class="participant-description html-wysiwyg-content"
+        class="element-description small-description html-wysiwyg-content"
       >
         <!-- eslint-disable vue/no-v-html -->
         <div
@@ -44,7 +44,7 @@
         name: 'productor',
         params: { productorId: participant.orga.id },
       }"
-      class="participant-producer"
+      class="small-text mt-1"
     >
       © {{ participant.orga.name }}
     </router-link>
@@ -102,7 +102,7 @@ export default defineComponent({
       null !== participantDescContainer &&
       participantDesc.clientHeight > participantDescContainer.clientHeight
     ) {
-      participantDescContainer.classList.add("after-participant-description");
+      participantDescContainer.classList.add("after-element-description");
     }
   },
   methods: {
@@ -126,56 +126,11 @@ export default defineComponent({
 });
 </script>
 <style lang="scss">
-
-
-.octopus-app {
-  .participant-item-container {
-    list-style: none;
-    border-radius: var(--octopus-border-radius);
-    display: flex;
-    flex-direction: column;
-    margin: 1rem 0;
-    align-items: center;
-    width: var(--octopus-image-size);
-
-    .participant-description {
-      overflow: hidden;
-      margin-top: 0.5em;
-      max-height: 3rem;
-      position: relative;
-      text-align: center;
-
-      &.after-participant-description::after {
-        content: "...";
-        position: absolute;
-        padding-left: 1rem;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        font-size: 1rem;
-        font-weight: bolder;
-        text-align: center;
-        background: linear-gradient(
-          to bottom,
-          var(--octopus-background-transparent),
-          var(--octopus-background),
-        );
-      }
-    }
-
-    .participant-producer {
-      font-weight: 300;
-      font-size: 0.6rem;
-      margin-top: 0.5rem;
-    }
-
-    @media (width <= 960px) {
-      margin: 0;
-    }
-
-    @media (width <= 450px) {
-      margin: 1rem 0 0;
-    }
-  }
+.octopus-app .participant-item-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: var(--octopus-border-radius);
+  width: var(--octopus-image-size);
 }
 </style>

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

@@ -17,7 +17,7 @@
     :player-responsive="true"
   >
     <template #list>
-      <div class="podcast-list">
+      <div class="octopus-element-list">
         <ClassicLazy
           v-for="p in displayArray"
           :key="p.participantId"

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

@@ -1,5 +1,5 @@
 <template>
-  <article class="emission-item-container">
+  <article class="classic-element-container">
     <router-link
       :to="{
         name: 'playlist',
@@ -8,16 +8,16 @@
       :title="$t('Playlist name page', { name: name })"
       class="d-flex flex-grow-1 text-dark"
     >
-      <div class="emission-item-text">
+      <div class="classic-element-text">
         <div v-if="!activePlaylist" class="sticker-empty-ressource">
           {{ $t("Empty playlist") }}
         </div>
-        <div class="d-flex align-items-center emission-name">
+        <div class="d-flex align-items-center element-name basic-line-clamp">
           {{ name }}
         </div>
         <div
           ref="descriptionPlaylistContainer"
-          class="emission-description html-wysiwyg-content"
+          class="element-description html-wysiwyg-content"
         >
           <!-- eslint-disable vue/no-v-html -->
           <div ref="descriptionPlaylist" v-html="urlify(description)" />
@@ -84,8 +84,33 @@ export default defineComponent({
     const playlistDescContainer = this.$refs
       .descriptionPlaylistContainer as HTMLElement;
     if (playlistDesc?.clientHeight > playlistDescContainer?.clientHeight) {
-      playlistDescContainer.classList.add("after-emission-description");
+      playlistDescContainer.classList.add("after-element-description");
     }
   },
 });
 </script>
+<style lang="scss">
+.octopus-app .sticker-empty-ressource{
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  align-self: center;
+  background: var(--octopus-tertiary);
+  padding: 0.5rem;
+  transition: all 0.5s ease;
+  color: var(--octopus-color-on-primary);
+  font-size: 0.6rem;
+  font-weight: bold;
+  letter-spacing: 1px;
+  box-shadow: 10px 10px 34px -15px var(--octopus-shadow);
+  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+  border: solid 2px var(--octopus-color-text);
+  cursor: auto;
+
+  &:hover {
+    box-shadow: 2px 8px 4px -6px var(--octopus-shadow);
+    background: var(--octopus-primary);
+  }
+}
+</style>
+