@streamscloud/embeddable 13.0.1 → 13.2.0

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

@@ -1,20 +1,23 @@
 import type { IMediaCenterDataProvider } from '../config/types';
+import type { MediaCenterState } from '../navigation';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { DiscoverViewHandler } from './discover';
-import { FeedHandler } from './feed';
 import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
 import type { MediaCenterSettings } from './media-center-settings.svelte';
 import { PopularStreamsPanelHandler } from './menu';
 import { MomentsFeedHandler } from './moments';
+import { PostsFeedHandler } from './posts-feed';
+import { StreamsFeedHandler } from './streams-feed';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
 import type { MediaCenterMode } from './types';
 export declare class MediaCenterContext {
     initializing: boolean;
     initialized: boolean;
-    readonly mediaCenterMode: MediaCenterMode;
+    readonly mediaCenterMode: MediaCenterMode | null;
     menuActive: boolean;
     categoriesHandler: CategoriesHandler;
-    feedHandler: FeedHandler;
+    postsFeedHandler: PostsFeedHandler;
+    streamsFeedHandler: StreamsFeedHandler;
     momentsFeedHandler: MomentsFeedHandler;
     discoverHandler: DiscoverViewHandler;
     popularStreamsHandler: PopularStreamsPanelHandler;
@@ -22,6 +25,7 @@ export declare class MediaCenterContext {
     settingsHandler: MediaCenterSettingsHandler;
     closeOrchestrator: ICloseOrchestrator;
     private _dataProvider;
+    private _currentState;
     constructor(data: {
         dataProvider: IMediaCenterDataProvider;
         closeOrchestrator: ICloseOrchestrator;
@@ -37,10 +41,7 @@ export declare class MediaCenterContext {
         backgroundImageUrl: string | null;
         backgroundColor?: string | null;
     };
-    get feedPlayerProps(): import("./types").PlayerProps | null;
-    get momentsPlayerProps(): import("../../posts/posts-player/types").PostsPlayerProps | null;
     get membershipHandler(): import("..").IMediaCenterMembershipHandler | null;
-    get navigationHandler(): import("..").IMediaCenterNavigationHandler | null;
     get categoriesFollowingHandler(): import("..").IContentCategoryFollowingHandler | null;
     get locale(): import("../../core/locale").Locale;
     toggleMenu: () => void;
@@ -49,12 +50,15 @@ export declare class MediaCenterContext {
     activateDiscover: (options: {
         categoryId: string | null;
     }) => Promise<void>;
-    playPostsFeed: (options: Parameters<FeedHandler["activatePostsFeed"]>[0]) => Promise<void>;
-    playStreamsFeed: (options: Parameters<FeedHandler["activateStreamsFeed"]>[0]) => Promise<void>;
-    playMoments: () => Promise<void>;
+    backToDiscover: () => Promise<void>;
+    playPostsFeed: (options: Parameters<PostsFeedHandler["activate"]>[0]) => Promise<void>;
+    playStreamsFeed: (options: Parameters<StreamsFeedHandler["activate"]>[0]) => Promise<void>;
+    playMoments: (options?: Parameters<MomentsFeedHandler["activate"]>[0]) => Promise<void>;
     playRootFeed: () => Promise<void>;
     tryActivateStreamsInCategory: (categoryId: string) => Promise<void>;
-    private deactivateOtherThanFeed;
+    restoreState: (state: MediaCenterState) => Promise<void>;
+    handleNavigationStateChanged: (state: MediaCenterState) => void;
+    private deactivateAllBut;
     private init;
 }
 type MediaCenterContextInitializationCallbacks = {

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -1,9 +1,12 @@
+import { Utils } from '../../core/utils';
 import { DiscoverViewHandler } from './discover';
-import { FeedHandler } from './feed';
 import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
 import { MomentsFeedHandler } from './moments';
+import { PostsFeedHandler } from './posts-feed';
+import { StreamsFeedHandler } from './streams-feed';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
+import { untrack } from 'svelte';
 export class MediaCenterContext {
     initializing = $state(true);
     initialized = $state(false);
@@ -14,11 +17,18 @@ export class MediaCenterContext {
         if (this.momentsFeedHandler.active) {
             return 'moments';
         }
-        return 'feed';
+        if (this.postsFeedHandler.activated) {
+            return 'posts-feed';
+        }
+        if (this.streamsFeedHandler.activated) {
+            return 'streams-feed';
+        }
+        return null;
     });
     menuActive = $state(false);
     categoriesHandler;
-    feedHandler;
+    postsFeedHandler;
+    streamsFeedHandler;
     momentsFeedHandler;
     discoverHandler;
     popularStreamsHandler;
@@ -26,27 +36,45 @@ export class MediaCenterContext {
     settingsHandler;
     closeOrchestrator;
     _dataProvider;
+    _currentState = null;
     constructor(data) {
         const { dataProvider, closeOrchestrator, settings, on } = data;
         this._dataProvider = dataProvider;
         this.closeOrchestrator = closeOrchestrator;
         this.closeOrchestrator.setCloseTriggerAttached(true);
         this.settingsHandler = new MediaCenterSettingsHandler({ settings, dataProvider });
-        this.feedHandler = new FeedHandler({
+        this.postsFeedHandler = new PostsFeedHandler({
             dataProvider,
             mediaCenterSettingsHandler: this.settingsHandler,
             closeOrchestrator,
-            onPlayerReachedEnd: () => this.activateDiscover({ categoryId: this.categoriesHandler.selectedCategoryId })
+            on: { playerReachedEnd: this.backToDiscover, navigationStateChanged: this.handleNavigationStateChanged }
+        });
+        this.streamsFeedHandler = new StreamsFeedHandler({
+            dataProvider,
+            mediaCenterSettingsHandler: this.settingsHandler,
+            closeOrchestrator,
+            on: { playerReachedEnd: this.backToDiscover, navigationStateChanged: this.handleNavigationStateChanged }
         });
         this.categoriesHandler = new CategoriesHandler(dataProvider);
-        this.discoverHandler = new DiscoverViewHandler(dataProvider);
+        this.discoverHandler = new DiscoverViewHandler({ dataProvider, on: { navigationStateChanged: this.handleNavigationStateChanged } });
         this.popularStreamsHandler = new PopularStreamsPanelHandler(dataProvider);
         this.streamsInCategoryHandler = new StreamsInCategoryPanelHandler(dataProvider);
         this.momentsFeedHandler = new MomentsFeedHandler({
             dataProvider,
             mediaCenterSettingsHandler: this.settingsHandler,
             closeOrchestrator,
-            onPlayerReachedEnd: () => this.activateDiscover({ categoryId: this.categoriesHandler.selectedCategoryId })
+            on: { playerReachedEnd: this.backToDiscover, navigationStateChanged: this.handleNavigationStateChanged }
+        });
+        $effect(() => {
+            if (this.initialized) {
+                void settings.state;
+                untrack(() => {
+                    if (!settings.state) {
+                        return;
+                    }
+                    this.restoreState(settings.state);
+                });
+            }
         });
         this.init(dataProvider, on);
     }
@@ -57,7 +85,7 @@ export class MediaCenterContext {
         return this.settingsHandler.actualMediaCenterColors;
     }
     get loading() {
-        return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
+        return this.discoverHandler.loading || this.postsFeedHandler.loading || this.streamsFeedHandler.loading || this.streamsInCategoryHandler.loading;
     }
     get overlayIsActive() {
         return this.streamsInCategoryHandler.activated;
@@ -65,18 +93,9 @@ export class MediaCenterContext {
     get backgroundWrapperProps() {
         return this.settingsHandler.backgroundWrapperProps;
     }
-    get feedPlayerProps() {
-        return this.feedHandler.feedPlayerProps;
-    }
-    get momentsPlayerProps() {
-        return this.momentsFeedHandler.momentsPlayerProps;
-    }
     get membershipHandler() {
         return this._dataProvider.handlers?.membershipHandler || null;
     }
-    get navigationHandler() {
-        return this._dataProvider.handlers?.navigationHandler || null;
-    }
     get categoriesFollowingHandler() {
         return this._dataProvider.handlers?.categoriesFollowingHandler || null;
     }
@@ -100,61 +119,101 @@ export class MediaCenterContext {
     };
     activateDiscover = async (options) => {
         this.settingsHandler.updateBackgroundImageUrl('not-applicable');
-        this.hideMenu();
-        this.feedHandler.deactivate();
-        this.momentsFeedHandler.deactivate();
-        this.streamsInCategoryHandler.deactivate();
+        this.deactivateAllBut('discover');
         this.categoriesHandler.selectedCategoryId = options.categoryId;
         const childCategories = this.categoriesHandler.allCategories.filter((c) => c.parentId === this.categoriesHandler.selectedCategoryId);
         await this.discoverHandler.activate({
             activeCategoryId: this.categoriesHandler.selectedCategoryId,
+            activeCategoryName: this.categoriesHandler.allCategories.find((c) => c.id === this.categoriesHandler.selectedCategoryId)?.name || null,
             childCategories: childCategories.map((c) => ({ id: c.id, name: c.name }))
         });
     };
+    backToDiscover = () => this.activateDiscover({ categoryId: this.categoriesHandler.selectedCategoryId });
     playPostsFeed = async (options) => {
-        this.deactivateOtherThanFeed();
+        this.deactivateAllBut('posts-feed');
         this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
-        this.feedHandler.activatePostsFeed(options);
+        this.postsFeedHandler.activate(options);
     };
     playStreamsFeed = async (options) => {
-        this.deactivateOtherThanFeed();
+        this.deactivateAllBut('streams-feed');
         this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
-        this.feedHandler.activateStreamsFeed(options);
+        this.streamsFeedHandler.activate(options);
     };
-    playMoments = async () => {
+    playMoments = async (options) => {
         if (!this.momentsFeedHandler.hasMoments) {
             return;
         }
-        this.hideMenu();
-        this.feedHandler.deactivate();
-        this.discoverHandler.deactivate();
-        this.streamsInCategoryHandler.deactivate();
-        this.momentsFeedHandler.activateMoments();
+        this.deactivateAllBut('moments');
+        this.momentsFeedHandler.activate(options);
     };
     playRootFeed = async () => {
-        this.deactivateOtherThanFeed();
         this.categoriesHandler.selectedCategoryId = null;
-        if (this.feedPlayerProps?.type === 'streams') {
-            this.feedHandler.activateStreamsFeed({});
+        if (this.streamsFeedHandler.active) {
+            this.streamsFeedHandler.activate({});
         }
         else {
-            this.feedHandler.activatePostsFeed({});
+            this.deactivateAllBut('posts-feed');
+            this.postsFeedHandler.activate({});
         }
     };
     tryActivateStreamsInCategory = async (categoryId) => {
         const selectedCategoryData = this.categoriesHandler.getCategoryData(categoryId);
         await this.streamsInCategoryHandler.activate(selectedCategoryData);
-        this.hideMenu();
-        this.feedHandler.deactivate();
-        this.momentsFeedHandler.deactivate();
-        this.discoverHandler.deactivate();
+        this.deactivateAllBut('streams-in-category');
         this.categoriesHandler.selectedCategoryId = categoryId;
     };
-    deactivateOtherThanFeed = () => {
+    restoreState = async (state) => {
+        if (Utils.areEqual(this._currentState, state)) {
+            return;
+        }
+        this._currentState = state;
+        switch (state.mode) {
+            case 'posts-feed':
+                await this.playPostsFeed({ filter: { categoryId: state.categoryId }, init: { initialPostId: state.postId } });
+                break;
+            case 'streams-feed':
+                await this.playStreamsFeed({
+                    filter: { categoryId: state.categoryId },
+                    init: { initialStreamId: state.streamId, initialStreamPageId: state.streamPageId }
+                });
+                break;
+            case 'discover':
+                await this.activateDiscover({ categoryId: state.categoryId });
+                break;
+            case 'moments':
+                await this.playMoments({ initialMomentId: state.momentId });
+                break;
+        }
+    };
+    handleNavigationStateChanged = (state) => {
+        if (Utils.areEqual(this._currentState, state)) {
+            return;
+        }
+        const navigationHandler = this._dataProvider.handlers?.navigationHandler;
+        if (!navigationHandler) {
+            return;
+        }
+        this._currentState = state;
+        navigationHandler.onChange(state);
+    };
+    deactivateAllBut = (...params) => {
         this.hideMenu();
-        this.momentsFeedHandler.deactivate();
-        this.discoverHandler.deactivate();
-        this.streamsInCategoryHandler.deactivate();
+        const keep = new Set(params);
+        if (!keep.has('moments')) {
+            this.momentsFeedHandler.deactivate();
+        }
+        if (!keep.has('discover')) {
+            this.discoverHandler.deactivate();
+        }
+        if (!keep.has('posts-feed')) {
+            this.postsFeedHandler.deactivate();
+        }
+        if (!keep.has('streams-feed')) {
+            this.streamsFeedHandler.deactivate();
+        }
+        if (!keep.has('streams-in-category')) {
+            this.streamsInCategoryHandler.deactivate();
+        }
     };
     init = async (config, on) => {
         try {

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

@@ -1,11 +1,13 @@
 import type { Locale } from '../../core/locale';
 import type { ThemeValue } from '../../core/theme';
+import type { MediaCenterState } from '..';
 import type { IMediaCenterSettings } from './types';
 export declare class MediaCenterSettings {
     locale: Locale;
     showStreamsCloudWatermark: boolean;
     disableBackground: boolean;
     theme: ThemeValue;
+    state: MediaCenterState | null;
     constructor(init: IMediaCenterSettings | undefined);
-    patch: (data: Partial<IMediaCenterSettings> | undefined) => void;
+    update: (data: IMediaCenterSettings | undefined) => void;
 }

package/dist/media-center/media-center/media-center-settings.svelte.js

@@ -3,21 +3,15 @@ export class MediaCenterSettings {
     showStreamsCloudWatermark = $state(true);
     disableBackground = $state(false);
     theme = $state('dark');
+    state = $state.raw(null);
     constructor(init) {
-        this.patch(init);
+        this.update(init);
     }
-    patch = (data) => {
-        if (data?.locale !== undefined) {
-            this.locale = data.locale;
-        }
-        if (data?.showStreamsCloudWatermark !== undefined) {
-            this.showStreamsCloudWatermark = data.showStreamsCloudWatermark;
-        }
-        if (data?.disableBackground !== undefined) {
-            this.disableBackground = data.disableBackground;
-        }
-        if (data?.theme !== undefined) {
-            this.theme = data.theme;
-        }
+    update = (data) => {
+        this.locale = data?.locale ?? 'en';
+        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark ?? true;
+        this.disableBackground = data?.disableBackground ?? false;
+        this.theme = data?.theme ?? 'dark';
+        this.state = data?.state ?? null;
     };
 }

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

@@ -22,24 +22,21 @@ let { context, dynamicActions } = $props();
 let headerHeight = $state(0);
 let isMobileView = $state(false);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!context.mediaCenterMode) {
+        return;
+    }
     switch (context.mediaCenterMode) {
-        case 'feed':
-            if (!context.feedPlayerProps) {
+        case 'posts-feed':
+            if (!context.postsFeedHandler.feedPlayerProps) {
                 return;
             }
-            switch (context.feedPlayerProps.type) {
-                case 'posts':
-                    if (context.categoriesHandler.selectedCategoryId === categoryId) {
-                        return;
-                    }
-                    context.playPostsFeed({ filter: { categoryId } });
-                    break;
-                case 'streams':
-                    context.tryActivateStreamsInCategory(categoryId);
-                    return;
-                default:
-                    Utils.assertUnreachable(context.feedPlayerProps);
+            if (context.categoriesHandler.selectedCategoryId === categoryId) {
+                return;
             }
+            context.playPostsFeed({ filter: { categoryId } });
+            break;
+        case 'streams-feed':
+            context.tryActivateStreamsInCategory(categoryId);
             break;
         case 'discover':
             context.activateDiscover({ categoryId });
@@ -52,13 +49,13 @@ const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, functio
     }
 });
 const activateSelectedShortVideoPlayer = (shortVideo) => {
-    context.playPostsFeed({ filter: { prefetchedItems: [shortVideo] } });
+    context.playPostsFeed({ init: { prefetchedItems: [shortVideo] } });
 };
 const activateSelectedStreamPlayer = (stream) => {
-    context.playStreamsFeed({ filter: { prefetchedStreams: [stream] } });
+    context.playStreamsFeed({ init: { prefetchedStreams: [stream] } });
 };
 const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
-    context.playStreamsFeed({ filter: { categoryId, prefetchedStreams, initialStreamId: id } });
+    context.playStreamsFeed({ filter: { categoryId }, init: { prefetchedStreams, initialStreamId: id } });
 };
 const onHeaderHeightChanged = (height) => {
     headerHeight = height;
@@ -139,13 +136,13 @@ const swipeToOpen = (node) => {
     {/if}
 
     <div class="media-center__content-container" use:swipeToOpen>
-      {#if context.mediaCenterMode === 'feed' && context.feedPlayerProps}
+      {#if context.mediaCenterMode === 'posts-feed' && context.postsFeedHandler.feedPlayerProps}
+        <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
+          <PostsPlayerView {...context.postsFeedHandler.feedPlayerProps} />
+        </div>
+      {:else if context.mediaCenterMode === 'streams-feed' && context.streamsFeedHandler.feedPlayerProps}
         <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
-          {#if context.feedPlayerProps.type === 'posts'}
-            <PostsPlayerView {...context.feedPlayerProps.props} />
-          {:else if context.feedPlayerProps.type === 'streams'}
-            <StreamsPlayerView {...context.feedPlayerProps.props} />
-          {/if}
+          <StreamsPlayerView {...context.streamsFeedHandler.feedPlayerProps} />
         </div>
       {:else if context.mediaCenterMode === 'discover'}
         <div class="media-center__content" transition:fade={{ duration: 300 }}>
@@ -156,9 +153,9 @@ const swipeToOpen = (node) => {
               streamSelected: (stream) => activateSelectedStreamPlayer(stream)
             }} />
         </div>
-      {:else if context.mediaCenterMode === 'moments' && context.momentsPlayerProps}
+      {:else if context.mediaCenterMode === 'moments' && context.momentsFeedHandler.momentsPlayerProps}
         <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
-          <PostsPlayerView {...context.momentsPlayerProps} />
+          <PostsPlayerView {...context.momentsFeedHandler.momentsPlayerProps} />
         </div>
       {/if}
     </div>

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { IMediaCenterDataProvider } from '../..';
+import type { IMediaCenterDataProvider } from '../../config/types';
+import type { MediaCenterState } from '../../navigation';
 import type { PostsPlayerProps } from '../../../posts/posts-player/types';
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
 import { MomentsState } from './moments-state.svelte';
@@ -10,17 +11,25 @@ export declare class MomentsFeedHandler {
     private _dataProvider;
     private _mediaCenterSettingsHandler;
     private _closeOrchestrator;
-    private _onPlayerReachedEnd;
+    private _callbacks;
     constructor(data: {
         dataProvider: IMediaCenterDataProvider;
         mediaCenterSettingsHandler: MediaCenterSettingsHandler;
         closeOrchestrator: ICloseOrchestrator;
-        onPlayerReachedEnd: () => void;
+        on: Callbacks;
     });
     get active(): boolean;
     get momentsPlayerProps(): PostsPlayerProps | null;
     get hasUnwatchedMoments(): boolean;
     get hasMoments(): boolean;
     deactivate: () => void;
-    activateMoments: () => Promise<void>;
+    activate: (data?: {
+        initialMomentId?: string | null;
+    }) => Promise<void>;
+    private tryRestoreState;
 }
+type Callbacks = {
+    playerReachedEnd: () => void;
+    navigationStateChanged: (state: MediaCenterState) => void;
+};
+export {};

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.js

@@ -8,14 +8,14 @@ export class MomentsFeedHandler {
     _dataProvider;
     _mediaCenterSettingsHandler;
     _closeOrchestrator;
-    _onPlayerReachedEnd;
+    _callbacks;
     constructor(data) {
-        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, onPlayerReachedEnd } = data;
+        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, on } = data;
         this.momentsState = new MomentsState(dataProvider);
         this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
         this._dataProvider = dataProvider;
         this._closeOrchestrator = closeOrchestrator;
-        this._onPlayerReachedEnd = onPlayerReachedEnd;
+        this._callbacks = on;
     }
     get active() {
         return this._active;
@@ -31,19 +31,43 @@ export class MomentsFeedHandler {
     }
     deactivate = () => {
         this._active = false;
+        this._momentsPlayerProps = null;
     };
-    activateMoments = async () => {
+    activate = async (data) => {
+        if (data?.initialMomentId && this.tryRestoreState(data.initialMomentId)) {
+            // Already active with the requested buffer
+            return;
+        }
         this._momentsPlayerProps = {
-            dataProvider: { type: 'buffer', buffer: initBufferFromProvider(this.momentsState.generatePlayerDataProvider(this._onPlayerReachedEnd)) },
+            dataProvider: {
+                type: 'buffer',
+                buffer: initBufferFromProvider(this.momentsState.generatePlayerDataProvider({
+                    initialId: data?.initialMomentId,
+                    onEndReached: this._callbacks.playerReachedEnd
+                }))
+            },
             socialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
             analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
             playerSettings: this._mediaCenterSettingsHandler.playerSettings,
             closeOrchestrator: this._closeOrchestrator,
             on: {
-                postActivated: (id) => this.momentsState.markMomentAsSeen(id),
+                postActivated: (id) => {
+                    this.momentsState.markMomentAsSeen(id);
+                    this._callbacks.navigationStateChanged({ mode: 'moments', momentId: id });
+                },
                 backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
             }
         };
         this._active = true;
     };
+    tryRestoreState = (initialMomentId) => {
+        if (!this._active || !this._momentsPlayerProps) {
+            return false;
+        }
+        const buffer = this._momentsPlayerProps.dataProvider.type === 'buffer' ? this._momentsPlayerProps.dataProvider.buffer : null;
+        if (!buffer) {
+            return false;
+        }
+        return buffer.tryActivateItemById(initialMomentId);
+    };
 }

package/dist/media-center/media-center/moments/moments-state.svelte.d.ts

@@ -16,5 +16,8 @@ export declare class MomentsState {
         isSeen: boolean;
     }[];
     markMomentAsSeen: (momentId: string) => void;
-    generatePlayerDataProvider: (onEndReached: () => void) => IChunksPlayerDataProvider<PostPlayerModel>;
+    generatePlayerDataProvider: (data: {
+        initialId: string | null | undefined;
+        onEndReached: () => void;
+    }) => IChunksPlayerDataProvider<PostPlayerModel>;
 }

package/dist/media-center/media-center/moments/moments-state.svelte.js

@@ -17,7 +17,8 @@ export class MomentsState {
             this.momentsSeenLocally = [...this.momentsSeenLocally, momentId];
         }
     };
-    generatePlayerDataProvider = (onEndReached) => {
+    generatePlayerDataProvider = (data) => {
+        const { initialId, onEndReached } = data;
         const collectionCapacity = 5;
         const sortedMoments = [...this.allMoments].sort((a, b) => {
             const aUnwatched = !a.isSeen && !this.momentsSeenLocally.includes(a.id);
@@ -27,6 +28,13 @@ export class MomentsState {
             }
             return aUnwatched ? -1 : 1;
         });
+        if (initialId) {
+            const initialIndex = sortedMoments.findIndex((m) => m.id === initialId);
+            if (initialIndex >= 0) {
+                const [initialMoment] = sortedMoments.splice(initialIndex, 1);
+                sortedMoments.unshift(initialMoment);
+            }
+        }
         const ids = sortedMoments.map((m) => m.id);
         const idOrder = new Map();
         ids.forEach((id, idx) => idOrder.set(id, idx));
@@ -62,7 +70,7 @@ export class MomentsState {
                 const moments = await this.dataProvider.postsPlayer.getPostsCursor({
                     filter: {
                         types: [PostType.Moment],
-                        includeIds: momentsInChunk
+                        ids: momentsInChunk
                     },
                     limit: collectionCapacity
                 });

package/dist/media-center/media-center/{feed → posts-feed}/feed-providers-generator.d.ts

@@ -1,17 +1,13 @@
 import type { IMediaCenterDataProvider } from '../../config/types';
 import type { PostPlayerModel } from '../../../posts/posts-player/types';
-import type { IStreamsPlayerDataProvider } from '../../../streams/streams-player/types';
 import type { IFeedPlayerDataProvider } from '../../../ui/player/providers';
-import type { PostsDataProviderFilter, StreamsDataProviderFilter } from './types';
+import type { PostsFeedFilter, PostsFeedProviderInit } from './types';
 export declare class FeedProvidersGenerator {
     private dataProvider;
     constructor(dataProvider: IMediaCenterDataProvider);
     makePostPlayerItemsProvider: (data: {
-        filter?: PostsDataProviderFilter;
+        filter: PostsFeedFilter | undefined;
+        init: PostsFeedProviderInit | undefined;
         onEndReached: () => void;
-    }) => IFeedPlayerDataProvider<PostPlayerModel>;
-    makeStreamsPlayerDataProvider: (data: {
-        filter?: StreamsDataProviderFilter;
-        onEndReached: () => void;
-    }) => IStreamsPlayerDataProvider;
+    }) => Promise<IFeedPlayerDataProvider<PostPlayerModel>>;
 }