@saooti/octopus-sdk 39.0.35 → 39.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "39.0.35",
+  "version": "39.0.37",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -15,38 +15,38 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@saooti/octopus-api": "^0.39.0",
-    "@tiptap/extension-link": "^2.2.4",
-    "@tiptap/extension-underline": "^2.2.4",
-    "@tiptap/pm": "^2.2.4",
-    "@tiptap/starter-kit": "^2.2.4",
-    "@tiptap/vue-3": "^2.2.4",
+    "@saooti/octopus-api": "^0.39.1",
+    "@tiptap/extension-link": "^2.4.0",
+    "@tiptap/extension-underline": "^2.4.0",
+    "@tiptap/pm": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
+    "@tiptap/vue-3": "^2.4.0",
     "@vue/cli": "^5.0.8",
-    "@vue/compat": "^3.4.21",
-    "@vuepic/vue-datepicker": "^8.2.0",
-    "@vueuse/core": "^10.9.0",
-    "autoprefixer": "^10.4.18",
-    "axios": "^1.6.7",
-    "dayjs": "^1.11.10",
+    "@vue/compat": "^3.4.30",
+    "@vuepic/vue-datepicker": "^8.8.0",
+    "@vueuse/core": "^10.11.0",
+    "autoprefixer": "^10.4.19",
+    "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "express": "^4.18.3",
-    "hls.js": "^1.5.7",
-    "humanize-duration": "^3.31.0",
+    "express": "^4.19.2",
+    "hls.js": "^1.5.11",
+    "humanize-duration": "^3.32.1",
     "jest": "^29.7.0",
     "pinia": "^2.1.7",
     "qrcode.vue": "^3.4.1",
-    "sass": "^1.71.1",
+    "sass": "^1.77.6",
     "sonarqube-scanner": "^3.3.0",
-    "swiper": "^11.0.7",
-    "video.js": "^8.10.0",
-    "videojs-contrib-quality-levels": "^4.0.0",
-    "videojs-hls-quality-selector": "^1.1.4",
-    "vite": "^5.1.5",
-    "vue": "^3.4.21",
-    "vue-i18n": "^9.10.1",
+    "swiper": "^11.1.4",
+    "video.js": "^8.12.0",
+    "videojs-contrib-quality-levels": "^4.1.0",
+    "videojs-hls-quality-selector": "^2.0.0",
+    "vite": "^5.3.1",
+    "vue": "^3.4.30",
+    "vue-i18n": "^9.13.1",
     "vue-recaptcha": "^2.0.3",
-    "vue-router": "^4.3.0",
+    "vue-router": "^4.4.0",
     "vue-select": "^4.0.0-beta.6",
     "vue3-lazyload": "^0.3.8",
     "vue3-swatches": "^1.2.4"
@@ -55,14 +55,14 @@
     "@types/videojs-contrib-quality-levels": "^2.0.4",
     "@types/videojs-hls-quality-selector": "^1.1.3",
     "@types/vue-select": "^3.16.8",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "^3.4.21",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/compiler-sfc": "^3.4.30",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.22.0",
-    "typescript": "^5.3.3"
+    "eslint-plugin-vue": "^9.26.0",
+    "typescript": "^5.5.2"
   },
   "eslintConfig": {
     "root": true,

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

@@ -1,12 +1,6 @@
 <template>
   <div class="position-relative w-100">
     <template v-if="!isPhone">
-      <!-- <button
-        v-show="isLoop"
-        :title="$t('Display previous')"
-        class="btn-transparent swiper-button-prev"
-        @click="slidePrevButton()"
-      ></button> -->
       <swiper
         :slides-per-view="numberItem"
         :space-between="0"

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

@@ -16,20 +16,19 @@
           <span>{{ day.title }}</span>
         </button>
       </div>
-      <div class="d-flex align-items-center justify-content-center border-bottom">
+      <div
+        class="d-flex align-items-center justify-content-center border-bottom"
+      >
         <button
           v-for="period in periodOfDay"
           :key="period.id"
           class="btn btn-underline mb-2"
-          @click="scrollToElement('planning-period-'+period.id)"
+          @click="scrollToElement('planning-period-' + period.id)"
         >
-          {{period.title}}
+          {{ period.title }}
         </button>
-        <button
-          class="btn btn-underline mb-2"
-          @click="changePeriodNow"
-        >
-          {{$t('Now')}}
+        <button class="btn btn-underline mb-2" @click="changePeriodNow">
+          {{ $t("Now") }}
         </button>
       </div>
 
@@ -42,20 +41,23 @@
           <div v-if="!planningLength[daySelected]" class="text-center">
             {{ $t("No programming") }}
           </div>
-          <div
-            v-else
-            v-for="period in periodOfDay"
-            :key="period.id"
-          >
+          <div v-for="period in periodOfDay" v-else :key="period.id">
             <template v-if="planning[daySelected][period.id].length">
-              <div 
-                :id="'planning-period-'+period.id"
+              <div
+                :id="'planning-period-' + period.id"
                 class="fw-bold my-3 pb-2 border-bottom border-primary text-primary"
-              >{{period.title}}</div>
+              >
+                {{ period.title }}
+              </div>
               <div
                 v-for="planningItem in planning[daySelected][period.id]"
+                :id="
+                  'planning-occurrence-' +
+                  planningItem.occurrenceId +
+                  '' +
+                  planningItem.liveId
+                "
                 :key="planningItem.occurrenceId + '' + planningItem.liveId"
-                :id="'planning-occurrence-'+planningItem.occurrenceId + '' + planningItem.liveId"
                 class="d-flex align-items-center mb-3"
               >
                 <div class="program-item-date fw-bold flex-shrink-0">
@@ -70,7 +72,9 @@
                   }"
                 >
                   <img
-                    v-lazy="proxyImageUrl(planningItem.podcastData.imageUrl, '150')"
+                    v-lazy="
+                      proxyImageUrl(planningItem.podcastData.imageUrl, '150')
+                    "
                     width="150"
                     height="150"
                     class="m-2"
@@ -79,6 +83,11 @@
                         name: planningItem.podcastData.title,
                       })
                     "
+                    :alt="
+                      $t('Episode name image', {
+                        name: planningItem.podcastData.title,
+                      })
+                    "
                   />
                   <div class="d-flex flex-column">
                     <div class="d-flex align-items-center mb-2">
@@ -133,12 +142,12 @@ export default defineComponent({
     return {
       planning: {} as {
         [key: number]: {
-          morning:Array<PlanningOccurrence | PlanningLive>,
-          afternoon:Array<PlanningOccurrence | PlanningLive>,
-          evening:Array<PlanningOccurrence | PlanningLive>
+          morning: Array<PlanningOccurrence | PlanningLive>;
+          afternoon: Array<PlanningOccurrence | PlanningLive>;
+          evening: Array<PlanningOccurrence | PlanningLive>;
         };
       },
-      planningLength: {} as {[key:number]: number},
+      planningLength: {} as { [key: number]: number },
       daySelected: dayjs().valueOf(),
       arrayDays: [] as Array<{
         title: string;
@@ -158,12 +167,32 @@ export default defineComponent({
     endOfDay(): string {
       return dayjs(this.daySelected).endOf("date").toISOString();
     },
-    periodOfDay(){
+    periodOfDay() {
       return [
-        {id:"morning", title: this.$t('Morning'), end: dayjs(this.daySelected).hour(14).minute(0).second(0).millisecond(0)},
-        {id:"afternoon", title: this.$t('Afternoon'), end: dayjs(this.daySelected).hour(19).minute(0).second(0).millisecond(0)},
-        {id:"evening", title: this.$t('Evening'), end: dayjs(this.daySelected).endOf("date")},
-      ]
+        {
+          id: "morning",
+          title: this.$t("Morning"),
+          end: dayjs(this.daySelected)
+            .hour(14)
+            .minute(0)
+            .second(0)
+            .millisecond(0),
+        },
+        {
+          id: "afternoon",
+          title: this.$t("Afternoon"),
+          end: dayjs(this.daySelected)
+            .hour(19)
+            .minute(0)
+            .second(0)
+            .millisecond(0),
+        },
+        {
+          id: "evening",
+          title: this.$t("Evening"),
+          end: dayjs(this.daySelected).endOf("date"),
+        },
+      ];
     },
   },
 
@@ -173,30 +202,40 @@ export default defineComponent({
   },
 
   methods: {
-    scrollToElement(id: string){
+    scrollToElement(id: string) {
       const element = document.getElementById(id);
-      if(element){
-        const yOffset = -110; 
-        const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
-        window.scrollTo({top: y, behavior: 'smooth'});
+      if (element) {
+        const yOffset = -110;
+        const y =
+          element.getBoundingClientRect().top + window.scrollY + yOffset;
+        window.scrollTo({ top: y, behavior: "smooth" });
       }
     },
-    changePeriodNow(){
+    changePeriodNow() {
       const now = dayjs();
-      if(!dayjs(this.daySelected).isSame(now, 'day')){
+      if (!dayjs(this.daySelected).isSame(now, "day")) {
         this.changeDate(this.arrayDays[7].date);
       }
       this.$nextTick(() => {
-        if(!this.planningLength[this.daySelected]){return;}
-        const arrayOccurrences = Object.values(this.planning[this.daySelected]).reduce((r,c) => r.concat(c), [])
+        if (!this.planningLength[this.daySelected]) {
+          return;
+        }
+        const arrayOccurrences = Object.values(
+          this.planning[this.daySelected],
+        ).reduce((r, c) => r.concat(c), []);
         let selectedOccurrence = arrayOccurrences[0];
-        for (let index = 0; index < arrayOccurrences.length; index++) {
-          selectedOccurrence = arrayOccurrences[index];
-          if(dayjs(arrayOccurrences[index].endDate).isAfter(now)){
+        for (let occ of arrayOccurrences) {
+          selectedOccurrence = occ;
+          if (dayjs(occ.endDate).isAfter(now)) {
             break;
           }
         }
-        this.scrollToElement('planning-occurrence-'+selectedOccurrence.occurrenceId + '' + selectedOccurrence.liveId);
+        this.scrollToElement(
+          "planning-occurrence-" +
+            selectedOccurrence.occurrenceId +
+            "" +
+            selectedOccurrence.liveId,
+        );
       });
     },
     createArrayDays() {
@@ -212,51 +251,72 @@ export default defineComponent({
         });
       }
     },
+    async fetchOccurrencesAndLives(): Promise<
+      Array<PlanningOccurrence | PlanningLive>
+    > {
+      const params = {
+        canalId: this.radio?.id,
+        from: this.startOfDay,
+        to: this.endOfDay,
+      };
+      let occurrences: Array<PlanningOccurrence | PlanningLive> =
+        await octopusApi.fetchDataWithParams<Array<PlanningOccurrence>>(
+          14,
+          "planning/occurrence/list",
+          params,
+        );
+      const lives = await octopusApi.fetchDataWithParams<
+        Array<PlanningOccurrence>
+      >(14, "live/list", params);
+      if (lives.length) {
+        occurrences = occurrences.concat(lives);
+        occurrences.sort((a, b) => {
+          if (a.startDate > b.startDate) {
+            return 1;
+          }
+          return b.startDate > a.startDate ? -1 : 0;
+        });
+      }
+      return occurrences;
+    },
     async fetchOccurrences(): Promise<void> {
       if (this.planning[this.daySelected]) {
         return;
       }
-      this.planning[this.daySelected] = {morning:[], afternoon:[], evening: []};
+      this.planning[this.daySelected] = {
+        morning: [],
+        afternoon: [],
+        evening: [],
+      };
       this.planningLength[this.daySelected] = 0;
       this.loading = true;
       this.error = false;
       try {
-        const params = {
-          canalId: this.radio?.id,
-          from: this.startOfDay,
-          to: this.endOfDay,
-        };
-        let occurrences: Array<PlanningOccurrence | PlanningLive> =
-          await octopusApi.fetchDataWithParams<Array<PlanningOccurrence>>(
-            14,
-            "planning/occurrence/list",
-            params,
-          );
-        const lives = await octopusApi.fetchDataWithParams<
-          Array<PlanningOccurrence>
-        >(14, "live/list", params);
-        if (lives.length) {
-          occurrences = occurrences.concat(lives);
-          occurrences.sort((a, b) => {
-            if (a.startDate > b.startDate) {
-              return 1;
-            }
-            return b.startDate > a.startDate ? -1 : 0;
-          });
-        }
+        let occurrences = await this.fetchOccurrencesAndLives();
         let periodDayIndex = 0;
-        for (let index = 0; index < occurrences.length; index++) {
-          if(!occurrences[index].podcastId){continue;}
-          if(!dayjs(occurrences[index].startDate).isBefore(this.periodOfDay[periodDayIndex].end)){
-            periodDayIndex+=1;
+        for (let occ of occurrences) {
+          if (!occ.podcastId) {
+            continue;
+          }
+          if (
+            !dayjs(occ.startDate).isBefore(this.periodOfDay[periodDayIndex].end)
+          ) {
+            periodDayIndex += 1;
           }
           switch (this.periodOfDay[periodDayIndex].id) {
-            case "morning": this.planning[this.daySelected].morning.push(occurrences[index]); break;
-            case "afternoon": this.planning[this.daySelected].afternoon.push(occurrences[index]); break;
-            case "evening": this.planning[this.daySelected].evening.push(occurrences[index]); break;
-            default:break;
+            case "morning":
+              this.planning[this.daySelected].morning.push(occ);
+              break;
+            case "afternoon":
+              this.planning[this.daySelected].afternoon.push(occ);
+              break;
+            case "evening":
+              this.planning[this.daySelected].evening.push(occ);
+              break;
+            default:
+              break;
           }
-          this.planningLength[this.daySelected]+=1;
+          this.planningLength[this.daySelected] += 1;
         }
       } catch {
         this.error = true;

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

@@ -5,8 +5,8 @@
     :button-text="$t('See more')"
     :button-plus="true"
     :title="playlist?.title ?? ''"
-    :href="'/main/pub/playlist/'+playlistId"
-    :podcastId="playlistId"
+    :href="'/main/pub/playlist/' + playlistId"
+    :podcast-id="playlistId"
   >
     <template #list-inline>
       <ClassicLoading
@@ -42,7 +42,7 @@ export default defineComponent({
     PodcastItem,
     ClassicLoading,
     PodcastInlineListTemplate,
-    SwiperList
+    SwiperList,
   },
 
   props: {
@@ -57,8 +57,7 @@ export default defineComponent({
       allPodcasts: [] as Array<Podcast>,
     };
   },
-  computed: {
-  },
+  computed: {},
   watch: {
     playlistId(): void {
       this.reset();

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

@@ -10,9 +10,8 @@
         :src="iFrameSrc"
         width="100%"
         height="140px"
-        scrolling="no"
+        style="overflow: hidden"
         allow="clipboard-read; clipboard-write; autoplay"
-        frameborder="0"
         class="max-iframe mx-3 flex-grow-1"
       />
       <div class="d-flex flex-column">

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

@@ -192,24 +192,7 @@ export default defineComponent({
         ? "//" + link
         : link;
     },
-    resizeWindow() {
-      if (this.windowWidth > 420 && this.lastWindowWidth > 420) {
-        this.lastWindowWidth = this.windowWidth;
-        return;
-      }
-      const subscribeList = this.$refs.subscribeButtonsContainer as HTMLElement;
-      if (
-        null === subscribeList ||
-        !subscribeList ||
-        "none" === subscribeList?.parentElement?.style.display
-      ) {
-        return;
-      }
-      this.lastWindowWidth = this.windowWidth;
-      subscribeList.style.justifyContent = "flex-start";
-      subscribeList.style.flexGrow = "1";
-      this.hiddenLinks.length = 0;
-      let parentWidth = 0;
+    showAllElements() {
       this.subscriptionsDisplay.forEach((element: Link) => {
         const el = (
           this.$refs["subLink" + element.name] as Array<HTMLElement>
@@ -219,6 +202,9 @@ export default defineComponent({
           el.classList.remove("hid");
         }
       });
+    },
+    hideOnlyNecessaryElements() {
+      let parentWidth = 0;
       this.subscriptionsDisplay.forEach((element: Link) => {
         const el = (
           this.$refs["subLink" + element.name] as Array<HTMLElement>
@@ -239,6 +225,26 @@ export default defineComponent({
           el.className += " hid";
         }
       });
+    },
+    resizeWindow() {
+      if (this.windowWidth > 420 && this.lastWindowWidth > 420) {
+        this.lastWindowWidth = this.windowWidth;
+        return;
+      }
+      const subscribeList = this.$refs.subscribeButtonsContainer as HTMLElement;
+      if (
+        null === subscribeList ||
+        !subscribeList ||
+        "none" === subscribeList?.parentElement?.style.display
+      ) {
+        return;
+      }
+      this.lastWindowWidth = this.windowWidth;
+      subscribeList.style.justifyContent = "flex-start";
+      subscribeList.style.flexGrow = "1";
+      this.hiddenLinks.length = 0;
+      this.showAllElements();
+      this.hideOnlyNecessaryElements();
       if (!this.hiddenLinks.length && this.justifyCenter) {
         subscribeList.style.justifyContent = "center";
       }

package/src/components/form/ClassicDatePicker.vue

@@ -1,33 +1,33 @@
 <template>
   <div ref="divContainer" tabindex="0">
-  <VueDatePicker
-    :model-value="modelVal"
-    :time-picker="isTimePicker"
-    :input-class-name="templateClass"
-    :clearable="false"
-    :text-input="true"
-    :readonly="readonly"
-    :teleport="useTeleport"
-    :locale="formatLocale"
-    :format="format"
-    :auto-apply="true"
-    :enable-seconds="displaySeconds"
-    :max-date="isMaxDate && !isTimePicker ? now : undefined"
-    :min-date="isMinDate && !isTimePicker ? now : undefined"
-    :range="undefined !== range"
-    :multi-calendars="columnNumber > 1 ? columnNumber : false"
-    :inline="isInline"
-    :enable-time-picker="!isTimePicker ? displayTimePicker : undefined"
-    :aria-labels="ariaLabels"
-    :max-time="maxTime"
-    :month-picker="monthPicker"
-    :alt-position="customPosition"
-    @update:model-value="updateValue($event)"
-  >
-    <template v-if="time" #input-icon>
-      <div class="ms-2 saooti-clock" />
-    </template>
-  </VueDatePicker>
+    <VueDatePicker
+      :model-value="modelVal"
+      :time-picker="isTimePicker"
+      :input-class-name="templateClass"
+      :clearable="false"
+      :text-input="true"
+      :readonly="readonly"
+      :teleport="useTeleport"
+      :locale="formatLocale"
+      :format="format"
+      :auto-apply="true"
+      :enable-seconds="displaySeconds"
+      :max-date="isMaxDate && !isTimePicker ? now : undefined"
+      :min-date="isMinDate && !isTimePicker ? now : undefined"
+      :range="undefined !== range"
+      :multi-calendars="columnNumber > 1 ? columnNumber : false"
+      :inline="isInline"
+      :enable-time-picker="!isTimePicker ? displayTimePicker : undefined"
+      :aria-labels="ariaLabels"
+      :max-time="maxTime"
+      :month-picker="monthPicker"
+      :alt-position="customPosition"
+      @update:model-value="updateValue($event)"
+    >
+      <template v-if="time" #input-icon>
+        <div class="ms-2 saooti-clock" />
+      </template>
+    </VueDatePicker>
   </div>
 </template>
 
@@ -102,7 +102,7 @@ export default defineComponent({
       return this.$i18n.locale;
     },
     format() {
-      if(this.forceFormat){
+      if (this.forceFormat) {
         return this.forceFormat;
       }
       if (this.monthPicker) {
@@ -128,11 +128,11 @@ export default defineComponent({
     },
   },
   methods: {
-    updateValue(date: Date){
-      if(!this.isInline){
+    updateValue(date: Date) {
+      if (!this.isInline) {
         this.$refs.divContainer?.focus();
       }
-      this.$emit('updateDate', date);
+      this.$emit("updateDate", date);
     },
     formatDate(value: Date): string {
       const realMonth = value.getMonth() + 1;

package/src/components/form/ClassicInputText.vue

@@ -1,7 +1,7 @@
 <template>
-  <div 
-    class="d-flex flex-column classic-input-text" 
-    :class="{'form-margin':displayLabel}"
+  <div
+    class="d-flex flex-column classic-input-text"
+    :class="{ 'form-margin': displayLabel }"
   >
     <div class="d-flex">
       <label

package/src/components/form/ClassicMultiselect.vue

@@ -3,7 +3,7 @@
     :class="{
       'multiselect-in-modal': inModal,
       'multiselect-no-deselect': noDeselect,
-      'form-margin':displayLabel
+      'form-margin': displayLabel,
     }"
     :style="{ width: width }"
   >
@@ -58,7 +58,7 @@
         </div>
       </template>
       <template #open-indicator="{ attributes }">
-        <span v-bind="attributes" class="saooti-down"/>
+        <span v-bind="attributes" class="saooti-down" />
       </template>
     </vSelect>
   </div>

package/src/components/form/ClassicSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="classic-select" :class="{'form-margin':displayLabel}">
+  <div class="classic-select" :class="{ 'form-margin': displayLabel }">
     <label
       :for="idSelect"
       class="form-label"

package/src/components/misc/ClassicAccordion.vue

@@ -55,19 +55,18 @@ export default defineComponent({
       this.$emit("open");
     },
   },
-  created(){
-    this.isOpen= this.initOpen;
-  }
+  created() {
+    this.isOpen = this.initOpen;
+  },
 });
 </script>
 <style lang="scss">
 @import "@scss/_variables.scss";
 .octopus-accordion {
   > button {
-    background: white;
     min-height: 50px;
     color: $octopus-primary-color;
-    font-size:0.9rem;
+    font-size: 0.9rem;
     border: 1px solid transparent;
     border-bottom-color: #b8b8b8;
     font-weight: bold;
@@ -75,6 +74,12 @@ export default defineComponent({
       border-bottom-color: #535353;
     }
   }
+  &:not(.octopus-accordion-open) > button {
+    background: transparent;
+  }
+  .body {
+    background: white;
+  }
   &.octopus-accordion-open {
     border-radius: $octopus-borderradius;
     border: 1px solid #e0e0e0;

package/src/components/misc/ClassicLazy.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="targetEl"
-    :style="`min-height:${minHeight}px`"
-  >
+  <div ref="targetEl" :style="`min-height:${minHeight}px`">
     <slot v-if="shouldRender" />
     <slot v-else name="preview" />
   </div>
@@ -38,12 +35,11 @@ export default {
       default: 10000,
     },
   },
-  emits:['isRender'],
+  emits: ["isRender"],
   setup(props, context) {
     const waitBeforeInit = ref(true);
     const shouldRender = ref(false);
     const targetEl = ref();
-    //const fixedMinHeight = ref(0);
     let unrenderTimer: ReturnType<typeof setTimeout> | undefined;
     let renderTimer: ReturnType<typeof setTimeout> | undefined;
     setTimeout(() => {
@@ -63,7 +59,7 @@ export default {
           renderTimer = setTimeout(
             () => {
               shouldRender.value = true;
-              context.emit('isRender', true);
+              context.emit("isRender", true);
             },
             props.unrender ? 200 : 0,
           );
@@ -74,9 +70,8 @@ export default {
           // if the component was set to render, cancel that
           clearTimeout(renderTimer);
           unrenderTimer = setTimeout(() => {
-            //fixedMinHeight.value = targetEl.value?.clientHeight ?? 0;
             shouldRender.value = false;
-            context.emit('isRender', false);
+            context.emit("isRender", false);
           }, props.unrenderDelay);
         }
       },
@@ -88,24 +83,27 @@ export default {
     if (props.renderOnIdle) {
       onIdle(() => {
         shouldRender.value = true;
-        context.emit('isRender', true);
+        context.emit("isRender", true);
         if (!props.unrender) {
           pause();
         }
       });
     }
-    watch(() => props.unrender, (newValue, oldValue) => {
-     if (newValue) {
-        clearTimeout(renderTimer);
-        unrenderTimer = setTimeout(() => {
-          shouldRender.value = false;
-          context.emit('isRender', false);
-          resume();
-        }, props.unrenderDelay);
-      }
-    });
+    watch(
+      () => props.unrender,
+      (newValue, _) => {
+        if (newValue) {
+          clearTimeout(renderTimer);
+          unrenderTimer = setTimeout(() => {
+            shouldRender.value = false;
+            context.emit("isRender", false);
+            resume();
+          }, props.unrenderDelay);
+        }
+      },
+    );
 
-    return { targetEl, shouldRender/* , fixedMinHeight  */};
+    return { targetEl, shouldRender };
   },
 };
 </script>

package/src/components/misc/ClassicPopover.vue

@@ -59,10 +59,10 @@ export default defineComponent({
       return `left: ${this.posX}px; top: ${this.posY}px;`;
     },
   },
-  watch:{
-    show(){
-      this.$emit('updateVisibility', this.show);
-    }
+  watch: {
+    show() {
+      this.$emit("updateVisibility", this.show);
+    },
   },
   mounted() {
     this.init();
@@ -105,7 +105,7 @@ export default defineComponent({
         if (!this.onlyMouse) {
           this.targetElement.removeEventListener("click", this.setPopoverData);
         }
-        this.targetElement.addEventListener("focusout", this.clearDataBlur);
+        this.targetElement.removeEventListener("focusout", this.clearDataBlur);
       }
     },
     setPopoverData(e: MouseEvent | PointerEvent) {
@@ -163,7 +163,7 @@ export default defineComponent({
         (this.isFixed ? 0 : window.scrollY) +
         yGap;
     },
-    async clearDataBlur(e: FocusEvent) {
+    clearDataBlur(e: FocusEvent) {
       if (!e.relatedTarget) {
         return this.clearClick();
       }
@@ -187,7 +187,7 @@ export default defineComponent({
       if ("true" === myElement.getAttribute("reallink")) {
         myElement.click();
       } else {
-        await this.$router.push((myElement as HTMLAnchorElement).pathname);
+        this.$router.push((myElement as HTMLAnchorElement).pathname);
       }
       this.$nextTick(() => {
         this.isClick = false;
@@ -223,10 +223,9 @@ export default defineComponent({
   border: 1px solid #ccc;
   border-radius: $octopus-borderradius;
   position: absolute;
-  /* z-index: 9999; */
   max-height: 80vh;
   overflow: auto;
-  &.popover-z-index{
+  &.popover-z-index {
     z-index: 9999;
   }
   &.octopus-dropdown {

package/src/components/misc/MobileMenu.vue

@@ -32,7 +32,12 @@
             {{ link.title }}
           </router-link>
         </template>
-        <a  v-if="!isAuthenticatedWithOrga" class="octopus-dropdown-item" href="/sso/login" realLink="true">
+        <a
+          v-if="!isAuthenticatedWithOrga"
+          class="octopus-dropdown-item"
+          href="/sso/login"
+          realLink="true"
+        >
           {{ $t("Login") }}
         </a>
         <a v-else class="octopus-dropdown-item" @click="logoutFunction">

package/src/components/misc/TopBarMainContent.vue

@@ -286,7 +286,7 @@ export default defineComponent({
         text-underline-offset: 8px;
       }
     }
-    .client-logo{
+    .client-logo {
       border-radius: $octopus-borderradius;
     }
     .top-bar-logo img {
@@ -300,7 +300,7 @@ export default defineComponent({
         max-height: 2rem;
       }
     }
-    .octopusLogo{
+    .octopusLogo {
       @media (max-width: 960px) {
         max-width: 30px !important;
       }

package/src/components/misc/player/video/PlayerVideoDigiteka.vue

@@ -55,20 +55,20 @@ export default defineComponent({
         this.$t("Podcast play error"),
       );
     }
-    if(!this.isVideoFullscreen){
+    if (!this.isVideoFullscreen) {
       return;
     }
     this.$nextTick(() => {
       this.goFullScreen();
     });
   },
-  methods:{
+  methods: {
     goFullScreen() {
       if ("" === this.srcVideo) {
         return;
       }
       (this.$refs.iframeVideo as Element).requestFullscreen();
-    }, 
-  }
+    },
+  },
 });
 </script>

package/src/components/mixins/player/playerStitching.ts

@@ -180,7 +180,7 @@ export const playerStitching = defineComponent({
     async getVastUrl(tag: string): Promise<string>{
       let baseUrl = "https://api.soundcast.io/v1/vast/"+tag;
       let keywords: Array<string> = [];
-      if(this.playerPodcast && this.playerPodcast?.tags?.length){
+      if(this.playerPodcast?.tags?.length){
         const attributes = await this.getOrgaAttributes(this.playerPodcast.organisation.id);
         if ("true"===attributes["AD_CONFIG_PODCAST_TAG"]) {
           keywords = this.playerPodcast.tags.map((e) => {

package/src/components/mixins/player/playerTranscript.ts

@@ -27,7 +27,6 @@ export const playerTranscript = defineComponent({
       }else if(0===doubletsLength || 1=== doubletsLength &&  "post" === adserverConfig.config.doublets[0].timing.insertion){
         return;
       }else{
-        // todo remove chaptering
         this.playerUpdateChaptering();
         this.playerUpdateTranscript();
       }

package/src/components/mixins/radio/fetchRadioData.ts

@@ -30,11 +30,6 @@ export const fetchRadioData = defineComponent({
         "player/playing/" + canalId,
       );
       if(callbackAdvertising){
-        //TODO remove mock
-        /* callbackAdvertising({
-          startDate: "2024-03-25T08:21:00Z",
-          tag: "5e385e1b51c86"
-        }); */
         callbackAdvertising(metadata.nextAdvertising);
       }
       const arrayMetadata = metadata.previously;
@@ -44,23 +39,30 @@ export const fetchRadioData = defineComponent({
           dayjs().valueOf() - 18000 >
           dayjs(arrayMetadata[index].startDate).valueOf()
         ) {
-          if (previousTitle !== arrayMetadata[index].title) {
-            const historyIndex = index + 1 < len ? index + 1 : index;
-            const history = arrayMetadata.slice(historyIndex, len);
-            if (arrayMetadata[index].podcastId) {
-              const data: Podcast = await octopusApi.fetchData<Podcast>(
-                0,
-                "podcast/" + arrayMetadata[index].podcastId,
-              );
-              callbackMetadata(arrayMetadata[index], data, history);
-            } else {
-              callbackMetadata(arrayMetadata[index], undefined, history);
-            }
-          }
+          await this.useCallbackIfNewMetadata(previousTitle, arrayMetadata, index, len,callbackMetadata);
           return;
         }
       }
     },
+    async useCallbackIfNewMetadata(previousTitle: string, arrayMetadata: Array<MediaRadio>, index:number, len: number, callbackMetadata: (
+      metadata: MediaRadio,
+      podcast: Podcast | undefined,
+      history: Array<MediaRadio>
+    ) => void){
+      if (previousTitle !== arrayMetadata[index].title) {
+        const historyIndex = index + 1 < len ? index + 1 : index;
+        const history = arrayMetadata.slice(historyIndex, len);
+        if (arrayMetadata[index].podcastId) {
+          const data: Podcast = await octopusApi.fetchData<Podcast>(
+            0,
+            "podcast/" + arrayMetadata[index].podcastId,
+          );
+          callbackMetadata(arrayMetadata[index], data, history);
+        } else {
+          callbackMetadata(arrayMetadata[index], undefined, history);
+        }
+      }
+    },
     displayTitle(metadata: MediaRadio): string {
       let title = "";
       if (metadata.title) {

package/src/components/pages/EmissionsPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-box">
-    <slot name="new-emission"/>
+    <slot name="new-emission" />
     <ProductorSearch
       v-model:organisationId="organisationId"
       v-model:search-pattern="searchPattern"

package/src/components/pages/ParticipantPage.vue

@@ -41,7 +41,7 @@
         :participant-id="participantId"
         :name="name"
         :category-filter="true"
-        :productorId="['']" 
+        :productor-id="['']"
         :reload="reload"
         :show-count="true"
       />
@@ -162,7 +162,7 @@ export default defineComponent({
         );
         if (
           "PUBLIC" !== data?.orga?.privacy &&
-          this.filterOrgaId !== data?.orga?.id&&
+          this.filterOrgaId !== data?.orga?.id &&
           this.$route.query.productor !== data?.orga?.id
         ) {
           this.initError();

package/src/components/pages/PlaylistPage.vue

@@ -165,8 +165,8 @@ export default defineComponent({
         if (
           (!this.editRight && this.playlistRadio) ||
           ("PUBLIC" !== this.playlist.organisation?.privacy &&
-          this.filterOrgaId !== this.playlist.organisation?.id && 
-          this.$route.query.productor !== this.playlist.organisation?.id)
+            this.filterOrgaId !== this.playlist.organisation?.id &&
+            this.$route.query.productor !== this.playlist.organisation?.id)
         ) {
           this.initError();
           return;

package/src/main.ts

@@ -71,5 +71,4 @@ router.isReady().then(() => {
     },
   });  */
   app.mount('#app');
-})
-//app.mount("#app");
+})