@streamscloud/embeddable 13.2.0 → 13.3.0

package/dist/media-center/media-center/discover/community-features.svelte

@@ -111,8 +111,9 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
   display: flex;
   flex-wrap: nowrap;
   margin-top: 0.25rem;
-  gap: 8.125rem;
   align-items: center;
+  max-width: 19.6875rem;
+  justify-content: space-between;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {

package/dist/media-center/media-center/discover/discover-header.svelte

@@ -139,6 +139,7 @@ let { context } = $props();
   max-width: 4rem;
 }
 .header-mobile__texts {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;

package/dist/media-center/media-center/discover/discover-view.svelte

@@ -77,6 +77,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   flex: 1;
   scrollbar-gutter: stable both-edges;
   padding-inline: 1.875rem;
+  overflow-x: hidden;
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -168,6 +168,7 @@ const variables = $derived.by(() => {
   overflow-x: auto;
   padding-inline: var(--_post-viewer--attachments-horizontal--padding-inline);
   scrollbar-width: none;
+  overscroll-behavior: none;
 }
 .attachments-horizontal__item {
   position: relative;

package/dist/posts/post-viewer/media/post-media.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Image } from '../../../ui/image';
-import { Slider } from '../../../ui/slider';
+import { SliderHorizontal } from '../../../ui/player/slider-horizontal';
 import { Video } from '../../../ui/video';
 let { id, media, locale, autoplay = 'on-appearance', on } = $props();
 </script>
@@ -26,11 +26,11 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   {#if media.items.length === 1}
     {@render mediaItem(media.items[0])}
   {:else if media.items.length > 1}
-    <Slider items={media.items} initialIndex={media.currentIndex} locale={locale} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
+    <SliderHorizontal items={media.items} initialIndex={media.currentIndex} locale={locale} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
       {#snippet children(item)}
         {@render mediaItem(item)}
       {/snippet}
-    </Slider>
+    </SliderHorizontal>
   {/if}
 </div>
 

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/{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}
@@ -268,7 +291,7 @@ const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.
   height: 100%;
 }
 .slider__slides:global(.animate) {
-  transition: 800ms ease-out transform;
+  transition: var(--_slider-horizontal--animation);
 }
 .slider__slide {
   display: flex;

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

@@ -1,4 +1,4 @@
-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> {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "13.2.0",
+  "version": "13.3.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

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';