@saooti/octopus-sdk 41.2.1 → 41.3.1

package/CHANGELOG.md

@@ -1,10 +1,54 @@
 # CHANGELOG
 
+## 42.3.1 (09/01/2026)
+
+**Features**
+
+- Recherche avancée
+  - Ajout du filtrage par groupe sur les émissions
+  - Ajustement filtrage par groupe sur les podcasts
+- Miniplayer
+  - Ajout d'une option de hauteur automatique
+- Les liens dans les descriptions s'ouvrent maintenant dans un nouvel onglet
+
+**Fixes**
+
+- Suppression d'un lien SmartLink oublié sur les playlists.
+- Correction d'affichage des descriptions html dans les SmartLinks
+
+**Misc**
+
+- Producteur mis à jour lors de la consultation d'une émission/playlist/podcast
+  quand non connecté
+
+## 42.3.0 (09/01/2026)
+
+**Features**
+
+- Affichage des flux RSS définis sur les playlists
+- Ajout d'une page de smartlink pour les émissions et les playlists
+  - Affiche les informations de base de l'émission/la playlist
+  - Affiche les liens vers les différents diffuseurs définis
+  - Affiche un bouton de lecture du dernier épisode
+  - Affiche un lien vers le podcastmaker, si défini
+- Mise en place d'un système de layouts (cf [documentation](./doc/routing.md))
+- Plateformes de distribution
+  - Factorisation du code pour simplifier la réutilisation
+  - Mise en place du composable `useSharePlatforms`
+  - Ajout de PodBean, Podcast Republic, et Castbox
+- Ajout du composable `useSharePath`
+  - Regroupe la logique pour le calcul des paths pour les liens partagés
+
+**Misc**
+
+- Début de [doc](./doc/README.md)
+- Début mise en place de tests unitaires
+
 ## 41.2.1 (05/01/2026)
 
 **Fixes**
 
-- Recherche avancées
+- Recherche avancée
   - Correction chargements groupes & ayants-droits depuis routing
   - Filtrage des groupes par organisation
 

package/doc/README.md

@@ -0,0 +1,5 @@
+# Documentation octopus-sdk
+
+## Table des matières
+
+1. [Routing](./routing.md)

package/doc/routing.md

@@ -0,0 +1,50 @@
+# Routing
+
+octopus-sdk se base sur `vue-router` pour mettre en place le routing de
+l'application.
+
+Il est cependant nécessaire de faire une mise en place particulière pour
+le bon fonctionnement de l'application.
+
+## Mise en place du routing
+
+Les routes sont définies de manière standard dans octopus-sdk, dans le fichier
+`src/router/routes.ts`. Ces routes sont exportées, afin de pouvoir être
+intégrées dans les applications s'appuyant sur le sdk.
+
+Afin d'appliquer la logique propre aux routes, il est nécessaire d'appeler la
+fonction utilitaire `setupRouter` (définie dans `src/router/utils.ts`).
+Celle-ci se charge de mettre en place des navigation guards, en particulier
+pour la gestion du productor actif.
+
+Un exemple d'appel est disponible dans `src/router/router.ts`.
+
+## Layouts
+
+octopus-sdk inclu un système de layouts permettant de simplement modifier la
+façon dont les pages sont affichées.
+
+Par défaut, les pages utilisent le layout défini lors de l'appel à
+`setupRouter`.
+
+Il est cependant possible d'écraser ce layout en rajoutant une propriété
+`layout` aux `meta` de la route. Cela permet par exemple de créer une page
+n'affichage pas le header ou le footer standard de l'application.
+
+Exemple d'usage :
+
+```ts
+{
+  path: '/my/new/page',
+  component: Page,
+  meta: {
+    title: 'Title of page with custom layout',
+    layout: () => import('../layouts/MyCustomLayout.vue')
+  }
+}
+```
+
+Dans ce cas, la page `/my/new/page` n'utilisera pas le layout par défaut,
+mais celui de `../layouts/MyCustomLayout.vue`.
+
+Des exemples de layouts sont définis dans `src/layouts`.

package/index.ts

@@ -127,6 +127,8 @@ import {useInit} from "./src/components/composable/useInit.ts";
 import {useErrorHandler} from "./src/components/composable/useErrorHandler.ts";
 import { useSimplePageParam } from "./src/components/composable/route/useSimplePageParam";
 import { useNotifications } from "./src/components/composable/useNotifications.ts";
+export { useSharePlatforms } from "./src/components/composable/share/useSharePlateforms.ts";
+export { useSharePath } from "./src/components/composable/share/useSharePath.ts";
 
 //helper
 import domHelper from "./src/helper/domHelper.ts";
@@ -160,6 +162,9 @@ export { podcastApi, PodcastSort, type PodcastSearchOptions } from "./src/api/po
 
 // Types
 export { type Emission, emptyEmissionData } from "./src/stores/class/general/emission.ts";
+export { type Podcast, type PodcastAvailability } from "./src/stores/class/general/podcast.ts";
+export { type Playlist, type PlaylistRule } from "./src/stores/class/general/playlist.ts";
+export { type Annotations } from "./src/stores/class/general";
 
 //Icons
 export const getAmazonMusicIcon = () => import("./src/components/icons/AmazonMusicIcon.vue");
@@ -175,6 +180,9 @@ export const getRadiolineIcon = () => import("./src/components/icons/RadiolineIc
 export const getTuninIcon = () => import("./src/components/icons/TuninIcon.vue");
 export const getXIcon = () => import("./src/components/icons/XIcon.vue");
 
+// Layouts
+export const getSimpleLayout = () => import("./src/layouts/SimpleLayout.vue");
+
 // Routing
 import { setupRouter, getSimpleRouteProps, getRouteProps } from './src/router/utils';
 import { routes as sdkRoutes } from './src/router/routes';
@@ -183,7 +191,6 @@ import { routes as sdkRoutes } from './src/router/routes';
 import { type SelectOption } from "./src/components/form/ClassicSelect.vue";
 
 import { ROUTE_PARAMS } from "./src/components/composable/route/types";
-import { defineAsyncComponent } from "vue";
 
 export {
     useResizePhone,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.2.1",
+  "version": "41.3.1",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -8,6 +8,7 @@
     "serve": "vite preview",
     "build": "vite build",
     "dev": "vite",
+    "test": "vitest",
     "bundle": "vite-bundle-visualizer",
     "proxy_authentifié": "node proxy.ts",
     "proxy_non_authentifié": "node proxy.ts false",
@@ -66,9 +67,12 @@
     "@types/sockjs-client": "^1.5.4",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^9.39.1",
     "eslint-plugin-vue": "^9.33.0",
-    "typescript": "^5.9.3"
+    "happy-dom": "^20.1.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16"
   },
   "postcss": {
     "plugins": {

package/src/App.vue

@@ -1,37 +1,23 @@
 <template>
   <div class="d-flex flex-column h-100 octopus-app">
-    <template v-if="pageFullyLoad">
-      <TopBar/>
-      <main role="main">
-        <CategoryFilter v-if="firstDisplayCategoryFilter" />
-        <div v-else class="category-filter-no-filter" />
-        <router-view />
-        <PlayerComponent />
-      </main>
-      <FooterOctopus />
-    </template>
+    <component v-if="pageFullyLoad" :is="route.meta.layoutComponent">
+      <router-view />
+    </component>
   </div>
 </template>
+
 <script setup lang="ts">
-import TopBar from "@/components/misc/TopBar.vue";
-import FooterOctopus from "@/components/misc/FooterSection.vue";
-import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
 import {useInit} from "./components/composable/useInit";
 import {useMetaTitle} from "./components/composable/useMetaTitle";
 import {useOrganisationFilter} from "./components/composable/useOrganisationFilter";
 import { useAuthStore } from "./stores/AuthStore";
-import { defineAsyncComponent, getCurrentInstance, onBeforeMount, ref, watch } from "vue";
+import { getCurrentInstance, onBeforeMount, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 
-const CategoryFilter = defineAsyncComponent(
-  () => import("@/components/display/categories/CategoryFilter.vue"),
-);
-
 //Data 
 const reload = ref(false);
 const pageFullyLoad = ref(false);
-const firstDisplayCategoryFilter = ref(false);
 
 //Composables
 const {locale} = useI18n();
@@ -41,25 +27,11 @@ const {selectOrganisation} = useOrganisationFilter();
 const authStore = useAuthStore();
 const route = useRoute();
 
-
 //Watch
 watch(route, async () => {
   updateMetaTitle();
-  if (firstDisplayCategoryFilter.value) {
-    return;
-  }
-  const namesRouteWithCategoryFilter = [
-    "homePriv",
-    "home",
-    "podcasts",
-    "emissions",
-    "participants",
-    "playlists",
-  ];
-  firstDisplayCategoryFilter.value = namesRouteWithCategoryFilter.includes(
-    route.name?.toString() ?? "",
-  );
-}, {immediate: true});
+}, { immediate: true });
+
 watch(locale,() => {
   updateMetaTitle();
   const instance = getCurrentInstance();
@@ -67,7 +39,6 @@ watch(locale,() => {
   reload.value = !reload.value;
 });
 
-
 onBeforeMount(()=>{
   initApp();
   setTimeout(() => {

package/src/api/organisationApi.ts

@@ -1,6 +1,6 @@
 import classicApi from "./classicApi";
 import { ModuleApi } from "./apiConnection";
-import { Organisation } from "../stores/class/general/organisation";
+import { Organisation, OrganisationAttributes } from "../stores/class/general/organisation";
 import { mapFromGetAll } from "./apiUtils";
 
 /**
@@ -25,7 +25,20 @@ async function getAllById(organisationIds: Array<string>): Promise<Record<string
     return mapFromGetAll(organisationIds, get, 'id');
 }
 
+/**
+ * Retrieve the attributes of a given organisation
+ * @param organisationId The ID of the organisation
+ * @returns The attributes of the organisation
+ */
+async function getAttributes(organisationId: string): Promise<OrganisationAttributes> {
+    return classicApi.fetchData<OrganisationAttributes>({
+        api: ModuleApi.DEFAULT,
+        path: 'organisation/attributes/' + organisationId
+    });
+}
+
 export const organisationApi = {
     get,
-    getAllById
+    getAllById,
+    getAttributes
 };

package/src/api/podcastApi.ts

@@ -8,7 +8,6 @@ import { organisationApi } from './organisationApi';
 import { emissionApi } from './emissionApi';
 import { EmissionGroup } from './groupsApi';
 import { FetchParam } from '@/stores/class/general/fetchParam';
-import { toRaw } from 'vue';
 
 export enum PodcastSort {
     DATE = 'DATE',
@@ -45,7 +44,7 @@ export interface PodcastSearchOptions extends Paginable<PodcastSort> {
     /** Filter by emission ID */
     emissionId?: number|number[];
     /** Filter by emission groups */
-    emissionGroups?: EmissionGroup[];
+    groupId?: number[];
     /** Filter by organisation ID */
     organisationId?: string[];
     /** Filter by title containing */
@@ -135,12 +134,6 @@ function processSearchParameters(search: PodcastSearchOptions): FetchParam {
             parameters.after = value;
         } else if (key === 'pageSize') {
             parameters.size = value;
-        } else if (key === 'emissionGroups') {
-            const emissionIds = [search.emissionId ?? undefined].flat();
-            search.emissionGroups.forEach(group => {
-                emissionIds.push(...group.emissionIds);
-            });
-            parameters.emissionId = emissionIds;
         } else {
             parameters[key] = value;
         }

package/src/components/composable/player/usePlayerLogic.ts

@@ -260,7 +260,7 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>) => {
   }
 
 
-	return {
+  return {
     audioUrlToPlay,
     listenTime,
     playerError,
@@ -275,5 +275,5 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>) => {
     onSeeked,
     onFinished,
     onPlay
-	}
+  }
 }

package/src/components/composable/route/useSeoTitleUrl.ts

@@ -25,6 +25,7 @@ export const useSeoTitleUrl = ()=>{
   }
 
 	return {
-    updatePathParams
+      updatePathParams,
+      stringUrlEncode
 	}
 }

package/src/components/composable/share/useSharePath.ts

@@ -0,0 +1,77 @@
+import { OrganisationAttributes } from "@/stores/class/general/organisation";
+import { RouteLocation, RouteLocationAsRelativeTyped, RouteLocationNormalized, useRouter } from "vue-router";
+import { useSeoTitleUrl } from "../route/useSeoTitleUrl";
+
+export const useSharePath = () => {
+    const router = useRouter();
+    const { stringUrlEncode } = useSeoTitleUrl();
+
+    /** Retrieve the URL of the podcastmaker, if any */
+	function getPodcastMakerUrl(attributes?: OrganisationAttributes): string|undefined {
+        if (attributes?.podcastmakerUrl) {
+            return attributes.podcastmakerUrl;
+        }
+	}
+
+	/**
+	 * Retrieve the base URL for sharing.
+	 * If the podcastmaker URL is defined, it will be used.
+	 * Otherwise, the frontend URL will be used.
+	 * @param attributes The attributes defined on the organisation, from
+	                     which the podcastmaker url is extracted
+	 */
+	function getBaseSharePath(attributes?: OrganisationAttributes): string {
+	    const pmUrl = getPodcastMakerUrl(attributes);
+	    if (pmUrl) {
+	        return pmUrl;
+	    } else {
+	        return window.location.origin;
+	    }
+	}
+
+    /**
+     * Retrieve the full URL to a page, for sharing.
+     * If the podcastmaker URL is set, the link will point to it.
+	 * @param attributes The attributes defined on the organisation, from
+	                     which the podcastmaker url is extracted
+	 */
+	function getSharePath(route: RouteLocationAsRelativeTyped, attributes?: OrganisationAttributes): string {
+        const resolved = router.resolve(route);
+        return getBaseSharePath(attributes) + resolved.path;
+	}
+
+	type GetSmartLinkParam = {
+	    /** The title of the element displayed by the smartlink page */
+	    title?: string;
+	    playlistId: number;
+	    emissionId?: never;
+	} | {
+	    /** The title of the element displayed by the smartlink page */
+	    title?: string;
+	    playlistId?: never;
+	    emissionId: number;
+	};
+	/**
+	 * Retrieve the full URL for SmartLinks.
+     * If the podcastmaker URL is set, the link will point to it.
+     * @param params The parameters of the smartlink. The ID of the element is
+                     required, whereas the title is optional, but if specified
+                     it will be included in the URL.
+	 * @param attributes The attributes defined on the organisation, from
+	                     which the podcastmaker url is extracted
+	 */
+	function getSmartLink(params: GetSmartLinkParam, attributes?: OrganisationAttributes): string {
+	    const title = params.title ? stringUrlEncode(params.title) : undefined;
+	    if (params.playlistId) {
+	        return getSharePath({ name: 'playlist-smartlink', params: { playlistId: params.playlistId, title }}, attributes);
+	    } else if (params.emissionId) {
+	        return getSharePath({ name: 'emission-smartlink', params: { emissionId: params.emissionId, title }}, attributes);
+	    }
+	}
+
+	return {
+	    getPodcastMakerUrl,
+	    getSharePath,
+	    getSmartLink
+	}
+}

package/src/components/composable/share/useSharePlateforms.ts

@@ -0,0 +1,168 @@
+import RadiolineIcon from "../../icons/RadiolineIcon.vue";
+import TuninIcon from "../../icons/TuninIcon.vue";
+import PodcastAddictIcon from "../../icons/PodcastAddictIcon.vue";
+import PocketCastIcon from "../../icons/PocketCastIcon.vue";
+import PlayerFmIcon from "../../icons/PlayerFmIcon.vue";
+import IHeartIcon from "../../icons/IHeartIcon.vue";
+import AmazonMusicIcon from "../../icons/AmazonMusicIcon.vue";
+import DeezerIcon from "../../icons/DeezerIcon.vue";
+import ApplePodcastIcon from "../../icons/ApplePodcastIcon.vue";
+import CastboxIcon from "../../icons/CastboxIcon.vue"; 
+import PodcastRepublicIcon from "../../icons/PodcastRepublicIcon.vue";
+import PodbeanIcon from "../../icons/PodbeanIcon.vue"; 
+import YoutubeIcon from "vue-material-design-icons/Youtube.vue";
+import SpotifyIcon from "vue-material-design-icons/Spotify.vue";
+import { Annotations } from "@/stores/class/general";
+import { computed, type Component } from "vue";
+import { useI18n } from "vue-i18n";
+
+export interface SharePlatform {
+    /** ID of the platform */
+    name: string;
+    /** Display text for the platform */
+    label: string;
+    /** Icon of the platform */
+    icon: Component;
+    /** Title for buttons */
+    title: string;
+    /** Color of the icon */
+    color: string;
+}
+
+export interface SharePlatformUrl extends SharePlatform {
+    /** URL to the platform */
+    url: string;
+}
+
+export const useSharePlatforms = () => {
+    const { t } = useI18n();
+    
+    const platforms = computed((): Array<SharePlatform> => {
+        return [{
+            name: "applePodcast",
+            label: t("Apple podcast"),
+            icon: ApplePodcastIcon,
+            title: "Apple Podcast | iTunes",
+            color:"#aa1dd3"
+        }, {
+            name: "deezer",
+            label: t("Deezer"),
+            icon: DeezerIcon,
+            title: "Deezer",
+            color:"#a238ff",
+        }, {
+            name: "spotify",
+            label: t("Spotify"),
+            icon: SpotifyIcon,
+            title: "Spotify",
+            color: "#1ed760",
+        }, {
+            name: "amazon",
+            label: t("Amazon"),
+            icon: AmazonMusicIcon,
+            title: "Amazon Music",
+            color: "#0c6cb3",
+        }, {
+            name: "iHeart",
+            label: t("iHeart"),
+            icon: IHeartIcon,
+            title: "iHeart",
+            color:"#e11b22"
+        }, {
+            name: "playerFm",
+            label: t("Player FM"),
+            icon: PlayerFmIcon,
+            title: "PlayerFM",
+            color:"#bb202a"
+        }, {
+            name: "pocketCasts",
+            label: t("Pocket Casts"),
+            icon: PocketCastIcon,
+            title: "Pocket Casts",
+            color:"#f43e37"
+        }, {
+            name: "podcastAddict",
+            label: t("Podcast Addict"),
+            icon: PodcastAddictIcon,
+            title: "Podcast Addict",
+            color:"#f4842d"
+        }, {
+            name: "radioline",
+            label: t("Radioline"),
+            icon: RadiolineIcon,
+            title: "Radioline",
+            color:"#1678bd"
+        }, {
+            name: "tunein",
+            label: t("Tunein"),
+            icon: TuninIcon,
+            title: "TuneIn",
+            color:"#36b4a7"
+        }, {
+            name: "youtube",
+            label: t("YouTube Music"),
+            icon: YoutubeIcon,
+            title: "YouTube Music",
+            color: "#fe0000",
+        }, {
+            name: "castbox",
+            label: t("Castbox"),
+            icon: CastboxIcon,
+            title: "Castbox",
+            color: "#fe6222",
+        }, {
+            name: "podbean",
+            label: t("PodBean"),
+            icon: PodbeanIcon,
+            title: "PodBean",
+            color: "#428200",
+        }, {
+            name: "podcastrepublic",
+            label: t("Podcast Republic"),
+            icon: PodcastRepublicIcon,
+            title: "Podcast Republic",
+            color: "#5c85dd",
+        }];
+    });
+
+    /**
+     * Get platforms with their associated links.
+     * A platform with no link will not be included
+     * @param annotations The annotations of the element for which to get the
+                          platforms links
+     */
+    function getPlatformsWithLinks(annotations:Annotations|undefined): Array<SharePlatformUrl> {
+        const ary: Array<SharePlatformUrl> = [];
+        platforms.value.forEach(p => {
+            const url = getUrl(p.name, annotations);
+            if (url) {
+                ary.push({
+                    ...p,
+                    url
+                });
+            }
+        })
+        return ary;
+    }
+
+    function getUrl(sub: string, annotations: Annotations|undefined): string | undefined {
+        return externaliseLinks(
+            annotations?.[sub] as string | undefined,
+        );
+    }
+
+    function externaliseLinks(link?: string): string | undefined {
+        if (!link) {
+            return link;
+        }
+        link = link.trim();
+        return !link.startsWith("http") && !link.startsWith("//")
+            ? "//" + link
+            : link;
+    }
+
+    return {
+        getPlatformsWithLinks,
+        platforms
+    }
+};

package/src/components/composable/useImageProxy.ts

@@ -24,7 +24,7 @@ export const useImageProxy = ()=>{
     return url;
   }
 
-	return {
+  return {
     useProxyImageUrl
-	}
-}
+  }
+}

package/src/components/composable/useMetaTitle.ts

@@ -1,6 +1,7 @@
 import { useGeneralStore } from "../../stores/GeneralStore";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
+
 export const useMetaTitle = ()=>{
 
   const route = useRoute();
@@ -8,12 +9,12 @@ export const useMetaTitle = ()=>{
   const {t} = useI18n();
 
   function updateMetaTitle(){
-    if(""!==route.meta.title){
-      document.title = route.meta.title ? t(route.meta.title) +' - '+ generalStore.metaTitle: generalStore.metaTitle;
+    if("" !== route.meta.title){
+      document.title = route.meta.title ? t(route.meta.title as string) + ' - ' + generalStore.metaTitle: generalStore.metaTitle;
     }
   }
 
-	return {
+  return {
     updateMetaTitle
-	}
+  }
 }

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

@@ -186,6 +186,7 @@ async function fetchContent(reset: boolean): Promise<void> {
     first: reset? 0: dfirst.value,
     size: dsize.value,
     query: props.query,
+    groupId: props.emissionGroups?.map(g => g.groupId),
     organisationId: organisation.value,
     monetisable: props.monetisable,
     iabId: props.iabId,

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

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { Emission } from "@/stores/class/general/emission";
-import PresentationItem from "../../layout/PresentationItem.vue";
+import PresentationItem from "../../layouts/PresentationItem.vue";
 import { computed } from "vue";
 import { RouteLocationRaw } from "vue-router";
 

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

@@ -31,7 +31,7 @@ import { AxiosError } from "axios";
 import {useResizePhone} from "../../composable/useResizePhone";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
 
-import PresentationLayout from "../../layout/PresentationLayout.vue"; 
+import PresentationLayout from "../../layouts/PresentationLayout.vue"; 
 
 const EmissionItemPresentation = defineAsyncComponent(
   () => import("./EmissionPresentationItem.vue"),

package/src/components/display/filter/AdvancedSearch.vue

@@ -33,7 +33,7 @@
                     />
 
                     <!-- Group filters -->
-                    <div v-if="!isEmission && showEmissionGroups" class="mt-3 d-flex">
+                    <div v-if="showEmissionGroups" class="mt-3 d-flex">
                         <ClassicCheckbox
                             v-model:text-init="emissionGroupCheckbox"
                             class="flex-shrink-0"