@saooti/octopus-sdk 41.10.5 → 41.10.7

package/BUILD_FIX.md

@@ -0,0 +1,105 @@
+# Fixing `@` alias resolution when consumed by other projects
+
+## Problem
+
+`octopus-sdk` currently publishes raw TypeScript source. When a consumer (e.g. frontoffice)
+bundles the SDK, it processes source files with its own Vite config, so `@/` imports resolve
+against the consumer's `src/` instead of the SDK's. This affects both dev and production builds.
+
+## Solution: build the SDK as a library
+
+The SDK should be pre-built so all `@` aliases are resolved before any consumer sees the files.
+
+---
+
+## 1. Install `vite-plugin-dts`
+
+```sh
+npm install -D vite-plugin-dts
+```
+
+---
+
+## 2. Update `vite.config.js`
+
+Add a `lib` build alongside the existing app config. The alias resolution in the `resolve` block
+ensures `@` is rewritten to relative paths in the output.
+
+```js
+import dts from 'vite-plugin-dts';
+
+// In the build config:
+build: {
+  lib: {
+    entry: path.resolve(__dirname, 'index.ts'),
+    formats: ['es'],
+    fileName: 'index',
+  },
+  outDir: 'dist',
+  rollupOptions: {
+    // Mark all dependencies as external so they are not bundled
+    external: (id) => !id.startsWith('.') && !path.isAbsolute(id),
+  },
+},
+plugins: [
+  vue(),
+  dts({ rollupTypes: true }),
+],
+```
+
+Run `npm run build` to produce `dist/index.js` and `dist/index.d.ts`.
+
+---
+
+## 3. Update `package.json`
+
+Point `exports` to the built output instead of raw source:
+
+```json
+"exports": {
+  ".": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  }
+},
+"files": ["dist"]
+```
+
+---
+
+## 4. Development workflow
+
+With a built package, `npm link` / `yalc link` alone is no longer enough — consumers need the
+built output, not the source.
+
+**Option A — watch build (recommended for active SDK development):**
+
+```sh
+# Terminal 1 — SDK
+npm run build -- --watch
+
+# Terminal 2 — frontoffice
+npm run dev
+```
+
+frontoffice picks up changes via the symlink each time the SDK rebuild completes.
+HMR in frontoffice will trigger on the rebuilt file, not on source edits directly.
+
+**Option B — yalc push on change:**
+
+```sh
+# In octopus-sdk, after each change:
+npm run build && yalc push
+```
+
+frontoffice receives the new build automatically if `yalc` is configured with `--watch`.
+
+---
+
+## What to revert in frontoffice
+
+Once the SDK is built, remove from frontoffice's `vite.config.js`:
+
+- `optimizeDeps.exclude: ['@saooti/octopus-sdk']` — no longer needed
+- `server.watch.ignored: ['!**/node_modules/@saooti/octopus-sdk/**']` — no longer needed
+- `server.fs.allow: ['../../../octopus-sdk']` — no longer needed (for npm link setups)

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # CHANGELOG
 
+## 41.10.7 (28/05/2026)
+
+**Fixes**
+
+- **14534** - Correction affichage boutons de plateformes
+
+**Misc**
+
+- Mise à jour dépendances
+
+## 41.10.6 (27/05/2026)
+
+**Fixes**
+
+- **144228** - Correction lecture épisodes non publiés sur orga sécurisée
+
 ## 41.10.5 (26/05/2026)
 
 **Features**

package/package.json

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

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

@@ -12,9 +12,12 @@ import fetchHelper from "../../../helper/fetchHelper";
 import dayjs from "dayjs";
 import { FetchParam } from "@/stores/class/general/fetchParam";
 import { podcastApi } from "../../../api/podcastApi";
+import { Organisation } from "../../../stores/class/general/organisation";
+import { organisationApi } from "../../../api/organisationApi";
+import { OrganisationPrivacy } from "../../../stores/class/securisation/privateOrganisation";
 
 export const usePlayerLogic = (forceHide: Ref<boolean, boolean>) => {
-  const hlsReady= ref(false);
+  const hlsReady = ref(false);
 
   const { listenTime, onPlay, setDownloadId, onTimeUpdateProgress, playLive, endingLive, playRadio} = usePlayerLive(hlsReady);
   const { contentEndedAdsLoader } = usePlayerStitching();
@@ -35,6 +38,10 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>) => {
 
   watch(()=>getAudioUrl(), async () => {
     playerError.value = false;
+
+    // In some cases, the audio does not go through normal download endpoint
+    // Mostly when the podcast is not available to users
+    let download = true;
     if (
       playerStore.playerMedia ||
       !playerStore.playerPodcast ||
@@ -42,12 +49,32 @@ export const usePlayerLogic = (forceHide: Ref<boolean, boolean>) => {
       !playerStore.playerPodcast.availability.visibility ||
       listenError.value
     ) {
+        download = false;
+
+        // Not yet available podcasts in secured organisations go through
+        // download if possible (see #14228)
+        const podcast = playerStore.playerPodcast;
+        if (podcast && !podcast.availability.visibility) {
+          let organisation: Organisation|null = null;
+          if (podcast.organisation) {
+            organisation = podcast.organisation;
+          } else if ('organisationId' in podcast) {
+            // Handle case of missing organisation (for example for SimplifiedPodcast)
+            organisation = await organisationApi.get(podcast.organisationId as string);
+          }
+          if (organisation.privacy === OrganisationPrivacy.SECURED) {
+            download = true;
+          }
+        }
+    }
+
+    if (download) {
+      const response = await podcastApi.downloadRegister(playerStore.playerPodcast.podcastId, getAudioUrlParameters());
+      setDownloadId(response.downloadId.toString());
+      audioUrlToPlay.value = response.location;
+    } else {
       audioUrlToPlay.value = getAudioUrl();
-      return;
     }
-    const response = await podcastApi.downloadRegister(playerStore.playerPodcast.podcastId, getAudioUrlParameters());
-    setDownloadId(response.downloadId.toString());
-    audioUrlToPlay.value = response.location;
   });
 
   watch(()=>playerStore.playerPodcast, async () => {

package/src/components/display/sharing/SubscribeButtons.vue

@@ -1,80 +1,80 @@
 <template>
-  <div
-    v-if="subscriptionsDisplay.length || rssUrl"
-    class="subscribe-buttons-container"
-    :class="{ 'justify-center': justifyCenter }"
-  >
-    <div ref="subscribeButtonsContainer">
-      <a
-        v-for="(sub, index) in subscriptionsDisplay"
-        :id="'subLink' + sub.name"
-        :key="sub.name"
-        rel="noreferrer noopener"
-        target="_blank"
-        :class="{
-          first: 0 === index,
-          last: subscriptionsDisplay.length - 1 === index,
-          mono,
-          small
-        }"
-        class="btn share-btn"
-        :href="sub.url"
-        :title="t('New window', {text: sub.title})"
-      >
-        <component
-          :is="sub.icon"
-          :fill-color="fillColor(sub)"
-          :size="iconSize"
-          non-decorative
-        />
-      </a>
-    </div>
-    <a
-      v-if="!noRss"
-      id="rss-suscribe-button"
-      rel="noreferrer noopener"
-      target="_blank"
-      class="btn share-btn"
-      :class="{ mono, small }"
-      :href="rssUrl"
-      :title="t('New window', {text: t('Rss feed')})"
-    >
-      <RssIcon :fill-color="fillColor()" :size="iconSize" />
-    </a>
-
-    <button
-      v-if="limit === undefined"
-      v-show="hiddenLinks.length"
-      id="subscribe-buttons-dropdown"
-      class="btn share-btn mx-2"
-      :title="t('See more')"
+    <div
+        v-if="subscriptionsDisplay.length || rssUrl"
+        class="subscribe-buttons-container"
+        :class="{ 'justify-center': justifyCenter }"
     >
-      <PlusIcon />
-    </button>
-    <ClassicPopover
-      target="subscribe-buttons-dropdown"
-      popover-class="popover-z-index"
-      :only-click="true"
-      :left-pos="true"
-    >
-      <a
-        v-for="link in hiddenLinks"
-        :key="link.name"
-        rel="noreferrer noopener"
-        target="_blank"
-        class="octopus-dropdown-item justify-content-start d-flex align-items-center realLink"
-        :href="link.url"
-        :title="t('New window', {text: link.title})"
-      >
-        <component
-          :is="link.icon"
-          :fill-color="fillColor(link)"
-          class="me-1"
-        />
-        {{ link.title }}
-      </a>
-    </ClassicPopover>
-  </div>
+        <div ref="subscribeButtonsContainer">
+            <a
+                v-for="(sub, index) in shownLinks"
+                :id="'subLink' + sub.name"
+                :key="sub.name"
+                rel="noreferrer noopener"
+                target="_blank"
+                :class="{
+                    first: 0 === index,
+                    last: subscriptionsDisplay.length - 1 === index,
+                    mono,
+                    small
+                }"
+                class="btn share-btn"
+                :href="sub.url"
+                :title="t('New window', {text: sub.title})"
+            >
+                <component
+                    :is="sub.icon"
+                    :fill-color="fillColor(sub)"
+                    :size="iconSize"
+                    non-decorative
+                />
+            </a>
+        </div>
+        <a
+            v-if="!noRss"
+            id="rss-suscribe-button"
+            rel="noreferrer noopener"
+            target="_blank"
+            class="btn share-btn"
+            :class="{ mono, small }"
+            :href="rssUrl"
+            :title="t('New window', {text: t('Rss feed')})"
+        >
+            <RssIcon :fill-color="fillColor()" :size="iconSize" />
+        </a>
+
+        <button
+            v-if="limit === undefined"
+            v-show="hiddenLinks.length"
+            id="subscribe-buttons-dropdown"
+            class="btn share-btn mx-2"
+            :title="t('See more')"
+        >
+            <PlusIcon />
+        </button>
+        <ClassicPopover
+            target="subscribe-buttons-dropdown"
+            popover-class="popover-z-index"
+            :only-click="true"
+            :left-pos="true"
+        >
+            <a
+                v-for="link in hiddenLinks"
+                :key="link.name"
+                rel="noreferrer noopener"
+                target="_blank"
+                class="octopus-dropdown-item justify-content-start d-flex align-items-center realLink"
+                :href="link.url"
+                :title="t('New window', {text: link.title})"
+            >
+                <component
+                    :is="link.icon"
+                    :fill-color="fillColor(link)"
+                    class="me-1"
+                />
+                {{ link.title }}
+            </a>
+        </ClassicPopover>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -83,173 +83,130 @@ import RssIcon from "vue-material-design-icons/Rss.vue";
 import { useApiStore } from "../../../stores/ApiStore";
 import ClassicPopover from "../../misc/ClassicPopover.vue";
 import { Emission } from "@/stores/class/general/emission";
-import { type Component, computed, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { type Component, computed, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
-import { Playlist } from "@/stores/class/general/playlist";
+import { Playlist } from "../../../stores/class/general/playlist";
 import { useSharePlatforms } from "../../composable/share/useSharePlatforms";
+import { useResizePhone } from "../../composable/useResizePhone";
 
 type Link = {
-  name: string;
-  icon: Component;
-  title: string;
-  color?: string;
-  url: string | undefined;
+    name: string;
+    icon: Component;
+    title: string;
+    color?: string;
+    url: string | undefined;
 };
 
 //Props 
 const props = withDefaults(defineProps<{
-  content: Emission|Playlist;
-  windowWidth?: number;
-  justifyCenter?: boolean;
-  /** Display the icons with just the octopus primary color */
-  mono?: boolean;
-  /** If set, limit the number of icons (will not display plus button) */
-  limit?: number;
-  /** Disable the RSS icon */
-  noRss?: boolean;
-  /** Smaller icons */
-  small?: boolean;
+    content: Emission|Playlist;
+    windowWidth?: number;
+    justifyCenter?: boolean;
+    /** Display the icons with just the octopus primary color */
+    mono?: boolean;
+    /** If set, limit the number of icons (will not display plus button) */
+    limit?: number;
+    /** Disable the RSS icon */
+    noRss?: boolean;
+    /** Smaller icons */
+    small?: boolean;
 }>(), {
-  windowWidth: 0,
-  justifyCenter: true,
-  mono: false,
-  limit: undefined,
-  noRss: false,
-  small: false
+    windowWidth: 0,
+    justifyCenter: true,
+    mono: false,
+    limit: undefined,
+    noRss: false,
+    small: false
 });
 
-//Data 
-const lastWindowWidth = ref(420);
-const hiddenLinks: Ref<Array<Link>> = ref([]);
-const subscribeButtonsContainerRef = useTemplateRef('subscribeButtonsContainer');
-
-
 //Composables
 const { t } = useI18n();
 const apiStore = useApiStore();
 const { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();
+const { isPhone } = useResizePhone();
 
 //Computed
+const maxElements = computed((): number => {
+    let number = 5;
+    if (isPhone.value) {
+        number = 3;
+    }
+
+    if (props.noRss) {
+        number += 1;
+    }
+    if (subscriptionsDisplay.value.length <= number + 1) {
+        number = subscriptionsDisplay.value.length;
+    }
+
+    if (props.limit !== undefined) {
+        return Math.min(number, props.limit);
+    } else {
+        return number;
+    }
+});
+
 const subscriptionsDisplay = computed(() => {
-  return getPlatformsWithLinks(props.content.annotations);
+    return getPlatformsWithLinks(props.content.annotations);
+});
+
+const shownLinks = computed((): Array<Link> => {
+    return subscriptionsDisplay.value.slice(0, maxElements.value);
+});
+
+const hiddenLinks = computed((): Array<Link> => {
+    return subscriptionsDisplay.value.slice(maxElements.value);
 });
 
 const rssUrl = computed(() => {
-  const api = apiStore.apiUrl + "rss/";
-  if ((props.content as Emission).emissionId) {
-    return api + "emission/" + (props.content as Emission).emissionId + ".rss";
-  }
-  if ((props.content as Playlist).playlistId) {
-    return api + "playlist/" + (props.content as Playlist).playlistId + ".rss";
-  }
-  return undefined;
+    const api = apiStore.apiUrl + "rss/";
+    if ((props.content as Emission).emissionId) {
+        return api + "emission/" + (props.content as Emission).emissionId + ".rss";
+    }
+    if ((props.content as Playlist).playlistId) {
+        return api + "playlist/" + (props.content as Playlist).playlistId + ".rss";
+    }
+    return undefined;
 });
 
 const iconSize = computed((): number => {
-  return props.small ? 20 : 24;
+    return props.small ? 20 : 24;
 });
 
-//Watch
-watch(()=>props.windowWidth, () =>resizeWindow());
-
 onMounted(() => {
-  resizeWindow();
-  const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;
-  initPlatforms(orga.id);
+    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;
+    initPlatforms(orga.id);
 });
 
-//Methods
-function showAllElements() {
-  subscriptionsDisplay.value.forEach((element: Link) => {
-    const el = subscribeButtonsContainerRef?.value?.querySelector('#subLink' + element.name);
-    if (!el) {
-      return;
-    }
-    if (el.classList.contains("hid")) {
-      el.classList.remove("hid");
-    }
-  });
-}
-function hideOnlyNecessaryElements() {
-  let parentWidth = 0;
-  subscriptionsDisplay.value.forEach((element: Link, index: number) => {
-    const el = subscribeButtonsContainerRef?.value?.querySelector('#subLink' + element.name);
-    if (!el) {
-      return;
-    }
-    if (!parentWidth) {
-      const buttonMoreWidth = el.clientWidth + 20;
-      parentWidth =
-        (el.parentElement?.clientWidth ?? 0) +
-        (el.parentElement?.offsetLeft ?? 0) -
-        buttonMoreWidth;
-    }
-    if (el.offsetLeft + el.clientWidth + 20 < parentWidth && (props.limit === undefined || index < props.limit)) {
-      return;
-    }
-    hiddenLinks.value.push(element);
-    if (!el.classList.contains("hid")) {
-      el.className += " hid";
-    }
-  });
-}
-function resizeWindow() {
-  if (props.windowWidth > 420 && lastWindowWidth.value > 420) {
-    lastWindowWidth.value = props.windowWidth;
-    return;
-  }
-  const subscribeList = subscribeButtonsContainerRef?.value as HTMLElement;
-  if (
-    null === subscribeList ||
-    !subscribeList ||
-    "none" === subscribeList?.parentElement?.style.display
-  ) {
-    return;
-  }
-  lastWindowWidth.value = props.windowWidth;
-  subscribeList.style.justifyContent = "flex-start";
-  subscribeList.style.flexGrow = "1";
-  hiddenLinks.value.length = 0;
-  showAllElements();
-  hideOnlyNecessaryElements();
-  if (!hiddenLinks.value.length && props.justifyCenter) {
-    subscribeList.style.justifyContent = "center";
-  }
-  subscribeList.style.flexGrow = "0";
-}
-
 function fillColor(link?: Link): string|undefined {
-  if (props.mono === true) {
-    return 'white';
-  } else {
-    return link?.color;
-  }
+    if (props.mono === true) {
+        return 'white';
+    } else {
+        return link?.color;
+    }
 }
 </script>
 
 <style scoped lang="scss">
-.octopus-app {
-  .subscribe-buttons-container {
-    max-width: 420px;
+.subscribe-buttons-container {
     align-self: center;
     display: inline-flex;
     width: 100%;
 
     &.justify-center {
-      justify-content: center;
+        justify-content: center;
     }
 
     & > div {
-      display: inline-flex;
-      justify-content: flex-start;
-      overflow: hidden;
-      width: fit-content;
+        display: inline-flex;
+        justify-content: flex-start;
+        overflow: hidden;
+        width: fit-content;
     }
 
     @media (width <= 960px) {
-      margin-top: 0.8rem;
+        margin-top: 0.8rem;
     }
-  }
 }
 
 .share-btn {

package/src/components/pages/EmissionPage.vue

@@ -108,7 +108,7 @@
             :size="ps"
             :show-count="true"
             :emission-id="emissionId"
-            :emission="{ ...emission, seasons: [7, 3, 5, 1, 2, 4] }"
+            :emission="emission"
             :category-filter="false"
             :edit-right="editRight"
             :productor-id="[emission.orga.id]"

package/src/stores/PlayerStore.ts

@@ -11,6 +11,8 @@ import { Chaptering, ChapteringPercent } from "./class/chaptering/chaptering";
 import classicApi from "../api/classicApi";
 
 import { state as sdkParams } from "./ParamSdkStore";
+import { Canal } from "./class/radio/canal";
+import { Conference } from "./class/conference/conference";
 
 interface Transcript {
   actual: number;
@@ -92,10 +94,18 @@ export const usePlayerStore = defineStore("PlayerStore", {
       return chapteringPercent;
     },
     playerHeight() {
-      if ("STOPPED" === this.playerStatus) return '0px';
-      if (this.playerVideo) return "0px" /* "281px" */;
-      if (this.playerLargeVersion) return "27rem";
-      if (window.innerWidth > 450) return "6rem";
+      if ("STOPPED" === this.playerStatus) {
+        return '0px';
+      }
+      if (this.playerVideo) {
+        return "0px" /* "281px" */;
+      }
+      if (this.playerLargeVersion) {
+        return "27rem";
+      }
+      if (window.innerWidth > 450) {
+        return "6rem";
+      }
       return "3.5rem";
     },
 
@@ -182,19 +192,27 @@ export const usePlayerStore = defineStore("PlayerStore", {
      * @param param The data
      * @param isVideo If true, enable video mode
      */
-    async playerPlay(param?: any, isVideo = false) {
+    async playerPlay(param?: Podcast|Media|Canal|Conference, isVideo = false) {
       if (!param) {
         this.stop();
         return;
       }
       if (
-        (this.playerPodcast &&
+        (
+          this.playerPodcast &&
+          'podcastId' in param &&
           this.playerPodcast.podcastId === param.podcastId &&
-          isVideo === this.playerVideo) ||
-        (this.playerMedia && this.playerMedia.mediaId === param.mediaId) ||
-        (this.playerLive &&
+          isVideo === this.playerVideo
+        ) || (
+          this.playerMedia &&
+          'mediaId' in param &&
+          this.playerMedia.mediaId === param.mediaId
+        ) || (
+          this.playerLive &&
+          'conferenceId' in param &&
           this.playerLive.conferenceId === param.conferenceId &&
-          isVideo === this.playerVideo)
+          isVideo === this.playerVideo
+        )
       ) {
         //Do nothing
         return;
@@ -215,6 +233,7 @@ export const usePlayerStore = defineStore("PlayerStore", {
       this.playerChaptering = undefined;
 
       if (
+        'conferenceId' in param &&
         param.conferenceId &&
         (!param.podcastId || param.processingStatus !== "READY")
       ) {
@@ -223,24 +242,28 @@ export const usePlayerStore = defineStore("PlayerStore", {
         this.playerCurrentChange = null;
         return;
       }
-      if (param.podcastId) {
-        this.playerPodcast = param;
-        this.playerCurrentChange = param.podcastId;
-        if (param.annotations?.chaptering) {
+
+      if ('podcastId' in param && param.podcastId) {
+        const podcast = param as Podcast;
+        this.playerPodcast = podcast;
+        this.playerCurrentChange = podcast.podcastId;
+        if (podcast.annotations?.chaptering) {
           this.playerChaptering = await classicApi.fetchData<Chaptering>({
-            api:4,
-            path:param.annotations.chaptering as string,
-            isNotAuth:true
+            api: 4,
+            path: podcast.annotations.chaptering as string,
+            isNotAuth: true
           });
         }
         return;
       }
-      if (param.mediaId) {
+
+      if ('mediaId' in param && param.mediaId) {
         this.playerMedia = param;
         this.playerCurrentChange = null;
         return;
       }
-      if (param.canalId) {
+
+      if ('canalId' in param && param.canalId) {
         this.playerRadio = { ...param, isInit: false };
         this.playerCurrentChange = -param.canalId;
       }

package/src/stores/class/general/organisation.ts

@@ -1,5 +1,10 @@
 import { Person } from "../user/person";
 
+export enum MonetisationOptions {
+  YES = 'YES',
+  NO = 'NO'
+}
+
 export type OrganisationAttributes = {
   //[key: string]: string | number | boolean | undefined;
   automation?: string;
@@ -13,6 +18,10 @@ export type OrganisationAttributes = {
   'translation-config'?: string;
   /** Language of the RSS */
   'rss-language'?: string;
+  /** Monetisation of the organisation */
+  MONETISABLE?: MonetisationOptions;
+  /** Privacy parameters (JSON) */
+  PRIVATE?: string;
 };
 
 export interface Organisation {
@@ -26,7 +35,7 @@ export interface Organisation {
     longitude: number;
     latitude: number;
   };
-  monetisable?: string;
+  monetisable?: MonetisationOptions;
   name: string;
   notSeenOnKeycloak?: number;
   score?: number;

package/src/stores/class/securisation/privateOrganisation.ts

@@ -1,5 +1,11 @@
+export enum OrganisationPrivacy {
+  SECURED = 'SECURED',
+  PRIVATE = 'PRIVATE',
+  PUBLIC = 'PUBLIC'
+}
+
 export interface PrivateOrganisation {
-  privacy: string; //SECURED PRIVATE PUBLIC
+  privacy: OrganisationPrivacy;
   accountCreation: string; // ENABLED DISABLED
   referrers: Array<string>;
   cidrs: Array<string>;
@@ -8,7 +14,7 @@ export interface PrivateOrganisation {
 
 export function emptyPrivateOrganisation(): PrivateOrganisation {
   return {
-    privacy: "PUBLIC",
+    privacy: OrganisationPrivacy.PUBLIC,
     accountCreation: "DISABLED",
     referrers: [],
     cidrs: [],