@streamscloud/embeddable 6.4.2 → 6.5.0-1758183492920

package/dist/streams/stream-player/controls.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">var _a, _b;
 import { slideHorizontally } from '../../core/transitions';
-import { ShortVideoViewerAttachmentsInline, ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
+import { ShortVideoViewerAttachments } from '../../short-videos/short-video-viewer';
 import { ShortVideoControls } from '../../short-videos/short-video-viewer/index.js';
 import { StreamElementType } from '../layout/enums';
 import { mapToShortVideoViewerModel } from '../layout/models';
@@ -9,7 +9,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { buffer, uiManager, postSocialInteractionsHandler, localization, on } = $props();
+let { buffer, uiManager, postSocialInteractionsHandler, localization, on, playerLogo } = $props();
 const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
 const singleWebViewPage = $derived.by(() => {
     var _a;
@@ -44,48 +44,79 @@ const singleWebViewPage = $derived.by(() => {
 const changeShowShortVideoAttachments = () => {
     uiManager.showShortVideoAttachments = !uiManager.showShortVideoAttachments;
 };
+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}
-  <div class="stream-player-controls">
-    <div class="stream-player-controls__left">
-      {#if shortVideo}
-        <div class="stream-player-controls__short-video-hub">
-          {#if uiManager.showShortVideoAttachments}
-            <div class="stream-player-controls__short-video-attachments-inline">
-              <ShortVideoViewerAttachmentsInline model={shortVideo} />
-            </div>
-          {/if}
-          <ShortVideoControls
-            model={shortVideo}
-            socialInteractionsHandler={postSocialInteractionsHandler}
-            on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
+{#if uiManager.viewInitialized && (!uiManager.showShortVideoOverlayAttachments || !uiManager.showShortVideoOverlayControls)}
+  <div class="stream-player-controls" class:stream-player-controls--with-logo={!!playerLogo}>
+    {#if !uiManager.showShortVideoOverlayControls}
+      <div class="stream-player-controls__left">
+        {#if shortVideo}
+          <div class="stream-player-controls__short-video-controls">
+            <ShortVideoControls
+              model={shortVideo}
+              socialInteractionsHandler={postSocialInteractionsHandler}
+              on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
+          </div>
+        {/if}
+        <div
+          class="stream-player-controls__navigation-buttons"
+          class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}
+          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="stream-player-controls__navigation-buttons" class:stream-player-controls__navigation-buttons--single-web-view-page={singleWebViewPage}>
-        <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="stream-player-controls__right">
-      {#if shortVideo && uiManager.showShortVideoAttachments}
-        <div class="stream-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="stream-player-controls__right" use:trackAttachmentsPanelSize>
+      {#if !uiManager.showShortVideoOverlayAttachments}
+        {#if playerLogo}
+          <div class="stream-player-controls__player-logo">
+            <img src={playerLogo} class="stream-player-controls__logo-img" alt="Player Logo" />
+          </div>
+        {/if}
+        {#if shortVideo?.hasAttachments && uiManager.showShortVideoAttachments}
+          <div class="stream-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>
@@ -111,18 +142,24 @@ const changeShowShortVideoAttachments = () => {
   top: 0;
   right: 0;
   height: 100%;
-  width: var(--stream-player--sidebar--available-space);
+  width: var(--stream-player--controls--available-space);
   display: flex;
   justify-content: space-between;
-  padding: var(--stream-player--controls--offset-vertical) var(--stream-player--controls--offset-horizontal);
+  padding: var(--stream-player--controls--padding);
   container-type: inline-size;
 }
+.stream-player-controls--with-logo {
+  padding-top: 0;
+}
 .stream-player-controls__left {
   display: flex;
   flex-direction: column;
   gap: 2.3125rem;
   justify-content: flex-end;
   align-items: center;
+  padding-top: var(--stream-player--media-center-header--height);
+  opacity: var(--stream-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .stream-player-controls__right {
   flex: 1;
@@ -130,63 +167,63 @@ const changeShowShortVideoAttachments = () => {
   justify-content: space-between;
   align-items: flex-end;
   flex-direction: column;
-  scrollbar-gutter: stable;
-}
-.stream-player-controls__short-video-hub {
-  gap: 2.5rem;
-  display: flex;
-  flex: 1;
-  min-height: 0;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-end;
-  --short-video-controls--icon--size: var(--stream-player--icon--size);
-}
-.stream-player-controls__short-video-attachments-inline {
-  display: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < calc(11rem + 3.75rem)) {
-  .stream-player-controls__short-video-attachments-inline {
-    display: contents;
-  }
-}
-.stream-player-controls__short-video-attachments {
-  flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-color: transparent transparent;
   scrollbar-width: thin;
-  width: 11rem;
-  max-width: 11rem;
-  /* Set 'container-type: inline-size;' to reference container*/
+  scrollbar-gutter: stable;
 }
-.stream-player-controls__short-video-attachments::-webkit-scrollbar {
+.stream-player-controls__right::-webkit-scrollbar {
   width: 3px;
   height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
+  background: transparent;
 }
-.stream-player-controls__short-video-attachments::-webkit-scrollbar-thumb {
+.stream-player-controls__right::-webkit-scrollbar-thumb {
   background: transparent;
 }
-.stream-player-controls__short-video-attachments:hover {
+.stream-player-controls__right:hover {
   scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
   scrollbar-width: thin;
 }
-.stream-player-controls__short-video-attachments:hover::-webkit-scrollbar {
+.stream-player-controls__right:hover::-webkit-scrollbar {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
 }
-.stream-player-controls__short-video-attachments:hover::-webkit-scrollbar-thumb {
+.stream-player-controls__right:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);
 }
-@container (width < calc(11rem + 3.75rem)) {
-  .stream-player-controls__short-video-attachments {
-    display: none;
-  }
+.stream-player-controls__short-video-controls {
+  gap: 2.5rem;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  --short-video-controls--icon--size: 1.75rem;
+}
+.stream-player-controls__player-logo {
+  width: var(--stream-player--controls--attachments--max-width);
+  max-width: var(--stream-player--controls--attachments--max-width);
+  height: var(--stream-player--media-center-header--height);
+  min-height: var(--stream-player--media-center-header--height);
+  max-height: var(--stream-player--media-center-header--height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.stream-player-controls__logo-img {
+  width: 6.25rem;
+  min-width: 6.25rem;
+  max-width: 6.25rem;
+}
+.stream-player-controls__short-video-attachments {
+  flex: 1;
+  width: var(--stream-player--controls--attachments--max-width);
+  max-width: var(--stream-player--controls--attachments--max-width);
+  opacity: var(--stream-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .stream-player-controls__navigation-buttons {
   display: flex;
@@ -196,18 +233,18 @@ const changeShowShortVideoAttachments = () => {
 }
 
 .close-button {
-  width: var(--stream-player--button--size);
-  min-width: var(--stream-player--button--size);
-  max-width: var(--stream-player--button--size);
-  height: var(--stream-player--button--size);
-  min-height: var(--stream-player--button--size);
-  max-height: var(--stream-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: 0.0625rem solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
-  --icon--size: var(--stream-player--icon--size);
+  --icon--size: 1.75rem;
   position: absolute;
   top: 0.9375rem;
   left: calc(var(--stream-player--overview--width) + 0.625rem);
@@ -231,18 +268,18 @@ const changeShowShortVideoAttachments = () => {
 
 .navigation-button {
   --_icon-scale: 1;
-  width: var(--stream-player--button--size);
-  min-width: var(--stream-player--button--size);
-  max-width: var(--stream-player--button--size);
-  height: var(--stream-player--button--size);
-  min-height: var(--stream-player--button--size);
-  max-height: var(--stream-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: 0.0625rem solid #1c1c1c;
   border-radius: 50%;
   text-align: center;
   --icon--color: #ffffff;
-  --icon--size: var(--stream-player--icon--size);
+  --icon--size: 1.75rem;
 }
 .navigation-button:disabled {
   opacity: 0.5;

package/dist/streams/stream-player/controls.svelte.d.ts

@@ -7,6 +7,7 @@ type Props = {
     uiManager: StreamPlayerUiManager;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     localization: StreamPlayerLocalization;
+    playerLogo: string | null;
     on: {
         closePlayer: () => void;
         productClick?: (productId: string) => void;

package/dist/streams/stream-player/fade-mixins.scss

@@ -0,0 +1,12 @@
+@mixin default-opacity {
+  --stream-player--elements-opacity: 1;
+}
+
+@mixin fade-opacity {
+  --stream-player--elements-opacity: 0;
+}
+
+@mixin handle-fade {
+  opacity: var(--stream-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}

package/dist/streams/stream-player/stream-overview.svelte

@@ -178,8 +178,7 @@ const overviewAttached = (node) => {
 .stream-overview-pages::-webkit-scrollbar {
   width: 3px;
   height: 3px;
-  background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
+  background: transparent;
 }
 .stream-overview-pages::-webkit-scrollbar-thumb {
   background: transparent;
@@ -192,7 +191,6 @@ const overviewAttached = (node) => {
   width: 3px;
   height: 3px;
   background: var(--custom-scrollbar-background, transparent);
-  visibility: hidden;
 }
 .stream-overview-pages:hover::-webkit-scrollbar-thumb {
   background: var(--custom-scrollbar-color, #7d7d7d);

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

@@ -23,7 +23,7 @@ import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { onMount, untrack } from 'svelte';
-let { streamId, dataProvider, analyticsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on } = $props();
+let { streamId, dataProvider, analyticsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new StreamPlayerLocalization(localizationInit));
 let model = $state(null);
 let buffer = $state.raw(null);
@@ -139,6 +139,9 @@ const handleDimensionsChanged = (dimensions) => {
 const handleOverviewWidthChanged = (width) => {
     uiManager.updateOverviewWidth(width);
 };
+const onMediaCenterHeaderMounted = (data) => {
+    uiManager.updateMediaCenterHeaderHeight(data.height);
+};
 const contentMounted = (node) => {
     const markAsTouched = () => {
         everTouched = true;
@@ -201,7 +204,14 @@ const onProgress = (pageId, videoId, progress) => {
 <div
   class="stream-player-container"
   class:stream-player-container--background-loading={!background}
+  class:stream-player-container--faded={fadeContent}
   style={background ? `--background-image: url(${background})` : null}>
+  {#if categoriesSwitcher}
+    {@render categoriesSwitcher({
+      maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
+      onMounted: onMediaCenterHeaderMounted
+    })}
+  {/if}
   <div class="stream-player" style={uiManager.globalCssVariables}>
     {#if showStreamsCloudWatermark}
       <div class="stream-player__watermark">
@@ -240,8 +250,8 @@ const onProgress = (pageId, videoId, progress) => {
                   autoplay="on-appearance"
                   socialInteractionsHandler={postSocialInteractionsHandler}
                   localization={localization.shortVideoViewerLocalization}
-                  showAttachments={uiManager.showShortVideoOverlay}
-                  showControls={uiManager.showShortVideoOverlay} />
+                  showAttachments={uiManager.showShortVideoOverlayAttachments}
+                  showControls={uiManager.showShortVideoOverlayControls} />
               {/if}
             {/snippet}
           </PlayerSlider>
@@ -267,6 +277,7 @@ const onProgress = (pageId, videoId, progress) => {
         uiManager={uiManager}
         localization={localization}
         postSocialInteractionsHandler={postSocialInteractionsHandler}
+        playerLogo={playerLogo}
         on={{
           closePlayer: () => onPlayerClose(),
           productClick: (productId: String) => onProductCardClick(productId),
@@ -290,6 +301,7 @@ const onProgress = (pageId, videoId, progress) => {
   }
 }
 .stream-player-container {
+  --stream-player--elements-opacity: 1;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -309,6 +321,9 @@ const onProgress = (pageId, videoId, progress) => {
 .stream-player-container--background-loading {
   background-color: transparent;
 }
+.stream-player-container--faded {
+  --stream-player--elements-opacity: 0;
+}
 
 .stream-player {
   display: flex;
@@ -327,8 +342,12 @@ const onProgress = (pageId, videoId, progress) => {
   position: absolute;
   bottom: 5rem;
   left: calc(var(--stream-player--overview--width) + 5rem);
+  opacity: var(--stream-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .stream-player__content {
   width: 100%;
   height: 100%;
+  opacity: var(--stream-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }</style>

package/dist/streams/stream-player/stream-player.svelte.d.ts

@@ -1,4 +1,15 @@
 import type { StreamPlayerProps } from './types';
-declare const StreamPlayer: import("svelte").Component<StreamPlayerProps, {}, "">;
+import { type Snippet } from 'svelte';
+type $$ComponentProps = StreamPlayerProps & {
+    categoriesSwitcher?: Snippet<[{
+        maxItemsWidth: number;
+        onMounted: (data: {
+            height: number;
+        }) => void;
+    }]>;
+    playerLogo?: string | null;
+    fadeContent?: boolean;
+};
+declare const StreamPlayer: import("svelte").Component<$$ComponentProps, {}, "">;
 type StreamPlayer = ReturnType<typeof StreamPlayer>;
 export default StreamPlayer;

package/dist/streams/stream-player/ui-manager.svelte.d.ts

@@ -4,17 +4,24 @@ export declare class StreamPlayerUiManager {
     globalCssVariables: string;
     isMobileView: boolean;
     viewInitialized: boolean;
-    showShortVideoOverlay: boolean;
-    private readonly buttonSize;
-    private readonly iconSize;
-    private readonly controlsOffsetHorizontal;
-    private readonly controlsOffsetVertical;
-    private viewTotalWidth;
-    private mainViewColumnWidth;
-    private overviewWidth;
+    showShortVideoOverlayAttachments: boolean;
+    showShortVideoOverlayControls: boolean;
+    private _viewTotalWidth;
+    private _mainViewColumnWidth;
+    private _mediaCenterHeaderHeight;
+    private _overviewWidth;
+    private _controlsAttachmentsPanelWidth;
+    private _controlsNavitagionButtonsWidth;
+    private _controlsAvailableSpace;
+    private _controlsContentWidth;
+    get viewTotalWidth(): number;
+    get mainViewColumnWidth(): number;
     updateDimensions: (dimensions: {
         viewTotalWidth: number;
         mainViewColumnWidth: number;
     }) => void;
     updateOverviewWidth: (width: number) => void;
+    updateMediaCenterHeaderHeight: (height: number) => void;
+    setAttachmentsPanelWidth: (width: number) => void;
+    setNavigationButtonsBlockWidth: (width: number) => void;
 }

package/dist/streams/stream-player/ui-manager.svelte.js

@@ -1,32 +1,53 @@
+const CONTROLS_PADDING_HORIZONTAL = 28;
+const CONTROLS_PADDING_VERTICAL = 28;
+const CONTROLS_ATTACHMENTS_MAX_WIDTH = 176;
+const PLAYER_PADDING_VERTICAL = 10;
 export class StreamPlayerUiManager {
     overviewCollapsed = $state(false);
     showShortVideoAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--stream-player--button--size: ${this.buttonSize}px`,
-            `--stream-player--icon--size: ${this.iconSize}px`,
-            `--stream-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--stream-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--stream-player--overview--width: ${this.overviewWidth}px`,
-            `--stream-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+            `--stream-player--controls--attachments--max-width: ${CONTROLS_ATTACHMENTS_MAX_WIDTH}px`,
+            `--stream-player--controls--available-space: ${this._controlsAvailableSpace}px`,
+            `--stream-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
+            `--stream-player--media-center-header--height: ${this._mediaCenterHeaderHeight || 72}px`,
+            `--stream-player--overview--width: ${this._overviewWidth}px`,
+            `--stream-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
         ];
         return values.join(';');
     });
-    isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    viewInitialized = $derived.by(() => !!this.viewTotalWidth && !!this.mainViewColumnWidth);
-    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
-    buttonSize = 48;
-    iconSize = 28;
-    controlsOffsetHorizontal = 28;
-    controlsOffsetVertical = 28;
-    viewTotalWidth = $state(0);
-    mainViewColumnWidth = $state(0);
-    overviewWidth = $state(0);
+    isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
+    viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
+    showShortVideoOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
+    showShortVideoOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavitagionButtonsWidth);
+    _viewTotalWidth = $state(0);
+    _mainViewColumnWidth = $state(0);
+    _mediaCenterHeaderHeight = $state(0);
+    _overviewWidth = $state(0);
+    _controlsAttachmentsPanelWidth = $state(0);
+    _controlsNavitagionButtonsWidth = $state(0);
+    _controlsAvailableSpace = $derived.by(() => (this._viewTotalWidth - this._mainViewColumnWidth) / 2);
+    _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
+    get viewTotalWidth() {
+        return this._viewTotalWidth;
+    }
+    get mainViewColumnWidth() {
+        return this._mainViewColumnWidth;
+    }
     updateDimensions = (dimensions) => {
-        this.viewTotalWidth = dimensions.viewTotalWidth;
-        this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
+        this._viewTotalWidth = dimensions.viewTotalWidth;
+        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
     };
     updateOverviewWidth = (width) => {
-        this.overviewWidth = width;
+        this._overviewWidth = width;
+    };
+    updateMediaCenterHeaderHeight = (height) => {
+        this._mediaCenterHeaderHeight = height;
+    };
+    setAttachmentsPanelWidth = (width) => {
+        this._controlsAttachmentsPanelWidth = width;
+    };
+    setNavigationButtonsBlockWidth = (width) => {
+        this._controlsNavitagionButtonsWidth = width;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.4.2",
+  "version": "6.5.0-1758183492920",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",