@streamscloud/embeddable 12.2.0 → 13.0.1

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

@@ -1,50 +1,30 @@
 import type { Locale } from '../../core/locale';
-import { type IMediaCenterConfig } from '../../media-center/config/types';
+import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
 export { type StreamPlayerModel, type StreamPageViewerModel };
-export { mapToStreamPlayerModel } from '../data-loaders/mapper';
-export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
+export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterDataProvider };
 /**
  * Opens the streams player modal.
  *
- * Two overloads (mutually exclusive; enforced by TypeScript):
- * - Provider mode: openStreamsPlayer({ dataProvider, mediaCenterConfig?, analyticsHandler? })
- * - Internal provider mode: openStreamsPlayer({ ids, initiator, graphqlOrigin?, initialId?, mediaPageId? })
- *
  * @param init Configuration options.
  *
- * Provider mode (overload 1)
+ * Required
  * @param {IStreamsPlayerDataProvider} init.dataProvider
  *   Provider that supplies the stream data to the player.
- * @param {IMediaCenterConfig} [init.mediaCenterConfig]
- *   Optional media-center config.
+ *
+ * Optional
  * @param {IStreamAnalyticsHandler} [init.analyticsHandler]
  *   Optional analytics handler to capture player/stream analytics events.
- *   If omitted in provider mode, analytics is not auto-initialized.
- *
- * Internal provider mode (overload 2)
- * @param {string[]} init.ids
- *   List of stream IDs to display.
- * @param {string} init.initiator
- *   Initiator identifier (used for tracking/analytics and GraphQL).
- * @param {string} [init.graphqlOrigin]
- *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
- *   @param {string} [init.initialId]
- *   ID of the stream to open first (optional).
- * @param {string} [init.mediaPageId]
- *   Optional media page ID used to construct an internal media-center config.
- *
- * Common (optional)
  * @param {IPostSocialInteractionsHandler} [init.postSocialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
  * @param {StreamAmplificationParameters} [init.amplificationParameters]
  *   Optional parameters to configure amplification behavior.
- * @param {ContentPlayerSettings} [init.playerSettings]
+ * @param {StreamsPlayerSettings} [init.playerSettings]
  *   Player UI and behavior settings.
  *
- *   Fields of ContentPlayerSettings:
+ *   Fields of StreamsPlayerSettings:
  *   - {boolean} [disableBackground]
  *       If true, hides the player's background image.
  *   - {boolean} [hideCloseButton]
@@ -54,6 +34,8 @@ export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterC
  *       If omitted, the default locale 'en' is used.
  *   - {boolean} [showStreamsCloudWatermark]
  *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
  *
  * Events
  * @param {{ streamActivated?: (data: { title: string; image: string | null }) => void; playerClosed?: () => void }} [init.on]
@@ -65,63 +47,31 @@ export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterC
  *
  * @returns {void}
  *
- * @example <caption>Provider mode</caption>
+ * @example
  * ```ts
- * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
+ * import { openStreamsPlayer } from '@streamscloud/embeddable/stream-player';
  *
- * openStreamPlayer({
+ * openStreamsPlayer({
  *   dataProvider: myStreamProvider,
- *   mediaCenterConfig: myMediaCenterProvider,
  *   analyticsHandler: myAnalyticsHandler,
+ *   amplificationParameters: {
+ *     // ...your amplification parameters
+ *   },
  *   playerSettings: {
  *     // Locale defaults to 'en'; set 'no' to switch to Norwegian:
  *     locale: 'no',
  *     disableBackground: false,
  *     hideCloseButton: false,
  *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
  *   },
  *   on: {
  *     streamActivated: ({ title, image }) => console.log('Stream active:', title, image),
- *     playerClosed: () => console.log('Player closed')
- *   }
- * });
- * ```
- *
- * @example <caption>Internal provider mode</caption>
- * ```ts
- * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
- *
- * openStreamsPlayer({
- *   ids: ['stream_123'],
- *   initiator: 'marketing-campaign',
- *   graphqlOrigin: 'https://api.example.com',
- *   mediaPageId: 'media-page-123',
- *   playerSettings: {
- *     locale: 'en',
- *     disableBackground: true,
- *     hideCloseButton: false,
- *     showStreamsCloudWatermark: false,
+ *     playerClosed: () => console.log('Player closed'),
  *   },
- *   on: {
- *     streamActivated: ({ title, image }) => console.log('Stream active:', title, image),
- *     playerClosed: () => console.log('Player closed')
- *   }
  * });
  * ```
  */
-export declare function openStreamsPlayer(init: {
-    dataProvider: IStreamsPlayerDataProvider;
-    mediaCenterConfig: IMediaCenterConfig;
-    amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: StreamsPlayerSettings;
-    on?: {
-        streamActivated?: (data: {
-            title: string;
-            image: string | null;
-        }) => void;
-        playerClosed?: () => void;
-    };
-}): void;
 export declare function openStreamsPlayer(init: {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
@@ -136,22 +86,6 @@ export declare function openStreamsPlayer(init: {
         playerClosed?: () => void;
     };
 }): void;
-export declare function openStreamsPlayer(init: {
-    ids: string[];
-    initiator: string;
-    graphqlOrigin?: string;
-    initialId?: string;
-    mediaPageId?: string;
-    amplificationParameters?: StreamAmplificationParameters;
-    playerSettings?: StreamsPlayerSettings;
-    on?: {
-        streamActivated?: (data: {
-            title: string;
-            image: string | null;
-        }) => void;
-        playerClosed?: () => void;
-    };
-}): void;
 export type StreamsPlayerSettings = {
     disableBackground?: boolean;
     locale?: Locale;

package/dist/streams/streams-player/index.js

@@ -1,36 +1,80 @@
-import { toastrWarning } from '../../core/toastr';
-import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
 import {} from '../../media-center/config/types';
-import { MediaCenterProxy } from '../../media-center/media-center';
 import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../../ui/shadow-dom';
-import { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';
-import { InternalStreamsPlayerDataProvider } from './internal-streams-player-data-provider';
 import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
 export {};
-export { mapToStreamPlayerModel } from '../data-loaders/mapper';
+/**
+ * Opens the streams player modal.
+ *
+ * @param init Configuration options.
+ *
+ * Required
+ * @param {IStreamsPlayerDataProvider} init.dataProvider
+ *   Provider that supplies the stream data to the player.
+ *
+ * Optional
+ * @param {IStreamAnalyticsHandler} [init.analyticsHandler]
+ *   Optional analytics handler to capture player/stream analytics events.
+ * @param {IPostSocialInteractionsHandler} [init.postSocialInteractionsHandler]
+ *   Handler for social interactions (like, share, etc.).
+ * @param {StreamAmplificationParameters} [init.amplificationParameters]
+ *   Optional parameters to configure amplification behavior.
+ * @param {StreamsPlayerSettings} [init.playerSettings]
+ *   Player UI and behavior settings.
+ *
+ *   Fields of StreamsPlayerSettings:
+ *   - {boolean} [disableBackground]
+ *       If true, hides the player's background image.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *   - {Locale} [locale='en']
+ *       Localization for the player UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
+ *
+ * Events
+ * @param {{ streamActivated?: (data: { title: string; image: string | null }) => void; playerClosed?: () => void }} [init.on]
+ *   Optional event handlers.
+ * @param {(data: { title: string; image: string | null }) => void} [init.on.streamActivated]
+ *   Called when the stream becomes active. Receives a subset of data with title and image.
+ * @param {() => void} [init.on.playerClosed]
+ *   Called after the player is fully closed (after unmount and removal from the DOM).
+ *
+ * @returns {void}
+ *
+ * @example
+ * ```ts
+ * import { openStreamsPlayer } from '@streamscloud/embeddable/stream-player';
+ *
+ * openStreamsPlayer({
+ *   dataProvider: myStreamProvider,
+ *   analyticsHandler: myAnalyticsHandler,
+ *   amplificationParameters: {
+ *     // ...your amplification parameters
+ *   },
+ *   playerSettings: {
+ *     // Locale defaults to 'en'; set 'no' to switch to Norwegian:
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
+ *   },
+ *   on: {
+ *     streamActivated: ({ title, image }) => console.log('Stream active:', title, image),
+ *     playerClosed: () => console.log('Player closed'),
+ *   },
+ * });
+ * ```
+ */
 export function openStreamsPlayer(init) {
-    const { ids, initialId, graphqlOrigin, postSocialInteractionsHandler, initiator, amplificationParameters, playerSettings, on } = init;
-    let dataProvider = init.dataProvider;
-    if (!dataProvider && ids?.length) {
-        dataProvider = new InternalStreamsPlayerDataProvider({ ids, initialId, graphqlOrigin, initiator });
-    }
-    if (!dataProvider) {
-        toastrWarning('Data provider is not specified.');
-        return;
-    }
-    let mediaCenterConfig = init.mediaCenterConfig;
-    if (!mediaCenterConfig && init.mediaPageId) {
-        mediaCenterConfig = new InternalMediaCenterConfig({ mediaPageId: init.mediaPageId, graphqlOrigin, initiator });
-    }
-    let analyticsHandler = init.analyticsHandler;
-    if (!analyticsHandler && !init.dataProvider) {
-        // Only create internal analytics handler if using internal data provider
-        analyticsHandler = new InternalStreamAnalyticsHandler(graphqlOrigin);
-    }
+    const { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
-    let mounted;
+    let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
         closeFn: async () => {
             await unmount(mounted);
@@ -41,47 +85,23 @@ export function openStreamsPlayer(init) {
         },
         canClose: !playerSettings?.hideCloseButton
     });
-    if (mediaCenterConfig) {
-        mounted = mount(MediaCenterProxy, {
-            target: shadowHost.shadowRoot,
-            props: {
-                config: mediaCenterConfig,
-                settings: playerSettings,
-                modeProps: {
-                    mode: 'streams',
-                    props: {
-                        dataProvider,
-                        amplificationParameters,
-                        onStreamActivated: (data) => {
-                            if (init.on?.streamActivated) {
-                                init.on.streamActivated({ title: data.title, image: data.image });
-                            }
-                        }
-                    }
-                },
-                closeOrchestrator: makeCloseOrchestrator()
-            }
-        });
-    }
-    else {
-        mounted = mount(StreamsPlayerProxy, {
-            target: shadowHost.shadowRoot,
-            props: {
-                dataProvider,
-                analyticsHandler,
-                amplificationParameters,
-                playerSettings,
-                postSocialInteractionsHandler,
-                closeOrchestrator: makeCloseOrchestrator(),
-                on: {
-                    streamActivated: (data) => {
-                        if (init.on?.streamActivated) {
-                            init.on.streamActivated({ title: data.title, image: data.image });
-                        }
+    mounted = mount(StreamsPlayerProxy, {
+        target: shadowHost.shadowRoot,
+        props: {
+            dataProvider,
+            analyticsHandler,
+            amplificationParameters,
+            playerSettings,
+            postSocialInteractionsHandler,
+            closeOrchestrator: makeCloseOrchestrator(),
+            on: {
+                streamActivated: (data) => {
+                    if (init.on?.streamActivated) {
+                        init.on.streamActivated({ title: data.title, image: data.image });
                     }
                 }
             }
-        });
-    }
+        }
+    });
     shadowHost.attachToBody();
 }

package/dist/streams/streams-player/streams-player-buffer.svelte.js

@@ -9,7 +9,8 @@ export class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer {
             loadMoreChunks: async () => {
                 return await provider.loadMoreStreams();
             },
-            loadChunkItems: provider.getStreamPages
+            loadChunkItems: provider.getStreamPages,
+            onEndReached: provider.onEndReached
         });
     }
 }

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

@@ -9,7 +9,7 @@
 };
 var _a;
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
-import { ContentPlayerSettings } from '../../content-player/content-player-settings';
+import { ContentPlayerSettings } from '../../content-player/content-player-settings.svelte';
 import { preloadImage } from '../../core/image-preloader';
 import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';

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

@@ -1,4 +1,5 @@
 import type { Locale } from '../../core/locale';
+import type { ThemeValue } from '../../core/theme';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
@@ -38,7 +39,7 @@ export type StreamsPlayerProps = {
 export type StreamsPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    playerColors?: PlayerColors;
+    playerColors?: Record<ThemeValue, PlayerColors>;
 };
 export type StreamAmplificationParameters = {
     campaignId: string;
@@ -54,6 +55,7 @@ export interface IStreamsPlayerDataProvider {
         items: StreamPageViewerModel[];
         continuationToken: string | null;
     }>;
+    onEndReached?: () => void;
 }
 export interface IStreamAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;

package/dist/ui/button/cmp.options-button.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">import { Dropdown } from '../dropdown';
+import { Icon } from '../icon';
+import ButtonBase from './resources/button-base.svelte';
+import ButtonTheme from './resources/button-theme.svelte';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+let { type = 'button', disabled = false, autofocus = false, style = null, size = null, optionsPosition = 'bottom-start', on, children, options, rightOptions } = $props();
+</script>
+
+<ButtonTheme style={style} size={size}>
+  <div class="options-button" class:options-button--disabled={disabled}>
+    {#if options}
+      <div class="options-button__options">
+        <Dropdown position={optionsPosition} disabled={disabled} offset={4}>
+          {#snippet trigger()}
+            <button class="options-button__options-trigger" type="button" disabled={disabled} aria-label="none">
+              <Icon src={IconChevronDown} />
+            </button>
+          {/snippet}
+          {@render options()}
+        </Dropdown>
+      </div>
+      <span class="options-button__options-separator">&zwj;</span>
+    {/if}
+    <div class="options-button__trigger">
+      <ButtonBase type={type} disabled={disabled} autofocus={autofocus} on={on}>
+        {@render children()}
+      </ButtonBase>
+    </div>
+    {#if rightOptions}
+      <span class="options-button__options-separator">&zwj;</span>
+      <div class="options-button__options">
+        <Dropdown position={optionsPosition} disabled={disabled} offset={4}>
+          {#snippet trigger()}
+            <button class="options-button__options-trigger" type="button" disabled={disabled} aria-label="none">
+              <Icon src={IconChevronDown} />
+            </button>
+          {/snippet}
+          {@render rightOptions()}
+        </Dropdown>
+      </div>
+    {/if}
+  </div>
+</ButtonTheme>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.options-button {
+  --_options-button--font--color: var(--button--font--color, black);
+  --_options-button--font-weight: var(--button--font-weight, 400);
+  --_options-button--text--font-size: var(--button--text--font-size, 0.875em);
+  --_options-button--background: var(--button--background, white);
+  --_options-button--background--hover: var(--button--background--hover, var(--_options-button--background));
+  --_options-button--background--active: var(--button--background--active, var(--_options-button--background));
+  --_options-button--background--disabled: var(--button--background--disabled, var(--_options-button--background));
+  --_options-button--border: var(--button--border, none);
+  --_options-button--border-radius: var(--button--border-radius, 0.25em);
+  --_options-button--box-shadow: var(--button--box-shadow, none);
+  --_options-button--padding--vertical: var(--button--padding--vertical, 0);
+  --_options-button--min-width: var(--button--min-width, 0);
+  --_options-button--height: var(--button--height, 2em);
+  --_options-button--separator--border: 1px solid var(--_options-button--font--color);
+  --_options-button--dropdown--min-width: var(--options-button--dropdown--min-width, 10em);
+  font-weight: var(--_options-button--font-weight);
+  color: var(--_options-button--font--color);
+  background: var(--_options-button--background);
+  border: var(--_options-button--border);
+  border-radius: var(--_options-button--border-radius);
+  min-width: var(--_options-button--min-width);
+  height: var(--_options-button--height);
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  box-shadow: var(--_options-button--box-shadow);
+}
+.options-button--disabled {
+  background: var(--_options-button--background--disabled);
+}
+.options-button__trigger {
+  display: inline-flex;
+  height: 100%;
+  flex: 1;
+  --button--min-width: 100%;
+  --button--box-shadow: none;
+  --button--border: none;
+  --button--border--disabled: none;
+  --button--height: 100%;
+  --button--background: transparent;
+  --button--background--disabled: transparent;
+}
+.options-button__options-trigger {
+  height: 100%;
+  font-size: var(--_options-button--text--font-size);
+  border-radius: var(--_options-button--border-radius);
+}
+.options-button__options {
+  height: 100%;
+  --dropdown-item--min-width: var(--_options-button--dropdown--min-width);
+  --button--min-width: 100%;
+  --button--justify-content: flex-start;
+}
+.options-button__options-trigger {
+  padding: var(--_options-button--padding--vertical) 0.5em;
+}
+.options-button__options-trigger:not(:disabled):hover {
+  background: var(--_options-button--background--hover);
+}
+.options-button__options-trigger:not(:disabled):active {
+  background: var(--_options-button--background--active);
+}
+.options-button__options-separator {
+  border-right: var(--_options-button--separator--border);
+  height: var(--_options-button--text--font-size);
+}</style>

package/dist/ui/button/cmp.options-button.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type DropdownPosition } from '../dropdown';
+import type { ButtonStyle, ButtonSize } from './resources/button-types';
+import type { Snippet } from 'svelte';
+type Props = {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    autofocus?: boolean;
+    style?: ButtonStyle | null;
+    size?: ButtonSize | null;
+    optionsPosition?: DropdownPosition;
+    on?: {
+        click: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+    options?: Snippet;
+    rightOptions?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/button/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './cmp.button.svelte';
+export { default as OptionsButton } from './cmp.options-button.svelte';
 export { ButtonStyle, ButtonSize } from './resources/button-types';

package/dist/ui/button/index.js

@@ -1,2 +1,3 @@
 export { default as Button } from './cmp.button.svelte';
+export { default as OptionsButton } from './cmp.options-button.svelte';
 export { ButtonStyle, ButtonSize } from './resources/button-types';

package/dist/ui/button/resources/button-theme.svelte

@@ -38,6 +38,20 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   display: contents;
   /*Size*/
 }
+.button-theme--standard {
+  --button--font--color: var(--sc-mc-color--text-primary);
+  --button--background: var(--sc-mc-color--bg-button);
+  --button--background--hover: #f9fafb;
+  --button--background--active: #f2f2f3;
+  --button--background--disabled: #f2f2f3;
+  --button--border: 1px solid #e5e7eb;
+}
+:global([data-theme="dark"]) .button-theme--standard {
+  --button--background--hover: #1f2937;
+  --button--background--active: #374151;
+  --button--background--disabled: #374151;
+  --button--border: 1px solid #4b5563;
+}
 .button-theme--size-standard {
   --button--height: 2em;
   --button--text--font-size: 0.75em;
@@ -49,6 +63,6 @@ let { style = undefined, size = ButtonSize.Standard, children } = $props();
   --button--text--font-size: 0.9375em;
 }
 .button-theme--size-small {
-  --button--height: 1.5em;
-  --button--text--font-size: 0.625em;
+  --button--height: 1.75em;
+  --button--text--font-size: 0.75em;
 }</style>

package/dist/ui/player/colors/index.d.ts

@@ -1 +1 @@
-export type { PlayerColors } from './player-colors';
+export { PlayerColors, type IPlayerColors } from './player-colors';

package/dist/ui/player/colors/index.js

@@ -1 +1 @@
-export {};
+export { PlayerColors } from './player-colors';

package/dist/ui/player/colors/player-colors.d.ts

@@ -1,4 +1,4 @@
-export type PlayerColors = {
+export type IPlayerColors = {
     brand: string | null;
     button: string | null;
     buttonInactive: string | null;
@@ -10,3 +10,16 @@ export type PlayerColors = {
     salePrice: string | null;
     sidebarBackground: string | null;
 } | null;
+export declare class PlayerColors implements NonNullable<IPlayerColors> {
+    brand: string | null;
+    button: string | null;
+    buttonInactive: string | null;
+    cardButton: string | null;
+    cardBackground: string | null;
+    menuBackground: string | null;
+    playerBackground: string | null;
+    price: string | null;
+    salePrice: string | null;
+    sidebarBackground: string | null;
+    constructor(init: IPlayerColors | null | undefined);
+}

package/dist/ui/player/colors/player-colors.js

@@ -1 +1,24 @@
-export {};
+export class PlayerColors {
+    brand;
+    button;
+    buttonInactive;
+    cardButton;
+    cardBackground;
+    menuBackground;
+    playerBackground;
+    price;
+    salePrice;
+    sidebarBackground;
+    constructor(init) {
+        this.brand = init?.brand ?? null;
+        this.button = init?.button ?? null;
+        this.buttonInactive = init?.buttonInactive ?? null;
+        this.cardButton = init?.cardButton ?? null;
+        this.cardBackground = init?.cardBackground ?? null;
+        this.menuBackground = init?.menuBackground ?? null;
+        this.playerBackground = init?.playerBackground ?? null;
+        this.price = init?.price ?? null;
+        this.salePrice = init?.salePrice ?? null;
+        this.sidebarBackground = init?.sidebarBackground ?? null;
+    }
+}

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

@@ -9,6 +9,7 @@ export declare class DefaultChunksPlayerBuffer<TItem extends WithId, TChunk exte
     readonly navigationDisabled: boolean;
     readonly animationDuration = 500;
     private _playerChunksManager;
+    private _onEndReachedFn;
     constructor(provider: IChunksPlayerDataProvider<TItem, TChunk>);
     get activeChunk(): import("./chunks-player-buffer").PlayerChunk<TItem, TChunk>;
     setActiveChunkItemIndex: (index: number) => void;

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

@@ -5,12 +5,14 @@ export class DefaultChunksPlayerBuffer {
     loaded = $derived.by(() => this._playerChunksManager.flattenedChunkItems);
     currentIndex = $derived.by(() => this._playerChunksManager.flattenedActiveChunkItemIndex);
     current = $derived(this.currentIndex >= 0 ? this.loaded[this.currentIndex] : null);
-    canLoadNext = $derived(this.currentIndex < this.loaded.length - 1);
+    canLoadNext = $derived.by(() => this.currentIndex < this.loaded.length - 1 || !!this._onEndReachedFn);
     canLoadPrevious = $derived(this.currentIndex > 0);
     navigationDisabled = $derived(!this.canLoadNext && !this.canLoadPrevious);
     animationDuration = 500;
     _playerChunksManager;
+    _onEndReachedFn;
     constructor(provider) {
+        this._onEndReachedFn = provider.onEndReached;
         // Throttle navigation methods
         this.loadNext = Utils.throttle(this.loadNext, this.animationDuration);
         this.loadPrevious = Utils.throttle(this.loadPrevious, this.animationDuration);
@@ -30,6 +32,10 @@ export class DefaultChunksPlayerBuffer {
         if (!this.canLoadNext) {
             return;
         }
+        if (this.currentIndex >= this.loaded.length - 1) {
+            this._onEndReachedFn?.();
+            return;
+        }
         this._playerChunksManager.activateItemAtFlattenedIndex(this.currentIndex + 1);
     };
     loadPrevious = async () => {

package/dist/ui/player/providers/default-feed-player-buffer.svelte.d.ts

@@ -16,6 +16,7 @@ export declare class DefaultFeedPlayerBuffer<T extends WithId> implements IFeedP
     private _loaded;
     private _loadMoreFn;
     private _fetchDeferred;
+    private _onEndReachedFn;
     constructor(provider: IFeedPlayerDataProvider<T>);
     loadNext: () => Promise<void>;
     loadPrevious: () => Promise<void>;