@streamscloud/embeddable 11.0.0 → 12.1.0

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;
+};

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

@@ -1,104 +1,57 @@
 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.
- *
- * Data provider (required)
- * @param 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.
- *
- * Social interactions (optional)
- * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
- *   Handler for social interactions (like, share, etc.).
- *
- * Player settings
- * @param {PostPlayerSettings} [init.playerSettings]
- *   Player UI and behavior settings.
- *   Fields of PostPlayerSettings:
- *   - {boolean} [disableBackground]
- *       If true, hides the player's background image.
- *   - {boolean} [hideCloseButton]
- *       If true, hides 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.
- *
- * Events
- * @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: myPostsProvider,
- *   mediaCenterConfig: myMediaCenterConfig,
- *   analyticsHandler: myAnalyticsHandler,
- *   socialInteractionsHandler: mySocialHandler,
- *   playerSettings: {
- *     // Default locale is 'en'; set 'no' to switch to Norwegian:
- *     locale: 'no',
- *     disableBackground: false,
- *     hideCloseButton: false,
- *     showStreamsCloudWatermark: true,
- *   },
- *   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 shadowHost = new ModalShadowHost();
-    const mounted = mount(MediaCenter, {
-        target: shadowHost.shadowRoot,
-        props: {
-            config: mediaCenterConfig || null,
-            playerProps: {
-                mode: 'posts',
-                props: {
-                    dataProvider,
-                    socialInteractionsHandler,
-                    analyticsHandler,
-                    playerSettings,
-                    on: {
-                        playerClosed: async () => {
-                            await unmount(mounted);
-                            shadowHost.remove();
-                            if (on?.playerClosed) {
-                                on.playerClosed();
-                            }
-                        },
-                        postActivated: on?.postActivated
+    let mounted;
+    const makeCloseOrchestrator = () => new CloseOrchestrator({
+        closeFn: async () => {
+            await unmount(mounted);
+            shadowHost.remove();
+            if (on?.playerClosed) {
+                on.playerClosed();
+            }
+        },
+        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()
+            }
+        });
+    }
+    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

@@ -0,0 +1,19 @@
+<script lang="ts">import {} from '../../ui/player/close-orchestrator';
+import { WithBackground } from '../../ui/with-background';
+import { default as PostsPlayerView } from './posts-player-view.svelte';
+let { dataProvider, socialInteractionsHandler, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
+let backgroundImageUrl = $state(null);
+const handleBackgroundImagedLoaded = (url) => {
+    backgroundImageUrl = url;
+};
+</script>
+
+<WithBackground backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+  <PostsPlayerView
+    dataProvider={{ type: 'provider', provider: dataProvider }}
+    socialInteractionsHandler={socialInteractionsHandler}
+    playerSettings={playerSettings}
+    analyticsHandler={analyticsHandler}
+    closeOrchestrator={closeOrchestrator}
+    on={{ postActivated: on?.postActivated, backgroundImageLoaded: playerSettings?.disableBackground === true ? undefined : handleBackgroundImagedLoaded }} />
+</WithBackground>

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

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

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

@@ -11,11 +11,11 @@ import { PostType } from '../..';
 import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
 import { ContentPlayerSettings } from '../../content-player/content-player-settings';
 import { preloadImage } from '../../core/image-preloader';
-import { Utils } from '../../core/utils';
 import { getPostCoverImage } from '../model';
-import { DefaultChunksPlayerBuffer, DefaultFeedPlayerBuffer } from '../../ui/player/providers';
+import {} from '../../ui/player/providers';
+import { initBufferFromProvider } from '../../ui/player/providers/service';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, on, mediaCenterData } = $props();
+let { dataProvider, socialInteractionsHandler, playerSettings, analyticsHandler, closeOrchestrator, on } = $props();
 $effect(() => {
     void dataProvider;
     untrack(() => {
@@ -23,36 +23,21 @@ $effect(() => {
         initBuffer(dataProvider);
     });
 });
-$effect(() => contentPlayerConfig.updateMediaCenterData(mediaCenterData));
 const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function* () {
-    switch (dataProvider.kind) {
-        case 'feed':
-            new DefaultFeedPlayerBuffer(dataProvider, {
-                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                    if (instance.loaded.length) {
-                        const coverUrl = getPostCoverImage(instance.loaded[0]);
-                        yield preloadImage(coverUrl);
-                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-                    }
-                    contentPlayerConfig.playerBuffer = instance;
-                })
-            });
-            break;
-        case 'chunks':
-            new DefaultChunksPlayerBuffer(dataProvider, {
-                preloaded: (instance) => __awaiter(void 0, void 0, void 0, function* () {
-                    if (instance.loaded.length) {
-                        const coverUrl = getPostCoverImage(instance.loaded[0]);
-                        yield preloadImage(coverUrl);
-                        contentPlayerConfig.setBackgroundImageUrl(coverUrl);
-                    }
-                    contentPlayerConfig.playerBuffer = instance;
-                })
-            });
-            break;
-        default:
-            Utils.assertUnreachable(dataProvider);
+    let newBuffer;
+    if (dataProvider.type === 'buffer') {
+        newBuffer = dataProvider.buffer;
     }
+    else {
+        newBuffer = initBufferFromProvider(dataProvider.provider);
+    }
+    yield newBuffer.ensureWarmedUp();
+    if (newBuffer.loaded.length && (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded)) {
+        const coverUrl = getPostCoverImage(newBuffer.loaded[0]);
+        yield preloadImage(coverUrl);
+        on.backgroundImageLoaded(coverUrl);
+    }
+    contentPlayerConfig.playerBuffer = newBuffer;
 });
 const getLoadedItemById = (id) => {
     if (!contentPlayerConfig.playerBuffer) {
@@ -66,10 +51,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
         postModelFromCurrentItem: (item) => item
     },
     socialInteractionsHandler,
-    mediaCenterData,
     settings: new ContentPlayerSettings(playerSettings),
+    closeOrchestrator,
     callbacks: {
-        close: on === null || on === void 0 ? void 0 : on.playerClosed,
         productClick: (id, postId) => {
             var _a;
             if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
@@ -96,7 +80,9 @@ const contentPlayerConfig = new ContentPlayerConfig({
             if (!post) {
                 return;
             }
-            contentPlayerConfig.setBackgroundImageUrl(getPostCoverImage(post));
+            if (on === null || on === void 0 ? void 0 : on.backgroundImageLoaded) {
+                on.backgroundImageLoaded(getPostCoverImage(post));
+            }
             if (post.analyticsOrganizationId) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.setOrganizationId(post.analyticsOrganizationId);
             }

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

@@ -1,8 +1,4 @@
-import type { MediaCenterData } from '../../media-center/model/types';
-import type { PostPlayerProps } from './types';
-type $$ComponentProps = PostPlayerProps & {
-    mediaCenterData?: MediaCenterData;
-};
-declare const PostsPlayerView: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { PostsPlayerProps } from './types';
+declare const PostsPlayerView: import("svelte").Component<PostsPlayerProps, {}, "">;
 type PostsPlayerView = ReturnType<typeof PostsPlayerView>;
 export default PostsPlayerView;