@saooti/octopus-sdk 41.0.16 → 41.0.18

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# CHANGELOG
+
+## En cours 41.0.18 (XX/11/2025)
+
+**Features**
+
+- Changements pour les émissions non publiées (`visible = false`) :
+  - La recherche permet de les afficher quand on affiche les épisodes non
+    publiés
+  - Un bandeau s'affiche pour indiquer que l'émission n'est pas disponible aux
+    auditeurs
+
+**Misc**
+
+- Ajout d'une propriété `relative` pour faire fonctionner les
+  `ClassicHelpButton` quand un parent a une position relative.
+- Correction alignement du texte dans `ClassicAlert`
+- Ajout d'un slot `after-label` sur `ClassicCheckbox`
+
+## 41.0.17 (07/11/2025)
+
+**Features**
+
+- Ajout options de configuration sur `ClassicHelpButton`
+
+**Fixes**
+
+- Correction anomalie fermeture `ClassicPopover`
+
+**Misc**
+
+- Ajout du `CHANGELOG`
+- Ajustements configuration typescript pour analyse de code
+- Nouvelles règles eslint
+
+## 41.0.16 (04/11/2025)
+
+- Bannière 'en cours de traitement' ne s'affiche plus dans les listes
+- Ajustements sur `ClassicSelect` & `ClassicHelpButton`
+- Ajout de `ClassicAlert`, pour l'affichage de message

package/eslint.config.mjs

@@ -23,9 +23,21 @@ export default typescriptEslint.config(
     rules: {
       // your rules
       "curly": ['error'],
+
+      // Please don't use console statements and duplicated imports, TODOs are marked
       "no-console": ['warn', { allow: ['warn', 'error'] }],
       "no-warning-comments": ['warn'],
-      "no-duplicate-imports": ['warn']
+      "no-duplicate-imports": ['warn'],
+
+      // Prevent errors when testing on refs (instead of value of ref)
+      "vue/no-ref-as-operand": ['error'],
+
+      // Indentation
+      "vue/html-indent": ['warn', 4],
+      "vue/script-indent": ['warn', 4],
+
+      // Number of attributes per line (increase because sometimes two is not a lot)
+      "vue/max-attributes-per-line": ['warn', { singleline: 2 } ]
     },
   }
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.0.16",
+  "version": "41.0.18",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -65,6 +65,7 @@
   },
   "devDependencies": {
     "@types/sockjs-client": "^1.5.4",
+    "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-vue": "^5.2.4",
     "eslint": "^9.28.0",
     "eslint-plugin-vue": "^9.33.0",

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

@@ -1,5 +1,10 @@
 import { useRoute, useRouter } from 'vue-router';
-export const useRouteUpdateParams = ()=>{
+
+interface RouteParams {
+  productor: string;
+}
+
+export const useRouteUpdateParams = () => {
 
   const router  = useRouter();
   const route  = useRoute();
@@ -38,11 +43,18 @@ export const useRouteUpdateParams = ()=>{
     }
   }
 
+  /*
+  function updateRouteParams(params: Partial<RouteParams>) {
+    router.push({ query: {
+      ...route.query,
+      ...params
+    }});
+  }*/
 
-	return {
+  return {
     updatePaginateSize,
     updateRouteParam,
     updateRouteParamAdvanced,
     updateFiltersParam
-	}
+  }
 }

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

@@ -16,7 +16,11 @@
         aria-hidden="true"
         alt=""
         :title="t('Emission name image', { name: emission.name })"
-      />
+      >
+      <ClassicImageBanner v-if="!emissionVisible">
+        {{ t('Emission - Not available for listeners') }}
+      </ClassicImageBanner>
+
       <div class="classic-element-text">
         <div class="d-flex align-items-center element-name basic-line-clamp">
           <AlertIcon
@@ -63,12 +67,15 @@ import displayHelper from "../../../helper/displayHelper";
 import { computed, onBeforeMount, onMounted, ref, useTemplateRef } from "vue";
 import { Podcast } from "@/stores/class/general/podcast";
 import { ListClassicReturn } from "@/stores/class/general/listReturn";
+
+import ClassicImageBanner from '../../misc/ClassicImageBanner.vue';
+
 import { useI18n } from "vue-i18n";
 
 //Props 
 const props = defineProps({
   emission: { default: () => ({}), type: Object as () => Emission },
-})
+});
 
 //Data 
 const activeEmission = ref(true);
@@ -80,12 +87,16 @@ const { isPodcastmaker, isEditRights } = useOrgaComputed();
 
 //Computed
 const editRight = computed(() => isEditRights(props.emission.orga.id));
-
+const emissionVisible = computed(() => {
+  return props.emission.visible !== false;
+});
 
 onBeforeMount(()=>{
-  if (!editRight.value) return;
+  if (!editRight.value) {
+    return;
+  }
   hasPodcast();
-})
+});
 
 onMounted(()=>{
   const emissionDesc = useTemplateRef('descriptionEmission')?.value as HTMLElement;
@@ -119,4 +130,4 @@ async function hasPodcast(): Promise<void> {
     activeEmission.value = false;
   }
 }
-</script>
+</script>

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

@@ -190,8 +190,16 @@ async function fetchContent(reset: boolean): Promise<void> {
       : undefined,
     rubriqueId: props.rubriqueId.length ? props.rubriqueId : undefined,
     rubriquageId: props.rubriquageId.length ? props.rubriquageId : undefined,
-    includeHidden: props.includeHidden,
+    includeHidden: props.includeHidden
   };
+
+  // When fetching hidden episodes, also fetch hidden emissions
+  if (props.includeHidden === true) {
+    param.visible = 'ALL';
+  } else {
+    param.visible = 'VISIBLE';
+  }
+
   try {
     const data = await classicApi.fetchData<ListClassicReturn<Emission>>({
       api: 0,

package/src/components/form/ClassicCheckbox.vue

@@ -1,3 +1,10 @@
+<!--
+  Simple component to display a checkbox
+  Use `v-model:text-init` to bind the value.
+
+  **Slots:**
+    `after-label` : A slot to display additional elements after the label
+-->
 <template>
   <div class="d-flex flex-nowrap align-items-center octopus-form-item">
     <div :class="isSwitch ? 'octopus-form-switch me-2' : ''">
@@ -27,6 +34,8 @@
       @click="clickSlider"
     >
       {{ label }}
+
+      <slot name="after-label" />
     </label>
   </div>
 </template>

package/src/components/misc/ClassicAlert.vue

@@ -20,7 +20,7 @@
         />
 
         <!-- Main content -->
-        <span class="ms-2">
+        <span class="ms-2 content">
             <strong v-if="title">
                 {{ title }}
                 <br>
@@ -62,6 +62,8 @@ const iconComponent = computed(() => {
         return Alert;
     } else if (type === 'error') {
         return CloseCircle;
+    } else {
+        return null;
     }
 });
 </script>
@@ -76,6 +78,12 @@ const iconComponent = computed(() => {
         align-items: start !important;
     }
 
+    .content {
+        display: flex;
+        flex-direction: column;
+        align-self: center;
+    }
+
     $types: (
         'success': hsl(from var(--octopus-primary) h s 45),
         'info': var(--octopus-primary),

package/src/components/misc/ClassicHelpButton.vue

@@ -1,28 +1,29 @@
 <!--
-  A simple component to display a help button that shows its message when
-  hovered.
+    A simple component to display a help button that shows its message when
+    hovered.
 
-  Usage: 
-    <ClassicHelpButton>This is my help message</ClassicHelpButton>
+    Usage: 
+        <ClassicHelpButton>This is my help message</ClassicHelpButton>
 -->
 <template>
-  <button
-    :id="computedId"
-    class="btn-transparent"
-  >
-    <!-- Button icon -->
-    <HelpCircleIcon :size="30" />
-
-    <!-- Tooltip -->
-    <ClassicPopover
-      :target="computedId"
-      popover-class="help-popover"
+    <button
+        :id="computedId"
+        class="btn-transparent"
     >
-      <div class="content">
-        <slot />
-      </div>
-    </ClassicPopover>
-  </button>
+        <!-- Button icon -->
+        <HelpCircleIcon :fill-color="color" :size="iconSize" />
+
+        <!-- Tooltip -->
+        <ClassicPopover
+            :target="computedId"
+            popover-class="help-popover"
+            :relative-class="relative ? 'page-element' : ''"
+        >
+            <div class="content">
+                <slot />
+            </div>
+        </ClassicPopover>
+    </button>
 </template>
 
 <script setup lang="ts">
@@ -31,20 +32,46 @@ import { computed, getCurrentInstance } from 'vue';
 import HelpCircleIcon from "vue-material-design-icons/HelpCircle.vue";
 import ClassicPopover from './ClassicPopover.vue';
 
+const { colored, small } = defineProps<{
+    colored?: boolean;
+    /** Make the popover relative (userful when in page-element) */
+    relative?: boolean;
+    /** Make the icon smaller if true *(default: false)* */
+    small?: boolean;
+}>();
+
+/** The color to use for the icon */
+const color = computed(() => {
+    if (colored) {
+        return "var(--octopus-primary-darker)";
+    } else {
+        return "black";
+    }
+});
+
 /** The internal ID for the elements */
 const computedId = computed(() => {
-  return 'popover-' + getCurrentInstance()?.uid;
+    return 'popover-' + getCurrentInstance()?.uid;
+});
+
+/** The size of the icon, according to the props */
+const iconSize = computed(() => {
+    if (small) {
+        return 24;
+    } else {
+        return 30;
+    }
 });
 </script>
 
 <style lang="scss" scoped>
 .content {
-  font: revert;
-  font-size: 18px !important;
-  text-align: start;
+    font: revert;
+    font-size: 18px !important;
+    text-align: start;
 }
 
 .help-popover {
-  background-color: var(--octopus-secondary);
+    background-color: var(--octopus-secondary-lighter);
 }
 </style>

package/src/components/misc/ClassicImageBanner.vue

@@ -0,0 +1,33 @@
+<!-- A simple component to display a blur & a banner on an image -->
+<template>
+    <div class="blur-with-banner">
+        <div class="banner">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.blur-with-banner {
+  position: absolute;
+  inset: 0;
+  background-color:var(--octopus-background-transparent);
+  // Allow pointer events to go through (allow click on image beneath blur)
+  pointer-events: none;
+
+  .banner {
+    text-align: center;
+    width: 100%;
+    font-size: 0.6rem;
+    padding: 0.2rem 0;
+    color: white;
+    background: black;
+    text-transform: uppercase;
+    position: absolute;
+    top: 0;
+  }
+}
+</style>

package/src/components/misc/ClassicPopover.vue

@@ -12,7 +12,6 @@
       isFixed && isTopLayerPopover ? 'position-fixed':'position-absolute',
       popoverClass]"
     :style="positionInlineStyle"
-    @focusout="clearDataBlur"
     @mouseenter="overPopover = true"
     @mouseleave="
       overPopover = false;
@@ -139,8 +138,8 @@ function removeListeners() {
     targetElement.value.removeEventListener("focusout", clearDataBlur);
   }
 }
-function handleClickEvent(){
-  if (show.value && isClick.value) {
+function handleClickEvent(e: MouseEvent | PointerEvent){
+  if (show.value && isClick.value && e.target !== popoverRef.value && !popoverRef.value?.contains(e.target)) {
     isClick.value = false;
     clearData();
     return -1;
@@ -180,7 +179,7 @@ function setPopoverData(e: MouseEvent | PointerEvent) {
   if (props.disable || !e || !e.target) {
     return;
   }
-  if ("click" === e.type && -1 === handleClickEvent()) {
+  if ("click" === e.type && -1 === handleClickEvent(e)) {
     return;
   }
   show.value = true;
@@ -235,6 +234,7 @@ function setPopoverData(e: MouseEvent | PointerEvent) {
     maxHeight.value = '80dvh';
   }
 }
+
 function clearDataBlur(e: FocusEvent) {
   if (isTabAction.value) {
     isTabAction.value = false;
@@ -245,14 +245,18 @@ function clearDataBlur(e: FocusEvent) {
   if (-1!==result) {
     return;
   }
+
+  const parent = popoverRef?.value as HTMLElement;
   if (!e.relatedTarget) {
+    if (parent !== null && parent.contains(e.target)) {
+      return;
+    }
     return clearClick();
   }
   const myElement = e.relatedTarget as HTMLElement;
   if (popoverId.value === myElement.id) {
     return;
   }
-  const parent =popoverRef?.value as HTMLElement;
   if (null === parent || !parent.contains(myElement)) {
     return clearClick();
   }
@@ -301,9 +305,8 @@ defineExpose({
   clearClick
 });
 </script>
-<style lang="scss">
-
 
+<style lang="scss">
 .octopus-popover {
   background: var(--octopus-background);
   border-radius: var(--octopus-border-radius);

package/src/components/misc/ErrorMessage.vue

@@ -3,11 +3,12 @@
     <div class="d-flex align-items-center bg-warning p-2 rounded my-1">
       <AlertIcon :title="t('Warning')" class="me-1 text-danger" :size="16" />
       <div class="text-danger">
-        {{ message }}
+        <slot>{{ message }}</slot>
       </div>
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import AlertIcon from "vue-material-design-icons/Alert.vue";
 import { useI18n } from "vue-i18n";
@@ -19,4 +20,5 @@ defineProps({
 
 //Composables
 const { t } = useI18n();
-</script>
+</script>
+

package/src/components/pages/EmissionPage.vue

@@ -25,7 +25,8 @@
               alt=""
               :title="t('Emission name image', { name: name })"
               class="img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start me-3"
-            />
+            >
+
             <div class="d-flex align-items-center justify-content-between">
               <h2>{{ name }}</h2>
               <ShareAnonymous v-if="!editRight" class="d-flex justify-content-end flex-grow-1" :emission="emission" :organisation-id="emission.orga.id"/>
@@ -36,6 +37,17 @@
               v-html="urlify(description)"
             />
             <!-- eslint-enable -->
+
+            <ErrorMessage v-if="emission.visible === false">
+              <div class="d-flex" style="align-items: center">
+                <div>{{ t('Emission - Not available for listeners') }}</div>
+
+                <ClassicHelpButton relative small>
+                  {{ t('Emission - Not available explanation') }}
+                </ClassicHelpButton>
+              </div>
+            </ErrorMessage>
+
             <div v-if="lastPodcast" class="d-flex align-items-center mt-3">
               <PodcastPlayButton
                 :podcast="lastPodcast"
@@ -116,6 +128,10 @@ import { Podcast } from "@/stores/class/general/podcast";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { useSimplePageParam } from "../composable/route/useSimplePageParam";
+
+import ErrorMessage from "../misc/ErrorMessage.vue";
+import ClassicHelpButton from "../misc/ClassicHelpButton.vue";
+
 const ShareAnonymous = defineAsyncComponent(() => import("../display/sharing/ShareAnonymous.vue"));
 const PodcastFilterList = defineAsyncComponent(
   () => import("../display/podcasts/PodcastFilterList.vue"),

package/src/locale/de.ts

@@ -415,4 +415,6 @@ export default {
   "Copied!":"Kopiert!",
   "Color of the QR Code": "Farbe des QR-Codes",
   "Silent stream":"Stiller Fluss",
+  "Emission - Not available for listeners": "Sendung für Hörer nicht sichtbar",
+  "Emission - Not available explanation": "Diese Sendung ist für Hörer nicht sichtbar, da sie so konfiguriert wurde, dass ihre Episoden nicht veröffentlicht werden. Diese Konfiguration ist in den erweiterten Einstellungen der Show verfügbar.",
 }

package/src/locale/en.ts

@@ -418,4 +418,6 @@ export default {
   "Copied!":"Copied!",
   "Color of the QR Code": "Color of the QR Code",
   "Silent stream":"Silent stream",
+  "Emission - Not available for listeners": "Broadcast not visible to listeners",
+  "Emission - Not available explanation": "This show is not visible to listeners because it has been configured so that its episodes are not published. This configuration is available in the advanced settings of the show.",
 };

package/src/locale/es.ts

@@ -416,4 +416,6 @@ export default {
   "Copied!":"¡Copiado!",
   "Color of the QR Code": "Color del código QR",
   "Silent stream":"Flujo silencioso",
+  "Emission - Not available for listeners": "Transmisión no visible para los oyentes",
+  "Emission - Not available explanation": "Este programa no es visible para los oyentes porque ha sido configurado para que sus episodios no se publiquen. Esta configuración está disponible en la configuración avanzada del programa.",
 }

package/src/locale/fr.ts

@@ -425,4 +425,6 @@ export default {
   "Copied!":"Copié !",
   "Color of the QR Code": "Couleur du Qr Code",
   "Silent stream":"Flux silencieux",
+  "Emission - Not available for listeners": "Émission non visible pour les auditeurs",
+  "Emission - Not available explanation": "Cette émission n'est pas visible pour les auditeurs car elle a été configurée pour que ses épisodes ne soient pas publiés. Cette configuration est disponible dans les paramètres avancés de l'émission."
 };

package/src/locale/it.ts

@@ -412,4 +412,6 @@ export default{
   "Copied!":"Copiato!",
   "Color of the QR Code": "Colore del codice QR",
   "Silent stream":"Flusso silenzioso",
+  "Emission - Not available for listeners": "Trasmissione non visibile agli ascoltatori",
+  "Emission - Not available explanation": "Questo programma non è visibile agli ascoltatori perché è stato configurato in modo che i suoi episodi non vengano pubblicati. Questa configurazione è disponibile nelle impostazioni avanzate dello spettacolo.",
 };

package/src/locale/sl.ts

@@ -407,4 +407,6 @@ export default {
   "Copied!":"Kopirano!",
   "Color of the QR Code": "Barva kode QR",
   "Silent stream":"Tihi tok",
+  "Emission - Not available for listeners": "Oddaja ni vidna poslušalcem",
+  "Emission - Not available explanation": "Ta oddaja ni vidna poslušalcem, ker je bila konfigurirana tako, da njene epizode niso objavljene. Ta konfiguracija je na voljo v naprednih nastavitvah oddaje.",
 }

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

@@ -6,6 +6,7 @@ import { ItuneCategory } from "./ituneCategory";
 export interface Emission {
   imageUrl?: string;
   annotations?: { [key: string]: string | number | boolean | undefined };
+  beneficiaries: string[];
   description: string;
   emissionId: number;
   iabIds?: Array<number>;
@@ -26,6 +27,11 @@ export interface Emission {
   };
   createdByUserId?: string;
   privateRssType?:string;
+  /**
+   * Indicates that this emission and its episode are visible.
+   * *Default: true*
+   */
+  visible?: boolean;
 }
 
 export function emptyEmissionData(): Emission {

package/tsconfig.json

@@ -1,43 +1,43 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "types": [
-      "webpack-env"
-    ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        // "strict": true,
+        "jsx": "preserve",
+        "importHelpers": true,
+        "moduleResolution": "node",
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "types": [
+            "webpack-env", "sockjs-client"
+        ],
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        },
+        "lib": [
+            "esnext",
+            "dom",
+            "dom.iterable",
+            "scripthost"
+        ]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx",
+        "src/**/*.vue",
+        "tests/**/*.ts",
+        "tests/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules"
+    ],
+    "files": [
+        "src/shims-vue.d.ts"
     ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
-  "files": [
-    "src/shims-vue.d.ts",
-  ]
 }

package/typings/index.d.ts

@@ -1 +0,0 @@
-declare module 'sockjs-client/dist/sockjs';