@saooti/octopus-sdk 41.0.6-SNAPSHOT → 41.0.6

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

@@ -19,6 +19,7 @@
     "
     :just-size-chosen="justSizeChosen"
     :player-responsive="true"
+    :force-update-parameters="forceUpdateParameters"
   >
     <template #list>
       <div class="octopus-element-list">
@@ -85,6 +86,7 @@ const props = defineProps({
   justSizeChosen: { default: false, type: Boolean },
   withVideo: { default: undefined, type: Boolean },
   includeTag:{ default: () => [], type: Array as () => Array<string> },
+  forceUpdateParameters: { default: false, type: Boolean },
 })
 
 //Emits
@@ -148,9 +150,9 @@ watch(changePaginate, () => {
   dfirst.value = props.first;
   dsize.value = props.size;
 });
-watch(changed, () => reloadList());
-watch(()=>props.reload, () => reloadList());
-watch(dsize, () => reloadList());
+watch(changed, () => fetchContent(true));
+watch(()=>props.reload, () => fetchContent(true));
+watch(dsize, () => fetchContent(true));
 watch(dfirst, () => {
   if (
     !podcasts.value[dfirst.value] ||
@@ -160,17 +162,13 @@ watch(dfirst, () => {
   }
 });
 
-onBeforeMount(()=>fetchContent(true))
+onBeforeMount(()=>fetchContent(false))
 
 //Methods
-function reloadList() {
-  dfirst.value = 0;
-  fetchContent(true);
-}
 async function fetchContent(reset: boolean): Promise<void> {
   loading.value = true;
   const param: FetchParam = {
-    first: dfirst.value,
+    first: reset ? 0 : dfirst.value,
     size: dsize.value,
     organisationId: organisation.value,
     emissionId: props.emissionId,
@@ -213,6 +211,7 @@ function afterFetching(
   data: { count: number; result: Array<Podcast>; sort: string },
 ): void {
   if (reset) {
+    dfirst.value = 0;
     podcasts.value.length = 0;
   }
   if (dfirst.value > podcasts.value.length) {

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,
     );

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

@@ -137,7 +137,7 @@ onMounted(()=>{
 function isNumeric(value: string): boolean {
   return /^-?\d+$/.test(value);
 }
-function selectChange($event: any) {
+function selectChange($event: Event) {
   const val = $event.target.value;
   if (!val) {
     return;

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

@@ -78,7 +78,7 @@ import RssIcon from "vue-material-design-icons/Rss.vue";
 import { useApiStore } from "../../../stores/ApiStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Emission } from "@/stores/class/general/emission";
-import { computed, Ref, ref, useTemplateRef, watch } from "vue";
+import { computed, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 type Link = {
   name: string;
@@ -204,7 +204,9 @@ const rssUrl = computed(() => {
 
 
 //Watch
-watch(()=>props.windowWidth, () =>resizeWindow(), {immediate: true});
+watch(()=>props.windowWidth, () =>resizeWindow());
+
+onMounted(()=>resizeWindow());
 
 
 //Methods

package/src/components/form/ClassicInputText.vue

@@ -12,6 +12,7 @@
         >{{ 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"
@@ -31,7 +32,9 @@
           <!-- eslint-enable -->
         </ClassicPopover>
       </template>
+      <slot name="afterHelp"/>
     </div>
+    <slot name="betweenTitleInput"/>
     <input
       v-if="!isWysiwyg && !isTextarea"
       v-show="showField"
@@ -216,7 +219,7 @@ watch(textValue, () => {
 });
 watch(()=>props.textInit, () => {
   if (props.textInit !== textValue.value) {
-    emit("update:textInit", textValue.value);
+    textValue.value = props.textInit;
   }
 });
 

package/src/components/form/ClassicMultiselect.vue

@@ -5,13 +5,33 @@
       'multiselect-no-deselect': noDeselect,
       'form-margin': displayLabel,
     }"
-    :style="{ width: width }"
+    :style="{ width: width, height: height }"
   >
-    <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
-      label
-    }}
-    <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
-  </label>
+    <div class="d-flex align-items-center">
+      <label :class="displayLabel ? '' : 'd-none'" :for="id" class="form-label">{{
+        label
+      }}
+      <AsteriskIcon v-if="displayRequired" :size="10" class="ms-1 mb-2" :title="t('Mandatory input')"/>
+      </label>
+      <template v-if="popover">
+        <button
+          :id="'popover' + id"
+          :title="t('Help')"
+          class="btn-transparent"
+        >
+          <HelpCircleIcon :size="30" />
+        </button>
+        <ClassicPopover
+          :target="'popover' + id"
+          popover-class="popover-z-index"
+          :relative-class="popoverRelativeClass"
+        >
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="popover" />
+          <!-- eslint-enable -->
+        </ClassicPopover>
+      </template>
+    </div>
     <vSelect
       v-model="optionSelected"
       :input-id="id"
@@ -28,6 +48,7 @@
       "
       :filter="fakeSearch"
       :selectable="() => !maxOptionsSelected"
+      :style="{height: height }"
       :class="{ 'border border-danger': textDanger?.length }"
       @open="onSearch"
       @search="onSearch"
@@ -76,12 +97,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, Ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, Ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import AsteriskIcon from "vue-material-design-icons/Asterisk.vue";
 import ChevronDownIcon from "vue-material-design-icons/ChevronDown.vue";
 import vSelect from "vue-select";
-
+import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
+const ClassicPopover = defineAsyncComponent(
+  () => import("../misc/ClassicPopover.vue"),
+);
 
 //Props 
 const props = defineProps({
@@ -93,6 +117,7 @@ const props = defineProps({
   multiple: { default: false, type: Boolean },
   isDisabled: { default: false, type: Boolean },
   width: { default: "100%", type: String },
+  height: { default: undefined, type: String },
   maxElement: { default: 50, type: Number },
   minSearchLength: { default: 3, type: Number },
   optionChosen: { default: undefined, type: Object as () => unknown },
@@ -104,6 +129,8 @@ const props = defineProps({
   allowEmpty: { default: true, type: Boolean },
   textDanger :{ default: undefined, type: String },
   displayRequired: { default: false, type: Boolean },
+  popover: { default: undefined, type: String },
+  popoverRelativeClass: { default: undefined, type: String },
 })
 
 //Emits
@@ -209,6 +236,7 @@ defineExpose({
 
   .vs__dropdown-toggle {
     padding: 0;
+    height: 100%;
   }
 
   .vs__search:focus {

package/src/components/misc/ClassicAccordion.vue

@@ -20,11 +20,11 @@
           class="img-accordion"
           :src="imageUrl"
           aria-hidden="true"
-        alt=""
-          
+          alt=""
         />
-        <span class="flex-grow-1">{{ title }}</span>
-        <ChevronDownIcon :class="{ 'arrow-transform': isOpen }" />
+        <span>{{ title }}</span>
+        <slot name="afterTitle"/>
+        <ChevronDownIcon class="ms-auto" :class="{ 'arrow-transform': isOpen }" />
       </button>
       <div v-show="isOpen" class="body p-2">
         <slot />

package/src/components/misc/ClassicPopover.vue

@@ -72,7 +72,7 @@ const router= useRouter();
 const popoverId = computed(() => "popover" + props.target);
 const positionInlineStyle = computed(() => `left: ${posX.value}px; top: ${posY.value}px;max-height:${maxHeight.value}`);
 const displayPopover = computed(() => show.value && !props.disable);
-const isTopLayerPopover = computed(() => (props.isTopLayer || "octopus-modal"===props.relativeClass) && HTMLElement.prototype.hasOwnProperty("popover"));
+const isTopLayerPopover = computed(() => (props.isTopLayer || "octopus-modal"===props.relativeClass) && Object.hasOwn(HTMLElement.prototype, "popover"));
 
 
 //Watch

package/src/components/misc/ClassicSpinner.vue

@@ -16,7 +16,7 @@ defineProps({
   --size-spinner: 3rem;
   --size-spinner-section: calc(var(--size-spinner) / 20);
   --half-size-spinner: calc(var(--size-spinner) / 2);
-
+  
   color: #000000;
   display: inline-block;
   position: relative;

package/src/components/misc/FooterSection.vue

@@ -74,7 +74,6 @@
 
 <script setup lang="ts">
 import cookiesHelper from "../../helper/cookiesHelper";
-import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilterComputed";
 import ClassicSelect from "../form/ClassicSelect.vue";
 import AcpmImage from "./AcpmImage.vue";
 import { state } from "../../stores/ParamSdkStore";
@@ -103,7 +102,6 @@ const reset = ref(false);
 const organisationId: Ref<string | undefined> = ref(undefined);
 
 //Composables
-const { rubriqueQueryParam } = useRubriquesFilterComputed();
 const generalStore = useGeneralStore();
 const filterStore = useFilterStore();
 const authStore = useAuthStore();
@@ -140,20 +138,6 @@ watch(()=>filterStore.filterOrgaId, () => {
 
 
 //Methods
-function getQueriesRouter(routeName: string) {
-  if (
-    "podcasts" !== routeName &&
-    "emissions" !== routeName &&
-    "home" !== routeName
-  ) {
-    return { productor: filterStore.filterOrgaId };
-  }
-  return {
-    productor: filterStore.filterOrgaId,
-    iabId: filterStore.filterIab?.id,
-    rubriquesId: rubriqueQueryParam.value,
-  };
-}
 function changeLanguage(): void {
   cookiesHelper.setCookie("octopus-language", language.value);
   loadLocaleMessages(

package/src/components/misc/HomeDropdown.vue

@@ -32,113 +32,43 @@
       :left-pos="true"
       :is-top-layer="true"
     >
-      <nav :aria-label="t('User menu')">
-        <ul class="p-0 m-0">
-          <template v-if="!isAuthenticated">
-            <li class="li-style-none">
-              <a class="octopus-dropdown-item realLink" :href="pathLogin">
-                {{ t("Login") }}
-              </a>
-            </li>
-            <li class="li-style-none">
-              <router-link
-                v-if="!state.generalParameters.podcastmaker"
-                class="octopus-dropdown-item"
-                to="/main/pub/create"
-              >
-                {{ t("Create an account") }}
-              </router-link>
-            </li>
-          </template>
-          <template v-else>
-            <li v-for="routerBack in routerBackoffice" :key="routerBack.path" class="li-style-none">
-              <router-link
-                v-if="!state.generalParameters.podcastmaker && routerBack.condition"
-                :class="routerBack.class"
-                :to="routerBack.path"
-              >
-                {{ routerBack.title }}
-              </router-link>
-            </li>
-            <template v-if="helpLinks.length">
-              <hr />
-              <li v-for="helpLink in helpLinks" :key="helpLink.title" class="li-style-none">
-                <a
-                  :href="helpLink.href"
-                  class="octopus-dropdown-item realLink"
-                  rel="noreferrer noopener"
-                  target="_blank"
-                  :title="t('New window', {text: helpLink.title})"
-                >
-                  {{ helpLink.title }}
-                  <OpenInNewIcon class="ms-1" :size="15"/>
-                </a>
-              </li>
-            </template>
-            <hr />
-            <li class="li-style-none">
-              <a class="octopus-dropdown-item c-hand" href="/logout">
-                {{ t("Logout") }}
-              </a>
-            </li>
-          </template>
-          <li class="li-style-none">
-            <router-link
-              v-if="!authStore.isGarRole"
-              class="octopus-dropdown-item"
-              to="/main/pub/contact"
-            >
-              {{ t("Contact") }}
-            </router-link>
-          </li>
-        </ul>
-      </nav>
+      <UserButtonContent :isEducation="isEducation" :navLabel="t('User menu')" :specificRoutes="routerBackoffice"/>
     </ClassicPopover>
   </div>
 </template>
 
 <script setup lang="ts">
-import OpenInNewIcon from "vue-material-design-icons/OpenInNew.vue";
+import UserButtonContent from "./UserButtonContent.vue";
 import AppsIcon from "vue-material-design-icons/Apps.vue";
 import AccountIcon from "vue-material-design-icons/Account.vue";
 import DownloadIcon from "vue-material-design-icons/Download.vue";
-import { state } from "../../stores/ParamSdkStore";
 import ClassicPopover from "../misc/ClassicPopover.vue";
 import { useAuthStore } from "../../stores/AuthStore";
 import { computed } from "vue";
-import { useApiStore } from "../../stores/ApiStore";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
 //Props 
-const props = defineProps({
+defineProps({
   isEducation: { default: false, type: Boolean },
   mobileMenuDisplay: { default: false, type: Boolean },
-  scrolled: { default: false, type: Boolean },
 })
 
 //Composables
 const { t } = useI18n();
 const authStore = useAuthStore();
-const apiStore = useApiStore();
 const route = useRoute();
 const router = useRouter();
 
 //Computed
 const isAuthenticated = computed(() => undefined !== authStore.authProfile?.userId);
 const isAuthenticatedWithOrga = computed(() => undefined !== authStore.authOrgaId);
-const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
 const organisationsAvailable = computed(() =>  authStore.authProfile?.organisations ?? []);
-const helpLinks = computed(() => {
-  if (authStore.isGarRole || props.isEducation) {
+
+const routerBackoffice = computed(() => {
+  if(!isAuthenticated.value){
     return [];
   }
-  return [
-    { title:t("Help"), href: "https://help.octopus.saooti.com/Aide/"},
-    { title: t("TutoMag"), href: "https://help.octopus.saooti.com/" },
-  ];
-});
-const routerBackoffice = computed(() => {
   return [
     {
       title: t("My space"),

package/src/components/misc/MobileMenu.vue

@@ -18,39 +18,11 @@
       :left-pos="true"
       :is-top-layer="true"
     >
-      <template v-for="link in routerLinkArray" :key="link.routeName">
-        <router-link
-          v-if="link.condition"
-          :class="
-            'home' === link.routeName
-              ? 'octopus-dropdown-item show-phone-flex'
-              : 'octopus-dropdown-item'
-          "
-          :to="{
-            name: link.routeName,
-            query: getQueriesRouter(link.routeName),
-          }"
-        >
-          {{ link.title }}
-        </router-link>
-      </template>
-      <a
-        v-if="!isAuthenticatedWithOrga"
-        class="octopus-dropdown-item realLink"
-        :href="pathLogin"
-      >
-        {{ t("Login") }}
-      </a>
-      <a v-else class="octopus-dropdown-item c-hand" href="/logout">
-        {{ t("Logout") }}
-      </a>
-      <router-link
-        v-if="!authStore.isGarRole"
-        class="octopus-dropdown-item"
-        to="/main/pub/contact"
-      >
-        {{ t("Contact") }}
-      </router-link>
+      <UserButtonContent 
+        :isEducation="isEducation" 
+        :navLabel="t('User menu')" 
+        :specificRoutes="routerLinkArray"
+        :displayUserContent="displayUserContent"/>
     </ClassicPopover>
   </div>
 </template>
@@ -62,20 +34,20 @@ import { state } from "../../stores/ParamSdkStore";
 import { defineAsyncComponent, ref, computed } from "vue";
 import { useFilterStore } from "../../stores/FilterStore";
 import { useAuthStore } from "../../stores/AuthStore";
-import { useApiStore } from "../../stores/ApiStore";
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
+import { useResizePhone } from "../composable/useResizePhone";
 const ClassicPopover = defineAsyncComponent(
   () => import("../misc/ClassicPopover.vue"),
 );
-
+const UserButtonContent = defineAsyncComponent(
+  () => import("./UserButtonContent.vue"),
+);
 
 //Props 
 const props = defineProps({
   isEducation: { default: false, type: Boolean },
   show: { default: false, type: Boolean },
   notPodcastAndEmission: { default: false, type: Boolean },
-  scrolled: { default: false, type: Boolean },
 })
 
 //Data 
@@ -85,60 +57,90 @@ const firstLoaded = ref(false);
 const { t } = useI18n();
 const { rubriqueQueryParam } = useRubriquesFilterComputed();
 const authStore = useAuthStore();
-const apiStore = useApiStore();
 const filterStore = useFilterStore();
-const route = useRoute();
+const { windowWidth } = useResizePhone();
 
 
 //Computed
+const displayUserContent = computed(() => 500>=windowWidth.value);
 const isAuthenticatedWithOrga = computed(() => undefined !== authStore.authOrgaId);
-const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
 const routerLinkArray = computed(() =>{
   return [
     {
       title: t("My space"),
-      routeName: "backoffice",
+      path:{
+        name: "backoffice",
+        query: getQueriesRouter(true),
+      },
+      class: "octopus-dropdown-item",
       condition: isAuthenticatedWithOrga.value,
     },
-    { title: t("Home"), routeName: "home", condition: true },
+    { 
+      title: t("Home"),
+      path:{
+        name: "home",
+        query: getQueriesRouter(false),
+      },
+      class:"octopus-dropdown-item show-phone-flex", 
+      condition: true
+    },
     {
       title: t("Radio & Live"),
-      routeName: "lives",
+      path:{
+        name: "lives",
+        query: getQueriesRouter(true),
+      },
+      class: "octopus-dropdown-item",
       condition:
         state.generalParameters.isLiveTab &&
         ((filterStore.filterOrgaId && filterStore.filterLive) || !filterStore.filterOrgaId),
     },
     {
       title: t("Podcasts"),
-      routeName: "podcasts",
+      path:{
+        name: "podcasts",
+        query: getQueriesRouter(false),
+      },
+      class: "octopus-dropdown-item",
       condition: !props.notPodcastAndEmission,
     },
     {
       title: t("Emissions"),
-      routeName: "emissions",
+      path:{
+        name: "emissions",
+        query: getQueriesRouter(false),
+      },
+      class: "octopus-dropdown-item",
       condition: !props.notPodcastAndEmission,
     },
     {
       title: t("Productors"),
-      routeName: "productors",
+      path:{
+        name: "productors",
+        query: getQueriesRouter(true),
+      },
+      class: "octopus-dropdown-item",
       condition:
         !state.generalParameters.podcastmaker && (!filterStore.filterOrgaId || props.isEducation),
     },
     {
       title: t("Playlists"),
-      routeName: "playlists",
+      path:{
+        name: "playlists",
+        query: getQueriesRouter(true),
+      },
+      class: "octopus-dropdown-item",
       condition: true,
     },
     {
       title: t("Speakers"),
-      routeName: "participants",
+      path:{
+        name: "participants",
+        query: getQueriesRouter(true),
+      },
+      class: "octopus-dropdown-item",
       condition: true,
     },
-    {
-      title: t("Create an account"),
-      routeName: "createAccount",
-      condition: !isAuthenticatedWithOrga.value,
-    },
   ];
 });
 
@@ -153,12 +155,8 @@ function handleMenuClick() {
     document.getElementById("mobile-menu-dropdown")?.click();
   }, 200);
 }
-function getQueriesRouter(routeName: string) {
-  if (
-    "podcasts" !== routeName &&
-    "emissions" !== routeName &&
-    "home" !== routeName
-  ) {
+function getQueriesRouter(onlyProductor:boolean) {
+  if (onlyProductor) {
     return { productor: filterStore.filterOrgaId };
   }
   return {

package/src/components/misc/TopBar.vue

@@ -3,7 +3,7 @@
     role="banner"
     class="header-saooti-play"
     :style="headerBackgroundImage"
-    :class="[generalStore.contentToDisplay ? 'header-img-bg':'header-color-bg', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']"
+    :class="[generalStore.contentToDisplay ? 'header-img-bg':'bg-gradient', scrolled? 'scrolled':'', needToBlur ? 'header-force-blur':'']"
   >
     <TopBarMainContent
       :is-phone="isPhone"
@@ -93,7 +93,8 @@ watch(()=>generalStore.contentToDisplay, async () => {
     needToBlur.value = false;
     return;
   }
-  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl,"270", undefined, true);
+  const widthAsked = window.innerWidth > 960 ? "1600":"1000";
+  const proxyUrl = useProxyImageUrl(generalStore.contentToDisplay.imageUrl,widthAsked, undefined, true);
   try {
     const result = await axios.get(proxyUrl);
     headerBackgroundImage.value = `background-image: url('${result.data}');`;
@@ -159,15 +160,7 @@ function handleScroll(): void {
       background-repeat: no-repeat;
       background-size: cover;
     }
-    &.header-color-bg{
-      background: var(--octopus-primary);
-      background: linear-gradient(
-        90deg,
-        var(--octopus-primary) 0%,
-        var(--octopus-tertiary) 100%
-      );
-    }
-    &.header-color-bg, &.scrolled{
+    &.bg-gradient, &.scrolled{
       box-shadow: 0 2px 15px 5px var(--octopus-shadow) !important; 
     }
   }

package/src/components/misc/TopBarMainContent.vue

@@ -136,12 +136,10 @@
           :is-education="generalStore.platformEducation"
           :show="mobileMenuDisplay"
           :not-podcast-and-emission="inContentDisplayPage && !scrolled"
-          :scrolled="scrolled"
         />
         <HomeDropdown
           :is-education="generalStore.platformEducation"
           :mobile-menu-display="mobileMenuDisplay"
-          :scrolled="scrolled"
         />
         <router-link
           v-show="!isPhone && !inContentDisplayPage"