@streamscloud/embeddable 6.4.1 → 6.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/ads/ad-card/cmp.ad-card.svelte +14 -2
  2. package/dist/ads/ad-card/cmp.ad-card.svelte.d.ts +3 -0
  3. package/dist/media-center/data-provider/internal-media-center-data-provider.svelte.js +2 -2
  4. package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte +18 -7
  5. package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte.d.ts +2 -0
  6. package/dist/short-videos/short-video-viewer/cmp.attachments.svelte +8 -2
  7. package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts +2 -0
  8. package/dist/short-videos/short-video-viewer/cmp.short-video-ad-card.svelte +26 -0
  9. package/dist/short-videos/short-video-viewer/cmp.short-video-ad-card.svelte.d.ts +13 -0
  10. package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte +3 -1
  11. package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts +2 -0
  12. package/dist/short-videos/short-videos-player/controls.svelte +11 -2
  13. package/dist/short-videos/short-videos-player/controls.svelte.d.ts +2 -0
  14. package/dist/short-videos/short-videos-player/index.d.ts +2 -2
  15. package/dist/short-videos/short-videos-player/index.js +2 -2
  16. package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.d.ts +2 -0
  17. package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.js +2 -0
  18. package/dist/short-videos/short-videos-player/internal-short-video-player-provider.js +2 -2
  19. package/dist/short-videos/short-videos-player/mapper.d.ts +1 -1
  20. package/dist/short-videos/short-videos-player/mapper.js +1 -1
  21. package/dist/short-videos/short-videos-player/short-videos-player-view.svelte +12 -2
  22. package/dist/short-videos/short-videos-player/types.d.ts +2 -0
  23. package/dist/streams/stream-player/controls.svelte +11 -2
  24. package/dist/streams/stream-player/controls.svelte.d.ts +2 -0
  25. package/dist/streams/stream-player/internal-stream-analytics-handler.d.ts +2 -0
  26. package/dist/streams/stream-player/internal-stream-analytics-handler.js +2 -0
  27. package/dist/streams/stream-player/stream-player.svelte +12 -2
  28. package/dist/streams/stream-player/types.d.ts +2 -0
  29. package/package.json +1 -1
@@ -2,7 +2,19 @@
2
2
  import { Button, ButtonSize } from '../../ui/button';
3
3
  import { Image } from '../../ui/image';
4
4
  import { LineClamp } from '../../ui/line-clamp';
5
- let { ad, inert = false } = $props();
5
+ let { ad, inert = false, on } = $props();
6
+ const onAdClicked = (event) => {
7
+ var _a;
8
+ event.preventDefault();
9
+ event.stopPropagation();
10
+ if (on === null || on === void 0 ? void 0 : on.adClick) {
11
+ on.adClick(ad.id);
12
+ }
13
+ if (!((_a = ad.ctaButton) === null || _a === void 0 ? void 0 : _a.url)) {
14
+ return;
15
+ }
16
+ window.open(ad.ctaButton.url, '_blank', 'noopener noreferrer');
17
+ };
6
18
  </script>
7
19
 
8
20
  <div class="ad-card" inert={inert}>
@@ -37,7 +49,7 @@ let { ad, inert = false } = $props();
37
49
  <div class="ad-card__button">
38
50
  <Button
39
51
  size={ButtonSize.Standard}
40
- on={{ click: () => ad.ctaButton && window.open(ad.ctaButton.url, '_blank') }}
52
+ on={{ click: onAdClicked }}
41
53
  --button--font--size="1em"
42
54
  --button--font--color={ad.ctaButton.textColor}
43
55
  --button--background={ad.ctaButton.background}
@@ -2,6 +2,9 @@ import type { AdCardModel } from './types';
2
2
  type Props = {
3
3
  ad: AdCardModel;
4
4
  inert?: boolean;
5
+ on?: {
6
+ adClick?: (id: string) => void;
7
+ };
5
8
  };
6
9
  declare const Cmp: import("svelte").Component<Props, {}, "">;
7
10
  type Cmp = ReturnType<typeof Cmp>;
@@ -1,6 +1,6 @@
1
1
  import { PostType, Status } from '../../core/enums';
2
2
  import { createLocalGQLClient } from '../../core/graphql';
3
- import { mapToShortVideosPlayerModel } from '../../short-videos/short-videos-player/mapper';
3
+ import { mapToShortVideoPlayerModel } from '../../short-videos/short-videos-player/mapper';
4
4
  import { GetMediaPageConfigDocument, GetShortVideosDocument } from './operations.generated';
5
5
  export class InternalMediaCenterDataProvider {
6
6
  mediaPageId;
@@ -39,7 +39,7 @@ export class InternalMediaCenterDataProvider {
39
39
  .toPromise();
40
40
  const posts = payload.data?.shortVideos?.items || [];
41
41
  return {
42
- items: posts.map(mapToShortVideosPlayerModel),
42
+ items: posts.map(mapToShortVideoPlayerModel),
43
43
  continuationToken: payload.data?.shortVideos?.continuationToken || null
44
44
  };
45
45
  };
@@ -9,7 +9,8 @@ const attachmentsToShow = $derived.by(() => {
9
9
  isAd: false,
10
10
  image: p.image,
11
11
  link: p.link,
12
- productId: p.id
12
+ productId: p.id,
13
+ adId: null
13
14
  }));
14
15
  const ads = (model.ad ? [model.ad] : [])
15
16
  .filter((a) => !!a.image)
@@ -19,7 +20,8 @@ const attachmentsToShow = $derived.by(() => {
19
20
  isAd: true,
20
21
  image: a.image,
21
22
  link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
22
- productId: null
23
+ productId: null,
24
+ adId: a.id
23
25
  });
24
26
  });
25
27
  const result = [...products, ...ads];
@@ -29,6 +31,9 @@ const handleAttachmentClick = (attachment) => {
29
31
  if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
30
32
  on.productClick(attachment.productId);
31
33
  }
34
+ if (attachment.adId && (on === null || on === void 0 ? void 0 : on.adClick)) {
35
+ on.adClick(attachment.adId);
36
+ }
32
37
  if (attachment.link) {
33
38
  window.open(attachment.link, '_blank');
34
39
  }
@@ -36,7 +41,7 @@ const handleAttachmentClick = (attachment) => {
36
41
  let attachmentElements = $state({});
37
42
  let observer = null;
38
43
  $effect(() => {
39
- if ((on === null || on === void 0 ? void 0 : on.productImpression) && Object.keys(attachmentElements).length > 0) {
44
+ if (((on === null || on === void 0 ? void 0 : on.productImpression) || (on === null || on === void 0 ? void 0 : on.adImpression)) && Object.keys(attachmentElements).length > 0) {
40
45
  if (observer) {
41
46
  observer.disconnect();
42
47
  }
@@ -44,15 +49,20 @@ $effect(() => {
44
49
  entries.forEach((entry) => {
45
50
  if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
46
51
  const productId = entry.target.getAttribute('data-product-id');
47
- if (productId) {
52
+ const adId = entry.target.getAttribute('data-ad-id');
53
+ if (productId && (on === null || on === void 0 ? void 0 : on.productImpression)) {
48
54
  on.productImpression(productId, model.id);
49
55
  observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
50
56
  }
57
+ else if (adId && (on === null || on === void 0 ? void 0 : on.adImpression)) {
58
+ on.adImpression(adId, model.id);
59
+ observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
60
+ }
51
61
  }
52
62
  });
53
63
  }, { threshold: 0.1 });
54
64
  Object.entries(attachmentElements).forEach(([key, element]) => {
55
- if (element && key.startsWith('product-')) {
65
+ if (element) {
56
66
  observer === null || observer === void 0 ? void 0 : observer.observe(element);
57
67
  }
58
68
  });
@@ -74,8 +84,9 @@ $effect(() => {
74
84
  onclick={() => handleAttachmentClick(attachment)}
75
85
  onkeydown={() => {}}
76
86
  role="none"
77
- bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${index}`]}
78
- data-product-id={attachment.productId || undefined}>
87
+ bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${attachment.adId}`]}
88
+ data-product-id={attachment.productId || undefined}
89
+ data-ad-id={attachment.adId || undefined}>
79
90
  <ImageRounded src={attachment.image} alt="" />
80
91
  {#if attachment.isAd}
81
92
  <div class="attachments-inline__item-icon">
@@ -4,6 +4,8 @@ type Props = {
4
4
  on?: {
5
5
  productClick?: (productId: string) => void;
6
6
  productImpression?: (productId: string, videoId: string) => void;
7
+ adClick?: (adId: string) => void;
8
+ adImpression?: (adId: string, videoId: string) => void;
7
9
  };
8
10
  };
9
11
  declare const Cmp: import("svelte").Component<Props, {}, "">;
@@ -1,4 +1,4 @@
1
- <script lang="ts">import { AdCard } from '../../ads/ad-card';
1
+ <script lang="ts">import { default as ShortVideoAdCard } from './cmp.short-video-ad-card.svelte';
2
2
  import { default as ShortVideoProductCard } from './cmp.short-video-product-card.svelte';
3
3
  import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
4
4
  import {} from './types';
@@ -9,7 +9,13 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
9
9
  {#if shortVideo.hasAttachments}
10
10
  <div class="short-video-attachments">
11
11
  {#if shortVideo.ad}
12
- <AdCard ad={shortVideo.ad} />
12
+ <ShortVideoAdCard
13
+ ad={shortVideo.ad}
14
+ videoId={shortVideo.id}
15
+ on={{
16
+ adClick: on?.adClick,
17
+ impression: on?.adImpression
18
+ }} />
13
19
  {/if}
14
20
 
15
21
  {#if shortVideo.products.length}
@@ -7,6 +7,8 @@ type Props = {
7
7
  on?: {
8
8
  productClick?: (productId: string) => void;
9
9
  productImpression?: (productId: string, videoId: string) => void;
10
+ adClick?: (adId: string) => void;
11
+ adImpression?: (adId: string, videoId: string) => void;
10
12
  };
11
13
  };
12
14
  declare const Cmp: import("svelte").Component<Props, {}, "">;
@@ -0,0 +1,26 @@
1
+ <script lang="ts">import { AdCard } from '../../ads/ad-card';
2
+ import { onMount } from 'svelte';
3
+ let { ad, videoId, inert = false, on } = $props();
4
+ let adElement;
5
+ const adData = ad;
6
+ onMount(() => {
7
+ if (adElement && (on === null || on === void 0 ? void 0 : on.impression)) {
8
+ const observer = new IntersectionObserver((entries) => {
9
+ entries.forEach((entry) => {
10
+ if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
11
+ on.impression(ad.id, videoId);
12
+ observer.unobserve(entry.target);
13
+ }
14
+ });
15
+ }, { threshold: 0.5 });
16
+ observer.observe(adElement);
17
+ return () => {
18
+ observer.disconnect();
19
+ };
20
+ }
21
+ });
22
+ </script>
23
+
24
+ <div bind:this={adElement}>
25
+ <AdCard ad={adData} inert={inert} on={{ adClick: on?.adClick }} />
26
+ </div>
@@ -0,0 +1,13 @@
1
+ import type { ShortVideoAdCardModel } from './types';
2
+ type Props = {
3
+ ad: ShortVideoAdCardModel;
4
+ videoId: string;
5
+ inert?: boolean;
6
+ on?: {
7
+ adClick?: (id: string) => void;
8
+ impression?: (adId: string, videoId: string) => void;
9
+ };
10
+ };
11
+ declare const Cmp: import("svelte").Component<Props, {}, "">;
12
+ type Cmp = ReturnType<typeof Cmp>;
13
+ export default Cmp;
@@ -40,7 +40,9 @@ $effect(() => {
40
40
  model={model}
41
41
  on={{
42
42
  productClick: on?.productClick,
43
- productImpression: on?.productImpression
43
+ productImpression: on?.productImpression,
44
+ adClick: on?.adClick,
45
+ adImpression: on?.adImpression
44
46
  }} />
45
47
  {/if}
46
48
  {#if uiManager.showControls}
@@ -12,6 +12,8 @@ type Props = {
12
12
  progress?: (progress: number) => void;
13
13
  productClick?: (productId: string) => void;
14
14
  productImpression?: (productId: string, videoId: string) => void;
15
+ adClick?: (adId: string) => void;
16
+ adImpression?: (adId: string, videoId: string) => void;
15
17
  };
16
18
  };
17
19
  declare const Cmp: import("svelte").Component<Props, {}, "">;
@@ -19,7 +19,14 @@ const changeShowAttachments = () => {
19
19
  <div class="short-videos-player-controls__short-video-hub">
20
20
  {#if uiManager.showAttachments}
21
21
  <div class="short-videos-player-controls__short-video-attachments-inline">
22
- <ShortVideoViewerAttachmentsInline model={shortVideo} />
22
+ <ShortVideoViewerAttachmentsInline
23
+ model={shortVideo}
24
+ on={{
25
+ productClick: on.productClick,
26
+ productImpression: on.productImpression,
27
+ adClick: on.adClick,
28
+ adImpression: on.adImpression
29
+ }} />
23
30
  </div>
24
31
  {/if}
25
32
  <ShortVideoControls model={shortVideo} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: changeShowAttachments }} />
@@ -51,7 +58,9 @@ const changeShowAttachments = () => {
51
58
  localization={localization.shortVideoAttachmentsLocalization}
52
59
  on={{
53
60
  productClick: on.productClick,
54
- productImpression: on.productImpression
61
+ productImpression: on.productImpression,
62
+ adClick: on.adClick,
63
+ adImpression: on.adImpression
55
64
  }} />
56
65
  </div>
57
66
  {/if}
@@ -13,6 +13,8 @@ type Props = {
13
13
  closePlayer?: () => void;
14
14
  productClick?: (productId: string) => void;
15
15
  productImpression?: (productId: string, videoId: string) => void;
16
+ adClick?: (adId: string) => void;
17
+ adImpression?: (adId: string, videoId: string) => void;
16
18
  };
17
19
  };
18
20
  declare const Controls: import("svelte").Component<Props, {}, "">;
@@ -1,12 +1,12 @@
1
1
  import { type IMediaCenterDataProvider } from '../../media-center/data-provider';
2
2
  import type { IPlayerItemsProvider } from '../../ui/player';
3
3
  import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
4
- import { mapToShortVideosPlayerModel } from './mapper';
4
+ import { mapToShortVideoPlayerModel } from './mapper';
5
5
  import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
6
6
  import { type PlayerSettings, type IShortVideoAnalyticsHandler, type ShortVideoPlayerModel } from './types';
7
7
  export { ShortVideosPlayer, type ShortVideoPlayerModel };
8
8
  export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
9
- export { mapToShortVideosPlayerModel };
9
+ export { mapToShortVideoPlayerModel };
10
10
  /**
11
11
  * Opens the short videos player modal.
12
12
  *
@@ -5,11 +5,11 @@ import { ModalShadowHost } from '../../ui/shadow-dom';
5
5
  import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
6
6
  import { InternalShortVideoAnalyticsHandler } from './internal-short-video-analytics-handler';
7
7
  import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
8
- import { mapToShortVideosPlayerModel } from './mapper';
8
+ import { mapToShortVideoPlayerModel } from './mapper';
9
9
  import {} from './types';
10
10
  import { mount, unmount } from 'svelte';
11
11
  export { ShortVideosPlayer };
12
- export { mapToShortVideosPlayerModel };
12
+ export { mapToShortVideoPlayerModel };
13
13
  export function openShortVideosPlayer(init) {
14
14
  const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground, localization, showStreamsCloudWatermark } = init;
15
15
  let dataProvider = shortVideosProvider;
@@ -5,4 +5,6 @@ export declare class InternalShortVideoAnalyticsHandler implements IShortVideoAn
5
5
  trackShortVideoView: (videoId: string) => void;
6
6
  trackShortVideoProductImpression: (productId: string, videoId: string) => void;
7
7
  trackShortVideoProductClick: (productId: string, videoId: string) => void;
8
+ trackAdImpression: (adId: string) => void;
9
+ trackAdClick: (adId: string) => void;
8
10
  }
@@ -10,4 +10,6 @@ export class InternalShortVideoAnalyticsHandler {
10
10
  trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
11
11
  trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
12
12
  trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
13
+ trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
14
+ trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
13
15
  }
@@ -2,7 +2,7 @@ import { ImageScale } from '../..';
2
2
  import { ContinuationToken } from '../../core/continuation-token';
3
3
  import { CursorDataLoader } from '../../core/data-loaders';
4
4
  import { createLocalGQLClient } from '../../core/graphql';
5
- import { mapToShortVideosPlayerModel } from './mapper';
5
+ import { mapToShortVideoPlayerModel } from './mapper';
6
6
  import { GetShortVideosDocument } from './operations.generated';
7
7
  const CHUNK_SIZE = 20;
8
8
  export class InternalShortVideoPlayerProvider {
@@ -32,7 +32,7 @@ export class InternalShortVideoPlayerProvider {
32
32
  if (!data) {
33
33
  return null;
34
34
  }
35
- const items = data.items.map(mapToShortVideosPlayerModel).sort((a, b) => {
35
+ const items = data.items.map(mapToShortVideoPlayerModel).sort((a, b) => {
36
36
  const ia = this.idOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER;
37
37
  const ib = this.idOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER;
38
38
  return ia - ib;
@@ -1,3 +1,3 @@
1
1
  import type { GetShortVideosQuery } from './operations.generated';
2
2
  import type { ShortVideoPlayerModel } from './types';
3
- export declare const mapToShortVideosPlayerModel: (payload: GetShortVideosQuery["shortVideos"]["items"][0]) => ShortVideoPlayerModel;
3
+ export declare const mapToShortVideoPlayerModel: (payload: GetShortVideosQuery["shortVideos"]["items"][0]) => ShortVideoPlayerModel;
@@ -1,6 +1,6 @@
1
1
  import { ProfileType } from '../../core/enums';
2
2
  import { mapToShortVideoViewerModel } from '../short-video-viewer';
3
- export const mapToShortVideosPlayerModel = (payload) => {
3
+ export const mapToShortVideoPlayerModel = (payload) => {
4
4
  const viewerModel = mapToShortVideoViewerModel(payload);
5
5
  return {
6
6
  ...viewerModel,
@@ -97,6 +97,12 @@ const onShortVideoProductClick = (productId, videoId) => {
97
97
  const onShortVideoProductImpression = (productId, videoId) => {
98
98
  analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
99
99
  };
100
+ const onShortVideoAdClick = (adId) => {
101
+ analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(adId);
102
+ };
103
+ const onShortVideoAdImpression = (adId, videoId) => {
104
+ analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(adId);
105
+ };
100
106
  </script>
101
107
 
102
108
  <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
@@ -140,7 +146,9 @@ const onShortVideoProductImpression = (productId, videoId) => {
140
146
  localization={localization.shortVideoViewerLocalization}
141
147
  on={{
142
148
  productClick: (productId) => onShortVideoProductClick(productId, item.id),
143
- productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
149
+ productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
150
+ adClick: (adId) => onShortVideoAdClick(adId),
151
+ adImpression: (adId, videoId) => onShortVideoAdImpression(adId, videoId)
144
152
  }} />
145
153
  {/snippet}
146
154
  </PlayerSlider>
@@ -158,7 +166,9 @@ const onShortVideoProductImpression = (productId, videoId) => {
158
166
  on={{
159
167
  closePlayer: on?.playerClosed,
160
168
  productClick: (productId) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
161
- productImpression: onShortVideoProductImpression
169
+ productImpression: onShortVideoProductImpression,
170
+ adClick: (adId) => onShortVideoAdClick(adId),
171
+ adImpression: onShortVideoAdImpression
162
172
  }} />
163
173
  {:else}
164
174
  <Loading positionFixedCenter={true} timeout={1000} />
@@ -7,6 +7,8 @@ export interface IShortVideoAnalyticsHandler {
7
7
  trackShortVideoView: (videoId: string) => void;
8
8
  trackShortVideoProductImpression: (productId: string, videoId: string) => void;
9
9
  trackShortVideoProductClick: (productId: string, videoId: string) => void;
10
+ trackAdImpression: (adId: string) => void;
11
+ trackAdClick: (adId: string) => void;
10
12
  }
11
13
  export type ShortVideoPlayerModel = ShortVideoViewerModel & {
12
14
  analyticsOrganizationId: string | null;
@@ -53,7 +53,14 @@ const changeShowShortVideoAttachments = () => {
53
53
  <div class="stream-player-controls__short-video-hub">
54
54
  {#if uiManager.showShortVideoAttachments}
55
55
  <div class="stream-player-controls__short-video-attachments-inline">
56
- <ShortVideoViewerAttachmentsInline model={shortVideo} />
56
+ <ShortVideoViewerAttachmentsInline
57
+ model={shortVideo}
58
+ on={{
59
+ productClick: on.productClick,
60
+ productImpression: on.productImpression,
61
+ adClick: on.adClick,
62
+ adImpression: on.adImpression
63
+ }} />
57
64
  </div>
58
65
  {/if}
59
66
  <ShortVideoControls
@@ -83,7 +90,9 @@ const changeShowShortVideoAttachments = () => {
83
90
  localization={localization.shortVideoAttachmentsLocalization}
84
91
  on={{
85
92
  productClick: on.productClick,
86
- productImpression: on.productImpression
93
+ productImpression: on.productImpression,
94
+ adClick: on.adClick,
95
+ adImpression: on.adImpression
87
96
  }} />
88
97
  </div>
89
98
  {/if}
@@ -11,6 +11,8 @@ type Props = {
11
11
  closePlayer: () => void;
12
12
  productClick?: (productId: string) => void;
13
13
  productImpression?: (productId: string) => void;
14
+ adClick?: (adId: string) => void;
15
+ adImpression?: (adId: string, videoId: string) => void;
14
16
  };
15
17
  };
16
18
  declare const Controls: import("svelte").Component<Props, {}, "">;
@@ -13,4 +13,6 @@ export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsH
13
13
  trackShortVideoProductImpression: (productId: string, videoId: string) => void;
14
14
  trackShortVideoProductClick: (productId: string, videoId: string) => void;
15
15
  trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
16
+ trackAdImpression: (adId: string) => void;
17
+ trackAdClick: (adId: string) => void;
16
18
  }
@@ -18,4 +18,6 @@ export class InternalStreamAnalyticsHandler {
18
18
  trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
19
19
  trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
20
20
  trackShortVideoProgress = (pageId, videoId, progress, streamId) => AppEventsTracker.trackShortVideoProgress(pageId, videoId, progress, streamId);
21
+ trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
22
+ trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
21
23
  }
@@ -178,6 +178,12 @@ const onStreamProductImpression = (productId) => {
178
178
  const onShortVideoProductImpression = (productId, videoId) => {
179
179
  analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
180
180
  };
181
+ const onShortVideoAdClick = (adId) => {
182
+ analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(adId);
183
+ };
184
+ const onShortVideoAdImpression = (adId, videoId) => {
185
+ analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(adId);
186
+ };
181
187
  const onPlayerClose = () => {
182
188
  var _a;
183
189
  stopActivityTracking();
@@ -235,7 +241,9 @@ const onProgress = (pageId, videoId, progress) => {
235
241
  on={{
236
242
  progress: (progress) => onProgress(item.id, item.shortVideo.id, progress),
237
243
  productClick: (productId) => onShortVideoProductClick(productId, item.shortVideo.id),
238
- productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
244
+ productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
245
+ adClick: (adId) => onShortVideoAdClick(adId),
246
+ adImpression: (adId, videoId) => onShortVideoAdImpression(adId, videoId)
239
247
  }}
240
248
  autoplay="on-appearance"
241
249
  socialInteractionsHandler={postSocialInteractionsHandler}
@@ -270,7 +278,9 @@ const onProgress = (pageId, videoId, progress) => {
270
278
  on={{
271
279
  closePlayer: () => onPlayerClose(),
272
280
  productClick: (productId: String) => onProductCardClick(productId),
273
- productImpression: (productId: String) => onStreamProductImpression(productId)
281
+ productImpression: (productId: String) => onStreamProductImpression(productId),
282
+ adClick: (adId: string) => onShortVideoAdClick(adId),
283
+ adImpression: (adId: string, videoId: string) => onShortVideoAdImpression(adId, videoId)
274
284
  }} />
275
285
  {:else}
276
286
  <Loading positionFixedCenter={true} timeout={1000} />
@@ -53,4 +53,6 @@ export interface IStreamAnalyticsHandler {
53
53
  trackShortVideoProductImpression: (productId: string, videoId: string) => void;
54
54
  trackShortVideoProductClick: (productId: string, videoId: string) => void;
55
55
  trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
56
+ trackAdImpression: (adId: string) => void;
57
+ trackAdClick: (adId: string) => void;
56
58
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/embeddable",
3
- "version": "6.4.1",
3
+ "version": "6.4.3",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",