@streamscloud/embeddable 13.1.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/data-loading.js

@@ -11,7 +11,7 @@ export class DiscoverDataLoader {
         }
         const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({
             filter: { categoryId: holder.categoryId ?? undefined },
-            limit: 6,
+            limit: 5,
             continuationToken: holder.continuationToken
         });
         holder.streams = [...holder.streams, ...streamsResponse.items];

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-handler.svelte.d.ts

@@ -22,6 +22,7 @@ export declare class DiscoverViewHandler {
     loadMoreShortVideos: () => Promise<void>;
     activate: (data: {
         activeCategoryId: string | null;
+        activeCategoryName: string | null;
         childCategories: {
             id: string;
             name: string;

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

@@ -51,6 +51,10 @@ export class DiscoverViewHandler {
                 }
                 index++;
             }
+            const holdersWithContent = this._shortVideosInCategory.filter((x) => x.shortVideos.length > 0);
+            if (holdersWithContent.length === 1) {
+                await this._dataLoader.loadShortVideos(holdersWithContent[0]);
+            }
         }
         finally {
             this._shortVideosLoadingDeferred.resolve();
@@ -58,7 +62,7 @@ export class DiscoverViewHandler {
         }
     };
     activate = async (data) => {
-        const { activeCategoryId, childCategories } = data;
+        const { activeCategoryId, activeCategoryName, childCategories } = data;
         this._state = 'loading';
         try {
             const promises = [];
@@ -72,13 +76,22 @@ export class DiscoverViewHandler {
             if (streamsInCategory.continuationToken === undefined) {
                 promises.push(this._dataLoader.loadStreams(streamsInCategory));
             }
-            // Init short videos in categories
+            // Init short videos in child categories
             const nonExistingShortVideosInCategory = childCategories.filter((cc) => !this._shortVideosInCategoryCache.some((x) => x.categoryId === cc.id));
             for (const category of nonExistingShortVideosInCategory) {
                 const newShortVideosInCategory = new ShortVideosInCategory({ categoryId: category.id, categoryName: category.name });
                 this._shortVideosInCategoryCache.push(newShortVideosInCategory);
             }
             this._shortVideosInCategory = childCategories.map((c) => this._shortVideosInCategoryCache.find((b) => b.categoryId === c.id));
+            // Init short videos in main category
+            if (activeCategoryId) {
+                let shortVideosInCategory = this._shortVideosInCategoryCache.find((x) => x.categoryId === activeCategoryId);
+                if (!shortVideosInCategory) {
+                    shortVideosInCategory = new ShortVideosInCategory({ categoryId: activeCategoryId, categoryName: activeCategoryName || '' });
+                    this._shortVideosInCategoryCache.push(shortVideosInCategory);
+                }
+                this._shortVideosInCategory.unshift(shortVideosInCategory);
+            }
             const pushShortVideoPromise = (holder) => {
                 if (holder && holder.continuationToken === undefined) {
                     promises.push(this._dataLoader.loadShortVideos(holder));

package/dist/media-center/media-center/discover/discover-view-localization.d.ts

@@ -1,6 +1,7 @@
 import { type Locale } from '../../../core/locale';
 export declare class DiscoverViewLocalization {
     latestStreamsSectionTitle: string;
+    latestShortVideosSectionTitle: string;
     locale: Locale;
     constructor(locale: Locale);
 }

package/dist/media-center/media-center/discover/discover-view-localization.js

@@ -1,9 +1,11 @@
 import {} from '../../../core/locale';
 export class DiscoverViewLocalization {
     latestStreamsSectionTitle;
+    latestShortVideosSectionTitle;
     locale;
     constructor(locale) {
         this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
+        this.latestShortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
         this.locale = locale;
     }
 }
@@ -11,5 +13,9 @@ const loc = {
     streamsSectionTitle: {
         en: 'Latest Streams',
         no: 'Siste Streams'
+    },
+    shortVideosSectionTitle: {
+        en: 'Latest Short Videos',
+        no: 'Siste Korte Videoer'
     }
 };

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

@@ -10,7 +10,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
 </script>
 
 <div class="media-center-discover">
-  <div class="media-center-discover__content">
+  <div class="media-center-discover__content media-center-discover__feed">
     <Header context={context} />
     {#if handler.streamsHolder?.streams.length}
       <div class="media-center-discover__section">
@@ -25,35 +25,38 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
       </div>
     {/if}
     {#if !handler.loading}
-      {#each handler.shortVideosHolders as holder, index (holder)}
-        <InfiniteScrolling loadMore={handler.loadMoreShortVideos}>
-          {#if holder.shortVideos.length}
-            <div class="media-center-discover__section">
-              <div class="media-center-discover__section-header">
-                {holder.categoryName}
+      <InfiniteScrolling loadMore={handler.loadMoreShortVideos}>
+        <div class="media-center-discover__feed">
+          {#each handler.shortVideosHolders as holder, index (holder)}
+            {#if holder.shortVideos.length}
+              <div class="media-center-discover__section">
+                <div class="media-center-discover__section-header">
+                  {holder.categoryId === context.categoriesHandler.selectedCategoryId ? localization.latestShortVideosSectionTitle : holder.categoryName}
+                </div>
+                <div
+                  class="media-center-discover__section-content"
+                  class:media-center-discover__section-content--5={index % 2 !== 0}
+                  class:media-center-discover__section-content--4={index % 2 === 0}
+                  class:media-center-discover__section-content--not-alone={handler.shortVideosHolders.length > 1}>
+                  {#each holder.shortVideos as item (item.id)}
+                    <ShortVideoCard
+                      shortVideo={{
+                        id: item.id,
+                        text: item.text,
+                        cover: getPostCoverImage(item),
+                        displayDate: item.displayDate,
+                        viewsCount: item.viewsCount,
+                        products: item.products
+                      }}
+                      locale={context.locale}
+                      on={{ click: () => on.shortVideoSelected(item) }} />
+                  {/each}
+                </div>
               </div>
-              <div
-                class="media-center-discover__section-content"
-                class:media-center-discover__section-content--5={index % 2 !== 0}
-                class:media-center-discover__section-content--4={index % 2 === 0}>
-                {#each holder.shortVideos as item (item.id)}
-                  <ShortVideoCard
-                    shortVideo={{
-                      id: item.id,
-                      text: item.text,
-                      cover: getPostCoverImage(item),
-                      displayDate: item.displayDate,
-                      viewsCount: item.viewsCount,
-                      products: item.products
-                    }}
-                    locale={context.locale}
-                    on={{ click: () => on.shortVideoSelected(item) }} />
-                {/each}
-              </div>
-            </div>
-          {/if}
-        </InfiniteScrolling>
-      {/each}
+            {/if}
+          {/each}
+        </div>
+      </InfiniteScrolling>
     {/if}
   </div>
 </div>
@@ -74,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;
@@ -110,9 +114,6 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   width: 100%;
   max-width: 73.75rem;
   margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: 3rem;
   padding-bottom: 1.25rem;
   /* Set 'container-type: inline-size;' to reference container*/
   /* Set 'container-type: inline-size;' to reference container*/
@@ -120,22 +121,42 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
 }
 @container (width < 992px) {
   .media-center-discover__content {
-    gap: 2.5rem;
     padding-bottom: 1rem;
   }
 }
 @container (width < 768px) {
   .media-center-discover__content {
-    gap: 2rem;
     padding-bottom: 0.8125rem;
   }
 }
 @container (width < 576px) {
   .media-center-discover__content {
-    gap: 1.5rem;
     padding-bottom: 0.625rem;
   }
 }
+.media-center-discover__feed {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 992px) {
+  .media-center-discover__feed {
+    gap: 2.5rem;
+  }
+}
+@container (width < 768px) {
+  .media-center-discover__feed {
+    gap: 2rem;
+  }
+}
+@container (width < 576px) {
+  .media-center-discover__feed {
+    gap: 1.5rem;
+  }
+}
 .media-center-discover__section {
   display: flex;
   flex-direction: column;
@@ -154,11 +175,15 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  color: var(--sc-mc-color--text-primary);
+  text-shadow: var(--sc-mc-color--text-primary-shadow);
 }
 .media-center-discover__section-content {
   display: grid;
+  --_section-content--more-items--display: block;
+}
+.media-center-discover__section-content--not-alone {
+  --_section-content--more-items--display: none;
 }
 .media-center-discover__section-content--4 {
   gap: 1.25rem;
@@ -168,7 +193,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
-  display: none;
+  display: var(--_section-content--more-items--display);
 }
 @container (width < 992px) {
   .media-center-discover__section-content--4 {
@@ -176,7 +201,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .media-center-discover__section-content--4 :global(> :nth-child(n + 4)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 768px) {
@@ -188,7 +213,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: block;
   }
   .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 576px) {
@@ -204,7 +229,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
   /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
-  display: none;
+  display: var(--_section-content--more-items--display);
 }
 @container (width < 992px) {
   .media-center-discover__section-content--5 {
@@ -212,7 +237,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 768px) {
@@ -221,7 +246,7 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .media-center-discover__section-content--5 :global(> :nth-child(n + 4)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }
 @container (width < 576px) {
@@ -233,6 +258,6 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
     display: block;
   }
   .media-center-discover__section-content--5 :global(> :nth-child(n + 5)) {
-    display: none;
+    display: var(--_section-content--more-items--display);
   }
 }</style>

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -124,6 +124,7 @@ export class MediaCenterContext {
         const childCategories = this.categoriesHandler.allCategories.filter((c) => c.parentId === this.categoriesHandler.selectedCategoryId);
         await this.discoverHandler.activate({
             activeCategoryId: this.categoriesHandler.selectedCategoryId,
+            activeCategoryName: this.categoriesHandler.allCategories.find((c) => c.id === this.categoriesHandler.selectedCategoryId)?.name || null,
             childCategories: childCategories.map((c) => ({ id: c.id, name: c.name }))
         });
     };

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/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -77,6 +77,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-brand: #144ab0;
   --sc-mc-color--text-inverted: #ffffff;
   --sc-mc-color--text-primary: #000000;
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
   --sc-mc-color--text-secondary: #6b7280;
   --sc-mc-color--text-white: #ffffff;
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
@@ -109,6 +110,7 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-brand: #5a8dec;
   --sc-mc-color--text-inverted: #ffffff;
   --sc-mc-color--text-primary: #ffffff;
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
   --sc-mc-color--text-secondary: #d1d5db;
   --sc-mc-color--text-white: #ffffff;
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);

package/dist/ui/shadow-dom/colors.scss

@@ -31,6 +31,7 @@
   --sc-mc-color--text-brand: #{colors.$color-primary-500};
   --sc-mc-color--text-inverted: #{colors.$color-white};
   --sc-mc-color--text-primary: #{colors.$color-black};
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.1), 0 1px 6px rgba(255, 255, 255, 0.05);
   --sc-mc-color--text-secondary: #{colors.$color-neutral-500};
   --sc-mc-color--text-white: #{colors.$color-white};
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
@@ -67,6 +68,7 @@
   --sc-mc-color--text-brand: #{colors.$color-primary-400};
   --sc-mc-color--text-inverted: #{colors.$color-white};
   --sc-mc-color--text-primary: #{colors.$color-white};
+  --sc-mc-color--text-primary-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
   --sc-mc-color--text-secondary: #{colors.$color-neutral-300};
   --sc-mc-color--text-white: #{colors.$color-white};
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "13.1.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';