@streamscloud/embeddable 15.1.0 → 16.0.1

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

@@ -1,6 +1,6 @@
 <script lang="ts">import { AnnotationStreamElementView, ButtonStreamElementView, ContainerStreamElementView, ImageRefStreamElementView, ImagesStreamElementView, PriceStreamElementView, ProductsSliderStreamElementView, ShortVideoStreamElementView, SpacerStreamElementView, StockStreamElementView, TextRefStreamElementView, TextStreamElementView, WebViewStreamElementView } from '.';
 import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
-let { model, data, trackingParams, constainerDirection = StreamElementStyleDirection.Vertical, locale, on } = $props();
+let { model, data, trackingParams, constainerDirection = StreamElementStyleDirection.Vertical, on } = $props();
 const shortVideoModel = $derived.by(() => {
     if (!data) {
         return null;
@@ -44,20 +44,19 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Button}
   <ButtonStreamElementView model={model} />
 {:else if model.type === StreamElementType.Container}
-  <ContainerStreamElementView model={model} data={data} trackingParams={trackingParams} locale={locale} />
+  <ContainerStreamElementView model={model} data={data} trackingParams={trackingParams} />
 {: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} locale={locale} />
+  <PriceStreamElementView model={model} data={productModel.price} />
 {:else if model.type === StreamElementType.ProductsSlider}
-  <ProductsSliderStreamElementView model={model} data={data} trackingParams={trackingParams} locale={locale} />
+  <ProductsSliderStreamElementView model={model} data={data} trackingParams={trackingParams} />
 {:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
   <ShortVideoStreamElementView
     data={shortVideoModel}
     trackingParams={trackingParams}
-    locale={locale}
     on={on
       ? {
           progress: (progress: Number) => {
@@ -68,11 +67,11 @@ const productModel = $derived.by(() => {
 {:else if model.type === StreamElementType.Spacer}
   <SpacerStreamElementView model={model} parentContainerDirection={constainerDirection} />
 {:else if model.type === StreamElementType.Stock}
-  <StockStreamElementView model={model} locale={locale} />
+  <StockStreamElementView model={model} />
 {:else if model.type === StreamElementType.Text}
-  <TextStreamElementView model={model} locale={locale} />
+  <TextStreamElementView model={model} />
 {:else if model.type === StreamElementType.TextRef && data}
-  <TextRefStreamElementView model={model} data={data} locale={locale} />
+  <TextRefStreamElementView model={model} data={data} />
 {:else if model.type === StreamElementType.WebView}
   <WebViewStreamElementView model={model} />
 {/if}

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

@@ -1,4 +1,3 @@
-import type { Locale } from '../../../core/locale';
 import type { StreamTrackingParams } from '..';
 import type { StreamElementModel } from '../elements';
 import { StreamElementStyleDirection } from '../enums';
@@ -8,7 +7,6 @@ type Props = {
     data: StreamSlotData | null;
     trackingParams: StreamTrackingParams;
     constainerDirection?: StreamElementStyleDirection;
-    locale: Locale;
     on?: {
         progress?: (videoId: string, progress: number) => void;
     };

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

@@ -1,7 +1,7 @@
-<script lang="ts">import { LineClamp, LineClampAuto } from '../../../ui/line-clamp';
-import { getStringValueByKey } from './data-by-key-accessor';
+<script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
 import { generateTextStyles } from '../styles-transformer';
-let { model, data, locale } = $props();
+import { LineClamp, LineClampAuto } from '@streamscloud/kit/ui/line-clamp';
+let { model, data } = $props();
 const value = $derived.by(() => {
     const values = [];
     const value = getStringValueByKey(data, model.key);
@@ -20,8 +20,8 @@ const value = $derived.by(() => {
 
 <div class="text-ref-stream-element" style={generateTextStyles(model.styles)}>
   {#if model.styles?.maxLines}
-    <LineClamp maxLines={model.styles?.maxLines} locale={locale}>{value}</LineClamp>
+    <LineClamp maxLines={model.styles?.maxLines}>{value}</LineClamp>
   {:else}
-    <LineClampAuto locale={locale}>{value}</LineClampAuto>
+    <LineClampAuto>{value}</LineClampAuto>
   {/if}
 </div>

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

@@ -1,10 +1,8 @@
-import type { Locale } from '../../../core/locale';
 import type { TextRefStreamElementModel } from '../elements';
 import type { StreamSlotDataRef } from '../slot-data-ref';
 type Props = {
     model: TextRefStreamElementModel;
     data: StreamSlotDataRef;
-    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,14 +1,14 @@
-<script lang="ts">import { LineClamp, LineClampAuto } from '../../../ui/line-clamp';
-import { generateTextStyles } from '../styles-transformer';
-let { model, locale, placeholder } = $props();
+<script lang="ts">import { generateTextStyles } from '../styles-transformer';
+import { LineClamp, LineClampAuto } from '@streamscloud/kit/ui/line-clamp';
+let { model, placeholder } = $props();
 </script>
 
 <div class="text-stream-element" style={generateTextStyles(model.styles)}>
   {#if model.value}
     {#if model.styles?.maxLines}
-      <LineClamp maxLines={model.styles?.maxLines} locale={locale}>{model.value}</LineClamp>
+      <LineClamp maxLines={model.styles?.maxLines}>{model.value}</LineClamp>
     {:else}
-      <LineClampAuto locale={locale}>{model.value}</LineClampAuto>
+      <LineClampAuto>{model.value}</LineClampAuto>
     {/if}
   {:else if placeholder}
     {@render placeholder()}

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

@@ -1,10 +1,8 @@
-import type { Locale } from '../../../core/locale';
 import type { TextStreamElementModel } from '../elements';
 import type { Snippet } from 'svelte';
 type Props = {
     model: TextStreamElementModel;
     placeholder?: Snippet;
-    locale: Locale;
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -15,18 +15,7 @@ export {};
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.web-view-stream-element {
+<style>.web-view-stream-element {
   width: 100%;
   min-width: 100%;
   max-width: 100%;

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

@@ -1,9 +1,9 @@
-<script lang="ts">import { Utils } from '../../../core/utils';
-import { toPriceRepresentation } from '../../../products/price-helper';
-import { LineClamp } from '../../../ui/line-clamp';
+<script lang="ts">import { toPriceRepresentation } from '../../../products/price-helper';
 import { PriceStreamElementLocalization } from './price-stream-element-localization';
-import { default as StockElementView } from './cmp.stock-stream-element.svelte';
 import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformTextColorValue, transformBackgroundColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
+import { default as StockElementView } from './cmp.stock-stream-element.svelte';
+import { Utils } from '@streamscloud/kit/core/utils';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
 let { maxElementHeight, model, data, localization, on } = $props();
 let priceElementRef = $state.raw(null);
 let priceContainerRef = $state.raw(null);
@@ -125,27 +125,16 @@ $effect(() => {
     {/if}
     {#if model.textAfter}
       <div class="price-stream-element__text-after" style={textAfterCustomStyles}>
-        <LineClamp maxLines={1} locale={localization.locale}>{model.textAfter}</LineClamp>
+        <LineClamp maxLines={1}>{model.textAfter}</LineClamp>
       </div>
     {/if}
   </div>
   {#if model.stock}
-    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} locale={localization.locale} />
+    <StockElementView model={model.stock} heightOverrideDdu={stockElementHeight} />
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.price-stream-element--adjustable {
+<style>.price-stream-element--adjustable {
   position: absolute;
   visibility: hidden;
   width: 100%;

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

@@ -1,7 +1,4 @@
-import { type Locale } from '../../../core/locale';
 export declare class PriceStreamElementLocalization {
-    saveValue: (value: string | number) => string;
-    beforeValue: (value: string) => string;
-    locale: Locale;
-    constructor(locale: Locale);
+    get saveValue(): (value: string | number) => string;
+    get beforeValue(): (value: string) => string;
 }

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

@@ -1,12 +1,10 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class PriceStreamElementLocalization {
-    saveValue;
-    beforeValue;
-    locale;
-    constructor(locale) {
-        this.saveValue = loc.saveValue[locale];
-        this.beforeValue = loc.beforeValue[locale];
-        this.locale = locale;
+    get saveValue() {
+        return loc.saveValue[getLocale()];
+    }
+    get beforeValue() {
+        return loc.beforeValue[getLocale()];
     }
 }
 const loc = {

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

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

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

@@ -1,8 +1,7 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class StockStreamElementLocalization {
-    quantity;
-    constructor(init) {
-        this.quantity = loc.quantity[init];
+    get quantity() {
+        return loc.quantity[getLocale()];
     }
 }
 const loc = {

package/dist/streams/layout/index.d.ts

@@ -10,5 +10,5 @@ export * from './svg-attributes';
 export type { StreamTrackingParams } from './types';
 export { parseToStreamLayout, parseToStreamLayoutTemplate, stringifyToStreamLayoutInput, IdPopulator } from './serializer.svelte';
 export declare const getAllowedDataTypesForSlot: (slot: StreamSlot) => StreamComponentDataType[];
-export declare const slotAcceptsDataOfType: (slot: StreamSlot, dataType: StreamComponentDataType) => boolean;
+export declare const slotAcceptsDataOfType: (slot: StreamSlot, dataType: StreamComponentDataType) => boolean | undefined;
 export declare const getSingleShortVideoFromLayout: (layout: StreamLayout) => StreamLayoutShortVideoModel | null;

package/dist/streams/layout/index.js

@@ -1,5 +1,5 @@
-import { Utils } from '../../core/utils';
 import { StreamComponentDataType } from './enums';
+import { Utils } from '@streamscloud/kit/core/utils';
 export { default as StreamPageLayout } from './cmp.layout.svelte';
 export { default as StreamLayoutSlot } from './cmp.slot.svelte';
 export { default as StreamLayoutSlotContent } from './cmp.slot-content.svelte';

package/dist/streams/layout/serializer.svelte.js

@@ -1,6 +1,5 @@
-import { Utils } from '../../core/utils';
 import { StreamComponentDataType, StreamElementType } from './enums';
-import { nanoid } from 'nanoid';
+import { Utils, randomNanoid } from '@streamscloud/kit/core/utils';
 export const parseToStreamLayout = (value) => {
     const layout = JSON.parse(value);
     IdPopulator.populateLayoutIds(layout);
@@ -85,19 +84,19 @@ const removeElementIdRecursive = (element) => {
 };
 export class IdPopulator {
     static populateLayoutIds(layout) {
-        layout.$id = nanoid(10);
+        layout.$id = randomNanoid(10);
         layout.slots.forEach((slot) => IdPopulator.populateSlotIds(slot));
     }
     static populateSlotIds(slot) {
-        slot.$id = nanoid(10);
+        slot.$id = randomNanoid(10);
         slot.components.forEach((component) => IdPopulator.populateComponentIds(component));
     }
     static populateComponentIds(component) {
-        component.$id = nanoid(10);
+        component.$id = randomNanoid(10);
         component.elements.forEach((element) => IdPopulator.populateElementId(element));
     }
     static populateElementId(element) {
-        element.$id = nanoid(10);
+        element.$id = randomNanoid(10);
         if (element.type === StreamElementType.Container && element.elements) {
             element.elements.forEach((element) => IdPopulator.populateElementId(element));
         }

package/dist/streams/layout/styles-transformer.d.ts

@@ -8,9 +8,9 @@ export declare const generateProductsSliderStyles: (styles: Partial<ProductsSlid
 export declare const generateTextStyles: (styles: Partial<TextStreamElementStyles> | null) => string;
 export declare const generateImageStyles: (styles: Partial<ImageStreamElementStyles> | null) => string;
 export declare const mapFontFamily: (value: StreamElementStyleFontFamily | null | undefined) => string;
-export declare const mapFontWeight: (value: StreamElementStyleFontWeight | null | undefined) => "normal" | "600" | "500";
-export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "right" | "left" | "center";
-export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "flex-start" | "flex-end";
+export declare const mapFontWeight: (value: StreamElementStyleFontWeight | null | undefined) => "600" | "500" | "normal";
+export declare const mapTextAlign: (value: StreamElementStyleHorizontalAlign | null | undefined) => "center" | "left" | "right";
+export declare const mapFlexJustifyContent: (value: StreamElementStyleHorizontalAlign | null | undefined) => "flex-start" | "center" | "flex-end";
 export declare const transformFontSizeValue: (value: number | null | undefined) => string;
 export declare const transformNumericValue: (value: number | null | undefined, fallback?: string) => string;
 export declare const transformTextColorValue: (value: string | null | undefined) => string;

package/dist/streams/layout/styles-transformer.js

@@ -1,5 +1,5 @@
-import { Utils } from '../../core/utils';
 import { StreamCssValueType, StreamElementStyleDirection, StreamElementStyleFontFamily, StreamElementStyleFontWeight, StreamElementStyleMediaFit, StreamElementStyleHorizontalAlign, AnnotationStreamElementPlacement } from './enums';
+import { Utils } from '@streamscloud/kit/core/utils';
 export const generateStreamLayoutStyles = (styles) => {
     if (!styles) {
         return '';

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

@@ -1,12 +1,12 @@
-<script lang="ts">import { ImageRounded } from '../../ui/image';
-import { ProportionalContainer } from '../../ui/proportional-container';
+<script lang="ts">import { ImageRounded } from '@streamscloud/kit/ui/image';
+import { ProportionalContainer } from '@streamscloud/kit/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} />
+      <ImageRounded src={stream.cover} alt="" />
     </ProportionalContainer>
   </div>
 
@@ -26,18 +26,7 @@ let { stream, aspectRatio = 9 / 16, on } = $props();
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-card {
+<style>.stream-card {
   position: relative;
   overflow: hidden;
   container-type: inline-size;
@@ -48,7 +37,7 @@ let { stream, aspectRatio = 9 / 16, on } = $props();
   display: flex;
   align-items: center;
   justify-content: center;
-  --image--rounded--outer--border-radius: 1%;
+  --sc-kit--image--rounded--outer--border-radius: 1%;
 }
 .stream-card__text {
   position: absolute;
@@ -82,8 +71,5 @@ let { stream, aspectRatio = 9 / 16, on } = $props();
 }
 .stream-card__link {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
 }</style>

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

@@ -1,15 +1,13 @@
 <script lang="ts">import { StreamLayoutSlot, StreamPageLayout, StreamLayoutSlotContent } from '../layout';
-import { ResponsivePlayerButtons } from '../../ui/player/button';
-import { StreamPageViewerLocalization } from './stream-page-viewer-localization';
-let { page, trackingParams, overlayControls, locale, on, overlay } = $props();
-const localization = $derived(new StreamPageViewerLocalization(locale));
+import { ResponsivePlayerButtons } from '@streamscloud/kit/ui/player/buttons';
+let { page, trackingParams, overlayControls, on, overlay } = $props();
 </script>
 
 {#if page.type === 'general'}
   <StreamPageLayout model={page.layout} overlay={overlay}>
     {#each page.layout.slots as slot (slot)}
       <StreamLayoutSlot model={slot}>
-        <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} locale={localization.elementsLocale} />
+        <StreamLayoutSlotContent model={slot} trackingParams={trackingParams} on={on} />
       </StreamLayoutSlot>
     {/each}
     {#snippet controls()}
@@ -22,20 +20,9 @@ const localization = $derived(new StreamPageViewerLocalization(locale));
   </StreamPageLayout>
 {/if}
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.controls-panel {
-  --player-button--color: var(--sc-player--button);
-  --player-button--color--inactive: var(--sc-player--button-inactive);
+<style>.controls-panel {
+  --sc-kit--player-button--color: var(--sc-player--button);
+  --sc-kit--player-button--color--inactive: var(--sc-player--button-inactive);
   position: absolute;
   left: auto;
   right: 0;

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

@@ -1,12 +1,10 @@
-import type { Locale } from '../../core/locale';
 import { type StreamTrackingParams } from '../layout';
-import { type PlayerButtonDef } from '../../ui/player/button';
 import type { StreamPageViewerModel } from './types';
+import { type PlayerButtonDef } from '@streamscloud/kit/ui/player/buttons';
 import type { Snippet } from 'svelte';
 type Props = {
     page: StreamPageViewerModel;
     trackingParams: StreamTrackingParams;
-    locale: Locale;
     overlayControls?: {
         enabled: boolean;
         actions: PlayerButtonDef[];

package/dist/streams/streams-player/cmp.streams-player.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts';
 import type { IStreamSharingHandler } from '../sharing';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
 type Props = {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;

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

@@ -1,9 +1,9 @@
-import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { IStreamSharingHandler } from '../sharing';
 import type { StreamPageViewerModel } from '../stream-page-viewer/types';
 import type { IStreamAnalyticsHandler, IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamPlayerModel } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
 export { type StreamPlayerModel, type StreamPageViewerModel };
 export type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, IMediaCenterDataProvider };
 /**

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

@@ -1,6 +1,6 @@
-<script lang="ts">import { Image } from '../../ui/image';
-import { InfiniteScrolling } from '../../ui/infinite-scrolling';
-import { ProportionalContainer } from '../../ui/proportional-container';
+<script lang="ts">import { Image } from '@streamscloud/kit/ui/image';
+import { InfiniteScrolling } from '@streamscloud/kit/ui/infinite-scrolling';
+import { ProportionalContainer } from '@streamscloud/kit/ui/proportional-container';
 let { buffer, activePageId, on } = $props();
 </script>
 
@@ -24,18 +24,7 @@ let { buffer, activePageId, on } = $props();
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.stream-overview-pages {
+<style>.stream-overview-pages {
   display: flex;
   flex: 1;
   justify-content: center;
@@ -95,5 +84,5 @@ let { buffer, activePageId, on } = $props();
   }
 }
 .stream-overview-pages__page--active {
-  outline: 2px solid var(--brand-color, var(--sc-mc-color--border-brand));
+  outline: 2px solid var(--sc-player--brand);
 }</style>

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

@@ -1,6 +1,3 @@
-import { type Locale } from '../../core/locale';
 export declare class StreamPlayerLocalization {
-    streamNotFound: string;
-    locale: Locale;
-    constructor(locale: Locale);
+    get streamNotFound(): string;
 }

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

@@ -1,10 +1,7 @@
-import {} from '../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class StreamPlayerLocalization {
-    streamNotFound;
-    locale;
-    constructor(locale) {
-        this.streamNotFound = loc.streamNotFound[locale];
-        this.locale = locale;
+    get streamNotFound() {
+        return loc.streamNotFound[getLocale()];
     }
 }
 const loc = {

package/dist/streams/streams-player/streams-player-buffer.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { StreamPageViewerModel } from '../stream-page-viewer';
-import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
 import type { IStreamsPlayerDataProvider, StreamPlayerModel } from './types';
+import { DefaultChunksPlayerBuffer } from '@streamscloud/kit/ui/player/providers';
 export declare class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer<StreamPageViewerModel, StreamPlayerModel> {
     constructor(provider: IStreamsPlayerDataProvider);
 }

package/dist/streams/streams-player/streams-player-buffer.svelte.js

@@ -1,4 +1,4 @@
-import { DefaultChunksPlayerBuffer } from '../../ui/player/providers';
+import { DefaultChunksPlayerBuffer } from '@streamscloud/kit/ui/player/providers';
 export class StreamsPlayerBuffer extends DefaultChunksPlayerBuffer {
     constructor(provider) {
         super({

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

@@ -8,7 +8,11 @@ const handleBackgroundImagedLoaded = (url) => {
 };
 </script>
 
-<ShadowRoot theme={playerSettings?.theme ?? 'dark'} backgroundDisabled={playerSettings?.disableBackground === true} backgroundImageUrl={backgroundImageUrl}>
+<ShadowRoot
+  locale={playerSettings?.locale}
+  theme={playerSettings?.theme ?? 'dark'}
+  backgroundDisabled={playerSettings?.disableBackground === true}
+  backgroundImageUrl={backgroundImageUrl}>
   <StreamsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     postSocialInteractionsHandler={postSocialInteractionsHandler}

package/dist/streams/streams-player/streams-player-proxy.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '../../posts/social-interactions';
 import type { IStreamSharingHandler } from '../sharing';
 import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { IStreamsPlayerDataProvider, IStreamAnalyticsHandler, StreamAmplificationParameters } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
 type Props = {
     dataProvider: IStreamsPlayerDataProvider;
     postSocialInteractionsHandler?: IPostSocialInteractionsHandler;