@streamscloud/embeddable 6.4.3 → 6.5.0

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,43 +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,
-          adClick: on?.adClick,
-          adImpression: on?.adImpression
-        }} />
-    {/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} />
@@ -60,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>
 
@@ -79,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;
 }
@@ -145,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/cmp.short-video-viewer.svelte.d.ts

@@ -12,8 +12,6 @@ type Props = {
         progress?: (progress: number) => void;
         productClick?: (productId: string) => void;
         productImpression?: (productId: string, videoId: string) => void;
-        adClick?: (adId: string) => void;
-        adImpression?: (adId: string, videoId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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 controlsPanelWidht;
     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.controlsPanelWidht}px`];
         return values.join(';');
     });
     showAttachments = $derived.by(() => {
@@ -9,7 +9,7 @@ export class ShortVideoViewerUiManager {
     showControls = $derived.by(() => {
         return this.canShowControls;
     });
-    buttonSize = 40;
+    controlsPanelWidht = $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.controlsPanelWidht = 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,59 +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}
-                on={{
-                  productClick: on.productClick,
-                  productImpression: on.productImpression,
-                  adClick: on.adClick,
-                  adImpression: on.adImpression
-                }} />
-            </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,
-              adClick: on.adClick,
-              adImpression: on.adImpression
-            }} />
-        </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>
@@ -124,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;
@@ -138,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;
@@ -151,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;
@@ -205,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;
@@ -240,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/controls.svelte.d.ts

@@ -13,8 +13,6 @@ type Props = {
         closePlayer?: () => void;
         productClick?: (productId: string) => void;
         productImpression?: (productId: string, videoId: string) => void;
-        adClick?: (adId: string) => void;
-        adImpression?: (adId: string, videoId: string) => void;
     };
 };
 declare const Controls: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.d.ts

@@ -5,6 +5,4 @@ export declare class InternalShortVideoAnalyticsHandler implements IShortVideoAn
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
-    trackAdImpression: (adId: string) => void;
-    trackAdClick: (adId: string) => void;
 }

package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.js

@@ -10,6 +10,4 @@ export class InternalShortVideoAnalyticsHandler {
     trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
     trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
     trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
-    trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
-    trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
 }

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

@@ -97,12 +97,6 @@ const onShortVideoProductClick = (productId, videoId) => {
 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);
-};
 </script>
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
@@ -141,14 +135,12 @@ const onShortVideoAdImpression = (adId, 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),
-                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
-                  adClick: (adId) => onShortVideoAdClick(adId),
-                  adImpression: (adId, videoId) => onShortVideoAdImpression(adId, videoId)
+                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
                 }} />
             {/snippet}
           </PlayerSlider>
@@ -166,9 +158,7 @@ const onShortVideoAdImpression = (adId, videoId) => {
         on={{
           closePlayer: on?.playerClosed,
           productClick: (productId) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
-          productImpression: onShortVideoProductImpression,
-          adClick: (adId) => onShortVideoAdClick(adId),
-          adImpression: onShortVideoAdImpression
+          productImpression: onShortVideoProductImpression
         }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />

package/dist/short-videos/short-videos-player/types.d.ts

@@ -7,8 +7,6 @@ export interface IShortVideoAnalyticsHandler {
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
-    trackAdImpression: (adId: string) => void;
-    trackAdClick: (adId: string) => void;
 }
 export type ShortVideoPlayerModel = ShortVideoViewerModel & {
     analyticsOrganizationId: string | null;

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