@saooti/octopus-sdk 37.0.18 → 37.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.18",
+  "version": "37.0.20",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -16,38 +16,38 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@saooti/octopus-api": "^0.36.0",
-    "@tiptap/extension-link": "^2.0.4",
-    "@tiptap/extension-underline": "^2.0.4",
-    "@tiptap/pm": "^2.0.4",
-    "@tiptap/starter-kit": "^2.0.4",
-    "@tiptap/vue-3": "^2.0.4",
+    "@tiptap/extension-link": "^2.1.6",
+    "@tiptap/extension-underline": "^2.1.6",
+    "@tiptap/pm": "^2.1.6",
+    "@tiptap/starter-kit": "^2.1.6",
+    "@tiptap/vue-3": "^2.1.6",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
-    "@vuepic/vue-datepicker": "^5.4.0",
-    "autoprefixer": "^10.4.14",
+    "@vuepic/vue-datepicker": "^6.0.1",
+    "autoprefixer": "^10.4.15",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "express": "^4.18.2",
-    "hls.js": "^1.4.9",
+    "hls.js": "^1.4.10",
     "humanize-duration": "^3.29.0",
-    "jest": "^29.6.1",
-    "pinia": "^2.1.4",
-    "qrcode.vue": "^3.4.0",
-    "sass": "^1.63.6",
+    "jest": "^29.6.2",
+    "pinia": "^2.1.6",
+    "qrcode.vue": "^3.4.1",
+    "sass": "^1.66.1",
     "sonarqube-scanner": "^3.0.0",
-    "swiper": "^10.0.4",
+    "swiper": "^10.2.0",
     "video.js": "^7.21.5",
     "videojs-contrib-quality-levels": "^2.2.1",
     "videojs-hls-quality-selector": "^1.1.4",
-    "vite": "^4.4.4",
+    "vite": "^4.4.9",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-recaptcha": "^2.0.3",
     "vue-router": "^4.2.4",
     "vue-select": "^4.0.0-beta.6",
-    "vue3-lazyload": "^0.3.6",
+    "vue3-lazyload": "^0.3.8",
     "vue3-swatches": "^1.2.3"
   },
   "devDependencies": {
@@ -56,10 +56,10 @@
     "@types/vue-select": "^3.16.2",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.3.2",
     "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "eslint": "^8.45.0",
+    "eslint": "^8.47.0",
     "eslint-plugin-vue": "^9.15.1",
     "typescript": "^5.1.6"
   },

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

@@ -64,7 +64,7 @@ import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { defineComponent } from "vue";
 import { AxiosError } from "axios";
 import imageProxy from "../../mixins/imageProxy";
-import resizePhone  from "../../mixins/resizePhone";
+import resizePhone from "../../mixins/resizePhone";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 export default defineComponent({
   name: "EmissionInlineList",
@@ -100,7 +100,7 @@ export default defineComponent({
       alignLeft: false as boolean,
       rubriques: undefined as Array<Rubrique> | undefined,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
 
@@ -132,7 +132,7 @@ export default defineComponent({
     sizeItem() {
       this.handleResize();
     },
-    windowWidth(){
+    windowWidth() {
       if (!this.$el) return;
       if (this.overflowScroll) {
         this.size = 20;
@@ -145,7 +145,7 @@ export default defineComponent({
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
       this.size = Math.floor(width / sixteen);
-    }
+    },
   },
 
   mounted() {

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

@@ -53,13 +53,12 @@
         </div>
         <ClassicCheckbox
           v-if="!isEmission"
-          :textInit="onlyVideo"
+          :text-init="onlyVideo"
           class="flex-shrink-0 mt-3"
           id-checkbox="only-video-checkbox"
           :label="$t('Show only episodes with video')"
-          @update:textInit="$emit('update:onlyVideo', $event)"
+          @update:text-init="$emit('update:onlyVideo', $event)"
         />
-        
       </div>
       <div class="d-flex flex-column">
         <div class="text-primary mb-2">
@@ -117,7 +116,7 @@ export default defineComponent({
     "includeHidden",
     "notValid",
     "updateRubriquageFilter",
-    "update:onlyVideo"
+    "update:onlyVideo",
   ],
   data() {
     return {

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

@@ -82,7 +82,7 @@ export default defineComponent({
   data() {
     return {
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {

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

@@ -1,7 +1,11 @@
 <template>
   <div class="position-relative w-100">
     <template v-if="!isPhone">
-      <button class="btn-transparent swiper-button-prev" v-show="isLoop" @click="slidePrevButton()"></button>
+      <button
+        v-show="isLoop"
+        class="btn-transparent swiper-button-prev"
+        @click="slidePrevButton()"
+      ></button>
       <swiper
         :slides-per-view="numberItem"
         :space-between="0"
@@ -14,7 +18,7 @@
         </swiper-slide>
       </swiper>
     </template>
-    <div class="element-list-inline" v-else>
+    <div v-else class="element-list-inline">
       <div v-for="(obj, index) in listObject" :key="obj">
         <slot name="octopusSlide" :option="obj" :index="index" />
       </div>
@@ -38,7 +42,7 @@ export default defineComponent({
     Swiper,
     SwiperSlide,
   },
-  mixins:[resizePhone],
+  mixins: [resizePhone],
 
   props: {
     listObject: { default: () => [], type: Array as () => Array<unknown> },
@@ -50,7 +54,7 @@ export default defineComponent({
       modules: [Navigation],
       numberItem: 5 as number,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {
@@ -65,21 +69,21 @@ export default defineComponent({
         ? state.generalParameters.podcastItem
         : 13.5;
     },
-    isLoop():boolean{
+    isLoop(): boolean {
       return this.listObject.length >= this.numberItem;
     },
   },
-  watch:{
-    windowWidth(){
+  watch: {
+    windowWidth() {
       if (!this.$el) return;
       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));
-    }
+    },
   },
 
   methods: {
-    slidePrevButton(){
+    slidePrevButton() {
       this.$el.querySelector(".swiper").swiper.slidePrev();
     },
   },

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

@@ -29,6 +29,7 @@ export default defineComponent({
   data() {
     return {
       live: undefined as Podcast | undefined,
+      watchInterval: undefined as ReturnType<typeof setTimeout> | undefined,
     };
   },
 
@@ -36,7 +37,14 @@ export default defineComponent({
     this.fetchPodcastData();
     this.watchStatus();
   },
+  unmounted() {
+    this.clearWatchStatus();
+  },
   methods: {
+    clearWatchStatus() {
+      clearInterval(this.watchInterval as unknown as number);
+      this.watchInterval = undefined;
+    },
     async fetchPodcastData(): Promise<void> {
       if (!this.fetchConference || !this.fetchConference.podcastId) return;
       try {
@@ -73,7 +81,8 @@ export default defineComponent({
           ...{ status: newStatus },
         });
       } else {
-        setTimeout(() => {
+        this.clearWatchStatus();
+        this.watchInterval = setTimeout(() => {
           this.watchStatus();
         }, 5000);
       }

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

@@ -88,7 +88,7 @@ export default defineComponent({
       direction: 1 as number,
       alignLeft: false as boolean,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {
@@ -124,7 +124,7 @@ export default defineComponent({
       this.reset();
       this.fetchContent();
     },
-    windowWidth(){
+    windowWidth() {
       if (!this.$el) return;
       if (this.overflowScroll) {
         this.size = 20;
@@ -137,7 +137,7 @@ export default defineComponent({
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.8);
       this.size = Math.floor(width / sixteen);
-    }
+    },
   },
 
   mounted() {

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

@@ -61,7 +61,7 @@
         {{ textVisible }}
       </div>
     </button>
-    <button 
+    <button
       v-if="isVideoPodcast"
       class="btn admin-button btn-play-video saooti-video"
       @click="play(true)"
@@ -107,10 +107,13 @@ export default defineComponent({
       "playerPodcast",
       "playerLive",
       "playerStatus",
-      "playerVideo"
+      "playerVideo",
     ]),
-    isVideoPodcast(): boolean{
-      return this.fetchConference?.videoProfile?.includes('video_') || undefined!==this.podcast.video?.videoId;
+    isVideoPodcast(): boolean {
+      return (
+        this.fetchConference?.videoProfile?.includes("video_") ||
+        undefined !== this.podcast.video?.videoId
+      );
     },
     playingPodcast() {
       return (
@@ -214,7 +217,6 @@ export default defineComponent({
         case "RECORDING":
           return this.$t("In live");
         case "DEBRIEFING":
-          /* if (!this.isAnimatorLive) return ''; */
           if ("READY_TO_RECORD" === this.podcast.processingStatus)
             return this.$t("Not recording");
           return this.$t("Debriefing");
@@ -261,17 +263,20 @@ export default defineComponent({
       if (this.isLiveToBeRecorded) {
         return;
       }
-      if (this.playingPodcast && isVideo===this.playerVideo) {
+      if (this.playingPodcast && isVideo === this.playerVideo) {
         this.playerChangeStatus("PLAYING" === this.playerStatus);
         return;
       }
       if (!this.recordingLive) {
         this.playerPlay(this.podcast, isVideo);
       } else {
-        this.playerPlay({
-          ...this.podcast,
-          ...{ conferenceId: this.fetchConference?.conferenceId },
-        }, isVideo);
+        this.playerPlay(
+          {
+            ...this.podcast,
+            ...{ conferenceId: this.fetchConference?.conferenceId },
+          },
+          isVideo,
+        );
       }
       if (this.clickPlayGoPage) {
         this.$router.push("/main/pub/podcast/" + this.podcast.podcastId);
@@ -319,13 +324,13 @@ export default defineComponent({
     background-color: rgba(255, 255, 255, 0.5);
   }
 
-  .btn.btn-play-video{
+  .btn.btn-play-video {
     position: absolute;
     bottom: 0;
     right: 0;
     margin: 0.5rem;
     background: $primaryColorLessTransparent !important;
-    color:white !important
+    color: white !important;
   }
 
   .image-play-button .play-button-error-icon {

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

@@ -99,7 +99,7 @@ export default defineComponent({
       direction: 1 as number,
       alignLeft: false as boolean,
       isPhone: false as boolean,
-      windowWidth: 0 as number
+      windowWidth: 0 as number,
     };
   },
   computed: {
@@ -142,7 +142,7 @@ export default defineComponent({
       this.reset();
       this.fetchNext();
     },
-    windowWidth(){
+    windowWidth() {
       if (!this.$el) return;
       if (this.overflowScroll) {
         this.size = 20;
@@ -155,7 +155,7 @@ export default defineComponent({
       const width = (this.$el as HTMLElement).offsetWidth;
       const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.8);
       this.size = Math.floor(width / sixteen);
-    }
+    },
   },
 
   created() {

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

@@ -77,7 +77,7 @@ export default defineComponent({
           icon: "saooti-google-podcasts",
           title: "Google Podcasts",
         },
-        {url:this.getUrl('iHeart'), icon:'saooti-iheart', title:'iHeart'},
+        { url: this.getUrl("iHeart"), icon: "saooti-iheart", title: "iHeart" },
         {
           url: this.getUrl("PlayerFM"),
           icon: "saooti-playerfm",

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

@@ -240,14 +240,15 @@ export default defineComponent({
     },
     iFrameHeight(): string {
       switch (this.iFrameModel) {
-        case "large":
-          if (this.podcast) return "210px";
-          return "350px";
-        case "emissionLarge":
-        case "largeSuggestion":
-          return "350px";
-        case "emission":
-          return "520px";
+        case 'large':
+          if (this.podcast) return '140px';
+          return '350px';
+        case 'largeMore':
+          return '210px';
+        case 'emissionLarge':
+        case 'largeSuggestion':
+          return '350px';
+        case 'emission':return '520px';
         default:
           return "530px";
       }

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

@@ -48,24 +48,13 @@ export default defineComponent({
   computed: {
     optionsSelect() {
       return [
-        { name: this.$t("Default version"), value: "default", condition: true },
-        { name: this.$t("Large version"), value: "large", condition: true },
-        {
-          name: this.$t("Emission version"),
-          value: "emission",
-          condition: this.podcast && this.podcast.podcastId,
-        },
-        {
-          name: this.$t("Large emission version"),
-          value: "emissionLarge",
-          condition: this.podcast && this.podcast.podcastId,
-        },
-        {
-          name: this.$t("Large suggestion version"),
-          value: "largeSuggestion",
-          condition: this.podcast && this.podcast.podcastId,
-        },
-      ];
+        {name: this.$t('Default version'), value: 'default', condition: true},
+        {name: this.$t('Large version'), value: 'large', condition: true},
+        {name: this.$t('Full Large version'), value: 'largeMore', condition: this.podcast && this.podcast.podcastId},
+        {name: this.$t('Emission version'), value: 'emission', condition: this.podcast && this.podcast.podcastId},
+        {name: this.$t('Large emission version'), value: 'emissionLarge', condition: this.podcast && this.podcast.podcastId},
+        {name: this.$t('Large suggestion version'), value: 'largeSuggestion', condition: this.podcast && this.podcast.podcastId}
+      ]
     },
     customPlayersDisplay(): Array<CustomPlayer> {
       return this.customPlayers.filter((player: CustomPlayer) => {

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

@@ -56,7 +56,12 @@ export default defineComponent({
           title: "Google Podcasts",
           url: this.getUrl("googlePodcasts"),
         },
-        {name:'iHeart', icon:"saooti-iheart",title:'iHeart', url : this.getUrl('iHeart')},
+        {
+          name: "iHeart",
+          icon: "saooti-iheart",
+          title: "iHeart",
+          url: this.getUrl("iHeart"),
+        },
         {
           name: "playerFm",
           icon: "saooti-playerfm",

package/src/components/form/ClassicDatePicker.vue

@@ -13,9 +13,9 @@
     :max-date="isMaxDate && !isTimePicker ? now : undefined"
     :min-date="isMinDate && !isTimePicker ? now : undefined"
     :range="undefined !== range"
-    :multi-calendars="columnNumber>1 ? columnNumber : false"
+    :multi-calendars="columnNumber > 1 ? columnNumber : false"
     :inline="columnNumber > 1"
-    :enable-time-picker="!isTimePicker ?displayTimePicker : undefined"
+    :enable-time-picker="!isTimePicker ? displayTimePicker : undefined"
     :aria-labels="ariaLabels"
     @update:model-value="$emit('updateDate', $event)"
   >
@@ -24,72 +24,85 @@
 
 <script lang="ts">
 import dayjs from "dayjs";
-import VueDatePicker from '@vuepic/vue-datepicker';
+import VueDatePicker from "@vuepic/vue-datepicker";
 import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     VueDatePicker,
   },
   props: {
-    time: { default:undefined, type: Object as () => {hours:number, minutes:number, seconds:number} },
+    time: {
+      default: undefined,
+      type: Object as () => { hours: number; minutes: number; seconds: number },
+    },
     date: { default: undefined, type: Date },
-    range: {default: undefined,type: Array as () => Array<Date>},
+    range: { default: undefined, type: Array as () => Array<Date> },
     isMaxDate: { default: false, type: Boolean },
     isMinDate: { default: false, type: Boolean },
     columnNumber: { default: 1, type: Number },
     displaySeconds: { default: false, type: Boolean },
-    displayTimePicker:{ default: true, type: Boolean },
-    isTimePicker:{ default: false, type: Boolean },
-    useTeleport:{ default: false, type: Boolean },
+    displayTimePicker: { default: true, type: Boolean },
+    isTimePicker: { default: false, type: Boolean },
+    useTeleport: { default: false, type: Boolean },
     templateClass: { default: undefined, type: String },
     readonly: { default: false, type: Boolean },
   },
 
   emits: ["updateDate", "update:date"],
   data() {
-    return {
-    };
+    return {};
   },
   computed: {
-    ariaLabels(){
+    ariaLabels() {
       return {
         input: this.date ? this.formatDate(this.date) : undefined,
-        day : (value: {value: Date}) => {return this.formatDate(value.value);}
-      }
+        day: (value: { value: Date }) => {
+          return this.formatDate(value.value);
+        },
+      };
     },
-    modelVal(){
+    modelVal() {
       return this.time ?? this.range ?? this.date;
     },
-    formatLocale(){
+    formatLocale() {
       return this.$i18n.locale;
     },
-    format(){
-      let timeString = '';
-      if(this.displayTimePicker || this.isTimePicker){
-        timeString ='HH:mm';
-        if(this.displaySeconds){
-          timeString ='HH:mm:ss';
-        } 
+    format() {
+      let timeString = "";
+      if (this.displayTimePicker || this.isTimePicker) {
+        timeString = "HH:mm";
+        if (this.displaySeconds) {
+          timeString = "HH:mm:ss";
+        }
       }
-      const dayString = this.isTimePicker ? timeString : 'dd/MM/yyyy '+timeString;
-      return this.range ? dayString+' - '+dayString : dayString;
+      const dayString = this.isTimePicker
+        ? timeString
+        : "dd/MM/yyyy " + timeString;
+      return this.range ? dayString + " - " + dayString : dayString;
     },
     now(): Date {
       return dayjs().toDate();
     },
   },
-  methods:{
-    formatDate(value: Date): string{
+  methods: {
+    formatDate(value: Date): string {
       const realMonth = value.getMonth() + 1;
-      return value.getDate()+'/'+(realMonth < 10 ? "0" : "") + realMonth+'/'+value.getFullYear();
-    }
-  }
-})
+      return (
+        value.getDate() +
+        "/" +
+        (realMonth < 10 ? "0" : "") +
+        realMonth +
+        "/" +
+        value.getFullYear()
+      );
+    },
+  },
+});
 </script>
 <style lang="scss">
-@import '@vuepic/vue-datepicker/dist/main.css';
+@import "@vuepic/vue-datepicker/dist/main.css";
 .dp__theme_light {
-   --dp-primary-color: #1a8658;
-   --dp-time-font-size: 1rem;
+  --dp-primary-color: #1a8658;
+  --dp-time-font-size: 1rem;
 }
 </style>

package/src/components/misc/ClassicPopover.vue

@@ -32,7 +32,6 @@ export default defineComponent({
     relativeClass: { type: String, default: undefined },
     leftPos: { type: Boolean, default: false },
     topPos: { type: Boolean, default: false },
-
   },
   data() {
     return {
@@ -125,9 +124,12 @@ export default defineComponent({
           parentRight -
           (this.$refs.popover as HTMLElement).clientWidth
         : rectElement.left - parentLeft;
-      const yPosParent = this.topPos ? rectElement.top:rectElement.bottom;
-      const yGap = this.topPos ? -5 - (this.$refs.popover as HTMLElement).clientHeight :5;
-      this.posY = yPosParent +
+      const yPosParent = this.topPos ? rectElement.top : rectElement.bottom;
+      const yGap = this.topPos
+        ? -5 - (this.$refs.popover as HTMLElement).clientHeight
+        : 5;
+      this.posY =
+        yPosParent +
         parentScrollTop -
         parentTop +
         (this.isFixed ? 0 : window.scrollY) +

package/src/components/misc/player/PlayerCompact.vue

@@ -96,7 +96,7 @@ export default defineComponent({
     percentLiveProgress: { default: 0, type: Number },
     durationLivePosition: { default: 0, type: Number },
     listenTime: { default: 0, type: Number },
-    hlsReady: { default: false , type: Boolean},
+    hlsReady: { default: false, type: Boolean },
   },
 
   emits: ["stopPlayer", "update:notListenTime", "changePlayerLargeVersion"],