@streamscloud/embeddable 14.0.3 → 14.1.0

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

@@ -58,7 +58,7 @@ export class DiscoverViewHandler {
             }
         }
         finally {
-            this._shortVideosLoadingDeferred.resolve();
+            this._shortVideosLoadingDeferred?.resolve();
             this._shortVideosLoadingDeferred = null;
         }
     };

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

@@ -12,11 +12,7 @@ export declare class MediaCenterSettingsHandler {
         readonly dataProvider: IMediaCenterDataProvider;
         settings: MediaCenterSettings;
     });
-    get playerSettings(): {
-        locale?: Locale;
-        showStreamsCloudWatermark?: boolean;
-        playerColors?: Record<ThemeValue, PlayerColors>;
-    };
+    get playerSettings(): ContentPlayerSettingsLocal;
     get actualMediaCenterColors(): PlayerColors;
     get locale(): Locale;
     get backgroundWrapperProps(): {
@@ -25,8 +21,19 @@ export declare class MediaCenterSettingsHandler {
         backgroundColor?: string | null;
     };
     get backgroundImageLoadedHandler(): ((url: string | null) => void) | undefined;
+    setMinOverlayOffsetTop: (value: number) => void;
     updateBackgroundImageUrl: (url: string | null | "not-applicable") => void;
 }
 export type MediaCenterSettingsWithColors = MediaCenterSettings & {
     playerColors?: PlayerColors;
 };
+declare class ContentPlayerSettingsLocal {
+    private settings;
+    private dataProvider;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    playerColors?: Record<ThemeValue, PlayerColors>;
+    overlayMinOffsetTop?: number;
+    constructor(settings: MediaCenterSettings, dataProvider: IMediaCenterDataProvider);
+}
+export {};

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

@@ -4,14 +4,11 @@ export class MediaCenterSettingsHandler {
     _backgroundImageUrl = $state(null);
     _mediaCenterSettings;
     _dataProvider;
-    _contentPlayerSettings = $derived.by(() => ({
-        locale: this._mediaCenterSettings.locale,
-        playerColors: this._dataProvider.model?.playerColors,
-        showStreamsCloudWatermark: this._mediaCenterSettings.showStreamsCloudWatermark
-    }));
+    _contentPlayerSettings;
     constructor(init) {
         this._mediaCenterSettings = init.settings;
         this._dataProvider = init.dataProvider;
+        this._contentPlayerSettings = new ContentPlayerSettingsLocal(this._mediaCenterSettings, this._dataProvider);
     }
     get playerSettings() {
         return this._contentPlayerSettings;
@@ -32,7 +29,22 @@ export class MediaCenterSettingsHandler {
     get backgroundImageLoadedHandler() {
         return this._mediaCenterSettings.disableBackground ? undefined : (url) => this.updateBackgroundImageUrl(url);
     }
+    setMinOverlayOffsetTop = (value) => {
+        this._contentPlayerSettings.overlayMinOffsetTop = value;
+    };
     updateBackgroundImageUrl = (url) => {
         this._backgroundImageUrl = url;
     };
 }
+class ContentPlayerSettingsLocal {
+    settings;
+    dataProvider;
+    locale = $derived.by(() => this.settings.locale);
+    showStreamsCloudWatermark = $derived.by(() => this.settings.showStreamsCloudWatermark);
+    playerColors = $derived.by(() => this.dataProvider.model?.playerColors);
+    overlayMinOffsetTop = $state(0);
+    constructor(settings, dataProvider) {
+        this.settings = settings;
+        this.dataProvider = dataProvider;
+    }
+}

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

@@ -7,12 +7,12 @@ const localization = $derived(new MediaCenterHeaderLocalization(locale));
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
         const headerHeight = node.clientHeight;
-        on.headerHeightChanged(headerHeight);
+        on === null || on === void 0 ? void 0 : on.headerHeightChanged(headerHeight);
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            on.headerHeightChanged(0);
+            on === null || on === void 0 ? void 0 : on.headerHeightChanged(0);
             heightResizeObserver.disconnect();
         }
     };

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

@@ -20,13 +20,13 @@ const headerMounted = (node) => {
     headerRef = node;
     const heightResizeObserver = new ResizeObserver(() => {
         const headerHeight = node.clientHeight;
-        on.headerHeightChanged(headerHeight);
+        on === null || on === void 0 ? void 0 : on.headerHeightChanged(headerHeight);
         calcHeaderGridProportions();
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            on.headerHeightChanged(0);
+            on === null || on === void 0 ? void 0 : on.headerHeightChanged(0);
             heightResizeObserver.disconnect();
         }
     };

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

@@ -69,9 +69,13 @@ const activateSelectedStreamPlayer = (stream, categoryId) => {
 const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
     context.playStreamsFeed({ filter: { categoryId }, init: { prefetchedStreams, initialStreamId: id } });
 };
-const onHeaderHeightChanged = (height) => {
+const onDesktopHeaderHeightChanged = (height) => {
     headerHeight = height;
 };
+const onMobileHeaderHeightChanged = (height) => {
+    headerHeight = height;
+    context.settingsHandler.setMinOverlayOffsetTop(height);
+};
 const onWidthAnchorMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
         isMobileView = node.clientWidth <= 576;
@@ -142,9 +146,9 @@ const swipeToOpen = (node) => {
 <div class="media-center" use:onWidthAnchorMounted>
   <div class="media-center__header-and-content">
     {#if !isMobileView}
-      <MediaCenterHeader context={context} dynamicActions={dynamicActions} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+      <MediaCenterHeader context={context} dynamicActions={dynamicActions} on={{ headerHeightChanged: onDesktopHeaderHeightChanged }} />
     {:else}
-      <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+      <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onMobileHeaderHeightChanged }} />
     {/if}
 
     <div class="media-center__content-container" use:swipeToOpen>

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

@@ -291,7 +291,7 @@ const styles = $derived.by(() => {
 }
 .menu-item__text:hover, .menu-item__text--active {
   font-weight: 600;
-  letter-spacing: -0.5px;
+  letter-spacing: -0.2px;
 }
 .menu-item__tag {
   height: min-content;

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -109,14 +109,13 @@ const variables = $derived.by(() => {
     <div
       class="attachments-horizontal__item"
       class:attachments-horizontal__item--single={attachmentsToShow.length === 1}
-      data-theme={attachment.isAd ? 'default' : 'dark'}
       onclick={() => handleAttachmentClick(attachment)}
       onkeydown={() => {}}
       role="none"
       bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${attachment.adId}`]}
       data-product-id={attachment.productId || undefined}
       data-ad-id={attachment.adId || undefined}>
-      <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1}>
+      <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1} class:attachments-card--dark={!attachment.isAd}>
         <div class="attachments-card__thumb">
           <ImageRounded src={attachment.image} alt="" noBorders={true} />
         </div>
@@ -187,17 +186,27 @@ const variables = $derived.by(() => {
 }
 
 .attachments-card {
+  --_attachments-card--background-color: #ffffff;
+  --_attachments-card--border-color: #f2f2f2;
+  --_attachments-card--text--color: #000000;
+  --_attachments-card--text--secondary--color: #6b7280;
   display: grid;
   grid-template-columns: 2.375rem 1fr;
   grid-column-gap: 0.75rem;
   align-items: center;
   width: 15.625rem;
   padding: 0.375rem;
-  background-color: rgb(from var(--sc-mc-color--bg-card) r g b/90%);
-  color: var(--sc-mc-color--text-primary);
-  border: 0.0625rem solid var(--sc-mc-color--border-card);
+  background-color: rgb(from var(--_attachments-card--background-color) r g b/90%);
+  color: var(--_attachments-card--text--color);
+  border: 0.0625rem solid var(--_attachments-card--border-color);
   border-radius: 0.25rem;
 }
+.attachments-card--dark {
+  --_attachments-card--background-color: #000000;
+  --_attachments-card--border-color: #000000;
+  --_attachments-card--text--color: #ffffff;
+  --_attachments-card--text--secondary--color: #d1d5db;
+}
 .attachments-card--single {
   width: 100%;
 }
@@ -222,7 +231,7 @@ const variables = $derived.by(() => {
 }
 .attachments-card__extra-info {
   font-size: 0.625rem;
-  color: var(--sc-mc-color--text-secondary);
+  color: var(--_attachments-card--text--secondary--color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -7,7 +7,7 @@ import { default as PostMedia } from './media/post-media.svelte';
 import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
-let { model, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+let { model, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on, overlay } = $props();
 const localization = $derived(new PostViewerLocalization(locale));
 const uiManager = new PostViewerUiManager();
 $effect(() => {
@@ -88,6 +88,9 @@ const variables = $derived.by(() => {
         scaleEffect={true} />
     </div>
   {/if}
+  {#if overlay}
+    {@render overlay()}
+  {/if}
 </div>
 
 <style>@keyframes fadeIn {

package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Locale } from '../../core/locale';
 import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import { type PlayerButtonDef } from '../../ui/player/button';
+import type { Snippet } from 'svelte';
 type Props = {
     model: PostModel;
     trackingParams: TrackingParams | null;
@@ -21,6 +22,7 @@ type Props = {
         adClick?: (adId: string) => void;
         adImpression?: (adId: string) => void;
     };
+    overlay?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/posts/post-viewer/heading.svelte

@@ -41,6 +41,8 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer-heading {
+  --_post-viewer-heading-texts--color: #ffffff;
+  --_post-viewer-heading--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);
   display: flex;
   align-items: center;
   padding: var(--_post-viewer--heading--padding);
@@ -67,8 +69,8 @@ const variables = $derived.by(() => {
   font-size: 0.75rem;
   line-height: 0.9375rem;
   font-weight: 500;
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  color: var(--_post-viewer-heading-texts--color);
+  text-shadow: var(--_post-viewer-heading--text--shadow);
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
@@ -79,6 +81,6 @@ const variables = $derived.by(() => {
   font-size: 0.625rem;
   line-height: 0.75rem;
   font-weight: 400;
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  color: var(--_post-viewer-heading-texts--color);
+  text-shadow: var(--_post-viewer-heading--text--shadow);
 }</style>

package/dist/posts/post-viewer/media/post-media.svelte

@@ -46,13 +46,17 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   }
 }
 .post-media {
+  --_post-media--background-color: #ffffff;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
   height: 100%;
   min-height: 100%;
   max-height: 100%;
-  background-color: rgb(from var(--sc-mc-color--bg-panel) r g b/60%);
+  background-color: rgb(from var(--_post-media--background-color) r g b/60%);
+}
+:global([data-theme="dark"]) .post-media {
+  --_post-media--background-color: #000000;
 }
 .post-media--fit {
   --video--media-fit: contain;

package/dist/posts/post-viewer/post-texts.svelte

@@ -45,8 +45,10 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer-texts {
-  color: var(--sc-mc-color--text-white);
-  text-shadow: var(--sc-mc-color--text-white-shadow);
+  --_post-viewer-texts--color: #ffffff;
+  --_post-viewer-texts--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(--_post-viewer-texts--color);
+  text-shadow: var(--_post-viewer-texts--shadow);
   padding: var(--_post-viewer-texts--padding);
   display: flex;
   flex-direction: column;

package/dist/streams/layout/cmp.layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ProportionalContainer } from '../../ui/proportional-container';
 import { generateStreamLayoutStyles } from './styles-transformer';
-let { model, children, controls } = $props();
+let { model, children, controls, overlay } = $props();
 </script>
 
 <ProportionalContainer ratio={9 / 16}>
@@ -9,6 +9,9 @@ let { model, children, controls } = $props();
     {#if controls}
       {@render controls()}
     {/if}
+    {#if overlay}
+      {@render overlay()}
+    {/if}
   </div>
 </ProportionalContainer>
 

package/dist/streams/layout/cmp.layout.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     };
     children: Snippet;
     controls?: Snippet;
+    overlay?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">var _a;
 import { StockStreamElementLocalization } from './stock-stream-element-localization';
 import { StockStreamElementLevel } from '../enums';
-import { mapFlexJustifyContent, transformNumericValue } from '../styles-transformer';
+import { mapFlexJustifyContent, transformNumericValue, transformTextColorValue } from '../styles-transformer';
 let { model, heightOverrideDdu, locale } = $props();
 const localization = $derived(new StockStreamElementLocalization(locale));
 const height = $derived(heightOverrideDdu || ((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
@@ -19,7 +19,8 @@ const dotCustomStyles = $derived.by(() => {
     return values.join('');
 });
 const quantityCustomStyles = $derived.by(() => {
-    const values = [`font-size: ${transformNumericValue(height * 0.75)};`];
+    var _a;
+    const values = [`font-size: ${transformNumericValue(height * 0.75)};`, `color: ${transformTextColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.color)};`];
     return values.join('');
 });
 </script>

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -12,7 +12,7 @@ import { toPriceRepresentation } from '../../../products/price-helper';
 import { LineClamp } from '../../../ui/line-clamp';
 import { PriceStreamElementLocalization } from './price-stream-element-localization';
 import { default as StockElementView } from './cmp.stock-stream-element.svelte';
-import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformTextColorValue, transformBackgroundColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
 let { maxElementHeight, model, data, localization, on } = $props();
 let priceElementRef = $state.raw(null);
 let priceContainerRef = $state.raw(null);
@@ -62,7 +62,7 @@ const priceCustomStyles = $derived.by(() => {
         `font-size: ${transformFontSizeValue(priceHeight / lineHeight)};`,
         `line-height: ${lineHeight};`,
         `font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
-        `color: ${transformColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
+        `color: ${transformTextColorValue(data.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
     ];
     return values.join('');
 });
@@ -74,8 +74,8 @@ const saveValueCustomStyles = $derived.by(() => {
         `font-weight: 500;`,
         `padding: ${transformNumericValue(priceHeight / 8)} ${transformNumericValue(priceHeight / 4)};`,
         `border-radius: ${transformNumericValue(priceHeight / 8)};`,
-        `background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
-        `color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
+        `background-color: ${transformBackgroundColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
+        `color: ${transformTextColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
     ];
     return values.join('');
 });
@@ -84,7 +84,7 @@ const beforeValueCustomStyles = $derived.by(() => {
     const values = [
         `font-size: ${transformFontSizeValue(priceHeight / 5)};`,
         `font-weight: 500;`,
-        `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
+        `color: ${transformTextColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`
     ];
     return values.join('');
 });

package/dist/streams/layout/styles-transformer.d.ts

@@ -13,4 +13,5 @@ export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | n
 export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
 export declare const transformFontSizeValue: (value: number | null | undefined) => string;
 export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;
-export declare const transformColorValue: (value: string | null | undefined) => string;
+export declare const transformTextColorValue: (value: string | null | undefined) => string;
+export declare const transformBackgroundColorValue: (value: string | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -4,7 +4,7 @@ export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';
     }
-    const values = [`background-color: ${transformColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
+    const values = [`background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`, `font-family: ${mapFontFamily(styles.fontFamily)}`];
     return values.join(';');
 };
 export const generateContainerStyles = (styles) => {
@@ -20,10 +20,10 @@ export const generateContainerStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `border-width: ${styles.borderColor ? '1px' : '0'}`,
         `border-radius: ${transformNumericValue(styles.borderRadius)}`,
-        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `border-color: ${transformBackgroundColorValue(styles.borderColor)}`,
         `overflow: ${styles.borderRadius ? 'hidden' : 'visible'}`
     ];
     if (styles.direction) {
@@ -49,11 +49,11 @@ export const generateButtonStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `color: ${transformColorValue(styles.textColor)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `color: ${transformTextColorValue(styles.textColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `border-width: ${styles.borderColor ? '1px' : '0'}`,
         `border-radius: ${transformNumericValue(styles.borderRadius)}`,
-        `border-color: ${transformColorValue(styles.borderColor)}`,
+        `border-color: ${transformBackgroundColorValue(styles.borderColor)}`,
         `overflow: hidden`
     ];
     return values.join(';');
@@ -94,7 +94,7 @@ export const generateProductsSliderStyles = (styles) => {
         `padding-right: ${transformNumericValue(styles.paddingRight)}`,
         `padding-bottom: ${transformNumericValue(styles.paddingBottom)}`,
         `padding-left: ${transformNumericValue(styles.paddingLeft)}`,
-        `background-color: ${transformColorValue(styles.backgroundColor)}`,
+        `background-color: ${transformBackgroundColorValue(styles.backgroundColor)}`,
         `overflow-x: auto`,
         `overflow-y: hidden`,
         `scrollbar-width: none`,
@@ -111,7 +111,7 @@ export const generateTextStyles = (styles) => {
         `font-weight: ${mapFontWeight(styles.fontWeight)}`,
         `line-height: ${transformNumericValue(styles.lineHeight, '1.2')}`,
         `text-align: ${mapTextAlign(styles.textAlign)}`,
-        `color: ${transformColorValue(styles.color)}`
+        `color: ${transformTextColorValue(styles.color)}`
     ];
     return values.join(';');
 };
@@ -203,7 +203,13 @@ export const transformNumericValue = (value, fallback = '0') => {
     }
     return `${(value / baseContainerWidth) * 100}cqi`;
 };
-export const transformColorValue = (value) => {
+export const transformTextColorValue = (value) => {
+    if (value === null || value === undefined) {
+        return '#000000';
+    }
+    return value;
+};
+export const transformBackgroundColorValue = (value) => {
     if (value === null || value === undefined) {
         return 'transparent';
     }

package/dist/streams/layout/styles.d.ts

@@ -66,6 +66,7 @@ export type ProductsSliderStreamElementStyles = {
 export type StockStreamElementStyles = {
     height?: number | null;
     horizontalAlign?: StreamElementStyleHorizontalAlign | null;
+    color?: string | null;
 };
 export type TextStreamElementStyles = {
     fontSize?: number | null;

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
 import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, trackingParams, overlayControls, locale, on } = $props();
+let { page, trackingParams, overlayControls, locale, on, overlay } = $props();
 const localization = $derived(new StreamPageViewerLocalization(locale));
 </script>
 
 {#if page.type === 'general'}
-  <StreamPageLayout model={page.layout}>
+  <StreamPageLayout model={page.layout} overlay={overlay}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
         <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} locale={localization.elementsLocale} />

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -2,6 +2,7 @@ import type { Locale } from '../../core/locale';
 import { type StreamTrackingParams } from '../layout';
 import { type PlayerButtonDef } from '../../ui/player/button';
 import type { StreamPageViewerModel } from './types';
+import type { Snippet } from 'svelte';
 type Props = {
     page: StreamPageViewerModel;
     trackingParams: StreamTrackingParams;
@@ -19,6 +20,7 @@ type Props = {
         productImpression?: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
+    overlay?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/streams-player/streams-player-view.svelte

@@ -17,6 +17,7 @@ import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
 import { IconColor } from '../../ui/icon';
 import { Player, PlayerConfig, PlayerSettings } from '../../ui/player';
+import { ChunksProgress } from '../../ui/player/progress';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
@@ -235,6 +236,49 @@ const currentItemActions = $derived.by(() => {
     }
     return result;
 });
+const handlePageViewMounted = (node) => {
+    const updatePosition = () => {
+        var _a;
+        const progressElement = node.querySelector('[id^="chunk-progress-"]');
+        if (!progressElement) {
+            return;
+        }
+        const overlayMinOffsetTop = (_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.overlayMinOffsetTop) !== null && _a !== void 0 ? _a : 0;
+        if (!overlayMinOffsetTop) {
+            progressElement.style.top = '';
+            return;
+        }
+        const contentElement = node.firstElementChild;
+        if (!contentElement) {
+            progressElement.style.top = '';
+            return;
+        }
+        const nodeRect = node.getBoundingClientRect();
+        const contentRect = contentElement.getBoundingClientRect();
+        const contentOffsetTop = contentRect.top - nodeRect.top;
+        if (contentOffsetTop <= 0) {
+            progressElement.style.top = `${overlayMinOffsetTop}px`;
+            return;
+        }
+        const overlayOverlap = overlayMinOffsetTop - contentOffsetTop;
+        if (overlayOverlap > 0) {
+            progressElement.style.top = `${overlayOverlap}px`;
+        }
+        else {
+            progressElement.style.top = '';
+        }
+    };
+    updatePosition();
+    const resizeObserver = new ResizeObserver(() => {
+        updatePosition();
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
 //#region Activity Tracking
 const resetInactivityTimer = () => {
     if (!isActive) {
@@ -300,59 +344,85 @@ const stopActivityTracking = () => {
       }} />
   {/if}
 {/snippet}
+{#snippet overlay()}
+  {#if buffer?.activeChunk && buffer.activeChunk.chunkItems.length > 1}
+    <div class="stream-progress" id="chunk-progress-{buffer.activeChunk.model.id}">
+      {#snippet info()}
+        <div class="stream-progress-info">
+          <div class="stream-progress-info__title">
+            {buffer?.activeChunk.model.title}
+          </div>
+          {#if buffer?.activeChunk.model.subTitle}
+            <div class="stream-progress-info__sub-title">
+              {buffer.activeChunk.model.subTitle}
+            </div>
+          {/if}
+        </div>
+      {/snippet}
+      <ChunksProgress
+        allChunkItems={buffer.activeChunk.chunkItems.map((i) => i.model.id)}
+        activeChunkItem={buffer.activeChunk.activeChunkItem.model.id}
+        chunkInfo={info} />
+    </div>
+  {/if}
+{/snippet}
 <Player
   config={contentPlayerConfig}
   itemActions={currentItemActions}
   attachmentsView={buffer?.current && itemAsPostModel(buffer.current)?.attachments ? attachmentsView : undefined}>
   {#snippet itemView({ item })}
-    {#if item.type === 'general'}
-      <StreamPageViewer
-        page={item}
-        trackingParams={streamTrackingParams}
-        locale={localization.locale}
-        overlayControls={{
-          enabled: contentPlayerConfig.uiManager.showControlsOverlay,
-          colors: {
-            active: contentPlayerConfig.playerColors.button,
-            inactive: contentPlayerConfig.playerColors.buttonInactive
-          },
-          actions: buffer?.activeChunk
-            ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
-            : []
-        }}
-        on={{
-          progress: (videoId, progress) => onProgress(item.id, videoId, progress),
-          productClick: (productId) => onStreamProductClick(productId),
-          productImpression: (productId) => onStreamProductImpression(productId)
-        }} />
-    {:else}
-      {@const postModel = itemAsPostModel(item)}
-      {#if postModel}
-        {@const handler = buffer?.activeChunk
-          ? streamActionsGenerator.getPostActionsHandler({
-              model: postModel,
-              streamId: buffer.activeChunk.model.id,
-              streamPageId: item.id
-            })
-          : null}
-        <PostViewer
-          model={postModel}
-          controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
-          trackingParams={trackingParams}
-          enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
-          enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
-          controlActions={handler?.actions ?? []}
-          autoplay="on-appearance"
-          locale={contentPlayerConfig.settings.locale}
+    <div class="page-view" use:handlePageViewMounted>
+      {#if item.type === 'general'}
+        <StreamPageViewer
+          page={item}
+          trackingParams={streamTrackingParams}
+          locale={localization.locale}
+          overlayControls={{
+            enabled: contentPlayerConfig.uiManager.showControlsOverlay,
+            colors: {
+              active: contentPlayerConfig.playerColors.button,
+              inactive: contentPlayerConfig.playerColors.buttonInactive
+            },
+            actions: buffer?.activeChunk
+              ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
+              : []
+          }}
           on={{
-            progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
-            productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
-            productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
-            adClick: (adId) => onShortVideoAdClick(adId),
-            adImpression: (adId) => onShortVideoAdImpression(adId)
-          }} />
+            progress: (videoId, progress) => onProgress(item.id, videoId, progress),
+            productClick: (productId) => onStreamProductClick(productId),
+            productImpression: (productId) => onStreamProductImpression(productId)
+          }}
+          overlay={overlay} />
+      {:else}
+        {@const postModel = itemAsPostModel(item)}
+        {#if postModel}
+          {@const handler = buffer?.activeChunk
+            ? streamActionsGenerator.getPostActionsHandler({
+                model: postModel,
+                streamId: buffer.activeChunk.model.id,
+                streamPageId: item.id
+              })
+            : null}
+          <PostViewer
+            model={postModel}
+            controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
+            trackingParams={trackingParams}
+            enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
+            enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
+            controlActions={handler?.actions ?? []}
+            autoplay="on-appearance"
+            locale={contentPlayerConfig.settings.locale}
+            on={{
+              progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
+              productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
+              productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
+              adClick: (adId) => onShortVideoAdClick(adId),
+              adImpression: (adId) => onShortVideoAdImpression(adId)
+            }}
+            overlay={overlay} />
+        {/if}
       {/if}
-    {/if}
+    </div>
   {/snippet}
   {#snippet overviewPanelContent()}
     {#if buffer}
@@ -365,3 +435,53 @@ const stopActivityTracking = () => {
     {/if}
   {/snippet}
 </Player>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.page-view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stream-progress {
+  position: absolute;
+  top: 0.75rem;
+  left: 1rem;
+  right: 1rem;
+}
+
+.stream-progress-info {
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 0.25rem;
+}
+.stream-progress-info__title {
+  font-size: 1.125rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.stream-progress-info__sub-title {
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/streams/streams-player/types.d.ts

@@ -48,6 +48,7 @@ export type StreamsPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     playerColors?: Record<ThemeValue, PlayerColors>;
+    overlayMinOffsetTop?: number;
 };
 export type StreamAmplificationParameters = {
     campaignId: string;

package/dist/ui/player/progress/cmp.chunks-progress.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">let { allChunkItems, activeChunkItem, chunkInfo } = $props();
+let currentIndex = $derived(allChunkItems.indexOf(activeChunkItem));
+export {};
+</script>
+
+<div class="chunks-progress">
+  <div
+    class="chunks"
+    class:chunks--few={allChunkItems.length <= 3}
+    class:chunks--common={allChunkItems.length > 3 && allChunkItems.length <= 6}
+    class:chunks--many={allChunkItems.length > 6}>
+    {#each allChunkItems as chunk, i (chunk)}
+      <div class="chunk" class:active={i <= currentIndex} aria-label={chunk}></div>
+    {/each}
+  </div>
+
+  {#if chunkInfo}
+    <div class="info">
+      {@render chunkInfo()}
+    </div>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.chunks-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.chunks {
+  display: flex;
+}
+.chunks--few {
+  gap: 0.75rem;
+}
+.chunks--common {
+  gap: 0.5625rem;
+}
+.chunks--many {
+  gap: 0.375rem;
+}
+
+.chunk {
+  flex: 1;
+  height: 0.125rem;
+  border-radius: 1px;
+  background-color: rgb(from #6b7280 r g b/40%);
+  transition: background-color 0.2s ease;
+  box-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);
+}
+
+.chunk.active {
+  background-color: rgb(from #fafafa r g b/60%);
+}</style>

package/dist/ui/player/progress/cmp.chunks-progress.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    allChunkItems: string[];
+    activeChunkItem: string;
+    chunkInfo?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/player/progress/index.d.ts

@@ -0,0 +1 @@
+export { default as ChunksProgress } from './cmp.chunks-progress.svelte';

package/dist/ui/player/progress/index.js

@@ -0,0 +1 @@
+export { default as ChunksProgress } from './cmp.chunks-progress.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "14.0.3",
+  "version": "14.1.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",