@streamscloud/embeddable 14.0.1 → 14.0.2

package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts

@@ -4,7 +4,7 @@ import { PostModel } from '../model';
 import { type PlayerButtonDef } from '../../ui/player/button';
 type Props = {
     model: PostModel;
-    trackingParams: TrackingParams | null | false;
+    trackingParams: TrackingParams | null;
     enableAttachments?: boolean;
     enableControls?: boolean;
     controlsColors: {

package/dist/posts/posts-player/posts-player-view.svelte

@@ -14,7 +14,7 @@ import { PostActionsGenerator } from '../controls';
 import { getPostCoverImage, PostModel } from '../model';
 import { PostViewer } from '../post-viewer';
 import { IconColor } from '../../ui/icon';
-import { ContentPlayer, ContentPlayerConfig, ContentPlayerSettings } from '../../ui/player/content-player';
+import { Player, PlayerConfig, PlayerSettings } from '../../ui/player';
 import {} from '../../ui/player/providers';
 import { initBufferFromProvider } from '../../ui/player/providers/service';
 import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
@@ -55,9 +55,9 @@ const getLoadedItemById = (id) => {
     }
     return buffer.loaded.find((item) => item.id === id) || null;
 };
-const contentPlayerConfig = new ContentPlayerConfig({
+const contentPlayerConfig = new PlayerConfig({
     playerBuffer: null,
-    settings: new ContentPlayerSettings(playerSettings),
+    settings: new PlayerSettings(playerSettings),
     closeOrchestrator,
     playerSliderCallbacks: {
         itemActivated: (id) => {
@@ -161,7 +161,7 @@ const currentItemActions = $derived.by(() => {
       salePrice: contentPlayerConfig.playerColors.salePrice,
       buttonBackground: contentPlayerConfig.playerColors.cardButton
     }}
-    trackingParams={contentPlayerConfig.trackingParams}
+    trackingParams={false}
     locale={contentPlayerConfig.settings.locale}
     on={{
       productClick: (id) => onProductClick(id, postModel.id),
@@ -170,7 +170,7 @@ const currentItemActions = $derived.by(() => {
       adImpression: (id) => onAdImpression(id)
     }} />
 {/snippet}
-<ContentPlayer
+<Player
   config={contentPlayerConfig}
   itemActions={currentItemActions}
   attachmentsView={buffer?.current && itemAsPostModel(buffer.current).attachments ? attachmentsView : undefined}>
@@ -181,7 +181,7 @@ const currentItemActions = $derived.by(() => {
       model={postModel}
       controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
       controlActions={handler.actions}
-      trackingParams={contentPlayerConfig.trackingParams}
+      trackingParams={false}
       enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
       enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
       autoplay="on-appearance"
@@ -193,4 +193,4 @@ const currentItemActions = $derived.by(() => {
         adImpression: (adId) => onAdImpression(adId)
       }} />
   {/snippet}
-</ContentPlayer>
+</Player>

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

@@ -16,7 +16,7 @@ import { StreamActionsGenerator } from '../controls';
 import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
 import { IconColor } from '../../ui/icon';
-import { ContentPlayer, ContentPlayerConfig, ContentPlayerSettings } from '../../ui/player/content-player';
+import { Player, PlayerConfig, PlayerSettings } from '../../ui/player';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
@@ -35,6 +35,14 @@ let isActive = true;
 let activityTimeout = null;
 let trackingInterval = null;
 let maxPageIndexViewed = 0;
+const trackingParams = $derived.by(() => {
+    return currentStreamModel
+        ? {
+            streamId: currentStreamModel.id,
+            campaignId: amplificationParameters === null || amplificationParameters === void 0 ? void 0 : amplificationParameters.campaignId
+        }
+        : false;
+});
 $effect(() => {
     void dataProvider;
     untrack(() => {
@@ -45,12 +53,6 @@ $effect(() => {
     });
     return () => { };
 });
-$effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
-    ? {
-        streamId: currentStreamModel.id,
-        campaignId: amplificationParameters === null || amplificationParameters === void 0 ? void 0 : amplificationParameters.campaignId
-    }
-    : null));
 $effect(() => {
     var _a;
     const stream = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk) === null || _a === void 0 ? void 0 : _a.model;
@@ -103,9 +105,9 @@ const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, fun
     buffer = newBuffer;
     contentPlayerConfig.playerBuffer = newBuffer;
 });
-const contentPlayerConfig = new ContentPlayerConfig({
+const contentPlayerConfig = new PlayerConfig({
     playerBuffer: null,
-    settings: new ContentPlayerSettings(playerSettings),
+    settings: new PlayerSettings(playerSettings),
     closeOrchestrator,
     playerSliderCallbacks: {
         itemActivated: (item) => onPageActivated(item),
@@ -288,7 +290,7 @@ const stopActivityTracking = () => {
         salePrice: contentPlayerConfig.playerColors.salePrice,
         buttonBackground: contentPlayerConfig.playerColors.cardButton
       }}
-      trackingParams={contentPlayerConfig.trackingParams}
+      trackingParams={trackingParams}
       locale={contentPlayerConfig.settings.locale}
       on={{
         productClick: (id) => onShortVideoProductClick(id, postModel.id),
@@ -298,7 +300,7 @@ const stopActivityTracking = () => {
       }} />
   {/if}
 {/snippet}
-<ContentPlayer
+<Player
   config={contentPlayerConfig}
   itemActions={currentItemActions}
   attachmentsView={buffer?.current && itemAsPostModel(buffer.current)?.attachments ? attachmentsView : undefined}>
@@ -336,7 +338,7 @@ const stopActivityTracking = () => {
         <PostViewer
           model={postModel}
           controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
-          trackingParams={contentPlayerConfig.trackingParams}
+          trackingParams={trackingParams}
           enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
           enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
           controlActions={handler?.actions ?? []}
@@ -362,4 +364,4 @@ const stopActivityTracking = () => {
         }} />
     {/if}
   {/snippet}
-</ContentPlayer>
+</Player>

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

@@ -0,0 +1 @@
+export { Player, PlayerConfig, PlayerSettings } from './player';

package/dist/ui/player/index.js

@@ -0,0 +1 @@
+export { Player, PlayerConfig, PlayerSettings } from './player';

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

@@ -13,7 +13,7 @@ let overviewPosition = $state({
     right: 0
 });
 const uiManager = config.uiManager;
-const handleContentPlayerMounted = (node) => {
+const handlePlayerMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
         removeListeners();
@@ -74,9 +74,9 @@ const handleSliderMounted = (node) => {
                 break;
             }
         }
-        node.style.setProperty('--_content-player--content--width', width);
-        node.style.setProperty('--_content-player--content--height', height);
-        node.style.setProperty('--_content-player--content--margin', margin);
+        node.style.setProperty('--_player--content--width', width);
+        node.style.setProperty('--_player--content--height', height);
+        node.style.setProperty('--_player--content--margin', margin);
         uiManager.contentViewWidth = contentWidthNumber;
         const verticalIndent = uiManager.isMobileView ? 0 : 13;
         overviewPosition = {
@@ -101,19 +101,19 @@ const handleSliderMounted = (node) => {
     }
   }} />
 
-<div class="content-player" use:handleContentPlayerMounted>
+<div class="player" use:handlePlayerMounted>
   {#if config.settings.showStreamsCloudWatermark}
-    <div class="content-player__watermark">
+    <div class="player__watermark">
       <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
         <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
       </a>
     </div>
   {/if}
   {#if config.playerBuffer}
-    <div class="content-player__slider" use:handleSliderMounted>
+    <div class="player__slider" use:handleSliderMounted>
       <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
         {#snippet children({ item })}
-          <div class="content-player__content">
+          <div class="player__content">
             {@render itemView({ item })}
             {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
               <SwipeIndicator locale={config.settings.locale} />
@@ -145,7 +145,7 @@ const handleSliderMounted = (node) => {
     opacity: 1;
   }
 }
-.content-player {
+.player {
   display: flex;
   flex: 1;
   min-height: 0;
@@ -154,11 +154,11 @@ const handleSliderMounted = (node) => {
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
-  .content-player {
+  .player {
     padding: 0;
   }
 }
-.content-player__slider {
+.player__slider {
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -166,15 +166,15 @@ const handleSliderMounted = (node) => {
   min-height: 100%;
   max-height: 100%;
 }
-.content-player__watermark {
+.player__watermark {
   position: absolute;
   bottom: 5rem;
   left: 4.375rem;
 }
-.content-player__content {
-  width: var(--_content-player--content--width, 100%);
-  height: var(--_content-player--content--height, 100%);
-  margin: var(--_content-player--content--margin, 0);
+.player__content {
+  width: var(--_player--content--width, 100%);
+  height: var(--_player--content--height, 100%);
+  margin: var(--_player--content--margin, 0);
   position: relative;
   display: flex;
   justify-content: center;

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

@@ -1,11 +1,11 @@
 import type { PlayerButtonDef } from '../button';
-import type { ContentPlayerConfig } from './content-player-config.svelte';
+import type { PlayerConfig } from './player-config.svelte';
 import { type Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {
     props(): {
-        config: ContentPlayerConfig<T>;
+        config: PlayerConfig<T>;
         itemActions: PlayerButtonDef[];
         itemView: Snippet<[{
             item: T;

package/dist/ui/player/{content-player → player}/controls-and-attachments.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { slideHorizontally } from '../../../core/transitions';
 import { PlayerButton, ResponsivePlayerButtonsGroup } from '../button';
-import { ContentPlayerConfig } from './content-player-config.svelte';
+import { PlayerConfig } from './player-config.svelte.js';
 import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';

package/dist/ui/player/{content-player → player}/controls-and-attachments.svelte.d.ts

@@ -1,11 +1,11 @@
 import { type PlayerButtonDef } from '../button';
-import { ContentPlayerConfig } from './content-player-config.svelte';
+import { PlayerConfig } from './player-config.svelte.js';
 import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {
     props(): {
-        config: ContentPlayerConfig<T>;
+        config: PlayerConfig<T>;
         hasOverview: boolean;
         itemActions: PlayerButtonDef[];
         attachmentsView?: Snippet<[{

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

@@ -0,0 +1,3 @@
+export { default as Player } from './cmp.player.svelte';
+export { PlayerConfig } from './player-config.svelte.js';
+export { PlayerSettings } from './player-settings.svelte.js';

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

@@ -0,0 +1,3 @@
+export { default as Player } from './cmp.player.svelte';
+export { PlayerConfig } from './player-config.svelte.js';
+export { PlayerSettings } from './player-settings.svelte.js';

package/dist/ui/player/{content-player → player}/overview-panel.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { ContentPlayerConfig } from './content-player-config.svelte';
-import type { ContentPlayerUIManager } from './ui-manager.svelte';
+import type { PlayerConfig } from './player-config.svelte.js';
+import type { PlayerUIManager } from './ui-manager.svelte';
 import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {
     props(): {
-        config: ContentPlayerConfig<T>;
-        uiManager: ContentPlayerUIManager;
+        config: PlayerConfig<T>;
+        uiManager: PlayerUIManager;
         position: {
             top: number;
             bottom: number;

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

@@ -0,0 +1,21 @@
+import type { ICloseOrchestrator } from '../close-orchestrator';
+import type { IPlayerBuffer } from '../providers';
+import type { PlayerSliderCallbacks } from '../slider/types';
+import { PlayerSettings } from './player-settings.svelte';
+import { PlayerUIManager } from './ui-manager.svelte';
+export declare class PlayerConfig<T extends {
+    id: string;
+}> {
+    playerBuffer: IPlayerBuffer<T> | null;
+    readonly settings: PlayerSettings;
+    readonly playerSliderCallbacks: PlayerSliderCallbacks | undefined;
+    readonly closeOrchestrator: ICloseOrchestrator;
+    readonly uiManager: PlayerUIManager;
+    constructor(init: {
+        playerBuffer: IPlayerBuffer<T> | null;
+        settings?: PlayerSettings;
+        playerSliderCallbacks?: PlayerSliderCallbacks;
+        closeOrchestrator: ICloseOrchestrator;
+    });
+    get playerColors(): import("../colors").PlayerColors;
+}

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

@@ -0,0 +1,19 @@
+import { PlayerSettings } from './player-settings.svelte';
+import { PlayerUIManager } from './ui-manager.svelte';
+export class PlayerConfig {
+    playerBuffer = $state.raw(null);
+    settings;
+    playerSliderCallbacks;
+    closeOrchestrator;
+    uiManager = new PlayerUIManager();
+    constructor(init) {
+        const { playerBuffer, settings, playerSliderCallbacks, closeOrchestrator } = init;
+        this.playerBuffer = playerBuffer;
+        this.settings = settings || new PlayerSettings();
+        this.playerSliderCallbacks = playerSliderCallbacks;
+        this.closeOrchestrator = closeOrchestrator;
+    }
+    get playerColors() {
+        return this.settings.playerColors;
+    }
+}

package/dist/ui/player/{content-player/content-player-settings.svelte.d.ts → player/player-settings.svelte.d.ts}

@@ -1,7 +1,7 @@
 import type { Locale } from '../../../core/locale';
 import { type ThemeValue } from '../../../core/theme';
 import { PlayerColors } from '../colors';
-export declare class ContentPlayerSettings {
+export declare class PlayerSettings {
     locale: Locale;
     showStreamsCloudWatermark: boolean;
     allPlayerColors: Record<ThemeValue, PlayerColors>;

package/dist/ui/player/{content-player/content-player-settings.svelte.js → player/player-settings.svelte.js}

@@ -1,6 +1,6 @@
 import { Theme } from '../../../core/theme';
 import { PlayerColors } from '../colors';
-export class ContentPlayerSettings {
+export class PlayerSettings {
     locale = $state('en');
     showStreamsCloudWatermark = $state(false);
     allPlayerColors = $state.raw({

package/dist/ui/player/{content-player → player}/ui-manager.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare class ContentPlayerUIManager {
+export declare class PlayerUIManager {
     overviewCollapsed: boolean;
     readonly overviewCanBeShown: boolean;
     readonly overviewMaxWidth = 150;

package/dist/ui/player/{content-player → player}/ui-manager.svelte.js

@@ -1,7 +1,7 @@
 const ATTACHMENTS_MAX_WIDTH = 176;
 const OVERLAY_MAX_WIDTH = 150;
 const SAFE_AREA_SIZE = 70;
-export class ContentPlayerUIManager {
+export class PlayerUIManager {
     overviewCollapsed = $state(true);
     overviewCanBeShown = $derived.by(() => this.overviewMaxWidth <= this.sidePanelsMaxWidth);
     overviewMaxWidth = OVERLAY_MAX_WIDTH;

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

@@ -5,11 +5,9 @@ export declare class PlayerChunk<TItem extends WithId, TChunk extends WithId> {
     readonly items: TItem[];
     readonly chunkItems: PlayerChunkItem<TItem>[];
     readonly activeChunkItem: PlayerChunkItem<TItem>;
-    readonly isEmpty: boolean;
-    isFullyLoaded: boolean;
     private _chunkItems;
     private _activeItemIndex;
-    private _isLoading;
+    private _fetchDeferred;
     private _itemsLoader;
     constructor(data: {
         chunk: TChunk;
@@ -24,9 +22,9 @@ export declare class PlayerChunk<TItem extends WithId, TChunk extends WithId> {
         };
     });
     get isLoading(): boolean;
+    get canLoadMore(): boolean;
     get activeItemIndex(): number;
     loadMore: () => Promise<TItem[]>;
-    setActiveItemIndex: (index: number, warmUp?: boolean) => Promise<void>;
+    setActiveItemIndex: (index: number) => Promise<void>;
     mutateChunkItems: (items: PlayerChunkItem<TItem>[]) => void;
-    warmUp: () => Promise<void>;
 }

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

@@ -1,73 +1,73 @@
 import { ContinuationToken } from '../../../../core/continuation-token';
 import { CursorDataLoader } from '../../../../core/data-loaders';
+import { Deferred } from '../../../../core/deferred';
 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);
     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);
+    _fetchDeferred = $state.raw(null);
     _itemsLoader;
     constructor(data) {
         const { chunk, provider, callbacks } = data;
         this.model = chunk;
         this._itemsLoader = new CursorDataLoader({
             loadPage: async (continuationToken) => {
-                if (this.isFullyLoaded) {
+                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;
                 }
-                const result = await provider.loadChunkItems(this.model.id, continuationToken.toNextChunkString());
-                const newItems = result.items;
-                this._chunkItems = [
-                    ...this._chunkItems,
-                    ...newItems.map((item) => new PlayerChunkItem({
-                        model: item,
-                        chunkId: this.model.id
-                    }))
-                ];
-                const continuationTokenResult = ContinuationToken.fromPayload(result.continuationToken);
-                if (!continuationTokenResult.canLoadMore) {
-                    this.isFullyLoaded = true;
-                    callbacks?.onChunkFullyLoaded(this);
+                finally {
+                    this._fetchDeferred = null;
                 }
-                return {
-                    items: newItems,
-                    continuationToken: continuationTokenResult
-                };
             }
         });
     }
     get isLoading() {
-        return this._isLoading;
+        return !!this._fetchDeferred;
+    }
+    get canLoadMore() {
+        return this._itemsLoader.continuationToken.canLoadMore;
     }
     get activeItemIndex() {
         return this._activeItemIndex;
     }
     loadMore = () => this._itemsLoader.loadMore();
-    setActiveItemIndex = async (index, warmUp = true) => {
+    setActiveItemIndex = async (index) => {
         this._activeItemIndex = index;
-        if (warmUp) {
-            await this.warmUp();
-        }
     };
     mutateChunkItems = (items) => {
         this._chunkItems = items;
     };
-    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

@@ -4,7 +4,7 @@ export declare class PlayerChunksManager<TItem extends WithId, TChunk extends Wi
     private provider;
     private _activeChunkIndex;
     private _loadedChunks;
-    private _fetchDeferred;
+    private _warmUpDeferred;
     constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): PlayerChunk<TItem, TChunk>;
     get loadedChunks(): PlayerChunk<TItem, TChunk>[];
@@ -15,9 +15,9 @@ export declare class PlayerChunksManager<TItem extends WithId, TChunk extends Wi
     removeItemById: (id: string) => boolean;
     removeChunkById: (id: string) => boolean | undefined;
     initialize: () => Promise<void>;
-    setActiveChunkIndex: (index: number) => Promise<void>;
+    setActiveChunkIndex: (index: number, chunkItemIndex: number) => Promise<void>;
     activateItemAtFlattenedIndex: (index: number) => Promise<void>;
     warmUp: () => Promise<void>;
-    reset: () => void;
-    private populateChunkAtIndex;
+    reset: () => Promise<void>;
+    private warmUpSequentially;
 }

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

@@ -1,12 +1,14 @@
 import { Deferred } from '../../../../core/deferred';
 import { PlayerChunk } from './player-chunk.svelte';
-const CHUNKS_BUFFER_SIZE = 5;
-const FIXED_START_INDEX = 0;
+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([]);
-    _fetchDeferred = $state.raw(null);
+    _warmUpDeferred = $state.raw(null);
     constructor(provider) {
         this.provider = provider;
     }
@@ -17,7 +19,7 @@ export class PlayerChunksManager {
         return this._loadedChunks;
     }
     get isLoading() {
-        return this._fetchDeferred !== null || this._loadedChunks.some((c) => c.isLoading);
+        return this._warmUpDeferred !== null || this._loadedChunks.some((c) => c.isLoading);
     }
     get flattenedChunkItems() {
         return this._loadedChunks.reduce((acc, chunk) => {
@@ -42,8 +44,7 @@ export class PlayerChunksManager {
             return false;
         }
         const itemIndex = chunkWithItem.items.findIndex((item) => item.id === id);
-        this.setActiveChunkIndex(chunkWithItemIndex);
-        this.activeChunk.setActiveItemIndex(itemIndex);
+        this.setActiveChunkIndex(chunkWithItemIndex, itemIndex);
         return true;
     };
     removeItemById = (id) => {
@@ -106,37 +107,27 @@ export class PlayerChunksManager {
         else if (this._activeChunkIndex > chunkIndex) {
             newActiveChunkIndex--;
         }
-        this.setActiveChunkIndex(newActiveChunkIndex);
+        this.setActiveChunkIndex(newActiveChunkIndex, 0);
         return true;
     };
     initialize = async () => {
-        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) {
-                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);
-            }
-        };
         this._loadedChunks = this.provider.initialData.prefetchedChunks.map((chunk) => new PlayerChunk({ chunk, provider: { loadChunkItems: this.provider.loadChunkItems } }));
-        const considerInitialized = this._loadedChunks.length !== 0;
-        if (considerInitialized) {
-            handleInitialized();
-        }
         await this.warmUp();
-        if (!considerInitialized) {
-            handleInitialized();
+        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);
+        // Start background warm-up after initialization
+        this.warmUp();
     };
-    setActiveChunkIndex = async (index) => {
+    setActiveChunkIndex = async (index, chunkItemIndex) => {
         this._activeChunkIndex = index;
-        this._loadedChunks.forEach((c) => c.setActiveItemIndex(0, false));
-        await this.populateChunkAtIndex(this._activeChunkIndex + 1, (currentIndex) => currentIndex + 1);
+        this.activeChunk.setActiveItemIndex(chunkItemIndex);
         // Don't wait for warm up to be finished, it runs in the background
         this.warmUp();
     };
@@ -148,56 +139,82 @@ export class PlayerChunksManager {
             return;
         }
         if (nextItem.chunkId !== activeChunkId) {
-            this.setActiveChunkIndex(this.loadedChunks.findIndex((c) => c.model.id === nextItem.chunkId));
-            this.activeChunk.warmUp();
+            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));
         }
     };
     warmUp = async () => {
-        // Early return if manager is sufficient or already loading
-        if (this._fetchDeferred) {
-            return this._fetchDeferred.promise;
-        }
-        if (this._loadedChunks.length >= this._activeChunkIndex + CHUNKS_BUFFER_SIZE) {
-            return;
+        if (this._warmUpDeferred) {
+            return this._warmUpDeferred.promise;
         }
-        this._fetchDeferred = new Deferred();
+        this._warmUpDeferred = new Deferred();
         try {
-            const result = await this.provider.loadMoreChunks();
-            this._loadedChunks = [
-                ...this._loadedChunks,
-                ...result.map((chunk) => new PlayerChunk({
-                    chunk,
-                    provider: { loadChunkItems: this.provider.loadChunkItems }
-                }))
-            ];
+            await this.warmUpSequentially();
         }
         finally {
-            this._fetchDeferred.resolve();
-            this._fetchDeferred = null;
+            this._warmUpDeferred.resolve();
+            this._warmUpDeferred = null;
         }
     };
-    reset = () => {
+    reset = async () => {
         this._activeChunkIndex = -1;
         this._loadedChunks = [];
-        this._fetchDeferred = null;
-        this.warmUp();
+        this._warmUpDeferred = null;
+        await 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();
+    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
             }
-            return await this.populateChunkAtIndex(nextIndexFn(index), nextIndexFn);
         }
-        return { closestReadyChunkIndex: index };
     };
 }

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

@@ -9,7 +9,11 @@ export class DefaultChunksPlayerBuffer {
         if (this.loaded.length && this.currentIndex < this.loaded.length - 1) {
             return true;
         }
-        return !this._playerChunksManager.isLoading && !!this._onEndReachedFn;
+        // Check if manager is still loading
+        if (this._playerChunksManager.isLoading) {
+            return false; // Don't trigger onEndReached while loading
+        }
+        return !!this._onEndReachedFn;
     });
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "14.0.1",
+  "version": "14.0.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/ui/player/content-player/content-player-config.svelte.d.ts

@@ -1,29 +0,0 @@
-import type { ICloseOrchestrator } from '../close-orchestrator';
-import type { IPlayerBuffer } from '../providers';
-import type { PlayerSliderCallbacks } from '../slider/types';
-import { ContentPlayerSettings } from './content-player-settings.svelte';
-import { ContentPlayerUIManager } from './ui-manager.svelte';
-export declare class ContentPlayerConfig<T extends {
-    id: string;
-}> {
-    playerBuffer: IPlayerBuffer<T> | null;
-    readonly settings: ContentPlayerSettings;
-    readonly playerSliderCallbacks: PlayerSliderCallbacks | undefined;
-    readonly closeOrchestrator: ICloseOrchestrator;
-    readonly uiManager: ContentPlayerUIManager;
-    private _trackingParams;
-    constructor(init: {
-        playerBuffer: IPlayerBuffer<T> | null;
-        settings?: ContentPlayerSettings;
-        playerSliderCallbacks?: PlayerSliderCallbacks;
-        trackingParams?: ContentPlayerTrackingParams | null;
-        closeOrchestrator: ICloseOrchestrator;
-    });
-    get playerColors(): import("../colors").PlayerColors;
-    get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
-    updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
-}
-export type ContentPlayerTrackingParams = {
-    streamId?: string;
-    campaignId?: string;
-} | false;

package/dist/ui/player/content-player/content-player-config.svelte.js

@@ -1,27 +0,0 @@
-import { ContentPlayerSettings } from './content-player-settings.svelte';
-import { ContentPlayerUIManager } from './ui-manager.svelte';
-export class ContentPlayerConfig {
-    playerBuffer = $state.raw(null);
-    settings;
-    playerSliderCallbacks;
-    closeOrchestrator;
-    uiManager = new ContentPlayerUIManager();
-    _trackingParams = $state.raw(null);
-    constructor(init) {
-        const { playerBuffer, trackingParams, settings, playerSliderCallbacks, closeOrchestrator } = init;
-        this.playerBuffer = playerBuffer;
-        this._trackingParams = trackingParams ?? null;
-        this.settings = settings || new ContentPlayerSettings();
-        this.playerSliderCallbacks = playerSliderCallbacks;
-        this.closeOrchestrator = closeOrchestrator;
-    }
-    get playerColors() {
-        return this.settings.playerColors;
-    }
-    get trackingParams() {
-        return this._trackingParams;
-    }
-    updateTrackingParams = (data) => {
-        this._trackingParams = data ?? null;
-    };
-}

package/dist/ui/player/content-player/index.d.ts

@@ -1,3 +0,0 @@
-export { default as ContentPlayer } from './cmp.content-player.svelte';
-export { ContentPlayerConfig } from './content-player-config.svelte';
-export { ContentPlayerSettings } from './content-player-settings.svelte';

package/dist/ui/player/content-player/index.js

@@ -1,3 +0,0 @@
-export { default as ContentPlayer } from './cmp.content-player.svelte';
-export { ContentPlayerConfig } from './content-player-config.svelte';
-export { ContentPlayerSettings } from './content-player-settings.svelte';