@streamscloud/embeddable 15.0.0-rc.0 → 15.0.0-rc.2

package/dist/external-api/data-providers/internal-media-center-analytics-handler.js

@@ -36,7 +36,7 @@ export class InternalMediaCenterAnalyticsHandler {
         eventType: EventType.Viewed,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.Stream,
                     id: streamId
@@ -68,7 +68,7 @@ export class InternalMediaCenterAnalyticsHandler {
         eventType: EventType.Appeared,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.Stream,
                     id: streamId
@@ -84,7 +84,7 @@ export class InternalMediaCenterAnalyticsHandler {
         eventType: EventType.Clicked,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.Stream,
                     id: streamId
@@ -117,7 +117,7 @@ export class InternalMediaCenterAnalyticsHandler {
         eventType: EventType.Appeared,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.ShortVideo,
                     id: videoId
@@ -133,7 +133,7 @@ export class InternalMediaCenterAnalyticsHandler {
         eventType: EventType.Clicked,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.ShortVideo,
                     id: videoId

package/dist/external-api/data-providers/internal-post-analytics-handler.js

@@ -36,7 +36,7 @@ export class InternalPostAnalyticsHandler {
         eventType: EventType.Appeared,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.ShortVideo,
                     id: videoId
@@ -52,7 +52,7 @@ export class InternalPostAnalyticsHandler {
         eventType: EventType.Clicked,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.ShortVideo,
                     id: videoId

package/dist/external-api/data-providers/internal-stream-analytics-handler.js

@@ -28,7 +28,7 @@ export class InternalStreamAnalyticsHandler {
         eventType: EventType.Viewed,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.Stream,
                     id: streamId
@@ -60,7 +60,7 @@ export class InternalStreamAnalyticsHandler {
         eventType: EventType.Appeared,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.Stream,
                     id: streamId
@@ -76,7 +76,7 @@ export class InternalStreamAnalyticsHandler {
         eventType: EventType.Clicked,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.Stream,
                     id: streamId
@@ -109,7 +109,7 @@ export class InternalStreamAnalyticsHandler {
         eventType: EventType.Appeared,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.ShortVideo,
                     id: videoId
@@ -125,7 +125,7 @@ export class InternalStreamAnalyticsHandler {
         eventType: EventType.Clicked,
         relatedEntities: [
             {
-                relationType: EntityRelationType.PlacedIn,
+                relationType: EntityRelationType.NestedIn,
                 entity: {
                     type: EntityType.ShortVideo,
                     id: videoId

package/dist/external-api/media-page/index.js

@@ -74,7 +74,7 @@ export function openMediaPageModal(init) {
         viewerSettings: {
             hideCloseButton: viewerSettings?.hideCloseButton,
             locale: viewerSettings?.locale,
-            showStreamsCloudWatermark: true,
+            showStreamsCloudWatermark: viewerSettings?.showStreamsCloudWatermark,
             theme: viewerSettings?.theme
         },
         on

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/discover/discover-view.svelte

@@ -146,6 +146,7 @@ const genereateStreamActions = (id) => {
   overflow-y: auto;
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover:hover {
   --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
@@ -169,9 +170,6 @@ const genereateStreamActions = (id) => {
     scrollbar-width: thin;
   }
 }
-.media-center-discover {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .media-center-discover {
     padding-inline: 0.9375rem;
@@ -183,23 +181,19 @@ const genereateStreamActions = (id) => {
   margin: 0 auto;
   padding-bottom: 1.25rem;
   /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .media-center-discover__content {
     padding-bottom: 1rem;
   }
 }
-.media-center-discover__content {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 768px) {
   .media-center-discover__content {
     padding-bottom: 0.8125rem;
   }
 }
-.media-center-discover__content {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .media-center-discover__content {
     padding-bottom: 0.625rem;
@@ -210,23 +204,19 @@ const genereateStreamActions = (id) => {
   flex-direction: column;
   gap: 3rem;
   /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .media-center-discover__feed {
     gap: 2.5rem;
   }
 }
-.media-center-discover__feed {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 768px) {
   .media-center-discover__feed {
     gap: 2rem;
   }
 }
-.media-center-discover__feed {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .media-center-discover__feed {
     gap: 1.5rem;
@@ -263,13 +253,13 @@ const genereateStreamActions = (id) => {
 .media-center-discover__section-content--4 {
   gap: 1.25rem;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--4 :global(> :nth-child(n + 5)) {
   display: var(--_section-content--more-items--display);
 }
-.media-center-discover__section-content--4 {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 992px) {
   .media-center-discover__section-content--4 {
     gap: 1rem;
@@ -279,9 +269,6 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
-.media-center-discover__section-content--4 {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 768px) {
   .media-center-discover__section-content--4 {
     gap: 0.75rem;
@@ -294,9 +281,6 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
-.media-center-discover__section-content--4 {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .media-center-discover__section-content--4 {
     gap: 0.625rem;
@@ -305,13 +289,13 @@ const genereateStreamActions = (id) => {
 .media-center-discover__section-content--5 {
   gap: 1.875rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 .media-center-discover__section-content--5 :global(> :nth-child(n + 6)) {
   display: var(--_section-content--more-items--display);
 }
-.media-center-discover__section-content--5 {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 992px) {
   .media-center-discover__section-content--5 {
     gap: 1.5rem;
@@ -321,9 +305,6 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
-.media-center-discover__section-content--5 {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 768px) {
   .media-center-discover__section-content--5 {
     gap: 1.125rem;
@@ -333,9 +314,6 @@ const genereateStreamActions = (id) => {
     display: var(--_section-content--more-items--display);
   }
 }
-.media-center-discover__section-content--5 {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .media-center-discover__section-content--5 {
     gap: 0.9375rem;

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

@@ -6,13 +6,15 @@ let { context, locale = 'en', on } = $props();
 const localization = $derived(new MediaCenterHeaderLocalization(locale));
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
+        var _a;
         const headerHeight = node.clientHeight;
-        on.headerHeightChanged(headerHeight);
+        (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, headerHeight);
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            on.headerHeightChanged(0);
+            var _a;
+            (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
             heightResizeObserver.disconnect();
         }
     };

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

@@ -19,14 +19,16 @@ let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
     headerRef = node;
     const heightResizeObserver = new ResizeObserver(() => {
+        var _a;
         const headerHeight = node.clientHeight;
-        on.headerHeightChanged(headerHeight);
+        (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, headerHeight);
         calcHeaderGridProportions();
     });
     heightResizeObserver.observe(node);
     return {
         destroy: () => {
-            on.headerHeightChanged(0);
+            var _a;
+            (_a = on === null || on === void 0 ? void 0 : on.headerHeightChanged) === null || _a === void 0 ? void 0 : _a.call(on, 0);
             heightResizeObserver.disconnect();
         }
     };

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

@@ -1,6 +1,6 @@
 export class MediaCenterSettings {
     locale = $state('en');
-    showStreamsCloudWatermark = $state(true);
+    showStreamsCloudWatermark = $state(false);
     disableBackground = $state(false);
     theme = $state('dark');
     state = $state.raw(null);
@@ -9,7 +9,7 @@ export class MediaCenterSettings {
     }
     update = (data) => {
         this.locale = data?.locale ?? 'en';
-        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark ?? true;
+        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark ?? false;
         this.disableBackground = data?.disableBackground ?? false;
         this.theme = data?.theme ?? 'dark';
         this.state = data?.state ?? null;

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

@@ -241,16 +241,14 @@ const styles = $derived.by(() => {
   display: flex;
   -webkit-user-drag: none;
   user-select: none;
-}
-.menu-item :global([contenteditable]) {
-  user-select: text;
-}
-.menu-item {
   height: 2.25rem;
   padding-left: var(--_media-center-menu--items--padding-inline);
   --_menu-item--text--font-size: 0.9375rem;
   --_menu-item--image--size: 1.5rem;
 }
+.menu-item :global([contenteditable]) {
+  user-select: text;
+}
 .menu-item--active {
   background-color: hsl(from var(--_media-center-menu--background-color) h s calc(l + 5)/alpha);
   border-radius: 0.25rem;
@@ -293,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/media-center/media-center/streams-in-category/streams-in-category-panel.svelte

@@ -80,23 +80,19 @@ let { handler, on } = $props();
   gap: 2rem 1.25rem;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 992px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
-.streams-in-category__section-content {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 768px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-.streams-in-category__section-content {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
 @container (width < 576px) {
   .streams-in-category__section-content {
     grid-template-columns: repeat(2, minmax(0, 1fr));

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>;