@streamscloud/embeddable 6.5.0 → 6.5.2

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

@@ -2,10 +2,36 @@
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, inert = false } = $props();
+import { onMount } from 'svelte';
+let { ad, inert = false, on } = $props();
+let adElement;
+onMount(() => {
+    if (adElement && (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(ad.id);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, { threshold: 0.5 });
+        observer.observe(adElement);
+        return () => {
+            observer.disconnect();
+        };
+    }
+});
+const handleAdClick = () => {
+    if (on === null || on === void 0 ? void 0 : on.adClick) {
+        on.adClick(ad.id);
+    }
+    if (ad.ctaButton) {
+        window.open(ad.ctaButton.url, '_blank');
+    }
+};
 </script>
 
-<div class="ad-card" inert={inert}>
+<div class="ad-card" inert={inert} bind:this={adElement}>
   <div class="ad-card__image">
     <Image src={ad.image} alt={ad.title} />
   </div>
@@ -37,7 +63,7 @@ let { ad, inert = false } = $props();
         <div class="ad-card__button">
           <Button
             size={ButtonSize.Standard}
-            on={{ click: () => ad.ctaButton && window.open(ad.ctaButton.url, '_blank') }}
+            on={{ click: handleAdClick }}
             --button--font--size="1em"
             --button--font--color={ad.ctaButton.textColor}
             --button--background={ad.ctaButton.background}

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

@@ -2,6 +2,10 @@ import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
     inert?: boolean;
+    on?: {
+        adClick?: (adId: string) => void;
+        impression?: (adId: string) => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/products/price-helper.d.ts

@@ -1,7 +1,7 @@
 import { Currency } from '../core/enums';
-type CurrecyMode = 'none' | 'symbol' | 'code';
+type CurrencyMode = 'none' | 'symbol' | 'code';
 export type PriceRepresentationOptions = {
-    currencyMode?: CurrecyMode;
+    currencyMode?: CurrencyMode;
     missingFractionMode?: 'hide' | 'currency-placeholder' | 'zeros' | 'zeros-or-placeholder';
     locale?: string;
 };

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

@@ -13,6 +13,7 @@ const attachmentsToShow = $derived.by(() => {
         image: p.image,
         link: p.link,
         productId: p.id,
+        adId: null,
         price: {
             amount: p.salePrice || p.price,
             currency: p.currency
@@ -29,6 +30,7 @@ const attachmentsToShow = $derived.by(() => {
             image: a.image,
             link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
             productId: null,
+            adId: a.id,
             price: a.price && a.currency
                 ? {
                     amount: a.price,
@@ -47,6 +49,9 @@ const handleAttachmentClick = (attachment) => {
     if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
         on.productClick(attachment.productId);
     }
+    if (attachment.adId && (on === null || on === void 0 ? void 0 : on.adClick)) {
+        on.adClick(attachment.adId);
+    }
     if (attachment.link) {
         window.open(attachment.link, '_blank');
     }
@@ -54,7 +59,7 @@ const handleAttachmentClick = (attachment) => {
 let attachmentElements = $state({});
 let observer = null;
 $effect(() => {
-    if ((on === null || on === void 0 ? void 0 : on.productImpression) && Object.keys(attachmentElements).length > 0) {
+    if (((on === null || on === void 0 ? void 0 : on.productImpression) || (on === null || on === void 0 ? void 0 : on.adImpression)) && Object.keys(attachmentElements).length > 0) {
         if (observer) {
             observer.disconnect();
         }
@@ -62,15 +67,19 @@ $effect(() => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
                     const productId = entry.target.getAttribute('data-product-id');
-                    if (productId) {
+                    const adId = entry.target.getAttribute('data-ad-id');
+                    if (productId && (on === null || on === void 0 ? void 0 : on.productImpression)) {
                         on.productImpression(productId, model.id);
-                        observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
                     }
+                    else if (adId && (on === null || on === void 0 ? void 0 : on.adImpression)) {
+                        on.adImpression(adId);
+                    }
+                    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-')) {
+            if (element && (key.startsWith('product-') || key.startsWith('ad-'))) {
                 observer === null || observer === void 0 ? void 0 : observer.observe(element);
             }
         });
@@ -89,11 +98,13 @@ $effect(() => {
     <div
       class="attachments-horizontal__item"
       class:attachments-horizontal__item--single={attachmentsToShow.length === 1}
+      data-theme={attachment.isAd ? 'default' : 'dark'}
       onclick={() => handleAttachmentClick(attachment)}
       onkeydown={() => {}}
       role="none"
-      bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${index}`]}
-      data-product-id={attachment.productId || undefined}>
+      bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${attachment.adId}`]}
+      data-product-id={attachment.productId || undefined}
+      data-ad-id={attachment.adId || undefined}>
       <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1}>
         <div class="attachments-card__thumb">
           <ImageRounded src={attachment.image} alt="" noBorders={true} />
@@ -217,4 +228,7 @@ $effect(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+:global([data-theme="dark"]) .attachments-card__extra-info {
+  color: #ffffff;
 }</style>

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

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

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

@@ -9,7 +9,12 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
 {#if shortVideo.hasAttachments}
   <div class="short-video-attachments">
     {#if shortVideo.ad}
-      <AdCard ad={shortVideo.ad} />
+      <AdCard
+        ad={shortVideo.ad}
+        on={{
+          adClick: on?.adClick,
+          impression: on?.adImpression
+        }} />
     {/if}
 
     {#if shortVideo.products.length}

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

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

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

@@ -60,7 +60,9 @@ const trackControlsPanelSize = (node) => {
           model={model}
           on={{
             productClick: on?.productClick,
-            productImpression: on?.productImpression
+            productImpression: on?.productImpression,
+            adClick: on?.adClick,
+            adImpression: on?.adImpression
           }} />
       </div>
     {/if}

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

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

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

@@ -2,7 +2,7 @@ export declare class ShortVideoViewerUiManager {
     readonly globalCssVariables: string;
     readonly showAttachments: boolean;
     readonly showControls: boolean;
-    private controlsPanelWidht;
+    private controlsPanelWidth;
     private canShowControls;
     private canShowAttachments;
     private enableAttachments;

package/dist/short-videos/short-video-viewer/ui-manager.svelte.js

@@ -1,6 +1,6 @@
 export class ShortVideoViewerUiManager {
     globalCssVariables = $derived.by(() => {
-        const values = [`--_short-video-viewer--controls-panel--width: ${this.controlsPanelWidht}px`];
+        const values = [`--_short-video-viewer--controls-panel--width: ${this.controlsPanelWidth}px`];
         return values.join(';');
     });
     showAttachments = $derived.by(() => {
@@ -9,7 +9,7 @@ export class ShortVideoViewerUiManager {
     showControls = $derived.by(() => {
         return this.canShowControls;
     });
-    controlsPanelWidht = $state(0);
+    controlsPanelWidth = $state(0);
     // is provided from the calling side
     canShowControls = $state(false);
     // is provided from the calling side
@@ -26,6 +26,6 @@ export class ShortVideoViewerUiManager {
         this.enableAttachments = !this.enableAttachments;
     };
     setControlsPanelWidth(value) {
-        this.controlsPanelWidht = value;
+        this.controlsPanelWidth = value;
     }
 }

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

@@ -74,7 +74,9 @@ const trackNavigationButtonsSize = (node) => {
               localization={localization.shortVideoAttachmentsLocalization}
               on={{
                 productClick: on.productClick,
-                productImpression: on.productImpression
+                productImpression: on.productImpression,
+                adClick: on.adClick,
+                adImpression: on.adImpression
               }} />
           </div>
         {/if}

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

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

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

@@ -5,4 +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;
 }

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

@@ -10,4 +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);
 }

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

@@ -97,6 +97,12 @@ const onShortVideoProductClick = (productId, videoId) => {
 const onShortVideoProductImpression = (productId, videoId) => {
     analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
 };
+const onShortVideoAdClick = (adId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(adId);
+};
+const onShortVideoAdImpression = (adId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(adId);
+};
 </script>
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
@@ -140,7 +146,9 @@ const onShortVideoProductImpression = (productId, videoId) => {
                 localization={localization.shortVideoViewerLocalization}
                 on={{
                   productClick: (productId) => onShortVideoProductClick(productId, item.id),
-                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
+                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
+                  adClick: onShortVideoAdClick,
+                  adImpression: onShortVideoAdImpression
                 }} />
             {/snippet}
           </PlayerSlider>
@@ -158,7 +166,9 @@ const onShortVideoProductImpression = (productId, videoId) => {
         on={{
           closePlayer: on?.playerClosed,
           productClick: (productId) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
-          productImpression: onShortVideoProductImpression
+          productImpression: onShortVideoProductImpression,
+          adClick: onShortVideoAdClick,
+          adImpression: onShortVideoAdImpression
         }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />

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

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

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -9,7 +9,7 @@ export declare class ShortVideosPlayerUiManager {
     private _mainViewColumnWidth;
     private _mediaCenterHeaderHeight;
     private _controlsAttachmentsPanelWidth;
-    private _controlsNavitagionButtonsWidth;
+    private _controlsNavigationButtonsWidth;
     private _controlsAvailableSpace;
     private _controlsContentWidth;
     get viewTotalWidth(): number;

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -17,12 +17,12 @@ export class ShortVideosPlayerUiManager {
     isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
     viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
     showShortVideoOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
-    showShortVideoOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavitagionButtonsWidth);
+    showShortVideoOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavigationButtonsWidth);
     _viewTotalWidth = $state(0);
     _mainViewColumnWidth = $state(0);
     _mediaCenterHeaderHeight = $state(0);
     _controlsAttachmentsPanelWidth = $state(0);
-    _controlsNavitagionButtonsWidth = $state(0);
+    _controlsNavigationButtonsWidth = $state(0);
     _controlsAvailableSpace = $derived.by(() => (this._viewTotalWidth - this._mainViewColumnWidth) / 2);
     _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
     get viewTotalWidth() {
@@ -42,6 +42,6 @@ export class ShortVideosPlayerUiManager {
         this._controlsAttachmentsPanelWidth = width;
     };
     setNavigationButtonsBlockWidth = (width) => {
-        this._controlsNavitagionButtonsWidth = width;
+        this._controlsNavigationButtonsWidth = width;
     };
 }

package/package.json

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