@streamscloud/embeddable 12.1.0 → 13.0.0

package/dist/media-page/index.js

@@ -1,21 +1,72 @@
-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 { MediaCenterProxy, MediaCenterSettings } 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 { default as MediaPage } from './cmp.media-page.svelte';
+/**
+ * Opens the media page modal.
+ *
+ * @param init Configuration options.
+ *
+ * Config mode
+ * @param {IMediaCenterDataProvider} init.dataProvider
+ *   Configuration for the media center.
+ *
+ * Common (optional)
+ * @param {Object} [init.viewerSettings]
+ *   Viewer UI and behavior settings.
+ *
+ *   Fields of `viewerSettings`:
+ *   - {boolean} [viewerSettings.disableBackground]
+ *       If true, hides the viewer background image.
+ *   - {Locale} [viewerSettings.locale]
+ *       Localization for the viewer UI. Supported values: 'en' | 'no'.
+ *       If omitted, the default locale 'en' is used.
+ *   - {boolean} [viewerSettings.showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {boolean} [viewerSettings.hideCloseButton]
+ *       If true, hides the close button.
+ *   - {'light' | 'dark'} [viewerSettings.theme]
+ *       Optional theme for the viewer UI.
+ *
+ * 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).
+ *
+ * @returns {void}
+ *
+ * @example <caption>Config mode</caption>
+ * ```ts
+ * import {
+ *   openMediaPageModal,
+ *   type IMediaCenterDataProvider
+ * } from '@streamscloud/embeddable/media-page';
+ *
+ * const dataProvider: IMediaDataProvider= {
+ *   // ...your media center configuration
+ * };
+ *
+ * openMediaPageModal({
+ *   dataProvider,
+ *   viewerSettings: {
+ *     // Example: switch to Norwegian (if supported by your Locale type)
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
+ *   },
+ *   on: {
+ *     closed: () => console.log('Media page modal closed'),
+ *   },
+ * });
+ * ```
+ */
 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 { dataProvider, viewerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
     let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
@@ -28,13 +79,76 @@ export function openMediaPageModal(init) {
         },
         canClose: !viewerSettings?.hideCloseButton
     });
-    mounted = mount(MediaCenter, {
+    mounted = mount(MediaCenterProxy, {
         target: shadowHost.shadowRoot,
         props: {
-            config: mediaCenterConfig,
-            settings: viewerSettings,
+            dataProvider,
+            settings: new MediaCenterSettings(viewerSettings),
             modeProps: {
-                mode: 'discover'
+                mode: 'default'
+            },
+            closeOrchestrator: makeCloseOrchestrator()
+        }
+    });
+    shadowHost.attachToBody();
+}
+export function openMediaPageModalWithInitialPostsProvider(init) {
+    const { dataProvider, mediaCenterDataProvider, viewerSettings, on } = init;
+    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(MediaCenterProxy, {
+        target: shadowHost.shadowRoot,
+        props: {
+            dataProvider: mediaCenterDataProvider,
+            settings: new MediaCenterSettings(viewerSettings),
+            modeProps: {
+                mode: 'posts',
+                props: {
+                    dataProvider,
+                    onPostActivated: on?.postActivated
+                }
+            },
+            closeOrchestrator: makeCloseOrchestrator()
+        }
+    });
+    shadowHost.attachToBody();
+}
+export function openMediaPageModalWithInitialStreamsProvider(init) {
+    const { dataProvider, amplificationParameters, mediaCenterDataProvider, viewerSettings, on } = init;
+    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(MediaCenterProxy, {
+        target: shadowHost.shadowRoot,
+        props: {
+            dataProvider: mediaCenterDataProvider,
+            settings: new MediaCenterSettings(viewerSettings),
+            modeProps: {
+                mode: 'streams',
+                props: {
+                    dataProvider,
+                    amplificationParameters,
+                    onStreamActivated: on?.streamActivated
+                }
             },
             closeOrchestrator: makeCloseOrchestrator()
         }

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

@@ -15,7 +15,7 @@ const trackingParams = $derived.by(() => {
 </script>
 
 {#if model.attachments}
-  <div class="post-attachments" data-theme="dark">
+  <div class="post-attachments">
     {#if model.attachments.ads.length}
       {#each model.attachments.ads as ad (ad.id)}
         <AdCard

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

@@ -16,7 +16,7 @@ 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();
+let { model, activeColor, inactiveColor, socialInteractionsHandler, extraActions, on } = $props();
 const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
 let isLikedStore = $state.raw({
     get isLiked() {
@@ -39,6 +39,9 @@ const actions = $derived.by(() => {
     if (model.media && !model.media.currentItem.isImage) {
         result.push({ icon: MediaVolumeManager.isMuted ? IconSpeakerMute : IconSpeaker2, callback: onMuteClicked });
     }
+    if (extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) {
+        result.push(...extraActions);
+    }
     return result;
 });
 $effect(() => {

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

@@ -1,10 +1,12 @@
 import type { PostModel } from '../model';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
+import { type PlayerButtonDef } from '../../ui/player/button';
 type Props = {
     model: PostModel;
     activeColor: string | null;
     inactiveColor: string | null;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    extraActions?: PlayerButtonDef[];
     on?: {
         attachmentsClicked?: () => void;
     };

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -192,19 +192,14 @@ const variables = $derived.by(() => {
   align-items: center;
   width: 15.625rem;
   padding: 0.375rem;
-  background-color: rgba(255, 255, 255, 0.9);
-  color: #000000;
-  border: 0.0625rem solid #f2f2f3;
+  background-color: rgb(from var(--sc-mc-color--bg-card) r g b/90%);
+  color: var(--sc-mc-color--text-primary);
+  border: 0.0625rem solid var(--sc-mc-color--border-card);
   border-radius: 0.25rem;
 }
 .attachments-card--single {
   width: 100%;
 }
-:global([data-theme="dark"]) .attachments-card {
-  background-color: rgba(18, 18, 18, 0.9);
-  color: #ffffff;
-  border-color: #1e1e1e;
-}
 .attachments-card__thumb {
   --image--rounded--width: 2.375rem;
   --image--rounded--height: 2.375rem;
@@ -226,11 +221,8 @@ const variables = $derived.by(() => {
 }
 .attachments-card__extra-info {
   font-size: 0.625rem;
-  color: #6b7280;
+  color: var(--sc-mc-color--text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-:global([data-theme="dark"]) .attachments-card__extra-info {
-  color: #ffffff;
 }</style>

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

@@ -67,8 +67,8 @@ const variables = $derived.by(() => {
   font-size: 0.75rem;
   line-height: 0.9375rem;
   font-weight: 500;
-  color: #ffffff;
-  text-shadow: 1px 1px hsl(0, 0%, 10%);
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
@@ -79,6 +79,6 @@ const variables = $derived.by(() => {
   font-size: 0.625rem;
   line-height: 0.75rem;
   font-weight: 400;
-  color: #ffffff;
-  text-shadow: 1px 1px hsl(0, 0%, 10%);
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
 }</style>

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

@@ -52,7 +52,7 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   height: 100%;
   min-height: 100%;
   max-height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgb(from var(--sc-mc-color--bg-panel) r g b/60%);
 }
 .post-media--fit {
   --video--media-fit: contain;

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

@@ -45,8 +45,8 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer-texts {
-  color: #ffffff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  color: var(--sc-mc-color--text-white);
+  text-shadow: var(--sc-mc-color--text-white-shadow);
   padding: var(--_post-viewer-texts--padding);
   display: flex;
   flex-direction: column;

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

@@ -10,6 +10,7 @@ type Props = {
         locale?: Locale;
         showStreamsCloudWatermark?: boolean;
         disableBackground?: boolean;
+        theme?: 'light' | 'dark';
     };
     on?: {
         postActivated?: (id: string) => void;

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

@@ -1,24 +1,19 @@
 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 '../social-interactions';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
 export { PostsPlayer, type PostPlayerModel };
-export type { IMediaCenterConfig, IPostAnalyticsHandler };
-export { mapToPostPlayerModel } from '../data-loaders/mapper';
+export type { IMediaCenterDataProvider, IPostAnalyticsHandler };
 /**
  * Opens the posts player modal.
  *
- * @param init Configuration options.
+ * @param init Configuration options for the posts player.
  *
  * Data provider (required)
- * @param init.postsProvider
+ * @param {IPostsPlayerDataProvider} init.postsProvider
  *   Provider that supplies post items to the player.
  *
- * Media center (optional)
- * @param {IMediaCenterConfig} [init.mediaCenterConfig]
- *   Optional media-center config passed to MediaCenter.
- *
  * Analytics (optional)
  * @param {IPostAnalyticsHandler} [init.analyticsHandler]
  *   Custom analytics handler for posts player events.
@@ -27,20 +22,23 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
  *
- * Player settings
- * @param {PostPlayerSettings} [init.playerSettings]
+ * Player settings (optional)
+ * @param {object} [init.playerSettings]
  *   Player UI and behavior settings.
- *   Fields of PostPlayerSettings:
+ *   Fields of PostsPlayerSettings:
  *   - {boolean} [disableBackground]
  *       If true, hides the player's background image.
  *   - {boolean} [hideCloseButton]
  *       If true, hides the close button.
+ *       Note: when true, the `CloseOrchestrator` will not allow closing via the close button.
  *   - {'en'|'no'} [locale='en']
  *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
  *   - {boolean} [showStreamsCloudWatermark]
  *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
  *
- * Events
+ * Events (optional)
  * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
  *   Optional event handlers.
  * @param {() => void} [init.on.playerClosed]
@@ -55,16 +53,26 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
  *
  * openPostsPlayer({
- *   postsProvider: myPostsProvider,
- *   mediaCenterConfig: myMediaCenterConfig,
+ *   postsProvider: {
+ *     kind: 'feed',
+ *     initialData: {
+ *       prefetchedItems: myPrefetchedPosts,
+ *       startIndex: 0,
+ *       startMediaIndex: 0,
+ *     },
+ *     loadMore: async () => {
+ *       // return next chunk of PostPlayerModel[]
+ *       return await fetchMorePosts();
+ *     },
+ *   },
  *   analyticsHandler: myAnalyticsHandler,
  *   socialInteractionsHandler: mySocialHandler,
  *   playerSettings: {
- *     // Default locale is 'en'; set 'no' to switch to Norwegian:
  *     locale: 'no',
  *     disableBackground: false,
  *     hideCloseButton: false,
  *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
  *   },
  *   on: {
  *     playerClosed: () => console.log('Player closed'),
@@ -73,20 +81,17 @@ export { mapToPostPlayerModel } from '../data-loaders/mapper';
  * });
  * ```
  */
-export declare function openPostsPlayer(init: {
-    postsProvider: IPostsPlayerDataProvider;
-    mediaCenterConfig: IMediaCenterConfig;
-    playerSettings?: PostsPlayerSettings;
-    on?: {
-        playerClosed?: () => void;
-        postActivated?: (id: string) => void;
-    };
-}): void;
 export declare function openPostsPlayer(init: {
     postsProvider: IPostsPlayerDataProvider;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
-    playerSettings?: PostsPlayerSettings;
+    playerSettings?: {
+        disableBackground?: boolean;
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        hideCloseButton?: boolean;
+        theme?: 'light' | 'dark';
+    };
     on?: {
         playerClosed?: () => void;
         postActivated?: (id: string) => void;
@@ -115,9 +120,3 @@ export type IPostsPlayerDataProvider<TChunk extends WithId = WithId> = {
 type WithId = {
     id: string;
 };
-export type PostsPlayerSettings = {
-    disableBackground?: boolean;
-    locale?: Locale;
-    showStreamsCloudWatermark?: boolean;
-    hideCloseButton?: boolean;
-};

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

@@ -1,16 +1,90 @@
 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 { default as PostsPlayer } from './cmp.posts-player.svelte';
 import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
 export { PostsPlayer };
-export { mapToPostPlayerModel } from '../data-loaders/mapper';
+/**
+ * Opens the posts player modal.
+ *
+ * @param init Configuration options for the posts player.
+ *
+ * Data provider (required)
+ * @param {IPostsPlayerDataProvider} init.postsProvider
+ *   Provider that supplies post items to the player.
+ *
+ * Analytics (optional)
+ * @param {IPostAnalyticsHandler} [init.analyticsHandler]
+ *   Custom analytics handler for posts player events.
+ *
+ * Social interactions (optional)
+ * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
+ *   Handler for social interactions (like, share, etc.).
+ *
+ * Player settings (optional)
+ * @param {object} [init.playerSettings]
+ *   Player UI and behavior settings.
+ *   Fields of PostsPlayerSettings:
+ *   - {boolean} [disableBackground]
+ *       If true, hides the player's background image.
+ *   - {boolean} [hideCloseButton]
+ *       If true, hides the close button.
+ *       Note: when true, the `CloseOrchestrator` will not allow closing via the close button.
+ *   - {'en'|'no'} [locale='en']
+ *       Localization for the player UI. Default is 'en'; use 'no' for Norwegian.
+ *   - {boolean} [showStreamsCloudWatermark]
+ *       If true, shows the StreamsCloud watermark.
+ *   - {'light' | 'dark'} [theme]
+ *       Optional theme for the player UI.
+ *
+ * Events (optional)
+ * @param {{ playerClosed?: () => void; postActivated?: (id: string) => void }} [init.on]
+ *   Optional event handlers.
+ * @param {() => void} [init.on.playerClosed]
+ *   Called after the player is fully closed (after unmount and removal from the DOM).
+ * @param {(id: string) => void} [init.on.postActivated]
+ *   Called when a post becomes active (receives the post's id).
+ *
+ * @returns {void}
+ *
+ * @example
+ * ```ts
+ * import { openPostsPlayer } from '@streamscloud/embeddable/posts-player';
+ *
+ * openPostsPlayer({
+ *   postsProvider: {
+ *     kind: 'feed',
+ *     initialData: {
+ *       prefetchedItems: myPrefetchedPosts,
+ *       startIndex: 0,
+ *       startMediaIndex: 0,
+ *     },
+ *     loadMore: async () => {
+ *       // return next chunk of PostPlayerModel[]
+ *       return await fetchMorePosts();
+ *     },
+ *   },
+ *   analyticsHandler: myAnalyticsHandler,
+ *   socialInteractionsHandler: mySocialHandler,
+ *   playerSettings: {
+ *     locale: 'no',
+ *     disableBackground: false,
+ *     hideCloseButton: false,
+ *     showStreamsCloudWatermark: true,
+ *     theme: 'dark',
+ *   },
+ *   on: {
+ *     playerClosed: () => console.log('Player closed'),
+ *     postActivated: (id) => console.log('Activated post', id),
+ *   },
+ * });
+ * ```
+ */
 export function openPostsPlayer(init) {
-    const { postsProvider: dataProvider, mediaCenterConfig, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
+    const { postsProvider: dataProvider, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
-    let mounted;
+    let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
         closeFn: async () => {
             await unmount(mounted);
@@ -21,37 +95,18 @@ export function openPostsPlayer(init) {
         },
         canClose: !playerSettings?.hideCloseButton
     });
-    if (mediaCenterConfig) {
-        mounted = mount(MediaCenter, {
-            target: shadowHost.shadowRoot,
-            props: {
-                config: mediaCenterConfig,
-                settings: playerSettings,
-                modeProps: {
-                    mode: 'posts',
-                    props: {
-                        dataProvider,
-                        onPostActivated: on?.postActivated
-                    }
-                },
-                closeOrchestrator: makeCloseOrchestrator()
+    mounted = mount(PostsPlayerProxy, {
+        target: shadowHost.shadowRoot,
+        props: {
+            dataProvider,
+            socialInteractionsHandler,
+            analyticsHandler,
+            playerSettings,
+            closeOrchestrator: makeCloseOrchestrator(),
+            on: {
+                postActivated: on?.postActivated
             }
-        });
-    }
-    else {
-        mounted = mount(PostsPlayerProxy, {
-            target: shadowHost.shadowRoot,
-            props: {
-                dataProvider,
-                socialInteractionsHandler,
-                analyticsHandler,
-                playerSettings,
-                closeOrchestrator: makeCloseOrchestrator(),
-                on: {
-                    postActivated: on?.postActivated
-                }
-            }
-        });
-    }
+        }
+    });
     shadowHost.attachToBody();
 }

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

@@ -1,14 +1,23 @@
-<script lang="ts">import {} from '../../ui/player/close-orchestrator';
-import { WithBackground } from '../../ui/with-background';
+<script lang="ts">import { Theme } from '../../core/theme';
+import {} from '../../ui/player/close-orchestrator';
+import { ShadowRoot } from '../../ui/shadow-dom';
 import { default as PostsPlayerView } from './posts-player-view.svelte';
+import { untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, 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>
 
-<WithBackground backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+<ShadowRoot backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
   <PostsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     socialInteractionsHandler={socialInteractionsHandler}
@@ -16,4 +25,4 @@ const handleBackgroundImagedLoaded = (url) => {
     analyticsHandler={analyticsHandler}
     closeOrchestrator={closeOrchestrator}
     on={{ postActivated: on?.postActivated, backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded }} />
-</WithBackground>
+</ShadowRoot>

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

@@ -12,6 +12,7 @@ type Props = {
         locale?: Locale;
         showStreamsCloudWatermark?: boolean;
         disableBackground?: boolean;
+        theme?: 'light' | 'dark';
     };
     on?: {
         postActivated?: (id: string) => void;

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

@@ -9,7 +9,7 @@
 };
 import { PostType } from '../..';
 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 { getPostCoverImage } from '../model';
 import {} from '../../ui/player/providers';

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

@@ -1,4 +1,5 @@
 import type { Locale } from '../../core/locale';
+import type { ThemeValue } from '../../core/theme';
 import type { IPostModel } from '..';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
@@ -36,5 +37,5 @@ export type PostsPlayerProps = {
 export type PostPlayerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    playerColors?: PlayerColors;
+    playerColors?: Record<ThemeValue, PlayerColors>;
 };