@saooti/octopus-sdk 41.11.1 → 41.12.0-beta2

package/src/components/form/OctopusSelect.vue

@@ -0,0 +1,278 @@
+<template>
+    <div
+        ref="containerRef"
+        class="octopus-select"
+        :class="{ 'form-margin': label }"
+    >
+        <label
+            v-if="label"
+            :for="computedId"
+            class="form-label"
+        >
+            {{ label }}
+        </label>
+
+        <div
+            class="octopus-select-field"
+            :class="{ disabled: isDisabled, open: isOpen, noBorder }"
+            @click="openDropdown"
+        >
+            <span
+                v-show="selectedLabel && !isOpen"
+                class="octopus-select-value"
+            >{{ selectedLabel }}</span>
+            <input
+                v-show="!selectedLabel || isOpen"
+                :id="computedId"
+                ref="inputRef"
+                v-model="searchQuery"
+                type="text"
+                class="octopus-select-input"
+                :placeholder="inputPlaceholder"
+                :disabled="isDisabled"
+                @focus="openDropdown"
+                @input="handleInput"
+            >
+            <button
+                class="btn-transparent octopus-select-chevron"
+                :disabled="isDisabled"
+                @click.stop="toggleDropdown"
+            >
+                <ChevronDownIcon />
+            </button>
+        </div>
+
+        <Teleport to=".octopus-app">
+            <div
+                v-if="isOpen"
+                ref="dropdownRef"
+                class="octopus-select-dropdown"
+                :style="dropdownStyle"
+            >
+                <div class="octopus-select-options">
+                    <button
+                        v-for="(option, index) in displayedOptions"
+                        :key="index"
+                        class="octopus-select-option"
+                        :class="{ selected: isSelected(option) }"
+                        @click="selectOption(option)"
+                    >
+                        {{ getLabel(option) }}
+                    </button>
+                    <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                        {{ t('No elements found. Consider changing the search query.') }}
+                    </span>
+                </div>
+            </div>
+        </Teleport>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
+import { useOctopusDropdown } from '../composable/form/useOctopusDropdown';
+
+const props = withDefaults(defineProps<{
+    /** Optional label displayed above the field. */
+    label?: string;
+    /** Currently selected item. Bind with `v-model:value`. */
+    value?: T;
+    /** Full list of options to display or filter. */
+    options: T[];
+    /** Key of each option object to use as the ID. */
+    optionKey?: keyof T;
+    /** Key of each option object to use as the display label. */
+    optionLabel: keyof T & string;
+    /** Disables the field when true. */
+    isDisabled?: boolean;
+    /** Placeholder shown in the input when no item is selected. Defaults to the translated "Search" string. */
+    placeholder?: string;
+    /** Disable the border around the input. */
+    noBorder?: boolean;
+    /** When true (default), clicking the already-selected option clears the selection. */
+    allowDeselect?: boolean;
+}>(), {
+    label: undefined,
+    value: undefined,
+    optionKey: undefined,
+    placeholder: undefined,
+    allowDeselect: true,
+});
+
+const emit = defineEmits<{
+    /** Emitted when the selection changes. */
+    (e: 'update:value', value: T | undefined): void;
+    /** Emitted on every input change. When listened to, the parent is responsible for
+     *  updating `options`; otherwise the component filters `options` client-side. */
+    (e: 'search', query: string): void;
+}>();
+
+const { t } = useI18n();
+
+// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown
+// so clicks inside the dropdown don't trigger the click-outside handler.
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const {
+    searchQuery,
+    isOpen,
+    containerRef,
+    inputRef,
+    computedId,
+    displayedOptions,
+    inputPlaceholder,
+    getLabel,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    handleInput,
+} = useOctopusDropdown(props, (query) => emit('search', query), 'select', [dropdownRef]);
+
+// Position of the teleported dropdown (position: fixed, anchored below the trigger field)
+const dropdownStyle = ref<CSSProperties>({});
+
+function updateDropdownPosition(): void {
+    if (!containerRef.value) { return; }
+    const rect = containerRef.value.getBoundingClientRect();
+    dropdownStyle.value = {
+        position: 'fixed',
+        top: `${rect.bottom + 2}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+    };
+}
+
+watch(isOpen, (val) => {
+    if (val) {
+        nextTick(updateDropdownPosition);
+    }
+});
+
+onMounted(() => {
+    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes
+    window.addEventListener('scroll', updateDropdownPosition, true);
+    window.addEventListener('resize', updateDropdownPosition);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', updateDropdownPosition, true);
+    window.removeEventListener('resize', updateDropdownPosition);
+});
+
+const selectedLabel = computed(() =>
+    props.value !== undefined ? getLabel(props.value) : undefined
+);
+
+function isSelected(option: T): boolean {
+    if (props.value === undefined) {
+        return false;
+    }
+    if (props.optionKey) {
+        return props.value[props.optionKey] === option[props.optionKey];
+    }
+    return toRaw(props.value as object) === toRaw(option as object);
+}
+
+function selectOption(option: T): void {
+    if (isSelected(option) && props.allowDeselect) {
+        emit('update:value', undefined);
+    } else {
+        emit('update:value', option);
+    }
+    closeDropdown();
+}
+</script>
+
+<style scoped lang="scss">
+.octopus-select {
+    position: relative;
+
+    .octopus-select-field {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--octopus-border-default);
+        border-radius: var(--octopus-border-radius);
+        background: white;
+        cursor: pointer;
+
+        &.open {
+            border-color: var(--octopus-primary);
+        }
+
+        &.disabled {
+            background: var(--octopus-secondary-lighter);
+            cursor: default;
+        }
+
+        &.noBorder {
+            border: none;
+        }
+    }
+
+    .octopus-select-value {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0.4rem 0.5rem;
+        padding-right: 0;
+        height: 2rem;
+    }
+
+    .octopus-select-input {
+        flex: 1;
+        border: none;
+        background: transparent;
+        padding: 0.4rem 0.5rem;
+        height: 2rem;
+        outline: none;
+        cursor: inherit;
+        min-width: 0;
+    }
+
+    .octopus-select-chevron {
+        padding: 0.25rem 0.5rem;
+        display: flex;
+        align-items: center;
+    }
+
+}
+
+// Dropdown is teleported to body — scoped rules must be top-level so that [data-v-xxxx]
+// is matched directly on the element rather than via a descendant-of-.octopus-select selector.
+.octopus-select-dropdown {
+    z-index: 100;
+    background: white;
+    border: 1px solid var(--octopus-border-default);
+    border-radius: var(--octopus-border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 0.25rem 0;
+}
+
+.octopus-select-options {
+    max-height: 14rem;
+    overflow-y: auto;
+}
+
+.octopus-select-option {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 0.25rem 0.5rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--octopus-secondary-lighter);
+    }
+
+    &.selected {
+        font-weight: 600;
+        color: var(--octopus-primary);
+    }
+}
+</style>

package/src/components/misc/ClassicPopover.vue

@@ -48,7 +48,9 @@ const props = defineProps({
   popoverClass: { type: String, default: undefined },
   isTopLayer: { type: Boolean, default: false },
   /** @deprecated No longer needed. If set to true, max height of popover will not overflow from parent */
-  constrainHeight: { type: Boolean, default: true }
+  constrainHeight: { type: Boolean, default: true },
+  /** Force z-index */
+  zIndex: { type: Number, default: undefined }
 })
 
 //Emits
@@ -74,7 +76,12 @@ const router = useRouter();
 
 //Computed
 const popoverId = computed(() => "popover" + props.target);
-const positionInlineStyle = computed(() => `left: ${posX.value}px; top: ${posY.value}px;max-height:${maxHeight.value}`);
+const positionInlineStyle = computed(() => ({
+  left: `${posX.value}px`,
+  top: `${posY.value}px`,
+  'max-height': maxHeight.value,
+  'z-index': props.zIndex ?? 10
+}));
 const displayPopover = computed(() => show.value && !props.disable);
 const isTopLayerPopover = computed(() => (props.isTopLayer || "octopus-modal"===props.relativeClass) && Object.hasOwn(HTMLElement.prototype, "popover"));
 

package/src/components/misc/modal/ClassicModal.vue

@@ -31,6 +31,7 @@
       </div>
     </div>
     <div v-show="!onlyHeader" class="octopus-modal-body">
+      <slot />
       <slot name="body" />
     </div>
     <div v-show="!onlyHeader" class="octopus-modal-footer">
@@ -109,6 +110,8 @@ function closePopup(): void {
 
   @media (width <= 500px) {
     width: 95vw;
+    margin-left: 2.5vw;
+    margin-right: 2.5vw;
   }
 
  .octopus-modal-body {

package/src/components/misc/player/elements/PlayerPlayButton.vue

@@ -7,7 +7,7 @@
       'play-button-box': !isBigButton,
       'play-big-button-box': isBigButton,
     }"
-    class="btn text-light bg-primary"
+    class="btn text-light"
     @click="switchPausePlay"
   >
     <PlayIcon v-if="displayIsPaused" :size="isBigButton ? 60 : 30" />
@@ -107,23 +107,27 @@ function switchPausePlay(): void {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 @use "../../../../style/playButton";
-.octopus-app {
-  .play-button-box:not(.small-font) {
-    font-size: 1rem !important;
-  }
-  .play-big-button-box {
-    height: 5rem;
-    width: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0.5rem;
-    border-radius: 50% !important;
-    font-size: 2.5rem !important;
-    flex-shrink: 0;
-    cursor: pointer;
-  }
+
+.btn {
+  color: var(--octopus-player-btn-fg);
+  background-color: var(--octopus-player-btn-bg);
+}
+
+.play-button-box:not(.small-font) {
+  font-size: 1rem !important;
+}
+.play-big-button-box {
+  height: 5rem;
+  width: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.5rem;
+  border-radius: 50% !important;
+  font-size: 2.5rem !important;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 </style>

package/src/components/pages/PlaylistsPage.vue

@@ -1,5 +1,6 @@
 <template>
   <section v-if="isInit" class="page-box">
+    <!-- TODO à intégrer dans frontoffice -->
     <router-link
       v-if="isRolePlaylists && !isPodcastmaker"
       to="/main/priv/edit/playlist"

package/src/helper/colorFromString.ts

@@ -1,15 +1,22 @@
 /**
  * Get a color from a string.
  * Using the same string, the color will always be the same.
+ *
+ * Uses FNV-1a hashing (XOR-then-multiply with the FNV prime 16777619) for strong
+ * bit avalanche: a single character difference propagates through all hash bits,
+ * so similar strings produce very different hues.
+ *
  * @param str The string used for the color
  * @param saturation Saturation of the color
  * @param lightness Lightness of the color
  * @returns A color
  */
 export function colorFromString(str: string, saturation = 80, lightness = 70) {
-    let hash = 0;
-    str.split('').forEach(char => {
-        hash = char.charCodeAt(0) + ((hash << 5) - hash);
-    });
-    return `hsl(${(hash + 360) % 360}, ${saturation}%, ${lightness}%)`;
+    let hash = 2166136261;
+    for (const char of str) {
+        hash ^= char.charCodeAt(0);
+        hash = Math.imul(hash, 16777619) >>> 0;
+    }
+    const hue = Math.round((hash / 0xFFFFFFFF) * 360);
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 }

package/src/helper/equals.ts

@@ -1,20 +1,32 @@
 export function deepEqual(obj1: any, obj2: any) {
+    // it's just the same object. No need to compare.
+    if(obj1 === obj2)  {
+        return true;
+    }
 
-    if(obj1 === obj2) // it's just the same object. No need to compare.
-        {return true;}
+    // compare primitives
+    if(isPrimitive(obj1) && isPrimitive(obj2)) {
+        return obj1 === obj2;
+    }
 
-    if(isPrimitive(obj1) && isPrimitive(obj2)) // compare primitives
-        {return obj1 === obj2;}
+    // one is a primitive but not the other (for example undefined vs array)
+    if (isPrimitive(obj1) || isPrimitive(obj2)) {
+        return false;
+    }
 
     if(Object.keys(obj1).length !== Object.keys(obj2).length) {
         return false;
     }
 
     // compare objects with same number of keys
-    for(const key in obj1)
-    {
-        if(!(key in obj2)) {return false;} //other object doesn't have this prop
-        if(!deepEqual(obj1[key], obj2[key])) {return false;}
+    for(const key in obj1) {
+        //other object doesn't have this prop
+        if(!(key in obj2)) {
+            return false;
+        }
+        if(!deepEqual(obj1[key], obj2[key])) {
+            return false;
+        }
     }
 
     return true;
@@ -23,4 +35,4 @@ export function deepEqual(obj1: any, obj2: any) {
 //check if value is primitive
 function isPrimitive(obj: unknown) {
     return (obj !== Object(obj));
-}
+}

package/src/stores/ParamSdkStore.ts

@@ -48,6 +48,7 @@ export interface ParamStore {
     /** Show time with the dates on podcasts */
     showTimeWithDates?: boolean;
     buttonPlus?: boolean;
+    /** Show the "Radio & Live" tab in the navigation; driven by additionalConfiguration from the backend */
     isLiveTab?: boolean;
     isCaptchaTest?: boolean;
     podcastItem?: number;

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

@@ -24,6 +24,12 @@ export type OrganisationAttributes = {
   PRIVATE?: string;
   /** Live recordings enabled */
   'live.active'?: boolean;
+  /**
+   * List of rubriquage **names**.
+   * The rubriques from these rubriquage are stored in stats and can be queried
+   * upon.
+   */
+  rubriquage4MMIdentifier?: string;
 };
 
 export interface Organisation {

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

@@ -129,6 +129,14 @@ export function simplifiedToFull(simplified: SimplifiedPodcast, organisation: Or
   };
 }
 
+export function podcastToSimplified(full: Podcast): SimplifiedPodcast {
+  return {
+    ...full,
+    emissionId: full.emission.emissionId,
+    organisationId: full.organisation.id
+  };
+}
+
 export function emptyPodcastData(): Podcast {
   return {
     podcastId: 0,

package/src/stores/class/rubrique/rubrique.ts

@@ -3,7 +3,7 @@ export interface Rubrique {
   name: string;
   podcastCount?: number;
   rubriquageId?: number;
-  rubriqueId?: number;
+  rubriqueId: number;
   score?: number;
   organisationPrivacy?: string;
 }

package/src/style/_utilities.scss

@@ -297,6 +297,7 @@ $utilities: map.merge(
       class: fw,
       values: (
         normal: 400,
+        600: 600,
         bold: 700,
       )
     ),

package/src/style/_variables.scss

@@ -43,6 +43,13 @@
     // ClassicDataTable
     --table-line-height: 48px;
 
+    // Buttons
+    --octopus-btn-primary-bg: var(--octopus-primary);
+    --octopus-btn-primary-fg: var(--octopus-color-on-primary);
+    --octopus-btn-play-bg: var(--octopus-primary-less-transparent);
+    --octopus-btn-play-fg: white;
+    --octopus-btn-play-radius: var(--octopus-border-radius);
+
     // Player
     // Color for the transcript background
     --octopus-player-transcript-bg-color: oklch(from var(--octopus-player-color) calc(l + 0.1) c h);
@@ -52,6 +59,10 @@
     --octopus-player-progress-color-current: var(--octopus-primary);
     // Color for the progress bar background
     --octopus-player-progress-background-color: var(--octopus-secondary-lighter);
+    // Color of the player's button
+    --octopus-player-btn-bg: var(--octopus-btn-primary-bg);
+    // Color of the player's button
+    --octopus-player-btn-fg: var(--octopus-btn-primary-fg);
 
     // Smartlink
     --octopus-smartlink-title-color: var(--octopus-gray-text);

package/src/style/bootstrap.scss

@@ -153,10 +153,10 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			background: var(--octopus-primary);
+			background: var(--octopus-btn-primary-bg);
 			border: 1px solid var(--octopus-primary);
 			border-radius: var(--octopus-border-radius) !important;
-			color: var(--octopus-color-on-primary) !important;
+			color: var(--octopus-btn-primary-fg) !important;
 			font-weight: 500;
 
 			&:not(.btn-on-dark):is(:focus, :hover, :active, .active){
@@ -219,6 +219,13 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		border: 0;
 	}
 
+	.btn-icon {
+		background: transparent;
+		border: 0;
+		border-radius: 100%;
+		height: fit-content;
+	}
+
 	.share-btn {
 		display: inline-flex;
 		align-items: center;

package/tests/components/form/ClassicButtonGroup.spec.ts

@@ -11,14 +11,14 @@ const options = [
 describe('ClassicButtonGroup', () => {
     it('renders one button per option', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST'] },
+            props: { options, value: ['PODCAST'] },
         });
         expect(wrapper.findAll('button')).toHaveLength(3);
     });
 
     it('applies active class to selected options only', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST', 'LIVE'] },
+            props: { options, value: ['PODCAST', 'LIVE'] },
         });
         const buttons = wrapper.findAll('button');
         expect(buttons[0].classes()).toContain('active');
@@ -26,27 +26,27 @@ describe('ClassicButtonGroup', () => {
         expect(buttons[2].classes()).toContain('active');
     });
 
-    it('emits update:modelValue with added value when clicking inactive button', async () => {
+    it('emits update:value with added value when clicking inactive button', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST'] },
+            props: { options, value: ['PODCAST'] },
         });
         await wrapper.findAll('button')[1].trigger('click');
-        expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['PODCAST', 'VIDEO']]);
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([['PODCAST', 'VIDEO']]);
     });
 
-    it('emits update:modelValue without removed value when clicking active button (not last)', async () => {
+    it('emits update:value without removed value when clicking active button (not last)', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST', 'VIDEO'] },
+            props: { options, value: ['PODCAST', 'VIDEO'] },
         });
         await wrapper.findAll('button')[0].trigger('click');
-        expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['VIDEO']]);
+        expect(wrapper.emitted('update:value')?.[0]).toEqual([['VIDEO']]);
     });
 
     it('does not emit when clicking the only active button', async () => {
         const wrapper = await mount(ClassicButtonGroup, {
-            props: { options, modelValue: ['PODCAST'] },
+            props: { options, value: ['PODCAST'] },
         });
         await wrapper.findAll('button')[0].trigger('click');
-        expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+        expect(wrapper.emitted('update:value')).toBeUndefined();
     });
 });