@streamscloud/embeddable 6.3.4-1757324420366 → 6.3.5

package/dist/media-center/data-provider/operations.generated.d.ts

@@ -28,6 +28,9 @@ export type GetShortVideosQuery = {
         items: Array<{
             id: string;
             enableSocialInteractions: boolean;
+            ownerProfile: {
+                id: string;
+            };
             allProducts: Array<{
                 id: string;
                 title: string;

package/dist/media-center/data-provider/operations.generated.js

@@ -127,6 +127,11 @@ export const GetShortVideosDocument = {
                 selections: [
                     { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ownerProfile' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }] }
+                    },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte

@@ -1,18 +1,82 @@
 <script lang="ts">import { Icon, IconColor } from '../../ui/icon';
 import { ImageRounded } from '../../ui/image';
 import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
-let { model } = $props();
+import { onMount } from 'svelte';
+let { model, on } = $props();
 const attachmentsToShow = $derived.by(() => {
-    const products = model.products.filter((p) => !!p.image).map((p) => ({ isAd: false, image: p.image, link: p.link }));
-    const ads = (model.ad ? [model.ad] : []).filter((a) => !!a.image).map((a) => { var _a; return ({ isAd: true, image: a.image, link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null }); });
-    return [...products, ...ads];
+    const products = model.products
+        .filter((p) => !!p.image)
+        .map((p) => ({
+        isAd: false,
+        image: p.image,
+        link: p.link,
+        productId: p.id
+    }));
+    const ads = (model.ad ? [model.ad] : [])
+        .filter((a) => !!a.image)
+        .map((a) => {
+        var _a;
+        return ({
+            isAd: true,
+            image: a.image,
+            link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
+            productId: null
+        });
+    });
+    const result = [...products, ...ads];
+    return result;
+});
+const handleAttachmentClick = (attachment) => {
+    if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
+        on.productClick(attachment.productId);
+    }
+    if (attachment.link) {
+        window.open(attachment.link, '_blank');
+    }
+};
+let attachmentElements = {};
+let observer = null;
+$effect(() => {
+    if ((on === null || on === void 0 ? void 0 : on.productImpression) && Object.keys(attachmentElements).length > 0) {
+        if (observer) {
+            observer.disconnect();
+        }
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
+                    const productId = entry.target.getAttribute('data-product-id');
+                    if (productId) {
+                        on.productImpression(productId, model.id);
+                        observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
+                    }
+                }
+            });
+        }, { threshold: 0.1 });
+        Object.entries(attachmentElements).forEach(([key, element]) => {
+            if (element && key.startsWith('product-')) {
+                observer === null || observer === void 0 ? void 0 : observer.observe(element);
+            }
+        });
+    }
+    return () => {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+    };
 });
 </script>
 
 <div class="attachments-inline-container">
   <div class="attachments-inline">
-    {#each attachmentsToShow as attachment (attachment)}
-      <div class="attachments-inline__item" onclick={() => attachment.link && window.open(attachment.link, '_blank')} onkeydown={() => {}} role="none">
+    {#each attachmentsToShow as attachment, index (attachment)}
+      <div
+        class="attachments-inline__item"
+        onclick={() => handleAttachmentClick(attachment)}
+        onkeydown={() => {}}
+        role="none"
+        bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${index}`]}
+        data-product-id={attachment.productId || undefined}>
         <ImageRounded src={attachment.image} alt="" />
         {#if attachment.isAd}
           <div class="attachments-inline__item-icon">

package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
+    on?: {
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { AdCard } from '../../ads/ad-card';
-import { ProductCard } from '../../products/product-card';
+import { default as ShortVideoProductCard } from './cmp.short-video-product-card.svelte';
 import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import {} from './types';
 let { shortVideo, localization: localizationInit = 'en', on } = $props();
@@ -14,7 +14,14 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
 
     {#if shortVideo.products.length}
       {#each shortVideo.products as product (product.id)}
-        <ProductCard product={product} localization={localization.productLocalization} on={on} />
+        <ShortVideoProductCard
+          product={product}
+          videoId={shortVideo.id}
+          localization={localization.productLocalization}
+          on={{
+            productClick: on?.productClick,
+            impression: on?.productImpression
+          }} />
       {/each}
     {/if}
   </div>

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts

@@ -6,6 +6,7 @@ type Props = {
     localization?: IShortVideoAttachmentsLocalization | Locale;
     on?: {
         productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-video-viewer/cmp.short-video-product-card.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import { ProductCard } from '../../products/product-card';
+import { onMount } from 'svelte';
+let { product, videoId, localization, includeBeforeNowPrefix, inert = false, on } = $props();
+let productElement;
+const productData = product;
+onMount(() => {
+    if (productElement && (on === null || on === void 0 ? void 0 : on.impression)) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.impression(product.id, videoId);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(productElement);
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
+</script>
+
+<div bind:this={productElement}>
+  <ProductCard product={productData} localization={localization} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
+</div>

package/dist/short-videos/short-video-viewer/cmp.short-video-product-card.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Locale } from '../../core/locale';
+import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
+import type { ShortVideoProductCardModel } from './types';
+type Props = {
+    product: ShortVideoProductCardModel;
+    videoId: string;
+    localization?: IProductCardLocalization | Locale;
+    includeBeforeNowPrefix?: boolean;
+    inert?: boolean;
+    on?: {
+        productClick?: (id: string) => void;
+        impression?: (productId: string, videoId: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -36,7 +36,12 @@ $effect(() => {
 
   <div class="short-video-viewer__actions-panel" class:short-video-viewer__actions-panel--inside-frame={true}>
     {#if uiManager.showAttachments}
-      <AttachmentsInline model={model} />
+      <AttachmentsInline
+        model={model}
+        on={{
+          productClick: on?.productClick,
+          productImpression: on?.productImpression
+        }} />
     {/if}
     {#if uiManager.showControls}
       <ShortVideoControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts

@@ -10,6 +10,8 @@ type Props = {
     localization?: IShortVideoViewerLocalization | Locale;
     on?: {
         progress?: (progress: number) => void;
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-video-viewer/mapper.js

@@ -8,6 +8,7 @@ export const mapToShortVideoViewerModel = (payload) => {
     }
     return {
         id: payload.id,
+        organizationId: payload.ownerProfile.id,
         media: mediaBlob.type === MediaType.Image
             ? { isImage: true, url: mediaBlob.url }
             : {

package/dist/short-videos/short-video-viewer/operations.generated.d.ts

@@ -3,6 +3,9 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 export type ShortVideoViewerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
+    ownerProfile: {
+        id: string;
+    };
     allProducts: Array<{
         id: string;
         title: string;

package/dist/short-videos/short-video-viewer/operations.generated.js

@@ -10,6 +10,11 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                 selections: [
                     { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ownerProfile' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }] }
+                    },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },

package/dist/short-videos/short-video-viewer/operations.graphql

@@ -1,6 +1,9 @@
 fragment ShortVideoViewerPayloadFragment on Post {
   id
   enableSocialInteractions
+  ownerProfile {
+    id
+  }
   allProducts {
     id
     title

package/dist/short-videos/short-video-viewer/types.d.ts

@@ -1,6 +1,7 @@
 import { AdType, type Currency } from '../../core/enums';
 export type ShortVideoViewerModel = {
     id: string;
+    organizationId: string;
     media: {
         isImage: true;
         url: string;

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

@@ -1,7 +1,7 @@
 <script lang="ts">import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { createShadowRoot } from '../../ui/shadow-dom';
 import { mount, unmount } from 'svelte';
-let { dataProvider, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, on, mediaCenterDataProvider } = $props();
+let { dataProvider, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, analyticsHandler, on, mediaCenterDataProvider } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(MediaCenter, {
@@ -16,6 +16,7 @@ const initHost = (node) => {
                     disableBackground,
                     localization,
                     showStreamsCloudWatermark,
+                    analyticsHandler,
                     on
                 }
             }

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

@@ -50,7 +50,8 @@ const changeShowAttachments = () => {
             shortVideo={shortVideo}
             localization={localization.shortVideoAttachmentsLocalization}
             on={{
-              productClick: on.productClick
+              productClick: on.productClick,
+              productImpression: on.productImpression
             }} />
         </div>
       {/if}

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

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

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

@@ -3,9 +3,9 @@ import type { ShortVideoViewerModel } from '../short-video-viewer';
 import type { IPlayerItemsProvider } from '../../ui/player';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import { type PlayerSettings } from './types';
+import { type PlayerSettings, type IShortVideoAnalyticsHandler } from './types';
 export { ShortVideosPlayer };
-export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider };
+export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
 /**
  * Opens the short videos player modal.
  *

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

@@ -3,6 +3,7 @@ import { InternalMediaCenterDataProvider } from '../../media-center/data-provide
 import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
+import { InternalShortVideoAnalyticsHandler } from './internal-short-video-analytics-handler';
 import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import {} from './types';
 import { mount, unmount } from 'svelte';
@@ -21,6 +22,10 @@ export function openShortVideosPlayer(init) {
     if (!mediaCenterDataProvider && init.mediaPageId) {
         mediaCenterDataProvider = new InternalMediaCenterDataProvider(init.mediaPageId, graphqlOrigin);
     }
+    let analyticsHandler = init.analyticsHandler;
+    if (!analyticsHandler && !init.shortVideosProvider && initiator) {
+        analyticsHandler = new InternalShortVideoAnalyticsHandler(graphqlOrigin);
+    }
     const shadowHost = new ModalShadowHost();
     const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
@@ -34,6 +39,7 @@ export function openShortVideosPlayer(init) {
                     disableBackground,
                     localization,
                     showStreamsCloudWatermark,
+                    analyticsHandler,
                     on: {
                         playerClosed: async () => {
                             await unmount(mounted);

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

@@ -0,0 +1,8 @@
+import type { IShortVideoAnalyticsHandler } from './types';
+export declare class InternalShortVideoAnalyticsHandler implements IShortVideoAnalyticsHandler {
+    constructor(graphqlOrigin: string | undefined);
+    setOrganizationId: (organizationId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
+}

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

@@ -0,0 +1,21 @@
+import { getOrCreateProfileId } from '../../core/analytics.profile-id';
+import { constructGraphQLUrl } from '../../core/graphql';
+import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+export class InternalShortVideoAnalyticsHandler {
+    constructor(graphqlOrigin) {
+        AppEventsTracker.setEndpoint(constructGraphQLUrl(graphqlOrigin));
+        AppEventsTracker.setProfileId(getOrCreateProfileId());
+    }
+    setOrganizationId = (organizationId) => {
+        AppEventsTracker.setOrganizationId(organizationId);
+    };
+    trackShortVideoView = (videoId) => {
+        AppEventsTracker.trackShortVideoView(videoId);
+    };
+    trackShortVideoProductImpression = (productId, videoId) => {
+        AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
+    };
+    trackShortVideoProductClicked = (productId, videoId) => {
+        AppEventsTracker.trackShortVideoProductClick(productId, videoId);
+    };
+}

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

@@ -3,7 +3,6 @@ import type { IPlayerItemsProvider } from '../../ui/player';
 export declare class InternalShortVideoPlayerProvider implements IPlayerItemsProvider<ShortVideoViewerModel> {
     initialData: IPlayerItemsProvider<ShortVideoViewerModel>['initialData'];
     private ids;
-    private idOrder;
     private initialId?;
     private graphql;
     private dataLoader;

package/dist/short-videos/short-videos-player/internal-short-video-player-provider.js

@@ -4,25 +4,21 @@ import { CursorDataLoader } from '../../core/data-loaders';
 import { createLocalGQLClient } from '../../core/graphql';
 import { mapToShortVideoViewerModel } from '../short-video-viewer';
 import { GetShortVideosDocument } from './operations.generated';
-const CHUNK_SIZE = 20;
 export class InternalShortVideoPlayerProvider {
     initialData;
     ids;
-    idOrder = new Map();
     initialId;
     graphql;
     dataLoader = new CursorDataLoader({
         loadPage: async (continuationToken) => {
-            const startIdIndex = continuationToken.value ? parseInt(continuationToken.value, 10) : 0;
-            const endIdIndex = Math.min(startIdIndex + CHUNK_SIZE, this.ids.length);
-            const idsChunk = this.ids.slice(startIdIndex, endIdIndex);
             try {
                 const payload = await this.graphql
                     .query(GetShortVideosDocument, {
                     input: {
-                        limit: idsChunk.length,
+                        limit: 20,
+                        continuationToken,
                         filter: {
-                            ids: idsChunk
+                            ids: this.ids
                         }
                     },
                     image_scale: ImageScale.OriginalEncoded
@@ -32,14 +28,9 @@ export class InternalShortVideoPlayerProvider {
                 if (!data) {
                     return null;
                 }
-                const items = data.items.map(mapToShortVideoViewerModel).sort((a, b) => {
-                    const ia = this.idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
-                    const ib = this.idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
-                    return ia - ib;
-                });
                 return {
-                    items,
-                    continuationToken: ContinuationToken.fromPayload(endIdIndex < this.ids.length ? endIdIndex.toString() : null)
+                    items: data.items.map(mapToShortVideoViewerModel),
+                    continuationToken: ContinuationToken.fromPayload(data.continuationToken)
                 };
             }
             catch {
@@ -51,7 +42,6 @@ export class InternalShortVideoPlayerProvider {
         const { ids, graphqlOrigin, initiator, initialId } = input;
         this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
         this.ids = ids;
-        ids.forEach((id, idx) => this.idOrder.set(id, idx));
         this.initialId = initialId;
         this.initialData = { prefetchedItems: [], startIndex: 0 };
     }

package/dist/short-videos/short-videos-player/operations.generated.d.ts

@@ -10,6 +10,9 @@ export type GetShortVideosQuery = {
         items: Array<{
             id: string;
             enableSocialInteractions: boolean;
+            ownerProfile: {
+                id: string;
+            };
             allProducts: Array<{
                 id: string;
                 title: string;

package/dist/short-videos/short-videos-player/operations.generated.js

@@ -53,6 +53,11 @@ export const GetShortVideosDocument = {
                 selections: [
                     { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                     { kind: 'Field', name: { kind: 'Name', value: 'enableSocialInteractions' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'ownerProfile' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'id' } }] }
+                    },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },

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

@@ -19,7 +19,7 @@ import { InternalShortVideoPlayerProvider } from './internal-short-video-player-
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
+let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 let everTouched = $state(false);
 let background = $state(null);
@@ -56,6 +56,8 @@ const onItemActivated = (id) => {
         return;
     }
     background = resolveVideoCover(shortVideo);
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(shortVideo.organizationId);
+    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) => {
@@ -87,6 +89,12 @@ 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.trackShortVideoProductClicked(productId, videoId);
+};
+const onShortVideoProductImpression = (productId, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
+};
 </script>
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
@@ -127,7 +135,11 @@ const onPlayerClose = () => {
                 autoplay="on-appearance"
                 showAttachments={uiManager.showShortVideoOverlay}
                 showControls={uiManager.showShortVideoOverlay}
-                localization={localization.shortVideoViewerLocalization} />
+                localization={localization.shortVideoViewerLocalization}
+                on={{
+                  productClick: (productId: string) => onShortVideoProductClick(productId, item.id),
+                  productImpression: (productId: string, videoId: string) => onShortVideoProductImpression(productId, videoId)
+                }} />
             {/snippet}
           </PlayerSlider>
           {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
@@ -141,7 +153,11 @@ const onPlayerClose = () => {
         localization={localization}
         socialInteractionsHandler={socialInteractionsHandler}
         playerLogo={playerLogo}
-        on={{ closePlayer: on?.playerClosed }} />
+        on={{
+          closePlayer: on?.playerClosed,
+          productClick: (productId: string) => onShortVideoProductClick(productId, buffer.current?.id || ''),
+          productImpression: onShortVideoProductImpression
+        }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
     {/if}

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

@@ -2,14 +2,22 @@ import type { Locale } from '../../core/locale';
 import type { ShortVideoViewerModel, IPostSocialInteractionsHandler } from '../short-video-viewer';
 import type { IPlayerItemsProvider } from '../../ui/player';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
+export interface IShortVideoAnalyticsHandler {
+    setOrganizationId: (organizationId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
+}
 export type ShortVideoPlayerProps = PlayerSettings & {
     dataProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
+    analyticsHandler?: IShortVideoAnalyticsHandler;
 };
 export type PlayerSettings = {
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     disableBackground?: boolean;
     localization?: IShortVideosPlayerLocalization | Locale;
     showStreamsCloudWatermark?: boolean;
+    analyticsHandler?: IShortVideoAnalyticsHandler;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;

package/dist/streams/cmp.stream-product-card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">import { ProductCard } from '../products/product-card';
+import { onMount } from 'svelte';
+let { product, streamId, localization, includeBeforeNowPrefix, inert = false, on } = $props();
+let productElement;
+onMount(() => {
+    if (productElement && (on === null || on === void 0 ? void 0 : on.impression)) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.impression(product.id, streamId);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(productElement);
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
+</script>
+
+<div bind:this={productElement}>
+  <ProductCard product={product} localization={localization} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
+</div>

package/dist/streams/cmp.stream-product-card.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Locale } from '../core/locale';
+import type { IProductCardLocalization } from '../products/product-card/product-card-localization';
+import type { ProductCardModel } from '../products/product-card/types';
+type Props = {
+    product: ProductCardModel;
+    streamId: string;
+    localization?: IProductCardLocalization | Locale;
+    includeBeforeNowPrefix?: boolean;
+    inert?: boolean;
+    on?: {
+        productClick?: (id: string) => void;
+        impression?: (productId: string, streamId: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,6 +1,7 @@
 <script lang="ts">import { Utils } from '../../core/utils';
 import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
+import { onMount } from 'svelte';
 let { model, localization, on } = $props();
 const component = $derived.by(() => {
     return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
@@ -39,6 +40,23 @@ const handleProductClick = (e) => {
         window.open(productModel.link, '_blank', 'noopener noreferrer');
     }
 };
+let productElement = $state();
+onMount(() => {
+    if (productElement && (productModel === null || productModel === void 0 ? void 0 : productModel.id) && (on === null || on === void 0 ? void 0 : on.productImpression)) {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                    on.productImpression(productModel.id);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(productElement);
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
 </script>
 
 {#snippet slotContent()}
@@ -49,11 +67,19 @@ const handleProductClick = (e) => {
   {/if}
 {/snippet}
 {#if productModel?.link}
-  <a class="stream-slot-content-product-link" href={productModel.link} onclick={handleProductClick} target="_blank" rel="noopener noreferrer">
+  <a
+    class="stream-slot-content-product-link"
+    href={productModel.link}
+    onclick={handleProductClick}
+    target="_blank"
+    rel="noopener noreferrer"
+    bind:this={productElement}>
     {@render slotContent()}
   </a>
 {:else}
-  {@render slotContent()}
+  <div bind:this={productElement}>
+    {@render slotContent()}
+  </div>
 {/if}
 
 <style>@keyframes fadeIn {

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

@@ -6,6 +6,7 @@ type Props = {
     localization: IStreamElementLocalization | Locale;
     on?: {
         productClick: (productId: string) => void;
+        productImpression?: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
 };

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

@@ -2,6 +2,7 @@ import { MediaType } from '../../../core/enums';
 export const mapToShortVideoViewerModel = (model) => {
     return {
         id: model.id,
+        organizationId: model.organizationId,
         media: model.media.type === MediaType.Image
             ? { isImage: true, url: model.media.url }
             : {

package/dist/streams/layout/models/stream-layout-short-video-model.d.ts

@@ -3,6 +3,7 @@ import type { StreamLayoutMediaItemModel } from './stream-layout-media-item-mode
 import type { StreamLayoutPostHeaderModel } from './stream-layout-post-header-model';
 export type StreamLayoutShortVideoModel = {
     id: string;
+    organizationId: string;
     media: StreamLayoutMediaItemModel;
     text: string | null;
     header: StreamLayoutPostHeaderModel | null;

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

@@ -6,6 +6,7 @@ type Props = {
     localization: IStreamPageViewerLocalization | Locale;
     on?: {
         productClick: (productId: string) => void;
+        productImpression?: (productId: string) => void;
         progress?: (videoId: string, progress: number) => void;
     };
 };

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

@@ -82,7 +82,8 @@ const changeShowShortVideoAttachments = () => {
             shortVideo={shortVideo}
             localization={localization.shortVideoAttachmentsLocalization}
             on={{
-              productClick: on.productClick
+              productClick: on.productClick,
+              productImpression: on.productImpression
             }} />
         </div>
       {/if}

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

@@ -10,6 +10,7 @@ type Props = {
     on: {
         closePlayer: () => void;
         productClick?: (productId: string) => void;
+        productImpression?: (productId: string) => void;
     };
 };
 declare const Controls: import("svelte").Component<Props, {}, "">;

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

@@ -4,9 +4,13 @@ export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsH
     setOrganizationId: (organizationId: string) => void;
     trackStreamView: (streamId: string) => void;
     trackStreamPageView: (pageId: string, streamId: string) => void;
-    trackStreamProductClicked: (productId: string, streamId: string) => void;
     trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
     trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
+    trackStreamProductImpression: (productId: string, streamId: string) => void;
+    trackStreamProductClicked: (productId: string, streamId: string) => void;
     reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
     trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
 }

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

@@ -9,9 +9,13 @@ export class InternalStreamAnalyticsHandler {
     setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
     trackStreamView = (streamId) => AppEventsTracker.trackStreamView(streamId);
     trackStreamPageView = (pageId, streamId) => AppEventsTracker.trackStreamPageView(pageId, streamId);
-    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
     trackStreamEngagementTime = (streamId, engagementTime) => AppEventsTracker.trackStreamEngagementTime(streamId, engagementTime);
     trackStreamScrollDepth = (streamId, scrollDepth) => AppEventsTracker.trackStreamScrollDepth(streamId, scrollDepth);
+    trackStreamProductImpression = (productId, streamId) => AppEventsTracker.trackStreamProductImpression(productId, streamId);
+    trackStreamProductClicked = (productId, streamId) => AppEventsTracker.trackStreamProductClicked(productId, streamId);
     reportPageVideoViews = (videoId, streamId) => AppEventsTracker.reportPageVideoViews(videoId, streamId);
+    trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
+    trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
+    trackShortVideoProductClicked = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
     trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
 }

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

@@ -134,6 +134,9 @@ const onPageActivated = (id) => {
     background = (page === null || page === void 0 ? void 0 : page.cover) || null;
     if (page) {
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, streamId);
+        if (page.type === 'short-video' && page.shortVideo) {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(page.shortVideo.id);
+        }
         const currentIndex = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.findIndex((p) => p.id === id);
         if (currentIndex !== undefined && currentIndex > maxPageIndexViewed) {
             maxPageIndexViewed = currentIndex;
@@ -143,6 +146,15 @@ const onPageActivated = (id) => {
 const onProductCardClick = (productId) => {
     analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
 };
+const onShortVideoProductClick = (productId, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClicked(productId, videoId);
+};
+const onStreamProductImpression = (productId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductImpression(productId, streamId);
+};
+const onShortVideoProductImpression = (productId, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
+};
 const onPlayerClose = () => {
     var _a;
     stopActivityTracking();
@@ -191,13 +203,16 @@ const onProgress = (pageId, videoId, progress) => {
                   localization={localization.streamPageViewerLocalization}
                   on={{
                     progress: (videoId: String, progress: Number) => onProgress(item.id, videoId, progress),
-                    productClick: (productId: String) => onProductCardClick(productId)
+                    productClick: (productId: String) => onProductCardClick(productId),
+                    productImpression: (productId: String) => onStreamProductImpression(productId)
                   }} />
               {:else if item.type === 'short-video'}
                 <ShortVideoViewer
                   model={mapToShortVideoViewerModel(item.shortVideo)}
                   on={{
-                    progress: (progress) => onProgress(item.id, item.shortVideo.id, progress)
+                    progress: (progress) => onProgress(item.id, item.shortVideo.id, progress),
+                    productClick: (productId: string) => onShortVideoProductClick(productId, item.shortVideo.id),
+                    productImpression: (productId: string, videoId: string) => onShortVideoProductImpression(productId, videoId)
                   }}
                   autoplay="on-appearance"
                   socialInteractionsHandler={postSocialInteractionsHandler}
@@ -231,7 +246,8 @@ const onProgress = (pageId, videoId, progress) => {
         postSocialInteractionsHandler={postSocialInteractionsHandler}
         on={{
           closePlayer: () => onPlayerClose(),
-          productClick: (productId: String) => onProductCardClick(productId)
+          productClick: (productId: String) => onProductCardClick(productId),
+          productImpression: (productId: String) => onStreamProductImpression(productId)
         }} />
     {/if}
   </div>

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

@@ -44,9 +44,13 @@ export interface IStreamAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackStreamView: (streamId: string) => void;
     trackStreamPageView: (pageId: string, streamId: string) => void;
+    trackStreamProductImpression: (productId: string, streamId: string) => void;
     trackStreamProductClicked: (productId: string, streamId: string) => void;
     trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
     trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
     reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoView: (videoId: string) => void;
+    trackShortVideoProductImpression: (productId: string, videoId: string) => void;
+    trackShortVideoProductClicked: (productId: string, videoId: string) => void;
     trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "6.3.4-1757324420366",
+  "version": "6.3.5",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -11,9 +11,6 @@
     "dev": "vite dev --port 3010",
     "build": "svelte-package --tsconfig ./tsconfig.app.json  && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
     "build-publish": "npm run build && npm publish --access public",
-    "publish:prod": "npm run build && npm publish --access public --tag latest",
-    "version:dev": "node -e \"const fs=require('fs');const pkg=require('./package.json');const base=(pkg.version.includes('-')?pkg.version.split('-')[0]:pkg.version);pkg.version=base+'-'+Date.now();fs.writeFileSync('package.json',JSON.stringify(pkg,null,2)+'\\n');\"",
-    "publish:dev": "npm run build && npm run version:dev && npm publish --tag next && git checkout -- package.json",
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
@@ -111,7 +108,7 @@
   },
   "peerDependencies": {
     "@fluentui/svg-icons": "^1.1.292",
-    "@streamscloud/streams-analytics-collector": "^2.0.1",
+    "@streamscloud/streams-analytics-collector": "^2.0.9",
     "@urql/core": "^5.1.1",
     "dompurify": "^3.2.6",
     "mobile-detect": "^1.4.5",