@saooti/octopus-sdk 41.0.19 → 41.0.21

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # CHANGELOG
 
+## 41.0.21 (25/11/2025)
+
+**Fixes**
+
+- Correction affichage durée quand il n'y a pas de décimales
+
+**Misc**
+
+- Amélioration affichage bouton PlayPodcast
+
+## 41.0.20 (21/11/2025)
+
+**Features**
+
+- `durationHelper.convertTimestamptoString` accepte les nanosecondes
+
+**Fixes**
+
+- Bannière 'en cours de traitement' ne s'affiche que pour la consultation d'épisode
+
+**Misc**
+
+- Ajout de slots sur `ClassicRadio`
+- Correction d'un warning sur `SwiperList`
+- Mise à jour des dépendances
+
 ## 41.0.19 (13/11/2025)
 
 **Features**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.0.19",
+  "version": "41.0.21",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -18,47 +18,47 @@
   "dependencies": {
     "@multiformats/murmur3": "^2.1.8",
     "@popperjs/core": "^2.11.8",
-    "@stomp/stompjs": "^7.1.1",
-    "@tato30/vue-pdf": "^1.11.3",
-    "@tiptap/extension-hard-break": "^2.14.0",
-    "@tiptap/extension-link": "^2.14.0",
-    "@tiptap/extension-text-style": "^2.14.0",
-    "@tiptap/extension-underline": "^2.14.0",
-    "@tiptap/starter-kit": "^2.14.0",
-    "@tiptap/vue-3": "^2.14.0",
-    "@vuepic/vue-datepicker": "^11.0.2",
-    "@vueuse/core": "^13.3.0",
-    "autoprefixer": "^10.4.21",
-    "axios": "^1.9.0",
-    "dayjs": "^1.11.13",
-    "emoji-mart-vue-fast": "^15.0.4",
+    "@stomp/stompjs": "^7.2.1",
+    "@tato30/vue-pdf": "^1.11.5",
+    "@tiptap/extension-hard-break": "^2.27.1",
+    "@tiptap/extension-link": "^2.27.1",
+    "@tiptap/extension-text-style": "^2.27.1",
+    "@tiptap/extension-underline": "^2.27.1",
+    "@tiptap/starter-kit": "^2.27.1",
+    "@tiptap/vue-3": "^2.27.1",
+    "@vuepic/vue-datepicker": "^11.0.3",
+    "@vueuse/core": "^13.9.0",
+    "autoprefixer": "^10.4.22",
+    "axios": "^1.13.2",
+    "dayjs": "^1.11.19",
+    "emoji-mart-vue-fast": "^15.0.5",
     "express": "^5.1.0",
-    "globals": "^16.2.0",
-    "hls.js": "^1.6.5",
-    "humanize-duration": "^3.33.0",
-    "pinia": "^3.0.3",
+    "globals": "^16.5.0",
+    "hls.js": "^1.6.14",
+    "humanize-duration": "^3.33.1",
+    "pinia": "^3.0.4",
     "postcss-html": "^1.8.0",
     "qrcode.vue": "^3.6.0",
-    "sass": "^1.89.2",
+    "sass": "^1.94.1",
     "sockjs-client": "^1.6.1",
-    "stylelint": "^16.20.0",
+    "stylelint": "^16.25.0",
     "stylelint-config-recommended-scss": "^15.0.1",
-    "stylelint-config-recommended-vue": "^1.6.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard": "^38.0.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-gamut": "^1.3.4",
-    "swiper": "^11.2.8",
-    "typescript-eslint": "^8.34.0",
-    "video.js": "^8.23.3",
+    "swiper": "^11.2.10",
+    "typescript-eslint": "^8.47.0",
+    "video.js": "^8.23.6",
     "videojs-quality-selector-hls": "^1.1.1",
-    "vite": "^6.3.5",
+    "vite": "^6.4.1",
     "vite-bundle-visualizer": "^1.2.1",
-    "vue": "^3.5.16",
-    "vue-i18n": "^11.1.5",
+    "vue": "^3.5.24",
+    "vue-i18n": "^11.1.12",
     "vue-material-design-icons": "^5.3.1",
     "vue-recaptcha": "^2.0.3",
-    "vue-router": "^4.5.1",
+    "vue-router": "^4.6.3",
     "vue-select": "^4.0.0-beta.6",
     "vue3-lazyload": "^0.3.8",
     "vue3-swatches": "^1.2.4"
@@ -67,9 +67,9 @@
     "@types/sockjs-client": "^1.5.4",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-vue": "^5.2.4",
-    "eslint": "^9.28.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-vue": "^9.33.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3"
   },
   "postcss": {
     "plugins": {

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

@@ -5,9 +5,11 @@
         :key="manualReload"
         :slides-per-view="numberItem"
         :space-between="0"
-        :loop="true"
+        :loop="loop"
         :slides-offset-before="offsetSwiper"
         :slides-offset-after="offsetSwiper"
+        :allow-slide-next="loop"
+        :allow-slide-prev="loop"
         :navigation="true"
         :modules="modules"
         @slides-updated="slidesUpdated"
@@ -44,7 +46,6 @@ const props = defineProps({
  
 //Data 
 const manualReload = ref(0);
-const modules = ref([Navigation]);
 const numberItem = ref(5);
 const offsetSwiper = ref(40);
 const widthSwiperUsable = ref(0);
@@ -71,6 +72,18 @@ const sizeItem = computed(() => {
 });
 const itemRecalculizedSize = computed(() => widthSwiperUsable.value / numberItem.value);
 
+/** Indicates that the swiper should loop */
+const loop = computed((): boolean => {
+  return (props.listObject.length > numberItem.value);
+});
+
+const modules = computed(() => {
+  if (loop.value === true) {
+    return [Navigation];
+  } else {
+    return [];
+  }
+});
 
 //Watch
 watch(windowWidth, () => onWindowResize());

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

@@ -47,7 +47,6 @@
             <PodcastItem
               v-if="0 !== p.podcastId"
               :podcast="p"
-              :in-list="true"
             />
 
             <template #preview>

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

@@ -47,7 +47,7 @@
       :podcast="podcast"
       :hide-play="hidePlay"
       :fetch-conference="fetchConference"
-      :in-list="inList"
+      :show-processing="isAuthenticated"
     />
     <button
       v-if="displayDescription && isMobile"
@@ -69,6 +69,7 @@ import { Conference } from "@/stores/class/conference/conference";
 import {useImageProxy} from "../../composable/useImageProxy";
 import { computed, onBeforeMount, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { useAuthStore } from "../../../stores/AuthStore";
 
 //Props 
 const props = defineProps({
@@ -77,9 +78,7 @@ const props = defineProps({
   displayDescription: { default: false, type: Boolean },
   arrowDirection: { default: "up", type: String },
   isAnimatorLive: { default: false, type: Boolean },
-  fetchConference: { default: undefined, type: Object as () => Conference },
-  /** Indicates that the podcast is displayed in a list */
-  inList: { default: false, type: Boolean }
+  fetchConference: { default: undefined, type: Object as () => Conference }
 })
 
 //Emits
@@ -92,6 +91,7 @@ const isMobile = ref(false);
 //Composables
 const { t } = useI18n();
 const { useProxyImageUrl } = useImageProxy();
+const { isAuthenticated } = useAuthStore();
 
 //Computed
 const mainRubrique = computed(() => {

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

@@ -10,7 +10,6 @@
       :display-description="0 !== description.length"
       :arrow-direction="arrowDirection"
       :fetch-conference="fetchConference"
-      :in-list="inList"
       @hide-description="hideDescription"
       @show-description="showDescription"
     />
@@ -50,9 +49,7 @@ import { Conference } from "@/stores/class/conference/conference";
 //Props 
 const props = defineProps({
   podcast: { default: () => ({}), type: Object as () => Podcast },
-  fetchConference: { default: undefined, type: Object as () => Conference },
-  /** Indicates that the podcast is displayed in a list */
-  inList: { default: false, type: Boolean }
+  fetchConference: { default: undefined, type: Object as () => Conference }
 });
 
 //Data 

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

@@ -35,7 +35,6 @@
           <PodcastItem
             v-if="0 !== p.podcastId"
             :podcast="p"
-            in-list
           />
           <template #preview>
             <router-link

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

@@ -25,6 +25,7 @@
             : '',
         ]"
         class="me-3"
+        show-processing
         :hide-play="isLiveReadyToRecord"
         :podcast="podcast"
         :playing-podcast="playingPodcast"

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

@@ -33,7 +33,7 @@
           <PodcastIsPlaying v-if="playingPodcast && !playerStore.playerVideo" />
           <time
             v-if="!isVideoPodcast"
-            class="ms-1"
+            class="ms-1 me-2"
             :datetime="durationIso"
           >
             {{ durationString }}
@@ -53,7 +53,7 @@
           />
           <PodcastIsPlaying v-if="playingPodcast && playerStore.playerVideo" />
           <time
-            class="ms-2"
+            class="ms-2 me-2"
             :datetime="durationIso"
           >
             {{ durationString }}
@@ -93,7 +93,6 @@ import DurationHelper from "../../../helper/durationHelper";
 import { state } from "../../../stores/ParamSdkStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Conference } from "@/stores/class/conference/conference";
-import { useAuthStore } from "../../../stores/AuthStore";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { computed, defineAsyncComponent, ref } from "vue";
 import dayjs from "dayjs";
@@ -110,8 +109,8 @@ const props = defineProps({
   hidePlay: { default: false, type: Boolean },
   fetchConference: { default: undefined, type: Object as () => Conference },
   justButtons: { default: false, type: Boolean },
-  /** Indicates that the podcast is displayed in a list */
-  inList: { default: false, type: Boolean }
+  /** Indicates that the processing status of the episode may be shown */
+  showProcessing: { default: false, type: Boolean }
 })
 
 
@@ -120,7 +119,6 @@ const hoverType = ref("");
 
 //Composables
 const { t } = useI18n();
-const authStore = useAuthStore();
 const playerStore = usePlayerStore();
 const router = useRouter();
 
@@ -174,7 +172,7 @@ const classicPodcastPlay = computed(() => {
 });
 
 const displayBanner = computed(() => {
-  return !classicPodcastPlay.value || ("PROCESSING" === props.podcast.processingStatus && !props.inList);
+  return !classicPodcastPlay.value || ("PROCESSING" === props.podcast.processingStatus && props.showProcessing);
 });
 
 const iconName = computed(() => {

package/src/components/form/ClassicInputText.vue

@@ -151,6 +151,7 @@ const props = defineProps({
   errorText: { default: "", type: String },
   isTextarea: { default: false, type: Boolean },
   isWysiwyg: { default: false, type: Boolean },
+  /** A regex checked against the input, if the input doesn't match mark it with error */
   regex: { default: undefined, type: RegExp },
   canBeNull: { default: false, type: Boolean },
   inputMaxLengthField: { default: undefined, type: Number },

package/src/components/form/ClassicRadio.vue

@@ -1,3 +1,12 @@
+<!--
+  Simple component to display radio buttons.
+
+  Available slots:
+    `label-{option.value}`: Slot to replace the label of the current option.
+                            Binding: `option`: the current option
+    `after-{option.value}`: Slot after the radio button
+                            Binding: `option`: the current option
+-->
 <template>
   <div role="radiogroup" class="d-flex" :class="isColumn ? 'flex-column' : ''">
     <div
@@ -14,23 +23,30 @@
         :value="option.value"
         :disabled="isDisabled"
         @input="onChange($event.target.value)"
-      />
-      <label class="c-hand" :for="idRadio + option.value">{{
-        option.title
-      }}</label>
+      >
+      <label class="c-hand" :for="idRadio + option.value">
+        <slot :name="'label-' + option.value" v-bind="slotBindings(option)">{{ option.title }}</slot>
+      </label>
+
+      <slot :name="'after-' + option.value" v-bind="slotBindings(option)" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 
+interface Option {
+  title: string;
+  value: string | undefined
+};
+
 //Props 
-defineProps({
+const { textInit } = defineProps({
   idRadio: { default: "", type: String },
   isDisabled: { default: false, type: Boolean },
   options: {
     default: () => [],
-    type: Array as () => Array<{ title: string; value: string | undefined }>,
+    type: Array as () => Array<Option>,
   },
   textInit: { default: undefined, type: String },
   isColumn: { default: true, type: Boolean },
@@ -44,4 +60,11 @@ function onChange(value:string){
   emit('update:textInit', value)
 }
 
+function slotBindings(option: Option): { option: Option; selected: boolean } {
+  return {
+    option,
+    selected: textInit === option.value
+  }
+}
+
 </script>

package/src/components/misc/ClassicPopover.vue

@@ -65,7 +65,7 @@ const popoverRef = useTemplateRef('popover');
 
 
 //Composables
-const router= useRouter();
+const router = useRouter();
 
 //Computed
 const popoverId = computed(() => "popover" + props.target);

package/src/components/pages/EmissionPage.vue

@@ -238,11 +238,6 @@ async function getEmissionDetails(): Promise<void> {
   loaded.value = false;
   error.value = false;
   try {
-    const reponse = await classicApi.fetchData<Emission>({
-      api: 0,
-      path: "emission/" + props.emissionId,
-    });
-    console.log(reponse);
     emission.value = await classicApi.fetchData<Emission>({
       api: 0,
       path: "emission/" + props.emissionId,

package/src/helper/durationHelper.ts

@@ -1,32 +1,56 @@
-export default {
-  convertTimestamptoSeconds(timestamp: string) {
-    timestamp = "00:00:00".substring(0, 8 - timestamp.length) + timestamp;
-    const [hours, minutes, seconds] = timestamp.split(":");
-    return Number(hours) * 60 * 60 + Number(minutes) * 60 + Number(seconds);
-  },
-  formatToString(value: number) {
+
+const TIMESTAMP_REGEX = /(?:(\d{1,2}):)?([0-5]?\d):([0-5]\d)(?:.(\d{3}))?$/;
+
+/**
+ * Convert a timestamp to seconds
+ */
+function convertTimestamptoSeconds(timestamp: string): number|null {
+    const matches = timestamp.match(TIMESTAMP_REGEX);
+    if (matches) {
+        const [, hours, minutes, seconds, nanoseconds] = matches;
+        return Number(hours ?? 0) * 60 * 60 + Number(minutes ?? 0) * 60 + Number(seconds ?? 0) + Number(nanoseconds ?? 0) / 1000;
+    } else {
+        return null;
+    }
+}
+
+function formatToString(value: number) {
     if (value < 10) {
-      return "0" + value;
+        return "0" + value;
     }
     return value.toString();
-  },
-  formatDuration(
+}
+
+function formatDuration(
     totalSeconds: number | null,
     separator = ":",
     isLast = false,
-  ): string {
+): string {
     if (null === totalSeconds) {
-      return "00:00";
+        return "00:00";
     }
     const hours = Math.floor(totalSeconds / 3600);
     const minutes = Math.floor((totalSeconds - hours * 3600) / 60);
     const seconds = totalSeconds - hours * 3600 - minutes * 60;
+
+    // In case seconds have decimal, round to 3 decimals, otherwise do not use decimals
+    const secondsStr = Math.round(seconds) == seconds ?
+        this.formatToString(seconds) :
+        this.formatToString(seconds.toFixed(3));
+
     return (
-      (hours > 0 ? this.formatToString(hours) + separator : "") +
-      this.formatToString(minutes) +
-      separator +
-      this.formatToString(seconds) +
-      (isLast ? separator : "")
+        (hours > 0 ? this.formatToString(hours) + separator : "") +
+        this.formatToString(minutes) +
+        separator +
+        secondsStr +
+        (isLast ? separator : "")
     );
-  },
-};
+}
+
+export default {
+    TIMESTAMP_REGEX,
+
+    convertTimestamptoSeconds,
+    formatDuration,
+    formatToString
+}

package/src/stores/AuthStore.ts

@@ -50,6 +50,10 @@ export const useAuthStore = defineStore("AuthStore", {
     authVideoConfig: { active: false },
   }),
   getters: {
+    /** Indicates that the user is authenticated */
+    isAuthenticated(): boolean {
+      return this.authParam.accessToken !== undefined;
+    },
     isRoleAdmin(): boolean {
       return this.authRole.includes("ADMIN");
     },

package/src/style/general.scss

@@ -62,26 +62,30 @@ main, #app{
 
   /** Flex style */
   .d-flex-low-importance{
-		display: flex;
-	}
+    display: flex;
+  }
 
   .d-flex-column{
-		display: flex;
-		flex-direction: row;
+    display: flex;
+    flex-direction: row;
 
-		@media (width <= 960px) {
-			flex-direction: column;
-		}
-	}
+    @media (width <= 960px) {
+      flex-direction: column;
+    }
+  }
 
   .d-flex-row{
-		display: flex;
-		flex-direction: column;
+    display: flex;
+    flex-direction: column;
 
-		@media (width <= 960px) {
-			flex-flow: row wrap;
-		}
-	}
+    @media (width <= 960px) {
+      flex-flow: row wrap;
+    }
+  }
+
+  .justify-space-between {
+    justify-content: space-between;
+  }
 
 
   @media (width <= 960px) {