@saooti/octopus-sdk 41.12.0-beta3 → 41.12.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## 41.12.0 (En cours)
+## 41.12.0 (13/07/2026)
 
 **Features**
 
@@ -21,11 +21,15 @@
 - Ajout de nouvelles options d'apparence pour `ClassicButton`
 - Changement propriété principale de `ClassicButtonGroup` pour plus de cohérence
 - Ajout de variables CSS pour configurer l'aspect de divers boutons
+- Ajout d'une propriété SDK permettant d'afficher des tags sur les éléments de
+  type `PresentationItem`
+- Ajout de l'api `rubriqueApi`
 
 **Fixes**
 
 - Correction d'une exception dans `deepEquals` si la comparaison est faite entre
   une variable primitive et un objet
+- Correction du placement du header `PodcastmakerHeader`
 
 **Misc**
 

package/index.ts

@@ -194,7 +194,7 @@ export {
     type ProviderTts,
     type Voice
 } from "./src/stores/class/transcript/transcriptParams.ts";
-export { type Canal } from "./src/stores/class/radio/canal.ts";
+export * from "./src/stores/class/radio/canal";
 export { type Cartouchier } from "./src/stores/class/cartouchier/cartouchier.ts";
 export { type Cartouche, emptyCartouche } from "./src/stores/class/cartouchier/cartouche.ts";
 export { type PlaylistMedia } from "./src/stores/class/radio/playlistMedia";

package/package.json

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

package/src/api/index.ts

@@ -7,3 +7,4 @@ export { podcastApi, PodcastSort, type PodcastSearchOptions } from "./podcastApi
 export { radioApi } from "./radioApi";
 export * from "./aggregatorsApi";
 export * from "./mediathequeApi";
+export * from "./rubriquesApi";

package/src/api/radioApi.ts

@@ -1,4 +1,4 @@
-import { Canal } from "../stores/class/radio/canal";
+import { Ambiance, Canal } from "../stores/class/radio/canal";
 import classicApi from "./classicApi";
 import { ModuleApi } from "./apiConnection";
 
@@ -26,7 +26,23 @@ async function getAll(organisationId: string): Promise<Array<Canal>> {
     });
 }
 
+/**
+ * Set the default ambiance for the given canal
+ * @param canalId ID of the canal to change
+ * @param ambiance New ambiance settings
+ * @returns The modified ambiance
+ */
+async function setDefaultAmbiance(canalId: number, ambiance: Ambiance): Promise<Ambiance> {
+    return await classicApi.putData<Ambiance>({
+        api: ModuleApi.RADIO,
+        path: `ambiance/canal/${canalId}/default`,
+        dataToSend: ambiance
+    });
+    
+}
+
 export const radioApi = {
     get,
-    getAll
+    getAll,
+    setDefaultAmbiance
 };

package/src/api/rubriquesApi.ts

@@ -0,0 +1,68 @@
+import { classicApi, ModuleApi } from "@saooti/octopus-sdk";
+import { Rubrique } from "@/stores/class/rubrique/rubrique";
+import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
+import { useCacheStore } from "../stores/CacheStore";
+
+/**
+ * Find rubriquages according to criterias
+ * @param organisationIds List of organisation IDs for which to retrieve the
+ *                        rubriquage
+ * @param searchOptions Additional search options
+ */
+async function searchRubriquages(organisationIds: Array<string>, searchOptions?: {
+    rubriquageId?: number;
+    organisationId?: string|Array<string>;
+    query?: string;
+}): Promise<Array<Rubriquage>> {
+    return classicApi.fetchData<Array<Rubriquage>>({
+        api: ModuleApi.DEFAULT,
+        path: 'rubriquage/find',
+        parameters: {
+            organisationId: organisationIds,
+            ...searchOptions
+        }
+    });
+}
+
+async function searchRubriques(searchOptions?: {
+    rubriquageId?: number;
+    organisationId?: string|Array<string>;
+    query?: string;
+}): Promise<Array<Rubrique>> {
+    return classicApi.fetchData<Array<Rubrique>>({
+        api: ModuleApi.DEFAULT,
+        path: 'rubrique/search',
+        parameters: searchOptions
+    });
+}
+
+/**
+ * Fetch rubrique data by ID
+ * @see getCachedRubrique
+ * @param rubriqueId ID of the rubrique to fetch
+ * @returns The rubrique
+ */
+async function getRubrique(rubriqueId: number): Promise<Rubrique> {
+    return classicApi.fetchData<Rubrique>({
+        api: ModuleApi.DEFAULT,
+        path: `rubrique/${rubriqueId}`
+    });
+}
+
+/**
+ * Fetch rubrique data by ID
+ * If the rubrique is available in the cache, return it from the cache
+ * @param rubriqueId ID of the rubrique to fetch
+ * @returns The rubrique
+ */
+async function getCachedRubrique(rubriqueId: number): Promise<Rubrique> {
+    const cacheStore = useCacheStore();
+    return cacheStore.getData(`rubrique-${rubriqueId}`, () => getRubrique(rubriqueId));
+}
+
+export const rubriquesApi = {
+    getRubrique,
+    getCachedRubrique,
+    searchRubriquages,
+    searchRubriques
+};

package/src/components/composable/usePresentationItem.ts

@@ -0,0 +1,78 @@
+import { Emission } from "@/stores/class/general/emission";
+import { state } from "../../stores/ParamSdkStore";
+import { useGeneralStore } from "../../stores/GeneralStore";
+import { Podcast } from "../../stores/class/general/podcast";
+import { rubriquesApi } from "../../api";
+import { useDayjs } from "./useDayjs";
+
+export const usePresentationItem = () => {
+    const generalStore = useGeneralStore();
+    const { formatDate } = useDayjs();
+
+    function iabTags(emission: Emission): Array<string> {
+        return generalStore.storedCategories
+            .filter(cat => emission.iabIds.includes(cat.id))
+            .map(cat => cat.name);
+    }
+
+    async function rubriqueTags(element: Podcast|Emission): Promise<Array<string>> {
+        const rubriqueIds: Array<number> = [];
+        if (element.rubriqueIds) {
+            rubriqueIds.push(...element.rubriqueIds);
+        }
+        if ('emission' in element && element.emission.rubriqueIds) {
+            rubriqueIds.push(...element.emission.rubriqueIds);
+        }
+        const promises = rubriqueIds.map(rubriquesApi.getCachedRubrique);
+        const rubriques = await Promise.all(promises);
+
+        if (state.presentationItems.tagsRubriquageId) {
+            const rubriquageId = state.presentationItems.tagsRubriquageId;
+            return rubriques.filter(r => r.rubriquageId === rubriquageId).map(r => r.name);
+        } else {
+            return rubriques.map(r => r.name);
+        }
+    }
+    
+    async function tagsFor(element: Podcast|Emission): Promise<Array<string>|undefined> {
+        const type = state.presentationItems.tags;
+        let tags: Array<string>|undefined = undefined;
+        if (type === 'iab') {
+            const emission = 'emission' in element ? element.emission : element;
+            tags = iabTags(emission);
+        } else if (type === 'rubrique') {
+            tags = await rubriqueTags(element);
+        }
+
+        if (tags && state.presentationItems.tagsLimit) {
+            return tags.slice(0, state.presentationItems.tagsLimit);
+        }
+
+        return tags;
+    }
+
+    function additionalInfoFor(element: Podcast|Emission): Array<string>|undefined {
+        const prop = state.presentationItems.additionalInfo;
+        if (!prop?.length) {
+            return undefined;
+        }
+
+        const podcast = 'emission' in element ? element : null;
+        const emission = podcast?.emission ?? element as Emission;
+
+        return prop.map(property => {
+            if (property === 'date') {
+                if (podcast?.pubDate) {
+                    return formatDate(podcast.pubDate);
+                } else {
+                    return null;
+                }
+            } else if (property === 'productor') {
+                return emission.orga.name;
+            }
+            return null;
+        }).filter(p => p !== null);
+    }
+
+    return { tagsFor, additionalInfoFor };
+};

package/src/components/display/emission/EmissionInlineList.vue

@@ -30,7 +30,7 @@
     <router-link
       v-if="href"
       :to="href"
-      class="btn btn-primary align-self-center w-fit-content m-4"
+      class="btn btn-primary align-self-center w-fit-content m-4 icon-available"
     >
       {{ buttonText }}
     </router-link>

package/src/components/display/emission/EmissionPresentationItem.vue

@@ -2,33 +2,42 @@
   Component to display an emission with its description
 -->
 <template>
-  <PresentationItem
-    :name="emission.name"
-    :route="route"
-    :image-url="emission.imageUrl"
-    :description="isDescription ? emission.description : undefined"
-    :vertical="isVertical"
-  />
+    <PresentationItem
+        :name="emission.name"
+        :route="route"
+        :image-url="emission.imageUrl"
+        :description="isDescription ? emission.description : undefined"
+        :vertical="isVertical"
+        :tags="tags"
+        :additional-info="additionalInfoFor(emission)"
+    />
 </template>
 
 <script setup lang="ts">
 import { Emission } from "@/stores/class/general/emission";
 import PresentationItem from "../../layouts/PresentationItem.vue";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { RouteLocationRaw } from "vue-router";
+import { usePresentationItem } from "../../composable/usePresentationItem";
 
 //Props 
 const props = defineProps<{
-  /** The emission to display */
-  emission: Emission;
-  /** When true display the card vertically */
-  isVertical?: boolean;
-  /** When true also display the description */
-  isDescription?: boolean;
+    /** The emission to display */
+    emission: Emission;
+    /** When true display the card vertically */
+    isVertical?: boolean;
+    /** When true also display the description */
+    isDescription?: boolean;
 }>();
 
+const tags = ref([]);
+const { tagsFor, additionalInfoFor } = usePresentationItem();
+
+watch(props.emission, async () => {
+    tags.value = await tagsFor(props.emission);
+}, { immediate: true });
+
 const route = computed((): RouteLocationRaw => {
-  return { name: 'emission', params: { emissionId: props.emission.emissionId } };
+    return { name: 'emission', params: { emissionId: props.emission.emissionId } };
 });
-
 </script>

package/src/components/display/podcastmaker/PodcastmakerHeader.vue

@@ -1,72 +1,87 @@
 <template>
-  <div class="page-element-title-container">
-    <div class="page-element-title">
-      <h1>{{ pageTitle }}</h1>
+    <div class="page-element-title-container">
+        <div class="page-element-title">
+            <h1>{{ pageTitle }}</h1>
+        </div>
+        <div class="page-element-bg" :style="backgroundDisplay" />
     </div>
-    <div class="page-element-bg" :style="backgroundDisplay" />
-  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import {useImageProxy} from "../../composable/useImageProxy";
+import { computed, onMounted } from "vue";
+import { useImageProxy } from "../../composable/useImageProxy";
 
 //Props 
 const props = defineProps({
-  pageTitle: { default: undefined, type: String },
-  imgUrl: { default: undefined, type: String },
+    pageTitle: { default: undefined, type: String },
+    imgUrl: { default: undefined, type: String },
 })
 
+onMounted(() => {
+    const elt = document.querySelector('.page-element-title-container');
+
+    // Retrieve header
+    const header = document.getElementsByTagName('header');
+    if (header.length) {
+        // Get header height
+        const height = (header[0] as HTMLElement).offsetHeight;
+        // Update PM header position according to header height
+        elt.style.setProperty('--top', height + 'px');
+    }
+});
+
 //Composables
 const { useProxyImageUrl } = useImageProxy();
 
 //Computed
 const backgroundDisplay = computed(() => {
-  if (!props.imgUrl) {
-    return "";
-  }
-  return `background-image: url('${useProxyImageUrl(
-    props.imgUrl,
-    "250",
-  )}');`;
+    if (!props.imgUrl) {
+        return "";
+    }
+    return `background-image: url('${useProxyImageUrl(
+        props.imgUrl,
+        "250",
+    )}');`;
 });
 </script>
 
 <style lang="scss">
 .octopus-app {
-  .page-element.page-element-podcastmaker {
-    margin-top: 11rem;
-  }
+    .page-element.page-element-podcastmaker {
+        margin-top: 11rem;
+    }
 
-  .page-element-title-container {
-    background: black;
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
+    .page-element-title-container {
+        --top: 0;
 
-    .page-element-bg {
-      height: 15rem;
-      opacity: 0.5;
-      filter: blur(8px);
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
+        background: black;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: var(--top);
+
+        .page-element-bg {
+            height: 15rem;
+            opacity: 0.5;
+            filter: blur(8px);
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
 
-    .page-element-title {
-      position: absolute;
-      inset: 0;
-      z-index: 2;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+        .page-element-title {
+            position: absolute;
+            inset: 0;
+            z-index: 2;
+            display: flex;
+            justify-content: center;
+            align-items: center;
 
-      h1 {
-        color: white !important;
-        font-size: 2rem;
-      }
+            h1 {
+                color: white !important;
+                font-size: 2rem;
+            }
+        }
     }
-  }
 }
 </style>

package/src/components/display/podcasts/PodcastPresentationList.vue

@@ -2,37 +2,39 @@
   Simple component to display a few podcasts
 -->
 <template>
-  <PresentationLayout
-    v-if="!loading && !error"
-    :title="title"
-    :items="podcasts"
-    :route="href"
-    :button-text="buttonText"
-  >
-    <template #item="{ item, first }">
-      <PresentationItem
-        :class="!isPhone && first ? 'me-3' : ''"
-        :name="item.title"
-        :route="route(item)"
-        :image-url="item.imageUrl"
-        :description="item.description"
-        :vertical="!isPhone && first"
-      >
-        <template #after-image>
-          <PodcastPlayButton
-            :podcast="item"
-            :hide-play="false"
-            :show-processing="false"
-          />
+    <PresentationLayout
+        v-if="!loading && !error"
+        :title="title"
+        :items="podcasts"
+        :route="href"
+        :button-text="buttonText"
+    >
+        <template #item="{ item, first }">
+            <PresentationItem
+                :class="!isPhone && first ? 'me-3' : ''"
+                :name="item.title"
+                :route="route(item)"
+                :image-url="item.imageUrl"
+                :description="item.description"
+                :vertical="!isPhone && first"
+                :tags="tags.get(item.podcastId)"
+                :additional-info="additionalInfoFor(item)"
+            >
+                <template #after-image>
+                    <PodcastPlayButton
+                        :podcast="item"
+                        :hide-play="false"
+                        :show-processing="false"
+                    />
+                </template>
+            </PresentationItem>
         </template>
-      </PresentationItem>
-    </template>
-  </PresentationLayout>
-  <ClassicLoading
-    v-else
-    :loading-text="loading ? $t('Loading emissions ...') : undefined"
-    :error-text="error ? $t(`Error`) : undefined"
-  />
+    </PresentationLayout>
+    <ClassicLoading
+        v-else
+        :loading-text="loading ? $t('Loading emissions ...') : undefined"
+        :error-text="error ? $t(`Error`) : undefined"
+    />
 </template>
 
 <script setup lang="ts">
@@ -40,7 +42,7 @@ import classicApi from "../../../api/classicApi";
 import {useErrorHandler} from "../../composable/useErrorHandler";
 import ClassicLoading from "../../form/ClassicLoading.vue";
 import { Emission } from "@/stores/class/general/emission";
-import { onMounted, Ref, ref } from "vue";
+import { onMounted, reactive, Ref, ref, watch } from "vue";
 import { AxiosError } from "axios";
 import {useResizePhone} from "../../composable/useResizePhone";
 import { ListClassicReturn } from "../../../stores/class/general/listReturn";
@@ -52,89 +54,101 @@ import PresentationItem from "../../layouts/PresentationItem.vue";
 import PodcastPlayButton from "./PodcastPlayButton.vue"; 
 import { RouteLocationRaw } from "vue-router";
 import { podcastApi, PodcastSort } from "../../../api/podcastApi";
+import { usePresentationItem } from "../../composable/usePresentationItem";
 
 //Props 
 const props = defineProps({
-  organisationId: { default: undefined, type: String },
-  title: { default: "", type: String },
-  href: { default: undefined, type: String },
-  buttonText: { default: undefined, type: String },
-  isDescription: { default: false, type: Boolean },
-  rubriquesId: { default: [], type: Array<number> },
+    organisationId: { default: undefined, type: String },
+    title: { default: "", type: String },
+    href: { default: undefined, type: String },
+    buttonText: { default: undefined, type: String },
+    isDescription: { default: false, type: Boolean },
+    rubriquesId: { default: [], type: Array<number> },
 })
 
 //Data 
 const loading = ref(true);
 const error = ref(false);
 const podcasts: Ref<Array<Podcast>> = ref([]);
+const tags = reactive(new Map<number, Array<string>>());
   
 //Composables
 const { isPhone } = useResizePhone();
-const {handle403} = useErrorHandler();
+const { handle403 } = useErrorHandler();
+const { tagsFor, additionalInfoFor } = usePresentationItem();
 
-onMounted(()=>fetchNext())
+onMounted(fetchNext);
+
+watch(podcasts, async () => {
+    podcasts.value.forEach(async (podcast) => {
+        if (!tags.has(podcast.podcastId)) {
+            const t = await tagsFor(podcast);
+            tags.set(podcast.podcastId, t);
+        }
+    });
+});
 
 //Methods
 async function fetchNext(): Promise<void> {
-  loading.value = true;
-  try {
-    // Retrieve latest emissions
-    const emissions = await classicApi.fetchData<ListClassicReturn<Emission>>({
-      api: 0,
-      path: "emission/search",
-      parameters: {
-        first: 0,
-        size: 5,
-        organisationId: props.organisationId,
-        sort: "LAST_PODCAST_DESC",
-        rubriqueId: props.rubriquesId
-      },
-      specialTreatement: true,
-    });
+    loading.value = true;
+    try {
+        // Retrieve latest emissions
+        const emissions = await classicApi.fetchData<ListClassicReturn<Emission>>({
+            api: 0,
+            path: "emission/search",
+            parameters: {
+                first: 0,
+                size: 5,
+                organisationId: props.organisationId,
+                sort: "LAST_PODCAST_DESC",
+                rubriqueId: props.rubriquesId
+            },
+            specialTreatement: true,
+        });
 
-    const promises: Array<Promise<SimplifiedPodcast>> = [];
+        const promises: Array<Promise<SimplifiedPodcast>> = [];
 
-    for (let i = 0; i < emissions.result.length; i++) {
-      promises.push(podcastApi.search({
-        first: 0,
-        size: 1,
-        organisationId: [props.organisationId],
-        emissionId: [emissions.result[i].emissionId],
-        sort: PodcastSort.DATE,
-        rubriqueId: props.rubriquesId
-      }).then(r => r.result[0]));
-    }
+        for (let i = 0; i < emissions.result.length; i++) {
+            promises.push(podcastApi.search({
+                first: 0,
+                size: 1,
+                organisationId: [props.organisationId],
+                emissionId: [emissions.result[i].emissionId],
+                sort: PodcastSort.DATE,
+                rubriqueId: props.rubriquesId
+            }).then(r => r.result[0]));
+        }
 
-    // Retrieve the podcasts for these emissions
-    const data = await Promise.all(promises);
+        // Retrieve the podcasts for these emissions
+        const data = await Promise.all(promises);
 
-    podcasts.value = podcasts.value.concat(
-      data.filter((em: SimplifiedPodcast | null) => null !== em && undefined !== em).map(p => {
-        // Get emission from podcast
-        const emission = emissions.result.find(e => e.emissionId === p.emissionId);
-        // Create full podcast from simplified + emission
-        return simplifiedToFull(p, emission.orga, emission);
-      })
-    );
+        podcasts.value = podcasts.value.concat(
+            data.filter((em: SimplifiedPodcast | null) => null !== em && undefined !== em).map(p => {
+                // Get emission from podcast
+                const emission = emissions.result.find(e => e.emissionId === p.emissionId);
+                // Create full podcast from simplified + emission
+                return simplifiedToFull(p, emission.orga, emission);
+            })
+        );
 
-    // Sort podcasts by pub date so that the most recent one is focused
-    podcasts.value.sort((p1, p2) => {
-      return new Date(p2.pubDate).getTime() - new Date(p1.pubDate).getTime();
-    });
+        // Sort podcasts by pub date so that the most recent one is focused
+        podcasts.value.sort((p1, p2) => {
+            return new Date(p2.pubDate).getTime() - new Date(p1.pubDate).getTime();
+        });
     
+        loading.value = false;
+    } catch (errorWs) {
+        console.error(errorWs);
+        handle403(errorWs as AxiosError);
+        error.value = true;
+    }
     loading.value = false;
-  } catch (errorWs) {
-    console.error(errorWs);
-    handle403(errorWs as AxiosError);
-    error.value = true;
-  }
-  loading.value = false;
 }
 
 function route(podcast: Podcast): RouteLocationRaw {
-  return {
-    name: 'podcast',
-    params: { podcastId: podcast.podcastId }
-  }
+    return {
+        name: 'podcast',
+        params: { podcastId: podcast.podcastId }
+    }
 }
 </script>