@streamscloud/embeddable 17.0.0-1775740482426 → 17.0.0-1775767961522

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

@@ -1,7 +1,7 @@
-<script lang="ts">import { default as CloseButton } from './cmp.close-button.svelte';
-import { PostActionsGenerator } from '../posts/controls';
+<script lang="ts">import { PostActionsGenerator } from '../posts/controls';
 import { getPostCoverImage, PostModel } from '../posts/model';
 import { PostViewer } from '../posts/post-viewer';
+import { default as CloseButton } from './cmp.close-button.svelte';
 import { FeedPlayerLocalization } from './feed-player-localization';
 import { default as SidebarPanel } from './sidebar/sidebar-panel.svelte';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
@@ -264,8 +264,6 @@ const itemActions = $derived.by(() => {
   class:feed-player--transparent={isTransparentBackground}
   style:--_feed-player--background-image-url={backgroundImageUrl ? `url(${backgroundImageUrl})` : undefined}
   use:handleRootResize>
-
-
   <div class="feed-player__main">
     {#if header}
       <div class="feed-player__header">
@@ -314,8 +312,6 @@ const itemActions = $derived.by(() => {
         {/if}
       </div>
     {/if}
-
-
   </div>
   {#if buffer}
     <div class="feed-player__sidebar-container">
@@ -326,31 +322,33 @@ const itemActions = $derived.by(() => {
       {/if}
 
       {#if sidebarWidth > 0 && currentPostModel}
-        <div class="feed-player__sidebar" class:feed-player__sidebar--with-close={on?.closed} style:--_--feed-player--sidebar--width={SIDEBAR_WIDTH+'px'}
-             transition:slideHorizontally|local>
+        <div
+          class="feed-player__sidebar"
+          class:feed-player__sidebar--with-close={on?.closed}
+          style:--_--feed-player--sidebar--width={SIDEBAR_WIDTH + 'px'}
+          transition:slideHorizontally|local>
           <SidebarPanel
             tabs={visibleTabs}
             activeTabId={activeSidebarTab}
             model={currentPostModel}
             trackingParams={currentTrackingParams}
             selectedProductId={selectedProductId}
-            {recommendedHandler}
-            {playlistHandler}
+            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),
-                playlistSelect: (id) => on?.playlistSelect?.(id)
-              }} />
+              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/information-tab.svelte

@@ -13,7 +13,7 @@ let { model, trackingParams, selectedProductId, on } = $props();
           <div class="information-tab__ad-wrapper">
             <AdCard
               ad={ad}
-              {trackingParams}
+              trackingParams={trackingParams}
               on={{
                 click: on?.adClick,
                 impression: on?.adImpression
@@ -26,11 +26,7 @@ let { model, trackingParams, selectedProductId, on } = $props();
     {#if model.attachments.products.length}
       <div class="information-tab__products">
         {#each model.attachments.products as product (product.id)}
-          <div
-            class="information-tab__product-wrapper"
-            onclick={() => on?.productSelect?.(product.id)}
-            onkeydown={() => {}}
-            role="none">
+          <div class="information-tab__product-wrapper" onclick={() => on?.productSelect?.(product.id)} onkeydown={() => {}} role="none">
             {#if selectedProductId === product.id}
               <div class="information-tab__checkmark">
                 <Icon src={IconCheckmarkCircle24} />
@@ -39,7 +35,7 @@ let { model, trackingParams, selectedProductId, on } = $props();
             <ProductCard
               product={product}
               inert={true}
-              {trackingParams}
+              trackingParams={trackingParams}
               on={{
                 impression: on?.productImpression,
                 buy: on?.productBuy

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

@@ -13,8 +13,9 @@ $effect(() => {
     });
 });
 const currentPostIndex = $derived.by(() => {
-    if (!data)
+    if (!data) {
         return -1;
+    }
     return data.posts.findIndex((p) => p.id === activePostId);
 });
 const formatDate = (dateString) => {
@@ -22,12 +23,15 @@ const formatDate = (dateString) => {
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
     const diffDays = Math.floor(diffMs / 86400000);
-    if (diffDays === 0)
+    if (diffDays === 0) {
         return 'Today';
-    if (diffDays === 1)
+    }
+    if (diffDays === 1) {
         return 'Yesterday';
-    if (diffDays < 7)
+    }
+    if (diffDays < 7) {
         return `${diffDays} days ago`;
+    }
     return date.toLocaleDateString();
 };
 </script>
@@ -45,7 +49,7 @@ const formatDate = (dateString) => {
     <div class="playlist-tab__list">
       {#each data.posts as post (post.id)}
         <PostCard
-          {post}
+          post={post}
           thumbnailWidth={146}
           thumbnailHeight={260}
           thumbnailRadius={8}

package/dist/feed-player/sidebar/post-card.svelte

@@ -12,21 +12,20 @@ const formatDate = (dateString) => {
     const now = new Date();
     const diffMs = now.getTime() - date.getTime();
     const diffDays = Math.floor(diffMs / 86400000);
-    if (diffDays === 0)
+    if (diffDays === 0) {
         return 'Today';
-    if (diffDays === 1)
+    }
+    if (diffDays === 1) {
         return 'Yesterday';
-    if (diffDays < 7)
+    }
+    if (diffDays < 7) {
         return `${diffDays} days ago`;
+    }
     return date.toLocaleDateString();
 };
 </script>
 
-<div
-  class="post-card"
-  onclick={on?.click}
-  onkeydown={() => {}}
-  role="none">
+<div class="post-card" onclick={on?.click} onkeydown={() => {}} role="none">
   <div
     class="post-card__thumbnail"
     class:post-card__thumbnail--active={active}
@@ -45,7 +44,7 @@ const formatDate = (dateString) => {
     {#if post.description}
       <div class="post-card__description">{post.description}</div>
     {/if}
-    <div class="post-card__meta">{formatDate(post.displayDate)}  ·  {localization.viewsLabel(post.viewsCount)}</div>
+    <div class="post-card__meta">{formatDate(post.displayDate)} · {localization.viewsLabel(post.viewsCount)}</div>
   </div>
 </div>
 

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

@@ -3,7 +3,7 @@ import { FeedPlayerLocalization } from '../feed-player-localization';
 import { default as PostCard } from './post-card.svelte';
 import { Image } from '@streamscloud/kit/ui/image';
 import { untrack } from 'svelte';
-const { handler, currentPostId, trackingParams, on } = $props();
+const { handler, currentPostId, trackingParams } = $props();
 const localization = new FeedPlayerLocalization();
 let data = $state.raw(null);
 $effect(() => {
@@ -24,7 +24,7 @@ $effect(() => {
         <div class="recommended-tab__section-title">{localization.relatedPosts}</div>
         <div class="recommended-tab__posts">
           {#each data.relatedPosts as post (post.id)}
-            <PostCard {post} thumbnailWidth={82} thumbnailHeight={146} thumbnailRadius={6} on={{ click: () => on?.postActivate?.(post.id) }} />
+            <PostCard post={post} thumbnailWidth={82} thumbnailHeight={146} thumbnailRadius={6} on={{ click: () => handler.onPostSelect?.(post.id) }} />
           {/each}
         </div>
       </div>
@@ -42,11 +42,9 @@ $effect(() => {
               <div class="recommended-tab__playlist-info">
                 <div class="recommended-tab__playlist-name">{playlist.name}</div>
                 <div class="recommended-tab__playlist-count">{localization.postsCount(playlist.postsCount)}</div>
-                <div
-                  class="recommended-tab__playlist-link"
-                  onclick={() => on?.playlistSelect?.(playlist.id)}
-                  onkeydown={() => {}}
-                  role="none">{localization.showList}</div>
+                <div class="recommended-tab__playlist-link" onclick={() => handler.onPlaylistSelect?.(playlist.id)} onkeydown={() => {}} role="none">
+                  {localization.showList}
+                </div>
               </div>
             </div>
           {/each}
@@ -60,10 +58,7 @@ $effect(() => {
         <div class="recommended-tab__products">
           {#each data.suggestedProducts as product (product.id)}
             <div class="recommended-tab__product-wrapper">
-              <ProductCard
-                {product}
-                {trackingParams}
-                on={{ buy: on?.productBuy }} />
+              <ProductCard product={product} trackingParams={trackingParams} on={{ click: handler.onProductSelect, buy: handler.onProductBuy }} />
             </div>
           {/each}
         </div>

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

@@ -4,11 +4,6 @@ type Props = {
     handler: IFeedPlayerRecommendedHandler;
     currentPostId: string;
     trackingParams: TrackingParams;
-    on?: {
-        postActivate?: (postId: string) => void;
-        playlistSelect?: (playlistId: string) => void;
-        productBuy?: (productId: string) => void;
-    };
 };
 /**
  * Recommended tab — shows related posts, suggested playlists, and suggested products.

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

@@ -22,7 +22,7 @@ let { tabs, activeTabId, model, trackingParams, selectedProductId, recommendedHa
     {#if activeTabId === 'information'}
       <InformationTab
         model={model}
-        {trackingParams}
+        trackingParams={trackingParams}
         selectedProductId={selectedProductId}
         on={{
           productImpression: on.productImpression,
@@ -35,7 +35,7 @@ let { tabs, activeTabId, model, trackingParams, selectedProductId, recommendedHa
       <div class="sidebar-panel__product">
         <ProductCard
           product={selectedProduct}
-          {trackingParams}
+          trackingParams={trackingParams}
           on={{
             click: on.productClick,
             buy: on.productBuy
@@ -47,17 +47,9 @@ let { tabs, activeTabId, model, trackingParams, selectedProductId, recommendedHa
       <RecommendedTab
         handler={recommendedHandler}
         currentPostId={model.id}
-        {trackingParams}
-        on={{
-          postActivate: on.postActivate,
-          playlistSelect: on.playlistSelect,
-          productBuy: on.productBuy
-        }} />
+        trackingParams={trackingParams} />
     {:else if activeTabId === 'playlist' && playlistHandler}
-      <PlaylistTab
-        handler={playlistHandler}
-        activePostId={model.id}
-        on={{ postActivate: on.postActivate }} />
+      <PlaylistTab handler={playlistHandler} activePostId={model.id} on={{ postActivate: on.postActivate }} />
     {/if}
   </div>
 </div>

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

@@ -20,7 +20,6 @@ type Props = {
         adImpression?: (adId: string) => void;
         articleReadMore?: (articleId: string) => void;
         postActivate?: (postId: string) => void;
-        playlistSelect?: (playlistId: string) => void;
     };
 };
 declare const SidebarPanel: import("svelte").Component<Props, {}, "">;

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

@@ -1,9 +1,9 @@
 import type { TrackingParams } from '../marketing-tracking';
 import type { IPostModel } from '../posts/model';
 import type { IPostAnalyticsHandler } from '../posts/posts-player';
-import type { ProductCardModel } from '../products/product-card';
 import type { IPostSharingHandler } from '../posts/sharing';
 import type { IPostSocialInteractionsHandler } from '../posts/social-interactions';
+import type { ProductCardModel } from '../products/product-card';
 import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
 import type { IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 import type { Snippet } from 'svelte';
@@ -29,6 +29,10 @@ export type FeedPlayerRecommendedData = {
 };
 export interface IFeedPlayerRecommendedHandler {
     getRecommendations: (postId: string) => Promise<FeedPlayerRecommendedData>;
+    onPostSelect?: (postId: string) => void;
+    onPlaylistSelect?: (playlistId: string) => void;
+    onProductSelect?: (productId: string) => void;
+    onProductBuy?: (productId: string) => void;
 }
 export type FeedPlayerPlaylistData = {
     name: string;
@@ -52,7 +56,6 @@ export type FeedPlayerProps = {
         postActivated?: (id: string) => void;
         productBuy?: (productId: string) => void;
         articleReadMore?: (articleId: string) => void;
-        playlistSelect?: (playlistId: string) => void;
         closed?: () => void;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "17.0.0-1775740482426",
+  "version": "17.0.0-1775767961522",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",