@streamscloud/embeddable 8.2.0 → 9.0.0

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

@@ -1,8 +1,10 @@
-<script lang="ts">import { toPriceRepresentation } from '../../products/price-helper';
+<script lang="ts">var _a;
+import { enrichAdLinkWithTracking } from '../../marketing-tracking';
+import { toPriceRepresentation } from '../../products/price-helper';
 import { Button, ButtonSize } from '../../ui/button';
 import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
-let { ad, inert = false, on } = $props();
+let { ad, trackingParams, inert = false, on } = $props();
 const trackImpression = (node) => {
     if (on === null || on === void 0 ? void 0 : on.impression) {
         const observer = new IntersectionObserver((entries) => {
@@ -22,12 +24,13 @@ const trackImpression = (node) => {
         };
     }
 };
+const enrichedLink = $derived(((_a = ad.ctaButton) === null || _a === void 0 ? void 0 : _a.url) ? enrichAdLinkWithTracking({ link: ad.ctaButton.url, adId: ad.id, trackingParams }) : null);
 const handleAdClick = () => {
     if (on === null || on === void 0 ? void 0 : on.click) {
         on.click(ad.id);
     }
-    if (ad.ctaButton) {
-        window.open(ad.ctaButton.url, '_blank');
+    if (enrichedLink) {
+        window.open(enrichedLink, '_blank', 'noopener noreferrer');
     }
 };
 </script>
@@ -60,7 +63,7 @@ const handleAdClick = () => {
       {/if}
     </div>
     <div class="ad-card__button-container">
-      {#if ad.ctaButton && ad.ctaButton.url && ad.ctaButton.text}
+      {#if ad.ctaButton && enrichedLink && ad.ctaButton.text}
         <div class="ad-card__button">
           <Button
             size={ButtonSize.Standard}

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

@@ -1,6 +1,8 @@
+import { type TrackingParams } from '../../marketing-tracking';
 import type { AdCardModel } from './types';
 type Props = {
     ad: AdCardModel;
+    trackingParams: TrackingParams;
     inert?: boolean;
     on?: {
         click?: (id: string) => void;

package/dist/content-player/cmp.content-player.svelte

@@ -171,6 +171,7 @@ const variables = $derived.by(() => {
               {#if postModel}
                 <PostViewer
                   model={postModel}
+                  trackingParams={config.trackingParams}
                   socialInteractionsHandler={config.socialInteractionsHandler}
                   enableAttachments={config.uiManager.showPostOverlayAttachments}
                   enableControls={config.uiManager.showPostOverlayControls}

package/dist/content-player/content-player-config.svelte.d.ts

@@ -15,6 +15,7 @@ export declare class ContentPlayerConfig<T extends {
     readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
     readonly uiManager: ContentPlayerUIManager;
     private _mediaCenterData;
+    private _trackingParams;
     private _mappers;
     private mappedPostsCache;
     constructor(init: {
@@ -25,16 +26,19 @@ export declare class ContentPlayerConfig<T extends {
         settings?: ContentPlayerSettings;
         callbacks?: ContentPlayerCallbacks;
         playerSliderCallbacks?: PlayerSliderCallbacks<T>;
+        trackingParams?: ContentPlayerTrackingParams | null;
     });
     get mediaCenterControlsPanel(): MediaCenterData['controlsPanel'] | null;
     get mediaCenterCallbacks(): MediaCenterData['callbacks'] | null;
     get playerLogo(): string | null;
     get fadeContent(): boolean;
+    get trackingParams(): ContentPlayerConfig<T>['_trackingParams'];
     itemAsPostViewerModel: (item: T & {
         mediaIndex?: number;
     }) => PostModel | null;
     setBackgroundImageUrl: (imageUrl: string | null) => void;
     updateMediaCenterData: (data: MediaCenterData | undefined) => void;
+    updateTrackingParams: (data: ContentPlayerTrackingParams | null) => void;
 }
 export type ContentPlayerMappers<T> = {
     postModelFromCurrentItem: (item: T) => IPostModel | null;
@@ -47,3 +51,7 @@ export type ContentPlayerCallbacks = {
     adClick?: (adId: string, postId: string) => void;
     adImpression?: (adId: string, postId: string) => void;
 };
+export type ContentPlayerTrackingParams = {
+    streamId?: string;
+    campaignId?: string;
+} | false;

package/dist/content-player/content-player-config.svelte.js

@@ -9,11 +9,13 @@ export class ContentPlayerConfig {
     socialInteractionsHandler;
     uiManager = new ContentPlayerUIManager();
     _mediaCenterData = $state.raw(null);
+    _trackingParams = $state.raw(null);
     _mappers;
     mappedPostsCache = new Map();
     constructor(init) {
-        const { playerBuffer, mappers, socialInteractionsHandler, mediaCenterData, settings, callbacks, playerSliderCallbacks } = init;
+        const { playerBuffer, trackingParams, mappers, socialInteractionsHandler, mediaCenterData, settings, callbacks, playerSliderCallbacks } = init;
         this.playerBuffer = playerBuffer;
+        this._trackingParams = trackingParams ?? null;
         this.settings = settings || new ContentPlayerSettings();
         this._mediaCenterData = mediaCenterData || null;
         this.callbacks = callbacks || null;
@@ -33,6 +35,9 @@ export class ContentPlayerConfig {
     get fadeContent() {
         return this._mediaCenterData?.overlayIsActive || false;
     }
+    get trackingParams() {
+        return this._trackingParams;
+    }
     itemAsPostViewerModel = (item) => {
         if (this.mappedPostsCache.has(item.id)) {
             return this.mappedPostsCache.get(item.id) || null;
@@ -52,4 +57,7 @@ export class ContentPlayerConfig {
     updateMediaCenterData = (data) => {
         this._mediaCenterData = data ?? null;
     };
+    updateTrackingParams = (data) => {
+        this._trackingParams = data ?? null;
+    };
 }

package/dist/content-player/controls-and-attachments.svelte

@@ -75,6 +75,7 @@ const variables = $derived.by(() => {
           <div class="controls-and-attachments__post-attachments" transition:slideHorizontally|local>
             <PostAttachments
               model={currentItemPostContainer}
+              trackingParams={config.trackingParams}
               locale={config.settings.locale}
               on={{
                 productClick: (id) => config.callbacks?.productClick?.(id, currentItemPostContainer.id),

package/dist/core/enums.d.ts

@@ -33,7 +33,11 @@ export declare enum ProfileType {
     Organization = "ORGANIZATION"
 }
 export declare enum PostType {
-    ShortVideo = "SHORT_VIDEO"
+    Article = "ARTICLE",
+    Media = "MEDIA",
+    Moment = "MOMENT",
+    ShortVideo = "SHORT_VIDEO",
+    Video = "VIDEO"
 }
 export declare enum Status {
     Published = "PUBLISHED"

package/dist/core/enums.js

@@ -41,7 +41,11 @@ export var ProfileType;
 })(ProfileType || (ProfileType = {}));
 export var PostType;
 (function (PostType) {
+    PostType["Article"] = "ARTICLE";
+    PostType["Media"] = "MEDIA";
+    PostType["Moment"] = "MOMENT";
     PostType["ShortVideo"] = "SHORT_VIDEO";
+    PostType["Video"] = "VIDEO";
 })(PostType || (PostType = {}));
 export var Status;
 (function (Status) {

package/dist/marketing-tracking/index.d.ts

@@ -0,0 +1,2 @@
+export type { TrackingParams } from './types';
+export { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from './service';

package/dist/marketing-tracking/index.js

@@ -0,0 +1 @@
+export { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from './service';

package/dist/marketing-tracking/service.d.ts

@@ -0,0 +1,11 @@
+import type { TrackingParams } from './types';
+export declare const enrichProductLinkWithTracking: (data: {
+    link: string | URL;
+    productId: string;
+    trackingParams: TrackingParams | false | null | undefined;
+}) => URL;
+export declare const enrichAdLinkWithTracking: (data: {
+    link: string | URL;
+    adId: string;
+    trackingParams: TrackingParams | false | null | undefined;
+}) => URL;

package/dist/marketing-tracking/service.js

@@ -0,0 +1,35 @@
+export const enrichProductLinkWithTracking = (data) => {
+    const { link, productId, trackingParams } = data;
+    const url = link instanceof URL ? link : new URL(link);
+    if (trackingParams === false) {
+        return url;
+    }
+    url.searchParams.set('utm_source', 'streams');
+    url.searchParams.set('streams_product_id', productId);
+    return addTrackingParamsToUrl(url, trackingParams);
+};
+export const enrichAdLinkWithTracking = (data) => {
+    const { link, adId, trackingParams } = data;
+    const url = link instanceof URL ? link : new URL(link);
+    if (trackingParams === false) {
+        return url;
+    }
+    url.searchParams.set('utm_source', 'streams');
+    url.searchParams.set('streams_ad_id', adId);
+    return addTrackingParamsToUrl(url, trackingParams);
+};
+const addTrackingParamsToUrl = (url, trackingParams) => {
+    if (!trackingParams) {
+        return url;
+    }
+    if (trackingParams.campaignId) {
+        url.searchParams.set('utm_id', trackingParams.campaignId);
+    }
+    if (trackingParams.shortVideoId) {
+        url.searchParams.set('streams_short_video_id', trackingParams.shortVideoId);
+    }
+    if (trackingParams.streamId) {
+        url.searchParams.set('streams_stream_id', trackingParams.streamId);
+    }
+    return url;
+};

package/dist/marketing-tracking/types.d.ts

@@ -0,0 +1,5 @@
+export type TrackingParams = {
+    streamId?: string;
+    shortVideoId?: string;
+    campaignId?: string;
+} | false;

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;