@streamscloud/embeddable 11.0.0 → 12.1.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, colors, trackingParams, inert = false, on } = $props();
+let { ad, colors, locale, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
     if (on === null || on === void 0 ? void 0 : on.impression) {
         const observer = new IntersectionObserver((entries) => {
@@ -53,12 +53,12 @@ const styles = $derived.by(() => {
     <div class="ad-card__content">
       {#if ad.title}
         <div class="ad-card__title">
-          <LineClamp value={ad.title} maxLines={2} />
+          <LineClamp maxLines={2} locale={locale}>{ad.title}</LineClamp>
         </div>
       {/if}
       {#if ad.description}
         <div class="ad-card__description">
-          <LineClamp value={ad.description} maxLines={2} />
+          <LineClamp maxLines={2} locale={locale}>{ad.description}</LineClamp>
         </div>
       {/if}
     </div>
@@ -79,7 +79,7 @@ const styles = $derived.by(() => {
             size={ButtonSize.Standard}
             on={{ click: handleAdClick }}
             --button--font--size="1em"
-            --button--font--color={ad.ctaButton.textColor}
+            --button--font--color={colors?.buttonBackground ? '#FFFFFF' : ad.ctaButton.textColor}
             --button--background={colors?.buttonBackground ?? ad.ctaButton.background}
             --button--min-width="100%">
             <span class="ad-card__button-text">{ad.ctaButton.text}</span>

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

@@ -1,3 +1,4 @@
+import type { Locale } from '../../core/locale';
 import { type TrackingParams } from '../../marketing-tracking';
 import type { AdCardModel } from './types';
 type Props = {
@@ -8,6 +9,7 @@ type Props = {
         price?: string | null;
         buttonBackground?: string | null;
     };
+    locale: Locale;
     inert?: boolean;
     on?: {
         click?: (id: string) => void;

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

@@ -4,11 +4,15 @@ import { Loading } from '../ui/loading';
 import { PlayerSlider } from '../ui/player/slider';
 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 {} from 'svelte';
 let { config, nonPostItemView, overviewPanelContent } = $props();
 let everTouched = $state(false);
+let overviewPosition = $state({
+    top: 0,
+    bottom: 0,
+    right: 0
+});
 const uiManager = config.uiManager;
 const handleContentPlayerMounted = (node) => {
     const markAsTouched = () => {
@@ -75,6 +79,12 @@ const handleSliderMounted = (node) => {
         node.style.setProperty('--_content-player--content--height', height);
         node.style.setProperty('--_content-player--content--margin', margin);
         uiManager.contentViewWidth = contentWidthNumber;
+        const verticalIndent = uiManager.isMobileView ? 0 : 13;
+        overviewPosition = {
+            top: verticalIndent,
+            bottom: verticalIndent,
+            right: (playerWidth - contentWidthNumber) / 2 + contentWidthNumber
+        };
     });
     resizeObserver.observe(node);
     return {
@@ -83,103 +93,66 @@ const handleSliderMounted = (node) => {
         }
     };
 };
-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>
 
 <svelte:document
   onkeydown={(e) => {
-    if (config.settings.enableCloseButton) {
-      handleEsc(e, () => config.callbacks?.close?.());
+    if (config.closeOrchestrator.closeTriggerVisible) {
+      handleEsc(e, () => config.closeOrchestrator.requestClose());
     }
   }} />
 
-<svelte:head>
-  <meta name="theme-color" content="#242424" />
-  <meta name="color-scheme" content="dark" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-
-  <style>
-    html,
-    body {
-      background-color: #242424;
-      color-scheme: dark;
-    }
-  </style>
-</svelte:head>
-
-<div
-  class="content-player-container"
-  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={styles}>
-  <Header config={config} />
-  <div class="content-player" use:handleContentPlayerMounted>
-    {#if config.settings.showStreamsCloudWatermark}
-      <div class="content-player__watermark">
-        <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
-          <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
-        </a>
-      </div>
-    {/if}
-    {#if config.playerBuffer}
-      <div class="content-player__slider" use:handleSliderMounted>
-        <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
-          {#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}
+<div class="content-player" use:handleContentPlayerMounted>
+  {#if config.settings.showStreamsCloudWatermark}
+    <div class="content-player__watermark">
+      <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
+        <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
+      </a>
+    </div>
+  {/if}
+  {#if config.playerBuffer}
+    <div class="content-player__slider" use:handleSliderMounted>
+      <PlayerSlider buffer={config.playerBuffer} on={config.playerSliderCallbacks}>
+        {#snippet children({ item })}
+          {@const postModel = config.itemAsPostViewerModel(item)}
+          <div class="content-player__content">
+            {#if postModel}
+              <PostViewer
+                model={postModel}
+                controlsColors={{ active: config.playerColors.button, inactive: config.playerColors.buttonInactive }}
+                trackingParams={config.trackingParams}
+                socialInteractionsHandler={config.socialInteractionsHandler}
+                enableAttachments={config.uiManager.showPostOverlayAttachments}
+                enableControls={config.uiManager.showPostOverlayControls}
+                autoplay="on-appearance"
+                locale={config.settings.locale}
+                on={{
+                  progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
+                  productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
+                  productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
+                  adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
+                  adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
+                }} />
+            {:else if nonPostItemView}
+              {@render nonPostItemView({ item })}
+            {/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}
-                  enableControls={config.uiManager.showPostOverlayControls}
-                  autoplay="on-appearance"
-                  locale={config.settings.locale}
-                  on={{
-                    progress: (progress) => config.callbacks?.videoProgress?.(item.id, postModel.id, progress),
-                    productClick: (productId) => config.callbacks?.productClick?.(productId, postModel.id),
-                    productImpression: (productId) => config.callbacks?.productImpression?.(productId, postModel.id),
-                    adClick: (adId) => config.callbacks?.adClick?.(adId, postModel.id),
-                    adImpression: (adId) => config.callbacks?.adImpression?.(adId, postModel.id)
-                  }} />
-              {:else if nonPostItemView}
-                {@render nonPostItemView({ item })}
-              {/if}
+            {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
+              <SwipeIndicator locale={config.settings.locale} />
+            {/if}
+          </div>
+        {/snippet}
+      </PlayerSlider>
+      {#if overviewPanelContent && config.playerBuffer.loaded.length > 0}
+        <OverviewPanel config={config} position={overviewPosition} uiManager={uiManager}>
+          {@render overviewPanelContent()}
+        </OverviewPanel>
+      {/if}
+    </div>
 
-              {#if uiManager.isMobileView && config.playerBuffer && config.playerBuffer.loaded.length > 1 && !everTouched}
-                <SwipeIndicator locale={config.settings.locale} />
-              {/if}
-            </div>
-          {/snippet}
-        </PlayerSlider>
-      </div>
-      <ControlsAndAttachments config={config} />
-    {:else}
-      <Loading positionFixedCenter={true} timeout={1000} />
-    {/if}
-  </div>
-  {#if config.mediaCenterMobileFooter}
-    {@render config.mediaCenterMobileFooter()}
+    <ControlsAndAttachments config={config} />
+  {:else}
+    <Loading positionFixedCenter={true} timeout={1000} />
   {/if}
 </div>
 
@@ -194,40 +167,6 @@ const styles = $derived.by(() => {
     opacity: 1;
   }
 }
-.content-player-container {
-  --_content-player-container--background: var(--content-player-container--background);
-  --content-player--elements-opacity: 1;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  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);
-  background-size: cover;
-  background-blend-mode: multiply;
-}
-.content-player-container--background-loading {
-  background-color: transparent;
-}
-.content-player-container--faded {
-  --content-player--elements-opacity: 0;
-}
-
 .content-player {
   display: flex;
   flex: 1;
@@ -252,17 +191,13 @@ const styles = $derived.by(() => {
 .content-player__watermark {
   position: absolute;
   bottom: 5rem;
-  left: var(--_content-player--watermark--left-indent);
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
+  left: 4.375rem;
 }
 .content-player__content {
   width: var(--_content-player--content--width, 100%);
   height: var(--_content-player--content--height, 100%);
   margin: var(--_content-player--content--margin, 0);
   position: relative;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,6 +1,6 @@
-import type { MediaCenterData } from '../media-center/model/types';
 import { type IPostModel, PostModel } from '../posts/model';
 import type { IPostSocialInteractionsHandler } from '../posts/social-interactions';
+import type { ICloseOrchestrator } from '../ui/player/close-orchestrator';
 import type { IPlayerBuffer } from '../ui/player/providers';
 import type { PlayerSliderCallbacks } from '../ui/player/slider/types';
 import { ContentPlayerSettings } from './content-player-settings';
@@ -13,8 +13,8 @@ export declare class ContentPlayerConfig<T extends {
     readonly callbacks: ContentPlayerCallbacks | null;
     readonly playerSliderCallbacks: PlayerSliderCallbacks | undefined;
     readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+    readonly closeOrchestrator: ICloseOrchestrator;
     readonly uiManager: ContentPlayerUIManager;
-    private _mediaCenterData;
     private _trackingParams;
     private _mappers;
     private mappedPostsCache;
@@ -22,14 +22,12 @@ export declare class ContentPlayerConfig<T extends {
         playerBuffer: IPlayerBuffer<T> | null;
         mappers: ContentPlayerMappers<T>;
         socialInteractionsHandler?: IPostSocialInteractionsHandler;
-        mediaCenterData?: MediaCenterData;
         settings?: ContentPlayerSettings;
         callbacks?: ContentPlayerCallbacks;
         playerSliderCallbacks?: PlayerSliderCallbacks;
         trackingParams?: ContentPlayerTrackingParams | null;
+        closeOrchestrator: ICloseOrchestrator;
     });
-    get mediaCenterHeader(): MediaCenterData['header'] | null;
-    get mediaCenterMobileFooter(): MediaCenterData['mobileFooter'] | null;
     get playerColors(): {
         brand: string | null;
         button: string | null;
@@ -41,21 +39,16 @@ export declare class ContentPlayerConfig<T extends {
         salePrice: string | null;
         sidebarBackground: string | null;
     };
-    get mediaCenterCallbacks(): MediaCenterData['callbacks'] | null;
-    get fadeContent(): boolean;
     get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
     itemAsPostViewerModel: (item: T & {
         mediaIndex?: number;
     }) => PostModel | null;
-    setBackgroundImageUrl: (imageUrl: string | null) => void;
-    updateMediaCenterData: (data: MediaCenterData | undefined) => void;
     updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
 }
 export type ContentPlayerMappers<T> = {
     postModelFromCurrentItem: (item: T) => IPostModel | null;
 };
 export type ContentPlayerCallbacks = {
-    close?: () => void;
     videoProgress?: (playerItemId: string, postId: string, progress: number) => void;
     productClick?: (productId: string, postId: string) => void;
     productImpression?: (productId: string, postId: string) => void;

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

@@ -7,37 +7,25 @@ export class ContentPlayerConfig {
     callbacks;
     playerSliderCallbacks;
     socialInteractionsHandler;
+    closeOrchestrator;
     uiManager = new ContentPlayerUIManager();
-    _mediaCenterData = $state.raw(null);
     _trackingParams = $state.raw(null);
     _mappers;
     mappedPostsCache = new Map();
     constructor(init) {
-        const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, mediaCenterData, settings, callbacks, playerSliderCallbacks } = init;
+        const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, settings, callbacks, playerSliderCallbacks, closeOrchestrator } = init;
         this.playerBuffer = playerBuffer;
         this._trackingParams = trackingParams ?? null;
         this.settings = settings || new ContentPlayerSettings();
-        this._mediaCenterData = mediaCenterData || null;
         this.callbacks = callbacks || null;
         this.playerSliderCallbacks = playerSliderCallbacks;
         this.socialInteractionsHandler = socialInteractionsHandler;
+        this.closeOrchestrator = closeOrchestrator;
         this._mappers = mappers;
     }
-    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 fadeContent() {
-        return this._mediaCenterData?.overlayIsActive || false;
-    }
     get trackingParams() {
         return this._trackingParams;
     }
@@ -54,12 +42,6 @@ export class ContentPlayerConfig {
         this.mappedPostsCache.set(item.id, postModel);
         return postModel;
     };
-    setBackgroundImageUrl = (imageUrl) => {
-        this.uiManager.backgroundImageUrl = imageUrl;
-    };
-    updateMediaCenterData = (data) => {
-        this._mediaCenterData = data ?? null;
-    };
     updateTrackingParams = (data) => {
         this._trackingParams = data ?? null;
     };

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

@@ -1,26 +1,12 @@
 import type { Locale } from '../core/locale';
+import type { PlayerColors } from '../ui/player/colors';
 export declare class ContentPlayerSettings {
-    disableBackground: boolean;
-    enableCloseButton: boolean;
     locale: Locale;
     showStreamsCloudWatermark: boolean;
-    playerColors: NonNullable<IContentPlayerSettingsInitializer['playerColors']>;
-    constructor(init?: IContentPlayerSettingsInitializer);
-}
-export interface IContentPlayerSettingsInitializer {
-    disableBackground?: boolean;
-    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;
+    playerColors: NonNullable<PlayerColors>;
+    constructor(init?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        playerColors?: PlayerColors;
+    });
 }

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

@@ -1,6 +1,4 @@
 export class ContentPlayerSettings {
-    disableBackground = false;
-    enableCloseButton = true;
     locale = 'en';
     showStreamsCloudWatermark = false;
     playerColors = {
@@ -16,8 +14,6 @@ export class ContentPlayerSettings {
     };
     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

@@ -5,9 +5,11 @@ import { PlayerButton } from '../ui/player/button';
 import { ContentPlayerConfig } from './content-player-config.svelte';
 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();
 const uiManager = config.uiManager;
 let attachmentsCollapsed = $state(false);
+let closeButtonAreaHeight = $state(0);
 const currentItemPostContainer = $derived.by(() => {
     var _a;
     if (!((_a = config.playerBuffer) === null || _a === void 0 ? void 0 : _a.current)) {
@@ -30,9 +32,26 @@ const trackAttachmentsPanelSize = (node) => {
         }
     };
 };
+const handleCloseButtonMounted = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const height = entry.target.getBoundingClientRect().height;
+        closeButtonAreaHeight = height;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+            closeButtonAreaHeight = 0;
+        }
+    };
+};
+const showCloseButton = $derived.by(() => {
+    return config.closeOrchestrator.closeTriggerVisible && !config.closeOrchestrator.closeTriggerAttached;
+});
 const variables = $derived.by(() => {
     const values = [
         `--_controls-and-attachments--attachments--max-width: ${uiManager.attachmentsMaxWidth}px`,
+        `--_controls-and-attachments--spacing-top: ${closeButtonAreaHeight}px`,
         `--_controls-and-attachments--width: ${uiManager.sidePanelsMaxWidth}px`
     ];
     return values.join(';');
@@ -100,6 +119,17 @@ const variables = $derived.by(() => {
   </div>
 {/if}
 
+{#if showCloseButton}
+  <div class="close-button" use:handleCloseButtonMounted>
+    <PlayerButton
+      icon={IconDismiss}
+      zoom={0.8}
+      activeColor={config.playerColors.button ?? null}
+      inactiveColor={config.playerColors.buttonInactive ?? null}
+      on={{ click: config.closeOrchestrator.requestClose }} />
+  </div>
+{/if}
+
 <style>@keyframes fadeIn {
   0% {
     opacity: 1;
@@ -119,7 +149,7 @@ const variables = $derived.by(() => {
   width: var(--_controls-and-attachments--width);
   display: flex;
   justify-content: space-between;
-  padding: 0.625rem 0 1.875rem 0;
+  padding: calc(0.625rem + var(--_controls-and-attachments--spacing-top)) 0 1.875rem 0;
   pointer-events: none;
 }
 .controls-and-attachments__spacer {
@@ -135,8 +165,6 @@ const variables = $derived.by(() => {
   gap: 2.3125rem;
   justify-content: flex-end;
   align-items: center;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
 }
 .controls-and-attachments__right {
   flex: 1;
@@ -151,8 +179,6 @@ const variables = $derived.by(() => {
   pointer-events: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  opacity: var(--content-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
   scrollbar-width: none;
 }
 .controls-and-attachments__navigation-buttons {
@@ -163,4 +189,12 @@ const variables = $derived.by(() => {
 }
 .controls-and-attachments__navigation-buttons--invisible {
   visibility: hidden;
+}
+
+.close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-block: 0.9375rem;
+  padding-right: 1.25rem;
 }</style>

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

@@ -1,10 +1,15 @@
 <script lang="ts">import { slideHorizontally } from '../core/transitions';
-let { config, contentFaded, uiManager, children } = $props();
+let { config, uiManager, position, children } = $props();
 const handlePanelClick = (e) => {
     e.stopPropagation();
 };
 const styles = $derived.by(() => {
-    const values = [`--overview-panel--width: ${uiManager.overviewMaxWidth}px`];
+    const values = [
+        `--overview-panel--width: ${uiManager.overviewMaxWidth}px`,
+        `--overview-panel--top: ${position.top}px`,
+        `--overview-panel--bottom: ${position.bottom}px`,
+        `--overview-panel--right: ${position.right}px`
+    ];
     if (config.playerColors.sidebarBackground) {
         values.push(`--overview-panel--background: ${config.playerColors.sidebarBackground}`);
     }
@@ -17,7 +22,7 @@ const styles = $derived.by(() => {
 
 <!--Double `if` for correct behavior of slideHorizontally-->
 {#if uiManager.viewInitialized}
-  {#if !uiManager.overviewCollapsed && !contentFaded}
+  {#if !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()}
@@ -40,14 +45,17 @@ const styles = $derived.by(() => {
 .overview-panel {
   --_overview-panel--background: var(--overview-panel--background, #1c1c1c);
   --_overview-panel--width: var(--overview-panel--width);
+  --_overview-panel--top: var(--overview-panel--top);
+  --_overview-panel--bottom: var(--overview-panel--bottom);
+  --_overview-panel--right: var(--overview-panel--right);
   --brand-color: var(--overview-panel--brand-color);
   width: var(--_overview-panel--width);
   min-width: var(--_overview-panel--width);
   max-width: var(--_overview-panel--width);
   position: absolute;
-  top: 0;
-  right: calc(100% - 0.375rem);
-  bottom: 0;
+  top: var(--_overview-panel--top);
+  right: var(--_overview-panel--right);
+  bottom: var(--_overview-panel--bottom);
   z-index: 0;
   border-radius: 0.5rem 0 0 0.5rem;
   background: var(--_overview-panel--background);

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

@@ -7,7 +7,11 @@ declare class __sveltets_Render<T extends {
     props(): {
         config: ContentPlayerConfig<T>;
         uiManager: ContentPlayerUIManager;
-        contentFaded: boolean;
+        position: {
+            top: number;
+            bottom: number;
+            right: number;
+        };
         children: Snippet;
     };
     events(): {};

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

@@ -6,10 +6,8 @@ export declare class ContentPlayerUIManager {
     playerTotalWidth: number;
     contentViewWidth: number;
     readonly sidePanelsMaxWidth: number;
-    readonly safeAreaSize = 70;
     readonly isMobileView: boolean;
     readonly viewInitialized: boolean;
-    backgroundImageUrl: string | null;
     showPostOverlayAttachments: boolean;
     showPostOverlayControls: boolean;
 }

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

@@ -9,10 +9,8 @@ export class ContentPlayerUIManager {
     playerTotalWidth = $state(0);
     contentViewWidth = $state(0);
     sidePanelsMaxWidth = $derived.by(() => (this.playerTotalWidth - this.contentViewWidth) / 2);
-    safeAreaSize = SAFE_AREA_SIZE;
     isMobileView = $derived.by(() => this.playerTotalWidth <= 576);
     viewInitialized = $derived.by(() => !!this.playerTotalWidth && !!this.contentViewWidth);
-    backgroundImageUrl = $state(null);
     showPostOverlayAttachments = $derived.by(() => this.viewInitialized && this.attachmentsWidth < ATTACHMENTS_MAX_WIDTH + 10);
     showPostOverlayControls = $derived.by(() => this.viewInitialized && this.sidePanelsMaxWidth < SAFE_AREA_SIZE);
 }

package/dist/media-center/config/internal-media-center-config.d.ts

@@ -1,10 +1,14 @@
 import type { IMediaCenterConfig } from './types';
 export declare class InternalMediaCenterConfig implements IMediaCenterConfig {
-    private readonly mediaPageId;
     postsPlayer: IMediaCenterConfig['postsPlayer'];
     streamPlayer: IMediaCenterConfig['streamPlayer'];
     handlers: IMediaCenterConfig['handlers'];
-    private graphql;
-    constructor(mediaPageId: string, graphqlOrigin?: string, testingStuff?: boolean);
     getConfig: IMediaCenterConfig['getConfig'];
+    private graphql;
+    constructor(input: {
+        mediaPageId: string;
+        initiator?: string;
+        graphqlOrigin?: string;
+        testingStuff?: boolean;
+    });
 }