@streamscloud/embeddable 8.3.0 → 9.0.0

package/dist/media-center/config/internal-media-center-analytics-handler.d.ts

@@ -1,8 +1,9 @@
-import type { IShortVideoAnalyticsHandler } from '../../short-videos/short-videos-player/types';
+import type { IPostAnalyticsHandler } from '../../posts/posts-player/types';
 import type { IStreamAnalyticsHandler } from '../../streams/stream-player/types';
-export declare class InternalMediaCenterAnalyticsHandler implements IShortVideoAnalyticsHandler, IStreamAnalyticsHandler {
+export declare class InternalMediaCenterAnalyticsHandler implements IPostAnalyticsHandler, IStreamAnalyticsHandler {
     constructor(graphqlOrigin: string | undefined);
     setOrganizationId: (organizationId: string) => void;
+    trackPostOpened: (postId: string, ownerId: string) => void;
     trackStreamView: (streamId: string) => void;
     trackStreamPageView: (pageId: string, streamId: string) => void;
     trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;

package/dist/media-center/config/internal-media-center-analytics-handler.js

@@ -7,6 +7,7 @@ export class InternalMediaCenterAnalyticsHandler {
         AppEventsTracker.setProfileId(getOrCreateProfileId());
     }
     setOrganizationId = (organizationId) => AppEventsTracker.setOrganizationId(organizationId);
+    trackPostOpened = (postId, ownerId) => AppEventsTracker.trackPostOpened(postId, ownerId);
     trackStreamView = (streamId) => AppEventsTracker.trackStreamView(streamId);
     trackStreamPageView = (pageId, streamId) => AppEventsTracker.trackStreamPageView(pageId, streamId);
     trackStreamEngagementTime = (streamId, engagementTime) => AppEventsTracker.trackStreamEngagementTime(streamId, engagementTime);

package/dist/media-center/config/internal-media-center-config.d.ts

@@ -1,7 +1,7 @@
 import type { IMediaCenterConfig } from './types';
 export declare class InternalMediaCenterConfig implements IMediaCenterConfig {
     private readonly mediaPageId;
-    shortVideosPlayer: IMediaCenterConfig['shortVideosPlayer'];
+    postsPlayer: IMediaCenterConfig['postsPlayer'];
     streamPlayer: IMediaCenterConfig['streamPlayer'];
     handlers: IMediaCenterConfig['handlers'];
     private graphql;

package/dist/media-center/config/internal-media-center-config.js

@@ -1,28 +1,28 @@
-import { PostType, Status, StreamStatus } from '../../core/enums';
+import { Status, StreamStatus } from '../../core/enums';
 import { createLocalGQLClient } from '../../core/graphql';
 import { MockCategoryFollowingProvider } from '../categories-following/mock-categories-following-handler.svelte';
+import { mapToPostPlayerModel } from '../../posts/posts-player/mapper';
 import { MockPostSocialInteractionsHandler } from '../../posts/social-interactions/mock-post-social-interactions-handler.svelte';
-import { mapToShortVideoPlayerModel } from '../../short-videos/short-videos-player/mapper';
 import { InternalStreamPlayerDataProvider } from '../../streams/stream-player/internal-stream-player-data-provider';
 import { InternalMediaCenterAnalyticsHandler } from './internal-media-center-analytics-handler';
-import { GetMediaPageConfigDocument, GetShortVideosDocument, GetStreamsDocument } from './operations.generated';
+import { GetMediaPageConfigDocument, GetPostsDocument, GetStreamsDocument } from './operations.generated';
 export class InternalMediaCenterConfig {
     mediaPageId;
-    shortVideosPlayer;
+    postsPlayer;
     streamPlayer;
     handlers;
     graphql;
     constructor(mediaPageId, graphqlOrigin, testingStuff) {
         this.mediaPageId = mediaPageId;
         this.graphql = createLocalGQLClient(graphqlOrigin);
-        this.shortVideosPlayer = {
-            getShortVideosCursor: async ({ filter, limit, continuationToken }) => {
+        this.postsPlayer = {
+            getPostsCursor: async ({ filter, limit, continuationToken }) => {
                 const payload = await this.graphql
-                    .query(GetShortVideosDocument, {
+                    .query(GetPostsDocument, {
                     input: {
                         filter: {
                             mediaPageId: this.mediaPageId,
-                            types: [PostType.ShortVideo],
+                            types: filter.types,
                             statuses: [Status.Published],
                             categoryId: filter.categoryId,
                             excludeIds: filter.excludeIds
@@ -32,10 +32,10 @@ export class InternalMediaCenterConfig {
                     }
                 })
                     .toPromise();
-                const posts = payload.data?.shortVideos?.items || [];
+                const posts = payload.data?.posts?.items || [];
                 return {
-                    items: posts.map(mapToShortVideoPlayerModel),
-                    continuationToken: payload.data?.shortVideos?.continuationToken || null
+                    items: posts.map(mapToPostPlayerModel),
+                    continuationToken: payload.data?.posts?.continuationToken || null
                 };
             }
         };

package/dist/media-center/config/operations.generated.d.ts

@@ -23,12 +23,12 @@ export type GetMediaPageConfigQuery = {
         } | null;
     } | null;
 };
-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;
@@ -126,5 +126,5 @@ export type GetStreamsQuery = {
     };
 };
 export declare const GetMediaPageConfigDocument: DocumentNode<GetMediaPageConfigQuery, GetMediaPageConfigQueryVariables>;
-export declare const GetShortVideosDocument: DocumentNode<GetShortVideosQuery, GetShortVideosQueryVariables>;
+export declare const GetPostsDocument: DocumentNode<GetPostsQuery, GetPostsQueryVariables>;
 export declare const GetStreamsDocument: DocumentNode<GetStreamsQuery, GetStreamsQueryVariables>;

package/dist/media-center/config/operations.generated.js

@@ -84,13 +84,13 @@ export const GetMediaPageConfigDocument = {
         }
     ]
 };
-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',
@@ -109,7 +109,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: {
@@ -118,10 +118,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' } }
                             ]
@@ -334,7 +331,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/media-center/config/operations.graphql

@@ -20,10 +20,10 @@ query GetMediaPageConfig($mediaPageId: String!) {
 }
 
 # noinspection GraphQLSchemaValidation
-query GetShortVideos($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
-  shortVideos: embedPosts(input: $input) {
+query GetPosts($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
+  posts: embedPosts(input: $input) {
     items {
-      ...ShortVideosPlayerPayloadFragment
+      ...PostsPlayerPayloadFragment
     }
     continuationToken
   }

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

@@ -1,24 +1,26 @@
+import { PostType } from '../../core/enums';
 import type { IContentCategoryFollowingHandler } from '../categories-following';
+import type { IPostAnalyticsHandler, PostPlayerModel } from '../../posts/posts-player/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
-import type { IShortVideoAnalyticsHandler, ShortVideoPlayerModel } from '../../short-videos/short-videos-player/types';
 import type { IStreamPlayerDataProvider, IStreamAnalyticsHandler } from '../../streams/stream-player/types';
 export interface IMediaCenterConfig {
     getConfig: () => Promise<MediaCenterConfigModel | null>;
     handlers?: {
-        analyticsHandler?: IShortVideoAnalyticsHandler & IStreamAnalyticsHandler;
+        analyticsHandler?: IPostAnalyticsHandler & IStreamAnalyticsHandler;
         socialInteractionsHandler?: IPostSocialInteractionsHandler;
         categoriesFollowingHandler?: IContentCategoryFollowingHandler;
     };
-    shortVideosPlayer: {
-        getShortVideosCursor: (input: {
+    postsPlayer: {
+        getPostsCursor: (input: {
             filter: {
+                types: PostType[];
                 categoryId?: string;
                 excludeIds?: string[];
             };
             limit: number;
             continuationToken?: string | null;
         }) => Promise<{
-            items: ShortVideoPlayerModel[];
+            items: PostPlayerModel[];
             continuationToken: string | null;
         }>;
     };

package/dist/media-center/config/types.js

@@ -1 +1 @@
-export {};
+import { PostType } from '../../core/enums';

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -9,7 +9,7 @@
 };
 import { horizontalWheelScroll } from '../../core/actions';
 import { Utils } from '../../core/utils';
-import { default as ShortVideosPlayerView } from '../../short-videos/short-videos-player/short-videos-player-view.svelte';
+import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
 import { default as StreamPlayerView } from '../../streams/stream-player/stream-player-view.svelte';
 import { Icon } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
@@ -20,12 +20,14 @@ import { default as DiscoverPanel } from './discover-panel.svelte';
 import { MediaCenterHandler } from './media-center-handler.svelte';
 import { MediaCenterLocalization } from './media-center-localization';
 import { default as MobileControlsPanel } from './mobile-controls-panel.svelte';
-import { makeShortVideosProvider } from './short-video-resources-generator';
+import { makePostPlayerItemsProvider } from './post-player-provider-generator';
 import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 import { default as StreamsInCategoryPanel } from './streams-in-category-panel.svelte';
 import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
 import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
+import { tick } from 'svelte';
 import { fade } from 'svelte/transition';
+const SCROLL_MASK_OFFSET = 32;
 let { config, playerProps, locale = 'en' } = $props();
 const localization = $derived(new MediaCenterLocalization(locale));
 const commonPlayerSettings = {
@@ -42,23 +44,24 @@ let isMobileView = $state(false);
 const overlayActivated = $derived(discoverHandler.activated || streamsInCategoryHandler.activated);
 let mobileControlsPanelActive = $state(false);
 let extraMobileControlsPanelActions = $state.raw([]);
+let scrollAreaRef = $state(null);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
+    var _a, _b, _c;
     const selectedCategoryData = handler.getCategoryData(categoryId);
     if (!config || !selectedCategoryData) {
         return;
     }
     hideMobileControlsPanel();
     switch (mediaCenterMode) {
-        case 'short-videos':
+        case 'posts':
             if (handler.selectedCategoryId === categoryId) {
                 discoverHandler.deactivate();
                 return;
             }
             handler.selectedCategoryId = categoryId;
             computedPlayerProps = {
-                mode: 'short-videos',
-                props: Object.assign({ dataProvider: makeShortVideosProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
+                mode: 'posts',
+                props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
             };
             discoverHandler.deactivate();
             break;
@@ -76,16 +79,62 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
         default:
             Utils.assertUnreachable(mediaCenterMode);
     }
+    // Scroll to selected category if it's hidden
+    yield scrollToSelectedCategory((_c = selectedCategoryData.parentId) !== null && _c !== void 0 ? _c : selectedCategoryData.id);
+});
+/**
+ * Scrolls the scroll area to make the selected category button visible
+ * @param categoryId - ID of the selected category
+ */
+const scrollToSelectedCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!scrollAreaRef) {
+        return;
+    }
+    // Wait for DOM to update with the new active state
+    yield tick();
+    // Find the selected category button element
+    const selectedButton = scrollAreaRef.querySelector(`[id="${categoryId}"]`);
+    if (!selectedButton) {
+        return;
+    }
+    // Get scroll area and button dimensions
+    const scrollAreaRect = scrollAreaRef.getBoundingClientRect();
+    const buttonRect = selectedButton.getBoundingClientRect();
+    // Calculate button position relative to scroll area
+    const buttonLeftRelative = buttonRect.left - scrollAreaRect.left + scrollAreaRef.scrollLeft;
+    const buttonRightRelative = buttonLeftRelative + buttonRect.width;
+    // Calculate visible area boundaries (accounting for mask gradients)
+    const hasLeftMask = scrollAreaRef.scrollLeft > 0;
+    const hasRightMask = scrollAreaRef.scrollLeft < scrollAreaRef.scrollWidth - scrollAreaRect.width - 1;
+    const visibleLeft = scrollAreaRef.scrollLeft + (hasLeftMask ? SCROLL_MASK_OFFSET : 0);
+    const visibleRight = scrollAreaRef.scrollLeft + scrollAreaRect.width - (hasRightMask ? SCROLL_MASK_OFFSET : 0);
+    // Check if button is hidden or partially hidden
+    const isHiddenLeft = buttonLeftRelative < visibleLeft;
+    const isHiddenRight = buttonRightRelative > visibleRight;
+    if (isHiddenLeft) {
+        const targetScroll = buttonLeftRelative - SCROLL_MASK_OFFSET;
+        scrollAreaRef.scrollTo({
+            left: targetScroll,
+            behavior: 'smooth'
+        });
+    }
+    else if (isHiddenRight) {
+        const targetScroll = buttonRightRelative - scrollAreaRect.width + SCROLL_MASK_OFFSET;
+        scrollAreaRef.scrollTo({
+            left: targetScroll,
+            behavior: 'smooth'
+        });
+    }
 });
 const activateSelectedShortVideoPlayer = (shortVideo) => {
     var _a, _b;
     if (!config) {
         return;
     }
-    mediaCenterMode = 'short-videos';
+    mediaCenterMode = 'posts';
     computedPlayerProps = {
-        mode: 'short-videos',
-        props: Object.assign({ dataProvider: makeShortVideosProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
+        mode: 'posts',
+        props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
     };
     handler.selectedCategoryId = null;
     discoverHandler.deactivate();
@@ -134,6 +183,8 @@ const updateScrollShadows = (scrollArea) => {
     scrollArea.classList.toggle('has-both-masks', scrollHasRight && scrollHasLeft);
 };
 const onScrollMounted = (node) => {
+    scrollAreaRef = node;
+    scrollAreaRef.style.setProperty('--scroll-area--mask-offset', `${SCROLL_MASK_OFFSET}px`);
     const scrollResizeObserver = new ResizeObserver(() => {
         updateScrollShadows(node);
     });
@@ -178,7 +229,7 @@ const onWidthAnchorMounted = (node) => {
           class="media-center-controls-panel__button"
           class:media-center-controls-panel__button--active={discoverHandler.activated}
           onclick={toggleDiscover}>
-          <span class="media-center-controls-panel__button-icon">
+          <span class="media-center-controls-panel__button-icon" class:media-center-controls-panel__button-icon--active={discoverHandler.activated}>
             <Icon src={IconScreenSearch} />
           </span>
           <span class="media-center-controls-panel__button-value">
@@ -189,6 +240,7 @@ const onWidthAnchorMounted = (node) => {
           {#each handler.categories as category (category.id)}
             <button
               type="button"
+              id={category.id}
               class="media-center-controls-panel__button"
               class:media-center-controls-panel__button--active={!discoverHandler.activated && handler.controlsPanelSelectedCategory?.id === category.id}
               data-child-name={(!discoverHandler.activated &&
@@ -210,8 +262,8 @@ const onWidthAnchorMounted = (node) => {
       </div>
     {/if}
   {/snippet}
-  {#if computedPlayerProps.mode === 'short-videos'}
-    <ShortVideosPlayerView
+  {#if computedPlayerProps.mode === 'posts'}
+    <PostsPlayerView
       {...computedPlayerProps.props}
       mediaCenterData={{
         controlsPanel: handler.categories.length ? controlsPanel : undefined,
@@ -304,15 +356,17 @@ const onWidthAnchorMounted = (node) => {
   scrollbar-width: none;
   padding: 0.5rem 0.625rem;
   padding-left: 0;
+  --_scroll-area--mask-offset--left: var(--scroll-area--mask-offset);
+  --_scroll-area--mask-offset--right: calc(100% - var(--scroll-area--mask-offset));
 }
 :global(.media-center-controls-panel__scroll-area.has-left-mask) {
-  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 32px, rgb(0, 0, 0) 100%);
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--left), rgb(0, 0, 0) 100%);
 }
 :global(.media-center-controls-panel__scroll-area.has-right-mask) {
-  mask-image: linear-gradient(to right, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - 32px), rgba(0, 0, 0, 0) 100%);
+  mask-image: linear-gradient(to right, rgb(0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--right), rgba(0, 0, 0, 0) 100%);
 }
 :global(.media-center-controls-panel__scroll-area.has-both-masks) {
-  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) 32px, rgb(0, 0, 0) calc(100% - 32px), rgba(0, 0, 0, 0) 100%);
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--left), rgb(0, 0, 0) var(--_scroll-area--mask-offset--right), rgba(0, 0, 0, 0) 100%);
 }
 .media-center-controls-panel__button {
   position: relative;
@@ -340,7 +394,6 @@ const onWidthAnchorMounted = (node) => {
 .media-center-controls-panel__button--active {
   background-color: rgba(255, 255, 255, 0.9);
   color: #000000;
-  --icon--color: #000000;
 }
 .media-center-controls-panel__button:hover:not(.media-center-controls-panel__button--active) {
   background-color: rgba(0, 0, 0, 0.9);
@@ -364,8 +417,12 @@ const onWidthAnchorMounted = (node) => {
   pointer-events: none;
 }
 .media-center-controls-panel__button-icon {
-  --icon--color: #ffffff;
   --icon--size: 1.0625rem;
+  --icon--color: #ffffff;
+  line-height: 0;
+}
+.media-center-controls-panel__button-icon--active {
+  --icon--color: #000000;
 }
 .media-center-controls-panel__button-value {
   font-size: 0.875rem;

package/dist/media-center/media-center/cmp.media-center.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Locale } from '../../core/locale';
 import type { IMediaCenterConfig } from '../config/types';
-import type { ShortVideoPlayerProps } from '../../short-videos/short-videos-player/types';
+import type { PostPlayerProps } from '../../posts/posts-player/types';
 import type { StreamPlayerProps } from '../../streams/stream-player/types';
 type PlayerProps = {
-    mode: 'short-videos';
-    props: ShortVideoPlayerProps;
+    mode: 'posts';
+    props: PostPlayerProps;
 } | {
     mode: 'stream';
     props: StreamPlayerProps;

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

@@ -1,6 +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;
@@ -22,7 +23,7 @@ export declare class DiscoverPanelHandler {
 }
 type ShortVideoSectionItemType = {
     kind: 'video';
-    data: ShortVideoPlayerModel;
+    data: PostPlayerModel;
 } | {
     kind: 'product';
     data: ProductCardModel;

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);
@@ -65,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.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/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;