@streamscloud/embeddable 15.1.0 → 16.0.0

package/dist/media-center/media-center/header/media-center-header-localization.d.ts

@@ -1,6 +1,6 @@
-import { type Locale } from '../../../core/locale';
 export declare class MediaCenterHeaderLocalization {
-    buttons: {
+    get discoverLabel(): string;
+    get buttons(): {
         cart: string;
         discover: string;
         feed: string;
@@ -8,6 +8,4 @@ export declare class MediaCenterHeaderLocalization {
         moments: string;
         webpage: string;
     };
-    discoverLabel: string;
-    constructor(locale: Locale);
 }

package/dist/media-center/media-center/header/media-center-header-localization.js

@@ -1,16 +1,16 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class MediaCenterHeaderLocalization {
-    buttons;
-    discoverLabel;
-    constructor(locale) {
-        this.discoverLabel = loc.discoverLabel[locale];
-        this.buttons = {
-            cart: loc.cartButton[locale],
-            discover: loc.discoverButton[locale],
-            feed: loc.feedButton[locale],
-            login: loc.loginButton[locale],
-            moments: loc.momentsButton[locale],
-            webpage: loc.webpageButton[locale]
+    get discoverLabel() {
+        return loc.discoverLabel[getLocale()];
+    }
+    get buttons() {
+        return {
+            cart: loc.cartButton[getLocale()],
+            discover: loc.discoverButton[getLocale()],
+            feed: loc.feedButton[getLocale()],
+            login: loc.loginButton[getLocale()],
+            moments: loc.momentsButton[getLocale()],
+            webpage: loc.webpageButton[getLocale()]
         };
     }
 }

package/dist/media-center/media-center/header/media-center-header-mobile.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { Icon } from '../../../ui/icon';
-import { MediaCenterHeaderLocalization } from './media-center-header-localization';
+<script lang="ts">import { MediaCenterHeaderLocalization } from './media-center-header-localization';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import IconLayoutColumnOneThirdLeft from '@fluentui/svg-icons/icons/layout_column_one_third_left_20_regular.svg?raw';
-let { context, locale = 'en', on } = $props();
-const localization = $derived(new MediaCenterHeaderLocalization(locale));
+import { Icon } from '@streamscloud/kit/ui/icon';
+let { context, on } = $props();
+const localization = new MediaCenterHeaderLocalization();
 const headerMounted = (node) => {
     const heightResizeObserver = new ResizeObserver(() => {
         const headerHeight = node.clientHeight;
@@ -37,18 +37,7 @@ const headerMounted = (node) => {
   </button>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-center-header-mobile {
+<style>.media-center-header-mobile {
   position: absolute;
   inset: 0;
   bottom: auto;
@@ -74,9 +63,9 @@ const headerMounted = (node) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  --icon--size: 1.625rem;
-  --icon--color: var(--sc-mc-color--icon-overlay);
-  --icon--filter: var(--sc-mc-color--icon-overlay-shadow);
+  --sc-kit--icon--size: 1.625rem;
+  --sc-kit--icon--color: var(--sc-mc-color--icon-overlay);
+  --sc-kit--icon--filter: var(--sc-mc-color--icon-overlay-shadow);
   line-height: 0;
 }
 .media-center-header-mobile__button--hidden {

package/dist/media-center/media-center/header/media-center-header-mobile.svelte.d.ts

@@ -1,8 +1,6 @@
-import type { Locale } from '../../../core/locale';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
     on: {
         headerHeightChanged: (height: number) => void;
     };

package/dist/media-center/media-center/header/media-center-header.svelte

@@ -1,7 +1,4 @@
-<script lang="ts">import { horizontalWheelScroll } from '../../../core/actions';
-import { Icon } from '../../../ui/icon';
-import { PlayerButtons } from '../../../ui/player/button';
-import { MediaCenterHeaderLocalization } from './media-center-header-localization';
+<script lang="ts">import { MediaCenterHeaderLocalization } from './media-center-header-localization';
 import IconCart from '@fluentui/svg-icons/icons/cart_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
 import IconPerson from '@fluentui/svg-icons/icons/person_20_regular.svg?raw';
@@ -9,11 +6,14 @@ import IconPhone from '@fluentui/svg-icons/icons/phone_20_regular.svg?raw';
 import IconReOrderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
+import { horizontalWheelScroll } from '@streamscloud/kit/core/actions';
+import { Icon } from '@streamscloud/kit/ui/icon';
+import { PlayerButtons } from '@streamscloud/kit/ui/player/buttons';
 const SCROLL_MASK_OFFSET = 32;
 const HEADER_CONTENT_MAX_WIDTH = 1180;
 const HEADER_SIDE_SPACER_MIN_WIDTH = 30;
 let { context, on, dynamicActions } = $props();
-const localization = $derived(new MediaCenterHeaderLocalization(context.locale));
+const localization = new MediaCenterHeaderLocalization();
 let headerRef = $state(null);
 let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
@@ -216,18 +216,7 @@ const updateScrollShadows = (scrollArea) => {
   </div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-center-header-container {
+<style>.media-center-header-container {
   z-index: 1;
   display: flex;
   position: relative;
@@ -364,20 +353,20 @@ const updateScrollShadows = (scrollArea) => {
   background-color: var(--_media-center-header--button-color);
 }
 .control-button__icon {
-  --icon--size: 1rem;
+  --sc-kit--icon--size: 1rem;
   line-height: 0;
 }
 .control-button__icon--trigger {
-  --icon--size: 1.5rem;
+  --sc-kit--icon--size: 1.5rem;
 }
 .control-button__icon--active {
-  --icon--stroke-width: 0.2;
+  --sc-kit--icon--stroke-width: 0.2;
 }
 .control-button__value {
   font-size: 0.875rem;
   line-height: 1rem;
   text-overflow: ellipsis;
-  width: 100%;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   min-width: 0;
@@ -393,8 +382,8 @@ const updateScrollShadows = (scrollArea) => {
 }
 
 .close-button {
-  --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);
   justify-self: flex-end;
   flex-shrink: 0;
   padding-block: 0.9375rem;

package/dist/media-center/media-center/media-center-context.svelte.d.ts

@@ -42,7 +42,7 @@ export declare class MediaCenterContext {
     };
     get membershipHandler(): import("..").IMediaCenterMembershipHandler | null;
     get categoriesFollowingHandler(): import("..").IContentCategoryFollowingHandler | null;
-    get locale(): import("../../core/locale").Locale;
+    get locale(): Locale;
     toggleMenu: () => void;
     showMenu: () => void;
     hideMenu: () => void;

package/dist/media-center/media-center/media-center-context.svelte.js

@@ -1,5 +1,4 @@
 import { brandColors } from '../../core/theme';
-import { Utils } from '../../core/utils';
 import { DiscoverViewHandler } from './discover';
 import { CategoriesHandler, MediaCenterContentHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
@@ -7,6 +6,7 @@ import { MomentsFeedHandler } from './moments';
 import { PostsFeedHandler } from './posts-feed';
 import { StreamsFeedHandler } from './streams-feed';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
+import { Utils } from '@streamscloud/kit/core/utils';
 import { untrack } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 export class MediaCenterContext {

package/dist/media-center/media-center/media-center-settings.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Locale } from '../../core/locale';
 import type { ThemeValue } from '../../core/theme';
 import type { MediaCenterState } from '..';
 import type { IMediaCenterSettings } from './types';
+import type { Locale } from '@streamscloud/kit/locale';
 export declare class MediaCenterSettings {
     locale: Locale;
     showStreamsCloudWatermark: boolean;

package/dist/media-center/media-center/media-center-view.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">import { Utils } from '../../core/utils';
-import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
+<script lang="ts">import { default as PostsPlayerView } from '../../posts/posts-player/posts-player-view.svelte';
 import { default as StreamsPlayerView } from '../../streams/streams-player/streams-player-view.svelte';
-import { Loading } from '../../ui/loading';
 import { DiscoverPanel } from './discover';
 import { MediaCenterFooter } from './footer';
 import { MediaCenterHeader, MediaCenterHeaderMobile } from './header';
 import { MediaCenterContext } from './media-center-context.svelte';
 import { Menu } from './menu';
 import { StreamsInCategoryPanel } from './streams-in-category';
+import { Utils } from '@streamscloud/kit/core/utils';
+import { Loading } from '@streamscloud/kit/ui/loading';
 import { fade } from 'svelte/transition';
 let { context, dynamicActions } = $props();
 let headerHeight = $state(0);
@@ -198,18 +198,7 @@ const swipeToOpen = (node) => {
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-center {
+<style>.media-center {
   width: 100%;
   min-width: 100%;
   max-width: 100%;

package/dist/media-center/media-center/menu/category-following-wrapper.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { Icon } from '../../../ui/icon';
-import IconStarFilled from '@fluentui/svg-icons/icons/star_20_filled.svg?raw';
+<script lang="ts">import IconStarFilled from '@fluentui/svg-icons/icons/star_20_filled.svg?raw';
 import IconStar from '@fluentui/svg-icons/icons/star_20_regular.svg?raw';
+import { Icon } from '@streamscloud/kit/ui/icon';
 import { onMount } from 'svelte';
 let { categoryId, followingHandler, children, invertedOrientation } = $props();
 let isFollowedStore = $state.raw({
@@ -35,18 +35,7 @@ const handleToggleFollow = async (e) => {
   </div>
 {/if}
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.desktop-category-following-wrapper {
+<style>.desktop-category-following-wrapper {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -55,8 +44,8 @@ const handleToggleFollow = async (e) => {
   flex-direction: row-reverse;
 }
 .desktop-category-following-wrapper__toggle-button {
-  --icon--size: 1rem;
-  --icon--color: #00b8d8;
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: #00b8d8;
   height: max-content;
   line-height: 0;
 }</style>

package/dist/media-center/media-center/menu/menu-localization.d.ts

@@ -1,10 +1,7 @@
-import { type Locale } from '../../../core/locale';
 export declare class MenuLocalization {
-    interestsSectionTitle: string;
-    popularStreamsSectionTitle: string;
-    discoverLabel: string;
-    feedLabel: string;
-    membersLabel: (count: number) => string;
-    locale: Locale;
-    constructor(locale: Locale);
+    get interestsSectionTitle(): string;
+    get popularStreamsSectionTitle(): string;
+    get discoverLabel(): string;
+    get feedLabel(): string;
+    get membersLabel(): (count: number) => string;
 }

package/dist/media-center/media-center/menu/menu-localization.js

@@ -1,18 +1,19 @@
-import {} from '../../../core/locale';
+import { getLocale } from '@streamscloud/kit/locale';
 export class MenuLocalization {
-    interestsSectionTitle;
-    popularStreamsSectionTitle;
-    discoverLabel;
-    feedLabel;
-    membersLabel;
-    locale;
-    constructor(locale) {
-        this.interestsSectionTitle = loc.interestsSectionTitle[locale];
-        this.popularStreamsSectionTitle = loc.popularStreamsSectionTitle[locale];
-        this.discoverLabel = loc.discoverLabel[locale];
-        this.feedLabel = loc.feedLabel[locale];
-        this.membersLabel = loc.membersLabel[locale];
-        this.locale = locale;
+    get interestsSectionTitle() {
+        return loc.interestsSectionTitle[getLocale()];
+    }
+    get popularStreamsSectionTitle() {
+        return loc.popularStreamsSectionTitle[getLocale()];
+    }
+    get discoverLabel() {
+        return loc.discoverLabel[getLocale()];
+    }
+    get feedLabel() {
+        return loc.feedLabel[getLocale()];
+    }
+    get membersLabel() {
+        return loc.membersLabel[getLocale()];
     }
 }
 const loc = {

package/dist/media-center/media-center/menu/menu.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">import { slideHorizontally } from '../../../core/transitions';
-import { compactNumber } from '../../../core/utils/compact-number';
-import { StreamCard } from '../../../streams/stream-card';
-import { Icon } from '../../../ui/icon';
-import { ImageRound } from '../../../ui/image';
-import { LineClamp } from '../../../ui/line-clamp';
+<script lang="ts">import { StreamCard } from '../../../streams/stream-card';
 import { MomentsCircle } from '../moments';
 import { default as ButtonWrapper } from './category-following-wrapper.svelte';
 import { MenuLocalization } from './menu-localization';
 import IconChevronDownFilled from '@fluentui/svg-icons/icons/chevron_down_20_filled.svg?raw';
 import IconChevronRightFilled from '@fluentui/svg-icons/icons/chevron_right_20_filled.svg?raw';
+import { slideHorizontally } from '@streamscloud/kit/core/transitions';
+import { compactNumber } from '@streamscloud/kit/core/utils';
+import { Icon } from '@streamscloud/kit/ui/icon';
+import { ImageRound } from '@streamscloud/kit/ui/image';
+import { LineClamp } from '@streamscloud/kit/ui/line-clamp';
 import { slide } from 'svelte/transition';
 let { context, on } = $props();
-const localization = $derived(new MenuLocalization(context.locale));
+const localization = new MenuLocalization();
 const target = $derived.by(() => context.model);
 const generateCategoriesMap = () => {
     const expanded = {};
@@ -38,15 +38,15 @@ const handleCategoryExpaned = (e, categoryId) => {
       </div>
       <div class="media-center-target__info">
         <div class="media-center-target__name">
-          <LineClamp maxLines={1} locale={context.locale}>
+          <LineClamp maxLines={1}>
             {target.name}
           </LineClamp>
         </div>
         {#if target.communityFeatures && target.communityFeatures.membersCount}
-          <LineClamp maxLines={1} locale={context.locale}>
+          <LineClamp maxLines={1}>
             <div class="media-center-target__members">
               <span class="media-center-target__members-count">
-                {compactNumber(target.communityFeatures.membersCount, { locale: localization.locale })}
+                {compactNumber(target.communityFeatures.membersCount)}
               </span>
               <span class="media-center-target__members-label">
                 {localization.membersLabel(target.communityFeatures.membersCount)}
@@ -78,7 +78,7 @@ const handleCategoryExpaned = (e, categoryId) => {
           class:menu-item--active={context.categoriesHandler.selectedCategoryId === category.value.id && indicateActiveCategory}>
           <div class="menu-item__content" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
             <div class="menu-item__image">
-              <ImageRound src={category.value.image} noBorders={true} />
+              <ImageRound src={category.value.image} />
             </div>
             <div
               class="menu-item__text"
@@ -137,18 +137,7 @@ const handleCategoryExpaned = (e, categoryId) => {
   </div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-center-menu {
+<style>.media-center-menu {
   --_media-center-menu--background-color: var(--sc-player--menu-background);
   --_media-center-menu--items--padding-inline: 0.625rem;
   background: var(--_media-center-menu--background-color);
@@ -277,7 +266,7 @@ const handleCategoryExpaned = (e, categoryId) => {
   font-weight: 400;
   text-align: left;
   text-overflow: ellipsis;
-  width: 100%;
+  max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
@@ -307,8 +296,8 @@ const handleCategoryExpaned = (e, categoryId) => {
   text-overflow: ellipsis;
 }
 .menu-item__collapser {
-  --icon--color: var(--sc-mc-color--text-primary);
-  --icon--size: 1rem;
+  --sc-kit--icon--color: var(--sc-mc-color--text-primary);
+  --sc-kit--icon--size: 1rem;
   padding: 0.5rem;
 }
 .menu-item__collapser--hidden {

package/dist/media-center/media-center/moments/cmp.moments-circle.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { ImageRound } from '../../../ui/image';
+<script lang="ts">import { ImageRound } from '@streamscloud/kit/ui/image';
 let { context } = $props();
 const handler = $derived(context.momentsFeedHandler);
 const handleClick = () => {
@@ -16,22 +16,11 @@ const handleClick = () => {
   onclick={handleClick}
   role="none">
   {#if context.model}
-    <ImageRound src={context.model.image} noBorders={!handler.hasUnwatchedMoments} />
+    <ImageRound src={context.model.image} ring={handler.hasUnwatchedMoments} />
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.moments-circle {
+<style>.moments-circle {
   --_moments-circle--brand-color: var(--sc-player--brand);
   width: 6.25%rem;
   min-width: 6.25%rem;
@@ -41,9 +30,9 @@ const handleClick = () => {
   max-height: 6.25%rem;
 }
 .moments-circle--has-unwatched {
-  --image--rounded--inner--border-width: 1px;
-  --image--rounded--outer--border-color: var(--_moments-circle--brand-color);
-  --image--rounded--outer--border-width: 2px;
+  --sc-kit--image--rounded--inner--border-width: 1px;
+  --sc-kit--image--rounded--outer--border-color: var(--_moments-circle--brand-color);
+  --sc-kit--image--rounded--outer--border-width: 2px;
 }
 .moments-circle--clickable {
   cursor: pointer;

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.d.ts

@@ -2,9 +2,9 @@ import type { IMediaCenterDataProvider } from '../../config/types';
 import type { MediaCenterState } from '../../navigation';
 import type { PostPlayerModel, PostsPlayerProps, PostManagementActions } from '../../../posts/posts-player/types';
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
-import type { IPlayerBuffer } from '../../../ui/player/providers';
 import { MomentsState } from './moments-state.svelte';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
+import { type IPlayerBuffer } from '@streamscloud/kit/ui/player/providers';
 export declare class MomentsFeedHandler {
     momentsState: MomentsState;
     private _active;

package/dist/media-center/media-center/moments/moments-feed-handler.svelte.js

@@ -1,7 +1,7 @@
 import { PostType } from '../../../core/enums';
-import { initBufferFromProvider } from '../../../ui/player/providers/service';
 import { MomentsState } from './moments-state.svelte';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
+import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
 export class MomentsFeedHandler {
     momentsState;
     _active = $state(false);

package/dist/media-center/media-center/moments/moments-state.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { IMediaCenterDataProvider } from '../..';
 import { type PostPlayerModel } from '../../../posts/posts-player';
-import type { IChunksPlayerDataProvider } from '../../../ui/player/providers';
+import type { IChunksPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class MomentsState {
     private readonly dataProvider;
     private momentsSeenLocally;

package/dist/media-center/media-center/posts-feed/feed-providers-generator.d.ts

@@ -1,7 +1,7 @@
 import type { IMediaCenterDataProvider } from '../../config/types';
 import type { PostPlayerModel } from '../../../posts/posts-player/types';
-import type { IFeedPlayerDataProvider } from '../../../ui/player/providers';
 import type { PostsFeedFilter, PostsFeedProviderInit } from './types';
+import type { IFeedPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class FeedProvidersGenerator {
     private dataProvider;
     constructor(dataProvider: IMediaCenterDataProvider);

package/dist/media-center/media-center/posts-feed/feed-providers-generator.js

@@ -1,6 +1,6 @@
-import { ContinuationToken } from '../../../core/continuation-token';
-import { CursorDataLoader } from '../../../core/data-loaders';
 import { PostType } from '../../../core/enums';
+import { ContinuationToken } from '@streamscloud/kit/core';
+import { CursorDataLoader } from '@streamscloud/kit/core/data-loaders';
 const SUPPORTED_POST_TYPES = [PostType.Article, PostType.Media, PostType.ShortVideo, PostType.Video];
 export class FeedProvidersGenerator {
     dataProvider;

package/dist/media-center/media-center/posts-feed/posts-feed-handler.svelte.d.ts

@@ -2,9 +2,9 @@ import type { IMediaCenterDataProvider } from '../../config/types';
 import type { MediaCenterState } from '../../navigation';
 import type { PostManagementActions, PostPlayerModel, PostsPlayerProps } from '../../../posts/posts-player/types';
 import type { ICloseOrchestrator } from '../../../ui/player/close-orchestrator';
-import type { IPlayerBuffer, IPlayerDataProvider } from '../../../ui/player/providers';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import type { PostsFeedFilter, PostsFeedProviderInit } from './types';
+import { type IPlayerBuffer, type IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export declare class PostsFeedHandler {
     private _state;
     private _providersGenerator;
@@ -27,7 +27,7 @@ export declare class PostsFeedHandler {
     get feedPlayerProps(): PostsPlayerProps | null;
     get feedBuffer(): IPlayerBuffer<PostPlayerModel> | null;
     get managementActions(): PostManagementActions;
-    get canReload(): boolean;
+    get canReload(): boolean | undefined;
     deactivate: () => void;
     activateWithDataProvider: (data: {
         dataProvider: IPlayerDataProvider<PostPlayerModel>;

package/dist/media-center/media-center/posts-feed/posts-feed-handler.svelte.js

@@ -1,8 +1,8 @@
 import { PostType } from '../../..';
-import { Utils } from '../../../core/utils';
-import { initBufferFromProvider } from '../../../ui/player/providers/service';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import { FeedProvidersGenerator } from './feed-providers-generator';
+import { Utils } from '@streamscloud/kit/core/utils';
+import { initBufferFromProvider } from '@streamscloud/kit/ui/player/providers';
 export class PostsFeedHandler {
     _state = $state('inactive');
     _providersGenerator;

package/dist/media-center/media-center/streams-feed/feed-providers-generator.js

@@ -1,5 +1,5 @@
-import { ContinuationToken } from '../../../core/continuation-token';
-import { CursorDataLoader } from '../../../core/data-loaders';
+import { ContinuationToken } from '@streamscloud/kit/core';
+import { CursorDataLoader } from '@streamscloud/kit/core/data-loaders';
 export class FeedProvidersGenerator {
     dataProvider;
     constructor(dataProvider) {

package/dist/media-center/media-center/streams-feed/streams-feed-handler.svelte.d.ts

@@ -27,7 +27,7 @@ export declare class StreamsFeedHandler {
     get feedPlayerProps(): StreamsPlayerProps | null;
     get feedBuffer(): StreamsPlayerBuffer | null;
     get managementActions(): StreamManagementActions | undefined;
-    get canReload(): boolean;
+    get canReload(): boolean | undefined;
     deactivate: () => void;
     activateWithDataProvider: (data: {
         dataProvider: IStreamsPlayerDataProvider;

package/dist/media-center/media-center/streams-feed/streams-feed-handler.svelte.js

@@ -1,7 +1,7 @@
-import { Utils } from '../../../core/utils';
 import { StreamsPlayerBuffer } from '../../../streams/streams-player/streams-player-buffer.svelte';
 import { MediaCenterContentHandler, MediaCenterSettingsHandler } from '../handlers';
 import { FeedProvidersGenerator } from './feed-providers-generator';
+import { Utils } from '@streamscloud/kit/core/utils';
 export class StreamsFeedHandler {
     _state = $state('inactive');
     _providersGenerator;

package/dist/media-center/media-center/streams-in-category/streams-in-category-panel.svelte

@@ -20,18 +20,7 @@ let { handler, on } = $props();
   </div>
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.streams-in-category {
+<style>.streams-in-category {
   background: transparent;
   width: 100%;
   display: flex;

package/dist/media-center/media-center/types.d.ts

@@ -1,8 +1,8 @@
-import type { Locale } from '../../core/locale';
 import type { MediaCenterState } from '../navigation';
 import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
 import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
-import type { IPlayerDataProvider } from '../../ui/player/providers';
+import type { Locale } from '@streamscloud/kit/locale';
+import type { IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export type MediaCenterMode = 'discover' | 'posts-feed' | 'streams-feed' | 'moments';
 export type MediaCenterCategoryData = {
     id: string;

package/dist/media-page/index.d.ts

@@ -1,10 +1,10 @@
-import type { Locale } from '../core/locale';
 import { type IMediaCenterDataProvider } from '../media-center/config/types';
 import type { MediaCenterState } from '../media-center/navigation';
 import type { PostPlayerModel } from '../posts/posts-player';
 import type { IStreamsPlayerDataProvider } from '../streams/streams-player';
 import type { StreamAmplificationParameters } from '../streams/streams-player/types';
-import type { IPlayerDataProvider } from '../ui/player/providers';
+import type { Locale } from '@streamscloud/kit/locale';
+import type { IPlayerDataProvider } from '@streamscloud/kit/ui/player/providers';
 export { default as MediaPage } from './cmp.media-page.svelte';
 export type { IMediaCenterDataProvider };
 /**