@streamscloud/embeddable 6.5.1 → 7.0.0-1758321646285

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

@@ -1,7 +1,7 @@
-import { isLocale } from '../../core/locale';
+import {} from '../../core/locale';
 export class ShortVideoAttachmentsLocalization {
-    productLocalization;
-    constructor(init) {
-        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
+    productLocale;
+    constructor(locale) {
+        this.productLocale = locale;
     }
 }

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

@@ -1,14 +1,7 @@
 import { type Locale } from '../../core/locale';
-import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-export interface IShortVideoViewerLocalization {
-    viewsCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization | Locale;
-    productLocalization?: IProductCardLocalization | Locale;
-}
 export declare class ShortVideoViewerLocalization {
     viewsCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | Locale;
-    productLocalization: IProductCardLocalization | Locale;
-    constructor(init: IShortVideoViewerLocalization | Locale);
+    timeAgoLocale: Locale;
+    productLocale: Locale;
+    constructor(locale: Locale);
 }

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

@@ -1,12 +1,12 @@
-import { isLocale } from '../../core/locale';
+import {} from '../../core/locale';
 export class ShortVideoViewerLocalization {
     viewsCount;
-    timeAgoLocalization;
-    productLocalization;
-    constructor(init) {
-        this.viewsCount = isLocale(init) ? loc.viewsCount[init] : init.viewsCount || loc.viewsCount.en;
-        this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
-        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
+    timeAgoLocale;
+    productLocale;
+    constructor(locale) {
+        this.viewsCount = loc.viewsCount[locale];
+        this.timeAgoLocale = locale;
+        this.productLocale = locale;
     }
 }
 const loc = {

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { createShadowRoot } from '../../ui/shadow-dom';
 import { mount, unmount } from 'svelte';
-let { dataProvider, socialInteractionsHandler, localization, showStreamsCloudWatermark, disableBackground, analyticsHandler, on, mediaCenterDataProvider } = $props();
+let { dataProvider, socialInteractionsHandler, locale, showStreamsCloudWatermark, disableBackground, analyticsHandler, on, mediaCenterConfig } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(MediaCenter, {
         target: shadowRoot,
         props: {
-            dataProvider: mediaCenterDataProvider || null,
+            config: mediaCenterConfig || null,
             playerProps: {
-                type: MediaCenterMode.ShortVideos,
+                mode: MediaCenterMode.ShortVideos,
                 props: {
                     dataProvider,
                     socialInteractionsHandler,
                     disableBackground,
-                    localization,
+                    locale,
                     showStreamsCloudWatermark,
                     analyticsHandler,
                     on

package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { IMediaCenterDataProvider } from '../../media-center/data-provider';
+import type { IMediaCenterConfig } from '../../media-center/config/types';
 import type { ShortVideoPlayerProps } from './types';
 type $$ComponentProps = ShortVideoPlayerProps & {
-    mediaCenterDataProvider?: IMediaCenterDataProvider;
+    mediaCenterConfig?: IMediaCenterConfig;
 };
 declare const Cmp: import("svelte").Component<$$ComponentProps, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/short-videos/short-videos-player/controls.svelte

@@ -71,10 +71,12 @@ const trackNavigationButtonsSize = (node) => {
           <div class="short-videos-player-controls__short-video-attachments" transition:slideHorizontally|local>
             <ShortVideoViewerAttachments
               shortVideo={shortVideo}
-              localization={localization.shortVideoAttachmentsLocalization}
+              locale={localization.shortVideoAttachmentsLocale}
               on={{
                 productClick: on.productClick,
-                productImpression: on.productImpression
+                productImpression: on.productImpression,
+                adClick: on.adClick,
+                adImpression: on.adImpression
               }} />
           </div>
         {/if}

package/dist/short-videos/short-videos-player/controls.svelte.d.ts

@@ -13,6 +13,8 @@ type Props = {
         closePlayer?: () => void;
         productClick?: (productId: string) => void;
         productImpression?: (productId: string, videoId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
     };
 };
 declare const Controls: import("svelte").Component<Props, {}, "">;

package/dist/short-videos/short-videos-player/index.d.ts

@@ -1,17 +1,17 @@
-import { type IMediaCenterDataProvider } from '../../media-center/data-provider';
+import { type IMediaCenterConfig } from '../../media-center/config/types';
+import type { IPostSocialInteractionsHandler } from '../short-video-viewer';
 import type { IPlayerItemsProvider } from '../../ui/player';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
 import { mapToShortVideoPlayerModel } from './mapper';
-import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { type PlayerSettings, type IShortVideoAnalyticsHandler, type ShortVideoPlayerModel } from './types';
 export { ShortVideosPlayer, type ShortVideoPlayerModel };
-export type { IShortVideosPlayerLocalization, IMediaCenterDataProvider, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
+export type { IMediaCenterConfig, IPlayerItemsProvider, IShortVideoAnalyticsHandler };
 export { mapToShortVideoPlayerModel };
 /**
  * Opens the short videos player modal.
  *
  * Two overloads (mutually exclusive):
- * - Provider mode: openShortVideosPlayer({ shortVideosProvider, mediaCenterDataProvider?, ...common })
+ * - Provider mode: openShortVideosPlayer({ shortVideosProvider, mediaCenterConfig?, ...common })
  * - IDs mode: openShortVideosPlayer({ ids, initiator, graphqlOrigin?, initialId?, mediaPageId?, ...common })
  *
  * @param init Configuration options.
@@ -19,8 +19,8 @@ export { mapToShortVideoPlayerModel };
  * Provider mode (overload 1)
  * @param {IPlayerItemsProvider<ShortVideoPlayerModel>} init.shortVideosProvider
  *   Provider that supplies short-video items to the player.
- * @param {IMediaCenterDataProvider} [init.mediaCenterDataProvider]
- *   Optional media-center data provider.
+ * @param {IMediaCenterConfig} [init.mediaCenterConfig]
+ *   Optional media-center config.
  *
  * IDs mode (overload 2)
  * @param {string[]} init.ids
@@ -32,12 +32,12 @@ export { mapToShortVideoPlayerModel };
  * @param {string} [init.initialId]
  *   ID of the video to open first (optional).
  * @param {string} [init.mediaPageId]
- *   Optional media page ID used to construct an internal media-center data provider.
+ *   Optional media page ID used to construct an internal media-center config.
  *
  * Common settings
  * @param {IPostSocialInteractionsHandler} [init.socialInteractionsHandler]
  *   Handler for social interactions (like, share, etc.).
- * @param {IShortVideosPlayerLocalization | Locale} [init.localization]
+ * @param {Locale} [init.locale]
  *   Localization for the player UI. If omitted, 'en' is used.
  * @param {boolean} [init.disableBackground]
  *   If true, hides the player's background image.
@@ -60,7 +60,7 @@ export { mapToShortVideoPlayerModel };
  *
  * openShortVideosPlayer({
  *   shortVideosProvider: myShortVideosProvider,
- *   mediaCenterDataProvider: myMediaCenterDataProvider,
+ *   mediaCenterConfig: mymediaCenterConfig,
  *   localization: { next: 'Next', previous: 'Previous' },
  *   showStreamsCloudWatermark: true,
  *   on: {
@@ -90,7 +90,9 @@ export { mapToShortVideoPlayerModel };
  */
 export declare function openShortVideosPlayer(init: PlayerSettings & {
     shortVideosProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
-    mediaCenterDataProvider?: IMediaCenterDataProvider;
+    mediaCenterConfig?: IMediaCenterConfig;
+    analyticsHandler?: IShortVideoAnalyticsHandler;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
 }): void;
 export declare function openShortVideosPlayer(init: PlayerSettings & {
     ids: string[];

package/dist/short-videos/short-videos-player/index.js

@@ -1,5 +1,6 @@
 import { toastrWarning } from '../../core/toastr';
-import { InternalMediaCenterDataProvider } from '../../media-center/data-provider';
+import { InternalMediaCenterConfig } from '../../media-center/config/internal-media-center-config';
+import {} from '../../media-center/config/types';
 import { MediaCenter, MediaCenterMode } from '../../media-center/media-center';
 import { ModalShadowHost } from '../../ui/shadow-dom';
 import { default as ShortVideosPlayer } from './cmp.short-videos-player.svelte';
@@ -11,7 +12,7 @@ import { mount, unmount } from 'svelte';
 export { ShortVideosPlayer };
 export { mapToShortVideoPlayerModel };
 export function openShortVideosPlayer(init) {
-    const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground, localization, showStreamsCloudWatermark } = init;
+    const { shortVideosProvider, ids, graphqlOrigin, initialId, initiator, socialInteractionsHandler, disableBackground, locale, showStreamsCloudWatermark } = init;
     let dataProvider = shortVideosProvider;
     if (!dataProvider && ids) {
         dataProvider = new InternalShortVideoPlayerProvider({ ids, graphqlOrigin, initialId, initiator });
@@ -20,9 +21,9 @@ export function openShortVideosPlayer(init) {
         toastrWarning('Data provider is not specified.');
         return;
     }
-    let mediaCenterDataProvider = init.mediaCenterDataProvider;
-    if (!mediaCenterDataProvider && init.mediaPageId) {
-        mediaCenterDataProvider = new InternalMediaCenterDataProvider(init.mediaPageId, graphqlOrigin);
+    let mediaCenterConfig = init.mediaCenterConfig;
+    if (!mediaCenterConfig && init.mediaPageId) {
+        mediaCenterConfig = new InternalMediaCenterConfig(init.mediaPageId, graphqlOrigin);
     }
     let analyticsHandler = init.analyticsHandler;
     if (!analyticsHandler && !init.shortVideosProvider) {
@@ -33,14 +34,14 @@ export function openShortVideosPlayer(init) {
     const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
-            dataProvider: mediaCenterDataProvider || null,
+            config: mediaCenterConfig || null,
             playerProps: {
-                type: MediaCenterMode.ShortVideos,
+                mode: MediaCenterMode.ShortVideos,
                 props: {
                     dataProvider,
                     socialInteractionsHandler,
                     disableBackground,
-                    localization,
+                    locale,
                     showStreamsCloudWatermark,
                     analyticsHandler,
                     on: {

package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.d.ts

@@ -5,4 +5,6 @@ export declare class InternalShortVideoAnalyticsHandler implements IShortVideoAn
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
+    trackAdImpression: (adId: string) => void;
+    trackAdClick: (adId: string) => void;
 }

package/dist/short-videos/short-videos-player/internal-short-video-analytics-handler.js

@@ -10,4 +10,6 @@ export class InternalShortVideoAnalyticsHandler {
     trackShortVideoView = (videoId) => AppEventsTracker.trackShortVideoView(videoId);
     trackShortVideoProductImpression = (productId, videoId) => AppEventsTracker.trackShortVideoProductImpression(productId, videoId);
     trackShortVideoProductClick = (productId, videoId) => AppEventsTracker.trackShortVideoProductClick(productId, videoId);
+    trackAdImpression = (adId) => AppEventsTracker.trackAdImpression(adId);
+    trackAdClick = (adId) => AppEventsTracker.trackAdClick(adId);
 }

package/dist/short-videos/short-videos-player/short-videos-player-localization.d.ts

@@ -1,14 +1,7 @@
 import { type Locale } from '../../core/locale';
-import type { IShortVideoAttachmentsLocalization, IShortVideoViewerLocalization } from '../short-video-viewer';
-import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
-export interface IShortVideosPlayerLocalization {
-    shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
-    swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
-}
 export declare class ShortVideosPlayerLocalization {
-    shortVideoAttachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
-    swipeIndicatorLocalization: ISwipeIndicatorLocalization | Locale;
-    constructor(init: IShortVideosPlayerLocalization | Locale);
+    shortVideoAttachmentsLocale: Locale;
+    shortVideoViewerLocale: Locale;
+    swipeIndicatorLocale: Locale;
+    constructor(locale: Locale);
 }

package/dist/short-videos/short-videos-player/short-videos-player-localization.js

@@ -1,11 +1,11 @@
-import { isLocale } from '../../core/locale';
+import {} from '../../core/locale';
 export class ShortVideosPlayerLocalization {
-    shortVideoAttachmentsLocalization;
-    shortVideoViewerLocalization;
-    swipeIndicatorLocalization;
-    constructor(init) {
-        this.shortVideoAttachmentsLocalization = isLocale(init) ? init : init.shortVideoAttachmentsLocalization || 'en';
-        this.shortVideoViewerLocalization = isLocale(init) ? init : init.shortVideoViewerLocalization || 'en';
-        this.swipeIndicatorLocalization = isLocale(init) ? init : init.swipeIndicatorLocalization || 'en';
+    shortVideoAttachmentsLocale;
+    shortVideoViewerLocale;
+    swipeIndicatorLocale;
+    constructor(locale) {
+        this.shortVideoAttachmentsLocale = locale;
+        this.shortVideoViewerLocale = locale;
+        this.swipeIndicatorLocale = locale;
     }
 }

package/dist/short-videos/short-videos-player/short-videos-player-view.svelte

@@ -19,8 +19,8 @@ import { InternalShortVideoPlayerProvider } from './internal-short-video-player-
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization';
 import { ShortVideosPlayerUiManager } from './ui-manager.svelte';
 import { untrack } from 'svelte';
-let { dataProvider, socialInteractionsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
-const localization = $derived(new ShortVideosPlayerLocalization(localizationInit));
+let { dataProvider, socialInteractionsHandler, locale = 'en', showStreamsCloudWatermark, disableBackground, analyticsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
+const localization = $derived(new ShortVideosPlayerLocalization(locale));
 let everTouched = $state(false);
 let background = $state(null);
 let bufferIsLoading = $state(false);
@@ -97,6 +97,12 @@ const onShortVideoProductClick = (productId, videoId) => {
 const onShortVideoProductImpression = (productId, videoId) => {
     analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackShortVideoProductImpression(productId, videoId);
 };
+const onShortVideoAdClick = (adId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdClick(adId);
+};
+const onShortVideoAdImpression = (adId) => {
+    analyticsHandler === null || analyticsHandler === void 0 ? void 0 : analyticsHandler.trackAdImpression(adId);
+};
 </script>
 
 <svelte:document onkeydown={(e) => handleEsc(e, onPlayerClose)} />
@@ -137,15 +143,17 @@ const onShortVideoProductImpression = (productId, videoId) => {
                 autoplay="on-appearance"
                 showAttachments={uiManager.showShortVideoOverlayAttachments}
                 showControls={uiManager.showShortVideoOverlayControls}
-                localization={localization.shortVideoViewerLocalization}
+                locale={localization.shortVideoViewerLocale}
                 on={{
                   productClick: (productId) => onShortVideoProductClick(productId, item.id),
-                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId)
+                  productImpression: (productId, videoId) => onShortVideoProductImpression(productId, videoId),
+                  adClick: onShortVideoAdClick,
+                  adImpression: onShortVideoAdImpression
                 }} />
             {/snippet}
           </PlayerSlider>
           {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
-            <SwipeIndicator localization={localization.swipeIndicatorLocalization} />
+            <SwipeIndicator locale={localization.swipeIndicatorLocale} />
           {/if}
         </div>
       </SpotlightLayout>
@@ -158,7 +166,9 @@ const onShortVideoProductImpression = (productId, videoId) => {
         on={{
           closePlayer: on?.playerClosed,
           productClick: (productId) => onShortVideoProductClick(productId, buffer?.current?.id || ''),
-          productImpression: onShortVideoProductImpression
+          productImpression: onShortVideoProductImpression,
+          adClick: onShortVideoAdClick,
+          adImpression: onShortVideoAdImpression
         }} />
     {:else}
       <Loading positionFixedCenter={true} timeout={1000} />

package/dist/short-videos/short-videos-player/types.d.ts

@@ -1,26 +1,26 @@
 import type { Locale } from '../../core/locale';
 import type { ShortVideoViewerModel, IPostSocialInteractionsHandler } from '../short-video-viewer';
 import type { IPlayerItemsProvider } from '../../ui/player';
-import type { IShortVideosPlayerLocalization } from './short-videos-player-localization';
 export interface IShortVideoAnalyticsHandler {
     setOrganizationId: (organizationId: string) => void;
     trackShortVideoView: (videoId: string) => void;
     trackShortVideoProductImpression: (productId: string, videoId: string) => void;
     trackShortVideoProductClick: (productId: string, videoId: string) => void;
+    trackAdImpression: (adId: string) => void;
+    trackAdClick: (adId: string) => void;
 }
 export type ShortVideoPlayerModel = ShortVideoViewerModel & {
     analyticsOrganizationId: string | null;
 };
 export type ShortVideoPlayerProps = PlayerSettings & {
     dataProvider: IPlayerItemsProvider<ShortVideoPlayerModel>;
+    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IShortVideoAnalyticsHandler;
 };
 export type PlayerSettings = {
-    socialInteractionsHandler?: IPostSocialInteractionsHandler;
     disableBackground?: boolean;
-    localization?: IShortVideosPlayerLocalization | Locale;
+    locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    analyticsHandler?: IShortVideoAnalyticsHandler;
     on?: {
         playerClosed?: () => void;
         videoActivated?: (id: string) => void;

package/dist/streams/cmp.stream-product-card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { ProductCard } from '../products/product-card';
 import { onMount } from 'svelte';
-let { product, streamId, localization, includeBeforeNowPrefix, inert = false, on } = $props();
+let { product, streamId, locale, includeBeforeNowPrefix, inert = false, on } = $props();
 let productElement;
 onMount(() => {
     if (productElement && (on === null || on === void 0 ? void 0 : on.impression)) {
@@ -21,5 +21,5 @@ onMount(() => {
 </script>
 
 <div bind:this={productElement}>
-  <ProductCard product={product} localization={localization} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
+  <ProductCard product={product} locale={locale} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
 </div>

package/dist/streams/cmp.stream-product-card.svelte.d.ts

@@ -1,10 +1,9 @@
 import type { Locale } from '../core/locale';
-import type { IProductCardLocalization } from '../products/product-card/product-card-localization';
 import type { ProductCardModel } from '../products/product-card/types';
 type Props = {
     product: ProductCardModel;
     streamId: string;
-    localization?: IProductCardLocalization | Locale;
+    locale?: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
     on?: {

package/dist/streams/layout/cmp.slot-content.svelte

@@ -2,7 +2,7 @@
 import { StreamElementView } from './element-views';
 import { StreamComponentDataType } from './enums';
 import { onMount } from 'svelte';
-let { model, localization, on } = $props();
+let { model, locale, on } = $props();
 const component = $derived.by(() => {
     return model.components.find((c) => (model.data ? c.dataType === model.data.type : c.dataType === StreamComponentDataType.NoData));
 });
@@ -62,7 +62,7 @@ onMount(() => {
 {#snippet slotContent()}
   {#if component && (!model.data || dataIsFilled)}
     {#each component.elements as element (element)}
-      <StreamElementView model={element} data={model.data} localization={localization} on={on} />
+      <StreamElementView model={element} data={model.data} locale={locale} on={on} />
     {/each}
   {/if}
 {/snippet}

package/dist/streams/layout/cmp.slot-content.svelte.d.ts

@@ -1,9 +1,8 @@
 import type { Locale } from '../../core/locale';
-import { type IStreamElementLocalization } from './element-views';
 import type { StreamSlot } from './slot';
 type Props = {
     model: StreamSlot;
-    localization: IStreamElementLocalization | Locale;
+    locale: Locale;
     on?: {
         productClick: (productId: string) => void;
         productImpression?: (productId: string) => void;

package/dist/streams/layout/element-views/cmp.container-stream-element.svelte

@@ -1,16 +1,11 @@
-<script lang="ts">import {} from './stream-element-localization';
-import { StreamElementStyleDirection } from '../enums';
+<script lang="ts">import { StreamElementStyleDirection } from '../enums';
 import { generateContainerStyles } from '../styles-transformer';
 import { default as StreamElement } from './cmp.stream-element.svelte';
-let { model, data, localization } = $props();
+let { model, data, locale } = $props();
 </script>
 
 <div class="container-stream-element" style={generateContainerStyles(model.styles)}>
   {#each model.elements as element (element)}
-    <StreamElement
-      model={element}
-      data={data}
-      constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical}
-      localization={localization} />
+    <StreamElement model={element} data={data} constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical} locale={locale} />
   {/each}
 </div>

package/dist/streams/layout/element-views/cmp.container-stream-element.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { Locale } from '../../../core/locale';
-import { type IStreamElementLocalization } from './stream-element-localization';
 import type { ContainerStreamElementModel } from '../elements';
 import type { StreamSlotData } from '../slot-data';
 type Props = {
     model: ContainerStreamElementModel;
     data: StreamSlotData | null;
-    localization: IStreamElementLocalization | Locale;
+    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.price-stream-element.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">var _a;
 import { PriceStreamElementLocalization } from './price-stream-element-localization';
 import { default as PriceElementView } from './price-element-view.svelte';
-let { model, data, localization: localizationInit } = $props();
-const localization = $derived(new PriceStreamElementLocalization(localizationInit));
+let { model, data, locale } = $props();
+const localization = $derived(new PriceStreamElementLocalization(locale));
 let baseMaxHeight = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 32);
 let adjustedHeight = $derived(baseMaxHeight);
 </script>

package/dist/streams/layout/element-views/cmp.price-stream-element.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { Locale } from '../../../core/locale';
-import { type IPriceStreamElementLocalization } from './price-stream-element-localization';
 import type { PriceStreamElementModel } from '../elements';
 import type { StreamLayoutProductPriceModel } from '../models';
 type Props = {
     model: PriceStreamElementModel;
     data: StreamLayoutProductPriceModel;
-    localization: IPriceStreamElementLocalization | Locale;
+    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
 import { ShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { mapToShortVideoViewerModel } from '../models';
-let { data, localization: localizationInit, on } = $props();
-const localization = $derived(new ShortVideoStreamElementLocalization(localizationInit));
+let { data, locale, on } = $props();
+const localization = $derived(new ShortVideoStreamElementLocalization(locale));
 </script>
 
-<ShortVideoViewer
-  model={mapToShortVideoViewerModel(data)}
-  autoplay={false}
-  showControls={false}
-  localization={localization.shortVideoViewerLocalization}
-  on={on} />
+<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} showControls={false} locale={localization.shortVideoViewerLocale} on={on} />

package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts

@@ -1,9 +1,8 @@
 import type { Locale } from '../../../core/locale';
-import { type IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
 import { type StreamLayoutShortVideoModel } from '../models';
 type Props = {
     data: StreamLayoutShortVideoModel;
-    localization: IShortVideoStreamElementLocalization | Locale;
+    locale: Locale;
     on?: {
         progress?: (progress: number) => void;
     };

package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte

@@ -2,8 +2,8 @@
 import { StockStreamElementLocalization } from './stock-stream-element-localization';
 import { StockStreamElementLevel } from '../enums';
 import { mapFlexJustifyContent, transformNumericValue } from '../styles-transformer';
-let { model, heightOverrideDdu, localization: localizationInit } = $props();
-const localization = $derived(new StockStreamElementLocalization(localizationInit));
+let { model, heightOverrideDdu, locale } = $props();
+const localization = $derived(new StockStreamElementLocalization(locale));
 const height = $derived(heightOverrideDdu || ((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
 const containerStyles = $derived.by(() => {
     var _a;

package/dist/streams/layout/element-views/cmp.stock-stream-element.svelte.d.ts

@@ -1,10 +1,9 @@
 import type { Locale } from '../../../core/locale';
-import { type IStockStreamElementLocalization } from './stock-stream-element-localization';
 import type { StockStreamElementModel } from '../elements';
 type Props = {
     model: StockStreamElementModel;
     heightOverrideDdu?: number;
-    localization: IStockStreamElementLocalization | Locale;
+    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/streams/layout/element-views/cmp.stream-element.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">import { AnnotationStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
 import { StreamElementLocalization } from './stream-element-localization';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
-let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizationInit, on } = $props();
-const localization = $derived(new StreamElementLocalization(localizationInit));
+let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, locale, on } = $props();
+const localization = $derived(new StreamElementLocalization(locale));
 const shortVideoModel = $derived.by(() => {
     if (!data) {
         return null;
@@ -44,17 +44,17 @@ const productModel = $derived.by(() => {
 {#if model.type === StreamElementType.Annotation}
   <AnnotationStreamElementView model={model} />
 {:else if model.type === StreamElementType.Container}
-  <ContainerStreamElementView model={model} data={data} localization={localizationInit} />
+  <ContainerStreamElementView model={model} data={data} locale={locale} />
 {:else if model.type === StreamElementType.ImageRef && data}
   <ImageRefStreamElementView model={model} data={data} />
 {:else if model.type === StreamElementType.Images && imagesModel?.length}
   <ImagesStreamElementView model={model} data={imagesModel} />
 {:else if model.type === StreamElementType.Price && productModel}
-  <PriceStreamElementView model={model} data={productModel.price} localization={localization.priceElementLocalization} />
+  <PriceStreamElementView model={model} data={productModel.price} locale={localization.priceElementLocalization} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
   <ShortVideoStreamElementView
     data={shortVideoModel}
-    localization={localization.shortVideoElementLocalization}
+    locale={localization.shortVideoElementLocalization}
     on={on
       ? {
           progress: (progress: Number) => {
@@ -65,7 +65,7 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Spacer}
   <SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
 {:else if model.type === StreamElementType.Stock}
-  <StockStreamElementView model={model} localization={localization.stockElementLocalization} />
+  <StockStreamElementView model={model} locale={localization.stockElementLocalization} />
 {:else if model.type === StreamElementType.Text}
   <TextStreamElementView model={model} />
 {:else if model.type === StreamElementType.TextRef && data}

package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts

@@ -1,5 +1,4 @@
 import type { Locale } from '../../../core/locale';
-import { type IStreamElementLocalization } from './stream-element-localization';
 import type { StreamElementModel } from '../elements';
 import { StreamElementStyleDirection } from '../enums';
 import type { StreamSlotData } from '../slot-data';
@@ -7,7 +6,7 @@ type Props = {
     model: StreamElementModel;
     data: StreamSlotData | null;
     constainerDirection?: StreamElementStyleDirection;
-    localization: IStreamElementLocalization | Locale;
+    locale: Locale;
     on?: {
         progress?: (videoId: string, progress: number) => void;
     };

package/dist/streams/layout/element-views/index.d.ts

@@ -10,7 +10,3 @@ export { default as StockStreamElementView } from './cmp.stock-stream-element.sv
 export { default as TextRefStreamElementView } from './cmp.text-ref-stream-element.svelte';
 export { default as TextStreamElementView } from './cmp.text-stream-element.svelte';
 export { default as WebViewStreamElementView } from './cmp.web-view-stream-element.svelte';
-export type { IStreamElementLocalization } from './stream-element-localization';
-export type { IPriceStreamElementLocalization } from './price-stream-element-localization';
-export type { IStockStreamElementLocalization } from './stock-stream-element-localization';
-export type { IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';