@streamscloud/embeddable 15.1.0 → 16.0.0

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

@@ -1,218 +0,0 @@
-<script lang="ts" generics="T extends { id: string }">import { TouchSynchronizer } from '../utils';
-import { createWheelAdapter } from './wheel-gestures-adapter';
-import { onDestroy, onMount, untrack } from 'svelte';
-let { buffer, on, children } = $props();
-let slidesRef;
-let sliderHeight = $state(0);
-let swipeTransition = $state(0);
-let cssAnimationDuration = $derived(buffer.animationDuration * 0.55);
-let resizeObserver;
-let sliderIndex = $state.raw(untrack(() => buffer.currentIndex));
-const actualTransition = $derived(-sliderHeight * sliderIndex);
-const onKeyPress = (e) => {
-    if (e.key === 'ArrowUp' || e.key === 'PageUp') {
-        buffer.loadPrevious();
-    }
-    if (e.key === 'ArrowDown' || e.key === 'PageDown') {
-        buffer.loadNext();
-    }
-};
-$effect(() => {
-    if (buffer.currentIndex >= 0 && sliderIndex >= 0 && Math.abs(sliderIndex - buffer.currentIndex) === 1) {
-        slidesRef.classList.toggle('animate', true);
-    }
-    else if (buffer.currentIndex >= 0 && (Math.abs(sliderIndex - buffer.currentIndex) !== 0 || !active)) {
-        untrack(() => notifyOnItemChanged());
-    }
-});
-let active = null;
-$effect(() => {
-    sliderIndex = buffer.currentIndex;
-});
-const notifyOnItemChanged = () => {
-    if (active && buffer.current?.id !== active.id) {
-        on?.itemDeactivated?.(active.id);
-    }
-    active = buffer.current;
-    if (active) {
-        on?.itemActivated?.(active.id);
-    }
-};
-onMount(() => {
-    let touchStartX = 0;
-    let touchStartY = 0;
-    let touchMoveY = 0;
-    let touchStartTime = 0;
-    let swipeState = 'not-initialized';
-    window.addEventListener(`keydown`, onKeyPress);
-    slidesRef.addEventListener('touchstart', (e) => {
-        TouchSynchronizer.touchStarted(slidesRef);
-        // The movement gets all janky if there's a transition on the elements.
-        slidesRef.classList.toggle('animate', false);
-        touchStartX = e.changedTouches[0].screenX;
-        touchStartY = e.changedTouches[0].screenY;
-        touchStartTime = Date.now();
-        swipeState = 'not-initialized';
-    }, { passive: true });
-    slidesRef.addEventListener('touchmove', (e) => {
-        if (swipeState === 'vertical') {
-            // Already determined this is a vertical swipe
-            e.preventDefault();
-            e.stopPropagation();
-            TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
-        }
-        else if (swipeState === 'horizontal') {
-            // Already determined this is a horizontal swipe
-            return;
-        }
-        const touchCurrentX = e.changedTouches[0].screenX;
-        const touchCurrentY = e.changedTouches[0].screenY;
-        const diffX = Math.abs(touchCurrentX - touchStartX);
-        const diffY = Math.abs(touchCurrentY - touchStartY);
-        // Determine direction on first significant movement
-        if (diffX > 10 || diffY > 10) {
-            if (diffY > diffX) {
-                // Vertical swipe - handle it
-                swipeState = 'vertical';
-                e.preventDefault();
-                e.stopPropagation();
-                TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
-                const newPosition = touchCurrentY;
-                const diff = newPosition - touchStartY;
-                if ((diff > 0 && buffer.canLoadPrevious) || (diff < 0 && buffer.canLoadNext)) {
-                    touchMoveY = diff;
-                    swipeTransition = diff + actualTransition;
-                }
-            }
-            else {
-                // Horizontal swipe - allow child to handle
-                swipeState = 'horizontal';
-                return;
-            }
-        }
-    }, { passive: false });
-    slidesRef.addEventListener('touchend', (e) => {
-        const reset = () => {
-            swipeTransition = 0;
-            touchMoveY = 0;
-        };
-        // Check if this is a vertical swipe
-        if (swipeState !== 'vertical') {
-            // Horizontal swipe - don't handle and don't block
-            reset();
-            return;
-        }
-        // This is a vertical swipe - block propagation
-        e.stopPropagation();
-        TouchSynchronizer.touchEndPropatationBlocked(slidesRef);
-        TouchSynchronizer.touchEnded(slidesRef);
-        slidesRef.classList.toggle('animate', true);
-        const isFastSwipe = Date.now() - touchStartTime < 300;
-        if (!touchMoveY || (!isFastSwipe && Math.abs(touchMoveY) < sliderHeight / 6)) {
-            return reset();
-        }
-        if (touchMoveY > 0) {
-            buffer.loadPrevious();
-        }
-        else {
-            buffer.loadNext();
-        }
-        reset();
-    });
-    slidesRef.addEventListener('transitionend', (e) => {
-        if (e.target !== slidesRef) {
-            return;
-        }
-        slidesRef.classList.toggle('animate', false);
-        notifyOnItemChanged();
-    });
-    sliderHeight = slidesRef.clientHeight;
-    resizeObserver = new ResizeObserver(() => {
-        sliderHeight = slidesRef.clientHeight;
-    });
-    resizeObserver.observe(slidesRef);
-});
-onDestroy(() => {
-    if (resizeObserver) {
-        resizeObserver.disconnect();
-    }
-    window.removeEventListener('keydown', onKeyPress);
-});
-const styles = $derived.by(() => {
-    const values = [
-        `transform: translateY(${swipeTransition || actualTransition}px)`,
-        `--_player-slider--animation: ${cssAnimationDuration}ms ease-out transform`
-    ];
-    return values.join(';');
-});
-const wheelCallbacks = {
-    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} use:createWheelAdapter={{ cbs: wheelCallbacks }} style={styles}>
-    {#each buffer.loaded as item, index (item)}
-      <div class="player-slider__slide">
-        {#if index >= sliderIndex - 1 && index <= sliderIndex + 1}
-          <!-- Only render the active slide and its immediate neighbors for performance -->
-          {@render children({ item, active: index === sliderIndex })}
-        {/if}
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.player-slider {
-  position: relative;
-  overflow: clip;
-  height: 100%;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-}
-.player-slider__slides {
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-}
-.player-slider__slides:global(.animate) {
-  transition: var(--_player-slider--animation);
-}
-.player-slider__slide {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-}</style>

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

@@ -1,34 +0,0 @@
-import type { PlayerSliderBuffer, PlayerSliderCallbacks } from './types';
-import { type Snippet } from 'svelte';
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): {
-        buffer: PlayerSliderBuffer<T>;
-        on?: PlayerSliderCallbacks;
-        children: Snippet<[{
-            item: T;
-            active?: boolean;
-        }]>;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends {
-        id: string;
-    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends {
-        id: string;
-    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Cmp: $$IsomorphicComponent;
-type Cmp<T extends {
-    id: string;
-}> = InstanceType<typeof Cmp<T>>;
-export default Cmp;

package/dist/ui/player/slider/index.d.ts

@@ -1,2 +0,0 @@
-export { default as PlayerSlider } from './cmp.player-slider.svelte';
-export { preventSliderScroll } from './prevent-slider-scroll';

package/dist/ui/player/slider/index.js

@@ -1,2 +0,0 @@
-export { default as PlayerSlider } from './cmp.player-slider.svelte';
-export { preventSliderScroll } from './prevent-slider-scroll';

package/dist/ui/player/slider/prevent-slider-scroll.d.ts

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

package/dist/ui/player/slider/prevent-slider-scroll.js

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

package/dist/ui/player/slider/types.d.ts

@@ -1,16 +0,0 @@
-export type PlayerSliderCallbacks = {
-    itemActivated?: (e: string) => void;
-    itemDeactivated?: (e: string) => void;
-};
-export interface PlayerSliderBuffer<T extends {
-    id: string;
-}> {
-    readonly current: T | null;
-    readonly loaded: T[];
-    readonly currentIndex: number;
-    readonly canLoadNext: boolean;
-    readonly canLoadPrevious: boolean;
-    readonly animationDuration: number;
-    loadNext: () => void;
-    loadPrevious: () => void;
-}

package/dist/ui/player/slider/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,17 +0,0 @@
-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/slider/wheel-gestures-adapter.js

@@ -1,79 +0,0 @@
-// 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);
-            }
-        }
-    };
-};