@streamscloud/embeddable 12.0.0 → 12.2.0

package/dist/media-center/media-center/{cmp.media-center.svelte → media-center-view.svelte}

@@ -11,46 +11,13 @@ import { Utils } from '../../core/utils';
 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 { WithBackground } from '../../ui/with-background';
 import { DiscoverPanel } from './discover';
 import { MediaCenterHeader, MediaCenterFooter, MediaCenterHeaderMobile } from './header-footer';
 import { MediaCenterContext } from './media-center-context.svelte';
 import { Menu } from './menu';
 import { StreamsInCategoryPanel } from './streams-in-category';
 import { fade } from 'svelte/transition';
-let { config, modeProps, settings, closeOrchestrator } = $props();
-const context = new MediaCenterContext({
-    config,
-    closeOrchestrator,
-    settings,
-    on: {
-        initialized: (instance) => {
-            switch (modeProps.mode) {
-                case 'posts':
-                    instance.playPostsFeed({
-                        dataProvider: modeProps.props.dataProvider,
-                        onPostActivated: modeProps.props.onPostActivated
-                    });
-                    break;
-                case 'streams':
-                    instance.playStreamsFeed({
-                        dataProvider: modeProps.props.dataProvider,
-                        onStreamActivated: modeProps.props.onStreamActivated
-                    });
-                    break;
-                case 'discover':
-                    instance.activateDiscover({ categoryId: null });
-                    break;
-                default:
-                    Utils.assertUnreachable(modeProps);
-            }
-        },
-        failed: () => {
-            console.error('Media Center initialization failed');
-            closeOrchestrator.requestClose();
-        }
-    }
-});
+let { context } = $props();
 let headerHeight = $state(0);
 let isMobileView = $state(false);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
@@ -108,7 +75,7 @@ const swipeToOpen = (node) => {
     let startY = 0;
     let isTracking = false;
     let hasOpened = false;
-    let threshold = 60;
+    let threshold = 50;
     const MIN_DISTANCE = 10;
     function handleTouchStart(e) {
         if (e.touches.length !== 1) {
@@ -159,67 +126,59 @@ const swipeToOpen = (node) => {
 };
 </script>
 
-{#if context.initializing}
-  <Loading positionFixedCenter={true} timeout={600} />
-{:else if !context.initialized}
-  Not initialized placeholder
-{:else}
-  <WithBackground {...context.backgroundWrapperProps}>
-    <div class="media-center" use:onWidthAnchorMounted>
-      {#if !isMobileView}
-        <MediaCenterHeader context={context} locale={settings?.locale} on={{ headerHeightChanged: onHeaderHeightChanged }} />
-      {:else}
-        <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
-      {/if}
-
-      <div class="media-center__content-container">
-        {#if context.mediaCenterMode === 'feed' && context.feedPlayerProps}
-          <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
-            {#if context.feedPlayerProps.type === 'posts'}
-              <PostsPlayerView {...context.feedPlayerProps.props} />
-            {:else if context.feedPlayerProps.type === 'streams'}
-              <StreamsPlayerView {...context.feedPlayerProps.props} />
-            {/if}
-          </div>
-        {:else if context.mediaCenterMode === 'discover'}
-          <div class="media-center__content" transition:fade={{ duration: 300 }}>
-            <DiscoverPanel
-              context={context}
-              locale={settings?.locale}
-              on={{
-                shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
-                streamSelected: (stream) => activateSelectedStreamPlayer(stream)
-              }} />
-          </div>
-        {/if}
-      </div>
-      {#if context.loading}
-        <Loading positionFixedCenter={true} timeout={600} />
-      {/if}
+<div class="media-center" use:onWidthAnchorMounted>
+  <div class="media-center__header-and-content">
+    {#if !isMobileView}
+      <MediaCenterHeader context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+    {:else}
+      <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+    {/if}
 
-      {#if context.streamsInCategoryHandler.active}
-        <div class="media-center-overlay" class:media-center-overlay--mobile={isMobileView} style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-          <StreamsInCategoryPanel
-            handler={context.streamsInCategoryHandler}
-            on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
+    <div class="media-center__content-container" use:swipeToOpen>
+      {#if context.mediaCenterMode === 'feed' && context.feedPlayerProps}
+        <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
+          {#if context.feedPlayerProps.type === 'posts'}
+            <PostsPlayerView {...context.feedPlayerProps.props} />
+          {:else if context.feedPlayerProps.type === 'streams'}
+            <StreamsPlayerView {...context.feedPlayerProps.props} />
+          {/if}
+        </div>
+      {:else if context.mediaCenterMode === 'discover'}
+        <div class="media-center__content" transition:fade={{ duration: 300 }}>
+          <DiscoverPanel
+            context={context}
+            on={{
+              shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
+              streamSelected: (stream) => activateSelectedStreamPlayer(stream)
+            }} />
         </div>
       {/if}
+    </div>
 
-      {#if context.menuActive}
-        <div class="menu-overlay" class:menu-overlay--mobile={isMobileView} onclick={context.hideMenu} onkeydown={() => {}} role="none">
-          <div class="menu-overlay__panel">
-            <Menu context={context} locale={settings?.locale} on={{ categorySelected: selectCategory, streamSelected: activateSelectedStreamPlayer }} />
-          </div>
+    {#if context.menuActive}
+      <div class="menu-overlay" class:menu-overlay--mobile={isMobileView} onclick={context.hideMenu} onkeydown={() => {}} role="none">
+        <div class="menu-overlay__panel">
+          <Menu context={context} on={{ categorySelected: selectCategory, streamSelected: activateSelectedStreamPlayer }} />
         </div>
-      {:else}
-        <div class="menu-swipe-area" use:swipeToOpen>&nbsp;</div>
-      {/if}
-      {#if isMobileView}
-        <MediaCenterFooter context={context} />
-      {/if}
+      </div>
+    {/if}
+  </div>
+  {#if context.loading}
+    <Loading positionFixedCenter={true} timeout={600} />
+  {/if}
+
+  {#if context.streamsInCategoryHandler.active}
+    <div class="media-center-overlay" class:media-center-overlay--mobile={isMobileView} style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
+      <StreamsInCategoryPanel
+        handler={context.streamsInCategoryHandler}
+        on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
     </div>
-  </WithBackground>
-{/if}
+  {/if}
+
+  {#if isMobileView}
+    <MediaCenterFooter context={context} />
+  {/if}
+</div>
 
 <style>@keyframes fadeIn {
   0% {
@@ -243,6 +202,13 @@ const swipeToOpen = (node) => {
   flex-direction: column;
   position: relative;
 }
+.media-center__header-and-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
 .media-center__content-container {
   flex: 1;
   min-height: 0;
@@ -301,26 +267,9 @@ const swipeToOpen = (node) => {
 }
 .menu-overlay--mobile {
   right: 0;
-  bottom: 6.25rem;
 }
 .menu-overlay__panel {
   width: 17.5rem;
   height: 100%;
   max-height: 100%;
-}
-
-.menu-swipe-area {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 1.875rem;
-  height: 100%;
-  z-index: 1;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .menu-swipe-area {
-    display: block;
-  }
 }</style>

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

@@ -0,0 +1,7 @@
+import { MediaCenterContext } from './media-center-context.svelte';
+type Props = {
+    context: MediaCenterContext;
+};
+declare const MediaCenterView: import("svelte").Component<Props, {}, "">;
+type MediaCenterView = ReturnType<typeof MediaCenterView>;
+export default MediaCenterView;

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

@@ -10,8 +10,8 @@ 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 { slide } from 'svelte/transition';
-let { context, locale = 'en', on } = $props();
-const localization = $derived(new MenuLocalization(locale));
+let { context, on } = $props();
+const localization = $derived(new MenuLocalization(context.locale));
 const target = $derived.by(() => context.targetData);
 const generateCategoriesMap = () => {
     const expanded = {};
@@ -45,12 +45,12 @@ const styles = $derived.by(() => {
       </div>
       <div class="media-center-target__info">
         <div class="media-center-target__name">
-          <LineClamp maxLines={1} locale={locale}>
+          <LineClamp maxLines={1} locale={context.locale}>
             {target.name}
           </LineClamp>
         </div>
         {#if target.membersCount}
-          <LineClamp maxLines={1} locale={locale}>
+          <LineClamp maxLines={1} locale={context.locale}>
             <div class="media-center-target__members">
               <span class="media-center-target__members-count">
                 {compactNumber(target.membersCount, { locale: localization.locale })}
@@ -70,75 +70,54 @@ const styles = $derived.by(() => {
     </div>
     <div class="media-center-menu__tree">
       <div class="media-center-menu__tree-item">
-        <div class="selector-item">
-          <div class="selector-item__value">
-            <div
-              class="selector-item__text"
-              class:selector-item__text--active={!context.categoriesHandler.selectedCategoryId}
-              onclick={() => context.playRootFeed()}
-              onkeydown={() => {}}
-              role="button"
-              tabindex="0">
+        <div class="menu-item" class:menu-item--active={!context.categoriesHandler.selectedCategoryId}>
+          <div class="menu-item__value" onclick={() => context.playRootFeed()} onkeydown={() => {}} role="button" tabindex="0">
+            <div class="menu-item__text" class:menu-item__text--active={!context.categoriesHandler.selectedCategoryId}>
               {context.mediaCenterMode === 'discover' ? localization.discoverLabel : localization.feedLabel}
             </div>
           </div>
         </div>
       </div>
-      {#each context.categoriesHandler.categoriesGrouped as category (category.id)}
-        <div class="media-center-menu__tree-item">
-          <div class="selector-item">
-            <div class="selector-item__value">
-              <div class="selector-item__image">
-                <ImageRound src={category.image} noBorders={true} />
-              </div>
-              <div
-                class="selector-item__text"
-                class:selector-item__text--active={context.categoriesHandler.selectedCategoryId === category.id}
-                onclick={() => on.categorySelected(category.id)}
-                onkeydown={() => {}}
-                role="button"
-                tabindex="0">
-                {category.name}
-              </div>
+      {#snippet categoryItem(category: { type: 'main'; value: MediaCenterCategoryModel } | { type: 'child'; value: MediaCenterSubCategoryModel })}
+        <div
+          class="menu-item"
+          class:menu-item--child={category.type === 'child'}
+          class:menu-item--active={context.categoriesHandler.selectedCategoryId === category.value.id}>
+          <div class="menu-item__value" onclick={() => on.categorySelected(category.value.id)} onkeydown={() => {}} role="button" tabindex="0">
+            <div class="menu-item__image">
+              <ImageRound src={category.value.image} noBorders={true} />
             </div>
-            <ButtonWrapper categoryId={category.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
-              <button
-                type="button"
-                class="selector-item__collapser"
-                class:selector-item__collapser--hidden={!category.children.length}
-                onclick={(e) => handleCategoryExpaned(e, category.id)}>
-                {#if categoriesExpandedMap[category.id]}
-                  <Icon src={IconChevronDownFilled} />
-                {:else}
-                  <Icon src={IconChevronRightFilled} />
-                {/if}
-              </button>
-            </ButtonWrapper>
+            <div class="menu-item__text" class:menu-item__text--active={context.categoriesHandler.selectedCategoryId === category.value.id}>
+              {category.value.name}
+            </div>
+            {#if category.value.tag}
+              <div class="menu-item__tag" style="background-color: {category.value.tag.backgroundColor}; color: {category.value.tag.fontColor};">
+                {category.value.tag.text}
+              </div>
+            {/if}
           </div>
+          <ButtonWrapper categoryId={category.value.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
+            <button
+              type="button"
+              class="menu-item__collapser"
+              class:menu-item__collapser--hidden={category.type === 'child' || !category.value.children.length}
+              onclick={(e) => handleCategoryExpaned(e, category.value.id)}>
+              {#if categoriesExpandedMap[category.value.id]}
+                <Icon src={IconChevronDownFilled} />
+              {:else}
+                <Icon src={IconChevronRightFilled} />
+              {/if}
+            </button>
+          </ButtonWrapper>
+        </div>
+      {/snippet}
+      {#each context.categoriesHandler.categoriesGrouped as category (category.id)}
+        <div class="media-center-menu__tree-item">
+          {@render categoryItem({ type: 'main', value: category })}
           {#if categoriesExpandedMap[category.id]}
             <div class="media-center-menu__tree-item" transition:slide|local>
               {#each category.children as subcategory (subcategory.id)}
-                <div class="selector-item selector-item--child">
-                  <div class="selector-item__value">
-                    <div class="selector-item__image">
-                      <ImageRound src={subcategory.image} noBorders={true} />
-                    </div>
-                    <div
-                      class="selector-item__text"
-                      class:selector-item__text--active={context.categoriesHandler.selectedCategoryId === subcategory.id}
-                      onclick={() => on.categorySelected(subcategory.id)}
-                      onkeydown={() => {}}
-                      role="button"
-                      tabindex="0">
-                      {subcategory.name}
-                    </div>
-                  </div>
-                  <ButtonWrapper categoryId={subcategory.id} followingHandler={context.categoryFollowingHandler} invertedOrientation={true}>
-                    <button type="button" class="selector-item__collapser selector-item__collapser--hidden">
-                      <Icon src={IconChevronRightFilled} />
-                    </button>
-                  </ButtonWrapper>
-                </div>
+                {@render categoryItem({ type: 'child', value: subcategory })}
               {/each}
             </div>
           {/if}
@@ -173,7 +152,8 @@ const styles = $derived.by(() => {
   }
 }
 .media-center-menu {
-  --_media-center-menu--background-color: var(--media-center-menu--background-color, rgb(from #000000 r g b / 95%));
+  --_media-center-menu--background-color: var(--media-center-menu--background-color, rgb(from var(--sc-mc-color--bg-panel) r g b / 95%));
+  --_media-center-menu--items--padding-inline: 0.625rem;
   background: var(--_media-center-menu--background-color);
   height: 100%;
   min-height: 100%;
@@ -185,8 +165,7 @@ const styles = $derived.by(() => {
   gap: 1.25rem;
   flex-direction: column;
   min-height: 0;
-  padding: 0.9375rem 1.25rem;
-  padding-right: 0.75rem;
+  padding: 0.9375rem 0.375rem;
   border-radius: 0 1rem 1rem 0;
 }
 .media-center-menu__content {
@@ -226,7 +205,8 @@ const styles = $derived.by(() => {
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
+  padding-inline: var(--_media-center-menu--items--padding-inline);
 }
 .media-center-menu__tree {
   display: flex;
@@ -245,7 +225,7 @@ const styles = $derived.by(() => {
   flex-direction: column;
   gap: 1rem;
   padding-top: 1.25rem;
-  padding-right: 0.5rem;
+  padding-inline: var(--_media-center-menu--items--padding-inline);
 }
 .media-center-menu__popular-streams {
   display: grid;
@@ -253,62 +233,78 @@ const styles = $derived.by(() => {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 }
 
-.selector-item {
+.menu-item {
   display: flex;
   -webkit-user-drag: none;
   user-select: none;
   height: 2.25rem;
-  --_selector-item--text--font-size: 0.9375rem;
-  --_selector-item--image--size: 1.5rem;
+  padding-left: var(--_media-center-menu--items--padding-inline);
+  --_menu-item--text--font-size: 0.9375rem;
+  --_menu-item--image--size: 1.5rem;
 }
-.selector-item :global([contenteditable]) {
+.menu-item :global([contenteditable]) {
   user-select: text;
 }
-.selector-item--child {
+.menu-item--active {
+  background-color: hsl(from var(--_media-center-menu--background-color) h s calc(l + 5)/alpha);
+  border-radius: 0.25rem;
+}
+.menu-item--child {
   height: 2.125rem;
   padding-left: 1.25rem;
-  --_selector-item--text--font-size: 0.875rem;
-  --_selector-item--image--size: 1.375rem;
+  --_menu-item--text--font-size: 0.875rem;
+  --_menu-item--image--size: 1.375rem;
 }
-.selector-item__value {
+.menu-item__value {
   display: flex;
   align-items: center;
   flex: 1;
-  gap: 0.75rem;
   min-width: 0;
   cursor: pointer;
 }
-.selector-item__image {
-  width: var(--_selector-item--image--size);
-  min-width: var(--_selector-item--image--size);
-  max-width: var(--_selector-item--image--size);
-  height: var(--_selector-item--image--size);
-  min-height: var(--_selector-item--image--size);
-  max-height: var(--_selector-item--image--size);
+.menu-item__image {
+  width: var(--_menu-item--image--size);
+  min-width: var(--_menu-item--image--size);
+  max-width: var(--_menu-item--image--size);
+  height: var(--_menu-item--image--size);
+  min-height: var(--_menu-item--image--size);
+  max-height: var(--_menu-item--image--size);
+  margin-right: 0.75rem;
 }
-.selector-item__text {
-  flex: 1;
+.menu-item__text {
   max-width: 100%;
-  color: #ffffff;
-  font-size: var(--_selector-item--text--font-size);
+  color: var(--sc-mc-color--text-primary);
+  font-size: var(--_menu-item--text--font-size);
   font-weight: 400;
   text-align: left;
   text-overflow: ellipsis;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
-  transition: text-shadow 120ms ease;
 }
-.selector-item__text:hover, .selector-item__text--active {
+.menu-item__text {
+  width: max-content;
+}
+.menu-item__text:hover, .menu-item__text--active {
   font-weight: 600;
   letter-spacing: -0.5px;
 }
-.selector-item__collapser {
-  --icon--color: #ffffff;
+.menu-item__tag {
+  height: min-content;
+  width: min-content;
+  border-radius: 0.25rem;
+  padding: 0.3125rem 0.375rem;
+  font-size: 0.5rem;
+  font-weight: 600;
+  margin-top: -1rem;
+  margin-left: 0.25rem;
+}
+.menu-item__collapser {
+  --icon--color: var(--sc-mc-color--text-primary);
   --icon--size: 1rem;
   padding: 0.5rem;
 }
-.selector-item__collapser--hidden {
+.menu-item__collapser--hidden {
   visibility: hidden;
 }
 
@@ -316,6 +312,7 @@ const styles = $derived.by(() => {
   display: flex;
   align-items: center;
   gap: 0.9375rem;
+  padding-inline: var(--_media-center-menu--items--padding-inline);
 }
 .media-center-target__image {
   width: 3.5rem;
@@ -328,7 +325,7 @@ const styles = $derived.by(() => {
 .media-center-target__info {
   display: flex;
   flex-direction: column;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
 }
 .media-center-target__name {
   font-size: 1.125rem;
@@ -349,5 +346,5 @@ const styles = $derived.by(() => {
   font-size: 0.75rem;
   line-height: 1;
   font-weight: 400;
-  color: #d1d5db;
+  color: var(--sc-mc-color--text-secondary);
 }</style>

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

@@ -1,9 +1,7 @@
-import type { Locale } from '../../../core/locale';
 import type { StreamPlayerModel } from '../../../streams/streams-player';
 import type { MediaCenterContext } from '../media-center-context.svelte';
 type Props = {
     context: MediaCenterContext;
-    locale?: Locale;
     on: {
         categorySelected: (categoryId: string) => void;
         streamSelected: (stream: StreamPlayerModel) => void;

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

@@ -1,4 +1,5 @@
-<script lang="ts">import { ImageRound } from '../../../ui/image';
+<script lang="ts">import { Theme } from '../../../core/theme';
+import { ImageRound } from '../../../ui/image';
 let { context } = $props();
 const styles = $derived.by(() => {
     var _a;
@@ -8,9 +9,12 @@ const styles = $derived.by(() => {
     }
     return values.join(';');
 });
+const handleClick = () => {
+    Theme.toggle();
+};
 </script>
 
-<div class="moments-circle" style={styles}>
+<div class="moments-circle" style={styles} onclick={handleClick} onkeydown={() => {}} role="none">
   {#if context.targetData}
     <ImageRound src={context.targetData.image} />
   {/if}
@@ -28,7 +32,7 @@ const styles = $derived.by(() => {
   }
 }
 .moments-circle {
-  --_moments-circle--brand-color: var(--moments-circle--brand-color, #00b8d8);
+  --_moments-circle--brand-color: var(--moments-circle--brand-color, var(--sc-mc-color--border-brand));
   width: 6.25%rem;
   min-width: 6.25%rem;
   max-width: 6.25%rem;

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

@@ -63,8 +63,7 @@ let { handler, on } = $props();
   font-size: 1.125rem;
   line-height: 1.75rem;
   font-weight: 500;
-  color: #ffffff;
-  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);
+  color: var(--sc-mc-color--text-primary);
 }
 .streams-in-category__section-header::before {
   content: "";
@@ -72,7 +71,7 @@ let { handler, on } = $props();
   width: 0.3125rem;
   height: 1.625rem;
   border-radius: 0.125rem;
-  background: #5a8dec;
+  background: var(--sc-mc-color--border-brand);
 }
 .streams-in-category__section-content {
   --product-card--aspect-ratio: 9/16;

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

@@ -1,8 +1,6 @@
 import type { Locale } from '../../core/locale';
-import type { IMediaCenterConfig } from '../config/types';
 import type { PostPlayerModel, PostsPlayerProps } from '../../posts/posts-player/types';
 import type { IStreamsPlayerDataProvider, StreamAmplificationParameters, StreamsPlayerProps } from '../../streams/streams-player/types';
-import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
 import type { IPlayerDataProvider } from '../../ui/player/providers';
 export type MediaCenterMode = 'feed' | 'discover';
 export type MediaCenterCategoryData = {
@@ -11,12 +9,6 @@ export type MediaCenterCategoryData = {
     parentId: string | undefined;
     parentName: string | undefined;
 };
-export type MediaCenterProps = {
-    config: IMediaCenterConfig;
-    settings?: MediaCenterSettings;
-    modeProps: MediaCenterModeProps;
-    closeOrchestrator: ICloseOrchestrator;
-};
 export type MediaCenterModeProps = {
     mode: 'posts';
     props: {
@@ -47,4 +39,5 @@ export type MediaCenterSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     disableBackground?: boolean;
+    theme?: 'light' | 'dark';
 };

package/dist/media-page/cmp.media-page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { MediaCenterProxy } from '../media-center/media-center';
+import { CloseOrchestrator } from '../ui/player/close-orchestrator';
+import { createShadowRoot } from '../ui/shadow-dom';
+import { mount, unmount } from 'svelte';
+let { config, settings, modeProps } = $props();
+const initHost = (node) => {
+    const shadowRoot = createShadowRoot(node);
+    const mounted = mount(MediaCenterProxy, {
+        target: shadowRoot,
+        props: {
+            config,
+            settings,
+            modeProps,
+            closeOrchestrator: new CloseOrchestrator({
+                closeFn: () => __awaiter(void 0, void 0, void 0, function* () {
+                    yield unmount(mounted);
+                }),
+                canClose: false
+            })
+        }
+    });
+    return {
+        destroy: () => {
+            unmount(mounted);
+        }
+    };
+};
+</script>
+
+<div class="streams-player-host" use:initHost></div>

package/dist/media-page/cmp.media-page.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IMediaCenterConfig } from '../media-center';
+import type { MediaCenterModeProps, MediaCenterSettings } from '../media-center/media-center/types';
+type Props = {
+    config: IMediaCenterConfig;
+    settings?: MediaCenterSettings;
+    modeProps: MediaCenterModeProps;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;