@streamscloud/embeddable 1.1.2

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

@@ -0,0 +1,161 @@
+<script lang="ts">import { Utils } from '../../core/utils';
+import { isScrollingPrevented } from './prevent-slider-scroll';
+import { onDestroy, onMount } from 'svelte';
+let { buffer, children } = $props();
+let slidesRef;
+let sliderHeight = $state(0);
+let swipeTransition = $state(0);
+let cssAnimationDuration = $state(buffer.animationDuration * 0.75);
+let resizeObserver;
+let activeIndex = $state.raw(buffer.currentIndex);
+const actualTransition = $derived(-sliderHeight * activeIndex);
+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 && activeIndex >= 0 && Math.abs(activeIndex - buffer.currentIndex) === 1) {
+        slidesRef.classList.toggle('animate', true);
+    }
+    activeIndex = buffer.currentIndex;
+});
+onMount(() => {
+    let touchStartY = 0;
+    let touchMoveY = 0;
+    let touchStartTime = 0;
+    window.addEventListener(`keydown`, onKeyPress);
+    slidesRef.addEventListener('touchstart', (e) => {
+        // The movement gets all janky if there's a transition on the elements.
+        slidesRef.classList.toggle('animate', false);
+        touchStartY = e.changedTouches[0].screenY;
+        touchStartTime = Date.now();
+    });
+    slidesRef.addEventListener('touchmove', (e) => {
+        const newPosition = e.changedTouches[0].screenY;
+        const diff = newPosition - touchStartY;
+        if ((diff > 0 && buffer.canLoadPrevious) || (diff < 0 && buffer.canLoadNext)) {
+            touchMoveY = diff;
+            swipeTransition = diff + actualTransition;
+        }
+    });
+    slidesRef.addEventListener('touchend', () => {
+        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();
+        }
+        if (touchMoveY > 0) {
+            buffer.loadPrevious();
+        }
+        else {
+            buffer.loadNext();
+        }
+        reset();
+    });
+    slidesRef.addEventListener('wheel', Utils.throttle((e) => {
+        const checkCanHandleWheel = (node) => {
+            while (node && node !== slidesRef) {
+                if (isScrollingPrevented(node)) {
+                    return false;
+                }
+                node = node.parentElement;
+            }
+            return true;
+        };
+        if (!checkCanHandleWheel(e.target)) {
+            return;
+        }
+        if (e.deltaY > 0 && buffer.canLoadNext) {
+            buffer.loadNext();
+        }
+        if (e.deltaY < 0 && buffer.canLoadPrevious) {
+            buffer.loadPrevious();
+        }
+    }, buffer.animationDuration + 250));
+    slidesRef.addEventListener('transitionend', (e) => {
+        if (e.target !== slidesRef) {
+            return;
+        }
+        slidesRef.classList.toggle('animate', false);
+    });
+    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(';');
+});
+</script>
+
+<div class="player-slider">
+  <div class="player-slider__slides" bind:this={slidesRef} style={styles}>
+    {#each buffer.loaded as item, index (item)}
+      <div class="player-slider__slide">
+        {@render children({ item, active: index === activeIndex })}
+      </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/cmp.player-slider.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { IPlayerBuffer } from './types';
+import { type Snippet } from 'svelte';
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): {
+        buffer: IPlayerBuffer<T>;
+        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/index.d.ts

@@ -0,0 +1,4 @@
+export type { IPlayerBuffer } from './types';
+export { PlayerBuffer, type PlayerItemsProvider } from './player-buffer.svelte';
+export { default as PlayerSlider } from './cmp.player-slider.svelte';
+export { preventSliderScroll } from './prevent-slider-scroll';

package/dist/ui/player/index.js

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

package/dist/ui/player/player-buffer.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { IPlayerBuffer } from './types';
+export declare class PlayerBuffer<T extends {
+    id: string;
+}> implements IPlayerBuffer<T> {
+    readonly loaded: T[];
+    readonly currentIndex: number;
+    readonly current: T | null;
+    readonly canLoadNext: boolean;
+    readonly canLoadPrevious: boolean;
+    readonly navigationDisabled: boolean;
+    readonly animationDuration = 1200;
+    private _currentIndex;
+    private _loaded;
+    private loadMoreFn;
+    private isLoading;
+    constructor(provider: PlayerItemsProvider<T>);
+    loadNext: () => Promise<void>;
+    loadPrevious: () => Promise<void>;
+    reset: () => void;
+    private warmUpBuffer;
+}
+export type PlayerItemsProvider<T> = {
+    initialData: {
+        prefetchedItems: T[];
+        startIndex: number;
+    };
+    loadMore(): Promise<T[]>;
+};

package/dist/ui/player/player-buffer.svelte.js

@@ -0,0 +1,64 @@
+import { Utils } from '../../core/utils';
+export class PlayerBuffer {
+    loaded = $derived.by(() => this._loaded);
+    currentIndex = $derived.by(() => this._currentIndex);
+    current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
+    canLoadNext = $derived(this.currentIndex < this.loaded.length - 1);
+    canLoadPrevious = $derived(this.currentIndex > 0);
+    navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
+    animationDuration = 1200;
+    _currentIndex = $state(-1);
+    _loaded = $state.raw([]);
+    loadMoreFn;
+    isLoading = false;
+    constructor(provider) {
+        this.loadMoreFn = provider.loadMore;
+        this._loaded = provider.initialData.prefetchedItems;
+        this._currentIndex = this._loaded.length
+            ? provider.initialData.startIndex >= this._loaded.length
+                ? this._loaded.length - 1
+                : provider.initialData.startIndex
+            : -1;
+        this.warmUpBuffer();
+        this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
+        this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
+    }
+    loadNext = async () => {
+        if (!this.canLoadNext) {
+            return;
+        }
+        ++this._currentIndex;
+        this.warmUpBuffer();
+    };
+    loadPrevious = async () => {
+        if (!this.canLoadPrevious) {
+            return;
+        }
+        --this._currentIndex;
+    };
+    reset = () => {
+        this._loaded = [];
+        this._currentIndex = -1;
+        this.isLoading = false;
+        this.warmUpBuffer();
+    };
+    warmUpBuffer = async () => {
+        const bufferSize = 5;
+        if (this._loaded.length >= this.currentIndex + bufferSize || this.isLoading) {
+            return;
+        }
+        this.isLoading = true;
+        try {
+            const result = await this.loadMoreFn();
+            this._loaded = [...this._loaded, ...result];
+            if (this.currentIndex < 0) {
+                if (this._loaded.length > 0) {
+                    this._currentIndex = 0;
+                }
+            }
+        }
+        finally {
+            this.isLoading = false;
+        }
+    };
+}

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

@@ -0,0 +1,5 @@
+/** @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/prevent-slider-scroll.js

@@ -0,0 +1,11 @@
+/** @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/types.d.ts

@@ -0,0 +1,14 @@
+export interface IPlayerBuffer<T extends {
+    id: string;
+}> {
+    readonly current: T | null;
+    readonly currentIndex: number;
+    readonly loaded: T[];
+    readonly canLoadNext: boolean;
+    readonly canLoadPrevious: boolean;
+    readonly navigationDisabled: boolean;
+    readonly animationDuration: number;
+    loadNext: () => void;
+    loadPrevious: () => void;
+    reset: () => void;
+}

package/dist/ui/player/types.js

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

package/dist/ui/progress/cmp.progress.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">let { value } = $props();
+</script>
+
+<div class="progress">
+  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style="width: {`${100 * (value <= 1 ? value : 1)}%`}">
+    &nbsp;
+  </span>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.progress {
+  --_progress--height: var(--progress--height, 0.25em);
+  --_progress--back-color: var(--progress--back-color, #b0b0b0);
+  --_progress--front-color: var(--progress--front-color, #ffffff);
+  width: 100%;
+  background: var(--_progress--back-color);
+  height: var(--_progress--height);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
+}
+.progress__value {
+  background: var(--_progress--front-color);
+  display: inline-block;
+  height: 100%;
+}
+.progress__value--animated {
+  transition: width 600ms;
+}</style>

package/dist/ui/progress/cmp.progress.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    value: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/progress/index.js

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

package/dist/ui/proportional-container/cmp.proportional-container.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">let { ratio, children } = $props();
+export {};
+</script>
+
+<div class="proportional-container" style={ratio ? `--proportional-container--ratio: ${ratio};` : undefined}>
+  <div class="proportional-container__placer">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.proportional-container {
+  --_proportional-container--ratio: var(--proportional-container--ratio, 1);
+  --_proportional-container--height: var(--proportional-container--height, auto);
+  --_proportional-container--width: var(--proportional-container--width, 100%);
+  width: var(--_proportional-container--width);
+  max-width: 100%;
+  height: var(--_proportional-container--height);
+  max-height: 100%;
+  aspect-ratio: var(--_proportional-container--ratio);
+  position: relative;
+}
+.proportional-container__placer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}</style>

package/dist/ui/proportional-container/cmp.proportional-container.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    ratio?: number | undefined;
+    children?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/proportional-container/index.d.ts

@@ -0,0 +1 @@
+export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/dist/ui/proportional-container/index.js

@@ -0,0 +1 @@
+export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">let { value, on } = $props();
+let progressRef;
+let valueRef;
+const handleSeek = (e) => {
+    e.stopPropagation();
+    const { left, width } = progressRef.getBoundingClientRect();
+    const x = e.clientX - left;
+    const percent = x / width;
+    value = percent;
+    valueRef.style.transition = 'none';
+    valueRef.style.width = `${100 * percent}%`;
+    setTimeout(() => {
+        valueRef.style.transition = '';
+    }, 0);
+    on === null || on === void 0 ? void 0 : on.seek(percent);
+};
+</script>
+
+<div class="seek-bar" onclick={handleSeek} onkeydown={() => ({})} role="none">
+  <div class="seek-bar__container" bind:this={progressRef}>
+    <span
+      class="seek-bar__value"
+      class:seek-bar__value--animate={value > 0.001 && value < 0.96}
+      style="width: {`${100 * (value <= 1 ? value : 1)}%`}"
+      bind:this={valueRef}>
+      &nbsp;
+    </span>
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.seek-bar {
+  --_seek-bar--height: var(--seek-bar--height, 0.25em);
+  --_seek-bar--back-color: var(--seek-bar--back-color, #b0b0b0);
+  --_seek-bar--front-color: var(--seek-bar--front-color, #ffffff);
+  cursor: pointer;
+}
+.seek-bar__container {
+  width: 100%;
+  background: var(--_seek-bar--back-color);
+  height: var(--_seek-bar--height);
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
+  border-radius: calc(var(--_seek-bar--height) / 2);
+  overflow: hidden;
+}
+.seek-bar__value {
+  background: var(--_seek-bar--front-color);
+  display: inline-block;
+  height: 100%;
+}
+.seek-bar__value--animate {
+  transition: width 500ms;
+}</style>

package/dist/ui/seek-bar/cmp.seek-bar.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    /**
+     * 0-1
+     * */
+    value: number;
+    on: {
+        seek: (e: number) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/seek-bar/index.d.ts

@@ -0,0 +1 @@
+export { default as SeekBar } from './cmp.seek-bar.svelte';

package/dist/ui/seek-bar/index.js

@@ -0,0 +1 @@
+export { default as SeekBar } from './cmp.seek-bar.svelte';

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

@@ -0,0 +1,26 @@
+<script lang="ts">import { DynamicComponent, DynamicComponentModel } from '../dynamic-component';
+import normalize from 'styles/_normalize.scss?raw';
+import reset from 'styles/_reset.scss?raw';
+import { mount, onMount } from 'svelte';
+let { model } = $props();
+let shadowRoot;
+let host;
+onMount(() => {
+    shadowRoot = host.attachShadow({ mode: 'open' });
+    const styleElement = document.createElement('style');
+    styleElement.textContent = normalize + reset;
+    shadowRoot.appendChild(styleElement);
+    mount(DynamicComponent, { target: shadowRoot, props: { model } });
+});
+</script>
+
+<div class="host" bind:this={host}></div>
+
+<style>.host {
+  display: contents;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}</style>

package/dist/ui/shadow-dom/cmp.shadow-dom.svelte.d.ts

@@ -0,0 +1,7 @@
+import { DynamicComponentModel } from '../dynamic-component';
+type Props = {
+    model: DynamicComponentModel;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/shadow-dom/index.d.ts

@@ -0,0 +1 @@
+export { default as ShadowDom } from './cmp.shadow-dom.svelte';

package/dist/ui/shadow-dom/index.js

@@ -0,0 +1 @@
+export { default as ShadowDom } from './cmp.shadow-dom.svelte';