@streamscloud/embeddable 7.0.1 → 7.0.2-1759149696160

package/dist/content-player/controls-and-attachments.svelte.d.ts

@@ -0,0 +1,28 @@
+import { ContentPlayerConfig } from './content-player-config.svelte';
+declare class __sveltets_Render<T extends {
+    id: string;
+}> {
+    props(): {
+        config: ContentPlayerConfig<T>;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends {
+        id: string;
+    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends {
+        id: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ControlsAndAttachments: $$IsomorphicComponent;
+type ControlsAndAttachments<T extends {
+    id: string;
+}> = InstanceType<typeof ControlsAndAttachments<T>>;
+export default ControlsAndAttachments;

package/dist/content-player/fade-mixins.scss

@@ -0,0 +1,12 @@
+@mixin default-opacity {
+  --content-player--elements-opacity: 1;
+}
+
+@mixin fade-opacity {
+  --content-player--elements-opacity: 0;
+}
+
+@mixin handle-fade {
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}

package/dist/content-player/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContentPlayer } from './cmp.content-player.svelte';
+export { ContentPlayerConfig } from './content-player-config.svelte';

package/dist/content-player/index.js

@@ -0,0 +1,2 @@
+export { default as ContentPlayer } from './cmp.content-player.svelte';
+export { ContentPlayerConfig } from './content-player-config.svelte';

package/dist/content-player/overview-panel.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">import { slideHorizontally } from '../core/transitions';
+import { Icon } from '../ui/icon';
+import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
+let { children, contentFaded, uiManager } = $props();
+const overviewAttached = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        uiManager.setOverviewWidth(node.clientWidth);
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+            uiManager.setOverviewWidth(0);
+        }
+    };
+};
+</script>
+
+{#if !uiManager.overviewCollapsed && !contentFaded}
+  <div class="overview-panel" transition:slideHorizontally|local use:overviewAttached>
+    {@render children()}
+  </div>
+{/if}
+
+<button
+  class="toggle-collapsed-button"
+  class:toggle-collapsed-button--overview-expanded={!!uiManager.overviewWidth}
+  type="button"
+  onclick={() => (uiManager.overviewCollapsed = !uiManager.overviewCollapsed)}>
+  <Icon src={IconPanelLeftText} />
+</button>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.overview-panel {
+  background: #1c1c1c;
+  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  width: 13.75rem;
+  min-width: 13.75rem;
+  max-width: 13.75rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding-bottom: 0.9375rem;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .overview-panel {
+    width: calc(100% - 80px);
+    min-width: calc(100% - 80px);
+    max-width: calc(100% - 80px);
+  }
+}
+
+.toggle-collapsed-button {
+  position: absolute;
+  bottom: 0.625rem;
+  left: 0.625rem;
+  z-index: 1;
+  --icon--color: #ffffff;
+  --icon--size: 1.25rem;
+  opacity: var(--content-player--elements-opacity);
+  transition: opacity 0.3s ease-in-out;
+}
+.toggle-collapsed-button--overview-expanded {
+  left: calc(var(--content-player--overview--width) - 0.625rem);
+  transform: translateX(-100%);
+}</style>

package/dist/content-player/overview-panel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ContentPlayerUIManager } from './ui-manager.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    uiManager: ContentPlayerUIManager;
+    contentFaded: boolean;
+    children: Snippet;
+};
+declare const OverviewPanel: import("svelte").Component<Props, {}, "">;
+type OverviewPanel = ReturnType<typeof OverviewPanel>;
+export default OverviewPanel;

package/dist/{streams/stream-player → content-player}/ui-manager.svelte.d.ts

@@ -1,13 +1,13 @@
-export declare class StreamPlayerUiManager {
+export declare class ContentPlayerUIManager {
     overviewCollapsed: boolean;
-    showShortVideoAttachments: boolean;
+    showAttachments: boolean;
     globalCssVariables: string;
     isMobileView: boolean;
     viewInitialized: boolean;
-    showShortVideoOverlayAttachments: boolean;
-    showShortVideoOverlayControls: boolean;
+    showPostOverlayAttachments: boolean;
+    showPostOverlayControls: boolean;
     private _backgroundImageUrl;
-    private _viewTotalWidth;
+    private _dialogTotalWidth;
     private _mainViewColumnWidth;
     private _mediaCenterHeaderHeight;
     private _overviewWidth;
@@ -15,15 +15,16 @@ export declare class StreamPlayerUiManager {
     private _controlsNavitagionButtonsWidth;
     private _controlsAvailableSpace;
     private _controlsContentWidth;
-    get viewTotalWidth(): number;
+    get dialogTotalWidth(): number;
     get mainViewColumnWidth(): number;
     get backgroundImageUrl(): string | null;
-    updateDimensions: (dimensions: {
+    get overviewWidth(): number;
+    setDialogDimensions: (dimensions: {
         viewTotalWidth: number;
         mainViewColumnWidth: number;
     }) => void;
-    updateOverviewWidth: (width: number) => void;
-    updateMediaCenterHeaderHeight: (height: number) => void;
+    setOverviewWidth: (width: number) => void;
+    setMediaCenterHeaderHeight: (height: number) => void;
     setAttachmentsPanelWidth: (width: number) => void;
     setNavigationButtonsBlockWidth: (width: number) => void;
     setBackgroundImageUrl: (url: string | null) => void;

package/dist/content-player/ui-manager.svelte.js

@@ -0,0 +1,68 @@
+const CONTROLS_PADDING_HORIZONTAL = 28;
+const CONTROLS_PADDING_VERTICAL = 28;
+const CONTROLS_ATTACHMENTS_MAX_WIDTH = 176;
+const PLAYER_PADDING_VERTICAL = 10;
+export class ContentPlayerUIManager {
+    overviewCollapsed = $state(false);
+    showAttachments = $state(true);
+    globalCssVariables = $derived.by(() => {
+        const values = [
+            `--content-player--controls--attachments--max-width: ${CONTROLS_ATTACHMENTS_MAX_WIDTH}px`,
+            `--content-player--controls--logo--max-width: ${CONTROLS_ATTACHMENTS_MAX_WIDTH}px`,
+            `--content-player--controls--logo--height: ${this._mediaCenterHeaderHeight || 72}px`,
+            `--content-player--controls--available-space: ${this._controlsAvailableSpace}px`,
+            `--content-player--controls--close-button--left: ${this._overviewWidth}px`,
+            `--content-player--controls--padding: ${this._mediaCenterHeaderHeight ? 0 : CONTROLS_PADDING_VERTICAL}px ${CONTROLS_PADDING_HORIZONTAL}px ${CONTROLS_PADDING_VERTICAL}px`,
+            `--content-player--overview--width: ${this._overviewWidth}px`,
+            `--content-player--padding: ${this._mediaCenterHeaderHeight ? this._mediaCenterHeaderHeight : PLAYER_PADDING_VERTICAL}px 0 ${PLAYER_PADDING_VERTICAL}px`
+        ];
+        if (this._backgroundImageUrl) {
+            values.push(`--content-player--background-image-url: url(${this._backgroundImageUrl})`);
+        }
+        return values.join(';');
+    });
+    isMobileView = $derived.by(() => this._dialogTotalWidth <= 576);
+    viewInitialized = $derived.by(() => !!this._dialogTotalWidth && !!this._mainViewColumnWidth);
+    showPostOverlayAttachments = $derived.by(() => this.viewInitialized && this._controlsAttachmentsPanelWidth < CONTROLS_ATTACHMENTS_MAX_WIDTH + 10);
+    showPostOverlayControls = $derived.by(() => this.viewInitialized && this._controlsContentWidth < this._controlsNavitagionButtonsWidth);
+    _backgroundImageUrl = $state(null);
+    _dialogTotalWidth = $state(0);
+    _mainViewColumnWidth = $state(0);
+    _mediaCenterHeaderHeight = $state(0);
+    _overviewWidth = $state(0);
+    _controlsAttachmentsPanelWidth = $state(0);
+    _controlsNavitagionButtonsWidth = $state(0);
+    _controlsAvailableSpace = $derived.by(() => (this._dialogTotalWidth - this._mainViewColumnWidth) / 2);
+    _controlsContentWidth = $derived.by(() => this._controlsAvailableSpace - CONTROLS_PADDING_HORIZONTAL * 2);
+    get dialogTotalWidth() {
+        return this._dialogTotalWidth;
+    }
+    get mainViewColumnWidth() {
+        return this._mainViewColumnWidth;
+    }
+    get backgroundImageUrl() {
+        return this._backgroundImageUrl;
+    }
+    get overviewWidth() {
+        return this._overviewWidth;
+    }
+    setDialogDimensions = (dimensions) => {
+        this._dialogTotalWidth = dimensions.viewTotalWidth;
+        this._mainViewColumnWidth = dimensions.mainViewColumnWidth;
+    };
+    setOverviewWidth = (width) => {
+        this._overviewWidth = width;
+    };
+    setMediaCenterHeaderHeight = (height) => {
+        this._mediaCenterHeaderHeight = height;
+    };
+    setAttachmentsPanelWidth = (width) => {
+        this._controlsAttachmentsPanelWidth = width;
+    };
+    setNavigationButtonsBlockWidth = (width) => {
+        this._controlsNavitagionButtonsWidth = width;
+    };
+    setBackgroundImageUrl = (url) => {
+        this._backgroundImageUrl = url;
+    };
+}

package/dist/index.d.ts

@@ -1,2 +1 @@
-export { type ShortVideoViewerModel } from './short-videos/short-video-viewer';
 export * from './core/enums';

package/dist/index.js

@@ -1,2 +1 @@
-export {} from './short-videos/short-video-viewer';
 export * from './core/enums';

package/dist/media-center/config/internal-media-center-config.js

@@ -48,7 +48,8 @@ export class InternalMediaCenterConfig {
                             mediaPageId: this.mediaPageId,
                             categoryId: filter.categoryId,
                             excludeIds: filter.excludeIds,
-                            statuses: [StreamStatus.Published]
+                            statuses: [StreamStatus.Published],
+                            showInFeed: true
                         },
                         limit,
                         continuationToken

package/dist/media-center/config/types.d.ts

@@ -1,4 +1,4 @@
-import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
+import type { IPostSocialInteractionsHandler } from '../../posts';
 import type { IShortVideoAnalyticsHandler, ShortVideoPlayerModel } from '../../short-videos/short-videos-player/types';
 import type { IStreamPlayerDataProvider, IStreamAnalyticsHandler } from '../../streams/stream-player/types';
 export interface IMediaCenterConfig {

package/dist/media-center/media-center/cmp.media-center.svelte

@@ -10,7 +10,7 @@
 import { horizontalWheelScroll } from '../../core/actions';
 import { Utils } from '../../core/utils';
 import { default as ShortVideosPlayerView } from '../../short-videos/short-videos-player/short-videos-player-view.svelte';
-import { default as StreamPlayer } from '../../streams/stream-player/stream-player.svelte';
+import { default as StreamPlayerView } from '../../streams/stream-player/stream-player-view.svelte';
 import { Dropdown } from '../../ui/dropdown';
 import { Icon, IconColor } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
@@ -210,7 +210,7 @@ const onScrollMounted = (node) => {
 {#if mediaDataLoading}
   <Loading positionFixedCenter={true} timeout={600} />
 {:else}
-  {#snippet categoriesSwitcher(data: { maxItemsWidth: Number; onMounted: (data: { height: Number }) => void; closeButton?: Snippet })}
+  {#snippet controlsPanel(data: { maxItemsWidth: Number; onMounted: (data: { height: Number }) => void; closeButton?: Snippet })}
     <div class="media-center" use:mounted={data.onMounted}>
       {#if data.closeButton}
         <div class="media-center__close-button">
@@ -270,15 +270,19 @@ const onScrollMounted = (node) => {
   {#if computedPlayerProps.mode === MediaCenterMode.ShortVideos}
     <ShortVideosPlayerView
       {...computedPlayerProps.props}
-      categoriesSwitcher={categories.length ? categoriesSwitcher : undefined}
-      playerLogo={logo}
-      fadeContent={overlayActivated} />
+      mediaCenterData={{
+        controlsPanel: categories.length ? controlsPanel : undefined,
+        playerLogo: logo,
+        overlayIsActive: overlayActivated
+      }} />
   {:else if computedPlayerProps.mode === MediaCenterMode.Stream}
-    <StreamPlayer
+    <StreamPlayerView
       {...computedPlayerProps.props}
-      categoriesSwitcher={categories.length ? categoriesSwitcher : undefined}
-      playerLogo={logo}
-      fadeContent={overlayActivated} />
+      mediaCenterData={{
+        controlsPanel: categories.length ? controlsPanel : undefined,
+        playerLogo: logo,
+        overlayIsActive: overlayActivated
+      }} />
   {/if}
   {#if overviewOpened && overviewData?.loading}
     <Loading positionFixedCenter={true} timeout={600} />

package/dist/media-center/media-center/overview.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { ProductCard } from '../../products/product-card';
+<script lang="ts">import { getPostCoverImage } from '../../posts/post-viewer';
+import { ProductCard } from '../../products/product-card';
 import { ShortVideoCard } from '../../short-videos/short-video-card';
 import { StreamCard } from '../../streams/stream-card';
 import { MediaCenterLocalization } from './media-center-localization';
@@ -62,7 +63,7 @@ const shortVideoSectionItems = $derived.by(() => {
             {#if item.kind === 'video'}
               <div class="media-center-overview__card-wrapper">
                 <ShortVideoCard
-                  shortVideo={{ id: item.data.id, text: item.data.text, cover: item.data.media.isImage ? item.data.media.url : item.data.media.thumbnailUrl }}
+                  shortVideo={{ id: item.data.id, text: item.data.text, cover: getPostCoverImage(item.data) }}
                   on={{ click: () => on.shortVideoSelected(item.data) }} />
               </div>
             {:else if item.kind === 'product'}

package/dist/media-center/media-center/short-video-resources-generator.d.ts

@@ -1,5 +1,5 @@
 import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
-import type { IPlayerItemsProvider } from '../../ui/player';
+import type { IPlayerItemsProvider } from '../../ui/player-slider';
 import type { IMediaCenterConfig } from '../config/types';
 export declare const makeShortVideosProvider: (data: {
     config: IMediaCenterConfig;

package/dist/media-center/model/types.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export type MediaCenterData = {
+    controlsPanel?: Snippet<[{
+        maxItemsWidth: number;
+        onMounted: (data: {
+            height: number;
+        }) => void;
+        closeButton: Snippet | undefined;
+    }]>;
+    playerLogo: string | null;
+    overlayIsActive: boolean;
+};

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

@@ -0,0 +1,50 @@
+<script lang="ts">import { AdCard } from '../../ads/ad-card';
+import { ProductCard } from '../../products/product-card';
+let { container, locale = 'en', on } = $props();
+</script>
+
+{#if container.ads.length || container.products.length}
+  <div class="post-attachments">
+    {#if container.ads.length}
+      {#each container.ads as ad (ad.id)}
+        <AdCard
+          ad={ad}
+          on={{
+            click: on?.adClick,
+            impression: on?.adImpression
+          }} />
+      {/each}
+    {/if}
+
+    {#if container.products.length}
+      {#each container.products as product (product.id)}
+        <ProductCard
+          product={product}
+          locale={locale}
+          on={{
+            click: on?.productClick,
+            impression: on?.productImpression
+          }} />
+      {/each}
+    {/if}
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.post-attachments {
+  --_post-attachments--gap: var(--post-attachments--gap, 2.75rem);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_post-attachments--gap);
+  padding: 0;
+}</style>

package/dist/{short-videos/short-video-viewer → posts/attachments}/cmp.attachments.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Locale } from '../../core/locale';
-import { type ShortVideoViewerModel } from './types';
+import type { PostAttachmentsContainer } from '..';
 type Props = {
-    shortVideo: ShortVideoViewerModel;
+    container: PostAttachmentsContainer;
     locale?: Locale;
     on?: {
         productClick?: (productId: string) => void;
-        productImpression?: (productId: string, videoId: string) => void;
+        productImpression?: (productId: string) => void;
         adClick?: (adId: string) => void;
         adImpression?: (adId: string) => void;
     };

package/dist/posts/attachments/index.d.ts

@@ -0,0 +1 @@
+export { default as PostAttachments } from './cmp.attachments.svelte';

package/dist/posts/attachments/index.js

@@ -0,0 +1 @@
+export { default as PostAttachments } from './cmp.attachments.svelte';

package/dist/{short-videos/short-video-viewer/cmp.short-video-controls.svelte → posts/controls/cmp.controls.svelte}

@@ -24,13 +24,13 @@ let isLikedStore = $state.raw({
 });
 const availableActionsCount = $derived.by(() => {
     let actionsCount = 0;
-    if (model.products.length || model.ad) {
+    if (model.products.length || model.ads.length) {
         actionsCount++;
     }
     if (showSocialInteractions) {
         actionsCount++;
     }
-    if (!model.media.isImage) {
+    if (model.media && model.media.isMutable) {
         actionsCount++;
     }
     return actionsCount;
@@ -66,30 +66,25 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
 </script>
 
 {#if availableActionsCount}
-  <div class="short-video-controls" class:short-video-controls--single-action={availableActionsCount === 1}>
-    {#if model.products.length || model.ad}
-      <button type="button" class="short-video-controls__action" onclick={onAttachmentsClicked}>
+  <div class="post-controls" class:post-controls--single-action={availableActionsCount === 1}>
+    {#if model.products.length || model.ads.length}
+      <button type="button" class="post-controls__action" onclick={onAttachmentsClicked}>
         <Icon src={IconShoppingBag} />
       </button>
     {/if}
 
     {#if showSocialInteractions}
-      <button
-        type="button"
-        class="short-video-controls__action"
-        onclick={onLikeClicked}
-        aria-label="none"
-        class:short-video-controls__action--liked={isLikedStore.isLiked}>
+      <button type="button" class="post-controls__action" onclick={onLikeClicked} aria-label="none" class:post-controls__action--liked={isLikedStore.isLiked}>
         <Icon src={isLikedStore.isLiked ? IconHeartFilled : IconHeart} />
       </button>
 
-      <button type="button" class="short-video-controls__action" onclick={onShareClicked}>
+      <button type="button" class="post-controls__action" onclick={onShareClicked}>
         <Icon src={IconShare} />
       </button>
     {/if}
 
-    {#if !model.media.isImage}
-      <button type="button" class="short-video-controls__action" onclick={onMuteClicked}>
+    {#if model.media && model.media.isMutable}
+      <button type="button" class="post-controls__action" onclick={onMuteClicked}>
         {#if MediaVolumeManager.isMuted}
           <Icon src={IconSpeakerMute} />
         {:else}
@@ -111,10 +106,10 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
     opacity: 1;
   }
 }
-.short-video-controls {
-  --_short-video-controls--icon--size: var(--short-video-controls--icon--size, 1.75rem);
-  --_short-video-controls--padding-vertical: 1rem;
-  --_short-video-controls--padding-horizontal: 0.625rem;
+.post-controls {
+  --_post-controls--icon--size: var(--post-controls--icon--size, 1.75rem);
+  --_post-controls--padding-vertical: 1rem;
+  --_post-controls--padding-horizontal: 0.625rem;
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -123,23 +118,23 @@ const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
   border-radius: 1.25rem;
   border: 0.0625rem solid #1c1c1c;
   background: rgba(0, 0, 0, 0.6);
-  padding: var(--_short-video-controls--padding-vertical) var(--_short-video-controls--padding-horizontal);
+  padding: var(--_post-controls--padding-vertical) var(--_post-controls--padding-horizontal);
 }
-.short-video-controls--single-action {
-  padding: var(--_short-video-controls--padding-horizontal);
-  border-radius: calc((var(--_short-video-controls--padding-horizontal) * 2 + var(--_short-video-controls--icon--size)) / 2);
+.post-controls--single-action {
+  padding: var(--_post-controls--padding-horizontal);
+  border-radius: calc((var(--_post-controls--padding-horizontal) * 2 + var(--_post-controls--icon--size)) / 2);
 }
-.short-video-controls__action {
-  --icon--size: var(--_short-video-controls--icon--size);
+.post-controls__action {
+  --icon--size: var(--_post-controls--icon--size);
   --icon--color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.short-video-controls__action--liked {
+.post-controls__action--liked {
   --icon--color: #e71d36;
 }
-.short-video-controls__action:hover {
+.post-controls__action:hover {
   transform: scale(1.2);
   transition: 0.3s;
 }</style>

package/dist/posts/controls/cmp.controls.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IPostSocialInteractionsHandler, PostContainer } from '..';
+type Props = {
+    model: PostContainer;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
+    on?: {
+        attachmentsClicked?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/posts/controls/index.d.ts

@@ -0,0 +1 @@
+export { default as PostControls } from './cmp.controls.svelte';

package/dist/posts/controls/index.js

@@ -0,0 +1 @@
+export { default as PostControls } from './cmp.controls.svelte';

package/dist/posts/index.d.ts

@@ -0,0 +1,4 @@
+export type { PostContainer, PostAttachmentsContainer } from './model/types';
+export { PostAttachments } from './attachments';
+export { PostControls } from './controls';
+export type { IPostSocialInteractionsHandler } from './social-interactions';

package/dist/posts/index.js

@@ -0,0 +1,2 @@
+export { PostAttachments } from './attachments';
+export { PostControls } from './controls';

package/dist/posts/model/types.d.ts

@@ -0,0 +1,13 @@
+import type { AdCardModel } from '../../ads/ad-card';
+import type { ProductCardModel } from '../../products/product-card';
+export type PostContainer = PostAttachmentsContainer & {
+    id: string;
+    enableSocialInteractions: boolean;
+    media: {
+        isMutable: boolean;
+    } | null;
+};
+export type PostAttachmentsContainer = {
+    ads: AdCardModel[];
+    products: ProductCardModel[];
+};

package/dist/posts/model/types.js

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

package/dist/{short-videos/short-video-viewer/cmp.attachments-horizontal.svelte → posts/post-viewer/attachments-horizontal.svelte}

@@ -21,7 +21,7 @@ const attachmentsToShow = $derived.by(() => {
         title: p.title,
         description: p.shortDescription
     }));
-    const ads = (model.ad ? [model.ad] : [])
+    const ads = model.ads
         .filter((a) => !!a.image)
         .map((a) => {
         var _a;
@@ -148,14 +148,13 @@ $effect(() => {
   }
 }
 .attachments-horizontal {
-  --_short-video-attachments-horizontal--padding-horizontal: var(--short-video-attachments-horizontal--padding-horizontal, 0);
   display: flex;
   gap: 0.5rem;
   flex-wrap: nowrap;
   width: 100%;
   justify-content: flex-start;
   overflow-x: auto;
-  padding: 0 var(--_short-video-attachments-horizontal--padding-horizontal);
+  padding: 0 var(--post-viewer--attachments-horizontal--padding-horizontal);
   scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
   scrollbar-width: none;
 }

package/dist/posts/post-viewer/attachments-horizontal.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { PostViewerModel } from './types';
+type Props = {
+    model: PostViewerModel;
+    on?: {
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
+    };
+};
+declare const AttachmentsHorizontal: import("svelte").Component<Props, {}, "">;
+type AttachmentsHorizontal = ReturnType<typeof AttachmentsHorizontal>;
+export default AttachmentsHorizontal;