@streamscloud/embeddable 12.1.0 → 12.2.0

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -102,8 +102,8 @@ const styles = $derived.by(() => {
   }
 }
 .ad-card {
-  --_ad-card--background-color: var(--ad-card--background-color, rgb(from #ffffff r g b/90%));
-  --_ad-card--border-color: var(--ad-card--background-color, #f2f2f3);
+  --_ad-card--background-color: var(--ad-card--background-color, rgb(from var(--sc-mc-color--bg-card) r g b/90%));
+  --_ad-card--border-color: var(--ad-card--background-color, var(--sc-mc-color--border-card));
   --_ad-card--price-color: var(--ad-card--price-color, inherit);
   width: 100%;
   height: max-content;
@@ -112,7 +112,6 @@ const styles = $derived.by(() => {
   position: relative;
   container-type: inline-size;
   aspect-ratio: 9/16;
-  color: #000000;
   background-color: var(--_ad-card--background-color);
   border: 1px solid var(--_ad-card--border-color);
   border-radius: 0.5rem;
@@ -121,11 +120,6 @@ const styles = $derived.by(() => {
   gap: 0.5rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-:global([data-theme="dark"]) .ad-card {
-  --_ad-card--background-color: var(--ad-card--background-color, rgb(from #121212 r g b/90%));
-  --_ad-card--border-color: var(--ad-card--background-color, #1e1e1e);
-  color: #ffffff;
-}
 @container (width < 230px) {
   .ad-card {
     padding: 0.5rem 0.5rem 0.75rem;
@@ -221,7 +215,7 @@ const styles = $derived.by(() => {
 }
 .ad-card__description {
   font-weight: 400;
-  color: #6b7280;
+  color: var(--sc-mc-color--text-secondary);
   font-size: 0.9375rem;
   line-height: 1.375rem;
   min-height: 1.375rem;
@@ -234,9 +228,6 @@ const styles = $derived.by(() => {
     min-height: 0.875rem;
   }
 }
-:global([data-theme="dark"]) .ad-card__description {
-  color: #d1d5db;
-}
 .ad-card__price {
   font-size: 1.6875rem;
   font-weight: 700;
@@ -262,7 +253,7 @@ const styles = $derived.by(() => {
   line-height: 1.09125rem;
   letter-spacing: 0;
   text-align: right;
-  color: #6b7280;
+  color: var(--sc-mc-color--text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -276,9 +267,6 @@ const styles = $derived.by(() => {
     line-height: 0.875rem;
   }
 }
-:global([data-theme="dark"]) .ad-card__price-info-label {
-  color: #d1d5db;
-}
 .ad-card__button {
   width: 100%;
 }

package/dist/content-player/cmp.content-player.svelte

@@ -150,7 +150,7 @@ const handleSliderMounted = (node) => {
       {/if}
     </div>
 
-    <ControlsAndAttachments config={config} />
+    <ControlsAndAttachments config={config} hasOverview={!!overviewPanelContent} />
   {:else}
     <Loading positionFixedCenter={true} timeout={1000} />
   {/if}

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

@@ -34,6 +34,7 @@ export declare class ContentPlayerConfig<T extends {
         buttonInactive: string | null;
         cardButton: string | null;
         cardBackground: string | null;
+        menuBackground: string | null;
         playerBackground: string | null;
         price: string | null;
         salePrice: string | null;

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

@@ -7,6 +7,7 @@ export class ContentPlayerSettings {
         buttonInactive: null,
         cardButton: null,
         cardBackground: null,
+        menuBackground: null,
         playerBackground: null,
         price: null,
         salePrice: null,

package/dist/content-player/controls-and-attachments.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">import { slideHorizontally } from '../core/transitions';
 import { PostAttachments } from '../posts/attachments';
 import { PostControls } from '../posts/controls';
-import { PlayerButton } from '../ui/player/button';
+import { IconColor } from '../ui/icon';
+import { PlayerButton, PlayerButtonsGroup } from '../ui/player/button';
 import { ContentPlayerConfig } from './content-player-config.svelte';
+import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { config } = $props();
+let { config, hasOverview } = $props();
 const uiManager = config.uiManager;
 let attachmentsCollapsed = $state(false);
 let closeButtonAreaHeight = $state(0);
@@ -17,6 +19,18 @@ const currentItemPostContainer = $derived.by(() => {
     }
     return config.itemAsPostViewerModel(config.playerBuffer.current);
 });
+const extraActions = $derived.by(() => {
+    const actions = [];
+    if (hasOverview && uiManager.overviewCanBeShown) {
+        actions.push({
+            icon: IconCalendarWeekNumbers,
+            callback: () => {
+                uiManager.overviewCollapsed = !uiManager.overviewCollapsed;
+            }
+        });
+    }
+    return actions;
+});
 const changeShowAttachments = () => {
     attachmentsCollapsed = !attachmentsCollapsed;
 };
@@ -68,7 +82,23 @@ const variables = $derived.by(() => {
           activeColor={config.playerColors.button}
           inactiveColor={config.playerColors.buttonInactive}
           socialInteractionsHandler={config.socialInteractionsHandler}
+          extraActions={extraActions}
           on={{ attachmentsClicked: changeShowAttachments }} />
+      {:else if extraActions.length}
+        {#if extraActions.length === 1}
+          <PlayerButton
+            scaleEffect={true}
+            activeColor={config.playerColors.button}
+            inactiveColor={config.playerColors.buttonInactive}
+            icon={extraActions[0].icon}
+            on={{ click: extraActions[0].callback }} />
+        {:else}
+          <PlayerButtonsGroup
+            scaleEffect={true}
+            activeColor={config.playerColors.button}
+            backgroundColor={config.playerColors.buttonInactive}
+            actions={extraActions} />
+        {/if}
       {/if}
       {#if config.playerBuffer}
         <div

package/dist/content-player/controls-and-attachments.svelte.d.ts

@@ -4,6 +4,7 @@ declare class __sveltets_Render<T extends {
 }> {
     props(): {
         config: ContentPlayerConfig<T>;
+        hasOverview: boolean;
     };
     events(): {};
     slots(): {};

package/dist/content-player/overview-panel.svelte

@@ -22,7 +22,7 @@ const styles = $derived.by(() => {
 
 <!--Double `if` for correct behavior of slideHorizontally-->
 {#if uiManager.viewInitialized}
-  {#if !uiManager.overviewCollapsed}
+  {#if uiManager.overviewCanBeShown && !uiManager.overviewCollapsed}
     <div class="overview-panel" style={styles} transition:slideHorizontally|local onclick={handlePanelClick} onkeydown={() => {}} role="none">
       <div class="overview-panel__content" onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
         {@render children()}
@@ -43,7 +43,7 @@ const styles = $derived.by(() => {
   }
 }
 .overview-panel {
-  --_overview-panel--background: var(--overview-panel--background, #1c1c1c);
+  --_overview-panel--background: var(--overview-panel--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%));
   --_overview-panel--width: var(--overview-panel--width);
   --_overview-panel--top: var(--overview-panel--top);
   --_overview-panel--bottom: var(--overview-panel--bottom);

package/dist/content-player/ui-manager.svelte.d.ts

@@ -1,5 +1,6 @@
 export declare class ContentPlayerUIManager {
-    readonly overviewCollapsed: boolean;
+    overviewCollapsed: boolean;
+    readonly overviewCanBeShown: boolean;
     readonly overviewMaxWidth = 150;
     attachmentsWidth: number;
     readonly attachmentsMaxWidth = 176;

package/dist/content-player/ui-manager.svelte.js

@@ -2,7 +2,8 @@ const ATTACHMENTS_MAX_WIDTH = 176;
 const OVERLAY_MAX_WIDTH = 150;
 const SAFE_AREA_SIZE = 70;
 export class ContentPlayerUIManager {
-    overviewCollapsed = $derived.by(() => this.overviewMaxWidth > this.sidePanelsMaxWidth);
+    overviewCollapsed = $state(true);
+    overviewCanBeShown = $derived.by(() => this.overviewMaxWidth <= this.sidePanelsMaxWidth);
     overviewMaxWidth = OVERLAY_MAX_WIDTH;
     attachmentsWidth = $state(0);
     attachmentsMaxWidth = ATTACHMENTS_MAX_WIDTH;

package/dist/core/enums.d.ts

@@ -45,3 +45,6 @@ export declare enum Status {
 export declare enum StreamStatus {
     Published = "PUBLISHED"
 }
+export declare enum EmbedStreamsOrderBy {
+    ContentUpdatedAt = "CONTENT_UPDATED_AT"
+}

package/dist/core/enums.js

@@ -55,3 +55,7 @@ export var StreamStatus;
 (function (StreamStatus) {
     StreamStatus["Published"] = "PUBLISHED";
 })(StreamStatus || (StreamStatus = {}));
+export var EmbedStreamsOrderBy;
+(function (EmbedStreamsOrderBy) {
+    EmbedStreamsOrderBy["ContentUpdatedAt"] = "CONTENT_UPDATED_AT";
+})(EmbedStreamsOrderBy || (EmbedStreamsOrderBy = {}));

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

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

package/dist/core/theme/index.js

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

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

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

package/dist/core/theme/theme-store.svelte.js

@@ -0,0 +1,10 @@
+let themeStore = $state('dark');
+export const Theme = {
+    get: () => themeStore,
+    set: (theme) => {
+        themeStore = theme;
+    },
+    toggle: () => {
+        themeStore = themeStore === 'dark' ? 'light' : 'dark';
+    }
+};

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

@@ -0,0 +1,59 @@
+<script lang="ts">import { Theme } from '../../core/theme';
+import { Utils } from '../../core/utils';
+import { Loading } from '../../ui/loading';
+import {} from '../../ui/player/close-orchestrator';
+import { ShadowRoot } from '../../ui/shadow-dom';
+import { MediaCenterContext } from './media-center-context.svelte';
+import { default as MediaCenterView } from './media-center-view.svelte';
+import { untrack } from 'svelte';
+let { config, modeProps, settings, closeOrchestrator } = $props();
+const context = new MediaCenterContext({
+    config,
+    closeOrchestrator,
+    settings,
+    on: {
+        initialized: (instance) => {
+            switch (modeProps.mode) {
+                case 'posts':
+                    instance.playPostsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onPostActivated: modeProps.props.onPostActivated
+                    });
+                    break;
+                case 'streams':
+                    instance.playStreamsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onStreamActivated: modeProps.props.onStreamActivated
+                    });
+                    break;
+                case 'discover':
+                    instance.activateDiscover({ categoryId: null });
+                    break;
+                default:
+                    Utils.assertUnreachable(modeProps);
+            }
+        },
+        failed: () => {
+            console.error('Media Center initialization failed');
+            closeOrchestrator.requestClose();
+        }
+    }
+});
+$effect(() => {
+    void (settings === null || settings === void 0 ? void 0 : settings.theme);
+    untrack(() => {
+        var _a;
+        Theme.set((_a = settings === null || settings === void 0 ? void 0 : settings.theme) !== null && _a !== void 0 ? _a : 'dark');
+    });
+});
+</script>
+
+{#if context.initializing}
+  <Loading positionFixedCenter={true} timeout={600} />
+{:else if !context.initialized}
+  Not initialized placeholder
+{:else}
+  <ShadowRoot {...context.backgroundWrapperProps}>
+    <MediaCenterView context={context} />
+  </ShadowRoot>
+{/if}

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

@@ -0,0 +1,12 @@
+import type { IMediaCenterConfig } from '../config/types';
+import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { MediaCenterSettings, MediaCenterModeProps } from './types';
+type Props = {
+    config: IMediaCenterConfig;
+    settings?: MediaCenterSettings;
+    modeProps: MediaCenterModeProps;
+    closeOrchestrator: ICloseOrchestrator;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/media-center/media-center/discover/discover-header.svelte

@@ -4,8 +4,8 @@ import { LineClamp } from '../../../ui/line-clamp';
 import { ProportionalContainer } from '../../../ui/proportional-container';
 import { DiscoverHeaderLocalization } from './discover-header-localization';
 import { MomentsCircle } from '../moments';
-let { context, locale = 'en' } = $props();
-const localization = $derived(new DiscoverHeaderLocalization(locale));
+let { context } = $props();
+const localization = $derived(new DiscoverHeaderLocalization(context.locale));
 </script>
 
 {#if context.targetData}
@@ -19,7 +19,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
       <p class="header__handle">@{target.handle}</p>
       <div class="header__members">
         <span class="header__members-count">
-          {compactNumber(target.membersCount, { locale: localization.locale })}
+          {compactNumber(target.membersCount, { locale: context.locale })}
         </span>
         <span class="header__members-label">
           {localization.membersLabel(target.membersCount)}
@@ -28,7 +28,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
 
       {#if target.description}
         <p class="header__description">
-          <LineClamp enableShowMore={true} locale={locale}>{target.description}</LineClamp>
+          <LineClamp enableShowMore={true} locale={context.locale}>{target.description}</LineClamp>
         </p>
       {/if}
     </div>
@@ -60,7 +60,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
     </div>
     {#if target.description}
       <p class="header-mobile__description">
-        <LineClamp enableShowMore={true} locale={locale}>{target.description}</LineClamp>
+        <LineClamp enableShowMore={true} locale={context.locale}>{target.description}</LineClamp>
       </p>
     {/if}
   </div>
@@ -82,7 +82,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   flex-direction: row;
   gap: 2.25rem;
   padding-top: 1.25rem;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
@@ -109,10 +109,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
 .header__handle {
   font-size: 0.875rem;
   font-weight: 400;
-  color: #5a8dec;
-}
-:global([data-theme="dark"]) .header__handle {
-  color: #5a8dec;
+  color: var(--sc-mc-color--text-brand);
 }
 .header__members {
   margin-top: 0.625rem;
@@ -129,7 +126,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   font-size: 0.75rem;
   line-height: 1;
   font-weight: 400;
-  color: #d1d5db;
+  color: var(--sc-mc-color--text-secondary);
 }
 .header__description {
   margin-top: 0.875rem;
@@ -154,7 +151,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   flex-direction: column;
   gap: 1.0625rem;
   padding-top: 0.625rem;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
@@ -205,7 +202,7 @@ const localization = $derived(new DiscoverHeaderLocalization(locale));
   font-size: 0.75rem;
   line-height: 1;
   font-weight: 600;
-  color: #d1d5db;
+  color: var(--sc-mc-color--text-secondary);
 }
 .header-mobile__description {
   font-size: 1rem;

package/dist/media-center/media-center/discover/discover-header.svelte.d.ts

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

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

@@ -4,15 +4,15 @@ import { StreamCard } from '../../../streams/stream-card';
 import { InfiniteScrolling } from '../../../ui/infinite-scrolling';
 import { default as Header } from './discover-header.svelte';
 import { DiscoverViewLocalization } from './discover-view-localization';
-let { context, locale = 'en', on } = $props();
+let { context, on } = $props();
 const handler = $derived(context.discoverHandler);
-const localization = $derived(new DiscoverViewLocalization(locale));
+const localization = $derived(new DiscoverViewLocalization(context.locale));
 </script>
 
 {#if !handler.loading}
   <div class="media-center-discover">
     <div class="media-center-discover__content">
-      <Header context={context} locale={locale} />
+      <Header context={context} />
       {#if handler.streamsHolder?.streams.length}
         <div class="media-center-discover__section">
           <div class="media-center-discover__section-header">
@@ -46,7 +46,7 @@ const localization = $derived(new DiscoverViewLocalization(locale));
                       viewsCount: item.viewsCount,
                       products: item.products
                     }}
-                    locale={locale}
+                    locale={context.locale}
                     on={{ click: () => on.shortVideoSelected(item) }} />
                 {/each}
               </div>
@@ -154,8 +154,8 @@ const localization = $derived(new DiscoverViewLocalization(locale));
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 600;
-  color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
 }
 .media-center-discover__section-content {
   display: grid;

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

@@ -1,10 +1,8 @@
-import type { Locale } from '../../../core/locale';
 import type { PostPlayerModel } from '../../../posts/posts-player/types';
 import type { StreamPlayerModel } from '../../../streams/streams-player';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
     on: {
         shortVideoSelected: (shortVideo: PostPlayerModel) => void;
         streamSelected: (stream: StreamPlayerModel) => void;

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

@@ -3,8 +3,10 @@ import type { MediaCenterSettings } from '../types';
 export declare class MediaCenterSettingsHandler {
     private _backgroundImageUrl;
     private _contentPlayerSettings;
+    private _colorsMap;
     constructor(settings?: MediaCenterSettings);
     get playerSettings(): MediaCenterSettingsWithColors;
+    get locale(): import("../../../core/locale").Locale;
     get backgroundWrapperProps(): {
         backgroundDisabled: boolean;
         backgroundImageUrl: string | null;

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

@@ -1,12 +1,27 @@
+import { Theme } from '../../../core/theme';
+import { untrack } from 'svelte';
 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];
+            });
+        });
     }
     get playerSettings() {
         return this._contentPlayerSettings;
     }
+    get locale() {
+        return this._contentPlayerSettings.locale || 'en';
+    }
     get backgroundWrapperProps() {
         return {
             backgroundDisabled: this._contentPlayerSettings.disableBackground === true,
@@ -21,6 +36,10 @@ export class MediaCenterSettingsHandler {
         this._backgroundImageUrl = url;
     };
     updatePlayerColors = (colors) => {
-        this._contentPlayerSettings.playerColors = colors;
+        this._colorsMap = {
+            light: null,
+            dark: colors
+        };
+        this._contentPlayerSettings.playerColors = this._colorsMap[Theme.get()];
     };
 }

package/dist/media-center/media-center/header-footer/media-center-footer.svelte

@@ -6,7 +6,7 @@ import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular
 let { context } = $props();
 </script>
 
-<div class="media-center-footer">
+<div class="media-center-footer" data-theme="dark">
   <div class="media-center-footer__spacer"></div>
   <button
     type="button"
@@ -52,9 +52,9 @@ let { context } = $props();
   justify-content: space-between;
   pointer-events: auto;
   z-index: 1;
-  background: #000000;
   padding-top: 0.5rem;
   padding-bottom: 1.25rem;
+  background: var(--sc-mc-color--bg-panel);
 }
 .media-center-footer__button {
   position: relative;
@@ -64,10 +64,10 @@ let { context } = $props();
   justify-content: center;
   align-items: center;
   --icon--size: 1.5rem;
-  --icon--color: #f2f2f2;
+  --icon--color: var(--sc-mc-color--text-secondary);
   line-height: 0;
 }
 .media-center-footer__button--active {
-  --icon--color: #ffffff;
-  --icon--stroke-width: 0.6;
+  --icon--color: var(--sc-mc-color--text-primary);
+  --icon--stroke-width: 0.3;
 }</style>

package/dist/media-center/media-center/header-footer/media-center-header-mobile.svelte

@@ -64,7 +64,8 @@ const headerMounted = (node) => {
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.4;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
 }
 .media-center-header-mobile__button {
   pointer-events: auto;
@@ -73,8 +74,8 @@ const headerMounted = (node) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  --icon--size: 1.5rem;
-  --icon--color: #ffffff;
-  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --icon--size: 1.625rem;
+  --icon--color: var(--sc-mc-color--icon-overlay);
+  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
   line-height: 0;
 }</style>

package/dist/media-center/media-center/header-footer/media-center-header.svelte

@@ -10,8 +10,8 @@ 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));
+let { context, on } = $props();
+const localization = $derived(new MediaCenterHeaderLocalization(context.locale));
 let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
@@ -172,10 +172,10 @@ const styles = $derived.by(() => {
 }
 
 .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%)
   );
   width: 73.75rem;
   max-width: 100%;
@@ -264,7 +264,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 +278,19 @@ 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: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 {

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

@@ -1,8 +1,6 @@
-import type { Locale } from '../../../core/locale';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
     on: {
         headerHeightChanged: (height: number) => void;
     };

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

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

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

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