@streamscloud/embeddable 6.5.2 → 7.0.0-1758321891466

package/dist/core/enums.d.ts

@@ -38,3 +38,6 @@ export declare enum PostType {
 export declare enum Status {
     Published = "PUBLISHED"
 }
+export declare enum StreamStatus {
+    Published = "PUBLISHED"
+}

package/dist/core/enums.js

@@ -47,3 +47,7 @@ export var Status;
 (function (Status) {
     Status["Published"] = "PUBLISHED";
 })(Status || (Status = {}));
+export var StreamStatus;
+(function (StreamStatus) {
+    StreamStatus["Published"] = "PUBLISHED";
+})(StreamStatus || (StreamStatus = {}));

package/dist/core/locale.d.ts

@@ -2,7 +2,3 @@ export type Locale = 'en' | 'no';
 export type LocalizationSchema = {
     [key: string]: Record<Locale, unknown>;
 };
-export declare const isEn: <T>(input: Locale | T) => input is "en";
-export declare const isNo: <T>(input: Locale | T) => input is "no";
-export declare const isLocale: <T>(input: Locale | T) => input is Locale;
-export declare const isLocalizationInterface: <T>(input: Locale | T) => input is T;

package/dist/core/locale.js

@@ -1,12 +1 @@
-export const isEn = (input) => {
-    return input === 'en';
-};
-export const isNo = (input) => {
-    return input === 'no';
-};
-export const isLocale = (input) => {
-    return input === 'en' || input === 'no';
-};
-export const isLocalizationInterface = (input) => {
-    return typeof input === 'object' && input !== null;
-};
+export {};

package/dist/media-center/config/internal-media-center-config.d.ts

@@ -0,0 +1,9 @@
+import type { IMediaCenterConfig } from './types';
+export declare class InternalMediaCenterConfig implements IMediaCenterConfig {
+    private readonly mediaPageId;
+    shortVideosPlayer: IMediaCenterConfig['shortVideosPlayer'];
+    streamPlayer: IMediaCenterConfig['streamPlayer'];
+    private graphql;
+    constructor(mediaPageId: string, graphqlOrigin?: string);
+    getSettings: IMediaCenterConfig['getSettings'];
+}

package/dist/media-center/config/internal-media-center-config.js

@@ -0,0 +1,81 @@
+import { PostType, Status, StreamStatus } from '../../core/enums';
+import { createLocalGQLClient } from '../../core/graphql';
+import { InternalShortVideoAnalyticsHandler } from '../../short-videos/short-videos-player/internal-short-video-analytics-handler';
+import { mapToShortVideoPlayerModel } from '../../short-videos/short-videos-player/mapper';
+import { InternalStreamAnalyticsHandler } from '../../streams/stream-player/internal-stream-analytics-handler';
+import { InternalStreamPlayerDataProvider } from '../../streams/stream-player/internal-stream-player-data-provider';
+import { GetMediaPageSettingsDocument, GetShortVideosDocument, GetStreamsDocument } from './operations.generated';
+export class InternalMediaCenterConfig {
+    mediaPageId;
+    shortVideosPlayer;
+    streamPlayer;
+    graphql;
+    constructor(mediaPageId, graphqlOrigin) {
+        this.mediaPageId = mediaPageId;
+        this.graphql = createLocalGQLClient(graphqlOrigin);
+        this.shortVideosPlayer = {
+            getShortVideosCursor: async ({ filter, limit, continuationToken }) => {
+                const payload = await this.graphql
+                    .query(GetShortVideosDocument, {
+                    input: {
+                        filter: {
+                            mediaPageId: this.mediaPageId,
+                            types: [PostType.ShortVideo],
+                            statuses: [Status.Published],
+                            categoryId: filter.categoryId,
+                            excludeIds: filter.excludeIds
+                        },
+                        limit,
+                        continuationToken
+                    }
+                })
+                    .toPromise();
+                const posts = payload.data?.shortVideos?.items || [];
+                return {
+                    items: posts.map(mapToShortVideoPlayerModel),
+                    continuationToken: payload.data?.shortVideos?.continuationToken || null
+                };
+            },
+            socialInteractionsHandler: undefined,
+            analyticsHandler: new InternalShortVideoAnalyticsHandler(graphqlOrigin)
+        };
+        this.streamPlayer = {
+            getStreamsCursor: async ({ filter, limit, continuationToken }) => {
+                const payload = await this.graphql
+                    .query(GetStreamsDocument, {
+                    input: {
+                        filter: {
+                            mediaPageId: this.mediaPageId,
+                            categoryId: filter.categoryId,
+                            excludeIds: filter.excludeIds,
+                            statuses: [StreamStatus.Published]
+                        },
+                        limit,
+                        continuationToken
+                    }
+                })
+                    .toPromise();
+                const streams = payload.data?.streams.items ?? [];
+                return {
+                    items: streams.map((x) => ({ id: x.id, title: x.title, subTitle: x.subTitle, cover: x.cover?.url ?? null })),
+                    continuationToken: payload.data?.streams?.continuationToken ?? null
+                };
+            },
+            streamPlayerDataProvider: new InternalStreamPlayerDataProvider({ graphql: this.graphql }),
+            socialInteractionsHandler: undefined,
+            analyticsHandler: new InternalStreamAnalyticsHandler(graphqlOrigin)
+        };
+    }
+    getSettings = async () => {
+        const payload = await this.graphql.query(GetMediaPageSettingsDocument, { mediaPageId: this.mediaPageId }).toPromise();
+        if (!payload.data?.embedMediaPagePlayerSettings) {
+            return null;
+        }
+        const settings = payload.data.embedMediaPagePlayerSettings;
+        return {
+            logo: settings.logo?.url || null,
+            postCategories: settings.postCategories.map((c) => ({ id: c.id, name: c.name })),
+            streamCategories: settings.streamCategories.map((c) => ({ id: c.id, name: c.name }))
+        };
+    };
+}

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

@@ -1,9 +1,9 @@
 import type * as SchemaTypes from '../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type GetMediaPageConfigQueryVariables = SchemaTypes.Exact<{
+export type GetMediaPageSettingsQueryVariables = SchemaTypes.Exact<{
     mediaPageId: SchemaTypes.Scalars['String']['input'];
 }>;
-export type GetMediaPageConfigQuery = {
+export type GetMediaPageSettingsQuery = {
     embedMediaPagePlayerSettings: {
         logo: {
             url: string;
@@ -89,5 +89,22 @@ export type GetShortVideosQuery = {
         }>;
     };
 };
-export declare const GetMediaPageConfigDocument: DocumentNode<GetMediaPageConfigQuery, GetMediaPageConfigQueryVariables>;
+export type GetStreamsQueryVariables = SchemaTypes.Exact<{
+    input: SchemaTypes.EmbedStreamsInput;
+}>;
+export type GetStreamsQuery = {
+    streams: {
+        continuationToken: string | null;
+        items: Array<{
+            id: string;
+            title: string;
+            subTitle: string | null;
+            cover: {
+                url: string;
+            } | null;
+        }>;
+    };
+};
+export declare const GetMediaPageSettingsDocument: DocumentNode<GetMediaPageSettingsQuery, GetMediaPageSettingsQueryVariables>;
 export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;
+export declare const GetStreamsDocument: DocumentNode<GetStreamsQuery, GetStreamsQueryVariables>;

package/dist/media-center/{data-provider → config}/operations.generated.js

@@ -1,10 +1,10 @@
-export const GetMediaPageConfigDocument = {
+export const GetMediaPageSettingsDocument = {
     kind: 'Document',
     definitions: [
         {
             kind: 'OperationDefinition',
             operation: 'query',
-            name: { kind: 'Name', value: 'GetMediaPageConfig' },
+            name: { kind: 'Name', value: 'GetMediaPageSettings' },
             variableDefinitions: [
                 {
                     kind: 'VariableDefinition',
@@ -311,3 +311,54 @@ export const GetShortVideosDocument = {
         }
     ]
 };
+export const GetStreamsDocument = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'OperationDefinition',
+            operation: 'query',
+            name: { kind: 'Name', value: 'GetStreams' },
+            variableDefinitions: [
+                {
+                    kind: 'VariableDefinition',
+                    variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
+                    type: { kind: 'NonNullType', type: { kind: 'NamedType', name: { kind: 'Name', value: 'EmbedStreamsInput' } } }
+                }
+            ],
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    {
+                        kind: 'Field',
+                        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: 'Field', name: { kind: 'Name', value: 'id' } },
+                                            {
+                                                kind: 'Field',
+                                                name: { kind: 'Name', value: 'cover' },
+                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
+                                            },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'subTitle' } }
+                                        ]
+                                    }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/media-center/{data-provider → config}/operations.graphql

@@ -1,4 +1,4 @@
-query GetMediaPageConfig($mediaPageId: String!) {
+query GetMediaPageSettings($mediaPageId: String!) {
   embedMediaPagePlayerSettings(input: { mediaPageId: $mediaPageId }) {
     logo {
       url
@@ -23,3 +23,17 @@ query GetShortVideos($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGIN
     continuationToken
   }
 }
+
+query GetStreams($input: EmbedStreamsInput!) {
+  streams: embedStreams(input: $input) {
+    items {
+      id
+      cover {
+        url
+      }
+      title
+      subTitle
+    }
+    continuationToken
+  }
+}

package/dist/media-center/config/types.d.ts

@@ -0,0 +1,52 @@
+import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import type { IShortVideoAnalyticsHandler, ShortVideoPlayerModel } from '../../short-videos/short-videos-player/types';
+import type { IStreamPlayerDataProvider, IStreamAnalyticsHandler } from '../../streams/stream-player/types';
+export interface IMediaCenterConfig {
+    getSettings: () => Promise<MediaCenterSettings | null>;
+    shortVideosPlayer: {
+        getShortVideosCursor: (input: {
+            filter: {
+                categoryId?: string;
+                excludeIds?: string[];
+            };
+            limit: number;
+            continuationToken?: string | null;
+        }) => Promise<{
+            items: ShortVideoPlayerModel[];
+            continuationToken: string | null;
+        }>;
+        socialInteractionsHandler?: IPostSocialInteractionsHandler;
+        analyticsHandler?: IShortVideoAnalyticsHandler;
+    };
+    streamPlayer: {
+        getStreamsCursor: (input: {
+            filter: {
+                categoryId?: string;
+                excludeIds?: string[];
+            };
+            limit: number;
+            continuationToken?: string | null;
+        }) => Promise<{
+            items: MediaCenterStreamPreviewModel[];
+            continuationToken: string | null;
+        }>;
+        streamPlayerDataProvider: IStreamPlayerDataProvider;
+        socialInteractionsHandler?: IPostSocialInteractionsHandler;
+        analyticsHandler?: IStreamAnalyticsHandler;
+    };
+}
+export type MediaCenterSettings = {
+    logo: string | null;
+    postCategories: MediaCenterCategoryModel[];
+    streamCategories: MediaCenterCategoryModel[];
+};
+export type MediaCenterCategoryModel = {
+    id: string;
+    name: string;
+};
+export type MediaCenterStreamPreviewModel = {
+    id: string;
+    title: string;
+    subTitle: string | null;
+    cover: string | null;
+};

package/dist/media-center/index.d.ts

@@ -1 +1 @@
-export type { IMediaCenterDataProvider } from './data-provider';
+export type { IMediaCenterConfig } from './config/types';

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -17,46 +17,45 @@ import { Loading } from '../../ui/loading';
 import { MediaCenterLocalization } from './media-center-localization';
 import { default as Overview } from './overview.svelte';
 import { makeShortVideosProvider } from './short-video-resources-generator';
+import { default as StreamsInCategory } from './streams-in-category.svelte';
 import { MediaCenterMode } from './types';
 import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
 import IconTextColumnThree from '@fluentui/svg-icons/icons/text_column_three_20_regular.svg?raw';
 import { onDestroy, onMount } from 'svelte';
 import { fade } from 'svelte/transition';
-let { dataProvider, playerProps, localization: localizationInit = 'en' } = $props();
-const localization = $derived(new MediaCenterLocalization(localizationInit));
-let mediaDataLoading = $state(!!dataProvider);
-let mediaCenterConfig = $state.raw(null);
-let mediaCenterMode = $state(playerProps.type);
+let { config, playerProps, locale = 'en' } = $props();
+const localization = $derived(new MediaCenterLocalization(locale));
+const commonPlayerSettings = {
+    disableBackground: playerProps.props.disableBackground,
+    locale: playerProps.props.locale,
+    showStreamsCloudWatermark: playerProps.props.showStreamsCloudWatermark,
+    on: playerProps.props.on
+};
+let mediaDataLoading = $state(!!config);
+let mediaCenterSettings = $state.raw(null);
+let mediaCenterMode = $state(playerProps.mode);
 let selectedCategoryId = $state(null);
-let overviewOpened = $state(false);
 let headerHeight = $state(0);
-let shortVideoProps = $state.raw(playerProps.type === MediaCenterMode.ShortVideos ? playerProps.props : null);
-let streamProps = $state.raw(playerProps.type === MediaCenterMode.Stream ? playerProps.props : null);
+let computedPlayerProps = $state.raw(playerProps);
+let overviewOpened = $state(false);
 let overviewData = $state.raw(null);
+let streamsInCategoryOpened = $state(false);
+let streamsInCategoryData = $state.raw(null);
 let scrollResizeObserver = null;
+const overlayActivated = $derived(overviewOpened || streamsInCategoryOpened);
 const categories = $derived.by(() => {
-    if (!mediaCenterConfig) {
-        return [];
-    }
-    switch (mediaCenterMode) {
-        case MediaCenterMode.ShortVideos:
-            return mediaCenterConfig.postCategories;
-        case MediaCenterMode.Stream:
-            return mediaCenterConfig.streamCategories;
-        default:
-            Utils.assertUnreachable(mediaCenterMode);
-    }
+    return (mediaCenterSettings === null || mediaCenterSettings === void 0 ? void 0 : mediaCenterSettings.postCategories) || [];
 });
 const logo = $derived.by(() => {
-    if (!mediaCenterConfig) {
+    if (!mediaCenterSettings) {
         return null;
     }
-    return mediaCenterConfig.logo;
+    return mediaCenterSettings.logo;
 });
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    if (dataProvider) {
+    if (config) {
         try {
-            mediaCenterConfig = yield dataProvider.getConfig();
+            mediaCenterSettings = yield config.getSettings();
         }
         finally {
             mediaDataLoading = false;
@@ -69,76 +68,101 @@ onMount(() => __awaiter(void 0, void 0, void 0, function* () {
 onDestroy(() => {
     scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.disconnect();
 });
-const selectCategory = (categoryId) => {
-    if (!dataProvider) {
-        return;
-    }
-    if (selectedCategoryId === categoryId) {
-        if (overviewOpened) {
-            overviewOpened = false;
-        }
+const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    if (!config) {
         return;
     }
     switch (mediaCenterMode) {
         case MediaCenterMode.ShortVideos:
-            if (!shortVideoProps) {
+            if (selectedCategoryId === categoryId) {
+                overviewOpened = false;
                 return;
             }
-            shortVideoProps = Object.assign(Object.assign({}, shortVideoProps), { dataProvider: makeShortVideosProvider({ dataProvider, categoryId }) });
+            selectedCategoryId = categoryId;
+            computedPlayerProps = {
+                mode: MediaCenterMode.ShortVideos,
+                props: Object.assign({ dataProvider: makeShortVideosProvider({ config, categoryId }), socialInteractionsHandler: config.shortVideosPlayer.socialInteractionsHandler, analyticsHandler: config.shortVideosPlayer.analyticsHandler }, commonPlayerSettings)
+            };
+            overviewOpened = false;
             break;
         case MediaCenterMode.Stream:
-            console.error('Stream category filter not implemented yet');
+            if (selectedCategoryId === categoryId) {
+                overviewOpened = false;
+                streamsInCategoryOpened = false;
+                selectedCategoryId = null;
+                return;
+            }
+            selectedCategoryId = categoryId;
+            overviewOpened = false;
+            streamsInCategoryOpened = true;
+            streamsInCategoryData = { loading: true };
+            try {
+                const streamsResponse = yield config.streamPlayer.getStreamsCursor({ filter: { categoryId }, limit: 5 });
+                streamsInCategoryData = {
+                    loading: false,
+                    data: {
+                        categoryName: ((_a = categories.find((c) => c.id === categoryId)) === null || _a === void 0 ? void 0 : _a.name) || '',
+                        streams: streamsResponse.items
+                    }
+                };
+            }
+            catch (_b) {
+                streamsInCategoryData = { loading: false, data: { categoryName: '', streams: [] } };
+            }
             break;
         default:
             Utils.assertUnreachable(mediaCenterMode);
     }
-    selectedCategoryId = categoryId;
+});
+const activateSelectedShortVideoPlayer = (shortVideo) => {
+    if (!config) {
+        return;
+    }
+    mediaCenterMode = MediaCenterMode.ShortVideos;
+    computedPlayerProps = {
+        mode: MediaCenterMode.ShortVideos,
+        props: Object.assign({ dataProvider: makeShortVideosProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: config.shortVideosPlayer.socialInteractionsHandler, analyticsHandler: config.shortVideosPlayer.analyticsHandler }, commonPlayerSettings)
+    };
+    selectedCategoryId = null;
     overviewOpened = false;
+    streamsInCategoryOpened = false;
 };
-const activateSelectedShortVideoFeed = (shortVideo) => {
-    if (!dataProvider || !shortVideoProps) {
+const activateSelectedStreamPlayer = (id) => {
+    if (!config) {
         return;
     }
-    let initialProps;
-    switch (playerProps.type) {
-        case MediaCenterMode.ShortVideos:
-            initialProps = playerProps.props;
-            break;
-        case MediaCenterMode.Stream:
-            initialProps = {
-                dataProvider: null,
-                socialInteractionsHandler: playerProps.props.postSocialInteractionsHandler,
-                localization: playerProps.props.localization,
-                showStreamsCloudWatermark: playerProps.props.showStreamsCloudWatermark,
-                on: playerProps.props.on
-            };
-            break;
-        default:
-            Utils.assertUnreachable(playerProps);
-    }
+    mediaCenterMode = MediaCenterMode.Stream;
+    computedPlayerProps = {
+        mode: MediaCenterMode.Stream,
+        props: Object.assign({ streamId: id, dataProvider: config.streamPlayer.streamPlayerDataProvider, analyticsHandler: config.streamPlayer.analyticsHandler, postSocialInteractionsHandler: config.streamPlayer.socialInteractionsHandler }, commonPlayerSettings)
+    };
     selectedCategoryId = null;
-    shortVideoProps = Object.assign(Object.assign({}, initialProps), { dataProvider: makeShortVideosProvider({ dataProvider, prefetchedItems: [shortVideo] }) });
     overviewOpened = false;
+    streamsInCategoryOpened = false;
 };
 const toggleOverview = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (!dataProvider) {
+    if (!config) {
         return;
     }
     overviewOpened = !overviewOpened;
+    streamsInCategoryOpened = false;
     if (overviewOpened && !overviewData) {
         overviewData = { loading: true };
         try {
-            const response = yield dataProvider.getShortVideosCursor({ filter: {}, limit: 5 });
+            const shortVideosResponse = yield config.shortVideosPlayer.getShortVideosCursor({ filter: {}, limit: 5 });
+            const streamsResponse = yield config.streamPlayer.getStreamsCursor({ filter: {}, limit: 5 });
             overviewData = {
                 loading: false,
                 data: {
-                    shortVideos: response.items,
-                    products: uniqueById(response.items.flatMap((i) => i.products)).slice(0, 2)
+                    shortVideos: shortVideosResponse.items,
+                    products: uniqueById(shortVideosResponse.items.flatMap((i) => i.products)).slice(0, 2),
+                    streams: streamsResponse.items
                 }
             };
         }
         catch (_a) {
-            overviewData = { loading: false, data: { shortVideos: [], products: [] } };
+            overviewData = { loading: false, data: { shortVideos: [], products: [], streams: [] } };
         }
     }
 });
@@ -238,14 +262,18 @@ const onScrollMounted = (node) => {
       </div>
     </div>
   {/snippet}
-  {#if shortVideoProps}
+  {#if computedPlayerProps.mode === MediaCenterMode.ShortVideos}
     <ShortVideosPlayerView
-      {...shortVideoProps}
+      {...computedPlayerProps.props}
       categoriesSwitcher={categories.length ? categoriesSwitcher : undefined}
       playerLogo={logo}
-      fadeContent={overviewOpened} />
-  {:else if streamProps}
-    <StreamPlayer {...streamProps} />
+      fadeContent={overlayActivated} />
+  {:else if computedPlayerProps.mode === MediaCenterMode.Stream}
+    <StreamPlayer
+      {...computedPlayerProps.props}
+      categoriesSwitcher={categories.length ? categoriesSwitcher : undefined}
+      playerLogo={logo}
+      fadeContent={overlayActivated} />
   {/if}
   {#if overviewOpened && overviewData?.loading}
     <Loading positionFixedCenter={true} timeout={600} />
@@ -253,7 +281,19 @@ const onScrollMounted = (node) => {
 
   {#if overviewOpened && overviewData?.loading === false}
     <div class="media-center-overview" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-      <Overview data={overviewData.data} localization={localization} on={{ shortVideoSelected: (shortVideo) => activateSelectedShortVideoFeed(shortVideo) }} />
+      <Overview
+        data={overviewData.data}
+        localization={localization}
+        on={{ shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo), streamSelected: (id) => activateSelectedStreamPlayer(id) }} />
+    </div>
+  {/if}
+  {#if streamsInCategoryOpened && streamsInCategoryData?.loading}
+    <Loading positionFixedCenter={true} timeout={600} />
+  {/if}
+
+  {#if streamsInCategoryOpened && streamsInCategoryData?.loading === false}
+    <div class="media-center-overview" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
+      <StreamsInCategory data={streamsInCategoryData.data} on={{ streamSelected: (id) => activateSelectedStreamPlayer(id) }} />
     </div>
   {/if}
 {/if}

package/dist/media-center/media-center/cmp.media-center.svelte.d.ts

@@ -1,19 +1,19 @@
 import type { Locale } from '../../core/locale';
-import type { IMediaCenterDataProvider } from '../data-provider';
+import type { IMediaCenterConfig } from '../config/types';
 import type { ShortVideoPlayerProps } from '../../short-videos/short-videos-player/types';
 import type { StreamPlayerProps } from '../../streams/stream-player/types';
-import { type IMediaCenterLocalization } from './media-center-localization';
 import { MediaCenterMode } from './types';
+type PlayerProps = {
+    mode: MediaCenterMode.ShortVideos;
+    props: ShortVideoPlayerProps;
+} | {
+    mode: MediaCenterMode.Stream;
+    props: StreamPlayerProps;
+};
 type Props = {
-    dataProvider: IMediaCenterDataProvider | null;
-    playerProps: {
-        type: MediaCenterMode.ShortVideos;
-        props: ShortVideoPlayerProps;
-    } | {
-        type: MediaCenterMode.Stream;
-        props: StreamPlayerProps;
-    };
-    localization?: IMediaCenterLocalization | Locale;
+    config: IMediaCenterConfig | null;
+    playerProps: PlayerProps;
+    locale?: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/media-center/media-center/index.d.ts

@@ -1,3 +1,2 @@
 export { default as MediaCenter } from './cmp.media-center.svelte';
 export { MediaCenterMode } from './types';
-export type { IMediaCenterLocalization } from './media-center-localization';

package/dist/media-center/media-center/media-center-localization.d.ts

@@ -1,13 +1,8 @@
 import { type Locale } from '../../core/locale';
-import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
-export interface IMediaCenterLocalization {
-    shortVideosSectionTitle?: string;
-    overviewLabel?: string;
-    productLocalization?: IProductCardLocalization | Locale;
-}
 export declare class MediaCenterLocalization {
     shortVideosSectionTitle: string;
+    streamsSectionTitle: string;
     overviewLabel: string;
-    productLocalization: IProductCardLocalization | Locale;
-    constructor(init: IMediaCenterLocalization | Locale);
+    productLocale: Locale;
+    constructor(locale: Locale);
 }

package/dist/media-center/media-center/media-center-localization.js

@@ -1,12 +1,14 @@
-import { isLocale } from '../../core/locale';
+import {} from '../../core/locale';
 export class MediaCenterLocalization {
     shortVideosSectionTitle;
+    streamsSectionTitle;
     overviewLabel;
-    productLocalization;
-    constructor(init) {
-        this.shortVideosSectionTitle = isLocale(init) ? loc.shortVideosSectionTitle[init] : init.shortVideosSectionTitle || loc.shortVideosSectionTitle.en;
-        this.overviewLabel = isLocale(init) ? loc.overviewLabel[init] : init.overviewLabel || loc.overviewLabel.en;
-        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
+    productLocale;
+    constructor(locale) {
+        this.shortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
+        this.streamsSectionTitle = loc.streamsSectionTitle[locale];
+        this.overviewLabel = loc.overviewLabel[locale];
+        this.productLocale = locale;
     }
 }
 const loc = {
@@ -14,6 +16,10 @@ const loc = {
         en: 'Popular Short Videos',
         no: 'Populære korte videoer'
     },
+    streamsSectionTitle: {
+        en: 'Latest Streams',
+        no: 'Siste Streams'
+    },
     overviewLabel: {
         en: 'Overview',
         no: 'Oversikt'