@saooti/octopus-sdk 40.2.19 → 41.0.0

package/index.ts

@@ -108,7 +108,7 @@ import {useMetaTitleWatch} from "./src/components/composable/useMetaTitleWatch.t
 import {useOrganisationFilter} from "./src/components/composable/useOrganisationFilter.ts";
 import {useInit} from "./src/components/composable/useInit.ts";
 import {useErrorHandler} from "./src/components/composable/useErrorHandler.ts";
-
+import { useSimplePageParam } from "./src/components/composable/route/useSimplePageParam";
 
 
 //helper
@@ -157,6 +157,7 @@ export {
     useOrganisationFilter,
     useInit,
     useErrorHandler,
+    useSimplePageParam,
     debounce,
     useVastStore,
     useSaveFetchStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "40.2.19",
+  "version": "41.0.0",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -8,11 +8,12 @@
     "serve": "vite preview",
     "build": "vite build",
     "dev": "vite",
+    "bundle":"vite-bundle-visualizer",
     "proxy_authentifié": "node proxy.ts",
     "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",
@@ -41,7 +42,6 @@
     "qrcode.vue": "^3.6.0",
     "sass": "^1.89.2",
     "sockjs-client": "^1.6.1",
-    "sonarqube-scanner": "^3.3.0",
     "stylelint": "^16.20.0",
     "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-config-recommended-vue": "^1.6.0",
@@ -54,6 +54,7 @@
     "video.js": "^8.23.3",
     "videojs-quality-selector-hls": "^1.1.1",
     "vite": "^6.3.5",
+    "vite-bundle-visualizer": "^1.2.1",
     "vue": "^3.5.16",
     "vue-i18n": "^11.1.5",
     "vue-material-design-icons": "^5.3.1",

package/src/App.vue

@@ -8,118 +8,94 @@
         <router-view />
         <PlayerComponent />
       </main>
-      <ClassicLazy :min-height="123">
-        <FooterOctopus />
-      </ClassicLazy>
+      <FooterOctopus />
     </template>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import TopBar from "@/components/misc/TopBar.vue";
+import FooterOctopus from "@/components/misc/FooterSection.vue";
 import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
-import ClassicLazy from "@/components/misc/ClassicLazy.vue";
 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";
-const FooterOctopus = defineAsyncComponent(
-  () => import("@/components/misc/FooterSection.vue"),
-);
+import { defineAsyncComponent, getCurrentInstance, onBeforeMount, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
+
 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";
@@ -16,7 +16,7 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
   const audioElement: Ref<HTMLAudioElement | null>= ref(null);
   const hls: Ref<any>= ref(null);
   const hlsRetryTimeout: Ref<ReturnType<typeof setTimeout> | undefined>= ref(undefined);
-  const playPromise: Ref<any>= ref(undefined);
+  const playPromise: Ref<Promise<void>|undefined>= ref(undefined);
   const errorHls= ref(false);
 
 
@@ -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/player/usePlayerVast.ts

@@ -3,10 +3,10 @@ import { useVastStore } from "../../../stores/VastStore";
 import { loadScript } from "../../../helper/loadScript";
 import {nextTick, Ref, ref, watch} from 'vue';
 import dayjs from "dayjs";
-let adsLoader: any;
-let adsManager:any;
-let adDisplayContainer:any;
-let adsRequest: any;
+let adsLoader: google.ima.AdsLoader;
+let adsManager:google.ima.AdsManager;
+let adDisplayContainer:google.ima.AdDisplayContainer;
+let adsRequest: google.ima.AdsRequest;
 export const usePlayerVast = ()=>{
   const imaLoaded = ref(false);
   const isContentFinished = ref(false);
@@ -83,7 +83,7 @@ export const usePlayerVast = ()=>{
     adsRequest.adTagUrl = vastUrl;
   }
 
-  function onAdsManagerLoaded(adsManagerLoadedEvent: any) {
+  function onAdsManagerLoaded(adsManagerLoadedEvent: google.ima.AdsManagerLoadedEvent) {
     const adsRenderingSettings = new google.ima.AdsRenderingSettings();
     adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
     adsManager = adsManagerLoadedEvent.getAdsManager(audioContainer.value, adsRenderingSettings);
@@ -117,7 +117,7 @@ export const usePlayerVast = ()=>{
     }
   }
 
-  function onAdError(adErrorEvent: any) {
+  function onAdError(adErrorEvent: google.ima.AdErrorEvent) {
     console.log(adErrorEvent.getError());
     destroyAdManager();
   }
@@ -132,7 +132,7 @@ export const usePlayerVast = ()=>{
     isAdRequested.value = false;
   }
 
-  function onAdEvent(adEvent: any) {
+  function onAdEvent(adEvent: google.ima.AdEvent) {
     const ad = adEvent.getAd();
     if(ad){
       vastStore.updateCurrentAd(ad);

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/route/useAdvancedParamInit.ts

@@ -9,7 +9,7 @@ import dayjs from "dayjs";
 
 export const useAdvancedParamInit = (props: any, isEmission: boolean)=>{
 
-  const { searchPattern,organisationId, searchMinSize, paginateFirst, initSearchPattern, initOrga} = useSimplePageParam(props);
+  const { searchPattern,organisationId, searchMinSize, paginateFirst, initSearchPattern, initOrga} = useSimplePageParam(props, false, true);
   const { isEditRights, isPodcastmaker } = useOrgaComputed();
   const { stringifyRubriquesFilter } = useRubriquesFilterParam();
 

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

@@ -12,14 +12,14 @@ export const useRouteUpdateParams = ()=>{
     return ['podcasts', 'emissions'].includes(route.name?.toString()??"");
   }
 
-  function updatePaginateSize(ps:number){
-    if(checkPage()){
+  function updatePaginateSize(ps:number, force= false){
+    if(force ||checkPage()){
       router.push({query: {...route.query, ...{ps:ps, pr:1}}});
     }
   }
 
-  function updateRouteParam(update: {[key:string]: string|undefined}){
-    if(checkPage()){
+  function updateRouteParam(update: {[key:string]: string|undefined}, force= false){
+    if(force || checkPage()){
       router.push({query: {...route.query, ...update}});
     }
   }

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

@@ -2,7 +2,7 @@ import { useFilterStore } from '../../../stores/FilterStore';
 import { useRouteUpdateParams } from './useRouteUpdateParams';
 import { computed, onMounted, Ref, ref, watch } from "vue";
 
-export const useSimplePageParam = (props: any)=>{
+export const useSimplePageParam = (props: {readonly [key:string]: string|number}, force=false, advancedSearch=false)=>{
 
   const { updateRouteParam } = useRouteUpdateParams();
 
@@ -12,18 +12,21 @@ export const useSimplePageParam = (props: any)=>{
   const searchPattern = ref("");
   const organisationId: Ref<string|undefined> = ref(undefined);
 
-  const searchMinSize = computed(() => searchPattern.value.length>3 ? searchPattern.value : "");
+  const searchMinSize = computed(() => getMinSize((props.routeQuery as string)));
   const paginateFirst = computed(() => {
     if(!props.pr){
       return 0;
     }
-    return  Math.max((props.pr - 1 ) * props.ps, 0);
+    return  Math.max(((props.pr as number) - 1 ) * (props.ps as number), 0);
   });
 
   watch(searchPattern, () => {
-    updateRouteParam({
-      q: searchMinSize.value.length ? searchMinSize.value : undefined,
-    });
+    if(!advancedSearch){
+      const query = getMinSize(searchPattern.value);
+      updateRouteParam({
+        q: query.length ? query : undefined,
+      }, force);
+    }
   });
 
   onMounted(() => {
@@ -32,11 +35,14 @@ export const useSimplePageParam = (props: any)=>{
     isInit.value = true;
   })
 
+  function getMinSize(param:string){
+    return param.length>3 ?param : ""
+  }
   function initSearchPattern(){
-    searchPattern.value = props.routeQuery ?? "";
+    searchPattern.value = (props.routeQuery as string) ?? "";
   }
   function initOrga(){
-    organisationId.value = filterStore.filterOrgaId ?? props.routeOrga;
+    organisationId.value = filterStore.filterOrgaId ?? (props.routeOrga as string);
   }
 
 
@@ -47,6 +53,7 @@ export const useSimplePageParam = (props: any)=>{
     paginateFirst,
     initSearchPattern,
     initOrga,
+    updateRouteParam,
     isInit
 	}
 }

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());
 }