@streamscloud/blocks 0.1.0

package/dist/cta/cta-card/cmp.cta-card.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { CtaCardModel } from './types';
+type Props = {
+    cta: CtaCardModel;
+    inert?: boolean;
+    on?: {
+        click?: (id: string) => void;
+        impression?: (id: string) => void;
+    };
+};
+/**
+ * Call-to-action card with image, primary text, secondary text, and CTA button.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-blocks--cta-card--background-color` | Card background | `rgb(from light-dark(white, black) r g b / 90%)` |
+ * | `--sc-blocks--cta-card--border-color` | Card border color | `--sc-kit--color--border` |
+ * | `--sc-blocks--cta-card--price-color` | Price color | `inherit` |
+ * | `--sc-blocks--cta-card--text--primary` | Primary text color | `--sc-kit--color--text--primary` |
+ * | `--sc-blocks--cta-card--text-secondary` | Secondary text color | `--sc-kit--color--text--secondary` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/cta/cta-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CtaCard } from './cmp.cta-card.svelte';
+export type { CtaCardModel } from './types';

package/dist/cta/cta-card/index.js

@@ -0,0 +1 @@
+export { default as CtaCard } from './cmp.cta-card.svelte';

package/dist/cta/cta-card/types.d.ts

@@ -0,0 +1,18 @@
+import type { CtaType, Currency } from '../../core/enums';
+export type CtaCardModel = {
+    id: string;
+    type: CtaType;
+    image: string | null;
+    title: string;
+    description: string | null;
+    price: number | null;
+    currency: Currency | null;
+    priceInfoLabel: string | null;
+    ctaButton: {
+        background: string;
+        textColor: string;
+        text: string;
+        url: string;
+        border: string;
+    } | null;
+};

package/dist/cta/cta-card/types.js

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

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

@@ -0,0 +1,43 @@
+<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-blocks--player--close-button--size` | Button size | `32px` |
+  | `--sc-blocks--player--close-button--background` | Button background | `light-dark(bg--element, bg--panel)` |
+  | `--sc-blocks--player--close-button--color` | Icon color | `--sc-kit--color--text--primary` |
+  | `--sc-blocks--player--close-button--icon-size` | Icon size | `16px` |
+-->
+
+<style>.close-button {
+  --_close-button--size: var(--sc-blocks--player--close-button--size, 2rem);
+  --_close-button--background: var(
+    --sc-blocks--player--close-button--background,
+    light-dark(var(--sc-kit--color--bg--element), var(--sc-kit--color--bg--panel))
+  );
+  --_close-button--color: var(--sc-blocks--player--close-button--color, var(--sc-kit--color--text--primary));
+  --_close-button--icon-size: var(--sc-blocks--player--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: var(--sc-kit--radius--circle);
+  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

@@ -0,0 +1,19 @@
+type Props = {
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * Round close button — 32px circle with dismiss icon.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-blocks--player--close-button--size` | Button size | `32px` |
+ * | `--sc-blocks--player--close-button--background` | Button background | `light-dark(bg--element, bg--panel)` |
+ * | `--sc-blocks--player--close-button--color` | Icon color | `--sc-kit--color--text--primary` |
+ * | `--sc-blocks--player--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

@@ -0,0 +1,510 @@
+<script lang="ts">import { ContentViewer } from '../content/content-viewer';
+import { ContentActionsGenerator } from '../content/controls';
+import { ContentModel, getContentCoverImage } from '../content/model';
+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 { 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 { Spinner } from '@streamscloud/kit/ui/spinner';
+import { untrack } from 'svelte';
+let { dataProvider, socialInteractionsHandler, sharingHandler, analyticsHandler, recommendedHandler, playlistHandler, settings, header, on } = $props();
+$effect(() => {
+    if (settings?.locale) {
+        AppLocale.change(settings.locale);
+    }
+});
+const localization = new FeedPlayerLocalization();
+const isPreview = $derived(settings?.mode === 'preview');
+const isGlassBackground = $derived(settings?.background === 'glass');
+const isTransparentBackground = $derived(settings?.background === 'transparent');
+let backgroundImageUrl = $state(null);
+let buffer = $state.raw(null);
+$effect(() => {
+    void dataProvider;
+    untrack(() => {
+        buffer = null;
+        backgroundImageUrl = null;
+        mappedContentCache = {};
+        void initBuffer();
+    });
+});
+const initBuffer = async () => {
+    const newBuffer = initBufferFromProvider(dataProvider);
+    await newBuffer.ensureWarmedUp();
+    if (newBuffer.loaded.length) {
+        const coverUrl = getContentCoverImage(newBuffer.loaded[0]);
+        await preloadImage(coverUrl);
+        backgroundImageUrl = coverUrl;
+    }
+    buffer = newBuffer;
+};
+let mappedContentCache = {};
+const itemAsContentModel = (item) => {
+    if (mappedContentCache[item.id]) {
+        return mappedContentCache[item.id];
+    }
+    const contentModel = new ContentModel(item);
+    mappedContentCache[item.id] = contentModel;
+    return contentModel;
+};
+const currentContentModel = $derived.by(() => {
+    if (!buffer?.current) {
+        return null;
+    }
+    return itemAsContentModel(buffer.current);
+});
+const hasProducts = $derived(!!currentContentModel?.attachments && currentContentModel.attachments.products.length > 0);
+const isArticle = $derived(currentContentModel?.contentType === 'ARTICLE' && !!currentContentModel.articleId);
+const hasAttachments = $derived(!!currentContentModel?.attachments);
+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.some((t) => t.id !== 'recommended'));
+const handleTabChange = (id) => {
+    preferredTab = id;
+    activeSidebarTab = id;
+};
+$effect(() => {
+    const tabs = visibleTabs;
+    if (tabs.length === 0) {
+        return;
+    }
+    if (tabs.some((t) => t.id === preferredTab)) {
+        activeSidebarTab = preferredTab;
+    }
+    else {
+        activeSidebarTab = tabs[0].id;
+    }
+});
+$effect(() => {
+    const content = currentContentModel;
+    untrack(() => {
+        if (content?.attachments && content.attachments.products.length > 0) {
+            selectedProductId = content.attachments.products[0].id;
+        }
+        else {
+            selectedProductId = null;
+        }
+    });
+});
+let sidebarCollapsed = $state(false);
+const LAYOUT = {
+    ratio: 9 / 16,
+    safeArea: 80,
+    sidebarWidth: 378,
+    gap: 60,
+    mobileBreakpoint: 576
+};
+let totalWidth = $state(0);
+let isMobileView = $derived(totalWidth < LAYOUT.mobileBreakpoint);
+const handleRootResize = (node) => {
+    const observer = new ResizeObserver(([entry]) => {
+        totalWidth = entry.contentRect.width;
+    });
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+};
+let headerHeight = $state(0);
+const handleHeaderResize = (node) => {
+    const observer = new ResizeObserver(([entry]) => {
+        headerHeight = entry.contentRect.height;
+    });
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+};
+let videoAreaHeight = $state(0);
+const sidebarSlotFits = $derived.by(() => {
+    if (isMobileView || videoAreaHeight === 0) {
+        return false;
+    }
+    const videoW = videoAreaHeight * LAYOUT.ratio;
+    const rowWidth = videoW + 2 * LAYOUT.safeArea + LAYOUT.gap + LAYOUT.sidebarWidth;
+    return totalWidth >= rowWidth;
+});
+const sideControlsFit = $derived.by(() => {
+    if (isMobileView || videoAreaHeight === 0) {
+        return false;
+    }
+    const videoW = videoAreaHeight * LAYOUT.ratio;
+    const needed = videoW + 2 * LAYOUT.safeArea + (sidebarSlotFits ? LAYOUT.gap + LAYOUT.sidebarWidth : 0);
+    return totalWidth >= needed;
+});
+const videoWidth = $derived.by(() => {
+    if (isMobileView || videoAreaHeight === 0) {
+        return 0;
+    }
+    const videoW = videoAreaHeight * LAYOUT.ratio;
+    return sideControlsFit ? videoW : Math.min(videoW, totalWidth);
+});
+const mainWidth = $derived.by(() => {
+    if (videoWidth === 0) {
+        return null;
+    }
+    return sideControlsFit ? videoWidth + 2 * LAYOUT.safeArea : videoWidth;
+});
+const contentWidth = $derived(isMobileView || videoWidth === 0 ? '100%' : `${videoWidth}px`);
+const contentHeight = $derived(isMobileView || videoWidth === 0 ? '100%' : `${videoWidth / LAYOUT.ratio}px`);
+const showControlsOverlay = $derived(isMobileView);
+const handleVideoAreaResize = (node) => {
+    const observer = new ResizeObserver(([entry]) => {
+        videoAreaHeight = entry.contentRect.height;
+    });
+    observer.observe(node);
+    return { destroy: () => observer.disconnect() };
+};
+const handleItemActivated = (id) => {
+    if (buffer) {
+        const item = buffer.loaded.find((i) => i.id === id);
+        if (item) {
+            backgroundImageUrl = getContentCoverImage(item);
+            if (item.contentType === 'SHORT_VIDEO') {
+                analyticsHandler?.trackShortVideoView(id);
+            }
+            else if (item.contentType) {
+                analyticsHandler?.trackContentOpened(item.contentType, id);
+            }
+        }
+    }
+    on?.contentActivated?.(id);
+};
+const onProductClick = (productId) => {
+    if (!currentContentModel) {
+        return;
+    }
+    analyticsHandler?.trackProductClick(productId, currentContentModel.id);
+};
+const onProductImpression = (productId) => {
+    if (!currentContentModel) {
+        return;
+    }
+    analyticsHandler?.trackProductImpression(productId, currentContentModel.id);
+};
+const onCtaClick = (ctaId) => {
+    analyticsHandler?.trackCtaClick(ctaId);
+};
+const onCtaImpression = (ctaId) => {
+    analyticsHandler?.trackCtaImpression(ctaId);
+};
+const contentActionsGenerator = untrack(() => new ContentActionsGenerator({
+    get socialInteractionsHandler() {
+        return socialInteractionsHandler;
+    },
+    get sharingHandler() {
+        return sharingHandler;
+    },
+    on: { attachmentClicked: () => (sidebarCollapsed = !sidebarCollapsed) }
+}));
+const itemActions = $derived.by(() => {
+    if (!currentContentModel) {
+        return [];
+    }
+    const handler = contentActionsGenerator.getContentActionsHandler(currentContentModel);
+    const actions = handler.actions.map((a) => ({
+        icon: a.iconColor ? { src: a.icon, color: a.iconColor } : a.icon,
+        callback: a.callback
+    }));
+    if (sidebarSlotFits && (!sidebarCollapsed || sidebarVisible)) {
+        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}
+  style:--_--fp--gap="{LAYOUT.gap}px"
+  style:--_--fp--safe-area="{LAYOUT.safeArea}px"
+  style:--_--fp--sidebar-width="{LAYOUT.sidebarWidth}px"
+  use:handleRootResize>
+  {#if buffer && on?.closed}
+    <div class="feed-player__close">
+      <CloseButton on={{ click: on.closed }} />
+    </div>
+  {/if}
+  <div class="feed-player__main" style:width={mainWidth !== null ? mainWidth + 'px' : null}>
+    {#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}
+        style:--_--fp--content-width={contentWidth}
+        style:--_--fp--content-height={contentHeight}
+        use:handleVideoAreaResize>
+        <FeedSlider buffer={buffer} on={{ itemActivated: handleItemActivated }}>
+          {#snippet children({ item })}
+            {@const contentModel = itemAsContentModel(item)}
+            <div class="feed-player__content">
+              <ContentViewer
+                model={contentModel}
+                controlActions={itemActions}
+                enableAttachments={false}
+                enableControls={showControlsOverlay}
+                autoplay="on-appearance"
+                on={isPreview
+                  ? {}
+                  : {
+                      productClick: onProductClick,
+                      productImpression: onProductImpression,
+                      ctaClick: onCtaClick,
+                      ctaImpression: onCtaImpression,
+                      articleReadMore: (id) => on?.articleReadMore?.(id)
+                    }} />
+            </div>
+          {/snippet}
+        </FeedSlider>
+
+        {#if !showControlsOverlay}
+          <div class="feed-player__controls">
+            <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 && sidebarSlotFits}
+    <div class="feed-player__sidebar-container" style:width="{!sidebarCollapsed ? LAYOUT.sidebarWidth : 0}px">
+      {#if !sidebarCollapsed && sidebarVisible && currentContentModel}
+        <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--header-height={headerHeight + 'px'}
+          transition:slideHorizontally|local>
+          <SidebarPanel
+            tabs={visibleTabs}
+            activeTabId={activeSidebarTab}
+            model={currentContentModel}
+            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');
+                  },
+                  ctaClick: onCtaClick,
+                  ctaImpression: onCtaImpression,
+                  articleReadMore: on?.articleReadMore,
+                  contentActivate: (id) => buffer?.tryActivateItemById(id)
+                }} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if !buffer}
+    <Spinner position="absolute-center" timeout={500} />
+  {/if}
+</div>
+
+<!--
+  @component
+  Vertical content feed player with a tabbed sidebar for products, articles, and recommendations.
+
+  ### CSS Custom Properties
+  | Property | Description | Default |
+  |---|---|---|
+  | `--sc-blocks--player--background` | Player background | `light-dark(white, black)` |
+  | `--sc-blocks--player--padding-left` | Left padding for video area offset | `0px` |
+-->
+
+<style>.feed-player {
+  --_feed-player--background: var(--sc-blocks--player--background, light-dark(#ffffff, #000000));
+  --_feed-player--padding-left: var(--sc-blocks--player--padding-left, 0px);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  gap: var(--_--fp--gap);
+  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;
+  flex-shrink: 0;
+  min-height: 0;
+  width: 100%;
+  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-top: 0.625rem;
+  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(--_--fp--content-width, 100%);
+  height: var(--_--fp--content-height, 100%);
+  margin: auto;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.feed-player__controls {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--_--fp--safe-area);
+  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: var(--sc-kit--space--4);
+}
+.feed-player__sidebar-container {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  transition: width 250ms ease-in-out;
+}
+.feed-player__close {
+  position: absolute;
+  top: var(--sc-kit--space--3);
+  right: var(--sc-kit--space--4);
+  z-index: 2;
+}
+.feed-player__sidebar {
+  flex: 1;
+  min-height: 0;
+  width: var(--_--fp--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

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

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

@@ -0,0 +1,16 @@
+export declare class FeedPlayerLocalization {
+    get tabInformation(): string;
+    get tabProduct(): string;
+    get tabArticle(): string;
+    get tabRecommended(): string;
+    get tabPlaylist(): string;
+    get show(): string;
+    get relatedContent(): 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;
+}