@saooti/octopus-sdk 39.3.11 → 39.3.13

package/index.ts

@@ -73,6 +73,7 @@ export const getSearchOrder = () => import("./src/components/display/filter/Sear
 export const getClassicSearch = () => import("./src/components/form/ClassicSearch.vue");
 export const getClassicCheckbox = () => import("./src/components/form/ClassicCheckbox.vue");
 export const getClassicRadio = () => import("./src/components/form/ClassicRadio.vue");
+export const getClassicRadioLabel = () => import("./src/components/form/ClassicRadioLabel.vue");
 export const getClassicLoading = () => import("./src/components/form/ClassicLoading.vue");
 export const getClassicSelect = () => import("./src/components/form/ClassicSelect.vue");
 export const getClassicDatePicker = () => import("./src/components/form/ClassicDatePicker.vue");

package/package.json

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

package/src/App.vue

@@ -2,13 +2,15 @@
   <div class="d-flex flex-column h-100 octopus-app">
     <template v-if="pageFullyLoad">
       <TopBar :is-education="false" />
-      <CategoryFilter v-if="firstDisplayCategoryFilter" />
-      <div v-else class="category-filter-no-filter" />
-      <router-view />
+      <main>
+        <CategoryFilter v-if="firstDisplayCategoryFilter" />
+        <div v-else class="category-filter-no-filter" />
+        <router-view />
+        <PlayerComponent />
+      </main>
       <ClassicLazy :min-height="123">
         <FooterOctopus />
       </ClassicLazy>
-      <PlayerComponent />
     </template>
   </div>
 </template>
@@ -78,6 +80,7 @@ export default defineComponent({
       },
     },
     "$i18n.locale"() {
+      this.updateMetaTitle();
       this.$forceUpdate();
       this.reload = !this.reload;
     },

package/src/api/classicApi.ts

@@ -1,6 +1,6 @@
 import {getApiUrl, ModuleApi} from "./apiConnection";
 import fetchHelper from "../helper/fetch";
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import { FetchParam } from "@/stores/class/general/fetchParam";
 import { state } from "../stores/ParamSdkStore";
 
@@ -77,7 +77,8 @@ export default {
       if(params.catchFunction){
         params.catchFunction();
       }else{
-        return Promise.reject(error);
+        const axiosError= error as AxiosError;
+        return Promise.reject(new Error(axiosError.message));
       }
     });
     return response?.data;

package/src/assets/general.scss

@@ -250,6 +250,9 @@ body{
   .border{
 		border-radius: octopusVariables.$octopus-borderradius;
 	}
+  .li-style-none{
+    list-style: none;
+  }
 
   .html-wysiwyg-content{
     h3,h4{

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

@@ -4,7 +4,9 @@
     ref="selectCategory"
     :option-chosen="model"
     option-label="name"
-    :label="$t('By category')"
+    :displayLabel="displayLabel"
+    :label="label ?? $t('By category')"
+    :textDanger="textDanger"
     :placeholder="$t('Type string to filter by categories')"
     :max-element="maxElement"
     :in-modal="inModal"
@@ -45,6 +47,9 @@ export default defineComponent({
     },
     inModal: { default: false, type: Boolean },
     noDeselect: { default: true, type: Boolean },
+    label:{default: undefined, type: String },
+    displayLabel: { default: false, type: Boolean },
+    textDanger :{ default: undefined, type: String },
   },
   emits: [
     "update:categorySelected",

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

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <section
     v-show="isHeaderDisplay"
     class="header-img flex-column justify-content-end"
     :style="backgroundDisplay"
@@ -62,8 +62,8 @@
         :rubriquages="rubriquageFilter"
       />
     </div>
-  </div>
-  <div v-if="!isDisplay" class="category-filter-no-filter" />
+  </section>
+  <section v-if="!isDisplay" class="category-filter-no-filter" />
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="displayCommentSection" class="module-box">
+  <section v-show="displayCommentSection" class="module-box">
     <div class="d-flex align-items-center">
       <h3 class="mb-0 me-2">{{ $t("Podcast's comments") }}</h3>
       <button
@@ -23,7 +23,7 @@
       :config="configPodcast"
       :event-to-handle="eventToHandle"
     />
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -1,14 +1,11 @@
 <template>
   <div class="d-flex flex-column w-100">
     <div class="d-flex align-items-center h6 mb-2">
-      <strong
+      <button
         :id="'popover-comment' + comment.commentId"
-        role="button"
-        tabindex="-1"
         :class="isValidComment ? 'c-hand-auto' : 'text-danger'"
-        class="me-2"
-        >{{ username }}</strong
-      >
+        class="btn-transparent me-2"
+        >{{ username }}</button>
       <ClassicPopover
         :disable="isValidComment"
         :target="'popover-comment' + comment.commentId"

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

@@ -14,6 +14,7 @@
         height="250"
         class="img-box"
         role="presentation"
+        alt=""
         :title="$t('Emission name image', { name: emission.name })"
       />
       <div class="emission-item-text">

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

@@ -17,6 +17,7 @@
           width="330"
           height="330"
           role="presentation"
+          alt=""
           :title="$t('Emission name image', { name: emission.name })"
           class="img-box rounded-0"
         />

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

@@ -19,6 +19,7 @@
         :class="isVertical ? 'img-box-bigger' : ''"
         class="img-box"
         role="presentation"
+        alt=""
         :title="$t('Emission name image', { name: emission.name })"
       />
       <div class="emission-item-text">

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

@@ -190,12 +190,10 @@ export default defineComponent({
     },
     searchPattern(value: string): void {
       const search = value.trim();
-      const valSort =
-        search.length > 3
-          ? "SCORE"
-          : this.isEmission
-            ? "LAST_PODCAST_DESC"
-            : "DATE";
+      let valSort = "SCORE"
+      if(search.length <= 3){
+        valSort = this.isEmission? "LAST_PODCAST_DESC" : "DATE";
+      }
       if (valSort !== this.sort) {
         this.$emit("update:sort", valSort);
       }

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

@@ -1,23 +1,20 @@
 <template>
-  <div class="d-flex flex-column">
-    <div class="text-primary mb-2">
-      {{ $t("Sort") }}
-    </div>
-    <ClassicRadio
-      :text-init="sort"
-      id-radio="sort-radio"
-      :options="optionsArray"
-      @update:text-init="$emit('update:sort', $event)"
-    />
-  </div>
+  <ClassicRadioLabel
+    :text-init="sort"
+    id-radio="sort-radio"
+    :options="optionsArray"
+    :radioLabel="$t('Sort')"
+    classLabel="text-primary mb-2"
+    @update:text-init="$emit('update:sort', $event)"
+  />
 </template>
 
 <script lang="ts">
-import ClassicRadio from "../../form/ClassicRadio.vue";
+import ClassicRadioLabel from "../../form/ClassicRadioLabel.vue";
 import { defineComponent } from "vue";
 export default defineComponent({
   components: {
-    ClassicRadio,
+    ClassicRadioLabel,
   },
   props: {
     isEmission: { default: false, type: Boolean },

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

@@ -103,7 +103,6 @@ export default defineComponent({
 
   methods: {
     slidesUpdated() {
-      //TODO CODE USELESS IF LIBRARY IS FIXED BUT FOR NOW IT IS IMPORTANT
       if (!this.$el) return;
       const slides = this.$el.getElementsByClassName("swiper-slide");
       for (const slide of slides) {

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="displayLiveList" class="d-flex flex-column align-items-start mt-3">
+  <section v-if="displayLiveList" class="d-flex flex-column align-items-start mt-3">
     <div
       class="d-flex justify-content-between flex-grow-1 mb-3 w-100 align-items-center"
     >
@@ -39,7 +39,7 @@
         </template>
       </SwiperList>
     </template>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -21,6 +21,7 @@
         height="80"
         class="small-img-box"
         role="presentation"
+        alt=""
         :title="$t('Episode name image', { name: podcastRadio.title })"
       />
       <div>{{ podcastRadio.title }}</div>

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

@@ -11,6 +11,7 @@
       width="270"
       height="270"
       role="presentation"
+      alt=""
       class="img-box img-box-podcast"
       :title="$t('Canal name image', { name: radio.name })"
     />

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

@@ -1,5 +1,5 @@
 <template>
-  <div
+  <section
     v-if="(filterOrgaId || organisationId) && radio.length"
     class="d-flex flex-column align-items-start mt-3"
   >
@@ -13,7 +13,7 @@
         :radio="radioItem"
       />
     </template>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="module-box">
+  <section class="module-box">
     <h2 class="mb-3">
       {{ $t("Program") }}
     </h2>
@@ -83,6 +83,7 @@
                     height="150"
                     class="m-2 program-item-img"
                     role="presentation"
+                    alt=""
                     :title="
                       $t('Episode name image', {
                         name: planningItem.podcastData.title,
@@ -109,7 +110,7 @@
         </template>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -4,7 +4,8 @@
     id="organisation-chooser"
     ref="selectOrganisation"
     option-label="name"
-    :label="$t('select productor')"
+    :label="label ??$t('select productor')"
+    :display-label="displayLabel"
     :max-element="maxElement"
     :width="width"
     :in-modal="inModal"
@@ -26,6 +27,7 @@
           height="32"
           class="me-2"
           role="presentation"
+          alt=""
           :title="$t('Organisation name image', { name: option.name })"
         />
         <span>
@@ -63,6 +65,8 @@ export default defineComponent({
     isImage: { default: true, type: Boolean },
     inModal: { default: false, type: Boolean },
     noDeselect: { default: true, type: Boolean },
+    label:{default: undefined, type: String },
+    displayLabel: { default: false, type: Boolean },
   },
   emits: ["selected"],
   data() {

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

@@ -13,6 +13,7 @@
         width="200"
         height="200"
         role="presentation"
+        alt=""
         :title="$t('Animator image', { name: name })"
         class="img-box border"
       />

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

@@ -39,6 +39,7 @@
         width="250"
         height="250"
         role="presentation"
+        alt=""
         :title="$t('Playlist name image', { name: name })"
         class="img-box"
       />

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

@@ -7,32 +7,6 @@
     >
       <DownloadIcon />
     </button>
-    <!-- <template v-else>
-      <button
-        id="download-podcast-or-video"
-        class="btn btn-round-light ms-2"
-        :title="$t('Download')"
-      />
-      <ClassicPopover
-        target="download-podcast-or-video"
-        relative-class="page-element"
-        :is-fixed="true"
-        :only-click="true"
-      >
-        <button
-          class="octopus-dropdown-item btn-transparent"
-          @mousedown="downloadPodcast"
-        >
-            {{ $t("Download audio") }}
-        </button>
-        <button
-          class="octopus-dropdown-item btn-transparent"
-          @mousedown="downloadVideo"
-        >
-            {{ $t("Download video") }}
-        </button>
-      </ClassicPopover>
-    </template> -->
   </div>
 </template>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="py-3">
+  <section class="py-3">
     <h3 class="mb-2">
       {{ titleFilter }}
     </h3>
@@ -31,7 +31,7 @@
       :display-sort-text="false"
       @fetch="fetch"
     />
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -8,6 +8,7 @@
       width="270"
       height="270"
       role="presentation"
+      alt=""
       class="img-box img-box-podcast"
       :title="$t('Episode name image', { name: podcast.title })"
     />

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="podcast" class="module-box">
+  <section v-if="podcast" class="module-box">
     <div class="mb-2 d-flex">
       <div class="w-100">
         <PodcastImage
@@ -137,7 +137,7 @@
       :display-studio-access="isDebriefing"
       @validate-podcast="$emit('updatePodcast', $event)"
     />
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -12,21 +12,21 @@
       class="tag-list-element"
       :class="ouestFranceMainTag === tag ? 'main-of-tag' : ''"
     >
-      <div
+      <button
         :id="'tag-list-from-podcast-page' + index"
-        role="button"
-        class="d-flex align-items-center"
+        class="btn-transparent d-flex align-items-center"
       >
         <img
           v-if="isOuestFranceTag(tag)"
           width="20"
           height="20"
           class="ouest-france-logo"
-          aria-hidden="true"
-          src="/img/ouest_france_logo.svg"
+          role="presentation"
+          alt=""
+          src="/img/ouest_france_logo.svg" 
         />
         {{ formateOfTag(tag) }}
-      </div>
+      </button>
       <ClassicPopover
         v-if="isOuestFranceTag(tag)"
         :target="'tag-list-from-podcast-page' + index"

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="podcast" class="d-flex flex-column flex-grow-1 mt-2">
+  <section v-if="podcast" class="d-flex flex-column flex-grow-1 mt-2">
     <div class="d-flex justify-content-between flex-wrap">
       <div v-if="0 !== date.length" class="me-2">
         {{ date }}
@@ -19,7 +19,7 @@
     <ParticipantDescription :participants="podcast.animators" />
     <ParticipantDescription :participants="podcast.guests" :is-guest="true" />
     <PodcastRawTranscript class="mt-3" :podcast-id="podcast.podcastId" />
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!isLoading && (authOrgaId || !noSharing)" class="module-box">
+  <section v-if="!isLoading && (authOrgaId || !noSharing)" class="module-box">
     <div class="share-buttons-display">
       <div v-if="!isGarRole && !noSharing" class="d-flex flex-column me-2">
         <h3 class="mb-2">
@@ -122,7 +122,7 @@
         position="bottom-left"
       />
     </div>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="module-box">
+  <section class="module-box">
     <h2 class="mb-3">
       {{ $t("Distribute") }}
     </h2>
@@ -32,7 +32,7 @@
       ref="snackbar"
       position="bottom-left"
     />
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="module-box overflow-visible">
+  <section class="module-box overflow-visible">
     <div class="d-flex justify-content-between align-items-center">
       <h3 class="mb-3">
         {{ $t("Embed") }}
@@ -83,7 +83,7 @@
     <div v-else-if="!authenticated">
       {{ $t("Only authenticated members can share the content") }}
     </div>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="module-box overflow-visible">
+  <section class="module-box overflow-visible">
     <h2 class="mb-3">
       {{ $t("Embed") }}
     </h2>
@@ -35,7 +35,7 @@
         </button>
       </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">

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

@@ -1,23 +1,24 @@
 <template>
-  <label for="iframe-select" title="select miniplayer" />
-  <select
-    id="iframe-select"
-    :value="iFrameModel"
-    @change="selectChange($event)"
-  >
-    <template v-for="option in optionsSelect" :key="option.value">
-      <option v-if="option.condition" :value="option.value">
-        {{ option.name }}
-      </option>
-    </template>
-    <option
-      v-for="player in customPlayersDisplay"
-      :key="player.customId"
-      :value="player.customId"
+  <label for="iframe-select" title="select miniplayer" >
+    <select
+      id="iframe-select"
+      :value="iFrameModel"
+      @change="selectChange($event)"
     >
-      {{ $t("Custom version") + " «" + player.name + "»" }}
-    </option>
-  </select>
+      <template v-for="option in optionsSelect" :key="option.value">
+        <option v-if="option.condition" :value="option.value">
+          {{ option.name }}
+        </option>
+      </template>
+      <option
+        v-for="player in customPlayersDisplay"
+        :key="player.customId"
+        :value="player.customId"
+      >
+        {{ $t("Custom version") + " «" + player.name + "»" }}
+      </option>
+    </select>
+  </label>
 </template>
 
 <script lang="ts">

package/src/components/form/ClassicCheckbox.vue

@@ -12,10 +12,10 @@
         @input="$emit('update:textInit', !textInit)"
         @click="emitClickAction"
       />
-      <div
+      <button
         v-if="isSwitch"
-        class="slider"
-        tabindex="0"
+        class="slider btn-transparent"
+        :title="label"
         @click="clickSlider"
         @keydown.space.prevent="clickSlider"
       />

package/src/components/form/ClassicMultiselect.vue

@@ -27,6 +27,7 @@
       "
       :filter="fakeSearch"
       :selectable="() => !maxOptionsSelected"
+      :class="{ 'border border-danger': textDanger?.length }"
       @open="onSearch"
       @search="onSearch"
       @close="onClose"
@@ -67,6 +68,9 @@
         <ChevronDownIcon v-bind="attributes" />
       </template>
     </vSelect>
+    <div v-if="textDanger" class="text-danger">
+      {{ textDanger }}
+    </div>
   </div>
 </template>
 
@@ -96,6 +100,7 @@ export default {
     displayLabel: { default: false, type: Boolean },
     maxOptions: { default: null, type: Number },
     allowEmpty: { default: true, type: Boolean },
+    textDanger :{ default: undefined, type: String },
   },
 
   emits: ["onSearch", "selected", "onClose"],