@streamscloud/embeddable 15.1.0 → 16.0.0

package/dist/posts/attachments/cmp.attachments.svelte

@@ -2,7 +2,7 @@
 import { AdCard } from '../../ads/ad-card';
 import { PostModel } from '../model';
 import { ProductCard } from '../../products/product-card';
-let { model, trackingParams: externalTrackingParams, locale = 'en', on } = $props();
+let { model, trackingParams: externalTrackingParams, on } = $props();
 const trackingParams = $derived.by(() => {
     if (externalTrackingParams || externalTrackingParams === false) {
         return externalTrackingParams;
@@ -21,7 +21,6 @@ const trackingParams = $derived.by(() => {
         <AdCard
           ad={ad}
           trackingParams={trackingParams}
-          locale={locale}
           on={{
             click: on?.adClick,
             impression: on?.adImpression
@@ -34,7 +33,6 @@ const trackingParams = $derived.by(() => {
         <ProductCard
           product={product}
           trackingParams={trackingParams}
-          locale={locale}
           on={{
             click: on?.productClick,
             impression: on?.productImpression
@@ -44,18 +42,7 @@ const trackingParams = $derived.by(() => {
   </div>
 {/if}
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.post-attachments {
+<style>.post-attachments {
   --_post-attachments--gap: var(--post-attachments--gap, 1.875rem);
   --product-card--background-color: var(--sc-player--card-background);
   --product-card--price-color: var(--sc-player--price);

package/dist/posts/attachments/cmp.attachments.svelte.d.ts

@@ -1,10 +1,8 @@
-import type { Locale } from '../../core/locale';
 import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
 type Props = {
     model: PostModel;
     trackingParams: TrackingParams | null;
-    locale?: Locale;
     on?: {
         productClick?: (productId: string) => void;
         productImpression?: (productId: string) => void;

package/dist/posts/controls/post-actions-handler.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { PostModel } from '../model';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
-import { IconColor } from '../../ui/icon';
+import type { IconColor } from '@streamscloud/kit/ui/icon';
 export declare class PostActionsHandler {
     readonly actions: PostAction[];
     private post;

package/dist/posts/controls/post-actions-handler.svelte.js

@@ -1,11 +1,10 @@
-import { IconColor } from '../../ui/icon';
-import { MediaVolumeManager } from '../../ui/media-playback';
 import IconHeartFilled from '@fluentui/svg-icons/icons/heart_32_filled.svg?raw';
 import IconHeart from '@fluentui/svg-icons/icons/heart_32_regular.svg?raw';
 import IconShare from '@fluentui/svg-icons/icons/share_48_regular.svg?raw';
 import IconShoppingBag from '@fluentui/svg-icons/icons/shopping_bag_32_regular.svg?raw';
 import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_32_regular.svg?raw';
 import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_32_regular.svg?raw';
+import { MediaVolumeManager } from '@streamscloud/kit/ui/media-playback';
 export class PostActionsHandler {
     actions = $derived.by(() => {
         const result = [];
@@ -15,7 +14,7 @@ export class PostActionsHandler {
         if (this.post.enableSocialInteractions && this.socialInteractionsHandler) {
             result.push({
                 icon: this.isLikedStore.isLiked ? IconHeartFilled : IconHeart,
-                iconColor: this.isLikedStore.isLiked ? IconColor.Red : undefined,
+                iconColor: this.isLikedStore.isLiked ? 'red' : undefined,
                 callback: () => this.socialInteractionsHandler?.toggleLike(this.post.id)
             });
         }

package/dist/posts/post-viewer/attachments-horizontal.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">import { horizontalWheelScroll, swallowTouch } from '../../core/actions';
-import { Currency } from '../../core/enums';
+<script lang="ts">import { Currency } from '../../core/enums';
 import { enrichAdLinkWithTracking, enrichProductLinkWithTracking } from '../../marketing-tracking';
 import { PostModel } from '../model';
 import { toPriceRepresentation } from '../../products/price-helper';
-import { Icon, IconColor } from '../../ui/icon';
-import { ImageRounded } from '../../ui/image';
 import { PostViewerUiManager } from './ui-manager.svelte';
 import IconTargetArrow from '@fluentui/svg-icons/icons/target_arrow_20_regular.svg?raw';
+import { horizontalWheelScroll, swallowTouch } from '@streamscloud/kit/core/actions';
+import { Icon } from '@streamscloud/kit/ui/icon';
+import { ImageRounded } from '@streamscloud/kit/ui/image';
 let { model, trackingParams, uiManager, on } = $props();
 const attachmentsToShow = $derived.by(() => {
     if (!model.attachments) {
@@ -114,7 +114,7 @@ const variables = $derived.by(() => {
       data-ad-id={attachment.adId || undefined}>
       <div class="attachments-card" class:attachments-card--single={attachmentsToShow.length === 1} class:attachments-card--dark={!attachment.isAd}>
         <div class="attachments-card__thumb">
-          <ImageRounded src={attachment.image} alt="" noBorders={true} />
+          <ImageRounded src={attachment.image} alt="" />
         </div>
         <div class="attachments-card__content">
           <div class="attachments-card__title" title={attachment.title}>
@@ -136,25 +136,14 @@ const variables = $derived.by(() => {
       </div>
       {#if attachment.isAd}
         <div class="attachments-horizontal__item-icon">
-          <Icon src={IconTargetArrow} color={IconColor.White} />
+          <Icon src={IconTargetArrow} color="white" />
         </div>
       {/if}
     </div>
   {/each}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.attachments-horizontal {
+<style>.attachments-horizontal {
   pointer-events: auto;
   display: flex;
   gap: 0.5rem;
@@ -179,7 +168,7 @@ const variables = $derived.by(() => {
   position: absolute;
   bottom: 2px;
   right: 2px;
-  --icon--size: 1rem;
+  --sc-kit--icon--size: 1rem;
 }
 
 .attachments-card {
@@ -208,8 +197,8 @@ const variables = $derived.by(() => {
   width: 100%;
 }
 .attachments-card__thumb {
-  --image--rounded--width: 2.375rem;
-  --image--rounded--height: 2.375rem;
+  --sc-kit--image--rounded--width: 2.375rem;
+  --sc-kit--image--rounded--height: 2.375rem;
   overflow: hidden;
   border-radius: 0.125rem;
 }

package/dist/posts/post-viewer/cmp.post-viewer.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">import { PostType } from '../..';
 import { PostModel } from '../model';
-import { ResponsivePlayerButtons } from '../../ui/player/button';
 import { default as AttachmentsHorizontal } from './attachments-horizontal.svelte';
 import { default as Heading } from './heading.svelte';
 import { default as PostMedia } from './media/post-media.svelte';
 import { default as Texts } from './post-texts.svelte';
 import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
-let { model, trackingParams: externalTrackingParams, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', locale = 'en', on, overlay } = $props();
-const localization = $derived(new PostViewerLocalization(locale));
+import { ResponsivePlayerButtons } from '@streamscloud/kit/ui/player/buttons';
+let { model, trackingParams: externalTrackingParams, enableAttachments = true, controlActions, enableControls = true, autoplay = 'on-appearance', on, overlay } = $props();
+const localization = new PostViewerLocalization();
 const uiManager = new PostViewerUiManager();
 $effect(() => {
     uiManager.enableAttachments = enableAttachments;
@@ -56,7 +56,7 @@ const variables = $derived.by(() => {
 </script>
 
 <div class="post-viewer" style={variables} use:viewerMounted>
-  <PostMedia id={model.id} media={model.media} locale={locale} autoplay={autoplay} on={{ videoProgress: on?.progress }} />
+  <PostMedia id={model.id} media={model.media} autoplay={autoplay} on={{ videoProgress: on?.progress }} />
   {#if (uiManager.showAttachments && model.attachments) || model.heading || model.texts.kicker || model.texts.title || model.texts.text || model.texts.readMoreUrl}
     <div class="post-viewer__information">
       {#if model.heading}
@@ -89,18 +89,7 @@ const variables = $derived.by(() => {
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.post-viewer {
+<style>.post-viewer {
   width: 100%;
   min-width: 100%;
   max-width: 100%;
@@ -119,8 +108,8 @@ const variables = $derived.by(() => {
   }
 }
 .post-viewer__controls-panel {
-  --player-button--color: var(--sc-player--button);
-  --player-button--color--inactive: var(--sc-player--button-inactive);
+  --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/posts/post-viewer/cmp.post-viewer.svelte.d.ts

@@ -1,7 +1,6 @@
-import type { Locale } from '../../core/locale';
 import type { TrackingParams } from '../../marketing-tracking';
 import { PostModel } from '../model';
-import { type PlayerButtonDef } from '../../ui/player/button';
+import { type PlayerButtonDef } from '@streamscloud/kit/ui/player/buttons';
 import type { Snippet } from 'svelte';
 type Props = {
     model: PostModel;
@@ -10,7 +9,6 @@ type Props = {
     enableControls?: boolean;
     controlActions: PlayerButtonDef[];
     autoplay?: true | false | 'on-appearance';
-    locale?: Locale;
     on?: {
         progress?: (progress: number) => void;
         productClick?: (productId: string) => void;

package/dist/posts/post-viewer/heading.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">import { PostModel } from '../model';
 import { PostViewerUiManager } from './ui-manager.svelte';
-import { ImageRound } from '../../ui/image';
-import { TimeAgo } from '../../ui/time-ago';
 import { PostViewerLocalization } from './post-viewer-localization';
+import { ImageRound } from '@streamscloud/kit/ui/image';
+import { TimeAgo } from '@streamscloud/kit/ui/time-ago';
 let { model, uiManager, localization } = $props();
 const variables = $derived.by(() => {
     const values = [
@@ -14,13 +14,13 @@ const variables = $derived.by(() => {
 
 <div class="post-viewer-heading" style={variables}>
   <div class="post-viewer-heading__source-image">
-    <ImageRound src={model.image} alt={`${model.name} profilbilde`} noBorders={true} />
+    <ImageRound src={model.image} alt={`${model.name} profilbilde`} />
   </div>
 
   <div class="post-viewer-heading__info">
     <div class="post-viewer-heading__source-name">{model.name}</div>
     <p class="post-viewer-heading__metadata">
-      <TimeAgo date={model.displayDate} locale={localization.locale} />
+      <TimeAgo date={model.displayDate} />
       {#if Number.isInteger(model.viewsCount) && model.viewsCount}
         <span>&middot;</span>
         {localization.viewsCount(model.viewsCount)}
@@ -29,18 +29,7 @@ const variables = $derived.by(() => {
   </div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.post-viewer-heading {
+<style>.post-viewer-heading {
   --_post-viewer-heading-texts--color: #ffffff;
   --_post-viewer-heading--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);
   display: flex;
@@ -56,9 +45,8 @@ const variables = $derived.by(() => {
   min-height: 2rem;
   max-height: 2rem;
   margin-right: 0.625rem;
-  --image--rounded--outer--border-radius: 0.5rem;
-  --image--rounded--inner--border-width: 0;
-  --rounded-img-background: none;
+  --sc-kit--image--rounded--outer--border-radius: 0.5rem;
+  --sc-kit--image--rounded--inner--border-width: 0;
 }
 .post-viewer-heading__info {
   display: flex;
@@ -72,7 +60,7 @@ const variables = $derived.by(() => {
   color: var(--_post-viewer-heading-texts--color);
   text-shadow: var(--_post-viewer-heading--text--shadow);
   text-overflow: ellipsis;
-  width: 100%;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
 }

package/dist/posts/post-viewer/media/post-media.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">import { Image } from '../../../ui/image';
-import { SliderHorizontal } from '../../../ui/player/slider-horizontal';
-import { Video } from '../../../ui/video';
-let { id, media, locale, autoplay = 'on-appearance', on } = $props();
+<script lang="ts">import { Image } from '@streamscloud/kit/ui/image';
+import { Carousel } from '@streamscloud/kit/ui/player/carousel';
+import { Video } from '@streamscloud/kit/ui/video';
+let { id, media, autoplay = 'on-appearance', on } = $props();
 </script>
 
 {#snippet mediaItem(item: IPostMediaItemModel)}
@@ -26,26 +26,15 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   {#if media.items.length === 1}
     {@render mediaItem(media.items[0])}
   {:else if media.items.length > 1}
-    <SliderHorizontal items={media.items} initialIndex={media.currentIndex} locale={locale} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
+    <Carousel items={media.items} initialIndex={media.currentIndex} on={{ indexChanged: (index) => (media.currentIndex = index) }}>
       {#snippet children(item)}
         {@render mediaItem(item)}
       {/snippet}
-    </SliderHorizontal>
+    </Carousel>
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.post-media {
+<style>.post-media {
   --_post-media--background-color: light-dark(#ffffff, #000000);
   width: 100%;
   min-width: 100%;
@@ -56,10 +45,10 @@ let { id, media, locale, autoplay = 'on-appearance', on } = $props();
   background-color: rgb(from var(--_post-media--background-color) r g b/60%);
 }
 .post-media--fit {
-  --video--media-fit: contain;
-  --image--object-fit: contain;
+  --sc-kit--video--media-fit: contain;
+  --sc-kit--image--object-fit: contain;
 }
 .post-media--fill {
-  --video--media-fit: cover;
-  --image--object-fit: cover;
+  --sc-kit--video--media-fit: cover;
+  --sc-kit--image--object-fit: cover;
 }</style>

package/dist/posts/post-viewer/media/post-media.svelte.d.ts

@@ -1,9 +1,7 @@
-import type { Locale } from '../../../core/locale';
 import type { PostViewerMediaModel } from '../../model/post-media-model.svelte';
 type Props = {
     id: string;
     media: PostViewerMediaModel;
-    locale: Locale;
     autoplay?: true | false | 'on-appearance';
     on: {
         videoProgress?: (progress: number) => void;

package/dist/posts/post-viewer/post-texts.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { LineClamp } from '../../ui/line-clamp';
-import { PostViewerLocalization } from './post-viewer-localization';
+<script lang="ts">import { PostViewerLocalization } from './post-viewer-localization';
 import { PostViewerUiManager } from './ui-manager.svelte';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
 let { model, uiManager, localization } = $props();
 const variables = $derived.by(() => {
     const values = [
@@ -13,17 +13,17 @@ const variables = $derived.by(() => {
 <div class="post-viewer-texts" style={variables}>
   {#if model.kicker}
     <div class="post-viewer-texts__kicker">
-      <LineClamp maxLines={1} enableShowMore={false} locale={localization.locale}>{model.kicker}</LineClamp>
+      <LineClamp maxLines={1} enableShowMore={false}>{model.kicker}</LineClamp>
     </div>
   {/if}
   {#if model.title}
     <div class="post-viewer-texts__title">
-      <LineClamp maxLines={2} enableShowMore={false} locale={localization.locale}>{model.title}</LineClamp>
+      <LineClamp maxLines={2} enableShowMore={false}>{model.title}</LineClamp>
     </div>
   {/if}
   {#if model.text}
     <div class="post-viewer-texts__text">
-      <LineClamp maxLines={2} enableShowMore={true} locale={localization.locale}>{model.text}</LineClamp>
+      <LineClamp maxLines={2} enableShowMore={true}>{model.text}</LineClamp>
     </div>
   {/if}
   {#if model.readMoreUrl}
@@ -33,18 +33,7 @@ const variables = $derived.by(() => {
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.post-viewer-texts {
+<style>.post-viewer-texts {
   --_post-viewer-texts--color: #ffffff;
   --_post-viewer-texts--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);
   color: var(--_post-viewer-texts--color);

package/dist/posts/post-viewer/post-viewer-localization.d.ts

@@ -1,7 +1,4 @@
-import { type Locale } from '../../core/locale';
 export declare class PostViewerLocalization {
-    viewsCount: (count: number) => string;
-    readMore: string;
-    locale: Locale;
-    constructor(locale: Locale);
+    get viewsCount(): (count: number) => string;
+    get readMore(): string;
 }

package/dist/posts/post-viewer/post-viewer-localization.js

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

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

@@ -1,8 +1,8 @@
-import type { Locale } from '../../core/locale';
 import type { IPostSocialInteractionsHandler } from '..';
 import type { IPostSharingHandler } from '../sharing';
-import type { IPlayerDataProvider } from '../../ui/player/providers';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
+import type { IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 type Props = {
     dataProvider: IPlayerDataProvider<PostPlayerModel>;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;

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

@@ -1,9 +1,9 @@
-import type { Locale } from '../../core/locale';
 import { type IMediaCenterDataProvider } from '../../media-center/config/types';
 import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { default as PostsPlayer } from './cmp.posts-player.svelte';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
 export { PostsPlayer, type PostPlayerModel };
 export type { IMediaCenterDataProvider, IPostAnalyticsHandler };
 /**

package/dist/posts/posts-player/posts-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}>
   <PostsPlayerView
     dataProvider={{ type: 'provider', provider: dataProvider }}
     socialInteractionsHandler={socialInteractionsHandler}

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

@@ -1,9 +1,9 @@
-import type { Locale } from '../../core/locale';
 import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
-import type { IPlayerDataProvider } from '../../ui/player/providers';
 import type { IPostAnalyticsHandler, PostPlayerModel } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
+import type { IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 type Props = {
     dataProvider: IPlayerDataProvider<PostPlayerModel>;
     socialInteractionsHandler?: IPostSocialInteractionsHandler;

package/dist/posts/posts-player/posts-player-view.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">import { PostType } from '../../core/enums';
-import { preloadImage } from '../../core/image-preloader';
 import { PostAttachments } from '../attachments';
 import { PostActionsGenerator } from '../controls';
 import { getPostCoverImage, PostModel } from '../model';
 import { PostViewer } from '../post-viewer';
-import { IconColor } from '../../ui/icon';
 import { Player, PlayerConfig, PlayerSettings } from '../../ui/player';
-import {} from '../../ui/player/providers';
-import { initBufferFromProvider } from '../../ui/player/providers/service';
 import IconDelete from '@fluentui/svg-icons/icons/delete_32_regular.svg?raw';
 import IconEdit from '@fluentui/svg-icons/icons/edit_32_regular.svg?raw';
+import { preloadImage } from '@streamscloud/kit/core/utils';
+import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
 import { untrack } from 'svelte';
 let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, managementActions, closeOrchestrator, on } = $props();
 let buffer = $state.raw(null);
@@ -50,7 +48,7 @@ const contentPlayerConfig = untrack(() => new PlayerConfig({
     playerBuffer: null,
     settings: new PlayerSettings(playerSettings),
     closeOrchestrator,
-    playerSliderCallbacks: {
+    feedSliderCallbacks: {
         itemActivated: (id) => {
             const post = getLoadedItemById(id);
             if (!post) {
@@ -125,7 +123,7 @@ const currentItemActions = $derived.by(() => {
     if (managementActions?.deletePost) {
         result.push({
             icon: IconDelete,
-            iconColor: IconColor.Red,
+            iconColor: 'red',
             callback: async () => {
                 await managementActions.deletePost(buffer.current.id);
             }
@@ -141,7 +139,6 @@ const currentItemActions = $derived.by(() => {
   <PostAttachments
     model={postModel}
     trackingParams={false}
-    locale={contentPlayerConfig.settings.locale}
     on={{
       productClick: (id) => onProductClick(id, postModel.id),
       productImpression: (id) => onProductImpression(id, postModel.id),
@@ -149,26 +146,33 @@ const currentItemActions = $derived.by(() => {
       adImpression: (id) => onAdImpression(id)
     }} />
 {/snippet}
-<Player
-  config={contentPlayerConfig}
-  itemActions={currentItemActions}
-  attachmentsView={buffer?.current && itemAsPostModel(buffer.current).attachments ? attachmentsView : undefined}>
-  {#snippet itemView({ item })}
-    {@const postModel = itemAsPostModel(item)}
-    {@const handler = postActionsGenerator.getPostActionsHandler(postModel)}
-    <PostViewer
-      model={postModel}
-      controlActions={handler.actions}
-      trackingParams={false}
-      enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
-      enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
-      autoplay="on-appearance"
-      locale={contentPlayerConfig.settings.locale}
-      on={{
-        productClick: (productId) => onProductClick(productId, postModel.id),
-        productImpression: (productId) => onProductImpression(productId, postModel.id),
-        adClick: (adId) => onAdClick(adId),
-        adImpression: (adId) => onAdImpression(adId)
-      }} />
-  {/snippet}
-</Player>
+<div class="player-host">
+  <Player
+    config={contentPlayerConfig}
+    itemActions={currentItemActions}
+    attachmentsView={buffer?.current && itemAsPostModel(buffer.current).attachments ? attachmentsView : undefined}>
+    {#snippet itemView({ item })}
+      {@const postModel = itemAsPostModel(item)}
+      {@const handler = postActionsGenerator.getPostActionsHandler(postModel)}
+      <PostViewer
+        model={postModel}
+        controlActions={handler.actions}
+        trackingParams={false}
+        enableAttachments={contentPlayerConfig.uiManager.showAttachmentsOverlay}
+        enableControls={contentPlayerConfig.uiManager.showControlsOverlay}
+        autoplay="on-appearance"
+        on={{
+          productClick: (productId) => onProductClick(productId, postModel.id),
+          productImpression: (productId) => onProductImpression(productId, postModel.id),
+          adClick: (adId) => onAdClick(adId),
+          adImpression: (adId) => onAdImpression(adId)
+        }} />
+    {/snippet}
+  </Player>
+</div>
+
+<style>.player-host {
+  display: contents;
+  --sc-kit--player-button--color: var(--sc-player--button);
+  --sc-kit--player-button--color--inactive: var(--sc-player--button-inactive);
+}</style>

package/dist/posts/posts-player/types.d.ts

@@ -1,10 +1,10 @@
 import type { PostType } from '../../core/enums';
-import type { Locale } from '../../core/locale';
 import type { IPostModel } from '..';
 import type { IPostSharingHandler } from '../sharing';
 import type { IPostSocialInteractionsHandler } from '../social-interactions';
 import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
-import type { IPlayerBuffer, IPlayerDataProvider } from '../../ui/player/providers';
+import type { Locale } from '@streamscloud/kit/locale';
+import type { IPlayerBuffer, IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export interface IPostAnalyticsHandler {
     trackPostOpened: (postType: PostType, postId: string) => void;
     trackShortVideoView: (videoId: string) => void;

package/dist/products/price-helper.js

@@ -1,5 +1,5 @@
 import { Currency } from '../core/enums';
-import { Utils } from '../core/utils';
+import { Utils } from '@streamscloud/kit/core/utils';
 export const toPriceRepresentation = (data) => {
     const { amount, currency, options } = data;
     const { currencyMode = 'symbol', missingFractionMode = 'zeros-or-placeholder', locale = 'nb-NO' } = options ?? {};