@streamscloud/embeddable 6.4.3 → 6.5.0

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._controlsNavitagionButtonsWidth);
     _viewTotalWidth = $state(0);
     _mainViewColumnWidth = $state(0);
     _mediaCenterHeaderHeight = $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;
     }
@@ -35,4 +38,10 @@ export class ShortVideosPlayerUiManager {
     updateMediaCenterHeaderHeight = (height) => {
         this._mediaCenterHeaderHeight = height;
     };
+    setAttachmentsPanelWidth = (width) => {
+        this._controlsAttachmentsPanelWidth = width;
+    };
+    setNavigationButtonsBlockWidth = (width) => {
+        this._controlsNavitagionButtonsWidth = 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;
 };

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,57 +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}
-                on={{
-                  productClick: on.productClick,
-                  productImpression: on.productImpression,
-                  adClick: on.adClick,
-                  adImpression: on.adImpression
-                }} />
-            </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,
-              adClick: on.adClick,
-              adImpression: on.adImpression
-            }} />
-        </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>
@@ -120,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;
@@ -139,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;
@@ -205,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);
@@ -240,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,12 +7,11 @@ type Props = {
     uiManager: StreamPlayerUiManager;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     localization: StreamPlayerLocalization;
+    playerLogo: string | null;
     on: {
         closePlayer: () => void;
         productClick?: (productId: string) => void;
         productImpression?: (productId: string) => void;
-        adClick?: (adId: string) => void;
-        adImpression?: (adId: string, videoId: string) => void;
     };
 };
 declare const Controls: import("svelte").Component<Props, {}, "">;

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/internal-stream-analytics-handler.d.ts

@@ -13,6 +13,4 @@ export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsH
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
     trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
-    trackAdImpression: (adId: string) => void;
-    trackAdClick: (adId: string) => void;
 }

package/dist/streams/stream-player/internal-stream-analytics-handler.js

@@ -18,6 +18,4 @@ export class InternalStreamAnalyticsHandler {
     trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
     trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
     trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
-    trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
-    trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
 }

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;
@@ -178,12 +181,6 @@ const onStreamProductImpression = (productId) => {
 const onShortVideoProductImpression = (productId, videoId) => {
     analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
 };
-const onShortVideoAdClick = (adId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(adId);
-};
-const onShortVideoAdImpression = (adId, videoId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(adId);
-};
 const onPlayerClose = () => {
     var _a;
     stopActivityTracking();
@@ -207,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">
@@ -241,15 +245,13 @@ const onProgress = (pageId, videoId, progress) => {
                   on={{
                     progress: (progress) => onProgress(item.id, item.shortVideo.id, progress),
                     productClick: (productId) => onShortVideoProductClick(productId, item.shortVideo.id),
-                    productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
-                    adClick: (adId) => onShortVideoAdClick(adId),
-                    adImpression: (adId, videoId) => onShortVideoAdImpression(adId, videoId)
+                    productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
                   }}
                   autoplay="on-appearance"
                   socialInteractionsHandler={postSocialInteractionsHandler}
                   localization={localization.shortVideoViewerLocalization}
-                  showAttachments={uiManager.showShortVideoOverlay}
-                  showControls={uiManager.showShortVideoOverlay} />
+                  showAttachments={uiManager.showShortVideoOverlayAttachments}
+                  showControls={uiManager.showShortVideoOverlayControls} />
               {/if}
             {/snippet}
           </PlayerSlider>
@@ -275,12 +277,11 @@ const onProgress = (pageId, videoId, progress) => {
         uiManager={uiManager}
         localization={localization}
         postSocialInteractionsHandler={postSocialInteractionsHandler}
+        playerLogo={playerLogo}
         on={{
           closePlayer: () => onPlayerClose(),
           productClick: (productId: String) => onProductCardClick(productId),
-          productImpression: (productId: String) => onStreamProductImpression(productId),
-          adClick: (adId: string) => onShortVideoAdClick(adId),
-          adImpression: (adId: string, videoId: string) => onShortVideoAdImpression(adId, videoId)
+          productImpression: (productId: String) => onStreamProductImpression(productId)
         }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
@@ -300,6 +301,7 @@ const onProgress = (pageId, videoId, progress) => {
   }
 }
 .stream-player-container {
+  --stream-player--elements-opacity: 1;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -319,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;
@@ -337,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/types.d.ts

@@ -53,6 +53,4 @@ export interface IStreamAnalyticsHandler {
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
     trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
-    trackAdImpression: (adId: string) => void;
-    trackAdClick: (adId: string) => void;
 }

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