@streamscloud/embeddable 9.0.0 → 10.1.0

package/dist/streams/layout/slot-data-input.d.ts

@@ -1,5 +1,5 @@
 import { StreamComponentDataType } from './enums';
-export type StreamSlotDataInput = ImagesStreamSlotDataInput | ProductStreamSlotDataInput | ShortVideoStreamSlotDataInput;
+export type StreamSlotDataInput = ImagesStreamSlotDataInput | ProductStreamSlotDataInput | ProductsStreamSlotDataInput | ShortVideoStreamSlotDataInput;
 export interface ImagesStreamSlotDataInput {
     type: StreamComponentDataType.Images;
     ids: string[];
@@ -8,6 +8,10 @@ export interface ProductStreamSlotDataInput {
     type: StreamComponentDataType.Product;
     id: string;
 }
+export interface ProductsStreamSlotDataInput {
+    type: StreamComponentDataType.Products;
+    ids: string[];
+}
 export interface ShortVideoStreamSlotDataInput {
     type: StreamComponentDataType.ShortVideo;
     id: string;

package/dist/streams/layout/slot-data-ref.d.ts

@@ -1,5 +1,5 @@
-import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData } from './slot-data';
-export type StreamSlotDataRef = Partial<Pick<ImagesStreamSlotData, 'items'>> & Partial<Pick<ProductStreamSlotData, 'product'>> & Partial<Pick<ShortVideoStreamSlotData, 'shortVideo'>>;
+import type { ImagesStreamSlotData, ProductsStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData } from './slot-data';
+export type StreamSlotDataRef = Partial<Pick<ImagesStreamSlotData, 'items'>> & Partial<Pick<ProductStreamSlotData, 'product'>> & Partial<Pick<ProductsStreamSlotData, 'products'>> & Partial<Pick<ShortVideoStreamSlotData, 'shortVideo'>>;
 type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]];
 type Join<K, P> = K extends string | number ? (P extends string | number ? `${K}${'' extends P ? '' : '.'}${P}` : never) : never;
 type IsPrimitive<T> = T extends string | number | boolean | null | undefined ? true : false;

package/dist/streams/layout/slot-data.d.ts

@@ -1,6 +1,6 @@
 import { StreamComponentDataType } from './enums';
 import type { StreamLayoutBlobModel, StreamLayoutProductModel, StreamLayoutShortVideoModel } from './models';
-export type StreamSlotData = ImagesStreamSlotData | ProductStreamSlotData | ShortVideoStreamSlotData;
+export type StreamSlotData = ImagesStreamSlotData | ProductStreamSlotData | ProductsStreamSlotData | ShortVideoStreamSlotData;
 export type ImagesStreamSlotData = {
     type: StreamComponentDataType.Images;
     ids: string[];
@@ -11,6 +11,11 @@ export type ProductStreamSlotData = {
     id: string;
     product: StreamLayoutProductModel | null;
 };
+export type ProductsStreamSlotData = {
+    type: StreamComponentDataType.Products;
+    ids: string[];
+    products: StreamLayoutProductModel[];
+};
 export type ShortVideoStreamSlotData = {
     type: StreamComponentDataType.ShortVideo;
     id: string;

package/dist/streams/layout/styles-transformer.d.ts

@@ -1,8 +1,10 @@
 import { StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
-import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
+import type { AnnotationStreamElementStyles, ButtonStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, ProductsSliderStreamElementStyles, StreamLayoutStyles, TextStreamElementStyles } from './styles';
 export declare const generateStreamLayoutStyles: (styles: StreamLayoutStyles | null) => string;
 export declare const generateContainerStyles: (styles: Partial<ContainerStreamElementStyles> | null) => string;
+export declare const generateButtonStyles: (styles: Partial<ButtonStreamElementStyles> | null) => string;
 export declare const generateAnnotationStyles: (styles: AnnotationStreamElementStyles, placement: AnnotationStreamElementPlacement) => string;
+export declare const generateProductsSliderStyles: (styles: Partial<ProductsSliderStreamElementStyles> | null) => string;
 export declare const generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
 export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
 export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -32,6 +32,32 @@ export const generateContainerStyles = (styles) => {
     }
     return values.join(';');
 };
+export const generateButtonStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        'display: flex',
+        `justify-content: ${mapFlexJustifyContent(styles.textAlign)}`,
+        `text-align: ${mapTextAlign(styles.textAlign)}`,
+        `align-items: center`,
+        `min-width: ${transformNumericValue(styles.minWidth, '0')}`,
+        `max-width: ${transformNumericValue(styles.maxWidth, '100%')}`,
+        `height: ${transformNumericValue(styles.height, 'fit-content')}`,
+        `font-family: ${mapFontFamily(styles.fontFamily)}`,
+        `font-size: ${transformFontSizeValue(styles.fontSize)}`,
+        `font-weight: ${mapFontWeight(styles.fontWeight)}`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)}`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)}`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `color: ${transformColorValue(styles.textColor)}`,
+        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `border-width: ${styles.borderColor ? '1px' : '0'}`,
+        `border-radius: ${transformNumericValue(styles.borderRadius)}`,
+        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `overflow: hidden`
+    ];
+    return values.join(';');
+};
 export const generateAnnotationStyles = (styles, placement) => {
     const values = [`height: ${transformNumericValue(styles.height)}`, `aspect-ratio: ${styles.aspectRatio}`, 'position: absolute'];
     switch (placement) {
@@ -56,6 +82,27 @@ export const generateAnnotationStyles = (styles, placement) => {
     }
     return values.join(';');
 };
+export const generateProductsSliderStyles = (styles) => {
+    styles = styles || {};
+    const values = [
+        'display: flex',
+        'flex-direction: row',
+        `width: 100%`,
+        `height: 100%`,
+        `gap: ${transformNumericValue(styles.gap)}`,
+        `padding-top: ${transformNumericValue(styles.paddingTop)}`,
+        `padding-right: ${transformNumericValue(styles.paddingRight)}`,
+        `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
+        `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `overflow-x: auto`,
+        `overflow-y: hidden`,
+        `scrollbar-width: none`,
+        `scroll-padding-left: ${transformNumericValue(styles.paddingLeft)}`,
+        `scroll-padding-right: ${transformNumericValue(styles.paddingRight)}`
+    ];
+    return values.join(';');
+};
 export const generateTextStyles = (styles) => {
     styles = styles || {};
     const values = [

package/dist/streams/layout/styles.d.ts

@@ -10,6 +10,23 @@ export type AnnotationStreamElementStyles = {
     offsetX: number;
     offsetY: number;
 };
+export type ButtonStreamElementStyles = {
+    minWidth?: number | null;
+    maxWidth?: number | null;
+    height?: number | null;
+    fontSize?: number | null;
+    fontWeight?: StreamElementStyleFontWeight | null;
+    fontFamily?: StreamElementStyleFontFamily | null;
+    textAlign?: StreamElementStyleHorizontalAlign | null;
+    paddingTop?: number | null;
+    paddingRight?: number | null;
+    paddingBottom?: number | null;
+    paddingLeft?: number | null;
+    textColor?: string | null;
+    backgroundColor?: string | null;
+    borderRadius?: number | null;
+    borderColor?: string | null;
+};
 export type ContainerStreamElementStyles = {
     width?: StreamCssValue | null;
     height?: StreamCssValue | null;
@@ -38,6 +55,14 @@ export type PriceStreamElementStyles = {
     beforeValueColor?: string | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;
 };
+export type ProductsSliderStreamElementStyles = {
+    gap?: number;
+    paddingTop?: number | null;
+    paddingBottom?: number | null;
+    paddingLeft?: number | null;
+    paddingRight?: number | null;
+    backgroundColor?: string | null;
+};
 export type StockStreamElementStyles = {
     height?: number | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;

package/dist/streams/layout/type-guards.d.ts

@@ -1,18 +1,22 @@
-import type { AnnotationStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, ShortVideoStreamElementModel, SpacerStreamElementModel, StockStreamElementModel, TextRefStreamElementModel, TextStreamElementModel, WebViewStreamElementModel } from './elements';
+import type { AnnotationStreamElementModel, ButtonStreamElementModel, ContainerStreamElementModel, ImageRefStreamElementModel, ImagesStreamElementModel, PriceStreamElementModel, ProductsSliderStreamElementModel, ShortVideoStreamElementModel, SpacerStreamElementModel, StockStreamElementModel, TextRefStreamElementModel, TextStreamElementModel, WebViewStreamElementModel } from './elements';
 import { StreamElementType } from './enums';
-import type { ImagesStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
-import type { ImagesStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
-import type { AnnotationStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, StockStreamElementStyles, TextStreamElementStyles } from './styles';
+import type { ImagesStreamSlotData, ProductsStreamSlotData, ProductStreamSlotData, ShortVideoStreamSlotData, StreamSlotData } from './slot-data';
+import type { ImagesStreamSlotDataInput, ProductsStreamSlotDataInput, ProductStreamSlotDataInput, ShortVideoStreamSlotDataInput, StreamSlotDataInput } from './slot-data-input';
+import type { AnnotationStreamElementStyles, ButtonStreamElementStyles, ContainerStreamElementStyles, ImageStreamElementStyles, PriceStreamElementStyles, ProductsSliderStreamElementStyles, StockStreamElementStyles, TextStreamElementStyles } from './styles';
 export declare function isImagesSlotDataInput(data: StreamSlotDataInput | null): data is ImagesStreamSlotDataInput;
 export declare function isProductSlotDataInput(data: StreamSlotDataInput | null): data is ProductStreamSlotDataInput;
+export declare function isProductsSlotDataInput(data: StreamSlotDataInput | null): data is ProductsStreamSlotDataInput;
 export declare function isShortVideoSlotDataInput(data: StreamSlotDataInput | null): data is ShortVideoStreamSlotDataInput;
 export declare function isImagesSlotData(data: StreamSlotData | null): data is ImagesStreamSlotData;
 export declare function isProductSlotData(data: StreamSlotData | null): data is ProductStreamSlotData;
+export declare function isProductsSlotData(data: StreamSlotData | null): data is ProductsStreamSlotData;
 export declare function isShortVideoSlotData(data: StreamSlotData | null): data is ShortVideoStreamSlotData;
 export type ElementTypeToStylesMap = {
     [StreamElementType.Annotation]: AnnotationStreamElementStyles;
+    [StreamElementType.Button]: ButtonStreamElementStyles;
     [StreamElementType.Container]: ContainerStreamElementStyles;
     [StreamElementType.Price]: PriceStreamElementStyles;
+    [StreamElementType.ProductsSlider]: ProductsSliderStreamElementStyles;
     [StreamElementType.ImageRef]: ImageStreamElementStyles;
     [StreamElementType.Stock]: StockStreamElementStyles;
     [StreamElementType.Text]: TextStreamElementStyles;
@@ -20,10 +24,12 @@ export type ElementTypeToStylesMap = {
 };
 export type ElementTypeToModelMap = {
     [StreamElementType.Annotation]: AnnotationStreamElementModel;
+    [StreamElementType.Button]: ButtonStreamElementModel;
     [StreamElementType.Container]: ContainerStreamElementModel;
     [StreamElementType.ImageRef]: ImageRefStreamElementModel;
     [StreamElementType.Images]: ImagesStreamElementModel;
     [StreamElementType.Price]: PriceStreamElementModel;
+    [StreamElementType.ProductsSlider]: ProductsSliderStreamElementModel;
     [StreamElementType.ShortVideo]: ShortVideoStreamElementModel;
     [StreamElementType.Spacer]: SpacerStreamElementModel;
     [StreamElementType.Stock]: StockStreamElementModel;
@@ -34,6 +40,7 @@ export type ElementTypeToModelMap = {
 export declare const NotAllowedElementTypesForComponent: {
     IMAGES: StreamElementType[];
     PRODUCT: StreamElementType[];
+    PRODUCTS: StreamElementType[];
     SHORT_VIDEO: StreamElementType[];
     NO_DATA: StreamElementType[];
 };

package/dist/streams/layout/type-guards.js

@@ -6,6 +6,9 @@ export function isImagesSlotDataInput(data) {
 export function isProductSlotDataInput(data) {
     return data?.type === StreamComponentDataType.Product;
 }
+export function isProductsSlotDataInput(data) {
+    return data?.type === StreamComponentDataType.Products;
+}
 export function isShortVideoSlotDataInput(data) {
     return data?.type === StreamComponentDataType.ShortVideo;
 }
@@ -16,17 +19,28 @@ export function isImagesSlotData(data) {
 export function isProductSlotData(data) {
     return data?.type === StreamComponentDataType.Product;
 }
+export function isProductsSlotData(data) {
+    return data?.type === StreamComponentDataType.Products;
+}
 export function isShortVideoSlotData(data) {
     return data?.type === StreamComponentDataType.ShortVideo;
 }
 export const NotAllowedElementTypesForComponent = {
-    [StreamComponentDataType.Images]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.ShortVideo, StreamElementType.TextRef],
-    [StreamComponentDataType.Product]: [StreamElementType.Images, StreamElementType.ShortVideo],
-    [StreamComponentDataType.ShortVideo]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.TextRef],
+    [StreamComponentDataType.Images]: [
+        StreamElementType.ImageRef,
+        StreamElementType.Price,
+        StreamElementType.ProductsSlider,
+        StreamElementType.ShortVideo,
+        StreamElementType.TextRef
+    ],
+    [StreamComponentDataType.Product]: [StreamElementType.Images, StreamElementType.ProductsSlider, StreamElementType.ShortVideo],
+    [StreamComponentDataType.Products]: [StreamElementType.Images, StreamElementType.ShortVideo],
+    [StreamComponentDataType.ShortVideo]: [StreamElementType.ImageRef, StreamElementType.Price, StreamElementType.ProductsSlider, StreamElementType.TextRef],
     [StreamComponentDataType.NoData]: [
         StreamElementType.ImageRef,
         StreamElementType.Images,
         StreamElementType.Price,
+        StreamElementType.ProductsSlider,
         StreamElementType.ShortVideo,
         StreamElementType.TextRef
     ]

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