@saooti/octopus-sdk 40.2.18 → 41.0.0-SNAPSHOT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "40.2.18",
+  "version": "41.0.0-SNAPSHOT",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -12,63 +12,62 @@
     "proxy_non_authentifié": "node proxy.ts false",
     "lint": "eslint --fix src",
     "stylelint": "stylelint **/*.{scss,vue} --fix",
-    "sonar": "node sonarqube-scanner.js"
+    "sonar": "sonar -Dsonar.host.url=http://localhost:9000"
   },
   "dependencies": {
     "@multiformats/murmur3": "^2.1.8",
     "@popperjs/core": "^2.11.8",
-    "@stomp/stompjs": "^7.0.0",
+    "@stomp/stompjs": "^7.1.1",
     "@tato30/vue-pdf": "^1.11.3",
-    "@tiptap/extension-hard-break": "^2.9.1",
-    "@tiptap/extension-link": "^2.9.1",
-    "@tiptap/extension-text-style": "^2.9.1",
-    "@tiptap/extension-underline": "^2.9.1",
-    "@tiptap/starter-kit": "^2.9.1",
-    "@tiptap/vue-3": "^2.9.1",
-    "@vuepic/vue-datepicker": "^10.0.0",
-    "@vueuse/core": "^12.0.0",
-    "autoprefixer": "^10.4.20",
-    "axios": "^1.7.9",
+    "@tiptap/extension-hard-break": "^2.14.0",
+    "@tiptap/extension-link": "^2.14.0",
+    "@tiptap/extension-text-style": "^2.14.0",
+    "@tiptap/extension-underline": "^2.14.0",
+    "@tiptap/starter-kit": "^2.14.0",
+    "@tiptap/vue-3": "^2.14.0",
+    "@vuepic/vue-datepicker": "^11.0.2",
+    "@vueuse/core": "^13.3.0",
+    "autoprefixer": "^10.4.21",
+    "axios": "^1.9.0",
     "dayjs": "^1.11.13",
-    "emoji-mart-vue-fast": "^15.0.3",
-    "eslint-config-prettier": "^9.1.0",
-    "express": "^4.21.2",
-    "globals": "^15.13.0",
-    "hls.js": "^1.5.17",
-    "humanize-duration": "^3.32.1",
-    "pinia": "^2.3.0",
-    "postcss-html": "^1.7.0",
+    "emoji-mart-vue-fast": "^15.0.4",
+    "eslint-config-prettier": "^10.1.5",
+    "express": "^5.1.0",
+    "globals": "^16.2.0",
+    "hls.js": "^1.6.5",
+    "humanize-duration": "^3.33.0",
+    "pinia": "^3.0.3",
+    "postcss-html": "^1.8.0",
     "qrcode.vue": "^3.6.0",
-    "sass": "^1.82.0",
+    "sass": "^1.89.2",
     "sockjs-client": "^1.6.1",
-    "sonarqube-scanner": "^3.3.0",
-    "stylelint": "^16.13.0",
-    "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-config-recommended-vue": "^1.5.0",
-    "stylelint-config-standard": "^37.0.0",
-    "stylelint-config-standard-scss": "^14.0.0",
+    "stylelint": "^16.20.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-config-recommended-vue": "^1.6.0",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-gamut": "^1.3.4",
-    "swiper": "^11.1.14",
-    "typescript-eslint": "^8.18.1",
-    "video.js": "^8.21.0",
+    "swiper": "^11.2.8",
+    "typescript-eslint": "^8.34.0",
+    "video.js": "^8.23.3",
     "videojs-quality-selector-hls": "^1.1.1",
-    "vite": "^5.4.11",
-    "vue": "^3.5.12",
-    "vue-i18n": "^10.0.5",
+    "vite": "^6.3.5",
+    "vue": "^3.5.16",
+    "vue-i18n": "^11.1.5",
     "vue-material-design-icons": "^5.3.1",
     "vue-recaptcha": "^2.0.3",
-    "vue-router": "^4.4.5",
+    "vue-router": "^4.5.1",
     "vue-select": "^4.0.0-beta.6",
     "vue3-lazyload": "^0.3.8",
     "vue3-swatches": "^1.2.4"
   },
   "devDependencies": {
     "@types/sockjs-client": "^1.5.4",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "typescript": "^5.6.3"
+    "@vitejs/plugin-vue": "^5.2.4",
+    "eslint": "^9.28.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "typescript": "^5.8.3"
   },
   "postcss": {
     "plugins": {

package/src/App.vue

@@ -14,7 +14,7 @@
     </template>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import TopBar from "@/components/misc/TopBar.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
 import ClassicLazy from "@/components/misc/ClassicLazy.vue";
@@ -22,104 +22,84 @@ import {useInit} from "./components/composable/useInit";
 import {useMetaTitle} from "./components/composable/useMetaTitle";
 import {useOrganisationFilter} from "./components/composable/useOrganisationFilter";
 import { useAuthStore } from "./stores/AuthStore";
-import { useFilterStore } from "./stores/FilterStore";
-import { useGeneralStore } from "./stores/GeneralStore";
-import { mapState, mapActions } from "pinia";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { defineAsyncComponent, getCurrentInstance, onBeforeMount, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 const FooterOctopus = defineAsyncComponent(
   () => import("@/components/misc/FooterSection.vue"),
 );
 const CategoryFilter = defineAsyncComponent(
   () => import("@/components/display/categories/CategoryFilter.vue"),
 );
-export default defineComponent({
-  name: "App",
 
-  components: {
-    TopBar,
-    CategoryFilter,
-    FooterOctopus,
-    PlayerComponent,
-    ClassicLazy
-  },
+//Data 
+const reload = ref(false);
+const pageFullyLoad = ref(false);
+const firstDisplayCategoryFilter = ref(false);
 
-  setup(){
-    const { updateMetaTitle } = useMetaTitle();
-    const {initSdk} = useInit();
-    const {selectOrganisation} = useOrganisationFilter();
-    return { updateMetaTitle, initSdk, selectOrganisation }
-  },
+//Composables
+const {locale} = useI18n();
+const { updateMetaTitle } = useMetaTitle();
+const {initSdk} = useInit();
+const {selectOrganisation} = useOrganisationFilter();
+const authStore = useAuthStore();
+const route = useRoute();
 
-  data() {
-    return {
-      reload: false as boolean,
-      pageFullyLoad: false as boolean,
-      firstDisplayCategoryFilter: false as boolean,
-    };
-  },
 
-  computed: {
-    ...mapState(useFilterStore, ["filterRubriquage", "filterOrgaId"]),
-    ...mapState(useGeneralStore, ["storedCategories"]),
-    ...mapState(useAuthStore, ["authOrgaId"]),
-  },
-
-  watch: {
-    $route: {
-      immediate: true,
-      async handler() {
-        this.updateMetaTitle();
-        if (this.firstDisplayCategoryFilter) {
-          return;
-        }
-        const namesRouteWithCategoryFilter = [
-          "homePriv",
-          "home",
-          "podcasts",
-          "emissions",
-          "participants",
-          "playlists",
-        ];
-        this.firstDisplayCategoryFilter = namesRouteWithCategoryFilter.includes(
-          this.$route.name?.toString() ?? "",
-        );
-      },
-    },
-    "$i18n.locale"() {
-      this.updateMetaTitle();
-      this.$forceUpdate();
-      this.reload = !this.reload;
-    },
-  },
-  created() {
-    this.initApp();
-    setTimeout(() => {
-      this.pageFullyLoad = true;
-    }, 2000);
-  },
-  methods: {
-    ...mapActions(useFilterStore, ["filterUpdateRubrique"]),
-    async initApp() {
-      await this.initSdk();
-      await this.handleOrganisationFilter();
-    },
-    async handleOrganisationFilter() {
-      let orgaId = "";
-      if (
-        this.$route.query.productor &&
-        "string" === typeof this.$route.query.productor
-      ) {
-        orgaId = this.$route.query.productor;
-      } else if (this.authOrgaId) {
-        orgaId = this.authOrgaId;
-      }
-      if ("" === orgaId) {
-        return;
-      }
-      await this.selectOrganisation(orgaId);
-    },
-  },
+//Watch
+watch(route, async () => {
+  updateMetaTitle();
+  if (firstDisplayCategoryFilter.value) {
+    return;
+  }
+  const namesRouteWithCategoryFilter = [
+    "homePriv",
+    "home",
+    "podcasts",
+    "emissions",
+    "participants",
+    "playlists",
+  ];
+  firstDisplayCategoryFilter.value = namesRouteWithCategoryFilter.includes(
+    route.name?.toString() ?? "",
+  );
+}, {immediate: true});
+watch(locale,() => {
+  updateMetaTitle();
+  const instance = getCurrentInstance();
+  instance?.proxy?.$forceUpdate();
+  reload.value = !reload.value;
 });
+
+
+onBeforeMount(()=>{
+  initApp();
+  setTimeout(() => {
+    pageFullyLoad.value = true;
+  }, 2000);
+})
+
+
+//Methods
+async function initApp() {
+  await initSdk();
+  await handleOrganisationFilter();
+}
+async function handleOrganisationFilter() {
+  let orgaId = "";
+  if (
+   route.query.productor &&
+    "string" === typeof route.query.productor
+  ) {
+    orgaId = route.query.productor;
+  } else if (authStore.authOrgaId) {
+    orgaId = authStore.authOrgaId;
+  }
+  if ("" === orgaId) {
+    return;
+  }
+  await selectOrganisation(orgaId);
+}
 </script>
 
 <style lang="scss" src="@/style/octopus-library.scss"></style>

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

@@ -1,6 +1,6 @@
 import stringHelper from "../../../helper/stringHelper";
 import { usePlayerLogicProgress } from "./usePlayerLogicProgress";
-import { Ref, ref } from "vue";
+import { computed, Ref, ref } from "vue";
 import { usePlayerStore } from "../../../stores/PlayerStore";
 import { useApiStore } from "../../../stores/ApiStore";
 import dayjs from "dayjs";
@@ -24,6 +24,12 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
   const apiStore = useApiStore();
   const authStore = useAuthStore();
 
+  const needToAddToken = computed(() => { 
+    return authStore.authParam.accessToken && ("SECURED" === playerStore.playerLive?.organisation?.privacy || playerStore.playerRadio?.secured);
+  });
+
+  
+
 
   function onPlay(): void {
     playerStore.playerChangeStatus("PAUSED"===playerStore.playerStatus);
@@ -69,7 +75,7 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
         audioElement.value.canPlayType("application/vnd.apple.mpegurl") &&
         !isAndroid
       ) {
-        if ("SECURED" === playerStore.playerLive?.organisation?.privacy && authStore.authParam.accessToken) {
+        if(needToAddToken.value) {
           audioElement.value.src = playerStore.playerHlsUrl+"?access_token="+authStore.authParam.accessToken;
         }else{
           audioElement.value.src = playerStore.playerHlsUrl;
@@ -107,7 +113,7 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
     }
     hls.value = new Hls({
       xhrSetup: (xhr: XMLHttpRequest) => {
-        if ("SECURED" === playerStore.playerLive?.organisation?.privacy && authStore.authParam.accessToken) {
+        if (needToAddToken.value) {
           xhr.setRequestHeader("Authorization", "Bearer " +authStore.authParam.accessToken);
         }
       }
@@ -140,6 +146,9 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
   async function endingLive(): Promise<void> {
     clearTimeout(hlsRetryTimeout.value);
     hlsRetryTimeout.value = undefined;
+    if(null===audioElement.value){
+      return;
+    }
     audioElement.value = null;
     const audio: HTMLElement | null = document.getElementById("audio-player");
     if (audio && hls.value) {

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

@@ -62,21 +62,21 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
     getTranscription();
   }, {deep:true});
 
-  watch(()=>playerStore.playerLive, async () => {
+  watch(()=>playerStore.playerLive, async (_, oldLive) => {
     if(playerStore.playerVideo){
       return;
     }
     nextTick(async () => {
       hlsReady.value = false;
-      reInitPlayer();
+      reInitPlayer(oldLive!==undefined);
       playLive();
     });
   }, {deep:true});
 
-  watch(()=>playerStore.playerRadio, async () => {
+  watch(()=>playerStore.playerRadio, async (_, oldRadio) => {
     nextTick(async () => {
       hlsReady.value = false;
-      reInitPlayer();
+      reInitPlayer(oldRadio !== undefined);
       playRadio();
     });
   });
@@ -154,10 +154,10 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
     return playerStore.playerPodcast.podcastId + ".mp3?"+fetchHelper.getUriSearchParams(getAudioUrlParameters());
   }
 
-  function reInitPlayer(): void {
+  function reInitPlayer(force=false): void {
     setDownloadId(null);
     listenError.value = false;
-    if (playerStore.playerLive || playerStore.playerRadio) {
+    if (force || playerStore.playerLive || playerStore.playerRadio) {
       endingLive();
     }
   }

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

@@ -10,7 +10,7 @@ import { useI18n } from 'vue-i18n';
 import {useOrgaComputed} from "../useOrgaComputed"
 export const usePodcastView = (podcast: Ref<Podcast|undefined>,  podcastConference: Ref<Conference|undefined>)=>{
 
-  const i18n = useI18n();
+  const {locale} = useI18n();
 
   const {isEditRights, isPodcastmaker} = useOrgaComputed();
 
@@ -54,13 +54,13 @@ export const usePodcastView = (podcast: Ref<Podcast|undefined>,  podcastConferen
     if (!podcast.value || podcast.value.duration <= 1){return ""};
     if (podcast.value.duration > 600000) {
       return humanizeDuration(podcast.value.duration, {
-        language: i18n.locale.value,
+        language: locale.value,
         largest: 1,
         round: true,
       });
     }
     return humanizeDuration(podcast.value.duration, {
-      language: i18n.locale.value,
+      language: locale.value,
       largest: 2,
       round: true,
     });

package/src/components/composable/useInit.ts

@@ -10,13 +10,13 @@ export const useInit= ()=>{
   const authStore = useAuthStore();
   const generalStore = useGeneralStore();
 
-  const i18n = useI18n()
+  const {locale} = useI18n()
 
   async function initSdk() {
     classicApi.fetchData<Array<Category>>({
       api: 0,
       path:`iab/list${authStore.authOrgaId ? "/" + authStore.authOrgaId : ""}`,
-      parameters:{ lang: i18n.locale.value },
+      parameters:{ lang: locale.value },
     })
     .then((data: Array<Category>) => {
       if(data.length){

package/src/components/composable/useMetaTitleWatch.ts

@@ -7,8 +7,8 @@ export const useMetaTitleWatch = ()=>{
   const { updateMetaTitle } = useMetaTitle();
 
   const route = useRoute();
-  const i18n = useI18n();
+  const {locale} = useI18n();
 
   watch(route, () => updateMetaTitle(), {immediate:true});
-  watch(()=>i18n.locale, () => updateMetaTitle());
+  watch(locale, () => updateMetaTitle());
 }

package/src/components/display/accessibility/AccessibilityModal.vue

@@ -1,13 +1,13 @@
 <template>
   <ClassicModalInBody
     id-modal="accessibility-modal"
-    :title-modal="$t('Transcript Accessibility')"
+    :title-modal="t('Transcript Accessibility')"
     @close="closePopup"
   >
     <template #body>
       <div class="d-flex gap-3 flex-wrap mb-3">
         <div class="d-flex flex-nowrap align-items-center flex-grow-1">
-          <div class="form-label me-3">{{ $t('Choose background color') }}</div>
+          <div class="form-label me-3">{{ t('Choose background color') }}</div>
           <VSwatches
             v-model:model-value="background"
             class="c-hand"
@@ -19,7 +19,7 @@
           />
         </div>
         <div class="d-flex flex-nowrap align-items-center flex-grow-1">
-          <div class="form-label me-3">{{ $t('Choose text color') }}</div> 
+          <div class="form-label me-3">{{ t('Choose text color') }}</div> 
           <VSwatches
             v-model:model-value="color"
             class="c-hand"
@@ -33,98 +33,86 @@
       </div>
 
       <div class="d-flex align-items-center flex-nowrap mb-3">
-        <label class="form-label me-3" for="accessibility-font-size">{{ $t('Font size') }}</label> 
+        <label class="form-label me-3" for="accessibility-font-size">{{ t('Font size') }}</label> 
         <button class="btn me-3" :disabled="isMinSize" @click="decreaseFontSize"><FormatFontSizeDecreaseIcon :size="44"/></button>
         <button class="btn" :disabled="isMaxSize" @click="increaseFontSize"><FormatFontSizeIncreaseIcon :size="44"/></button>
       </div>
     
-      <div class="form-label mt-3">{{ $t('Preview') }}</div>
+      <div class="form-label mt-3">{{ t('Preview') }}</div>
       <div class="border p-2 mb-3" :style="stylePreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
     </template>
     <template #footer>
       <button class="btn m-1" @click="closePopup">
-        {{ $t("No") }}
+        {{ t("No") }}
       </button>
       <button
         class="btn btn-primary m-1"
         @click="saveData"
       >
-        {{ $t("Save") }}
+        {{ t("Save") }}
       </button>
     </template>
   </ClassicModalInBody>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VSwatches } from "vue3-swatches";
 import "vue3-swatches/dist/style.css";
 import FormatFontSizeIncreaseIcon from "vue-material-design-icons/FormatFontSizeIncrease.vue";
 import FormatFontSizeDecreaseIcon from "vue-material-design-icons/FormatFontSizeDecrease.vue";
-import { defineAsyncComponent, defineComponent } from "vue";
+import { computed, defineAsyncComponent, onBeforeMount, ref } from "vue";
+import { useI18n } from "vue-i18n";
 const ClassicModalInBody = defineAsyncComponent(
   () => import("../../misc/modal/ClassicModalInBody.vue"),
 );
-export default defineComponent({
-  name: "AccessibilityModal",
 
-  components: {
-    ClassicModalInBody,
-    FormatFontSizeIncreaseIcon,
-    FormatFontSizeDecreaseIcon,
-    VSwatches
-  },
+//Emits
+const emit = defineEmits(["close", "save"]);
 
-  emits: ["close", "save"],
-  data() {
-    return {
-      fontSize :16 as number,
-      background: "white" as string,
-      color: "black" as string,
-    };
-  },
-  computed:{
-    isMaxSize(){
-      return this.fontSize>=30;
-    },
-    isMinSize(){
-      return this.fontSize<=16;
-    },
-    stylePreview(){
-      return 'font-size:'+this.fontSize+'px; background:'+this.background+'; color:'+this.color;
-    }
-  },
-  created(){
-    this.initAccessibility();
-  },
-  methods: {
-    initAccessibility(){
-      const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');
-      this.fontSize = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);
-      this.background = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');
-      this.color = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');
-    },
-    closePopup() {
-      this.$emit("close");
-    },
-    decreaseFontSize(){
-      if(!this.isMinSize){
-        this.fontSize -=2;
-      }
-    },
-    increaseFontSize(){
-      if(!this.isMaxSize){
-        this.fontSize +=2;
-      }
-    },
-    saveData(){
-      this.$emit('save', {
-        fontSize: this.fontSize,
-        background: this.background,
-        color: this.color,
-      });
-    }
-  },
-});
+//Data 
+const fontSize = ref(16);
+const background = ref("white");
+const color = ref("black");
+
+
+//Composables
+const { t } = useI18n();
+
+
+//Computed
+const isMaxSize = computed(() => fontSize.value>=30);
+const isMinSize = computed(() => fontSize.value<=16);
+const stylePreview = computed(() => 'font-size:'+fontSize.value+'px; background:'+background.value+'; color:'+color.value);
+
+onBeforeMount(()=>initAccessibility())
+
+//Methods
+function initAccessibility(){
+  const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');
+  fontSize.value = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);
+  background.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');
+  color.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');
+}
+function closePopup() {
+  emit("close");
+}
+function decreaseFontSize(){
+  if(!isMinSize.value){
+    fontSize.value -=2;
+  }
+}
+function increaseFontSize(){
+  if(!isMaxSize.value){
+    fontSize.value +=2;
+  }
+}
+function saveData(){
+  emit('save', {
+    fontSize: fontSize.value,
+    background: background.value,
+    color: color.value,
+  });
+}
 </script>
 <style lang="scss">
 .octopus-app #accessibility-modal .octopus-modal-body{