@streamscloud/embeddable 6.4.2 → 6.5.0-1758183492920

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { Video } from '../../ui/video';
-import { default as AttachmentsInline } from './cmp.attachments-inline.svelte';
+import { default as AttachmentsHorizontal } from './cmp.attachments-horizontal.svelte';
 import { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
@@ -13,41 +13,37 @@ $effect(() => {
     uiManager.updateCanShowAttachments(showAttachments);
     uiManager.updateCanShowControls(showControls);
 });
+const trackControlsPanelSize = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.contentRect.width;
+        uiManager.setControlsPanelWidth(width);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+        }
+    };
+};
 </script>
 
 <div class="short-video-viewer" style={uiManager.globalCssVariables}>
-  <div class="short-video-viewer__media">
-    {#if !model.media.isImage}
-      <Video
-        src={model.media.url}
-        poster={model.media.thumbnailUrl}
-        controls={false}
-        autoplay={autoplay}
-        loop={true}
-        id={model.id}
-        hideSpeaker={true}
-        on={{
-          progress: on?.progress
-        }} />
-    {:else}
-      <Image src={model.media.url} />
-    {/if}
-  </div>
-
-  <div class="short-video-viewer__actions-panel" class:short-video-viewer__actions-panel--inside-frame={true}>
-    {#if uiManager.showAttachments}
-      <AttachmentsInline
-        model={model}
-        on={{
-          productClick: on?.productClick,
-          productImpression: on?.productImpression
-        }} />
-    {/if}
-    {#if uiManager.showControls}
-      <ShortVideoControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
-    {/if}
-  </div>
-  <div class="short-video-viewer__description">
+  {#if !model.media.isImage}
+    <Video
+      src={model.media.url}
+      poster={model.media.thumbnailUrl}
+      controls={false}
+      autoplay={autoplay}
+      loop={true}
+      id={model.id}
+      hideSpeaker={true}
+      on={{
+        progress: on?.progress
+      }} />
+  {:else}
+    <Image src={model.media.url} />
+  {/if}
+  <div class="short-video-viewer__information">
     {#if model.heading}
       <div class="short-video-viewer__heading">
         <ShortVideoHeading model={model.heading} localization={localization} />
@@ -58,6 +54,22 @@ $effect(() => {
         <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
       {/if}
     </div>
+    {#if uiManager.showAttachments}
+      <div class="short-video-viewer__attachments">
+        <AttachmentsHorizontal
+          model={model}
+          on={{
+            productClick: on?.productClick,
+            productImpression: on?.productImpression
+          }} />
+      </div>
+    {/if}
+  </div>
+
+  <div class="short-video-viewer__controls-panel" use:trackControlsPanelSize>
+    {#if uiManager.showControls}
+      <ShortVideoControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
+    {/if}
   </div>
 </div>
 
@@ -77,64 +89,45 @@ $effect(() => {
   width: 100%;
   min-width: 100%;
   max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  position: relative;
-}
-.short-video-viewer__media {
   height: 100%;
   min-height: 100%;
   max-height: 100%;
   border-radius: 0.375rem;
   overflow: hidden;
+  position: relative;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 576px) {
-  .short-video-viewer__media {
+  .short-video-viewer {
     border-radius: 0;
     position: relative;
   }
 }
-.short-video-viewer__actions-panel {
+.short-video-viewer__controls-panel {
   position: absolute;
-  left: calc(100% + 0.625rem);
-  top: 0.9375rem;
-  bottom: 0.9375rem;
+  left: auto;
+  right: 0.625rem;
+  top: 5rem;
+  bottom: 6.25rem;
   gap: 2.5rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-video-viewer__actions-panel {
-    left: auto;
-    right: 0.625rem;
-    top: 5rem;
-    bottom: 5rem;
-    align-items: flex-end;
-  }
-}
-.short-video-viewer__actions-panel--inside-frame {
-  left: auto;
-  right: 0.625rem;
-  top: 5rem;
-  bottom: 5rem;
   align-items: flex-end;
 }
-.short-video-viewer__description {
+.short-video-viewer__information {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  padding: 1.875rem 1.25rem;
-  padding-right: calc(1.25rem + var(--_short-video-viewer--button--size));
+  padding: 1.875rem 0;
   background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
-  border-radius: 0rem 0.375rem 0.375rem;
+  --_short-video-viewer--information--padding-horizontal: 1.25rem;
+  --_short-video-viewer--information--padding-right: calc(1.875rem + var(--_short-video-viewer--controls-panel--width));
 }
 .short-video-viewer__heading {
-  --short-video-heading--padding: 0 0 0.875rem 0;
+  --short-video-heading--padding: 0 var(--_short-video-viewer--information--padding-right) 0.875rem
+    var(--_short-video-viewer--information--padding-horizontal);
   --short-video-heading--text--color: #ffffff;
   --short-video-heading--meta--color: #ffffff;
 }
@@ -143,4 +136,9 @@ $effect(() => {
   font-size: 1.125rem;
   font-weight: 400;
   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);
+  padding: 0 var(--_short-video-viewer--information--padding-right) 0 var(--_short-video-viewer--information--padding-horizontal);
+}
+.short-video-viewer__attachments {
+  margin-top: 1.25rem;
+  --short-video-attachments-horizontal--padding-horizontal: var(--_short-video-viewer--information--padding-horizontal);
 }</style>

package/dist/short-videos/short-video-viewer/index.d.ts

@@ -1,7 +1,6 @@
 export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
 export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
-export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export type { ShortVideoViewerModel, IPostSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
 export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';

package/dist/short-videos/short-video-viewer/index.js

@@ -1,5 +1,4 @@
 export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
 export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
-export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { mapToShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/types.d.ts

@@ -33,7 +33,7 @@ type PromiseLike<T> = T | Promise<T>;
 export type ShortVideoProductCardModel = {
     id: string;
     title: string;
-    shortDescription?: string | null;
+    shortDescription: string | null;
     link: string | null;
     image: string | null;
     brandName: string | null;

package/dist/short-videos/short-video-viewer/ui-manager.svelte.d.ts

@@ -2,11 +2,12 @@ export declare class ShortVideoViewerUiManager {
     readonly globalCssVariables: string;
     readonly showAttachments: boolean;
     readonly showControls: boolean;
-    private readonly buttonSize;
+    private controlsPanelWidth;
     private canShowControls;
     private canShowAttachments;
     private enableAttachments;
     updateCanShowAttachments: (value: boolean) => void;
     updateCanShowControls: (value: boolean) => void;
     toggleEnableAttachments: () => void;
+    setControlsPanelWidth(value: number): void;
 }

package/dist/short-videos/short-video-viewer/ui-manager.svelte.js

@@ -1,6 +1,6 @@
 export class ShortVideoViewerUiManager {
     globalCssVariables = $derived.by(() => {
-        const values = [`--_short-video-viewer--button--size: ${this.buttonSize}px`];
+        const values = [`--_short-video-viewer--controls-panel--width: ${this.controlsPanelWidth}px`];
         return values.join(';');
     });
     showAttachments = $derived.by(() => {
@@ -9,7 +9,7 @@ export class ShortVideoViewerUiManager {
     showControls = $derived.by(() => {
         return this.canShowControls;
     });
-    buttonSize = 40;
+    controlsPanelWidth = $state(0);
     // is provided from the calling side
     canShowControls = $state(false);
     // is provided from the calling side
@@ -25,4 +25,7 @@ export class ShortVideoViewerUiManager {
     toggleEnableAttachments = () => {
         this.enableAttachments = !this.enableAttachments;
     };
+    setControlsPanelWidth(value) {
+        this.controlsPanelWidth = value;
+    }
 }

package/dist/short-videos/short-videos-player/controls.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { slideHorizontally } from '../../core/transitions';
-import { ShortVideoControls, ShortVideoViewerAttachments, ShortVideoViewerAttachmentsInline } from '../short-video-viewer';
+import { ShortVideoControls, ShortVideoViewerAttachments } from '../short-video-viewer';
 import { Icon } from '../../ui/icon';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
@@ -10,50 +10,74 @@ const shortVideo = $derived(buffer.current);
 const changeShowAttachments = () => {
     uiManager.showAttachments = !uiManager.showAttachments;
 };
+const trackAttachmentsPanelSize = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.contentRect.width;
+        uiManager.setAttachmentsPanelWidth(width);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+        }
+    };
+};
+const trackNavigationButtonsSize = (node) => {
+    const resizeObserver = new ResizeObserver(([entry]) => {
+        const width = entry.contentRect.width;
+        uiManager.setNavigationButtonsBlockWidth(width);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.unobserve(node);
+        }
+    };
+};
 </script>
 
-{#if uiManager.viewInitialized && !uiManager.showShortVideoOverlay}
+{#if uiManager.viewInitialized && (!uiManager.showShortVideoOverlayAttachments || !uiManager.showShortVideoOverlayControls)}
   <div class="short-videos-player-controls" class:short-videos-player-controls--with-logo={!!playerLogo}>
-    <div class="short-videos-player-controls__left">
-      {#if shortVideo}
-        <div class="short-videos-player-controls__short-video-hub">
-          {#if uiManager.showAttachments}
-            <div class="short-videos-player-controls__short-video-attachments-inline">
-              <ShortVideoViewerAttachmentsInline model={shortVideo} />
-            </div>
-          {/if}
-          <ShortVideoControls model={shortVideo} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: changeShowAttachments }} />
+    {#if !uiManager.showShortVideoOverlayControls}
+      <div class="short-videos-player-controls__left">
+        {#if shortVideo}
+          <div class="short-videos-player-controls__short-video-controls">
+            <ShortVideoControls model={shortVideo} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: changeShowAttachments }} />
+          </div>
+        {/if}
+        <div class="short-videos-player-controls__navigation-buttons" use:trackNavigationButtonsSize>
+          <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
+            <span class="navigation-button__icon">
+              <Icon src={IconChevronUp} />
+            </span>
+          </button>
+          <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
+            <span class="navigation-button__icon">
+              <Icon src={IconChevronDown} />
+            </span>
+          </button>
         </div>
-      {/if}
-      <div class="short-videos-player-controls__navigation-buttons">
-        <button type="button" class="navigation-button" disabled={!buffer.canLoadPrevious} onclick={buffer.loadPrevious}>
-          <span class="navigation-button__icon">
-            <Icon src={IconChevronUp} />
-          </span>
-        </button>
-        <button type="button" class="navigation-button" disabled={!buffer.canLoadNext} onclick={buffer.loadNext}>
-          <span class="navigation-button__icon">
-            <Icon src={IconChevronDown} />
-          </span>
-        </button>
       </div>
-    </div>
-    <div class="short-videos-player-controls__right">
-      {#if playerLogo}
-        <div class="short-videos-player-controls__player-logo">
-          <img src={playerLogo} class="short-videos-player-controls__logo-img" alt="Player Logo" />
-        </div>
-      {/if}
-      {#if shortVideo?.hasAttachments && uiManager.showAttachments}
-        <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
-          <ShortVideoViewerAttachments
-            shortVideo={shortVideo}
-            localization={localization.shortVideoAttachmentsLocalization}
-            on={{
-              productClick: on.productClick,
-              productImpression: on.productImpression
-            }} />
-        </div>
+    {/if}
+
+    <div class="short-videos-player-controls__right" use:trackAttachmentsPanelSize>
+      {#if !uiManager.showShortVideoOverlayAttachments}
+        {#if playerLogo}
+          <div class="short-videos-player-controls__player-logo">
+            <img src={playerLogo} class="short-videos-player-controls__logo-img" alt="Player Logo" />
+          </div>
+        {/if}
+        {#if shortVideo?.hasAttachments && uiManager.showAttachments}
+          <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
+            <ShortVideoViewerAttachments
+              shortVideo={shortVideo}
+              localization={localization.shortVideoAttachmentsLocalization}
+              on={{
+                productClick: on.productClick,
+                productImpression: on.productImpression
+              }} />
+          </div>
+        {/if}
       {/if}
     </div>
   </div>
@@ -115,8 +139,7 @@ const changeShowAttachments = () => {
 .short-videos-player-controls__right::-webkit-scrollbar {
   width: 3px;
   height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
+  background: transparent;
 }
 .short-videos-player-controls__right::-webkit-scrollbar-thumb {
   background: transparent;
@@ -129,12 +152,11 @@ const changeShowAttachments = () => {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
 }
 .short-videos-player-controls__right:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);
 }
-.short-videos-player-controls__short-video-hub {
+.short-videos-player-controls__short-video-controls {
   gap: 2.5rem;
   display: flex;
   flex: 1;
@@ -142,50 +164,29 @@ const changeShowAttachments = () => {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
-  --short-video-controls--icon--size: var(--short-videos-player--icon--size);
+  --short-video-controls--icon--size: 1.75rem;
 }
 .short-videos-player-controls__player-logo {
-  width: 11rem;
-  max-width: 11rem;
+  width: var(--short-videos-player--controls--attachments--max-width);
+  max-width: var(--short-videos-player--controls--attachments--max-width);
   height: var(--short-videos-player--media-center-header--height);
   min-height: var(--short-videos-player--media-center-header--height);
   max-height: var(--short-videos-player--media-center-header--height);
   display: flex;
   justify-content: center;
   align-items: center;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < calc(11rem + 3.75rem)) {
-  .short-videos-player-controls__player-logo {
-    display: none;
-  }
 }
 .short-videos-player-controls__logo-img {
   width: 6.25rem;
   min-width: 6.25rem;
   max-width: 6.25rem;
 }
-.short-videos-player-controls__short-video-attachments-inline {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < calc(11rem + 3.75rem)) {
-  .short-videos-player-controls__short-video-attachments-inline {
-    display: contents;
-  }
-}
 .short-videos-player-controls__short-video-attachments {
   flex: 1;
-  width: 11rem;
-  max-width: 11rem;
+  width: var(--short-videos-player--controls--attachments--max-width);
+  max-width: var(--short-videos-player--controls--attachments--max-width);
   opacity: var(--short-videos-player--elements-opacity);
   transition: opacity 0.3s ease-in-out;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < calc(11rem + 3.75rem)) {
-  .short-videos-player-controls__short-video-attachments {
-    display: none;
-  }
 }
 .short-videos-player-controls__navigation-buttons {
   display: flex;
@@ -196,18 +197,18 @@ const changeShowAttachments = () => {
 }
 
 .close-button {
-  width: var(--short-videos-player--button--size);
-  min-width: var(--short-videos-player--button--size);
-  max-width: var(--short-videos-player--button--size);
-  height: var(--short-videos-player--button--size);
-  min-height: var(--short-videos-player--button--size);
-  max-height: var(--short-videos-player--button--size);
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
   background-color: rgba(0, 0, 0, 0.6);
   border: 1px solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
-  --icon--size: var(--short-videos-player--icon--size);
+  --icon--size: 1.75rem;
   position: absolute;
   top: 0.9375rem;
   left: 0.625rem;
@@ -231,18 +232,18 @@ const changeShowAttachments = () => {
 
 .navigation-button {
   --_icon-scale: 1;
-  width: var(--short-videos-player--button--size);
-  min-width: var(--short-videos-player--button--size);
-  max-width: var(--short-videos-player--button--size);
-  height: var(--short-videos-player--button--size);
-  min-height: var(--short-videos-player--button--size);
-  max-height: var(--short-videos-player--button--size);
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
   background-color: rgba(0, 0, 0, 0.6);
   border: 1px solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
-  --icon--size: var(--short-videos-player--icon--size);
+  --icon--size: 1.75rem;
 }
 .navigation-button:disabled {
   opacity: 0.5;

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -135,8 +135,8 @@ const onShortVideoProductImpression = (productId, videoId) => {
                 model={item}
                 socialInteractionsHandler={socialInteractionsHandler}
                 autoplay="on-appearance"
-                showAttachments={uiManager.showShortVideoOverlay}
-                showControls={uiManager.showShortVideoOverlay}
+                showAttachments={uiManager.showShortVideoOverlayAttachments}
+                showControls={uiManager.showShortVideoOverlayControls}
                 localization={localization.shortVideoViewerLocalization}
                 on={{
                   productClick: (productId) => onShortVideoProductClick(productId, item.id),

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -3,10 +3,15 @@ export declare class ShortVideosPlayerUiManager {
     globalCssVariables: string;
     isMobileView: boolean;
     viewInitialized: boolean;
-    showShortVideoOverlay: boolean;
+    showShortVideoOverlayAttachments: boolean;
+    showShortVideoOverlayControls: boolean;
     private _viewTotalWidth;
     private _mainViewColumnWidth;
     private _mediaCenterHeaderHeight;
+    private _controlsAttachmentsPanelWidth;
+    private _controlsNavigationButtonsWidth;
+    private _controlsAvailableSpace;
+    private _controlsContentWidth;
     get viewTotalWidth(): number;
     get mainViewColumnWidth(): number;
     updateDimensions: (dimensions: {
@@ -14,4 +19,6 @@ export declare class ShortVideosPlayerUiManager {
         mainViewColumnWidth: number;
     }) => void;
     updateMediaCenterHeaderHeight: (height: number) => void;
+    setAttachmentsPanelWidth: (width: number) => void;
+    setNavigationButtonsBlockWidth: (width: number) => void;
 }

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,16 +1,14 @@
 const CONTROLS_PADDING_HORIZONTAL = 28;
 const CONTROLS_PADDING_VERTICAL = 28;
+const CONTROLS_ATTACHMENTS_MAX_WIDTH = 176;
 const PLAYER_PADDING_VERTICAL = 10;
-const BUTTON_SIZE = 48;
-const ICON_SIZE = 28;
 export class ShortVideosPlayerUiManager {
     showAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--short-videos-player--button--size: ${BUTTON_SIZE}px`,
-            `--short-videos-player--controls--available-space: ${(this._viewTotalWidth - this._mainViewColumnWidth) / 2}px`,
+            `--short-videos-player--controls--attachments--max-width: ${CONTROLS_ATTACHMENTS_MAX_WIDTH}px`,
+            `--short-videos-player--controls--available-space: ${this._controlsAvailableSpace}px`,
             `--short-videos-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
-            `--short-videos-player--icon--size: ${ICON_SIZE}px`,
             `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight || 72}px`,
             `--short-videos-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
         ];
@@ -18,10 +16,15 @@ export class ShortVideosPlayerUiManager {
     });
     isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
     viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
-    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this._viewTotalWidth - this._mainViewColumnWidth) / 2 <= 85);
+    showShortVideoOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
+    showShortVideoOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavigationButtonsWidth);
     _viewTotalWidth = $state(0);
     _mainViewColumnWidth = $state(0);
     _mediaCenterHeaderHeight = $state(0);
+    _controlsAttachmentsPanelWidth = $state(0);
+    _controlsNavigationButtonsWidth = $state(0);
+    _controlsAvailableSpace = $derived.by(() => (this._viewTotalWidth - this._mainViewColumnWidth) / 2);
+    _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
     get viewTotalWidth() {
         return this._viewTotalWidth;
     }
@@ -35,4 +38,10 @@ export class ShortVideosPlayerUiManager {
     updateMediaCenterHeaderHeight = (height) => {
         this._mediaCenterHeaderHeight = height;
     };
+    setAttachmentsPanelWidth = (width) => {
+        this._controlsAttachmentsPanelWidth = width;
+    };
+    setNavigationButtonsBlockWidth = (width) => {
+        this._controlsNavigationButtonsWidth = width;
+    };
 }

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

@@ -22,21 +22,23 @@ const lineHeight = 1.2;
 const elementHeight = $derived(adjustedHeight);
 const priceHeight = $derived(model.stock ? elementHeight * 0.68 : elementHeight);
 const adjustableHeight = $derived(!!(on === null || on === void 0 ? void 0 : on.heightAdjusted));
-const includeCurrency = $derived(model.includeCurrency || false);
+const priceOptions = $derived({
+    currencyMode: model.includeCurrency ? 'symbol' : 'none'
+});
 const currentPrice = $derived.by(() => {
     if (data.salePrice) {
-        return toPriceRepresentation({ amount: data.salePrice, currency: data.currency, includeCurrency });
+        return toPriceRepresentation({ amount: data.salePrice, currency: data.currency, options: priceOptions });
     }
-    return toPriceRepresentation({ amount: data.price, currency: data.currency, includeCurrency });
+    return toPriceRepresentation({ amount: data.price, currency: data.currency, options: priceOptions });
 });
 const saveValue = $derived.by(() => {
     if (data.salePrice) {
-        return toPriceRepresentation({ amount: data.price - data.salePrice, currency: data.currency, includeCurrency });
+        return toPriceRepresentation({ amount: data.price - data.salePrice, currency: data.currency, options: priceOptions });
     }
     return 0;
 });
 const beforeValue = $derived.by(() => {
-    return toPriceRepresentation({ amount: data.price, currency: data.currency, includeCurrency });
+    return toPriceRepresentation({ amount: data.price, currency: data.currency, options: priceOptions });
 });
 const elementContainerStyles = $derived.by(() => {
     var _a, _b;

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -36,8 +36,8 @@ export type StreamLayoutShortVideoProductModel = {
     price: number;
     currency: Currency;
     salePrice: number | null;
-    brand?: {
-        name?: string | null;
-    };
-    shortDescription?: string | null;
+    brand: {
+        name: string;
+    } | null;
+    shortDescription: string | null;
 };