@saooti/octopus-sdk 41.0.14-SNAPSHOT → 41.0.14

package/eslint.config.mjs

@@ -1,5 +1,4 @@
 import eslint from '@eslint/js';
-import eslintConfigPrettier from 'eslint-config-prettier';
 import eslintPluginVue from 'eslint-plugin-vue';
 import globals from 'globals';
 import typescriptEslint from 'typescript-eslint';
@@ -23,7 +22,10 @@ export default typescriptEslint.config(
     },
     rules: {
       // your rules
+      "curly": ['error'],
+      "no-console": ['warn', { allow: ['warn', 'error'] }],
+      "no-warning-comments": ['warn'],
+      "no-duplicate-imports": ['warn']
     },
-  },
-  eslintConfigPrettier
+  }
 );

package/index.ts

@@ -120,6 +120,7 @@ import cookiesHelper from "./src/helper/cookiesHelper.ts";
 import downloadHelper from "./src/helper/downloadHelper.ts";
 import displayHelper from "./src/helper/displayHelper.ts";
 import debounce from "./src/helper/debounceHelper.ts";
+import { deepEqual } from "./src/helper/equals.ts";
 
 //stores
 import {useVastStore} from "./src/stores/VastStore.ts";
@@ -147,6 +148,9 @@ export const getRadiolineIcon = () => import("./src/components/icons/RadiolineIc
 export const getTuninIcon = () => import("./src/components/icons/TuninIcon.vue");
 export const getXIcon = () => import("./src/components/icons/XIcon.vue");
 
+// Routing
+import { setupRouter } from './src/router/utils';
+
 export {
     useResizePhone,
     useTagOf,
@@ -175,6 +179,8 @@ export {
     ModuleApi,
     classicApi,
     cookiesHelper,
+    deepEqual,
     downloadHelper,
-    displayHelper
+    displayHelper,
+    setupRouter
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.0.14-SNAPSHOT",
+  "version": "41.0.14",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -8,6 +8,7 @@
     "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",
@@ -31,7 +32,6 @@
     "axios": "^1.9.0",
     "dayjs": "^1.11.13",
     "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",
@@ -53,6 +53,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/plateform.conf

@@ -1 +1 @@
-dev2.saooti.org
+preprod.saooti.org

package/src/App.vue

@@ -8,16 +8,14 @@
         <router-view />
         <PlayerComponent />
       </main>
-      <ClassicLazy :min-height="123">
-        <FooterOctopus />
-      </ClassicLazy>
+      <FooterOctopus />
     </template>
   </div>
 </template>
 <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";
@@ -25,9 +23,7 @@ import { useAuthStore } from "./stores/AuthStore";
 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"),
 );

package/src/api/classicApi.ts

@@ -78,7 +78,7 @@ export default {
         params.catchFunction();
       }else{
         const axiosError= error as AxiosError;
-        return Promise.reject(new Error(axiosError.message));
+        return Promise.reject(axiosError);
       }
     });
     return response?.data;

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

@@ -51,8 +51,8 @@ export const usePlayerLive = (hlsReady: Ref<boolean>)=>{
   }
 
   function playLive() {
-    if (!playerStore.playerLive) return;
-    playerStore.playerUpdatePlayerHlsUrl(`${apiStore.hlsUrl}live/dev.${playerStore.playerLive.conferenceId}/index.m3u8`);
+    if (!playerStore.playerHlsIdentifier) return;
+    playerStore.playerUpdatePlayerHlsUrl(`${apiStore.hlsUrl}live/${playerStore.playerHlsIdentifier}/index.m3u8`);
     playHls();
   }
 

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

@@ -11,7 +11,8 @@ import fetchHelper from "../../../helper/fetchHelper";
 import classicApi from "../../../api/classicApi";
 import dayjs from "dayjs";
 import { FetchParam } from "@/stores/class/general/fetchParam";
-export const usePlayerLogic = (forceHide: Ref<boolean, boolean>)=>{
+
+export const usePlayerLogic = (forceHide: Ref<boolean, boolean>) => {
   const hlsReady= ref(false);
 
   const { listenTime, onPlay, setDownloadId, onTimeUpdateProgress, playLive, endingLive, playRadio} = usePlayerLive(hlsReady);

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

@@ -2,17 +2,19 @@ import classicApi from "../../../api/classicApi";
 import { MediaRadio, MetadataRadio, NextAdvertising } from '@/stores/class/general/player';
 import { Podcast } from '@/stores/class/general/podcast';
 import dayjs from 'dayjs';
-import radioHelper from "../../../helper/radio/radioHelper";
 import {onBeforeUnmount, Ref, ref} from 'vue';
+import { useI18n } from "vue-i18n";
 export const useFetchRadio = ()=>{
 
   const radioInterval : Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);
+
+  const {t} = useI18n();
   
   async function fetchRadioMetadata(
     canalId: number,
     previousTitle: string,
     callbackMetadata: (
-      metadata: MediaRadio,
+      metadata: MediaRadio|undefined,
       podcast: Podcast | undefined,
       history: Array<MediaRadio>
     ) => void,
@@ -33,15 +35,19 @@ export const useFetchRadio = ()=>{
       callbackAdvertising(metadata.nextAdvertising);
     }
     const arrayMetadata = metadata.previously;
-    arrayMetadata.unshift(metadata.currently);
-    for (let index = 0, len = arrayMetadata.length; index < len; index++) {
-      if (
-        dayjs().valueOf() - 18000 >
-        dayjs(arrayMetadata[index].startDate).valueOf()
-      ) {
-        await useCallbackIfNewMetadata(previousTitle, arrayMetadata, index, len,callbackMetadata);
-        return;
+    if(null!==metadata.currently){
+      arrayMetadata.unshift(metadata.currently);
+      for (let index = 0, len = arrayMetadata.length; index < len; index++) {
+        if (
+          dayjs().valueOf() - 18000 >
+          dayjs(arrayMetadata[index].startDate).valueOf()
+        ) {
+          await useCallbackIfNewMetadata(previousTitle, arrayMetadata, index, len,callbackMetadata);
+          return;
+        }
       }
+    }else{
+      callbackMetadata(undefined, undefined, arrayMetadata);
     }
   }
   async function useCallbackIfNewMetadata(previousTitle: string, arrayMetadata: Array<MediaRadio>, index:number, len: number, callbackMetadata: (
@@ -63,11 +69,22 @@ export const useFetchRadio = ()=>{
       }
     }
   }
-  function displayTitle(metadata: MediaRadio): string {
-    return radioHelper.displayTitle(metadata);
+  function displayTitle(metadata: MediaRadio|undefined): string {
+    if(!metadata){
+      return t("Silent stream");
+    }
+    let title = "";
+    if (metadata?.title) {
+      title += metadata.title;
+    }
+    if (metadata?.artist) {
+      title += " - " + metadata.artist;
+    }
+    return title;
   }
 
 
+
   onBeforeUnmount(() => {
     clearInterval(radioInterval.value as unknown as number);
   })

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

@@ -29,11 +29,16 @@ export const useSimplePageParam = (props: {readonly [key:string]: string|number}
     }
   });
 
+  // When changing global organisation, update organisation here
+  watch(() => filterStore.filterOrgaId, () => {
+    organisationId.value = filterStore.filterOrgaId;
+  });
+
   onMounted(() => {
     initOrga();
     initSearchPattern();
     isInit.value = true;
-  })
+  });
 
   function getMinSize(param:string){
     return param.length>3 ?param : ""

package/src/components/display/categories/CategoryChooser.vue

@@ -17,6 +17,8 @@
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
     :display-required="displayRequired"
+    :popover="popover"
+    :popover-relative-class="popoverRelativeClass"
     @on-search="onSearchCategory"
     @selected="onCategorySelected"
   />
@@ -52,6 +54,8 @@ const props = defineProps({
   displayLabel: { default: false, type: Boolean },
   textDanger :{ default: undefined, type: String },
   displayRequired: { default: false, type: Boolean },
+  popover: { default: undefined, type: String },
+  popoverRelativeClass: { default: undefined, type: String },
 })
 
 //Emits

package/src/components/display/comments/CommentList.vue

@@ -116,8 +116,8 @@ const { t } = useI18n();
 const {handle403} = useErrorHandler();
 
 //Computed
-const changed = computed(() => `${props.size}|${props.reload}|${dsize.value}|${props.stateFilter}|${props.podcast?.podcastId}|${props.organisationId}`);
 const isNotAnAnswerList = computed(() =>  undefined === props.answerToComment);
+const changed = computed(() => `${props.size}|${props.reload}|${dsize.value}|${props.stateFilter}|${props.podcast?.podcastId}|${props.organisationId}`);
 const sortChoice = computed(() =>{
   return [
     { title: t("The most recent"), value: "DATE_DESC" },

package/src/components/display/emission/EmissionList.vue

@@ -122,8 +122,9 @@ const displayArray = computed(() => {
 });
 const displayRubriquage = computed(() => state.emissionsPage.rubriquage);
 const changePaginate = computed(() => `${props.first}|${props.size}`);
+/** Computed property to track for configuration changes */
 const changed = computed(() => {
-  return `${props.organisationId}|${props.query}|${props.monetisable}|${props.includeHidden}
+  return `${props.organisationId}|${props.query}|${props.monetisable}|${props.includeHidden}|\
   ${props.iabId}|${props.rubriqueId}|${props.rubriquageId}|${props.before}|${props.after}|${props.sort}|${props.noRubriquageId}`;
 });
 const sortText = computed(() => {

package/src/components/display/emission/EmissionPresentationItem.vue

@@ -13,9 +13,9 @@
       :class="isVertical ? 'flex-column' : ''"
     >
       <img
-        v-lazy="useProxyImageUrl(emission.imageUrl, isVertical ? '400' : '250')"
-        :width="isVertical ? '400' : '250'"
-        :height="isVertical ? '400' : '250'"
+        v-lazy="useProxyImageUrl(emission.imageUrl, tailleImage)"
+        :width="tailleImage"
+        :height="tailleImage"
         :class="isVertical ? 'img-box-bigger' : ''"
         class="img-box"
         aria-hidden="true"
@@ -49,7 +49,7 @@ import {useResizePhone} from "../../composable/useResizePhone";
 import { Emission } from "@/stores/class/general/emission";
 import {useImageProxy} from "../../composable/useImageProxy";
 import displayHelper from "../../../helper/displayHelper";
-import { nextTick, useTemplateRef, watch } from "vue";
+import { nextTick, useTemplateRef, watch, computed } from "vue";
 import { useI18n } from "vue-i18n";
 
 //Props 
@@ -69,6 +69,13 @@ const { t } = useI18n();
 const { isPhone } = useResizePhone();
 const { useProxyImageUrl } = useImageProxy();
 
+// Computed
+// Calcul de la taille de l'image
+const tailleImage = computed(() => {
+  // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
+  return props.isVertical ? '396' : '250';
+});
+
 //Watch
 watch(isPhone, async () => {
   nextTick(() => {
@@ -114,8 +121,9 @@ function urlify(text:string|undefined){
   }
 
   .img-box-bigger {
-    width: 400px;
-    height: 400px;
+    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
+    width: 396px;
+    height: 396px;
   }
 }
 </style>

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

@@ -173,7 +173,7 @@ const isSelectValidity = computed(() => {
 
 //Watch
 watch(organisation, async () => {
-  const hidden =undefined !== organisation.value && organisationRight.value &&!props.isEmission;
+  const hidden = undefined !== organisation.value && organisationRight.value && !props.isEmission;
   if (hidden !== props.includeHidden) {
     updateIncludeHidden(hidden);
   }
@@ -190,7 +190,6 @@ watch(()=>props.searchPattern, (value: string) => {
   });
 });
 
-
 //Methods
 function updateMonetisable(value: string): void {
   emit("update:monetisable", value);
@@ -253,6 +252,7 @@ function clickShowFilters(): void {
   showFilters.value = !showFilters.value;
 }
 </script>
+
 <style lang="scss">
 .octopus-app {
   .advanced-search-container {

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

@@ -28,7 +28,7 @@ import ClassicDatePicker from "../../form/ClassicDatePicker.vue";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
-//Props 
+//Props
 const props = defineProps({
   isEmission: { default: false, type: Boolean },
   fromDate: { default: undefined, type: String },
@@ -38,7 +38,7 @@ const props = defineProps({
 //Emits
 const emit = defineEmits(["updateDates"]);
 
-//Data 
+//Data
 const isActive = ref([false, false]);
 const internDates = ref([
   dayjs().subtract(10, "days").startOf("day").toDate(),
@@ -50,6 +50,17 @@ const { t } = useI18n();
 
 
 //Watch
+watch(isActive, () => {
+  emit("updateDates", {
+    from: isActive.value[0]
+      ? dayjs(internDates.value[0]).toISOString()
+      : undefined,
+    to: isActive.value[1]
+      ? dayjs(internDates.value[1]).toISOString()
+      : undefined,
+  });
+}, { deep: true });
+
 watch(()=>props.toDate, () => {
   isActive.value[1] = undefined !== props.toDate;
   if (props.toDate && props.toDate !== internDates.value[1].toISOString()) {
@@ -75,6 +86,8 @@ watch(()=>props.fromDate, () => {
 
 
 //Methods
+
+
 function updateDate(index: number, value: Date): void {
   internDates.value[index] = value;
   if (

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

@@ -72,10 +72,7 @@ const currentlyPlayingString = computed(() => {
   if (playingRadio.value && playerStore.playerRadio) {
     return displayTitle(playerStore.playerRadio.metadata);
   }
-  if (currentMetadata.value) {
-    return displayTitle(currentMetadata.value);
-  }
-  return "";
+  return displayTitle(currentMetadata.value);
 });
 
 onMounted(()=>{
@@ -102,7 +99,7 @@ async function fetchCurrentlyPlaying(): Promise<void> {
     updateMetadata,
   );
 }
-function updateMetadata(metadata: MediaRadio, podcast?: Podcast): void {
+function updateMetadata(metadata: MediaRadio|undefined, podcast?: Podcast): void {
   currentMetadata.value = metadata;
   currentPodcast.value = podcast;
 }

package/src/components/display/organisation/OrganisationChooserLight.vue

@@ -1,66 +1,64 @@
 <template>
-   <ClassicSelect
-      v-if="(!value || init) && organisation"
-      v-model:text-init="actual"
-      :display-label="false"
-      id-select="organisation-chooser-footer"
-      :label="t('select productor')"
-      :transparent="true"
-      :options="[
-        { title: organisation.name, value: organisation.id },
-        { title: t('No organisation filter'), value: 'NONE' },
-      ]"
-      class="my-1"
-    />
+  <ClassicSelect
+    v-if="init && organisation"
+    :text-init="actual"
+    :display-label="false"
+    id-select="organisation-chooser-footer"
+    :label="t('select productor')"
+    :transparent="true"
+    :options="[
+      { title: organisation.name, value: organisation.id },
+      { title: t('No organisation filter'), value: 'NONE' },
+    ]"
+    class="my-1"
+    @update:text-init="updateOrganisation"
+  />
 </template>
 
 <script setup lang="ts">
 import ClassicSelect from "../../form/ClassicSelect.vue";
 import { Organisation } from "@/stores/class/general/organisation";
 import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
-import { Ref, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-
-
-//Props 
-const props = defineProps({
-  value: { default: undefined, type: String },
-  reset: { default: false, type: Boolean },
-})
+import { useFilterStore } from "../../../stores/FilterStore";
 
 //Emits
 const emit = defineEmits(["selected"]);
 
 //Data 
-const actual = ref("NONE");
-const organisation: Ref<Organisation | undefined> = ref(undefined);
+const organisation = ref<Organisation|undefined>(undefined);
 const init = ref(false);
 
 //Composables
 const { t } = useI18n();
 const SaveFetchStore = useSaveFetchStore();
+const filterStore = useFilterStore();
 
+// Computed
+const actual = computed(() => {
+  if (filterStore.filterOrgaId) {
+    return filterStore.filterOrgaId;
+  } else {
+    return 'NONE';
+  }
+});
 
 //Watch
-watch(()=>props.value, async () => {
-  if (!init.value || props.value) {
-    fetchOrganisation();
-  }
+watch(()=>filterStore.realOrgaId, async () => {
+  fetchOrganisation();
 }, {deep: true, immediate: true});
-watch(()=>props.reset, async () => {
-  actual.value = "NONE";
-});
-watch(actual, async () => {
-  emit("selected","NONE" === actual.value ? undefined : organisation.value);
-});
  
 //Methods
 async function fetchOrganisation(): Promise<void> {
-  if (!props.value) {
+  if (!filterStore.realOrgaId) {
     return;
   }
-  organisation.value = await SaveFetchStore.getOrgaData(props.value);
-  actual.value = organisation.value.id;
+  organisation.value = await SaveFetchStore.getOrgaData(filterStore.realOrgaId);
   init.value = true;
 }
+
+function updateOrganisation(value: string): void {
+  emit("selected", "NONE" === value ? undefined : organisation.value);
+}
 </script>

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

@@ -211,7 +211,10 @@ function play(isVideo: boolean): void {
     playerStore.playerPlay(
       {
         ...props.podcast,
-        ...{ conferenceId: props.fetchConference?.conferenceId },
+        ...{ 
+          conferenceId: props.fetchConference?.conferenceId,
+          hlsIdentifier: props.fetchConference?.hlsIdentifier,
+        },
       },
       isVideo,
     );
@@ -225,6 +228,8 @@ function play(isVideo: boolean): void {
     position: absolute;
     inset: 0;
     background-color:var(--octopus-background-transparent);
+    // Allow pointer events to go through (allow click on image beneath blur)
+    pointer-events: none;
   }
 
   .live-image-status {

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

@@ -7,7 +7,7 @@
     :display-label="displayLabel"
     :label="label ?? t('By rubric')"
     :text-danger="textDanger"
-    :placeholder="t('Type string to filter by categories')"
+    :placeholder="placeholderText"
     :max-element="maxElement"
     :multiple="multiple"
     :min-search-length="1"
@@ -30,8 +30,14 @@ import { useI18n } from "vue-i18n";
 const props = defineProps({
   defaultanswer: { default: "", type: String },
   width: { default: "100%", type: String },
+  /**
+   * Active la sélection multiple
+   */
   multiple: { default: false, type: Boolean },
   reset: { default: false, type: Boolean },
+  /**
+   * Les rubriques à afficher
+   */
   allRubriques: { default: () => [], type: Array as () => Array<Rubrique> },
   rubriqueSelected: { default: undefined, type: Number },
   rubriqueSelectedArray: {
@@ -46,6 +52,10 @@ const props = defineProps({
   label:{default: undefined, type: String },
   displayLabel: { default: false, type: Boolean },
   textDanger :{ default: undefined, type: String },
+  /**
+   * Le texte affiché là où l'utilisateur doit effectuer sa saisie
+   */
+  placeholder: { type: String, required: false, default: undefined }
 })
 
 
@@ -55,7 +65,9 @@ const emit = defineEmits([
   "update:rubriqueSelectedArray",
   "selected"
 ]);
-//COmposables
+
+
+//Composables
 const { t } = useI18n();
 
 
@@ -102,6 +114,16 @@ const model = computed({
   },
 })
 
+/**
+ * Le texte à afficher dans la saisie de l'utilisateur
+ */
+const placeholderText = computed(() => {
+  if (props.placeholder) {
+    return props.placeholder;
+  } else {
+    return t('Type string to filter by categories');
+  }
+});
 
 //Watch
 watch(()=>props.rubriqueSelected, () => {

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

@@ -1,6 +1,8 @@
 <template>
   <div class="d-inline-flex w-100 mb-3 px-3 hide-phone">
     <div ref="rubriqueListContainer" class="rubrique-list-container">
+
+      <!-- Liste déroulante pour sélectionner le rubriquage -->
       <select
         v-model="rubriquage"
         :title="t('By topic')"
@@ -15,6 +17,8 @@
           {{ myRubriquage.title }}
         </option>
       </select>
+
+      <!-- Boutons de sélection de la rubrique -->
       <button
         v-for="rubrique in rubriqueDisplay"
         :id="'rubrique' + rubrique.rubriqueId"
@@ -25,6 +29,8 @@
         {{ rubrique.name }}
       </button>
     </div>
+
+    <!-- Bouton pour afficher les rubriques cachées -->
     <button
       v-show="hidenRubriques.length"
       id="rubriques-dropdown"
@@ -33,6 +39,8 @@
     >
       <PlusIcon />
     </button>
+
+    <!-- Popup de sélection des rubriques cachées -->
     <ClassicPopover
       ref="popoverRubrique"
       target="rubriques-dropdown"
@@ -43,6 +51,7 @@
         v-if="hidenRubriques.length"
         class="rubrique-chooser-minwidth"
         :all-rubriques="hidenRubriques"
+        :placeholder="rubriqueChooserText"
         @selected="addFilterFromPopover($event)"
       />
     </ClassicPopover>
@@ -107,6 +116,15 @@ const rubriquageDisplay = computed(() => {
   });
 });
 
+// Retourne le texte à afficher dans le RubriqueChooser
+const rubriqueChooserText = computed(() => {
+  if (!rubriquage.value) {
+    return '';
+  }
+  let topic = rubriquage.value.title;
+  return t('Enter name of topic', { topic });
+});
+
 
 //Watch
 watch(()=>filterStore.filterRubrique, () => {