@streamscloud/embeddable 14.0.0-rc.0 → 14.0.0

package/dist/posts/controls/post-actions-handler.svelte.js

@@ -0,0 +1,56 @@
+import { IconColor } from '../../ui/icon';
+import { MediaVolumeManager } from '../../ui/media-playback';
+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';
+export class PostActionsHandler {
+    actions = $derived.by(() => {
+        const result = [];
+        if (this.post.attachments) {
+            result.push({ icon: IconShoppingBag, callback: this.callbacks.attachmentClicked });
+        }
+        if (this.post.enableSocialInteractions && this.socialInteractionsHandler) {
+            result.push({
+                icon: this.isLikedStore.isLiked ? IconHeartFilled : IconHeart,
+                iconColor: this.isLikedStore.isLiked ? IconColor.Red : undefined,
+                callback: () => this.socialInteractionsHandler?.toggleLike(this.post.id)
+            });
+        }
+        if (this.callbacks.shareClicked) {
+            result.push({
+                icon: IconShare,
+                callback: () => this.callbacks.shareClicked?.()
+            });
+        }
+        if (this.post.media && !this.post.media.currentItem.isImage) {
+            result.push({
+                icon: MediaVolumeManager.isMuted ? IconSpeakerMute : IconSpeaker2,
+                callback: () => (MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted)
+            });
+        }
+        return result;
+    });
+    post;
+    socialInteractionsHandler;
+    callbacks;
+    isLikedStore = $state.raw({
+        get isLiked() {
+            return false;
+        }
+    });
+    constructor(init) {
+        this.post = init.post;
+        this.socialInteractionsHandler = init.socialInteractionsHandler;
+        this.callbacks = init.callbacks;
+        this.initIsLikedStore();
+    }
+    initIsLikedStore = async () => {
+        if (!this.socialInteractionsHandler) {
+            return;
+        }
+        this.isLikedStore = await this.socialInteractionsHandler.getIsLiked(this.post.id);
+    };
+}

package/dist/posts/index.d.ts

@@ -1,2 +1,3 @@
 export type { IPostSocialInteractionsHandler } from './social-interactions';
+export type { IPostSharingHandler } from './sharing';
 export type { IPostModel, IPostProductCardModel, IPostHeadingModel, IPostAdCardModel, IPostMediaItemModel } from './model/types';

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

@@ -12,6 +12,7 @@ export type IPostModel = {
     readMoreUrl?: string;
     heading: IPostHeadingModel | null;
     enableSocialInteractions: boolean;
+    articleId: string | null;
     products: IPostProductCardModel[];
     ads: IPostAdCardModel[];
 };

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

@@ -1,13 +1,13 @@
 <script lang="ts">import { PostType } from '../..';
-import { PostControls } from '../controls';
 import { PostModel } from '../model';
+import { ResponsivePlayerButtonsGroup } from '../../ui/player/button';
 import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
 import { default as Heading } from './heading.svelte';
 import { default as PostMedia } from './media/post-media.svelte';
 import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
-let { model, socialInteractionsHandler, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+let { model, trackingParams: externalTrackingParams, controlsColors = null, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
 const localization = $derived(new PostViewerLocalization(locale));
 const uiManager = new PostViewerUiManager();
 $effect(() => {
@@ -81,12 +81,11 @@ const variables = $derived.by(() => {
 
   {#if uiManager.showControls}
     <div class="post-viewer__controls-panel" use:trackControlsPanelSize>
-      <PostControls
-        model={model}
+      <ResponsivePlayerButtonsGroup
+        actions={controlActions}
         activeColor={controlsColors?.active ?? null}
-        inactiveColor={controlsColors?.inactive ?? null}
-        socialInteractionsHandler={socialInteractionsHandler}
-        on={{ attachmentsClicked: () => (uiManager.canShowAttachments = !uiManager.canShowAttachments) }} />
+        backgroundColor={controlsColors?.inactive ?? null}
+        scaleEffect={true} />
     </div>
   {/if}
 </div>

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

@@ -1,10 +1,9 @@
 import type { Locale } from '../../core/locale';
 import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
-import type { IPostSocialInteractionsHandler } from '../social-interactions';
+import { type PlayerButtonDef } from '../../ui/player/button';
 type Props = {
     model: PostModel;
-    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     trackingParams: TrackingParams | null | false;
     enableAttachments?: boolean;
     enableControls?: boolean;
@@ -12,6 +11,7 @@ type Props = {
         active: string | null;
         inactive: string | null;
     } | null;
+    controlActions: PlayerButtonDef[];
     autoplay?: true | false | 'on-appearance';
     locale?: Locale;
     on?: {

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

@@ -14,6 +14,7 @@ export const mapToPostModel = (payload) => {
         viewsCount: payload.viewsCount,
         displayDate: payload.displayDate,
         heading: null,
+        articleId: payload.postData.articleData?.articleId ?? null,
         ads: payload.ad ? [mapToPostViewerAdCardModel(payload.ad)] : [],
         products: payload.allProducts.map((x) => mapToPostViewerProductCard(x))
         // uncomment if you want to test many products behavior

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

@@ -11,7 +11,7 @@ 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();
+let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, on } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(PostsPlayerProxy, {
@@ -19,6 +19,7 @@ const initHost = (node) => {
         props: {
             dataProvider,
             socialInteractionsHandler,
+            sharingHandler,
             playerSettings,
             analyticsHandler,
             closeOrchestrator: new CloseOrchestrator({

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

@@ -1,10 +1,12 @@
 import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '..';
+import type { IPostSharingHandler } from '../sharing';
 import type { IPlayerDataProvider } from '../../ui/player/providers';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
 type Props = {
     dataProvider: IPlayerDataProvider<PostPlayerModel>;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IPostSharingHandler;
     analyticsHandler?: IPostAnalyticsHandler;
     playerSettings?: {
         locale?: Locale;

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

@@ -1,5 +1,6 @@
 import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
+import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
@@ -85,6 +86,7 @@ export declare function openPostsPlayer(init: {
     postsProvider: IPostsPlayerDataProvider;
     analyticsHandler?: IPostAnalyticsHandler;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IPostSharingHandler;
     playerSettings?: {
         disableBackground?: boolean;
         locale?: Locale;

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

@@ -82,7 +82,7 @@ export { PostsPlayer };
  * ```
  */
 export function openPostsPlayer(init) {
-    const { postsProvider: dataProvider, analyticsHandler, socialInteractionsHandler, playerSettings, on } = init;
+    const { postsProvider: dataProvider, analyticsHandler, socialInteractionsHandler, sharingHandler, playerSettings, on } = init;
     const shadowHost = new ModalShadowHost();
     let mounted = null;
     const makeCloseOrchestrator = () => new CloseOrchestrator({
@@ -100,6 +100,7 @@ export function openPostsPlayer(init) {
         props: {
             dataProvider,
             socialInteractionsHandler,
+            sharingHandler,
             analyticsHandler,
             playerSettings,
             closeOrchestrator: makeCloseOrchestrator(),

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

@@ -3,7 +3,7 @@ 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 { dataProvider, socialInteractionsHandler, sharingHandler, closeOrchestrator, playerSettings, analyticsHandler, on } = $props();
 let backgroundImageUrl = $state(null);
 const handleBackgroundImagedLoaded = (url) => {
     backgroundImageUrl = url;
@@ -21,6 +21,7 @@ $effect(() => {
   <PostsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     socialInteractionsHandler={socialInteractionsHandler}
+    sharingHandler={sharingHandler}
     playerSettings={playerSettings}
     analyticsHandler={analyticsHandler}
     closeOrchestrator={closeOrchestrator}

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

@@ -1,11 +1,13 @@
 import type { Locale } from '../../core/locale';
-import type { IPostSocialInteractionsHandler } from '..';
+import type { IPostSharingHandler } from '../sharing';
+import type { IPostSocialInteractionsHandler } from '../social-interactions';
 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;
+    sharingHandler?: IPostSharingHandler;
     analyticsHandler?: IPostAnalyticsHandler;
     closeOrchestrator: ICloseOrchestrator;
     playerSettings?: {

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

@@ -7,19 +7,28 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { PostType } from '../..';
-import { ContentPlayer, ContentPlayerConfig } from '../../content-player';
-import { ContentPlayerSettings } from '../../content-player/content-player-settings.svelte';
+import { PostType } from '../../core/enums';
 import { preloadImage } from '../../core/image-preloader';
-import { getPostCoverImage } from '../model';
+import { PostAttachments } from '../attachments';
+import { PostActionsGenerator } from '../controls';
+import { getPostCoverImage, PostModel } from '../model';
+import { PostViewer } from '../post-viewer';
+import { IconColor } from '../../ui/icon';
+import { ContentPlayer, ContentPlayerConfig, ContentPlayerSettings } from '../../ui/player/content-player';
 import {} from '../../ui/player/providers';
 import { initBufferFromProvider } from '../../ui/player/providers/service';
+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, socialInteractionsHandler, playerSettings, analyticsHandler, closeOrchestrator, on } = $props();
+let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, managementActions, closeOrchestrator, on } = $props();
+let buffer = $state.raw(null);
+let mappedPostsCache = new Map();
 $effect(() => {
     void dataProvider;
     untrack(() => {
         contentPlayerConfig.playerBuffer = null;
+        buffer = null;
+        mappedPostsCache = new Map();
         initBuffer(dataProvider);
     });
 });
@@ -37,42 +46,19 @@ const initBuffer = (dataProvider) => __awaiter(void 0, void 0, void 0, function*
         yield preloadImage(coverUrl);
         on.backgroundImageLoaded(coverUrl);
     }
+    buffer = newBuffer;
     contentPlayerConfig.playerBuffer = newBuffer;
 });
 const getLoadedItemById = (id) => {
-    if (!contentPlayerConfig.playerBuffer) {
+    if (!buffer) {
         return null;
     }
-    return contentPlayerConfig.playerBuffer.loaded.find((item) => item.id === id) || null;
+    return buffer.loaded.find((item) => item.id === id) || null;
 };
 const contentPlayerConfig = new ContentPlayerConfig({
     playerBuffer: null,
-    mappers: {
-        postModelFromCurrentItem: (item) => item
-    },
-    socialInteractionsHandler,
     settings: new ContentPlayerSettings(playerSettings),
     closeOrchestrator,
-    callbacks: {
-        productClick: (id, postId) => {
-            var _a;
-            if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, postId);
-            }
-        },
-        productImpression: (id, postId) => {
-            var _a;
-            if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, postId);
-            }
-        },
-        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: (id) => {
             var _a;
@@ -83,16 +69,128 @@ const contentPlayerConfig = new ContentPlayerConfig({
             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);
+            }
             if (post.postType === PostType.ShortVideo) {
                 analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoView(id);
             }
-            else if (post.postType) {
-                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(post.postType, id);
+            else if (post.analyticsOrganizationId) {
+                analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackPostOpened(id, post.analyticsOrganizationId);
             }
             (_a = on === null || on === void 0 ? void 0 : on.postActivated) === null || _a === void 0 ? void 0 : _a.call(on, id);
         }
     }
 });
+const postActionsGenerator = new PostActionsGenerator({
+    socialInteractionsHandler,
+    sharingHandler,
+    on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
+});
+const onProductClick = (id, postId) => {
+    var _a;
+    if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductClick(id, postId);
+    }
+};
+const onProductImpression = (id, postId) => {
+    var _a;
+    if (((_a = getLoadedItemById(postId)) === null || _a === void 0 ? void 0 : _a.postType) === PostType.ShortVideo) {
+        analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(id, postId);
+    }
+};
+const onAdClick = (id) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(id);
+};
+const onAdImpression = (id) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(id);
+};
+const itemAsPostModel = (item) => {
+    if (mappedPostsCache.has(item.id)) {
+        return mappedPostsCache.get(item.id);
+    }
+    const postModel = new PostModel(item);
+    mappedPostsCache.set(item.id, postModel);
+    return postModel;
+};
+const currentItemActions = $derived.by(() => {
+    if (!(buffer === null || buffer === void 0 ? void 0 : buffer.current)) {
+        return [];
+    }
+    const result = [];
+    const postModel = itemAsPostModel(buffer.current);
+    const handler = postActionsGenerator.getPostActionsHandler(postModel);
+    result.push(...handler.actions);
+    if ((managementActions === null || managementActions === void 0 ? void 0 : managementActions.editPost) && postModel.postType !== PostType.Article) {
+        result.push({
+            icon: IconEdit,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield managementActions.editPost(buffer.current.id);
+            })
+        });
+    }
+    if ((managementActions === null || managementActions === void 0 ? void 0 : managementActions.editArticle) && postModel.postType === PostType.Article && buffer.current.articleId) {
+        result.push({
+            icon: IconEdit,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield managementActions.editArticle(buffer.current.articleId);
+            })
+        });
+    }
+    if (managementActions === null || managementActions === void 0 ? void 0 : managementActions.deletePost) {
+        result.push({
+            icon: IconDelete,
+            iconColor: IconColor.Red,
+            callback: () => __awaiter(void 0, void 0, void 0, function* () {
+                yield managementActions.deletePost(buffer.current.id);
+            })
+        });
+    }
+    return result;
+});
 </script>
 
-<ContentPlayer config={contentPlayerConfig} />
+{#snippet attachmentsView(data: { item: PostPlayerModel })}
+  {@const postModel = itemAsPostModel(data.item)}
+
+  <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) => onProductClick(id, postModel.id),
+      productImpression: (id) => onProductImpression(id, postModel.id),
+      adClick: (id) => onAdClick(id),
+      adImpression: (id) => onAdImpression(id)
+    }} />
+{/snippet}
+<ContentPlayer
+  config={contentPlayerConfig}
+  itemActions={currentItemActions}
+  attachmentsView={buffer?.current && itemAsPostModel(buffer.current).attachments ? attachmentsView : undefined}>
+  {#snippet itemView({ item })}
+    {@const postModel = itemAsPostModel(item)}
+    {@const handler = postActionsGenerator.getPostActionsHandler(postModel)}
+    <PostViewer
+      model={postModel}
+      controlsColors={{ active: contentPlayerConfig.playerColors.button, inactive: contentPlayerConfig.playerColors.buttonInactive }}
+      controlActions={handler.actions}
+      trackingParams={contentPlayerConfig.trackingParams}
+      enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
+      enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
+      autoplay="on-appearance"
+      locale={contentPlayerConfig.settings.locale}
+      on={{
+        productClick: (productId) => onProductClick(productId, postModel.id),
+        productImpression: (productId) => onProductImpression(productId, postModel.id),
+        adClick: (adId) => onAdClick(adId),
+        adImpression: (adId) => onAdImpression(adId)
+      }} />
+  {/snippet}
+</ContentPlayer>

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

@@ -1,20 +1,23 @@
-import type { PostType } from '../../core/enums';
 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';
 import type { IPlayerBuffer, IPlayerDataProvider } from '../../ui/player/providers';
 export interface IPostAnalyticsHandler {
-    trackPostOpened: (postType: PostType, postId: string) => void;
+    setOrganizationId: (organizationId: string) => void;
+    trackPostOpened: (postId: string, ownerId: string) => void;
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
     trackAdClick: (adId: string) => void;
     trackAdImpression: (adId: string) => void;
 }
-export type PostPlayerModel = IPostModel;
+export type PostPlayerModel = IPostModel & {
+    analyticsOrganizationId: string | null;
+};
 export type PostsPlayerProps = {
     dataProvider: {
         type: 'buffer';
@@ -24,7 +27,9 @@ export type PostsPlayerProps = {
         provider: IPlayerDataProvider<PostPlayerModel>;
     };
     socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IPostSharingHandler;
     analyticsHandler?: IPostAnalyticsHandler;
+    managementActions?: PostManagementActions;
     playerSettings?: PostPlayerSettings;
     closeOrchestrator: ICloseOrchestrator;
     on?: {
@@ -37,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 {};