@streamscloud/embeddable 13.0.0 → 13.1.0

package/dist/core/utils/utils.d.ts

@@ -1,4 +1,5 @@
 export declare class Utils {
+    static areEqual(value: unknown, other: unknown): boolean;
     static assertUnreachable(_x: never): never;
     static clone<T>(value: T): T;
     /**

package/dist/core/utils/utils.js

@@ -1,4 +1,8 @@
+import { dequal as isEqual } from 'dequal/lite';
 export class Utils {
+    static areEqual(value, other) {
+        return isEqual(value, other);
+    }
     static assertUnreachable(_x) {
         throw new Error("Didn't expect to get here");
     }

package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { MediaCenterState } from '../../media-center';
 import type { IMediaCenterDataProvider } from '../../media-center/config/types';
 export declare class InternalMediaCenterDataProvider implements IMediaCenterDataProvider {
     model: IMediaCenterDataProvider['model'];
@@ -11,5 +12,6 @@ export declare class InternalMediaCenterDataProvider implements IMediaCenterData
         initiator?: string;
         graphqlOrigin?: string;
         testingStuff?: boolean;
+        onNavigationStateChange?: (state: MediaCenterState) => void;
     });
 }

package/dist/external-api/data-providers/internal-media-center-data-provider.svelte.js

@@ -17,7 +17,7 @@ export class InternalMediaCenterDataProvider {
     fetchModel;
     graphql;
     constructor(input) {
-        const { mediaPageId, graphqlOrigin, initiator, testingStuff } = input;
+        const { mediaPageId, graphqlOrigin, initiator, testingStuff, onNavigationStateChange } = input;
         this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
         this.fetchModel = async () => {
             const payload = await this.graphql.query(GetMediaPageConfigDocument, { mediaPageId }).toPromise();
@@ -58,7 +58,7 @@ export class InternalMediaCenterDataProvider {
                         types: filter.types,
                         statuses: [Status.Published],
                         categoryId: filter.categoryId,
-                        ids: filter.includeIds,
+                        ids: filter.ids,
                         excludeIds: filter.excludeIds
                     },
                     continuationToken,
@@ -73,6 +73,7 @@ export class InternalMediaCenterDataProvider {
                     filter: {
                         mediaPageId,
                         categoryId: filter.categoryId,
+                        ids: filter.ids,
                         excludeIds: filter.excludeIds,
                         statuses: [StreamStatus.Published],
                         showInFeed: true
@@ -95,7 +96,7 @@ export class InternalMediaCenterDataProvider {
             categoriesFollowingHandler: testingStuff ? new MockCategoryFollowingProvider() : undefined,
             socialInteractionsHandler: testingStuff ? new MockPostSocialInteractionsHandler() : undefined,
             membershipHandler: testingStuff ? new MockMembershipHandler() : undefined,
-            navigationHandler: testingStuff ? new MockNavigationHandler() : undefined
+            navigationHandler: testingStuff && onNavigationStateChange ? new MockNavigationHandler(onNavigationStateChange) : undefined
         };
     }
 }

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

@@ -23,7 +23,7 @@ export interface IMediaCenterDataProvider {
             filter: {
                 types: PostType[];
                 categoryId?: string;
-                includeIds?: string[];
+                ids?: string[];
                 excludeIds?: string[];
             };
             limit: number;
@@ -37,6 +37,7 @@ export interface IMediaCenterDataProvider {
         getStreamsCursor: (input: {
             filter: {
                 categoryId?: string;
+                ids?: string[];
                 excludeIds?: string[];
             };
             limit: number;

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

@@ -15,19 +15,24 @@ const context = new MediaCenterContext({
         initialized: (instance) => {
             switch (modeProps.mode) {
                 case 'posts':
-                    instance.playPostsFeed({
+                    instance.postsFeedHandler.activateWithExistingProvider({
                         dataProvider: modeProps.props.dataProvider,
                         onPostActivated: modeProps.props.onPostActivated
                     });
                     break;
                 case 'streams':
-                    instance.playStreamsFeed({
+                    instance.streamsFeedHandler.activateWithExistingProvider({
                         dataProvider: modeProps.props.dataProvider,
                         onStreamActivated: modeProps.props.onStreamActivated
                     });
                     break;
                 case 'default':
-                    instance.activateDiscover({ categoryId: null });
+                    if (settings.state) {
+                        instance.restoreState(settings.state);
+                    }
+                    else {
+                        instance.activateDiscover({ categoryId: null });
+                    }
                     break;
                 default:
                     Utils.assertUnreachable(modeProps);

package/dist/media-center/media-center/discover/community-features.svelte

@@ -110,7 +110,7 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
 .community-features {
   display: flex;
   flex-wrap: nowrap;
-  margin-top: 0.625rem;
+  margin-top: 0.25rem;
   gap: 8.125rem;
   align-items: center;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -135,7 +135,7 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
 }
 .members__count {
   font-size: 0.9375rem;
-  line-height: 1;
+  line-height: 1.75rem;
   font-weight: 500;
   /* Set 'container-type: inline-size;' to reference container*/
 }
@@ -146,7 +146,7 @@ const onJoinMembershipClick = () => __awaiter(void 0, void 0, void 0, function*
 }
 .members__label {
   font-size: 0.75rem;
-  line-height: 1;
+  line-height: 1.75rem;
   font-weight: 400;
   color: var(--sc-mc-color--text-secondary);
   /* Set 'container-type: inline-size;' to reference container*/

package/dist/media-center/media-center/discover/data-loading.js

@@ -26,7 +26,7 @@ export class DiscoverDataLoader {
                 categoryId: holder.categoryId,
                 types: [PostType.ShortVideo]
             },
-            limit: 6,
+            limit: 5,
             continuationToken: holder.continuationToken
         });
         holder.shortVideos = [...holder.shortVideos, ...shortVideosResponse.items];

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

@@ -1,8 +1,7 @@
 import type { IMediaCenterDataProvider } from '../../config/types';
+import type { MediaCenterState } from '../../navigation';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 export declare class DiscoverViewHandler {
-    private readonly dataProvider;
-    private _activated;
     private _state;
     private _streamsInCategoryCache;
     private _shortVideosInCategoryCache;
@@ -10,7 +9,11 @@ export declare class DiscoverViewHandler {
     private _shortVideosInCategory;
     private _dataLoader;
     private _shortVideosLoadingDeferred;
-    constructor(dataProvider: IMediaCenterDataProvider);
+    private _callbacks;
+    constructor(data: {
+        dataProvider: IMediaCenterDataProvider;
+        on: Callbacks;
+    });
     get activated(): boolean;
     get active(): boolean;
     get loading(): boolean;
@@ -26,3 +29,7 @@ export declare class DiscoverViewHandler {
     }) => Promise<void>;
     deactivate: () => void;
 }
+type Callbacks = {
+    navigationStateChanged: (state: MediaCenterState) => void;
+};
+export {};

package/dist/media-center/media-center/discover/discover-view-handler.svelte.js

@@ -2,27 +2,27 @@ import { Deferred } from '../../../core/deferred';
 import { DiscoverDataLoader } from './data-loading';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 export class DiscoverViewHandler {
-    dataProvider;
-    _activated = $state(false);
-    _state = $state('loading');
+    _state = $state('inactive');
     _streamsInCategoryCache = $state.raw([]);
     _shortVideosInCategoryCache = $state.raw([]);
     _streamsInCategory = $state.raw(null);
     _shortVideosInCategory = $state.raw([]);
     _dataLoader;
     _shortVideosLoadingDeferred = null;
-    constructor(dataProvider) {
-        this.dataProvider = dataProvider;
-        this._dataLoader = new DiscoverDataLoader(this.dataProvider);
+    _callbacks;
+    constructor(data) {
+        const { dataProvider, on } = data;
+        this._callbacks = on;
+        this._dataLoader = new DiscoverDataLoader(dataProvider);
     }
     get activated() {
-        return this._activated;
+        return this._state !== 'inactive';
     }
     get active() {
-        return this._activated && this._state === 'ready';
+        return this._state === 'ready';
     }
     get loading() {
-        return this._activated && this._state === 'loading';
+        return this._state === 'loading';
     }
     get streamsHolder() {
         return this._streamsInCategory;
@@ -59,7 +59,6 @@ export class DiscoverViewHandler {
     };
     activate = async (data) => {
         const { activeCategoryId, childCategories } = data;
-        this._activated = true;
         this._state = 'loading';
         try {
             const promises = [];
@@ -92,10 +91,11 @@ export class DiscoverViewHandler {
         }
         finally {
             this._state = 'ready';
+            this._callbacks.navigationStateChanged({ mode: 'discover', categoryId: activeCategoryId });
         }
     };
     deactivate = () => {
-        this._activated = false;
+        this._state = 'inactive';
         this._shortVideosLoadingDeferred = null;
     };
 }

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

@@ -9,22 +9,22 @@ const handler = $derived(context.discoverHandler);
 const localization = $derived(new DiscoverViewLocalization(context.locale));
 </script>
 
-{#if !handler.loading}
-  <div class="media-center-discover">
-    <div class="media-center-discover__content">
-      <Header context={context} />
-      {#if handler.streamsHolder?.streams.length}
-        <div class="media-center-discover__section">
-          <div class="media-center-discover__section-header">
-            {localization.latestStreamsSectionTitle}
-          </div>
-          <div class="media-center-discover__section-content media-center-discover__section-content--5">
-            {#each handler.streamsHolder.streams as item (item.id)}
-              <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
-            {/each}
-          </div>
+<div class="media-center-discover">
+  <div class="media-center-discover__content">
+    <Header context={context} />
+    {#if handler.streamsHolder?.streams.length}
+      <div class="media-center-discover__section">
+        <div class="media-center-discover__section-header">
+          {localization.latestStreamsSectionTitle}
         </div>
-      {/if}
+        <div class="media-center-discover__section-content media-center-discover__section-content--5">
+          {#each handler.streamsHolder.streams as item (item.id)}
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
+          {/each}
+        </div>
+      </div>
+    {/if}
+    {#if !handler.loading}
       {#each handler.shortVideosHolders as holder, index (holder)}
         <InfiniteScrolling loadMore={handler.loadMoreShortVideos}>
           {#if holder.shortVideos.length}
@@ -54,9 +54,9 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
           {/if}
         </InfiniteScrolling>
       {/each}
-    </div>
+    {/if}
   </div>
-{/if}
+</div>
 
 <style>@keyframes fadeIn {
   0% {

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

@@ -11,7 +11,7 @@ let { context } = $props();
   <button
     type="button"
     class="media-center-footer__button"
-    class:media-center-footer__button--active={context.feedHandler.active}
+    class:media-center-footer__button--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}
     onclick={() => context.playRootFeed()}>
     <Icon src={IconPhone} />
   </button>

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

@@ -142,8 +142,12 @@ const styles = $derived.by(() => {
     </button>
     <div class="media-center-header__scroll-area" use:onScrollMounted use:horizontalWheelScroll onscroll={handleScrollingAreaScroll}>
       <div class="media-center-header__scroll-area-block">
-        <button type="button" class="control-button" class:control-button--active={context.feedHandler.active} onclick={() => context.playRootFeed()}>
-          <span class="control-button__icon" class:control-button__icon--active={context.feedHandler.active}>
+        <button
+          type="button"
+          class="control-button"
+          class:control-button--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}
+          onclick={() => context.playRootFeed()}>
+          <span class="control-button__icon" class:control-button__icon--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}>
             <Icon src={IconPhone} />
           </span>
           <span class="control-button__value">
@@ -170,16 +174,18 @@ const styles = $derived.by(() => {
             {localization.buttons.cart}
           </span>
         </button>
-        <button
-          type="button"
-          class="control-button"
-          class:control-button--active={context.momentsFeedHandler.active}
-          class:control-button--indicator={context.momentsFeedHandler.hasUnwatchedMoments}
-          onclick={() => context.playMoments()}>
-          <span class="control-button__value">
-            {localization.buttons.moments}
-          </span>
-        </button>
+        {#if context.momentsFeedHandler.hasMoments}
+          <button
+            type="button"
+            class="control-button"
+            class:control-button--active={context.momentsFeedHandler.active}
+            class:control-button--indicator={context.momentsFeedHandler.hasUnwatchedMoments}
+            onclick={() => context.playMoments()}>
+            <span class="control-button__value">
+              {localization.buttons.moments}
+            </span>
+          </button>
+        {/if}
         <button type="button" class="control-button" class:control-button--active={false} onclick={() => ({})}>
           <span class="control-button__value">
             {localization.buttons.webpage}

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,10 +119,7 @@ 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({
@@ -111,50 +127,92 @@ export class MediaCenterContext {
             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 {