@streamscloud/embeddable 8.1.0 → 8.3.0

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -1,8 +1,10 @@
-<script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
+<script lang="ts">var _a;
+import { enrichAdLinkWithTracking } from '../../marketing-tracking';
+import { toPriceRepresentation } from '../../products/price-helper';
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, inert = false, on } = $props();
+let { ad, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
     if (on === null || on === void 0 ? void 0 : on.impression) {
         const observer = new IntersectionObserver((entries) => {
@@ -22,12 +24,13 @@ const trackImpression = (node) => {
         };
     }
 };
+const enrichedLink = $derived(((_a = ad.ctaButton) === null || _a === void 0 ? void 0 : _a.url) ? enrichAdLinkWithTracking({ link: ad.ctaButton.url, adId: ad.id, trackingParams }) : null);
 const handleAdClick = () => {
     if (on === null || on === void 0 ? void 0 : on.click) {
         on.click(ad.id);
     }
-    if (ad.ctaButton) {
-        window.open(ad.ctaButton.url, '_blank');
+    if (enrichedLink) {
+        window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
 </script>
@@ -60,7 +63,7 @@ const handleAdClick = () => {
       {/if}
     </div>
     <div class="ad-card__button-container">
-      {#if ad.ctaButton && ad.ctaButton.url && ad.ctaButton.text}
+      {#if ad.ctaButton && enrichedLink && ad.ctaButton.text}
         <div class="ad-card__button">
           <Button
             size={ButtonSize.Standard}

package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts

@@ -1,6 +1,8 @@
+import { type TrackingParams } from '../../marketing-tracking';
 import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
+    trackingParams: TrackingParams;
     inert?: boolean;
     on?: {
         click?: (id: string) => void;

package/dist/content-player/cmp.content-player.svelte

@@ -171,6 +171,7 @@ const variables = $derived.by(() => {
               {#if postModel}
                 <PostViewer
                   model={postModel}
+                  trackingParams={config.trackingParams}
                   socialInteractionsHandler={config.socialInteractionsHandler}
                   enableAttachments={config.uiManager.showPostOverlayAttachments}
                   enableControls={config.uiManager.showPostOverlayControls}

package/dist/content-player/content-player-config.svelte.d.ts

@@ -15,6 +15,7 @@ export declare class ContentPlayerConfig<T extends {
     readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
     readonly uiManager: ContentPlayerUIManager;
     private _mediaCenterData;
+    private _trackingParams;
     private _mappers;
     private mappedPostsCache;
     constructor(init: {
@@ -25,16 +26,19 @@ export declare class ContentPlayerConfig<T extends {
         settings?: ContentPlayerSettings;
         callbacks?: ContentPlayerCallbacks;
         playerSliderCallbacks?: PlayerSliderCallbacks<T>;
+        trackingParams?: ContentPlayerTrackingParams | null;
     });
     get mediaCenterControlsPanel(): MediaCenterData['controlsPanel'] | null;
     get mediaCenterCallbacks(): MediaCenterData['callbacks'] | null;
     get playerLogo(): string | null;
     get fadeContent(): boolean;
+    get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
     itemAsPostViewerModel: (item: T & {
         mediaIndex?: number;
     }) => PostModel | null;
     setBackgroundImageUrl: (imageUrl: string | null) => void;
     updateMediaCenterData: (data: MediaCenterData | undefined) => void;
+    updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
 }
 export type ContentPlayerMappers<T> = {
     postModelFromCurrentItem: (item: T) => IPostModel | null;
@@ -47,3 +51,7 @@ export type ContentPlayerCallbacks = {
     adClick?: (adId: string, postId: string) => void;
     adImpression?: (adId: string, postId: string) => void;
 };
+export type ContentPlayerTrackingParams = {
+    streamId?: string;
+    campaignId?: string;
+} | false;

package/dist/content-player/content-player-config.svelte.js

@@ -9,11 +9,13 @@ export class ContentPlayerConfig {
     socialInteractionsHandler;
     uiManager = new ContentPlayerUIManager();
     _mediaCenterData = $state.raw(null);
+    _trackingParams = $state.raw(null);
     _mappers;
     mappedPostsCache = new Map();
     constructor(init) {
-        const { playerBuffer, mappers, socialInteractionsHandler, mediaCenterData, settings, callbacks, playerSliderCallbacks } = init;
+        const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, mediaCenterData, settings, callbacks, playerSliderCallbacks } = init;
         this.playerBuffer = playerBuffer;
+        this._trackingParams = trackingParams ?? null;
         this.settings = settings || new ContentPlayerSettings();
         this._mediaCenterData = mediaCenterData || null;
         this.callbacks = callbacks || null;
@@ -33,6 +35,9 @@ export class ContentPlayerConfig {
     get fadeContent() {
         return this._mediaCenterData?.overlayIsActive || false;
     }
+    get trackingParams() {
+        return this._trackingParams;
+    }
     itemAsPostViewerModel = (item) => {
         if (this.mappedPostsCache.has(item.id)) {
             return this.mappedPostsCache.get(item.id) || null;
@@ -52,4 +57,7 @@ export class ContentPlayerConfig {
     updateMediaCenterData = (data) => {
         this._mediaCenterData = data ?? null;
     };
+    updateTrackingParams = (data) => {
+        this._trackingParams = data ?? null;
+    };
 }

package/dist/content-player/controls-and-attachments.svelte

@@ -75,6 +75,7 @@ const variables = $derived.by(() => {
           <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
             <PostAttachments
               model={currentItemPostContainer}
+              trackingParams={config.trackingParams}
               locale={config.settings.locale}
               on={{
                 productClick: (id) => config.callbacks?.productClick?.(id, currentItemPostContainer.id),

package/dist/content-player/overview-panel.svelte

@@ -28,19 +28,22 @@ const buttonVariables = $derived.by(() => {
 });
 </script>
 
-{#if !uiManager.overviewCollapsed && !contentFaded}
-  <div
-    class="overview-panel"
-    transition:slideHorizontally|local
-    use:overviewAttached
-    style={panelVariables}
-    onclick={handlePanelClick}
-    onkeydown={() => {}}
-    role="none">
-    <div class="overview-panel__content" onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
-      {@render children()}
+<!--Double if for correct behavior of slideHorizontally-->
+{#if uiManager.viewInitialized}
+  {#if !uiManager.overviewCollapsed && !contentFaded}
+    <div
+      class="overview-panel"
+      transition:slideHorizontally|local
+      use:overviewAttached
+      style={panelVariables}
+      onclick={handlePanelClick}
+      onkeydown={() => {}}
+      role="none">
+      <div class="overview-panel__content" onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
+        {@render children()}
+      </div>
     </div>
-  </div>
+  {/if}
 {/if}
 
 <button

package/dist/core/enums.d.ts

@@ -33,7 +33,11 @@ export declare enum ProfileType {
     Organization = "ORGANIZATION"
 }
 export declare enum PostType {
-    ShortVideo = "SHORT_VIDEO"
+    Article = "ARTICLE",
+    Media = "MEDIA",
+    Moment = "MOMENT",
+    ShortVideo = "SHORT_VIDEO",
+    Video = "VIDEO"
 }
 export declare enum Status {
     Published = "PUBLISHED"

package/dist/core/enums.js

@@ -41,7 +41,11 @@ export var ProfileType;
 })(ProfileType || (ProfileType = {}));
 export var PostType;
 (function (PostType) {
+    PostType["Article"] = "ARTICLE";
+    PostType["Media"] = "MEDIA";
+    PostType["Moment"] = "MOMENT";
     PostType["ShortVideo"] = "SHORT_VIDEO";
+    PostType["Video"] = "VIDEO";
 })(PostType || (PostType = {}));
 export var Status;
 (function (Status) {

package/dist/marketing-tracking/index.d.ts

@@ -0,0 +1,2 @@
+export type { TrackingParams } from './types';
+export { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from './service';

package/dist/marketing-tracking/index.js

@@ -0,0 +1 @@
+export { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from './service';

package/dist/marketing-tracking/service.d.ts

@@ -0,0 +1,11 @@
+import type { TrackingParams } from './types';
+export declare const enrichProductLinkWithTracking: (data: {
+    link: string | URL;
+    productId: string;
+    trackingParams: TrackingParams | false | null | undefined;
+}) => URL;
+export declare const enrichAdLinkWithTracking: (data: {
+    link: string | URL;
+    adId: string;
+    trackingParams: TrackingParams | false | null | undefined;
+}) => URL;

package/dist/marketing-tracking/service.js

@@ -0,0 +1,35 @@
+export const enrichProductLinkWithTracking = (data) => {
+    const { link, productId, trackingParams } = data;
+    const url = link instanceof URL ? link : new URL(link);
+    if (trackingParams === false) {
+        return url;
+    }
+    url.searchParams.set('utm_source', 'streams');
+    url.searchParams.set('streams_product_id', productId);
+    return addTrackingParamsToUrl(url, trackingParams);
+};
+export const enrichAdLinkWithTracking = (data) => {
+    const { link, adId, trackingParams } = data;
+    const url = link instanceof URL ? link : new URL(link);
+    if (trackingParams === false) {
+        return url;
+    }
+    url.searchParams.set('utm_source', 'streams');
+    url.searchParams.set('streams_ad_id', adId);
+    return addTrackingParamsToUrl(url, trackingParams);
+};
+const addTrackingParamsToUrl = (url, trackingParams) => {
+    if (!trackingParams) {
+        return url;
+    }
+    if (trackingParams.campaignId) {
+        url.searchParams.set('utm_id', trackingParams.campaignId);
+    }
+    if (trackingParams.shortVideoId) {
+        url.searchParams.set('streams_short_video_id', trackingParams.shortVideoId);
+    }
+    if (trackingParams.streamId) {
+        url.searchParams.set('streams_stream_id', trackingParams.streamId);
+    }
+    return url;
+};

package/dist/marketing-tracking/types.d.ts

@@ -0,0 +1,5 @@
+export type TrackingParams = {
+    streamId?: string;
+    shortVideoId?: string;
+    campaignId?: string;
+} | false;

package/dist/marketing-tracking/types.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -292,7 +292,7 @@ const onWidthAnchorMounted = (node) => {
   pointer-events: auto;
   position: relative;
   flex: 1 1 auto;
-  max-width: max-content;
+  max-width: 100%;
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
@@ -322,9 +322,11 @@ const onWidthAnchorMounted = (node) => {
   gap: 0.375rem;
   justify-content: center;
   align-items: center;
-  max-width: 12.5rem;
+  max-width: 9.375rem;
+  flex: 0 0 auto;
+  min-width: auto;
   width: auto;
-  min-width: 0;
+  white-space: nowrap;
   border-radius: 0.875rem;
   background-color: rgba(0, 0, 0, 0.6);
   color: #f2f2f2;
@@ -372,6 +374,7 @@ const onWidthAnchorMounted = (node) => {
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
+  min-width: 0;
 }
 
 .media-center-overlay {

package/dist/media-center/media-center/discover-panel-handler.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { TrackingParams } from '../../marketing-tracking';
 import type { ProductCardModel } from '../../products/product-card';
 import type { IMediaCenterConfig, ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
 import type { MediaCenterStreamModel } from './types';
@@ -25,5 +26,6 @@ type ShortVideoSectionItemType = {
 } | {
     kind: 'product';
     data: ProductCardModel;
+    trackingParams: TrackingParams;
 };
 export {};

package/dist/media-center/media-center/discover-panel-handler.svelte.js

@@ -24,7 +24,9 @@ export class DiscoverPanelHandler {
                 result.push({ kind: 'video', data: vids.shift() });
             }
             else if (want === 'product' && prods.length > 0) {
-                result.push({ kind: 'product', data: prods.shift() });
+                const productModel = prods.shift();
+                const shortVideoId = this._shortVideos.find((v) => v.products.some((p) => p.id === productModel.id))?.id;
+                result.push({ kind: 'product', data: productModel, trackingParams: { shortVideoId } });
             }
             else {
                 // temporary "empty" position - will fill later
@@ -38,7 +40,9 @@ export class DiscoverPanelHandler {
                     result[i] = { kind: 'video', data: vids.shift() };
                 }
                 else if (prods.length > 0) {
-                    result[i] = { kind: 'product', data: prods.shift() };
+                    const productModel = prods.shift();
+                    const shortVideoId = this._shortVideos.find((v) => v.products.some((p) => p.id === productModel.id))?.id;
+                    result[i] = { kind: 'product', data: productModel, trackingParams: { shortVideoId } };
                 }
             }
         }

package/dist/media-center/media-center/discover-panel.svelte

@@ -36,7 +36,7 @@ let { handler, localization, on } = $props();
               </div>
             {:else if item.kind === 'product'}
               <div class="media-center-overview__card-wrapper" data-theme="dark">
-                <ProductCard product={item.data} locale={localization.locale} />
+                <ProductCard product={item.data} trackingParams={item.trackingParams} locale={localization.locale} />
               </div>
             {/if}
           {/each}

package/dist/posts/attachments/cmp.attachments.svelte

@@ -1,7 +1,17 @@
-<script lang="ts">import { AdCard } from '../../ads/ad-card';
+<script lang="ts">import { PostType } from '../..';
+import { AdCard } from '../../ads/ad-card';
 import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
-let { model, locale = 'en', on } = $props();
+let { model, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
+const trackingParams = $derived.by(() => {
+    if (externalTrackingParams || externalTrackingParams === false) {
+        return externalTrackingParams;
+    }
+    if (model.postType === PostType.ShortVideo) {
+        return { shortVideoId: model.id };
+    }
+    return false;
+});
 </script>
 
 {#if model.attachments}
@@ -10,6 +20,7 @@ let { model, locale = 'en', on } = $props();
       {#each model.attachments.ads as ad (ad.id)}
         <AdCard
           ad={ad}
+          trackingParams={trackingParams}
           on={{
             click: on?.adClick,
             impression: on?.adImpression
@@ -21,6 +32,7 @@ let { model, locale = 'en', on } = $props();
       {#each model.attachments.products as product (product.id)}
         <ProductCard
           product={product}
+          trackingParams={trackingParams}
           locale={locale}
           on={{
             click: on?.productClick,

package/dist/posts/attachments/cmp.attachments.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { Locale } from '../../core/locale';
+import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 type Props = {
     model: PostModel;
+    trackingParams: TrackingParams | null;
     locale?: Locale;
     on?: {
         productClick?: (productId: string) => void;

package/dist/posts/model/post-model.d.ts

@@ -1,8 +1,10 @@
+import { PostType } from '../../core/enums';
 import { PostViewerMediaModel } from './post-media-model.svelte';
 import type { IPostModel, IPostAdCardModel, IPostHeadingModel, IPostProductCardModel } from './types';
 export declare class PostModel {
     id: string;
     media: PostViewerMediaModel;
+    postType: PostType | null;
     texts: {
         kicker: string | null;
         title: string | null;

package/dist/posts/model/post-model.js

@@ -1,13 +1,16 @@
+import { PostType } from '../../core/enums';
 import { PostViewerMediaModel } from './post-media-model.svelte';
 export class PostModel {
     id;
     media;
+    postType;
     texts;
     heading;
     enableSocialInteractions;
     attachments;
     constructor(init) {
         this.id = init.id;
+        this.postType = init.postType;
         this.media = new PostViewerMediaModel({ media: init.media, mediaFit: init.mediaFit, mediaIndex: init.mediaIndex });
         this.texts = {
             kicker: init.kicker,

package/dist/posts/model/types.d.ts

@@ -1,6 +1,7 @@
-import { AdType, type Currency } from '../../core/enums';
+import { type AdType, type Currency, type PostType } from '../../core/enums';
 export type IPostModel = {
     id: string;
+    postType: PostType | null;
     media: IPostMediaItemModel[];
     mediaFit: PostModelMediaFit;
     kicker: string | null;

package/dist/posts/model/types.js

@@ -1 +1 @@
-import { AdType } from '../../core/enums';
+import {} from '../../core/enums';

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">import { horizontalWheelScroll, swallowTouch } from '../../core/actions';
 import { Currency } from '../../core/enums';
+import { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import { toPriceRepresentation } from '../../products/price-helper';
 import { Icon, IconColor } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
 import { PostViewerUiManager } from './ui-manager.svelte';
 import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
-let { model, uiManager, on } = $props();
+let { model, trackingParams, uiManager, on } = $props();
 const attachmentsToShow = $derived.by(() => {
     if (!model.attachments) {
         return [];
@@ -16,7 +17,7 @@ const attachmentsToShow = $derived.by(() => {
         .map((p) => ({
         isAd: false,
         image: p.image,
-        link: p.link,
+        link: p.link ? enrichProductLinkWithTracking({ link: p.link, productId: p.id, trackingParams }) : null,
         productId: p.id,
         adId: null,
         price: {
@@ -33,7 +34,7 @@ const attachmentsToShow = $derived.by(() => {
         return ({
             isAd: true,
             image: a.image,
-            link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
+            link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) ? enrichAdLinkWithTracking({ link: a.ctaButton.url, adId: a.id, trackingParams }) : null,
             productId: null,
             adId: a.id,
             price: a.price && a.currency
@@ -58,7 +59,7 @@ const handleAttachmentClick = (attachment) => {
         on.adClick(attachment.adId);
     }
     if (attachment.link) {
-        window.open(attachment.link, '_blank');
+        window.open(attachment.link, '_blank', 'noopener noreferrer');
     }
 };
 let attachmentElements = $state({});

package/dist/posts/post-viewer/attachments-horizontal.svelte.d.ts

@@ -1,7 +1,9 @@
+import { type TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import { PostViewerUiManager } from './ui-manager.svelte';
 type Props = {
     model: PostModel;
+    trackingParams: TrackingParams;
     uiManager: PostViewerUiManager;
     on?: {
         productClick?: (productId: string) => void;

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { PostControls } from '../controls';
+<script lang="ts">import { PostType } from '../..';
+import { PostControls } from '../controls';
 import { PostModel } from '../model';
 import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
 import { default as Heading } from './heading.svelte';
@@ -6,13 +7,22 @@ import { default as PostMedia } from './media/post-media.svelte';
 import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
-let { model, socialInteractionsHandler, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+let { model, socialInteractionsHandler, trackingParams: externalTrackingParams, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
 const localization = $derived(new PostViewerLocalization(locale));
 const uiManager = new PostViewerUiManager();
 $effect(() => {
     uiManager.enableAttachments = enableAttachments;
     uiManager.enableControls = enableControls;
 });
+const trackingParams = $derived.by(() => {
+    if (externalTrackingParams || externalTrackingParams === false) {
+        return externalTrackingParams;
+    }
+    if (model.postType === PostType.ShortVideo) {
+        return { shortVideoId: model.id };
+    }
+    return false;
+});
 const viewerMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
         uiManager.isMobileView = node.clientWidth <= 576;
@@ -56,6 +66,7 @@ const variables = $derived.by(() => {
     {#if uiManager.showAttachments && model.attachments}
       <AttachmentsHorizontal
         model={model}
+        trackingParams={trackingParams}
         uiManager={uiManager}
         on={{
           productClick: on?.productClick,

package/dist/posts/post-viewer/cmp.post-viewer.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Locale } from '../../core/locale';
+import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 type Props = {
     model: PostModel;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    trackingParams: TrackingParams | null | false;
     enableAttachments?: boolean;
     enableControls?: boolean;
     autoplay?: true | false | 'on-appearance';

package/dist/posts/post-viewer/mapper.js

@@ -1,9 +1,10 @@
-import { MediaType } from '../../core/enums';
+import { MediaType, PostType } from '../../core/enums';
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../../products/price-helper';
 export const mapToPostModel = (payload) => {
     return {
         id: payload.id,
+        postType: mapToPostType(payload.postData),
         media: mapToPostViewerMediaModel(payload.postData),
         mediaFit: mediaFitFromPostType(payload.postData),
         kicker: extractPostKicker(payload.postData),
@@ -22,6 +23,22 @@ export const mapToPostModel = (payload) => {
         // )
     };
 };
+const mapToPostType = (payload) => {
+    switch (true) {
+        case !!payload.shortVideoData:
+            return PostType.ShortVideo;
+        case !!payload.momentData:
+            return PostType.Moment;
+        case !!payload.articleData:
+            return PostType.Article;
+        case !!payload.videoData:
+            return PostType.Video;
+        case !!payload.mediaData:
+            return PostType.Media;
+        default:
+            return null;
+    }
+};
 const mediaFitFromPostType = (payload) => {
     return payload.shortVideoData || payload.momentData ? 'cover' : 'contain';
 };

package/dist/products/product-card/cmp.product-card.svelte

@@ -1,9 +1,10 @@
-<script lang="ts">import { toPriceRepresentation } from '../price-helper';
+<script lang="ts">import { enrichProductLinkWithTracking } from '../../marketing-tracking';
+import { toPriceRepresentation } from '../price-helper';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
-let { product, includeBeforeNowPrefix, inert = false, locale = 'en', on } = $props();
+let { product, includeBeforeNowPrefix, trackingParams, inert = false, locale = 'en', on } = $props();
 const localization = $derived(new ProductCardLocalization(locale));
 const shortDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const trackImpression = (node) => {
@@ -25,16 +26,16 @@ const trackImpression = (node) => {
         };
     }
 };
+const enrichedLink = $derived(product.link ? enrichProductLinkWithTracking({ link: product.link, productId: product.id, trackingParams }) : null);
 const onProductClicked = (event) => {
     event.preventDefault();
     event.stopPropagation();
     if (on === null || on === void 0 ? void 0 : on.click) {
         on.click(product.id);
     }
-    if (!product.link) {
-        return;
+    if (enrichedLink) {
+        window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
-    window.open(product.link, '_blank', 'noopener noreferrer');
 };
 </script>
 
@@ -68,8 +69,10 @@ const onProductClicked = (event) => {
     </div>
   </div>
 
-  {#if product.link || on?.click}
-    <a href={product.link} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
+  {#if enrichedLink}
+    <a href={enrichedLink.href} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
+  {:else if on?.click}
+    <button type="button" onclick={onProductClicked} class="product-card__link" aria-label="none">&nbsp;</button>
   {/if}
 </div>
 

package/dist/products/product-card/cmp.product-card.svelte.d.ts

@@ -1,10 +1,12 @@
 import type { Locale } from '../../core/locale';
+import { type TrackingParams } from '../../marketing-tracking';
 import type { ProductCardModel } from './types';
 type Props = {
     product: ProductCardModel;
     locale?: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
+    trackingParams: TrackingParams;
     on?: {
         click?: (id: string) => void;
         impression?: (id: string) => void;

package/dist/products/product-card/mapper.d.ts

@@ -1,3 +1,5 @@
 import type { ProductCardPayloadFragment } from './operations.generated';
 import type { ProductCardModel } from './types';
-export declare const mapToProductCard: (payload: ProductCardPayloadFragment, referenceDate?: string | null) => ProductCardModel;
+export declare const mapToProductCard: (payload: ProductCardPayloadFragment, options?: Partial<{
+    referenceDate: string | null;
+}>) => ProductCardModel;

package/dist/products/product-card/mapper.js

@@ -1,12 +1,12 @@
 import { getMediaItemImageUrl } from '../../core/media';
 import { shouldUseSalePrice } from '../price-helper';
-export const mapToProductCard = (payload, referenceDate) => {
+export const mapToProductCard = (payload, options) => {
     const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
         price: payload.priceAndAvailability.price,
         salePrice: x.salePrice,
         effectiveDateFrom: x.salePriceEffectiveDateFrom,
         effectiveDateTo: x.salePriceEffectiveDateTo,
-        referenceDate
+        referenceDate: options?.referenceDate
     }));
     return {
         id: payload.id,

package/dist/streams/layout/cmp.slot-content.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">import { Utils } from '../../core/utils';
+import { enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
-let { model, locale, on } = $props();
+let { model, locale, trackingParams, on } = $props();
 const component = $derived.by(() => {
     return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
 });
@@ -27,6 +28,13 @@ const productModel = $derived.by(() => {
     var _a;
     return ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type) === StreamComponentDataType.Product ? model.data.product : undefined;
 });
+const enrichedLink = $derived((productModel === null || productModel === void 0 ? void 0 : productModel.link)
+    ? enrichProductLinkWithTracking({
+        link: productModel.link,
+        productId: productModel.id,
+        trackingParams
+    })
+    : null);
 const handleProductClick = (e) => {
     e.preventDefault();
     if (!productModel) {
@@ -35,8 +43,8 @@ const handleProductClick = (e) => {
     if (productModel.id && (on === null || on === void 0 ? void 0 : on.productClick)) {
         on.productClick(productModel.id);
     }
-    if (productModel.link) {
-        window.open(productModel.link, '_blank', 'noopener noreferrer');
+    if (enrichedLink) {
+        window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
 const productLinkMounted = (node, productModel) => {
@@ -65,14 +73,14 @@ const productLinkMounted = (node, productModel) => {
 {#snippet slotContent()}
   {#if component && (!model.data || dataIsFilled)}
     {#each component.elements as element (element)}
-      <StreamElementView model={element} data={model.data} locale={locale} on={on} />
+      <StreamElementView model={element} data={model.data} trackingParams={trackingParams} locale={locale} on={on} />
     {/each}
   {/if}
 {/snippet}
-{#if productModel?.link}
+{#if productModel && enrichedLink}
   <a
     class="stream-slot-content-product-link"
-    href={productModel.link}
+    href={enrichedLink.href}
     onclick={handleProductClick}
     target="_blank"
     rel="noopener noreferrer"

package/dist/streams/layout/cmp.slot-content.svelte.d.ts

@@ -1,8 +1,10 @@
 import type { Locale } from '../../core/locale';
+import type { StreamTrackingParams } from './types';
 import type { StreamSlot } from './slot';
 type Props = {
     model: StreamSlot;
     locale: Locale;
+    trackingParams: StreamTrackingParams;
     on?: {
         productClick: (productId: string) => void;
         productImpression?: (productId: string) => void;

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

@@ -1,11 +1,16 @@
 <script lang="ts">import { StreamElementStyleDirection } from '../enums';
 import { generateContainerStyles } from '../styles-transformer';
 import { default as StreamElement } from './cmp.stream-element.svelte';
-let { model, data, locale } = $props();
+let { model, data, trackingParams, locale } = $props();
 </script>
 
 <div class="container-stream-element" style={generateContainerStyles(model.styles)}>
   {#each model.elements as element (element)}
-    <StreamElement model={element} data={data} constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical} locale={locale} />
+    <StreamElement
+      model={element}
+      data={data}
+      trackingParams={trackingParams}
+      constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical}
+      locale={locale} />
   {/each}
 </div>

package/dist/streams/layout/element-views/cmp.container-stream-element.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Locale } from '../../../core/locale';
+import type { StreamTrackingParams } from '..';
 import type { ContainerStreamElementModel } from '../elements';
 import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: ContainerStreamElementModel;
     data: StreamSlotData | null;
+    trackingParams: StreamTrackingParams;
     locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -2,8 +2,14 @@
 import { PostViewer } from '../../../posts/post-viewer';
 import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToPostModel } from '../models';
-let { data, locale, on } = $props();
+let { data, trackingParams, locale, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(locale));
 </script>
 
-<PostViewer model={new PostModel(mapToPostModel(data))} autoplay={false} enableControls={false} locale={localization.shortVideoViewerLocale} on={on} />
+<PostViewer
+  model={new PostModel(mapToPostModel(data))}
+  trackingParams={trackingParams ? { streamId: trackingParams.streamId, campaignId: trackingParams.campaignId } : false}
+  autoplay={false}
+  enableControls={false}
+  locale={localization.shortVideoViewerLocale}
+  on={on} />

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

@@ -1,7 +1,9 @@
 import type { Locale } from '../../../core/locale';
+import type { StreamTrackingParams } from '..';
 import { type StreamLayoutShortVideoModel } from '../models';
 type Props = {
     data: StreamLayoutShortVideoModel;
+    trackingParams: StreamTrackingParams;
     locale: Locale;
     on?: {
         progress?: (progress: number) => void;

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
 import { StreamElementLocalization } from './stream-element-localization';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
-let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, locale, on } = $props();
+let { model, data, trackingParams, constainerDirection = StreamElementStyleDirection.Vertical, locale, on } = $props();
 const localization = $derived(new StreamElementLocalization(locale));
 const shortVideoModel = $derived.by(() => {
     if (!data) {
@@ -44,7 +44,7 @@ const productModel = $derived.by(() => {
 {#if model.type === StreamElementType.Annotation}
   <AnnotationStreamElementView model={model} />
 {:else if model.type === StreamElementType.Container}
-  <ContainerStreamElementView model={model} data={data} locale={locale} />
+  <ContainerStreamElementView model={model} data={data} trackingParams={trackingParams} locale={locale} />
 {:else if model.type === StreamElementType.ImageRef && data}
   <ImageRefStreamElementView model={model} data={data} />
 {:else if model.type === StreamElementType.Images && imagesModel?.length}
@@ -54,6 +54,7 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
   <ShortVideoStreamElementView
     data={shortVideoModel}
+    trackingParams={trackingParams}
     locale={localization.shortVideoElementLocalization}
     on={on
       ? {

package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts

@@ -1,10 +1,12 @@
 import type { Locale } from '../../../core/locale';
+import type { StreamTrackingParams } from '..';
 import type { StreamElementModel } from '../elements';
 import { StreamElementStyleDirection } from '../enums';
 import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: StreamElementModel;
     data: StreamSlotData | null;
+    trackingParams: StreamTrackingParams;
     constainerDirection?: StreamElementStyleDirection;
     locale: Locale;
     on?: {

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

@@ -7,6 +7,7 @@ export { default as StreamLayoutSlot } from './cmp.slot.svelte';
 export { default as StreamLayoutSlotContent } from './cmp.slot-content.svelte';
 export * from './layout';
 export * from './svg-attributes';
+export type { StreamTrackingParams } from './types';
 export { parseToStreamLayout, parseToStreamLayoutTemplate, stringifyToStreamLayoutInput, IdPopulator } from './serializer.svelte';
 export declare const getAllowedDataTypesForSlot: (slot: StreamSlot) => StreamComponentDataType[];
 export declare const getSingleShortVideoFromLayout: (layout: StreamLayout) => StreamLayoutShortVideoModel | null;

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

@@ -1,8 +1,9 @@
-import { MediaType } from '../../../core/enums';
+import { MediaType, PostType } from '../../../core/enums';
 import {} from '../../../posts/model';
 export const mapToPostModel = (model) => {
     return {
         id: model.id,
+        postType: PostType.ShortVideo,
         media: [
             model.media.type === MediaType.Image
                 ? { isImage: true, url: model.media.url }

package/dist/streams/layout/serializer.svelte.js

@@ -79,7 +79,6 @@ export class IdPopulator {
     }
     static populateElementId(element) {
         element.$id = nanoid(10);
-        // Рекурсивно обрабатываем дочерние элементы
         if (element.type === StreamElementType.Container && element.elements) {
             element.elements.forEach((element) => IdPopulator.populateElementId(element));
         }

package/dist/streams/layout/types.d.ts

@@ -0,0 +1,4 @@
+export type StreamTrackingParams = {
+    streamId: string;
+    campaignId?: string;
+} | false;

package/dist/streams/layout/types.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, locale, on } = $props();
+let { page, trackingParams, locale, on } = $props();
 const localization = $derived(new StreamPageViewerLocalization(locale));
 </script>
 
@@ -8,7 +8,7 @@ const localization = $derived(new StreamPageViewerLocalization(locale));
   <StreamPageLayout model={page.layout}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} on={on} locale={localization.elementsLocale} />
+        <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} locale={localization.elementsLocale} />
       </StreamLayoutSlot>
     {/each}
   </StreamPageLayout>

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { Locale } from '../../core/locale';
+import { type StreamTrackingParams } from '../layout';
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
+    trackingParams: StreamTrackingParams;
     locale: Locale;
     on?: {
         productClick: (productId: string) => void;

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

@@ -29,9 +29,6 @@ let isActive = true;
 let activityTimeout = null;
 let trackingInterval = null;
 let maxPageIndexViewed = 0;
-if (amplificationParameters) {
-    console.warn(`amplificationParameters: ${JSON.stringify(amplificationParameters)}`);
-}
 $effect(() => {
     void streamId;
     untrack(() => {
@@ -51,6 +48,20 @@ $effect(() => {
     };
 });
 $effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
+$effect(() => contentPlayerConfig.updateTrackingParams(currentStreamModel
+    ? {
+        streamId: currentStreamModel.id,
+        campaignId: amplificationParameters === null || amplificationParameters === void 0 ? void 0 : amplificationParameters.campaignId
+    }
+    : null));
+const streamTrackingParams = $derived.by(() => {
+    return currentStreamModel
+        ? {
+            streamId: currentStreamModel.id,
+            campaignId: amplificationParameters === null || amplificationParameters === void 0 ? void 0 : amplificationParameters.campaignId
+        }
+        : false;
+});
 const initNewStream = (streamId) => __awaiter(void 0, void 0, void 0, function* () {
     var _a, _b;
     const stream = yield dataProvider.getStream(streamId);
@@ -201,6 +212,7 @@ const stopActivityTracking = () => {
     {#if item.type === 'general'}
       <StreamPageViewer
         page={item}
+        trackingParams={streamTrackingParams}
         locale={localization.locale}
         on={{
           progress: (videoId, progress) => onProgress(item.id, videoId, progress),

package/dist/ui/video/cmp.video.svelte

@@ -317,7 +317,7 @@ const handleSeek = (percent) => {
   --_video--background-color: var(--video--background-color, #000000);
   --_video--border-radius: var(--video--border-radius, 0);
   --_video--media-fit: var(--video--media-fit, contain);
-  --_video--poster--media-fit: var(--video--poster--media-fit, cover);
+  --_video--poster--media-fit: var(--video--poster--media-fit, contain);
   height: 100%;
   min-height: 100%;
   max-height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "8.1.0",
+  "version": "8.3.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",