@streamscloud/embeddable 9.0.0 → 10.0.0

package/dist/streams/{stream-player/stream-player-view.svelte → streams-player/streams-player-view.svelte}

@@ -11,14 +11,13 @@ var _a;
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
 import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
-import { toastrWarning } from '../../core/toastr';
 import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
 import { default as Overview } from './stream-overview.svelte';
-import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
+import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 import { untrack } from 'svelte';
-let { streamId, dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, on, mediaCenterData } = $props();
+let { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, on, mediaCenterData } = $props();
 const localization = $derived(new StreamPlayerLocalization((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.locale) !== null && _a !== void 0 ? _a : 'en'));
 let currentStreamModel = $state(null);
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
@@ -30,22 +29,13 @@ let activityTimeout = null;
 let trackingInterval = null;
 let maxPageIndexViewed = 0;
 $effect(() => {
-    void streamId;
+    void dataProvider;
     untrack(() => {
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
-        initNewStream(streamId);
+        initPlayerBuffer();
     });
-    return () => {
-        stopActivityTracking();
-        if (currentStreamModel) {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(currentStreamModel.id, totalEngagementTimeSeconds);
-            if (buffer && buffer.loaded.length > 0) {
-                let scrollDepth = Math.round(((maxPageIndexViewed + 1) / buffer.loaded.length) * 100);
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(currentStreamModel.id, scrollDepth);
-            }
-        }
-    };
+    return () => { };
 });
 $effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 $effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
@@ -54,6 +44,31 @@ $effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
         campaignId: amplificationParameters === null || amplificationParameters === void 0 ? void 0 : amplificationParameters.campaignId
     }
     : null));
+$effect(() => {
+    const stream = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk.model;
+    untrack(() => {
+        var _a;
+        if (stream) {
+            currentStreamModel = stream;
+            if (stream.organizationId) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
+            }
+            (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { title: stream.title, image: stream.cover });
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
+            startActivityTracking();
+        }
+    });
+    return () => {
+        stopActivityTracking();
+        if (currentStreamModel) {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamEngagementTime(currentStreamModel.id, totalEngagementTimeSeconds);
+            let scrollDepth = Math.round(((maxPageIndexViewed + 1) / currentStreamModel.pagesCount) * 100);
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamScrollDepth(currentStreamModel.id, scrollDepth);
+        }
+        totalEngagementTimeSeconds = 0;
+        maxPageIndexViewed = 0;
+    };
+});
 const streamTrackingParams = $derived.by(() => {
     return currentStreamModel
         ? {
@@ -62,39 +77,20 @@ const streamTrackingParams = $derived.by(() => {
         }
         : false;
 });
-const initNewStream = (streamId) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    const stream = yield dataProvider.getStream(streamId);
-    if (!stream) {
-        toastrWarning(localization.streamNotFound);
-        (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
-        return;
-    }
-    if (stream.organizationId) {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
-    }
-    (_b = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _b === void 0 ? void 0 : _b.call(on, { title: stream.title, image: stream.cover });
-    // start tracking the stream
-    currentStreamModel = stream;
-    new StreamPlayerBuffer({
-        streamId,
-        dataProvider: dataProvider,
-        on: {
-            preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                if (instance.loaded.length) {
-                    const coverUrl = instance.loaded[0].cover;
-                    if (coverUrl) {
-                        yield preloadImage(coverUrl);
-                    }
-                    contentPlayerConfig.setBackgroundImageUrl(coverUrl);
+const initPlayerBuffer = () => __awaiter(void 0, void 0, void 0, function* () {
+    new StreamsPlayerBuffer(dataProvider, {
+        preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
+            if (instance.loaded.length) {
+                const coverUrl = instance.loaded[0].cover;
+                if (coverUrl) {
+                    yield preloadImage(coverUrl);
                 }
-                buffer = instance;
-                contentPlayerConfig.playerBuffer = instance;
-            })
-        }
+                contentPlayerConfig.setBackgroundImageUrl(coverUrl);
+            }
+            buffer = instance;
+            contentPlayerConfig.playerBuffer = instance;
+        })
     });
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
-    startActivityTracking();
 });
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
@@ -131,37 +127,55 @@ const contentPlayerConfig = new ContentPlayerConfig({
     },
     playerSliderCallbacks: {
         itemActivated: (item) => onPageActivated(item),
-        itemDeactivated: (itemId) => analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.reportPageVideoViews(itemId, streamId)
+        itemDeactivated: (itemId) => executeWithStreamId((streamId) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.reportPageVideoViews(itemId, streamId);
+        })
     }
 });
 const handleChangePage = (index) => {
     if (!buffer) {
         return;
     }
-    buffer.setIndex(index);
+    buffer.setActiveChunkItemIndex(index);
 };
 const onPageActivated = (id) => {
-    const page = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
+    const activeChunk = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk;
+    if (!activeChunk) {
+        return;
+    }
+    const page = activeChunk.items.find((x) => x.id === id);
     contentPlayerConfig.setBackgroundImageUrl((page === null || page === void 0 ? void 0 : page.cover) || null);
     if (page) {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, activeChunk.model.id);
         if (page.type === 'short-video' && page.shortVideo) {
             analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(page.shortVideo.id);
         }
-        const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
-        if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
+        const currentIndex = activeChunk.items.findIndex((p) => p.id === id);
+        if (currentIndex > maxPageIndexViewed) {
             maxPageIndexViewed = currentIndex;
         }
     }
 };
 const onStreamProductClick = (productId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
+    executeWithStreamId((streamId) => {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
+    });
 };
 const onStreamProductImpression = (productId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
+    executeWithStreamId((streamId) => {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
+    });
 };
 const onProgress = (pageId, videoId, progress) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProgress(pageId, videoId, progress, streamId);
+    executeWithStreamId((streamId) => {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProgress(pageId, videoId, progress, streamId);
+    });
+};
+const executeWithStreamId = (action) => {
+    if (!currentStreamModel) {
+        return;
+    }
+    action(currentStreamModel.id);
 };
 //#region Activity Tracking
 const resetInactivityTimer = () => {

package/dist/streams/streams-player/streams-player-view.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MediaCenterData } from '../../media-center/model/types';
+import type { StreamsPlayerProps } from './types';
+type $$ComponentProps = StreamsPlayerProps & {
+    mediaCenterData?: MediaCenterData;
+};
+declare const StreamsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
+type StreamsPlayerView = ReturnType<typeof StreamsPlayerView>;
+export default StreamsPlayerView;

package/dist/streams/{stream-player → streams-player}/types.d.ts

@@ -15,13 +15,12 @@ export type StreamPlayerModel = {
     };
     pagesCount: number;
 };
-export type StreamPlayerProps = {
-    streamId: string;
-    dataProvider: IStreamPlayerDataProvider;
+export type StreamsPlayerProps = {
+    dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: StreamPlayerSettings;
+    playerSettings?: StreamsPlayerSettings;
     on?: {
         streamActivated?: (data: {
             title: string;
@@ -30,14 +29,17 @@ export type StreamPlayerProps = {
         playerClosed?: () => void;
     };
 };
-export type StreamPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;
+export type StreamsPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;
 export type StreamAmplificationParameters = {
     campaignId: string;
     campaignName: string;
     source: string;
 };
-export interface IStreamPlayerDataProvider {
-    getStream: (streamId: string) => Promise<StreamPlayerModel | null>;
+export interface IStreamsPlayerDataProvider {
+    initialData: {
+        prefetchedStreams: StreamPlayerModel[];
+    };
+    loadMoreStreams: () => Promise<StreamPlayerModel[]>;
     getStreamPages: (streamId: string, continuationToken: string | null | undefined) => Promise<{
         items: StreamPageViewerModel[];
         continuationToken: string | null;

package/dist/ui/{player-button → player/button}/cmp.player-button.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Icon, IconColor } from '../icon';
+<script lang="ts">import { Icon, IconColor } from '../../icon';
 let { icon, iconColor, scaleEffect = false, disabled = false, on } = $props();
 </script>
 

package/dist/ui/{player-button → player/button}/cmp.player-button.svelte.d.ts

@@ -1,4 +1,4 @@
-import { IconColor } from '../icon';
+import { IconColor } from '../../icon';
 type Props = {
     icon: string;
     iconColor?: IconColor;

package/dist/ui/{player-button → player/button}/cmp.player-buttons-group.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { Icon } from '../../icon';
 let { scaleEffect = false, actions } = $props();
 </script>
 

package/dist/ui/{player-button → player/button}/types.d.ts

@@ -1,4 +1,4 @@
-import { IconColor } from '../icon';
+import { IconColor } from '../../icon';
 export type PlayerButtonsGroupAction = {
     icon: string;
     iconColor?: IconColor;

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

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

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

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

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

@@ -0,0 +1,2 @@
+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

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

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

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

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

@@ -0,0 +1,31 @@
+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 chunkIndex: number;
+    readonly activeChunkItem: PlayerChunkItem<TItem>;
+    readonly isEmpty: boolean;
+    isFullyLoaded: boolean;
+    private _chunkItems;
+    private _activeItemIndex;
+    private _isLoading;
+    private _itemsLoader;
+    constructor(data: {
+        chunk: TChunk;
+        chunkIndex: number;
+        provider: {
+            loadChunkItems: (chunkId: string, continuationToken: string | null | undefined) => Promise<{
+                items: TItem[];
+                continuationToken: string | null;
+            }>;
+        };
+        callbacks?: {
+            onChunkFullyLoaded: (chunk: PlayerChunk<TItem, TChunk>) => void;
+        };
+    });
+    loadMore: () => Promise<TItem[]>;
+    setActiveItemIndex: (index: number, warmUp?: boolean) => Promise<void>;
+    warmUp: () => Promise<void>;
+}

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

@@ -0,0 +1,67 @@
+import { ContinuationToken } from '../../../../core/continuation-token';
+import { CursorDataLoader } from '../../../../core/data-loaders';
+import { PlayerChunkItem } from './player-chunk-item.svelte';
+const CHUNK_ITEMS_BUFFER_SIZE = 5;
+export class PlayerChunk {
+    model;
+    items = $derived.by(() => this._chunkItems.map((i) => i.model));
+    chunkItems = $derived.by(() => this._chunkItems);
+    chunkIndex;
+    activeChunkItem = $derived.by(() => this._chunkItems[this._activeItemIndex] ?? null);
+    isEmpty = $derived.by(() => this.isFullyLoaded && this._chunkItems.length === 0);
+    isFullyLoaded = $state(false);
+    _chunkItems = $state.raw([]);
+    _activeItemIndex = $state(0);
+    _isLoading = $state(false);
+    _itemsLoader;
+    constructor(data) {
+        const { chunk, provider, chunkIndex, callbacks } = data;
+        this.model = chunk;
+        this.chunkIndex = chunkIndex;
+        this._itemsLoader = new CursorDataLoader({
+            loadPage: async (continuationToken) => {
+                if (this.isFullyLoaded) {
+                    return null;
+                }
+                const result = await provider.loadChunkItems(this.model.id, continuationToken.toNextChunkString());
+                const newItems = result.items;
+                this._chunkItems = [
+                    ...this._chunkItems,
+                    ...newItems.map((item, index) => new PlayerChunkItem({
+                        model: item,
+                        indexWithinChunk: this._chunkItems.length + index,
+                        chunkId: this.model.id
+                    }))
+                ];
+                const continuationTokenResult = ContinuationToken.fromPayload(result.continuationToken);
+                if (!continuationTokenResult.canLoadMore) {
+                    this.isFullyLoaded = true;
+                    callbacks?.onChunkFullyLoaded(this);
+                }
+                return {
+                    items: newItems,
+                    continuationToken: continuationTokenResult
+                };
+            }
+        });
+    }
+    loadMore = () => this._itemsLoader.loadMore();
+    setActiveItemIndex = async (index, warmUp = true) => {
+        this._activeItemIndex = index;
+        if (warmUp) {
+            await this.warmUp();
+        }
+    };
+    warmUp = async () => {
+        if (this._chunkItems.length >= this._activeItemIndex + CHUNK_ITEMS_BUFFER_SIZE || this._isLoading) {
+            return;
+        }
+        this._isLoading = true;
+        try {
+            await this.loadMore();
+        }
+        finally {
+            this._isLoading = false;
+        }
+    };
+}

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

@@ -0,0 +1,23 @@
+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 callabacks;
+    readonly activeChunk: PlayerChunk<TItem, TChunk>;
+    readonly loadedChunks: PlayerChunk<TItem, TChunk>[];
+    readonly flattenedChunkItems: TItem[];
+    readonly flattenedActiveChunkItemIndex: number;
+    private _activeChunkIndex;
+    private _loadedChunks;
+    private _isLoading;
+    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, callabacks: {
+        onInitializationFinished: () => void;
+        onEndReached: () => void;
+    });
+    initialize: () => Promise<void>;
+    setActiveChunkIndex: (index: number) => Promise<void>;
+    activateItemAtFlattenedIndex: (index: number) => Promise<void>;
+    warmUp: () => Promise<void>;
+    reset: () => void;
+    private populateChunkAtIndex;
+}

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

@@ -0,0 +1,119 @@
+import { PlayerChunk } from './player-chunk.svelte';
+const CHUNKS_BUFFER_SIZE = 5;
+const FIXED_START_INDEX = 0;
+export class PlayerChunksManager {
+    provider;
+    callabacks;
+    activeChunk = $derived.by(() => this._loadedChunks[this._activeChunkIndex] ?? null);
+    loadedChunks = $derived.by(() => this._loadedChunks);
+    flattenedChunkItems = $derived.by(() => this._loadedChunks.reduce((acc, chunk) => {
+        acc.push(...chunk.items);
+        return acc;
+    }, []));
+    flattenedActiveChunkItemIndex = $derived.by(() => {
+        if (!this.activeChunk || !this.activeChunk.activeChunkItem) {
+            return -1;
+        }
+        let itemsBeforeActiveChunk = 0;
+        for (let i = 0; i < this.activeChunk.chunkIndex; i++) {
+            itemsBeforeActiveChunk += this._loadedChunks[i].items.length;
+        }
+        return itemsBeforeActiveChunk + this.activeChunk.activeChunkItem.indexWithinChunk;
+    });
+    _activeChunkIndex = $state(-1);
+    _loadedChunks = $state.raw([]);
+    _isLoading = $state(false);
+    constructor(provider, callabacks) {
+        this.provider = provider;
+        this.callabacks = callabacks;
+    }
+    initialize = async () => {
+        const { onInitializationFinished, onEndReached } = this.callabacks;
+        const handleInitialized = async () => {
+            const startIndex = Math.min(FIXED_START_INDEX, this._loadedChunks.length - 1);
+            const populateChunkResult = await this.populateChunkAtIndex(startIndex, (currentIndex) => currentIndex + 1);
+            if (!populateChunkResult) {
+                onEndReached();
+                return;
+            }
+            this.setActiveChunkIndex(populateChunkResult.closestReadyChunkIndex);
+            if (populateChunkResult.closestReadyChunkIndex === FIXED_START_INDEX &&
+                this.provider.initialData.startItemIndex &&
+                this.provider.initialData.startItemIndex > 0) {
+                this.activeChunk.setActiveItemIndex(this.provider.initialData.startItemIndex);
+            }
+            onInitializationFinished();
+        };
+        this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk, chunkIndex) => new PlayerChunk({ chunk, chunkIndex, provider: { loadChunkItems: this.provider.loadChunkItems } }));
+        const considerInitialized = this._loadedChunks.length !== 0;
+        if (considerInitialized) {
+            handleInitialized();
+        }
+        await this.warmUp();
+        if (!considerInitialized) {
+            handleInitialized();
+        }
+    };
+    setActiveChunkIndex = async (index) => {
+        this._activeChunkIndex = index;
+        this._loadedChunks.forEach((c) => c.setActiveItemIndex(0, false));
+        await this.populateChunkAtIndex(this._activeChunkIndex + 1, (currentIndex) => currentIndex + 1);
+    };
+    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) {
+            this.setActiveChunkIndex(this.loadedChunks.findIndex((c) => c.model.id === nextItem.chunkId));
+            this.activeChunk.warmUp();
+        }
+        else {
+            this.activeChunk.setActiveItemIndex(nextItem.indexWithinChunk);
+        }
+    };
+    warmUp = async () => {
+        // Early return if manager is sufficient or already loading
+        if (this._loadedChunks.length >= this._activeChunkIndex + CHUNKS_BUFFER_SIZE || this._isLoading) {
+            return;
+        }
+        this._isLoading = true;
+        try {
+            const result = await this.provider.loadMoreChunks();
+            this._loadedChunks = [
+                ...this._loadedChunks,
+                ...result.map((chunk, index) => new PlayerChunk({
+                    chunk,
+                    chunkIndex: this._loadedChunks.length + index,
+                    provider: { loadChunkItems: this.provider.loadChunkItems }
+                }))
+            ];
+        }
+        finally {
+            this._isLoading = false;
+        }
+    };
+    reset = () => {
+        this._activeChunkIndex = -1;
+        this._loadedChunks = [];
+        this._isLoading = false;
+        this.warmUp();
+    };
+    populateChunkAtIndex = async (index, nextIndexFn) => {
+        const chunkAtIndex = this._loadedChunks[index];
+        if (!chunkAtIndex) {
+            return null;
+        }
+        await chunkAtIndex.warmUp();
+        if (chunkAtIndex.items.length === 0) {
+            const nextIndex = nextIndexFn(index);
+            if (nextIndex > index) {
+                await this.warmUp();
+            }
+            return await this.populateChunkAtIndex(nextIndexFn(index), nextIndexFn);
+        }
+        return { closestReadyChunkIndex: index };
+    };
+}

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

@@ -0,0 +1,20 @@
+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;
+    constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>, on?: {
+        preloaded?: (self: DefaultChunksPlayerBuffer<TItem, TChunk>) => void;
+    });
+    get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
+    setActiveChunkItemIndex: (index: number) => void;
+    loadNext: () => Promise<void>;
+    loadPrevious: () => Promise<void>;
+    reset: () => void;
+}

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

@@ -0,0 +1,47 @@
+import { Utils } from '../../../core/utils';
+import { PlayerChunksManager } from './chunks-player-buffer';
+export class DefaultChunksPlayerBuffer {
+    kind = 'chunks';
+    loaded = $derived.by(() => this._playerChunksManager.flattenedChunkItems);
+    currentIndex = $derived.by(() => this._playerChunksManager.flattenedActiveChunkItemIndex);
+    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 = 500;
+    _playerChunksManager;
+    constructor(provider, on) {
+        // Throttle navigation methods
+        this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
+        this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
+        this._playerChunksManager = new PlayerChunksManager(provider, {
+            onInitializationFinished: () => on?.preloaded?.(this),
+            onEndReached: () => console.warn('end reached')
+        });
+        this._playerChunksManager.initialize();
+    }
+    get activeChunk() {
+        return this._playerChunksManager.activeChunk;
+    }
+    setActiveChunkItemIndex = (index) => {
+        if (!this.activeChunk) {
+            return;
+        }
+        this.activeChunk.setActiveItemIndex(index);
+    };
+    loadNext = async () => {
+        if (!this.canLoadNext) {
+            return;
+        }
+        this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex + 1);
+    };
+    loadPrevious = async () => {
+        if (!this.canLoadPrevious) {
+            return;
+        }
+        this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex - 1);
+    };
+    reset = () => {
+        this._playerChunksManager.reset();
+    };
+}

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

@@ -0,0 +1,27 @@
+import type { IFeedPlayerBuffer, IFeedPlayerDataProvider, WithId } from './types';
+export declare class DefaultFeedPlayerBuffer<T extends WithId> implements IFeedPlayerBuffer<T> {
+    readonly kind = "feed";
+    readonly loaded: (T & {
+        mediaIndex?: number;
+    })[];
+    readonly currentIndex: number;
+    readonly current: (T & {
+        mediaIndex?: number;
+    }) | null;
+    readonly canLoadNext: boolean;
+    readonly canLoadPrevious: boolean;
+    readonly navigationDisabled: boolean;
+    readonly animationDuration = 500;
+    private _currentIndex;
+    private _loaded;
+    private _loadMoreFn;
+    private _isLoading;
+    constructor(provider: IFeedPlayerDataProvider<T>, on?: {
+        preloaded?: (self: DefaultFeedPlayerBuffer<T>) => void;
+    });
+    loadNext: () => Promise<void>;
+    loadPrevious: () => Promise<void>;
+    reset: () => void;
+    private initializeBuffer;
+    private warmUpBuffer;
+}