@streamscloud/embeddable 7.0.1 → 7.0.2-1759149696160

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

@@ -1,25 +1,19 @@
-<script lang="ts">import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
-import { createShadowRoot } from '../../ui/shadow-dom';
+<script lang="ts">import { createShadowRoot } from '../../ui/shadow-dom';
+import { default as ShortVideoPlayerView } from './short-videos-player-view.svelte';
 import { mount, unmount } from 'svelte';
-let { dataProvider, socialInteractionsHandler, locale, showStreamsCloudWatermark, disableBackground, analyticsHandler, on, mediaCenterConfig } = $props();
+let { dataProvider, socialInteractionsHandler, locale, showStreamsCloudWatermark, disableBackground, analyticsHandler, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
-    const mounted = mount(MediaCenter, {
+    const mounted = mount(ShortVideoPlayerView, {
         target: shadowRoot,
         props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: MediaCenterMode.ShortVideos,
-                props: {
-                    dataProvider,
-                    socialInteractionsHandler,
-                    disableBackground,
-                    locale,
-                    showStreamsCloudWatermark,
-                    analyticsHandler,
-                    on
-                }
-            }
+            dataProvider,
+            socialInteractionsHandler,
+            disableBackground,
+            locale,
+            showStreamsCloudWatermark,
+            analyticsHandler,
+            on
         }
     });
     return {

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts

@@ -1,8 +1,4 @@
-import type { IMediaCenterConfig } from '../../media-center/config/types';
 import type { ShortVideoPlayerProps } from './types';
-type $$ComponentProps = ShortVideoPlayerProps & {
-    mediaCenterConfig?: IMediaCenterConfig;
-};
-declare const Cmp: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Cmp: import("svelte").Component<ShortVideoPlayerProps, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -1,9 +1,10 @@
+import type { Locale } from '../../core/locale';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
-import type { IPostSocialInteractionsHandler } from '../short-video-viewer';
-import type { IPlayerItemsProvider } from '../../ui/player';
+import type { IPostSocialInteractionsHandler } from '../../posts';
+import type { IPlayerItemsProvider } from '../../ui/player-slider';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import { mapToShortVideoPlayerModel } from './mapper';
-import { type PlayerSettings, type IShortVideoAnalyticsHandler, type ShortVideoPlayerModel } from './types';
+import { type IShortVideoAnalyticsHandler, type ShortVideoPlayerModel } from './types';
 export { ShortVideosPlayer, type ShortVideoPlayerModel };
 export type { IMediaCenterConfig, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
 export { mapToShortVideoPlayerModel };
@@ -88,16 +89,30 @@ export { mapToShortVideoPlayerModel };
  * });
  * ```
  */
-export declare function openShortVideosPlayer(init: PlayerSettings & {
+export declare function openShortVideosPlayer(init: {
     shortVideosProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
     mediaCenterConfig?: IMediaCenterConfig;
     analyticsHandler?: IShortVideoAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    on?: {
+        playerClosed?: () => void;
+        videoActivated?: (id: string) => void;
+    };
 }): void;
-export declare function openShortVideosPlayer(init: PlayerSettings & {
+export declare function openShortVideosPlayer(init: {
     ids: string[];
     initiator: string;
     graphqlOrigin?: string;
     initialId?: string;
     mediaPageId?: string;
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    on?: {
+        playerClosed?: () => void;
+        videoActivated?: (id: string) => void;
+    };
 }): void;

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

@@ -5,6 +5,6 @@ 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;
+    trackAdImpression: (adId: string) => void;
 }

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

@@ -10,6 +10,6 @@ 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);
+    trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
 }

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

@@ -1,4 +1,4 @@
-import type { IPlayerItemsProvider } from '../../ui/player';
+import type { IPlayerItemsProvider } from '../../ui/player-slider';
 import type { ShortVideoPlayerModel } from './types';
 export declare class InternalShortVideoPlayerProvider implements IPlayerItemsProvider<ShortVideoPlayerModel> {
     initialData: IPlayerItemsProvider<ShortVideoPlayerModel>['initialData'];

package/dist/short-videos/short-videos-player/mapper.js

@@ -1,7 +1,7 @@
 import { ProfileType } from '../../core/enums';
-import { mapToShortVideoViewerModel } from '../short-video-viewer';
+import { mapToPostViewerModel } from '../../posts/post-viewer';
 export const mapToShortVideoPlayerModel = (payload) => {
-    const viewerModel = mapToShortVideoViewerModel(payload);
+    const viewerModel = mapToPostViewerModel(payload);
     return {
         ...viewerModel,
         analyticsOrganizationId: payload.ownerProfile.type === ProfileType.Organization ? payload.ownerProfile.id : null

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

@@ -7,243 +7,77 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { handleEsc } from '../../core/document.event-handlers';
+import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
 import { preloadImage } from '../../core/image-preloader';
-import { ShortVideoViewer } from '../short-video-viewer';
-import { Loading } from '../../ui/loading';
-import { PlayerBuffer, PlayerSlider } from '../../ui/player';
-import { SpotlightLayout } from '../../ui/spotlight-layout';
-import { SwipeIndicator } from '../../ui/swipe-indicator';
-import { default as Controls } from './controls.svelte';
+import { getPostCoverImage } from '../../posts/post-viewer';
+import { PlayerBuffer } from '../../ui/player-slider';
 import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
-import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
-import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, locale = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
-const localization = $derived(new ShortVideosPlayerLocalization(locale));
-let everTouched = $state(false);
-let background = $state(null);
-let bufferIsLoading = $state(false);
-let buffer = $state.raw(null);
+let { dataProvider, socialInteractionsHandler, locale = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, mediaCenterData } = $props();
 $effect(() => {
     void dataProvider;
     untrack(() => {
+        contentPlayerConfig.playerBuffer = null;
         initBuffer(dataProvider);
     });
 });
+$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
-    bufferIsLoading = true;
     if (dataProvider instanceof InternalShortVideoPlayerProvider) {
         yield dataProvider.prefetch();
     }
     new PlayerBuffer(dataProvider, {
         preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
             if (instance.loaded.length) {
-                const coverUrl = resolveVideoCover(instance.loaded[0]);
+                const coverUrl = getPostCoverImage(instance.loaded[0]);
                 yield preloadImage(coverUrl);
-                background = coverUrl;
+                contentPlayerConfig.setBackgroundImageUrl(coverUrl);
             }
-            buffer = instance;
-            bufferIsLoading = false;
+            contentPlayerConfig.playerBuffer = instance;
         })
     });
 });
-const uiManager = new ShortVideosPlayerUiManager();
-const onItemActivated = (id) => {
-    var _a;
-    const shortVideo = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
-    if (!shortVideo) {
-        return;
-    }
-    background = resolveVideoCover(shortVideo);
-    if (shortVideo.analyticsOrganizationId) {
-        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(shortVideo.analyticsOrganizationId);
+const contentPlayerConfig = new ContentPlayerConfig({
+    playerBuffer: null,
+    mappers: {
+        postModelFromCurrentItem: (item) => item
+    },
+    disableBackground,
+    locale,
+    showStreamsCloudWatermark,
+    socialInteractionsHandler,
+    mediaCenterData,
+    callbacks: {
+        close: on === null || on === void 0 ? void 0 : on.playerClosed,
+        productClick: (id, videoId) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
+        },
+        productImpression: (id, videoId) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
+        },
+        adClick: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+        },
+        adImpression: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+        }
+    },
+    playerSliderCallbacks: {
+        itemActivated: (id) => {
+            var _a, _b;
+            const shortVideo = (_a = contentPlayerConfig.playerBuffer) === null || _a === void 0 ? void 0 : _a.loaded.find((x) => x.id === id);
+            if (!shortVideo) {
+                return;
+            }
+            contentPlayerConfig.setBackgroundImageUrl(getPostCoverImage(shortVideo));
+            if (shortVideo.analyticsOrganizationId) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(shortVideo.analyticsOrganizationId);
+            }
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
+            (_b = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _b === void 0 ? void 0 : _b.call(on, id);
+        }
     }
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
-    (_a = on === null || on === void 0 ? void 0 : on.videoActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
-};
-const resolveVideoCover = (shortVideo) => {
-    return shortVideo.media.isImage ? shortVideo.media.url : shortVideo.media.thumbnailUrl;
-};
-const contentMounted = (node) => {
-    const markAsTouched = () => {
-        everTouched = true;
-        node.removeEventListener('touchstart', markAsTouched);
-        node.removeEventListener('wheel', markAsTouched);
-        node.removeEventListener('click', markAsTouched);
-        node.removeEventListener('keypress', markAsTouched);
-    };
-    node.addEventListener('touchstart', markAsTouched);
-    node.addEventListener('wheel', markAsTouched);
-    node.addEventListener('click', markAsTouched);
-    node.addEventListener('keypress', markAsTouched);
-};
-const handleDimensionsChanged = (dimensions) => {
-    uiManager.updateDimensions({
-        mainViewColumnWidth: dimensions.mainSceneWidth,
-        viewTotalWidth: dimensions.totalWidth
-    });
-};
-const onMediaCenterHeaderMounted = (data) => {
-    uiManager.updateMediaCenterHeaderHeight(data.height);
-};
-const onPlayerClose = () => {
-    var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
-};
-const onShortVideoProductClick = (productId, videoId) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(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) => {
-    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(adId);
-};
+});
 </script>
 
-<svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
-
-<div
-  class="short-videos-player-container"
-  class:short-videos-player-container--background-enabled={!disableBackground}
-  class:short-videos-player-container--background-loading={!disableBackground && !background}
-  class:short-videos-player-container--faded={fadeContent}
-  style={background && !disableBackground ? `--background-image: url(${background})` : null}>
-  {#if categoriesSwitcher}
-    <div class="short-videos-player-container__media-center">
-      {@render categoriesSwitcher({
-        maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
-        onMounted: onMediaCenterHeaderMounted
-      })}
-    </div>
-  {/if}
-
-  <div class="short-videos-player" style={uiManager.globalCssVariables}>
-    {#if showStreamsCloudWatermark}
-      <div class="short-videos-player__watermark">
-        <a href="https://streamscloud.com/" tabindex="-1" aria-label="none">
-          <img src="https://embedabble-assets.streamscloud-cdn.com/watermark.svg" alt="StreamsCloud" />
-        </a>
-      </div>
-    {/if}
-    {#if buffer && !bufferIsLoading}
-      <SpotlightLayout ratio={9 / 16} on={{ dimensionsChanged: handleDimensionsChanged }}>
-        <div class="short-videos-player__content" use:contentMounted>
-          <PlayerSlider
-            buffer={buffer}
-            on={{
-              itemActivated: onItemActivated
-            }}>
-            {#snippet children({ item })}
-              <ShortVideoViewer
-                model={item}
-                socialInteractionsHandler={socialInteractionsHandler}
-                autoplay="on-appearance"
-                showAttachments={uiManager.showShortVideoOverlayAttachments}
-                showControls={uiManager.showShortVideoOverlayControls}
-                locale={localization.shortVideoViewerLocale}
-                on={{
-                  productClick: (productId) => onShortVideoProductClick(productId, item.id),
-                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
-                  adClick: onShortVideoAdClick,
-                  adImpression: onShortVideoAdImpression
-                }} />
-            {/snippet}
-          </PlayerSlider>
-          {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
-            <SwipeIndicator locale={localization.swipeIndicatorLocale} />
-          {/if}
-        </div>
-      </SpotlightLayout>
-      <Controls
-        buffer={buffer}
-        uiManager={uiManager}
-        localization={localization}
-        socialInteractionsHandler={socialInteractionsHandler}
-        playerLogo={playerLogo}
-        on={{
-          closePlayer: on?.playerClosed,
-          productClick: (productId) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
-          productImpression: onShortVideoProductImpression,
-          adClick: onShortVideoAdClick,
-          adImpression: onShortVideoAdImpression
-        }} />
-    {:else}
-      <Loading positionFixedCenter={true} timeout={1000} />
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.short-videos-player-container {
-  --short-videos-player--elements-opacity: 1;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-  position: relative;
-}
-.short-videos-player-container--background-enabled {
-  background-color: #c1c1c1;
-  background-image: var(--background-image);
-  background-size: cover;
-  background-blend-mode: multiply;
-}
-.short-videos-player-container--background-loading {
-  background-color: transparent;
-}
-.short-videos-player-container--faded {
-  --short-videos-player--elements-opacity: 0;
-}
-.short-videos-player-container__media-center {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-}
-
-.short-videos-player {
-  display: flex;
-  flex: 1;
-  padding: var(--short-videos-player--padding);
-  backdrop-filter: blur(30px);
-  position: relative;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-videos-player {
-    padding: 0;
-  }
-}
-.short-videos-player__watermark {
-  position: absolute;
-  bottom: 5rem;
-  left: 5rem;
-  opacity: var(--short-videos-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}
-.short-videos-player__content {
-  width: 100%;
-  height: 100%;
-  opacity: var(--short-videos-player--elements-opacity);
-  transition: opacity 0.3s ease-in-out;
-}</style>
+<ContentPlayer config={contentPlayerConfig} />

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

@@ -1,14 +1,7 @@
+import type { MediaCenterData } from '../../media-center/model/types';
 import type { ShortVideoPlayerProps } from './types';
-import { type Snippet } from 'svelte';
 type $$ComponentProps = ShortVideoPlayerProps & {
-    categoriesSwitcher?: Snippet<[{
-        maxItemsWidth: number;
-        onMounted: (data: {
-            height: number;
-        }) => void;
-    }]>;
-    playerLogo?: string | null;
-    fadeContent?: boolean;
+    mediaCenterData?: MediaCenterData;
 };
 declare const ShortVideosPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
 type ShortVideosPlayerView = ReturnType<typeof ShortVideosPlayerView>;

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

@@ -1,23 +1,22 @@
 import type { Locale } from '../../core/locale';
-import type { ShortVideoViewerModel, IPostSocialInteractionsHandler } from '../short-video-viewer';
-import type { IPlayerItemsProvider } from '../../ui/player';
+import type { IPostSocialInteractionsHandler } from '../../posts';
+import type { PostViewerModel } from '../../posts/post-viewer';
+import type { IPlayerItemsProvider } from '../../ui/player-slider';
 export interface IShortVideoAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
-    trackAdImpression: (adId: string) => void;
     trackAdClick: (adId: string) => void;
+    trackAdImpression: (adId: string) => void;
 }
-export type ShortVideoPlayerModel = ShortVideoViewerModel & {
+export type ShortVideoPlayerModel = PostViewerModel & {
     analyticsOrganizationId: string | null;
 };
-export type ShortVideoPlayerProps = PlayerSettings & {
+export type ShortVideoPlayerProps = {
     dataProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IShortVideoAnalyticsHandler;
-};
-export type PlayerSettings = {
     disableBackground?: boolean;
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
+<script lang="ts">import { PostViewer } from '../../../posts/post-viewer';
 import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
-import { mapToShortVideoViewerModel } from '../models';
+import { mapToPostViewerModel } from '../models';
 let { data, locale, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(locale));
 </script>
 
-<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} showControls={false} locale={localization.shortVideoViewerLocale} on={on} />
+<PostViewer model={mapToPostViewerModel(data)} autoplay={false} showControls={false} locale={localization.shortVideoViewerLocale} on={on} />

package/dist/streams/layout/models/index.d.ts

@@ -1,4 +1,4 @@
-export { mapToShortVideoViewerModel } from './mapper';
+export { mapToPostViewerModel } from './mapper';
 export type { StreamLayoutBlobModel } from './stream-layout-blob-model';
 export type { StreamLayoutMediaItemModel } from './stream-layout-media-item-model';
 export type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';

package/dist/streams/layout/models/index.js

@@ -1 +1 @@
-export { mapToShortVideoViewerModel } from './mapper';
+export { mapToPostViewerModel } from './mapper';

package/dist/streams/layout/models/mapper.d.ts

@@ -1,3 +1,3 @@
-import type { ShortVideoViewerModel } from '../../../short-videos/short-video-viewer';
+import type { PostViewerModel } from '../../../posts/post-viewer';
 import type { StreamLayoutShortVideoModel } from '../models/stream-layout-short-video-model';
-export declare const mapToShortVideoViewerModel: (model: StreamLayoutShortVideoModel) => ShortVideoViewerModel;
+export declare const mapToPostViewerModel: (model: StreamLayoutShortVideoModel) => PostViewerModel;

package/dist/streams/layout/models/mapper.js

@@ -1,13 +1,14 @@
 import { MediaType } from '../../../core/enums';
-export const mapToShortVideoViewerModel = (model) => {
+export const mapToPostViewerModel = (model) => {
     return {
         id: model.id,
         media: model.media.type === MediaType.Image
-            ? { isImage: true, url: model.media.url }
+            ? { type: 'image', url: model.media.url, isMutable: false }
             : {
-                isImage: false,
+                type: 'video',
                 url: model.media.url,
-                thumbnailUrl: model.media.thumbnailUrl
+                thumbnailUrl: model.media.thumbnailUrl,
+                isMutable: true
             },
         text: model.text,
         heading: model.header && {
@@ -17,8 +18,7 @@ export const mapToShortVideoViewerModel = (model) => {
             viewsCount: model.header.postViewsCount
         },
         enableSocialInteractions: model.enableSocialInteractions,
-        hasAttachments: !!(model.products.length || model.ad),
-        ad: model.ad ? mapToAdViewModel(model.ad) : null,
+        ads: model.ad ? [mapToAdViewModel(model.ad)] : [],
         products: model.products.map(mapToProductCardModel)
         // uncomment if you want to test many products behavior
         // .flatMap(x =>

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

@@ -1,8 +1,9 @@
+import type { Locale } from '../../core/locale';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
-import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import type { IPostSocialInteractionsHandler } from '../../posts';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import { mapToStreamPlayerModel } from './mapper';
-import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, PlayerSettings, StreamPlayerModel } from './types';
+import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, StreamPlayerModel } from './types';
 export { type StreamPlayerModel, type StreamPageViewerModel, mapToStreamPlayerModel };
 export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
 /**
@@ -88,16 +89,36 @@ export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterCo
  * });
  * ```
  */
-export declare function openStreamPlayer(init: PlayerSettings & {
+export declare function openStreamPlayer(init: {
     streamId: string;
     dataProvider: IStreamPlayerDataProvider;
     mediaCenterConfig?: IMediaCenterConfig;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+        playerClosed?: () => void;
+    };
 }): void;
-export declare function openStreamPlayer(init: PlayerSettings & {
+export declare function openStreamPlayer(init: {
     streamId: string;
     initiator: string;
     graphqlOrigin?: string;
     mediaPageId?: string;
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+        playerClosed?: () => void;
+    };
 }): void;

package/dist/streams/stream-player/internal-stream-analytics-handler.d.ts

@@ -13,4 +13,6 @@ 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;
+    trackAdClick: (adId: string) => void;
+    trackAdImpression: (adId: string) => void;
 }

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

@@ -18,4 +18,6 @@ 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);
+    trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
+    trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
 }