@streamscloud/embeddable 12.2.0 → 13.0.1

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

@@ -12,7 +12,7 @@ import IconChevronRightFilled from '@fluentui/svg-icons/icons/chevron_right_20_f
 import { slide } from 'svelte/transition';
 let { context, on } = $props();
 const localization = $derived(new MenuLocalization(context.locale));
-const target = $derived.by(() => context.targetData);
+const target = $derived.by(() => context.model);
 const generateCategoriesMap = () => {
     const expanded = {};
     context.categoriesHandler.categoriesGrouped.forEach((c) => {
@@ -23,15 +23,15 @@ const generateCategoriesMap = () => {
     return expanded;
 };
 const categoriesExpandedMap = $state(generateCategoriesMap());
+const indicateActiveCategory = $derived(context.mediaCenterMode !== 'moments');
 const handleCategoryExpaned = (e, categoryId) => {
     e.stopPropagation();
     categoriesExpandedMap[categoryId] = !categoriesExpandedMap[categoryId];
 };
 const styles = $derived.by(() => {
-    var _a;
     const values = [];
-    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.menuBackground) {
-        values.push(`--media-center-menu--background-color: ${context.playerColors.menuBackground}`);
+    if (context.mediaCenterColors.menuBackground) {
+        values.push(`--media-center-menu--background-color: ${context.mediaCenterColors.menuBackground}`);
     }
     return values.join(';');
 });
@@ -49,14 +49,14 @@ const styles = $derived.by(() => {
             {target.name}
           </LineClamp>
         </div>
-        {#if target.membersCount}
+        {#if target.communityFeatures && target.communityFeatures.membersCount}
           <LineClamp maxLines={1} locale={context.locale}>
             <div class="media-center-target__members">
               <span class="media-center-target__members-count">
-                {compactNumber(target.membersCount, { locale: localization.locale })}
+                {compactNumber(target.communityFeatures.membersCount, { locale: localization.locale })}
               </span>
               <span class="media-center-target__members-label">
-                {localization.membersLabel(target.membersCount)}
+                {localization.membersLabel(target.communityFeatures.membersCount)}
               </span>
             </div>
           </LineClamp>
@@ -71,7 +71,7 @@ const styles = $derived.by(() => {
     <div class="media-center-menu__tree">
       <div class="media-center-menu__tree-item">
         <div class="menu-item" class:menu-item--active={!context.categoriesHandler.selectedCategoryId}>
-          <div class="menu-item__value" onclick={() => context.playRootFeed()} onkeydown={() => {}} role="button" tabindex="0">
+          <div class="menu-item__content" onclick={() => context.playRootFeed()} onkeydown={() => {}} role="button" tabindex="0">
             <div class="menu-item__text" class:menu-item__text--active={!context.categoriesHandler.selectedCategoryId}>
               {context.mediaCenterMode === 'discover' ? localization.discoverLabel : localization.feedLabel}
             </div>
@@ -82,12 +82,14 @@ const styles = $derived.by(() => {
         <div
           class="menu-item"
           class:menu-item--child={category.type === 'child'}
-          class:menu-item--active={context.categoriesHandler.selectedCategoryId === category.value.id}>
-          <div class="menu-item__value" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
+          class:menu-item--active={context.categoriesHandler.selectedCategoryId === category.value.id && indicateActiveCategory}>
+          <div class="menu-item__content" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
             <div class="menu-item__image">
               <ImageRound src={category.value.image} noBorders={true} />
             </div>
-            <div class="menu-item__text" class:menu-item__text--active={context.categoriesHandler.selectedCategoryId === category.value.id}>
+            <div
+              class="menu-item__text"
+              class:menu-item__text--active={context.categoriesHandler.selectedCategoryId === category.value.id && indicateActiveCategory}>
               {category.value.name}
             </div>
             {#if category.value.tag}
@@ -96,7 +98,7 @@ const styles = $derived.by(() => {
               </div>
             {/if}
           </div>
-          <ButtonWrapper categoryId={category.value.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
+          <ButtonWrapper categoryId={category.value.id} followingHandler={context.categoriesFollowingHandler} invertedOrientation={true}>
             <button
               type="button"
               class="menu-item__collapser"
@@ -255,7 +257,7 @@ const styles = $derived.by(() => {
   --_menu-item--text--font-size: 0.875rem;
   --_menu-item--image--size: 1.375rem;
 }
-.menu-item__value {
+.menu-item__content {
   display: flex;
   align-items: center;
   flex: 1;
@@ -291,7 +293,6 @@ const styles = $derived.by(() => {
 }
 .menu-item__tag {
   height: min-content;
-  width: min-content;
   border-radius: 0.25rem;
   padding: 0.3125rem 0.375rem;
   font-size: 0.5rem;

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { IMediaCenterConfig } from '../..';
+import type { IMediaCenterDataProvider } from '../..';
 import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 export declare class PopularStreamsPanelHandler {
-    private readonly config;
+    private readonly dataProvider;
     private _state;
     private _streams;
-    constructor(config: IMediaCenterConfig);
+    constructor(dataProvider: IMediaCenterDataProvider);
     get streamSectionItems(): StreamPlayerModel[];
     init: () => Promise<void>;
 }

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.js

@@ -1,9 +1,9 @@
 export class PopularStreamsPanelHandler {
-    config;
+    dataProvider;
     _state = $state('not-initialized');
     _streams = $state.raw([]);
-    constructor(config) {
-        this.config = config;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
     }
     get streamSectionItems() {
         return this._streams;
@@ -12,7 +12,7 @@ export class PopularStreamsPanelHandler {
         if (this._state === 'not-initialized') {
             this._state = 'loading';
             try {
-                const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: {}, limit: 2 });
+                const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({ filter: {}, limit: 2 });
                 this._streams = streamsResponse.items;
             }
             finally {

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

@@ -1,22 +1,30 @@
-<script lang="ts">import { Theme } from '../../../core/theme';
-import { ImageRound } from '../../../ui/image';
+<script lang="ts">import { ImageRound } from '../../../ui/image';
 let { context } = $props();
+const handler = context.momentsFeedHandler;
 const styles = $derived.by(() => {
-    var _a;
     const values = [];
-    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.brand) {
-        values.push(`--moments-circle--brand-color: ${context.playerColors.brand}`);
+    if (context.mediaCenterColors.brand) {
+        values.push(`--moments-circle--brand-color: ${context.mediaCenterColors.brand}`);
     }
     return values.join(';');
 });
 const handleClick = () => {
-    Theme.toggle();
+    if (!handler.hasMoments) {
+        return;
+    }
+    context.playMoments();
 };
 </script>
 
-<div class="moments-circle" style={styles} onclick={handleClick} onkeydown={() => {}} role="none">
-  {#if context.targetData}
-    <ImageRound src={context.targetData.image} />
+<div
+  class="moments-circle"
+  class:moments-circle--clickable={handler.hasMoments}
+  class:moments-circle--has-unwatched={handler.hasUnwatchedMoments}
+  style={styles}
+  onclick={handleClick}
+  role="none">
+  {#if context.model}
+    <ImageRound src={context.model.image} noBorders={!handler.hasUnwatchedMoments} />
   {/if}
 </div>
 
@@ -39,7 +47,12 @@ const handleClick = () => {
   height: 6.25%rem;
   min-height: 6.25%rem;
   max-height: 6.25%rem;
+}
+.moments-circle--has-unwatched {
   --image--rounded--inner--border-width: 1px;
   --image--rounded--outer--border-color: var(--_moments-circle--brand-color);
   --image--rounded--outer--border-width: 2px;
+}
+.moments-circle--clickable {
+  cursor: pointer;
 }</style>

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

@@ -1 +1,2 @@
 export { default as MomentsCircle } from './cmp.moments-circle.svelte';
+export { MomentsFeedHandler } from './moments-feed-handler.svelte';

package/dist/media-center/media-center/moments/index.js

@@ -1 +1,2 @@
 export { default as MomentsCircle } from './cmp.moments-circle.svelte';
+export { MomentsFeedHandler } from './moments-feed-handler.svelte';

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { IMediaCenterDataProvider } from '../..';
+import type { PostsPlayerProps } from '../../../posts/posts-player/types';
+import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
+import { MomentsState } from './moments-state.svelte';
+import { MediaCenterSettingsHandler } from '../handlers';
+export declare class MomentsFeedHandler {
+    momentsState: MomentsState;
+    private _active;
+    private _momentsPlayerProps;
+    private _dataProvider;
+    private _mediaCenterSettingsHandler;
+    private _closeOrchestrator;
+    private _onPlayerReachedEnd;
+    constructor(data: {
+        dataProvider: IMediaCenterDataProvider;
+        mediaCenterSettingsHandler: MediaCenterSettingsHandler;
+        closeOrchestrator: ICloseOrchestrator;
+        onPlayerReachedEnd: () => void;
+    });
+    get active(): boolean;
+    get momentsPlayerProps(): PostsPlayerProps | null;
+    get hasUnwatchedMoments(): boolean;
+    get hasMoments(): boolean;
+    deactivate: () => void;
+    activateMoments: () => Promise<void>;
+}

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.js

@@ -0,0 +1,49 @@
+import { initBufferFromProvider } from '../../../ui/player/providers/service';
+import { MomentsState } from './moments-state.svelte';
+import { MediaCenterSettingsHandler } from '../handlers';
+export class MomentsFeedHandler {
+    momentsState;
+    _active = $state(false);
+    _momentsPlayerProps = $state.raw(null);
+    _dataProvider;
+    _mediaCenterSettingsHandler;
+    _closeOrchestrator;
+    _onPlayerReachedEnd;
+    constructor(data) {
+        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, onPlayerReachedEnd } = data;
+        this.momentsState = new MomentsState(dataProvider);
+        this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
+        this._dataProvider = dataProvider;
+        this._closeOrchestrator = closeOrchestrator;
+        this._onPlayerReachedEnd = onPlayerReachedEnd;
+    }
+    get active() {
+        return this._active;
+    }
+    get momentsPlayerProps() {
+        return this._momentsPlayerProps;
+    }
+    get hasUnwatchedMoments() {
+        return this.momentsState.unwatchedMoments.length > 0;
+    }
+    get hasMoments() {
+        return this.momentsState.allMoments.length > 0;
+    }
+    deactivate = () => {
+        this._active = false;
+    };
+    activateMoments = async () => {
+        this._momentsPlayerProps = {
+            dataProvider: { type: 'buffer', buffer: initBufferFromProvider(this.momentsState.generatePlayerDataProvider(this._onPlayerReachedEnd)) },
+            socialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
+            analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
+            playerSettings: this._mediaCenterSettingsHandler.playerSettings,
+            closeOrchestrator: this._closeOrchestrator,
+            on: {
+                postActivated: (id) => this.momentsState.markMomentAsSeen(id),
+                backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
+            }
+        };
+        this._active = true;
+    };
+}

package/dist/media-center/media-center/moments/moments-state.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { IMediaCenterDataProvider } from '../..';
+import { type PostPlayerModel } from '../../../posts/posts-player';
+import type { IChunksPlayerDataProvider } from '../../../ui/player/providers';
+export declare class MomentsState {
+    private readonly dataProvider;
+    private momentsSeenLocally;
+    constructor(dataProvider: IMediaCenterDataProvider);
+    get allMoments(): {
+        id: string;
+        cover: string;
+        isSeen: boolean;
+    }[];
+    get unwatchedMoments(): {
+        id: string;
+        cover: string;
+        isSeen: boolean;
+    }[];
+    markMomentAsSeen: (momentId: string) => void;
+    generatePlayerDataProvider: (onEndReached: () => void) => IChunksPlayerDataProvider<PostPlayerModel>;
+}

package/dist/media-center/media-center/moments/moments-state.svelte.js

@@ -0,0 +1,82 @@
+import { PostType } from '../../../core/enums';
+import {} from '../../../posts/posts-player';
+export class MomentsState {
+    dataProvider;
+    momentsSeenLocally = $state.raw([]);
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
+    }
+    get allMoments() {
+        return this.dataProvider.model?.moments ?? [];
+    }
+    get unwatchedMoments() {
+        return this.allMoments.filter((s) => !s.isSeen && !this.momentsSeenLocally.includes(s.id));
+    }
+    markMomentAsSeen = (momentId) => {
+        if (!this.momentsSeenLocally.includes(momentId)) {
+            this.momentsSeenLocally = [...this.momentsSeenLocally, momentId];
+        }
+    };
+    generatePlayerDataProvider = (onEndReached) => {
+        const collectionCapacity = 5;
+        const sortedMoments = [...this.allMoments].sort((a, b) => {
+            const aUnwatched = !a.isSeen && !this.momentsSeenLocally.includes(a.id);
+            const bUnwatched = !b.isSeen && !this.momentsSeenLocally.includes(b.id);
+            if (aUnwatched === bUnwatched) {
+                return 0;
+            }
+            return aUnwatched ? -1 : 1;
+        });
+        const ids = sortedMoments.map((m) => m.id);
+        const idOrder = new Map();
+        ids.forEach((id, idx) => idOrder.set(id, idx));
+        const chunksCount = Math.ceil(sortedMoments.length / collectionCapacity);
+        const prefetchedChunks = [];
+        for (let i = 1; i <= chunksCount; i++) {
+            prefetchedChunks.push({
+                id: i.toString()
+            });
+        }
+        return {
+            kind: 'chunks',
+            initialData: {
+                prefetchedChunks
+            },
+            loadMoreChunks: () => {
+                return Promise.resolve([]);
+            },
+            loadChunkItems: async (chunkId, continuationToken) => {
+                const emptyResult = {
+                    items: [],
+                    continuationToken: null
+                };
+                if (continuationToken === null) {
+                    return emptyResult;
+                }
+                const idsStart = (parseInt(chunkId) - 1) * collectionCapacity;
+                const idsEnd = Math.min(idsStart + collectionCapacity, ids.length);
+                const momentsInChunk = ids.slice(idsStart, idsEnd);
+                if (momentsInChunk.length === 0) {
+                    return emptyResult;
+                }
+                const moments = await this.dataProvider.postsPlayer.getPostsCursor({
+                    filter: {
+                        types: [PostType.Moment],
+                        includeIds: momentsInChunk
+                    },
+                    limit: collectionCapacity
+                });
+                const items = moments.items.sort((a, b) => {
+                    const ia = idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
+                    const ib = idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
+                    return ia - ib;
+                });
+                return {
+                    items,
+                    continuationToken: null
+                };
+            },
+            onEndReached
+        };
+    };
+}

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel-handler.svelte.d.ts

@@ -1,14 +1,14 @@
-import type { IMediaCenterConfig } from '../../../short-videos/short-videos-player';
+import type { IMediaCenterDataProvider } from '../../config/types';
 import type { StreamPlayerModel } from '../../../streams/streams-player';
 import type { MediaCenterCategoryData } from '../types';
 export declare class StreamsInCategoryPanelHandler {
-    private readonly config;
+    private readonly dataProvider;
     private _activated;
     private _state;
     private _categoryId;
     private _categoryName;
     private _streams;
-    constructor(config: IMediaCenterConfig);
+    constructor(dataProvider: IMediaCenterDataProvider);
     get streamSectionItems(): StreamPlayerModel[];
     get categoryId(): string;
     get categoryName(): string;

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel-handler.svelte.js

@@ -1,12 +1,12 @@
 export class StreamsInCategoryPanelHandler {
-    config;
+    dataProvider;
     _activated = $state(false);
     _state = $state('loading');
     _categoryId = $state.raw('');
     _categoryName = $state.raw('');
     _streams = $state.raw([]);
-    constructor(config) {
-        this.config = config;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
     }
     get streamSectionItems() {
         return this._streams;
@@ -33,7 +33,7 @@ export class StreamsInCategoryPanelHandler {
         this._activated = true;
         this._state = 'loading';
         try {
-            const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: categoryData.id }, limit: 5 });
+            const streamsResponse = await this.dataProvider.streamPlayer.getStreamsCursor({ filter: { categoryId: categoryData.id }, limit: 5 });
             this._categoryName = categoryData.parentName ? `${categoryData.parentName} - ${categoryData.name}` : categoryData.name;
             this._categoryId = categoryData.id;
             this._streams = streamsResponse.items;

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

@@ -2,7 +2,7 @@ import type { Locale } from '../../core/locale';
 import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
 import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
 import type { IPlayerDataProvider } from '../../ui/player/providers';
-export type MediaCenterMode = 'feed' | 'discover';
+export type MediaCenterMode = 'feed' | 'discover' | 'moments';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;
@@ -26,7 +26,7 @@ export type MediaCenterModeProps = {
         }) => void;
     };
 } | {
-    mode: 'discover';
+    mode: 'default';
 };
 export type PlayerProps = {
     type: 'posts';
@@ -35,7 +35,7 @@ export type PlayerProps = {
     type: 'streams';
     props: StreamsPlayerProps;
 };
-export type MediaCenterSettings = {
+export type IMediaCenterSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     disableBackground?: boolean;

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

@@ -0,0 +1 @@
+export type { IMediaCenterMembershipHandler } from './types';

package/dist/media-center/membership/index.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/membership/mock-membership-handler.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IMediaCenterMembershipHandler } from './types';
+export declare class MockMembershipHandler implements IMediaCenterMembershipHandler {
+    private isJoined;
+    getIsJoined: () => Promise<{
+        readonly isJoined: boolean;
+    }>;
+    join: () => void;
+    leave: () => void;
+    viewMembersList: () => void;
+}

package/dist/media-center/membership/mock-membership-handler.svelte.js

@@ -0,0 +1,21 @@
+export class MockMembershipHandler {
+    isJoined = $state(false);
+    getIsJoined = () => {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const handler = this;
+        return Promise.resolve({
+            get isJoined() {
+                return handler.isJoined;
+            }
+        });
+    };
+    join = () => {
+        this.isJoined = true;
+    };
+    leave = () => {
+        this.isJoined = false;
+    };
+    viewMembersList = () => {
+        console.warn('MockMembershipHandler.viewMembersList called');
+    };
+}

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

@@ -0,0 +1,10 @@
+export interface IMediaCenterMembershipHandler {
+    getIsJoined: () => PromiseLike<{
+        readonly isJoined: boolean;
+    }>;
+    join: () => PromiseLike<void>;
+    leave: () => PromiseLike<void>;
+    viewMembersList: () => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
+export {};

package/dist/media-center/membership/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export type { IMediaCenterNavigationHandler } from './types';
+export type { MediaCenterState } from './media-center-state';

package/dist/media-center/navigation/index.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/navigation/media-center-state.d.ts

@@ -0,0 +1,19 @@
+export type MediaCenterState = PostsFeedState | StreamsFeedState | DiscoverState | MomentsState;
+export type PostsFeedState = {
+    mode: 'posts-feed';
+    postId: string;
+    categoryId: string | null;
+};
+export type StreamsFeedState = {
+    mode: 'streams-feed';
+    streamId: string;
+    categoryId: string | null;
+};
+export type DiscoverState = {
+    mode: 'discover';
+    categoryId: string | null;
+};
+export type MomentsState = {
+    mode: 'moments';
+    momentId: string;
+};

package/dist/media-center/navigation/media-center-state.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/navigation/mock-navigation-handler.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { MediaCenterState } from './media-center-state';
+import type { IMediaCenterNavigationHandler } from './types';
+export declare class MockNavigationHandler implements IMediaCenterNavigationHandler {
+    initialState: undefined;
+    onChange: (state: MediaCenterState) => void;
+}

package/dist/media-center/navigation/mock-navigation-handler.svelte.js

@@ -0,0 +1,6 @@
+export class MockNavigationHandler {
+    initialState = undefined;
+    onChange = (state) => {
+        console.warn(state);
+    };
+}

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

@@ -0,0 +1,5 @@
+import type { MediaCenterState } from './media-center-state';
+export interface IMediaCenterNavigationHandler {
+    initialState?: MediaCenterState;
+    onChange: (state: MediaCenterState) => void;
+}

package/dist/media-center/navigation/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -8,18 +8,24 @@
     });
 };
 import { MediaCenterProxy } from '../media-center/media-center';
+import { MediaCenterSettings } from '../media-center/media-center/media-center-settings.svelte';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { createShadowRoot } from '../ui/shadow-dom';
 import { mount, unmount } from 'svelte';
-let { config, settings, modeProps } = $props();
+let { dataProvider, settings, dynamicActions } = $props();
+const settingsHolder = new MediaCenterSettings(settings);
+$effect(() => {
+    settingsHolder.patch(settings);
+});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(MediaCenterProxy, {
         target: shadowRoot,
         props: {
-            config,
-            settings,
-            modeProps,
+            dataProvider,
+            settings: settingsHolder,
+            modeProps: { mode: 'default' },
+            dynamicActions,
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
                     yield unmount(mounted);

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

@@ -1,9 +1,10 @@
-import type { IMediaCenterConfig } from '../media-center';
-import type { MediaCenterModeProps, MediaCenterSettings } from '../media-center/media-center/types';
+import type { IMediaCenterDataProvider } from '../media-center';
+import type { IMediaCenterSettings } from '../media-center/media-center/types';
+import { type Snippet } from 'svelte';
 type Props = {
-    config: IMediaCenterConfig;
-    settings?: MediaCenterSettings;
-    modeProps: MediaCenterModeProps;
+    dataProvider: IMediaCenterDataProvider;
+    settings?: IMediaCenterSettings;
+    dynamicActions?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;