@saooti/octopus-sdk 41.12.0-beta2 → 41.12.0

package/src/components/layouts/PresentationItem.vue

@@ -2,50 +2,71 @@
   Component to display an element with its description
 -->
 <template>
-  <article
-    class="classic-element-container item-presentation-container mt-3"
-    :class="vertical ? 'vertical-item' : ''"
-  >
-    <router-link
-      :to="route"
-      class="d-flex-column flex-grow-1 text-dark"
-      :class="vertical ? 'flex-column' : ''"
+    <article
+        class="classic-element-container item-presentation-container mt-3"
+        :class="vertical ? 'vertical-item' : ''"
     >
-      <div
-        class="img-box"
-        :class="vertical ? 'img-box-bigger' : ''"
-      >
-        <img
-          v-lazy="useProxyImageUrl(imageUrl, tailleImage)"
-          :width="tailleImage"
-          :height="tailleImage"
-          aria-hidden="true"
-          :alt="name"
-          :title="name"
+        <router-link
+            :to="route"
+            class="d-flex-column flex-grow-1 text-dark"
+            :class="vertical ? 'flex-column' : ''"
         >
+            <div
+                class="img-box"
+                :class="vertical ? 'img-box-bigger' : ''"
+            >
+                <img
+                    v-lazy="useProxyImageUrl(imageUrl, tailleImage)"
+                    :width="tailleImage"
+                    :height="tailleImage"
+                    aria-hidden="true"
+                    :alt="name"
+                    :title="name"
+                >
 
-        <slot name="after-image" />
-      </div>
+                <div class="tags">
+                    <span
+                        v-for="tag in tags"
+                        :key="tag"
+                    >
+                        {{ tag }}
+                    </span>
+                </div>
+
+                <slot name="after-image" />
+            </div>
       
-      <div class="classic-element-text">
-        <div class="element-name mb-2 basic-line-clamp">
-          {{ name }}
-        </div>
-        <div
-          v-if="!isPhone && description"
-          ref="descriptionItemContainer"
-          class="element-description htms-wysiwyg-content"
-        >
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            ref="descriptionItem"
-            v-html="urlify(description || '')"
-          />
-          <!-- eslint-enable -->
-        </div>
-      </div>
-    </router-link>
-  </article>
+            <div
+                class="classic-element-text pb-0"
+                :class="{ 'pt-1': vertical }"
+            >
+                <div class="element-name mb-2 basic-line-clamp">
+                    {{ name }}
+                </div>
+                <div
+                    v-if="!isPhone && description"
+                    ref="descriptionItemContainer"
+                    class="element-description htms-wysiwyg-content mt-0"
+                >
+                    <div v-if="additionalInfo" class="mb-2">
+                        <div
+                            v-for="info, index in additionalInfo"
+                            :key="index"
+                            class="text-secondary"
+                        >
+                            {{ info }}
+                        </div>
+                    </div>
+                    <!-- eslint-disable vue/no-v-html -->
+                    <div
+                        ref="descriptionItem"
+                        v-html="urlify(description || '')"
+                    />
+                    <!-- eslint-enable -->
+                </div>
+            </div>
+        </router-link>
+    </article>
 </template>
 
 <script setup lang="ts">
@@ -57,16 +78,20 @@ import { RouteLocationRaw } from "vue-router";
 
 //Props 
 const props = defineProps<{
-  /** The route to which to redirect when clicking on element */
-  route: RouteLocationRaw|string;
-  /** The URL to the image */
-  imageUrl: string;
-  /** The name of the element */
-  name: string;
-  /** The description of the element */
-  description?: string;
-  /** When true display the card vertically */
-  vertical?: boolean;
+    /** The route to which to redirect when clicking on element */
+    route: RouteLocationRaw|string;
+    /** The URL to the image */
+    imageUrl: string;
+    /** The name of the element */
+    name: string;
+    /** Tags associated with the element (rubriques, themes, etc) */
+    tags?: Array<string>;
+    /** Additional info displayed below name */
+    additionalInfo?: Array<string>;
+    /** The description of the element */
+    description?: string;
+    /** When true display the card vertically */
+    vertical?: boolean;
 }>();
 
 //Data
@@ -81,78 +106,98 @@ const { useProxyImageUrl } = useImageProxy();
 // Computed
 // Calcul de la taille de l'image
 const tailleImage = computed(() => {
-  // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
-  if (props.vertical) {
-    return '396';
-  } else if (isPhone.value) {
-    return '246';
-  } else {
-    return '250';
-  }
+    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
+    if (props.vertical) {
+        return '396';
+    } else if (isPhone.value) {
+        return '246';
+    } else {
+        return '250';
+    }
 });
 
 //Watch
 watch(isPhone, async () => {
-  nextTick(() => {
-    if (!props.description || isPhone.value) {
-      return;
-    }
-    const itemDesc = descriptionItemRef?.value as HTMLElement;
-    const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;
-    if (
-      itemDesc &&
-      itemDescContainer &&
-      itemDesc.clientHeight > itemDescContainer.clientHeight
-    ) {
-      itemDescContainer.classList.add("after-element-description");
-    }
-  });
+    nextTick(() => {
+        if (!props.description || isPhone.value) {
+            return;
+        }
+        const itemDesc = descriptionItemRef?.value as HTMLElement;
+        const itemDescContainer = descriptionItemContainerRef?.value as HTMLElement;
+        if (
+            itemDesc &&
+            itemDescContainer &&
+            itemDesc.clientHeight > itemDescContainer.clientHeight
+        ) {
+            itemDescContainer.classList.add("after-element-description");
+        }
+    });
 }, { immediate: true });
+
 function urlify(text:string|undefined){
-  return displayHelper.urlify(text);
+    return displayHelper.urlify(text);
 }
 </script>
 
 <style scoped lang="scss">
 .octopus-app {
-  .item-presentation-container {
-    @media (width <= 960px) {
-      width: 250px !important;
-      margin-right: 0.5rem;
-    }
+    .item-presentation-container {
+        @media (width <= 960px) {
+            width: 250px !important;
+            margin-right: 0.5rem;
+        }
 
-    .element-description {
-      height: 0;
-      flex-grow: 1;
-      max-height: unset;
+        .element-description {
+            height: 0;
+            flex-grow: 1;
+            max-height: unset;
 
-      p:first-child {
-        // Prevent unecessary space before first paragraph
-        margin-top: 0 !important;
-      }
+            p:first-child {
+                // Prevent unecessary space before first paragraph
+                margin-top: 0 !important;
+            }
+        }
     }
-  }
 
-  .classic-element-container.vertical-item {
-    flex-grow: 0;
-    width: 400px;
-    flex-shrink: 0;
-  }
+    .classic-element-container.vertical-item {
+        flex-grow: 0;
+        width: 400px;
+        flex-shrink: 0;
+    }
 
-  .img-box {
-    // Make it relative so that absolute elements associated with the image
-    // are positioned within the image box
-    position: relative;
+    .img-box {
+        // Make it relative so that absolute elements associated with the image
+        // are positioned within the image box
+        position: relative;
 
-    @media (width <= 960px) {
-      height: calc(var(--octopus-image-height) - 4);
+        @media (width <= 960px) {
+            height: calc(var(--octopus-image-size) - 4);
+        }
     }
-  }
 
-  .img-box-bigger {
-    // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
-    width: 396px;
-    height: 396px;
-  }
+    .img-box-bigger {
+        // L'élément fait 400 de large à la verticale, mais on prend en compte les bordures
+        width: 396px;
+        height: 396px;
+    }
+
+    .tags {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+
+        display: flex;
+        gap: 10px;
+        flex-wrap: wrap;
+
+        > span {
+            background-color: white;
+            padding: .25em .75em;
+            border-radius: var(--octopus-border-radius);
+            font-size: 14px;
+            font-weight: bold;
+            color: var(--octopus-primary);
+        }
+    }
 }
 </style>

package/src/locale/de.json

@@ -31,6 +31,7 @@
   "Emission image": "Bild zur Reihe",
   "Emission name": "Titel der Reihe",
   "No elements found. Consider changing the search query.": "Keine Ergebnisse. Bitte ändern Sie die Suchanfrage.",
+  "Press Enter to add this value": "Drücken Sie Enter, um diesen Wert hinzuzufügen",
   "Podcast is not visible for listeners": "Podcast ist für Hörer verborgen",
   "Validate": "Bestätigen",
   "Invalidate": "Invalidate",

package/src/locale/en.json

@@ -31,6 +31,7 @@
   "Emission image": "Series image",
   "Emission name": "Series title",
   "No elements found. Consider changing the search query.": "No elements found. Consider changing the search query.",
+  "Press Enter to add this value": "Press Enter to add this value",
   "Podcast is not visible for listeners": "Podcast is not visible for listeners",
   "Validate": "Validate",
   "Invalidate": "Invalidate",

package/src/locale/es.json

@@ -31,6 +31,7 @@
   "Emission image": "Imagen del programa",
   "Emission name": "Título del programa",
   "No elements found. Consider changing the search query.": "No hay resultados. Prueba con otros criterios de búsqueda.",
+  "Press Enter to add this value": "Pulsa Intro para añadir este valor",
   "Podcast is not visible for listeners": "El público no puede visualizar este pódcast",
   "Validate": "Validar",
   "Invalidate": "Invalidar",

package/src/locale/fr.json

@@ -37,6 +37,7 @@
   "Emission subtitle": "Sous-titre de l'émission",
   "No elements found. Consider changing the search query.":
     "Aucun élement ne correspond à votre recherche",
+  "Press Enter to add this value": "Appuyez sur Entrée pour ajouter cette valeur",
   "Podcast is not visible for listeners":
     "L'épisode n'est pas disponible pour les auditeurs",
   "Validate": "Valider",

package/src/locale/it.json

@@ -30,6 +30,7 @@
     "Emission image": "Immagine della serie",
     "Emission name": "Titolo della serie",
     "No elements found. Consider changing the search query.": "Non è stato trovato alcun elemento. Prova a cambiare i parametri di ricerca",
+    "Press Enter to add this value": "Premi Invio per aggiungere questo valore",
     "Podcast is not visible for listeners": "Il podcast non è visibile agli ascoltatori",
     "Validate": "Convalidare",
     "Invalidate": "Invalidate",

package/src/locale/sl.json

@@ -31,6 +31,7 @@
   "Emission image": "Slika oddaje",
   "Emission name": "Naslov oddaje",
   "No elements found. Consider changing the search query.": "Ni zadetkov. Spremenite poizvedbo",
+  "Press Enter to add this value": "Pritisnite Enter, da dodate to vrednost",
   "Podcast is not visible for listeners": "Za poslušalce skrit podkast",
   "Validate": "Potrdi",
   "Invalidate": "Invalidate",

package/src/stores/CacheStore.ts

@@ -1,14 +1,13 @@
-import { useDayjs } from "@/components/composable/useDayjs";
+import { useDayjs } from "../components/composable/useDayjs";
 import { Dayjs } from "dayjs";
 import { defineStore } from "pinia";
-import { reactive } from "vue";
 
 /**
  * Type for cache storage
  */
 interface CachedData<T> {
-    /** The stored data */
-    data: T;
+    /** The in-flight or resolved data, shared by concurrent callers */
+    data: Promise<T>;
     /** Expiration date of the cached data */
     expiration: Dayjs;
 }
@@ -16,21 +15,27 @@ interface CachedData<T> {
 export const useCacheStore = defineStore('cache', () => {
 
     const { dayjs } = useDayjs();
-    const cachedData = reactive({} as Record<string, CachedData<unknown>>);
+    const cachedData: Record<string, CachedData<unknown>> = {};
 
     async function getData<T>(key: string, callback: () => Promise<T>): Promise<T> {
         let cache = cachedData[key] as CachedData<T>|undefined;
         if (isDataEmptyOrExpired(cache)) {
-            // Retrieve data from callback
-            const data = await callback();
-            const expiration = dayjs().add(5, 'minutes');
+            // Store the promise immediately so concurrent callers share this fetch
+            const data = callback();
+            const expiration = dayjs().add(30, 'minutes');
             cache = { data, expiration };
             cachedData[key] = cache;
+            // Don't keep a failed fetch cached: let the next call retry
+            data.catch(() => invalidate(key));
         }
 
         return cache.data;
     }
 
+    function invalidate(key: string): void {
+        delete cachedData[key];
+    }
+
     function isDataEmptyOrExpired(data: CachedData<unknown>|undefined): boolean {
         if (!data) {
             return true;
@@ -38,8 +43,9 @@ export const useCacheStore = defineStore('cache', () => {
             return dayjs().isAfter(data.expiration);
         }
     }
-    
+
     return {
-        getData
-    }
+        getData,
+        invalidate
+    };
 });

package/src/stores/ParamSdkStore.ts

@@ -32,6 +32,9 @@ const state: ParamStore = {
   },
   smartLink: {
     showOnlyFirstParagraphInDescription: false
+  },
+  presentationItems: {
+    tags: 'none'
   }
 };
 
@@ -102,6 +105,21 @@ export interface ParamStore {
     sortCriteria?: PodcastSort;
   };
 
+  /** Settings for presentation items */
+  presentationItems: {
+    /** Type of tags to display on presentation items */
+    tags: 'none'|'iab'|'rubrique';
+    /**
+     * For rubrique type, the ID of the rubriquage the rubriques must belong to
+     * to be displayed. If not set, will display all rubriques.
+     */
+    tagsRubriquageId?: number;
+    /** Limit number of tags */
+    tagsLimit?: number;
+    /** Additional infos displayed in presentation item */
+    additionalInfo?: Array<'productor'|'date'>;
+  };
+
   /** Smartlink configuration */
   smartLink: {
     /** Truncate the description to the first paragraph */
@@ -143,6 +161,10 @@ const initialize = function initialize(initObject: Partial<ParamStore>): void {
     state.smartLink,
     definedProps(initObject.smartLink)
   );
+  state.presentationItems = Object.assign(
+    state.presentationItems,
+    definedProps(initObject.presentationItems)
+  );
 };
 
 export default { initialize, state };

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

@@ -24,12 +24,22 @@ export type OrganisationAttributes = {
   PRIVATE?: string;
   /** Live recordings enabled */
   'live.active'?: boolean;
+  /** Videos enabled */
+  'video.active'?: boolean;
   /**
    * List of rubriquage **names**.
    * The rubriques from these rubriquage are stored in stats and can be queried
    * upon.
    */
   rubriquage4MMIdentifier?: string;
+  /** Enable individualized stats */
+  nominal_analytic?: string;
+  /** Email of contact for RSS feed */
+  RSS_CONTACT?: string;
+  /** */
+  'allow-participant-rss'?: string;
+  /** Disallow RSS sharing */
+  noSharing?: string;
 };
 
 export interface Organisation {

package/src/stores/class/radio/canal.ts

@@ -1,10 +1,32 @@
+/**
+ * Definition for background music
+ * Only one of armbPlaylistName, mediaPlaylistId, and mixId can be defined.
+ */
+export interface Ambiance {
+    /** Name of known playlists to play */
+    armbPlaylistName?: string;
+    /** ID of media playlist to play */
+    mediaPlaylistId?: number;
+    /** ID of mix to play */
+    mixId?: number;
+    /** Frequency of playing autopromos (in number of songs) */
+    autopromoRatio?: number;
+    /** ID of the bac/playlist media from which to take autopromos */
+    autopromoBacId?: number;
+}
+
 export interface Canal {
-  id: number;
-  organisationId: string;
-  name: string;
-  defaultPlaylist: string;
-  url: string;
-  imageUrl: string;
-  description: string;
-  advertisingTag: null | string;
+    /** ID of the canal */
+    id: number;
+    /** ID of the organisation this canal belongs to */
+    organisationId: string;
+    name: string;
+    /** @deprecated, see #14467, use defaultAmbiance instead */
+    defaultPlaylist: string;
+    /** Default ambiance when nothing is playing on the canal */
+    defaultAmbiance: Ambiance;
+    url: string;
+    imageUrl: string;
+    description: string;
+    advertisingTag: null | string;
 }

package/src/stores/class/radio/recurrence.ts

@@ -1,3 +1,5 @@
+import { Ambiance } from "./canal";
+
 export interface TimeValue {
   hours: number;
   minutes: number;
@@ -55,11 +57,9 @@ export interface Recurrence {
   crons: Array<Cron>;
   duration: number;
 }
-export interface AmbianceRecurrence extends Recurrence {
-  armbPlaylistName?: string;
-  mediaPlaylistId?: number;
-  mixId?: number;
-}
+
+export type AmbianceRecurrence = Recurrence & Ambiance;
+
 export interface PlanningRecurrence extends Recurrence {
   octopusPlaylistName: string;
   octopusPlaylistId: number;
@@ -69,6 +69,7 @@ export interface PlanningRecurrence extends Recurrence {
   advertisingTag: null | string;
   adCount: number;
 }
+
 export interface Exclusion {
   exclusionId: number;
   validityStart: string;

package/src/style/_variables.scss

@@ -49,6 +49,8 @@
     --octopus-btn-play-bg: var(--octopus-primary-less-transparent);
     --octopus-btn-play-fg: white;
     --octopus-btn-play-radius: var(--octopus-border-radius);
+    --octopus-btn-social-bg: var(--octopus-secondary);
+    --octopus-btn-social-fg: var(--octopus-primary);
 
     // Player
     // Color for the transcript background

package/src/style/bootstrap.scss

@@ -154,7 +154,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 			align-items: center;
 			justify-content: center;
 			background: var(--octopus-btn-primary-bg);
-			border: 1px solid var(--octopus-primary);
+			border: 1px solid var(--octopus-btn-primary-bg);
 			border-radius: var(--octopus-border-radius) !important;
 			color: var(--octopus-btn-primary-fg) !important;
 			font-weight: 500;
@@ -234,7 +234,8 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		width: 2.5rem !important;
 		height: 2.5rem !important;
 		padding: 0.5rem;
-		color : var(--octopus-primary);
+		color : var(--octopus-btn-social-fg);
+		background-color : var(--octopus-btn-social-bg);
 		flex-shrink: 0;
 		border-radius: 50% !important;