@streamscloud/embeddable 11.0.0 → 12.0.0

package/dist/media-center/media-center/moments/cmp.moments-circle.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">import { ImageRound } from '../../../ui/image';
+let { context } = $props();
+const styles = $derived.by(() => {
+    var _a;
+    const values = [];
+    if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.brand) {
+        values.push(`--moments-circle--brand-color: ${context.playerColors.brand}`);
+    }
+    return values.join(';');
+});
+</script>
+
+<div class="moments-circle" style={styles}>
+  {#if context.targetData}
+    <ImageRound src={context.targetData.image} />
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.moments-circle {
+  --_moments-circle--brand-color: var(--moments-circle--brand-color, #00b8d8);
+  width: 6.25%rem;
+  min-width: 6.25%rem;
+  max-width: 6.25%rem;
+  height: 6.25%rem;
+  min-height: 6.25%rem;
+  max-height: 6.25%rem;
+  --image--rounded--inner--border-width: 1px;
+  --image--rounded--outer--border-color: var(--_moments-circle--brand-color);
+  --image--rounded--outer--border-width: 2px;
+}</style>

package/dist/media-center/media-center/moments/cmp.moments-circle.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MediaCenterContext } from '../media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as MomentsCircle } from './cmp.moments-circle.svelte';

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

@@ -0,0 +1 @@
+export { default as MomentsCircle } from './cmp.moments-circle.svelte';

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel-handler.svelte.d.ts

@@ -8,7 +8,7 @@ export declare class StreamsInCategoryPanelHandler {
     private _categoryId;
     private _categoryName;
     private _streams;
-    constructor(config: IMediaCenterConfig | null);
+    constructor(config: IMediaCenterConfig);
     get streamSectionItems(): StreamPlayerModel[];
     get categoryId(): string;
     get categoryName(): string;

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel-handler.svelte.js

@@ -27,7 +27,7 @@ export class StreamsInCategoryPanelHandler {
         return this._activated && this._state === 'loading';
     }
     activate = async (categoryData) => {
-        if (!this.config || !categoryData) {
+        if (!categoryData || this.categoryId === categoryData.id) {
             return;
         }
         this._activated = true;

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

@@ -1,7 +1,50 @@
-export type MediaCenterMode = 'streams-feed' | 'posts-feed' | 'discover';
+import type { Locale } from '../../core/locale';
+import type { IMediaCenterConfig } from '../config/types';
+import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
+import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
+export type MediaCenterMode = 'feed' | 'discover';
 export type MediaCenterCategoryData = {
     id: string;
     name: string;
     parentId: string | undefined;
     parentName: string | undefined;
 };
+export type MediaCenterProps = {
+    config: IMediaCenterConfig;
+    settings?: MediaCenterSettings;
+    modeProps: MediaCenterModeProps;
+    closeOrchestrator: ICloseOrchestrator;
+};
+export type MediaCenterModeProps = {
+    mode: 'posts';
+    props: {
+        dataProvider: IPlayerDataProvider<PostPlayerModel>;
+        onPostActivated?: (id: string) => void;
+    };
+} | {
+    mode: 'streams';
+    props: {
+        dataProvider: IStreamsPlayerDataProvider;
+        amplificationParameters?: StreamAmplificationParameters;
+        onStreamActivated?: (data: {
+            title: string;
+            image: string | null;
+        }) => void;
+    };
+} | {
+    mode: 'discover';
+};
+export type PlayerProps = {
+    type: 'posts';
+    props: PostsPlayerProps;
+} | {
+    type: 'streams';
+    props: StreamsPlayerProps;
+};
+export type MediaCenterSettings = {
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    disableBackground?: boolean;
+};

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

@@ -0,0 +1,121 @@
+import type { Locale } from '../core/locale';
+import { type IMediaCenterConfig } from '../media-center/config/types';
+export type { IMediaCenterConfig };
+export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+/**
+ * Opens the media page modal.
+ *
+ * Two overloads (mutually exclusive; enforced by TypeScript):
+ * - Config mode: openMediaPageModal({ mediaCenterConfig, viewerSettings?, on? })
+ * - Internal config mode: openMediaPageModal({ id, initiator, graphqlOrigin?, viewerSettings?, on? })
+ *
+ * @param init Configuration options.
+ *
+ * Config mode (overload 1)
+ * @param {IMediaCenterConfig} init.mediaCenterConfig
+ *   Configuration for the media center.
+ *
+ * Internal config mode (overload 2)
+ * @param {string} init.id
+ *   Media page ID, used to construct an internal media-center config.
+ * @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.
+ *
+ * Common (optional)
+ * @param {MediaPageViewerSettings} [init.viewerSettings]
+ *   Viewer UI and behavior settings.
+ *
+ *   Fields of MediaPageViewerSettings:
+ *   - {boolean} [disableBackground]
+ *       If true , hides the viewer background image.
+ *   - {Locale} [locale='en']
+ *       Localization for the viewer UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *
+ * Events
+ * @param {{ closed?: () => void }} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.closed]
+ *   Called after the modal is fully closed (after unmount and removal from the DOM).
+ *
+ * Notes
+ * - If neither mediaCenterConfig nor id is specified, a warning is shown and the modal is not opened.
+ *
+ * @returns {void}
+ *
+ * @example <caption>Config mode</caption>
+ * ```ts
+ * import {
+ *   openMediaPageModal,
+ *   type IMediaCenterConfig,
+ * } from '@streamscloud/embeddable/media-page';
+ *
+ * const mediaCenterConfig: IMediaCenterConfig = {
+ *   // ...your media center configuration
+ * };
+ *
+ * openMediaPageModal({
+ *   mediaCenterConfig,
+ *   viewerSettings: {
+ *     // Locale defaults to 'en'; set 'no' to switch to Norwegian:
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ *
+
+
+ * @example <caption>Internal config mode</caption>
+ * ```ts
+ * import { openMediaPageModal } from '@streamscloud/embeddable/media-page';
+ *
+ * openMediaPageModal({
+ *   id: 'media-page-123',
+ *   initiator: 'marketing-campaign',
+ *   graphqlOrigin: 'https://api.example.com',
+ *   viewerSettings: {
+ *     locale: 'en',
+ *     disableBackground: true,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: false,
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ */
+export declare function openMediaPageModal(init: {
+    mediaCenterConfig: IMediaCenterConfig;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+    };
+}): void;
+export declare function openMediaPageModal(init: {
+    id: string;
+    initiator: string;
+    graphqlOrigin?: string;
+    viewerSettings?: MediaPageViewerSettings;
+    on?: {
+        closed?: () => void;
+    };
+}): void;
+export type MediaPageViewerSettings = {
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    hideCloseButton?: boolean;
+};

package/dist/media-page/index.js

@@ -0,0 +1,43 @@
+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 { mount, unmount } from 'svelte';
+export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
+export function openMediaPageModal(init) {
+    const { id, graphqlOrigin, initiator, viewerSettings, on } = init;
+    let mediaCenterConfig = init.mediaCenterConfig;
+    if (!mediaCenterConfig && id) {
+        mediaCenterConfig = new InternalMediaCenterConfig({ mediaPageId: id, graphqlOrigin, initiator });
+    }
+    if (!mediaCenterConfig) {
+        toastrWarning('Config is not specified.');
+        return;
+    }
+    const shadowHost = new ModalShadowHost();
+    let mounted = null;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.closed) {
+                on.closed();
+            }
+        },
+        canClose: !viewerSettings?.hideCloseButton
+    });
+    mounted = mount(MediaCenter, {
+        target: shadowHost.shadowRoot,
+        props: {
+            config: mediaCenterConfig,
+            settings: viewerSettings,
+            modeProps: {
+                mode: 'discover'
+            },
+            closeOrchestrator: makeCloseOrchestrator()
+        }
+    });
+    shadowHost.attachToBody();
+}

package/dist/posts/attachments/cmp.attachments.svelte

@@ -22,6 +22,7 @@ const trackingParams = $derived.by(() => {
           ad={ad}
           colors={colors}
           trackingParams={trackingParams}
+          locale={locale}
           on={{
             click: on?.adClick,
             impression: on?.adImpression

package/dist/posts/controls/cmp.controls.svelte

@@ -9,13 +9,13 @@
 };
 import { IconColor } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
-import { PlayerButton, PlayerButtonsGroup } from '../../ui/player/button';
-import IconHeartFilled from '@fluentui/svg-icons/icons/heart_20_filled.svg?raw';
-import IconHeart from '@fluentui/svg-icons/icons/heart_28_regular.svg?raw';
-import IconShare from '@fluentui/svg-icons/icons/share_28_regular.svg?raw';
-import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_28_regular.svg?raw';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_28_regular.svg?raw';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_28_regular.svg?raw';
+import { MobilePlayerButtonsGroup, PlayerButton, PlayerButtonsGroup } from '../../ui/player/button';
+import IconHeartFilled from '@fluentui/svg-icons/icons/heart_32_filled.svg?raw';
+import IconHeart from '@fluentui/svg-icons/icons/heart_32_regular.svg?raw';
+import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
+import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_32_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_32_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_32_regular.svg?raw';
 let { model, activeColor, inactiveColor, socialInteractionsHandler, on } = $props();
 const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
 let isLikedStore = $state.raw({
@@ -71,10 +71,47 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
 });
 </script>
 
-{#if actions.length > 0}
-  {#if actions.length === 1}
-    <PlayerButton scaleEffect={true} activeColor={activeColor} inactiveColor={inactiveColor} icon={actions[0].icon} on={{ click: actions[0].callback }} />
-  {:else}
-    <PlayerButtonsGroup scaleEffect={true} borderColor={activeColor} backgroundColor={inactiveColor} actions={actions} />
+<div class="desktop-controls">
+  {#if actions.length > 0}
+    {#if actions.length === 1}
+      <PlayerButton scaleEffect={true} activeColor={activeColor} inactiveColor={inactiveColor} icon={actions[0].icon} on={{ click: actions[0].callback }} />
+    {:else}
+      <PlayerButtonsGroup scaleEffect={true} activeColor={activeColor} backgroundColor={inactiveColor} actions={actions} />
+    {/if}
   {/if}
-{/if}
+</div>
+
+<div class="mobile-controls">
+  <MobilePlayerButtonsGroup actions={actions} />
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.desktop-controls {
+  display: block;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .desktop-controls {
+    display: none;
+  }
+}
+
+.mobile-controls {
+  display: none;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .mobile-controls {
+    display: block;
+  }
+}</style>

package/dist/posts/data-loaders/operations.generated.d.ts

@@ -10,6 +10,8 @@ export type GetPostsQuery = {
         items: Array<{
             id: string;
             enableSocialInteractions: boolean;
+            viewsCount: number;
+            displayDate: any;
             ownerProfile: {
                 id: string;
                 type: SchemaTypes.ProfileType;
@@ -89,6 +91,8 @@ export type GetPostsQuery = {
 export type PostsPlayerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
+    viewsCount: number;
+    displayDate: any;
     ownerProfile: {
         id: string;
         type: SchemaTypes.ProfileType;

package/dist/posts/data-loaders/operations.generated.js

@@ -221,7 +221,9 @@ export const PostsPlayerPayloadFragmentDoc = {
                                 }
                             ]
                         }
-                    }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'viewsCount' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'displayDate' } }
                 ]
             }
         }
@@ -468,7 +470,9 @@ export const GetPostsDocument = {
                                 }
                             ]
                         }
-                    }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'viewsCount' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'displayDate' } }
                 ]
             }
         },

package/dist/posts/model/types.d.ts

@@ -7,6 +7,8 @@ export type IPostModel = {
     kicker: string | null;
     title: string | null;
     text: string | null;
+    viewsCount: number;
+    displayDate: string;
     readMoreUrl?: string;
     heading: IPostHeadingModel | null;
     enableSocialInteractions: boolean;

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -57,25 +57,27 @@ const variables = $derived.by(() => {
 
 <div class="post-viewer" style={variables} use:viewerMounted>
   <PostMedia id={model.id} media={model.media} locale={locale} autoplay={autoplay} on={{ videoProgress: on?.progress }} />
-  <div class="post-viewer__information">
-    {#if model.heading}
-      <Heading model={model.heading} uiManager={uiManager} localization={localization} />
-    {/if}
-    <Texts model={model.texts} uiManager={uiManager} localization={localization} />
+  {#if (uiManager.showAttachments && model.attachments) || model.heading || model.texts.kicker || model.texts.title || model.texts.text || model.texts.readMoreUrl}
+    <div class="post-viewer__information">
+      {#if model.heading}
+        <Heading model={model.heading} uiManager={uiManager} localization={localization} />
+      {/if}
+      <Texts model={model.texts} uiManager={uiManager} localization={localization} />
 
-    {#if uiManager.showAttachments && model.attachments}
-      <AttachmentsHorizontal
-        model={model}
-        trackingParams={trackingParams}
-        uiManager={uiManager}
-        on={{
-          productClick: on?.productClick,
-          productImpression: on?.productImpression,
-          adClick: on?.adClick,
-          adImpression: on?.adImpression
-        }} />
-    {/if}
-  </div>
+      {#if uiManager.showAttachments && model.attachments}
+        <AttachmentsHorizontal
+          model={model}
+          trackingParams={trackingParams}
+          uiManager={uiManager}
+          on={{
+            productClick: on?.productClick,
+            productImpression: on?.productImpression,
+            adClick: on?.adClick,
+            adImpression: on?.adImpression
+          }} />
+      {/if}
+    </div>
+  {/if}
 
   {#if uiManager.showControls}
     <div class="post-viewer__controls-panel" use:trackControlsPanelSize>
@@ -129,6 +131,12 @@ const variables = $derived.by(() => {
   justify-content: flex-end;
   align-items: flex-end;
   padding: 0 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .post-viewer__controls-panel {
+    padding-right: 0;
+  }
 }
 .post-viewer__information {
   pointer-events: none;

package/dist/posts/post-viewer/mapper.js

@@ -11,6 +11,8 @@ export const mapToPostModel = (payload) => {
         title: extractPostTitle(payload.postData),
         text: extractPostText(payload.postData),
         enableSocialInteractions: payload.enableSocialInteractions,
+        viewsCount: payload.viewsCount,
+        displayDate: payload.displayDate,
         heading: null,
         ads: payload.ad ? [mapToPostViewerAdCardModel(payload.ad)] : [],
         products: payload.allProducts.map((x) => mapToPostViewerProductCard(x))

package/dist/posts/post-viewer/operations.generated.d.ts

@@ -3,6 +3,8 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 export type PostViewerPayloadFragment = {
     id: string;
     enableSocialInteractions: boolean;
+    viewsCount: number;
+    displayDate: any;
     allProducts: Array<{
         id: string;
         title: string;

package/dist/posts/post-viewer/operations.generated.js

@@ -199,7 +199,9 @@ export const PostViewerPayloadFragmentDoc = {
                                 }
                             ]
                         }
-                    }
+                    },
+                    { kind: 'Field', name: { kind: 'Name', value: 'viewsCount' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'displayDate' } }
                 ]
             }
         }

package/dist/posts/post-viewer/operations.graphql

@@ -70,4 +70,6 @@ fragment PostViewerPayloadFragment on Post {
       text
     }
   }
+  viewsCount
+  displayDate
 }

package/dist/posts/post-viewer/post-texts.svelte

@@ -13,17 +13,17 @@ const variables = $derived.by(() => {
 <div class="post-viewer-texts" style={variables}>
   {#if model.kicker}
     <div class="post-viewer-texts__kicker">
-      <LineClamp value={model.kicker} maxLines={1} enableShowMore={false} />
+      <LineClamp maxLines={1} enableShowMore={false} locale={localization.locale}>{model.kicker}</LineClamp>
     </div>
   {/if}
   {#if model.title}
     <div class="post-viewer-texts__title">
-      <LineClamp value={model.title} maxLines={2} enableShowMore={false} />
+      <LineClamp maxLines={2} enableShowMore={false} locale={localization.locale}>{model.title}</LineClamp>
     </div>
   {/if}
   {#if model.text}
     <div class="post-viewer-texts__text">
-      <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
+      <LineClamp maxLines={2} enableShowMore={true} locale={localization.locale}>{model.text}</LineClamp>
     </div>
   {/if}
   {#if model.readMoreUrl}

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

@@ -1,16 +1,32 @@
-<script lang="ts">import { createShadowRoot } from '../../ui/shadow-dom';
-import { default as PostsPlayerView } from './posts-player-view.svelte';
+<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 PostsPlayerProxy } from './posts-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
 let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
-    const mounted = mount(PostsPlayerView, {
+    const mounted = mount(PostsPlayerProxy, {
         target: shadowRoot,
         props: {
             dataProvider,
             socialInteractionsHandler,
             playerSettings,
             analyticsHandler,
+            closeOrchestrator: new CloseOrchestrator({
+                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield unmount(mounted);
+                }),
+                canClose: false
+            }),
             on
         }
     });
@@ -22,6 +38,4 @@ const initHost = (node) => {
 };
 </script>
 
-{#key dataProvider}
-  <div class="posts-player-host" use:initHost></div>
-{/key}
+<div class="posts-player-host" use:initHost></div>

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

@@ -1,4 +1,20 @@
-import type { PostPlayerProps } from './types';
-declare const Cmp: import("svelte").Component<PostPlayerProps, {}, "">;
+import type { Locale } from '../../core/locale';
+import type { IPostSocialInteractionsHandler } from '..';
+import type { IPlayerDataProvider } from '../../ui/player/providers';
+import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
+type Props = {
+    dataProvider: IPlayerDataProvider<PostPlayerModel>;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    analyticsHandler?: IPostAnalyticsHandler;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+    };
+    on?: {
+        postActivated?: (id: string) => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -1,7 +1,8 @@
+import type { Locale } from '../../core/locale';
 import { type IMediaCenterConfig } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
-import type { IPostAnalyticsHandler, PostPlayerModel, PostPlayerSettings } from './types';
+import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
 export { PostsPlayer, type PostPlayerModel };
 export type { IMediaCenterConfig, IPostAnalyticsHandler };
 export { mapToPostPlayerModel } from '../data-loaders/mapper';
@@ -74,10 +75,18 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  */
 export declare function openPostsPlayer(init: {
     postsProvider: IPostsPlayerDataProvider;
-    mediaCenterConfig?: IMediaCenterConfig;
+    mediaCenterConfig: IMediaCenterConfig;
+    playerSettings?: PostsPlayerSettings;
+    on?: {
+        playerClosed?: () => void;
+        postActivated?: (id: string) => void;
+    };
+}): void;
+export declare function openPostsPlayer(init: {
+    postsProvider: IPostsPlayerDataProvider;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    playerSettings?: PostPlayerSettings;
+    playerSettings?: PostsPlayerSettings;
     on?: {
         playerClosed?: () => void;
         postActivated?: (id: string) => void;
@@ -106,3 +115,9 @@ export type IPostsPlayerDataProvider<TChunk extends WithId = WithId> = {
 type WithId = {
     id: string;
 };
+export type PostsPlayerSettings = {
+    disableBackground?: boolean;
+    locale?: Locale;
+    showStreamsCloudWatermark?: boolean;
+    hideCloseButton?: boolean;
+};