@streamscloud/embeddable 16.0.7-1772107327250 → 16.0.7-1772112133122

package/dist/articles/article/article-proxy.svelte.d.ts

@@ -4,7 +4,7 @@ import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
 type Props = {
     sections: ArticleSectionModel[];
     metadata: ArticleMetadata;
-    theme: ThemeValue;
+    theme: ThemeValue | undefined;
     locale: AppLocaleValue | undefined;
 };
 declare const ArticleProxy: import("svelte").Component<Props, {}, "">;

package/dist/articles/article/cmp.article.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { createShadowRoot } from '../../ui/shadow-dom';
 import { default as ArticleProxy } from './article-proxy.svelte';
 import { mount, unmount } from 'svelte';
-let { sections, metadata, theme = 'dark', locale } = $props();
+let { sections, metadata, theme, locale } = $props();
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(ArticleProxy, {

package/dist/external-api/article/cmp.embed-article.svelte

@@ -3,7 +3,7 @@ import { createLocalGQLClient } from '../../core/graphql';
 import { GetEmbedArticleDocument } from './operations.generated';
 import { Loading } from '@streamscloud/kit/ui/loading';
 import { untrack } from 'svelte';
-let { id, slug, initiator, graphqlOrigin, theme = 'light', on } = $props();
+let { id, slug, initiator, graphqlOrigin, theme, on } = $props();
 let sections = $state.raw(null);
 let metadata = $state.raw(null);
 let notFound = $state(false);

package/dist/media-center/media-center/cmp.media-center-proxy.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">import {} from '../../ui/player/close-orchestrator';
 import { ShadowRoot } from '../../ui/shadow-dom';
 import { MediaCenterContext } from './media-center-context.svelte';
+import { MediaCenterSettings } from './media-center-settings.svelte';
 import { default as MediaCenterView } from './media-center-view.svelte';
 import { Utils } from '@streamscloud/kit/core/utils';
 import { Loading } from '@streamscloud/kit/ui/loading';
 import { untrack } from 'svelte';
 let { dataProvider, modeProps, settings, closeOrchestrator, dynamicActions } = $props();
+const settingsHolder = untrack(() => new MediaCenterSettings(settings));
+$effect(() => {
+    settingsHolder.update(settings);
+});
 const context = untrack(() => new MediaCenterContext({
     dataProvider,
     closeOrchestrator,
-    settings,
+    settings: settingsHolder,
     on: {
         initialized: (instance) => {
             switch (modeProps.mode) {
@@ -26,8 +31,8 @@ const context = untrack(() => new MediaCenterContext({
                     });
                     break;
                 case 'default':
-                    if (settings.state) {
-                        instance.restoreState(settings.state);
+                    if (settingsHolder.state) {
+                        instance.restoreState(settingsHolder.state);
                     }
                     else {
                         instance.activateDiscover({ categoryId: null });
@@ -50,7 +55,7 @@ const context = untrack(() => new MediaCenterContext({
 {:else if !context.initialized}
   Not initialized placeholder
 {:else}
-  <ShadowRoot locale={settings?.locale} theme={settings?.theme ?? 'dark'} {...context.backgroundWrapperProps}>
+  <ShadowRoot locale={settingsHolder.locale} theme={settingsHolder.theme} {...context.backgroundWrapperProps}>
     <MediaCenterView context={context} dynamicActions={dynamicActions} />
   </ShadowRoot>
 {/if}

package/dist/media-center/media-center/cmp.media-center-proxy.svelte.d.ts

@@ -1,11 +1,10 @@
 import type { IMediaCenterDataProvider } from '../config/types';
 import { type ICloseOrchestrator } from '../../ui/player/close-orchestrator';
-import type { MediaCenterSettings } from './media-center-settings.svelte';
-import type { MediaCenterModeProps } from './types';
+import type { IMediaCenterSettings, MediaCenterModeProps } from './types';
 import { type Snippet } from 'svelte';
 type Props = {
     dataProvider: IMediaCenterDataProvider;
-    settings: MediaCenterSettings;
+    settings?: IMediaCenterSettings;
     modeProps: MediaCenterModeProps;
     closeOrchestrator: ICloseOrchestrator;
     dynamicActions?: Snippet;

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

@@ -1,2 +1 @@
 export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';
-export { MediaCenterSettings } from './media-center-settings.svelte';

package/dist/media-center/media-center/index.js

@@ -1,2 +1 @@
 export { default as MediaCenterProxy } from './cmp.media-center-proxy.svelte';
-export { MediaCenterSettings } from './media-center-settings.svelte';

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

@@ -6,7 +6,7 @@ export declare class MediaCenterSettings {
     locale: AppLocaleValue;
     showStreamsCloudWatermark: boolean;
     disableBackground: boolean;
-    theme: ThemeValue;
+    theme: ThemeValue | undefined;
     state: MediaCenterState | null;
     constructor(init: IMediaCenterSettings | undefined);
     update: (data: IMediaCenterSettings | undefined) => void;

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

@@ -2,7 +2,7 @@ export class MediaCenterSettings {
     locale = $state('en');
     showStreamsCloudWatermark = $state(false);
     disableBackground = $state(false);
-    theme = $state('dark');
+    theme = $state(undefined);
     state = $state.raw(null);
     constructor(init) {
         this.update(init);
@@ -11,7 +11,7 @@ export class MediaCenterSettings {
         this.locale = data?.locale ?? 'en';
         this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark ?? false;
         this.disableBackground = data?.disableBackground ?? false;
-        this.theme = data?.theme ?? 'dark';
+        this.theme = data?.theme;
         this.state = data?.state ?? null;
     };
 }

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

@@ -1,22 +1,23 @@
 <script lang="ts">import { MediaCenterProxy } from '../media-center/media-center';
-import { MediaCenterSettings } from '../media-center/media-center/media-center-settings.svelte';
 import { CloseOrchestrator } from '../ui/player/close-orchestrator';
 import { createShadowRoot } from '../ui/shadow-dom';
-import { mount, unmount, untrack } from 'svelte';
+import { mount, unmount } from 'svelte';
 let { dataProvider, settings, dynamicActions } = $props();
-const settingsHolder = untrack(() => new MediaCenterSettings(settings));
-$effect(() => {
-    settingsHolder.update(settings);
-});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(MediaCenterProxy, {
         target: shadowRoot,
         props: {
-            dataProvider,
-            settings: settingsHolder,
+            get dataProvider() {
+                return dataProvider;
+            },
+            get settings() {
+                return settings;
+            },
             modeProps: { mode: 'default' },
-            dynamicActions,
+            get dynamicActions() {
+                return dynamicActions;
+            },
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);

package/dist/media-page/index.js

@@ -1,5 +1,5 @@
 import {} from '../media-center/config/types';
-import { MediaCenterProxy, MediaCenterSettings } 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';
@@ -83,7 +83,7 @@ export function openMediaPageModal(init) {
         target: shadowHost.shadowRoot,
         props: {
             dataProvider,
-            settings: new MediaCenterSettings(viewerSettings),
+            settings: viewerSettings,
             modeProps: {
                 mode: 'default'
             },
@@ -110,7 +110,7 @@ export function openMediaPageModalWithInitialPostsProvider(init) {
         target: shadowHost.shadowRoot,
         props: {
             dataProvider: mediaCenterDataProvider,
-            settings: new MediaCenterSettings(viewerSettings),
+            settings: viewerSettings,
             modeProps: {
                 mode: 'posts',
                 props: {
@@ -141,7 +141,7 @@ export function openMediaPageModalWithInitialStreamsProvider(init) {
         target: shadowHost.shadowRoot,
         props: {
             dataProvider: mediaCenterDataProvider,
-            settings: new MediaCenterSettings(viewerSettings),
+            settings: viewerSettings,
             modeProps: {
                 mode: 'streams',
                 props: {

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

@@ -1,30 +1,37 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
-import { PostsPlayerHostSettings } from './posts-player-host-settings.svelte';
 import { default as PostsPlayerProxy } from './posts-player-proxy.svelte';
-import { mount, unmount, untrack } from 'svelte';
+import { mount, unmount } from 'svelte';
 let { dataProvider, socialInteractionsHandler, sharingHandler, playerSettings, analyticsHandler, on } = $props();
-const settingsHolder = untrack(() => new PostsPlayerHostSettings(playerSettings));
-$effect(() => {
-    settingsHolder.update(playerSettings);
-});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(PostsPlayerProxy, {
         target: shadowRoot,
         props: {
-            dataProvider,
-            socialInteractionsHandler,
-            sharingHandler,
-            playerSettings: settingsHolder,
-            analyticsHandler,
+            get dataProvider() {
+                return dataProvider;
+            },
+            get socialInteractionsHandler() {
+                return socialInteractionsHandler;
+            },
+            get sharingHandler() {
+                return sharingHandler;
+            },
+            get playerSettings() {
+                return playerSettings;
+            },
+            get analyticsHandler() {
+                return analyticsHandler;
+            },
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);
                 },
                 canClose: false
             }),
-            on
+            get on() {
+                return on;
+            }
         }
     });
     return {

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

@@ -10,7 +10,7 @@ const handleBackgroundImagedLoaded = (url) => {
 
 <ShadowRoot
   locale={playerSettings?.locale}
-  theme={playerSettings?.theme ?? 'dark'}
+  theme={playerSettings?.theme}
   backgroundDisabled={playerSettings?.disableBackground === true}
   backgroundImageUrl={backgroundImageUrl}>
   <PostsPlayerView

package/dist/streams/streams-player/cmp.streams-player.svelte

@@ -1,31 +1,40 @@
 <script lang="ts">import { CloseOrchestrator } from '../../ui/player/close-orchestrator';
 import { createShadowRoot } from '../../ui/shadow-dom';
-import { StreamsPlayerHostSettings } from './streams-player-host-settings.svelte';
 import { default as StreamsPlayerProxy } from './streams-player-proxy.svelte';
-import { mount, unmount, untrack } from 'svelte';
+import { mount, unmount } from 'svelte';
 let { dataProvider, postSocialInteractionsHandler, sharingHandler, amplificationParameters, playerSettings, analyticsHandler, on } = $props();
-const settingsHolder = untrack(() => new StreamsPlayerHostSettings(playerSettings));
-$effect(() => {
-    settingsHolder.update(playerSettings);
-});
 const initHost = (node) => {
     const shadowRoot = createShadowRoot(node);
     const mounted = mount(StreamsPlayerProxy, {
         target: shadowRoot,
         props: {
-            dataProvider,
-            postSocialInteractionsHandler,
-            sharingHandler,
-            analyticsHandler,
-            amplificationParameters,
-            playerSettings: settingsHolder,
+            get dataProvider() {
+                return dataProvider;
+            },
+            get postSocialInteractionsHandler() {
+                return postSocialInteractionsHandler;
+            },
+            get sharingHandler() {
+                return sharingHandler;
+            },
+            get analyticsHandler() {
+                return analyticsHandler;
+            },
+            get amplificationParameters() {
+                return amplificationParameters;
+            },
+            get playerSettings() {
+                return playerSettings;
+            },
             closeOrchestrator: new CloseOrchestrator({
                 closeFn: async () => {
                     await unmount(mounted);
                 },
                 canClose: false
             }),
-            on
+            get on() {
+                return on;
+            }
         }
     });
     return {

package/dist/streams/streams-player/streams-player-proxy.svelte

@@ -10,7 +10,7 @@ const handleBackgroundImagedLoaded = (url) => {
 
 <ShadowRoot
   locale={playerSettings?.locale}
-  theme={playerSettings?.theme ?? 'dark'}
+  theme={playerSettings?.theme}
   backgroundDisabled={playerSettings?.disableBackground === true}
   backgroundImageUrl={backgroundImageUrl}>
   <StreamsPlayerView

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { brandColors } from '../../core/theme';
 import { AppLocale } from '@streamscloud/kit/core/locale';
-let { locale, theme = 'dark', backgroundDisabled, backgroundImageUrl, children } = $props();
+let { locale, theme, backgroundDisabled, backgroundImageUrl, children } = $props();
 $effect(() => {
     if (locale) {
         AppLocale.change(locale);
@@ -42,7 +42,7 @@ const styles = $derived.by(() => {
   class:shadow-root--background-enabled={!backgroundDisabled}
   class:shadow-root--background-active={!backgroundDisabled && backgroundImageUrl && backgroundImageUrl !== 'not-applicable'}
   class:shadow-root--background-loading={!backgroundDisabled && !backgroundImageUrl}
-  style:color-scheme={theme}
+  style:color-scheme={theme ?? 'light dark'}
   style={styles}>
   {@render children()}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.0.7-1772107327250",
+  "version": "16.0.7-1772112133122",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",

package/dist/posts/posts-player/posts-player-host-settings.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { ThemeValue } from '../../core/theme';
-import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
-export declare class PostsPlayerHostSettings {
-    locale: AppLocaleValue | undefined;
-    showStreamsCloudWatermark: boolean | undefined;
-    disableBackground: boolean | undefined;
-    theme: ThemeValue | undefined;
-    constructor(init: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined);
-    update: (data: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined) => void;
-}

package/dist/posts/posts-player/posts-player-host-settings.svelte.js

@@ -1,15 +0,0 @@
-export class PostsPlayerHostSettings {
-    locale = $state();
-    showStreamsCloudWatermark = $state();
-    disableBackground = $state();
-    theme = $state();
-    constructor(init) {
-        this.update(init);
-    }
-    update = (data) => {
-        this.locale = data?.locale;
-        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
-        this.disableBackground = data?.disableBackground;
-        this.theme = data?.theme;
-    };
-}

package/dist/streams/streams-player/streams-player-host-settings.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { ThemeValue } from '../../core/theme';
-import type { AppLocaleValue } from '@streamscloud/kit/core/locale';
-export declare class StreamsPlayerHostSettings {
-    locale: AppLocaleValue | undefined;
-    showStreamsCloudWatermark: boolean | undefined;
-    disableBackground: boolean | undefined;
-    theme: ThemeValue | undefined;
-    constructor(init: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined);
-    update: (data: {
-        locale?: AppLocaleValue;
-        showStreamsCloudWatermark?: boolean;
-        disableBackground?: boolean;
-        theme?: ThemeValue;
-    } | undefined) => void;
-}

package/dist/streams/streams-player/streams-player-host-settings.svelte.js

@@ -1,15 +0,0 @@
-export class StreamsPlayerHostSettings {
-    locale = $state();
-    showStreamsCloudWatermark = $state();
-    disableBackground = $state();
-    theme = $state();
-    constructor(init) {
-        this.update(init);
-    }
-    update = (data) => {
-        this.locale = data?.locale;
-        this.showStreamsCloudWatermark = data?.showStreamsCloudWatermark;
-        this.disableBackground = data?.disableBackground;
-        this.theme = data?.theme;
-    };
-}