@streamscloud/embeddable 8.3.0 → 10.0.0

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

@@ -1,25 +1,21 @@
 import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
-import { mapToStreamPlayerModel } from './mapper';
-import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel, StreamPlayerSettings } from './types';
-export { type StreamPlayerModel, type StreamPageViewerModel, mapToStreamPlayerModel };
-export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
+import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel, StreamsPlayerSettings } from './types';
+export { type StreamPlayerModel, type StreamPageViewerModel };
+export { mapToStreamPlayerModel } from '../data-loaders/mapper';
+export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
 /**
- * Opens the stream player modal.
+ * Opens the streams player modal.
  *
  * Two overloads (mutually exclusive; enforced by TypeScript):
- * - Provider mode: openStreamPlayer({ dataProvider, mediaCenterConfig?, analyticsHandler?, ...common })
- * - Internal provider mode: openStreamPlayer({ initiator, graphqlOrigin?, mediaPageId?, ...common })
+ * - Provider mode: openStreamsPlayer({ dataProvider, mediaCenterConfig?, analyticsHandler? })
+ * - Internal provider mode: openStreamsPlayer({ ids, initiator, graphqlOrigin?, initialId?, mediaPageId? })
  *
  * @param init Configuration options.
  *
- * Common (required)
- * @param {string} init.streamId
- *   The ID of the stream to open.
- *
  * Provider mode (overload 1)
- * @param {IStreamPlayerDataProvider} init.dataProvider
+ * @param {IStreamsPlayerDataProvider} init.dataProvider
  *   Provider that supplies the stream data to the player.
  * @param {IMediaCenterConfig} [init.mediaCenterConfig]
  *   Optional media-center config.
@@ -28,10 +24,14 @@ export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterCo
  *   If omitted in provider mode, analytics is not auto-initialized.
  *
  * Internal provider mode (overload 2)
+ * @param {string[]} init.ids
+ *   List of stream IDs to display.
  * @param {string} init.initiator
  *   Initiator identifier (used for tracking/analytics and GraphQL).
  * @param {string} [init.graphqlOrigin]
  *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
+ *   @param {string} [init.initialId]
+ *   ID of the stream to open first (optional).
  * @param {string} [init.mediaPageId]
  *   Optional media page ID used to construct an internal media-center config.
  *
@@ -69,7 +69,6 @@ export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterCo
  * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
  *
  * openStreamPlayer({
- *   streamId: 'stream_123',
  *   dataProvider: myStreamProvider,
  *   mediaCenterConfig: myMediaCenterProvider,
  *   analyticsHandler: myAnalyticsHandler,
@@ -91,8 +90,8 @@ export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterCo
  * ```ts
  * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
  *
- * openStreamPlayer({
- *   streamId: 'stream_123',
+ * openStreamsPlayer({
+ *   ids: ['stream_123'],
  *   initiator: 'marketing-campaign',
  *   graphqlOrigin: 'https://api.example.com',
  *   mediaPageId: 'media-page-123',
@@ -109,14 +108,13 @@ export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterCo
  * });
  * ```
  */
-export declare function openStreamPlayer(init: {
-    streamId: string;
-    dataProvider: IStreamPlayerDataProvider;
+export declare function openStreamsPlayer(init: {
+    dataProvider: IStreamsPlayerDataProvider;
     mediaCenterConfig?: IMediaCenterConfig;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: StreamPlayerSettings;
+    playerSettings?: StreamsPlayerSettings;
     on?: {
         streamActivated?: (data: {
             title: string;
@@ -125,13 +123,14 @@ export declare function openStreamPlayer(init: {
         playerClosed?: () => void;
     };
 }): void;
-export declare function openStreamPlayer(init: {
-    streamId: string;
+export declare function openStreamsPlayer(init: {
+    ids: string[];
     initiator: string;
     graphqlOrigin?: string;
+    initialId?: string;
     mediaPageId?: string;
     amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: StreamPlayerSettings;
+    playerSettings?: StreamsPlayerSettings;
     on?: {
         streamActivated?: (data: {
             title: string;

package/dist/streams/{stream-player → streams-player}/index.js

@@ -4,13 +4,16 @@ import {} from '../../media-center/config/types';
 import { MediaCenter } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';
-import { InternalStreamPlayerDataProvider } from './internal-stream-player-data-provider';
-import { mapToStreamPlayerModel } from './mapper';
+import { InternalStreamsPlayerDataProvider } from './internal-streams-player-data-provider';
 import { mount, unmount } from 'svelte';
-export { mapToStreamPlayerModel };
-export function openStreamPlayer(init) {
-    const { streamId, graphqlOrigin, postSocialInteractionsHandler, initiator, amplificationParameters, playerSettings, on } = init;
-    const dataProvider = init.dataProvider ?? new InternalStreamPlayerDataProvider({ graphqlOrigin, initiator });
+export {};
+export { mapToStreamPlayerModel } from '../data-loaders/mapper';
+export function openStreamsPlayer(init) {
+    const { ids, initialId, graphqlOrigin, postSocialInteractionsHandler, initiator, amplificationParameters, playerSettings, on } = init;
+    let dataProvider = init.dataProvider;
+    if (!dataProvider && ids?.length) {
+        dataProvider = new InternalStreamsPlayerDataProvider({ ids, initialId, graphqlOrigin, initiator });
+    }
     if (!dataProvider) {
         toastrWarning('Data provider is not specified.');
         return;
@@ -32,7 +35,6 @@ export function openStreamPlayer(init) {
             playerProps: {
                 mode: 'stream',
                 props: {
-                    streamId,
                     dataProvider,
                     analyticsHandler,
                     amplificationParameters,

package/dist/streams/streams-player/internal-streams-player-data-provider.d.ts

@@ -0,0 +1,16 @@
+import type { IStreamsPlayerDataProvider } from './types';
+export declare class InternalStreamsPlayerDataProvider implements IStreamsPlayerDataProvider {
+    initialData: IStreamsPlayerDataProvider['initialData'];
+    private ids;
+    private idOrder;
+    private graphql;
+    private dataLoader;
+    constructor(input: {
+        ids: string[];
+        initiator?: string;
+        graphqlOrigin?: string;
+        initialId?: string;
+    });
+    loadMoreStreams: IStreamsPlayerDataProvider['loadMoreStreams'];
+    getStreamPages: IStreamsPlayerDataProvider['getStreamPages'];
+}

package/dist/streams/streams-player/internal-streams-player-data-provider.js

@@ -0,0 +1,55 @@
+import { ContinuationToken } from '../../core/continuation-token';
+import { CursorDataLoader } from '../../core/data-loaders';
+import { createLocalGQLClient } from '../../core/graphql';
+import { getStreamPagesCursor, getStreamsCursor } from '../data-loaders';
+const CHUNK_SIZE = 5;
+export class InternalStreamsPlayerDataProvider {
+    initialData;
+    ids;
+    idOrder = new Map();
+    graphql;
+    dataLoader = new CursorDataLoader({
+        loadPage: async (continuationToken) => {
+            const startIdIndex = continuationToken.value ? parseInt(continuationToken.value, 10) : 0;
+            const endIdIndex = Math.min(startIdIndex + CHUNK_SIZE, this.ids.length);
+            const idsChunk = this.ids.slice(startIdIndex, endIdIndex);
+            try {
+                const streams = await getStreamsCursor({
+                    filter: { ids: idsChunk },
+                    limit: idsChunk.length,
+                    graphql: this.graphql
+                });
+                const items = streams.items.sort((a, b) => {
+                    const ia = this.idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+                    const ib = this.idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+                    return ia - ib;
+                });
+                return {
+                    items,
+                    continuationToken: ContinuationToken.fromPayload(endIdIndex < this.ids.length ? endIdIndex.toString() : null)
+                };
+            }
+            catch {
+                return null;
+            }
+        }
+    });
+    constructor(input) {
+        const { ids, initialId, graphqlOrigin, initiator } = input;
+        this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
+        this.ids = ids;
+        if (initialId && this.ids.includes(initialId)) {
+            this.ids = [initialId, ...this.ids.filter((id) => id !== initialId)];
+        }
+        this.ids.forEach((id, index) => this.idOrder.set(id, index));
+        this.initialData = { prefetchedStreams: [] };
+    }
+    loadMoreStreams = () => this.dataLoader.loadMore();
+    getStreamPages = async (streamId, continuationToken) => {
+        return await getStreamPagesCursor({
+            streamId,
+            continuationToken,
+            graphql: this.graphql
+        });
+    };
+}

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

@@ -41,22 +41,25 @@ let { model, buffer, activePageId, on, localization } = $props();
     {localization.pagesCount(model.pagesCount)}
   </div>
 </div>
+
 <div class="stream-overview-pages">
-  <InfiniteScrolling loadMore={buffer.loadMore}>
-    <div class="stream-overview-pages__grid">
-      {#each buffer.loaded as item, index (item.id)}
-        <button
-          type="button"
-          class="stream-overview-pages__page"
-          class:stream-overview-pages__page--active={activePageId === item.id}
-          onclick={() => on.setCurrentItem(index)}>
-          <ProportionalContainer ratio={9 / 16}>
-            <Image src={item.cover} />
-          </ProportionalContainer>
-        </button>
-      {/each}
-    </div>
-  </InfiniteScrolling>
+  {#if buffer.activeChunk}
+    <InfiniteScrolling loadMore={buffer.activeChunk.loadMore}>
+      <div class="stream-overview-pages__grid">
+        {#each buffer.activeChunk.items as item, index (item.id)}
+          <button
+            type="button"
+            class="stream-overview-pages__page"
+            class:stream-overview-pages__page--active={activePageId === item.id}
+            onclick={() => on.setCurrentItem(index)}>
+            <ProportionalContainer ratio={9 / 16}>
+              <Image src={item.cover} />
+            </ProportionalContainer>
+          </button>
+        {/each}
+      </div>
+    </InfiniteScrolling>
+  {/if}
 </div>
 
 <style>@keyframes fadeIn {

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

@@ -1,9 +1,9 @@
-import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
+import type { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
 import type { StreamPlayerModel } from './types';
 type Props = {
     model: StreamPlayerModel;
-    buffer: StreamPlayerBuffer;
+    buffer: StreamsPlayerBuffer;
     activePageId: string;
     localization: StreamPlayerLocalization;
     on: {

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

@@ -0,0 +1,8 @@
+import type { StreamPageViewerModel } from '../stream-page-viewer';
+import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
+import type { IStreamsPlayerDataProvider, StreamPlayerModel } from './types';
+export declare class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer<StreamPageViewerModel, StreamPlayerModel> {
+    constructor(provider: IStreamsPlayerDataProvider, on?: {
+        preloaded?: (self: StreamsPlayerBuffer) => void;
+    });
+}

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

@@ -0,0 +1,15 @@
+import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
+export class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer {
+    constructor(provider, on) {
+        super({
+            kind: 'chunks',
+            initialData: {
+                prefetchedChunks: provider.initialData.prefetchedStreams
+            },
+            loadMoreChunks: async () => {
+                return await provider.loadMoreStreams();
+            },
+            loadChunkItems: provider.getStreamPages
+        }, on);
+    }
+}

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>;
+}