@streamscloud/embeddable 5.1.2 → 6.0.0

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -4,14 +4,14 @@ export declare class ShortVideosPlayerUiManager {
     isMobileView: boolean;
     viewInitialized: boolean;
     showShortVideoOverlay: boolean;
-    private readonly buttonSize;
-    private readonly iconSize;
-    private readonly controlsOffsetHorizontal;
-    private readonly controlsOffsetVertical;
-    private viewTotalWidth;
-    private mainViewColumnWidth;
+    private _viewTotalWidth;
+    private _mainViewColumnWidth;
+    private _mediaCenterHeaderHeight;
+    get viewTotalWidth(): number;
+    get mainViewColumnWidth(): number;
     updateDimensions: (dimensions: {
         viewTotalWidth: number;
         mainViewColumnWidth: number;
     }) => void;
+    updateMediaCenterHeaderHeight: (height: number) => void;
 }

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,26 +1,38 @@
+const CONTROLS_PADDING_HORIZONTAL = 28;
+const CONTROLS_PADDING_VERTICAL = 28;
+const PLAYER_PADDING_VERTICAL = 10;
+const BUTTON_SIZE = 48;
+const ICON_SIZE = 28;
 export class ShortVideosPlayerUiManager {
     showAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--short-videos-player--button--size: ${this.buttonSize}px`,
-            `--short-videos-player--icon--size: ${this.iconSize}px`,
-            `--short-videos-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--short-videos-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--short-videos-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+            `--short-videos-player--button--size: ${BUTTON_SIZE}px`,
+            `--short-videos-player--controls--available-space: ${(this._viewTotalWidth - this._mainViewColumnWidth) / 2}px`,
+            `--short-videos-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
+            `--short-videos-player--icon--size: ${ICON_SIZE}px`,
+            `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight}px`,
+            `--short-videos-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
         ];
         return values.join(';');
     });
-    isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    viewInitialized = $derived.by(() => !!this.viewTotalWidth && !!this.mainViewColumnWidth);
-    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
-    buttonSize = 48;
-    iconSize = 28;
-    controlsOffsetHorizontal = 28;
-    controlsOffsetVertical = 28;
-    viewTotalWidth = $state(0);
-    mainViewColumnWidth = $state(0);
+    isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
+    viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
+    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this._viewTotalWidth - this._mainViewColumnWidth) / 2 <= 85);
+    _viewTotalWidth = $state(0);
+    _mainViewColumnWidth = $state(0);
+    _mediaCenterHeaderHeight = $state(0);
+    get viewTotalWidth() {
+        return this._viewTotalWidth;
+    }
+    get mainViewColumnWidth() {
+        return this._mainViewColumnWidth;
+    }
     updateDimensions = (dimensions) => {
-        this.viewTotalWidth = dimensions.viewTotalWidth;
-        this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
+        this._viewTotalWidth = dimensions.viewTotalWidth;
+        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
+    };
+    updateMediaCenterHeaderHeight = (height) => {
+        this._mediaCenterHeaderHeight = height;
     };
 }

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -5,4 +5,9 @@ let { data, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(localizationInit));
 </script>
 
-<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} localization={localization.shortVideoViewerLocalization} on={on} />
+<ShortVideoViewer
+  model={mapToShortVideoViewerModel(data)}
+  autoplay={false}
+  showControls={false}
+  localization={localization.shortVideoViewerLocalization}
+  on={on} />

package/dist/streams/stream-page-viewer/index.d.ts

@@ -1,3 +1,4 @@
 export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
 export type { StreamPageViewerModel } from './types';
 export type { IStreamPageViewerLocalization } from './stream-page-viewer-localization';
+export { mapToStreamPageViewerModel } from './mapper';

package/dist/streams/stream-page-viewer/index.js

@@ -1 +1,2 @@
 export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
+export { mapToStreamPageViewerModel } from './mapper';

package/dist/streams/stream-player/controls.svelte

@@ -9,7 +9,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 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';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { buffer, uiManager, shortVideoSocialInteractionsHandler, localization, on } = $props();
+let { buffer, uiManager, postSocialInteractionsHandler, localization, on } = $props();
 const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
 const singleWebViewPage = $derived.by(() => {
     var _a;
@@ -58,7 +58,7 @@ const changeShowShortVideoAttachments = () => {
           {/if}
           <ShortVideoControls
             model={shortVideo}
-            socialInteractionsHandler={shortVideoSocialInteractionsHandler}
+            socialInteractionsHandler={postSocialInteractionsHandler}
             on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
         </div>
       {/if}

package/dist/streams/stream-player/controls.svelte.d.ts

@@ -1,11 +1,11 @@
-import { type ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import { type IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: StreamPlayerBuffer;
     uiManager: StreamPlayerUiManager;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     localization: StreamPlayerLocalization;
     on: {
         closePlayer: () => void;

package/dist/streams/stream-player/index.d.ts

@@ -1,41 +1,98 @@
-import type { ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import { type IMediaCenterDataProvider } from '../../media-center/data-provider';
+import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import type { IStreamPlayerLocalization } from './stream-player-localization';
-export type { IStreamPlayerLocalization };
+import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, PlayerSettings, StreamPlayerModel } from './types';
+export type { IStreamPlayerLocalization, IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterDataProvider, StreamPlayerModel, StreamPageViewerModel };
 /**
- * Opens the stream player modal with the specified stream details.
+ * Opens the stream player modal.
  *
- * @param init - Configuration options.
- * @param {string} init.streamId - The ID of the stream to open.
- * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
- * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- * @param init.on - Available callbacks.
+ * Two overloads (mutually exclusive; enforced by TypeScript):
+ * - Provider mode: openStreamPlayer({ dataProvider, mediaCenterDataProvider?, analyticsHandler?, ...common })
+ * - Internal provider mode: openStreamPlayer({ initiator, graphqlOrigin?, mediaPageId?, ...common })
  *
- * @example
+ * @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
+ *   Provider that supplies the stream data to the player.
+ * @param {IMediaCenterDataProvider} [init.mediaCenterDataProvider]
+ *   Optional media-center data provider.
+ * @param {IStreamAnalyticsHandler} [init.analyticsHandler]
+ *   Optional analytics handler to capture player/stream analytics events.
+ *   If omitted in provider mode, analytics is not auto-initialized.
+ *
+ * Internal provider mode (overload 2)
+ * @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.mediaPageId]
+ *   Optional media page ID used to construct an internal media-center data provider.
+ *
+ * Common (optional)
+ * @param {IStreamPlayerLocalization | Locale} [init.localization]
+ *   Localization for the player UI. If omitted, 'en' is used.
+ * @param {boolean} [init.showStreamsCloudWatermark]
+ *   If true, shows the StreamsCloud watermark.
+ * @param {IPostSocialInteractionsHandler} [init.postSocialInteractionsHandler]
+ *   Handler for social interactions (like, share, etc.).
+ *
+ * Events
+ * @param {{ streamActivated?: (data: { title: string; image: string | null }) => void; playerClosed?: () => void }} [init.on]
+ *   Optional event handlers.
+ * @param {(data: { title: string; image: string | null }) => void} [init.on.streamActivated]
+ *   Called when the stream becomes active. Receives a subset of data with title and image.
+ * @param {() => void} [init.on.playerClosed]
+ *   Called after the player is fully closed (after unmount and removal from the DOM).
+ *
+ * @returns {void}
+ *
+ * @example <caption>Provider mode</caption>
+ * ```ts
+ * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
+ *
+ * openStreamPlayer({
+ *   streamId: 'stream_123',
+ *   dataProvider: myStreamProvider,
+ *   mediaCenterDataProvider: myMediaCenterProvider,
+ *   analyticsHandler: myAnalyticsHandler,
+ *   localization: { play: 'Play', pause: 'Pause' },
+ *   showStreamsCloudWatermark: true,
+ *   on: {
+ *     streamActivated: ({ title, image }) => console.log('Stream active:', title, image),
+ *     playerClosed: () => console.log('Player closed')
+ *   }
+ * });
+ * ```
+ *
+ * @example <caption>Internal provider mode</caption>
  * ```ts
  * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
  *
  * openStreamPlayer({
- *   streamId: '...',
+ *   streamId: 'stream_123',
+ *   initiator: 'marketing-campaign',
  *   graphqlOrigin: 'https://api.example.com',
- *   localization: {
- *     play: 'Play',
- *     pause: 'Pause'
+ *   mediaPageId: 'media-page-123',
+ *   localization: { play: 'Play', pause: 'Pause' },
+ *   on: {
+ *     streamActivated: ({ title, image }) => console.log('Stream active:', title, image),
+ *     playerClosed: () => console.log('Player closed')
  *   }
  * });
  * ```
  */
-export declare const openStreamPlayer: (init: {
-    streamId: string;
+export declare function openStreamPlayer(init: PlayerSettings & {
+    dataProvider: IStreamPlayerDataProvider;
+    mediaCenterDataProvider?: IMediaCenterDataProvider;
+    analyticsHandler?: IStreamAnalyticsHandler;
+}): void;
+export declare function openStreamPlayer(init: PlayerSettings & {
+    initiator: string;
     graphqlOrigin?: string;
-    localization?: IStreamPlayerLocalization | "en" | "no";
-    showStreamsCloudWatermark?: boolean;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    initiator?: string;
-    on?: {
-        streamActivated?: (data: {
-            title: string;
-            image: string | null;
-        }) => void;
-        playerClosed?: () => void;
-    };
-}) => void;
+    mediaPageId?: string;
+}): void;

package/dist/streams/stream-player/index.js

@@ -1,59 +1,57 @@
-import { getLocale } from '../../core/locale';
+import { toastrWarning } from '../../core/toastr';
+import { InternalMediaCenterDataProvider } from '../../media-center/data-provider';
+import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
-import { default as StreamPlayer } from './cmp.stream-player.svelte';
-import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+import { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';
+import { InternalStreamPlayerDataProvider } from './internal-stream-player-data-provider';
 import { mount, unmount } from 'svelte';
-/**
- * Opens the stream player modal with the specified stream details.
- *
- * @param init - Configuration options.
- * @param {string} init.streamId - The ID of the stream to open.
- * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
- * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- * @param init.on - Available callbacks.
- *
- * @example
- * ```ts
- * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
- *
- * openStreamPlayer({
- *   streamId: '...',
- *   graphqlOrigin: 'https://api.example.com',
- *   localization: {
- *     play: 'Play',
- *     pause: 'Pause'
- *   }
- * });
- * ```
- */
-export const openStreamPlayer = (init) => {
-    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator } = init;
+export function openStreamPlayer(init) {
+    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, postSocialInteractionsHandler, initiator } = init;
+    const dataProvider = init.dataProvider ?? new InternalStreamPlayerDataProvider({ graphqlOrigin, initiator });
+    if (!dataProvider) {
+        toastrWarning('Data provider is not specified.');
+        return;
+    }
+    let mediaCenterDataProvider = init.mediaCenterDataProvider;
+    if (!mediaCenterDataProvider && init.mediaPageId) {
+        mediaCenterDataProvider = new InternalMediaCenterDataProvider(init.mediaPageId, graphqlOrigin);
+    }
+    let analyticsHandler = init.analyticsHandler;
+    if (!analyticsHandler && !init.dataProvider) {
+        // Only create internal analytics handler if using internal data provider
+        analyticsHandler = new InternalStreamAnalyticsHandler(graphqlOrigin);
+    }
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(StreamPlayer, {
+    const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
-            streamId,
-            graphqlOrigin,
-            localization: getLocale(localization),
-            showStreamsCloudWatermark,
-            shortVideoSocialInteractionsHandler,
-            initiator,
-            on: {
-                streamActivated: (data) => {
-                    AppEventsTracker.setOrganizationId(data.ownerId);
-                    if (init.on?.streamActivated) {
-                        init.on.streamActivated({ title: data.title, image: data.image });
+            dataProvider: mediaCenterDataProvider || null,
+            playerProps: {
+                type: MediaCenterMode.Stream,
+                props: {
+                    streamId,
+                    dataProvider,
+                    analyticsHandler,
+                    localization,
+                    showStreamsCloudWatermark,
+                    postSocialInteractionsHandler,
+                    on: {
+                        streamActivated: (data) => {
+                            if (init.on?.streamActivated) {
+                                init.on.streamActivated({ title: data.title, image: data.image });
+                            }
+                        },
+                        playerClosed: async () => {
+                            await unmount(mounted);
+                            shadowHost.remove();
+                            if (init.on?.playerClosed) {
+                                init.on.playerClosed();
+                            }
+                        }
                     }
-                },
-                closePlayer: async () => {
-                    if (init.on?.playerClosed) {
-                        init.on.playerClosed();
-                    }
-                    await unmount(mounted);
-                    shadowHost.remove();
                 }
             }
         }
     });
     shadowHost.attachToBody();
-};
+}

package/dist/streams/stream-player/internal-stream-analytics-handler.d.ts

@@ -0,0 +1,12 @@
+import type { IStreamAnalyticsHandler } from './types';
+export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsHandler {
+    constructor(graphqlOrigin: string | undefined);
+    setOrganizationId: (organizationId: string) => void;
+    trackStreamView: (streamId: string) => void;
+    trackStreamPageView: (pageId: string, streamId: string) => void;
+    trackStreamProductClicked: (productId: string, streamId: string) => void;
+    trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
+    trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
+    reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
+}

package/dist/streams/stream-player/internal-stream-analytics-handler.js

@@ -0,0 +1,17 @@
+import { getOrCreateProfileId } from '../../core/analytics.profile-id';
+import { constructGraphQLUrl } from '../../core/graphql';
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+export class InternalStreamAnalyticsHandler {
+    constructor(graphqlOrigin) {
+        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
+        AppEventsTracker.setProfileId(getOrCreateProfileId());
+    }
+    setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
+    trackStreamView = (streamId) => AppEventsTracker.trackStreamView(streamId);
+    trackStreamPageView = (pageId, streamId) => AppEventsTracker.trackStreamPageView(pageId, streamId);
+    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
+    trackStreamEngagementTime = (streamId, engagementTime) => AppEventsTracker.trackStreamEngagementTime(streamId, engagementTime);
+    trackStreamScrollDepth = (streamId, scrollDepth) => AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+    reportPageVideoViews = (videoId, streamId) => AppEventsTracker.reportPageVideoViews(videoId, streamId);
+    trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
+}

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

@@ -0,0 +1,10 @@
+import type { IStreamPlayerDataProvider } from './types';
+export declare class InternalStreamPlayerDataProvider implements IStreamPlayerDataProvider {
+    private graphql;
+    constructor(input: {
+        initiator?: string;
+        graphqlOrigin?: string;
+    });
+    getStream: IStreamPlayerDataProvider['getStream'];
+    getStreamPages: IStreamPlayerDataProvider['getStreamPages'];
+}

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

@@ -0,0 +1,48 @@
+import { ImageScale } from '../..';
+import { createLocalGQLClient } from '../../core/graphql';
+import { mapToStreamPageViewerModel } from '../stream-page-viewer';
+import { mapToStreamPlayerModel } from './mapper';
+import { GetStreamDocument, GetStreamPagesDocument } from './operations.generated';
+export class InternalStreamPlayerDataProvider {
+    graphql;
+    constructor(input) {
+        const { graphqlOrigin, initiator } = input;
+        this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
+    }
+    getStream = async (id) => {
+        const streamPayload = await this.graphql.query(GetStreamDocument, { id }).toPromise();
+        if (!streamPayload.data?.stream) {
+            return null;
+        }
+        return mapToStreamPlayerModel(streamPayload.data.stream);
+    };
+    getStreamPages = async (streamId, continuationToken) => {
+        const emptyResult = { items: [], continuationToken: null };
+        if (continuationToken === null) {
+            return emptyResult;
+        }
+        try {
+            const payload = await this.graphql
+                .query(GetStreamPagesDocument, {
+                input: {
+                    limit: 10,
+                    continuationToken,
+                    filter: { streamId }
+                },
+                image_scale: ImageScale.OriginalEncoded
+            })
+                .toPromise();
+            const data = payload.data?.streamPages;
+            if (!data) {
+                return emptyResult;
+            }
+            return {
+                items: data.items.map(mapToStreamPageViewerModel),
+                continuationToken: data.continuationToken
+            };
+        }
+        catch {
+            return emptyResult;
+        }
+    };
+}

package/dist/streams/stream-player/mapper.js

@@ -4,8 +4,10 @@ export const mapToStreamPlayerModel = (payload) => {
         id: payload.id,
         title: payload.title,
         subTitle: payload.subTitle || null,
+        cover: payload.cover?.url || null,
         createdAt: payload.createdAt,
         publishedAt: payload.publishedAt,
+        organizationId: payload.ownerProfile.id,
         header: {
             name: headerDataProvider.name,
             image: headerDataProvider.image

package/dist/streams/stream-player/operations.generated.d.ts

@@ -18,7 +18,6 @@ export type GetStreamQuery = {
             image: string | null;
             name: string;
             id: string;
-            type: SchemaTypes.ProfileType;
         };
         availableFrom: {
             image: string;
@@ -57,7 +56,6 @@ export type StreamPlayerPayloadFragment = {
         image: string | null;
         name: string;
         id: string;
-        type: SchemaTypes.ProfileType;
     };
     availableFrom: {
         image: string;

package/dist/streams/stream-player/operations.generated.js

@@ -26,8 +26,7 @@ export const StreamPlayerPayloadFragmentDoc = {
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } }
                             ]
                         }
                     },
@@ -109,8 +108,7 @@ export const GetStreamDocument = {
                             selections: [
                                 { kind: 'Field', name: { kind: 'Name', value: 'image' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } }
                             ]
                         }
                     },

package/dist/streams/stream-player/operations.graphql

@@ -27,7 +27,6 @@ fragment StreamPlayerPayloadFragment on Stream {
     image
     name
     id
-    type
   }
   availableFrom {
     image

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

@@ -1,6 +1,6 @@
 import { type StreamPageViewerModel } from '../stream-page-viewer';
 import type { IPlayerBuffer } from '../../ui/player';
-import type { Client } from '@urql/core';
+import type { IStreamPlayerDataProvider } from './types';
 export declare class StreamPlayerBuffer implements IPlayerBuffer<StreamPageViewerModel> {
     readonly loaded: StreamPageViewerModel[];
     readonly currentIndex: number;
@@ -9,17 +9,17 @@ export declare class StreamPlayerBuffer implements IPlayerBuffer<StreamPageViewe
     readonly canLoadPrevious: boolean;
     readonly navigationDisabled: boolean;
     readonly animationDuration = 300;
-    private _pagesLoader;
     private _currentIndex;
     private _loaded;
-    constructor(data: {
+    private _pagesLoader;
+    constructor(init: {
         streamId: string;
-        graphql: Client;
+        dataProvider: IStreamPlayerDataProvider;
     });
     loadMore: () => Promise<StreamPageViewerModel[]>;
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;
     setIndex: (index: number) => void;
-    reset: () => void;
+    reset: () => Promise<void>;
     private warmUpBuffer;
 }

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

@@ -1,10 +1,7 @@
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
-import { ImageScale } from '../../core/enums';
 import { Utils } from '../../core/utils';
 import {} from '../stream-page-viewer';
-import { mapToStreamPageViewerModel } from '../stream-page-viewer/mapper';
-import { GetStreamPagesDocument } from './operations.generated';
 export class StreamPlayerBuffer {
     loaded = $derived.by(() => this._loaded);
     currentIndex = $derived.by(() => this._currentIndex);
@@ -13,34 +10,19 @@ export class StreamPlayerBuffer {
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 300;
-    _pagesLoader;
     _currentIndex = $state(-1);
     _loaded = $state.raw([]);
-    constructor(data) {
-        const { streamId, graphql } = data;
+    _pagesLoader;
+    constructor(init) {
+        const { streamId, dataProvider } = init;
         this._pagesLoader = new CursorDataLoader({
             loadPage: async (continuationToken) => {
-                const payload = await graphql
-                    .query(GetStreamPagesDocument, {
-                    input: {
-                        limit: 10,
-                        continuationToken,
-                        filter: {
-                            streamId
-                        }
-                    },
-                    image_scale: ImageScale.OriginalEncoded
-                })
-                    .toPromise();
-                const data = payload.data?.streamPages;
-                if (!data) {
-                    return null;
-                }
-                const items = data.items.map(mapToStreamPageViewerModel);
+                const result = await dataProvider.getStreamPages(streamId, continuationToken.toRawFormat());
+                const items = result.items;
                 this._loaded = [...this._loaded, ...items];
                 return {
                     items: items,
-                    continuationToken: ContinuationToken.fromPayload(data.continuationToken)
+                    continuationToken: ContinuationToken.fromPayload(result.continuationToken)
                 };
             }
         });
@@ -66,15 +48,18 @@ export class StreamPlayerBuffer {
         this._currentIndex = index;
         this.warmUpBuffer();
     };
-    reset = () => {
-        this._pagesLoader.reset();
+    reset = async () => {
+        this._loaded = [];
+        this._currentIndex = -1;
+        await this._pagesLoader.reset();
+        this.warmUpBuffer();
     };
     warmUpBuffer = async () => {
         const bufferSize = 2;
         if (this.loaded.length >= this.currentIndex + bufferSize) {
             return;
         }
-        await this._pagesLoader.loadMore();
+        await this.loadMore();
         if (this._currentIndex < 0) {
             if (this.loaded.length > 0) {
                 this._currentIndex = 0;