@saooti/octopus-sdk 41.0.12-SNAPSHOT → 41.0.12

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>
@@ -61,21 +33,22 @@ import { useRubriquesFilterComputed } from "../composable/route/useRubriquesFilt
 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";
+import { useAuthStore } from "../../stores/AuthStore";
 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 },
+  inContentDisplayPage: { default: false, type: Boolean },
 })
 
 //Data 
@@ -84,61 +57,87 @@ const firstLoaded = ref(false);
 //Composables
 const { t } = useI18n();
 const { rubriqueQueryParam } = useRubriquesFilterComputed();
-const authStore = useAuthStore();
-const apiStore = useApiStore();
 const filterStore = useFilterStore();
-const route = useRoute();
+const authStore = useAuthStore();
+const { windowWidth } = useResizePhone();
 
 
 //Computed
 const isAuthenticatedWithOrga = computed(() => undefined !== authStore.authOrgaId);
-const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
+const displayUserContent = computed(() =>{
+  if(isAuthenticatedWithOrga.value){
+    return 500>=windowWidth.value;
+  }
+  return props.show;
+});
 const routerLinkArray = computed(() =>{
   return [
-    {
-      title: t("My space"),
-      routeName: "backoffice",
-      condition: isAuthenticatedWithOrga.value,
+    { 
+      title: t("Home"),
+      path:{
+        name: "home",
+        query: getQueriesRouter(false),
+      },
+      class:"octopus-dropdown-item show-phone-flex", 
+      condition: true
     },
-    { title: t("Home"), routeName: "home", 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 +152,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"

package/src/components/misc/UserButtonContent.vue

@@ -0,0 +1,159 @@
+<template>
+  <nav :aria-label="navLabel">
+    <ul class="p-0 m-0">
+      <template v-if="specificRoutes.length">
+        <li v-for="routerBack in specificRoutes" :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>
+        <hr v-if="displayUserContent"/>
+      </template>
+      <template v-if="displayUserContent">
+        <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="routeBackoffice in routerBackoffice" :key="routeBackoffice.path" class="li-style-none">
+            <router-link
+              v-if="!state.generalParameters.podcastmaker && routeBackoffice.condition"
+              :class="routeBackoffice.class"
+              :to="routeBackoffice.path"
+            >
+              {{ routeBackoffice.title }}
+            </router-link>
+          </li>
+          <hr />
+          <template v-if="helpLinks.length">
+            <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>
+            <hr />
+          </template>
+          <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>
+      </template>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import OpenInNewIcon from "vue-material-design-icons/OpenInNew.vue";
+import { state } from "../../stores/ParamSdkStore";
+import { useAuthStore } from "../../stores/AuthStore";
+import { computed } from "vue";
+import { useApiStore } from "../../stores/ApiStore";
+import { useI18n } from "vue-i18n";
+import { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric, useRoute } from "vue-router";
+
+//Interface
+interface RouteInfo{
+  title: string;
+  class: string;
+  path: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
+  condition: boolean
+}
+
+//Props 
+const props = defineProps({
+  isEducation: { default: false, type: Boolean },
+  navLabel: { default: "", type: String },
+  specificRoutes: { default: ()=>[], type: Array as ()=> Array<RouteInfo> },
+  displayUserContent: { default: true, type: Boolean },
+})
+
+//Composables
+const { t } = useI18n();
+const authStore = useAuthStore();
+const apiStore = useApiStore();
+const route = useRoute();
+
+//Computed
+const isAuthenticated = computed(() => undefined !== authStore.authProfile?.userId);
+const pathLogin = computed(() => "/sso/login?redirect_url="+encodeURI(apiStore.frontendUrl + route.fullPath));
+const isAuthenticatedWithOrga = computed(() => undefined !== authStore.authOrgaId);
+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(() => {
+  if(!isAuthenticated.value){
+    return [];
+  }
+  return [
+    {
+      title: t("My space"),
+      class: "octopus-dropdown-item show-small-screen",
+      path: "/main/priv/backoffice",
+      condition: isAuthenticatedWithOrga.value,
+    },
+    {
+      title: t("Upload"),
+      class: "octopus-dropdown-item show-small-screen",
+      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),
+    },
+  ];
+});
+
+</script>

package/src/components/misc/player/elements/PlayerImage.vue

@@ -22,7 +22,6 @@
         :height="imageWidth"
         aria-hidden="true"
         alt=""
-        
         :title="t('Episode name image', { name: podcastDisplay?.title })"
         class="player-image"
         :class="imageWidth > 50 ? 'big-player-image' : ''"

package/src/components/misc/player/elements/PlayerTitle.vue

@@ -89,7 +89,7 @@ onUnmounted(()=>{
 async function fetchCurrentlyPlaying(): Promise<void> {
   fetchRadioMetadata(
     playerStore.playerRadio?.canalId ?? 0,
-    playerStore.playerRadio?.metadata.title ?? "",
+    playerStore.playerRadio?.metadata?.title ?? "",
     updateMetadata,
     updateAdvertising,
   );
@@ -98,11 +98,11 @@ function updateAdvertising(nextAdvertising: NextAdvertising): void {
   playerStore.playerRadioUpdateNextAdvertising(nextAdvertising);
 }
 function updateMetadata(
-  metadata: MediaRadio,
+  metadata: MediaRadio|undefined,
   podcast: Podcast | undefined,
   history: Array<MediaRadio>,
 ): void {
-  playerStore.playerMetadata(metadata, history);
+  playerStore.playerMetadata(metadata, history); //TODO
   playerStore.playerRadioPodcast(podcast);
 }
 </script>

package/src/components/misc/player/radio/RadioHistory.vue

@@ -40,10 +40,10 @@ import ChevronLeftIcon from "vue-material-design-icons/ChevronLeft.vue";
 import ChevronRightIcon from "vue-material-design-icons/ChevronRight.vue";
 import { usePlayerStore } from "../../../../stores/PlayerStore";
 import dayjs from "dayjs";
-import radioHelper from "../../../../helper/radio/radioHelper";
 import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from "vue";
 import { MediaRadio } from "@/stores/class/general/player";
 import { useI18n } from "vue-i18n";
+import { useFetchRadio } from "../../../composable/radio/usefetchRadioData";
 
 
 //Data 
@@ -54,6 +54,7 @@ const historyListContainerRef = useTemplateRef('historyListContainer');
 //Composables
 const { t } = useI18n();
 const playerStore = usePlayerStore();
+const {displayTitle} = useFetchRadio();
 
 
 //Computed
@@ -119,7 +120,7 @@ function displayPreviousItem(item: MediaRadio): string {
   if (item.podcastId) {
     return item.title;
   }
-  return radioHelper.displayTitle(item);
+  return displayTitle(item);
 }
 </script>
 <style lang="scss">

package/src/components/misc/player/video/PlayerVideo.vue

@@ -39,10 +39,10 @@ const playerStore = usePlayerStore();
 //Computed
 const isSecured = computed(() => "SECURED" === playerStore.playerLive?.organisation?.privacy);
 const hlsVideoUrl = computed(() => {
-  if (!playerStore.playerLive) {
+  if (!playerStore.playerHlsIdentifier) {
     return "";
   }
-  return `${apiStore.hlsUrl}live/video_dev.${playerStore.playerLive.conferenceId}/index.m3u8`;
+  return `${apiStore.hlsUrl}live/video_${playerStore.playerHlsIdentifier}/index.m3u8`;
 });
 
 onMounted(()=>{

package/src/components/pages/PageLogout.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    class="page-box page-box-absolute page-logout"
+    class="page-box page-box-absolute page-logout bg-gradient"
   >
     <div class="logout-section">
       <h1 class="mb-3">{{ t("Logout") }}</h1>
@@ -19,11 +19,6 @@ const { t } = useI18n();
 </script>
 <style lang="scss">
 .octopus-app .page-logout {
-  background: linear-gradient(
-    90deg,
-    var(--octopus-primary) 0%,
-    var(--octopus-tertiary) 100%
-  );
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/pages/PodcastPage.vue

@@ -255,7 +255,6 @@ async function fetchConferenceStatus() {
       api: 9,
       path: "conference/info/" + podcast.value?.conferenceId,
     });
-
     fetchConference.value = {...fetchConference.value, ...data};
   } catch {
     //Do nothing

package/src/components/pages/VideoPage.vue

@@ -193,7 +193,7 @@ const hlsVideoUrl = computed(() => {
   if (!recordingLive.value || !podcastConference.value) {
     return "";
   }
-  return `${apiStore.hlsUrl}live/video_dev.${podcastConference.value.conferenceId}/index.m3u8`;
+  return `${apiStore.hlsUrl}live/video_${podcastConference.value.hlsIdentifier}/index.m3u8`;
 });
 const isSecured = computed(() => {
   return "SECURED" === podcast.value?.organisation?.privacy;
@@ -255,7 +255,10 @@ async function getPodcastDetails(): Promise<void> {
         playerStore.playerPlay(
           {
             ...podcast.value,
-            ...{ conferenceId: podcast.value.conferenceId },
+            ...{ 
+              conferenceId: podcast.value.conferenceId,
+              hlsIdentifier: podcastConference.value?.hlsIdentifier,
+            },
           },
           true,
         );

package/src/locale/de.ts

@@ -146,8 +146,8 @@ export default {
   "Sort score": "Nach Relevanz",
   "Sort name": "Nach Titel",
   "Sort last": "Nach Datum",
-  "Choose color": "Farbe wählen",
-  "Choose theme": "Design wählen",
+  "Choose color": "Akzentfarbe",
+  "Choose theme": "Thema (Spielerhintergrund)",
   "Podcast no visible": "Podcast nicht sichtbar",
   "Display episodes": "Folgen anzeigen",
   "Podcast published in future": "Podcast geplant",
@@ -167,7 +167,6 @@ export default {
   "open left Menu": "Menü öffnen/schließen",
   Participant: "Sprecher",
   "Number of player podcasts": "Anzahl der Podcasts im Player",
-  "Proceed reading": "Weiterhören",
   "Without topic": "Ohne Thema",
   "Without rubric": "Ohne Rubrik",
   "Consider podcasts no visible":
@@ -414,4 +413,5 @@ export default {
   "Code copied!":"Code kopiert!",
   "Copied!":"Kopiert!",
   "Color of the QR Code": "Farbe des QR-Codes",
+  "Silent stream":"Stiller Fluss",
 }

package/src/locale/en.ts

@@ -145,8 +145,8 @@ export default {
   "Sort score": "Sorted by relevancy score",
   "Sort name": "Sorted title",
   "Sort last": "Sorted last",
-  "Choose color": "Choose color",
-  "Choose theme": "Choose theme",
+  "Choose color": "Accent color",
+  "Choose theme": "Theme (player background)",
   "Podcast no visible": "Podcast not visible",
   "Display episodes": "Display episodes",
   "Podcast published in future": "Podcast published in the future",
@@ -166,7 +166,6 @@ export default {
   "open left Menu": "Open/Close Menu",
   Participant: "Speaker",
   "Number of player podcasts": "Number of podcasts in the player ",
-  "Proceed reading": "Continue Listening",
   "Without topic": "Without a topic",
   "Without rubric": "Without a rubric",
   "Consider podcasts no visible":
@@ -417,4 +416,5 @@ export default {
   "Code copied!":"Code copied!",
   "Copied!":"Copied!",
   "Color of the QR Code": "Color of the QR Code",
+  "Silent stream":"Silent stream",
 };

package/src/locale/es.ts

@@ -145,8 +145,8 @@ export default {
   "Sort score": "Clasificación por pertinencia",
   "Sort name": "Clasificación por título",
   "Sort last": "Clasificación por fecha más reciente",
-  "Choose color": "Elegir color",
-  "Choose theme": "Elegir tema",
+  "Choose color": "Color de acento",
+  "Choose theme": "Tema (fondo del jugador)",
   "Podcast no visible": "Este pódcast no puede visualizarse",
   "Display episodes": "Mostrar episodios",
   "Podcast published in future": "Pódcast pendiente de publicación",
@@ -167,7 +167,6 @@ export default {
   "open left Menu": "Abrir/Cerrar menú",
   Participant: "Participante",
   "Number of player podcasts": "Número de pódcast en el reproductor",
-  "Proceed reading": "Seguir escuchando",
   "Without topic": "Sin tema",
   "Without rubric": "Sin sección",
   "Consider podcasts no visible":
@@ -415,4 +414,5 @@ export default {
   "Code copied!":"¡Código copiado!",
   "Copied!":"¡Copiado!",
   "Color of the QR Code": "Color del código QR",
+  "Silent stream":"Flujo silencioso",
 }

package/src/locale/fr.ts

@@ -146,8 +146,8 @@ export default {
   "Sort score": "Pertinence",
   "Sort name": "Alphabétique",
   "Sort last": "Antéchronologique",
-  "Choose color": "Couleur",
-  "Choose theme": "Thème",
+  "Choose color": "Couleur d'accent",
+  "Choose theme": "Thème (fond du player)",
   "Podcast no visible": "Épisode non visible actuellement",
   "Display episodes": "Affichage des épisodes",
   "Podcast publish in future": "Épisode publié dans le futur",
@@ -168,7 +168,6 @@ export default {
   "open left Menu": "Ouvrir/Fermer le menu",
   Participant: "Intervenant",
   "Number of player podcasts": "Nombre d'épisodes dans le miniplayer",
-  "Proceed reading": "Poursuivre la lecture",
   "Without topic": "Sans rubriquage",
   "Without rubric": "Non rubriqué",
   "Consider podcasts no visible":
@@ -424,4 +423,5 @@ export default {
   "Code copied!":"Code copié !",
   "Copied!":"Copié !",
   "Color of the QR Code": "Couleur du Qr Code",
+  "Silent stream":"Flux silencieux",
 };

package/src/locale/it.ts

@@ -141,8 +141,8 @@ export default{
     'Sort score': 'Suddiviso per grado di rilevanza',
     'Sort name': 'Suddividi titolo',
     'Sort last': 'Suddividi ultimo',
-    'Choose color': 'Seleziona colore',
-    'Choose theme': 'Seleziona tema',
+    'Choose color': 'Colore accento',
+    'Choose theme': 'Tema (sfondo del giocatore)',
     'Podcast no visible': 'Podcast non visibile',
     'Display episodes': 'Mostra episodi',
     'Podcast published in future': 'Podcast pubblicato in futuro',
@@ -163,7 +163,6 @@ export default{
     'open left Menu': 'Apri/Chiudi Menu',
     Participant: 'Speaker',
     'Number of player podcasts': "Numero di podcast nel lettore",
-    'Proceed reading': 'Continua ad ascoltare',
     'Without topic': 'Senza un tema',
     'Without rubric': 'Senza una rubrica',
     'Consider podcasts no visible':
@@ -411,4 +410,5 @@ export default{
   "Code copied!":"Codice copiato!",
   "Copied!":"Copiato!",
   "Color of the QR Code": "Colore del codice QR",
+  "Silent stream":"Flusso silenzioso",
 };