@streamscloud/embeddable 5.1.3 → 6.0.1

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -8,66 +8,34 @@
     });
 };
 import { handleEsc } from '../../core/document.event-handlers';
-import { createLocalGQLClient } from '../../core/graphql';
-import { mapToShortVideoViewerModel, ShortVideoViewer } from '../short-video-viewer';
+import { ShortVideoViewer } from '../short-video-viewer';
+import { InternalShortVideoPlayerProvider } from './internal-short-video-player-provider';
 import { Loading } from '../../ui/loading';
 import { PlayerBuffer, PlayerSlider } from '../../ui/player';
 import { SpotlightLayout } from '../../ui/spotlight-layout';
 import { SwipeIndicator } from '../../ui/swipe-indicator';
 import { default as Controls } from './controls.svelte';
-import { GetShortVideosDocument } from './operations.generated';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
-import { onMount } from 'svelte';
-let { input, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on } = $props();
+import { onMount, untrack } from 'svelte';
+let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
 const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
 let everTouched = $state(false);
 let background = $state(null);
-let buffer = $state(input.type === 'provider' ? new PlayerBuffer(input.provider) : null);
-const initBuffer = (input) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b;
-    try {
-        const { graphqlOrigin, ids, initialId } = input;
-        const graphql = createLocalGQLClient(graphqlOrigin, { 'x-initiator': input.initiator || 'player/short-videos' });
-        const payload = yield graphql
-            .query(GetShortVideosDocument, {
-            input: {
-                filter: {
-                    ids
-                }
-            }
-        })
-            .toPromise();
-        const posts = ((_b = (_a = payload.data) === null || _a === void 0 ? void 0 : _a.shortVideos) === null || _b === void 0 ? void 0 : _b.items) || [];
-        const idOrder = new Map(ids.map((id, index) => [id, index]));
-        posts.sort((a, b) => {
-            var _a, _b;
-            return ((_a = idOrder.get(a.id)) !== null && _a !== void 0 ? _a : Infinity) - ((_b = idOrder.get(b.id)) !== null && _b !== void 0 ? _b : Infinity);
-        });
-        const index = initialId ? posts.findIndex((p) => p.id === initialId) : 0;
-        const provider = {
-            initialData: {
-                prefetchedItems: posts.map(mapToShortVideoViewerModel),
-                startIndex: index
-            },
-            loadMore: () => __awaiter(void 0, void 0, void 0, function* () {
-                // No more items to load, as all are already prefetched
-                return [];
-            })
-        };
-        buffer = new PlayerBuffer(provider);
-    }
-    catch (_c) {
-        console.error('Failed to load short videos by IDs:', input.ids);
-        buffer = null; // Reset buffer on error
-    }
+let buffer = $derived.by(() => {
+    void dataProvider;
+    return untrack(() => (dataProvider instanceof InternalShortVideoPlayerProvider ? null : new PlayerBuffer(dataProvider)));
 });
 const uiManager = new ShortVideosPlayerUiManager();
 onMount(() => {
-    if (input.type === 'ids') {
-        initBuffer(input);
+    if (dataProvider instanceof InternalShortVideoPlayerProvider) {
+        initBuffer(dataProvider);
     }
 });
+const initBuffer = (provider) => __awaiter(void 0, void 0, void 0, function* () {
+    yield provider.prefetch();
+    buffer = new PlayerBuffer(provider);
+});
 const onItemActivated = (id) => {
     var _a;
     const shortVideo = buffer === null || buffer === void 0 ? void 0 : buffer.loaded.find((x) => x.id === id);
@@ -96,9 +64,12 @@ const handleDimensionsChanged = (dimensions) => {
         viewTotalWidth: dimensions.totalWidth
     });
 };
+const onMediaCenterHeaderMounted = (data) => {
+    uiManager.updateMediaCenterHeaderHeight(data.height);
+};
 const onPlayerClose = () => {
     var _a;
-    (_a = on === null || on === void 0 ? void 0 : on.closePlayer) === null || _a === void 0 ? void 0 : _a.call(on);
+    (_a = on === null || on === void 0 ? void 0 : on.playerClosed) === null || _a === void 0 ? void 0 : _a.call(on);
 };
 </script>
 
@@ -107,7 +78,15 @@ const onPlayerClose = () => {
 <div
   class="short-videos-player-container"
   class:short-videos-player-container--background-enabled={!disableBackground}
+  class:short-videos-player-container--faded={fadeContent}
   style={background && !disableBackground ? `--background-image: url(${background})` : null}>
+  {#if categoriesSwitcher}
+    {@render categoriesSwitcher({
+      maxItemsWidth: Math.min(uiManager.mainViewColumnWidth * 1.4, uiManager.viewTotalWidth),
+      onMounted: onMediaCenterHeaderMounted
+    })}
+  {/if}
+
   <div class="short-videos-player" style={uiManager.globalCssVariables}>
     {#if showStreamsCloudWatermark}
       <div class="short-videos-player__watermark">
@@ -144,7 +123,8 @@ const onPlayerClose = () => {
         uiManager={uiManager}
         localization={localization}
         socialInteractionsHandler={socialInteractionsHandler}
-        on={{ closePlayer: on?.closePlayer }} />
+        playerLogo={playerLogo}
+        on={{ closePlayer: on?.playerClosed }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />
     {/if}
@@ -163,6 +143,7 @@ const onPlayerClose = () => {
   }
 }
 .short-videos-player-container {
+  --short-videos-player--elements-opacity: 1;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -179,11 +160,14 @@ const onPlayerClose = () => {
   background-size: cover;
   background-blend-mode: multiply;
 }
+.short-videos-player-container--faded {
+  --short-videos-player--elements-opacity: 0;
+}
 
 .short-videos-player {
   display: flex;
   flex: 1;
-  padding: 0.625rem 0;
+  padding: var(--short-videos-player--padding);
   backdrop-filter: blur(30px);
   position: relative;
   /* Set 'container-type: inline-size;' to reference container*/
@@ -197,15 +181,12 @@ const onPlayerClose = () => {
   position: absolute;
   bottom: 5rem;
   left: 5rem;
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }
 .short-videos-player__content {
   width: 100%;
   height: 100%;
-  --short-video-viewer--actions-panel--bottom: 5rem;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-videos-player__content {
-    --short-video-viewer--actions-panel--top: 5rem;
-  }
+  opacity: var(--short-videos-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
 }</style>

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte.d.ts

@@ -1,18 +1,15 @@
-import type { Locale } from '../../core/locale';
-import { type ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
-import { type IShortVideosPlayerLocalization } from './short-videos-player-localization';
-import type { PlayerInput } from './types';
-type Props = {
-    input: PlayerInput;
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    localization?: IShortVideosPlayerLocalization | Locale;
-    showStreamsCloudWatermark?: boolean;
-    disableBackground?: boolean;
-    on?: {
-        closePlayer?: () => void;
-        videoActivated?: (id: string) => void;
-    };
+import type { ShortVideoPlayerProps } from './types';
+import { type Snippet } from 'svelte';
+type $$ComponentProps = ShortVideoPlayerProps & {
+    categoriesSwitcher?: Snippet<[{
+        maxItemsWidth: number;
+        onMounted: (data: {
+            height: number;
+        }) => void;
+    }]>;
+    playerLogo?: string | null;
+    fadeContent?: boolean;
 };
-declare const ShortVideosPlayerView: import("svelte").Component<Props, {}, "">;
+declare const ShortVideosPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
 type ShortVideosPlayerView = ReturnType<typeof ShortVideosPlayerView>;
 export default ShortVideosPlayerView;

package/dist/short-videos/short-videos-player/types.d.ts

@@ -1,38 +1,17 @@
-import type { ShortVideoViewerModel, ShortVideoSocialInteractionsHandler } from '../short-video-viewer';
-import type { PlayerItemsProvider } from '../../ui/player';
+import type { Locale } from '../../core/locale';
+import type { ShortVideoViewerModel, IPostSocialInteractionsHandler } from '../short-video-viewer';
+import type { IPlayerItemsProvider } from '../../ui/player';
 import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
-export type PlayerInput = ProviderPlayerInput | IdsPlayerInput;
-export type ProviderPlayerInput = {
-    type: 'provider';
-    provider: PlayerItemsProvider<ShortVideoViewerModel>;
+export type ShortVideoPlayerProps = PlayerSettings & {
+    dataProvider: IPlayerItemsProvider<ShortVideoViewerModel>;
 };
-export type IdsPlayerInput = {
-    type: 'ids';
-    ids: string[];
-    initialId?: string;
-    graphqlOrigin?: string;
-    initiator?: string;
-};
-export type OpenShortVideosPlayerInit = ProviderInit | IdsInit;
-type ProviderInit = PlayerSettings & {
-    shortVideosProvider: PlayerItemsProvider<ShortVideoViewerModel>;
-};
-type IdsInit = PlayerSettings & {
-    ids: string[];
-    graphqlOrigin?: string;
-    initialId?: string;
-    initiator?: string;
-};
-type PlayerSettings = {
-    socialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+export type PlayerSettings = {
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     disableBackground?: boolean;
-    localization?: IShortVideosPlayerLocalization | 'en' | 'no';
+    localization?: IShortVideosPlayerLocalization | Locale;
     showStreamsCloudWatermark?: boolean;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;
     };
 };
-export declare const isShortVideosProviderInit: (init: unknown) => init is ProviderInit;
-export declare function isIdsInit(init: unknown): init is IdsInit;
-export {};

package/dist/short-videos/short-videos-player/types.js

@@ -1,6 +1 @@
-export const isShortVideosProviderInit = (init) => {
-    return typeof init === 'object' && init !== null && 'shortVideosProvider' in init;
-};
-export function isIdsInit(init) {
-    return typeof init === 'object' && init !== null && 'ids' in init && 'graphqlOrigin' in init;
-}
+export {};

package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts

@@ -4,14 +4,14 @@ export declare class ShortVideosPlayerUiManager {
     isMobileView: boolean;
     viewInitialized: boolean;
     showShortVideoOverlay: boolean;
-    private readonly buttonSize;
-    private readonly iconSize;
-    private readonly controlsOffsetHorizontal;
-    private readonly controlsOffsetVertical;
-    private viewTotalWidth;
-    private mainViewColumnWidth;
+    private _viewTotalWidth;
+    private _mainViewColumnWidth;
+    private _mediaCenterHeaderHeight;
+    get viewTotalWidth(): number;
+    get mainViewColumnWidth(): number;
     updateDimensions: (dimensions: {
         viewTotalWidth: number;
         mainViewColumnWidth: number;
     }) => void;
+    updateMediaCenterHeaderHeight: (height: number) => void;
 }

package/dist/short-videos/short-videos-player/ui-manager.svelte.js

@@ -1,26 +1,38 @@
+const CONTROLS_PADDING_HORIZONTAL = 28;
+const CONTROLS_PADDING_VERTICAL = 28;
+const PLAYER_PADDING_VERTICAL = 10;
+const BUTTON_SIZE = 48;
+const ICON_SIZE = 28;
 export class ShortVideosPlayerUiManager {
     showAttachments = $state(true);
     globalCssVariables = $derived.by(() => {
         const values = [
-            `--short-videos-player--button--size: ${this.buttonSize}px`,
-            `--short-videos-player--icon--size: ${this.iconSize}px`,
-            `--short-videos-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
-            `--short-videos-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
-            `--short-videos-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
+            `--short-videos-player--button--size: ${BUTTON_SIZE}px`,
+            `--short-videos-player--controls--available-space: ${(this._viewTotalWidth - this._mainViewColumnWidth) / 2}px`,
+            `--short-videos-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
+            `--short-videos-player--icon--size: ${ICON_SIZE}px`,
+            `--short-videos-player--media-center-header--height: ${this._mediaCenterHeaderHeight}px`,
+            `--short-videos-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
         ];
         return values.join(';');
     });
-    isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
-    viewInitialized = $derived.by(() => !!this.viewTotalWidth && !!this.mainViewColumnWidth);
-    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 85);
-    buttonSize = 48;
-    iconSize = 28;
-    controlsOffsetHorizontal = 28;
-    controlsOffsetVertical = 28;
-    viewTotalWidth = $state(0);
-    mainViewColumnWidth = $state(0);
+    isMobileView = $derived.by(() => this._viewTotalWidth <= 576);
+    viewInitialized = $derived.by(() => !!this._viewTotalWidth && !!this._mainViewColumnWidth);
+    showShortVideoOverlay = $derived.by(() => this.viewInitialized && (this._viewTotalWidth - this._mainViewColumnWidth) / 2 <= 85);
+    _viewTotalWidth = $state(0);
+    _mainViewColumnWidth = $state(0);
+    _mediaCenterHeaderHeight = $state(0);
+    get viewTotalWidth() {
+        return this._viewTotalWidth;
+    }
+    get mainViewColumnWidth() {
+        return this._mainViewColumnWidth;
+    }
     updateDimensions = (dimensions) => {
-        this.viewTotalWidth = dimensions.viewTotalWidth;
-        this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
+        this._viewTotalWidth = dimensions.viewTotalWidth;
+        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
+    };
+    updateMediaCenterHeaderHeight = (height) => {
+        this._mediaCenterHeaderHeight = height;
     };
 }

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -5,4 +5,9 @@ let { data, localization: localizationInit, on } = $props();
 const localization = $derived(new ShortVideoStreamElementLocalization(localizationInit));
 </script>
 
-<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} localization={localization.shortVideoViewerLocalization} on={on} />
+<ShortVideoViewer
+  model={mapToShortVideoViewerModel(data)}
+  autoplay={false}
+  showControls={false}
+  localization={localization.shortVideoViewerLocalization}
+  on={on} />

package/dist/streams/stream-page-viewer/index.d.ts

@@ -1,3 +1,4 @@
 export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
 export type { StreamPageViewerModel } from './types';
 export type { IStreamPageViewerLocalization } from './stream-page-viewer-localization';
+export { mapToStreamPageViewerModel } from './mapper';

package/dist/streams/stream-page-viewer/index.js

@@ -1 +1,2 @@
 export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
+export { mapToStreamPageViewerModel } from './mapper';

package/dist/streams/stream-player/controls.svelte

@@ -9,7 +9,7 @@ import { StreamPlayerLocalization } from './stream-player-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { buffer, uiManager, shortVideoSocialInteractionsHandler, localization, on } = $props();
+let { buffer, uiManager, postSocialInteractionsHandler, localization, on } = $props();
 const shortVideo = $derived(((_a = buffer.current) === null || _a === void 0 ? void 0 : _a.type) === 'short-video' && ((_b = buffer.current) === null || _b === void 0 ? void 0 : _b.shortVideo) ? mapToShortVideoViewerModel(buffer.current.shortVideo) : null);
 const singleWebViewPage = $derived.by(() => {
     var _a;
@@ -58,7 +58,7 @@ const changeShowShortVideoAttachments = () => {
           {/if}
           <ShortVideoControls
             model={shortVideo}
-            socialInteractionsHandler={shortVideoSocialInteractionsHandler}
+            socialInteractionsHandler={postSocialInteractionsHandler}
             on={{ attachmentsClicked: changeShowShortVideoAttachments }} />
         </div>
       {/if}

package/dist/streams/stream-player/controls.svelte.d.ts

@@ -1,11 +1,11 @@
-import { type ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import { type IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import type { StreamPlayerUiManager } from './ui-manager.svelte';
 type Props = {
     buffer: StreamPlayerBuffer;
     uiManager: StreamPlayerUiManager;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     localization: StreamPlayerLocalization;
     on: {
         closePlayer: () => void;

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

@@ -1,41 +1,98 @@
-import type { ShortVideoSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import { type IMediaCenterDataProvider } from '../../media-center/data-provider';
+import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import type { IStreamPlayerLocalization } from './stream-player-localization';
-export type { IStreamPlayerLocalization };
+import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, PlayerSettings, StreamPlayerModel } from './types';
+export type { IStreamPlayerLocalization, IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterDataProvider, StreamPlayerModel, StreamPageViewerModel };
 /**
- * Opens the stream player modal with the specified stream details.
+ * Opens the stream player modal.
  *
- * @param init - Configuration options.
- * @param {string} init.streamId - The ID of the stream to open.
- * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
- * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- * @param init.on - Available callbacks.
+ * Two overloads (mutually exclusive; enforced by TypeScript):
+ * - Provider mode: openStreamPlayer({ dataProvider, mediaCenterDataProvider?, analyticsHandler?, ...common })
+ * - Internal provider mode: openStreamPlayer({ initiator, graphqlOrigin?, mediaPageId?, ...common })
  *
- * @example
+ * @param init Configuration options.
+ *
+ * Common (required)
+ * @param {string} init.streamId
+ *   The ID of the stream to open.
+ *
+ * Provider mode (overload 1)
+ * @param {IStreamPlayerDataProvider} init.dataProvider
+ *   Provider that supplies the stream data to the player.
+ * @param {IMediaCenterDataProvider} [init.mediaCenterDataProvider]
+ *   Optional media-center data provider.
+ * @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.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.mediaPageId]
+ *   Optional media page ID used to construct an internal media-center data provider.
+ *
+ * Common (optional)
+ * @param {IStreamPlayerLocalization | Locale} [init.localization]
+ *   Localization for the player UI. If omitted, 'en' is used.
+ * @param {boolean} [init.showStreamsCloudWatermark]
+ *   If true, shows the StreamsCloud watermark.
+ * @param {IPostSocialInteractionsHandler} [init.postSocialInteractionsHandler]
+ *   Handler for social interactions (like, share, etc.).
+ *
+ * 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 <caption>Provider mode</caption>
+ * ```ts
+ * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
+ *
+ * openStreamPlayer({
+ *   streamId: 'stream_123',
+ *   dataProvider: myStreamProvider,
+ *   mediaCenterDataProvider: myMediaCenterProvider,
+ *   analyticsHandler: myAnalyticsHandler,
+ *   localization: { play: 'Play', pause: 'Pause' },
+ *   showStreamsCloudWatermark: true,
+ *   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';
  *
  * openStreamPlayer({
- *   streamId: '...',
+ *   streamId: 'stream_123',
+ *   initiator: 'marketing-campaign',
  *   graphqlOrigin: 'https://api.example.com',
- *   localization: {
- *     play: 'Play',
- *     pause: 'Pause'
+ *   mediaPageId: 'media-page-123',
+ *   localization: { play: 'Play', pause: 'Pause' },
+ *   on: {
+ *     streamActivated: ({ title, image }) => console.log('Stream active:', title, image),
+ *     playerClosed: () => console.log('Player closed')
  *   }
  * });
  * ```
  */
-export declare const openStreamPlayer: (init: {
-    streamId: string;
+export declare function openStreamPlayer(init: PlayerSettings & {
+    dataProvider: IStreamPlayerDataProvider;
+    mediaCenterDataProvider?: IMediaCenterDataProvider;
+    analyticsHandler?: IStreamAnalyticsHandler;
+}): void;
+export declare function openStreamPlayer(init: PlayerSettings & {
+    initiator: string;
     graphqlOrigin?: string;
-    localization?: IStreamPlayerLocalization | "en" | "no";
-    showStreamsCloudWatermark?: boolean;
-    shortVideoSocialInteractionsHandler?: ShortVideoSocialInteractionsHandler;
-    initiator?: string;
-    on?: {
-        streamActivated?: (data: {
-            title: string;
-            image: string | null;
-        }) => void;
-        playerClosed?: () => void;
-    };
-}) => void;
+    mediaPageId?: string;
+}): void;

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

@@ -1,59 +1,57 @@
-import { getLocale } from '../../core/locale';
+import { toastrWarning } from '../../core/toastr';
+import { InternalMediaCenterDataProvider } from '../../media-center/data-provider';
+import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
-import { default as StreamPlayer } from './cmp.stream-player.svelte';
-import { AppEventsTracker } from '@streamscloud/streams-analytics-collector';
+import { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';
+import { InternalStreamPlayerDataProvider } from './internal-stream-player-data-provider';
 import { mount, unmount } from 'svelte';
-/**
- * Opens the stream player modal with the specified stream details.
- *
- * @param init - Configuration options.
- * @param {string} init.streamId - The ID of the stream to open.
- * @param {string} init.graphqlUrl - The URL of the GraphQL endpoint.
- * @param {IStreamPlayerLocalization} [init.localization] - Optional localization settings for the player UI.
- * @param init.on - Available callbacks.
- *
- * @example
- * ```ts
- * import { openStreamPlayer } from '@streamscloud/embeddable/stream-player';
- *
- * openStreamPlayer({
- *   streamId: '...',
- *   graphqlOrigin: 'https://api.example.com',
- *   localization: {
- *     play: 'Play',
- *     pause: 'Pause'
- *   }
- * });
- * ```
- */
-export const openStreamPlayer = (init) => {
-    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, shortVideoSocialInteractionsHandler, initiator } = init;
+export function openStreamPlayer(init) {
+    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, postSocialInteractionsHandler, initiator } = init;
+    const dataProvider = init.dataProvider ?? new InternalStreamPlayerDataProvider({ graphqlOrigin, initiator });
+    if (!dataProvider) {
+        toastrWarning('Data provider is not specified.');
+        return;
+    }
+    let mediaCenterDataProvider = init.mediaCenterDataProvider;
+    if (!mediaCenterDataProvider && init.mediaPageId) {
+        mediaCenterDataProvider = new InternalMediaCenterDataProvider(init.mediaPageId, graphqlOrigin);
+    }
+    let analyticsHandler = init.analyticsHandler;
+    if (!analyticsHandler && !init.dataProvider) {
+        // Only create internal analytics handler if using internal data provider
+        analyticsHandler = new InternalStreamAnalyticsHandler(graphqlOrigin);
+    }
     const shadowHost = new ModalShadowHost();
-    const mounted = mount(StreamPlayer, {
+    const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
-            streamId,
-            graphqlOrigin,
-            localization: getLocale(localization),
-            showStreamsCloudWatermark,
-            shortVideoSocialInteractionsHandler,
-            initiator,
-            on: {
-                streamActivated: (data) => {
-                    AppEventsTracker.setOrganizationId(data.ownerId);
-                    if (init.on?.streamActivated) {
-                        init.on.streamActivated({ title: data.title, image: data.image });
+            dataProvider: mediaCenterDataProvider || null,
+            playerProps: {
+                type: MediaCenterMode.Stream,
+                props: {
+                    streamId,
+                    dataProvider,
+                    analyticsHandler,
+                    localization,
+                    showStreamsCloudWatermark,
+                    postSocialInteractionsHandler,
+                    on: {
+                        streamActivated: (data) => {
+                            if (init.on?.streamActivated) {
+                                init.on.streamActivated({ title: data.title, image: data.image });
+                            }
+                        },
+                        playerClosed: async () => {
+                            await unmount(mounted);
+                            shadowHost.remove();
+                            if (init.on?.playerClosed) {
+                                init.on.playerClosed();
+                            }
+                        }
                     }
-                },
-                closePlayer: async () => {
-                    if (init.on?.playerClosed) {
-                        init.on.playerClosed();
-                    }
-                    await unmount(mounted);
-                    shadowHost.remove();
                 }
             }
         }
     });
     shadowHost.attachToBody();
-};
+}

package/dist/streams/stream-player/internal-stream-analytics-handler.d.ts

@@ -0,0 +1,12 @@
+import type { IStreamAnalyticsHandler } from './types';
+export declare class InternalStreamAnalyticsHandler implements IStreamAnalyticsHandler {
+    constructor(graphqlOrigin: string | undefined);
+    setOrganizationId: (organizationId: string) => void;
+    trackStreamView: (streamId: string) => void;
+    trackStreamPageView: (pageId: string, streamId: string) => void;
+    trackStreamProductClicked: (productId: string, streamId: string) => void;
+    trackStreamEngagementTime: (streamId: string, engagementTime: number) => void;
+    trackStreamScrollDepth: (streamId: string, scrollDepth: number) => void;
+    reportPageVideoViews: (videoId: string, streamId: string) => void;
+    trackShortVideoProgress: (pageId: string, videoId: string, progress: number, streamId: string) => void;
+}