@streamscloud/embeddable 12.1.0 → 13.0.0

package/dist/products/product-card/cmp.product-card.svelte

@@ -103,8 +103,8 @@ const styles = $derived.by(() => {
 .product-card {
   --_product-card--aspect-ratio: var(--product-card--aspect-ratio, 10/16);
   --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
-  --_product-card--background-color: var(--product-card--background-color, rgb(from #ffffff r g b/90%));
-  --_product-card--border-color: var(--product-card--background-color, #f2f2f3);
+  --_product-card--background-color: var(--product-card--background-color, rgb(from var(--sc-mc-color--bg-card) r g b/90%));
+  --_product-card--border-color: var(--product-card--background-color, var(--sc-mc-color--border-card));
   --_product-card--price-color: var(--product-card--price-color, inherit);
   --_product-card--sale-price-color: var(--product-card--sale-price-color, inherit);
   --product-price-color: var(--_product-card--price-color);
@@ -120,7 +120,6 @@ const styles = $derived.by(() => {
   position: relative;
   container-type: inline-size;
   aspect-ratio: var(--_product-card--aspect-ratio);
-  color: #000000;
   background-color: var(--_product-card--background-color);
   border: 1px solid var(--_product-card--border-color);
   border-radius: var(--_product-card--border-radius);
@@ -128,11 +127,6 @@ const styles = $derived.by(() => {
   justify-content: space-between;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-:global([data-theme="dark"]) .product-card {
-  --_product-card--background-color: var(--product-card--background-color, rgb(from #121212 r g b/90%));
-  --_product-card--border-color: var(--product-card--background-color, #1e1e1e);
-  color: #ffffff;
-}
 @container (width < 230px) {
   .product-card {
     padding: 0.5rem 0.5rem 0.75rem;
@@ -181,15 +175,12 @@ const styles = $derived.by(() => {
 }
 .product-card__description {
   font-weight: 400;
-  color: #6b7280;
+  color: var(--sc-mc-color--text-secondary);
   font-size: 0.9375rem;
   line-height: 1.375rem;
   min-height: 1.375rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-:global([data-theme="dark"]) .product-card__description {
-  color: #d1d5db;
-}
 @container (width < 230px) {
   .product-card__description {
     font-size: 0.625rem;
@@ -217,7 +208,7 @@ const styles = $derived.by(() => {
 .product-price {
   --_product-price--color: var(--product-price-color);
   --_product-price--sale--color: var(--product-price--sale--color);
-  --_product-price--before--color: #6b7280;
+  --_product-price--before--color: var(--sc-mc-color--text-secondary);
   --_product-price--before--font-size: 0.75em;
   --_product-price--font-size: 1.875em;
   --_product-price--gap: 0.375em;
@@ -236,9 +227,6 @@ const styles = $derived.by(() => {
     --_product-price--gap: 0.25rem;
   }
 }
-:global([data-theme="dark"]) .product-price {
-  --_product-price--before--color: #d1d5db;
-}
 .product-price__before-price {
   width: 100%;
   color: var(--_product-price--before--color);

package/dist/short-videos/short-video-card/cmp.short-video-card.svelte

@@ -144,8 +144,8 @@ const adjustTextSize = (node) => {
   align-items: center;
   gap: 0.3125em;
   --icon--size: 1.25em;
-  --icon--color: #ffffff;
-  --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
+  --icon--color: var(--sc-mc-color--icon-overlay);
+  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
 }
 .short-video-card__info {
   margin-top: clamp(0.4375rem, 3.6cqi, 0.625rem);
@@ -156,13 +156,13 @@ const adjustTextSize = (node) => {
 .short-video-card__meta {
   font-size: clamp(0.625rem, 4.3cqi, 0.75rem);
   font-weight: 500;
-  color: #999999;
+  color: var(--sc-mc-color--text-secondary);
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
 .short-video-card__text {
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   --min-font: 0.75rem;
   --max-font: 0.9375rem;
   --line-height: 1.2;
@@ -202,7 +202,7 @@ const adjustTextSize = (node) => {
 .product-card__info {
   display: flex;
   flex-direction: column;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   font-size: clamp(0.5rem, 2.9cqi, 0.5rem);
   line-height: clamp(0.75rem, 4.3cqi, 0.75rem);
   font-weight: 500;
@@ -220,6 +220,6 @@ const adjustTextSize = (node) => {
   font-weight: 600;
 }
 .product-card__price span:nth-child(2) {
-  color: #999999;
+  color: var(--sc-mc-color--text-secondary);
   text-decoration: line-through;
 }</style>

package/dist/streams/layout/styles-transformer.d.ts

@@ -9,7 +9,7 @@ export declare const generateTextStyles: (styles: Partial<TextStreamElementStyle
 export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
 export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;
 export declare const mapFontWeight: (value: StreamElementStyleFontWeight | null | undefined) => "normal" | "600" | "500";
-export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "left" | "right";
+export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "right" | "left" | "center";
 export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
 export declare const transformFontSizeValue: (value: number | null | undefined) => string;
 export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;

package/dist/streams/stream-card/cmp.stream-card.svelte

@@ -58,7 +58,7 @@ let { stream, aspectRatio = 9 / 16, on } = $props();
   height: clamp(1.75rem, 20cqi, 2.5rem);
   padding-inline: clamp(0.5rem, 6cqi, 0.75rem);
   background: rgba(0, 0, 0, 0.8);
-  color: #ffffff;
+  color: var(--sc-mc-color--text-white);
   display: flex;
   flex-direction: column;
   align-content: center;

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

@@ -0,0 +1,42 @@
+<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 { CloseOrchestrator } from '../../ui/player/close-orchestrator';
+import { createShadowRoot } from '../../ui/shadow-dom';
+import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
+import { mount, unmount } from 'svelte';
+let { dataProvider, postSocialInteractionsHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
+const initHost = (node) => {
+    const shadowRoot = createShadowRoot(node);
+    const mounted = mount(StreamsPlayerProxy, {
+        target: shadowRoot,
+        props: {
+            dataProvider,
+            postSocialInteractionsHandler,
+            analyticsHandler,
+            amplificationParameters,
+            playerSettings,
+            closeOrchestrator: new CloseOrchestrator({
+                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield unmount(mounted);
+                }),
+                canClose: false
+            }),
+            on
+        }
+    });
+    return {
+        destroy: () => {
+            unmount(mounted);
+        }
+    };
+};
+</script>
+
+<div class="streams-player-host" use:initHost></div>

package/dist/streams/streams-player/cmp.streams-player.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '../../posts';
+import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters } from './types';
+type Props = {
+    dataProvider: IStreamsPlayerDataProvider;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    analyticsHandler?: IStreamAnalyticsHandler;
+    amplificationParameters?: StreamAmplificationParameters;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: 'light' | 'dark';
+    };
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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,25 +86,10 @@ 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;
     showStreamsCloudWatermark?: boolean;
     hideCloseButton?: boolean;
+    theme?: 'light' | 'dark';
 };

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 { MediaCenter } 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 StreamsPlayerView } from './streams-player-view.svelte';
+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(MediaCenter, {
-            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(StreamsPlayerView, {
-            target: shadowHost.shadowRoot,
-            props: {
-                dataProvider: { type: 'provider', provider: 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/stream-overview.svelte

@@ -95,5 +95,5 @@ let { buffer, activePageId, on } = $props();
   }
 }
 .stream-overview-pages__page--active {
-  outline: 2px solid var(--brand-color, #5a8dec);
+  outline: 2px solid var(--brand-color, var(--sc-mc-color--border-brand));
 }</style>

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-proxy.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import { Theme } from '../../core/theme';
+import {} from '../../ui/player/close-orchestrator';
+import { ShadowRoot } from '../../ui/shadow-dom';
+import { default as StreamsPlayerView } from './streams-player-view.svelte';
+import { untrack } from 'svelte';
+let { dataProvider, postSocialInteractionsHandler, amplificationParameters, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
+let backgroundImageUrl = $state(null);
+const handleBackgroundImagedLoaded = (url) => {
+    backgroundImageUrl = url;
+};
+$effect(() => {
+    void (playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.theme);
+    untrack(() => {
+        var _a;
+        Theme.set((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.theme) !== null && _a !== void 0 ? _a : 'dark');
+    });
+});
+</script>
+
+<ShadowRoot backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+  <StreamsPlayerView
+    dataProvider={{ type: 'provider', provider: dataProvider }}
+    postSocialInteractionsHandler={postSocialInteractionsHandler}
+    analyticsHandler={analyticsHandler}
+    amplificationParameters={amplificationParameters}
+    playerSettings={playerSettings}
+    closeOrchestrator={closeOrchestrator}
+    on={{
+      streamActivated: on?.streamActivated,
+      backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded
+    }} />
+</ShadowRoot>

package/dist/streams/streams-player/streams-player-proxy.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, StreamAmplificationParameters } from './types';
+type Props = {
+    dataProvider: IStreamsPlayerDataProvider;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    analyticsHandler?: IStreamAnalyticsHandler;
+    amplificationParameters?: StreamAmplificationParameters;
+    closeOrchestrator: ICloseOrchestrator;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: 'light' | 'dark';
+    };
+    on?: {
+        streamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+    };
+};
+declare const StreamsPlayerProxy: import("svelte").Component<Props, {}, "">;
+type StreamsPlayerProxy = ReturnType<typeof StreamsPlayerProxy>;
+export default StreamsPlayerProxy;

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;