@streamscloud/embeddable 12.1.0 → 13.0.0

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, locale = 'en', on } = $props();
-const localization = $derived(new MediaCenterHeaderLocalization(locale));
+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, rgb(from #000000 r g b / 95%));
+  --_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, #000000) r g b / 60%)
+    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;
@@ -264,7 +348,7 @@ const styles = $derived.by(() => {
   border-radius: 0.875rem;
   background-color: var(--_media-center-header--button-color--inactive);
   border-color: var(--_media-center-header--button-color);
-  color: #f2f2f2;
+  color: var(--sc-mc-color--text-inactive);
   transition: background 0.3s ease-in-out;
   -webkit-user-drag: none;
   user-select: none;
@@ -278,21 +362,30 @@ const styles = $derived.by(() => {
 }
 .control-button--active {
   background-color: var(--_media-center-header--button-color);
-  color: #ffffff;
+  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);
 }
 .control-button__icon {
   --icon--size: 1rem;
-  --icon--color: #f2f2f2;
   line-height: 0;
 }
 .control-button__icon--trigger {
   --icon--size: 1.5rem;
 }
 .control-button__icon--active {
-  --icon--color: #ffffff;
   --icon--stroke-width: 0.2;
 }
 .control-button__value {
@@ -305,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,11 +1,11 @@
-import type { Locale } from '../../../core/locale';
 import type { MediaCenterContext } from '../media-center-context.svelte';
+import type { Snippet } from 'svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
     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 MediaCenter } from './cmp.media-center.svelte';
+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 MediaCenter } from './cmp.media-center.svelte';
+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,32 +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 _mediaCenterConfig;
+    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(): {
-        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;
-    } | null;
+    get model(): import("../config/types").MediaCenterModel | null;
+    get mediaCenterColors(): import("../../ui/player/colors").PlayerColors;
     get loading(): boolean;
     get overlayIsActive(): boolean;
     get backgroundWrapperProps(): {
@@ -48,6 +38,11 @@ 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;
     hideMenu: () => void;
@@ -56,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;
-    _mediaCenterConfig = $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._mediaCenterConfig?.targetData || null;
+    get model() {
+        return this._dataProvider.model;
     }
-    get playerColors() {
-        return this._mediaCenterConfig?.playerColors || null;
+    get mediaCenterColors() {
+        return this.settingsHandler.actualMediaCenterColors;
     }
     get loading() {
         return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
@@ -52,6 +68,21 @@ 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;
+    }
     toggleMenu = () => {
         if (this.menuActive) {
             this.hideMenu();
@@ -71,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);
@@ -89,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;
@@ -104,23 +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 {
-            this._mediaCenterConfig = await config.getConfig();
-            if (!this._mediaCenterConfig) {
+            const configModel = await config.fetchModel();
+            if (!configModel) {
                 on.failed();
                 return;
             }
-            this.categoriesHandler.init({ categories: this._mediaCenterConfig.contentCategories, tagAssociations: this._mediaCenterConfig.categoryTagAssociations });
-            this.settingsHandler.updatePlayerColors(this._mediaCenterConfig.playerColors);
             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;
+        }
+    };
+}