@streamscloud/embeddable 8.2.0 → 9.0.0

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

@@ -1,5 +1,7 @@
+import type { TrackingParams } from '../../marketing-tracking';
+import type { IMediaCenterConfig } from '..';
+import type { PostPlayerModel } from '../../posts/posts-player';
 import type { ProductCardModel } from '../../products/product-card';
-import type { IMediaCenterConfig, ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
 import type { MediaCenterStreamModel } from './types';
 export declare class DiscoverPanelHandler {
     private readonly config;
@@ -21,9 +23,10 @@ export declare class DiscoverPanelHandler {
 }
 type ShortVideoSectionItemType = {
     kind: 'video';
-    data: ShortVideoPlayerModel;
+    data: PostPlayerModel;
 } | {
     kind: 'product';
     data: ProductCardModel;
+    trackingParams: TrackingParams;
 };
 export {};

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

@@ -1,3 +1,4 @@
+import { PostType } from '../../core/enums';
 export class DiscoverPanelHandler {
     config;
     _activated = $state(false);
@@ -24,7 +25,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 +41,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 } };
                 }
             }
         }
@@ -61,7 +66,7 @@ export class DiscoverPanelHandler {
         if (this._state === 'not-initialized') {
             this._state = 'loading';
             try {
-                const shortVideosResponse = await this.config.shortVideosPlayer.getShortVideosCursor({ filter: {}, limit: 5 });
+                const shortVideosResponse = await this.config.postsPlayer.getPostsCursor({ filter: { types: [PostType.ShortVideo] }, limit: 5 });
                 const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: {}, limit: 5 });
                 this._shortVideos = shortVideosResponse.items;
                 this._products = this._uniqueById(shortVideosResponse.items.flatMap((i) => i.products)).slice(0, 2);

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/media-center/media-center/discover-panel.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
+import type { PostPlayerModel } from '../../posts/posts-player';
 import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
 import { MediaCenterLocalization } from './media-center-localization';
 type Props = {
     handler: DiscoverPanelHandler;
     localization: MediaCenterLocalization;
     on: {
-        shortVideoSelected: (shortVideo: ShortVideoPlayerModel) => void;
+        shortVideoSelected: (shortVideo: PostPlayerModel) => void;
         streamSelected: (id: string) => void;
     };
 };

package/dist/media-center/media-center/post-player-provider-generator.d.ts

@@ -0,0 +1,8 @@
+import type { PostPlayerModel } from '../../posts/posts-player';
+import type { IPlayerItemsProvider } from '../../ui/player-slider';
+import type { IMediaCenterConfig } from '../config/types';
+export declare const makePostPlayerItemsProvider: (data: {
+    config: IMediaCenterConfig;
+    categoryId?: string;
+    prefetchedItems?: PostPlayerModel[];
+}) => IPlayerItemsProvider<PostPlayerModel>;

package/dist/media-center/media-center/{short-video-resources-generator.js → post-player-provider-generator.js}

@@ -1,11 +1,16 @@
+import { PostType } from '../..';
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
-export const makeShortVideosProvider = (data) => {
+export const makePostPlayerItemsProvider = (data) => {
     const { config, categoryId, prefetchedItems = [] } = data;
     const loader = new CursorDataLoader({
         loadPage: async (continuationToken) => {
-            const result = await config.shortVideosPlayer.getShortVideosCursor({
-                filter: { categoryId, excludeIds: prefetchedItems.length ? prefetchedItems.map((i) => i.id) : undefined },
+            const result = await config.postsPlayer.getPostsCursor({
+                filter: {
+                    types: [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video],
+                    categoryId,
+                    excludeIds: prefetchedItems.length ? prefetchedItems.map((i) => i.id) : undefined
+                },
                 continuationToken: continuationToken.toNextChunkString(),
                 limit: 20
             });

package/dist/media-center/media-center/types.d.ts

@@ -1,4 +1,4 @@
-export type MediaCenterMode = 'short-videos' | 'stream';
+export type MediaCenterMode = 'stream' | 'posts';
 export type MediaCenterStreamModel = {
     id: string;
     title: string;

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/handlers/index.d.ts

@@ -0,0 +1 @@
+export { InternalPostAnalyticsHandler } from './internal-post-analytics-handler';

package/dist/posts/handlers/index.js

@@ -0,0 +1 @@
+export { InternalPostAnalyticsHandler } from './internal-post-analytics-handler';

package/dist/{short-videos/short-videos-player/internal-short-video-analytics-handler.d.ts → posts/handlers/internal-post-analytics-handler.d.ts}

@@ -1,7 +1,8 @@
-import type { IShortVideoAnalyticsHandler } from './types';
-export declare class InternalShortVideoAnalyticsHandler implements IShortVideoAnalyticsHandler {
+import type { IPostAnalyticsHandler } from '../posts-player';
+export declare class InternalPostAnalyticsHandler implements IPostAnalyticsHandler {
     constructor(graphqlOrigin: string | undefined);
     setOrganizationId: (organizationId: string) => void;
+    trackPostOpened: (postId: string, ownerId: string) => void;
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;

package/dist/{short-videos/short-videos-player/internal-short-video-analytics-handler.js → posts/handlers/internal-post-analytics-handler.js}

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

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/{short-videos/short-videos-player/cmp.short-videos-player.svelte → posts/posts-player/cmp.posts-player.svelte}

@@ -1,10 +1,10 @@
 <script lang="ts">import { createShadowRoot } from '../../ui/shadow-dom';
-import { default as ShortVideoPlayerView } from './short-videos-player-view.svelte';
+import { default as PostsPlayerView } from './posts-player-view.svelte';
 import { mount, unmount } from 'svelte';
 let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
-    const mounted = mount(ShortVideoPlayerView, {
+    const mounted = mount(PostsPlayerView, {
         target: shadowRoot,
         props: {
             dataProvider,
@@ -23,5 +23,5 @@ const initHost = (node) => {
 </script>
 
 {#key dataProvider}
-  <div class="short-videos-player-host" use:initHost></div>
+  <div class="posts-player-host" use:initHost></div>
 {/key}

package/dist/posts/posts-player/cmp.posts-player.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PostPlayerProps } from './types';
+declare const Cmp: import("svelte").Component<PostPlayerProps, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/posts/posts-player/index.d.ts

@@ -1,73 +1,87 @@
+import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { IPlayerItemsProvider } from '../../ui/player-slider';
+import { default as PostsPlayer } from './cmp.posts-player.svelte';
+import { mapToPostPlayerModel } from './mapper';
 import type { IPostAnalyticsHandler, PostPlayerModel, PostPlayerSettings } from './types';
-export { type PostPlayerModel };
-export type { IPlayerItemsProvider, IPostAnalyticsHandler };
+export { PostsPlayer, type PostPlayerModel };
+export type { IMediaCenterConfig, IPlayerItemsProvider, IPostAnalyticsHandler };
+export { mapToPostPlayerModel };
 /**
  * Opens the posts player modal.
  *
- * This version works only with a posts provider and removes legacy IDs/GraphQL modes.
- *
  * @param init Configuration options.
  *
- * Required
+ * Data provider (required)
  * @param {IPlayerItemsProvider<PostPlayerModel>} init.postsProvider
  *   Provider that supplies post items to the player.
  *
- * Optional
+ * Media center (optional)
+ * @param {IMediaCenterConfig} [init.mediaCenterConfig]
+ *   Optional media-center config passed to MediaCenter.
+ *
+ * Analytics (optional)
  * @param {IPostAnalyticsHandler} [init.analyticsHandler]
- *   Analytics events handler.
+ *   Custom analytics handler for posts player events.
+ *
+ * Social interactions (optional)
  * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
- * @param {ContentPlayerSettings} [init.playerSettings]
- *   Player UI and behavior settings.
  *
- *   Fields of ContentPlayerSettings:
+ * Player settings
+ * @param {PostPlayerSettings} [init.playerSettings]
+ *   Player UI and behavior settings.
+ *   Fields of PostPlayerSettings:
  *   - {boolean} [disableBackground]
  *       If true, hides the player's background image.
  *   - {boolean} [hideCloseButton]
  *       If true, hides the close button.
- *   - {Locale} [locale='en']
- *       Localization for the player UI. Supported values: 'en' | 'no'.
- *       If omitted, the default locale 'en' is used.
+ *   - {'en'|'no'} [locale='en']
+ *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
  *   - {boolean} [showStreamsCloudWatermark]
  *       If true, shows the StreamsCloud watermark.
  *
  * Events
- * @param {{ playerClosed?: () => void }} [init.on]
+ * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
  *   Optional event handlers.
  * @param {() => void} [init.on.playerClosed]
  *   Called after the player is fully closed (after unmount and removal from the DOM).
+ * @param {(id: string) => void} [init.on.postActivated]
+ *   Called when a post becomes active (receives the post's id).
  *
  * @returns {void}
  *
  * @example
  * ```ts
- * import { openPostsPlayer } from '@streamscloud/embeddable/short-videos-player';
+ * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
  *
  * openPostsPlayer({
  *   postsProvider: myPostsProvider,
+ *   mediaCenterConfig: myMediaCenterConfig,
  *   analyticsHandler: myAnalyticsHandler,
  *   socialInteractionsHandler: mySocialHandler,
  *   playerSettings: {
+ *     // Default locale is 'en'; set 'no' to switch to Norwegian:
+ *     locale: 'no',
  *     disableBackground: false,
  *     hideCloseButton: false,
- *     // Locale is 'en' by default; set 'no' to switch to Norwegian:
- *     locale: 'no',
  *     showStreamsCloudWatermark: true,
  *   },
  *   on: {
  *     playerClosed: () => console.log('Player closed'),
+ *     postActivated: (id) => console.log('Activated post', id),
  *   },
  * });
  * ```
  */
 export declare function openPostsPlayer(init: {
     postsProvider: IPlayerItemsProvider<PostPlayerModel>;
+    mediaCenterConfig?: IMediaCenterConfig;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     playerSettings?: PostPlayerSettings;
     on?: {
         playerClosed?: () => void;
+        postActivated?: (id: string) => void;
     };
 }): void;