@streamscloud/embeddable 12.0.0 → 12.2.0

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -102,8 +102,8 @@ const styles = $derived.by(() => {
   }
 }
 .ad-card {
-  --_ad-card--background-color: var(--ad-card--background-color, rgb(from #ffffff r g b/90%));
-  --_ad-card--border-color: var(--ad-card--background-color, #f2f2f3);
+  --_ad-card--background-color: var(--ad-card--background-color, rgb(from var(--sc-mc-color--bg-card) r g b/90%));
+  --_ad-card--border-color: var(--ad-card--background-color, var(--sc-mc-color--border-card));
   --_ad-card--price-color: var(--ad-card--price-color, inherit);
   width: 100%;
   height: max-content;
@@ -112,7 +112,6 @@ const styles = $derived.by(() => {
   position: relative;
   container-type: inline-size;
   aspect-ratio: 9/16;
-  color: #000000;
   background-color: var(--_ad-card--background-color);
   border: 1px solid var(--_ad-card--border-color);
   border-radius: 0.5rem;
@@ -121,11 +120,6 @@ const styles = $derived.by(() => {
   gap: 0.5rem;
   /* Set 'container-type: inline-size;' to reference container*/
 }
-:global([data-theme="dark"]) .ad-card {
-  --_ad-card--background-color: var(--ad-card--background-color, rgb(from #121212 r g b/90%));
-  --_ad-card--border-color: var(--ad-card--background-color, #1e1e1e);
-  color: #ffffff;
-}
 @container (width < 230px) {
   .ad-card {
     padding: 0.5rem 0.5rem 0.75rem;
@@ -221,7 +215,7 @@ const styles = $derived.by(() => {
 }
 .ad-card__description {
   font-weight: 400;
-  color: #6b7280;
+  color: var(--sc-mc-color--text-secondary);
   font-size: 0.9375rem;
   line-height: 1.375rem;
   min-height: 1.375rem;
@@ -234,9 +228,6 @@ const styles = $derived.by(() => {
     min-height: 0.875rem;
   }
 }
-:global([data-theme="dark"]) .ad-card__description {
-  color: #d1d5db;
-}
 .ad-card__price {
   font-size: 1.6875rem;
   font-weight: 700;
@@ -262,7 +253,7 @@ const styles = $derived.by(() => {
   line-height: 1.09125rem;
   letter-spacing: 0;
   text-align: right;
-  color: #6b7280;
+  color: var(--sc-mc-color--text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -276,9 +267,6 @@ const styles = $derived.by(() => {
     line-height: 0.875rem;
   }
 }
-:global([data-theme="dark"]) .ad-card__price-info-label {
-  color: #d1d5db;
-}
 .ad-card__button {
   width: 100%;
 }

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

@@ -150,7 +150,7 @@ const handleSliderMounted = (node) => {
       {/if}
     </div>
 
-    <ControlsAndAttachments config={config} />
+    <ControlsAndAttachments config={config} hasOverview={!!overviewPanelContent} />
   {:else}
     <Loading positionFixedCenter={true} timeout={1000} />
   {/if}

package/dist/content-player/content-player-config.svelte.d.ts

@@ -34,6 +34,7 @@ export declare class ContentPlayerConfig<T extends {
         buttonInactive: string | null;
         cardButton: string | null;
         cardBackground: string | null;
+        menuBackground: string | null;
         playerBackground: string | null;
         price: string | null;
         salePrice: string | null;

package/dist/content-player/content-player-settings.js

@@ -7,6 +7,7 @@ export class ContentPlayerSettings {
         buttonInactive: null,
         cardButton: null,
         cardBackground: null,
+        menuBackground: null,
         playerBackground: null,
         price: null,
         salePrice: null,

package/dist/content-player/controls-and-attachments.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">import { slideHorizontally } from '../core/transitions';
 import { PostAttachments } from '../posts/attachments';
 import { PostControls } from '../posts/controls';
-import { PlayerButton } from '../ui/player/button';
+import { IconColor } from '../ui/icon';
+import { PlayerButton, PlayerButtonsGroup } from '../ui/player/button';
 import { ContentPlayerConfig } from './content-player-config.svelte';
+import IconCalendarWeekNumbers from '@fluentui/svg-icons/icons/calendar_week_numbers_24_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_28_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_28_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_28_regular.svg?raw';
-let { config } = $props();
+let { config, hasOverview } = $props();
 const uiManager = config.uiManager;
 let attachmentsCollapsed = $state(false);
 let closeButtonAreaHeight = $state(0);
@@ -17,6 +19,18 @@ const currentItemPostContainer = $derived.by(() => {
     }
     return config.itemAsPostViewerModel(config.playerBuffer.current);
 });
+const extraActions = $derived.by(() => {
+    const actions = [];
+    if (hasOverview && uiManager.overviewCanBeShown) {
+        actions.push({
+            icon: IconCalendarWeekNumbers,
+            callback: () => {
+                uiManager.overviewCollapsed = !uiManager.overviewCollapsed;
+            }
+        });
+    }
+    return actions;
+});
 const changeShowAttachments = () => {
     attachmentsCollapsed = !attachmentsCollapsed;
 };
@@ -68,7 +82,23 @@ const variables = $derived.by(() => {
           activeColor={config.playerColors.button}
           inactiveColor={config.playerColors.buttonInactive}
           socialInteractionsHandler={config.socialInteractionsHandler}
+          extraActions={extraActions}
           on={{ attachmentsClicked: changeShowAttachments }} />
+      {:else if extraActions.length}
+        {#if extraActions.length === 1}
+          <PlayerButton
+            scaleEffect={true}
+            activeColor={config.playerColors.button}
+            inactiveColor={config.playerColors.buttonInactive}
+            icon={extraActions[0].icon}
+            on={{ click: extraActions[0].callback }} />
+        {:else}
+          <PlayerButtonsGroup
+            scaleEffect={true}
+            activeColor={config.playerColors.button}
+            backgroundColor={config.playerColors.buttonInactive}
+            actions={extraActions} />
+        {/if}
       {/if}
       {#if config.playerBuffer}
         <div

package/dist/content-player/controls-and-attachments.svelte.d.ts

@@ -4,6 +4,7 @@ declare class __sveltets_Render<T extends {
 }> {
     props(): {
         config: ContentPlayerConfig<T>;
+        hasOverview: boolean;
     };
     events(): {};
     slots(): {};

package/dist/content-player/overview-panel.svelte

@@ -22,7 +22,7 @@ const styles = $derived.by(() => {
 
 <!--Double `if` for correct behavior of slideHorizontally-->
 {#if uiManager.viewInitialized}
-  {#if !uiManager.overviewCollapsed}
+  {#if uiManager.overviewCanBeShown && !uiManager.overviewCollapsed}
     <div class="overview-panel" style={styles} transition:slideHorizontally|local onclick={handlePanelClick} onkeydown={() => {}} role="none">
       <div class="overview-panel__content" onclick={(e) => e.stopPropagation()} onkeydown={() => {}} role="none">
         {@render children()}
@@ -43,7 +43,7 @@ const styles = $derived.by(() => {
   }
 }
 .overview-panel {
-  --_overview-panel--background: var(--overview-panel--background, #1c1c1c);
+  --_overview-panel--background: var(--overview-panel--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%));
   --_overview-panel--width: var(--overview-panel--width);
   --_overview-panel--top: var(--overview-panel--top);
   --_overview-panel--bottom: var(--overview-panel--bottom);

package/dist/content-player/ui-manager.svelte.d.ts

@@ -1,5 +1,6 @@
 export declare class ContentPlayerUIManager {
-    readonly overviewCollapsed: boolean;
+    overviewCollapsed: boolean;
+    readonly overviewCanBeShown: boolean;
     readonly overviewMaxWidth = 150;
     attachmentsWidth: number;
     readonly attachmentsMaxWidth = 176;

package/dist/content-player/ui-manager.svelte.js

@@ -2,7 +2,8 @@ const ATTACHMENTS_MAX_WIDTH = 176;
 const OVERLAY_MAX_WIDTH = 150;
 const SAFE_AREA_SIZE = 70;
 export class ContentPlayerUIManager {
-    overviewCollapsed = $derived.by(() => this.overviewMaxWidth > this.sidePanelsMaxWidth);
+    overviewCollapsed = $state(true);
+    overviewCanBeShown = $derived.by(() => this.overviewMaxWidth <= this.sidePanelsMaxWidth);
     overviewMaxWidth = OVERLAY_MAX_WIDTH;
     attachmentsWidth = $state(0);
     attachmentsMaxWidth = ATTACHMENTS_MAX_WIDTH;

package/dist/core/enums.d.ts

@@ -45,3 +45,6 @@ export declare enum Status {
 export declare enum StreamStatus {
     Published = "PUBLISHED"
 }
+export declare enum EmbedStreamsOrderBy {
+    ContentUpdatedAt = "CONTENT_UPDATED_AT"
+}

package/dist/core/enums.js

@@ -55,3 +55,7 @@ export var StreamStatus;
 (function (StreamStatus) {
     StreamStatus["Published"] = "PUBLISHED";
 })(StreamStatus || (StreamStatus = {}));
+export var EmbedStreamsOrderBy;
+(function (EmbedStreamsOrderBy) {
+    EmbedStreamsOrderBy["ContentUpdatedAt"] = "CONTENT_UPDATED_AT";
+})(EmbedStreamsOrderBy || (EmbedStreamsOrderBy = {}));

package/dist/core/theme/index.d.ts

@@ -0,0 +1 @@
+export { Theme } from './theme-store.svelte';

package/dist/core/theme/index.js

@@ -0,0 +1 @@
+export { Theme } from './theme-store.svelte';

package/dist/core/theme/theme-store.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare const Theme: {
+    get: () => "dark" | "light";
+    set: (theme: "dark" | "light") => void;
+    toggle: () => void;
+};

package/dist/core/theme/theme-store.svelte.js

@@ -0,0 +1,10 @@
+let themeStore = $state('dark');
+export const Theme = {
+    get: () => themeStore,
+    set: (theme) => {
+        themeStore = theme;
+    },
+    toggle: () => {
+        themeStore = themeStore === 'dark' ? 'light' : 'dark';
+    }
+};

package/dist/media-center/config/internal-media-center-config.js

@@ -17,23 +17,24 @@ export class InternalMediaCenterConfig {
         this.graphql = createLocalGQLClient(graphqlOrigin, initiator ? { 'x-initiator': initiator } : undefined);
         this.getConfig = async () => {
             const payload = await this.graphql.query(GetMediaPageConfigDocument, { mediaPageId }).toPromise();
-            if (!payload.data?.embedMediaPagePlayerConfig) {
+            if (!payload.data?.embedMediaPage) {
                 return null;
             }
-            const config = payload.data.embedMediaPagePlayerConfig;
+            const config = payload.data.embedMediaPage;
             return {
                 targetData: {
-                    id: config.mediaPage.id,
-                    handle: config.mediaPage.handle,
-                    name: config.mediaPage.name,
-                    description: config.mediaPage.description,
-                    image: config.mediaPage.image?.url || null,
-                    logo: config.mediaPage.logo?.url || null,
-                    banner: config.mediaPage.banner?.url || null,
-                    membersCount: config.mediaPage.membersCount
+                    id: config.id,
+                    handle: config.handle,
+                    name: config.name,
+                    description: config.description,
+                    image: config.image?.url || null,
+                    logo: config.logo?.url || null,
+                    banner: config.banner?.url || null,
+                    membersCount: config.membersCount
                 },
-                contentCategories: config.playerSettings?.contentCategories || [],
-                playerColors: config.playerSettings?.colors || null
+                contentCategories: config.menuSettings?.contentCategories || [],
+                categoryTagAssociations: config.menuSettings?.contentCategoryMenuItems || [],
+                playerColors: config.playerColors || null
             };
         };
         this.postsPlayer = {

package/dist/media-center/config/operations.generated.d.ts

@@ -4,42 +4,48 @@ export type GetMediaPageConfigQueryVariables = SchemaTypes.Exact<{
     mediaPageId: SchemaTypes.Scalars['String']['input'];
 }>;
 export type GetMediaPageConfigQuery = {
-    embedMediaPagePlayerConfig: {
-        mediaPage: {
-            id: string;
-            handle: string;
-            name: string;
-            description: string;
-            membersCount: number;
-            image: {
-                url: string;
-            } | null;
-            logo: {
-                url: string;
-            } | null;
-            banner: {
-                url: string;
-            } | null;
-        };
-        playerSettings: {
+    embedMediaPage: {
+        id: string;
+        handle: string;
+        name: string;
+        description: string;
+        membersCount: number;
+        image: {
+            url: string;
+        } | null;
+        logo: {
+            url: string;
+        } | null;
+        banner: {
+            url: string;
+        } | null;
+        menuSettings: {
             contentCategories: Array<{
                 id: string;
                 name: string;
                 image: string | null;
                 parentId: string | null;
             }>;
-            colors: {
-                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;
+            contentCategoryMenuItems: Array<{
+                id: string;
+                tag: {
+                    text: string;
+                    backgroundColor: string;
+                    fontColor: string;
+                } | null;
+            }> | null;
+        } | null;
+        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;
     } | null;
 };

package/dist/media-center/config/operations.generated.js

@@ -17,7 +17,7 @@ export const GetMediaPageConfigDocument = {
                 selections: [
                     {
                         kind: 'Field',
-                        name: { kind: 'Name', value: 'embedMediaPagePlayerConfig' },
+                        name: { kind: 'Name', value: 'embedMediaPage' },
                         arguments: [
                             {
                                 kind: 'Argument',
@@ -25,11 +25,7 @@ export const GetMediaPageConfigDocument = {
                                 value: {
                                     kind: 'ObjectValue',
                                     fields: [
-                                        {
-                                            kind: 'ObjectField',
-                                            name: { kind: 'Name', value: 'mediaPageId' },
-                                            value: { kind: 'Variable', name: { kind: 'Name', value: 'mediaPageId' } }
-                                        }
+                                        { kind: 'ObjectField', name: { kind: 'Name', value: 'id' }, value: { kind: 'Variable', name: { kind: 'Name', value: 'mediaPageId' } } }
                                     ]
                                 }
                             }
@@ -37,38 +33,29 @@ export const GetMediaPageConfigDocument = {
                         selectionSet: {
                             kind: 'SelectionSet',
                             selections: [
+                                { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'handle' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'name' } },
+                                { kind: 'Field', name: { kind: 'Name', value: 'description' } },
                                 {
                                     kind: 'Field',
-                                    name: { kind: 'Name', value: 'mediaPage' },
-                                    selectionSet: {
-                                        kind: 'SelectionSet',
-                                        selections: [
-                                            { kind: 'Field', name: { kind: 'Name', value: 'id' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'handle' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'name' } },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'description' } },
-                                            {
-                                                kind: 'Field',
-                                                name: { kind: 'Name', value: 'image' },
-                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                                            },
-                                            {
-                                                kind: 'Field',
-                                                name: { kind: 'Name', value: 'logo' },
-                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                                            },
-                                            {
-                                                kind: 'Field',
-                                                name: { kind: 'Name', value: 'banner' },
-                                                selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
-                                            },
-                                            { kind: 'Field', name: { kind: 'Name', value: 'membersCount' } }
-                                        ]
-                                    }
+                                    name: { kind: 'Name', value: 'image' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
                                 },
                                 {
                                     kind: 'Field',
-                                    name: { kind: 'Name', value: 'playerSettings' },
+                                    name: { kind: 'Name', value: 'logo' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'banner' },
+                                    selectionSet: { kind: 'SelectionSet', selections: [{ kind: 'Field', name: { kind: 'Name', value: 'url' } }] }
+                                },
+                                { kind: 'Field', name: { kind: 'Name', value: 'membersCount' } },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'menuSettings' },
                                     selectionSet: {
                                         kind: 'SelectionSet',
                                         selections: [
@@ -87,25 +74,47 @@ export const GetMediaPageConfigDocument = {
                                             },
                                             {
                                                 kind: 'Field',
-                                                name: { kind: 'Name', value: 'colors' },
+                                                name: { kind: 'Name', value: 'contentCategoryMenuItems' },
                                                 selectionSet: {
                                                     kind: 'SelectionSet',
                                                     selections: [
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'brand' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'button' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'buttonInactive' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'cardButton' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'cardBackground' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'menuBackground' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'playerBackground' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'price' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
-                                                        { kind: 'Field', name: { kind: 'Name', value: 'sidebarBackground' } }
+                                                        { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+                                                        {
+                                                            kind: 'Field',
+                                                            name: { kind: 'Name', value: 'tag' },
+                                                            selectionSet: {
+                                                                kind: 'SelectionSet',
+                                                                selections: [
+                                                                    { kind: 'Field', name: { kind: 'Name', value: 'text' } },
+                                                                    { kind: 'Field', name: { kind: 'Name', value: 'backgroundColor' } },
+                                                                    { kind: 'Field', name: { kind: 'Name', value: 'fontColor' } }
+                                                                ]
+                                                            }
+                                                        }
                                                     ]
                                                 }
                                             }
                                         ]
                                     }
+                                },
+                                {
+                                    kind: 'Field',
+                                    name: { kind: 'Name', value: 'playerColors' },
+                                    selectionSet: {
+                                        kind: 'SelectionSet',
+                                        selections: [
+                                            { kind: 'Field', name: { kind: 'Name', value: 'brand' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'button' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'buttonInactive' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'cardButton' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'cardBackground' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'menuBackground' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'playerBackground' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'price' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'salePrice' } },
+                                            { kind: 'Field', name: { kind: 'Name', value: 'sidebarBackground' } }
+                                        ]
+                                    }
                                 }
                             ]
                         }

package/dist/media-center/config/operations.graphql

@@ -1,40 +1,46 @@
 query GetMediaPageConfig($mediaPageId: String!) {
-  embedMediaPagePlayerConfig(input: { mediaPageId: $mediaPageId }) {
-    mediaPage {
-      id
-      handle
-      name
-      description
-      image {
-        url
-      }
-      logo {
-        url
-      }
-      banner {
-        url
-      }
-      membersCount
+  embedMediaPage(input: { id: $mediaPageId }) {
+    id
+    handle
+    name
+    description
+    image {
+      url
+    }
+    logo {
+      url
     }
-    playerSettings {
+    banner {
+      url
+    }
+    membersCount
+    menuSettings {
       contentCategories {
         id
         name
         image
         parentId
       }
-      colors {
-        brand
-        button
-        buttonInactive
-        cardButton
-        cardBackground
-        menuBackground
-        playerBackground
-        price
-        salePrice
-        sidebarBackground
+      contentCategoryMenuItems {
+        id
+        tag {
+          text
+          backgroundColor
+          fontColor
+        }
       }
     }
+    playerColors {
+      brand
+      button
+      buttonInactive
+      cardButton
+      cardBackground
+      menuBackground
+      playerBackground
+      price
+      salePrice
+      sidebarBackground
+    }
   }
 }

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

@@ -50,6 +50,14 @@ export type MediaCenterConfigModel = {
         image: string | null;
         parentId: string | null;
     }[];
+    categoryTagAssociations: {
+        id: string;
+        tag: {
+            text: string;
+            fontColor: string;
+            backgroundColor: string;
+        } | null;
+    }[];
     targetData: MediaCenterTargetDataModel;
     playerColors: {
         brand: string | null;

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

@@ -0,0 +1,59 @@
+<script lang="ts">import { Theme } from '../../core/theme';
+import { Utils } from '../../core/utils';
+import { Loading } from '../../ui/loading';
+import {} from '../../ui/player/close-orchestrator';
+import { ShadowRoot } from '../../ui/shadow-dom';
+import { MediaCenterContext } from './media-center-context.svelte';
+import { default as MediaCenterView } from './media-center-view.svelte';
+import { untrack } from 'svelte';
+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();
+        }
+    }
+});
+$effect(() => {
+    void (settings === null || settings === void 0 ? void 0 : settings.theme);
+    untrack(() => {
+        var _a;
+        Theme.set((_a = settings === null || settings === void 0 ? void 0 : settings.theme) !== null && _a !== void 0 ? _a : 'dark');
+    });
+});
+</script>
+
+{#if context.initializing}
+  <Loading positionFixedCenter={true} timeout={600} />
+{:else if !context.initialized}
+  Not initialized placeholder
+{:else}
+  <ShadowRoot {...context.backgroundWrapperProps}>
+    <MediaCenterView context={context} />
+  </ShadowRoot>
+{/if}