@streamscloud/embeddable 7.5.2 → 8.0.1

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

@@ -18,7 +18,7 @@ import { default as Header } from './header.svelte';
 import { default as OverviewPanel } from './overview-panel.svelte';
 import { onMount, untrack } from 'svelte';
 let { config, nonPostItemView, overviewPanelContent } = $props();
-const localization = new ContentPlayerLocalization(config.locale);
+const localization = new ContentPlayerLocalization(config.settings.locale);
 let everTouched = $state(false);
 const uiManager = config.uiManager;
 onMount(() => __awaiter(void 0, void 0, void 0, function* () {
@@ -48,6 +48,13 @@ const handleContentPlayerMounted = (node) => {
     node.addEventListener('wheel', markAsTouched);
     node.addEventListener('click', markAsTouched);
     node.addEventListener('keypress', markAsTouched);
+    return {
+        destroy: () => {
+            removeListeners();
+        }
+    };
+};
+const handleSliderMounted = (node) => {
     let resizeObserver = new ResizeObserver(() => {
         const { width: playerWidth, height: playerHeight } = node.getBoundingClientRect();
         uiManager.playerTotalWidth = playerWidth;
@@ -95,7 +102,6 @@ const handleContentPlayerMounted = (node) => {
     resizeObserver.observe(node);
     return {
         destroy: () => {
-            removeListeners();
             resizeObserver.disconnect();
         }
     };
@@ -115,15 +121,31 @@ const variables = $derived.by(() => {
 
 <svelte:document
   onkeydown={(e) => {
-    if (config.enableCloseButton) {
+    if (config.settings.enableCloseButton) {
       handleEsc(e, () => config.callbacks?.close?.());
     }
   }} />
 
+<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.disableBackground}
-  class:content-player-container--background-loading={!config.disableBackground && !uiManager.backgroundImageUrl}
+  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} />
@@ -133,7 +155,7 @@ const variables = $derived.by(() => {
     </OverviewPanel>
   {/if}
   <div class="content-player" use:handleContentPlayerMounted>
-    {#if config.showStreamsCloudWatermark}
+    {#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" />
@@ -141,35 +163,37 @@ const variables = $derived.by(() => {
       </div>
     {/if}
     {#if config.playerBuffer}
-      <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}
-                socialInteractionsHandler={config.socialInteractionsHandler}
-                enableAttachments={config.uiManager.showPostOverlayAttachments}
-                enableControls={config.uiManager.showPostOverlayControls}
-                autoplay="on-appearance"
-                locale={config.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}
+      <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}
+                  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.locale} />
-            {/if}
-          </div>
-        {/snippet}
-      </PlayerSlider>
+              {#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} />
@@ -226,6 +250,14 @@ const variables = $derived.by(() => {
     padding: 0;
   }
 }
+.content-player__slider {
+  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+}
 .content-player__watermark {
   position: absolute;
   bottom: 5rem;
@@ -240,4 +272,7 @@ const variables = $derived.by(() => {
   position: relative;
   opacity: var(--content-player--elements-opacity);
   transition: opacity 0.3s ease-in-out;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }</style>

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

@@ -1,25 +1,22 @@
-import type { Locale } from '../core/locale';
 import type { MediaCenterData } from '../media-center/model/types';
-import type { PostViewerModel } from '../posts/post-viewer';
+import { type IPostModel, PostModel } from '../posts/model';
 import type { IPostSocialInteractionsHandler } from '../posts/social-interactions';
 import type { IPlayerBuffer } from '../ui/player-slider';
 import type { PlayerSliderCallbacks } from '../ui/player-slider/types';
+import { ContentPlayerSettings } from './content-player-settings';
 import { ContentPlayerUIManager } from './ui-manager.svelte';
 export declare class ContentPlayerConfig<T extends {
     id: string;
 }> {
     playerBuffer: IPlayerBuffer<T> | null;
-    readonly locale: Locale;
-    readonly disableBackground: boolean;
-    readonly enableCloseButton: boolean;
-    readonly showStreamsCloudWatermark: boolean;
+    readonly settings: ContentPlayerSettings;
     readonly callbacks: ContentPlayerCallbacks | null;
     readonly playerSliderCallbacks: PlayerSliderCallbacks<T> | undefined;
     readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
     readonly uiManager: ContentPlayerUIManager;
     private _mediaCenterData;
-    private _initialMediaIndex;
     private _mappers;
+    private mappedPostsCache;
     constructor(init: {
         playerBuffer: IPlayerBuffer<T> | null;
         mappers: ContentPlayerMappers<T>;
@@ -33,20 +30,14 @@ export declare class ContentPlayerConfig<T extends {
     get mediaCenterCallbacks(): MediaCenterData['callbacks'] | null;
     get playerLogo(): string | null;
     get fadeContent(): boolean;
-    get initialMediaIndex(): number;
-    itemAsPostViewerModel: (item: T) => PostViewerModel | null;
+    itemAsPostViewerModel: (item: T & {
+        mediaIndex?: number;
+    }) => PostModel | null;
     setBackgroundImageUrl: (imageUrl: string | null) => void;
     updateMediaCenterData: (data: MediaCenterData | undefined) => void;
 }
-export type ContentPlayerSettings = {
-    disableBackground?: boolean;
-    hideCloseButton?: boolean;
-    locale?: Locale;
-    showStreamsCloudWatermark?: boolean;
-    initialMediaIndex?: number;
-};
 export type ContentPlayerMappers<T> = {
-    postModelFromCurrentItem: (item: T) => PostViewerModel | null;
+    postModelFromCurrentItem: (item: T) => IPostModel | null;
 };
 export type ContentPlayerCallbacks = {
     close?: () => void;

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

@@ -1,24 +1,20 @@
+import { PostModel } from '../posts/model';
+import { ContentPlayerSettings } from './content-player-settings';
 import { ContentPlayerUIManager } from './ui-manager.svelte';
 export class ContentPlayerConfig {
     playerBuffer = $state.raw(null);
-    locale;
-    disableBackground;
-    enableCloseButton;
-    showStreamsCloudWatermark;
+    settings;
     callbacks;
     playerSliderCallbacks;
     socialInteractionsHandler;
     uiManager = new ContentPlayerUIManager();
     _mediaCenterData = $state.raw(null);
-    _initialMediaIndex = 0;
     _mappers;
+    mappedPostsCache = new Map();
     constructor(init) {
         const { playerBuffer, mappers, socialInteractionsHandler, mediaCenterData, settings, callbacks, playerSliderCallbacks } = init;
         this.playerBuffer = playerBuffer;
-        this.locale = settings?.locale ?? 'en';
-        this.disableBackground = settings?.disableBackground ?? false;
-        this.showStreamsCloudWatermark = settings?.showStreamsCloudWatermark ?? false;
-        this.enableCloseButton = !settings?.hideCloseButton;
+        this.settings = settings || new ContentPlayerSettings();
         this._mediaCenterData = mediaCenterData || null;
         this.callbacks = callbacks || null;
         this.playerSliderCallbacks = playerSliderCallbacks;
@@ -37,13 +33,18 @@ export class ContentPlayerConfig {
     get fadeContent() {
         return this._mediaCenterData?.overlayIsActive || false;
     }
-    get initialMediaIndex() {
-        const index = this._initialMediaIndex;
-        this._initialMediaIndex = 0;
-        return index;
-    }
     itemAsPostViewerModel = (item) => {
-        return this._mappers.postModelFromCurrentItem(item);
+        if (this.mappedPostsCache.has(item.id)) {
+            return this.mappedPostsCache.get(item.id) || null;
+        }
+        const post = this._mappers.postModelFromCurrentItem(item);
+        if (!post) {
+            this.mappedPostsCache.set(item.id, null);
+            return null;
+        }
+        const postModel = new PostModel(post);
+        this.mappedPostsCache.set(item.id, postModel);
+        return postModel;
     };
     setBackgroundImageUrl = (imageUrl) => {
         this.uiManager.backgroundImageUrl = imageUrl;

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

@@ -0,0 +1,14 @@
+import type { Locale } from '../core/locale';
+export declare class ContentPlayerSettings {
+    disableBackground: boolean;
+    enableCloseButton: boolean;
+    locale: Locale;
+    showStreamsCloudWatermark: boolean;
+    constructor(init?: IContentPlayerSettingsInitializer);
+}
+export interface IContentPlayerSettingsInitializer {
+    disableBackground?: boolean;
+    hideCloseButton?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+}

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

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

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

@@ -52,7 +52,9 @@ const variables = $derived.by(() => {
           on={{ attachmentsClicked: changeShowAttachments }} />
       {/if}
       {#if config.playerBuffer}
-        <div class="controls-and-attachments__navigation-buttons">
+        <div
+          class="controls-and-attachments__navigation-buttons"
+          class:controls-and-attachments__navigation-buttons--invisible={config.playerBuffer.loaded.length <= 1}>
           <PlayerButton
             icon={IconChevronUp}
             disabled={!config.playerBuffer.canLoadPrevious}
@@ -69,11 +71,11 @@ const variables = $derived.by(() => {
             <img src={config.playerLogo} class="controls-and-attachments__logo-img" alt="Player Logo" />
           </div>
         {/if}
-        {#if currentItemPostContainer && !attachmentsCollapsed && (currentItemPostContainer.products.length || currentItemPostContainer.ads.length)}
+        {#if currentItemPostContainer && !attachmentsCollapsed && currentItemPostContainer.attachments}
           <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
             <PostAttachments
-              container={currentItemPostContainer}
-              locale={config.locale}
+              model={currentItemPostContainer}
+              locale={config.settings.locale}
               on={{
                 productClick: (id) => config.callbacks?.productClick?.(id, currentItemPostContainer.id),
                 productImpression: (id) => config.callbacks?.productImpression?.(id, currentItemPostContainer.id),
@@ -186,4 +188,7 @@ const variables = $derived.by(() => {
   flex-direction: column;
   gap: 1rem;
   z-index: 1;
+}
+.controls-and-attachments__navigation-buttons--invisible {
+  visibility: hidden;
 }</style>

package/dist/content-player/header.svelte

@@ -78,7 +78,7 @@ const buttonVariables = $derived.by(() => {
   </div>
 {/if}
 
-{#if config.enableCloseButton && config.callbacks?.close}
+{#if config.settings.enableCloseButton && config.callbacks?.close}
   <div class="close-button" style={buttonVariables}>
     <PlayerButton icon={IconDismiss} on={{ click: config.callbacks.close }} />
   </div>

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

@@ -1,2 +1,2 @@
 export { default as ContentPlayer } from './cmp.content-player.svelte';
-export { ContentPlayerConfig, type ContentPlayerSettings } from './content-player-config.svelte';
+export { ContentPlayerConfig } from './content-player-config.svelte';

package/dist/core/analytics.profile-id.js

@@ -9,9 +9,35 @@ const PROFILE_ID_STORAGE_KEY = 'streamscloud_profile_id';
 export const getOrCreateProfileId = () => {
     const storedProfileId = localStorage.getItem(PROFILE_ID_STORAGE_KEY);
     if (!storedProfileId) {
-        const newProfileId = crypto.randomUUID();
+        const newProfileId = safeRandomUUID();
         localStorage.setItem(PROFILE_ID_STORAGE_KEY, newProfileId);
         return newProfileId;
     }
     return storedProfileId;
 };
+function safeRandomUUID() {
+    // 1) Native support
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+        try {
+            return crypto.randomUUID();
+        }
+        catch {
+            // continue to fallbacks
+        }
+    }
+    // 2) Use crypto.getRandomValues to build UUID v4
+    if (typeof crypto !== 'undefined' && typeof crypto.getRandomValues === 'function') {
+        const bytes = new Uint8Array(16);
+        crypto.getRandomValues(bytes);
+        // Per RFC 4122 v4
+        bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+        bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10
+        const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0'));
+        return [hex.slice(0, 4).join(''), hex.slice(4, 6).join(''), hex.slice(6, 8).join(''), hex.slice(8, 10).join(''), hex.slice(10, 16).join('')].join('-');
+    }
+    // 3) Non-crypto fallback (not suitable for security-sensitive IDs)
+    // Good enough for element keys or local-only IDs
+    const time = Date.now().toString(16);
+    const rnd = Math.random().toString(16).slice(2);
+    return `${time.slice(-8)}-${rnd.slice(0, 4)}-4${rnd.slice(4, 7)}-8${rnd.slice(7, 10)}-${rnd.slice(10, 22)}`;
+}

package/dist/core/utils/html-helper.d.ts

@@ -36,6 +36,7 @@ export declare class HtmlHelper {
      * DomHelper.insert(siblingElement, newContentField, false);
      */
     static insert(newElement: Element, siblingElement: Element, insertBefore?: boolean): void;
+    static sanitizeHtml(html: string): string;
     static sanitizeSvg(svg: string): string;
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
 }

package/dist/core/utils/html-helper.js

@@ -71,6 +71,9 @@ export class HtmlHelper {
             HtmlHelper.insertAfter(newElement, siblingElement);
         }
     }
+    static sanitizeHtml(html) {
+        return dp.sanitize(html);
+    }
     static sanitizeSvg(svg) {
         return dp.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true }, ADD_ATTR: ['dominant-baseline'] });
     }

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

@@ -7,7 +7,6 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var _a;
 import { horizontalWheelScroll } from '../../core/actions';
 import { Utils } from '../../core/utils';
 import { default as ShortVideosPlayerView } from '../../short-videos/short-videos-player/short-videos-player-view.svelte';
@@ -29,14 +28,9 @@ import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular
 import { fade } from 'svelte/transition';
 let { config, playerProps, locale = 'en' } = $props();
 const localization = $derived(new MediaCenterLocalization(locale));
-let initialMediaIndex = ((_a = playerProps.props.playerSettings) === null || _a === void 0 ? void 0 : _a.initialMediaIndex) || 0;
-const commonPlayerSettings = () => {
-    const mediaIndex = initialMediaIndex;
-    initialMediaIndex = 0; // reset after first use
-    return {
-        playerSettings: playerProps.props.playerSettings ? Object.assign(Object.assign({}, playerProps.props.playerSettings), { initialMediaIndex: mediaIndex }) : undefined,
-        on: playerProps.props.on
-    };
+const commonPlayerSettings = {
+    playerSettings: playerProps.props.playerSettings,
+    on: playerProps.props.on
 };
 const handler = new MediaCenterHandler(config);
 const discoverHandler = new DiscoverPanelHandler(config);
@@ -64,7 +58,7 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
             handler.selectedCategoryId = categoryId;
             computedPlayerProps = {
                 mode: 'short-videos',
-                props: Object.assign({ dataProvider: makeShortVideosProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings())
+                props: Object.assign({ dataProvider: makeShortVideosProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
             };
             discoverHandler.deactivate();
             break;
@@ -91,7 +85,7 @@ const activateSelectedShortVideoPlayer = (shortVideo) => {
     mediaCenterMode = 'short-videos';
     computedPlayerProps = {
         mode: 'short-videos',
-        props: Object.assign({ dataProvider: makeShortVideosProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings())
+        props: Object.assign({ dataProvider: makeShortVideosProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
     };
     handler.selectedCategoryId = null;
     discoverHandler.deactivate();
@@ -105,7 +99,7 @@ const activateSelectedStreamPlayer = (id) => {
     mediaCenterMode = 'stream';
     computedPlayerProps = {
         mode: 'stream',
-        props: Object.assign({ streamId: id, dataProvider: config.streamPlayer.streamPlayerDataProvider, analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings())
+        props: Object.assign({ streamId: id, dataProvider: config.streamPlayer.streamPlayerDataProvider, analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
     };
     handler.selectedCategoryId = null;
     discoverHandler.deactivate();
@@ -181,7 +175,12 @@ const onWidthAnchorMounted = (node) => {
           class="media-center-controls-panel__button"
           class:media-center-controls-panel__button--active={discoverHandler.activated}
           onclick={toggleDiscover}>
-          <Icon src={IconScreenSearch} />&nbsp;{localization.discoverButton}
+          <span class="media-center-controls-panel__button-icon">
+            <Icon src={IconScreenSearch} />
+          </span>
+          <span class="media-center-controls-panel__button-value">
+            {localization.discoverButton}
+          </span>
         </button>
         <div class="media-center-controls-panel__scroll-area" use:onScrollMounted use:horizontalWheelScroll onscroll={handleScrollingAreaScroll}>
           {#each handler.categories as category (category.id)}
@@ -194,7 +193,11 @@ const onWidthAnchorMounted = (node) => {
                 handler.controlsPanelSelectedCategory?.childName) ||
                 undefined}
               title={category.name}
-              onclick={() => selectCategory(category.id)}>{category.name}</button>
+              onclick={() => selectCategory(category.id)}>
+              <span class="media-center-controls-panel__button-value">
+                {category.name}
+              </span>
+            </button>
           {/each}
         </div>
       </div>
@@ -310,21 +313,14 @@ const onWidthAnchorMounted = (node) => {
 .media-center-controls-panel__button {
   position: relative;
   pointer-events: auto;
-  font-size: 0.875rem;
-  line-height: 1.0625rem;
   padding: 0.5rem 1.5rem;
-  white-space: nowrap;
-  width: auto;
-  max-width: none;
-  min-width: 0;
-  scroll-snap-align: start;
-  flex: 0 0 auto;
   display: flex;
   gap: 0.375rem;
   justify-content: center;
   align-items: center;
-  --icon--color: #ffffff;
-  --icon--size: 1.0625rem;
+  max-width: 12.5rem;
+  width: auto;
+  min-width: 0;
   border-radius: 0.875rem;
   background-color: rgba(0, 0, 0, 0.6);
   color: #f2f2f2;
@@ -361,6 +357,18 @@ const onWidthAnchorMounted = (node) => {
   color: #ffffff;
   pointer-events: none;
 }
+.media-center-controls-panel__button-icon {
+  --icon--color: #ffffff;
+  --icon--size: 1.0625rem;
+}
+.media-center-controls-panel__button-value {
+  font-size: 0.875rem;
+  line-height: 1.0625rem;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
 
 .media-center-overlay {
   position: absolute;

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

@@ -1,4 +1,4 @@
-<script lang="ts">import { getPostCoverImage } from '../../posts/post-viewer';
+<script lang="ts">import { getPostCoverImage } from '../../posts/model';
 import { ProductCard } from '../../products/product-card';
 import { ShortVideoCard } from '../../short-videos/short-video-card';
 import { StreamCard } from '../../streams/stream-card';

package/dist/posts/attachments/cmp.attachments.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">import { AdCard } from '../../ads/ad-card';
+import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
-let { container, locale = 'en', on } = $props();
+let { model, locale = 'en', on } = $props();
 </script>
 
-{#if container.ads.length || container.products.length}
+{#if model.attachments}
   <div class="post-attachments">
-    {#if container.ads.length}
-      {#each container.ads as ad (ad.id)}
+    {#if model.attachments.ads.length}
+      {#each model.attachments.ads as ad (ad.id)}
         <AdCard
           ad={ad}
           on={{
@@ -16,8 +17,8 @@ let { container, locale = 'en', on } = $props();
       {/each}
     {/if}
 
-    {#if container.products.length}
-      {#each container.products as product (product.id)}
+    {#if model.attachments.products.length}
+      {#each model.attachments.products as product (product.id)}
         <ProductCard
           product={product}
           locale={locale}

package/dist/posts/attachments/cmp.attachments.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Locale } from '../../core/locale';
-import type { PostAttachmentsContainer } from '../model';
+import { PostModel } from '../model';
 type Props = {
-    container: PostAttachmentsContainer;
+    model: PostModel;
     locale?: Locale;
     on?: {
         productClick?: (productId: string) => void;

package/dist/posts/controls/cmp.controls.svelte

@@ -25,7 +25,7 @@ let isLikedStore = $state.raw({
 });
 const actions = $derived.by(() => {
     const result = [];
-    if (model.products.length || model.ads.length) {
+    if (model.attachments) {
         result.push({ icon: IconShoppingBag, callback: onAttachmentsClicked });
     }
     if (showSocialInteractions) {
@@ -36,7 +36,7 @@ const actions = $derived.by(() => {
         });
         result.push({ icon: IconShare, callback: onShareClicked });
     }
-    if (model.media && model.media.isMutable) {
+    if (model.media && !model.media.currentItem.isImage) {
         result.push({ icon: MediaVolumeManager.isMuted ? IconSpeakerMute : IconSpeaker2, callback: onMuteClicked });
     }
     return result;

package/dist/posts/controls/cmp.controls.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { PostContainer } from '../model';
+import type { PostModel } from '../model';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 type Props = {
-    model: PostContainer;
+    model: PostModel;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     on?: {
         attachmentsClicked?: () => void;

package/dist/posts/index.d.ts

@@ -1 +1,2 @@
 export type { IPostSocialInteractionsHandler } from './social-interactions';
+export type { IPostModel, IPostProductCardModel, IPostHeadingModel, IPostAdCardModel, IPostMediaItemModel } from './model/types';

package/dist/posts/model/index.d.ts

@@ -1 +1,3 @@
-export type { PostContainer, PostAttachmentsContainer } from './types';
+export type { IPostModel, IPostProductCardModel, IPostHeadingModel, IPostAdCardModel, IPostMediaItemModel, PostModelMediaFit } from './types';
+export { PostModel } from './post-model';
+export { getPostCoverImage } from './utils';

package/dist/posts/model/index.js

@@ -1 +1,2 @@
-export {};
+export { PostModel } from './post-model';
+export { getPostCoverImage } from './utils';

package/dist/posts/model/post-media-model.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { IPostMediaItemModel, PostModelMediaFit } from './types';
+export declare class PostViewerMediaModel {
+    readonly currentItem: {
+        isImage: false;
+        url: string;
+        thumbnailUrl: string;
+    } | {
+        isImage: boolean;
+        url: string;
+    };
+    currentIndex: number;
+    readonly isGallery: boolean;
+    items: IPostMediaItemModel[];
+    mediaFit: PostModelMediaFit;
+    constructor(init: {
+        media: IPostMediaItemModel[];
+        mediaFit: PostModelMediaFit;
+        mediaIndex?: number;
+    });
+}