@streamscloud/embeddable 13.3.0 → 14.0.0

package/dist/media-center/media-center/streams-feed/streams-feed-handler.svelte.js

@@ -1,6 +1,6 @@
 import { Utils } from '../../../core/utils';
 import { StreamsPlayerBuffer } from '../../../streams/streams-player/streams-player-buffer.svelte';
-import { MediaCenterSettingsHandler } from '../handlers';
+import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import { FeedProvidersGenerator } from './feed-providers-generator';
 export class StreamsFeedHandler {
     _state = $state('inactive');
@@ -8,12 +8,14 @@ export class StreamsFeedHandler {
     _feedPlayerData = $state.raw(null);
     _dataProvider;
     _mediaCenterSettingsHandler;
+    _mediaCenterContentHandler;
     _closeOrchestrator;
     _callbacks;
     constructor(data) {
-        const { dataProvider, mediaCenterSettingsHandler, closeOrchestrator, on } = data;
+        const { dataProvider, mediaCenterSettingsHandler, mediaCenterContentHandler, closeOrchestrator, on } = data;
         this._providersGenerator = new FeedProvidersGenerator(dataProvider);
         this._mediaCenterSettingsHandler = mediaCenterSettingsHandler;
+        this._mediaCenterContentHandler = mediaCenterContentHandler;
         this._dataProvider = dataProvider;
         this._closeOrchestrator = closeOrchestrator;
         this._callbacks = on;
@@ -30,11 +32,43 @@ export class StreamsFeedHandler {
     get feedPlayerProps() {
         return this._feedPlayerData?.props || null;
     }
+    get feedBuffer() {
+        if (!this._feedPlayerData) {
+            return null;
+        }
+        const buffer = this._feedPlayerData.props.dataProvider.type === 'buffer' ? this._feedPlayerData.props.dataProvider.buffer : null;
+        return buffer;
+    }
+    get managementActions() {
+        return {
+            editStream: this._mediaCenterContentHandler.editStream,
+            deleteStreamPage: this._mediaCenterContentHandler.deleteStreamPage
+        };
+    }
+    get canReload() {
+        switch (this._state) {
+            case 'ready': {
+                if (!this.feedBuffer) {
+                    return true;
+                }
+                return this.feedBuffer.currentIndex > 0;
+            }
+            case 'inactive': {
+                return true;
+            }
+            case 'loading': {
+                return false;
+            }
+            default: {
+                Utils.assertUnreachable(this._state);
+            }
+        }
+    }
     deactivate = () => {
         this._state = 'inactive';
         this._feedPlayerData = null;
     };
-    activateWithExistingProvider = async (data) => {
+    activateWithDataProvider = async (data) => {
         const { dataProvider, onStreamActivated } = data;
         const on = {
             streamActivated: (data) => {
@@ -60,8 +94,8 @@ export class StreamsFeedHandler {
         }
     };
     activate = async (options) => {
-        const { filter, init } = options;
-        if (init?.initialStreamPageId && this.tryRestoreState(init.initialStreamPageId, filter)) {
+        const { filter, init, tryRestoreState } = options;
+        if (tryRestoreState && init?.initialStreamPageId && this.tryRestoreState(init.initialStreamPageId, filter)) {
             // Already active with the requested buffer
             return;
         }
@@ -83,22 +117,43 @@ export class StreamsFeedHandler {
             this._state = 'ready';
         }
     };
+    onStreamModified = (data) => {
+        if (this._state !== 'ready') {
+            return false;
+        }
+        const streamStillInTheFeed = data.isPublished && (!this._feedPlayerData?.filter.categoryId || data.categories.includes(this._feedPlayerData.filter.categoryId));
+        if (streamStillInTheFeed) {
+            this.activate({
+                filter: this._feedPlayerData?.filter,
+                init: { initialStreamId: data.stream.id, prefetchedStreams: [data.stream] }
+            });
+        }
+        else {
+            this.feedBuffer?.removeChunkById(data.stream.id);
+        }
+    };
+    onStreamPageDeleted = (data) => {
+        if (this._state !== 'ready') {
+            return false;
+        }
+        this.feedBuffer?.removeItemById(data.id);
+    };
     tryRestoreState = (initialStreamPageId, filter) => {
         if (this._state !== 'ready' || !this._feedPlayerData || !Utils.areEqual(this._feedPlayerData.filter, filter)) {
             return false;
         }
-        const buffer = this._feedPlayerData.props.dataProvider.type === 'buffer' ? this._feedPlayerData.props.dataProvider.buffer : null;
-        if (!buffer) {
+        if (!this.feedBuffer) {
             return false;
         }
-        return buffer.tryActivateItemById(initialStreamPageId);
+        return this.feedBuffer.tryActivateItemById(initialStreamPageId);
     };
     makeStreamsPlayerProps = (data) => {
         const { dataProvider, on } = data;
         return {
             dataProvider: { type: 'buffer', buffer: new StreamsPlayerBuffer(dataProvider) },
             analyticsHandler: this._dataProvider.handlers?.analyticsHandler,
-            postSocialInteractionsHandler: this._dataProvider.handlers?.socialInteractionsHandler,
+            postSocialInteractionsHandler: this._dataProvider.handlers?.postSocialInteractionsHandler,
+            sharingHandler: this._dataProvider.handlers?.streamSharingHandler,
             playerSettings: this._mediaCenterSettingsHandler.playerSettings,
             closeOrchestrator: this._closeOrchestrator,
             on: {

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

@@ -1 +1,2 @@
-export { default as PostControls } from './cmp.controls.svelte';
+export { PostActionsGenerator } from './post-actions-generator.svelte';
+export { PostActionsHandler } from './post-actions-handler.svelte';

package/dist/posts/controls/index.js

@@ -1 +1,2 @@
-export { default as PostControls } from './cmp.controls.svelte';
+export { PostActionsGenerator } from './post-actions-generator.svelte';
+export { PostActionsHandler } from './post-actions-handler.svelte';

package/dist/posts/controls/post-actions-generator.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { PostModel } from '../model';
+import type { IPostSharingHandler } from '../sharing';
+import type { IPostSocialInteractionsHandler } from '../social-interactions';
+import { PostActionsHandler } from './post-actions-handler.svelte';
+export declare class PostActionsGenerator {
+    private socialInteractionsHandler;
+    private sharingHandler;
+    private callbacks;
+    private handlers;
+    constructor(init: {
+        socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+        sharingHandler: IPostSharingHandler | undefined;
+        on: PostActionCallbacks;
+    });
+    getPostActionsHandler: (model: PostModel) => PostActionsHandler;
+}
+type PostActionCallbacks = {
+    attachmentClicked: () => void;
+};
+export {};

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

@@ -0,0 +1,27 @@
+import { PostActionsHandler } from './post-actions-handler.svelte';
+export class PostActionsGenerator {
+    socialInteractionsHandler;
+    sharingHandler;
+    callbacks;
+    handlers = new Map();
+    constructor(init) {
+        this.socialInteractionsHandler = init.socialInteractionsHandler ?? null;
+        this.sharingHandler = init.sharingHandler ?? null;
+        this.callbacks = init.on;
+    }
+    getPostActionsHandler = (model) => {
+        let handler = this.handlers.get(model.id);
+        if (!handler) {
+            handler = new PostActionsHandler({
+                post: model,
+                socialInteractionsHandler: this.socialInteractionsHandler,
+                callbacks: {
+                    attachmentClicked: this.callbacks.attachmentClicked,
+                    shareClicked: this.sharingHandler ? () => this.sharingHandler?.share(model.id) : undefined
+                }
+            });
+            this.handlers.set(model.id, handler);
+        }
+        return handler;
+    };
+}

package/dist/posts/controls/post-actions-handler.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { PostModel } from '../model';
+import type { IPostSocialInteractionsHandler } from '../social-interactions';
+import { IconColor } from '../../ui/icon';
+export declare class PostActionsHandler {
+    readonly actions: PostAction[];
+    private post;
+    private socialInteractionsHandler;
+    private callbacks;
+    private isLikedStore;
+    constructor(init: {
+        post: PostModel;
+        socialInteractionsHandler: IPostSocialInteractionsHandler | null;
+        callbacks: PostActionCallbacks;
+    });
+    private initIsLikedStore;
+}
+type PostAction = {
+    icon: string;
+    iconColor?: IconColor;
+    callback: () => void;
+};
+type PostActionCallbacks = {
+    attachmentClicked: () => void;
+    shareClicked?: () => void;
+};
+export {};

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;
@@ -96,6 +82,115 @@ const contentPlayerConfig = new ContentPlayerConfig({
         }
     }
 });
+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>