@streamscloud/embeddable 16.3.1 → 17.0.0-1775740482426

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -35,8 +35,8 @@ const handleAdClick = () => {
 
 <div
   class="ad-card"
-  style:--ad-card--cta-background={ad.ctaButton?.background}
-  style:--ad-card--cta-text-color={ad.ctaButton?.textColor}
+  style:--_--ad-card--cta--background={ad.ctaButton?.background}
+  style:--_--ad-card--cta--text-color={ad.ctaButton?.textColor}
   inert={inert}
   use:trackImpression>
   <div class="ad-card__image">
@@ -81,6 +81,10 @@ const handleAdClick = () => {
   --_ad-card--background-color: var(--ad-card--background-color, rgb(from light-dark(#ffffff, #000000) r g b / 90%));
   --_ad-card--border-color: var(--ad-card--border-color, light-dark(#f2f2f2, #000000));
   --_ad-card--price-color: var(--ad-card--price-color, inherit);
+  --_ad-card--text--primary: var(--ad-card--text--primary, light-dark(#000000, #ffffff));
+  --_ad-card--text-secondary: var(--ad-card--text-secondary, light-dark(#6b7280, #d1d5db));
+  --_ad-card--cta--background: var(--_--ad-card--cta--background, light-dark(#ffffff, #111827));
+  --_ad-card--cta--text-color: var(--_--ad-card--cta--text-color, light-dark(#000000, #ffffff));
   width: 100%;
   height: max-content;
   display: flex;
@@ -174,6 +178,7 @@ const handleAdClick = () => {
   overflow: hidden;
 }
 .ad-card__title {
+  color: var(--_ad-card--text--primary);
   font-weight: 700;
   font-size: 1.125rem;
   line-height: 1.375rem;
@@ -189,7 +194,7 @@ const handleAdClick = () => {
 }
 .ad-card__description {
   font-weight: 400;
-  color: var(--sc-mc-color--text-secondary);
+  color: var(--_ad-card--text-secondary);
   font-size: 0.9375rem;
   line-height: 1.375rem;
   min-height: 1.375rem;
@@ -227,7 +232,7 @@ const handleAdClick = () => {
   line-height: 1.0913rem;
   letter-spacing: 0;
   text-align: right;
-  color: var(--sc-mc-color--text-secondary);
+  color: var(--_ad-card--text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -243,11 +248,8 @@ const handleAdClick = () => {
 }
 .ad-card__button {
   width: 100%;
-  --sc-kit--button--background: light-dark(
-    var(--sc-player--light--card-button, var(--ad-card--cta-background)),
-    var(--sc-player--dark--card-button, var(--ad-card--cta-background))
-  );
-  --sc-kit--button--font--color: var(--ad-card--cta-text-color);
+  --sc-kit--button--background: var(--_ad-card--cta--background);
+  --sc-kit--button--font--color: var(--_ad-card--cta--text-color);
 }
 .ad-card__button :global(*) {
   width: 100%;

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

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

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

@@ -0,0 +1,516 @@
+<script lang="ts">import { default as CloseButton } from './cmp.close-button.svelte';
+import { PostActionsGenerator } from '../posts/controls';
+import { getPostCoverImage, PostModel } from '../posts/model';
+import { PostViewer } from '../posts/post-viewer';
+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();
+// ── 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 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({
+    socialInteractionsHandler,
+    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">
+        {@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={{
+                  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} style:--_--feed-player--sidebar--width={SIDEBAR_WIDTH+'px'}
+             transition:slideHorizontally|local>
+          <SidebarPanel
+            tabs={visibleTabs}
+            activeTabId={activeSidebarTab}
+            model={currentPostModel}
+            trackingParams={currentTrackingParams}
+            selectedProductId={selectedProductId}
+            {recommendedHandler}
+            {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)
+              }} />
+        </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--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--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;
+  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;
+}</style>

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

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

@@ -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 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;
+}