@streamscloud/embeddable 12.2.0 → 13.0.0

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

@@ -3,7 +3,7 @@ import type { IPostSocialInteractionsHandler } from '../posts/social-interaction
 import type { ICloseOrchestrator } from '../ui/player/close-orchestrator';
 import type { IPlayerBuffer } from '../ui/player/providers';
 import type { PlayerSliderCallbacks } from '../ui/player/slider/types';
-import { ContentPlayerSettings } from './content-player-settings';
+import { ContentPlayerSettings } from './content-player-settings.svelte';
 import { ContentPlayerUIManager } from './ui-manager.svelte';
 export declare class ContentPlayerConfig<T extends {
     id: string;
@@ -28,18 +28,7 @@ export declare class ContentPlayerConfig<T extends {
         trackingParams?: ContentPlayerTrackingParams | null;
         closeOrchestrator: ICloseOrchestrator;
     });
-    get playerColors(): {
-        brand: string | null;
-        button: string | null;
-        buttonInactive: string | null;
-        cardButton: string | null;
-        cardBackground: string | null;
-        menuBackground: string | null;
-        playerBackground: string | null;
-        price: string | null;
-        salePrice: string | null;
-        sidebarBackground: string | null;
-    };
+    get playerColors(): import("../ui/player/colors").PlayerColors;
     get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
     itemAsPostViewerModel: (item: T & {
         mediaIndex?: number;

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

@@ -1,5 +1,5 @@
 import { PostModel } from '../posts/model';
-import { ContentPlayerSettings } from './content-player-settings';
+import { ContentPlayerSettings } from './content-player-settings.svelte';
 import { ContentPlayerUIManager } from './ui-manager.svelte';
 export class ContentPlayerConfig {
     playerBuffer = $state.raw(null);

package/dist/content-player/content-player-settings.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Locale } from '../core/locale';
+import { type ThemeValue } from '../core/theme';
+import { PlayerColors } from '../ui/player/colors';
+export declare class ContentPlayerSettings {
+    locale: Locale;
+    showStreamsCloudWatermark: boolean;
+    allPlayerColors: Record<ThemeValue, PlayerColors>;
+    constructor(init?: IContentPlayerSettings);
+    get playerColors(): PlayerColors;
+    patch: (settings?: IContentPlayerSettings) => void;
+}
+export type IContentPlayerSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    playerColors?: Record<ThemeValue, PlayerColors>;
+};

package/dist/content-player/content-player-settings.svelte.js

@@ -0,0 +1,27 @@
+import { Theme } from '../core/theme';
+import { PlayerColors } from '../ui/player/colors';
+export class ContentPlayerSettings {
+    locale = $state('en');
+    showStreamsCloudWatermark = $state(false);
+    allPlayerColors = $state.raw({
+        light: new PlayerColors(null),
+        dark: new PlayerColors(null)
+    });
+    constructor(init) {
+        this.patch(init);
+    }
+    get playerColors() {
+        return this.allPlayerColors[Theme.get()];
+    }
+    patch = (settings) => {
+        if (settings?.locale !== undefined) {
+            this.locale = settings.locale;
+        }
+        if (settings?.showStreamsCloudWatermark !== undefined) {
+            this.showStreamsCloudWatermark = settings.showStreamsCloudWatermark;
+        }
+        if (settings?.playerColors !== undefined) {
+            this.allPlayerColors = settings.playerColors;
+        }
+    };
+}

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

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

package/dist/content-player/index.js

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

package/dist/core/theme/index.d.ts

@@ -1 +1,2 @@
 export { Theme } from './theme-store.svelte';
+export type { ThemeValue } from './theme-store.svelte';

package/dist/core/theme/theme-store.svelte.d.ts

@@ -1,5 +1,6 @@
 export declare const Theme: {
-    get: () => "dark" | "light";
-    set: (theme: "dark" | "light") => void;
+    get: () => ThemeValue;
+    set: (theme: ThemeValue) => void;
     toggle: () => void;
 };
+export type ThemeValue = 'dark' | 'light';

package/dist/external-api/data-providers/index.d.ts

@@ -0,0 +1,6 @@
+export { InternalMediaCenterDataProvider } from './internal-media-center-data-provider.svelte.js';
+export { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
+export { InternalPostAnalyticsHandler } from './internal-post-analytics-handler';
+export { InternalShortVideoPlayerItemsProvider } from './internal-short-video-player-items-provider';
+export { InternalStreamsPlayerDataProvider } from './internal-streams-player-data-provider';
+export { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';

package/dist/external-api/data-providers/index.js

@@ -0,0 +1,6 @@
+export { InternalMediaCenterDataProvider } from './internal-media-center-data-provider.svelte.js';
+export { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
+export { InternalPostAnalyticsHandler } from './internal-post-analytics-handler';
+export { InternalShortVideoPlayerItemsProvider } from './internal-short-video-player-items-provider';
+export { InternalStreamsPlayerDataProvider } from './internal-streams-player-data-provider';
+export { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';

package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { IMediaCenterDataProvider } from '../../media-center/config/types';
+export declare class InternalMediaCenterDataProvider implements IMediaCenterDataProvider {
+    model: IMediaCenterDataProvider['model'];
+    postsPlayer: IMediaCenterDataProvider['postsPlayer'];
+    streamPlayer: IMediaCenterDataProvider['streamPlayer'];
+    handlers: IMediaCenterDataProvider['handlers'];
+    fetchModel: IMediaCenterDataProvider['fetchModel'];
+    private graphql;
+    constructor(input: {
+        mediaPageId: string;
+        initiator?: string;
+        graphqlOrigin?: string;
+        testingStuff?: boolean;
+    });
+}

package/dist/{media-center/config/internal-media-center-config.js → external-api/data-providers/internal-media-center-data-provider.svelte.js}

@@ -1,28 +1,32 @@
 import { Status, StreamStatus } from '../../core/enums';
 import { createLocalGQLClient } from '../../core/graphql';
-import { MockCategoryFollowingProvider } from '../categories-following/mock-categories-following-handler.svelte';
-import { getPostsCursor } from '../../posts/data-loaders';
+import { MockCategoryFollowingProvider } from '../../media-center/categories-following/mock-categories-following-handler.svelte';
+import { MockMembershipHandler } from '../../media-center/membership/mock-membership-handler.svelte';
+import { MockNavigationHandler } from '../../media-center/navigation/mock-navigation-handler.svelte';
 import { MockPostSocialInteractionsHandler } from '../../posts/social-interactions/mock-post-social-interactions-handler.svelte';
-import { getStreamPagesCursor, getStreamsCursor } from '../../streams/data-loaders';
+import { PlayerColors } from '../../ui/player/colors';
 import { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
 import { GetMediaPageConfigDocument } from './operations.generated';
-export class InternalMediaCenterConfig {
+import { getPostsCursor } from './post-data-loaders';
+import { getStreamPagesCursor, getStreamsCursor } from './stream-data-loaders';
+export class InternalMediaCenterDataProvider {
+    model = $state.raw(null);
     postsPlayer;
     streamPlayer;
     handlers;
-    getConfig;
+    fetchModel;
     graphql;
     constructor(input) {
         const { mediaPageId, graphqlOrigin, initiator, testingStuff } = input;
         this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
-        this.getConfig = async () => {
+        this.fetchModel = async () => {
             const payload = await this.graphql.query(GetMediaPageConfigDocument, { mediaPageId }).toPromise();
             if (!payload.data?.embedMediaPage) {
-                return null;
+                this.model = null;
             }
-            const config = payload.data.embedMediaPage;
-            return {
-                targetData: {
+            else {
+                const config = payload.data.embedMediaPage;
+                this.model = {
                     id: config.id,
                     handle: config.handle,
                     name: config.name,
@@ -30,12 +34,21 @@ export class InternalMediaCenterConfig {
                     image: config.image?.url || null,
                     logo: config.logo?.url || null,
                     banner: config.banner?.url || null,
-                    membersCount: config.membersCount
-                },
-                contentCategories: config.menuSettings?.contentCategories || [],
-                categoryTagAssociations: config.menuSettings?.contentCategoryMenuItems || [],
-                playerColors: config.playerColors || null
-            };
+                    communityFeatures: config.enableCommunityFeatures
+                        ? {
+                            membersCount: config.membersCount
+                        }
+                        : null,
+                    contentCategories: config.menuSettings?.contentCategories || [],
+                    categoryTagAssociations: config.menuSettings?.contentCategoryMenuItems || [],
+                    playerColors: {
+                        light: new PlayerColors(null),
+                        dark: new PlayerColors(config.playerColors)
+                    },
+                    moments: config.moments
+                };
+            }
+            return this.model;
         };
         this.postsPlayer = {
             getPostsCursor: async ({ filter, limit, continuationToken }) => {
@@ -45,6 +58,7 @@ export class InternalMediaCenterConfig {
                         types: filter.types,
                         statuses: [Status.Published],
                         categoryId: filter.categoryId,
+                        ids: filter.includeIds,
                         excludeIds: filter.excludeIds
                     },
                     continuationToken,
@@ -79,7 +93,9 @@ export class InternalMediaCenterConfig {
         this.handlers = {
             analyticsHandler: new InternalMediaCenterAnalyticsHandler(graphqlOrigin),
             categoriesFollowingHandler: testingStuff ? new MockCategoryFollowingProvider() : undefined,
-            socialInteractionsHandler: testingStuff ? new MockPostSocialInteractionsHandler() : undefined
+            socialInteractionsHandler: testingStuff ? new MockPostSocialInteractionsHandler() : undefined,
+            membershipHandler: testingStuff ? new MockMembershipHandler() : undefined,
+            navigationHandler: testingStuff ? new MockNavigationHandler() : undefined
         };
     }
 }

package/dist/{posts/handlers → external-api/data-providers}/internal-post-analytics-handler.d.ts

@@ -1,4 +1,4 @@
-import type { IPostAnalyticsHandler } from '../posts-player';
+import type { IPostAnalyticsHandler } from '../../posts/posts-player';
 export declare class InternalPostAnalyticsHandler implements IPostAnalyticsHandler {
     constructor(graphqlOrigin: string | undefined);
     setOrganizationId: (organizationId: string) => void;

package/dist/{short-videos → external-api}/data-providers/internal-short-video-player-items-provider.js

@@ -2,8 +2,8 @@ import { PostType } from '../..';
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
 import { createLocalGQLClient } from '../../core/graphql';
-import { getPostsCursor } from '../../posts/data-loaders';
 import {} from '../../posts/posts-player';
+import { getPostsCursor } from './post-data-loaders';
 const CHUNK_SIZE = 20;
 export class InternalShortVideoPlayerItemsProvider {
     kind = 'feed';

package/dist/{streams/streams-player → external-api/data-providers}/internal-stream-analytics-handler.d.ts

@@ -1,4 +1,4 @@
-import type { IStreamAnalyticsHandler } from './types';
+import type { IStreamAnalyticsHandler } from '../../streams/streams-player/types';
 export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsHandler {
     constructor(graphqlOrigin: string | undefined);
     setOrganizationId: (organizationId: string) => void;

package/dist/{streams/streams-player → external-api/data-providers}/internal-streams-player-data-provider.d.ts

@@ -1,4 +1,4 @@
-import type { IStreamsPlayerDataProvider } from './types';
+import type { IStreamsPlayerDataProvider } from '../../streams/streams-player';
 export declare class InternalStreamsPlayerDataProvider implements IStreamsPlayerDataProvider {
     initialData: IStreamsPlayerDataProvider['initialData'];
     private ids;

package/dist/{streams/streams-player → external-api/data-providers}/internal-streams-player-data-provider.js

@@ -1,7 +1,7 @@
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
 import { createLocalGQLClient } from '../../core/graphql';
-import { getStreamPagesCursor, getStreamsCursor } from '../data-loaders';
+import { getStreamPagesCursor, getStreamsCursor } from './stream-data-loaders';
 const CHUNK_SIZE = 5;
 export class InternalStreamsPlayerDataProvider {
     initialData;

package/dist/{media-center/config → external-api/data-providers}/operations.generated.d.ts

@@ -9,6 +9,7 @@ export type GetMediaPageConfigQuery = {
         handle: string;
         name: string;
         description: string;
+        enableCommunityFeatures: boolean;
         membersCount: number;
         image: {
             url: string;
@@ -47,6 +48,11 @@ export type GetMediaPageConfigQuery = {
             salePrice: string | null;
             sidebarBackground: string | null;
         } | null;
+        moments: Array<{
+            id: string;
+            cover: string;
+            isSeen: boolean;
+        }>;
     } | null;
 };
 export declare const GetMediaPageConfigDocument: DocumentNode<GetMediaPageConfigQuery, GetMediaPageConfigQueryVariables>;

package/dist/{media-center/config → external-api/data-providers}/operations.generated.js

@@ -52,6 +52,7 @@ export const GetMediaPageConfigDocument = {
                                     name: { kind: 'Name', value: 'banner' },
                                     selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
                                 },
+                                { kind: 'Field', name: { kind: 'Name', value: 'enableCommunityFeatures' } },
                                 { kind: 'Field', name: { kind: 'Name', value: 'membersCount' } },
                                 {
                                     kind: 'Field',
@@ -115,6 +116,18 @@ export const GetMediaPageConfigDocument = {
                                             { kind: 'Field', name: { kind: 'Name', value: 'sidebarBackground' } }
                                         ]
                                     }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'moments' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'cover' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'isSeen' } }
+                                        ]
+                                    }
                                 }
                             ]
                         }

package/dist/{media-center/config → external-api/data-providers}/operations.graphql

@@ -13,6 +13,7 @@ query GetMediaPageConfig($mediaPageId: String!) {
     banner {
       url
     }
+    enableCommunityFeatures
     membersCount
     menuSettings {
       contentCategories {
@@ -42,5 +43,10 @@ query GetMediaPageConfig($mediaPageId: String!) {
       salePrice
       sidebarBackground
     }
+    moments {
+      id
+      cover
+      isSeen
+    }
   }
 }

package/dist/{posts/data-loaders → external-api/data-providers/post-data-loaders}/mapper.d.ts

@@ -1,3 +1,3 @@
-import type { PostPlayerModel } from '../posts-player/types';
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
 import type { PostsPlayerPayloadFragment } from './operations.generated';
 export declare const mapToPostPlayerModel: (payload: PostsPlayerPayloadFragment) => PostPlayerModel;

package/dist/{posts/data-loaders → external-api/data-providers/post-data-loaders}/mapper.js

@@ -1,5 +1,5 @@
-import { ProfileType } from '../../core/enums';
-import { mapToPostModel } from '../post-viewer';
+import { ProfileType } from '../../../core/enums';
+import { mapToPostModel } from '../../../posts/post-viewer';
 export const mapToPostPlayerModel = (payload) => {
     const viewerModel = mapToPostModel(payload);
     return {

package/dist/{posts/data-loaders → external-api/data-providers/post-data-loaders}/operations.generated.d.ts

@@ -1,4 +1,4 @@
-import type * as SchemaTypes from '../../../gql/types';
+import type * as SchemaTypes from '../../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type GetPostsQueryVariables = SchemaTypes.Exact<{
     input: SchemaTypes.EmbedPostsInput;

package/dist/{posts/data-loaders → external-api/data-providers/post-data-loaders}/posts-loader.d.ts

@@ -1,5 +1,5 @@
-import { PostType, Status } from '../../core/enums';
-import type { PostPlayerModel } from '../posts-player/types';
+import { PostType, Status } from '../../../core/enums';
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
 import type { Client } from '@urql/core';
 export declare const getPostsCursor: (input: {
     filter: {

package/dist/{posts/data-loaders → external-api/data-providers/post-data-loaders}/posts-loader.js

@@ -1,4 +1,4 @@
-import { PostType, Status } from '../../core/enums';
+import { PostType, Status } from '../../../core/enums';
 import { mapToPostPlayerModel } from './mapper';
 import { GetPostsDocument } from './operations.generated';
 export const getPostsCursor = async (input) => {

package/dist/{streams/data-loaders → external-api/data-providers/stream-data-loaders}/mapper.d.ts

@@ -1,3 +1,3 @@
-import type { StreamPlayerModel } from '../streams-player/types';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 import type { StreamPlayerPayloadFragment } from './operations.generated';
 export declare const mapToStreamPlayerModel: (payload: StreamPlayerPayloadFragment) => StreamPlayerModel;

package/dist/{streams/data-loaders → external-api/data-providers/stream-data-loaders}/mapper.js

@@ -1,4 +1,4 @@
-import { ProfileType } from '../../core/enums';
+import { ProfileType } from '../../../core/enums';
 export const mapToStreamPlayerModel = (payload) => {
     return {
         id: payload.id,

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

@@ -1,4 +1,4 @@
-import type * as SchemaTypes from '../../../gql/types';
+import type * as SchemaTypes from '../../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type GetStreamsQueryVariables = SchemaTypes.Exact<{
     input: SchemaTypes.EmbedStreamsInput;

package/dist/{streams/data-loaders → external-api/data-providers/stream-data-loaders}/stream-pages-loader.d.ts

@@ -1,4 +1,4 @@
-import { type StreamPageViewerModel } from '../stream-page-viewer';
+import { type StreamPageViewerModel } from '../../../streams/stream-page-viewer';
 import type { Client } from '@urql/core';
 export declare const getStreamPagesCursor: (input: {
     streamId: string;

package/dist/{streams/data-loaders → external-api/data-providers/stream-data-loaders}/stream-pages-loader.js

@@ -1,5 +1,5 @@
-import { ImageScale } from '../..';
-import { mapToStreamPageViewerModel } from '../stream-page-viewer';
+import { ImageScale } from '../../..';
+import { mapToStreamPageViewerModel } from '../../../streams/stream-page-viewer';
 import { GetStreamPagesDocument } from './operations.generated';
 export const getStreamPagesCursor = async (input) => {
     const { streamId, continuationToken, graphql } = input;

package/dist/{streams/data-loaders → external-api/data-providers/stream-data-loaders}/streams-loader.d.ts

@@ -1,5 +1,5 @@
-import { StreamStatus } from '../../core/enums';
-import type { StreamPlayerModel } from '../streams-player/types';
+import { StreamStatus } from '../../../core/enums';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 import type { Client } from '@urql/core';
 export declare const getStreamsCursor: (input: {
     filter: {

package/dist/{streams/data-loaders → external-api/data-providers/stream-data-loaders}/streams-loader.js

@@ -1,4 +1,4 @@
-import { EmbedStreamsOrderBy, StreamStatus } from '../../core/enums';
+import { EmbedStreamsOrderBy, StreamStatus } from '../../../core/enums';
 import { mapToStreamPlayerModel } from './mapper';
 import { GetStreamsDocument } from './operations.generated';
 export const getStreamsCursor = async (input) => {

package/dist/external-api/index.d.ts

@@ -0,0 +1,3 @@
+export { openMediaPageModal } from './media-page';
+export { openStreamsPlayer } from './streams-player';
+export { openShortVideosPlayer } from './short-videos-player';

package/dist/external-api/index.js

@@ -0,0 +1,3 @@
+export { openMediaPageModal } from './media-page';
+export { openStreamsPlayer } from './streams-player';
+export { openShortVideosPlayer } from './short-videos-player';

package/dist/external-api/media-page/index.d.ts

@@ -0,0 +1,83 @@
+import type { Locale } from '../../core/locale';
+import { type IMediaCenterDataProvider } from '../../media-center/config/types';
+export type { IMediaCenterDataProvider };
+/**
+ * Opens the media page modal using an internal media-center configuration.
+ *
+ * This function is a thin wrapper around the internal `openMediaPageModal`
+ * from `$lib/media-page`. It constructs an `InternalMediaCenterDataProvider`
+ * from the provided media page ID and GraphQL parameters, then opens
+ * the modal with that configuration.
+ *
+ * @param init Configuration options.
+ *
+ * @param {string} init.id
+ *   Media page ID, used to construct an internal media-center config.
+ *
+ * @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 {Object} [init.viewerSettings]
+ *   Viewer UI and behavior settings passed through to the internal
+ *   `openMediaPageModal`.
+ *
+ *   Fields of `viewerSettings`:
+ *  - {boolean} [disableBackground]
+ *       If true, hides the player's background image.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *   - {Locale} [locale='en']
+ *       Localization for the player UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
+ *
+ * @param {{ closed?: () => void }} [init.on]
+ *   Optional event handlers.
+ *
+ * @param {() => void} [init.on.closed]
+ *   Called after the modal is fully closed (after unmount and removal
+ *   from the DOM).
+ *
+ * @returns {void}
+ *
+ * @example
+ * ```ts
+ * import { openMediaPageModal } from '@streamscloud/embeddable/media-page';
+ *
+ * openMediaPageModal({
+ *   id: 'media-page-123',
+ *   initiator: 'marketing-campaign',
+ *   graphqlOrigin: 'https://api.example.com',
+ *   viewerSettings: {
+ *     locale: 'en',
+ *     hideCloseButton: false,
+ *     theme: 'dark',
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ */
+export declare function openMediaPageModal(init: {
+    id: string;
+    initiator: string;
+    graphqlOrigin?: string;
+    viewerSettings?: {
+        disableBackground?: boolean;
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        hideCloseButton?: boolean;
+        theme?: 'light' | 'dark';
+    };
+    on?: {
+        closed?: () => void;
+    };
+}): void;

package/dist/external-api/media-page/index.js

@@ -0,0 +1,82 @@
+import { InternalMediaCenterDataProvider } from '../data-providers';
+import {} from '../../media-center/config/types';
+import { openMediaPageModal as openMediaPageModalInternal } from '../../media-page';
+/**
+ * Opens the media page modal using an internal media-center configuration.
+ *
+ * This function is a thin wrapper around the internal `openMediaPageModal`
+ * from `$lib/media-page`. It constructs an `InternalMediaCenterDataProvider`
+ * from the provided media page ID and GraphQL parameters, then opens
+ * the modal with that configuration.
+ *
+ * @param init Configuration options.
+ *
+ * @param {string} init.id
+ *   Media page ID, used to construct an internal media-center config.
+ *
+ * @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 {Object} [init.viewerSettings]
+ *   Viewer UI and behavior settings passed through to the internal
+ *   `openMediaPageModal`.
+ *
+ *   Fields of `viewerSettings`:
+ *  - {boolean} [disableBackground]
+ *       If true, hides the player's background image.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *   - {Locale} [locale='en']
+ *       Localization for the player UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
+ *
+ * @param {{ closed?: () => void }} [init.on]
+ *   Optional event handlers.
+ *
+ * @param {() => void} [init.on.closed]
+ *   Called after the modal is fully closed (after unmount and removal
+ *   from the DOM).
+ *
+ * @returns {void}
+ *
+ * @example
+ * ```ts
+ * import { openMediaPageModal } from '@streamscloud/embeddable/media-page';
+ *
+ * openMediaPageModal({
+ *   id: 'media-page-123',
+ *   initiator: 'marketing-campaign',
+ *   graphqlOrigin: 'https://api.example.com',
+ *   viewerSettings: {
+ *     locale: 'en',
+ *     hideCloseButton: false,
+ *     theme: 'dark',
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ */
+export function openMediaPageModal(init) {
+    const { id, graphqlOrigin, initiator, viewerSettings, on } = init;
+    const dataProvider = new InternalMediaCenterDataProvider({ mediaPageId: id, graphqlOrigin, initiator });
+    openMediaPageModalInternal({
+        dataProvider,
+        viewerSettings: {
+            hideCloseButton: viewerSettings?.hideCloseButton,
+            locale: viewerSettings?.locale,
+            showStreamsCloudWatermark: true,
+            theme: viewerSettings?.theme
+        },
+        on
+    });
+}