@saooti/octopus-sdk 41.0.13 → 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.13",
+  "version": "41.0.14",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -32,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",

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/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/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/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/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

@@ -228,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/form/ClassicCheckbox.vue

@@ -2,7 +2,7 @@
   <div class="d-flex flex-nowrap align-items-center octopus-form-item">
     <div :class="isSwitch ? 'octopus-form-switch me-2' : ''">
       <input
-        :id="idCheckbox"
+        :id="computedIdCheckbox"
         :checked="textInit"
         type="checkbox"
         :disabled="isDisabled"
@@ -16,26 +16,35 @@
         v-if="isSwitch"
         class="slider btn-transparent"
         :title="label"
+        :disabled="isDisabled"
         @click="clickSlider"
         @keydown.space.prevent="clickSlider"
       />
     </div>
     <label
       class="c-hand"
-      :class="[classLabel, displayLabel ? '' : 'd-none']"
-      :for="idCheckbox"
-      >{{ label }}</label
+      :class="[classLabel, displayLabel ? '' : 'd-none', isDisabled ? 'disabled' : '']"
+      :for="computedIdCheckbox"
     >
+      {{ label }}
+    </label>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue';
+
 //Props 
 const props = defineProps({
+  /** The ID for the checkbox input */
   idCheckbox: { default: "", type: String },
+  /** The label to display with the checkbox */
   label: { default: "", type: String },
+  /** Disables input */
   isDisabled: { default: false, type: Boolean },
+  /** The value of the checkbox */
   textInit: { default: false, type: Boolean },
+  /** If true, displays a switch instead of a checkbox */
   isSwitch: { default: false, type: Boolean },
   displayLabel: { default: true, type: Boolean },
   classLabel: { default: "", type: String },
@@ -45,6 +54,11 @@ const props = defineProps({
 //Emits
 const emit = defineEmits(["update:textInit", "clickAction"]);
 
+// Computed
+const computedIdCheckbox = computed(() => {
+  return props.idCheckbox || 'checkbox-' + getCurrentInstance()?.uid;
+});
+
 //Methods
 function emitClickAction(): void {
   emit("clickAction");
@@ -59,6 +73,12 @@ function clickSlider() {
 
 <style lang="scss">
 .octopus-app {
+
+  label.disabled {
+    color: var(--octopus-text-disabled);
+    cursor: default;
+  }
+
   .octopus-form-switch {
     position: relative;
     display: inline-block;
@@ -92,6 +112,11 @@ function clickSlider() {
       border-radius: 50%;
     }
 
+    .slider:disabled::before {
+      background-color: var(--octopus-text-disabled);
+      opacity: 0.6;
+    }
+
     input:checked + .slider {
       background-color: var(--octopus-primary);
     }

package/src/components/form/ClassicInputText.vue

@@ -8,14 +8,14 @@
       <component
         :is="isWysiwyg? 'div': 'label'"
         :class="[classLabel, displayLabel ? '' : 'd-none']"
-        :for="isWysiwyg ? '': inputId"
+        :for="isWysiwyg ? '': computedInputId"
         >{{ label }}
         <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
       </component>
       <slot name="afterTitle"/>
       <template v-if="popover">
         <button
-          :id="'popover' + inputId"
+          :id="'popover' + computedInputId"
           :title="t('Help')"
           class="btn-transparent"
         >
@@ -23,7 +23,7 @@
         </button>
 
         <ClassicPopover
-          :target="'popover' + inputId"
+          :target="'popover' + computedInputId"
           popover-class="popover-z-index"
           :relative-class="popoverRelativeClass"
         >
@@ -38,7 +38,7 @@
     <input
       v-if="!isWysiwyg && !isTextarea"
       v-show="showField"
-      :id="inputId"
+      :id="computedInputId"
       ref="focusElement"
       v-model="textValue"
       :type="typeInput"
@@ -59,7 +59,7 @@
     <textarea
       v-else-if="isTextarea"
       v-show="showField"
-      :id="inputId"
+      :id="computedInputId"
       ref="focusElement"
       v-model="textValue"
       :data-selenium="dataSelenium"
@@ -113,10 +113,11 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
-import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { computed, defineAsyncComponent, onMounted, Ref, ref, useTemplateRef, watch, getCurrentInstance } from "vue";
 import { useI18n } from "vue-i18n";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
@@ -132,6 +133,7 @@ const ClassicEmojiPicker = defineAsyncComponent(
 const props = defineProps({
   inputId: { default: "", type: String },
   label: { default: "", type: String },
+  /** The input's value */
   textInit: { default: undefined, type: String },
   maxLength: { default: 0, type: Number },
   errorText: { default: "", type: String },
@@ -141,6 +143,7 @@ const props = defineProps({
   canBeNull: { default: false, type: Boolean },
   inputMaxLengthField: { default: undefined, type: Number },
   errorVariable: { default: true, type: Boolean },
+  /** Disable the text input */
   isDisable: { default: false, type: Boolean },
   indicText: { default: "", type: String },
   dataSelenium: { default: "", type: String },
@@ -171,6 +174,7 @@ const focusElementRef = useTemplateRef('focusElement');
 const { t } = useI18n();
 
 //Computed
+const computedInputId = computed(() => props.inputId || 'input-' + getCurrentInstance()?.uid);
 const isError = computed(() => !valueTrimValid.value || !valueLengthValid.value || !valueRegexValid.value);
 const countValue = computed(() => {
   if (textValue.value) {
@@ -239,6 +243,7 @@ function addEmojiSelected(emoji: string) {
   textValue.value = (textValue.value ?? "") + emoji;
 }
 </script>
+
 <style lang="scss">
 .octopus-app .classic-input-text {
   .text-indic {

package/src/components/misc/ClassicLazy.vue

@@ -4,9 +4,10 @@
     <slot v-else name="preview" />
   </div>
 </template>
+
 <script setup lang="ts">
 import { useIntersectionObserver } from "@vueuse/core";
-import { ref, nextTick, watch } from "vue";
+import { ref, nextTick, watch, onMounted } from "vue";
 
 //Props
 const props = defineProps({
@@ -37,8 +38,8 @@ const { pause, resume } = useIntersectionObserver(
     if (isIntersecting) {
       // perhaps the user re-scrolled to a component that was set to unrender. In that case stop the unrendering timer
       clearTimeout(unrenderTimer);
-      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
 
+      // if we're dealing underndering lets add a waiting period of 200ms before rendering. If a component enters the viewport and also leaves it within 200ms it will not render at all. This saves work and improves performance when user scrolls very fast
       renderTimer = setTimeout(
         () => {
           shouldRender.value = true;
@@ -46,6 +47,7 @@ const { pause, resume } = useIntersectionObserver(
         },
         props.unrender ? 200 : 0,
       );
+
       if (!props.unrender) {
         pause();
       }
@@ -64,18 +66,27 @@ const { pause, resume } = useIntersectionObserver(
 );
 
 //Logic
-setTimeout(() => {
-  waitBeforeInit.value = false;
-}, props.initRenderDelay);
-if (props.renderOnIdle) {
-  onIdle(() => {
-    shouldRender.value = true;
-    emit("isRender", true);
-    if (!props.unrender) {
-      pause();
-    }
-  });
-}
+onMounted(() => {
+  if (props.initRenderDelay <= 0) {
+    // If there's no render delay, do not delay initialization
+    waitBeforeInit.value = false;
+  } else {
+    // Otherwise delay initialization
+    setTimeout(() => {
+      waitBeforeInit.value = false;
+    }, props.initRenderDelay);
+  }
+
+  if (props.renderOnIdle) {
+    onIdle(() => {
+      shouldRender.value = true;
+      emit("isRender", true);
+      if (!props.unrender) {
+        pause();
+      }
+    });
+  }
+});
 
 //Watch
 watch(

package/src/components/misc/ClassicNav.vue

@@ -1,3 +1,6 @@
+<!--
+  Component to make a tab-based navigation
+-->
 <template>
   <ul class="octopus-nav" :class="light ? 'light' : ''">
     <li

package/src/components/misc/FooterSection.vue

@@ -5,11 +5,17 @@
     role="contentinfo"
     class="d-flex align-items-center justify-content-between border-top mt-auto"
   >
-    <div v-if="!state.generalParameters.podcastmaker" class="d-flex flex-column px-1">
+    <div
+      v-if="!state.generalParameters.podcastmaker"
+      class="d-flex flex-column px-1"
+    >
       <div class="text-dark my-1 special-select-align-magic-trick">
         &copy; Saooti 2025
       </div>
-      <FooterGarSection v-if="authStore.isGarRole" :auth-orga-id="authStore.authOrgaId" />
+      <FooterGarSection
+        v-if="authStore.isGarRole"
+        :auth-orga-id="authStore.authOrgaId"
+      />
       <nav :aria-label="t('Site menu')">
         <ul class="p-0 m-0">
           <li 
@@ -43,13 +49,11 @@
         class="my-1"
       />
       <OrganisationChooserLight
-        v-if="!state.generalParameters.podcastmaker && organisationId && authenticated"
+        v-if="!state.generalParameters.podcastmaker && authenticated"
         page="footer"
         width="auto"
         class="my-1"
         :defaultanswer="t('No organisation filter')"
-        :value="organisationId"
-        :reset="reset"
         @selected="onOrganisationSelected"
       />
     </div>
@@ -83,7 +87,7 @@ import { useFilterStore } from "../../stores/FilterStore";
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useAuthStore } from "../../stores/AuthStore";
 import { Category } from "@/stores/class/general/category";
-import { computed, defineAsyncComponent, Ref, ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { Organisation } from "@/stores/class/general/organisation";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
@@ -98,8 +102,6 @@ const { t, locale } = useI18n();
 
 //Data 
 const language = ref(locale);
-const reset = ref(false);
-const organisationId: Ref<string | undefined> = ref(undefined);
 
 //Composables
 const generalStore = useGeneralStore();
@@ -127,15 +129,6 @@ const routerLinkSecondArray = computed(() => {
 
 //Watch
 watch(language, () => changeLanguage());
-watch(()=>filterStore.filterOrgaId, () => {
-  if (filterStore.filterOrgaId) {
-    organisationId.value = filterStore.filterOrgaId;
-  } else {
-    reset.value = !reset.value;
-  }
-}, {immediate: true});
-
-
 
 //Methods
 function changeLanguage(): void {
@@ -164,15 +157,20 @@ function changeLanguage(): void {
     }
   });
 }
+
+/**
+ * Select another organisation
+ * @param organisation The new organisation to focus on, or undefined to remove focus
+ */
 async function onOrganisationSelected( organisation: Organisation | undefined): Promise<void> {
+  // TODO use router utils
   if (organisation?.id) {
     router.push({
-      query: { ...route.query, ...{ productor: organisation.id, o:undefined } },
+      query: { ...route.query, ...{ productor: organisation.id, o:undefined, displayAll: "false" } },
     });
   }else{
-    organisationId.value = undefined;
     router.push({
-      query: { ...route.query, ...{ productor: undefined } },
+      query: { ...route.query, ...{ productor: undefined, displayAll: "true" } },
     });
   }
 }

package/src/components/misc/TopBarMainContent.vue

@@ -13,22 +13,20 @@
         :src="logoUrl"
         aria-hidden="true"
         alt=""
-        
         width="140"
         height="50"
         title="Logo"
         :class="generalStore.platformEducation ? 'education-logo' : 'octopus-logo'"
-      />
+      >
       <img
         v-else
         :src="useProxyImageUrl(imgUrl, '', '80')"
         aria-hidden="true"
         alt=""
-        
         class="client-logo"
         title="Logo"
         :class="generalStore.platformEducation ? 'education-logo' : ''"
-      />
+      >
     </router-link>
     <h1 v-if="titleIsDisplayed" class="text-truncate m-0 align-self-center">
       {{ titleDisplay }}
@@ -46,14 +44,13 @@
           v-if="authStore.isGarRole"
           :src="logoUrl"
           aria-hidden="true"
-        alt=""
-          
+          alt=""
           width="100"
           height="29"
           class="ms-2"
           title="Logo"
           :class="generalStore.platformEducation ? 'education-logo' : 'octopus-logo'"
-        />
+        >
         <a
           v-else
           href="https://www.saooti.com/"
@@ -64,14 +61,14 @@
           <img
             :src="logoUrl"
             aria-hidden="true"
-        alt=""
+            alt=""
             
             title="Saooti"
             width="100"
             height="29"
             class="ms-2"
             :class="generalStore.platformEducation ? 'education-logo' : 'octopus-logo'"
-          />
+          >
         </a>
       </template>
       <div role="navigation" class="d-flex align-items-center justify-content-end flex-grow-1">
@@ -128,10 +125,11 @@
                     {{ link.title }}
                   </router-link>
                 </li>
-            </template>
+              </template>
             </ul>
           </nav>
         </ClassicPopover>
+
         <MobileMenu
           :is-education="generalStore.platformEducation"
           :show="mobileMenuDisplay"

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

@@ -48,8 +48,11 @@ import { useI18n } from "vue-i18n";
 //Props 
 defineProps({
   idModal: { default: undefined, type: String },
+  /** The title of the modal */
   titleModal: { default: undefined, type: String },
+  /** If false, the modal won't display a close button (default: true) */
   closable: { default: true, type: Boolean },
+  /** If true, the modal can be reduced to show only the header (default: false) */
   canBeReduced: { default: false, type: Boolean },
 })
 
@@ -79,6 +82,7 @@ function closePopup(): void {
   emit("close");
 }
 </script>
+
 <style lang="scss">
 
 .octopus-app .octopus-modal.octopus-modal-top-layer{

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

@@ -39,6 +39,7 @@
     </button>
   </div>
 </template>
+
 <script setup lang="ts">
 import ChevronUpIcon from "vue-material-design-icons/ChevronUp.vue";
 import WindowCloseIcon from "vue-material-design-icons/WindowClose.vue";

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

@@ -52,6 +52,7 @@
     </template>
   </section>
 </template>
+
 <script setup lang="ts">
 import {usePlayerLogic} from "../../composable/player/usePlayerLogic";
 import { usePlayerStore } from "../../../stores/PlayerStore";

package/src/components/pages/HomePage.vue

@@ -14,7 +14,7 @@
           :button-text="t('All podcast button', { name: c.name })"
         />
         <template #preview>
-          <div style="min-height: 650px"></div>
+          <div style="min-height: 650px" />
         </template>
       </ClassicLazy>
     </template>
@@ -33,7 +33,7 @@
           :button-text="t('All podcast button', { name: r.name })"
         />
         <template #preview>
-          <div style="min-height: 650px"></div>
+          <div style="min-height: 650px" />
         </template>
       </ClassicLazy>
       <template v-if="rubriqueDisplay && rubriqueDisplay.length > 0">
@@ -129,8 +129,9 @@ const categories = computed(() => {
     });
   } else {
     arrayCategories = generalStore.storedCategories.filter((c: Category) => {
-      if (state.generalParameters.podcastmaker)
+      if (state.generalParameters.podcastmaker) {
         return c.podcastOrganisationCount;
+      }
       return c.podcastCount;
     });
   }

package/src/components/pages/PodcastsPage.vue

@@ -38,6 +38,7 @@
     />
   </section>
 </template>
+
 <script setup lang="ts">
 import PodcastList from "../display/podcasts/PodcastList.vue";
 import ProductorSearch from "../display/filter/ProductorSearch.vue";
@@ -85,7 +86,6 @@ const {
   isInit
 } = useAdvancedParamInit(props, false);
 
-
 //Computed
 const orgaArray = computed(() => organisationId.value ? [organisationId.value] : []);
 const withVideo = computed(() => false === onlyVideo.value ? undefined : true);

package/src/helper/equals.ts

@@ -0,0 +1,26 @@
+export function deepEqual(obj1: any, obj2: any) {
+
+    if(obj1 === obj2) // it's just the same object. No need to compare.
+        {return true;}
+
+    if(isPrimitive(obj1) && isPrimitive(obj2)) // compare primitives
+        {return obj1 === obj2;}
+
+    if(Object.keys(obj1).length !== Object.keys(obj2).length) {
+        return false;
+    }
+
+    // compare objects with same number of keys
+    for(const key in obj1)
+    {
+        if(!(key in obj2)) {return false;} //other object doesn't have this prop
+        if(!deepEqual(obj1[key], obj2[key])) {return false;}
+    }
+
+    return true;
+}
+
+//check if value is primitive
+function isPrimitive(obj: unknown) {
+    return (obj !== Object(obj));
+}

package/src/router/router.ts

@@ -4,12 +4,10 @@ import {
   RouteLocationNormalized,
   RouteRecordRaw,
 } from "vue-router";
-import { useFilterStore } from "../stores/FilterStore";
-import { useSaveFetchStore } from "@/stores/SaveFetchStore";
-import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 import classicApi from "@/api/classicApi";
-import { useAuthStore } from "../stores/AuthStore";
+import { AuthStore } from "../stores/AuthStore";
 import fetchHelper from "@/helper/fetchHelper";
+import { setupRouter } from "./utils";
 
 /*--------------------------------------------------------------------------
 Composants publics
@@ -334,13 +332,16 @@ const router = createRouter({
   history: createWebHistory(),
   routes: routes,
   scrollBehavior(to, from) {
-    if (to.name === from.name && to.meta.noScroll) return false;
-    return { left: 0, top: 0 };
+    if (to.name === from.name && to.meta.noScroll) {
+      return false;
+    } else {
+      return { left: 0, top: 0 };
+    }
   },
 });
 
 //Do in frontoffice but not podcastmakers
-async function getMyOrgaActive(authStore: any): Promise<string>{
+async function getMyOrgaActive(authStore: AuthStore): Promise<string>{
   const orgaActive = await classicApi.fetchData<string>({
     api: 3,
     path: "user/active"
@@ -352,72 +353,7 @@ async function getMyOrgaActive(authStore: any): Promise<string>{
   }
   return orgaActive;
 }
-async function changeOrgaFilter(orgaFilter: string, filterStore: any){
-  const saveStore = useSaveFetchStore();
-  const response = await saveStore.getOrgaData(orgaFilter);
-  const data = await classicApi.fetchData<Array<Rubriquage>>({
-    api: 0,
-    path: "rubriquage/find/" + orgaFilter,
-    parameters: {
-      sort: "HOMEPAGEORDER",
-      homePageOrder: true,
-    },
-    specialTreatement: true,
-  });
-  const isLive = await saveStore.getOrgaLiveEnabled(orgaFilter);
-  filterStore.filterUpdateOrga({
-    orgaId: orgaFilter,
-    imgUrl: response.imageUrl,
-    name: response.name,
-    rubriquageArray: data.filter((element: Rubriquage) => {
-      return element.rubriques.length;
-    }),
-    isLive: isLive,
-  });
-}
-let fetchMyOrgaActive = false;
-router.beforeResolve(async () =>{
-  fetchMyOrgaActive = false;
-});
-router.beforeEach(async (to, from) => {
-  if ("/logout" === to.path && "/logout" !== from.path) {
-    setTimeout(() => {
-      window.location.reload(true);
-    }, 500);
-  }
-  const authStore = useAuthStore();
-  const filterStore = useFilterStore();
-  
-  const isSamePath = to.matched[0]?.path === from.matched[0]?.path && to.path.includes(from.path);
-  let orgaToFocus = isSamePath ? (to.query.productor?.toString() ?? undefined) : undefined;
 
-  if(authStore.authProfile){
-    if(!isSamePath && !fetchMyOrgaActive){
-      await getMyOrgaActive(authStore);
-      fetchMyOrgaActive = true;
-    }
-    if(undefined!==orgaToFocus){
-      orgaToFocus = authStore.authOrgaId;
-    }
-  }
-  if (isSamePath && orgaToFocus !== from.query.productor) {
-    if (undefined === orgaToFocus) {
-      filterStore.filterUpdateOrga({ orgaId: undefined });
-    } else if (filterStore.filterOrgaId !== orgaToFocus) {
-      await changeOrgaFilter(orgaToFocus, filterStore);
-    }
-  }
-  if (
-    "/logout" !== to.path &&
-    filterStore.filterOrgaId !== to.query.productor &&
-    undefined !== filterStore.filterOrgaId
-  ) {
-    return {
-      path: to.path,
-      query: { ...to.query, ...{ productor: filterStore.filterOrgaId } },
-      params: to.params,
-      name: to.name,
-    };
-  }
-});
+setupRouter(router, getMyOrgaActive);
+
 export default router;

package/src/router/utils.ts

@@ -0,0 +1,112 @@
+import { Router } from "vue-router";
+import { useFilterStore, FilterStore } from "../stores/FilterStore";
+import { useSaveFetchStore } from "../stores/SaveFetchStore";
+import { Rubriquage } from "../stores/class/rubrique/rubriquage";
+import classicApi from "../api/classicApi";
+import { useAuthStore, AuthStore } from "../stores/AuthStore";
+import { deepEqual } from "../helper/equals";
+
+async function changeOrgaFilter(orgaFilter: string, filterStore: FilterStore){
+  const saveStore = useSaveFetchStore();
+  const response = await saveStore.getOrgaData(orgaFilter);
+  const data = await classicApi.fetchData<Array<Rubriquage>>({
+    api: 0,
+    path: "rubriquage/find/" + orgaFilter,
+    parameters: {
+      sort: "HOMEPAGEORDER",
+      homePageOrder: true,
+    },
+    specialTreatement: true,
+  });
+  const isLive = await saveStore.getOrgaLiveEnabled(orgaFilter);
+  filterStore.filterUpdateOrga({
+    orgaId: orgaFilter,
+    imgUrl: response.imageUrl,
+    name: response.name,
+    rubriquageArray: data.filter((element: Rubriquage) => {
+      return element.rubriques.length;
+    }),
+    isLive: isLive,
+  });
+}
+
+let fetchMyOrgaActive = false;
+/** Variable used to apply beforeEach redirect only once */
+let resolved = false;
+
+/**
+ * Utility function seting up the router with a custom beforeEach
+ */
+export function setupRouter(router: Router, getMyOrgaActive: (authStore: AuthStore) => Promise<string>): void {
+  router.beforeResolve(async () =>{
+    fetchMyOrgaActive = false;
+    // Reinit variable to allow one redirect
+    resolved = false;
+  });
+
+  // Navigation guard that updates current organisation & may make redirects
+  router.beforeEach(async (to, from) => {
+
+    if ("/logout" === to.path && "/logout" !== from.path) {
+      setTimeout(() => {
+        window.location.reload(true);
+      }, 500);
+    }
+    const authStore = useAuthStore();
+    const filterStore = useFilterStore();
+    
+    const isSamePath = to.matched[0]?.path === from.matched[0]?.path && to.path.includes(from.path);
+    let orgaToFocus = isSamePath ? (to.query.productor?.toString() ?? undefined) : undefined;
+
+    if(authStore.authProfile){
+      if(!isSamePath && !fetchMyOrgaActive){
+        await getMyOrgaActive(authStore);
+        fetchMyOrgaActive = true;
+      }
+      if(undefined!==orgaToFocus){
+        orgaToFocus = authStore.authOrgaId;
+      }
+    }
+
+    // Update organisation
+    if (isSamePath && orgaToFocus !== from.query.productor) {
+      if (filterStore.filterOrgaId !== orgaToFocus && orgaToFocus !== undefined) {
+        await changeOrgaFilter(orgaToFocus, filterStore);
+      }
+    }
+
+    // Only change target if not going to logout and not already resolved
+    if ("/logout" !== to.path && resolved !== true) {
+      resolved = true;
+      const newQuery = {
+        ...to.query
+      };
+
+      // Set productor
+      if (to.query.productor) {
+        newQuery.productor = to.query.productor;
+      } else if (filterStore.filterOrgaId === undefined) {
+        delete newQuery.productor;
+      } else {
+        newQuery.productor = filterStore.filterOrgaId;
+      }
+
+      // Enable 'displayAll' mode if already active
+      if ((from.query.displayAll === "true" || to.query.displayAll === "true") && to.query.displayAll !== "false") {
+        newQuery.displayAll = "true";
+      } else {
+        delete newQuery.displayAll;
+      }
+
+      // If the queries are different, update path
+      if (!deepEqual(newQuery, to.query)) {
+        return {
+          path: to.path,
+          query: { ...newQuery },
+          params: to.params,
+          name: to.name,
+        };
+      }
+    }
+  });
+}

package/src/stores/AuthStore.ts

@@ -5,12 +5,14 @@ import { defineStore } from "pinia";
 import { KeycloakInfo } from "@/stores/class/user/person";
 import { VideoConfig } from "@/stores/class/config/videoConfig";
 import classicApi from "../api/classicApi";
+
 interface AuthParam{
   accessToken?: string;
   refreshToken?: string;
   expiration?: Date|string;
   clientId?: string;
 }
+
 interface AuthState {
   authReload: number;
   authName: string;
@@ -231,3 +233,6 @@ export const useAuthStore = defineStore("AuthStore", {
     },
   },
 });
+
+/** Type for the AuthStore */
+export type AuthStore = ReturnType<typeof useAuthStore>;

package/src/stores/FilterStore.ts

@@ -1,73 +1,128 @@
-import { Category } from "@/stores/class/general/category";
-import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
-import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
-import { Rubrique } from "@/stores/class/rubrique/rubrique";
-import { defineStore } from "pinia";
+import { computed, ref } from 'vue';
 
-interface FilterState {
-  filterOrgaId?: string;
-  filterImgUrl?: string;
-  filterName?: string;
-  filterRubriquage: Array<Rubriquage>;
-  filterRubrique: Array<RubriquageFilter>;
-  filterRubriqueDisplay: Array<Rubrique>;
-  filterTypeMedia?: string;
-  filterSortOrder?: string;
-  filterSortField?: string;
-  filterLive?: boolean;
-  filterIab?: Category;
-}
-export const useFilterStore = defineStore("FilterStore", {
-  state: (): FilterState => ({
-    filterRubriquage: [],
-    filterRubrique: [],
-    filterRubriqueDisplay: [],
-    filterLive: false,
-  }),
-  actions: {
-    filterUpdateOrga(filter: {
-      orgaId?: string;
-      imgUrl?: string;
-      name?: string;
-      rubriquageArray?: Array<Rubriquage>;
-      isLive?: boolean;
-    }) {
-      if (filter.imgUrl || !filter.orgaId) {
-        this.filterImgUrl = filter.imgUrl;
-      }
-      if (filter.name || !filter.orgaId) {
-        this.filterName = filter.name;
-      }
-      if (filter.rubriquageArray) {
-        this.filterRubriquage = filter.rubriquageArray;
-      }
-      this.filterLive = filter.isLive;
-      this.filterIab = undefined;
-      this.filterOrgaId = filter.orgaId;
-    },
-    filterUpdateIab(iab?: Category) {
-      this.filterIab = iab;
-    },
-    filterUpdateRubrique(rubriqueFilter: Array<RubriquageFilter>) {
-      this.filterRubrique = rubriqueFilter;
-    },
-    filterUpdateRubriqueDisplay(rubriques: Array<Rubrique>) {
-      this.filterRubriqueDisplay = rubriques.filter(rubrique=> rubrique);
-    },
-    filterUpdateMedia(filter: {
-      type?: string;
-      order?: string;
-      field?: string;
-    }) {
-      if (filter.type) {
-        this.filterTypeMedia = filter.type;
-      }
-      if (filter.order) {
-        this.filterSortOrder = filter.order;
-      }
-      if (filter.field) {
-        this.filterSortField = filter.field;
-      }
-    },
-  },
+import { Category } from '@/stores/class/general/category';
+import { Rubriquage } from '@/stores/class/rubrique/rubriquage';
+import { RubriquageFilter } from '@/stores/class/rubrique/rubriquageFilter';
+import { Rubrique } from '@/stores/class/rubrique/rubrique';
+import { defineStore } from 'pinia';
+import { useAuthStore } from './AuthStore';
+import { useRoute } from 'vue-router';
+
+/**
+ * Store managing data regarding the filters to apply to know which
+ * podcasts to show.
+ */
+export const useFilterStore = defineStore("FilterStore", () => {
+  const _filterOrgaId = ref<string|null>(null);
+  const filterImgUrl = ref<string>();
+  const filterName = ref<string>();
+  const filterRubriquage = ref<Array<Rubriquage>>([]);
+  const filterRubrique = ref<Array<RubriquageFilter>>([]);
+  const filterRubriqueDisplay = ref<Array<Rubrique>>([]);
+  const filterTypeMedia = ref<string>();
+  const filterSortOrder = ref<string>();
+  const filterSortField = ref<string>();
+  const filterLive = ref<boolean>(false);
+  const filterIab = ref<Category>();
+
+  const route = useRoute();
+  const authStore = useAuthStore();
+
+  /**
+   * ID of the current organisation.
+   */
+  const filterOrgaId = computed((): string|undefined => {
+    if (route?.query.displayAll === "true") {
+      return undefined;
+    } else if (route?.query.productor) {
+      return route.query.productor as string;
+    } else if(_filterOrgaId.value === null) {
+      return authStore.authOrgaId;
+    } else {
+      return _filterOrgaId.value ?? undefined;
+    }
+  });
+
+  /**
+   * The ID of the current organisation, regardless of other options.
+   * Use this if you want to know the organisation of the user even in
+   * unfocused mode (ie displayAll = true)
+   */
+  const realOrgaId = computed(() => {
+    return _filterOrgaId.value ?? undefined;
+  });
+
+  function filterUpdateOrga(filter: {
+    orgaId?: string;
+    imgUrl?: string;
+    name?: string;
+    rubriquageArray?: Array<Rubriquage>;
+    isLive?: boolean;
+  }) {
+    if (filter.imgUrl || !filter.orgaId) {
+      filterImgUrl.value = filter.imgUrl;
+    }
+    if (filter.name || !filter.orgaId) {
+      filterName.value = filter.name;
+    }
+    if (filter.rubriquageArray) {
+      filterRubriquage.value = filter.rubriquageArray;
+    }
+    filterLive.value = filter.isLive ?? false;
+    filterIab.value = undefined;
+    _filterOrgaId.value = filter.orgaId ?? null;
+  }
+
+  function filterUpdateIab(iab?: Category) {
+    filterIab.value = iab;
+  }
+
+  function filterUpdateRubrique(rubriqueFilter: Array<RubriquageFilter>) {
+    filterRubrique.value = rubriqueFilter;
+  }
+
+  function filterUpdateRubriqueDisplay(rubriques: Array<Rubrique>) {
+    filterRubriqueDisplay.value = rubriques.filter(rubrique=> rubrique);
+  }
+
+  function filterUpdateMedia(filter: {
+    type?: string;
+    order?: string;
+    field?: string;
+  }) {
+    if (filter.type) {
+      filterTypeMedia.value = filter.type;
+    }
+    if (filter.order) {
+      filterSortOrder.value = filter.order;
+    }
+    if (filter.field) {
+      filterSortField.value = filter.field;
+    }
+  }
+
+  return {
+    filterOrgaId,
+    realOrgaId,
+
+    filterUpdateOrga,
+    filterUpdateIab,
+    filterUpdateRubrique,
+    filterUpdateRubriqueDisplay,
+    filterUpdateMedia,
+
+    filterImgUrl,
+    filterName,
+    filterRubriquage,
+    filterRubrique,
+    filterRubriqueDisplay,
+    filterTypeMedia,
+    filterSortOrder,
+    filterSortField,
+    filterLive,
+    filterIab
+  };
 });
+
+/** Type for the FilterStore */
+export type FilterStore = ReturnType<typeof useFilterStore>;

package/src/stores/PlayerStore.ts

@@ -141,6 +141,11 @@ export const usePlayerStore = defineStore("PlayerStore", {
     },
   },
   actions: {
+    /**
+     * Start playing audio/video
+     * @param param The data
+     * @param isVideo If true, enable video mode
+     */
     async playerPlay(param?: any, isVideo = false) {
       if (!param) {
         this.playerCurrentChange = null;