@streamscloud/embeddable 6.0.4 → 6.1.0

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { createWheelPeakDetector } from './wheel-peak-detector';
+<script lang="ts">import { createWheelAdapter } from './wheel-gestures-adapter';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
@@ -115,7 +115,7 @@ const styles = $derived.by(() => {
     ];
     return values.join(';');
 });
-const peakDetectorCallbacks = {
+const wheelCallbacks = {
     canLoadNext: () => buffer.canLoadNext,
     canLoadPrevious: () => buffer.canLoadPrevious,
     onTrigger: (direction) => {
@@ -132,7 +132,7 @@ const peakDetectorCallbacks = {
 </script>
 
 <div class="player-slider">
-  <div class="player-slider__slides" bind:this={slidesRef} use:createWheelPeakDetector={{ cbs: peakDetectorCallbacks }} style={styles}>
+  <div class="player-slider__slides" bind:this={slidesRef} use:createWheelAdapter={{ cbs: wheelCallbacks }} 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/player-buffer.svelte.d.ts

@@ -8,7 +8,7 @@ export declare class PlayerBuffer<T extends {
     readonly canLoadNext: boolean;
     readonly canLoadPrevious: boolean;
     readonly navigationDisabled: boolean;
-    readonly animationDuration = 300;
+    readonly animationDuration = 500;
     private _currentIndex;
     private _loaded;
     private loadMoreFn;

package/dist/ui/player/player-buffer.svelte.js

@@ -6,7 +6,7 @@ export class PlayerBuffer {
     canLoadNext = $derived(this.currentIndex < this.loaded.length - 1);
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
-    animationDuration = 300;
+    animationDuration = 500;
     _currentIndex = $state(-1);
     _loaded = $state.raw([]);
     loadMoreFn;

package/dist/ui/player/wheel-gestures-adapter.d.ts

@@ -0,0 +1,17 @@
+export type WheelAdapterCallbacks = {
+    canLoadNext: () => boolean;
+    canLoadPrevious: () => boolean;
+    onTrigger: (direction: number) => void;
+    getAnimationDurationMs: () => number;
+};
+/**
+ * Minimal, robust wheel adapter:
+ * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Cooldown blocks triggers while animation runs
+ * - Mouse fallback: if velocity is near zero but delta is large, treat as a discrete "kick"
+ */
+export declare const createWheelAdapter: (target: HTMLElement, params: {
+    cbs: WheelAdapterCallbacks;
+}) => {
+    destroy(): void;
+};

package/dist/ui/player/wheel-gestures-adapter.js

@@ -0,0 +1,79 @@
+// wheel-gestures-adapter.ts
+import { WheelGestures } from 'wheel-gestures';
+/**
+ * Minimal, robust wheel adapter:
+ * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Cooldown blocks triggers while animation runs
+ * - Mouse fallback: if velocity is near zero but delta is large, treat as a discrete "kick"
+ */
+export const createWheelAdapter = (target, params) => {
+    const { cbs } = params;
+    // Tunables
+    const PEAK_THRESHOLD = 0.4; // EMA magnitude threshold to consider as a "peak"
+    const ACCEL_THRESHOLD = 0.02; // minimal directional EMA rise to count as real acceleration
+    const EMA_ALPHA = 0.35; // EMA smoothing factor (0..1); higher = snappier, noisier
+    const MOUSE_DELTA_KICK = 12; // mouse: large delta step (≈12 mac / ≈100 win)
+    const MOUSE_STEP_RATIO_KICK = 350; // dimensionless; tune 200–500 if needed
+    const wheelGestures = WheelGestures({ preventWheelAction: true, reverseSign: false });
+    wheelGestures.observe(target);
+    let isAnimating = false;
+    let cooldownTimer = null;
+    // EMA state
+    let emaVelocity = 0;
+    let previousEmaVelocity = 0;
+    const startCooldown = () => {
+        if (cooldownTimer) {
+            clearTimeout(cooldownTimer);
+        }
+        cooldownTimer = window.setTimeout(() => {
+            isAnimating = false;
+        }, cbs.getAnimationDurationMs() + 100);
+    };
+    const fire = (direction) => {
+        // Respect external guards (e.g., paging boundaries)
+        if ((direction > 0 && !cbs.canLoadNext()) || (direction < 0 && !cbs.canLoadPrevious())) {
+            return;
+        }
+        isAnimating = true;
+        cbs.onTrigger(direction);
+        startCooldown();
+    };
+    wheelGestures.on('wheel', ({ axisDelta: [, axisDeltaY], axisVelocity: [, axisVelocityY] }) => {
+        const velocityY = axisVelocityY || 0;
+        const deltaY = axisDeltaY || 0;
+        // Tracking only: always update EMA and compute signs/acceleration
+        previousEmaVelocity = emaVelocity;
+        emaVelocity += (velocityY - emaVelocity) * EMA_ALPHA;
+        const emaMagnitude = Math.abs(emaVelocity);
+        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocityY);
+        const emaAcceleration = emaVelocity - previousEmaVelocity;
+        // During animation we only track; no arming, no triggering
+        if (isAnimating) {
+            return;
+        }
+        // Path 1: mouse-like discrete kick (platform-agnostic via delta/velocity ratio)
+        const absDelta = Math.abs(deltaY);
+        const absVel = Math.abs(velocityY);
+        const stepRatio = absDelta / Math.max(1e-6, absVel);
+        const isMouseLikeKick = absDelta >= MOUSE_DELTA_KICK && stepRatio >= MOUSE_STEP_RATIO_KICK;
+        if (isMouseLikeKick) {
+            const direction = deltaY > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            fire(direction);
+            return;
+        }
+        // Path 2: trackpad/inertia via EMA acceleration and peak gating
+        const isAcceleratingInDirection = velocitySign !== 0 && emaAcceleration * velocitySign > ACCEL_THRESHOLD;
+        if (isAcceleratingInDirection && emaMagnitude > PEAK_THRESHOLD) {
+            const direction = velocitySign > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            fire(direction);
+        }
+    });
+    return {
+        destroy() {
+            wheelGestures.unobserve(target);
+            if (cooldownTimer) {
+                clearTimeout(cooldownTimer);
+            }
+        }
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.0.4",
+  "version": "6.1.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -157,6 +157,7 @@
     "vite-tsconfig-paths": "^5.1.4"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8"
+    "@popperjs/core": "^2.11.8",
+    "wheel-gestures": "^2.2.48"
   }
 }

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

@@ -1,22 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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;
-        }
-    };
-};