@streamscloud/embeddable 15.1.0-1770823267010 → 16.0.0

package/dist/ui/player/button/cmp.player-buttons.svelte

@@ -1,127 +0,0 @@
-<script lang="ts">import { Icon } from '../../icon';
-let { actions, scaleEffect = false, zoom = 1 } = $props();
-</script>
-
-{#if actions.length === 1}
-  {@const action = actions[0]}
-  <button
-    type="button"
-    class="player-button"
-    style:zoom={zoom}
-    class:player-button--scale-effect={scaleEffect}
-    disabled={action.disabled}
-    onclick={action.callback}>
-    <span class="player-button__icon">
-      <Icon src={action.icon} color={action.iconColor} />
-    </span>
-  </button>
-{:else if actions.length > 1}
-  <div class="player-buttons" style:zoom={zoom}>
-    {#each actions as action (action.icon)}
-      <button
-        type="button"
-        class="player-buttons__action"
-        class:player-buttons__action--scale-effect={scaleEffect}
-        disabled={action.disabled}
-        onclick={action.callback}>
-        <span class="player-buttons__action-icon">
-          <Icon src={action.icon} color={action.iconColor} />
-        </span>
-      </button>
-    {/each}
-  </div>
-{/if}
-
-<style>.player-button {
-  --_player-button--color: var(--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
-  --_player-button--color--inactive: var(--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
-  --_player-button--icon-scale: 1;
-  pointer-events: auto;
-  padding: 0.625rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--_player-button--color--inactive);
-  transition: background-color 0.5s;
-  border-radius: 50%;
-  color: var(--sc-mc-color--text-white);
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--size: 1.75rem;
-}
-.player-button:hover:not(:disabled) {
-  background-color: var(--_player-button--color);
-}
-.player-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.player-button--scale-effect:hover:not(:disabled) {
-  --_player-button--icon-scale: 1.2;
-}
-.player-button__icon {
-  display: block;
-  transform: scale(var(--_player-button--icon-scale));
-  transition: 0.3s;
-}
-.player-button {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .player-button {
-    padding: 0.5rem;
-    --icon--size: 1.5rem;
-  }
-}
-
-.player-buttons {
-  --_player-button--color: var(--player-button--color, rgb(from light-dark(#272727, #000000) r g b / 95%));
-  --_player-button--color--inactive: var(--player-button--color--inactive, rgb(from var(--_player-button--color) r g b / 60%));
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  border-radius: 1.25rem;
-  background: var(--_player-button--color--inactive);
-  padding: 0.4375rem 0.0625rem;
-  pointer-events: auto;
-}
-.player-buttons__action {
-  --_player-button--icon-scale: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0.5625rem;
-  border-radius: 1.25rem;
-  color: var(--sc-mc-color--text-white);
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--size: 1.75rem;
-  transition: background-color 0.5s;
-}
-.player-buttons__action:hover:not(:disabled) {
-  background-color: var(--_player-button--color);
-}
-.player-buttons__action:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.player-buttons__action--scale-effect:hover:not(:disabled) {
-  --_player-button--icon-scale: 1.2;
-  background-color: transparent;
-}
-.player-buttons__action-icon {
-  display: block;
-  transform: scale(var(--_player-button--icon-scale));
-  transition: 0.3s;
-}
-.player-buttons {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .player-buttons {
-    border-radius: 0.9375rem;
-    padding: 0.25rem 0.0625rem;
-  }
-  .player-buttons__action {
-    --icon--size: 1.5rem;
-  }
-}</style>

package/dist/ui/player/button/cmp.player-buttons.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/player/button/cmp.responsive-player-buttons.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">import { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
-import { default as PlayerButtons } from './cmp.player-buttons.svelte';
-let { scaleEffect = false, actions } = $props();
-</script>
-
-<div class="desktop-controls">
-  <PlayerButtons actions={actions} scaleEffect={scaleEffect} />
-</div>
-
-<div class="mobile-controls">
-  <MobilePlayerButtons actions={actions} />
-</div>
-
-<style>.desktop-controls {
-  display: contents;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .desktop-controls {
-    display: none;
-  }
-}
-
-.mobile-controls {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .mobile-controls {
-    display: contents;
-  }
-}</style>

package/dist/ui/player/button/cmp.responsive-player-buttons.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

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

@@ -1,4 +0,0 @@
-export { default as PlayerButtons } from './cmp.player-buttons.svelte';
-export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
-export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';
-export type { PlayerButtonDef } from './types';

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

@@ -1,3 +0,0 @@
-export { default as PlayerButtons } from './cmp.player-buttons.svelte';
-export { default as MobilePlayerButtons } from './cmp.mobile-player-buttons.svelte';
-export { default as ResponsivePlayerButtons } from './cmp.responsive-player-buttons.svelte';

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

@@ -1,7 +0,0 @@
-import type { IconColor } from '../../icon';
-export type PlayerButtonDef = {
-    icon: string;
-    iconColor?: IconColor;
-    callback: () => void;
-    disabled?: boolean;
-};

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

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

package/dist/ui/player/providers/chunks-player-buffer/index.d.ts

@@ -1,2 +0,0 @@
-export { PlayerChunk } from './player-chunk.svelte';
-export { PlayerChunksManager } from './player-chunks-manager.svelte';

package/dist/ui/player/providers/chunks-player-buffer/index.js

@@ -1,2 +0,0 @@
-export { PlayerChunk } from './player-chunk.svelte';
-export { PlayerChunksManager } from './player-chunks-manager.svelte';

package/dist/ui/player/providers/chunks-player-buffer/player-chunk-item.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { WithId } from '../types';
-export declare class PlayerChunkItem<T extends WithId> {
-    model: T;
-    chunkId: string;
-    constructor(init: {
-        model: T;
-        chunkId: string;
-    });
-}

package/dist/ui/player/providers/chunks-player-buffer/player-chunk-item.svelte.js

@@ -1,9 +0,0 @@
-export class PlayerChunkItem {
-    model;
-    chunkId;
-    constructor(init) {
-        const { model, chunkId } = init;
-        this.model = model;
-        this.chunkId = chunkId;
-    }
-}

package/dist/ui/player/providers/chunks-player-buffer/player-chunk.svelte.d.ts

@@ -1,30 +0,0 @@
-import { PlayerChunkItem } from './player-chunk-item.svelte';
-import type { WithId } from '../types';
-export declare class PlayerChunk<TItem extends WithId, TChunk extends WithId> {
-    readonly model: TChunk;
-    readonly items: TItem[];
-    readonly chunkItems: PlayerChunkItem<TItem>[];
-    readonly activeChunkItem: PlayerChunkItem<TItem>;
-    private _chunkItems;
-    private _activeItemIndex;
-    private _fetchDeferred;
-    private _itemsLoader;
-    constructor(data: {
-        chunk: TChunk;
-        provider: {
-            loadChunkItems: (chunkId: string, continuationToken: string | null | undefined) => Promise<{
-                items: TItem[];
-                continuationToken: string | null;
-            }>;
-        };
-        callbacks?: {
-            onChunkFullyLoaded: (chunk: PlayerChunk<TItem, TChunk>) => void;
-        };
-    });
-    get isLoading(): boolean;
-    get canLoadMore(): any;
-    get activeItemIndex(): number;
-    loadMore: () => any;
-    setActiveItemIndex: (index: number) => Promise<void>;
-    mutateChunkItems: (items: PlayerChunkItem<TItem>[]) => void;
-}

package/dist/ui/player/providers/chunks-player-buffer/player-chunk.svelte.js

@@ -1,73 +0,0 @@
-import { ContinuationToken } from '../../../../core/continuation-token';
-import { CursorDataLoader } from '../../../../core/data-loaders';
-import { Deferred } from '../../../../core/deferred';
-import { PlayerChunkItem } from './player-chunk-item.svelte';
-export class PlayerChunk {
-    model;
-    items = $derived.by(() => this._chunkItems.map((i) => i.model));
-    chunkItems = $derived.by(() => this._chunkItems);
-    activeChunkItem = $derived.by(() => this._chunkItems[this._activeItemIndex] ?? null);
-    _chunkItems = $state.raw([]);
-    _activeItemIndex = $state(0);
-    _fetchDeferred = $state.raw(null);
-    _itemsLoader;
-    constructor(data) {
-        const { chunk, provider, callbacks } = data;
-        this.model = chunk;
-        this._itemsLoader = new CursorDataLoader({
-            loadPage: async (continuationToken) => {
-                if (this._fetchDeferred) {
-                    return await this._fetchDeferred.promise;
-                }
-                if (!this.canLoadMore) {
-                    return null;
-                }
-                try {
-                    this._fetchDeferred = new Deferred();
-                    const itemsResult = await provider.loadChunkItems(this.model.id, continuationToken.toNextChunkString());
-                    const newItems = itemsResult.items;
-                    this._chunkItems = [
-                        ...this._chunkItems,
-                        ...newItems.map((item) => new PlayerChunkItem({
-                            model: item,
-                            chunkId: this.model.id
-                        }))
-                    ];
-                    const continuationTokenResult = ContinuationToken.fromPayload(itemsResult.continuationToken);
-                    if (!continuationTokenResult.canLoadMore) {
-                        callbacks?.onChunkFullyLoaded(this);
-                    }
-                    const result = {
-                        items: newItems,
-                        continuationToken: continuationTokenResult
-                    };
-                    this._fetchDeferred.resolve(result);
-                    return result;
-                }
-                catch {
-                    this._fetchDeferred?.resolve(null);
-                    return null;
-                }
-                finally {
-                    this._fetchDeferred = null;
-                }
-            }
-        });
-    }
-    get isLoading() {
-        return !!this._fetchDeferred;
-    }
-    get canLoadMore() {
-        return this._itemsLoader.continuationToken.canLoadMore;
-    }
-    get activeItemIndex() {
-        return this._activeItemIndex;
-    }
-    loadMore = () => this._itemsLoader.loadMore();
-    setActiveItemIndex = async (index) => {
-        this._activeItemIndex = index;
-    };
-    mutateChunkItems = (items) => {
-        this._chunkItems = items;
-    };
-}

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.d.ts

@@ -1,23 +0,0 @@
-import { PlayerChunk } from './player-chunk.svelte';
-import type { IChunksPlayerDataProvider, WithId } from '../types';
-export declare class PlayerChunksManager<TItem extends WithId, TChunk extends WithId> {
-    private provider;
-    private _activeChunkIndex;
-    private _loadedChunks;
-    private _warmUpDeferred;
-    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
-    get activeChunk(): PlayerChunk<TItem, TChunk>;
-    get loadedChunks(): PlayerChunk<TItem, TChunk>[];
-    get isLoading(): boolean;
-    get flattenedChunkItems(): TItem[];
-    get flattenedActiveChunkItemIndex(): number;
-    tryActivateItemById: (id: string) => boolean;
-    removeItemById: (id: string) => boolean;
-    removeChunkById: (id: string) => boolean | undefined;
-    initialize: () => Promise<void>;
-    setActiveChunkIndex: (index: number, chunkItemIndex: number) => Promise<void>;
-    activateItemAtFlattenedIndex: (index: number) => Promise<void>;
-    warmUp: () => Promise<any>;
-    reset: () => Promise<void>;
-    private warmUpSequentially;
-}

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js

@@ -1,220 +0,0 @@
-import { Deferred } from '../../../../core/deferred';
-import { PlayerChunk } from './player-chunk.svelte';
-const ITEMS_BUFFER_SIZE = 10;
-// Configuration: if true, always start from first item when switching chunks
-// if false, activate the exact item at its position in the new chunk
-const START_FROM_FIRST_ITEM_ON_CHUNK_SWITCH = true;
-export class PlayerChunksManager {
-    provider;
-    _activeChunkIndex = $state(-1);
-    _loadedChunks = $state.raw([]);
-    _warmUpDeferred = $state.raw(null);
-    constructor(provider) {
-        this.provider = provider;
-    }
-    get activeChunk() {
-        return this._loadedChunks[this._activeChunkIndex] ?? null;
-    }
-    get loadedChunks() {
-        return this._loadedChunks;
-    }
-    get isLoading() {
-        return this._warmUpDeferred !== null || this._loadedChunks.some((c) => c.isLoading);
-    }
-    get flattenedChunkItems() {
-        return this._loadedChunks.reduce((acc, chunk) => {
-            acc.push(...chunk.items);
-            return acc;
-        }, []);
-    }
-    get flattenedActiveChunkItemIndex() {
-        if (!this.activeChunk || !this.activeChunk.activeChunkItem) {
-            return -1;
-        }
-        let itemsBeforeActiveChunk = 0;
-        for (let i = 0; i < this._activeChunkIndex; i++) {
-            itemsBeforeActiveChunk += this._loadedChunks[i].items.length;
-        }
-        return itemsBeforeActiveChunk + this.activeChunk.activeItemIndex;
-    }
-    tryActivateItemById = (id) => {
-        const chunkWithItemIndex = this._loadedChunks.findIndex((chunk) => chunk.items.some((item) => item.id === id));
-        const chunkWithItem = this._loadedChunks[chunkWithItemIndex];
-        if (!chunkWithItem) {
-            return false;
-        }
-        const itemIndex = chunkWithItem.items.findIndex((item) => item.id === id);
-        this.setActiveChunkIndex(chunkWithItemIndex, itemIndex);
-        return true;
-    };
-    removeItemById = (id) => {
-        const itemIndex = this.flattenedChunkItems.findIndex((item) => item.id === id);
-        if (itemIndex === -1) {
-            return false;
-        }
-        const currentItem = this.flattenedChunkItems[this.flattenedActiveChunkItemIndex];
-        // Find next item to activate BEFORE removing (if removing current item)
-        let nextItemId = currentItem?.id;
-        if (this.flattenedActiveChunkItemIndex === itemIndex) {
-            // Try next item
-            if (itemIndex + 1 < this.flattenedChunkItems.length) {
-                nextItemId = this.flattenedChunkItems[itemIndex + 1].id;
-            }
-            // Try previous item
-            else if (itemIndex > 0) {
-                nextItemId = this.flattenedChunkItems[itemIndex - 1].id;
-            }
-            else {
-                // No items left
-                nextItemId = null;
-            }
-        }
-        // Remove item from chunks
-        this._loadedChunks.forEach((chunk) => {
-            if (chunk.chunkItems.some((i) => i.model.id === id)) {
-                chunk.mutateChunkItems(chunk.chunkItems.filter((i) => i.model.id !== id));
-            }
-        });
-        if (nextItemId) {
-            this.tryActivateItemById(nextItemId);
-        }
-        else {
-            this._activeChunkIndex = -1;
-        }
-        return true;
-    };
-    removeChunkById = (id) => {
-        const chunkIndex = this._loadedChunks.findIndex((chunk) => chunk.model.id === id);
-        if (chunkIndex === -1) {
-            return false;
-        }
-        const isActiveChunk = this._activeChunkIndex === chunkIndex;
-        let newActiveChunkIndex = this._activeChunkIndex;
-        this._loadedChunks.splice(chunkIndex, 1);
-        if (this._loadedChunks.length === 0) {
-            this._activeChunkIndex = -1;
-            this.provider.onEndReached?.();
-            return;
-        }
-        if (isActiveChunk) {
-            if (chunkIndex < this._loadedChunks.length) {
-                newActiveChunkIndex = chunkIndex;
-            }
-            else {
-                newActiveChunkIndex = this._loadedChunks.length - 1;
-            }
-        }
-        else if (this._activeChunkIndex > chunkIndex) {
-            newActiveChunkIndex--;
-        }
-        this.setActiveChunkIndex(newActiveChunkIndex, 0);
-        return true;
-    };
-    initialize = async () => {
-        this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk) => new PlayerChunk({ chunk, provider: { loadChunkItems: this.provider.loadChunkItems } }));
-        await this.warmUp();
-        if (this._loadedChunks.length === 0 || this.flattenedChunkItems.length === 0) {
-            this.provider.onEndReached?.();
-            return;
-        }
-        const firstFilledChunkIndex = this._loadedChunks.findIndex((c) => c.items.length > 0);
-        const initialStartItemIndex = firstFilledChunkIndex === 0 && this.provider.initialData.startItemIndex && this.provider.initialData.startItemIndex > 0
-            ? this.provider.initialData.startItemIndex
-            : 0;
-        this.setActiveChunkIndex(firstFilledChunkIndex, initialStartItemIndex);
-    };
-    setActiveChunkIndex = async (index, chunkItemIndex) => {
-        this._activeChunkIndex = index;
-        this.activeChunk.setActiveItemIndex(chunkItemIndex);
-        // Don't wait for warm up to be finished, it runs in the background
-        this.warmUp();
-    };
-    activateItemAtFlattenedIndex = async (index) => {
-        const activeChunkId = this.activeChunk?.model.id;
-        const flattenedItems = this.loadedChunks.flatMap((x) => x.chunkItems);
-        const nextItem = flattenedItems[index];
-        if (!nextItem) {
-            return;
-        }
-        if (nextItem.chunkId !== activeChunkId) {
-            const nextChunkIndex = this.loadedChunks.findIndex((c) => c.model.id === nextItem.chunkId);
-            if (nextChunkIndex === -1) {
-                return;
-            }
-            const itemIndexInChunk = START_FROM_FIRST_ITEM_ON_CHUNK_SWITCH ? 0 : this.loadedChunks[nextChunkIndex].chunkItems.indexOf(nextItem);
-            this.setActiveChunkIndex(nextChunkIndex, itemIndexInChunk);
-        }
-        else {
-            this.activeChunk.setActiveItemIndex(this.activeChunk.chunkItems.indexOf(nextItem));
-            // Don't wait for warm up to be finished, it runs in the background
-            this.warmUp();
-        }
-    };
-    warmUp = async () => {
-        if (this._warmUpDeferred) {
-            return this._warmUpDeferred.promise;
-        }
-        this._warmUpDeferred = new Deferred();
-        try {
-            await this.warmUpSequentially();
-        }
-        finally {
-            this._warmUpDeferred.resolve();
-            this._warmUpDeferred = null;
-        }
-    };
-    reset = async () => {
-        this._activeChunkIndex = -1;
-        this._loadedChunks = [];
-        this._warmUpDeferred = null;
-        await this.warmUp();
-    };
-    warmUpSequentially = async () => {
-        const startChunkIndex = Math.max(0, this._activeChunkIndex);
-        // Calculate how many items we need ahead of current position
-        const getItemsAhead = () => {
-            const currentFlatIndex = this.flattenedActiveChunkItemIndex;
-            const totalItems = this.flattenedChunkItems.length;
-            return totalItems - currentFlatIndex - 1; // -1 because current item doesn't count
-        };
-        while (getItemsAhead() < ITEMS_BUFFER_SIZE) {
-            // Find first non-fully-loaded chunk starting from active
-            let targetChunkIndex = -1;
-            for (let i = startChunkIndex; i < this._loadedChunks.length; i++) {
-                if (this._loadedChunks[i].canLoadMore) {
-                    targetChunkIndex = i;
-                    break;
-                }
-            }
-            // If all chunks are fully loaded, load more chunks
-            if (targetChunkIndex === -1) {
-                const result = await this.provider.loadMoreChunks();
-                if (result.length === 0) {
-                    // No more chunks available
-                    break;
-                }
-                this._loadedChunks = [
-                    ...this._loadedChunks,
-                    ...result.map((chunk) => new PlayerChunk({
-                        chunk,
-                        provider: { loadChunkItems: this.provider.loadChunkItems }
-                    }))
-                ];
-                continue; // Re-check for chunks to fill
-            }
-            // Load one page from target chunk
-            const chunk = this._loadedChunks[targetChunkIndex];
-            const itemsBefore = chunk.items.length;
-            await chunk.loadMore();
-            const itemsAfter = chunk.items.length;
-            // If chunk became fully loaded but added no items, continue to next chunk
-            if (itemsAfter === itemsBefore && !chunk.canLoadMore) {
-                continue;
-            }
-            // If no progress made and chunk is not fully loaded, something went wrong
-            if (itemsAfter === itemsBefore && chunk.canLoadMore) {
-                break; // Avoid infinite loop
-            }
-        }
-    };
-}

package/dist/ui/player/providers/default-chunks-player-buffer.svelte.d.ts

@@ -1,23 +0,0 @@
-import type { IChunksPlayerBuffer, IChunksPlayerDataProvider, WithId } from './types';
-export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk extends WithId> implements IChunksPlayerBuffer<TItem> {
-    readonly kind = "chunks";
-    readonly loaded: TItem[];
-    readonly currentIndex: number;
-    readonly current: TItem | null;
-    readonly canLoadNext: boolean;
-    readonly canLoadPrevious: boolean;
-    readonly navigationDisabled: boolean;
-    readonly animationDuration = 500;
-    private _playerChunksManager;
-    private _onEndReachedFn;
-    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
-    get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
-    setActiveChunkItemIndex: (index: number) => void;
-    tryActivateItemById: (id: string) => boolean;
-    removeChunkById: (id: string) => boolean | undefined;
-    removeItemById: (id: string) => boolean;
-    loadNext: () => Promise<void>;
-    loadPrevious: () => Promise<void>;
-    reset: () => void;
-    ensureWarmedUp: () => Promise<void>;
-}