@streamscloud/embeddable 1.2.0 → 2.0.1

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

@@ -0,0 +1,10 @@
+import { type IShortVideoProductLocalization } from './short-video-product-localization.svelte';
+import type { ShortVideoViewerProductModel } from './types';
+type Props = {
+    product: ShortVideoViewerProductModel;
+    fitToContainer?: boolean;
+    localization?: IShortVideoProductLocalization;
+};
+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-details.svelte

@@ -1,6 +1,5 @@
-<script lang="ts">import { AdView } from '../../advertising/ad-view';
-import { slideHorizontally } from '../../core/transitions';
-import { ProductCard } from '../../products/product-card';
+<script lang="ts">import { slideHorizontally } from '../../core/transitions';
+import { default as ShortVideoAttachments } from './cmp.attachments.svelte';
 import { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
 import { ShortVideoDetailsLocalization } from './short-video-details-localization.svelte';
 import {} from './types';
@@ -27,25 +26,7 @@ const localization = $derived(new ShortVideoDetailsLocalization(localizationInit
 
       <div class="short-video-details__section-splitter"></div>
 
-      {#if shortVideo.products.length || shortVideo.ad}
-        <div class="short-video-details__attachments">
-          {#if shortVideo.products.length}
-            <div class="short-video-details__section-header">{localization.productsSection}</div>
-            <div class="short-video-details__products">
-              {#each shortVideo.products as product (product.id)}
-                <ProductCard model={product} />
-              {/each}
-            </div>
-          {/if}
-
-          {#if shortVideo.ad}
-            <div class="short-video-details__section-header">{localization.offersSection}</div>
-            <div class="short-video-details__offer">
-              <AdView ad={shortVideo.ad} />
-            </div>
-          {/if}
-        </div>
-      {/if}
+      <ShortVideoAttachments shortVideo={shortVideo} localization={localization.attachmentsLocalization} />
     </div>
   </div>
 {/if}
@@ -63,6 +44,8 @@ const localization = $derived(new ShortVideoDetailsLocalization(localizationInit
 }
 .short-video-details {
   --_short-video-details--padding-horizontal: 1rem;
+  --short-video-attachments--margin-vertical: 1.25rem;
+  --short-video-attachments--spacing-horizontal: var(--_short-video-details--padding-horizontal);
   background: #1c1c1c;
   height: 100%;
   min-height: 100%;
@@ -74,8 +57,10 @@ const localization = $derived(new ShortVideoDetailsLocalization(localizationInit
   flex-direction: column;
   min-height: 0;
   padding-bottom: 0.9375rem;
-  overflow: hidden;
-  --custom-scrollbar-background: transparent;
+  overflow: auto;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+  --custom-scrollbar-color: #999999;
   position: absolute;
   top: 0;
   right: 0;
@@ -83,11 +68,32 @@ const localization = $derived(new ShortVideoDetailsLocalization(localizationInit
   z-index: 1;
   /* Set 'container-type: inline-size;' to reference container*/
 }
+.short-video-details::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-video-details::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+.short-video-details:hover {
+  scrollbar-color: var(--custom-scrollbar-color, #7d7d7d) var(--custom-scrollbar-background, transparent);
+  scrollbar-width: thin;
+}
+.short-video-details:hover::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+  background: var(--custom-scrollbar-background, transparent);
+  visibility: hidden;
+}
+.short-video-details:hover::-webkit-scrollbar-thumb {
+  background: var(--custom-scrollbar-color, #7d7d7d);
+}
 .short-video-details__sliding-container {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   min-height: 0;
 }
 @container (width < 576px) {
@@ -113,33 +119,6 @@ const localization = $derived(new ShortVideoDetailsLocalization(localizationInit
   word-break: break-word;
   margin-bottom: 0.4375rem;
 }
-.short-video-details__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-details--padding-horizontal) 0;
-}
 .short-video-details__section-splitter {
   border-bottom: 1px solid #4b5563;
-}
-.short-video-details__attachments {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-.short-video-details__products {
-  padding: 0 var(--_short-video-details--padding-horizontal);
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-column-gap: 1rem;
-  grid-row-gap: 1.25rem;
-  --product-card--text--color: #d1d5db;
-}
-.short-video-details__offer {
-  padding: 0 var(--_short-video-details--padding-horizontal);
 }</style>

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

@@ -3,7 +3,7 @@ import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
     collapsed: boolean;
-    localization: IShortVideoDetailsLocalization;
+    localization?: IShortVideoDetailsLocalization;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,7 +1,6 @@
-<script lang="ts">import { MediaType } from '../../core/media';
-import { Image } from '../../ui/image';
+<script lang="ts">import { Image } from '../../ui/image';
 import { Video } from '../../ui/video';
-import { default as Attachments } from './cmp.attachments.svelte';
+import { default as AttachmentsInline } from './cmp.attachments-inline.svelte';
 import { default as ShortVideoDescription } from './description.svelte';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
 import { ShortVideoViewerUiManager } from './ui-manager.svelte';
@@ -32,9 +31,9 @@ $effect(() => {
 
 <div class="short-video-viewer" style={uiManager.globalCssVariables}>
   <div class="short-video-viewer__media">
-    {#if model.media.type === MediaType.Video || model.media.type === MediaType.ShortVideo}
+    {#if !model.media.isImage}
       <Video controls={false} autoplay={autoplay} src={model.media.url} loop={true} poster={model.media.thumbnailUrl} id={model.id} />
-    {:else if model.media.type === MediaType.Image}
+    {:else}
       <Image src={model.media.url} />
     {/if}
   </div>
@@ -44,7 +43,7 @@ $effect(() => {
     class:short-video-viewer__actions-panel--inside-frame={uiManager.showActionsInsideFrame}
     bind:this={actionsPanelRef}>
     {#if uiManager.showAttachments}
-      <Attachments model={model} />
+      <AttachmentsInline model={model} />
     {/if}
   </div>
   <div class="short-video-viewer__description">
@@ -81,6 +80,7 @@ $effect(() => {
 @container (width < 576px) {
   .short-video-viewer {
     --_short-video-viewer--button--background-color: #ffffff;
+    --_short-video-viewer--button--font-color: #2e2e2e;
   }
 }
 .short-video-viewer__media {

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

@@ -1,6 +1,9 @@
-export { default as ShortVideosViewer } from './cmp.short-video-viewer.svelte';
+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 ShortVideoViewerAttachments } from './cmp.attachments.svelte';
-export { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
+export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';
-export type { ShortVideoViewerModel } from './types';
+export type { ShortVideoViewerModel, ShortVideoViewerAdModel, ShortVideoViewerProductModel } from './types';
 export type { IShortVideoViewerLocalization } from './short-video-viewer-localization.svelte';
+export type { IShortVideoDetailsLocalization } from './short-video-details-localization.svelte';

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

@@ -1,4 +1,6 @@
-export { default as ShortVideosViewer } from './cmp.short-video-viewer.svelte';
+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 ShortVideoViewerAttachments } from './cmp.attachments.svelte';
-export { default as ShortVideoHeading } from './cmp.short-video-heading.svelte';
+export { default as ShortVideoViewerAttachmentsInline } from './cmp.attachments-inline.svelte';
 export { default as ShortVideoDetails } from './cmp.short-video-details.svelte';

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

@@ -1,12 +1,17 @@
-import { AdType } from '../../advertising';
-import { mapToAdViewModel } from '../../advertising/ad-view/mapper';
-import { mapToProductCard } from '../../products/product-card/mapper';
+import { MediaType } from '../../core/enums';
+import { getMediaItemImageUrl } from '../../core/media';
+import { shouldUseSalePrice } from '../../products/price-helper';
 export const mapShortVideoViewerModel = (payload) => {
-    const allowedAdTypes = [AdType.MediaDialogPromotion];
     const mediaBlob = payload.postData.media[0];
     return {
         id: payload.id,
-        media: mediaBlob,
+        media: mediaBlob.type === MediaType.Image
+            ? { isImage: true, url: mediaBlob.url }
+            : {
+                isImage: false,
+                url: mediaBlob.url,
+                thumbnailUrl: mediaBlob.thumbnailUrl
+            },
         text: payload.postData.shortVideoData.text,
         heading: {
             image: payload.postHeading.sourceImage,
@@ -14,8 +19,8 @@ export const mapShortVideoViewerModel = (payload) => {
             displayDate: payload.postHeading.postDisplayDate,
             viewsCount: payload.postHeading.postViewsCount
         },
-        ad: payload.ad && allowedAdTypes.includes(payload.ad.type) ? mapToAdViewModel(payload.ad) : null,
-        products: payload.allProducts.map(mapToProductCard)
+        ad: payload.ad ? mapToShortVideoViewerAdModel(payload.ad) : null,
+        products: payload.allProducts.map(mapToShortVideoViewerProductModel)
         // uncomment if you want to test many products behavior
         /*.flatMap((x) => [
           { ...x, id: x.id + '1' },
@@ -26,3 +31,26 @@ export const mapShortVideoViewerModel = (payload) => {
         ])*/
     };
 };
+const mapToShortVideoViewerAdModel = (payload) => {
+    return {
+        id: payload.id,
+        image: getMediaItemImageUrl(payload.media[0]),
+        title: payload.title,
+        description: payload.description,
+        buttonText: payload.buttonText,
+        buttonUrl: payload.buttonUrl,
+        openLinkInNewWindow: payload.openLinkInNewWindow
+    };
+};
+const mapToShortVideoViewerProductModel = (payload) => {
+    const effectiveSalePrice = payload.priceAndAvailability.productSalePrices?.find((x) => shouldUseSalePrice(payload.priceAndAvailability.price, x.salePrice, x.salePriceEffectiveDateFrom, x.salePriceEffectiveDateTo));
+    return {
+        id: payload.id,
+        title: payload.title,
+        image: getMediaItemImageUrl(payload.media[0]),
+        link: payload.link,
+        currency: payload.priceAndAvailability.currency,
+        price: payload.priceAndAvailability.price,
+        salePrice: effectiveSalePrice?.salePrice ?? null
+    };
+};

package/dist/short-videos/short-video-viewer/operations.generated.d.ts

@@ -37,9 +37,9 @@ export type ShortVideoViewerPayloadFragment = {
         openLinkInNewWindow: boolean | null;
         type: SchemaTypes.AdType;
         media: Array<{
-            type: SchemaTypes.MediaType;
             url: string;
             thumbnailUrl: string | null;
+            type: SchemaTypes.MediaType;
         }>;
     } | null;
     postData: {

package/dist/short-videos/short-video-viewer/operations.generated.js

@@ -26,12 +26,77 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'allProducts' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'ProductCardPayloadFragment' } }] }
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                {
+                                    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: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'link' } },
+                                {
+                                    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' } }
+                                                    ]
+                                                }
+                                            }
+                                        ]
+                                    }
+                                }
+                            ]
+                        }
                     },
                     {
                         kind: 'Field',
                         name: { kind: 'Name', value: 'ad' },
-                        selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'FragmentSpread', name: { kind: 'Name', value: 'AdViewPayloadFragment' } }] }
+                        selectionSet: {
+                            kind: 'SelectionSet',
+                            selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'title' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'description' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'buttonText' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'buttonUrl' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'openLinkInNewWindow' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
+                                {
+                                    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',
@@ -81,107 +146,6 @@ export const ShortVideoViewerPayloadFragmentDoc = {
                     }
                 ]
             }
-        },
-        {
-            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: 'media' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'url' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'thumbnailUrl' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                },
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } }
-                            ]
-                        }
-                    },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'link' } },
-                    {
-                        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' } }
-                                        ]
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            kind: 'FragmentDefinition',
-            name: { kind: 'Name', value: 'AdViewPayloadFragment' },
-            typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Ad' } },
-            selectionSet: {
-                kind: 'SelectionSet',
-                selections: [
-                    { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'title' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'description' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'buttonText' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'buttonUrl' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'openLinkInNewWindow' } },
-                    { kind: 'Field', name: { kind: 'Name', value: 'type' } },
-                    {
-                        kind: 'Field',
-                        name: { kind: 'Name', value: 'media' },
-                        selectionSet: {
-                            kind: 'SelectionSet',
-                            selections: [
-                                { kind: 'Field', name: { kind: 'Name', value: 'type' } },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'url' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                },
-                                {
-                                    kind: 'Field',
-                                    name: { kind: 'Name', value: 'thumbnailUrl' },
-                                    arguments: [
-                                        { kind: 'Argument', name: { kind: 'Name', value: 'scale' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'image_scale' } } }
-                                    ]
-                                }
-                            ]
-                        }
-                    }
-                ]
-            }
         }
     ]
 };

package/dist/short-videos/short-video-viewer/operations.graphql

@@ -8,10 +8,37 @@ fragment ShortVideoViewerPayloadFragment on Post {
     postViewsCount
   }
   allProducts {
-    ...ProductCardPayloadFragment
+    media {
+      url
+      thumbnailUrl
+      type
+    }
+    title
+    id
+    link
+    priceAndAvailability {
+      currency
+      price
+      productSalePrices {
+        salePrice
+        salePriceEffectiveDateFrom
+        salePriceEffectiveDateTo
+      }
+    }
   }
   ad {
-    ...AdViewPayloadFragment
+    id
+    title
+    description
+    buttonText
+    buttonUrl
+    openLinkInNewWindow
+    type
+    media {
+      url
+      thumbnailUrl
+      type
+    }
   }
   postData {
     media {

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

@@ -0,0 +1,12 @@
+import type { IShortVideoProductLocalization } from './short-video-product-localization.svelte';
+export interface IShortVideoAttachmentsLocalization {
+    productsSection?: string;
+    offersSection?: string;
+    productLocalization?: IShortVideoProductLocalization;
+}
+export declare class ShortVideoAttachmentsLocalizationSvelte {
+    productsSection: string;
+    offersSection: string;
+    productLocalization: IShortVideoProductLocalization | undefined;
+    constructor(init?: IShortVideoAttachmentsLocalization);
+}

package/dist/short-videos/short-video-viewer/short-video-attachments-localization.svelte.js

@@ -0,0 +1,10 @@
+export class ShortVideoAttachmentsLocalizationSvelte {
+    productsSection = $state('Products');
+    offersSection = $state('Offers');
+    productLocalization = $state(undefined);
+    constructor(init) {
+        this.productsSection = init?.productsSection || this.productsSection;
+        this.offersSection = init?.offersSection || this.offersSection;
+        this.productLocalization = init?.productLocalization;
+    }
+}

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

@@ -1,14 +1,13 @@
 import type { ITimeAgoLocalization } from '../../ui/time-ago';
+import type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization.svelte';
 export interface IShortVideoDetailsLocalization {
-    productsSection?: string;
-    offersSection?: string;
     viewsCount?: (count: number) => string;
     timeAgoLocalization?: ITimeAgoLocalization;
+    attachmentsLocalization?: IShortVideoAttachmentsLocalization;
 }
 export declare class ShortVideoDetailsLocalization {
-    productsSection: string;
-    offersSection: string;
     viewsCount: (count: number) => string;
     timeAgoLocalization: ITimeAgoLocalization | undefined;
+    attachmentsLocalization: IShortVideoAttachmentsLocalization | undefined;
     constructor(init?: IShortVideoDetailsLocalization);
 }

package/dist/short-videos/short-video-viewer/short-video-details-localization.svelte.js

@@ -1,21 +1,10 @@
 export class ShortVideoDetailsLocalization {
-    productsSection = $state('Products');
-    offersSection = $state('Offers');
     viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
     timeAgoLocalization = $state(undefined);
+    attachmentsLocalization = $state(undefined);
     constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.productsSection !== undefined) {
-            this.productsSection = init.productsSection;
-        }
-        if (init.offersSection !== undefined) {
-            this.offersSection = init.offersSection;
-        }
-        if (init.viewsCount !== undefined) {
-            this.viewsCount = init.viewsCount;
-        }
-        this.timeAgoLocalization = init.timeAgoLocalization;
+        this.viewsCount = init?.viewsCount ? init.viewsCount : this.viewsCount;
+        this.timeAgoLocalization = init?.timeAgoLocalization;
+        this.attachmentsLocalization = init?.attachmentsLocalization;
     }
 }

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

@@ -0,0 +1,7 @@
+export interface IShortVideoProductLocalization {
+    beforeNowPrefix?: string | null;
+}
+export declare class ShortVideoProductLocalization {
+    beforeNowPrefix: string | null;
+    constructor(init?: IShortVideoProductLocalization);
+}

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

@@ -1,4 +1,4 @@
-export class ProductCardLocalization {
+export class ShortVideoProductLocalization {
     beforeNowPrefix = $state('Before');
     constructor(init) {
         if (!init) {

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

@@ -1,10 +1,13 @@
 import type { ITimeAgoLocalization } from '../../ui/time-ago';
+import type { IShortVideoProductLocalization } from './short-video-product-localization.svelte';
 export interface IShortVideoViewerLocalization {
     viewsCount?: (count: number) => string;
     timeAgoLocalization?: ITimeAgoLocalization;
+    productLocalization?: IShortVideoProductLocalization;
 }
 export declare class ShortVideoViewerLocalization {
     viewsCount: (count: number) => string;
     timeAgoLocalization: ITimeAgoLocalization | undefined;
+    productLocalization: IShortVideoProductLocalization | undefined;
     constructor(init?: IShortVideoViewerLocalization);
 }

package/dist/short-videos/short-video-viewer/short-video-viewer-localization.svelte.js

@@ -1,13 +1,10 @@
 export class ShortVideoViewerLocalization {
     viewsCount = $state((count) => (count === 1 ? '1 view' : `${count} views`));
     timeAgoLocalization = $state(undefined);
+    productLocalization = $state(undefined);
     constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.viewsCount !== undefined) {
-            this.viewsCount = init.viewsCount;
-        }
-        this.timeAgoLocalization = init.timeAgoLocalization;
+        this.viewsCount = init?.viewsCount ? init.viewsCount : this.viewsCount;
+        this.timeAgoLocalization = init?.timeAgoLocalization;
+        this.productLocalization = init?.productLocalization;
     }
 }