@streamscloud/embeddable 15.1.0-1770823267010 → 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

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

@@ -1,14 +1,15 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { TrackingParams } from '../../marketing-tracking';
+import { PostModel } from '../model';
+type Props = {
+    model: PostModel;
+    trackingParams: TrackingParams | null;
+    on?: {
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
     };
-    slots: {};
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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 type { 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,10 +1,10 @@
-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 = [];

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 } 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) {
@@ -168,7 +168,7 @@ const variables = $derived.by(() => {
   position: absolute;
   bottom: 2px;
   right: 2px;
-  --icon--size: 1rem;
+  --sc-kit--icon--size: 1rem;
 }
 
 .attachments-card {
@@ -197,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/attachments-horizontal.svelte.d.ts

@@ -1,14 +1,17 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import { type TrackingParams } from '../../marketing-tracking';
+import { PostModel } from '../model';
+import { PostViewerUiManager } from './ui-manager.svelte';
+type Props = {
+    model: PostModel;
+    trackingParams: TrackingParams;
+    uiManager: PostViewerUiManager;
+    on?: {
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
     };
-    slots: {};
 };
-export type AttachmentsHorizontalProps = typeof __propDef.props;
-export type AttachmentsHorizontalEvents = typeof __propDef.events;
-export type AttachmentsHorizontalSlots = typeof __propDef.slots;
-export default class AttachmentsHorizontal extends SvelteComponentTyped<AttachmentsHorizontalProps, AttachmentsHorizontalEvents, AttachmentsHorizontalSlots> {
-}
-export {};
+declare const AttachmentsHorizontal: import("svelte").Component<Props, {}, "">;
+type AttachmentsHorizontal = ReturnType<typeof AttachmentsHorizontal>;
+export default AttachmentsHorizontal;

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}
@@ -108,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,14 +1,23 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { TrackingParams } from '../../marketing-tracking';
+import { PostModel } from '../model';
+import { type PlayerButtonDef } from '@streamscloud/kit/ui/player/buttons';
+import type { Snippet } from 'svelte';
+type Props = {
+    model: PostModel;
+    trackingParams: TrackingParams | null;
+    enableAttachments?: boolean;
+    enableControls?: boolean;
+    controlActions: PlayerButtonDef[];
+    autoplay?: true | false | 'on-appearance';
+    on?: {
+        progress?: (progress: number) => void;
+        productClick?: (productId: string) => void;
+        productImpression?: (productId: string, videoId: string) => void;
+        adClick?: (adId: string) => void;
+        adImpression?: (adId: string) => void;
     };
-    slots: {};
+    overlay?: Snippet;
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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 = [
@@ -20,7 +20,7 @@ const variables = $derived.by(() => {
   <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)}
@@ -45,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;

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

@@ -1,14 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import { PostModel } from '../model';
+import { PostViewerUiManager } from './ui-manager.svelte';
+import { PostViewerLocalization } from './post-viewer-localization';
+type Props = {
+    model: NonNullable<PostModel['heading']>;
+    uiManager: PostViewerUiManager;
+    localization: PostViewerLocalization;
 };
-export type HeadingProps = typeof __propDef.props;
-export type HeadingEvents = typeof __propDef.events;
-export type HeadingSlots = typeof __propDef.slots;
-export default class Heading extends SvelteComponentTyped<HeadingProps, HeadingEvents, HeadingSlots> {
-}
-export {};
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

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,11 +26,11 @@ 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>
 
@@ -45,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,14 +1,12 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { PostViewerMediaModel } from '../../model/post-media-model.svelte';
+type Props = {
+    id: string;
+    media: PostViewerMediaModel;
+    autoplay?: true | false | 'on-appearance';
+    on: {
+        videoProgress?: (progress: number) => void;
     };
-    slots: {};
 };
-export type PostMediaProps = typeof __propDef.props;
-export type PostMediaEvents = typeof __propDef.events;
-export type PostMediaSlots = typeof __propDef.slots;
-export default class PostMedia extends SvelteComponentTyped<PostMediaProps, PostMediaEvents, PostMediaSlots> {
-}
-export {};
+declare const PostMedia: import("svelte").Component<Props, {}, "">;
+type PostMedia = ReturnType<typeof PostMedia>;
+export default PostMedia;

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}

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

@@ -1,14 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+import type { PostModel } from '../model/post-model';
+import { PostViewerLocalization } from './post-viewer-localization';
+import { PostViewerUiManager } from './ui-manager.svelte';
+type Props = {
+    model: PostModel['texts'];
+    uiManager: PostViewerUiManager;
+    localization: PostViewerLocalization;
 };
-export type PostTextsProps = typeof __propDef.props;
-export type PostTextsEvents = typeof __propDef.events;
-export type PostTextsSlots = typeof __propDef.slots;
-export default class PostTexts extends SvelteComponentTyped<PostTextsProps, PostTextsEvents, PostTextsSlots> {
-}
-export {};
+declare const PostTexts: import("svelte").Component<Props, {}, "">;
+type PostTexts = ReturnType<typeof PostTexts>;
+export default PostTexts;

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,14 +1,23 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { IPostSocialInteractionsHandler } from '..';
+import type { IPostSharingHandler } from '../sharing';
+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;
+    sharingHandler?: IPostSharingHandler;
+    analyticsHandler?: IPostAnalyticsHandler;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: 'light' | 'dark';
+    };
+    on?: {
+        postActivated?: (id: string) => void;
     };
-    slots: {};
 };
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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,14 +1,25 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { IPostSharingHandler } from '../sharing';
+import type { IPostSocialInteractionsHandler } from '../social-interactions';
+import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+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;
+    sharingHandler?: IPostSharingHandler;
+    analyticsHandler?: IPostAnalyticsHandler;
+    closeOrchestrator: ICloseOrchestrator;
+    playerSettings?: {
+        locale?: Locale;
+        showStreamsCloudWatermark?: boolean;
+        disableBackground?: boolean;
+        theme?: 'light' | 'dark';
+    };
+    on?: {
+        postActivated?: (id: string) => void;
     };
-    slots: {};
 };
-export type PostsPlayerProxyProps = typeof __propDef.props;
-export type PostsPlayerProxyEvents = typeof __propDef.events;
-export type PostsPlayerProxySlots = typeof __propDef.slots;
-export default class PostsPlayerProxy extends SvelteComponentTyped<PostsPlayerProxyProps, PostsPlayerProxyEvents, PostsPlayerProxySlots> {
-}
-export {};
+declare const PostsPlayerProxy: import("svelte").Component<Props, {}, "">;
+type PostsPlayerProxy = ReturnType<typeof PostsPlayerProxy>;
+export default PostsPlayerProxy;

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

@@ -1,14 +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 { 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);
@@ -49,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) {
@@ -140,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),
@@ -148,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>