@streamscloud/kit 0.0.1-1771006168898 → 0.0.1-1771072688121

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -0,0 +1,418 @@
+<script lang="ts" generics="T">import { Utils, isBrowser } from '../../../core/utils';
+import { Icon } from '../../icon';
+import { TouchSynchronizer } from '../utils';
+import { CarouselLocalization } from './carousel-localization';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
+import { onDestroy, onMount, untrack } from 'svelte';
+let { items, mode = 'arrows-with-counts', initialIndex, autoSlideMs = 0, on, dot, children } = $props();
+const localization = new CarouselLocalization();
+const itemIndices = $derived(items.map((_, index) => index));
+const animationDuration = 300;
+let previousItems = $state.raw(undefined);
+let selectedIndex = $state(untrack(() => initialIndex));
+let animationIndex = $state(null);
+let interval;
+let slidesRef;
+let sliderWidth = $state(0);
+let swipeTransition = $state(0);
+let resizeObserver;
+onMount(() => {
+    notifyIndexChanged();
+    setTimeout(() => {
+        slidesRef?.classList.toggle('animate', false);
+    });
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchMoveX = 0;
+    let touchStartTime = 0;
+    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();
+        swipeState = 'not-initialized';
+    }, { passive: true });
+    slidesRef.addEventListener('touchmove', (e) => {
+        if (swipeState === 'horizontal') {
+            e.preventDefault();
+            e.stopPropagation();
+            TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
+        }
+        else if (swipeState === 'vertical') {
+            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 (diffX > diffY) {
+                // Horizontal swipe - block vertical scroll
+                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
+                swipeState = 'vertical';
+            }
+        }
+    }, { passive: false });
+    slidesRef.addEventListener('touchend', (e) => {
+        const reset = () => {
+            swipeTransition = 0;
+            touchMoveX = 0;
+        };
+        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 && Math.abs(touchMoveX) < sliderWidth / 6) {
+            reset();
+            return;
+        }
+        if (touchMoveX < 0) {
+            loadNext();
+        }
+        else {
+            loadPrevious();
+        }
+        reset();
+    }, { passive: false });
+    slidesRef.addEventListener('transitionend', (e) => {
+        e.stopPropagation();
+        if (animationIndex !== null && animationIndex > items.length - 1) {
+            slidesRef.classList.toggle('animate', false);
+            animationIndex = null;
+        }
+        if (animationIndex !== null && animationIndex === 0) {
+            slidesRef.classList.toggle('animate', false);
+            animationIndex = null;
+        }
+        setTimeout(() => {
+            slidesRef?.classList.toggle('animate', true);
+        });
+    });
+    if (autoSlideMs) {
+        interval = window.setInterval(() => {
+            if (items?.length <= 1) {
+                return;
+            }
+            loadNext();
+        }, autoSlideMs);
+    }
+    sliderWidth = slidesRef.getBoundingClientRect().width;
+    let resizeTimeout = 0;
+    resizeObserver = new ResizeObserver(() => {
+        if (isBrowser() && resizeTimeout) {
+            window.clearTimeout(resizeTimeout);
+        }
+        slidesRef.classList.toggle('animate', false);
+        sliderWidth = slidesRef.getBoundingClientRect().width;
+        resizeTimeout = window.setTimeout(() => {
+            slidesRef?.classList.toggle('animate', true);
+        });
+    });
+    resizeObserver.observe(slidesRef);
+    if (isBrowser()) {
+        window.addEventListener(`keydown`, onKeyPress);
+    }
+});
+onDestroy(() => {
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    }
+    if (isBrowser()) {
+        window.removeEventListener('keydown', onKeyPress);
+        if (interval) {
+            window.clearInterval(interval);
+        }
+    }
+});
+const onKeyPress = Utils.throttle((e) => {
+    if (e.key === 'ArrowLeft') {
+        loadPrevious();
+    }
+    if (e.key === 'ArrowRight') {
+        loadNext();
+    }
+}, animationDuration);
+const notifyIndexChanged = () => {
+    on?.indexChanged?.(selectedIndex);
+};
+notifyIndexChanged();
+const setIndex = (index) => {
+    if (index < 0) {
+        animationIndex = 0;
+        selectedIndex = items.length - 1;
+    }
+    else if (index > items.length - 1) {
+        animationIndex = index + 1;
+        selectedIndex = 0;
+    }
+    else {
+        animationIndex = null;
+        selectedIndex = index;
+    }
+    setTimeout(() => {
+        notifyIndexChanged();
+    }, 600);
+};
+const loadPrevious = Utils.throttle(() => {
+    setIndex(--selectedIndex);
+}, animationDuration);
+const loadNext = Utils.throttle(() => {
+    setIndex(++selectedIndex);
+}, animationDuration);
+$effect(() => {
+    if (previousItems && items !== previousItems) {
+        setIndex(0);
+    }
+    previousItems = items;
+});
+const slidesTranslateX = $derived(swipeTransition || (items.length > 1 ? -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex) : 0));
+</script>
+
+<div
+  class="carousel"
+  class:carousel--arrows-and-dots={mode === 'arrows-and-dots'}
+  class:carousel--arrows-only={mode === 'arrows-only'}
+  class:carousel--dots-only={mode === 'dots-only'}
+  class:carousel--dots-only-below={mode === 'dots-only-below'}
+  class:carousel--arrows-with-counts={mode === 'arrows-with-counts'}
+  style:--carousel--animation="{animationDuration}ms ease-out transform">
+  <div class="carousel__slides" bind:this={slidesRef} style:transform="translateX({slidesTranslateX}px)">
+    {#if items.length > 1}
+      <div class="carousel__slide">
+        {#if children}
+          {@render children(items[items.length - 1])}
+        {/if}
+      </div>
+    {/if}
+    {#each items as item (item)}
+      <div class="carousel__slide">
+        {#if children}
+          {@render children(item)}
+        {/if}
+      </div>
+    {/each}
+    {#if items.length > 1}
+      <div class="carousel__slide" data-after>
+        {#if children}
+          {@render children(items[0])}
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  {#if items.length > 1}
+    {#if mode === 'arrows-with-counts'}
+      <div class="carousel__arrows-with-counts">
+        <button type="button" class="carousel__counts-navigation-button" onclick={loadPrevious} aria-label="none">
+          <Icon src={IconChevronLeft} />
+        </button>
+        <div class="carousel__counts">{localization.nOfM(selectedIndex + 1, items.length)}</div>
+        <button type="button" class="carousel__counts-navigation-button" onclick={loadNext} aria-label="none">
+          <Icon src={IconChevronRight} />
+        </button>
+      </div>
+    {:else}
+      <button type="button" class="carousel__navigation-button carousel__navigation-button--prev" onclick={loadPrevious} aria-label="none">
+        <Icon src={IconChevronLeft} />
+      </button>
+      <button type="button" class="carousel__navigation-button carousel__navigation-button--next" onclick={loadNext} aria-label="none">
+        <Icon src={IconChevronRight} />
+      </button>
+      <div class="carousel__dots">
+        {#each itemIndices as index (index)}
+          <button type="button" class="carousel__dot" onclick={() => setIndex(index)}>
+            {#if dot}
+              {@render dot({ active: index === selectedIndex })}
+            {:else}
+              <span class="carousel__dot-indicator" class:carousel__dot-indicator--active={index === selectedIndex}></span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>@charset "UTF-8";
+.carousel {
+  /* Public API */
+  --_carousel--button-color: var(--sc-kit--carousel--button-color, #9ca3af);
+  --_carousel--dot-color: var(--sc-kit--carousel--dot-color, #ffffff);
+  --_carousel--dot-size: var(--sc-kit--carousel--dot-size, 0.5rem);
+  --_carousel--text-color: var(--sc-kit--carousel--text-color, #ffffff);
+  --_carousel--animation: var(--carousel--animation);
+  /* Mode control — overridden by modifiers */
+  --_carousel--nav-display: block;
+  --_carousel--nav-opacity: 0;
+  --_carousel--nav-visibility: hidden;
+  --_carousel--dots-display: flex;
+  --_carousel--dots-position: absolute;
+  --_carousel--dots-margin-top: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.carousel:hover {
+  --_carousel--nav-opacity: 1;
+  --_carousel--nav-visibility: visible;
+}
+.carousel--arrows-only {
+  --_carousel--dots-display: none;
+}
+.carousel--dots-only {
+  --_carousel--nav-display: none;
+}
+.carousel--dots-only-below {
+  --_carousel--nav-display: none;
+  --_carousel--dots-position: static;
+  --_carousel--dots-margin-top: 1rem;
+}
+.carousel__slides {
+  display: flex;
+  height: 100%;
+}
+.carousel__slides:global(.animate) {
+  transition: var(--_carousel--animation);
+}
+.carousel__slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.carousel__dots {
+  margin: 0;
+  display: var(--_carousel--dots-display);
+  justify-content: center;
+  z-index: 1;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  position: var(--_carousel--dots-position);
+  margin-top: var(--_carousel--dots-margin-top);
+  left: 0;
+  right: 0;
+  bottom: 0.625rem;
+}
+.carousel__dot {
+  cursor: pointer;
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+.carousel__dot-indicator {
+  display: block;
+  width: var(--_carousel--dot-size);
+  height: var(--_carousel--dot-size);
+  border-radius: 50%;
+  border: 1px solid var(--_carousel--dot-color);
+  background: transparent;
+  transition: background-color 0.2s;
+}
+.carousel__dot-indicator--active {
+  background: var(--_carousel--dot-color);
+}
+.carousel__navigation-button {
+  display: var(--_carousel--nav-display);
+  font-size: 0.75rem;
+  width: 1.875rem;
+  height: 1.875rem;
+  background-color: var(--_carousel--button-color);
+  border-radius: 50%;
+  text-align: center;
+  color: var(--_carousel--text-color);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: var(--_carousel--nav-opacity);
+  visibility: var(--_carousel--nav-visibility);
+  transition: opacity 0.2s, visibility 0.2s;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .carousel__navigation-button {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+.carousel__navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.carousel__navigation-button--prev {
+  left: 0.9375rem;
+}
+.carousel__navigation-button--next {
+  right: 0.9375rem;
+}
+.carousel__arrows-with-counts {
+  position: absolute;
+  bottom: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.625rem;
+  z-index: 1;
+}
+.carousel__counts {
+  font-size: 0.9375rem;
+  font-weight: 300;
+  width: 5.625rem;
+  text-align: center;
+  color: var(--_carousel--text-color);
+  text-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);
+}
+.carousel__counts-navigation-button {
+  font-size: 0.75rem;
+  width: 1.625rem;
+  height: 1.625rem;
+  background-color: var(--_carousel--button-color);
+  border-radius: 50%;
+  text-align: center;
+  color: var(--_carousel--text-color);
+  opacity: var(--_carousel--nav-opacity);
+  visibility: var(--_carousel--nav-visibility);
+  transition: opacity 0.2s, visibility 0.2s;
+}
+.carousel__counts-navigation-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.carousel__counts-navigation-button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .carousel__counts-navigation-button {
+    opacity: 1;
+    visibility: visible;
+  }
+}</style>

package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { CarouselMode } from './types';
+import { type Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        initialIndex: number;
+        mode?: CarouselMode;
+        autoSlideMs?: number;
+        on?: {
+            indexChanged: (index: number) => void;
+        };
+        children: Snippet<[T]>;
+        dot?: Snippet<[{
+            active: boolean;
+        }]>;
+    };
+    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(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(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> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Carousel } from './cmp.carousel.svelte';
+export type { CarouselMode } from './types';

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

@@ -0,0 +1 @@
+export { default as Carousel } from './cmp.carousel.svelte';

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

@@ -0,0 +1 @@
+export type CarouselMode = 'arrows-and-dots' | 'arrows-only' | 'dots-only' | 'dots-only-below' | 'arrows-with-counts';

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

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

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

@@ -0,0 +1,206 @@
+<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 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="feed-slider">
+  <div
+    class="feed-slider__slides"
+    bind:this={slidesRef}
+    use:createWheelAdapter={{ cbs: wheelCallbacks }}
+    style:transform="translateY({swipeTransition || actualTransition}px)"
+    style:--feed-slider--animation="{cssAnimationDuration}ms ease-out transform">
+    {#each buffer.loaded as item, index (item)}
+      <div class="feed-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>.feed-slider {
+  position: relative;
+  overflow: clip;
+  height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.feed-slider__slides {
+  --_feed-slider--animation: var(--feed-slider--animation);
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+}
+.feed-slider__slides:global(.animate) {
+  transition: var(--_feed-slider--animation);
+}
+.feed-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>