@streamscloud/embeddable 15.1.0 → 16.0.1

package/dist/ui/loading/cmp.loading.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">import { onMount } from 'svelte';
-let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
-let visible = $state(false);
-onMount(() => {
-    setTimeout(() => (visible = true), timeout);
-});
-</script>
-
-{#if visible && blocking}
-  <div class="loading-ring-overlay" class:loading-ring-overlay--fixed={positionFixedCenter}></div>
-{/if}
-
-<div
-  class="la-ball-clip-rotate"
-  class:la-ball-clip-rotate--absolute-center={positionAbsoluteCenter}
-  class:la-ball-clip-rotate--fixed-center={positionFixedCenter}
-  class:la-ball-clip-rotate--visible={visible}>
-  <div class="la-ball-clip-rotate__spin"></div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.loading-ring-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-  z-index: 999;
-}
-.loading-ring-overlay--fixed {
-  position: fixed;
-}
-
-.la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, var(--sc-mc-color--text-brand));
-  color: var(--loading--spinner-color_);
-  display: block;
-  opacity: 0;
-  width: 2em;
-  height: 2em;
-  z-index: 10;
-}
-.la-ball-clip-rotate--visible {
-  opacity: 1;
-}
-.la-ball-clip-rotate--absolute-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.la-ball-clip-rotate--fixed-center {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-}
-.la-ball-clip-rotate__spin {
-  position: relative;
-  box-sizing: border-box;
-  display: inline-block;
-  float: none;
-  border: 0.125em solid currentColor;
-  width: 2em;
-  height: 2em;
-  background: transparent;
-  border-bottom-color: transparent;
-  border-radius: 100%;
-  animation: ball-clip-rotate 0.75s linear infinite;
-}
-
-@keyframes ball-clip-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}</style>

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

@@ -1,9 +0,0 @@
-type Props = {
-    positionFixedCenter?: boolean;
-    positionAbsoluteCenter?: boolean;
-    blocking?: boolean;
-    timeout?: number;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

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

package/dist/ui/loading/index.js

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

package/dist/ui/media-playback/index.d.ts

@@ -1,2 +0,0 @@
-export * from './volume-manager.svelte';
-export * from './playback-manager.svelte';

package/dist/ui/media-playback/index.js

@@ -1,2 +0,0 @@
-export * from './volume-manager.svelte';
-export * from './playback-manager.svelte';

package/dist/ui/media-playback/playback-manager.svelte.d.ts

@@ -1,25 +0,0 @@
-declare class PlaybackManagerInstance {
-    private mountedPlayableComponents;
-    private playingComponentId;
-    registerMountedPlayer: (componentId: string, callbacks: MediaCallbacks) => void;
-    unregisterPlayer: (componentId: string) => void;
-    setPlayingComponent: (componentId: string | null) => void;
-    play: (componentId: string | null) => void;
-    pause: (componentId?: string) => void;
-    stop: (componentId: string) => void;
-    toggle: (componentId: string) => void;
-    setVolume: (componentId: string, volume: number) => void;
-    mute: (componentId: string) => void;
-    unmute: (componentId: string) => void;
-}
-export declare const PlaybackManager: PlaybackManagerInstance;
-type MediaCallbacks = {
-    onPlay: () => void;
-    onPause: () => void;
-    onStop: (inRespectToNewlyActivatedVideo: boolean) => void;
-    onToggle?: () => void;
-    onVolumeChange?: (volume: number) => void;
-    onMute?: () => void;
-    onUnmute?: () => void;
-};
-export {};

package/dist/ui/media-playback/playback-manager.svelte.js

@@ -1,62 +0,0 @@
-class PlaybackManagerInstance {
-    mountedPlayableComponents = new Map();
-    playingComponentId = null;
-    registerMountedPlayer = (componentId, callbacks) => {
-        this.mountedPlayableComponents.set(componentId, callbacks);
-    };
-    unregisterPlayer = (componentId) => {
-        this.mountedPlayableComponents.delete(componentId);
-        if (this.playingComponentId === componentId) {
-            this.playingComponentId = null;
-        }
-    };
-    setPlayingComponent = (componentId) => {
-        if (this.playingComponentId === componentId) {
-            return;
-        }
-        if (this.playingComponentId) {
-            const callbacks = this.mountedPlayableComponents.get(this.playingComponentId);
-            callbacks?.onStop(true);
-        }
-        this.playingComponentId = componentId;
-    };
-    play = (componentId) => {
-        this.setPlayingComponent(componentId);
-        if (componentId) {
-            const callbacks = this.mountedPlayableComponents.get(componentId);
-            callbacks?.onPlay();
-        }
-    };
-    pause = (componentId) => {
-        const id = componentId || this.playingComponentId;
-        if (!id) {
-            return;
-        }
-        const callbacks = this.mountedPlayableComponents.get(id);
-        callbacks?.onPause();
-    };
-    stop = (componentId) => {
-        const callbacks = this.mountedPlayableComponents.get(componentId);
-        callbacks?.onStop(false);
-        if (this.playingComponentId === componentId) {
-            this.playingComponentId = null;
-        }
-    };
-    toggle = (componentId) => {
-        const callbacks = this.mountedPlayableComponents.get(componentId);
-        callbacks?.onToggle?.();
-    };
-    setVolume = (componentId, volume) => {
-        const callbacks = this.mountedPlayableComponents.get(componentId);
-        callbacks?.onVolumeChange?.(volume);
-    };
-    mute = (componentId) => {
-        const callbacks = this.mountedPlayableComponents.get(componentId);
-        callbacks?.onMute?.();
-    };
-    unmute = (componentId) => {
-        const callbacks = this.mountedPlayableComponents.get(componentId);
-        callbacks?.onUnmute?.();
-    };
-}
-export const PlaybackManager = new PlaybackManagerInstance();

package/dist/ui/media-playback/volume-manager.svelte.d.ts

@@ -1,10 +0,0 @@
-declare class VolumeManagerInstance {
-    private _volumeLevel;
-    private _isMuted;
-    get volumeLevel(): number;
-    get isMuted(): boolean;
-    set volumeLevel(level: number);
-    set isMuted(state: boolean);
-}
-export declare const MediaVolumeManager: VolumeManagerInstance;
-export {};

package/dist/ui/media-playback/volume-manager.svelte.js

@@ -1,27 +0,0 @@
-class VolumeManagerInstance {
-    _volumeLevel = $state(1);
-    _isMuted = $state(false);
-    get volumeLevel() {
-        return this._volumeLevel;
-    }
-    get isMuted() {
-        return this._isMuted;
-    }
-    set volumeLevel(level) {
-        let parsedLevel;
-        if (level < 0) {
-            parsedLevel = 0;
-        }
-        else if (level > 1) {
-            parsedLevel = 1;
-        }
-        else {
-            parsedLevel = level;
-        }
-        this._volumeLevel = parsedLevel;
-    }
-    set isMuted(state) {
-        this._isMuted = state;
-    }
-}
-export const MediaVolumeManager = new VolumeManagerInstance();

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

@@ -1,37 +0,0 @@
-<script lang="ts">import { Icon } from '../../icon';
-let { actions } = $props();
-</script>
-
-<div class="mobile-player-buttons">
-  {#each actions as action (action.icon)}
-    <button type="button" class="mobile-player-buttons__action" disabled={action.disabled} onclick={action.callback}>
-      <span class="mobile-player-buttons__action-icon">
-        <Icon src={action.icon} color={action.iconColor} />
-      </span>
-    </button>
-  {/each}
-</div>
-
-<style>.mobile-player-buttons {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  pointer-events: auto;
-}
-.mobile-player-buttons__action {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--size: 2rem;
-  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
-}
-.mobile-player-buttons__action:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.mobile-player-buttons__action-icon {
-  display: block;
-}</style>

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

@@ -1,7 +0,0 @@
-import type { PlayerButtonDef } from './types';
-type Props = {
-    actions: PlayerButtonDef[];
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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,9 +0,0 @@
-import type { PlayerButtonDef } from './types';
-type Props = {
-    actions: PlayerButtonDef[];
-    scaleEffect?: boolean;
-    zoom?: number;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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,8 +0,0 @@
-import type { PlayerButtonDef } from './types';
-type Props = {
-    actions: PlayerButtonDef[];
-    scaleEffect?: boolean;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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 { IconColor } from '../../icon';
-export type PlayerButtonDef = {
-    icon: string;
-    iconColor?: IconColor;
-    callback: () => void;
-    disabled?: boolean;
-};

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

@@ -1 +0,0 @@
-import { IconColor } from '../../icon';

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(): boolean;
-    get activeItemIndex(): number;
-    loadMore: () => Promise<TItem[]>;
-    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<void>;
-    reset: () => Promise<void>;
-    private warmUpSequentially;
-}