@streamscloud/embeddable 6.5.2 → 7.0.0-1758321891466

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

@@ -94,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}

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

@@ -2,8 +2,8 @@
 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}
@@ -22,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,9 +1,8 @@
 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;

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);

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,7 +6,7 @@ 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;

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);
 }

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,7 +71,7 @@ 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,