@streamscloud/embeddable 6.0.0 → 6.0.2

package/dist/core/browser.d.ts

@@ -0,0 +1 @@
+export declare const runningInBrowser: () => boolean;

package/dist/core/browser.js

@@ -0,0 +1 @@
+export const runningInBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -10,14 +10,16 @@
 import { Utils } from '../../core/utils';
 import { default as ShortVideosPlayerView } from '../../short-videos/short-videos-player/short-videos-player-view.svelte';
 import { default as StreamPlayer } from '../../streams/stream-player/stream-player.svelte';
-import { Icon } from '../../ui/icon';
+import { Dropdown } from '../../ui/dropdown';
+import { Icon, IconColor } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
 import { MediaCenterLocalization } from './media-center-localization';
 import { default as Overview } from './overview.svelte';
 import { makeShortVideosProvider } from './short-video-resources-generator';
 import { MediaCenterMode } from './types';
+import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
 import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
-import { onMount } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 let { dataProvider, playerProps, localization: localizationInit = 'en' } = $props();
 const localization = $derived(new MediaCenterLocalization(localizationInit));
@@ -30,6 +32,7 @@ let headerHeight = $state(0);
 let shortVideoProps = $state.raw(playerProps.type === MediaCenterMode.ShortVideos ? playerProps.props : null);
 let streamProps = $state.raw(playerProps.type === MediaCenterMode.Stream ? playerProps.props : null);
 let overviewData = $state.raw(null);
+let scrollResizeObserver = null;
 const categories = $derived.by(() => {
     if (!mediaCenterConfig) {
         return [];
@@ -58,7 +61,13 @@ onMount(() => __awaiter(void 0, void 0, void 0, function* () {
             mediaDataLoading = false;
         }
     }
+    scrollResizeObserver = new ResizeObserver(() => {
+        updateScrollShadows();
+    });
 }));
+onDestroy(() => {
+    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.disconnect();
+});
 const selectCategory = (categoryId) => {
     if (!dataProvider) {
         return;
@@ -139,21 +148,19 @@ const uniqueById = (arr) => {
     }
     return res;
 };
-let wrapperRef = null;
 let scrollRef = null;
 let scrollHasLeft = $state(false);
 let scrollHasRight = $state(false);
 const mounted = (node, callback) => {
-    wrapperRef = node;
-    requestAnimationFrame(() => {
+    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.observe(node);
+    const heightResizeObserver = new ResizeObserver(() => {
         headerHeight = node.clientHeight;
         callback({ height: headerHeight });
     });
-    const ro = new ResizeObserver(updateScrollShadows);
-    ro.observe(wrapperRef);
+    heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            ro.disconnect();
+            heightResizeObserver.disconnect();
         }
     };
 };
@@ -167,9 +174,7 @@ const updateScrollShadows = () => {
 };
 const onScrollMounted = (node) => {
     scrollRef = node;
-    requestAnimationFrame(() => {
-        updateScrollShadows();
-    });
+    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.observe(node);
 };
 </script>
 
@@ -179,10 +184,6 @@ const onScrollMounted = (node) => {
   {#snippet categoriesSwitcher(data: { maxItemsWidth: Number; onMounted: (data: { height: Number }) => void })}
     <div class="media-center" use:mounted={data.onMounted}>
       <div class="media-center__row" style={`max-width: ${data.maxItemsWidth}px;`}>
-        <button type="button" class="media-center__overview-button" onclick={toggleOverview}>
-          <Icon src={IconTextColumnThree} />
-        </button>
-
         <div
           class="media-center__scroll"
           class:media-center__scroll--has-left={scrollHasLeft}
@@ -190,17 +191,40 @@ const onScrollMounted = (node) => {
           class:media-center__scroll--has-both={scrollHasRight && scrollHasLeft}
           use:onScrollMounted
           onscroll={updateScrollShadows}>
-          <div class="media-center__items">
+          <button type="button" class="media-center__overview-button" onclick={toggleOverview}>
+            <Icon src={IconTextColumnThree} />
+          </button>
+          {#each categories as category (category.id)}
+            <button
+              type="button"
+              class="media-center__category-button"
+              class:media-center__category-button--active={selectedCategoryId === category.id}
+              title={category.name}
+              onclick={() => selectCategory(category.id)}>{category.name}</button>
+          {/each}
+        </div>
+      </div>
+      <div class="media-center__overview-dropdown">
+        <Dropdown>
+          {#snippet trigger()}
+            <div class="media-center__overview-dropdown-trigger">
+              <Icon src={IconLineHorizontal3} color={IconColor.White}></Icon>
+            </div>
+          {/snippet}
+          <div class="media-center__overview-dropdown-content">
+            <button type="button" class="media-center__category-button media-center__category-button--dropdown" onclick={toggleOverview}>
+              {localization.overviewLabel}
+            </button>
             {#each categories as category (category.id)}
               <button
                 type="button"
-                class="media-center__category-button"
+                class="media-center__category-button media-center__category-button--dropdown"
                 class:media-center__category-button--active={selectedCategoryId === category.id}
                 title={category.name}
                 onclick={() => selectCategory(category.id)}>{category.name}</button>
             {/each}
           </div>
-        </div>
+        </Dropdown>
       </div>
     </div>
   {/snippet}
@@ -246,12 +270,6 @@ const onScrollMounted = (node) => {
   right: 0;
   z-index: 1;
   pointer-events: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .media-center {
-    padding-left: 1.25rem;
-  }
 }
 .media-center__row {
   pointer-events: auto;
@@ -259,18 +277,29 @@ const onScrollMounted = (node) => {
   width: 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0.75rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center__row {
+    display: none;
+  }
 }
 .media-center__scroll {
   pointer-events: auto;
   position: relative;
   flex: 1 1 auto;
+  max-width: max-content;
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: nowrap;
   mask-image: none;
 }
 .media-center__scroll::-webkit-scrollbar {
@@ -285,14 +314,6 @@ const onScrollMounted = (node) => {
 .media-center__scroll--has-both {
   mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 32px, rgb(0, 0, 0) calc(100% - 32px), rgba(0, 0, 0, 0) 100%);
 }
-.media-center__items {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: nowrap;
-  pointer-events: none;
-  padding-inline: 0.25rem;
-}
 .media-center__overview-button {
   pointer-events: auto;
   padding: 0.375rem 0.75rem;
@@ -329,8 +350,82 @@ const onScrollMounted = (node) => {
   background-color: rgba(255, 255, 255, 0.9);
   color: #000000;
 }
+.media-center__category-button--dropdown {
+  width: max-content;
+}
+.media-center__overview-dropdown {
+  display: none;
+  pointer-events: auto;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center__overview-dropdown {
+    display: block;
+    position: absolute;
+    top: 0.9375rem;
+    left: 0.625rem;
+    z-index: 1;
+  }
+}
+.media-center__overview-dropdown-trigger {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 1px solid #1c1c1c;
+  border-radius: 50%;
+  text-align: center;
+  --icon--color: #ffffff;
+  --icon--size: 1.75rem;
+}
+.media-center__overview-dropdown-trigger:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+  transition: background-color 0.5s;
+}
+.media-center__overview-dropdown-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
 
 .media-center-overview {
   position: absolute;
   inset: 0;
+  container-type: inline-size;
+  overflow-y: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+}
+.media-center-overview::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.media-center-overview::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.media-center-overview:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.media-center-overview:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.media-center-overview:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
+@media (max-width: 576px) {
+  .media-center-overview {
+    top: 5rem !important;
+  }
 }</style>

package/dist/media-center/media-center/media-center-localization.d.ts

@@ -2,10 +2,12 @@ import { type Locale } from '../../core/locale';
 import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
 export interface IMediaCenterLocalization {
     shortVideosSectionTitle?: string;
+    overviewLabel?: string;
     productLocalization?: IProductCardLocalization | Locale;
 }
 export declare class MediaCenterLocalization {
     shortVideosSectionTitle: string;
+    overviewLabel: string;
     productLocalization: IProductCardLocalization | Locale;
     constructor(init: IMediaCenterLocalization | Locale);
 }

package/dist/media-center/media-center/media-center-localization.js

@@ -1,9 +1,11 @@
 import { isLocale } from '../../core/locale';
 export class MediaCenterLocalization {
     shortVideosSectionTitle;
+    overviewLabel;
     productLocalization;
     constructor(init) {
         this.shortVideosSectionTitle = isLocale(init) ? loc.shortVideosSectionTitle[init] : init.shortVideosSectionTitle || loc.shortVideosSectionTitle.en;
+        this.overviewLabel = isLocale(init) ? loc.overviewLabel[init] : init.overviewLabel || loc.overviewLabel.en;
         this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
     }
 }
@@ -11,5 +13,9 @@ const loc = {
     shortVideosSectionTitle: {
         en: 'Popular Short Videos',
         no: 'Populære korte videoer'
+    },
+    overviewLabel: {
+        en: 'Overview',
+        no: 'Oversikt'
     }
 };

package/dist/media-center/media-center/overview.svelte

@@ -81,6 +81,12 @@ const shortVideoSectionItems = $derived.by(() => {
   display: flex;
   justify-content: center;
   padding: 1.25rem 1.875rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .media-center-overview {
+    padding: 0.625rem 0.9375rem;
+  }
 }
 .media-center-overview__content {
   width: 100%;
@@ -121,20 +127,23 @@ const shortVideoSectionItems = $derived.by(() => {
   display: grid;
   gap: 2rem 1.25rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
 }
-@media (max-width: 768px) {
+@container (width < 992px) {
   .media-center-overview__section-content {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
-@media (max-width: 576px) {
+@container (width < 768px) {
   .media-center-overview__section-content {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-@media (max-width: 480px) {
+@container (width < 576px) {
   .media-center-overview__section-content {
-    grid-template-columns: 2fr;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 .media-center-overview__card-wrapper {

package/dist/short-videos/short-videos-player/controls.svelte

@@ -13,7 +13,7 @@ const changeShowAttachments = () => {
 </script>
 
 {#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
-  <div class="short-videos-player-controls">
+  <div class="short-videos-player-controls" class:short-videos-player-controls--with-logo={!!playerLogo}>
     <div class="short-videos-player-controls__left">
       {#if shortVideo}
         <div class="short-videos-player-controls__short-video-hub">
@@ -86,6 +86,9 @@ const changeShowAttachments = () => {
   padding: var(--short-videos-player--controls--padding);
   container-type: inline-size;
 }
+.short-videos-player-controls--with-logo {
+  padding-top: 0;
+}
 .short-videos-player-controls__left {
   display: flex;
   flex-direction: column;
@@ -145,6 +148,7 @@ const changeShowAttachments = () => {
   height: var(--short-videos-player--media-center-header--height);
   min-height: var(--short-videos-player--media-center-header--height);
   max-height: var(--short-videos-player--media-center-header--height);
+  min-height: 4.375rem;
   display: flex;
   justify-content: center;
   align-items: center;

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">import { runningInBrowser } from '../../core/browser';
+import { Icon } from '../icon';
+import { isIgnored } from './dropdown-ignore';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import { createPopper } from '@popperjs/core';
+import { onDestroy } from 'svelte';
+let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, on, children, trigger, isOpenRequested } = $props();
+$effect(() => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.mounted) === null || _a === void 0 ? void 0 : _a.call(on, {
+        toggleOpen: (value) => {
+            if (value === undefined) {
+                if (opened) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            }
+            else {
+                if (!value) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            }
+        }
+    });
+});
+const id = Math.random();
+let opened = $state(false);
+$effect(() => {
+    var _a, _b;
+    if (opened) {
+        (_a = on === null || on === void 0 ? void 0 : on.opened) === null || _a === void 0 ? void 0 : _a.call(on);
+    }
+    else {
+        (_b = on === null || on === void 0 ? void 0 : on.closed) === null || _b === void 0 ? void 0 : _b.call(on);
+    }
+});
+$effect(() => {
+    popper === null || popper === void 0 ? void 0 : popper.setOptions({ placement: position });
+});
+$effect(() => {
+    if (isOpenRequested) {
+        open();
+    }
+});
+let triggerRef = $state(null);
+let dropdownRef;
+let popper;
+onDestroy(() => {
+    removeWindowClickListener();
+});
+const open = () => {
+    opened = true;
+    window.addEventListener('click', close);
+};
+const close = () => {
+    opened = false;
+    removeWindowClickListener();
+};
+const removeWindowClickListener = () => {
+    if (runningInBrowser()) {
+        window.removeEventListener('click', close);
+    }
+};
+const handleClick = (event) => {
+    event.stopPropagation();
+    if (disabled) {
+        return;
+    }
+    if (!opened) {
+        open();
+        return;
+    }
+    const checkCanClose = (node) => {
+        if (keepDropdownOpen) {
+            return false;
+        }
+        while (node && node !== dropdownRef) {
+            if (isIgnored(node) || node.classList.contains('flatpickr-calendar')) {
+                return false;
+            }
+            node = node.parentElement;
+        }
+        return true;
+    };
+    if (checkCanClose(event.target)) {
+        close();
+    }
+};
+const initPopper = (node, _triggerEl) => {
+    popper = createPopper(_triggerEl, node, {
+        placement: position,
+        strategy: fixedPosition ? 'fixed' : 'absolute',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: () => {
+                        return [0, offset];
+                    }
+                }
+            },
+            { name: 'eventListeners', enabled: opened },
+            { name: 'flip' },
+            {
+                name: 'preventOverflow',
+                options: {
+                    boundary: document.body,
+                    padding: boundaryMargin
+                }
+            }
+        ]
+    });
+    return {
+        update(_triggerEl) {
+            popper.state.elements.reference = _triggerEl;
+            popper.update();
+        },
+        destroy() {
+            popper.destroy();
+        }
+    };
+};
+</script>
+
+<div class="dropdown" class:dropdown--disabled={disabled} onclick={handleClick} onkeydown={() => ({})} bind:this={dropdownRef} role="none">
+  <button type="button" class="dropdown__trigger" bind:this={triggerRef}>
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <Icon src={IconChevronDown} />
+    {/if}
+  </button>
+  {#if opened}
+    <div use:initPopper={triggerRef} class="dropdown__content" role="tooltip" tabindex="-1">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.dropdown {
+  --_dropdown--width: var(--dropdown--width, auto);
+  --_dropdown--content--background-color: var(--dropdown--content--background-color, transparent);
+  --_dropdown--content--box-shadow: var(--dropdown--content--box-shadow, none);
+  height: 100%;
+  width: var(--_dropdown--width);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.dropdown :global([contenteditable]) {
+  user-select: text;
+}
+.dropdown__trigger {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+.dropdown--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.dropdown__content {
+  box-shadow: var(--_dropdown--content--box-shadow);
+  background: var(--_dropdown--content--background-color);
+  width: max-content;
+  z-index: 999;
+}
+.dropdown :global([data-popper-escaped]) {
+  visibility: hidden !important;
+}</style>

package/dist/ui/dropdown/cmp.dropdown.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { DropdownPosition } from './index';
+import { type Snippet } from 'svelte';
+type Props = {
+    position?: DropdownPosition;
+    disabled?: boolean;
+    keepDropdownOpen?: boolean;
+    fixedPosition?: boolean;
+    offset?: number;
+    boundaryMargin?: number;
+    on?: {
+        opened?: () => void;
+        closed?: () => void;
+        mounted?: (callbacks: {
+            toggleOpen: (value?: boolean) => void;
+        }) => void;
+    };
+    children: Snippet;
+    trigger?: Snippet;
+    isOpenRequested?: boolean;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/dropdown/dropdown-ignore.d.ts

@@ -0,0 +1,6 @@
+/** @type {import('svelte/action').Action}  */
+export declare const dropdownIgnore: (node: HTMLElement, value?: boolean) => {
+    destroy(): void;
+};
+export declare const ignoreAttribute = "dropdownIgnore";
+export declare const isIgnored: (node: HTMLElement) => boolean;

package/dist/ui/dropdown/dropdown-ignore.js

@@ -0,0 +1,11 @@
+/** @type {import('svelte/action').Action}  */
+export const dropdownIgnore = (node, value = true) => {
+    node.dataset[ignoreAttribute] = value.toString();
+    return {
+        destroy() {
+            // the node has been removed from the DOM
+        }
+    };
+};
+export const ignoreAttribute = 'dropdownIgnore';
+export const isIgnored = (node) => node.dataset[ignoreAttribute] === 'true';

package/dist/ui/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Dropdown } from './cmp.dropdown.svelte';
+export type DropdownPosition = import('@popperjs/core').Placement;
+export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/dropdown/index.js

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './cmp.dropdown.svelte';
+export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/player/cmp.player-slider.svelte

@@ -1,6 +1,5 @@
-<script lang="ts">import { isScrollingPrevented } from './prevent-slider-scroll';
+<script lang="ts">import { createWheelPeakDetector } from './wheel-peak-detector';
 import { onDestroy, onMount, untrack } from 'svelte';
-const MOUSE_DETECTION_THRESHOLD_MS = 100;
 let { buffer, on, children } = $props();
 let slidesRef;
 let sliderHeight = $state(0);
@@ -90,89 +89,6 @@ onMount(() => {
         }
         reset();
     });
-    let waveDetector = {
-        events: [],
-        direction: 0,
-        peakReached: false,
-        lastPeak: 0,
-        waveStartTime: 0
-    };
-    let isAnimatingWheel = false;
-    const triggerAnimation = (direction) => {
-        isAnimatingWheel = true;
-        if (direction > 0 && buffer.canLoadNext) {
-            buffer.loadNext();
-        }
-        else if (direction < 0 && buffer.canLoadPrevious) {
-            buffer.loadPrevious();
-        }
-        setTimeout(() => {
-            isAnimatingWheel = false;
-        }, buffer.animationDuration + 100);
-    };
-    slidesRef.addEventListener('wheel', (e) => {
-        e.preventDefault();
-        const checkCanHandleWheel = (node) => {
-            while (node && node !== slidesRef) {
-                if (isScrollingPrevented(node)) {
-                    return false;
-                }
-                node = node.parentElement;
-            }
-            return true;
-        };
-        if (!checkCanHandleWheel(e.target)) {
-            return;
-        }
-        const now = Date.now();
-        const absDelta = Math.abs(e.deltaY);
-        const direction = Math.sign(e.deltaY);
-        // Mouse - large stable values, trigger immediately
-        if (absDelta >= 10 && !isAnimatingWheel) {
-            const lastEvent = waveDetector.events[waveDetector.events.length - 1];
-            const timeSinceLastEvent = lastEvent ? now - lastEvent.time : 1000;
-            // If enough time has passed since the last event - it's a mouse
-            if (timeSinceLastEvent > MOUSE_DETECTION_THRESHOLD_MS) {
-                triggerAnimation(direction);
-                waveDetector = { events: [], direction: 0, peakReached: false, lastPeak: 0, waveStartTime: 0 };
-                return;
-            }
-        }
-        // Touchpad - small, variable values, need to analyze the wave
-        // New wave if: direction changed or a lot of time has passed
-        if (direction !== waveDetector.direction || (waveDetector.waveStartTime && now - waveDetector.waveStartTime > 1500)) {
-            // Finalize the previous wave if it existed
-            if (waveDetector.peakReached && !isAnimatingWheel) {
-                triggerAnimation(waveDetector.direction);
-            }
-            // Start a new wave
-            waveDetector = {
-                events: [{ delta: absDelta, time: now }],
-                direction: direction,
-                peakReached: false,
-                lastPeak: absDelta,
-                waveStartTime: now
-            };
-            return;
-        }
-        // Continue the current wave
-        waveDetector.events.push({ delta: absDelta, time: now });
-        // Determine the phase of the wave
-        if (absDelta > waveDetector.lastPeak) {
-            // The wave is growing
-            waveDetector.lastPeak = absDelta;
-            waveDetector.peakReached = absDelta >= 5; // The minimum peak to consider a valid wave
-        }
-        else if (absDelta < waveDetector.lastPeak * 0.5) {
-            // The wave has dropped significantly - consider the gesture complete
-            if (waveDetector.peakReached && !isAnimatingWheel) {
-                triggerAnimation(waveDetector.direction);
-                waveDetector = { events: [], direction: 0, peakReached: false, lastPeak: 0, waveStartTime: 0 };
-            }
-        }
-        // Cleanup old events
-        waveDetector.events = waveDetector.events.filter((evt) => now - evt.time < 2000);
-    });
     slidesRef.addEventListener('transitionend', (e) => {
         if (e.target !== slidesRef) {
             return;
@@ -199,10 +115,24 @@ const styles = $derived.by(() => {
     ];
     return values.join(';');
 });
+const peakDetectorCallbacks = {
+    canLoadNext: () => buffer.canLoadNext,
+    canLoadPrevious: () => buffer.canLoadPrevious,
+    onTrigger: (direction) => {
+        // direction: 1 -> next, -1 -> previous
+        if (direction > 0) {
+            buffer.loadNext();
+        }
+        else if (direction < 0) {
+            buffer.loadPrevious();
+        }
+    },
+    getAnimationDurationMs: () => buffer.animationDuration
+};
 </script>
 
 <div class="player-slider">
-  <div class="player-slider__slides" bind:this={slidesRef} style={styles}>
+  <div class="player-slider__slides" bind:this={slidesRef} use:createWheelPeakDetector={{ cbs: peakDetectorCallbacks }} style={styles}>
     {#each buffer.loaded as item, index (item)}
       <div class="player-slider__slide">
         {#if index >= activeIndex - 1 && index <= activeIndex + 1}

package/dist/ui/player/wheel-peak-detector.d.ts

@@ -0,0 +1,22 @@
+export type PeakDetectorConfig = {
+    mouseGapMs?: number;
+    mouseDeltaThreshold?: number;
+    interEventTimeout?: number;
+    minPeakToTrigger?: number;
+    waveMaxAgeMs?: number;
+    directionFlipEndsWave?: boolean;
+    animationCooldownMs?: number;
+    directionChangeMinAbsDelta?: number;
+};
+export type PeakDetectorCallbacks = {
+    canLoadNext: () => boolean;
+    canLoadPrevious: () => boolean;
+    onTrigger: (direction: number) => void;
+    getAnimationDurationMs: () => number;
+};
+export declare const createWheelPeakDetector: (target: HTMLElement, params: {
+    cbs: PeakDetectorCallbacks;
+    cfg?: PeakDetectorConfig;
+}) => {
+    destroy(): void;
+};

package/dist/ui/player/wheel-peak-detector.js

@@ -0,0 +1,157 @@
+import { isScrollingPrevented } from './prevent-slider-scroll';
+export const createWheelPeakDetector = (target, params) => {
+    const { cbs, cfg } = params;
+    // Defaults tuned for smooth touchpads; adjust in caller if needed.
+    const config = {
+        mouseGapMs: cfg?.mouseGapMs ?? 120,
+        mouseDeltaThreshold: cfg?.mouseDeltaThreshold ?? 12,
+        interEventTimeout: cfg?.interEventTimeout ?? 180,
+        minPeakToTrigger: cfg?.minPeakToTrigger ?? 6,
+        waveMaxAgeMs: cfg?.waveMaxAgeMs ?? 1800,
+        directionFlipEndsWave: cfg?.directionFlipEndsWave ?? true,
+        animationCooldownMs: cfg?.animationCooldownMs ?? 100, // extra after CSS transition
+        directionChangeMinAbsDelta: cfg?.directionChangeMinAbsDelta ?? 2 // ignore tiny opposite spikes
+    };
+    let wave = null;
+    let lastWheelTime = 0;
+    let lastDelta = 0;
+    let isAnimating = false;
+    let cooldownTimer = null;
+    const clearWave = () => {
+        wave = null;
+    };
+    const setAnimatingWithCooldown = () => {
+        isAnimating = true;
+        const total = cbs.getAnimationDurationMs() + config.animationCooldownMs;
+        if (cooldownTimer) {
+            clearTimeout(cooldownTimer);
+        }
+        cooldownTimer = window.setTimeout(() => {
+            isAnimating = false;
+            cooldownTimer = null;
+        }, total);
+    };
+    const trigger = (direction) => {
+        if (direction > 0 && !cbs.canLoadNext()) {
+            return;
+        }
+        if (direction < 0 && !cbs.canLoadPrevious()) {
+            return;
+        }
+        setAnimatingWithCooldown();
+        cbs.onTrigger(direction);
+    };
+    const canHandle = (node) => {
+        while (node && node !== target) {
+            if (isScrollingPrevented(node)) {
+                return false;
+            }
+            node = node.parentElement;
+        }
+        return true;
+    };
+    const finalizeWaveWithTrigger = () => {
+        if (wave && !isAnimating) {
+            if (wave.maxAbsDelta >= config.minPeakToTrigger) {
+                trigger(wave.direction);
+            }
+        }
+        clearWave();
+    };
+    const finalizeWaveSilently = () => {
+        // Finish the wave without triggering (used on direction flip to avoid ghost slide)
+        clearWave();
+    };
+    const onWheel = (e) => {
+        e.preventDefault();
+        if (!canHandle(e.target)) {
+            return;
+        }
+        const now = Date.now();
+        const dy = e.deltaY;
+        const absDelta = Math.abs(dy);
+        console.warn(absDelta);
+        const dir = Math.sign(dy);
+        // Mouse branch: big, sparse deltas
+        const timeSinceLast = now - lastWheelTime;
+        if (absDelta >= config.mouseDeltaThreshold && timeSinceLast > config.mouseGapMs && !isAnimating) {
+            trigger(dir);
+            clearWave();
+            lastWheelTime = now;
+            lastDelta = dy;
+            return;
+        }
+        // Determine direction change with hysteresis to avoid micro flips
+        const directionChanged = !!wave && dir !== 0 && dir !== wave.direction && absDelta >= config.directionChangeMinAbsDelta;
+        const inactiveTooLong = wave && now - wave?.lastEventTime > config.interEventTimeout;
+        const waveTooOld = wave && now - wave?.startTime > config.waveMaxAgeMs;
+        // If direction flip should end the wave, do it silently (no trigger of the old direction)
+        if (wave && config.directionFlipEndsWave && directionChanged) {
+            finalizeWaveSilently();
+            // Start a new wave immediately in the new direction
+            wave = {
+                startTime: now,
+                lastEventTime: now,
+                direction: dir,
+                maxAbsDelta: absDelta,
+                sumAbsDelta: absDelta,
+                events: 1
+            };
+            lastWheelTime = now;
+            lastDelta = dy;
+            return;
+        }
+        // Finalize by inactivity or age (these DO trigger)
+        if (inactiveTooLong || waveTooOld) {
+            finalizeWaveWithTrigger();
+        }
+        // Start condition for new wave:
+        // - no wave
+        // - current amplitude grows vs previous
+        // - long gap since last wheel
+        const growing = absDelta > Math.abs(lastDelta);
+        const longGap = timeSinceLast > config.interEventTimeout;
+        if (!wave || growing || longGap) {
+            // Opportunistic finalize only if not animating and not caused by a flip
+            // (flip branch handled earlier and is silent)
+            if (wave && !isAnimating) {
+                if (wave.maxAbsDelta >= config.minPeakToTrigger) {
+                    trigger(wave.direction);
+                }
+            }
+            wave = {
+                startTime: now,
+                lastEventTime: now,
+                direction: dir || (wave?.direction ?? 0),
+                maxAbsDelta: absDelta,
+                sumAbsDelta: absDelta,
+                events: 1
+            };
+            lastWheelTime = now;
+            lastDelta = dy;
+            return;
+        }
+        // Continue current wave
+        if (wave) {
+            wave.lastEventTime = now;
+            wave.events += 1;
+            wave.sumAbsDelta += absDelta;
+            if (absDelta > wave.maxAbsDelta) {
+                wave.maxAbsDelta = absDelta; // peak update
+            }
+        }
+        lastWheelTime = now;
+        lastDelta = dy;
+    };
+    target.addEventListener('wheel', onWheel, { passive: false });
+    return {
+        destroy() {
+            target.removeEventListener('wheel', onWheel);
+            if (cooldownTimer) {
+                clearTimeout(cooldownTimer);
+                cooldownTimer = null;
+            }
+            wave = null;
+        }
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",
@@ -152,5 +152,8 @@
     "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.8"
   }
 }