@saooti/octopus-sdk 41.0.14-SNAPSHOT → 41.0.14

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"
@@ -160,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

@@ -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,20 +125,19 @@
                     {{ link.title }}
                   </router-link>
                 </li>
-            </template>
+              </template>
             </ul>
           </nav>
         </ClassicPopover>
+
         <MobileMenu
           :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/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/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/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">
@@ -43,7 +43,7 @@
             name: 'podcasts',
             query: {
               iabId: filterStore.filterIab?.id,
-              rubriquesId: rubriqueQueryParam.value,
+              rubriquesId: rubriqueQueryParam,
               productor: filterStore.filterOrgaId
             },
           }"
@@ -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/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/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);