@streamscloud/embeddable 17.0.3 → 17.0.5

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');
@@ -296,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>
@@ -348,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>
@@ -455,6 +462,7 @@ const itemActions = $derived.by(() => {
   min-width: 0;
   min-height: 0;
   position: relative;
+  padding-top: 0.625rem;
   padding-bottom: 0.625rem;
   overflow: hidden;
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "17.0.3",
+  "version": "17.0.5",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",