@streamscloud/embeddable 12.1.0 → 12.2.0

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

@@ -20,7 +20,7 @@ export declare class MediaCenterContext {
     categoryFollowingHandler: IContentCategoryFollowingHandler | null;
     settingsHandler: MediaCenterSettingsHandler;
     closeOrchestrator: ICloseOrchestrator;
-    private _mediaCenterConfig;
+    private _targetData;
     constructor(data: {
         config: IMediaCenterConfig;
         closeOrchestrator: ICloseOrchestrator;
@@ -28,18 +28,7 @@ export declare class MediaCenterContext {
         on: MediaCenterContextInitializationCallbacks;
     });
     get targetData(): import("../config/types").MediaCenterTargetDataModel | null;
-    get playerColors(): {
-        brand: string | null;
-        button: string | null;
-        buttonInactive: string | null;
-        cardButton: string | null;
-        cardBackground: string | null;
-        menuBackground: string | null;
-        playerBackground: string | null;
-        price: string | null;
-        salePrice: string | null;
-        sidebarBackground: string | null;
-    } | null;
+    get playerColors(): import("../../ui/player/colors").PlayerColors | undefined;
     get loading(): boolean;
     get overlayIsActive(): boolean;
     get backgroundWrapperProps(): {
@@ -48,6 +37,7 @@ export declare class MediaCenterContext {
         backgroundColor?: string | null;
     };
     get feedPlayerProps(): import("./types").PlayerProps | null;
+    get locale(): import("../../core/locale").Locale;
     toggleMenu: () => void;
     showMenu: () => void;
     hideMenu: () => void;

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

@@ -21,7 +21,7 @@ export class MediaCenterContext {
     categoryFollowingHandler = $state.raw(null);
     settingsHandler;
     closeOrchestrator;
-    _mediaCenterConfig = $state.raw(null);
+    _targetData = $state.raw(null);
     constructor(data) {
         const { config, closeOrchestrator, settings, on } = data;
         this.closeOrchestrator = closeOrchestrator;
@@ -35,10 +35,10 @@ export class MediaCenterContext {
         this.init(config, on);
     }
     get targetData() {
-        return this._mediaCenterConfig?.targetData || null;
+        return this._targetData;
     }
     get playerColors() {
-        return this._mediaCenterConfig?.playerColors || null;
+        return this.settingsHandler.playerSettings.playerColors;
     }
     get loading() {
         return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
@@ -52,6 +52,9 @@ export class MediaCenterContext {
     get feedPlayerProps() {
         return this.feedHandler.feedPlayerProps;
     }
+    get locale() {
+        return this.settingsHandler.locale;
+    }
     toggleMenu = () => {
         if (this.menuActive) {
             this.hideMenu();
@@ -114,13 +117,14 @@ export class MediaCenterContext {
     };
     init = async (config, on) => {
         try {
-            this._mediaCenterConfig = await config.getConfig();
-            if (!this._mediaCenterConfig) {
+            const configModel = await config.getConfig();
+            if (!configModel) {
                 on.failed();
                 return;
             }
-            this.categoriesHandler.init({ categories: this._mediaCenterConfig.contentCategories, tagAssociations: this._mediaCenterConfig.categoryTagAssociations });
-            this.settingsHandler.updatePlayerColors(this._mediaCenterConfig.playerColors);
+            this.categoriesHandler.init({ categories: configModel.contentCategories, tagAssociations: configModel.categoryTagAssociations });
+            this.settingsHandler.updatePlayerColors(configModel.playerColors);
+            this._targetData = configModel.targetData;
             on.initialized(this);
             this.initialized = true;
         }

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,22 +70,19 @@ const styles = $derived.by(() => {
     </div>
     <div class="media-center-menu__tree">
       <div class="media-center-menu__tree-item">
-        <div class="menu-item">
-          <div class="menu-item__value">
-            <div
-              class="menu-item__text"
-              class:menu-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>
       {#snippet categoryItem(category: { type: 'main'; value: MediaCenterCategoryModel } | { type: 'child'; value: MediaCenterSubCategoryModel })}
-        <div class="menu-item" class:menu-item--child={category.type === 'child'}>
+        <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} />
@@ -155,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%;
@@ -167,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 {
@@ -208,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;
@@ -227,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;
@@ -240,12 +238,17 @@ const styles = $derived.by(() => {
   -webkit-user-drag: none;
   user-select: none;
   height: 2.25rem;
+  padding-left: var(--_media-center-menu--items--padding-inline);
   --_menu-item--text--font-size: 0.9375rem;
   --_menu-item--image--size: 1.5rem;
 }
 .menu-item :global([contenteditable]) {
   user-select: text;
 }
+.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;
@@ -270,7 +273,7 @@ const styles = $derived.by(() => {
 }
 .menu-item__text {
   max-width: 100%;
-  color: #ffffff;
+  color: var(--sc-mc-color--text-primary);
   font-size: var(--_menu-item--text--font-size);
   font-weight: 400;
   text-align: left;
@@ -297,7 +300,7 @@ const styles = $derived.by(() => {
   margin-left: 0.25rem;
 }
 .menu-item__collapser {
-  --icon--color: #ffffff;
+  --icon--color: var(--sc-mc-color--text-primary);
   --icon--size: 1rem;
   padding: 0.5rem;
 }
@@ -309,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;
@@ -321,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;
@@ -342,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;

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

@@ -1,5 +1,6 @@
 import type { Locale } from '../core/locale';
 import { type IMediaCenterConfig } from '../media-center/config/types';
+export { default as MediaPage } from './cmp.media-page.svelte';
 export type { IMediaCenterConfig };
 export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
 /**
@@ -118,4 +119,5 @@ export type MediaPageViewerSettings = {
     locale?: Locale;
     showStreamsCloudWatermark?: boolean;
     hideCloseButton?: boolean;
+    theme?: 'light' | 'dark';
 };

package/dist/media-page/index.js

@@ -1,10 +1,11 @@
 import { toastrWarning } from '../core/toastr';
 import { InternalMediaCenterConfig } from '../media-center/config/internal-media-center-config';
 import {} from '../media-center/config/types';
-import { MediaCenter } from '../media-center/media-center';
+import { MediaCenterProxy } from '../media-center/media-center';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { ModalShadowHost } from '../ui/shadow-dom';
 import { mount, unmount } from 'svelte';
+export { default as MediaPage } from './cmp.media-page.svelte';
 export { mapToPostPlayerModel } from '../posts/data-loaders/mapper';
 export function openMediaPageModal(init) {
     const { id, graphqlOrigin, initiator, viewerSettings, on } = init;
@@ -28,7 +29,7 @@ export function openMediaPageModal(init) {
         },
         canClose: !viewerSettings?.hideCloseButton
     });
-    mounted = mount(MediaCenter, {
+    mounted = mount(MediaCenterProxy, {
         target: shadowHost.shadowRoot,
         props: {
             config: mediaCenterConfig,

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

@@ -15,7 +15,7 @@ const trackingParams = $derived.by(() => {
 </script>
 
 {#if model.attachments}
-  <div class="post-attachments" data-theme="dark">
+  <div class="post-attachments">
     {#if model.attachments.ads.length}
       {#each model.attachments.ads as ad (ad.id)}
         <AdCard

package/dist/posts/controls/cmp.controls.svelte

@@ -16,7 +16,7 @@ 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';
-let { model, activeColor, inactiveColor, socialInteractionsHandler, on } = $props();
+let { model, activeColor, inactiveColor, socialInteractionsHandler, extraActions, on } = $props();
 const showSocialInteractions = $derived(!!socialInteractionsHandler && model.enableSocialInteractions);
 let isLikedStore = $state.raw({
     get isLiked() {
@@ -39,6 +39,9 @@ const actions = $derived.by(() => {
     if (model.media && !model.media.currentItem.isImage) {
         result.push({ icon: MediaVolumeManager.isMuted ? IconSpeakerMute : IconSpeaker2, callback: onMuteClicked });
     }
+    if (extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) {
+        result.push(...extraActions);
+    }
     return result;
 });
 $effect(() => {