@streamscloud/embeddable 9.0.0 → 10.0.0

package/dist/streams/{stream-player → data-loaders}/operations.generated.d.ts

@@ -1,30 +1,33 @@
 import type * as SchemaTypes from '../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type GetStreamQueryVariables = SchemaTypes.Exact<{
-    id: SchemaTypes.Scalars['String']['input'];
+export type GetStreamsQueryVariables = SchemaTypes.Exact<{
+    input: SchemaTypes.EmbedStreamsInput;
 }>;
-export type GetStreamQuery = {
-    stream: {
-        id: string;
-        title: string;
-        subTitle: string | null;
-        createdAt: any;
-        publishedAt: any | null;
-        pagesCount: number;
-        cover: {
-            url: string;
-        } | null;
-        ownerProfile: {
-            image: string | null;
-            name: string;
+export type GetStreamsQuery = {
+    streams: {
+        continuationToken: string | null;
+        items: Array<{
             id: string;
-            type: SchemaTypes.ProfileType;
-        };
-        availableFrom: {
-            image: string;
-            name: string;
-        } | null;
-    } | null;
+            title: string;
+            subTitle: string | null;
+            createdAt: any;
+            publishedAt: any | null;
+            pagesCount: number;
+            cover: {
+                url: string;
+            } | null;
+            ownerProfile: {
+                image: string | null;
+                name: string;
+                id: string;
+                type: SchemaTypes.ProfileType;
+            };
+            availableFrom: {
+                image: string;
+                name: string;
+            } | null;
+        }>;
+    };
 };
 export type GetStreamPagesQueryVariables = SchemaTypes.Exact<{
     input: SchemaTypes.EmbedStreamPagesInput;
@@ -65,5 +68,5 @@ export type StreamPlayerPayloadFragment = {
     } | null;
 };
 export declare const StreamPlayerPayloadFragmentDoc: DocumentNode<StreamPlayerPayloadFragment, unknown>;
-export declare const GetStreamDocument: DocumentNode<GetStreamQuery, GetStreamQueryVariables>;
+export declare const GetStreamsDocument: DocumentNode<GetStreamsQuery, GetStreamsQueryVariables>;
 export declare const GetStreamPagesDocument: DocumentNode<GetStreamPagesQuery, GetStreamPagesQueryVariables>;

package/dist/streams/{stream-player → data-loaders}/operations.generated.js

@@ -48,18 +48,18 @@ export const StreamPlayerPayloadFragmentDoc = {
         }
     ]
 };
-export const GetStreamDocument = {
+export const GetStreamsDocument = {
     kind: 'Document',
     definitions: [
         {
             kind: 'OperationDefinition',
             operation: 'query',
-            name: { kind: 'Name', value: 'GetStream' },
+            name: { kind: 'Name', value: 'GetStreams' },
             variableDefinitions: [
                 {
                     kind: 'VariableDefinition',
-                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'id' } },
-                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'String' } } }
+                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
+                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'EmbedStreamsInput' } } }
                 }
             ],
             selectionSet: {
@@ -67,19 +67,20 @@ export const GetStreamDocument = {
                 selections: [
                     {
                         kind: 'Field',
-                        alias: { kind: 'Name', value: 'stream' },
-                        name: { kind: 'Name', value: 'embedStream' },
-                        arguments: [
-                            {
-                                kind: 'Argument',
-                                name: { kind: 'Name', value: 'input' },
-                                value: {
-                                    kind: 'ObjectValue',
-                                    fields: [{ kind: 'ObjectField', name: { kind: 'Name', value: 'id' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'id' } } }]
-                                }
-                            }
-                        ],
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamPlayerPayloadFragment' } }] }
+                        alias: { kind: 'Name', value: 'streams' },
+                        name: { kind: 'Name', value: 'embedStreams' },
+                        arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'input' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'input' } } }],
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'items' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'StreamPlayerPayloadFragment' } }] }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
+                            ]
+                        }
                     }
                 ]
             }

package/dist/streams/{stream-player → data-loaders}/operations.graphql

@@ -1,6 +1,9 @@
-query GetStream($id: String!) {
-  stream: embedStream(input: { id: $id }) {
-    ...StreamPlayerPayloadFragment
+query GetStreams($input: EmbedStreamsInput!) {
+  streams: embedStreams(input: $input) {
+    items {
+      ...StreamPlayerPayloadFragment
+    }
+    continuationToken
   }
 }
 

package/dist/streams/data-loaders/stream-pages-loader.d.ts

@@ -0,0 +1,10 @@
+import { type StreamPageViewerModel } from '../stream-page-viewer';
+import type { Client } from '@urql/core';
+export declare const getStreamPagesCursor: (input: {
+    streamId: string;
+    continuationToken: string | null | undefined;
+    graphql: Client;
+}) => Promise<{
+    items: StreamPageViewerModel[];
+    continuationToken: string | null;
+}>;

package/dist/streams/data-loaders/stream-pages-loader.js

@@ -0,0 +1,33 @@
+import { ImageScale } from '../..';
+import { mapToStreamPageViewerModel } from '../stream-page-viewer';
+import { GetStreamPagesDocument } from './operations.generated';
+export const getStreamPagesCursor = async (input) => {
+    const { streamId, continuationToken, graphql } = input;
+    const emptyResult = { items: [], continuationToken: null };
+    if (continuationToken === null) {
+        return emptyResult;
+    }
+    try {
+        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 emptyResult;
+        }
+        return {
+            items: data.items.map(mapToStreamPageViewerModel),
+            continuationToken: data.continuationToken
+        };
+    }
+    catch {
+        return emptyResult;
+    }
+};

package/dist/streams/data-loaders/streams-loader.d.ts

@@ -0,0 +1,19 @@
+import { StreamStatus } from '../../core/enums';
+import type { StreamPlayerModel } from '../streams-player/types';
+import type { Client } from '@urql/core';
+export declare const getStreamsCursor: (input: {
+    filter: {
+        ids?: string[];
+        categoryId?: string;
+        excludeIds?: string[];
+        mediaPageId?: string;
+        statuses?: StreamStatus[];
+        showInFeed?: boolean;
+    };
+    limit: number;
+    continuationToken?: string | null;
+    graphql: Client;
+}) => Promise<{
+    items: StreamPlayerModel[];
+    continuationToken: string | null;
+}>;

package/dist/streams/data-loaders/streams-loader.js

@@ -0,0 +1,28 @@
+import { StreamStatus } from '../../core/enums';
+import { mapToStreamPlayerModel } from './mapper';
+import { GetStreamsDocument } from './operations.generated';
+export const getStreamsCursor = async (input) => {
+    const { filter, limit, continuationToken, graphql } = input;
+    const { mediaPageId, ids, categoryId, excludeIds, statuses, showInFeed } = filter;
+    const payload = await graphql
+        .query(GetStreamsDocument, {
+        input: {
+            filter: {
+                ids,
+                mediaPageId,
+                categoryId,
+                excludeIds,
+                statuses,
+                showInFeed
+            },
+            limit,
+            continuationToken
+        }
+    })
+        .toPromise();
+    const streams = payload.data?.streams.items ?? [];
+    return {
+        items: streams.map(mapToStreamPlayerModel),
+        continuationToken: payload.data?.streams?.continuationToken ?? null
+    };
+};

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