@streamscloud/embeddable 6.0.1 → 6.0.2

package/dist/core/browser.js

@@ -1 +1 @@
-export const runningInBrowser = () => !import.meta.env.SSR;
+export const runningInBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';

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

@@ -17,9 +17,9 @@ 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 IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
 import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
-import { onMount } from 'svelte';
+import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
+import { onDestroy, onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 let { dataProvider, playerProps, localization: localizationInit = 'en' } = $props();
 const localization = $derived(new MediaCenterLocalization(localizationInit));
@@ -32,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 [];
@@ -60,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;
@@ -145,8 +152,7 @@ let scrollRef = null;
 let scrollHasLeft = $state(false);
 let scrollHasRight = $state(false);
 const mounted = (node, callback) => {
-    const scrollResizeObserver = new ResizeObserver(updateScrollShadows);
-    scrollResizeObserver.observe(node);
+    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.observe(node);
     const heightResizeObserver = new ResizeObserver(() => {
         headerHeight = node.clientHeight;
         callback({ height: headerHeight });
@@ -154,7 +160,6 @@ const mounted = (node, callback) => {
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            scrollResizeObserver.disconnect();
             heightResizeObserver.disconnect();
         }
     };
@@ -169,9 +174,7 @@ const updateScrollShadows = () => {
 };
 const onScrollMounted = (node) => {
     scrollRef = node;
-    requestAnimationFrame(() => {
-        updateScrollShadows();
-    });
+    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.observe(node);
 };
 </script>
 
@@ -181,9 +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}
@@ -191,16 +191,17 @@ const onScrollMounted = (node) => {
           class:media-center__scroll--has-both={scrollHasRight && scrollHasLeft}
           use:onScrollMounted
           onscroll={updateScrollShadows}>
-          <div class="media-center__items">
-            {#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>
+          <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">
@@ -276,6 +277,7 @@ const onScrollMounted = (node) => {
   width: 100%;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0.75rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
@@ -288,12 +290,16 @@ const onScrollMounted = (node) => {
   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 {
@@ -308,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;

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { runningInBrowser } from '../../core/browser';
-import { isIgnored } from './dropdown-ignore';
 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';

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.1",
+  "version": "6.0.2",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",