@saooti/octopus-sdk 41.0.12-SNAPSHOT → 41.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.0.12-SNAPSHOT",
+  "version": "41.0.12",
   "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",
@@ -53,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/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/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/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/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/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/PlayerParameters.vue

@@ -36,12 +36,6 @@
         </div>
       </div>
       <ChooseEpisodesNumber v-else :episodes-number="episodesNumber" @update-number="emit('update:episodesNumber', $event)"/>
-      <ClassicCheckbox
-        :text-init="proceedReading"
-        id-checkbox="proceed-reading-checkbox"
-        :label="t('Proceed reading')"
-        @update:text-init="emit('update:proceedReading', $event)"
-      />
     </template>
     <ClassicCheckbox
       v-if="displayIsVisible"
@@ -104,7 +98,6 @@ const props = defineProps({
   displayArticleParam: { default: false, type: Boolean },
   displayIsVisible: { default: false, type: Boolean },
   displayInsertCode: { default: false, type: Boolean },
-  proceedReading: { default: true, type: Boolean },
   displayArticle: { default: true, type: Boolean },
   displayTranscript: { default: true, type: Boolean },
   displayWave: { default: true, type: Boolean },
@@ -118,7 +111,6 @@ const props = defineProps({
 //Emits
 const emit = defineEmits([
   "episodeChoiceDisplay",
-  "update:proceedReading",
   "update:isVisible",
   "update:episodesNumber",
   "update:displayArticle",

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

@@ -44,7 +44,6 @@
             v-model:display-article="displayArticle"
             v-model:display-transcript="displayTranscript"
             v-model:display-wave="displayWave"
-            v-model:proceed-reading="proceedReading"
             v-model:is-visible="isVisible"
             v-model:player-auto-play="playerAutoPlay"
             v-model:episodes-number="episodesNumber"
@@ -125,7 +124,6 @@ const iFrameModel = ref("default");
 const isShareModal = ref(false);
 const color = ref("#40a372");
 const theme = ref("#000000");
-const proceedReading = ref(true);
 const episodeChoiceDisplay = ref("number");
 const episodesNumber = ref(3);
 const isVisible = ref(false);
@@ -341,9 +339,6 @@ function addUrlParameters(url: Array<string>) {
   url.push(
     `&color=${color.value.substring(1)}&theme=${theme.value.substring(1)}`,
   );
-  if (!proceedReading.value) {
-    url.push("&proceed=false");
-  }
   if (!displayArticle.value && displayArticleParam.value) {
     url.push("&article=false");
   }

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"

package/src/components/form/ClassicMultiselect.vue

@@ -7,11 +7,31 @@
     }"
     :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,7 +48,7 @@
       "
       :filter="fakeSearch"
       :selectable="() => !maxOptionsSelected"
-      class="h-100"
+      :style="{height: height }"
       :class="{ 'border border-danger': textDanger?.length }"
       @open="onSearch"
       @search="onSearch"
@@ -77,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({
@@ -106,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
@@ -214,6 +239,9 @@ defineExpose({
     height: 100%;
   }
 
+  .vs__search, .vs__search:focus{
+    border: var(--vs-selected-border-width) solid transparent;
+  }
   .vs__search:focus {
     min-width: 150px;
   }

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/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/HomeDropdown.vue

@@ -32,143 +32,36 @@
       :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')"/>
     </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) {
-    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"),
-      class: "octopus-dropdown-item show-small-phone-flex",
-      path: "/main/priv/backoffice",
-      condition: isAuthenticatedWithOrga.value,
-    },
-    {
-      title: t("Upload"),
-      class: "octopus-dropdown-item show-small-phone-flex",
-      path: "/main/priv/upload",
-      condition: isAuthenticatedWithOrga.value && authStore.isRoleContribution,
-    },
-    {
-      title: t("Edit my profile"),
-      class: "octopus-dropdown-item",
-      path: "/main/priv/edit/profile",
-      condition: true,
-    },
-    {
-      title: t("Edit my organisation"),
-      class: "octopus-dropdown-item",
-      path: "/main/priv/edit/organisation",
-      condition:
-      isAuthenticatedWithOrga.value &&
-        (authStore.isRoleOrganisation || 1 < organisationsAvailable.value.length),
-    },
-  ];
-});
-
 
 //Methods
 function goToAdministration() {