@streamscloud/embeddable 10.1.2 → 11.0.0

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

@@ -4,7 +4,7 @@ import { toPriceRepresentation } from '../../products/price-helper';
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, trackingParams, inert = false, on } = $props();
+let { ad, colors, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
     if (on === null || on === void 0 ? void 0 : on.impression) {
         const observer = new IntersectionObserver((entries) => {
@@ -33,9 +33,19 @@ const handleAdClick = () => {
         window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
+const styles = $derived.by(() => {
+    const values = [];
+    if (colors === null || colors === void 0 ? void 0 : colors.background) {
+        values.push(`--ad-card--background-color: ${colors.background}`);
+    }
+    if (colors === null || colors === void 0 ? void 0 : colors.price) {
+        values.push(`--ad-card--price-color: ${colors.price}`);
+    }
+    return values.join(';');
+});
 </script>
 
-<div class="ad-card" inert={inert} use:trackImpression>
+<div class="ad-card" style={styles} inert={inert} use:trackImpression>
   <div class="ad-card__image">
     <Image src={ad.image} alt={ad.title} />
   </div>
@@ -70,7 +80,7 @@ const handleAdClick = () => {
             on={{ click: handleAdClick }}
             --button--font--size="1em"
             --button--font--color={ad.ctaButton.textColor}
-            --button--background={ad.ctaButton.background}
+            --button--background={colors?.buttonBackground ?? ad.ctaButton.background}
             --button--min-width="100%">
             <span class="ad-card__button-text">{ad.ctaButton.text}</span>
           </Button>
@@ -92,6 +102,9 @@ const handleAdClick = () => {
   }
 }
 .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--price-color: var(--ad-card--price-color, inherit);
   width: 100%;
   height: max-content;
   display: flex;
@@ -100,8 +113,8 @@ const handleAdClick = () => {
   container-type: inline-size;
   aspect-ratio: 9/16;
   color: #000000;
-  background-color: rgba(255, 255, 255, 0.9);
-  border: 1px solid #f2f2f3;
+  background-color: var(--_ad-card--background-color);
+  border: 1px solid var(--_ad-card--border-color);
   border-radius: 0.5rem;
   padding: 0.75rem 0.75rem 1.125rem;
   justify-content: flex-start;
@@ -109,9 +122,9 @@ const handleAdClick = () => {
   /* Set 'container-type: inline-size;' to reference container*/
 }
 :global([data-theme="dark"]) .ad-card {
-  background-color: rgba(18, 18, 18, 0.9);
+  --_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;
-  border-color: #1e1e1e;
 }
 @container (width < 230px) {
   .ad-card {
@@ -221,6 +234,9 @@ const handleAdClick = () => {
     min-height: 0.875rem;
   }
 }
+:global([data-theme="dark"]) .ad-card__description {
+  color: #d1d5db;
+}
 .ad-card__price {
   font-size: 1.6875rem;
   font-weight: 700;
@@ -230,6 +246,7 @@ const handleAdClick = () => {
   gap: 0.625rem;
   min-width: 0;
   white-space: nowrap;
+  color: var(--_ad-card--price-color);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -259,6 +276,9 @@ const handleAdClick = () => {
     line-height: 0.875rem;
   }
 }
+:global([data-theme="dark"]) .ad-card__price-info-label {
+  color: #d1d5db;
+}
 .ad-card__button {
   width: 100%;
 }

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

@@ -3,6 +3,11 @@ import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
     trackingParams: TrackingParams;
+    colors: {
+        background?: string | null;
+        price?: string | null;
+        buttonBackground?: string | null;
+    };
     inert?: boolean;
     on?: {
         click?: (id: string) => void;

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

@@ -1,14 +1,4 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { ContentPlayerLocalization } from './content-player-localization';
-import { handleEsc } from '../core/document.event-handlers';
+<script lang="ts">import { handleEsc } from '../core/document.event-handlers';
 import { PostViewer } from '../posts/post-viewer';
 import { Loading } from '../ui/loading';
 import { PlayerSlider } from '../ui/player/slider';
@@ -16,23 +6,10 @@ import { SwipeIndicator } from '../ui/swipe-indicator';
 import { default as ControlsAndAttachments } from './controls-and-attachments.svelte';
 import { default as Header } from './header.svelte';
 import { default as OverviewPanel } from './overview-panel.svelte';
-import { onMount, untrack } from 'svelte';
+import {} from 'svelte';
 let { config, nonPostItemView, overviewPanelContent } = $props();
-const localization = new ContentPlayerLocalization(config.settings.locale);
 let everTouched = $state(false);
 const uiManager = config.uiManager;
-onMount(() => __awaiter(void 0, void 0, void 0, function* () {
-    uiManager.overviewCollapsed = window && window.innerWidth < window.innerHeight;
-}));
-$effect(() => {
-    var _a;
-    void ((_a = config.playerBuffer) === null || _a === void 0 ? void 0 : _a.current);
-    untrack(() => {
-        if (uiManager.viewInitialized && uiManager.isMobileView) {
-            uiManager.overviewCollapsed = true;
-        }
-    });
-});
 const handleContentPlayerMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
@@ -106,15 +83,14 @@ const handleSliderMounted = (node) => {
         }
     };
 };
-const PLAYER_PADDING_VERTICAL = 10;
-const variables = $derived.by(() => {
-    const values = [
-        `--_content-player--padding: ${uiManager.mediaCenterHeaderHeight ? uiManager.mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`,
-        `--_content-player--watermark--left-indent: ${uiManager.overviewWidth + uiManager.safeAreaSize}px`
-    ];
+const styles = $derived.by(() => {
+    const values = [`--_content-player--watermark--left-indent: ${uiManager.safeAreaSize}px`];
     if (uiManager.backgroundImageUrl) {
         values.push(`--_content-player--background-image-url: url(${uiManager.backgroundImageUrl})`);
     }
+    if (config.playerColors.playerBackground) {
+        values.push(`--content-player-container--background: ${config.playerColors.playerBackground}`);
+    }
     return values.join(';');
 });
 </script>
@@ -147,13 +123,8 @@ const variables = $derived.by(() => {
   class:content-player-container--background-enabled={!config.settings.disableBackground}
   class:content-player-container--background-loading={!config.settings.disableBackground && !uiManager.backgroundImageUrl}
   class:content-player-container--faded={config.fadeContent}
-  style={variables}>
-  <Header config={config} overviewPanelContent={overviewPanelContent} localization={localization} />
-  {#if overviewPanelContent}
-    <OverviewPanel contentFaded={config.fadeContent} uiManager={uiManager}>
-      {@render overviewPanelContent()}
-    </OverviewPanel>
-  {/if}
+  style={styles}>
+  <Header config={config} />
   <div class="content-player" use:handleContentPlayerMounted>
     {#if config.settings.showStreamsCloudWatermark}
       <div class="content-player__watermark">
@@ -168,9 +139,16 @@ const variables = $derived.by(() => {
           {#snippet children({ item })}
             {@const postModel = config.itemAsPostViewerModel(item)}
             <div class="content-player__content">
+              {#if overviewPanelContent}
+                <OverviewPanel config={config} contentFaded={config.fadeContent} uiManager={uiManager}>
+                  {@render overviewPanelContent()}
+                </OverviewPanel>
+              {/if}
+
               {#if postModel}
                 <PostViewer
                   model={postModel}
+                  controlsColors={{ active: config.playerColors.button, inactive: config.playerColors.buttonInactive }}
                   trackingParams={config.trackingParams}
                   socialInteractionsHandler={config.socialInteractionsHandler}
                   enableAttachments={config.uiManager.showPostOverlayAttachments}
@@ -200,6 +178,9 @@ const variables = $derived.by(() => {
       <Loading positionFixedCenter={true} timeout={1000} />
     {/if}
   </div>
+  {#if config.mediaCenterMobileFooter}
+    {@render config.mediaCenterMobileFooter()}
+  {/if}
 </div>
 
 <style>@keyframes fadeIn {
@@ -214,6 +195,7 @@ const variables = $derived.by(() => {
   }
 }
 .content-player-container {
+  --_content-player-container--background: var(--content-player-container--background);
   --content-player--elements-opacity: 1;
   width: 100%;
   min-width: 100%;
@@ -223,8 +205,16 @@ const variables = $derived.by(() => {
   max-height: 100%;
   container-type: inline-size;
   display: flex;
+  flex-direction: column;
   position: relative;
 }
+.content-player-container:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  backdrop-filter: blur(30px);
+  background-color: var(--_content-player-container--background);
+}
 .content-player-container--background-enabled {
   background-color: #c1c1c1;
   background-image: var(--_content-player--background-image-url);
@@ -241,8 +231,8 @@ const variables = $derived.by(() => {
 .content-player {
   display: flex;
   flex: 1;
-  padding: var(--_content-player--padding);
-  backdrop-filter: blur(30px);
+  min-height: 0;
+  padding: 0.625rem 0;
   position: relative;
   /* Set 'container-type: inline-size;' to reference container*/
 }

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

@@ -28,9 +28,20 @@ export declare class ContentPlayerConfig<T extends {
         playerSliderCallbacks?: PlayerSliderCallbacks;
         trackingParams?: ContentPlayerTrackingParams | null;
     });
-    get mediaCenterControlsPanel(): MediaCenterData['controlsPanel'] | null;
+    get mediaCenterHeader(): MediaCenterData['header'] | null;
+    get mediaCenterMobileFooter(): MediaCenterData['mobileFooter'] | null;
+    get playerColors(): {
+        brand: string | null;
+        button: string | null;
+        buttonInactive: string | null;
+        cardButton: string | null;
+        cardBackground: string | null;
+        playerBackground: string | null;
+        price: string | null;
+        salePrice: string | null;
+        sidebarBackground: string | null;
+    };
     get mediaCenterCallbacks(): MediaCenterData['callbacks'] | null;
-    get playerLogo(): string | null;
     get fadeContent(): boolean;
     get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
     itemAsPostViewerModel: (item: T & {

package/dist/content-player/content-player-config.svelte.js

@@ -23,15 +23,18 @@ export class ContentPlayerConfig {
         this.socialInteractionsHandler = socialInteractionsHandler;
         this._mappers = mappers;
     }
-    get mediaCenterControlsPanel() {
-        return this._mediaCenterData?.controlsPanel || null;
+    get mediaCenterHeader() {
+        return this._mediaCenterData?.header || null;
+    }
+    get mediaCenterMobileFooter() {
+        return this._mediaCenterData?.mobileFooter || null;
+    }
+    get playerColors() {
+        return this.settings.playerColors;
     }
     get mediaCenterCallbacks() {
         return this._mediaCenterData?.callbacks || null;
     }
-    get playerLogo() {
-        return this._mediaCenterData?.playerLogo || null;
-    }
     get fadeContent() {
         return this._mediaCenterData?.overlayIsActive || false;
     }

package/dist/content-player/content-player-settings.d.ts

@@ -4,6 +4,7 @@ export declare class ContentPlayerSettings {
     enableCloseButton: boolean;
     locale: Locale;
     showStreamsCloudWatermark: boolean;
+    playerColors: NonNullable<IContentPlayerSettingsInitializer['playerColors']>;
     constructor(init?: IContentPlayerSettingsInitializer);
 }
 export interface IContentPlayerSettingsInitializer {
@@ -11,4 +12,15 @@ export interface IContentPlayerSettingsInitializer {
     hideCloseButton?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
+    playerColors?: {
+        brand: string | null;
+        button: string | null;
+        buttonInactive: string | null;
+        cardButton: string | null;
+        cardBackground: string | null;
+        playerBackground: string | null;
+        price: string | null;
+        salePrice: string | null;
+        sidebarBackground: string | null;
+    } | null;
 }

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

@@ -3,12 +3,24 @@ export class ContentPlayerSettings {
     enableCloseButton = true;
     locale = 'en';
     showStreamsCloudWatermark = false;
+    playerColors = {
+        brand: null,
+        button: null,
+        buttonInactive: null,
+        cardButton: null,
+        cardBackground: null,
+        playerBackground: null,
+        price: null,
+        salePrice: null,
+        sidebarBackground: null
+    };
     constructor(init) {
         if (init) {
             this.disableBackground = init.disableBackground ?? this.disableBackground;
             this.enableCloseButton = init.hideCloseButton !== undefined ? !init.hideCloseButton : this.enableCloseButton;
             this.locale = init.locale ?? this.locale;
             this.showStreamsCloudWatermark = init.showStreamsCloudWatermark ?? this.showStreamsCloudWatermark;
+            this.playerColors = init?.playerColors ?? this.playerColors;
         }
     }
 }

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

@@ -33,8 +33,6 @@ const trackAttachmentsPanelSize = (node) => {
 const variables = $derived.by(() => {
     const values = [
         `--_controls-and-attachments--attachments--max-width: ${uiManager.attachmentsMaxWidth}px`,
-        `--_controls-and-attachments--logo--max-width: ${uiManager.attachmentsMaxWidth}px`,
-        `--_controls-and-attachments--logo--height: ${uiManager.mediaCenterHeaderHeight || 72}px`,
         `--_controls-and-attachments--width: ${uiManager.sidePanelsMaxWidth}px`
     ];
     return values.join(';');
@@ -42,12 +40,14 @@ const variables = $derived.by(() => {
 </script>
 
 {#if !uiManager.showPostOverlayControls}
-  <div class="controls-and-attachments" class:controls-and-attachments--with-logo={!!config.playerLogo} style={variables}>
+  <div class="controls-and-attachments" style={variables}>
     <div class="controls-and-attachments__spacer">&nbsp;</div>
     <div class="controls-and-attachments__left">
       {#if currentItemPostContainer}
         <PostControls
           model={currentItemPostContainer}
+          activeColor={config.playerColors.button}
+          inactiveColor={config.playerColors.buttonInactive}
           socialInteractionsHandler={config.socialInteractionsHandler}
           on={{ attachmentsClicked: changeShowAttachments }} />
       {/if}
@@ -57,24 +57,33 @@ const variables = $derived.by(() => {
           class:controls-and-attachments__navigation-buttons--invisible={config.playerBuffer.loaded.length <= 1}>
           <PlayerButton
             icon={IconChevronUp}
+            activeColor={config.playerColors.button}
+            inactiveColor={config.playerColors.buttonInactive}
             disabled={!config.playerBuffer.canLoadPrevious}
             scaleEffect={true}
             on={{ click: config.playerBuffer.loadPrevious }} />
-          <PlayerButton icon={IconChevronDown} disabled={!config.playerBuffer.canLoadNext} scaleEffect={true} on={{ click: config.playerBuffer.loadNext }} />
+          <PlayerButton
+            icon={IconChevronDown}
+            activeColor={config.playerColors.button}
+            inactiveColor={config.playerColors.buttonInactive}
+            disabled={!config.playerBuffer.canLoadNext}
+            scaleEffect={true}
+            on={{ click: config.playerBuffer.loadNext }} />
         </div>
       {/if}
     </div>
     <div class="controls-and-attachments__right" use:trackAttachmentsPanelSize>
       {#if !uiManager.showPostOverlayAttachments}
-        {#if config.playerLogo}
-          <div class="controls-and-attachments__player-logo">
-            <img src={config.playerLogo} class="controls-and-attachments__logo-img" alt="Player Logo" />
-          </div>
-        {/if}
         {#if currentItemPostContainer && !attachmentsCollapsed && currentItemPostContainer.attachments}
           <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
             <PostAttachments
               model={currentItemPostContainer}
+              colors={{
+                background: config.playerColors.cardBackground,
+                price: config.playerColors.price,
+                salePrice: config.playerColors.salePrice,
+                buttonBackground: config.playerColors.cardButton
+              }}
               trackingParams={config.trackingParams}
               locale={config.settings.locale}
               on={{
@@ -87,7 +96,7 @@ const variables = $derived.by(() => {
         {/if}
       {/if}
     </div>
-    <div class="controls-and-attachments__spacer">&nbsp;</div>
+    <div class="controls-and-attachments__spacer controls-and-attachments__spacer--right">&nbsp;</div>
   </div>
 {/if}
 
@@ -110,16 +119,16 @@ const variables = $derived.by(() => {
   width: var(--_controls-and-attachments--width);
   display: flex;
   justify-content: space-between;
-  padding: 1.75rem 0;
+  padding: 0.625rem 0 1.875rem 0;
   pointer-events: none;
 }
-.controls-and-attachments--with-logo {
-  padding-top: 0;
-}
 .controls-and-attachments__spacer {
-  flex: 0 1 1.75rem;
+  flex: 0 1 1.875rem;
   min-width: 0;
 }
+.controls-and-attachments__spacer--right {
+  flex-basis: 1.25rem;
+}
 .controls-and-attachments__left {
   display: flex;
   flex-direction: column;
@@ -135,21 +144,6 @@ const variables = $derived.by(() => {
   align-items: flex-end;
   flex-direction: column;
 }
-.controls-and-attachments__player-logo {
-  width: var(--_controls-and-attachments--logo--max-width);
-  max-width: var(--_controls-and-attachments--logo--max-width);
-  height: var(--_controls-and-attachments--logo--height);
-  min-height: var(--_controls-and-attachments--logo--height);
-  max-height: var(--_controls-and-attachments--logo--height);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.controls-and-attachments__logo-img {
-  width: 6.25rem;
-  min-width: 6.25rem;
-  max-width: 6.25rem;
-}
 .controls-and-attachments__post-attachments {
   flex: 1 1 auto;
   width: var(--_controls-and-attachments--attachments--max-width);
@@ -159,30 +153,7 @@ const variables = $derived.by(() => {
   overflow-y: auto;
   opacity: var(--content-player--elements-opacity);
   transition: opacity 0.3s ease-in-out;
-  --_cross-browser-scrollbar--thumb-color: transparent;
-  --_cross-browser-scrollbar--track-color: transparent;
-}
-.controls-and-attachments__post-attachments:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
-  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
-}
-.controls-and-attachments__post-attachments::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.controls-and-attachments__post-attachments::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.controls-and-attachments__post-attachments::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
-}
-@supports (scrollbar-color: transparent transparent) {
-  .controls-and-attachments__post-attachments {
-    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
-    scrollbar-width: thin;
-  }
+  scrollbar-width: none;
 }
 .controls-and-attachments__navigation-buttons {
   display: flex;

package/dist/content-player/header.svelte

@@ -1,137 +1,15 @@
-<script lang="ts">import { PlayerButton } from '../ui/player/button';
-import { ContentPlayerConfig } from './content-player-config.svelte';
-import { ContentPlayerLocalization } from './content-player-localization';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
-let { config, localization, overviewPanelContent } = $props();
-const uiManager = config.uiManager;
-const headerMounted = (node) => {
-    var _a;
-    if (overviewPanelContent) {
-        (_a = config.mediaCenterCallbacks) === null || _a === void 0 ? void 0 : _a.onExtraActionsForMobileControlsPanelDetermined([
-            {
-                name: localization.overviewLabel,
-                callback: () => (config.uiManager.overviewCollapsed = !config.uiManager.overviewCollapsed)
-            }
-        ]);
-    }
-    const heightResizeObserver = new ResizeObserver(() => {
-        var _a, _b;
-        const headerHeight = node.clientHeight;
-        uiManager.mediaCenterHeaderHeight = headerHeight;
-        if ((_a = config.mediaCenterCallbacks) === null || _a === void 0 ? void 0 : _a.onHeaderHeightChanged) {
-            (_b = config.mediaCenterCallbacks) === null || _b === void 0 ? void 0 : _b.onHeaderHeightChanged({ height: headerHeight });
-        }
+<script lang="ts">import { ContentPlayerConfig } from './content-player-config.svelte';
+import { onMount } from 'svelte';
+let { config } = $props();
+onMount(() => {
+    var _a, _b;
+    (_a = config.mediaCenterCallbacks) === null || _a === void 0 ? void 0 : _a.onPlayerInitialized({
+        closePlayerFn: config.settings.enableCloseButton && ((_b = config.callbacks) === null || _b === void 0 ? void 0 : _b.close) ? config.callbacks.close : null,
+        extraActionsForMobilePanel: []
     });
-    heightResizeObserver.observe(node);
-    return {
-        destroy: () => {
-            heightResizeObserver.disconnect();
-        }
-    };
-};
-const headerVariables = $derived.by(() => {
-    const maxHeaderWidth = Math.min(uiManager.contentViewWidth * 1.4, uiManager.playerTotalWidth);
-    const maxOverhang = 0.2 * uiManager.contentViewWidth;
-    const contentStart = (uiManager.playerTotalWidth - uiManager.contentViewWidth) / 2;
-    // Pre-calculate if overview will affect layout when fully opened
-    const willOverviewAffectLayout = uiManager.overviewWidth > 0 && uiManager.overviewMaxWidth < uiManager.sidePanelsMaxWidth;
-    // Check if header will actually compress (change position)
-    const willHeaderCompress = willOverviewAffectLayout && uiManager.overviewMaxWidth > contentStart - maxOverhang;
-    const values = [
-        `--_content-player-header--padding-inline: ${uiManager.safeAreaSize}px`,
-        `--_content-player-header--media-center--max-width: ${maxHeaderWidth}px`
-    ];
-    if (!willOverviewAffectLayout) {
-        // Header is symmetric
-        const offset = (uiManager.playerTotalWidth - maxHeaderWidth) / 2;
-        values.push(`--_content-player-header--left: ${offset}px`);
-        values.push(`--_content-player-header--right: ${offset}px`);
-    }
-    else {
-        // Overview affects layout
-        const rightOffset = contentStart - maxOverhang;
-        // Animate if header will compress, otherwise use static value
-        const effectiveOverviewWidth = willHeaderCompress ? uiManager.overviewWidth : uiManager.overviewMaxWidth;
-        const leftOffset = Math.max(contentStart - maxOverhang, effectiveOverviewWidth);
-        values.push(`--_content-player-header--left: ${leftOffset}px`);
-        values.push(`--_content-player-header--right: ${rightOffset}px`);
-    }
-    return values.join(';');
-});
-const buttonVariables = $derived.by(() => {
-    // Button always moves when overview affects layout - animate it
-    const willOverviewAffectLayout = uiManager.overviewWidth > 0 && uiManager.overviewMaxWidth < uiManager.sidePanelsMaxWidth;
-    const effectiveOverviewWidth = willOverviewAffectLayout ? uiManager.overviewWidth : 0;
-    const values = [`--_content-player-header--close-button--left-indent: ${effectiveOverviewWidth}px`];
-    return values.join(';');
 });
 </script>
 
-{#if config.mediaCenterControlsPanel}
-  <div class="content-player-header" style={headerVariables} use:headerMounted>
-    {@render config.mediaCenterControlsPanel()}
-  </div>
-{:else if overviewPanelContent}
-  <div class="overview-button">
-    <PlayerButton icon={IconLineHorizontal3} on={{ click: () => (config.uiManager.overviewCollapsed = !config.uiManager.overviewCollapsed) }} />
-  </div>
-{/if}
-
-{#if config.settings.enableCloseButton && config.callbacks?.close}
-  <div class="close-button" style={buttonVariables}>
-    <PlayerButton icon={IconDismiss} on={{ click: config.callbacks.close }} />
-  </div>
+{#if config.mediaCenterHeader}
+  {@render config.mediaCenterHeader()}
 {/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.content-player-header {
-  position: absolute;
-  inset: 0;
-  left: var(--_content-player-header--left);
-  right: var(--_content-player-header--right);
-  bottom: auto;
-  padding: 0.75rem var(--_content-player-header--padding-inline);
-  pointer-events: none;
-  z-index: 1;
-  display: flex;
-  justify-content: var(--_content-player-header--justify-content, center);
-}
-
-.close-button {
-  position: absolute;
-  top: 0.9375rem;
-  left: calc(var(--_content-player-header--close-button--left-indent) + 0.625rem);
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .close-button {
-    left: unset;
-    right: 0.625rem;
-  }
-}
-
-.overview-button {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .overview-button {
-    display: block;
-    position: absolute;
-    top: 0.9375rem;
-    left: 0.625rem;
-    z-index: 1;
-  }
-}</style>

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

@@ -1,13 +1,9 @@
 import { ContentPlayerConfig } from './content-player-config.svelte';
-import { ContentPlayerLocalization } from './content-player-localization';
-import type { Snippet } from 'svelte';
 declare class __sveltets_Render<T extends {
     id: string;
 }> {
     props(): {
         config: ContentPlayerConfig<T>;
-        localization: ContentPlayerLocalization;
-        overviewPanelContent?: Snippet;
     };
     events(): {};
     slots(): {};