@saooti/octopus-sdk 41.0.13-SNAPSHOT → 41.0.13

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() {

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

@@ -43,7 +43,7 @@
             name: 'podcasts',
             query: {
               iabId: filterStore.filterIab?.id,
-              rubriquesId: rubriqueQueryParam.value,
+              rubriquesId: rubriqueQueryParam,
               productor: filterStore.filterOrgaId
             },
           }"

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