@streamscloud/embeddable 3.4.2 → 5.0.0

package/dist/products/product-card/index.js

@@ -0,0 +1,2 @@
+export { default as ProductCard } from './cmp.product-card.svelte';
+export { mapToProductCard } from './mapper';

package/dist/products/product-card/mapper.d.ts

@@ -0,0 +1,3 @@
+import type { ProductCardPayloadFragment } from './operations.generated';
+import type { ProductCardModel } from './types';
+export declare const mapToProductCard: (payload: ProductCardPayloadFragment, referenceDate?: string | null) => ProductCardModel;

package/dist/products/product-card/mapper.js

@@ -0,0 +1,22 @@
+import { getMediaItemImageUrl } from '../../core/media';
+import { shouldUseSalePrice } from '../price-helper';
+export const mapToProductCard = (payload, referenceDate) => {
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice({
+        price: payload.priceAndAvailability.price,
+        salePrice: x.salePrice,
+        effectiveDateFrom: x.salePriceEffectiveDateFrom,
+        effectiveDateTo: x.salePriceEffectiveDateTo,
+        referenceDate
+    }));
+    return {
+        id: payload.id,
+        title: payload.title,
+        shortDescription: payload.shortDescription,
+        link: payload.link,
+        brandName: payload.brand?.name || null,
+        image: getMediaItemImageUrl(payload.media[0]),
+        currency: payload.priceAndAvailability.currency,
+        price: payload.priceAndAvailability.price,
+        salePrice: effectiveSalePrice?.salePrice ?? null
+    };
+};

package/dist/products/product-card/operations.generated.d.ts

@@ -0,0 +1,26 @@
+import type * as SchemaTypes from '../../../gql/types';
+import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type ProductCardPayloadFragment = {
+    id: string;
+    title: string;
+    shortDescription: string | null;
+    link: string | null;
+    media: Array<{
+        url: string;
+        thumbnailUrl: string | null;
+        type: SchemaTypes.MediaType;
+    }>;
+    brand: {
+        name: string;
+    } | null;
+    priceAndAvailability: {
+        currency: SchemaTypes.Currency;
+        price: number;
+        productSalePrices: Array<{
+            salePrice: number;
+            salePriceEffectiveDateFrom: any | null;
+            salePriceEffectiveDateTo: any | null;
+        }> | null;
+    };
+};
+export declare const ProductCardPayloadFragmentDoc: DocumentNode<ProductCardPayloadFragment, unknown>;

package/dist/products/product-card/operations.generated.js

@@ -0,0 +1,59 @@
+export const ProductCardPayloadFragmentDoc = {
+    kind: 'Document',
+    definitions: [
+        {
+            kind: 'FragmentDefinition',
+            name: { kind: 'Name', value: 'ProductCardPayloadFragment' },
+            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Product' } },
+            selectionSet: {
+                kind: 'SelectionSet',
+                selections: [
+                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'shortDescription' } },
+                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'media' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'url' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'thumbnailUrl' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
+                            ]
+                        }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'brand' },
+                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'name' } }] }
+                    },
+                    {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'priceAndAvailability' },
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'currency' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'productSalePrices' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateFrom' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePriceEffectiveDateTo' } }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+};

package/dist/products/product-card/operations.graphql

@@ -0,0 +1,23 @@
+fragment ProductCardPayloadFragment on Product {
+  id
+  title
+  shortDescription
+  link
+  media {
+    url
+    thumbnailUrl
+    type
+  }
+  brand {
+    name
+  }
+  priceAndAvailability {
+    currency
+    price
+    productSalePrices {
+      salePrice
+      salePriceEffectiveDateFrom
+      salePriceEffectiveDateTo
+    }
+  }
+}

package/dist/products/product-card/product-card-localization.d.ts

@@ -0,0 +1,8 @@
+import { type Locale } from '../../core/locale';
+export interface IProductCardLocalization {
+    beforeNowPrefix?: string | null;
+}
+export declare class ProductCardLocalization {
+    beforeNowPrefix: string | null;
+    constructor(init: IProductCardLocalization | Locale);
+}

package/dist/{short-videos/short-video-viewer/short-video-product-localization.js → products/product-card/product-card-localization.js}

@@ -1,5 +1,5 @@
 import { isLocale } from '../../core/locale';
-export class ShortVideoProductLocalization {
+export class ProductCardLocalization {
     beforeNowPrefix;
     constructor(init) {
         this.beforeNowPrefix = isLocale(init) ? loc.beforeNowPrefix[init] : init?.beforeNowPrefix || loc.beforeNowPrefix.en;

package/dist/products/product-card/types.d.ts

@@ -0,0 +1,12 @@
+import type { Currency } from '../..';
+export type ProductCardModel = {
+    id: string;
+    title: string;
+    shortDescription?: string | null;
+    link: string | null;
+    image: string | null;
+    brandName: string | null;
+    price: number;
+    currency: Currency;
+    salePrice: number | null;
+};

package/dist/products/product-card/types.js

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

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte

@@ -1,27 +1,21 @@
-<script lang="ts">import { default as ShortVideoAdViewer } from './cmp.ad.svelte';
-import { default as ShortVideoProductViewer } from './cmp.product.svelte';
+<script lang="ts">import { AdCard } from '../../ads/ad-card';
+import { ProductCard } from '../../products/product-card';
 import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import {} from './types';
-let { shortVideo, localization: localizationInit, on } = $props();
+let { shortVideo, localization: localizationInit = 'en', on } = $props();
 const localization = $derived(new ShortVideoAttachmentsLocalization(localizationInit));
 </script>
 
 {#if shortVideo.products.length || shortVideo.ad}
   <div class="short-video-attachments">
-    {#if shortVideo.products.length}
-      <div class="short-video-attachments__section-header">{localization.productsSection}</div>
-      <div class="short-video-attachments__products">
-        {#each shortVideo.products as product (product.id)}
-          <ShortVideoProductViewer product={product} localization={localization.productLocalization} on={on} />
-        {/each}
-      </div>
+    {#if shortVideo.ad}
+      <AdCard ad={shortVideo.ad} />
     {/if}
 
-    {#if shortVideo.ad}
-      <div class="short-video-attachments__section-header">{localization.offersSection}</div>
-      <div class="short-video-attachments__offer">
-        <ShortVideoAdViewer ad={shortVideo.ad} />
-      </div>
+    {#if shortVideo.products.length}
+      {#each shortVideo.products as product (product.id)}
+        <ProductCard product={product} localization={localization.productLocalization} on={on} />
+      {/each}
     {/if}
   </div>
 {/if}
@@ -38,31 +32,9 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
   }
 }
 .short-video-attachments {
-  --_short-video-attachments--margin-vertical: var(--short-video-attachments--margin-vertical, 0);
-  --_short-video-attachments--spacing-vertical: var(--short-video-attachments--spacing-vertical, 1.25rem);
-  --_short-video-attachments--spacing-horizontal: var(--short-video-attachments--spacing-horizontal, 1rem);
+  --_short-video-attachments--gap: var(--short-video-attachments--gap, 2.75rem);
   display: flex;
   flex-direction: column;
-  gap: var(--_short-video-attachments--spacing-vertical);
-  padding: var(--_short-video-attachments--margin-vertical) 0;
-}
-.short-video-attachments__section-header {
-  color: #d1d5db;
-  font-size: 1rem;
-  font-weight: 700;
-  line-height: 1.2;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 0.5rem;
-  padding: 0.5625rem var(--_short-video-attachments--spacing-horizontal) 0;
-}
-.short-video-attachments__products {
-  padding: 0 var(--_short-video-attachments--spacing-horizontal);
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-column-gap: var(--_short-video-attachments--spacing-horizontal);
-  grid-row-gap: var(--_short-video-attachments--spacing-vertical);
-}
-.short-video-attachments__offer {
-  padding: 0 var(--_short-video-attachments--spacing-horizontal);
+  gap: var(--_short-video-attachments--gap);
+  padding: 0;
 }</style>

package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts

@@ -3,7 +3,7 @@ import { type IShortVideoAttachmentsLocalization } from './short-video-attachmen
 import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
-    localization: IShortVideoAttachmentsLocalization | Locale;
+    localization?: IShortVideoAttachmentsLocalization | Locale;
     on?: {
         productClick?: (productId: string) => void;
     };

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Icon } from '../../ui/icon';
+import { MediaVolumeManager } from '../../ui/media-playback';
+import IconHeartFilled from '@fluentui/svg-icons/icons/heart_20_filled.svg?raw';
+import IconHeart from '@fluentui/svg-icons/icons/heart_28_regular.svg?raw';
+import IconShare from '@fluentui/svg-icons/icons/share_28_regular.svg?raw';
+import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_28_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_28_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_28_regular.svg?raw';
+let { model, socialInteractionsHandler, on } = $props();
+const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
+let isLikedStore = $state.raw({
+    get isLiked() {
+        return false;
+    }
+});
+const availableActionsCount = $derived.by(() => {
+    let actionsCount = 0;
+    if (model.products.length || model.ad) {
+        actionsCount++;
+    }
+    if (showSocialInteractions) {
+        actionsCount++;
+    }
+    if (!model.media.isImage) {
+        actionsCount++;
+    }
+    return actionsCount;
+});
+$effect(() => {
+    refreshIsLiked();
+});
+const onAttachmentsClicked = () => {
+    var _a;
+    (_a = on === null || on === void 0 ? void 0 : on.attachmentsClicked) === null || _a === void 0 ? void 0 : _a.call(on);
+};
+const onMuteClicked = () => {
+    MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;
+};
+const onLikeClicked = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!socialInteractionsHandler) {
+        return;
+    }
+    yield socialInteractionsHandler.onToggleLike(model.id);
+});
+const onShareClicked = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!socialInteractionsHandler) {
+        return;
+    }
+    yield socialInteractionsHandler.onShare(model.id);
+});
+const refreshIsLiked = () => __awaiter(void 0, void 0, void 0, function* () {
+    if (!socialInteractionsHandler) {
+        return;
+    }
+    isLikedStore = yield socialInteractionsHandler.isLiked(model.id);
+});
+</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}>
+        <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}>
+        <Icon src={isLikedStore.isLiked ? IconHeartFilled : IconHeart} />
+      </button>
+
+      <button type="button" class="short-video-controls__action" onclick={onShareClicked}>
+        <Icon src={IconShare} />
+      </button>
+    {/if}
+
+    {#if !model.media.isImage}
+      <button type="button" class="short-video-controls__action" onclick={onMuteClicked}>
+        {#if MediaVolumeManager.isMuted}
+          <Icon src={IconSpeakerMute} />
+        {:else}
+          <Icon src={IconSpeaker2} />
+        {/if}
+      </button>
+    {/if}
+  </div>
+{/if}
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    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;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1.125rem;
+  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);
+}
+.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);
+}
+.short-video-controls__action {
+  --icon--size: var(--_short-video-controls--icon--size);
+  --icon--color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.short-video-controls__action--liked {
+  --icon--color: #e71d36;
+}
+.short-video-controls__action:hover {
+  transform: scale(1.2);
+  transition: 0.3s;
+}</style>

package/dist/short-videos/short-video-viewer/cmp.short-video-controls.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ShortVideoSocialInteractionsHanlder } from './types';
+type Props = {
+    model: {
+        id: string;
+        enableSocialInteractions: boolean;
+        products: unknown[];
+        ad: unknown | null;
+        media: {
+            isImage: boolean;
+        };
+    };
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
+    on?: {
+        attachmentsClicked?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">import { Image } from '../../ui/image';
+import { LineClamp } from '../../ui/line-clamp';
 import { Video } from '../../ui/video';
 import { default as AttachmentsInline } from './cmp.attachments-inline.svelte';
-import { default as ShortVideoDescription } from './description.svelte';
+import { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
+import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
-let { model, availableSideSpace = 0, showAttachments = true, autoplay = 'on-appearance', localization: localizationInit, on } = $props();
+let { model, socialInteractionsHandler, availableSideSpace = 0, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit = 'en', on } = $props();
 const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
 let actionsPanelRef = $state.raw(null);
 const uiManager = new ShortVideoViewerUiManager();
@@ -26,13 +28,24 @@ $effect(() => {
 });
 $effect(() => {
     uiManager.updateCanShowAttachments(showAttachments);
+    uiManager.updateCanShowControls(showControls);
 });
 </script>
 
 <div class="short-video-viewer" style={uiManager.globalCssVariables}>
   <div class="short-video-viewer__media">
     {#if !model.media.isImage}
-      <Video controls={false} autoplay={autoplay} src={model.media.url} loop={true} poster={model.media.thumbnailUrl} id={model.id} on={on} />
+      <Video
+        src={model.media.url}
+        poster={model.media.thumbnailUrl}
+        controls={false}
+        autoplay={autoplay}
+        loop={true}
+        id={model.id}
+        hideSpeaker={true}
+        on={{
+          progress: on?.progress
+        }} />
     {:else}
       <Image src={model.media.url} />
     {/if}
@@ -45,9 +58,21 @@ $effect(() => {
     {#if uiManager.showAttachments}
       <AttachmentsInline model={model} />
     {/if}
+    {#if uiManager.showControls}
+      <ShortVideoControls model={model} socialInteractionsHandler={socialInteractionsHandler} on={{ attachmentsClicked: uiManager.toggleEnableAttachments }} />
+    {/if}
   </div>
   <div class="short-video-viewer__description">
-    <ShortVideoDescription model={model} localization={localization} />
+    {#if model.heading}
+      <div class="short-video-viewer__heading">
+        <ShortVideoHeading model={model.heading} localization={localization} />
+      </div>
+    {/if}
+    <div class="short-video-viewer__text">
+      {#if model.text}
+        <LineClamp value={model.text} maxLines={2} enableShowMore={true} />
+      {/if}
+    </div>
   </div>
 </div>
 
@@ -65,8 +90,6 @@ $effect(() => {
 .short-video-viewer {
   --_short-video-viewer--actions-panel--top: var(--short-video-viewer--actions-panel--top, 0.9375rem);
   --_short-video-viewer--actions-panel--bottom: var(--short-video-viewer--actions-panel--bottom, 0.9375rem);
-  --_short-video-viewer--button--background-color: #f3f4f6;
-  --_short-video-viewer--button--font-color: #2e2e2e;
   --video--media-fit: cover;
   width: 100%;
   min-width: 100%;
@@ -75,13 +98,6 @@ $effect(() => {
   min-height: 100%;
   max-height: 100%;
   position: relative;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .short-video-viewer {
-    --_short-video-viewer--button--background-color: #ffffff;
-    --_short-video-viewer--button--font-color: #2e2e2e;
-  }
 }
 .short-video-viewer__media {
   height: 100%;
@@ -122,12 +138,22 @@ $effect(() => {
 }
 .short-video-viewer__description {
   position: absolute;
-  bottom: 0.9375rem;
-  left: 0.625rem;
-  right: calc(1.25rem + var(--_short-video-viewer--button--size));
-  --short-video-viewer--description--font--primary-color: #ffffff;
-  --short-video-viewer--description--font--secondary-color: #ffffff;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 1.875rem 1.25rem;
+  padding-right: calc(1.25rem + var(--_short-video-viewer--button--size));
+  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
+  border-radius: 0rem 0.375rem 0.375rem;
+}
+.short-video-viewer__heading {
+  --short-video-heading--padding: 0 0 0.875rem 0;
+  --short-video-heading--text--color: #ffffff;
+  --short-video-heading--meta--color: #ffffff;
 }
-:global([data-theme="dark"]) .short-video-viewer__description {
-  --short-video-viewer--description--font--primary-color: #ffffff;
+.short-video-viewer__text {
+  color: #ffffff;
+  font-size: 1.125rem;
+  font-weight: 400;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
 }</style>

package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts

@@ -1,12 +1,14 @@
 import type { Locale } from '../../core/locale';
 import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
-import type { ShortVideoViewerModel } from './types';
+import type { ShortVideoSocialInteractionsHanlder, ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
+    socialInteractionsHandler?: ShortVideoSocialInteractionsHanlder;
     availableSideSpace?: number;
     showAttachments?: boolean;
+    showControls?: boolean;
     autoplay?: true | false | 'on-appearance';
-    localization: IShortVideoViewerLocalization | Locale;
+    localization?: IShortVideoViewerLocalization | Locale;
     on?: {
         progress?: (progress: number) => void;
     };

package/dist/short-videos/short-video-viewer/index.d.ts

@@ -1,12 +1,8 @@
 export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
-export { default as ShortVideoAdViewer } from './cmp.ad.svelte';
-export { default as ShortVideoProductViewer } from './cmp.product.svelte';
-export { default as ShortVideoSocialInteractions } from './cmp.social-interactions.svelte';
+export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
-export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
-export type { ShortVideoViewerModel, ShortVideoViewerAdModel, ShortVideoViewerProductModel } from './types';
+export type { ShortVideoViewerModel, ShortVideoSocialInteractionsHanlder, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
-export type { IShortVideoDetailsLocalization } from './short-video-details-localization';
 export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
-export { mapShortVideoViewerModel } from './mapper';
+export { mapToShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/index.js

@@ -1,8 +1,5 @@
 export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
-export { default as ShortVideoAdViewer } from './cmp.ad.svelte';
-export { default as ShortVideoProductViewer } from './cmp.product.svelte';
-export { default as ShortVideoSocialInteractions } from './cmp.social-interactions.svelte';
+export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
-export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
-export { mapShortVideoViewerModel } from './mapper';
+export { mapToShortVideoViewerModel } from './mapper';

package/dist/short-videos/short-video-viewer/mapper.d.ts

@@ -1,3 +1,3 @@
 import type { ShortVideoViewerPayloadFragment } from './operations.generated';
 import type { ShortVideoViewerModel } from './types';
-export declare const mapShortVideoViewerModel: (payload: ShortVideoViewerPayloadFragment) => ShortVideoViewerModel;
+export declare const mapToShortVideoViewerModel: (payload: ShortVideoViewerPayloadFragment) => ShortVideoViewerModel;