@streamscloud/embeddable 12.2.0 → 13.0.0

package/dist/media-center/media-center/handlers/media-center-settings-handler.svelte.js

@@ -1,45 +1,38 @@
 import { Theme } from '../../../core/theme';
-import { untrack } from 'svelte';
+import { PlayerColors } from '../../../ui/player/colors';
 export class MediaCenterSettingsHandler {
     _backgroundImageUrl = $state(null);
-    _contentPlayerSettings = $state({});
-    _colorsMap = {
-        light: null,
-        dark: null
-    };
-    constructor(settings) {
-        this._contentPlayerSettings = settings ?? {};
-        $effect(() => {
-            const theme = Theme.get();
-            untrack(() => {
-                this._contentPlayerSettings.playerColors = this._colorsMap[theme];
-            });
-        });
+    _mediaCenterSettings;
+    _dataProvider;
+    _contentPlayerSettings = $derived.by(() => ({
+        locale: this._mediaCenterSettings.locale,
+        playerColors: this._dataProvider.model?.playerColors,
+        showStreamsCloudWatermark: this._mediaCenterSettings.showStreamsCloudWatermark
+    }));
+    constructor(init) {
+        this._mediaCenterSettings = init.settings;
+        this._dataProvider = init.dataProvider;
     }
     get playerSettings() {
         return this._contentPlayerSettings;
     }
+    get actualMediaCenterColors() {
+        return this._dataProvider.model?.playerColors?.[Theme.get()] || new PlayerColors(null);
+    }
     get locale() {
-        return this._contentPlayerSettings.locale || 'en';
+        return this._mediaCenterSettings.locale;
     }
     get backgroundWrapperProps() {
         return {
-            backgroundDisabled: this._contentPlayerSettings.disableBackground === true,
+            backgroundDisabled: this._mediaCenterSettings.disableBackground,
             backgroundImageUrl: this._backgroundImageUrl,
-            backgroundColor: this._contentPlayerSettings.playerColors?.playerBackground
+            backgroundColor: this.actualMediaCenterColors.playerBackground
         };
     }
     get backgroundImageLoadedHandler() {
-        return this._contentPlayerSettings.disableBackground === true ? undefined : (url) => this.updateBackgroundImageUrl(url);
+        return this._mediaCenterSettings.disableBackground ? undefined : (url) => this.updateBackgroundImageUrl(url);
     }
     updateBackgroundImageUrl = (url) => {
         this._backgroundImageUrl = url;
     };
-    updatePlayerColors = (colors) => {
-        this._colorsMap = {
-            light: null,
-            dark: colors
-        };
-        this._contentPlayerSettings.playerColors = this._colorsMap[Theme.get()];
-    };
 }

package/dist/media-center/media-center/{header-footer → header}/index.d.ts

@@ -1,3 +1,2 @@
-export { default as MediaCenterFooter } from './media-center-footer.svelte';
 export { default as MediaCenterHeaderMobile } from './media-center-header-mobile.svelte';
 export { default as MediaCenterHeader } from './media-center-header.svelte';

package/dist/media-center/media-center/{header-footer → header}/index.js

@@ -1,3 +1,2 @@
-export { default as MediaCenterFooter } from './media-center-footer.svelte';
 export { default as MediaCenterHeaderMobile } from './media-center-header-mobile.svelte';
 export { default as MediaCenterHeader } from './media-center-header.svelte';

package/dist/media-center/media-center/{header-footer → header}/media-center-header.svelte

@@ -10,13 +10,18 @@ import IconReOrderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_h
 import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
 const SCROLL_MASK_OFFSET = 32;
-let { context, on } = $props();
+const HEADER_CONTENT_MAX_WIDTH = 1180;
+const HEADER_SIDE_SPACER_MIN_WIDTH = 30;
+let { context, on, dynamicActions } = $props();
 const localization = $derived(new MediaCenterHeaderLocalization(context.locale));
+let headerRef = $state(null);
 let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
+    headerRef = node;
     const heightResizeObserver = new ResizeObserver(() => {
         const headerHeight = node.clientHeight;
         on.headerHeightChanged(headerHeight);
+        calcHeaderGridProportions();
     });
     heightResizeObserver.observe(node);
     return {
@@ -26,6 +31,62 @@ const headerMounted = (node) => {
         }
     };
 };
+const handleCloseButtonMounted = (_) => {
+    calcHeaderGridProportions();
+};
+const handleDynamicActionsMounted = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        calcHeaderGridProportions();
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy: () => {
+            resizeObserver.disconnect();
+        }
+    };
+};
+const calcHeaderGridProportions = () => {
+    if (!headerRef) {
+        return;
+    }
+    const children = Array.from(headerRef.children);
+    if (children.length !== 3) {
+        console.warn('Media Center header structure is unexpected. Cannot calculate grid proportions.');
+        return;
+    }
+    const headerWidth = headerRef.clientWidth;
+    const minRequiredSpacerWidth = Math.max(HEADER_SIDE_SPACER_MIN_WIDTH, (headerWidth - HEADER_CONTENT_MAX_WIDTH) / 2);
+    const calcSpacerMinWidth = (container) => {
+        container.style.width = ``;
+        const children = Array.from(container.children);
+        const { paddingLeft, paddingRight } = window.getComputedStyle(container);
+        const paddingsWidth = parseFloat(paddingLeft) + parseFloat(paddingRight);
+        if (children.length === 0) {
+            return paddingsWidth;
+        }
+        const containerRect = container.getBoundingClientRect();
+        let minLeft = Infinity;
+        let maxRight = -Infinity;
+        children.forEach((child) => {
+            const rect = child.getBoundingClientRect();
+            const relativeLeft = rect.left - containerRect.left;
+            const relativeRight = rect.right - containerRect.left;
+            minLeft = Math.min(minLeft, relativeLeft);
+            maxRight = Math.max(maxRight, relativeRight);
+        });
+        return maxRight - minLeft + paddingsWidth;
+    };
+    const leftSpacer = children[0];
+    const leftSpacerMinWidth = calcSpacerMinWidth(leftSpacer);
+    const adjustedLeftSpacerMinWidth = Math.max(leftSpacerMinWidth, minRequiredSpacerWidth);
+    const rightSpacer = children[2];
+    const rightSpacerMinWidth = calcSpacerMinWidth(rightSpacer);
+    const adjustedRightSpacerMinWidth = Math.max(rightSpacerMinWidth, minRequiredSpacerWidth);
+    const content = children[1];
+    leftSpacer.style.width = `${adjustedLeftSpacerMinWidth}px`;
+    rightSpacer.style.width = `${adjustedRightSpacerMinWidth}px`;
+    content.style.width = `${headerWidth - adjustedLeftSpacerMinWidth - adjustedRightSpacerMinWidth}px`;
+};
 const onScrollMounted = (node) => {
     scrollAreaRef = node;
     scrollAreaRef.style.setProperty('--scroll-area--mask-offset', `${SCROLL_MASK_OFFSET}px`);
@@ -52,23 +113,26 @@ const updateScrollShadows = (scrollArea) => {
     scrollArea.classList.toggle('has-both-masks', scrollHasRight && scrollHasLeft);
 };
 const styles = $derived.by(() => {
-    var _a, _b;
     const values = [];
-    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.button) {
-        values.push(`--media-center-header--button-color: ${context.playerColors.button}`);
+    if (context.mediaCenterColors.button) {
+        values.push(`--media-center-header--button-color: ${context.mediaCenterColors.button}`);
+    }
+    if (context.mediaCenterColors.buttonInactive) {
+        values.push(`--media-center-header--button-color--inactive: ${context.mediaCenterColors.buttonInactive}`);
     }
-    if ((_b = context.playerColors) === null || _b === void 0 ? void 0 : _b.buttonInactive) {
-        values.push(`--media-center-header--button-color--inactive: ${context.playerColors.buttonInactive}`);
+    if (context.mediaCenterColors.brand) {
+        values.push(`--media-center-header--button-indicator: ${context.mediaCenterColors.brand}`);
     }
     return values.join(';');
 });
 </script>
 
 <div class="media-center-header-container" use:headerMounted>
+  <div class="spacer"></div>
   <div class="media-center-header" style={styles}>
-    {#if context.targetData?.logo}
+    {#if context.model?.logo}
       <div class="media-center-header__logo-wrap">
-        <img src={context.targetData.logo} class="media-center-header__logo" alt={context.targetData?.name} />
+        <img src={context.model.logo} class="media-center-header__logo" alt={context.model?.name} />
       </div>
     {/if}
     <button type="button" class="control-button control-button--trigger" class:control-button--active={context.menuActive} onclick={context.toggleMenu}>
@@ -106,7 +170,12 @@ const styles = $derived.by(() => {
             {localization.buttons.cart}
           </span>
         </button>
-        <button type="button" class="control-button" class:control-button--active={false} onclick={() => ({})}>
+        <button
+          type="button"
+          class="control-button"
+          class:control-button--active={context.momentsFeedHandler.active}
+          class:control-button--indicator={context.momentsFeedHandler.hasUnwatchedMoments}
+          onclick={() => context.playMoments()}>
           <span class="control-button__value">
             {localization.buttons.moments}
           </span>
@@ -138,16 +207,25 @@ const styles = $derived.by(() => {
       </div>
     </div>
   </div>
-  {#if context.closeOrchestrator.closeTriggerVisible}
-    <div class="close-button">
-      <PlayerButton
-        icon={IconDismiss}
-        zoom={0.8}
-        activeColor={context.playerColors?.button ?? null}
-        inactiveColor={context.playerColors?.buttonInactive ?? null}
-        on={{ click: context.closeOrchestrator.requestClose }} />
-    </div>
-  {/if}
+  <div class="spacer spacer--right">
+    {#if dynamicActions}
+      <div class="dynamic-actions" use:handleDynamicActionsMounted>
+        <div class="dynamic-actions__content">
+          {@render dynamicActions()}
+        </div>
+      </div>
+    {/if}
+    {#if context.closeOrchestrator.closeTriggerVisible}
+      <div class="close-button" use:handleCloseButtonMounted>
+        <PlayerButton
+          icon={IconDismiss}
+          zoom={0.8}
+          activeColor={context.mediaCenterColors.button}
+          inactiveColor={context.mediaCenterColors.buttonInactive}
+          on={{ click: context.closeOrchestrator.requestClose }} />
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>@keyframes fadeIn {
@@ -162,24 +240,30 @@ const styles = $derived.by(() => {
   }
 }
 .media-center-header-container {
-  padding-top: 2.1875rem;
-  padding-inline: 4.375rem;
-  pointer-events: none;
   z-index: 1;
   display: flex;
-  justify-content: center;
   position: relative;
 }
 
+.spacer {
+  flex: 1 1 auto;
+  display: flex;
+  padding-inline: 0.9375rem;
+  gap: 0.9375rem;
+}
+.spacer--right {
+  justify-content: flex-end;
+}
+
 .media-center-header {
   --_media-center-header--button-color: var(--media-center-header--button-color, var(--sc-mc-color--button-player));
   --_media-center-header--button-color--inactive: var(
     --media-center-header--button-color--inactive,
     rgb(from var(--_media-center-header--button-color, var(--sc-mc-color--button-player)) r g b / 60%)
   );
+  --_media-center-header--button-indicator: var(--media-center-header--button-indicator, var(--sc-mc-color--icon-success));
+  padding-top: 2.1875rem;
   width: 73.75rem;
-  max-width: 100%;
-  margin: 0 auto;
   display: flex;
   align-items: center;
   gap: 1.5rem;
@@ -280,6 +364,17 @@ const styles = $derived.by(() => {
   background-color: var(--_media-center-header--button-color);
   color: var(--sc-mc-color--text-white);
 }
+.control-button--indicator::after {
+  content: "";
+  position: absolute;
+  top: 0rem;
+  right: 0rem;
+  width: 0.875rem;
+  height: 0.875rem;
+  transform: translate(20%, -20%);
+  background-color: var(--_media-center-header--button-indicator);
+  border-radius: 50%;
+}
 .control-button:hover:not(.control-button--active) {
   background-color: var(--_media-center-header--button-color);
 }
@@ -303,9 +398,19 @@ const styles = $derived.by(() => {
   min-width: 0;
 }
 
+.dynamic-actions {
+  display: flex;
+  padding-top: 2.1875rem;
+}
+.dynamic-actions__content {
+  display: flex;
+  justify-content: center;
+}
+
 .close-button {
-  position: absolute;
-  top: 0.9375rem;
-  right: 1.25rem;
+  justify-self: flex-end;
+  flex-shrink: 0;
+  padding-block: 0.9375rem;
+  padding-right: 0.3125rem;
   z-index: 1;
 }</style>

package/dist/media-center/media-center/{header-footer → header}/media-center-header.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { MediaCenterContext } from '../media-center-context.svelte';
+import type { Snippet } from 'svelte';
 type Props = {
     context: MediaCenterContext;
     on: {
         headerHeightChanged: (height: number) => void;
     };
+    dynamicActions?: Snippet;
 };
 declare const MediaCenterHeader: import("svelte").Component<Props, {}, "">;
 type MediaCenterHeader = ReturnType<typeof MediaCenterHeader>;

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

@@ -1 +1,2 @@
 export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';
+export { MediaCenterSettings } from './media-center-settings.svelte';

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

@@ -1 +1,2 @@
 export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';
+export { MediaCenterSettings } from './media-center-settings.svelte';

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

@@ -1,12 +1,13 @@
-import type { IContentCategoryFollowingHandler } from '../categories-following/types';
-import type { IMediaCenterConfig } from '../config/types';
+import type { IMediaCenterDataProvider } from '../config/types';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { DiscoverViewHandler } from './discover';
 import { FeedHandler } from './feed';
 import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
+import type { MediaCenterSettings } from './media-center-settings.svelte';
 import { PopularStreamsPanelHandler } from './menu';
+import { MomentsFeedHandler } from './moments';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
-import type { MediaCenterMode, MediaCenterSettings } from './types';
+import type { MediaCenterMode } from './types';
 export declare class MediaCenterContext {
     initializing: boolean;
     initialized: boolean;
@@ -14,21 +15,21 @@ export declare class MediaCenterContext {
     menuActive: boolean;
     categoriesHandler: CategoriesHandler;
     feedHandler: FeedHandler;
+    momentsFeedHandler: MomentsFeedHandler;
     discoverHandler: DiscoverViewHandler;
     popularStreamsHandler: PopularStreamsPanelHandler;
     streamsInCategoryHandler: StreamsInCategoryPanelHandler;
-    categoryFollowingHandler: IContentCategoryFollowingHandler | null;
     settingsHandler: MediaCenterSettingsHandler;
     closeOrchestrator: ICloseOrchestrator;
-    private _targetData;
+    private _dataProvider;
     constructor(data: {
-        config: IMediaCenterConfig;
+        dataProvider: IMediaCenterDataProvider;
         closeOrchestrator: ICloseOrchestrator;
-        settings?: MediaCenterSettings;
+        settings: MediaCenterSettings;
         on: MediaCenterContextInitializationCallbacks;
     });
-    get targetData(): import("../config/types").MediaCenterTargetDataModel | null;
-    get playerColors(): import("../../ui/player/colors").PlayerColors | undefined;
+    get model(): import("../config/types").MediaCenterModel | null;
+    get mediaCenterColors(): import("../../ui/player/colors").PlayerColors;
     get loading(): boolean;
     get overlayIsActive(): boolean;
     get backgroundWrapperProps(): {
@@ -37,6 +38,10 @@ export declare class MediaCenterContext {
         backgroundColor?: string | null;
     };
     get feedPlayerProps(): import("./types").PlayerProps | null;
+    get momentsPlayerProps(): import("../../posts/posts-player/types").PostsPlayerProps | null;
+    get membershipHandler(): import("..").IMediaCenterMembershipHandler | null;
+    get navigationHandler(): import("..").IMediaCenterNavigationHandler | null;
+    get categoriesFollowingHandler(): import("..").IContentCategoryFollowingHandler | null;
     get locale(): import("../../core/locale").Locale;
     toggleMenu: () => void;
     showMenu: () => void;
@@ -46,6 +51,7 @@ export declare class MediaCenterContext {
     }) => Promise<void>;
     playPostsFeed: (options: Parameters<FeedHandler["activatePostsFeed"]>[0]) => Promise<void>;
     playStreamsFeed: (options: Parameters<FeedHandler["activateStreamsFeed"]>[0]) => Promise<void>;
+    playMoments: () => Promise<void>;
     playRootFeed: () => Promise<void>;
     tryActivateStreamsInCategory: (categoryId: string) => Promise<void>;
     private deactivateOtherThanFeed;

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -2,6 +2,7 @@ import { DiscoverViewHandler } from './discover';
 import { FeedHandler } from './feed';
 import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
+import { MomentsFeedHandler } from './moments';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
 export class MediaCenterContext {
     initializing = $state(true);
@@ -10,35 +11,50 @@ export class MediaCenterContext {
         if (this.discoverHandler.activated) {
             return 'discover';
         }
+        if (this.momentsFeedHandler.active) {
+            return 'moments';
+        }
         return 'feed';
     });
     menuActive = $state(false);
-    categoriesHandler = new CategoriesHandler();
+    categoriesHandler;
     feedHandler;
+    momentsFeedHandler;
     discoverHandler;
     popularStreamsHandler;
     streamsInCategoryHandler;
-    categoryFollowingHandler = $state.raw(null);
     settingsHandler;
     closeOrchestrator;
-    _targetData = $state.raw(null);
+    _dataProvider;
     constructor(data) {
-        const { config, closeOrchestrator, settings, on } = data;
+        const { dataProvider, closeOrchestrator, settings, on } = data;
+        this._dataProvider = dataProvider;
         this.closeOrchestrator = closeOrchestrator;
         this.closeOrchestrator.setCloseTriggerAttached(true);
-        this.settingsHandler = new MediaCenterSettingsHandler(settings);
-        this.feedHandler = new FeedHandler({ config, mediaCenterSettingsHandler: this.settingsHandler, closeOrchestrator });
-        this.discoverHandler = new DiscoverViewHandler(config);
-        this.popularStreamsHandler = new PopularStreamsPanelHandler(config);
-        this.streamsInCategoryHandler = new StreamsInCategoryPanelHandler(config);
-        this.categoryFollowingHandler = config.handlers?.categoriesFollowingHandler ?? null;
-        this.init(config, on);
+        this.settingsHandler = new MediaCenterSettingsHandler({ settings, dataProvider });
+        this.feedHandler = new FeedHandler({
+            dataProvider,
+            mediaCenterSettingsHandler: this.settingsHandler,
+            closeOrchestrator,
+            onPlayerReachedEnd: () => this.activateDiscover({ categoryId: this.categoriesHandler.selectedCategoryId })
+        });
+        this.categoriesHandler = new CategoriesHandler(dataProvider);
+        this.discoverHandler = new DiscoverViewHandler(dataProvider);
+        this.popularStreamsHandler = new PopularStreamsPanelHandler(dataProvider);
+        this.streamsInCategoryHandler = new StreamsInCategoryPanelHandler(dataProvider);
+        this.momentsFeedHandler = new MomentsFeedHandler({
+            dataProvider,
+            mediaCenterSettingsHandler: this.settingsHandler,
+            closeOrchestrator,
+            onPlayerReachedEnd: () => this.activateDiscover({ categoryId: this.categoriesHandler.selectedCategoryId })
+        });
+        this.init(dataProvider, on);
     }
-    get targetData() {
-        return this._targetData;
+    get model() {
+        return this._dataProvider.model;
     }
-    get playerColors() {
-        return this.settingsHandler.playerSettings.playerColors;
+    get mediaCenterColors() {
+        return this.settingsHandler.actualMediaCenterColors;
     }
     get loading() {
         return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
@@ -52,6 +68,18 @@ export class MediaCenterContext {
     get feedPlayerProps() {
         return this.feedHandler.feedPlayerProps;
     }
+    get momentsPlayerProps() {
+        return this.momentsFeedHandler.momentsPlayerProps;
+    }
+    get membershipHandler() {
+        return this._dataProvider.handlers?.membershipHandler || null;
+    }
+    get navigationHandler() {
+        return this._dataProvider.handlers?.navigationHandler || null;
+    }
+    get categoriesFollowingHandler() {
+        return this._dataProvider.handlers?.categoriesFollowingHandler || null;
+    }
     get locale() {
         return this.settingsHandler.locale;
     }
@@ -74,6 +102,7 @@ export class MediaCenterContext {
         this.settingsHandler.updateBackgroundImageUrl('not-applicable');
         this.hideMenu();
         this.feedHandler.deactivate();
+        this.momentsFeedHandler.deactivate();
         this.streamsInCategoryHandler.deactivate();
         this.categoriesHandler.selectedCategoryId = options.categoryId;
         const childCategories = this.categoriesHandler.allCategories.filter((c) => c.parentId === this.categoriesHandler.selectedCategoryId);
@@ -92,6 +121,16 @@ export class MediaCenterContext {
         this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
         this.feedHandler.activateStreamsFeed(options);
     };
+    playMoments = async () => {
+        if (!this.momentsFeedHandler.hasMoments) {
+            return;
+        }
+        this.hideMenu();
+        this.feedHandler.deactivate();
+        this.discoverHandler.deactivate();
+        this.streamsInCategoryHandler.deactivate();
+        this.momentsFeedHandler.activateMoments();
+    };
     playRootFeed = async () => {
         this.deactivateOtherThanFeed();
         this.categoriesHandler.selectedCategoryId = null;
@@ -107,24 +146,23 @@ export class MediaCenterContext {
         await this.streamsInCategoryHandler.activate(selectedCategoryData);
         this.hideMenu();
         this.feedHandler.deactivate();
+        this.momentsFeedHandler.deactivate();
         this.discoverHandler.deactivate();
         this.categoriesHandler.selectedCategoryId = categoryId;
     };
     deactivateOtherThanFeed = () => {
         this.hideMenu();
+        this.momentsFeedHandler.deactivate();
         this.discoverHandler.deactivate();
         this.streamsInCategoryHandler.deactivate();
     };
     init = async (config, on) => {
         try {
-            const configModel = await config.getConfig();
+            const configModel = await config.fetchModel();
             if (!configModel) {
                 on.failed();
                 return;
             }
-            this.categoriesHandler.init({ categories: configModel.contentCategories, tagAssociations: configModel.categoryTagAssociations });
-            this.settingsHandler.updatePlayerColors(configModel.playerColors);
-            this._targetData = configModel.targetData;
             on.initialized(this);
             this.initialized = true;
         }

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

@@ -0,0 +1,11 @@
+import type { Locale } from '../../core/locale';
+import type { ThemeValue } from '../../core/theme';
+import type { IMediaCenterSettings } from './types';
+export declare class MediaCenterSettings {
+    locale: Locale;
+    showStreamsCloudWatermark: boolean;
+    disableBackground: boolean;
+    theme: ThemeValue;
+    constructor(init: IMediaCenterSettings | undefined);
+    patch: (data: Partial<IMediaCenterSettings> | undefined) => void;
+}

package/dist/media-center/media-center/media-center-settings.svelte.js

@@ -0,0 +1,23 @@
+export class MediaCenterSettings {
+    locale = $state('en');
+    showStreamsCloudWatermark = $state(true);
+    disableBackground = $state(false);
+    theme = $state('dark');
+    constructor(init) {
+        this.patch(init);
+    }
+    patch = (data) => {
+        if (data?.locale !== undefined) {
+            this.locale = data.locale;
+        }
+        if (data?.showStreamsCloudWatermark !== undefined) {
+            this.showStreamsCloudWatermark = data.showStreamsCloudWatermark;
+        }
+        if (data?.disableBackground !== undefined) {
+            this.disableBackground = data.disableBackground;
+        }
+        if (data?.theme !== undefined) {
+            this.theme = data.theme;
+        }
+    };
+}

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

@@ -12,12 +12,13 @@ import { default as PostsPlayerView } from '../../posts/posts-player/posts-playe
 import { default as StreamsPlayerView } from '../../streams/streams-player/streams-player-view.svelte';
 import { Loading } from '../../ui/loading';
 import { DiscoverPanel } from './discover';
-import { MediaCenterHeader, MediaCenterFooter, MediaCenterHeaderMobile } from './header-footer';
+import { MediaCenterFooter } from './footer';
+import { MediaCenterHeader, MediaCenterHeaderMobile } from './header';
 import { MediaCenterContext } from './media-center-context.svelte';
 import { Menu } from './menu';
 import { StreamsInCategoryPanel } from './streams-in-category';
 import { fade } from 'svelte/transition';
-let { context } = $props();
+let { context, dynamicActions } = $props();
 let headerHeight = $state(0);
 let isMobileView = $state(false);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
@@ -43,6 +44,9 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
         case 'discover':
             context.activateDiscover({ categoryId });
             break;
+        case 'moments':
+            context.playPostsFeed({ filter: { categoryId } });
+            break;
         default:
             Utils.assertUnreachable(context.mediaCenterMode);
     }
@@ -129,7 +133,7 @@ const swipeToOpen = (node) => {
 <div class="media-center" use:onWidthAnchorMounted>
   <div class="media-center__header-and-content">
     {#if !isMobileView}
-      <MediaCenterHeader context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+      <MediaCenterHeader context={context} dynamicActions={dynamicActions} on={{ headerHeightChanged: onHeaderHeightChanged }} />
     {:else}
       <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
     {/if}
@@ -152,6 +156,10 @@ const swipeToOpen = (node) => {
               streamSelected: (stream) => activateSelectedStreamPlayer(stream)
             }} />
         </div>
+      {:else if context.mediaCenterMode === 'moments' && context.momentsPlayerProps}
+        <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
+          <PostsPlayerView {...context.momentsPlayerProps} />
+        </div>
       {/if}
     </div>
 

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

@@ -1,6 +1,8 @@
 import { MediaCenterContext } from './media-center-context.svelte';
+import type { Snippet } from 'svelte';
 type Props = {
     context: MediaCenterContext;
+    dynamicActions?: Snippet;
 };
 declare const MediaCenterView: import("svelte").Component<Props, {}, "">;
 type MediaCenterView = ReturnType<typeof MediaCenterView>;

package/dist/media-center/media-center/menu/category-following-wrapper.svelte.d.ts

@@ -2,7 +2,7 @@ import type { MediaCenterContext } from '../media-center-context.svelte';
 import { type Snippet } from 'svelte';
 type Props = {
     categoryId: string;
-    followingHandler?: MediaCenterContext['categoryFollowingHandler'];
+    followingHandler?: MediaCenterContext['categoriesFollowingHandler'];
     children: Snippet;
     invertedOrientation?: boolean;
 };