@streamscloud/embeddable 17.0.2 → 17.0.4

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

@@ -22,6 +22,8 @@ $effect(() => {
     }
 });
 const localization = new FeedPlayerLocalization();
+// ── Mode ──
+const isPreview = $derived(settings?.mode === 'preview');
 // ── Background mode ──
 const isGlassBackground = $derived(settings?.background === 'glass');
 const isTransparentBackground = $derived(settings?.background === 'transparent');
@@ -249,8 +251,12 @@ const onAdImpression = (adId) => {
 };
 // ── Action buttons (like, share, attachments toggle) ──
 const postActionsGenerator = untrack(() => new PostActionsGenerator({
-    socialInteractionsHandler,
-    sharingHandler,
+    get socialInteractionsHandler() {
+        return socialInteractionsHandler;
+    },
+    get sharingHandler() {
+        return sharingHandler;
+    },
     on: { attachmentClicked: () => (sidebarCollapsed = !sidebarCollapsed) }
 }));
 const itemActions = $derived.by(() => {
@@ -292,13 +298,15 @@ const itemActions = $derived.by(() => {
                 enableAttachments={false}
                 enableControls={showControlsOverlay}
                 autoplay="on-appearance"
-                on={{
-                  productClick: onProductClick,
-                  productImpression: onProductImpression,
-                  adClick: onAdClick,
-                  adImpression: onAdImpression,
-                  articleReadMore: (id) => on?.articleReadMore?.(id)
-                }} />
+                on={isPreview
+                  ? {}
+                  : {
+                      productClick: onProductClick,
+                      productImpression: onProductImpression,
+                      adClick: onAdClick,
+                      adImpression: onAdImpression,
+                      articleReadMore: (id) => on?.articleReadMore?.(id)
+                    }} />
             </div>
           {/snippet}
         </FeedSlider>
@@ -344,22 +352,25 @@ const itemActions = $derived.by(() => {
             model={currentPostModel}
             trackingParams={currentTrackingParams}
             selectedProductId={selectedProductId}
+            interactionsDisabled={isPreview}
             recommendedHandler={recommendedHandler}
             playlistHandler={playlistHandler}
-            on={{
-              tabChange: handleTabChange,
-              productClick: onProductClick,
-              productImpression: onProductImpression,
-              productBuy: on?.productBuy,
-              productSelect: (id) => {
-                selectedProductId = id;
-                handleTabChange('product');
-              },
-              adClick: onAdClick,
-              adImpression: onAdImpression,
-              articleReadMore: on?.articleReadMore,
-              postActivate: (id) => buffer?.tryActivateItemById(id)
-            }} />
+            on={isPreview
+              ? { tabChange: () => {} }
+              : {
+                  tabChange: handleTabChange,
+                  productClick: onProductClick,
+                  productImpression: onProductImpression,
+                  productBuy: on?.productBuy,
+                  productSelect: (id) => {
+                    selectedProductId = id;
+                    handleTabChange('product');
+                  },
+                  adClick: onAdClick,
+                  adImpression: onAdImpression,
+                  articleReadMore: on?.articleReadMore,
+                  postActivate: (id) => buffer?.tryActivateItemById(id)
+                }} />
         </div>
       {/if}
     </div>

package/dist/feed-player/sidebar/sidebar-panel.svelte

@@ -10,11 +10,11 @@ const selectedProduct = $derived.by(() => {
     }
     return model.attachments.products.find((p) => p.id === selectedProductId) ?? null;
 });
-let { tabs, activeTabId, model, trackingParams, selectedProductId, recommendedHandler, playlistHandler, on } = $props();
+let { tabs, activeTabId, model, trackingParams, selectedProductId, interactionsDisabled, recommendedHandler, playlistHandler, on } = $props();
 </script>
 
 <div class="sidebar-panel">
-  <SidebarTabBar tabs={tabs} activeTabId={activeTabId} on={{ tabChange: on.tabChange }} />
+  <SidebarTabBar tabs={tabs} activeTabId={activeTabId} disabled={interactionsDisabled} on={{ tabChange: on.tabChange }} />
 
   <div class="sidebar-panel__content">
     {#if activeTabId === 'information'}

package/dist/feed-player/sidebar/sidebar-panel.svelte.d.ts

@@ -8,6 +8,7 @@ type Props = {
     model: PostModel;
     trackingParams: TrackingParams;
     selectedProductId: string | null;
+    interactionsDisabled?: boolean;
     recommendedHandler?: IFeedPlayerRecommendedHandler;
     playlistHandler?: IFeedPlayerPlaylistHandler;
     on: {

package/dist/feed-player/sidebar/sidebar-tab-bar.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">let { tabs, activeTabId, on } = $props();
+<script lang="ts">let { tabs, activeTabId, disabled, on } = $props();
 export {};
 </script>
 
-<div class="sidebar-tab-bar">
+<div class="sidebar-tab-bar" class:sidebar-tab-bar--disabled={disabled}>
   {#each tabs as tab (tab.id)}
     <button type="button" class="sidebar-tab-bar__tab" class:sidebar-tab-bar__tab--active={tab.id === activeTabId} onclick={() => on.tabChange(tab.id)}>
       {tab.label}
@@ -42,4 +42,8 @@ export {};
 .sidebar-tab-bar__tab--active {
   font-weight: 500;
   color: var(--_sidebar-tab-bar--color-active);
+}
+.sidebar-tab-bar--disabled .sidebar-tab-bar__tab:not(.sidebar-tab-bar__tab--active) {
+  pointer-events: none;
+  opacity: 0.5;
 }</style>

package/dist/feed-player/sidebar/sidebar-tab-bar.svelte.d.ts

@@ -2,6 +2,7 @@ import type { SidebarTab } from './types';
 type Props = {
     tabs: SidebarTab[];
     activeTabId: string;
+    disabled?: boolean;
     on: {
         tabChange: (id: string) => void;
     };

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

@@ -63,4 +63,5 @@ export type FeedPlayerProps = {
 export type FeedPlayerSettings = {
     locale?: AppLocaleValue;
     background?: 'solid' | 'glass' | 'transparent';
+    mode?: 'default' | 'preview';
 };

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

@@ -1,2 +1,2 @@
 export { PostActionsGenerator } from './post-actions-generator.svelte';
-export { PostActionsHandler } from './post-actions-handler.svelte';
+export { PostActionsHandler, type PostActionsHandlerProps } from './post-actions-handler.svelte';

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

@@ -3,18 +3,16 @@ 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 props;
     private handlers;
-    constructor(init: {
-        socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
-        sharingHandler: IPostSharingHandler | undefined;
-        on: PostActionCallbacks;
-    });
+    constructor(props: PostActionsGeneratorProps);
     getPostActionsHandler: (model: PostModel) => PostActionsHandler;
 }
-type PostActionCallbacks = {
-    attachmentClicked: () => void;
+type PostActionsGeneratorProps = {
+    readonly socialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+    readonly sharingHandler: IPostSharingHandler | undefined;
+    readonly on: {
+        attachmentClicked: () => void;
+    };
 };
 export {};

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

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

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

@@ -4,23 +4,20 @@ import type { IconColor } from '@streamscloud/kit/ui/icon';
 export declare class PostActionsHandler {
     readonly actions: PostAction[];
     private post;
-    private socialInteractionsHandler;
-    private callbacks;
+    private props;
     private isLikedStore;
-    constructor(init: {
-        post: PostModel;
-        socialInteractionsHandler: IPostSocialInteractionsHandler | null;
-        callbacks: PostActionCallbacks;
-    });
+    constructor(props: PostActionsHandlerProps);
     private initIsLikedStore;
 }
+export type PostActionsHandlerProps = {
+    post: PostModel;
+    readonly socialInteractionsHandler: IPostSocialInteractionsHandler | null;
+    readonly shareClicked: (() => void) | undefined;
+    attachmentClicked: () => void;
+};
 type PostAction = {
     icon: string;
     iconColor?: IconColor;
     callback: () => void;
 };
-type PostActionCallbacks = {
-    attachmentClicked: () => void;
-    shareClicked?: () => void;
-};
 export {};

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

@@ -9,19 +9,20 @@ export class PostActionsHandler {
     actions = $derived.by(() => {
         const result = [];
         if (this.post.attachments) {
-            result.push({ icon: IconShoppingBag, callback: this.callbacks.attachmentClicked });
+            result.push({ icon: IconShoppingBag, callback: this.props.attachmentClicked });
         }
-        if (this.post.enableSocialInteractions && this.socialInteractionsHandler) {
+        if (this.post.enableSocialInteractions && this.props.socialInteractionsHandler) {
             result.push({
                 icon: this.isLikedStore.isLiked ? IconHeartFilled : IconHeart,
                 iconColor: this.isLikedStore.isLiked ? 'red' : undefined,
-                callback: () => this.socialInteractionsHandler?.toggleLike(this.post.id)
+                callback: () => this.props.socialInteractionsHandler?.toggleLike(this.post.id)
             });
         }
-        if (this.callbacks.shareClicked) {
+        const shareClicked = this.props.shareClicked;
+        if (shareClicked) {
             result.push({
                 icon: IconShare,
-                callback: () => this.callbacks.shareClicked?.()
+                callback: () => shareClicked()
             });
         }
         if (this.post.media && !this.post.media.currentItem.isImage) {
@@ -33,23 +34,22 @@ export class PostActionsHandler {
         return result;
     });
     post;
-    socialInteractionsHandler;
-    callbacks;
+    props;
     isLikedStore = $state.raw({
         get isLiked() {
             return false;
         }
     });
-    constructor(init) {
-        this.post = init.post;
-        this.socialInteractionsHandler = init.socialInteractionsHandler;
-        this.callbacks = init.callbacks;
+    constructor(props) {
+        this.post = props.post;
+        this.props = props;
         this.initIsLikedStore();
     }
     initIsLikedStore = async () => {
-        if (!this.socialInteractionsHandler) {
+        const handler = this.props.socialInteractionsHandler;
+        if (!handler) {
             return;
         }
-        this.isLikedStore = await this.socialInteractionsHandler.getIsLiked(this.post.id);
+        this.isLikedStore = await handler.getIsLiked(this.post.id);
     };
 }

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

@@ -79,8 +79,12 @@ const contentPlayerConfig = untrack(() => new PlayerConfig({
     }
 }));
 const postActionsGenerator = untrack(() => new PostActionsGenerator({
-    socialInteractionsHandler,
-    sharingHandler,
+    get socialInteractionsHandler() {
+        return socialInteractionsHandler;
+    },
+    get sharingHandler() {
+        return sharingHandler;
+    },
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
 }));
 const onProductClick = (id, postId) => {

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

@@ -3,15 +3,9 @@ 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 props;
     private handlers;
-    constructor(init: {
-        postSocialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
-        sharingHandler: IStreamSharingHandler | undefined;
-        on: StreamActionCallbacks;
-    });
+    constructor(props: StreamActionsGeneratorProps);
     getPostActionsHandler: (data: {
         model: PostModel;
         streamId: string;
@@ -25,7 +19,11 @@ export declare class StreamActionsGenerator {
         callback: () => (void | Promise<void>) | undefined;
     }[];
 }
-type StreamActionCallbacks = {
-    attachmentClicked: () => void;
+type StreamActionsGeneratorProps = {
+    readonly postSocialInteractionsHandler: IPostSocialInteractionsHandler | undefined;
+    readonly sharingHandler: IStreamSharingHandler | undefined;
+    readonly on: {
+        attachmentClicked: () => void;
+    };
 };
 export {};

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

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

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

@@ -100,8 +100,12 @@ const contentPlayerConfig = untrack(() => new PlayerConfig({
     }
 }));
 const streamActionsGenerator = untrack(() => new StreamActionsGenerator({
-    postSocialInteractionsHandler,
-    sharingHandler,
+    get postSocialInteractionsHandler() {
+        return postSocialInteractionsHandler;
+    },
+    get sharingHandler() {
+        return sharingHandler;
+    },
     on: { attachmentClicked: () => (contentPlayerConfig.uiManager.attachmentsCollapsed = !contentPlayerConfig.uiManager.attachmentsCollapsed) }
 }));
 const itemAsPostModel = (item) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "17.0.2",
+  "version": "17.0.4",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -146,7 +146,7 @@
     }
   },
   "peerDependencies": {
-    "@streamscloud/kit": "^0.2.28",
+    "@streamscloud/kit": ">=0.2.28",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "svelte": "^5.51.0"
   },