@streamscloud/embeddable 13.3.0 → 14.0.0

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

@@ -1,6 +1,7 @@
 import type { Locale } from '../../core/locale';
 import type { ThemeValue } from '../../core/theme';
 import type { IPostModel } from '..';
+import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { PlayerColors } from '../../ui/player/colors';
@@ -26,7 +27,9 @@ export type PostsPlayerProps = {
         provider: IPlayerDataProvider<PostPlayerModel>;
     };
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IPostSharingHandler;
     analyticsHandler?: IPostAnalyticsHandler;
+    managementActions?: PostManagementActions;
     playerSettings?: PostPlayerSettings;
     closeOrchestrator: ICloseOrchestrator;
     on?: {
@@ -39,3 +42,8 @@ export type PostPlayerSettings = {
     showStreamsCloudWatermark?: boolean;
     playerColors?: Record<ThemeValue, PlayerColors>;
 };
+export type PostManagementActions = {
+    editPost: ((id: string) => void) | null;
+    editArticle: ((id: string) => void) | null;
+    deletePost: ((id: string) => void) | null;
+};

package/dist/posts/sharing/index.d.ts

@@ -0,0 +1 @@
+export type { IPostSharingHandler } from './types';

package/dist/posts/sharing/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+export interface IPostSharingHandler {
+    share: (postId: string) => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
+export {};

package/dist/posts/sharing/types.js

@@ -0,0 +1 @@
+export {};

package/dist/posts/social-interactions/types.d.ts

@@ -3,7 +3,6 @@ export interface IPostSocialInteractionsHandler {
         readonly isLiked: boolean;
     }>;
     toggleLike: (postId: string) => PromiseLike<void>;
-    share: (postId: string) => PromiseLike<void>;
 }
 type PromiseLike<T> = T | Promise<T>;
 export {};

package/dist/streams/controls/index.d.ts

@@ -0,0 +1 @@
+export { StreamActionsGenerator } from './stream-actions-generator.svelte';

package/dist/streams/controls/index.js

@@ -0,0 +1 @@
+export { StreamActionsGenerator } from './stream-actions-generator.svelte';

package/dist/streams/controls/stream-actions-generator.svelte.d.ts

@@ -0,0 +1,31 @@
+import { PostActionsHandler } from '../../posts/controls';
+import type { PostModel } from '../../posts/model';
+import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import type { IStreamSharingHandler } from '../sharing';
+export declare class StreamActionsGenerator {
+    private postSocialInteractionsHandler;
+    private sharingHandler;
+    private callbacks;
+    private handlers;
+    constructor(init: {
+        postSocialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+        sharingHandler: IStreamSharingHandler | undefined;
+        on: StreamActionCallbacks;
+    });
+    getPostActionsHandler: (data: {
+        model: PostModel;
+        streamId: string;
+        streamPageId: string;
+    }) => PostActionsHandler;
+    getGeneralStreamPageActions: (data: {
+        streamId: string;
+        streamPageId: string;
+    }) => {
+        icon: any;
+        callback: () => (void | Promise<void>) | undefined;
+    }[];
+}
+type StreamActionCallbacks = {
+    attachmentClicked: () => void;
+};
+export {};

package/dist/streams/controls/stream-actions-generator.svelte.js

@@ -0,0 +1,42 @@
+import { PostActionsHandler } from '../../posts/controls';
+import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
+export class StreamActionsGenerator {
+    postSocialInteractionsHandler;
+    sharingHandler;
+    callbacks;
+    handlers = new Map();
+    constructor(init) {
+        this.postSocialInteractionsHandler = init.postSocialInteractionsHandler ?? null;
+        this.sharingHandler = init.sharingHandler ?? null;
+        this.callbacks = init.on;
+    }
+    getPostActionsHandler = (data) => {
+        const { model, streamId, streamPageId } = data;
+        let handler = this.handlers.get(streamPageId);
+        if (!handler) {
+            handler = new PostActionsHandler({
+                post: model,
+                socialInteractionsHandler: this.postSocialInteractionsHandler,
+                callbacks: {
+                    attachmentClicked: this.callbacks.attachmentClicked,
+                    shareClicked: this.sharingHandler ? () => this.sharingHandler?.share(streamId) : undefined
+                }
+            });
+            this.handlers.set(streamPageId, handler);
+        }
+        return handler;
+    };
+    getGeneralStreamPageActions = (data) => {
+        if (!this.sharingHandler) {
+            return [];
+        }
+        const { streamId, streamPageId } = data;
+        void streamPageId;
+        return [
+            {
+                icon: IconShare,
+                callback: () => this.sharingHandler?.share(streamId)
+            }
+        ];
+    };
+}

package/dist/streams/index.d.ts

@@ -0,0 +1 @@
+export type { IStreamSharingHandler } from './sharing';

package/dist/streams/index.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/layout/cmp.layout.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">import { ProportionalContainer } from '../../ui/proportional-container';
 import { generateStreamLayoutStyles } from './styles-transformer';
-let { model, children } = $props();
+let { model, children, controls } = $props();
 </script>
 
 <ProportionalContainer ratio={9 / 16}>
   <div class="stream-page-layout" style={generateStreamLayoutStyles(model.styles)}>
     {@render children()}
+    {#if controls}
+      {@render controls()}
+    {/if}
   </div>
 </ProportionalContainer>
 

package/dist/streams/layout/cmp.layout.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
         styles: StreamLayoutStyles | null;
     };
     children: Snippet;
+    controls?: Snippet;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -12,5 +12,6 @@ const localization = $derived(new ShortVideoStreamElementLocalization(locale));
   trackingParams={trackingParams ? { streamId: trackingParams.streamId, campaignId: trackingParams.campaignId } : false}
   autoplay={false}
   enableControls={false}
+  controlActions={[]}
   locale={localization.shortVideoViewerLocale}
   on={on} />

package/dist/streams/layout/models/mapper.js

@@ -22,6 +22,7 @@ export const mapToPostModel = (model) => {
             viewsCount: model.header.postViewsCount
         },
         enableSocialInteractions: model.enableSocialInteractions,
+        articleId: null,
         ads: model.ad ? [mapToAdViewModel(model.ad)] : [],
         products: model.products.map(mapToProductCardModel)
         // uncomment if you want to test many products behavior

package/dist/streams/sharing/index.d.ts

@@ -0,0 +1 @@
+export type { IStreamSharingHandler } from './types';

package/dist/streams/sharing/index.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/sharing/types.d.ts

@@ -0,0 +1,5 @@
+export interface IStreamSharingHandler {
+    share: (streamId: string) => PromiseLike<void>;
+}
+type PromiseLike<T> = T | Promise<T>;
+export {};

package/dist/streams/sharing/types.js

@@ -0,0 +1 @@
+export {};

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
+import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, trackingParams, locale, on } = $props();
+let { page, trackingParams, overlayControls, locale, on } = $props();
 const localization = $derived(new StreamPageViewerLocalization(locale));
 </script>
 
@@ -11,5 +12,46 @@ const localization = $derived(new StreamPageViewerLocalization(locale));
         <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} locale={localization.elementsLocale} />
       </StreamLayoutSlot>
     {/each}
+    {#snippet controls()}
+      {#if overlayControls?.enabled && overlayControls.actions.length}
+        <div class="controls-panel">
+          <ResponsivePlayerButtonsGroup
+            actions={overlayControls.actions}
+            activeColor={overlayControls.colors?.active ?? null}
+            backgroundColor={overlayControls.colors?.inactive ?? null}
+            scaleEffect={true} />
+        </div>
+      {/if}
+    {/snippet}
   </StreamPageLayout>
 {/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.controls-panel {
+  position: absolute;
+  left: auto;
+  right: 0;
+  bottom: 6.25rem;
+  gap: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 0 0.625rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .controls-panel {
+    padding-right: 0;
+  }
+}</style>

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -1,10 +1,19 @@
 import type { Locale } from '../../core/locale';
 import { type StreamTrackingParams } from '../layout';
+import { type PlayerButtonDef } from '../../ui/player/button';
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
     trackingParams: StreamTrackingParams;
     locale: Locale;
+    overlayControls?: {
+        enabled: boolean;
+        colors: {
+            active: string | null;
+            inactive: string | null;
+        } | null;
+        actions: PlayerButtonDef[];
+    };
     on?: {
         productClick: (productId: string) => void;
         productImpression?: (productId: string) => void;

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

@@ -11,7 +11,7 @@ import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
 import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
 import { mount, unmount } from 'svelte';
-let { dataProvider, postSocialInteractionsHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
+let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(StreamsPlayerProxy, {
@@ -19,6 +19,7 @@ const initHost = (node) => {
         props: {
             dataProvider,
             postSocialInteractionsHandler,
+            sharingHandler,
             analyticsHandler,
             amplificationParameters,
             playerSettings,

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

@@ -1,9 +1,11 @@
 import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts';
+import type { IStreamSharingHandler } from '../sharing';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters } from './types';
 type Props = {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     playerSettings?: {

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

@@ -1,6 +1,7 @@
 import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import type { IStreamSharingHandler } from '../sharing';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
 export { type StreamPlayerModel, type StreamPageViewerModel };
@@ -75,6 +76,7 @@ export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterD
 export declare function openStreamsPlayer(init: {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     playerSettings?: StreamsPlayerSettings;

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

@@ -72,7 +72,7 @@ export {};
  * ```
  */
 export function openStreamsPlayer(init) {
-    const { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, on } = init;
+    const { dataProvider, analyticsHandler, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
     let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
@@ -93,6 +93,7 @@ export function openStreamsPlayer(init) {
             amplificationParameters,
             playerSettings,
             postSocialInteractionsHandler,
+            sharingHandler,
             closeOrchestrator: makeCloseOrchestrator(),
             on: {
                 streamActivated: (data) => {

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

@@ -3,7 +3,7 @@ import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { default as StreamsPlayerView } from './streams-player-view.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, postSocialInteractionsHandler, amplificationParameters, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
+let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
 let backgroundImageUrl = $state(null);
 const handleBackgroundImagedLoaded = (url) => {
     backgroundImageUrl = url;
@@ -21,6 +21,7 @@ $effect(() => {
   <StreamsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     postSocialInteractionsHandler={postSocialInteractionsHandler}
+    sharingHandler={sharingHandler}
     analyticsHandler={analyticsHandler}
     amplificationParameters={amplificationParameters}
     playerSettings={playerSettings}

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

@@ -1,10 +1,12 @@
 import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import type { IStreamSharingHandler } from '../sharing';
 import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, StreamAmplificationParameters } from './types';
 type Props = {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
     closeOrchestrator: ICloseOrchestrator;

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

@@ -8,18 +8,25 @@
     });
 };
 var _a;
-import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
-import { ContentPlayerSettings } from '../../content-player/content-player-settings.svelte';
 import { preloadImage } from '../../core/image-preloader';
+import { PostAttachments } from '../../posts/attachments';
+import { PostModel } from '../../posts/model';
+import { PostViewer } from '../../posts/post-viewer';
+import { StreamActionsGenerator } from '../controls';
 import { mapToPostModel } from '../layout/models';
 import { StreamPageViewer } from '../stream-page-viewer';
+import { IconColor } from '../../ui/icon';
+import { ContentPlayer, ContentPlayerConfig, ContentPlayerSettings } from '../../ui/player/content-player';
 import { default as Overview } from './stream-overview.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamsPlayerBuffer } from './streams-player-buffer.svelte';
+import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
+import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
 import { untrack } from 'svelte';
-let { dataProvider, analyticsHandler, postSocialInteractionsHandler, amplificationParameters, playerSettings, closeOrchestrator, on } = $props();
+let { dataProvider, analyticsHandler, postSocialInteractionsHandler, sharingHandler, amplificationParameters, managementActions, playerSettings, closeOrchestrator, on } = $props();
 const localization = $derived(new StreamPlayerLocalization((_a = playerSettings === null || playerSettings === void 0 ? void 0 : playerSettings.locale) !== null && _a !== void 0 ? _a : 'en'));
 let currentStreamModel = $state(null);
+let mappedPostsCache = new Map();
 let activePageId = $derived.by(() => { var _a, _b; return (_b = (_a = buffer === null || buffer === void 0 ? void 0 : buffer.current) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : ''; });
 let buffer = $state(null);
 let totalEngagementTimeSeconds = 0;
@@ -33,6 +40,7 @@ $effect(() => {
     untrack(() => {
         buffer = null;
         contentPlayerConfig.playerBuffer = null;
+        mappedPostsCache = new Map();
         initPlayerBuffer(dataProvider);
     });
     return () => { };
@@ -97,36 +105,8 @@ const initPlayerBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, fun
 });
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
-    mappers: {
-        postModelFromCurrentItem: (item) => {
-            if (item.type === 'short-video' && item.shortVideo) {
-                return mapToPostModel(item.shortVideo);
-            }
-            return null;
-        }
-    },
-    socialInteractionsHandler: postSocialInteractionsHandler,
     settings: new ContentPlayerSettings(playerSettings),
     closeOrchestrator,
-    callbacks: {
-        videoProgress: (pageId, videoId, progress) => {
-            onProgress(pageId, videoId, progress);
-        },
-        productClick: (id, videoId) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
-            onStreamProductClick(id);
-        },
-        productImpression: (id, videoId) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
-            onStreamProductImpression(id);
-        },
-        adClick: (id) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
-        },
-        adImpression: (id) => {
-            analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
-        }
-    },
     playerSliderCallbacks: {
         itemActivated: (item) => onPageActivated(item),
         itemDeactivated: (itemId) => executeWithStreamId((streamId) => {
@@ -134,6 +114,22 @@ const contentPlayerConfig = new ContentPlayerConfig({
         })
     }
 });
+const streamActionsGenerator = new StreamActionsGenerator({
+    postSocialInteractionsHandler,
+    sharingHandler,
+    on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
+});
+const itemAsPostModel = (item) => {
+    if (item.type !== 'short-video' || !item.shortVideo) {
+        return null;
+    }
+    if (mappedPostsCache.has(item.shortVideo.id)) {
+        return mappedPostsCache.get(item.shortVideo.id);
+    }
+    const postModel = new PostModel(mapToPostModel(item.shortVideo));
+    mappedPostsCache.set(item.shortVideo.id, postModel);
+    return postModel;
+};
 const handleChangePage = (index) => {
     if (!buffer) {
         return;
@@ -160,6 +156,23 @@ const onPageActivated = (id) => {
         }
     }
 };
+const onShortVideoProgress = (pageId, videoId, progress) => {
+    onProgress(pageId, videoId, progress);
+};
+const onShortVideoProductClick = (id, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, videoId);
+    onStreamProductClick(id);
+};
+const onShortVideoProductImpression = (id, videoId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, videoId);
+    onStreamProductImpression(id);
+};
+const onShortVideoAdClick = (id) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+};
+const onShortVideoAdImpression = (id) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+};
 const onStreamProductClick = (productId) => {
     executeWithStreamId((streamId) => {
         analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackStreamProductClicked(productId, streamId);
@@ -181,6 +194,45 @@ const executeWithStreamId = (action) => {
     }
     action(currentStreamModel.id);
 };
+const currentItemActions = $derived.by(() => {
+    if (!(buffer === null || buffer === void 0 ? void 0 : buffer.current) || !buffer.activeChunk) {
+        return [];
+    }
+    const result = [];
+    if (buffer.current.type === 'general') {
+        result.push(...streamActionsGenerator.getGeneralStreamPageActions({
+            streamId: buffer.activeChunk.model.id,
+            streamPageId: buffer.current.id
+        }));
+    }
+    else {
+        const postModel = itemAsPostModel(buffer.current);
+        const handler = streamActionsGenerator.getPostActionsHandler({
+            model: postModel,
+            streamId: buffer.activeChunk.model.id,
+            streamPageId: buffer.current.id
+        });
+        result.push(...handler.actions);
+    }
+    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.editStream) {
+        result.push({
+            icon: IconEdit,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield managementActions.editStream(buffer.activeChunk.model.id);
+            })
+        });
+    }
+    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.deleteStreamPage) {
+        result.push({
+            icon: IconDelete,
+            iconColor: IconColor.Red,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield managementActions.deleteStreamPage(buffer.current.id);
+            })
+        });
+    }
+    return result;
+});
 //#region Activity Tracking
 const resetInactivityTimer = () => {
     if (!isActive) {
@@ -225,22 +277,83 @@ const stopActivityTracking = () => {
 //#edregion Activity Tracking
 </script>
 
-<ContentPlayer config={contentPlayerConfig}>
-  {#snippet nonPostItemView({ item })}
+{#snippet attachmentsView(data: { item: StreamPageViewerModel })}
+  {@const postModel = itemAsPostModel(data.item)}
+  {#if postModel}
+    <PostAttachments
+      model={postModel}
+      colors={{
+        background: contentPlayerConfig.playerColors.cardBackground,
+        price: contentPlayerConfig.playerColors.price,
+        salePrice: contentPlayerConfig.playerColors.salePrice,
+        buttonBackground: contentPlayerConfig.playerColors.cardButton
+      }}
+      trackingParams={contentPlayerConfig.trackingParams}
+      locale={contentPlayerConfig.settings.locale}
+      on={{
+        productClick: (id) => onShortVideoProductClick(id, postModel.id),
+        productImpression: (id) => onShortVideoProductImpression(id, postModel.id),
+        adClick: (id) => onShortVideoAdClick(id),
+        adImpression: (id) => onShortVideoAdImpression(id)
+      }} />
+  {/if}
+{/snippet}
+<ContentPlayer
+  config={contentPlayerConfig}
+  itemActions={currentItemActions}
+  attachmentsView={buffer?.current && itemAsPostModel(buffer.current)?.attachments ? attachmentsView : undefined}>
+  {#snippet itemView({ item })}
     {#if item.type === 'general'}
       <StreamPageViewer
         page={item}
         trackingParams={streamTrackingParams}
         locale={localization.locale}
+        overlayControls={{
+          enabled: contentPlayerConfig.uiManager.showControlsOverlay,
+          colors: {
+            active: contentPlayerConfig.playerColors.button,
+            inactive: contentPlayerConfig.playerColors.buttonInactive
+          },
+          actions: buffer?.activeChunk
+            ? streamActionsGenerator.getGeneralStreamPageActions({ streamId: buffer.activeChunk.model.id, streamPageId: item.id })
+            : []
+        }}
         on={{
           progress: (videoId, progress) => onProgress(item.id, videoId, progress),
           productClick: (productId) => onStreamProductClick(productId),
           productImpression: (productId) => onStreamProductImpression(productId)
         }} />
+    {:else}
+      {@const postModel = itemAsPostModel(item)}
+      {#if postModel}
+        {@const handler = buffer?.activeChunk
+          ? streamActionsGenerator.getPostActionsHandler({
+              model: postModel,
+              streamId: buffer.activeChunk.model.id,
+              streamPageId: item.id
+            })
+          : null}
+        <PostViewer
+          model={postModel}
+          controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
+          trackingParams={contentPlayerConfig.trackingParams}
+          enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
+          enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
+          controlActions={handler?.actions ?? []}
+          autoplay="on-appearance"
+          locale={contentPlayerConfig.settings.locale}
+          on={{
+            progress: (progress) => onShortVideoProgress(item.id, postModel.id, progress),
+            productClick: (productId) => onShortVideoProductClick(productId, postModel.id),
+            productImpression: (productId) => onShortVideoProductImpression(productId, postModel.id),
+            adClick: (adId) => onShortVideoAdClick(adId),
+            adImpression: (adId) => onShortVideoAdImpression(adId)
+          }} />
+      {/if}
     {/if}
   {/snippet}
   {#snippet overviewPanelContent()}
-    {#if contentPlayerConfig.playerBuffer && buffer && currentStreamModel}
+    {#if buffer}
       <Overview
         buffer={buffer}
         activePageId={activePageId}

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

@@ -1,6 +1,7 @@
 import type { Locale } from '../../core/locale';
 import type { ThemeValue } from '../../core/theme';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
+import type { IStreamSharingHandler } from '../sharing';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { PlayerColors } from '../../ui/player/colors';
@@ -24,8 +25,10 @@ export type StreamsPlayerProps = {
         provider: IStreamsPlayerDataProvider;
     };
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IStreamSharingHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
     amplificationParameters?: StreamAmplificationParameters;
+    managementActions?: StreamManagementActions;
     playerSettings?: StreamsPlayerSettings;
     closeOrchestrator: ICloseOrchestrator;
     on?: {
@@ -51,6 +54,10 @@ export type StreamAmplificationParameters = {
     campaignName: string;
     source: string;
 };
+export type StreamManagementActions = {
+    editStream: ((id: string) => void) | null;
+    deleteStreamPage: ((pageId: string) => void) | null;
+};
 export interface IStreamsPlayerDataProvider {
     initialData: {
         prefetchedStreams: StreamPlayerModel[];

package/dist/ui/card-actions/card-action-container.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from 'svelte/action';
+export declare const cardActionContainer: Action;