@streamscloud/embeddable 13.2.0 → 14.0.0-rc.0

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

@@ -1,4 +1,5 @@
-<script lang="ts">import { createWheelAdapter } from './wheel-gestures-adapter';
+<script lang="ts">import { TouchSynchronizer } from '../utils';
+import { createWheelAdapter } from './wheel-gestures-adapter';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
@@ -43,21 +44,27 @@ onMount(() => {
     let touchStartY = 0;
     let touchMoveY = 0;
     let touchStartTime = 0;
-    let isVerticalSwipe = false;
+    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();
-        isVerticalSwipe = false;
+        swipeState = 'not-initialized';
     }, { passive: true });
     slidesRef.addEventListener('touchmove', (e) => {
-        if (isVerticalSwipe) {
+        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;
@@ -67,9 +74,10 @@ onMount(() => {
         if (diffX > 10 || diffY > 10) {
             if (diffY > diffX) {
                 // Vertical swipe - handle it
-                isVerticalSwipe = true;
+                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)) {
@@ -79,28 +87,27 @@ onMount(() => {
             }
             else {
                 // Horizontal swipe - allow child to handle
-                isVerticalSwipe = false;
+                swipeState = 'horizontal';
                 return;
             }
         }
     }, { passive: false });
     slidesRef.addEventListener('touchend', (e) => {
-        const touchEndX = e.changedTouches[0].screenX;
-        const touchEndY = e.changedTouches[0].screenY;
-        const diffX = Math.abs(touchEndX - touchStartX);
-        const diffY = Math.abs(touchEndY - touchStartY);
+        const reset = () => {
+            swipeTransition = 0;
+            touchMoveY = 0;
+        };
         // Check if this is a vertical swipe
-        if (diffX > diffY) {
+        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 reset = () => {
-            swipeTransition = 0;
-            touchMoveY = 0;
-        };
         const isFastSwipe = Date.now() - touchStartTime < 300;
         if (!touchMoveY || (!isFastSwipe && Math.abs(touchMoveY) < sliderHeight / 6)) {
             return reset();

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

@@ -1,9 +1,9 @@
 import type { PlayerSliderBuffer, PlayerSliderCallbacks } from './types';
 import { type Snippet } from 'svelte';
-declare class __sveltets_Render<T extends {
+declare function $$render<T extends {
     id: string;
-}> {
-    props(): {
+}>(): {
+    props: {
         buffer: PlayerSliderBuffer<T>;
         on?: PlayerSliderCallbacks;
         children: Snippet<[{
@@ -11,8 +11,17 @@ declare class __sveltets_Render<T extends {
             active?: boolean;
         }]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/ui/{slider → player/slider-horizontal}/cmp.slider.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import { runningInBrowser } from '../../core/browser';
-import { Utils } from '../../core/utils';
-import { HtmlHelper } from '../../core/utils/html-helper';
-import { Icon } from '../icon';
+<script lang="ts">import { runningInBrowser } from '../../../core/browser';
+import { Utils } from '../../../core/utils';
+import { HtmlHelper } from '../../../core/utils/html-helper';
+import { Icon } from '../../icon';
+import { TouchSynchronizer } from '../utils';
 import { SliderLocalization } from './slider-localization';
 import { SliderMode } from './types';
 import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
@@ -13,13 +14,14 @@ let { items, sliderMode = SliderMode.ArrowsWithCounts, dotsConfig = {
 }, locale, initialIndex, autoSlideMs = 0, on, children } = $props();
 const localization = $derived.by(() => new SliderLocalization(locale));
 const itemIndices = $derived(items.map((_, index) => index));
-const animationDuration = 850;
+const animationDuration = 300;
 let previousItems = $state.raw(undefined);
 let selectedIndex = $state(initialIndex);
 let animationIndex = $state(null);
 let interval;
 let slidesRef;
 let sliderWidth = $state(0);
+let swipeTransition = $state(0);
 let resizeObserver;
 onMount(() => {
     notifyIndexChanged();
@@ -28,19 +30,26 @@ onMount(() => {
     });
     let touchStartX = 0;
     let touchStartY = 0;
+    let touchMoveX = 0;
     let touchStartTime = 0;
-    let isHorizontalSwipe = false;
+    let swipeState = 'not-initialized';
     slidesRef.addEventListener('touchstart', (e) => {
+        TouchSynchronizer.touchStarted(slidesRef);
+        slidesRef.classList.toggle('animate', false);
         touchStartX = e.changedTouches[0].screenX;
         touchStartY = e.changedTouches[0].screenY;
         touchStartTime = Date.now();
-        isHorizontalSwipe = false;
+        swipeState = 'not-initialized';
     }, { passive: true });
     slidesRef.addEventListener('touchmove', (e) => {
-        if (isHorizontalSwipe) {
+        if (swipeState === 'horizontal') {
             // Already determined this is a horizontal swipe
             e.preventDefault();
             e.stopPropagation();
+            TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
+        }
+        else if (swipeState === 'vertical') {
+            // Already determined this is a vertical swipe
             return;
         }
         const touchCurrentX = e.changedTouches[0].screenX;
@@ -51,39 +60,49 @@ onMount(() => {
         if (diffX > 10 || diffY > 10) {
             if (diffX > diffY) {
                 // Horizontal swipe - block vertical scroll
-                isHorizontalSwipe = true;
+                swipeState = 'horizontal';
                 e.preventDefault();
                 e.stopPropagation();
+                TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
+                touchMoveX = touchCurrentX - touchStartX;
+                const basePosition = -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex);
+                swipeTransition = basePosition + touchMoveX;
             }
             else {
                 // Vertical swipe - allow parent to handle
-                isHorizontalSwipe = false;
+                swipeState = 'vertical';
             }
         }
-    });
+    }, { passive: false });
     slidesRef.addEventListener('touchend', (e) => {
-        const touchEndX = e.changedTouches[0].screenX;
-        const touchEndY = e.changedTouches[0].screenY;
-        const diffX = Math.abs(touchEndX - touchStartX);
-        const diffY = Math.abs(touchEndY - touchStartY);
+        const reset = () => {
+            swipeTransition = 0;
+            touchMoveX = 0;
+        };
         // Check if this is a horizontal swipe
-        if (diffY > diffX) {
+        if (swipeState !== 'horizontal') {
+            reset();
             return;
         }
         // This is a horizontal swipe - block propagation
         e.stopPropagation();
         e.preventDefault();
+        slidesRef.classList.toggle('animate', true);
+        TouchSynchronizer.touchEndPropatationBlocked(slidesRef);
+        TouchSynchronizer.touchEnded(slidesRef);
         const isFastSwipe = Date.now() - touchStartTime < 300;
-        if (!isFastSwipe && diffX < sliderWidth / 6) {
+        if (!isFastSwipe && Math.abs(touchMoveX) < sliderWidth / 6) {
+            reset();
             return;
         }
-        if (touchEndX < touchStartX) {
+        if (touchMoveX < 0) {
             loadNext();
         }
-        if (touchEndX > touchStartX) {
+        else {
             loadPrevious();
         }
-    });
+        reset();
+    }, { passive: false });
     slidesRef.addEventListener('transitionend', (e) => {
         e.stopPropagation();
         if (animationIndex !== null && animationIndex > items.length - 1) {
@@ -166,16 +185,23 @@ const setIndex = (index) => {
 };
 const loadPrevious = Utils.throttle(() => {
     setIndex(--selectedIndex);
-}, 800);
+}, animationDuration);
 const loadNext = Utils.throttle(() => {
     setIndex(++selectedIndex);
-}, 800);
+}, animationDuration);
 $effect(() => {
     if (previousItems && items !== previousItems) {
         setIndex(0);
     }
     previousItems = items;
 });
+const styles = $derived.by(() => {
+    const values = [
+        `transform: translateX(${swipeTransition || (items.length > 1 ? -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex) : 0)}px)`,
+        `--_slider-horizontal--animation: ${animationDuration}ms ease-out transform`
+    ];
+    return values.join(';');
+});
 const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.ArrowsOnly, SliderMode.DotsOnly, SliderMode.DotsOnlyBelow].includes(sliderMode));
 </script>
 
@@ -186,12 +212,9 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   class:slider--dots-only={sliderMode === SliderMode.DotsOnly}
   class:slider--dots-only-below={sliderMode === SliderMode.DotsOnlyBelow}
   class:slider--arrows-with-counts={sliderMode === SliderMode.ArrowsWithCounts}>
-  <div
-    class="slider__slides"
-    bind:this={slidesRef}
-    style={`transform: translateX(${items.length > 1 ? -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex) : 0}px)`}>
+  <div class="slider__slides" bind:this={slidesRef} style={styles}>
     {#if items.length > 1}
-      <div class="slider__slide" data-before>
+      <div class="slider__slide">
         {#if children}
           {@render children(items[items.length - 1])}
         {/if}
@@ -261,14 +284,13 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   width: 100%;
   height: 100%;
   overflow: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .slider__slides {
   display: flex;
   height: 100%;
 }
 .slider__slides:global(.animate) {
-  transition: 800ms ease-out transform;
+  transition: var(--_slider-horizontal--animation);
 }
 .slider__slide {
   display: flex;
@@ -354,12 +376,14 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   text-align: center;
   color: var(--sc-mc-color--text-white);
   visibility: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
 .slider__counts-navigation-button:disabled {
   opacity: 0.5;
   cursor: default;
 }
+.slider__counts-navigation-button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .slider__counts-navigation-button {
     visibility: visible;
@@ -388,6 +412,9 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   position: static;
   margin-top: 1rem;
 }
+.slider {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
 @container (width < 576px) {
   .slider__navigation-button {
     visibility: visible;

package/dist/ui/{slider → player/slider-horizontal}/cmp.slider.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Locale } from '../../core/locale';
+import type { Locale } from '../../../core/locale';
 import { type SliderDotsConfig, SliderMode } from './types';
 import { type Snippet } from 'svelte';
-declare class __sveltets_Render<T> {
-    props(): {
+declare function $$render<T>(): {
+    props: {
         items: T[];
         initialIndex: number;
         sliderMode?: SliderMode;
@@ -11,11 +11,18 @@ declare class __sveltets_Render<T> {
         locale: Locale;
         on?: {
             indexChanged: (index: number) => void;
-        } | undefined;
+        };
         children: Snippet<[T]>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

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

@@ -0,0 +1,2 @@
+export { default as SliderHorizontal } from './cmp.slider.svelte';
+export { SliderMode, type SliderDotsConfig } from './types';

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

@@ -0,0 +1,2 @@
+export { default as SliderHorizontal } from './cmp.slider.svelte';
+export { SliderMode } from './types';

package/dist/ui/{slider → player/slider-horizontal}/slider-localization.d.ts

@@ -1,4 +1,4 @@
-import { type Locale } from '../../core/locale';
+import { type Locale } from '../../../core/locale';
 export declare class SliderLocalization {
     nOfM: (n: number, m: number) => string;
     constructor(locale: Locale);

package/dist/ui/{slider → player/slider-horizontal}/slider-localization.js

@@ -1,4 +1,4 @@
-import {} from '../../core/locale';
+import {} from '../../../core/locale';
 export class SliderLocalization {
     nOfM;
     constructor(locale) {

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

@@ -0,0 +1 @@
+export { TouchSynchronizer } from './touch-synchronizer';

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

@@ -0,0 +1 @@
+export { TouchSynchronizer } from './touch-synchronizer';

package/dist/ui/player/utils/touch-synchronizer.d.ts

@@ -0,0 +1,7 @@
+export declare class TouchSynchronizer {
+    private static listeners;
+    static touchStarted: (ref: HTMLElement) => void;
+    static touchMovePropagationBlocked: (ref: HTMLElement) => void;
+    static touchEndPropatationBlocked: (ref: HTMLElement) => void;
+    static touchEnded: (ref: HTMLElement) => void;
+}

package/dist/ui/player/utils/touch-synchronizer.js

@@ -0,0 +1,21 @@
+export class TouchSynchronizer {
+    static listeners = [];
+    static touchStarted = (ref) => {
+        TouchSynchronizer.listeners.push(ref);
+    };
+    static touchMovePropagationBlocked = (ref) => {
+        const otherListeners = TouchSynchronizer.listeners.filter((r) => r !== ref);
+        otherListeners.forEach((r) => {
+            r.dispatchEvent(new TouchEvent('touchend', { cancelable: false }));
+        });
+    };
+    static touchEndPropatationBlocked = (ref) => {
+        const otherListeners = TouchSynchronizer.listeners.filter((r) => r !== ref);
+        otherListeners.forEach((r) => {
+            r.dispatchEvent(new TouchEvent('touchend', { cancelable: false }));
+        });
+    };
+    static touchEnded = (ref) => {
+        TouchSynchronizer.listeners = TouchSynchronizer.listeners.filter((r) => r !== ref);
+    };
+}

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -51,7 +51,7 @@ const styles = $derived.by(() => {
   }
 }
 :host,
-:global([data-theme="default"]) {
+:global([data-theme='default']) {
   /* Backgrounds */
   --sc-mc-color--bg-button: #ffffff;
   --sc-mc-color--bg-card: #ffffff;
@@ -84,7 +84,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-inactive: #e5e7eb;
 }
 
-:global([data-theme="dark"]) {
+:global([data-theme='dark']) {
   /* Backgrounds */
   --sc-mc-color--bg-button: #111827;
   --sc-mc-color--bg-card: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "13.2.0",
+  "version": "14.0.0-rc.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -131,7 +131,7 @@
   "peerDependencies": {
     "@fluentui/svg-icons": "^1.1.301",
     "@popperjs/core": "^2.11.8",
-    "@streamscloud/streams-analytics-collector": "^2.0.9",
+    "@streamscloud/streams-analytics-collector": "^3.0.0",
     "@urql/core": "^5.1.1",
     "dequal": "^2.0.3",
     "dompurify": "^3.2.6",

package/dist/core/analytics.profile-id.d.ts

@@ -1,5 +0,0 @@
-/**
- * Retrieves the profile ID from localStorage or generates a new one if it doesn't exist
- * @returns The profile ID to use for analytics tracking
- */
-export declare const getOrCreateProfileId: () => string;

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

@@ -1,2 +0,0 @@
-export { default as Slider } from './cmp.slider.svelte';
-export { SliderMode, type SliderDotsConfig } from './types';

package/dist/ui/slider/index.js

@@ -1,2 +0,0 @@
-export { default as Slider } from './cmp.slider.svelte';
-export { SliderMode } from './types';