@saooti/octopus-sdk 37.0.42 → 37.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.42",
+  "version": "37.0.44",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -23,9 +23,9 @@
     "@tiptap/vue-3": "^2.1.11",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
-    "@vuepic/vue-datepicker": "^6.1.0",
+    "@vuepic/vue-datepicker": "^7.0.0",
     "autoprefixer": "^10.4.16",
-    "axios": "^1.5.0",
+    "axios": "^1.5.1",
     "dayjs": "^1.11.10",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
@@ -37,29 +37,29 @@
     "qrcode.vue": "^3.4.1",
     "sass": "^1.68.0",
     "sonarqube-scanner": "^3.1.0",
-    "swiper": "^10.3.0",
+    "swiper": "^10.3.1",
     "video.js": "^7.21.5",
     "videojs-contrib-quality-levels": "^2.2.1",
     "videojs-hls-quality-selector": "^1.1.4",
     "vite": "^4.4.9",
     "vue": "^3.3.4",
-    "vue-i18n": "^9.4.1",
+    "vue-i18n": "^9.5.0",
     "vue-recaptcha": "^2.0.3",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.2.5",
     "vue-select": "^4.0.0-beta.6",
     "vue3-lazyload": "^0.3.8",
     "vue3-swatches": "^1.2.3"
   },
   "devDependencies": {
-    "@types/videojs-contrib-quality-levels": "^2.0.1",
-    "@types/videojs-hls-quality-selector": "^1.1.0",
-    "@types/vue-select": "^3.16.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
+    "@types/videojs-contrib-quality-levels": "^2.0.2",
+    "@types/videojs-hls-quality-selector": "^1.1.1",
+    "@types/vue-select": "^3.16.3",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vue/compiler-sfc": "^3.3.4",
-    "@vue/eslint-config-typescript": "^11.0.3",
-    "eslint": "^8.49.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "eslint": "^8.50.0",
     "eslint-plugin-vue": "^9.15.1",
     "typescript": "^5.1.6"
   },

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

@@ -257,7 +257,7 @@ export default defineComponent({
       });
       this.saveOrganisation = this.organisation;
       if (0 === this.rubriquageData.length) return;
-     
+
       if (initArrayFilter && this.rubriquageData[0].rubriquageId) {
         this.arrayFilter.push({
           rubriquageId: this.rubriquageData[0].rubriquageId,
@@ -265,18 +265,20 @@ export default defineComponent({
           nameRubriquage: this.rubriquageData[0].title,
           nameRubrique: "",
         });
-      }else{
+      } else {
         const arrayFilterToUpdate = [];
-        for(const filter of this.arrayFilter){
-          const rubriquageExist = this.rubriquageData.find( (element) => element.rubriquageId === filter.rubriquageId);
-          if(rubriquageExist){
+        for (const filter of this.arrayFilter) {
+          const rubriquageExist = this.rubriquageData.find(
+            (element) => element.rubriquageId === filter.rubriquageId,
+          );
+          if (rubriquageExist) {
             arrayFilterToUpdate.push(filter);
           }
         }
-        if(arrayFilterToUpdate.length !== this.arrayFilter.length){
+        if (arrayFilterToUpdate.length !== this.arrayFilter.length) {
           this.arrayFilter = arrayFilterToUpdate;
+          this.$emit("warning");
         }
-        this.$emit('warning');
       }
     },
     resetRubriqueFilter(): void {

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

@@ -17,7 +17,13 @@
     <button class="image-play-button" @click="playRadio">
       <div class="multiple-play-buttons-container">
         <div v-if="!playingRadio" :title="$t('Play')" class="saooti-play" />
-        <div v-else class="bloc-paddle" :class="playingRadio && 'PLAYING' === playerStatus ? 'play-animation' : ''">
+        <div
+          v-else
+          class="bloc-paddle"
+          :class="
+            playingRadio && 'PLAYING' === playerStatus ? 'play-animation' : ''
+          "
+        >
           <span class="paddle1" />
           <span class="paddle2" />
           <span class="paddle3" />

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

@@ -28,10 +28,10 @@
     <div v-if="isRecordedInLive" class="live-image-status recording-bg">
       {{ $t("Recorded in live") }}
     </div>
-    <PodcastPlayButton 
+    <PodcastPlayButton
       :podcast="podcast"
-      :hidePlay="hidePlay"
-      :fetchConference="fetchConference"
+      :hide-play="hidePlay"
+      :fetch-conference="fetchConference"
     />
     <div
       v-if="displayDescription && isMobile"
@@ -52,8 +52,8 @@ import imageProxy from "../../mixins/imageProxy";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PodcastImage",
-  components:{
-    PodcastPlayButton
+  components: {
+    PodcastPlayButton,
   },
   mixins: [imageProxy],
   props: {
@@ -94,26 +94,25 @@ export default defineComponent({
       );
     },
     statusText(): string {
-      if (!this.fetchConference) return '';
+      if (!this.fetchConference) return "";
       switch (this.fetchConference.status) {
-        case 'PLANNED':
-          return this.$t('live in few time');
-        case 'PENDING':
-          if (this.isAnimatorLive) return this.$t('Open studio');
-          return this.$t('live upcoming');
-        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');
-        case 'ERROR':
-          return this.$t('In error');
-        case 'PUBLISHING':
-          return this.$t('Publishing');
+        case "PLANNED":
+          return this.$t("live in few time");
+        case "PENDING":
+          if (this.isAnimatorLive) return this.$t("Open studio");
+          return this.$t("live upcoming");
+        case "RECORDING":
+          return this.$t("In live");
+        case "DEBRIEFING":
+          if ("READY_TO_RECORD" === this.podcast.processingStatus)
+            return this.$t("Not recording");
+          return this.$t("Debriefing");
+        case "ERROR":
+          return this.$t("In error");
+        case "PUBLISHING":
+          return this.$t("Publishing");
         default:
-          return '';
+          return "";
       }
     },
   },

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

@@ -7,7 +7,9 @@
   >
     <PodcastImage
       :podcast="podcast"
-      :hide-play="hoverDesc && 0 !== description.length && podcastItemDescription"
+      :hide-play="
+        hoverDesc && 0 !== description.length && podcastItemDescription
+      "
       :display-description="0 !== description.length && podcastItemDescription"
       :arrow-direction="arrowDirection"
       :fetch-conference="fetchConference"

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

@@ -185,7 +185,7 @@ export default defineComponent({
             ? this.authProfile?.userId
             : undefined,
         includeStatus: ["READY", "PROCESSING"],
-        withVideo: this.withVideo
+        withVideo: this.withVideo,
       };
       try {
         const data = await octopusApi.fetchDataWithParams<{

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

@@ -1,21 +1,25 @@
 <template>
-  <button 
+  <button
     v-if="!hidePlay || recordingLive"
     class="image-play-button"
     :class="classicPodcastPlay ? '' : 'transparent-background'"
-    @mouseenter="hoverType='audio'"
-    @mouseleave="hoverType=''"
+    @mouseenter="hoverType = 'audio'"
+    @mouseleave="hoverType = ''"
     @click="play(false)"
   >
     <div
       class="multiple-play-buttons-container"
       :class="[
-        hoverType ? 'hover-type-'+hoverType : '',
+        hoverType ? 'hover-type-' + hoverType : '',
         isVideoPodcast ? 'has-video' : '',
       ]"
     >
       <template v-if="!isLiveToBeRecorded">
-        <div v-if="!playingPodcast || (playingPodcast && playerVideo)" :title="$t('Play')" class="saooti-play me-1" />
+        <div
+          v-if="!playingPodcast || (playingPodcast && playerVideo)"
+          :title="$t('Play')"
+          class="saooti-play me-1"
+        />
         <div
           v-if="playingPodcast"
           :class="'PLAYING' === playerStatus ? 'play-animation' : ''"
@@ -29,11 +33,11 @@
           v-if="isVideoPodcast && !playerVideo"
           :title="$t('Video')"
           class="btn-transparent d-flex align-items-center saooti-play-video"
-          @mouseenter="hoverType='video'"
-          @mouseleave="hoverType='audio'"
+          @mouseenter="hoverType = 'video'"
+          @mouseleave="hoverType = 'audio'"
           @click.stop="play(true)"
         />
-         <div
+        <div
           v-if="!classicPodcastPlay"
           class="special-icon-play-button"
           :class="iconName"
@@ -42,7 +46,12 @@
           {{ durationString }}
         </div>
       </template>
-      <div v-else :title="textVisible" class="big-icon-error" :class="iconName" />
+      <div
+        v-else
+        :title="textVisible"
+        class="big-icon-error"
+        :class="iconName"
+      />
     </div>
     <div v-if="!classicPodcastPlay" class="live-image-status bg-dark">
       {{ textVisible }}
@@ -81,35 +90,50 @@ export default defineComponent({
     ]),
     isVideoPodcast(): boolean {
       return (
-        (this.fetchConference?.videoProfile?.includes("video_") && "READY_TO_RECORD" === this.podcast.processingStatus) ||
+        (this.fetchConference?.videoProfile?.includes("video_") &&
+          "READY_TO_RECORD" === this.podcast.processingStatus) ||
         undefined !== this.podcast.video?.videoId
       );
     },
-    playingLive(): boolean{
-      return undefined!==this.fetchConference && "null" !== this.fetchConference.toString() &&
-          this.playerLive?.conferenceId === this.fetchConference.conferenceId; 
+    playingLive(): boolean {
+      return (
+        undefined !== this.fetchConference &&
+        "null" !== this.fetchConference.toString() &&
+        this.playerLive?.conferenceId === this.fetchConference.conferenceId
+      );
     },
     playingPodcast() {
-      return this.playerPodcast?.podcastId === this.podcast.podcastId || this.playingLive;
+      return (
+        this.playerPodcast?.podcastId === this.podcast.podcastId ||
+        this.playingLive
+      );
     },
     isLiveToBeRecorded(): boolean {
       return undefined === this.fetchConference && this.isLiveReadyToRecord;
     },
     isLiveReadyToRecord(): boolean {
-      return undefined !== this.podcast?.conferenceId && 0 !== this.podcast.conferenceId &&
-      "READY_TO_RECORD" === this.podcast.processingStatus;
+      return (
+        undefined !== this.podcast?.conferenceId &&
+        0 !== this.podcast.conferenceId &&
+        "READY_TO_RECORD" === this.podcast.processingStatus
+      );
     },
-    isLiveValidAndVisible():boolean{
-      return undefined !== this.podcast && false !== this.podcast.valid &&
-      undefined !== this.podcast.availability.visibility && this.podcast.availability.visibility;
+    isLiveValidAndVisible(): boolean {
+      return (
+        undefined !== this.podcast &&
+        false !== this.podcast.valid &&
+        undefined !== this.podcast.availability.visibility &&
+        this.podcast.availability.visibility
+      );
     },
     classicPodcastPlay(): boolean {
       return (
         this.isLiveValidAndVisible &&
         !this.isLiveToBeRecorded &&
         ("READY_TO_RECORD" === this.podcast.processingStatus ||
-        "READY" === this.podcast.processingStatus ||
-        ("PROCESSING" === this.podcast.processingStatus && !(state.generalParameters.authenticated as boolean)))
+          "READY" === this.podcast.processingStatus ||
+          ("PROCESSING" === this.podcast.processingStatus &&
+            !(state.generalParameters.authenticated as boolean)))
       );
     },
     iconName(): string {
@@ -219,7 +243,7 @@ export default defineComponent({
   .big-icon-error {
     font-size: 1.5rem;
   }
-  .special-icon-play-button{
+  .special-icon-play-button {
     width: 30px;
     height: 30px;
     background-color: #ffd663;
@@ -234,7 +258,7 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
   }
-  .has-video .special-icon-play-button{
+  .has-video .special-icon-play-button {
     left: 7.4rem;
   }
 }

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

@@ -220,7 +220,8 @@ export default defineComponent({
       if ("video" === this.iFrameModel) {
         return (
           "https://www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/" +
-          this.podcast?.video?.videoId + "/sound/true"
+          this.podcast?.video?.videoId +
+          "/sound/true"
         );
       }
       let url = [""];

package/src/components/form/ClassicDatePicker.vue

@@ -49,7 +49,14 @@ export default defineComponent({
     useTeleport: { default: false, type: Boolean },
     templateClass: { default: undefined, type: String },
     readonly: { default: false, type: Boolean },
-    maxTime:{default: null, type: Object as () => { hours?: number | string; minutes?: number | string; seconds?: number | string }}
+    maxTime: {
+      default: null,
+      type: Object as () => {
+        hours?: number | string;
+        minutes?: number | string;
+        seconds?: number | string;
+      },
+    },
   },
 
   emits: ["updateDate", "update:date"],

package/src/components/misc/ClassicPopover.vue

@@ -119,14 +119,15 @@ export default defineComponent({
       }
       const rectElement = (e.target as HTMLElement).getBoundingClientRect();
       (this.$refs.popover as HTMLElement).style.display = "block";
-      if(this.leftPos){
-        this.posX = rectElement.right -
+      if (this.leftPos) {
+        this.posX =
+          rectElement.right -
           parentRight -
           (this.$refs.popover as HTMLElement).clientWidth;
-      }else{
+      } else {
         this.posX = rectElement.left - parentLeft;
       }
-      this.posX = Math.max(0, this.posX);  
+      this.posX = Math.max(0, this.posX);
       const yPosParent = this.topPos ? rectElement.top : rectElement.bottom;
       const yGap = this.topPos
         ? -5 - (this.$refs.popover as HTMLElement).clientHeight

package/src/components/misc/modal/ClassicModal.vue

@@ -1,7 +1,11 @@
 <template>
-  <div :id="idModal" class="octopus-modal" :class="onlyHeader? 'octopus-only-header-modal':''">
-    <div class="octopus-modal-backdrop"/>
-    <div class="octopus-modal-dialog" >
+  <div
+    :id="idModal"
+    class="octopus-modal"
+    :class="onlyHeader ? 'octopus-only-header-modal' : ''"
+  >
+    <div class="octopus-modal-backdrop" />
+    <div class="octopus-modal-dialog">
       <div class="octopus-modal-content">
         <div class="octopus-modal-header">
           <h5 cclass="octopus-modal-title">
@@ -11,8 +15,8 @@
             <button
               v-if="canBeReduced"
               class="btn-transparent text-light"
-              :class="onlyHeader? 'saooti-down':'saooti-up'"
-              :title="onlyHeader? $t('Enlarge'):$t('Reduce')"
+              :class="onlyHeader ? 'saooti-down' : 'saooti-up'"
+              :title="onlyHeader ? $t('Enlarge') : $t('Reduce')"
               @click="onlyHeader = !onlyHeader"
             />
             <button

package/src/components/misc/modal/NewsletterModal.vue

@@ -274,7 +274,7 @@ export default defineComponent({
     ${this.emissionName}${this.description}`,
       ];
       html.push(
-      `</table>
+        `</table>
       <table width='100%' style="width:100%;background:#f3f3f3;font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;">
       <tr style="font-family: Arial, sans-serif;font-size: 12px;line-height: 20px;background: #f3f3f3;vertical-align: middle;padding: 15px 10px;display: flex; align-items:center; flex-wrap:wrap">
         <td><a href="${this.shareUrl}">
@@ -283,7 +283,7 @@ export default defineComponent({
         <td style="margin-left:10px"><a style="color: #000;text-decoration: none; margin-right:8px" href="${this.shareUrl}">${this.shareText}</a></td>
         ${this.articleHtml}
       </tr>
-      </table>${this.participantsName}`
+      </table>${this.participantsName}`,
       );
       return html.join("");
     },

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

@@ -26,12 +26,12 @@ import { defineComponent } from "vue";
 export default defineComponent({
   name: "PlayerVideo",
   components: {
-    SnackBar
+    SnackBar,
   },
 
   computed: {
     ...mapState(usePlayerStore, ["playerPodcast", "playerVideo"]),
-    videoId(): string|undefined{
+    videoId(): string | undefined {
       return this.playerPodcast?.video?.videoId;
     },
     srcVideo(): string {
@@ -51,12 +51,12 @@ export default defineComponent({
     }, */
   },
   mounted() {
-    if(undefined===this.videoId){
+    if (undefined === this.videoId) {
       (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
         this.$t("Podcast play error"),
       );
     }
-    
+
     /* this.goFullScreen(); */
   },
   methods: {

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

@@ -25,11 +25,11 @@ if (!videojs.getPlugin("hlsQualitySelector")) {
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PlayerVideoHls",
+  mixins: [playerLogicProgress],
 
   props: {
     hlsUrl: { default: "", type: String },
   },
-  mixins: [playerLogicProgress],
   emits: ["changeValid"],
   data() {
     return {
@@ -90,11 +90,11 @@ export default defineComponent({
   },
 
   methods: {
-     ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
+    ...mapActions(usePlayerStore, ["playerUpdateSeekTime"]),
     definedStalledTimeout() {
       this.isPaused = false;
       this.stalledTimout = setTimeout(() => {
-        if(this.isPaused){
+        if (this.isPaused) {
           return;
         }
         this.videoClean();
@@ -125,19 +125,19 @@ export default defineComponent({
           this.errorPlay = this.$t("Podcast play error");
         }
       });
-      this.player.on('seeking', () => {
-        this.playerUpdateSeekTime(this.player?.currentTime()??0);
+      this.player.on("seeking", () => {
+        this.playerUpdateSeekTime(this.player?.currentTime() ?? 0);
       });
-      this.player.on('pause', () => {
-        this.isPaused=true;
+      this.player.on("pause", () => {
+        this.isPaused = true;
       });
       this.player.on("timeupdate", () => {
         clearTimeout(this.stalledTimout);
         this.definedStalledTimeout();
         this.onTimeUpdateVideo();
       });
-      this.player.on('seeking', () => {
-        this.playerUpdateSeekTime(this.player?.currentTime()??0);
+      this.player.on("seeking", () => {
+        this.playerUpdateSeekTime(this.player?.currentTime() ?? 0);
       });
     },
     async playLiveIos(): Promise<void> {
@@ -164,7 +164,7 @@ export default defineComponent({
         this.onTimeUpdateVideo();
       };
       this.videoElement.onpause = async () => {
-        this.isPaused=true;
+        this.isPaused = true;
       };
       this.videoElement.onseeking = async () => {
         this.playerUpdateSeekTime(this.videoElement.currentTime);
@@ -200,11 +200,14 @@ export default defineComponent({
       this.endListeningProgress();
     },
     onTimeUpdateVideo(): void {
-      if (!this.downloadId) { return;}
-      const currentTime = this.player?.currentTime() ?? this.videoElement.currentTime;
+      if (!this.downloadId) {
+        return;
+      }
+      const currentTime =
+        this.player?.currentTime() ?? this.videoElement.currentTime;
       this.onTimeUpdateProgress(currentTime);
     },
-    },
+  },
 });
 </script>
 

package/src/components/pages/PodcastsPage.vue

@@ -100,9 +100,9 @@ export default defineComponent({
     organisation(): string | undefined {
       return this.organisationId ? this.organisationId : this.filterOrgaId;
     },
-    withVideo(): boolean|undefined{
-      return false===this.onlyVideo ? undefined : true;
-    }
+    withVideo(): boolean | undefined {
+      return false === this.onlyVideo ? undefined : true;
+    },
   },
   watch: {
     organisationId(): void {

package/src/stores/AuthStore.ts

@@ -42,7 +42,7 @@ export const useAuthStore = defineStore("AuthStore", {
     isGarRole(): string | undefined {
       return this.authProfile?.attributes?.["GAR"] as
         | string
-        | undefined; /* return "ELEVE"; */ /*CHEF_ETABLISSEMENT, ENSEIGNANT, ELEVE, undefined */
+        | undefined; /*CHEF_ETABLISSEMENT, ENSEIGNANT, ELEVE, undefined */
     },
     isGarStudent(): boolean {
       return "ELEVE" === this.isGarRole;