@streamscloud/embeddable 6.5.1 → 7.0.0-1758321646285

package/dist/streams/layout/element-views/price-element-view.svelte

@@ -140,7 +140,7 @@ $effect(() => {
     {/if}
   </div>
   {#if model.stock}
-    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} localization={localization.stockLocalization} />
+    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.stockLocalization} />
   {/if}
 </div>
 

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

@@ -1,13 +1,7 @@
 import { type Locale } from '../../../core/locale';
-import type { IStockStreamElementLocalization } from './stock-stream-element-localization';
-export interface IPriceStreamElementLocalization {
-    saveValue?: (value: string | number) => string;
-    beforeValue?: (value: string) => string;
-    stockLocalization?: IStockStreamElementLocalization | Locale;
-}
 export declare class PriceStreamElementLocalization {
     saveValue: (value: string | number) => string;
     beforeValue: (value: string) => string;
-    stockLocalization: IStockStreamElementLocalization | Locale;
-    constructor(init: IPriceStreamElementLocalization | Locale);
+    stockLocalization: Locale;
+    constructor(locale: Locale);
 }

package/dist/streams/layout/element-views/price-stream-element-localization.js

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

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

@@ -1,9 +1,5 @@
 import { type Locale } from '../../../core/locale';
-import type { IShortVideoViewerLocalization } from '../../../short-videos/short-video-viewer';
-export interface IShortVideoStreamElementLocalization {
-    shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
-}
 export declare class ShortVideoStreamElementLocalization {
-    shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
-    constructor(init: IShortVideoStreamElementLocalization | Locale);
+    shortVideoViewerLocale: Locale;
+    constructor(locale: Locale);
 }

package/dist/streams/layout/element-views/short-video-stream-element-localization.js

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

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

@@ -1,8 +1,5 @@
 import { type Locale } from '../../../core/locale';
-export interface IStockStreamElementLocalization {
-    quantity?: (value: number, low: boolean) => string;
-}
 export declare class StockStreamElementLocalization {
     quantity: (value: number, low: boolean) => string;
-    constructor(init: IStockStreamElementLocalization | Locale);
+    constructor(init: Locale);
 }

package/dist/streams/layout/element-views/stock-stream-element-localization.js

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

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

@@ -1,15 +1,7 @@
 import { type Locale } from '../../../core/locale';
-import type { IPriceStreamElementLocalization } from './price-stream-element-localization';
-import type { IShortVideoStreamElementLocalization } from './short-video-stream-element-localization';
-import type { IStockStreamElementLocalization } from './stock-stream-element-localization';
-export interface IStreamElementLocalization {
-    priceElementLocalization?: IPriceStreamElementLocalization | Locale;
-    stockElementLocalization?: IStockStreamElementLocalization | Locale;
-    shortVideoElementLocalization?: IShortVideoStreamElementLocalization | Locale;
-}
 export declare class StreamElementLocalization {
-    priceElementLocalization: IPriceStreamElementLocalization | Locale;
-    stockElementLocalization: IStockStreamElementLocalization | Locale;
-    shortVideoElementLocalization: IShortVideoStreamElementLocalization | Locale;
-    constructor(init: IStreamElementLocalization | Locale);
+    priceElementLocalization: Locale;
+    stockElementLocalization: Locale;
+    shortVideoElementLocalization: Locale;
+    constructor(locale: Locale);
 }

package/dist/streams/layout/element-views/stream-element-localization.js

@@ -1,11 +1,11 @@
-import { isLocale } from '../../../core/locale';
+import {} from '../../../core/locale';
 export class StreamElementLocalization {
     priceElementLocalization;
     stockElementLocalization;
     shortVideoElementLocalization;
-    constructor(init) {
-        this.priceElementLocalization = isLocale(init) ? init : init.priceElementLocalization || 'en';
-        this.stockElementLocalization = isLocale(init) ? init : init.stockElementLocalization || 'en';
-        this.shortVideoElementLocalization = isLocale(init) ? init : init.shortVideoElementLocalization || 'en';
+    constructor(locale) {
+        this.priceElementLocalization = locale;
+        this.stockElementLocalization = locale;
+        this.shortVideoElementLocalization = locale;
     }
 }

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

@@ -0,0 +1,89 @@
+<script lang="ts">import { ImageRounded } from '../../ui/image';
+import { ProportionalContainer } from '../../ui/proportional-container';
+let { stream, aspectRatio = 9 / 16, on } = $props();
+</script>
+
+<div class="stream-card">
+  <div class="stream-card__media">
+    <ProportionalContainer ratio={aspectRatio}>
+      <ImageRounded src={stream.cover} alt="" noBorders={true} />
+    </ProportionalContainer>
+  </div>
+
+  <div class="stream-card__text">
+    <div class="stream-card__title">
+      {stream.title}
+    </div>
+    {#if stream.subTitle}
+      <div class="stream-card__sub-title">
+        {stream.subTitle}
+      </div>
+    {/if}
+  </div>
+
+  {#if on?.click}
+    <button type="button" onclick={on.click} class="stream-card__link" aria-label="none">&nbsp;</button>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.stream-card {
+  position: relative;
+  overflow: hidden;
+  container-type: inline-size;
+  width: 100%;
+  border-radius: 0.375rem;
+}
+.stream-card__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --image--rounded--outer--border-radius: 1%;
+}
+.stream-card__text {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2.5rem;
+  background: rgba(0, 0, 0, 0.8);
+  color: #ffffff;
+  padding: 0 0.75rem;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+}
+.stream-card__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.stream-card__sub-title {
+  font-size: 0.625rem;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+.stream-card__link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}</style>

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

@@ -0,0 +1,11 @@
+import type { StreamCardModel } from './types';
+type Props = {
+    stream: StreamCardModel;
+    aspectRatio?: number;
+    on?: {
+        click?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/streams/stream-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StreamCard } from './cmp.stream-card.svelte';
+export type { StreamCardModel } from './types';

package/dist/streams/stream-card/index.js

@@ -0,0 +1 @@
+export { default as StreamCard } from './cmp.stream-card.svelte';

package/dist/streams/stream-card/types.d.ts

@@ -0,0 +1,6 @@
+export type StreamCardModel = {
+    id: string;
+    title: string;
+    subTitle: string | null;
+    cover: string | null;
+};

package/dist/streams/stream-card/types.js

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

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
 import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, localization: localizationInit, on } = $props();
-const localization = $derived(new StreamPageViewerLocalization(localizationInit));
+let { page, locale, on } = $props();
+const localization = $derived(new StreamPageViewerLocalization(locale));
 </script>
 
 {#if page.type === 'general'}
   <StreamPageLayout model={page.layout}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} on={on} localization={localization.elementsLocalization} />
+        <StreamLayoutSlotContent model={slot} on={on} locale={localization.elementsLocale} />
       </StreamLayoutSlot>
     {/each}
   </StreamPageLayout>

package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts

@@ -1,9 +1,8 @@
 import type { Locale } from '../../core/locale';
-import { type IStreamPageViewerLocalization } from './stream-page-viewer-localization';
 import type { StreamPageViewerModel } from './types';
 type Props = {
     page: StreamPageViewerModel;
-    localization: IStreamPageViewerLocalization | Locale;
+    locale: Locale;
     on?: {
         productClick: (productId: string) => void;
         productImpression?: (productId: string) => void;

package/dist/streams/stream-page-viewer/index.d.ts

@@ -1,4 +1,3 @@
 export { default as StreamPageViewer } from './cmp.stream-page-viewer.svelte';
 export type { StreamPageViewerModel } from './types';
-export type { IStreamPageViewerLocalization } from './stream-page-viewer-localization';
 export { mapToStreamPageViewerModel } from './mapper';

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.d.ts

@@ -1,9 +1,5 @@
 import { type Locale } from '../../core/locale';
-import type { IStreamElementLocalization } from '../layout/element-views';
-export interface IStreamPageViewerLocalization {
-    elementsLocalization?: IStreamElementLocalization | Locale;
-}
 export declare class StreamPageViewerLocalization {
-    elementsLocalization: IStreamElementLocalization | Locale;
-    constructor(init: IStreamPageViewerLocalization | Locale);
+    elementsLocale: Locale;
+    constructor(init: Locale);
 }

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.js

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

package/dist/streams/stream-player/controls.svelte

@@ -110,7 +110,7 @@ const trackNavigationButtonsSize = (node) => {
           <div class="stream-player-controls__short-video-attachments" transition:slideHorizontally|local>
             <ShortVideoViewerAttachments
               shortVideo={shortVideo}
-              localization={localization.shortVideoAttachmentsLocalization}
+              locale={localization.shortVideoAttachmentsLocale}
               on={{
                 productClick: on.productClick,
                 productImpression: on.productImpression

package/dist/streams/stream-player/index.d.ts

@@ -1,13 +1,15 @@
-import { type IMediaCenterDataProvider } from '../../media-center/data-provider';
+import { type IMediaCenterConfig } from '../../media-center/config/types';
+import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
-import type { IStreamPlayerLocalization } from './stream-player-localization';
+import { mapToStreamPlayerModel } from './mapper';
 import type { IStreamAnalyticsHandler, IStreamPlayerDataProvider, PlayerSettings, StreamPlayerModel } from './types';
-export type { IStreamPlayerLocalization, IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterDataProvider, StreamPlayerModel, StreamPageViewerModel };
+export { type StreamPlayerModel, type StreamPageViewerModel, mapToStreamPlayerModel };
+export type { IStreamPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterConfig };
 /**
  * Opens the stream player modal.
  *
  * Two overloads (mutually exclusive; enforced by TypeScript):
- * - Provider mode: openStreamPlayer({ dataProvider, mediaCenterDataProvider?, analyticsHandler?, ...common })
+ * - Provider mode: openStreamPlayer({ dataProvider, mediaCenterConfig?, analyticsHandler?, ...common })
  * - Internal provider mode: openStreamPlayer({ initiator, graphqlOrigin?, mediaPageId?, ...common })
  *
  * @param init Configuration options.
@@ -19,8 +21,8 @@ export type { IStreamPlayerLocalization, IStreamPlayerDataProvider, IStreamAnaly
  * Provider mode (overload 1)
  * @param {IStreamPlayerDataProvider} init.dataProvider
  *   Provider that supplies the stream data to the player.
- * @param {IMediaCenterDataProvider} [init.mediaCenterDataProvider]
- *   Optional media-center data provider.
+ * @param {IMediaCenterConfig} [init.mediaCenterConfig]
+ *   Optional media-center config.
  * @param {IStreamAnalyticsHandler} [init.analyticsHandler]
  *   Optional analytics handler to capture player/stream analytics events.
  *   If omitted in provider mode, analytics is not auto-initialized.
@@ -31,10 +33,10 @@ export type { IStreamPlayerLocalization, IStreamPlayerDataProvider, IStreamAnaly
  * @param {string} [init.graphqlOrigin]
  *   Optional GraphQL origin (base URL). If omitted, the default origin is determined internally.
  * @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 (optional)
- * @param {IStreamPlayerLocalization | Locale} [init.localization]
+ * @param {Locale} [init.locale]
  *   Localization for the player UI. If omitted, 'en' is used.
  * @param {boolean} [init.showStreamsCloudWatermark]
  *   If true, shows the StreamsCloud watermark.
@@ -58,7 +60,7 @@ export type { IStreamPlayerLocalization, IStreamPlayerDataProvider, IStreamAnaly
  * openStreamPlayer({
  *   streamId: 'stream_123',
  *   dataProvider: myStreamProvider,
- *   mediaCenterDataProvider: myMediaCenterProvider,
+ *   mediaCenterConfig: myMediaCenterProvider,
  *   analyticsHandler: myAnalyticsHandler,
  *   localization: { play: 'Play', pause: 'Pause' },
  *   showStreamsCloudWatermark: true,
@@ -87,11 +89,14 @@ export type { IStreamPlayerLocalization, IStreamPlayerDataProvider, IStreamAnaly
  * ```
  */
 export declare function openStreamPlayer(init: PlayerSettings & {
+    streamId: string;
     dataProvider: IStreamPlayerDataProvider;
-    mediaCenterDataProvider?: IMediaCenterDataProvider;
+    mediaCenterConfig?: IMediaCenterConfig;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
 }): void;
 export declare function openStreamPlayer(init: PlayerSettings & {
+    streamId: string;
     initiator: string;
     graphqlOrigin?: string;
     mediaPageId?: string;

package/dist/streams/stream-player/index.js

@@ -1,20 +1,23 @@
 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 { InternalStreamAnalyticsHandler } from './internal-stream-analytics-handler';
 import { InternalStreamPlayerDataProvider } from './internal-stream-player-data-provider';
+import { mapToStreamPlayerModel } from './mapper';
 import { mount, unmount } from 'svelte';
+export { mapToStreamPlayerModel };
 export function openStreamPlayer(init) {
-    const { streamId, graphqlOrigin, localization, showStreamsCloudWatermark, postSocialInteractionsHandler, initiator } = init;
+    const { streamId, graphqlOrigin, locale, showStreamsCloudWatermark, postSocialInteractionsHandler, initiator } = init;
     const dataProvider = init.dataProvider ?? new InternalStreamPlayerDataProvider({ graphqlOrigin, initiator });
     if (!dataProvider) {
         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.dataProvider) {
@@ -25,14 +28,14 @@ export function openStreamPlayer(init) {
     const mounted = mount(MediaCenter, {
         target: shadowHost.shadowRoot,
         props: {
-            dataProvider: mediaCenterDataProvider || null,
+            config: mediaCenterConfig || null,
             playerProps: {
-                type: MediaCenterMode.Stream,
+                mode: MediaCenterMode.Stream,
                 props: {
                     streamId,
                     dataProvider,
                     analyticsHandler,
-                    localization,
+                    locale,
                     showStreamsCloudWatermark,
                     postSocialInteractionsHandler,
                     on: {

package/dist/streams/stream-player/internal-stream-player-data-provider.d.ts

@@ -1,9 +1,11 @@
 import type { IStreamPlayerDataProvider } from './types';
+import type { Client } from '@urql/core';
 export declare class InternalStreamPlayerDataProvider implements IStreamPlayerDataProvider {
     private graphql;
     constructor(input: {
         initiator?: string;
         graphqlOrigin?: string;
+        graphql?: Client;
     });
     getStream: IStreamPlayerDataProvider['getStream'];
     getStreamPages: IStreamPlayerDataProvider['getStreamPages'];

package/dist/streams/stream-player/internal-stream-player-data-provider.js

@@ -6,8 +6,8 @@ import { GetStreamDocument, GetStreamPagesDocument } from './operations.generate
 export class InternalStreamPlayerDataProvider {
     graphql;
     constructor(input) {
-        const { graphqlOrigin, initiator } = input;
-        this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
+        const { graphqlOrigin, initiator, graphql } = input;
+        this.graphql = graphql ?? createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
     }
     getStream = async (id) => {
         const streamPayload = await this.graphql.query(GetStreamDocument, { id }).toPromise();

package/dist/streams/stream-player/stream-overview.svelte

@@ -36,7 +36,7 @@ const overviewAttached = (node) => {
           </div>
           <div class="stream-overview-owner__meta">
             <LineClamp maxLines={1}>
-              <TimeAgo date={model.publishedAt || model.createdAt} localization={localization.timeAgoLocalization} />
+              <TimeAgo date={model.publishedAt || model.createdAt} locale={localization.timeAgoLocale} />
             </LineClamp>
           </div>
         </div>

package/dist/streams/stream-player/stream-player-localization.d.ts

@@ -1,24 +1,11 @@
 import { type Locale } from '../../core/locale';
-import type { IShortVideoAttachmentsLocalization, IShortVideoViewerLocalization } from '../../short-videos/short-video-viewer';
-import type { IStreamPageViewerLocalization } from '../stream-page-viewer';
-import type { ISwipeIndicatorLocalization } from '../../ui/swipe-indicator';
-import type { ITimeAgoLocalization } from '../../ui/time-ago';
-export interface IStreamPlayerLocalization {
-    streamNotFound?: string;
-    pagesCount?: (count: number) => string;
-    timeAgoLocalization?: ITimeAgoLocalization | Locale;
-    streamPageViewerLocalization?: IStreamPageViewerLocalization | Locale;
-    shortVideoAttachmentsLocalization?: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoViewerLocalization?: IShortVideoViewerLocalization | Locale;
-    swipeIndicatorLocalization?: ISwipeIndicatorLocalization | Locale;
-}
 export declare class StreamPlayerLocalization {
     streamNotFound: string;
     pagesCount: (count: number) => string;
-    timeAgoLocalization: ITimeAgoLocalization | Locale;
-    streamPageViewerLocalization: IStreamPageViewerLocalization | Locale;
-    shortVideoAttachmentsLocalization: IShortVideoAttachmentsLocalization | Locale;
-    shortVideoViewerLocalization: IShortVideoViewerLocalization | Locale;
-    swipeIndicatorLocalization: ISwipeIndicatorLocalization | Locale;
-    constructor(init: IStreamPlayerLocalization | Locale);
+    timeAgoLocale: Locale;
+    streamPageViewerLocale: Locale;
+    shortVideoAttachmentsLocale: Locale;
+    shortVideoViewerLocale: Locale;
+    swipeIndicatorLocale: Locale;
+    constructor(locale: Locale);
 }

package/dist/streams/stream-player/stream-player-localization.js

@@ -1,20 +1,20 @@
-import { isLocale } from '../../core/locale';
+import {} from '../../core/locale';
 export class StreamPlayerLocalization {
     streamNotFound;
     pagesCount;
-    timeAgoLocalization;
-    streamPageViewerLocalization;
-    shortVideoAttachmentsLocalization;
-    shortVideoViewerLocalization;
-    swipeIndicatorLocalization;
-    constructor(init) {
-        this.streamNotFound = isLocale(init) ? loc.streamNotFound[init] : init?.streamNotFound || loc.streamNotFound.en;
-        this.pagesCount = isLocale(init) ? loc.pagesCount[init] : init?.pagesCount || loc.pagesCount.en;
-        this.timeAgoLocalization = isLocale(init) ? init : init.timeAgoLocalization || 'en';
-        this.streamPageViewerLocalization = isLocale(init) ? init : init.streamPageViewerLocalization || 'en';
-        this.shortVideoAttachmentsLocalization = isLocale(init) ? init : init.shortVideoAttachmentsLocalization || 'en';
-        this.shortVideoViewerLocalization = isLocale(init) ? init : init.shortVideoViewerLocalization || 'en';
-        this.swipeIndicatorLocalization = isLocale(init) ? init : init.swipeIndicatorLocalization || 'en';
+    timeAgoLocale;
+    streamPageViewerLocale;
+    shortVideoAttachmentsLocale;
+    shortVideoViewerLocale;
+    swipeIndicatorLocale;
+    constructor(locale) {
+        this.streamNotFound = loc.streamNotFound[locale];
+        this.pagesCount = loc.pagesCount[locale];
+        this.timeAgoLocale = locale;
+        this.streamPageViewerLocale = locale;
+        this.shortVideoAttachmentsLocale = locale;
+        this.shortVideoViewerLocale = locale;
+        this.swipeIndicatorLocale = locale;
     }
 }
 const loc = {

package/dist/streams/stream-player/stream-player.svelte

@@ -23,8 +23,8 @@ import { StreamPlayerBuffer } from './stream-player-buffer.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization';
 import { StreamPlayerUiManager } from './ui-manager.svelte';
 import { onMount, untrack } from 'svelte';
-let { streamId, dataProvider, analyticsHandler, localization: localizationInit = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
-const localization = $derived(new StreamPlayerLocalization(localizationInit));
+let { streamId, dataProvider, analyticsHandler, locale = 'en', showStreamsCloudWatermark, postSocialInteractionsHandler, on, categoriesSwitcher, playerLogo = null, fadeContent = false } = $props();
+const localization = $derived(new StreamPlayerLocalization(locale));
 let model = $state(null);
 let buffer = $state.raw(null);
 let bufferIsLoading = $state(false);
@@ -233,7 +233,7 @@ const onProgress = (pageId, videoId, progress) => {
               {#if item.type === 'general'}
                 <StreamPageViewer
                   page={item}
-                  localization={localization.streamPageViewerLocalization}
+                  locale={localization.streamPageViewerLocale}
                   on={{
                     progress: (videoId: String, progress: Number) => onProgress(item.id, videoId, progress),
                     productClick: (productId: String) => onProductCardClick(productId),
@@ -249,14 +249,14 @@ const onProgress = (pageId, videoId, progress) => {
                   }}
                   autoplay="on-appearance"
                   socialInteractionsHandler={postSocialInteractionsHandler}
-                  localization={localization.shortVideoViewerLocalization}
+                  locale={localization.shortVideoViewerLocale}
                   showAttachments={uiManager.showShortVideoOverlayAttachments}
                   showControls={uiManager.showShortVideoOverlayControls} />
               {/if}
             {/snippet}
           </PlayerSlider>
           {#if uiManager.isMobileView && buffer.loaded.length > 1 && !everTouched}
-            <SwipeIndicator localization={localization.swipeIndicatorLocalization} />
+            <SwipeIndicator locale={localization.swipeIndicatorLocale} />
           {/if}
         </div>
       </SpotlightLayout>
@@ -328,7 +328,7 @@ const onProgress = (pageId, videoId, progress) => {
 .stream-player {
   display: flex;
   flex: 1;
-  padding: 0.625rem 0;
+  padding: var(--stream-player--padding);
   backdrop-filter: blur(30px);
   position: relative;
   /* Set 'container-type: inline-size;' to reference container*/

package/dist/streams/stream-player/types.d.ts

@@ -1,7 +1,6 @@
 import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../short-videos/short-video-viewer';
 import type { StreamPageViewerModel } from '../stream-page-viewer';
-import type { IStreamPlayerLocalization } from './stream-player-localization';
 export type StreamPlayerModel = {
     id: string;
     title: string;
@@ -17,14 +16,15 @@ export type StreamPlayerModel = {
     pagesCount: number;
 };
 export type StreamPlayerProps = PlayerSettings & {
+    streamId: string;
     dataProvider: IStreamPlayerDataProvider;
+    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     analyticsHandler?: IStreamAnalyticsHandler;
 };
 export type PlayerSettings = {
-    streamId: string;
-    localization?: IStreamPlayerLocalization | Locale;
+    disableBackground?: boolean;
+    locale?: Locale;
     showStreamsCloudWatermark?: boolean;
-    postSocialInteractionsHandler?: IPostSocialInteractionsHandler;
     on?: {
         streamActivated?: (data: {
             title: string;

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
 import { LineClampUtils } from './line-clamp-utils';
 import { onDestroy, onMount } from 'svelte';
-let { value = undefined, maxLines = 3, localization: localizationInit, enableShowMore = false, children } = $props();
-const localization = $derived(new LineClampLocalization(localizationInit !== null && localizationInit !== void 0 ? localizationInit : 'en'));
+let { value = undefined, maxLines = 3, locale, enableShowMore = false, children } = $props();
+const localization = $derived(new LineClampLocalization(locale !== null && locale !== void 0 ? locale : 'en'));
 let parent;
 let element;
 let clampWrapperRef;