@streamscloud/embeddable 13.3.0 → 14.0.0

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

@@ -1,4 +1,5 @@
 import { Deferred } from '../../../core/deferred';
+import { PostType } from '../../../core/enums';
 import { DiscoverDataLoader } from './data-loading';
 import { ShortVideosInCategory, StreamsInCategory } from './types.svelte';
 export class DiscoverViewHandler {
@@ -111,4 +112,91 @@ export class DiscoverViewHandler {
         this._state = 'inactive';
         this._shortVideosLoadingDeferred = null;
     };
+    onPostCreated = (data) => {
+        if (!data.isPublished || data.post.postType !== PostType.ShortVideo) {
+            return;
+        }
+        const affectedHolders = this._shortVideosInCategoryCache.filter((x) => data.categories.includes(x.categoryId) && x.continuationToken !== undefined);
+        for (const holder of affectedHolders) {
+            holder.shortVideos = [data.post, ...holder.shortVideos];
+        }
+    };
+    onPostModified = (data) => {
+        const { post, categories, isPublished } = data;
+        for (const holder of this._shortVideosInCategory.filter((h) => h.continuationToken !== undefined)) {
+            const index = holder.shortVideos.findIndex((x) => x.id === post.id);
+            const isInCategory = categories.includes(holder.categoryId);
+            if (index !== -1) {
+                // Post exists in holder
+                if (isInCategory && isPublished) {
+                    // Post remains in category and is published - update it
+                    const clone = [...holder.shortVideos];
+                    clone[index] = post;
+                    holder.shortVideos = clone;
+                }
+                else {
+                    // Post no longer in category or unpublished - remove it
+                    holder.shortVideos = holder.shortVideos.filter((x) => x.id !== post.id);
+                    if (holder.shortVideos.length < this._dataLoader.minItemsPerLoad) {
+                        this._dataLoader.loadShortVideos(holder);
+                    }
+                }
+            }
+            else {
+                // Post doesn't exist in holder
+                if (isInCategory && isPublished) {
+                    // Post should be in this category - reset and reload
+                    holder.continuationToken = undefined;
+                    this._dataLoader.reloadShortVideos(holder);
+                }
+            }
+        }
+    };
+    onPostDeleted = (data) => {
+        for (const holder of this._shortVideosInCategoryCache) {
+            holder.shortVideos = holder.shortVideos.filter((x) => x.id !== data.id);
+            if (holder.shortVideos.length < this._dataLoader.minItemsPerLoad) {
+                this._dataLoader.loadShortVideos(holder);
+            }
+        }
+    };
+    onStreamModified = (data) => {
+        const { stream, categories, isPublished } = data;
+        for (const holder of this._streamsInCategoryCache.filter((h) => h.continuationToken !== undefined)) {
+            const index = holder.streams.findIndex((x) => x.id === stream.id);
+            const isInCategory = holder.categoryId === null || categories.includes(holder.categoryId);
+            if (index !== -1) {
+                // Stream exists in holder
+                if (isInCategory && isPublished) {
+                    // Stream remains in category and is published - update it
+                    const clone = [...holder.streams];
+                    clone[index] = stream;
+                    holder.streams = clone;
+                }
+                else {
+                    // Stream no longer in category or unpublished - remove it
+                    holder.streams = holder.streams.filter((x) => x.id !== stream.id);
+                    if (holder.streams.length < this._dataLoader.minItemsPerLoad) {
+                        this._dataLoader.loadStreams(holder);
+                    }
+                }
+            }
+            else {
+                // Stream doesn't exist in holder
+                if (isInCategory && isPublished) {
+                    // Stream should be in this category - reset and reload
+                    holder.continuationToken = undefined;
+                    this._dataLoader.loadStreams(holder);
+                }
+            }
+        }
+    };
+    onStreamDeleted = (data) => {
+        for (const holder of this._streamsInCategoryCache) {
+            holder.streams = holder.streams.filter((x) => x.id !== data.id);
+            if (holder.streams.length < this._dataLoader.minItemsPerLoad) {
+                this._dataLoader.loadStreams(holder);
+            }
+        }
+    };
 }

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

@@ -1,12 +1,71 @@
-<script lang="ts">import { getPostCoverImage } from '../../../posts/model';
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { getPostCoverImage } from '../../../posts/model';
 import { ShortVideoCard } from '../../../short-videos/short-video-card';
 import { StreamCard } from '../../../streams/stream-card';
+import { cardActionContainer, CardActions } from '../../../ui/card-actions';
+import { IconColor } from '../../../ui/icon';
 import { InfiniteScrolling } from '../../../ui/infinite-scrolling';
 import { default as Header } from './discover-header.svelte';
 import { DiscoverViewLocalization } from './discover-view-localization';
+import IconDelete from '@fluentui/svg-icons/icons/delete_20_regular.svg?raw';
+import IconEdit from '@fluentui/svg-icons/icons/edit_20_regular.svg?raw';
 let { context, on } = $props();
 const handler = $derived(context.discoverHandler);
 const localization = $derived(new DiscoverViewLocalization(context.locale));
+const generateShortVideoActions = (id) => {
+    const actions = [];
+    if (context.contentManagementHandler.editPost) {
+        actions.push({
+            icon: IconEdit,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b;
+                (_b = (_a = context.contentManagementHandler).editPost) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+            })
+        });
+    }
+    if (context.contentManagementHandler.deletePost) {
+        actions.push({
+            icon: IconDelete,
+            iconColor: IconColor.Red,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b;
+                (_b = (_a = context.contentManagementHandler).deletePost) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+            })
+        });
+    }
+    return actions;
+};
+const genereateStreamActions = (id) => {
+    const actions = [];
+    if (context.contentManagementHandler.editStream) {
+        actions.push({
+            icon: IconEdit,
+            callback: () => {
+                var _a, _b;
+                (_b = (_a = context.contentManagementHandler).editStream) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+            }
+        });
+    }
+    if (context.contentManagementHandler.deleteStream) {
+        actions.push({
+            icon: IconDelete,
+            iconColor: IconColor.Red,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a, _b;
+                (_b = (_a = context.contentManagementHandler).deleteStream) === null || _b === void 0 ? void 0 : _b.call(_a, id);
+            })
+        });
+    }
+    return actions;
+};
 </script>
 
 <div class="media-center-discover">
@@ -17,9 +76,12 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
         <div class="media-center-discover__section-header">
           {localization.latestStreamsSectionTitle}
         </div>
-        <div class="media-center-discover__section-content media-center-discover__section-content--5">
+        <div class="media-center-discover__section-content media-center-discover__section-content--5 media-center-discover__section-content--not-alone">
           {#each handler.streamsHolder.streams as item (item.id)}
-            <StreamCard stream={item} on={{ click: () => on.streamSelected(item) }}></StreamCard>
+            <div use:cardActionContainer>
+              <StreamCard stream={item} on={{ click: () => on.streamSelected(item, handler.streamsHolder?.categoryId ?? null) }}></StreamCard>
+              <CardActions actions={genereateStreamActions(item.id)} />
+            </div>
           {/each}
         </div>
       </div>
@@ -39,17 +101,20 @@ const localization = $derived(new DiscoverViewLocalization(context.locale));
                   class:media-center-discover__section-content--4={index % 2 === 0}
                   class:media-center-discover__section-content--not-alone={handler.shortVideosHolders.length > 1}>
                   {#each holder.shortVideos as item (item.id)}
-                    <ShortVideoCard
-                      shortVideo={{
-                        id: item.id,
-                        text: item.text,
-                        cover: getPostCoverImage(item),
-                        displayDate: item.displayDate,
-                        viewsCount: item.viewsCount,
-                        products: item.products
-                      }}
-                      locale={context.locale}
-                      on={{ click: () => on.shortVideoSelected(item) }} />
+                    <div use:cardActionContainer>
+                      <ShortVideoCard
+                        shortVideo={{
+                          id: item.id,
+                          text: item.text,
+                          cover: getPostCoverImage(item),
+                          displayDate: item.displayDate,
+                          viewsCount: item.viewsCount,
+                          products: item.products
+                        }}
+                        locale={context.locale}
+                        on={{ click: () => on.shortVideoSelected(item, holder.categoryId) }} />
+                      <CardActions actions={generateShortVideoActions(item.id)} />
+                    </div>
                   {/each}
                 </div>
               </div>

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

@@ -4,8 +4,8 @@ import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
     on: {
-        shortVideoSelected: (shortVideo: PostPlayerModel) => void;
-        streamSelected: (stream: StreamPlayerModel) => void;
+        shortVideoSelected: (shortVideo: PostPlayerModel, categoryId: string | null) => void;
+        streamSelected: (stream: StreamPlayerModel, categoryId: string | null) => void;
     };
 };
 declare const DiscoverView: import("svelte").Component<Props, {}, "">;

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

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

package/dist/media-center/media-center/handlers/index.d.ts

@@ -1,3 +1,4 @@
 export { CategoriesHandler } from './categories-handler.svelte';
 export type { MediaCenterCategoryModel, MediaCenterSubCategoryModel, MediaCenterCategoryTagModel } from './categories-handler.svelte';
 export { MediaCenterSettingsHandler } from './media-center-settings-handler.svelte';
+export { MediaCenterContentHandler } from './media-center-content-handler.svelte';

package/dist/media-center/media-center/handlers/index.js

@@ -1,2 +1,3 @@
 export { CategoriesHandler } from './categories-handler.svelte';
 export { MediaCenterSettingsHandler } from './media-center-settings-handler.svelte';
+export { MediaCenterContentHandler } from './media-center-content-handler.svelte';

package/dist/media-center/media-center/handlers/media-center-content-handler.svelte.d.ts

@@ -0,0 +1,62 @@
+import type { IMediaCenterDataProvider } from '../../config/types';
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
+export declare class MediaCenterContentHandler {
+    private readonly dataProvider;
+    private postCreatedListeners;
+    private postDeletedListeners;
+    private postModifiedListeners;
+    private streamModifiedListeners;
+    private streamDeletedListeners;
+    private streamPageDeletedListeners;
+    constructor(dataProvider: IMediaCenterDataProvider);
+    get editPost(): ((postId: string) => Promise<{
+        post: PostPlayerModel;
+        categories: string[];
+        isPublished: boolean;
+    } | null>) | null;
+    get deletePost(): ((postId: string) => Promise<boolean>) | null;
+    get editArticle(): ((postId: string) => Promise<{
+        post: PostPlayerModel;
+        categories: string[];
+        isPublished: boolean;
+    } | null>) | null;
+    get editStream(): ((streamId: string) => Promise<{
+        stream: StreamPlayerModel;
+        categories: string[];
+        isPublished: boolean;
+    } | null>) | null;
+    get deleteStream(): ((streamId: string) => Promise<boolean>) | null;
+    get deleteStreamPage(): ((streamPageId: string) => Promise<boolean>) | null;
+    addPostCreatedListener: (...callbacks: PostCreatedCallback[]) => void;
+    addPostModifiedListener: (...callbacks: PostModifiedCallback[]) => void;
+    addPostDeletedListener: (...callbacks: PostDeletedCallback[]) => void;
+    addStreamModifiedListener: (...callbacks: StreamModifiedCallback[]) => void;
+    addStreamDeletedListener: (...callbacks: StreamDeletedCallback[]) => void;
+    addStreamPageDeletedListener: (...callbacks: StreamPageDeletedCallback[]) => void;
+}
+type PostCreatedCallback = (data: {
+    post: PostPlayerModel;
+    categories: string[];
+    isPublished: boolean;
+}) => void;
+type PostModifiedCallback = (data: {
+    post: PostPlayerModel;
+    categories: string[];
+    isPublished: boolean;
+}) => void;
+type PostDeletedCallback = (data: {
+    id: string;
+}) => void;
+type StreamModifiedCallback = (data: {
+    stream: StreamPlayerModel;
+    categories: string[];
+    isPublished: boolean;
+}) => void;
+type StreamDeletedCallback = (data: {
+    id: string;
+}) => void;
+type StreamPageDeletedCallback = (data: {
+    id: string;
+}) => void;
+export {};

package/dist/media-center/media-center/handlers/media-center-content-handler.svelte.js

@@ -0,0 +1,144 @@
+export class MediaCenterContentHandler {
+    dataProvider;
+    postCreatedListeners = [];
+    postDeletedListeners = [];
+    postModifiedListeners = [];
+    streamModifiedListeners = [];
+    streamDeletedListeners = [];
+    streamPageDeletedListeners = [];
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
+        $effect(() => {
+            if (this.dataProvider.handlers?.contentManagementHandler) {
+                this.dataProvider.handlers.contentManagementHandler.onHandlerMounted({
+                    postCreated: (result) => {
+                        const { post, categories, isPublished } = result;
+                        this.postCreatedListeners.forEach((callback) => {
+                            callback({ post, categories, isPublished });
+                        });
+                    }
+                });
+            }
+        });
+    }
+    get editPost() {
+        const originalFn = this.dataProvider.handlers?.contentManagementHandler?.editPost;
+        if (!originalFn) {
+            return null;
+        }
+        return async (...args) => {
+            const result = await originalFn(...args);
+            if (result) {
+                this.postModifiedListeners.forEach((callback) => {
+                    callback({
+                        post: result.post,
+                        categories: result.categories,
+                        isPublished: result.isPublished
+                    });
+                });
+            }
+            return result;
+        };
+    }
+    get deletePost() {
+        const originalFn = this.dataProvider.handlers?.contentManagementHandler?.deletePost;
+        if (!originalFn) {
+            return null;
+        }
+        return async (...args) => {
+            const result = await originalFn(...args);
+            if (result) {
+                this.postDeletedListeners.forEach((callback) => {
+                    callback({ id: args[0] });
+                });
+            }
+            return result;
+        };
+    }
+    get editArticle() {
+        const originalFn = this.dataProvider.handlers?.contentManagementHandler?.editArticle;
+        if (!originalFn) {
+            return null;
+        }
+        return async (...args) => {
+            const result = await originalFn(...args);
+            if (result) {
+                this.postModifiedListeners.forEach((callback) => {
+                    callback({
+                        post: result.post,
+                        categories: result.categories,
+                        isPublished: result.isPublished
+                    });
+                });
+            }
+            return result;
+        };
+    }
+    get editStream() {
+        const originalFn = this.dataProvider.handlers?.contentManagementHandler?.editStream;
+        if (!originalFn) {
+            return null;
+        }
+        return async (...args) => {
+            const result = await originalFn(...args);
+            if (result) {
+                this.streamModifiedListeners.forEach((callback) => {
+                    callback({
+                        stream: result.stream,
+                        categories: result.categories,
+                        isPublished: result.isPublished
+                    });
+                });
+            }
+            return result;
+        };
+    }
+    get deleteStream() {
+        const originalFn = this.dataProvider.handlers?.contentManagementHandler?.deleteStream;
+        if (!originalFn) {
+            return null;
+        }
+        return async (...args) => {
+            const result = await originalFn(...args);
+            if (result) {
+                this.streamDeletedListeners.forEach((callback) => {
+                    callback({ id: args[0] });
+                });
+            }
+            return result;
+        };
+    }
+    get deleteStreamPage() {
+        const originalFn = this.dataProvider.handlers?.contentManagementHandler?.deleteStreamPage;
+        if (!originalFn) {
+            return null;
+        }
+        return async (...args) => {
+            const result = await originalFn(...args);
+            if (result) {
+                this.streamPageDeletedListeners.forEach((callback) => {
+                    callback({ id: args[0] });
+                });
+            }
+            return result;
+        };
+    }
+    addPostCreatedListener = (...callbacks) => {
+        this.postCreatedListeners.push(...callbacks);
+    };
+    addPostModifiedListener = (...callbacks) => {
+        this.postModifiedListeners.push(...callbacks);
+    };
+    addPostDeletedListener = (...callbacks) => {
+        this.postDeletedListeners.push(...callbacks);
+    };
+    addStreamModifiedListener = (...callbacks) => {
+        this.streamModifiedListeners.push(...callbacks);
+    };
+    addStreamDeletedListener = (...callbacks) => {
+        this.streamDeletedListeners.push(...callbacks);
+    };
+    addStreamPageDeletedListener = (...callbacks) => {
+        this.streamPageDeletedListeners.push(...callbacks);
+    };
+}

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

@@ -20,13 +20,13 @@ const headerMounted = (node) => {
 </script>
 
 <div class="media-center-header-mobile" class:media-center-header-mobile--static={context.mediaCenterMode === 'discover'} use:headerMounted>
-  {#if context.closeOrchestrator.closeTriggerVisible}
-    <button type="button" class="media-center-header-mobile__button" onclick={context.closeOrchestrator.requestClose}>
-      <Icon src={IconDismiss} />
-    </button>
-  {:else}
-    <span><!--just a stub--></span>
-  {/if}
+  <button
+    type="button"
+    class="media-center-header-mobile__button"
+    class:media-center-header-mobile__button--hidden={!context.closeOrchestrator.closeTriggerVisible}
+    onclick={context.closeOrchestrator.requestClose}>
+    <Icon src={IconDismiss} />
+  </button>
   {#if context.mediaCenterMode === 'discover'}
     <div class="media-center-header-mobile__title">
       {localization.discoverLabel}
@@ -78,4 +78,7 @@ const headerMounted = (node) => {
   --icon--color: var(--sc-mc-color--icon-overlay);
   --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
   line-height: 0;
+}
+.media-center-header-mobile__button--hidden {
+  visibility: hidden;
 }</style>

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

@@ -146,7 +146,7 @@ const styles = $derived.by(() => {
           type="button"
           class="control-button"
           class:control-button--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}
-          onclick={() => context.playRootFeed()}>
+          onclick={() => context.activateDefaultFeed()}>
           <span class="control-button__icon" class:control-button__icon--active={context.postsFeedHandler.activated || context.streamsFeedHandler.activated}>
             <Icon src={IconPhone} />
           </span>

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

@@ -2,7 +2,7 @@ import type { IMediaCenterDataProvider } from '../config/types';
 import type { MediaCenterState } from '../navigation';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { DiscoverViewHandler } from './discover';
-import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
+import { CategoriesHandler, MediaCenterContentHandler, MediaCenterSettingsHandler } from './handlers';
 import type { MediaCenterSettings } from './media-center-settings.svelte';
 import { PopularStreamsPanelHandler } from './menu';
 import { MomentsFeedHandler } from './moments';
@@ -23,6 +23,7 @@ export declare class MediaCenterContext {
     popularStreamsHandler: PopularStreamsPanelHandler;
     streamsInCategoryHandler: StreamsInCategoryPanelHandler;
     settingsHandler: MediaCenterSettingsHandler;
+    contentManagementHandler: MediaCenterContentHandler;
     closeOrchestrator: ICloseOrchestrator;
     private _dataProvider;
     private _currentState;
@@ -54,7 +55,7 @@ export declare class MediaCenterContext {
     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>;
+    activateDefaultFeed: () => Promise<void>;
     tryActivateStreamsInCategory: (categoryId: string) => Promise<void>;
     restoreState: (state: MediaCenterState) => Promise<void>;
     handleNavigationStateChanged: (state: MediaCenterState) => void;

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

@@ -1,6 +1,6 @@
 import { Utils } from '../../core/utils';
 import { DiscoverViewHandler } from './discover';
-import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
+import { CategoriesHandler, MediaCenterContentHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
 import { MomentsFeedHandler } from './moments';
 import { PostsFeedHandler } from './posts-feed';
@@ -34,6 +34,7 @@ export class MediaCenterContext {
     popularStreamsHandler;
     streamsInCategoryHandler;
     settingsHandler;
+    contentManagementHandler;
     closeOrchestrator;
     _dataProvider;
     _currentState = null;
@@ -43,15 +44,18 @@ export class MediaCenterContext {
         this.closeOrchestrator = closeOrchestrator;
         this.closeOrchestrator.setCloseTriggerAttached(true);
         this.settingsHandler = new MediaCenterSettingsHandler({ settings, dataProvider });
+        this.contentManagementHandler = new MediaCenterContentHandler(dataProvider);
         this.postsFeedHandler = new PostsFeedHandler({
             dataProvider,
             mediaCenterSettingsHandler: this.settingsHandler,
+            mediaCenterContentHandler: this.contentManagementHandler,
             closeOrchestrator,
             on: { playerReachedEnd: this.backToDiscover, navigationStateChanged: this.handleNavigationStateChanged }
         });
         this.streamsFeedHandler = new StreamsFeedHandler({
             dataProvider,
             mediaCenterSettingsHandler: this.settingsHandler,
+            mediaCenterContentHandler: this.contentManagementHandler,
             closeOrchestrator,
             on: { playerReachedEnd: this.backToDiscover, navigationStateChanged: this.handleNavigationStateChanged }
         });
@@ -62,9 +66,16 @@ export class MediaCenterContext {
         this.momentsFeedHandler = new MomentsFeedHandler({
             dataProvider,
             mediaCenterSettingsHandler: this.settingsHandler,
+            mediaCenterContentHandler: this.contentManagementHandler,
             closeOrchestrator,
             on: { playerReachedEnd: this.backToDiscover, navigationStateChanged: this.handleNavigationStateChanged }
         });
+        this.contentManagementHandler.addPostCreatedListener(this.discoverHandler.onPostCreated, this.postsFeedHandler.onPostCreated, this.momentsFeedHandler.onPostCreated);
+        this.contentManagementHandler.addPostModifiedListener(this.discoverHandler.onPostModified, this.postsFeedHandler.onPostModified, this.momentsFeedHandler.onPostModified);
+        this.contentManagementHandler.addPostDeletedListener(this.discoverHandler.onPostDeleted, this.postsFeedHandler.onPostDeleted, this.momentsFeedHandler.onPostDeleted);
+        this.contentManagementHandler.addStreamModifiedListener(this.discoverHandler.onStreamModified, this.streamsFeedHandler.onStreamModified, this.popularStreamsHandler.onStreamModified);
+        this.contentManagementHandler.addStreamDeletedListener(this.discoverHandler.onStreamDeleted, this.popularStreamsHandler.onStreamDeleted);
+        this.contentManagementHandler.addStreamPageDeletedListener(this.streamsFeedHandler.onStreamPageDeleted);
         $effect(() => {
             if (this.initialized) {
                 void settings.state;
@@ -130,13 +141,21 @@ export class MediaCenterContext {
     };
     backToDiscover = () => this.activateDiscover({ categoryId: this.categoriesHandler.selectedCategoryId });
     playPostsFeed = async (options) => {
+        const categoryId = options.filter?.categoryId ?? null;
+        if (categoryId === this.categoriesHandler.selectedCategoryId && !this.postsFeedHandler.canReload) {
+            return;
+        }
         this.deactivateAllBut('posts-feed');
-        this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
+        this.categoriesHandler.selectedCategoryId = categoryId;
         this.postsFeedHandler.activate(options);
     };
     playStreamsFeed = async (options) => {
+        const categoryId = options.filter?.categoryId ?? null;
+        if (categoryId === this.categoriesHandler.selectedCategoryId && !this.streamsFeedHandler.canReload) {
+            return;
+        }
         this.deactivateAllBut('streams-feed');
-        this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
+        this.categoriesHandler.selectedCategoryId = categoryId;
         this.streamsFeedHandler.activate(options);
     };
     playMoments = async (options) => {
@@ -146,14 +165,13 @@ export class MediaCenterContext {
         this.deactivateAllBut('moments');
         this.momentsFeedHandler.activate(options);
     };
-    playRootFeed = async () => {
+    activateDefaultFeed = async () => {
         this.categoriesHandler.selectedCategoryId = null;
-        if (this.streamsFeedHandler.active) {
-            this.streamsFeedHandler.activate({});
+        if (this.mediaCenterMode === 'streams-feed') {
+            this.playStreamsFeed({ filter: { categoryId: null } });
         }
         else {
-            this.deactivateAllBut('posts-feed');
-            this.postsFeedHandler.activate({});
+            this.playPostsFeed({ filter: { categoryId: null } });
         }
     };
     tryActivateStreamsInCategory = async (categoryId) => {
@@ -169,19 +187,20 @@ export class MediaCenterContext {
         this._currentState = state;
         switch (state.mode) {
             case 'posts-feed':
-                await this.playPostsFeed({ filter: { categoryId: state.categoryId }, init: { initialPostId: state.postId } });
+                await this.playPostsFeed({ filter: { categoryId: state.categoryId }, init: { initialPostId: state.postId }, tryRestoreState: true });
                 break;
             case 'streams-feed':
                 await this.playStreamsFeed({
                     filter: { categoryId: state.categoryId },
-                    init: { initialStreamId: state.streamId, initialStreamPageId: state.streamPageId }
+                    init: { initialStreamId: state.streamId, initialStreamPageId: state.streamPageId },
+                    tryRestoreState: true
                 });
                 break;
             case 'discover':
                 await this.activateDiscover({ categoryId: state.categoryId });
                 break;
             case 'moments':
-                await this.playMoments({ initialMomentId: state.momentId });
+                await this.playMoments({ initialMomentId: state.momentId, tryRestoreState: true });
                 break;
         }
     };