@streamscloud/embeddable 17.0.4 → 18.0.0

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

@@ -1,169 +0,0 @@
-<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;
-        const load = async () => {
-            data = await handler.getRecommendations(postId);
-        };
-        void load();
-    });
-});
-</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" onclick={() => handler.onPlaylistSelect?.(playlist.id)} onkeydown={() => {}} role="none">
-              <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={(e: MouseEvent) => {
-                    e.stopPropagation();
-                    handler.onPlaylistShow?.(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;
-  cursor: pointer;
-}
-.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

@@ -1,19 +0,0 @@
-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

@@ -1,71 +0,0 @@
-<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, interactionsDisabled, recommendedHandler, playlistHandler, on } = $props();
-</script>
-
-<div class="sidebar-panel">
-  <SidebarTabBar tabs={tabs} activeTabId={activeTabId} disabled={interactionsDisabled} on={{ tabChange: on.tabChange }} />
-
-  <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

@@ -1,28 +0,0 @@
-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;
-    interactionsDisabled?: boolean;
-    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

@@ -1,49 +0,0 @@
-<script lang="ts">let { tabs, activeTabId, disabled, on } = $props();
-export {};
-</script>
-
-<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}
-    </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);
-}
-.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

@@ -1,21 +0,0 @@
-import type { SidebarTab } from './types';
-type Props = {
-    tabs: SidebarTab[];
-    activeTabId: string;
-    disabled?: boolean;
-    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

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

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

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

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

@@ -1,67 +0,0 @@
-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 | null;
-    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;
-    onPlaylistShow?: (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';
-    mode?: 'default' | 'preview';
-};

package/dist/feed-player/types.js

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