@streamscloud/embeddable 17.0.4 → 18.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "17.0.4",
+  "version": "18.0.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -42,10 +42,6 @@
       "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"

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

@@ -1,40 +0,0 @@
-<script lang="ts">import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
-import { Icon } from '@streamscloud/kit/ui/icon';
-const { on } = $props();
-</script>
-
-<button type="button" class="close-button" onclick={() => on?.click?.()}>
-  <Icon src={IconDismiss} />
-</button>
-
-<!--
-  @component
-  Round close button — 32px circle with dismiss icon.
-
-  ### CSS Custom Properties
-  | Property | Description | Default |
-  |---|---|---|
-  | `--sc-fp--close-button--size` | Button size | `32px` |
-  | `--sc-fp--close-button--background` | Button background | `light-dark(#f1f6fd, #2a2a2a)` |
-  | `--sc-fp--close-button--color` | Icon color | `currentColor` |
-  | `--sc-fp--close-button--icon-size` | Icon size | `16px` |
--->
-
-<style>.close-button {
-  --_close-button--size: var(--sc-fp--close-button--size, 2rem);
-  --_close-button--background: var(--sc-fp--close-button--background, light-dark(#f1f6fd, #2a2a2a));
-  --_close-button--color: var(--sc-fp--close-button--color, light-dark(#000000, #ffffff));
-  --_close-button--icon-size: var(--sc-fp--close-button--icon-size, 1rem);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--_close-button--size);
-  height: var(--_close-button--size);
-  padding: 0;
-  background: var(--_close-button--background);
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  --sc-kit--icon--size: var(--_close-button--icon-size);
-  --sc-kit--icon--color: var(--_close-button--color);
-}</style>

package/dist/feed-player/cmp.close-button.svelte.d.ts

@@ -1,19 +0,0 @@
-type Props = {
-    on?: {
-        click?: () => void;
-    };
-};
-/**
- * Round close button — 32px circle with dismiss icon.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-fp--close-button--size` | Button size | `32px` |
- * | `--sc-fp--close-button--background` | Button background | `light-dark(#f1f6fd, #2a2a2a)` |
- * | `--sc-fp--close-button--color` | Icon color | `currentColor` |
- * | `--sc-fp--close-button--icon-size` | Icon size | `16px` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,542 +0,0 @@
-<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';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
-import IconInfo from '@fluentui/svg-icons/icons/info_24_regular.svg?raw';
-import { AppLocale } from '@streamscloud/kit/core/locale';
-import { slideHorizontally } from '@streamscloud/kit/core/transitions';
-import { preloadImage } from '@streamscloud/kit/core/utils';
-import { Loading } from '@streamscloud/kit/ui/loading';
-import { PlayerButtons } from '@streamscloud/kit/ui/player/buttons';
-import { FeedSlider } from '@streamscloud/kit/ui/player/feed-slider';
-import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
-import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, sharingHandler, analyticsHandler, recommendedHandler, playlistHandler, trackingParams: externalTrackingParams, settings, header, on } = $props();
-$effect(() => {
-    if (settings?.locale) {
-        AppLocale.change(settings.locale);
-    }
-});
-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');
-let backgroundImageUrl = $state(null);
-// ── Buffer ──
-let buffer = $state.raw(null);
-$effect(() => {
-    void dataProvider;
-    untrack(() => {
-        buffer = null;
-        backgroundImageUrl = null;
-        mappedPostsCache = {};
-        initBuffer();
-    });
-});
-const initBuffer = async () => {
-    const newBuffer = initBufferFromProvider(dataProvider);
-    await newBuffer.ensureWarmedUp();
-    if (newBuffer.loaded.length) {
-        const coverUrl = getPostCoverImage(newBuffer.loaded[0]);
-        await preloadImage(coverUrl);
-        backgroundImageUrl = coverUrl;
-    }
-    buffer = newBuffer;
-};
-// ── PostModel cache ──
-let mappedPostsCache = {};
-const itemAsPostModel = (item) => {
-    if (mappedPostsCache[item.id]) {
-        return mappedPostsCache[item.id];
-    }
-    const postModel = new PostModel(item);
-    mappedPostsCache[item.id] = postModel;
-    return postModel;
-};
-// ── Current post ──
-const currentPostModel = $derived.by(() => {
-    if (!buffer?.current) {
-        return null;
-    }
-    return itemAsPostModel(buffer.current);
-});
-const currentTrackingParams = $derived.by(() => {
-    if (externalTrackingParams === false) {
-        return false;
-    }
-    const shortVideoId = currentPostModel?.postType === 'SHORT_VIDEO' ? currentPostModel.id : undefined;
-    if (!externalTrackingParams && !shortVideoId) {
-        return false;
-    }
-    return { ...externalTrackingParams, shortVideoId };
-});
-const hasProducts = $derived(!!currentPostModel?.attachments && currentPostModel.attachments.products.length > 0);
-const isArticle = $derived(currentPostModel?.postType === 'ARTICLE' && !!currentPostModel.articleId);
-const hasAttachments = $derived(!!currentPostModel?.attachments);
-// ── Sidebar tabs ──
-let preferredTab = $state('information');
-let activeSidebarTab = $state('information');
-let selectedProductId = $state(null);
-const visibleTabs = $derived.by(() => {
-    const tabs = [];
-    if (hasAttachments) {
-        tabs.push({ id: 'information', label: localization.tabInformation });
-    }
-    if (hasProducts) {
-        tabs.push({ id: 'product', label: localization.tabProduct });
-    }
-    if (isArticle) {
-        tabs.push({ id: 'article', label: localization.tabArticle });
-    }
-    if (recommendedHandler) {
-        tabs.push({ id: 'recommended', label: localization.tabRecommended });
-    }
-    if (playlistHandler) {
-        tabs.push({ id: 'playlist', label: localization.tabPlaylist });
-    }
-    return tabs;
-});
-const sidebarVisible = $derived(visibleTabs.length > 0);
-const handleTabChange = (id) => {
-    preferredTab = id;
-    activeSidebarTab = id;
-};
-// Tab resolution: preferred tab if available, otherwise first visible
-$effect(() => {
-    const tabs = visibleTabs;
-    if (tabs.length === 0) {
-        return;
-    }
-    if (tabs.some((t) => t.id === preferredTab)) {
-        activeSidebarTab = preferredTab;
-    }
-    else {
-        activeSidebarTab = tabs[0].id;
-    }
-});
-// Reset selectedProductId on post change
-$effect(() => {
-    const post = currentPostModel;
-    untrack(() => {
-        if (post?.attachments && post.attachments.products.length > 0) {
-            selectedProductId = post.attachments.products[0].id;
-        }
-        else {
-            selectedProductId = null;
-        }
-    });
-});
-// ── Sidebar collapsed (user toggle) ──
-let sidebarCollapsed = $state(false);
-// ── Layout ──
-const SAFE_AREA_SIZE = 80;
-const SIDEBAR_WIDTH = 378;
-const MOBILE_BREAKPOINT = 576;
-// Measured from the root element
-let totalWidth = $state(0);
-let isMobileView = $derived(totalWidth <= MOBILE_BREAKPOINT);
-const handleRootResize = (node) => {
-    const observer = new ResizeObserver(([entry]) => {
-        totalWidth = entry.contentRect.width;
-    });
-    observer.observe(node);
-    return { destroy: () => observer.disconnect() };
-};
-// Measured from header
-let headerHeight = $state(0);
-const handleHeaderResize = (node) => {
-    const observer = new ResizeObserver(([entry]) => {
-        headerHeight = entry.contentRect.height;
-    });
-    observer.observe(node);
-    return { destroy: () => observer.disconnect() };
-};
-// Measured from video-area
-let contentViewWidth = $state(0);
-let videoAreaWidth = $state(0);
-let videoAreaHeight = $state(0);
-// Priority: sidebar hides first, then video shrinks, then controls go overlay
-// Step 1: Would sidebar + video + safe areas fit?
-const sidebarCanBeShown = $derived.by(() => {
-    if (!sidebarVisible || isMobileView || videoAreaHeight === 0) {
-        return false;
-    }
-    // Estimate video width from height at 9:16
-    const videoW = videoAreaHeight * (9 / 16);
-    const areaWithSidebar = totalWidth - SIDEBAR_WIDTH;
-    const sideSpace = (areaWithSidebar - videoW) / 2;
-    return sideSpace >= SAFE_AREA_SIZE;
-});
-const sidebarWidth = $derived(sidebarCanBeShown && !sidebarCollapsed ? SIDEBAR_WIDTH : 0);
-// Step 2: Controls overlay — only when side space without sidebar is still too small
-const sidePanelsMaxWidth = $derived((videoAreaWidth - contentViewWidth) / 2);
-const showControlsOverlay = $derived(isMobileView);
-// ResizeObserver on video-area — same logic as generic player's handleSliderMounted
-const handleVideoAreaResize = (node) => {
-    const observer = new ResizeObserver(([entry]) => {
-        const { width: areaW, height: areaH } = entry.contentRect;
-        videoAreaWidth = areaW;
-        videoAreaHeight = areaH;
-        const ratio = 9 / 16;
-        let width;
-        let height;
-        let margin;
-        let contentWidthNumber = areaW;
-        if (isMobileView) {
-            width = '100%';
-            height = '100%';
-            margin = '0';
-        }
-        else {
-            // On desktop, reserve safe area on each side for controls
-            const maxContentWidth = areaW - 2 * SAFE_AREA_SIZE;
-            const heightBasedWidth = areaH * ratio;
-            contentWidthNumber = Math.min(maxContentWidth, heightBasedWidth);
-            width = `${contentWidthNumber}px`;
-            height = `${contentWidthNumber / ratio}px`;
-            margin = 'auto';
-        }
-        node.style.setProperty('--_feed-player--content--width', width);
-        node.style.setProperty('--_feed-player--content--height', height);
-        node.style.setProperty('--_feed-player--content--margin', margin);
-        contentViewWidth = contentWidthNumber;
-    });
-    observer.observe(node);
-    return { destroy: () => observer.disconnect() };
-};
-// ── Callbacks ──
-const handleItemActivated = (id) => {
-    if (buffer) {
-        const item = buffer.loaded.find((i) => i.id === id);
-        if (item) {
-            backgroundImageUrl = getPostCoverImage(item);
-            if (item.postType === 'SHORT_VIDEO') {
-                analyticsHandler?.trackShortVideoView(id);
-            }
-            else if (item.postType) {
-                analyticsHandler?.trackPostOpened(item.postType, id);
-            }
-        }
-    }
-    on?.postActivated?.(id);
-};
-// ── Analytics callbacks ──
-const onProductClick = (productId) => {
-    if (!currentPostModel) {
-        return;
-    }
-    if (currentPostModel.postType === 'SHORT_VIDEO') {
-        analyticsHandler?.trackShortVideoProductClick(productId, currentPostModel.id);
-    }
-};
-const onProductImpression = (productId) => {
-    if (!currentPostModel) {
-        return;
-    }
-    if (currentPostModel.postType === 'SHORT_VIDEO') {
-        analyticsHandler?.trackShortVideoProductImpression(productId, currentPostModel.id);
-    }
-};
-const onAdClick = (adId) => {
-    analyticsHandler?.trackAdClick(adId);
-};
-const onAdImpression = (adId) => {
-    analyticsHandler?.trackAdImpression(adId);
-};
-// ── Action buttons (like, share, attachments toggle) ──
-const postActionsGenerator = untrack(() => new PostActionsGenerator({
-    get socialInteractionsHandler() {
-        return socialInteractionsHandler;
-    },
-    get sharingHandler() {
-        return sharingHandler;
-    },
-    on: { attachmentClicked: () => (sidebarCollapsed = !sidebarCollapsed) }
-}));
-const itemActions = $derived.by(() => {
-    if (!currentPostModel) {
-        return [];
-    }
-    const handler = postActionsGenerator.getPostActionsHandler(currentPostModel);
-    const actions = [...handler.actions];
-    if (sidebarCanBeShown) {
-        actions.push({ icon: IconInfo, callback: () => (sidebarCollapsed = !sidebarCollapsed) });
-    }
-    return actions;
-});
-</script>
-
-<div
-  class="feed-player"
-  class:feed-player--glass={isGlassBackground}
-  class:feed-player--glass-active={isGlassBackground && backgroundImageUrl}
-  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" use:handleHeaderResize>
-        {@render header()}
-      </div>
-    {/if}
-    {#if buffer}
-      <div class="feed-player__video-area" class:feed-player__video-area--with-header={!!header} use:handleVideoAreaResize>
-        <FeedSlider buffer={buffer} on={{ itemActivated: handleItemActivated }}>
-          {#snippet children({ item })}
-            {@const postModel = itemAsPostModel(item)}
-            <div class="feed-player__content">
-              <PostViewer
-                model={postModel}
-                controlActions={itemActions}
-                trackingParams={externalTrackingParams ?? null}
-                enableAttachments={false}
-                enableControls={showControlsOverlay}
-                autoplay="on-appearance"
-                on={isPreview
-                  ? {}
-                  : {
-                      productClick: onProductClick,
-                      productImpression: onProductImpression,
-                      adClick: onAdClick,
-                      adImpression: onAdImpression,
-                      articleReadMore: (id) => on?.articleReadMore?.(id)
-                    }} />
-            </div>
-          {/snippet}
-        </FeedSlider>
-
-        {#if !showControlsOverlay}
-          <div class="feed-player__controls" style:--_feed-player--controls-width="{sidePanelsMaxWidth}px">
-            <div class="feed-player__controls-spacer">&nbsp;</div>
-            <div class="feed-player__controls-left">
-              <PlayerButtons actions={itemActions} scaleEffect={true} />
-
-              {#if buffer && buffer.loaded.length > 1}
-                <div class="feed-player__navigation">
-                  <PlayerButtons actions={[{ icon: IconChevronUp, callback: buffer.loadPrevious, disabled: !buffer.canLoadPrevious }]} scaleEffect={true} />
-                  <PlayerButtons actions={[{ icon: IconChevronDown, callback: buffer.loadNext, disabled: !buffer.canLoadNext }]} scaleEffect={true} />
-                </div>
-              {/if}
-            </div>
-            <div class="feed-player__controls-spacer feed-player__controls-spacer--right">&nbsp;</div>
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-  {#if buffer}
-    <div class="feed-player__sidebar-container">
-      {#if on?.closed}
-        <div class="feed-player__close">
-          <CloseButton on={{ click: on.closed }} />
-        </div>
-      {/if}
-
-      {#if sidebarWidth > 0 && currentPostModel}
-        <div
-          class="feed-player__sidebar"
-          class:feed-player__sidebar--with-close={on?.closed}
-          class:feed-player__sidebar--with-header={!on?.closed && !!header}
-          style:--_--feed-player--sidebar--width={SIDEBAR_WIDTH + 'px'}
-          style:--_--feed-player--header-height={headerHeight + 'px'}
-          transition:slideHorizontally|local>
-          <SidebarPanel
-            tabs={visibleTabs}
-            activeTabId={activeSidebarTab}
-            model={currentPostModel}
-            trackingParams={currentTrackingParams}
-            selectedProductId={selectedProductId}
-            interactionsDisabled={isPreview}
-            recommendedHandler={recommendedHandler}
-            playlistHandler={playlistHandler}
-            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>
-  {/if}
-  {#if !buffer}
-    <Loading positionAbsoluteCenter={true} timeout={500} />
-  {/if}
-</div>
-
-<!--
-  @component
-  Vertical post feed player with a tabbed sidebar for products, articles, and recommendations.
-
-  ### CSS Custom Properties
-  | Property | Description | Default |
-  |---|---|---|
-  | `--sc-fp--background` | Player background | `light-dark(white, black)` |
-  | `--sc-fp--padding-left` | Left padding for video area offset | `0px` |
-  | `--sc-fp--button--color` | Control button color | inherited |
-  | `--sc-fp--button--color--inactive` | Inactive control button color | inherited |
--->
-
-<style>.feed-player {
-  --_feed-player--background: var(--sc-fp--background, light-dark(#ffffff, #000000));
-  --_feed-player--padding-left: var(--sc-fp--padding-left, 0px);
-  --_feed-player--button--color: var(--sc-fp--button--color);
-  --_feed-player--button--color--inactive: var(--sc-fp--button--color--inactive);
-  --post-viewer--button--color: var(--_feed-player--button--color);
-  --post-viewer--button--color--inactive: var(--_feed-player--button--color--inactive);
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  padding-left: var(--_feed-player--padding-left);
-  background: var(--_feed-player--background);
-  overflow: hidden;
-  container-type: inline-size;
-}
-.feed-player::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  backdrop-filter: blur(1.875rem);
-  background-color: rgb(from var(--_feed-player--background) r g b/50%);
-  display: none;
-  z-index: 0;
-}
-.feed-player--glass::before {
-  display: block;
-}
-.feed-player--glass-active {
-  background-image: var(--_feed-player--background-image-url);
-  background-size: cover;
-  background-position: center;
-}
-.feed-player--transparent {
-  background: transparent;
-}
-.feed-player__main {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-  position: relative;
-  z-index: 1;
-}
-.feed-player__header {
-  position: relative;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1;
-  pointer-events: none;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .feed-player__header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 2;
-  }
-}
-.feed-player__video-area {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  position: relative;
-  padding-bottom: 0.625rem;
-  overflow: hidden;
-}
-.feed-player__video-area--with-header {
-  padding-top: 0;
-}
-.feed-player__video-area {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .feed-player__video-area {
-    padding: 0;
-  }
-}
-.feed-player__content {
-  width: var(--_feed-player--content--width, 100%);
-  height: var(--_feed-player--content--height, 100%);
-  margin: var(--_feed-player--content--margin, 0);
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.feed-player__controls {
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: var(--_feed-player--controls-width);
-  display: flex;
-  padding: 0.625rem 0 1.875rem;
-  pointer-events: none;
-}
-.feed-player__controls-spacer {
-  flex: 0 0 1rem;
-}
-.feed-player__controls-spacer--right {
-  flex: 1;
-}
-.feed-player__controls-left {
-  display: flex;
-  flex-direction: column;
-  gap: 2.3125rem;
-  justify-content: flex-end;
-  align-items: center;
-  pointer-events: auto;
-}
-.feed-player__navigation {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.feed-player__sidebar-container {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  position: relative;
-  z-index: 1;
-}
-.feed-player__close {
-  position: absolute;
-  top: 0.75rem;
-  right: 1rem;
-  z-index: 1;
-}
-.feed-player__sidebar {
-  flex: 1;
-  min-height: 0;
-  width: var(--_--feed-player--sidebar--width);
-  padding: 0.625rem 0.625rem 0.625rem 0;
-}
-.feed-player__sidebar--with-close {
-  padding-top: 3.75rem;
-}
-.feed-player__sidebar--with-header {
-  padding-top: var(--_--feed-player--header-height, 0px);
-}</style>

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

@@ -1,15 +0,0 @@
-import type { FeedPlayerProps } from './types';
-/**
- * Vertical post feed player with a tabbed sidebar for products, articles, and recommendations.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-fp--background` | Player background | `light-dark(white, black)` |
- * | `--sc-fp--padding-left` | Left padding for video area offset | `0px` |
- * | `--sc-fp--button--color` | Control button color | inherited |
- * | `--sc-fp--button--color--inactive` | Inactive control button color | inherited |
- */
-declare const Cmp: import("svelte").Component<FeedPlayerProps, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,16 +0,0 @@
-export declare class FeedPlayerLocalization {
-    get tabInformation(): string;
-    get tabProduct(): string;
-    get tabArticle(): string;
-    get tabRecommended(): string;
-    get tabPlaylist(): string;
-    get show(): string;
-    get relatedPosts(): string;
-    get suggestedPlaylist(): string;
-    get suggestedProducts(): string;
-    get showList(): string;
-    get updatedLabel(): string;
-    postsCount(count: number): string;
-    postOf(current: number, total: number): string;
-    viewsLabel(count: number): string;
-}