@streamscloud/embeddable 6.5.1 → 7.0.0-1758321646285

package/dist/media-center/media-center/index.d.ts

@@ -1,3 +1,2 @@
 export { default as MediaCenter } from './cmp.media-center.svelte';
 export { MediaCenterMode } from './types';
-export type { IMediaCenterLocalization } from './media-center-localization';

package/dist/media-center/media-center/media-center-localization.d.ts

@@ -1,13 +1,8 @@
 import { type Locale } from '../../core/locale';
-import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
-export interface IMediaCenterLocalization {
-    shortVideosSectionTitle?: string;
-    overviewLabel?: string;
-    productLocalization?: IProductCardLocalization | Locale;
-}
 export declare class MediaCenterLocalization {
     shortVideosSectionTitle: string;
+    streamsSectionTitle: string;
     overviewLabel: string;
-    productLocalization: IProductCardLocalization | Locale;
-    constructor(init: IMediaCenterLocalization | Locale);
+    productLocale: Locale;
+    constructor(locale: Locale);
 }

package/dist/media-center/media-center/media-center-localization.js

@@ -1,12 +1,14 @@
-import { isLocale } from '../../core/locale';
+import {} from '../../core/locale';
 export class MediaCenterLocalization {
     shortVideosSectionTitle;
+    streamsSectionTitle;
     overviewLabel;
-    productLocalization;
-    constructor(init) {
-        this.shortVideosSectionTitle = isLocale(init) ? loc.shortVideosSectionTitle[init] : init.shortVideosSectionTitle || loc.shortVideosSectionTitle.en;
-        this.overviewLabel = isLocale(init) ? loc.overviewLabel[init] : init.overviewLabel || loc.overviewLabel.en;
-        this.productLocalization = isLocale(init) ? init : init.productLocalization || 'en';
+    productLocale;
+    constructor(locale) {
+        this.shortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
+        this.streamsSectionTitle = loc.streamsSectionTitle[locale];
+        this.overviewLabel = loc.overviewLabel[locale];
+        this.productLocale = locale;
     }
 }
 const loc = {
@@ -14,6 +16,10 @@ const loc = {
         en: 'Popular Short Videos',
         no: 'Populære korte videoer'
     },
+    streamsSectionTitle: {
+        en: 'Latest Streams',
+        no: 'Siste Streams'
+    },
     overviewLabel: {
         en: 'Overview',
         no: 'Oversikt'

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

@@ -1,5 +1,6 @@
 <script lang="ts">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';
 let { data, localization, on } = $props();
 const shortVideoSectionItems = $derived.by(() => {
@@ -39,6 +40,18 @@ const shortVideoSectionItems = $derived.by(() => {
 
 <div class="media-center-overview">
   <div class="media-center-overview__content">
+    {#if data.streams.length}
+      <div class="media-center-overview__section">
+        <div class="media-center-overview__section-header media-center-overview__section-header--blue">
+          {localization.streamsSectionTitle}
+        </div>
+        <div class="media-center-overview__section-content">
+          {#each data.streams as item (item.id)}
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id) }}></StreamCard>
+          {/each}
+        </div>
+      </div>
+    {/if}
     {#if shortVideoSectionItems.length}
       <div class="media-center-overview__section">
         <div class="media-center-overview__section-header media-center-overview__section-header--red">
@@ -54,7 +67,7 @@ const shortVideoSectionItems = $derived.by(() => {
               </div>
             {:else if item.kind === 'product'}
               <div class="media-center-overview__card-wrapper" data-theme="dark">
-                <ProductCard product={item.data} localization={localization.productLocalization} />
+                <ProductCard product={item.data} locale={localization.productLocale} />
               </div>
             {/if}
           {/each}

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

@@ -6,6 +6,7 @@ type Props = {
     localization: MediaCenterLocalization;
     on: {
         shortVideoSelected: (shortVideo: ShortVideoPlayerModel) => void;
+        streamSelected: (id: string) => void;
     };
 };
 declare const Overview: import("svelte").Component<Props, {}, "">;

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

@@ -1,8 +1,8 @@
 import type { ShortVideoPlayerModel } from '../../short-videos/short-videos-player';
 import type { IPlayerItemsProvider } from '../../ui/player';
-import type { IMediaCenterDataProvider } from '../data-provider';
+import type { IMediaCenterConfig } from '../config/types';
 export declare const makeShortVideosProvider: (data: {
-    dataProvider: IMediaCenterDataProvider;
+    config: IMediaCenterConfig;
     categoryId?: string;
     prefetchedItems?: ShortVideoPlayerModel[];
 }) => IPlayerItemsProvider<ShortVideoPlayerModel>;

package/dist/media-center/media-center/short-video-resources-generator.js

@@ -1,10 +1,10 @@
 import { ContinuationToken } from '../../core/continuation-token';
 import { CursorDataLoader } from '../../core/data-loaders';
 export const makeShortVideosProvider = (data) => {
-    const { dataProvider, categoryId, prefetchedItems = [] } = data;
+    const { config, categoryId, prefetchedItems = [] } = data;
     const loader = new CursorDataLoader({
         loadPage: async (continuationToken) => {
-            const result = await dataProvider.getShortVideosCursor({
+            const result = await config.shortVideosPlayer.getShortVideosCursor({
                 filter: { categoryId, excludeIds: prefetchedItems.length ? prefetchedItems.map((i) => i.id) : undefined },
                 continuationToken: continuationToken.toNextChunkString(),
                 limit: 20

package/dist/media-center/media-center/streams-in-category.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">import { StreamCard } from '../../streams/stream-card';
+let { data, on } = $props();
+</script>
+
+<div class="streams-in-category">
+  <div class="streams-in-category__content">
+    {#if data.streams.length}
+      <div class="streams-in-category__section">
+        <div class="streams-in-category__section-header streams-in-category__section-header--blue">
+          {data.categoryName}
+        </div>
+        <div class="streams-in-category__section-content">
+          {#each data.streams as item (item.id)}
+            <StreamCard stream={item} on={{ click: () => on.streamSelected(item.id) }}></StreamCard>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.streams-in-category {
+  background: transparent;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 1.25rem 1.875rem;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .streams-in-category {
+    padding: 0.625rem 0.9375rem;
+  }
+}
+.streams-in-category__content {
+  width: 100%;
+  max-width: 73.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.25rem;
+}
+.streams-in-category__section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.streams-in-category__section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6875rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 500;
+  color: #ffffff;
+  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);
+}
+.streams-in-category__section-header::before {
+  content: "";
+  display: inline-block;
+  width: 0.3125rem;
+  height: 1.625rem;
+  border-radius: 0.125rem;
+  background: #5a8dec;
+}
+.streams-in-category__section-content {
+  --product-card--aspect-ratio: 9/16;
+  --product-card--border-radius: 0.375rem;
+  display: grid;
+  gap: 2rem 1.25rem;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 992px) {
+  .streams-in-category__section-content {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+@container (width < 768px) {
+  .streams-in-category__section-content {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@container (width < 576px) {
+  .streams-in-category__section-content {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}</style>

package/dist/media-center/media-center/streams-in-category.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { StreamInCategoryData } from './types';
+type Props = {
+    data: StreamInCategoryData;
+    on: {
+        streamSelected: (id: string) => void;
+    };
+};
+declare const StreamsInCategory: import("svelte").Component<Props, {}, "">;
+type StreamsInCategory = ReturnType<typeof StreamsInCategory>;
+export default StreamsInCategory;

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

@@ -5,6 +5,17 @@ export declare enum MediaCenterMode {
     Stream = "stream"
 }
 export type OverviewData = {
+    streams: MediaCenterStreamModel[];
     shortVideos: ShortVideoPlayerModel[];
     products: ProductCardModel[];
 };
+export type StreamInCategoryData = {
+    categoryName: string;
+    streams: MediaCenterStreamModel[];
+};
+export type MediaCenterStreamModel = {
+    id: string;
+    title: string;
+    subTitle: string | null;
+    cover: string | null;
+};

package/dist/products/product-card/cmp.product-card.svelte

@@ -3,8 +3,8 @@ import { Image } from '../../ui/image';
 import { LineClamp } from '../../ui/line-clamp';
 import { ProportionalContainer } from '../../ui/proportional-container';
 import { ProductCardLocalization } from './product-card-localization';
-let { product, includeBeforeNowPrefix, inert = false, localization: localizationInit = 'en', on } = $props();
-const localization = $derived(new ProductCardLocalization(localizationInit));
+let { product, includeBeforeNowPrefix, inert = false, locale = 'en', on } = $props();
+const localization = $derived(new ProductCardLocalization(locale));
 const showDescriptionPresented = $derived(product.shortDescription && product.shortDescription.length > 0);
 const onProductClicked = (event) => {
     event.preventDefault();

package/dist/products/product-card/cmp.product-card.svelte.d.ts

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

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

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

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

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

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

@@ -15,15 +15,11 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
     <div class="short-video-card__media-icons">
       <Icon src={IconPhone}></Icon>
     </div>
-
-    <div class="short-video-card__gradient-overlay"></div>
   </div>
 
   {#if shortVideo.text}
     <div class="short-video-card__text">
-      <div class="short-video-card__text-value">
-        <LineClamp value={shortVideo.text} maxLines={2} enableShowMore={false} />
-      </div>
+      <LineClamp value={shortVideo.text} maxLines={2} enableShowMore={false} />
     </div>
   {/if}
 
@@ -56,20 +52,6 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
   justify-content: center;
   --image--rounded--outer--border-radius: 1%;
 }
-.short-video-card__gradient-overlay {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 350px) {
-  .short-video-card__gradient-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 80px;
-    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
-    pointer-events: none;
-  }
-}
 .short-video-card__media-icons {
   position: absolute;
   top: 0.625em;
@@ -82,33 +64,16 @@ let { shortVideo, aspectRatio = 9 / 16, on } = $props();
   --icon--filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.2));
 }
 .short-video-card__text {
-  font-weight: 500;
-  white-space: pre-line;
-  word-break: break-word;
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  line-clamp: 3;
-  -webkit-line-clamp: 3;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-.short-video-card__text-value {
-  font-size: 0.9375em;
-  line-height: 1.2;
-}
-@container (width < 350px) {
-  .short-video-card__text {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 100%);
-    color: #ffffff;
-    font-size: 0.9375rem;
-    font-weight: 400;
-    padding: 0.78125rem 1rem;
-    padding-top: 2.5rem;
-  }
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.01) 100%);
+  color: #ffffff;
+  font-size: 0.75rem;
+  font-weight: 400;
+  padding: 0.75rem 0.75rem;
+  padding-top: 2.5rem;
 }
 .short-video-card__link {
   position: absolute;

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

@@ -13,6 +13,7 @@ const attachmentsToShow = $derived.by(() => {
         image: p.image,
         link: p.link,
         productId: p.id,
+        adId: null,
         price: {
             amount: p.salePrice || p.price,
             currency: p.currency
@@ -29,6 +30,7 @@ const attachmentsToShow = $derived.by(() => {
             image: a.image,
             link: ((_a = a.ctaButton) === null || _a === void 0 ? void 0 : _a.url) || null,
             productId: null,
+            adId: a.id,
             price: a.price && a.currency
                 ? {
                     amount: a.price,
@@ -47,6 +49,9 @@ const handleAttachmentClick = (attachment) => {
     if (attachment.productId && (on === null || on === void 0 ? void 0 : on.productClick)) {
         on.productClick(attachment.productId);
     }
+    if (attachment.adId && (on === null || on === void 0 ? void 0 : on.adClick)) {
+        on.adClick(attachment.adId);
+    }
     if (attachment.link) {
         window.open(attachment.link, '_blank');
     }
@@ -54,7 +59,7 @@ const handleAttachmentClick = (attachment) => {
 let attachmentElements = $state({});
 let observer = null;
 $effect(() => {
-    if ((on === null || on === void 0 ? void 0 : on.productImpression) && Object.keys(attachmentElements).length > 0) {
+    if (((on === null || on === void 0 ? void 0 : on.productImpression) || (on === null || on === void 0 ? void 0 : on.adImpression)) && Object.keys(attachmentElements).length > 0) {
         if (observer) {
             observer.disconnect();
         }
@@ -62,15 +67,19 @@ $effect(() => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
                     const productId = entry.target.getAttribute('data-product-id');
-                    if (productId) {
+                    const adId = entry.target.getAttribute('data-ad-id');
+                    if (productId && (on === null || on === void 0 ? void 0 : on.productImpression)) {
                         on.productImpression(productId, model.id);
-                        observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
                     }
+                    else if (adId && (on === null || on === void 0 ? void 0 : on.adImpression)) {
+                        on.adImpression(adId);
+                    }
+                    observer === null || observer === void 0 ? void 0 : observer.unobserve(entry.target); // Only track once per session
                 }
             });
         }, { threshold: 0.1 });
         Object.entries(attachmentElements).forEach(([key, element]) => {
-            if (element && key.startsWith('product-')) {
+            if (element && (key.startsWith('product-') || key.startsWith('ad-'))) {
                 observer === null || observer === void 0 ? void 0 : observer.observe(element);
             }
         });
@@ -85,7 +94,7 @@ $effect(() => {
 </script>
 
 <div class="attachments-horizontal" use:horizontalWheelScroll use:swallowTouch>
-  {#each attachmentsToShow as attachment, index (attachment)}
+  {#each attachmentsToShow as attachment (attachment)}
     <div
       class="attachments-horizontal__item"
       class:attachments-horizontal__item--single={attachmentsToShow.length === 1}
@@ -93,8 +102,9 @@ $effect(() => {
       onclick={() => handleAttachmentClick(attachment)}
       onkeydown={() => {}}
       role="none"
-      bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${index}`]}
-      data-product-id={attachment.productId || undefined}>
+      bind:this={attachmentElements[attachment.productId ? `product-${attachment.productId}` : `ad-${attachment.adId}`]}
+      data-product-id={attachment.productId || undefined}
+      data-ad-id={attachment.adId || undefined}>
       <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1}>
         <div class="attachments-card__thumb">
           <ImageRounded src={attachment.image} alt="" noBorders={true} />

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

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

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

@@ -2,14 +2,19 @@
 import { default as ShortVideoProductCard } from './cmp.short-video-product-card.svelte';
 import { ShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import {} from './types';
-let { shortVideo, localization: localizationInit = 'en', on } = $props();
-const localization = $derived(new ShortVideoAttachmentsLocalization(localizationInit));
+let { shortVideo, locale = 'en', on } = $props();
+const localization = $derived(new ShortVideoAttachmentsLocalization(locale));
 </script>
 
 {#if shortVideo.hasAttachments}
   <div class="short-video-attachments">
     {#if shortVideo.ad}
-      <AdCard ad={shortVideo.ad} />
+      <AdCard
+        ad={shortVideo.ad}
+        on={{
+          adClick: on?.adClick,
+          impression: on?.adImpression
+        }} />
     {/if}
 
     {#if shortVideo.products.length}
@@ -17,7 +22,7 @@ const localization = $derived(new ShortVideoAttachmentsLocalization(localization
         <ShortVideoProductCard
           product={product}
           videoId={shortVideo.id}
-          localization={localization.productLocalization}
+          locale={localization.productLocale}
           on={{
             productClick: on?.productClick,
             impression: on?.productImpression

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

@@ -1,12 +1,13 @@
 import type { Locale } from '../../core/locale';
-import { type IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 import { type ShortVideoViewerModel } from './types';
 type Props = {
     shortVideo: ShortVideoViewerModel;
-    localization?: IShortVideoAttachmentsLocalization | Locale;
+    locale?: Locale;
     on?: {
         productClick?: (productId: string) => void;
         productImpression?: (productId: string, videoId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -1,8 +1,7 @@
 <script lang="ts">import { ImageRound } from '../../ui/image';
 import { TimeAgo } from '../../ui/time-ago';
 import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
-let { model, localization: localizationInit } = $props();
-const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
+let { model, localization } = $props();
 </script>
 
 <div class="short-video-heading">
@@ -13,7 +12,7 @@ const localization = $derived(new ShortVideoViewerLocalization(localizationInit)
   <div class="short-video-heading__info">
     <div class="short-video-heading__source-name">{model.name}</div>
     <p class="short-video-heading__metadata">
-      <TimeAgo date={model.displayDate} localization={localization.timeAgoLocalization} />
+      <TimeAgo date={model.displayDate} locale={localization.timeAgoLocale} />
       {#if Number.isInteger(model.viewsCount) && model.viewsCount}
         <span>&middot;</span>
         {localization.viewsCount(model.viewsCount)}

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

@@ -1,8 +1,8 @@
-import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
+import { ShortVideoViewerLocalization } from './short-video-viewer-localization';
 import type { ShortVideoViewerHeadingModel } from './types';
 type Props = {
     model: ShortVideoViewerHeadingModel;
-    localization: IShortVideoViewerLocalization;
+    localization: ShortVideoViewerLocalization;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { ProductCard } from '../../products/product-card';
 import { onMount } from 'svelte';
-let { product, videoId, localization, includeBeforeNowPrefix, inert = false, on } = $props();
+let { product, videoId, locale, includeBeforeNowPrefix, inert = false, on } = $props();
 let productElement;
 const productData = product;
 onMount(() => {
@@ -22,5 +22,5 @@ onMount(() => {
 </script>
 
 <div bind:this={productElement}>
-  <ProductCard product={productData} localization={localization} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
+  <ProductCard product={productData} locale={locale} includeBeforeNowPrefix={includeBeforeNowPrefix} inert={inert} on={on} />
 </div>

package/dist/short-videos/short-video-viewer/cmp.short-video-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 { ShortVideoProductCardModel } from './types';
 type Props = {
     product: ShortVideoProductCardModel;
     videoId: string;
-    localization?: IProductCardLocalization | Locale;
+    locale?: Locale;
     includeBeforeNowPrefix?: boolean;
     inert?: boolean;
     on?: {

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

@@ -6,8 +6,8 @@ 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, socialInteractionsHandler, showAttachments = true, showControls = true, autoplay = 'on-appearance', localization: localizationInit = 'en', on } = $props();
-const localization = $derived(new ShortVideoViewerLocalization(localizationInit));
+let { model, socialInteractionsHandler, showAttachments = true, showControls = true, autoplay = 'on-appearance', locale = 'en', on } = $props();
+const localization = $derived(new ShortVideoViewerLocalization(locale));
 const uiManager = new ShortVideoViewerUiManager();
 $effect(() => {
     uiManager.updateCanShowAttachments(showAttachments);
@@ -60,7 +60,9 @@ const trackControlsPanelSize = (node) => {
           model={model}
           on={{
             productClick: on?.productClick,
-            productImpression: on?.productImpression
+            productImpression: on?.productImpression,
+            adClick: on?.adClick,
+            adImpression: on?.adImpression
           }} />
       </div>
     {/if}

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

@@ -1,5 +1,4 @@
 import type { Locale } from '../../core/locale';
-import { type IShortVideoViewerLocalization } from './short-video-viewer-localization';
 import type { IPostSocialInteractionsHandler, ShortVideoViewerModel } from './types';
 type Props = {
     model: ShortVideoViewerModel;
@@ -7,11 +6,13 @@ type Props = {
     showAttachments?: boolean;
     showControls?: boolean;
     autoplay?: true | false | 'on-appearance';
-    localization?: IShortVideoViewerLocalization | Locale;
+    locale?: Locale;
     on?: {
         progress?: (progress: number) => void;
         productClick?: (productId: string) => void;
         productImpression?: (productId: string, videoId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
     };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -2,6 +2,4 @@ export { default as ShortVideoViewer } from './cmp.short-video-viewer.svelte';
 export { default as ShortVideoControls } from './cmp.short-video-controls.svelte';
 export { default as ShortVideoViewerAttachments } from './cmp.attachments.svelte';
 export type { ShortVideoViewerModel, IPostSocialInteractionsHandler, ShortVideoAdCardModel, ShortVideoProductCardModel } from './types';
-export type { IShortVideoViewerLocalization } from './short-video-viewer-localization';
-export type { IShortVideoAttachmentsLocalization } from './short-video-attachments-localization';
 export { mapToShortVideoViewerModel } from './mapper';

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

@@ -1,9 +1,5 @@
 import { type Locale } from '../../core/locale';
-import type { IProductCardLocalization } from '../../products/product-card/product-card-localization';
-export interface IShortVideoAttachmentsLocalization {
-    productLocalization?: IProductCardLocalization | Locale;
-}
 export declare class ShortVideoAttachmentsLocalization {
-    productLocalization: IProductCardLocalization | Locale;
-    constructor(init: IShortVideoAttachmentsLocalization | Locale);
+    productLocale: Locale;
+    constructor(locale: Locale);
 }