@streamscloud/embeddable 13.0.1 → 13.2.0

package/dist/media-center/media-center/posts-feed/feed-providers-generator.js

@@ -0,0 +1,61 @@
+import { ContinuationToken } from '../../../core/continuation-token';
+import { CursorDataLoader } from '../../../core/data-loaders';
+import { PostType } from '../../../core/enums';
+const SUPPORTED_POST_TYPES = [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video];
+export class FeedProvidersGenerator {
+    dataProvider;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
+    }
+    makePostPlayerItemsProvider = async (data) => {
+        const { filter, init, onEndReached } = data;
+        const { categoryId } = filter || {};
+        const { prefetchedItems: initialPrefetchedItems = [], initialPostId } = init || {};
+        const loader = new CursorDataLoader({
+            loadPage: async (continuationToken) => {
+                const result = await this.dataProvider.postsPlayer.getPostsCursor({
+                    filter: {
+                        types: SUPPORTED_POST_TYPES,
+                        categoryId: categoryId || undefined,
+                        excludeIds: initialPrefetchedItems.length ? initialPrefetchedItems.map((i) => i.id) : undefined
+                    },
+                    continuationToken: continuationToken.toNextChunkString(),
+                    limit: 20
+                });
+                const items = result.items;
+                return {
+                    items: items,
+                    continuationToken: ContinuationToken.fromPayload(result.continuationToken)
+                };
+            }
+        });
+        if (initialPostId && !initialPrefetchedItems.find((p) => p.id === initialPostId)) {
+            const fetchedPost = await this.dataProvider.postsPlayer.getPostsCursor({
+                filter: {
+                    types: SUPPORTED_POST_TYPES,
+                    ids: [initialPostId]
+                },
+                limit: 1
+            });
+            if (fetchedPost.items.length) {
+                initialPrefetchedItems.push(fetchedPost.items[0]);
+            }
+        }
+        let prefetchedItems = initialPrefetchedItems;
+        if (initialPostId) {
+            const targetPost = prefetchedItems.find((p) => p.id === initialPostId);
+            if (targetPost) {
+                prefetchedItems = [targetPost, ...prefetchedItems.filter((p) => p.id !== initialPostId)];
+            }
+        }
+        return {
+            kind: 'feed',
+            initialData: {
+                prefetchedItems,
+                startIndex: prefetchedItems.length ? 0 : -1
+            },
+            loadMore: loader.loadMore,
+            onEndReached
+        };
+    };
+}

package/dist/media-center/media-center/posts-feed/index.d.ts

@@ -0,0 +1 @@
+export { PostsFeedHandler } from './posts-feed-handler.svelte';

package/dist/media-center/media-center/posts-feed/index.js

@@ -0,0 +1 @@
+export { PostsFeedHandler } from './posts-feed-handler.svelte';

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

@@ -0,0 +1,42 @@
+import type { IMediaCenterDataProvider } from '../../config/types';
+import type { MediaCenterState } from '../../navigation';
+import type { PostPlayerModel, PostsPlayerProps } from '../../../posts/posts-player/types';
+import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
+import type { IPlayerDataProvider } from '../../../ui/player/providers';
+import { MediaCenterSettingsHandler } from '../handlers';
+import type { PostsFeedFilter, PostsFeedProviderInit } from './types';
+export declare class PostsFeedHandler {
+    private _state;
+    private _providersGenerator;
+    private _feedPlayerData;
+    private _dataProvider;
+    private _mediaCenterSettingsHandler;
+    private _closeOrchestrator;
+    private _callbacks;
+    constructor(data: {
+        dataProvider: IMediaCenterDataProvider;
+        mediaCenterSettingsHandler: MediaCenterSettingsHandler;
+        closeOrchestrator: ICloseOrchestrator;
+        on: Callbacks;
+    });
+    get activated(): boolean;
+    get active(): boolean;
+    get loading(): boolean;
+    get feedPlayerProps(): PostsPlayerProps | null;
+    deactivate: () => void;
+    activateWithExistingProvider: (data: {
+        dataProvider: IPlayerDataProvider<PostPlayerModel>;
+        onPostActivated?: (id: string) => void;
+    }) => Promise<void>;
+    activate: (options: Partial<{
+        filter: PostsFeedFilter;
+        init: PostsFeedProviderInit;
+    }>) => Promise<void>;
+    private tryRestoreState;
+    private makePostsPlayerProps;
+}
+type Callbacks = {
+    playerReachedEnd: () => void;
+    navigationStateChanged: (state: MediaCenterState) => void;
+};
+export {};

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

@@ -0,0 +1,106 @@
+import { Utils } from '../../../core/utils';
+import { initBufferFromProvider } from '../../../ui/player/providers/service';
+import { MediaCenterSettingsHandler } from '../handlers';
+import { FeedProvidersGenerator } from './feed-providers-generator';
+export class PostsFeedHandler {
+    _state = $state('inactive');
+    _providersGenerator;
+    _feedPlayerData = $state.raw(null);
+    _dataProvider;
+    _mediaCenterSettingsHandler;
+    _closeOrchestrator;
+    _callbacks;
+    constructor(data) {
+        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, on } = data;
+        this._providersGenerator = new FeedProvidersGenerator(dataProvider);
+        this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
+        this._dataProvider = dataProvider;
+        this._closeOrchestrator = closeOrchestrator;
+        this._callbacks = on;
+    }
+    get activated() {
+        return this._state !== 'inactive';
+    }
+    get active() {
+        return this._state === 'ready';
+    }
+    get loading() {
+        return this._state === 'loading';
+    }
+    get feedPlayerProps() {
+        return this._feedPlayerData?.props || null;
+    }
+    deactivate = () => {
+        this._state = 'inactive';
+        this._feedPlayerData = null;
+    };
+    activateWithExistingProvider = async (data) => {
+        const { dataProvider, onPostActivated } = data;
+        const on = {
+            postActivated: (id) => {
+                onPostActivated?.(id);
+                this._callbacks.navigationStateChanged({ mode: 'posts-feed', postId: id, categoryId: null });
+            }
+        };
+        try {
+            this._state = 'loading';
+            if (!dataProvider.onEndReached) {
+                dataProvider.onEndReached = this._callbacks.playerReachedEnd;
+            }
+            this._feedPlayerData = {
+                props: this.makePostsPlayerProps({ dataProvider, on }),
+                filter: {}
+            };
+        }
+        finally {
+            this._state = 'ready';
+        }
+    };
+    activate = async (options) => {
+        const { filter, init } = options;
+        if (init?.initialPostId && this.tryRestoreState(init.initialPostId, filter)) {
+            // Already active with the requested buffer
+            return;
+        }
+        const on = {
+            postActivated: (id) => {
+                this._callbacks.navigationStateChanged({ mode: 'posts-feed', postId: id, categoryId: filter?.categoryId ?? null });
+            }
+        };
+        try {
+            this._state = 'loading';
+            const dataProvider = await this._providersGenerator.makePostPlayerItemsProvider({ filter, init, onEndReached: this._callbacks.playerReachedEnd });
+            this._feedPlayerData = {
+                props: this.makePostsPlayerProps({ dataProvider, on }),
+                filter: filter || {}
+            };
+        }
+        finally {
+            this._state = 'ready';
+        }
+    };
+    tryRestoreState = (initialPostId, filter) => {
+        if (this._state !== 'ready' || !this._feedPlayerData || !Utils.areEqual(this._feedPlayerData.filter, filter)) {
+            return false;
+        }
+        const buffer = this._feedPlayerData.props.dataProvider.type === 'buffer' ? this._feedPlayerData.props.dataProvider.buffer : null;
+        if (!buffer) {
+            return false;
+        }
+        return buffer.tryActivateItemById(initialPostId);
+    };
+    makePostsPlayerProps = (data) => {
+        const { dataProvider, on } = data;
+        return {
+            dataProvider: { type: 'buffer', buffer: initBufferFromProvider(dataProvider) },
+            socialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
+            analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
+            playerSettings: this._mediaCenterSettingsHandler.playerSettings,
+            closeOrchestrator: this._closeOrchestrator,
+            on: {
+                postActivated: on.postActivated,
+                backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
+            }
+        };
+    };
+}

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

@@ -0,0 +1,8 @@
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+export type PostsFeedFilter = {
+    categoryId?: string | null;
+};
+export type PostsFeedProviderInit = {
+    prefetchedItems?: PostPlayerModel[];
+    initialPostId?: string | null;
+};

package/dist/media-center/media-center/streams-feed/feed-providers-generator.d.ts

@@ -0,0 +1,12 @@
+import type { IMediaCenterDataProvider } from '../../config/types';
+import type { IStreamsPlayerDataProvider } from '../../../streams/streams-player/types';
+import type { StreamsFeedFilter, StreamsFeedProviderInit } from './types';
+export declare class FeedProvidersGenerator {
+    private dataProvider;
+    constructor(dataProvider: IMediaCenterDataProvider);
+    makeStreamsPlayerDataProvider: (data: {
+        filter: StreamsFeedFilter | undefined;
+        init: StreamsFeedProviderInit | undefined;
+        onEndReached: () => void;
+    }) => Promise<IStreamsPlayerDataProvider>;
+}

package/dist/media-center/media-center/streams-feed/feed-providers-generator.js

@@ -0,0 +1,56 @@
+import { ContinuationToken } from '../../../core/continuation-token';
+import { CursorDataLoader } from '../../../core/data-loaders';
+export class FeedProvidersGenerator {
+    dataProvider;
+    constructor(dataProvider) {
+        this.dataProvider = dataProvider;
+    }
+    makeStreamsPlayerDataProvider = async (data) => {
+        const { filter, init, onEndReached } = data;
+        const { categoryId } = filter || {};
+        const { prefetchedStreams: initialPrefetchedStreams = [], initialStreamId } = init || {};
+        const loader = new CursorDataLoader({
+            loadPage: async (continuationToken) => {
+                const result = await this.dataProvider.streamPlayer.getStreamsCursor({
+                    filter: {
+                        categoryId: categoryId || undefined,
+                        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)
+                };
+            }
+        });
+        if (initialStreamId && !initialPrefetchedStreams.find((p) => p.id === initialStreamId)) {
+            const fetchedStreams = await this.dataProvider.streamPlayer.getStreamsCursor({
+                filter: {
+                    ids: [initialStreamId]
+                },
+                limit: 1
+            });
+            if (fetchedStreams.items.length) {
+                initialPrefetchedStreams.push(fetchedStreams.items[0]);
+            }
+        }
+        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: this.dataProvider.streamPlayer.getStreamPages,
+            onEndReached
+        };
+    };
+}

package/dist/media-center/media-center/streams-feed/index.d.ts

@@ -0,0 +1 @@
+export { StreamsFeedHandler } from './streams-feed-handler.svelte';

package/dist/media-center/media-center/streams-feed/index.js

@@ -0,0 +1 @@
+export { StreamsFeedHandler } from './streams-feed-handler.svelte';

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

@@ -0,0 +1,45 @@
+import type { IMediaCenterDataProvider } from '../../config/types';
+import type { MediaCenterState } from '../../navigation';
+import type { StreamsPlayerProps, IStreamsPlayerDataProvider } from '../../../streams/streams-player/types';
+import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
+import { MediaCenterSettingsHandler } from '../handlers';
+import type { StreamsFeedFilter, StreamsFeedProviderInit } from './types';
+export declare class StreamsFeedHandler {
+    private _state;
+    private _providersGenerator;
+    private _feedPlayerData;
+    private _dataProvider;
+    private _mediaCenterSettingsHandler;
+    private _closeOrchestrator;
+    private _callbacks;
+    constructor(data: {
+        dataProvider: IMediaCenterDataProvider;
+        mediaCenterSettingsHandler: MediaCenterSettingsHandler;
+        closeOrchestrator: ICloseOrchestrator;
+        on: Callbacks;
+    });
+    get activated(): boolean;
+    get active(): boolean;
+    get loading(): boolean;
+    get feedPlayerProps(): StreamsPlayerProps | null;
+    deactivate: () => void;
+    activateWithExistingProvider: (data: {
+        dataProvider: IStreamsPlayerDataProvider;
+        onStreamActivated?: (data: {
+            id: string;
+            title: string;
+            image: string | null;
+        }) => void;
+    }) => Promise<void>;
+    activate: (options: Partial<{
+        filter: StreamsFeedFilter;
+        init: StreamsFeedProviderInit;
+    }>) => Promise<void>;
+    private tryRestoreState;
+    private makeStreamsPlayerProps;
+}
+type Callbacks = {
+    playerReachedEnd: () => void;
+    navigationStateChanged: (state: MediaCenterState) => void;
+};
+export {};

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

@@ -0,0 +1,111 @@
+import { Utils } from '../../../core/utils';
+import { StreamsPlayerBuffer } from '../../../streams/streams-player/streams-player-buffer.svelte';
+import { MediaCenterSettingsHandler } from '../handlers';
+import { FeedProvidersGenerator } from './feed-providers-generator';
+export class StreamsFeedHandler {
+    _state = $state('inactive');
+    _providersGenerator;
+    _feedPlayerData = $state.raw(null);
+    _dataProvider;
+    _mediaCenterSettingsHandler;
+    _closeOrchestrator;
+    _callbacks;
+    constructor(data) {
+        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, on } = data;
+        this._providersGenerator = new FeedProvidersGenerator(dataProvider);
+        this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
+        this._dataProvider = dataProvider;
+        this._closeOrchestrator = closeOrchestrator;
+        this._callbacks = on;
+    }
+    get activated() {
+        return this._state !== 'inactive';
+    }
+    get active() {
+        return this._state === 'ready';
+    }
+    get loading() {
+        return this._state === 'loading';
+    }
+    get feedPlayerProps() {
+        return this._feedPlayerData?.props || null;
+    }
+    deactivate = () => {
+        this._state = 'inactive';
+        this._feedPlayerData = null;
+    };
+    activateWithExistingProvider = async (data) => {
+        const { dataProvider, onStreamActivated } = data;
+        const on = {
+            streamActivated: (data) => {
+                onStreamActivated?.(data);
+            },
+            streamPageActivated: (data) => {
+                const { streamId, streamPageId } = data;
+                this._callbacks.navigationStateChanged({ mode: 'streams-feed', streamId, streamPageId, categoryId: null });
+            }
+        };
+        try {
+            this._state = 'loading';
+            if (!dataProvider.onEndReached) {
+                dataProvider.onEndReached = this._callbacks.playerReachedEnd;
+            }
+            this._feedPlayerData = {
+                props: this.makeStreamsPlayerProps({ dataProvider, on }),
+                filter: {}
+            };
+        }
+        finally {
+            this._state = 'ready';
+        }
+    };
+    activate = async (options) => {
+        const { filter, init } = options;
+        if (init?.initialStreamPageId && this.tryRestoreState(init.initialStreamPageId, filter)) {
+            // Already active with the requested buffer
+            return;
+        }
+        const on = {
+            streamPageActivated: (data) => {
+                const { streamId, streamPageId } = data;
+                this._callbacks.navigationStateChanged({ mode: 'streams-feed', streamId, streamPageId, categoryId: filter?.categoryId ?? null });
+            }
+        };
+        try {
+            this._state = 'loading';
+            const dataProvider = await this._providersGenerator.makeStreamsPlayerDataProvider({ filter, init, onEndReached: this._callbacks.playerReachedEnd });
+            this._feedPlayerData = {
+                props: this.makeStreamsPlayerProps({ dataProvider, on }),
+                filter: filter || {}
+            };
+        }
+        finally {
+            this._state = 'ready';
+        }
+    };
+    tryRestoreState = (initialStreamPageId, filter) => {
+        if (this._state !== 'ready' || !this._feedPlayerData || !Utils.areEqual(this._feedPlayerData.filter, filter)) {
+            return false;
+        }
+        const buffer = this._feedPlayerData.props.dataProvider.type === 'buffer' ? this._feedPlayerData.props.dataProvider.buffer : null;
+        if (!buffer) {
+            return false;
+        }
+        return buffer.tryActivateItemById(initialStreamPageId);
+    };
+    makeStreamsPlayerProps = (data) => {
+        const { dataProvider, on } = data;
+        return {
+            dataProvider: { type: 'buffer', buffer: new StreamsPlayerBuffer(dataProvider) },
+            analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
+            postSocialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
+            playerSettings: this._mediaCenterSettingsHandler.playerSettings,
+            closeOrchestrator: this._closeOrchestrator,
+            on: {
+                streamActivated: on.streamActivated,
+                streamPageActivated: on.streamPageActivated,
+                backgroundImageLoaded: this._mediaCenterSettingsHandler.backgroundImageLoadedHandler
+            }
+        };
+    };
+}

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

@@ -0,0 +1,9 @@
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
+export type StreamsFeedFilter = {
+    categoryId?: string | null;
+};
+export type StreamsFeedProviderInit = {
+    prefetchedStreams?: StreamPlayerModel[];
+    initialStreamId?: string | null;
+    initialStreamPageId?: string | null;
+};

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

@@ -1,8 +1,9 @@
 import type { Locale } from '../../core/locale';
+import type { MediaCenterState } from '../navigation';
 import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
 import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
 import type { IPlayerDataProvider } from '../../ui/player/providers';
-export type MediaCenterMode = 'feed' | 'discover' | 'moments';
+export type MediaCenterMode = 'discover' | 'posts-feed' | 'streams-feed' | 'moments';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;
@@ -40,4 +41,5 @@ export type IMediaCenterSettings = {
     showStreamsCloudWatermark?: boolean;
     disableBackground?: boolean;
     theme?: 'light' | 'dark';
+    state?: MediaCenterState | null;
 };

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

@@ -1,2 +1,2 @@
 export type { IMediaCenterNavigationHandler } from './types';
-export type { MediaCenterState } from './media-center-state';
+export type { MediaCenterState } from './media-center-state.types';

package/dist/media-center/navigation/{media-center-state.d.ts → media-center-state.types.d.ts}

@@ -1,12 +1,13 @@
 export type MediaCenterState = PostsFeedState | StreamsFeedState | DiscoverState | MomentsState;
 export type PostsFeedState = {
     mode: 'posts-feed';
-    postId: string;
+    postId: string | null;
     categoryId: string | null;
 };
 export type StreamsFeedState = {
     mode: 'streams-feed';
-    streamId: string;
+    streamId: string | null;
+    streamPageId: string | null;
     categoryId: string | null;
 };
 export type DiscoverState = {
@@ -15,5 +16,5 @@ export type DiscoverState = {
 };
 export type MomentsState = {
     mode: 'moments';
-    momentId: string;
+    momentId: string | null;
 };

package/dist/media-center/navigation/media-center-state.types.js

@@ -0,0 +1 @@
+export {};

package/dist/media-center/navigation/mock-navigation-handler.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { MediaCenterState } from './media-center-state';
+import type { MediaCenterState } from './';
 import type { IMediaCenterNavigationHandler } from './types';
 export declare class MockNavigationHandler implements IMediaCenterNavigationHandler {
-    initialState: undefined;
+    private onChangeCallback;
+    constructor(onChangeCallback: (state: MediaCenterState) => void);
     onChange: (state: MediaCenterState) => void;
 }

package/dist/media-center/navigation/mock-navigation-handler.svelte.js

@@ -1,6 +1,9 @@
 export class MockNavigationHandler {
-    initialState = undefined;
+    onChangeCallback;
+    constructor(onChangeCallback) {
+        this.onChangeCallback = onChangeCallback;
+    }
     onChange = (state) => {
-        console.warn(state);
+        this.onChangeCallback(state);
     };
 }

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

@@ -1,5 +1,4 @@
-import type { MediaCenterState } from './media-center-state';
+import type { MediaCenterState } from './';
 export interface IMediaCenterNavigationHandler {
-    initialState?: MediaCenterState;
     onChange: (state: MediaCenterState) => void;
 }

package/dist/media-page/cmp.media-page.svelte

@@ -15,7 +15,7 @@ import { mount, unmount } from 'svelte';
 let { dataProvider, settings, dynamicActions } = $props();
 const settingsHolder = new MediaCenterSettings(settings);
 $effect(() => {
-    settingsHolder.patch(settings);
+    settingsHolder.update(settings);
 });
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);

package/dist/media-page/index.d.ts

@@ -1,5 +1,6 @@
 import type { Locale } from '../core/locale';
 import { type IMediaCenterDataProvider } from '../media-center/config/types';
+import type { MediaCenterState } from '../media-center/navigation';
 import type { PostPlayerModel } from '../posts/posts-player';
 import type { IStreamsPlayerDataProvider } from '../streams/streams-player';
 import type { StreamAmplificationParameters } from '../streams/streams-player/types';
@@ -69,7 +70,9 @@ export type { IMediaCenterDataProvider };
  */
 export declare function openMediaPageModal(init: {
     dataProvider: IMediaCenterDataProvider;
-    viewerSettings?: MediaPageViewerSettings;
+    viewerSettings?: MediaPageViewerSettings & {
+        initialState?: MediaCenterState | null;
+    };
     on?: {
         closed?: () => void;
     };

package/dist/streams/streams-player/streams-player-view.svelte

@@ -53,7 +53,7 @@ $effect(() => {
             if (stream.organizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(stream.organizationId);
             }
-            (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { title: stream.title, image: stream.cover });
+            (_a = on === null || on === void 0 ? void 0 : on.streamActivated) === null || _a === void 0 ? void 0 : _a.call(on, { id: stream.id, title: stream.title, image: stream.cover });
             analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamView(stream.id);
             startActivityTracking();
         }
@@ -141,15 +141,15 @@ const handleChangePage = (index) => {
     buffer.setActiveChunkItemIndex(index);
 };
 const onPageActivated = (id) => {
+    var _a, _b;
     const activeChunk = buffer === null || buffer === void 0 ? void 0 : buffer.activeChunk;
     if (!activeChunk) {
         return;
     }
     const page = activeChunk.items.find((x) => x.id === id);
-    if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
-        on.backgroundImageLoaded((page === null || page === void 0 ? void 0 : page.cover) || null);
-    }
+    (_a = on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) === null || _a === void 0 ? void 0 : _a.call(on, (page === null || page === void 0 ? void 0 : page.cover) || null);
     if (page) {
+        (_b = on === null || on === void 0 ? void 0 : on.streamPageActivated) === null || _b === void 0 ? void 0 : _b.call(on, { streamId: activeChunk.model.id, streamPageId: page.id });
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamPageView(id, activeChunk.model.id);
         if (page.type === 'short-video' && page.shortVideo) {
             analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(page.shortVideo.id);

package/dist/streams/streams-player/types.d.ts

@@ -30,9 +30,14 @@ export type StreamsPlayerProps = {
     closeOrchestrator: ICloseOrchestrator;
     on?: {
         streamActivated?: (data: {
+            id: string;
             title: string;
             image: string | null;
         }) => void;
+        streamPageActivated?: (data: {
+            streamId: string;
+            streamPageId: string;
+        }) => void;
         backgroundImageLoaded?: (imageUrl: string | null) => void;
     };
 };

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.d.ts

@@ -10,6 +10,7 @@ export declare class PlayerChunksManager<TItem extends WithId, TChunk extends Wi
     get loadedChunks(): PlayerChunk<TItem, TChunk>[];
     get flattenedChunkItems(): TItem[];
     get flattenedActiveChunkItemIndex(): number;
+    tryActivateItemById: (id: string) => boolean;
     initialize: () => Promise<void>;
     setActiveChunkIndex: (index: number) => Promise<void>;
     activateItemAtFlattenedIndex: (index: number) => Promise<void>;

package/dist/ui/player/providers/chunks-player-buffer/player-chunks-manager.svelte.js

@@ -32,6 +32,16 @@ export class PlayerChunksManager {
         }
         return itemsBeforeActiveChunk + this.activeChunk.activeChunkItem.indexWithinChunk;
     }
+    tryActivateItemById = (id) => {
+        const chunkWithItem = this._loadedChunks.find((chunk) => chunk.items.some((item) => item.id === id));
+        if (!chunkWithItem) {
+            return false;
+        }
+        const itemIndex = chunkWithItem.items.findIndex((item) => item.id === id);
+        this.setActiveChunkIndex(chunkWithItem.chunkIndex);
+        this.activeChunk.setActiveItemIndex(itemIndex);
+        return true;
+    };
     initialize = async () => {
         const handleInitialized = async () => {
             const startIndex = Math.min(FIXED_START_INDEX, this._loadedChunks.length - 1);