@streamscloud/embeddable 8.3.0 → 10.0.0

package/dist/{short-videos/short-videos-player → posts/data-loaders}/mapper.js

@@ -1,6 +1,6 @@
 import { ProfileType } from '../../core/enums';
-import { mapToPostModel } from '../../posts/post-viewer';
-export const mapToShortVideoPlayerModel = (payload) => {
+import { mapToPostModel } from '../post-viewer';
+export const mapToPostPlayerModel = (payload) => {
     const viewerModel = mapToPostModel(payload);
     return {
         ...viewerModel,

package/dist/{short-videos/short-videos-player → posts/data-loaders}/operations.generated.d.ts

@@ -1,11 +1,11 @@
 import type * as SchemaTypes from '../../../gql/types';
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
-export type GetShortVideosQueryVariables = SchemaTypes.Exact<{
+export type GetPostsQueryVariables = SchemaTypes.Exact<{
     input: SchemaTypes.EmbedPostsInput;
     image_scale?: SchemaTypes.InputMaybe<SchemaTypes.ImageScale>;
 }>;
-export type GetShortVideosQuery = {
-    shortVideos: {
+export type GetPostsQuery = {
+    posts: {
         continuationToken: string | null;
         items: Array<{
             id: string;
@@ -86,7 +86,7 @@ export type GetShortVideosQuery = {
         }>;
     };
 };
-export type ShortVideosPlayerPayloadFragment = {
+export type PostsPlayerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
     ownerProfile: {
@@ -163,5 +163,5 @@ export type ShortVideosPlayerPayloadFragment = {
         } | null;
     };
 };
-export declare const ShortVideosPlayerPayloadFragmentDoc: DocumentNode<ShortVideosPlayerPayloadFragment, unknown>;
-export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;
+export declare const PostsPlayerPayloadFragmentDoc: DocumentNode<PostsPlayerPayloadFragment, unknown>;
+export declare const GetPostsDocument: DocumentNode<GetPostsQuery, GetPostsQueryVariables>;

package/dist/{short-videos/short-videos-player → posts/data-loaders}/operations.generated.js

@@ -1,9 +1,9 @@
-export const ShortVideosPlayerPayloadFragmentDoc = {
+export const PostsPlayerPayloadFragmentDoc = {
     kind: 'Document',
     definitions: [
         {
             kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' },
+            name: { kind: 'Name', value: 'PostsPlayerPayloadFragment' },
             typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
             selectionSet: {
                 kind: 'SelectionSet',
@@ -227,13 +227,13 @@ export const ShortVideosPlayerPayloadFragmentDoc = {
         }
     ]
 };
-export const GetShortVideosDocument = {
+export const GetPostsDocument = {
     kind: 'Document',
     definitions: [
         {
             kind: 'OperationDefinition',
             operation: 'query',
-            name: { kind: 'Name', value: 'GetShortVideos' },
+            name: { kind: 'Name', value: 'GetPosts' },
             variableDefinitions: [
                 {
                     kind: 'VariableDefinition',
@@ -252,7 +252,7 @@ export const GetShortVideosDocument = {
                 selections: [
                     {
                         kind: 'Field',
-                        alias: { kind: 'Name', value: 'shortVideos' },
+                        alias: { kind: 'Name', value: 'posts' },
                         name: { kind: 'Name', value: 'embedPosts' },
                         arguments: [{ kind: 'Argument', name: { kind: 'Name', value: 'input' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'input' } } }],
                         selectionSet: {
@@ -261,10 +261,7 @@ export const GetShortVideosDocument = {
                                 {
                                     kind: 'Field',
                                     name: { kind: 'Name', value: 'items' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' } }]
-                                    }
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'PostsPlayerPayloadFragment' } }] }
                                 },
                                 { kind: 'Field', name: { kind: 'Name', value: 'continuationToken' } }
                             ]
@@ -477,7 +474,7 @@ export const GetShortVideosDocument = {
         },
         {
             kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'ShortVideosPlayerPayloadFragment' },
+            name: { kind: 'Name', value: 'PostsPlayerPayloadFragment' },
             typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Post' } },
             selectionSet: {
                 kind: 'SelectionSet',

package/dist/posts/data-loaders/operations.graphql

@@ -0,0 +1,17 @@
+# noinspection GraphQLSchemaValidation
+query GetPosts($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
+  posts: embedPosts(input: $input) {
+    items {
+      ...PostsPlayerPayloadFragment
+    }
+    continuationToken
+  }
+}
+
+fragment PostsPlayerPayloadFragment on Post {
+  ...PostViewerPayloadFragment
+  ownerProfile {
+    id
+    type
+  }
+}

package/dist/posts/data-loaders/posts-loader.d.ts

@@ -0,0 +1,19 @@
+import { PostType, Status } from '../../core/enums';
+import type { PostPlayerModel } from '../posts-player/types';
+import type { Client } from '@urql/core';
+export declare const getPostsCursor: (input: {
+    filter: {
+        types: PostType[];
+        ids?: string[];
+        categoryId?: string;
+        excludeIds?: string[];
+        mediaPageId?: string;
+        statuses?: Status[];
+    };
+    limit: number;
+    continuationToken?: string | null;
+    graphql: Client;
+}) => Promise<{
+    items: PostPlayerModel[];
+    continuationToken: string | null;
+}>;

package/dist/posts/data-loaders/posts-loader.js

@@ -0,0 +1,28 @@
+import { PostType, Status } from '../../core/enums';
+import { mapToPostPlayerModel } from './mapper';
+import { GetPostsDocument } from './operations.generated';
+export const getPostsCursor = async (input) => {
+    const { filter, limit, continuationToken, graphql } = input;
+    const { ids, mediaPageId, categoryId, excludeIds, types, statuses } = filter;
+    const payload = await graphql
+        .query(GetPostsDocument, {
+        input: {
+            filter: {
+                ids,
+                mediaPageId,
+                types,
+                statuses,
+                categoryId,
+                excludeIds
+            },
+            limit,
+            continuationToken
+        }
+    })
+        .toPromise();
+    const posts = payload.data?.posts?.items || [];
+    return {
+        items: posts.map(mapToPostPlayerModel),
+        continuationToken: payload.data?.posts?.continuationToken || null
+    };
+};

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/{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,108 @@
+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 type { IPostAnalyticsHandler, PostPlayerModel, PostPlayerSettings } from './types';
-export { type PostPlayerModel };
-export type { IPlayerItemsProvider, IPostAnalyticsHandler };
+export { PostsPlayer, type PostPlayerModel };
+export type { IMediaCenterConfig, IPostAnalyticsHandler };
+export { mapToPostPlayerModel } from '../data-loaders/mapper';
 /**
  * Opens the posts player modal.
  *
- * This version works only with a posts provider and removes legacy IDs/GraphQL modes.
- *
  * @param init Configuration options.
  *
- * Required
- * @param {IPlayerItemsProvider<PostPlayerModel>} init.postsProvider
+ * Data provider (required)
+ * @param 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>;
+    postsProvider: IPostsPlayerDataProvider;
+    mediaCenterConfig?: IMediaCenterConfig;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     playerSettings?: PostPlayerSettings;
     on?: {
         playerClosed?: () => void;
+        postActivated?: (id: string) => void;
     };
 }): void;
+export type IPostsPlayerDataProvider<TChunk extends WithId = WithId> = {
+    kind: 'feed';
+    initialData: {
+        prefetchedItems: PostPlayerModel[];
+        startIndex: number;
+        startMediaIndex?: number;
+    };
+    loadMore(): Promise<PostPlayerModel[]>;
+} | {
+    kind: 'chunks';
+    initialData: {
+        prefetchedChunks: TChunk[];
+        startItemIndex?: number;
+    };
+    loadMoreChunks: () => Promise<TChunk[]>;
+    loadChunkItems: (chunkId: string, continuationToken: string | null | undefined) => Promise<{
+        items: PostPlayerModel[];
+        continuationToken: string | null;
+    }>;
+};
+type WithId = {
+    id: string;
+};

package/dist/posts/posts-player/index.js

@@ -1,84 +1,100 @@
+import {} from '../../media-center/config/types';
+import { MediaCenter } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
-import { default as PostPlayerView } from './posts-player-view.svelte';
+import { default as PostsPlayer } from './cmp.posts-player.svelte';
 import { mount, unmount } from 'svelte';
-export {};
+export { PostsPlayer };
+export { mapToPostPlayerModel } from '../data-loaders/mapper';
 /**
  * Opens the posts player modal.
  *
- * This version works only with a posts provider and removes legacy IDs/GraphQL modes.
- *
  * @param init Configuration options.
  *
- * Required
- * @param {IPlayerItemsProvider<PostPlayerModel>} init.postsProvider
+ * Data provider (required)
+ * @param 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 function openPostsPlayer(init) {
-    const { postsProvider, socialInteractionsHandler, playerSettings, on } = init;
-    const dataProvider = postsProvider;
-    const analyticsHandler = init.analyticsHandler;
+    const { postsProvider: dataProvider, mediaCenterConfig, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(PostPlayerView, {
+    const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
-            dataProvider,
-            socialInteractionsHandler,
-            playerSettings,
-            analyticsHandler,
-            on: {
-                playerClosed: async () => {
-                    await unmount(mounted);
-                    shadowHost.remove();
-                    if (on?.playerClosed) {
-                        on.playerClosed();
+            config: mediaCenterConfig || null,
+            playerProps: {
+                mode: 'posts',
+                props: {
+                    dataProvider,
+                    socialInteractionsHandler,
+                    analyticsHandler,
+                    playerSettings,
+                    on: {
+                        playerClosed: async () => {
+                            await unmount(mounted);
+                            shadowHost.remove();
+                            if (on?.playerClosed) {
+                                on.playerClosed();
+                            }
+                        },
+                        postActivated: on?.postActivated
                     }
                 }
             }

package/dist/posts/posts-player/posts-player-view.svelte

@@ -7,13 +7,15 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { PostType } from '../..';
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
 import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
+import { Utils } from '../../core/utils';
 import { getPostCoverImage } from '../model';
-import { PlayerBuffer } from '../../ui/player-slider';
+import { DefaultChunksPlayerBuffer, DefaultFeedPlayerBuffer } from '../../ui/player/providers';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on } = $props();
+let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on, mediaCenterData } = $props();
 $effect(() => {
     void dataProvider;
     untrack(() => {
@@ -21,32 +23,76 @@ $effect(() => {
         initBuffer(dataProvider);
     });
 });
+$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
-    new PlayerBuffer(dataProvider, {
-        preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-            if (instance.loaded.length) {
-                const coverUrl = getPostCoverImage(instance.loaded[0]);
-                yield preloadImage(coverUrl);
-                contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-            }
-            contentPlayerConfig.playerBuffer = instance;
-        })
-    });
+    switch (dataProvider.kind) {
+        case 'feed':
+            new DefaultFeedPlayerBuffer(dataProvider, {
+                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
+                    if (instance.loaded.length) {
+                        const coverUrl = getPostCoverImage(instance.loaded[0]);
+                        yield preloadImage(coverUrl);
+                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
+                    }
+                    contentPlayerConfig.playerBuffer = instance;
+                })
+            });
+            break;
+        case 'chunks':
+            new DefaultChunksPlayerBuffer(dataProvider, {
+                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
+                    if (instance.loaded.length) {
+                        const coverUrl = getPostCoverImage(instance.loaded[0]);
+                        yield preloadImage(coverUrl);
+                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
+                    }
+                    contentPlayerConfig.playerBuffer = instance;
+                })
+            });
+            break;
+        default:
+            Utils.assertUnreachable(dataProvider);
+    }
 });
+const getLoadedItemById = (id) => {
+    if (!contentPlayerConfig.playerBuffer) {
+        return null;
+    }
+    return contentPlayerConfig.playerBuffer.loaded.find((item) => item.id === id) || null;
+};
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
     mappers: {
         postModelFromCurrentItem: (item) => item
     },
     socialInteractionsHandler,
+    mediaCenterData,
     settings: new ContentPlayerSettings(playerSettings),
     callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed
+        close: on === null || on === void 0 ? void 0 : on.playerClosed,
+        productClick: (id, postId) => {
+            var _a;
+            if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, postId);
+            }
+        },
+        productImpression: (id, postId) => {
+            var _a;
+            if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, postId);
+            }
+        },
+        adClick: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+        },
+        adImpression: (id) => {
+            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+        }
     },
     playerSliderCallbacks: {
         itemActivated: (id) => {
             var _a;
-            const post = (_a = contentPlayerConfig.playerBuffer) === null || _a === void 0 ? void 0 : _a.loaded.find((x) => x.id === id);
+            const post = getLoadedItemById(id);
             if (!post) {
                 return;
             }
@@ -54,9 +100,13 @@ const contentPlayerConfig = new ContentPlayerConfig({
             if (post.analyticsOrganizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(post.analyticsOrganizationId);
             }
-            if (post.analyticsOrganizationId) {
+            if (post.postType === PostType.ShortVideo) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
+            }
+            else if (post.analyticsOrganizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(id, post.analyticsOrganizationId);
             }
+            (_a = on === null || on === void 0 ? void 0 : on.postActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
         }
     }
 });

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

@@ -1,4 +1,8 @@
+import type { MediaCenterData } from '../../media-center/model/types';
 import type { PostPlayerProps } from './types';
-declare const PostsPlayerView: import("svelte").Component<PostPlayerProps, {}, "">;
+type $$ComponentProps = PostPlayerProps & {
+    mediaCenterData?: MediaCenterData;
+};
+declare const PostsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
 type PostsPlayerView = ReturnType<typeof PostsPlayerView>;
 export default PostsPlayerView;

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

@@ -1,21 +1,27 @@
 import type { IContentPlayerSettingsInitializer } from '../../content-player/content-player-settings';
 import type { IPostModel } from '..';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
-import type { IPlayerItemsProvider } from '../../ui/player-slider';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
 export interface IPostAnalyticsHandler {
     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;
+    trackAdClick: (adId: string) => void;
+    trackAdImpression: (adId: string) => void;
 }
 export type PostPlayerModel = IPostModel & {
     analyticsOrganizationId: string | null;
 };
 export type PostPlayerProps = {
-    dataProvider: IPlayerItemsProvider<PostPlayerModel>;
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IPostAnalyticsHandler;
     playerSettings?: PostPlayerSettings;
     on?: {
         playerClosed?: () => void;
+        postActivated?: (id: string) => void;
     };
 };
-export type PostPlayerSettings = Pick<IContentPlayerSettingsInitializer, 'disableBackground' | 'hideCloseButton' | 'locale' | 'showStreamsCloudWatermark'>;
+export type PostPlayerSettings = IContentPlayerSettingsInitializer;