@streamscloud/embeddable 16.3.2 → 17.0.0-1775767961522

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

@@ -0,0 +1,160 @@
+<script lang="ts">import { ProductCard } from '../../products/product-card';
+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 } = $props();
+const localization = new FeedPlayerLocalization();
+let data = $state.raw(null);
+$effect(() => {
+    const postId = currentPostId;
+    untrack(() => {
+        data = null;
+        handler.getRecommendations(postId).then((result) => {
+            data = result;
+        });
+    });
+});
+</script>
+
+{#if data}
+  <div class="recommended-tab">
+    {#if data.relatedPosts.length}
+      <div class="recommended-tab__section">
+        <div class="recommended-tab__section-title">{localization.relatedPosts}</div>
+        <div class="recommended-tab__posts">
+          {#each data.relatedPosts as post (post.id)}
+            <PostCard post={post} thumbnailWidth={82} thumbnailHeight={146} thumbnailRadius={6} on={{ click: () => handler.onPostSelect?.(post.id) }} />
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    {#if data.suggestedPlaylists.length}
+      <div class="recommended-tab__section">
+        <div class="recommended-tab__section-title">{localization.suggestedPlaylist}</div>
+        <div class="recommended-tab__playlists">
+          {#each data.suggestedPlaylists as playlist (playlist.id)}
+            <div class="recommended-tab__playlist-card">
+              <div class="recommended-tab__playlist-thumbnail">
+                <Image src={playlist.thumbnailUrl} />
+              </div>
+              <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={() => handler.onPlaylistSelect?.(playlist.id)} onkeydown={() => {}} role="none">
+                  {localization.showList}
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    {#if data.suggestedProducts.length}
+      <div class="recommended-tab__section">
+        <div class="recommended-tab__section-title">{localization.suggestedProducts}</div>
+        <div class="recommended-tab__products">
+          {#each data.suggestedProducts as product (product.id)}
+            <div class="recommended-tab__product-wrapper">
+              <ProductCard product={product} trackingParams={trackingParams} on={{ click: handler.onProductSelect, buy: handler.onProductBuy }} />
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<!--
+  @component
+  Recommended tab — shows related posts, suggested playlists, and suggested products.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--recommended-tab--section-gap` | Gap between sections | `24px` |
+  | `--recommended-tab--link-color` | "Show list" link color | `#144ab0` |
+-->
+
+<style>.recommended-tab {
+  --_recommended-tab--background: var(--recommended-tab--background, rgba(255, 255, 255, 0.8));
+  --_recommended-tab--border-color: var(--recommended-tab--border-color, #f9fafb);
+  --_recommended-tab--section-gap: var(--recommended-tab--section-gap, 1.5rem);
+  --_recommended-tab--link-color: var(--recommended-tab--link-color, #144ab0);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_recommended-tab--section-gap);
+  background: var(--_recommended-tab--background);
+  border: 1px solid var(--_recommended-tab--border-color);
+  padding: 1rem 1rem 1.5rem;
+  min-height: 100%;
+}
+.recommended-tab__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.recommended-tab__section-title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+.recommended-tab__posts {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.recommended-tab__playlists {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.recommended-tab__playlist-card {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+  background: white;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+.recommended-tab__playlist-thumbnail {
+  flex-shrink: 0;
+  width: 6.0625rem;
+  height: 9.125rem;
+  --sc-kit--image--object-fit: cover;
+  --sc-kit--image--border-radius: 0.25rem;
+}
+.recommended-tab__playlist-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem 0;
+  min-width: 0;
+  height: 9.125rem;
+}
+.recommended-tab__playlist-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.recommended-tab__playlist-count {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #999;
+  flex: 1;
+}
+.recommended-tab__playlist-link {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--_recommended-tab--link-color);
+  cursor: pointer;
+}
+.recommended-tab__products {
+  display: flex;
+  gap: 0.75rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.recommended-tab__product-wrapper {
+  flex: 0 0 10.0625rem;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { TrackingParams } from '../../marketing-tracking';
+import type { IFeedPlayerRecommendedHandler } from '../types';
+type Props = {
+    handler: IFeedPlayerRecommendedHandler;
+    currentPostId: string;
+    trackingParams: TrackingParams;
+};
+/**
+ * Recommended tab — shows related posts, suggested playlists, and suggested products.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--recommended-tab--section-gap` | Gap between sections | `24px` |
+ * | `--recommended-tab--link-color` | "Show list" link color | `#144ab0` |
+ */
+declare const RecommendedTab: import("svelte").Component<Props, {}, "">;
+type RecommendedTab = ReturnType<typeof RecommendedTab>;
+export default RecommendedTab;

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

@@ -0,0 +1,76 @@
+<script lang="ts">import { ProductCard } from '../../products/product-card';
+import { default as ArticleTab } from './article-tab.svelte';
+import { default as InformationTab } from './information-tab.svelte';
+import { default as PlaylistTab } from './playlist-tab.svelte';
+import { default as RecommendedTab } from './recommended-tab.svelte';
+import { default as SidebarTabBar } from './sidebar-tab-bar.svelte';
+const selectedProduct = $derived.by(() => {
+    if (!selectedProductId || !model.attachments) {
+        return null;
+    }
+    return model.attachments.products.find((p) => p.id === selectedProductId) ?? null;
+});
+let { tabs, activeTabId, model, trackingParams, selectedProductId, recommendedHandler, playlistHandler, on } = $props();
+</script>
+
+<div class="sidebar-panel">
+  {#if tabs.length > 1}
+    <SidebarTabBar tabs={tabs} activeTabId={activeTabId} on={{ tabChange: on.tabChange }} />
+  {/if}
+
+  <div class="sidebar-panel__content">
+    {#if activeTabId === 'information'}
+      <InformationTab
+        model={model}
+        trackingParams={trackingParams}
+        selectedProductId={selectedProductId}
+        on={{
+          productImpression: on.productImpression,
+          productBuy: on.productBuy,
+          productSelect: on.productSelect,
+          adClick: on.adClick,
+          adImpression: on.adImpression
+        }} />
+    {:else if activeTabId === 'product' && selectedProduct}
+      <div class="sidebar-panel__product">
+        <ProductCard
+          product={selectedProduct}
+          trackingParams={trackingParams}
+          on={{
+            click: on.productClick,
+            buy: on.productBuy
+          }} />
+      </div>
+    {:else if activeTabId === 'article'}
+      <ArticleTab model={model} on={{ readMore: on.articleReadMore }} />
+    {:else if activeTabId === 'recommended' && recommendedHandler}
+      <RecommendedTab
+        handler={recommendedHandler}
+        currentPostId={model.id}
+        trackingParams={trackingParams} />
+    {:else if activeTabId === 'playlist' && playlistHandler}
+      <PlaylistTab handler={playlistHandler} activePostId={model.id} on={{ postActivate: on.postActivate }} />
+    {/if}
+  </div>
+</div>
+
+<style>.sidebar-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  overflow: hidden;
+}
+.sidebar-panel__content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+  border-radius: 0.5rem;
+}
+.sidebar-panel__product {
+  padding: 0.75rem;
+  --product-card--aspect-ratio: auto;
+}</style>

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

@@ -0,0 +1,27 @@
+import type { TrackingParams } from '../../marketing-tracking';
+import type { PostModel } from '../../posts/model';
+import type { IFeedPlayerPlaylistHandler, IFeedPlayerRecommendedHandler } from '../types';
+import type { SidebarTab } from './types';
+type Props = {
+    tabs: SidebarTab[];
+    activeTabId: string;
+    model: PostModel;
+    trackingParams: TrackingParams;
+    selectedProductId: string | null;
+    recommendedHandler?: IFeedPlayerRecommendedHandler;
+    playlistHandler?: IFeedPlayerPlaylistHandler;
+    on: {
+        tabChange: (id: string) => void;
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string) => void;
+        productBuy?: (productId: string) => void;
+        productSelect?: (productId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
+        articleReadMore?: (articleId: string) => void;
+        postActivate?: (postId: string) => void;
+    };
+};
+declare const SidebarPanel: import("svelte").Component<Props, {}, "">;
+type SidebarPanel = ReturnType<typeof SidebarPanel>;
+export default SidebarPanel;

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

@@ -0,0 +1,45 @@
+<script lang="ts">let { tabs, activeTabId, on } = $props();
+export {};
+</script>
+
+<div class="sidebar-tab-bar">
+  {#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}
+    </button>
+  {/each}
+</div>
+
+<!--
+  @component
+  Tab bar for the feed player sidebar.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--sidebar-tab-bar--color` | Inactive tab text color | `#9ca3af` |
+  | `--sidebar-tab-bar--color-active` | Active tab text color | `currentColor` |
+-->
+
+<style>.sidebar-tab-bar {
+  --_sidebar-tab-bar--color: var(--sidebar-tab-bar--color, #9ca3af);
+  --_sidebar-tab-bar--color-active: var(--sidebar-tab-bar--color-active, currentColor);
+  display: flex;
+  gap: 2.25rem;
+  flex-shrink: 0;
+}
+.sidebar-tab-bar__tab {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+  color: var(--_sidebar-tab-bar--color);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.sidebar-tab-bar__tab--active {
+  font-weight: 500;
+  color: var(--_sidebar-tab-bar--color-active);
+}</style>

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

@@ -0,0 +1,20 @@
+import type { SidebarTab } from './types';
+type Props = {
+    tabs: SidebarTab[];
+    activeTabId: string;
+    on: {
+        tabChange: (id: string) => void;
+    };
+};
+/**
+ * Tab bar for the feed player sidebar.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sidebar-tab-bar--color` | Inactive tab text color | `#9ca3af` |
+ * | `--sidebar-tab-bar--color-active` | Active tab text color | `currentColor` |
+ */
+declare const SidebarTabBar: import("svelte").Component<Props, {}, "">;
+type SidebarTabBar = ReturnType<typeof SidebarTabBar>;
+export default SidebarTabBar;

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

@@ -0,0 +1,4 @@
+export type SidebarTab = {
+    id: string;
+    label: string;
+};

package/dist/feed-player/sidebar/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,65 @@
+import type { TrackingParams } from '../marketing-tracking';
+import type { IPostModel } from '../posts/model';
+import type { IPostAnalyticsHandler } from '../posts/posts-player';
+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';
+export type FeedPlayerPostPreview = {
+    id: string;
+    thumbnailUrl: string | null;
+    title: string;
+    description: string | null;
+    displayDate: string;
+    viewsCount: number;
+    durationSeconds: number | null;
+};
+export type FeedPlayerSuggestedPlaylist = {
+    id: string;
+    name: string;
+    postsCount: number;
+    thumbnailUrl: string | null;
+};
+export type FeedPlayerRecommendedData = {
+    relatedPosts: FeedPlayerPostPreview[];
+    suggestedPlaylists: FeedPlayerSuggestedPlaylist[];
+    suggestedProducts: ProductCardModel[];
+};
+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;
+    updatedAt: string;
+    posts: FeedPlayerPostPreview[];
+};
+export interface IFeedPlayerPlaylistHandler {
+    getPlaylist: () => Promise<FeedPlayerPlaylistData>;
+}
+export type FeedPlayerProps = {
+    dataProvider: IPlayerDataProvider<IPostModel>;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    sharingHandler?: IPostSharingHandler;
+    analyticsHandler?: IPostAnalyticsHandler;
+    recommendedHandler?: IFeedPlayerRecommendedHandler;
+    playlistHandler?: IFeedPlayerPlaylistHandler;
+    trackingParams?: TrackingParams;
+    settings?: FeedPlayerSettings;
+    header?: Snippet;
+    on?: {
+        postActivated?: (id: string) => void;
+        productBuy?: (productId: string) => void;
+        articleReadMore?: (articleId: string) => void;
+        closed?: () => void;
+    };
+};
+export type FeedPlayerSettings = {
+    locale?: AppLocaleValue;
+    background?: 'solid' | 'glass' | 'transparent';
+};

package/dist/feed-player/types.js

@@ -0,0 +1 @@
+export {};

package/dist/posts/attachments/cmp.attachments.svelte

@@ -44,11 +44,16 @@ const trackingParams = $derived.by(() => {
 
 <style>.post-attachments {
   --_post-attachments--gap: var(--post-attachments--gap, 1.875rem);
+  --ad-card--background-color: var(--sc-player--card-background);
+  --ad-card--price-color: var(--sc-player--price);
+  --ad-card--text--primary: var(--sc-mc-color--text-primary);
+  --ad-card--text-secondary: var(--sc-mc-color--text-secondary);
   --product-card--background-color: var(--sc-player--card-background);
+  --product-card--button--background: var(--sc-player--card-button);
+  --product-card--button--color: var(--sc-mc-color--text-primary);
   --product-card--price-color: var(--sc-player--price);
   --product-card--sale-price-color: var(--sc-player--sale-price);
-  --ad-card--background-color: var(--sc-player--card-background);
-  --ad-card--price-color: var(--sc-player--price);
+  --product-card--text-secondary: var(--sc-mc-color--text-secondary);
   display: flex;
   flex-direction: column;
   gap: var(--_post-attachments--gap);

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

@@ -14,13 +14,14 @@ $effect(() => {
     uiManager.enableControls = enableControls;
 });
 const trackingParams = $derived.by(() => {
-    if (externalTrackingParams || externalTrackingParams === false) {
-        return externalTrackingParams;
+    if (externalTrackingParams === false) {
+        return false;
     }
-    if (model.postType === 'SHORT_VIDEO') {
-        return { shortVideoId: model.id };
+    const shortVideoId = model.postType === 'SHORT_VIDEO' ? model.id : undefined;
+    if (!externalTrackingParams && !shortVideoId) {
+        return false;
     }
-    return false;
+    return { ...externalTrackingParams, shortVideoId };
 });
 const viewerMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
@@ -97,6 +98,8 @@ const variables = $derived.by(() => {
 </div>
 
 <style>.post-viewer {
+  --_post-viewer--button--color: var(--post-viewer--button--color, light-dark(#272727, #000000));
+  --_post-viewer--button--color--inactive: var(--post-viewer--button--color--inactive, rgb(from var(--_post-viewer--button--color) r g b / 60%));
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -115,8 +118,8 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer__controls-panel {
-  --sc-kit--player-button--color: var(--sc-player--button);
-  --sc-kit--player-button--color--inactive: var(--sc-player--button-inactive);
+  --sc-kit--player-button--color: var(--_post-viewer--button--color);
+  --sc-kit--player-button--color--inactive: var(--_post-viewer--button--color--inactive);
   position: absolute;
   left: auto;
   right: 0;

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

@@ -188,4 +188,6 @@ const currentItemActions = $derived.by(() => {
   display: contents;
   --sc-kit--player-button--color: var(--sc-player--button);
   --sc-kit--player-button--color--inactive: var(--sc-player--button-inactive);
+  --post-viewer--button--color: var(--sc-player--button);
+  --post-viewer--button--color--inactive: var(--sc-player--button-inactive);
 }</style>

package/dist/products/product-card/cmp.product-card.svelte

@@ -46,7 +46,7 @@ const onBuyClicked = (event) => {
 };
 </script>
 
-<div class="product-card" class:product-card--with-buy={!!on?.buy} inert={inert} use:trackImpression>
+<div class="product-card" class:product-card--with-buy={!!on?.buy} use:trackImpression>
   <ProportionalContainer ratio={1}>
     <Image src={product.image} />
   </ProportionalContainer>
@@ -84,10 +84,12 @@ const onBuyClicked = (event) => {
     {/if}
   </div>
 
-  {#if enrichedLink}
-    <a href={enrichedLink.href} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
-  {:else if on?.click}
-    <button type="button" onclick={onProductClicked} class="product-card__link" aria-label="none">&nbsp;</button>
+  {#if !inert}
+    {#if enrichedLink}
+      <a href={enrichedLink.href} onclick={onProductClicked} target="_blank" rel="noopener noreferrer" class="product-card__link" aria-label="none">&nbsp;</a>
+    {:else if on?.click}
+      <button type="button" onclick={onProductClicked} class="product-card__link" aria-label="none">&nbsp;</button>
+    {/if}
   {/if}
 </div>
 
@@ -96,8 +98,11 @@ const onBuyClicked = (event) => {
   --_product-card--border-radius: var(--product-card--border-radius, 0.5rem);
   --_product-card--background-color: var(--product-card--background-color, rgb(from light-dark(#ffffff, #000000) r g b / 90%));
   --_product-card--border-color: var(--product-card--border-color, light-dark(#f2f2f2, #000000));
+  --_product-card--button--background: var(--product-card--button--background, light-dark(#f9fafb, #1f2937));
+  --_product-card--button--color: var(--product-card--button--color, #9ca3af);
   --_product-card--price-color: var(--product-card--price-color, inherit);
   --_product-card--sale-price-color: var(--product-card--sale-price-color, inherit);
+  --_product-card--text-secondary: var(--product-card--text-secondary, light-dark(#6b7280, #d1d5db));
   --product-price-color: var(--_product-card--price-color);
   --product-price--sale--color: var(--_product-card--sale-price-color);
   --sc-kit--image--border-radius: 0.25rem;
@@ -169,7 +174,7 @@ const onBuyClicked = (event) => {
 }
 .product-card__description {
   font-weight: 400;
-  color: var(--sc-mc-color--text-secondary);
+  color: var(--_product-card--text-secondary);
   font-size: 0.9375rem;
   line-height: 1.375rem;
   min-height: 1.375rem;
@@ -195,11 +200,10 @@ const onBuyClicked = (event) => {
   position: relative;
   z-index: 1;
   margin-top: 0.625rem;
-  --sc-kit--button--background: light-dark(
-    var(--sc-player--light--card-button, #f2f2f2),
-    var(--sc-player--dark--card-button, #2e2e2e)
-  );
-  --sc-kit--button--font--color: var(--sc-mc-color--text-primary);
+  --sc-kit--button--background: var(--_product-card--button--background);
+  --sc-kit--button--font--color: var(--_product-card--button--color);
+  --sc-kit--button--text--font-size: 0.75rem;
+  --sc-kit--button--icon--font-size: 1rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
@@ -215,7 +219,7 @@ const onBuyClicked = (event) => {
 .product-price {
   --_product-price--color: var(--product-price-color);
   --_product-price--sale--color: var(--product-price--sale--color);
-  --_product-price--before--color: var(--sc-mc-color--text-secondary);
+  --_product-price--before--color: var(--_product-card--text-secondary);
   --_product-price--before--font-size: 0.75em;
   --_product-price--font-size: 1.875em;
   --_product-price--gap: 0.375em;

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

@@ -405,6 +405,8 @@ const stopActivityTracking = () => {
   display: contents;
   --sc-kit--player-button--color: var(--sc-player--button);
   --sc-kit--player-button--color--inactive: var(--sc-player--button-inactive);
+  --post-viewer--button--color: var(--sc-player--button);
+  --post-viewer--button--color--inactive: var(--sc-player--button-inactive);
   --player--overview-panel--background: var(--sc-player--sidebar-background);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.3.2",
+  "version": "17.0.0-1775767961522",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -42,6 +42,10 @@
       "types": "./dist/external-api/index.d.ts",
       "svelte": "./dist/external-api/index.js"
     },
+    "./feed-player": {
+      "types": "./dist/feed-player/index.d.ts",
+      "svelte": "./dist/feed-player/index.js"
+    },
     "./media-center": {
       "types": "./dist/media-center/index.d.ts",
       "svelte": "./dist/media-center/index.js"