@saooti/octopus-sdk 41.0.5 → 41.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.0.5",
+  "version": "41.0.6",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/plateform.conf

@@ -1 +1 @@
-dev2.saooti.org
+preprod.saooti.org

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/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/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/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,113 @@
+<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>
+          <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>
+          </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>
+      </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: false, 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 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/" },
+  ];
+});
+
+</script>

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/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/stores/PlayerStore.ts

@@ -32,6 +32,7 @@ interface PlayerState {
   playerChaptering?: Chaptering;
   playerDelayStitching: number;
   playerHlsUrl?: string;
+  playerHlsIdentifier?:string;
 }
 export const usePlayerStore = defineStore("PlayerStore", {
   state: (): PlayerState => ({
@@ -49,6 +50,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
     playerVideo: false,
     playerChaptering: undefined,
     playerDelayStitching: 0,
+    playerHlsIdentifier: undefined,
   }),
   getters: {
     playerChapteringPercent(): ChapteringPercent | undefined {
@@ -146,6 +148,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         this.playerPodcast = undefined;
         this.playerMedia = undefined;
         this.playerLive = undefined;
+        this.playerHlsIdentifier = undefined;
         this.playerRadio = undefined;
         this.playerElapsed = 0;
         this.playerVideo = false;
@@ -168,6 +171,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
       this.playerPodcast = undefined;
       this.playerMedia = undefined;
       this.playerLive = undefined;
+      this.playerHlsIdentifier = undefined;
       this.playerRadio = undefined;
       this.playerVideo = isVideo;
       this.playerElapsed = 0;
@@ -177,6 +181,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
         (!param.podcastId || param.processingStatus !== "READY")
       ) {
         this.playerLive = param;
+        this.playerHlsIdentifier = param.hlsIdentifier;
         this.playerCurrentChange = null;
         return;
       }

package/src/stores/class/conference/conference.ts

@@ -8,6 +8,7 @@ export interface Conference {
   deletionAttempts?: number;
   directCode?: string;
   externalRtmpUrl?: ExternalRtmpUrl;
+  hlsIdentifier: string;
   hostname?: string;
   jingleDuration?: number;
   jingleFilePath?: string;
@@ -57,6 +58,7 @@ export function getEmptyConference(): Conference {
 export interface ConferencePublicInfo {
   status: string;
   videoProfile: string;
+  hlsIdentifier: string;
 }
 
 export interface ExternalRtmpUrl {