@streamscloud/embeddable 8.3.0 → 10.0.0

package/dist/media-center/config/operations.graphql

@@ -18,27 +18,3 @@ query GetMediaPageConfig($mediaPageId: String!) {
     }
   }
 }
-
-# noinspection GraphQLSchemaValidation
-query GetShortVideos($input: EmbedPostsInput!, $image_scale: ImageScale = ORIGINAL_ENCODED) {
-  shortVideos: embedPosts(input: $input) {
-    items {
-      ...ShortVideosPlayerPayloadFragment
-    }
-    continuationToken
-  }
-}
-
-query GetStreams($input: EmbedStreamsInput!) {
-  streams: embedStreams(input: $input) {
-    items {
-      id
-      cover {
-        url
-      }
-      title
-      subTitle
-    }
-    continuationToken
-  }
-}

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

@@ -1,24 +1,27 @@
+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';
+import type { StreamPageViewerModel } from '../../streams/stream-page-viewer';
+import type { IStreamAnalyticsHandler, StreamPlayerModel } from '../../streams/streams-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;
         }>;
     };
@@ -31,10 +34,13 @@ export interface IMediaCenterConfig {
             limit: number;
             continuationToken?: string | null;
         }) => Promise<{
-            items: MediaCenterStreamPreviewModel[];
+            items: StreamPlayerModel[];
+            continuationToken: string | null;
+        }>;
+        getStreamPages: (streamId: string, continuationToken: string | null | undefined) => Promise<{
+            items: StreamPageViewerModel[];
             continuationToken: string | null;
         }>;
-        streamPlayerDataProvider: IStreamPlayerDataProvider;
     };
 }
 export type MediaCenterConfigModel = {
@@ -46,12 +52,6 @@ export type MediaCenterConfigModel = {
     }[];
     targetData: MediaCenterTargetDataModel;
 };
-export type MediaCenterStreamPreviewModel = {
-    id: string;
-    title: string;
-    subTitle: string | null;
-    cover: string | null;
-};
 export type MediaCenterTargetDataModel = {
     id: string;
     name: string;

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,23 +9,26 @@
 };
 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 StreamPlayerView } from '../../streams/stream-player/stream-player-view.svelte';
+import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
+import { default as StreamsPlayerView } from '../../streams/streams-player/streams-player-view.svelte';
 import { Icon } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
-import { PlayerButton } from '../../ui/player-button';
+import { PlayerButton } from '../../ui/player/button';
 import { default as DesktopCategoriesSelector } from './desktop-categories-selector.svelte';
 import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
 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 { makeStreamsPlayerDataProvider } from './streams-player-provider-generator';
 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 +45,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,22 +80,68 @@ 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();
     streamsInCategoryHandler.deactivate();
 };
-const activateSelectedStreamPlayer = (id) => {
+const activateSelectedStreamPlayer = (stream) => {
     var _a, _b;
     if (!config) {
         return;
@@ -99,7 +149,21 @@ const activateSelectedStreamPlayer = (id) => {
     mediaCenterMode = 'stream';
     computedPlayerProps = {
         mode: 'stream',
-        props: Object.assign({ streamId: id, dataProvider: config.streamPlayer.streamPlayerDataProvider, analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
+        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: [stream] }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
+    };
+    handler.selectedCategoryId = null;
+    discoverHandler.deactivate();
+    streamsInCategoryHandler.deactivate();
+};
+const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
+    var _a, _b;
+    if (!config) {
+        return;
+    }
+    mediaCenterMode = 'stream';
+    computedPlayerProps = {
+        mode: 'stream',
+        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: prefetchedStreams, initialStreamId: id, categoryId }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
     };
     handler.selectedCategoryId = null;
     discoverHandler.deactivate();
@@ -134,6 +198,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 +244,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 +255,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 +277,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,
@@ -220,7 +287,7 @@ const onWidthAnchorMounted = (node) => {
         callbacks: { onHeaderHeightChanged, onExtraActionsForMobileControlsPanelDetermined }
       }} />
   {:else if computedPlayerProps.mode === 'stream'}
-    <StreamPlayerView
+    <StreamsPlayerView
       {...computedPlayerProps.props}
       mediaCenterData={{
         controlsPanel: handler.categories.length ? controlsPanel : undefined,
@@ -238,13 +305,18 @@ const onWidthAnchorMounted = (node) => {
       <DiscoverPanel
         handler={discoverHandler}
         localization={localization}
-        on={{ shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo), streamSelected: (id) => activateSelectedStreamPlayer(id) }} />
+        on={{
+          shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
+          streamSelected: (stream) => activateSelectedStreamPlayer(stream)
+        }} />
     </div>
   {/if}
 
   {#if streamsInCategoryHandler.active}
     <div class="media-center-overlay" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-      <StreamsInCategoryPanel handler={streamsInCategoryHandler} on={{ streamSelected: (id) => activateSelectedStreamPlayer(id) }} />
+      <StreamsInCategoryPanel
+        handler={streamsInCategoryHandler}
+        on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
     </div>
   {/if}
 
@@ -304,15 +376,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 +414,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 +437,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,13 +1,13 @@
 import type { Locale } from '../../core/locale';
 import type { IMediaCenterConfig } from '../config/types';
-import type { ShortVideoPlayerProps } from '../../short-videos/short-videos-player/types';
-import type { StreamPlayerProps } from '../../streams/stream-player/types';
+import type { PostPlayerProps } from '../../posts/posts-player/types';
+import type { StreamsPlayerProps } from '../../streams/streams-player/types';
 type PlayerProps = {
-    mode: 'short-videos';
-    props: ShortVideoPlayerProps;
+    mode: 'posts';
+    props: PostPlayerProps;
 } | {
     mode: 'stream';
-    props: StreamPlayerProps;
+    props: StreamsPlayerProps;
 };
 type Props = {
     config: IMediaCenterConfig | null;

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

@@ -1,7 +1,8 @@
 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';
+import type { StreamPlayerModel } from '../../streams/streams-player';
 export declare class DiscoverPanelHandler {
     private readonly config;
     private _activated;
@@ -10,7 +11,7 @@ export declare class DiscoverPanelHandler {
     private _shortVideos;
     private _products;
     constructor(config: IMediaCenterConfig | null);
-    get streamSectionItems(): MediaCenterStreamModel[];
+    get streamSectionItems(): StreamPlayerModel[];
     get shortVideoSectionItems(): ShortVideoSectionItemType[];
     get activated(): boolean;
     get active(): boolean;
@@ -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

@@ -16,7 +16,7 @@ let { handler, localization, on } = $props();
         </div>
         <div class="media-center-overview__section-content">
           {#each handler.streamSectionItems as item (item.id)}
-            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id) }}></StreamCard>
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
           {/each}
         </div>
       </div>

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

@@ -1,12 +1,13 @@
-import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
+import type { PostPlayerModel } from '../../posts/posts-player';
+import type { StreamPlayerModel } from '../../streams/streams-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;
-        streamSelected: (id: string) => void;
+        shortVideoSelected: (shortVideo: PostPlayerModel) => void;
+        streamSelected: (stream: StreamPlayerModel) => void;
     };
 };
 declare const DiscoverPanel: import("svelte").Component<Props, {}, "">;

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 { IFeedPlayerDataProvider } from '../../ui/player/providers';
+import type { IMediaCenterConfig } from '../config/types';
+export declare const makePostPlayerItemsProvider: (data: {
+    config: IMediaCenterConfig;
+    categoryId?: string;
+    prefetchedItems?: PostPlayerModel[];
+}) => IFeedPlayerDataProvider<PostPlayerModel>;

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

@@ -1,11 +1,16 @@
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
-export const makeShortVideosProvider = (data) => {
+import { PostType } from '../../core/enums';
+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
             });
@@ -17,6 +22,7 @@ export const makeShortVideosProvider = (data) => {
         }
     });
     return {
+        kind: 'feed',
         initialData: {
             prefetchedItems,
             startIndex: prefetchedItems.length ? 0 : -1

package/dist/media-center/media-center/streams-in-category-panel-handler.svelte.d.ts

@@ -1,13 +1,16 @@
 import type { IMediaCenterConfig } from '../../short-videos/short-videos-player';
-import type { MediaCenterCategoryData, MediaCenterStreamModel } from './types';
+import type { StreamPlayerModel } from '../../streams/streams-player';
+import type { MediaCenterCategoryData } from './types';
 export declare class StreamsInCategoryPanelHandler {
     private readonly config;
     private _activated;
     private _state;
+    private _categoryId;
     private _categoryName;
     private _streams;
     constructor(config: IMediaCenterConfig | null);
-    get streamSectionItems(): MediaCenterStreamModel[];
+    get streamSectionItems(): StreamPlayerModel[];
+    get categoryId(): string;
     get categoryName(): string;
     get activated(): boolean;
     get active(): boolean;

package/dist/media-center/media-center/streams-in-category-panel-handler.svelte.js

@@ -2,6 +2,7 @@ export class StreamsInCategoryPanelHandler {
     config;
     _activated = $state(false);
     _state = $state('loading');
+    _categoryId = $state.raw('');
     _categoryName = $state.raw('');
     _streams = $state.raw([]);
     constructor(config) {
@@ -10,6 +11,9 @@ export class StreamsInCategoryPanelHandler {
     get streamSectionItems() {
         return this._streams;
     }
+    get categoryId() {
+        return this._categoryId;
+    }
     get categoryName() {
         return this._categoryName;
     }
@@ -31,6 +35,7 @@ export class StreamsInCategoryPanelHandler {
         try {
             const streamsResponse = await this.config.streamPlayer.getStreamsCursor({ filter: { categoryId: category.id }, limit: 5 });
             this._categoryName = category.parentName ? `${category.parentName} - ${category.name}` : category.name;
+            this._categoryId = category.id;
             this._streams = streamsResponse.items;
         }
         finally {

package/dist/media-center/media-center/streams-in-category-panel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { StreamCard } from '../../streams/stream-card';
-import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte.js';
+import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 let { handler, on } = $props();
 </script>
 
@@ -12,7 +12,7 @@ let { handler, on } = $props();
         </div>
         <div class="streams-in-category__section-content">
           {#each handler.streamSectionItems as item (item.id)}
-            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id) }}></StreamCard>
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id, handler.categoryId, handler.streamSectionItems) }}></StreamCard>
           {/each}
         </div>
       </div>

package/dist/media-center/media-center/streams-in-category-panel.svelte.d.ts

@@ -1,8 +1,9 @@
-import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte.js';
+import type { StreamPlayerModel } from '../../streams/streams-player';
+import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
 type Props = {
     handler: StreamsInCategoryPanelHandler;
     on: {
-        streamSelected: (id: string) => void;
+        streamSelected: (streamId: string, categoryId: string, streams: StreamPlayerModel[]) => void;
     };
 };
 declare const StreamsInCategoryPanel: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +1,8 @@
+import type { IStreamsPlayerDataProvider, StreamPlayerModel } from '../../streams/streams-player/types';
+import type { IMediaCenterConfig } from '../config/types';
+export declare const makeStreamsPlayerDataProvider: (data: {
+    config: IMediaCenterConfig;
+    initialStreamId?: string;
+    categoryId?: string;
+    prefetchedStreams?: StreamPlayerModel[];
+}) => IStreamsPlayerDataProvider;

package/dist/media-center/media-center/streams-player-provider-generator.js

@@ -0,0 +1,36 @@
+import { ContinuationToken } from '../../core/continuation-token';
+import { CursorDataLoader } from '../../core/data-loaders';
+export const makeStreamsPlayerDataProvider = (data) => {
+    const { config, categoryId, prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = data;
+    const loader = new CursorDataLoader({
+        loadPage: async (continuationToken) => {
+            const result = await config.streamPlayer.getStreamsCursor({
+                filter: {
+                    categoryId,
+                    excludeIds: initialPrefetchedStreams.length ? initialPrefetchedStreams.map((i) => i.id) : undefined
+                },
+                continuationToken: continuationToken.toNextChunkString(),
+                limit: 20
+            });
+            const items = result.items;
+            return {
+                items: items,
+                continuationToken: ContinuationToken.fromPayload(result.continuationToken)
+            };
+        }
+    });
+    let prefetchedStreams = initialPrefetchedStreams;
+    if (initialStreamId) {
+        const targetStream = prefetchedStreams.find((stream) => stream.id === initialStreamId);
+        if (targetStream) {
+            prefetchedStreams = [targetStream, ...prefetchedStreams.filter((stream) => stream.id !== initialStreamId)];
+        }
+    }
+    return {
+        initialData: {
+            prefetchedStreams
+        },
+        loadMoreStreams: loader.loadMore,
+        getStreamPages: config.streamPlayer.getStreamPages
+    };
+};

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

@@ -1,10 +1,4 @@
-export type MediaCenterMode = 'short-videos' | 'stream';
-export type MediaCenterStreamModel = {
-    id: string;
-    title: string;
-    subTitle: string | null;
-    cover: string | null;
-};
+export type MediaCenterMode = 'stream' | 'posts';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;

package/dist/posts/controls/cmp.controls.svelte

@@ -9,7 +9,7 @@
 };
 import { IconColor } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
-import { PlayerButton, PlayerButtonsGroup } from '../../ui/player-button';
+import { PlayerButton, PlayerButtonsGroup } from '../../ui/player/button';
 import IconHeartFilled from '@fluentui/svg-icons/icons/heart_20_filled.svg?raw';
 import IconHeart from '@fluentui/svg-icons/icons/heart_28_regular.svg?raw';
 import IconShare from '@fluentui/svg-icons/icons/share_28_regular.svg?raw';

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

@@ -0,0 +1 @@
+export { getPostsCursor } from './posts-loader';

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

@@ -0,0 +1 @@
+export { getPostsCursor } from './posts-loader';

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

@@ -0,0 +1,3 @@
+import type { PostPlayerModel } from '../posts-player/types';
+import type { PostsPlayerPayloadFragment } from './operations.generated';
+export declare const mapToPostPlayerModel: (payload: PostsPlayerPayloadFragment) => PostPlayerModel;