@saooti/octopus-sdk 40.2.8 → 40.2.9

package/package.json

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

package/src/components/composable/player/usePlayerLogic.ts

@@ -7,6 +7,7 @@ import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { useGeneralStore } from "../../../stores/GeneralStore";
 import { useVastStore } from "../../../stores/VastStore";
+import fetchHelper from "../../../helper/fetchHelper";
 import classicApi from "../../../api/classicApi";
 import dayjs from "dayjs";
 import { FetchParam } from "@/stores/class/general/fetchParam";
@@ -98,19 +99,26 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
     } else if ("PAUSED" === playerStore.playerStatus) {
       audioPlayer.pause();
     } else if ("PLAYING" === playerStore.playerStatus && playerStore.playerRadio) {
-      if (playerStore.playerRadio.isInit) {
-        if(vastStore.isAdPlaying && !vastStore.resetSessionId){
-          playerStore.playerRadio.dateSessionId = dayjs().toISOString();
-        }
-        playRadio();
-      } else {
-        playerStore.playerRadio.isInit = true;
-      }
+      handlePlayRadio();
     } else if ("PLAYING" === playerStore.playerStatus) {
       audioPlayer.play();
     }
   });
 
+  function handlePlayRadio(){
+    if(!playerStore.playerRadio){
+      return;
+    }
+    if (playerStore.playerRadio.isInit) {
+      if(vastStore.isAdPlaying && !vastStore.resetSessionId){
+        playerStore.playerRadio.dateSessionId = dayjs().toISOString();
+      }
+      playRadio();
+    } else {
+      playerStore.playerRadio.isInit = true;
+    }
+  }
+
   function getAudioUrlParameters(): FetchParam {
     if (!playerStore.playerPodcast) return {};
     const parameters: FetchParam = {
@@ -143,7 +151,7 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
     )
       return playerStore.playerPodcast.audioStorageUrl;
     if (listenError.value) return playerStore.playerPodcast.audioStorageUrl;
-    return playerStore.playerPodcast.podcastId + ".mp3?"+getAudioUrlParameters().toString();
+    return playerStore.playerPodcast.podcastId + ".mp3?"+fetchHelper.getUriSearchParams(getAudioUrlParameters());
   }
 
   function reInitPlayer(): void {

package/src/components/composable/podcasts/usePodcastView.ts

@@ -20,8 +20,7 @@ export const usePodcastView = (podcast: Ref<Podcast|undefined>,  podcastConferen
   });
   const isLiveReadyToRecord = computed(() => { 
     return (
-      undefined !== podcast.value &&
-      undefined !== podcast.value.conferenceId &&
+      undefined !== podcast.value?.conferenceId &&
       0 !== podcast.value.conferenceId &&
       "READY_TO_RECORD" === podcast.value.processingStatus
     );
@@ -52,24 +51,24 @@ export const usePodcastView = (podcast: Ref<Podcast|undefined>,  podcastConferen
   });
 
   const duration = computed(() => { 
-    if (!podcast.value || podcast.value.duration <= 1) return "";
-      if (podcast.value.duration > 600000) {
-        return humanizeDuration(podcast.value.duration, {
-          language: i18n.locale.value,
-          largest: 1,
-          round: true,
-        });
-      }
+    if (!podcast.value || podcast.value.duration <= 1){return ""};
+    if (podcast.value.duration > 600000) {
       return humanizeDuration(podcast.value.duration, {
         language: i18n.locale.value,
-        largest: 2,
+        largest: 1,
         round: true,
       });
+    }
+    return humanizeDuration(podcast.value.duration, {
+      language: i18n.locale.value,
+      largest: 2,
+      round: true,
+    });
   });
 
   const durationIso = computed(() => { 
-    if (!podcast.value || podcast.value.duration <= 1) return "";
-      return dayjs.duration({ milliseconds: podcast.value.duration }).toISOString();
+    if (!podcast.value || podcast.value.duration <= 1){return "";}
+    return dayjs.duration({ milliseconds: podcast.value.duration }).toISOString();
   });
 	return {
     isLiveReadyToRecord,

package/src/components/composable/radio/usefetchRadioData.ts

@@ -24,7 +24,7 @@ export const useFetchRadio = ()=>{
       api: 14,
       path:  "player/playing/" + canalId,
     });
-    /* metadata.nextAdvertising={
+    /*{
       "adCount": 1,
       "startDate": "2025-03-04T13:12:00Z",
       "tag": "5e385e1b51c86"

package/src/components/composable/route/useAdvancedParamInit.ts

@@ -64,7 +64,6 @@ export const useAdvancedParamInit = (props: any, isEmission: boolean)=>{
     if (!isInit.value) {
       return;
     }
-    // TODO si oldValue !=null
     rubriqueFilter.value = [];
   });
 

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

@@ -146,6 +146,7 @@ export default defineComponent({
     
     &.open{
       margin-left:auto;
+      direction: rtl;
       @media (width <= 625px) {
         margin-top: 0.5rem;
       }
@@ -179,11 +180,6 @@ export default defineComponent({
       right: -30px;
       transform-origin: center left;
     }
-
-    &.open {
-      direction: rtl;
-    }
-
     &:hover {
       text-indent: 30px;
     }

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

@@ -59,7 +59,7 @@ export default defineComponent({
     async fetchRubriquages(){
       const rubriquagesOrga = await this.getOrgaRubriques(this.orgaId);
       const rubriquesArray= rubriquagesOrga.flatMap((rub) =>rub.rubriques);
-      this.rubriquagesOrga= rubriquesArray.reduce((results, u)=> (results[u.rubriqueId??0] = u, results), {} as {[key:number]:Rubrique});
+      this.rubriquagesOrga= rubriquesArray.reduce((results, u)=> {results[u.rubriqueId??0] = u; return results}, {} as {[key:number]:Rubrique});
       this.init = true;
     },
   }

package/src/components/display/rubriques/RubriqueList.vue

@@ -107,7 +107,12 @@ export default defineComponent({
           return !rubriquageIdToNotShow.includes(element.rubriquageId);
         });
       }
-      return Array.from(this.rubriquages).toSorted((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0));
+      return Array.from(this.rubriquages).toSorted((a,b) => {
+        if(a.title > b.title){
+          return 1;
+        }
+        return (b.title > a.title) ? -1 : 0;
+      });
     },
   },
   watch: {

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

@@ -78,11 +78,11 @@ export default defineComponent({
       if (!canvas || canvas.length <=0 || !canvas[0]) {
         return;
       }
-      var downloadLink = document.createElement("a");
+      const downloadLink = document.createElement("a");
       if (this.isSvg) {
-        var svgData = canvas[0].outerHTML;
-        var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
-        var svgUrl = URL.createObjectURL(svgBlob);
+        const svgData = canvas[0].outerHTML;
+        const svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
+        const svgUrl = URL.createObjectURL(svgBlob);
         downloadLink.href = svgUrl;
         downloadLink.download = "qrcode.svg";
         downloadLink.click();

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

@@ -119,7 +119,12 @@ export default defineComponent({
             !this.podcast) ||
           ("PLAYLIST" === player.typePlayer && this.playlist)
         );
-      }).sort((a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0));
+      }).sort((a,b) => {
+        if(a.name > b.name){
+          return 1;
+        }
+        return (b.name > a.name) ? -1 : 0;
+      });
     },
   },
   created() {

package/src/components/form/ClassicDatePicker.vue

@@ -1,6 +1,5 @@
 <template>
   <div ref="divContainer" tabindex="0">
-    
     <label
       v-if="label && !range"
       class="form-label"

package/src/components/form/ClassicSelect.vue

@@ -76,7 +76,12 @@ export default defineComponent({
     optionsOrder(){
       const optionsOrdered = Array.from(this.options);
       if(this.orderOptions){
-        optionsOrdered.sort((a,b) => (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0)); 
+        optionsOrdered.sort((a,b) => {
+          if(a.title > b.title){
+            return 1;
+          }
+          return (b.title > a.title) ? -1 : 0
+      }); 
       }
       if(this.topOption){
         optionsOrdered.unshift(this.topOption);

package/src/components/misc/ClassicPopover.vue

@@ -153,23 +153,48 @@ export default defineComponent({
         this.targetElement.removeEventListener("focusout", this.clearDataBlur);
       }
     },
+    handleClickEvent(){
+      if (this.show && this.isClick) {
+        this.isClick = false;
+        this.clearData();
+        return -1;
+      }
+      if (this.show && this.isTopLayerPopover) {
+        (this.$refs.popover as HTMLElement).showPopover();
+        this.isClick = true;
+        return -1;
+      }
+      this.isClick = true;
+      return 0;
+    },
+    handleLeftPos(rectElement: DOMRect, parentLeft: number, sizeAvailable: number, sizePopover: number){
+      const elementRightRelative = rectElement.right - parentLeft;
+      const hasPlaceRightButton = (sizeAvailable - (sizeAvailable - elementRightRelative)) > sizePopover;
+      if(hasPlaceRightButton){
+        this.posX =
+        rectElement.right -
+        parentLeft -
+        sizePopover;
+      }else{
+        this.posX =parentLeft;
+      }
+    },
+    handleRightPos(rectElement: DOMRect, parentLeft: number, sizeAvailable: number, sizePopover: number){
+      const elementLeftRelative = rectElement.left - parentLeft;
+      const hasPlaceRightButton = (sizeAvailable - elementLeftRelative) > sizePopover;
+      if(hasPlaceRightButton){
+        this.posX = elementLeftRelative;
+      }else{
+        this.posX = sizeAvailable - sizePopover + parentLeft;
+      }
+    },
     setPopoverData(e: MouseEvent | PointerEvent) {
       clearInterval(this.clearTimeout as unknown as number);
       if (this.disable || !e || !e.target) {
         return;
       }
-      if ("click" === e.type) {
-        if (this.show && this.isClick) {
-          this.isClick = false;
-          this.clearData();
-          return;
-        }
-        if (this.show && this.isTopLayerPopover) {
-          (this.$refs.popover as HTMLElement).showPopover();
-          this.isClick = true;
-          return;
-        }
-        this.isClick = true;
+      if ("click" === e.type && -1 === this.handleClickEvent()) {
+        return;
       }
       this.show = true;
       let parentLeft = 0;
@@ -197,26 +222,11 @@ export default defineComponent({
       const rectElement = (e.target as HTMLElement).getBoundingClientRect();
       (this.$refs.popover as HTMLElement).style.display = "block";
       const sizePopover = (this.$refs.popover as HTMLElement).clientWidth;
-      const sizeAvailable = parentWidth? parentWidth : window.innerWidth;
+      const sizeAvailable = parentWidth || window.innerWidth;
       if (this.leftPos) {
-        const elementRightRelative = rectElement.right - parentLeft;
-        const hasPlaceRightButton = (sizeAvailable - (sizeAvailable - elementRightRelative)) > sizePopover;
-        if(hasPlaceRightButton){
-          this.posX =
-          rectElement.right -
-          parentLeft -
-          sizePopover;
-        }else{
-          this.posX =parentLeft;
-        }
+        this.handleLeftPos(rectElement, parentLeft, sizeAvailable, sizePopover);
       } else {
-        const elementLeftRelative = rectElement.left - parentLeft;
-        const hasPlaceRightButton = (sizeAvailable - elementLeftRelative) > sizePopover;
-        if(hasPlaceRightButton){
-          this.posX = elementLeftRelative;
-        }else{
-          this.posX = sizeAvailable - sizePopover + parentLeft;
-        }
+        this.handleRightPos(rectElement, parentLeft, sizeAvailable, sizePopover);
       }
       this.posX = Math.max(0, this.posX);
       const yPosParent = this.topPos ? rectElement.top : rectElement.bottom;

package/src/components/misc/ProgressBar.vue

@@ -7,7 +7,6 @@
     <div
       v-if="secondaryProgress"
       class="octopus-progress-bar bg-warning"
-      role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
       aria-valuemax="100"
@@ -28,7 +27,6 @@
     </template>
     <div
       class="octopus-progress-bar bg-primary"
-      role="progressbar"
       aria-valuenow="0"
       aria-valuemin="0"
       aria-valuemax="100"
@@ -147,9 +145,75 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@use "../../style/progressbar";
+.octopus-app{
+  .octopus-progress{
+    display: flex;
+    overflow: hidden;
+    background-color:var(--octopus-secondary-lighter);
+    border-radius: var(--octopus-border-radius);
+    position: relative;
+    cursor: pointer;
+    .octopus-progress-bar{
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+      color: var(--octopus-color-on-primary);
+      text-align: center;
+      white-space: nowrap;
+      background-color: var(--octopus-primary);
+      transition: width 0.6s ease;
+    }
+
+    .octopus-chapter{
+      position: absolute;
+      background: transparent;
+      background-clip: content-box;
+      padding: 0 5px;
+      box-shadow: inset -2px 1px 0 0 black,
+                  inset 2px 1px 0 0 black;
+
+      &:hover{
+        background: var(--octopus-background-transparent);
+        box-shadow: -4px 1px 0 0 black;
+      }
+    }
+
+    &,.octopus-progress-bar{
+      height: 4px;
+      @media (width <= 960px) {
+        height: 8px;
+      }
+    }
+
+    &.large,&.large .octopus-progress-bar{
+      height: 15px;
+    }
 
-.octopus-app .player-container {
+    &.medium,&.medium .octopus-progress-bar{
+      height: 6px;
+    }
+
+    .octopus-progress-bar-duration {
+      width: 10px;
+    }
+
+    .octopus-progress-bar-cursor{
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: black;
+      align-self: center;
+      position: absolute;
+    }
+
+    .end-0{
+      right: 0;
+    }
+  }
+
+  .player-container {
   .octopus-small-popover {
     font-size: 0.7rem;
     background: var(--octopus-player-color);
@@ -161,4 +225,5 @@ export default defineComponent({
     }
   }
 }
+}
 </style>

package/src/components/misc/player/ads/AdsProgressBar.vue

@@ -1,15 +1,11 @@
 <template>
-  <div class="octopus-progress ambiance-progress c-hand-auto mt-1">
-    <div
-      class="octopus-progress-bar"
-      role="progressbar"
-      aria-valuenow="0"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      :aria-label="$t('Advertising')"
-      :style="'width: ' + adPercentProgress + '%'"
-    />
-  </div>
+  <progress
+    class="ambiance-progress c-hand-auto mt-1"
+    min="0"
+    max="100"
+    :value="adPercentProgress"
+    :aria-label="$t('Advertising')"
+  />
 </template>
 
 <script lang="ts">
@@ -22,7 +18,4 @@ export default defineComponent({
     ...mapState(useVastStore, ["adPercentProgress"]),
   },
 });
-</script>
-<style lang="scss">
-@use "../../../../style/progressbar";
-</style>
+</script>

package/src/components/misc/player/radio/RadioProgressBar.vue

@@ -1,18 +1,12 @@
 <template>
-  <div
-    class="octopus-progress c-hand-auto mt-1"
+  <progress
+    class="c-hand-auto mt-1"
+    min="0"
+    max="100"
+    :value="percentProgress"
+    :aria-label="$t('Radio')"
     :class="isAmbiance ? 'ambiance-progress' : ''"
-  >
-    <div
-      class="octopus-progress-bar"
-      role="progressbar"
-      aria-valuenow="0"
-      aria-valuemin="0"
-      aria-valuemax="100"
-      :aria-label="$t('Radio')"
-      :style="'width: ' + percentProgress + '%'"
-    />
-  </div>
+  />
 </template>
 
 <script lang="ts">
@@ -51,12 +45,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(usePlayerStore, ["playerUpdateElapsed"]),
-    handlePercentInterval(/* clear: boolean */): void {
-      /*  if(clear){
-        clearInterval((this.percentInterval as unknown as number));
-        this.percentInterval = undefined;
-        return;
-      } */
+    handlePercentInterval(): void {
       this.percentInterval = setInterval(() => {
         this.calculatePercent();
       }, 1000);
@@ -79,6 +68,3 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss">
-@use "../../../../style/progressbar";
-</style>

package/src/stores/CommentStore.ts

@@ -4,7 +4,6 @@ import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
 import { defineStore } from "pinia";
-import StringHelper from "../helper/stringHelper";
 import cookiesHelper from "../helper/cookiesHelper";
 import WebSocketEngine from "../websocket/commentWebsocket";
 import { CommentPodcast } from "./class/general/comment";
@@ -224,7 +223,7 @@ export const useCommentStore = defineStore("CommentStore", {
     async initialize() {
       const apiStore = useApiStore();
       const commentUrl = apiStore.commentUrl?? "https://comments.dev2.saooti.org/";
-      const url =  StringHelper.trimChar(commentUrl.replace("https://", ""),"/");
+      const url =  stringHelper.trimChar(commentUrl.replace("https://", ""),"/");
       const engine = new WebSocketEngine(url);
       await engine.initialize();
       this.commentWebsocketengine = engine;

package/src/style/general.scss

@@ -4,11 +4,6 @@ html{
   font-size: 20px;
   height: 100%;
   scrollbar-gutter: stable;
-  /* scroll-snap-type: y proximity;
-  scroll-padding-top: 5rem;
-  @media (width <= 650px) {
-    scroll-padding-top: 3.5rem;
-  } */
 }
 
 body{
@@ -30,14 +25,6 @@ main, #app{
   flex-grow: 1;
 }
 
-/* header, section:not(.page-box), .podcast-inline-container {
-  scroll-snap-align: start;
-}
-.page-element > section:first-child {
-  scroll-snap-align: none;
-}
- */
-
 
 /** Octopus style */
 

package/src/style/share.scss

@@ -197,5 +197,39 @@
     text-align: center;
   }
 
+  progress{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--octopus-color-on-primary);
+    text-align: center;
+    white-space: nowrap;
+    background-color:var(--octopus-secondary-lighter);
+    border-radius: var(--octopus-border-radius);
+    cursor: pointer;
+    height: 4px;
+    flex-grow: 1;
+    width:100%;
+    @media (width <= 960px) {
+      height: 8px;
+    }
+    &::-webkit-progress-bar{
+      background-color: var(--octopus-secondary-lighter);
+    }
+    &:not(.ambiance-progress)::-webkit-progress-value {
+      background-color: var(--octopus-primary);
+    }
+    &.ambiance-progress::-webkit-progress-value {
+      background-color: var(--octopus-text-disabled);
+    }
+    &.large{
+      height: 15px;
+    }
+
+    &.medium{
+      height: 6px;
+    }
+  }
 
 }

package/src/style/progressbar.scss

@@ -1,77 +0,0 @@
-.octopus-app{
-  .octopus-progress{
-    display: flex;
-    overflow: hidden;
-    background-color:var(--octopus-secondary-lighter);
-    border-radius: var(--octopus-border-radius);
-    position: relative;
-    cursor: pointer;
-
-    .octopus-progress-bar{
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      overflow: hidden;
-      color: var(--octopus-color-on-primary);
-      text-align: center;
-      white-space: nowrap;
-      background-color: var(--octopus-primary);
-      transition: width 0.6s ease;
-    }
-
-    .octopus-chapter{
-      position: absolute;
-      background: transparent;
-      background-clip: content-box;
-      padding: 0 5px;
-      box-shadow: inset -2px 1px 0 0 black,
-                  inset 2px 1px 0 0 black;
-
-      &:hover{
-        background: var(--octopus-background-transparent);
-        box-shadow: -4px 1px 0 0 black;
-      }
-    }
-
-    &,.octopus-progress-bar{
-      height: 4px;
-
-      @media (width <= 960px) {
-        height: 8px;
-      }
-    }
-
-    &.large,&.large .octopus-progress-bar{
-      height: 15px;
-    }
-
-    &.medium,&.medium .octopus-progress-bar{
-      height: 6px;
-    }
-
-    .octopus-progress-bar-duration {
-      width: 10px;
-    }
-
-    .octopus-progress-bar-cursor{
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: black;
-      align-self: center;
-      position: absolute;
-    }
-
-    .end-0{
-      right: 0;
-    }
-  }
-    
-  .octopus-progress.ambiance-progress {
-    .octopus-progress-bar {
-      background-color: var(--octopus-text-disabled);
-    }
-  }
-
-}