@streamscloud/embeddable 11.0.0 → 12.0.0

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

@@ -10,7 +10,7 @@ import IconReOrderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_h
 import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
 const SCROLL_MASK_OFFSET = 32;
-let { context, locale, closeFn, on } = $props();
+let { context, locale = 'en', on } = $props();
 const localization = $derived(new MediaCenterHeaderLocalization(locale));
 let scrollAreaRef = $state(null);
 const headerMounted = (node) => {
@@ -66,9 +66,9 @@ const styles = $derived.by(() => {
 
 <div class="media-center-header-container" use:headerMounted>
   <div class="media-center-header" style={styles}>
-    {#if context.logo}
+    {#if context.targetData?.logo}
       <div class="media-center-header__logo-wrap">
-        <img src={context.logo} class="media-center-header__logo" alt={context.targetData?.name} />
+        <img src={context.targetData.logo} class="media-center-header__logo" alt={context.targetData?.name} />
       </div>
     {/if}
     <button type="button" class="control-button control-button--trigger" class:control-button--active={context.menuActive} onclick={context.toggleMenu}>
@@ -78,7 +78,7 @@ const styles = $derived.by(() => {
     </button>
     <div class="media-center-header__scroll-area" use:onScrollMounted use:horizontalWheelScroll onscroll={handleScrollingAreaScroll}>
       <div class="media-center-header__scroll-area-block">
-        <button type="button" class="control-button" class:control-button--active={context.feedHandler.active} onclick={() => context.activateFeed()}>
+        <button type="button" class="control-button" class:control-button--active={context.feedHandler.active} onclick={() => context.playRootFeed()}>
           <span class="control-button__icon" class:control-button__icon--active={context.feedHandler.active}>
             <Icon src={IconPhone} />
           </span>
@@ -86,7 +86,11 @@ const styles = $derived.by(() => {
             {localization.buttons.feed}
           </span>
         </button>
-        <button type="button" class="control-button" class:control-button--active={context.discoverHandler.activated} onclick={context.activateDiscover}>
+        <button
+          type="button"
+          class="control-button"
+          class:control-button--active={context.discoverHandler.activated}
+          onclick={() => context.activateDiscover({ categoryId: null })}>
           <span class="control-button__icon" class:control-button__icon--active={context.discoverHandler.activated}>
             <Icon src={IconScreenSearch} />
           </span>
@@ -134,14 +138,14 @@ const styles = $derived.by(() => {
       </div>
     </div>
   </div>
-  {#if closeFn}
+  {#if context.closeOrchestrator.closeTriggerVisible}
     <div class="close-button">
       <PlayerButton
         icon={IconDismiss}
         zoom={0.8}
         activeColor={context.playerColors?.button ?? null}
         inactiveColor={context.playerColors?.buttonInactive ?? null}
-        on={{ click: closeFn }} />
+        on={{ click: context.closeOrchestrator.requestClose }} />
     </div>
   {/if}
 </div>
@@ -192,10 +196,11 @@ const styles = $derived.by(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 3.125rem;
+  height: 2.9375rem;
   max-width: 11.25rem;
   min-width: 0;
   overflow: hidden;
+  flex-shrink: 0;
 }
 .media-center-header__logo {
   width: auto;
@@ -217,8 +222,7 @@ const styles = $derived.by(() => {
   flex-wrap: nowrap;
   mask-image: none;
   scrollbar-width: none;
-  padding: 0.5rem 0.625rem;
-  padding-left: 0;
+  padding-block: 0.5rem;
   --_scroll-area--mask-offset--left: var(--scroll-area--mask-offset);
   --_scroll-area--mask-offset--right: calc(100% - var(--scroll-area--mask-offset));
 }
@@ -275,7 +279,6 @@ const styles = $derived.by(() => {
 .control-button--active {
   background-color: var(--_media-center-header--button-color);
   color: #ffffff;
-  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
 }
 .control-button:hover:not(.control-button--active) {
   background-color: var(--_media-center-header--button-color);

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

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

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

@@ -1,28 +1,32 @@
 import type { IContentCategoryFollowingHandler } from '../categories-following/types';
 import type { IMediaCenterConfig } from '../config/types';
-import { DiscoverPanelHandler } from './discover';
-import { CategoriesHandler, FeedHandler } from './handlers';
+import type { ICloseOrchestrator } from '../../ui/player/close-orchestrator';
+import { DiscoverViewHandler } from './discover';
+import { FeedHandler } from './feed';
+import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
+import type { MediaCenterMode, MediaCenterSettings } from './types';
 export declare class MediaCenterContext {
     initializing: boolean;
+    initialized: boolean;
+    readonly mediaCenterMode: MediaCenterMode;
     menuActive: boolean;
     categoriesHandler: CategoriesHandler;
     feedHandler: FeedHandler;
-    discoverHandler: DiscoverPanelHandler;
+    discoverHandler: DiscoverViewHandler;
     popularStreamsHandler: PopularStreamsPanelHandler;
     streamsInCategoryHandler: StreamsInCategoryPanelHandler;
     categoryFollowingHandler: IContentCategoryFollowingHandler | null;
+    settingsHandler: MediaCenterSettingsHandler;
+    closeOrchestrator: ICloseOrchestrator;
     private _mediaCenterConfig;
     constructor(data: {
-        config: IMediaCenterConfig | null;
-        followingHandler: IContentCategoryFollowingHandler | null | undefined;
-        on: {
-            initialized: () => void;
-        };
+        config: IMediaCenterConfig;
+        closeOrchestrator: ICloseOrchestrator;
+        settings?: MediaCenterSettings;
+        on: MediaCenterContextInitializationCallbacks;
     });
-    get mediaCenterEffective(): boolean;
-    get logo(): string | null;
     get targetData(): import("../config/types").MediaCenterTargetDataModel | null;
     get playerColors(): {
         brand: string | null;
@@ -38,13 +42,27 @@ export declare class MediaCenterContext {
     } | null;
     get loading(): boolean;
     get overlayIsActive(): boolean;
+    get backgroundWrapperProps(): {
+        backgroundDisabled: boolean;
+        backgroundImageUrl: string | null;
+        backgroundColor?: string | null;
+    };
+    get feedPlayerProps(): import("./types").PlayerProps | null;
     toggleMenu: () => void;
     showMenu: () => void;
     hideMenu: () => void;
-    activateDiscover: () => Promise<void>;
-    activateFeed: (options?: {
-        categoryId?: string | null;
+    activateDiscover: (options: {
+        categoryId: string | null;
     }) => Promise<void>;
+    playPostsFeed: (options: Parameters<FeedHandler["activatePostsFeed"]>[0]) => Promise<void>;
+    playStreamsFeed: (options: Parameters<FeedHandler["activateStreamsFeed"]>[0]) => Promise<void>;
+    playRootFeed: () => Promise<void>;
     tryActivateStreamsInCategory: (categoryId: string) => Promise<void>;
+    private deactivateOtherThanFeed;
     private init;
 }
+type MediaCenterContextInitializationCallbacks = {
+    initialized: (instance: MediaCenterContext) => void;
+    failed: () => void;
+};
+export {};

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

@@ -1,30 +1,38 @@
-import { DiscoverPanelHandler } from './discover';
-import { CategoriesHandler, FeedHandler } from './handlers';
+import { DiscoverViewHandler } from './discover';
+import { FeedHandler } from './feed';
+import { CategoriesHandler, MediaCenterSettingsHandler } from './handlers';
 import { PopularStreamsPanelHandler } from './menu';
 import { StreamsInCategoryPanelHandler } from './streams-in-category';
 export class MediaCenterContext {
     initializing = $state(true);
+    initialized = $state(false);
+    mediaCenterMode = $derived.by(() => {
+        if (this.discoverHandler.activated) {
+            return 'discover';
+        }
+        return 'feed';
+    });
     menuActive = $state(false);
     categoriesHandler = new CategoriesHandler();
-    feedHandler = new FeedHandler();
+    feedHandler;
     discoverHandler;
     popularStreamsHandler;
     streamsInCategoryHandler;
     categoryFollowingHandler = $state.raw(null);
+    settingsHandler;
+    closeOrchestrator;
     _mediaCenterConfig = $state.raw(null);
     constructor(data) {
-        const { config, followingHandler, on } = data;
-        this.discoverHandler = new DiscoverPanelHandler(config);
+        const { config, closeOrchestrator, settings, on } = data;
+        this.closeOrchestrator = closeOrchestrator;
+        this.closeOrchestrator.setCloseTriggerAttached(true);
+        this.settingsHandler = new MediaCenterSettingsHandler(settings);
+        this.feedHandler = new FeedHandler({ config, mediaCenterSettingsHandler: this.settingsHandler, closeOrchestrator });
+        this.discoverHandler = new DiscoverViewHandler(config);
         this.popularStreamsHandler = new PopularStreamsPanelHandler(config);
         this.streamsInCategoryHandler = new StreamsInCategoryPanelHandler(config);
-        this.categoryFollowingHandler = followingHandler || null;
-        this.init(config, on.initialized);
-    }
-    get mediaCenterEffective() {
-        return !this.initializing && this.categoriesHandler.categories.length > 0;
-    }
-    get logo() {
-        return this._mediaCenterConfig?.logo || null;
+        this.categoryFollowingHandler = config.handlers?.categoriesFollowingHandler ?? null;
+        this.init(config, on);
     }
     get targetData() {
         return this._mediaCenterConfig?.targetData || null;
@@ -36,7 +44,13 @@ export class MediaCenterContext {
         return this.discoverHandler.loading || this.streamsInCategoryHandler.loading;
     }
     get overlayIsActive() {
-        return this.discoverHandler.activated || this.streamsInCategoryHandler.activated;
+        return this.streamsInCategoryHandler.activated;
+    }
+    get backgroundWrapperProps() {
+        return this.settingsHandler.backgroundWrapperProps;
+    }
+    get feedPlayerProps() {
+        return this.feedHandler.feedPlayerProps;
     }
     toggleMenu = () => {
         if (this.menuActive) {
@@ -53,26 +67,39 @@ export class MediaCenterContext {
     hideMenu = () => {
         this.menuActive = false;
     };
-    activateDiscover = async () => {
+    activateDiscover = async (options) => {
+        this.settingsHandler.updateBackgroundImageUrl('not-applicable');
         this.hideMenu();
         this.feedHandler.deactivate();
         this.streamsInCategoryHandler.deactivate();
-        await this.discoverHandler.activate();
+        this.categoriesHandler.selectedCategoryId = options.categoryId;
+        const childCategories = this.categoriesHandler.allCategories.filter((c) => c.parentId === this.categoriesHandler.selectedCategoryId);
+        await this.discoverHandler.activate({
+            activeCategoryId: this.categoriesHandler.selectedCategoryId,
+            childCategories: childCategories.map((c) => ({ id: c.id, name: c.name }))
+        });
     };
-    activateFeed = async (options) => {
-        this.hideMenu();
-        this.feedHandler.activate();
-        this.discoverHandler.deactivate();
-        this.streamsInCategoryHandler.deactivate();
-        if (options?.categoryId !== undefined) {
-            this.categoriesHandler.selectedCategoryId = options.categoryId;
+    playPostsFeed = async (options) => {
+        this.deactivateOtherThanFeed();
+        this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
+        this.feedHandler.activatePostsFeed(options);
+    };
+    playStreamsFeed = async (options) => {
+        this.deactivateOtherThanFeed();
+        this.categoriesHandler.selectedCategoryId = options.filter?.categoryId ?? null;
+        this.feedHandler.activateStreamsFeed(options);
+    };
+    playRootFeed = async () => {
+        this.deactivateOtherThanFeed();
+        this.categoriesHandler.selectedCategoryId = null;
+        if (this.feedPlayerProps?.type === 'streams') {
+            this.feedHandler.activateStreamsFeed({});
+        }
+        else {
+            this.feedHandler.activatePostsFeed({});
         }
     };
     tryActivateStreamsInCategory = async (categoryId) => {
-        if (this.categoriesHandler.selectedCategoryId === categoryId) {
-            this.activateFeed({ categoryId: null });
-            return;
-        }
         const selectedCategoryData = this.categoriesHandler.getCategoryData(categoryId);
         await this.streamsInCategoryHandler.activate(selectedCategoryData);
         this.hideMenu();
@@ -80,19 +107,28 @@ export class MediaCenterContext {
         this.discoverHandler.deactivate();
         this.categoriesHandler.selectedCategoryId = categoryId;
     };
-    init = async (config, onInitilized) => {
-        if (!config) {
-            this.initializing = false;
-            onInitilized();
-            return;
-        }
+    deactivateOtherThanFeed = () => {
+        this.hideMenu();
+        this.discoverHandler.deactivate();
+        this.streamsInCategoryHandler.deactivate();
+    };
+    init = async (config, on) => {
         try {
             this._mediaCenterConfig = await config.getConfig();
-            this.categoriesHandler.init(this._mediaCenterConfig?.contentCategories || []);
+            if (!this._mediaCenterConfig) {
+                on.failed();
+                return;
+            }
+            this.categoriesHandler.init(this._mediaCenterConfig.contentCategories);
+            this.settingsHandler.updatePlayerColors(this._mediaCenterConfig.playerColors);
+            on.initialized(this);
+            this.initialized = true;
+        }
+        catch {
+            on.failed();
         }
         finally {
             this.initializing = false;
-            onInitilized();
         }
     };
 }

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

@@ -1,18 +1,9 @@
 import { type Locale } from '../../../core/locale';
 export declare class MenuLocalization {
-    buttons: {
-        cart: string;
-        discover: string;
-        feed: string;
-        login: string;
-        moments: string;
-        webpage: string;
-    };
-    shortVideosSectionTitle: string;
     interestsSectionTitle: string;
-    latestStreamsSectionTitle: string;
     popularStreamsSectionTitle: string;
-    overviewLabel: string;
+    discoverLabel: string;
+    feedLabel: string;
     membersLabel: (count: number) => string;
     locale: Locale;
     constructor(locale: Locale);

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

@@ -1,76 +1,37 @@
 import {} from '../../../core/locale';
 export class MenuLocalization {
-    buttons;
-    shortVideosSectionTitle;
     interestsSectionTitle;
-    latestStreamsSectionTitle;
     popularStreamsSectionTitle;
-    overviewLabel;
+    discoverLabel;
+    feedLabel;
     membersLabel;
     locale;
     constructor(locale) {
-        this.shortVideosSectionTitle = loc.shortVideosSectionTitle[locale];
         this.interestsSectionTitle = loc.interestsSectionTitle[locale];
-        this.latestStreamsSectionTitle = loc.streamsSectionTitle[locale];
         this.popularStreamsSectionTitle = loc.popularStreamsSectionTitle[locale];
-        this.overviewLabel = loc.overviewLabel[locale];
-        this.buttons = {
-            cart: loc.cartButton[locale],
-            discover: loc.discoverButton[locale],
-            feed: loc.feedButton[locale],
-            login: loc.loginButton[locale],
-            moments: loc.momentsButton[locale],
-            webpage: loc.webpageButton[locale]
-        };
+        this.discoverLabel = loc.discoverLabel[locale];
+        this.feedLabel = loc.feedLabel[locale];
         this.membersLabel = loc.membersLabel[locale];
         this.locale = locale;
     }
 }
 const loc = {
-    shortVideosSectionTitle: {
-        en: 'Popular Short Videos',
-        no: 'Populære korte videoer'
-    },
     popularStreamsSectionTitle: {
         en: 'Popular Streams',
         no: 'Populære Streams'
     },
-    streamsSectionTitle: {
-        en: 'Latest Streams',
-        no: 'Siste Streams'
-    },
     interestsSectionTitle: {
         en: 'Interest Channels',
         no: 'Interessekanaler'
     },
-    overviewLabel: {
-        en: 'Overview',
-        no: 'Oversikt'
-    },
-    discoverButton: {
+    discoverLabel: {
         en: 'Discover',
         no: 'Oppdag'
     },
-    feedButton: {
+    feedLabel: {
         en: 'Feed',
         no: 'Feed'
     },
-    cartButton: {
-        en: 'Cart',
-        no: 'Handlekurv'
-    },
-    loginButton: {
-        en: 'Login',
-        no: 'Logg inn'
-    },
-    momentsButton: {
-        en: 'Moments',
-        no: 'Øyeblikk'
-    },
-    webpageButton: {
-        en: 'Webpage',
-        no: 'Nettside'
-    },
     membersLabel: {
         en: (count) => (count === 1 ? `Member` : `Members`),
         no: (count) => (count === 1 ? `Medlem` : `Medlemmer`)

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

@@ -4,17 +4,18 @@ import { StreamCard } from '../../../streams/stream-card';
 import { Icon } from '../../../ui/icon';
 import { ImageRound } from '../../../ui/image';
 import { LineClamp } from '../../../ui/line-clamp';
+import { MomentsCircle } from '../moments';
 import { default as ButtonWrapper } from './category-following-wrapper.svelte';
 import { MenuLocalization } from './menu-localization';
 import IconChevronDownFilled from '@fluentui/svg-icons/icons/chevron_down_20_filled.svg?raw';
 import IconChevronRightFilled from '@fluentui/svg-icons/icons/chevron_right_20_filled.svg?raw';
 import { slide } from 'svelte/transition';
-let { context, locale, on } = $props();
+let { context, locale = 'en', on } = $props();
 const localization = $derived(new MenuLocalization(locale));
 const target = $derived.by(() => context.targetData);
 const generateCategoriesMap = () => {
     const expanded = {};
-    context.categoriesHandler.categories.forEach((c) => {
+    context.categoriesHandler.categoriesGrouped.forEach((c) => {
         const isSelfSelected = context.categoriesHandler.selectedCategoryId === c.id;
         const hasSelectedChild = c.children.some((ch) => ch.id === context.categoriesHandler.selectedCategoryId);
         expanded[c.id] = isSelfSelected || hasSelectedChild;
@@ -27,14 +28,11 @@ const handleCategoryExpaned = (e, categoryId) => {
     categoriesExpandedMap[categoryId] = !categoriesExpandedMap[categoryId];
 };
 const styles = $derived.by(() => {
-    var _a, _b;
+    var _a;
     const values = [];
     if ((_a = context.playerColors) === null || _a === void 0 ? void 0 : _a.menuBackground) {
         values.push(`--media-center-menu--background-color: ${context.playerColors.menuBackground}`);
     }
-    if ((_b = context.playerColors) === null || _b === void 0 ? void 0 : _b.brand) {
-        values.push(`--media-center-menu--brand-color: ${context.playerColors.brand}`);
-    }
     return values.join(';');
 });
 </script>
@@ -43,16 +41,16 @@ const styles = $derived.by(() => {
   {#if target}
     <div class="media-center-target">
       <div class="media-center-target__image">
-        <ImageRound src={target.image} />
+        <MomentsCircle context={context} />
       </div>
       <div class="media-center-target__info">
         <div class="media-center-target__name">
-          <LineClamp maxLines={1}>
+          <LineClamp maxLines={1} locale={locale}>
             {target.name}
           </LineClamp>
         </div>
         {#if target.membersCount}
-          <LineClamp maxLines={1}>
+          <LineClamp maxLines={1} locale={locale}>
             <div class="media-center-target__members">
               <span class="media-center-target__members-count">
                 {compactNumber(target.membersCount, { locale: localization.locale })}
@@ -71,7 +69,22 @@ const styles = $derived.by(() => {
       {localization.interestsSectionTitle}
     </div>
     <div class="media-center-menu__tree">
-      {#each context.categoriesHandler.categories as category (category.id)}
+      <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">
+              {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">
@@ -80,7 +93,7 @@ const styles = $derived.by(() => {
               </div>
               <div
                 class="selector-item__text"
-                class:selector-item__text--active={!context.discoverHandler.activated && context.categoriesHandler.selectedCategoryId === category.id}
+                class:selector-item__text--active={context.categoriesHandler.selectedCategoryId === category.id}
                 onclick={() => on.categorySelected(category.id)}
                 onkeydown={() => {}}
                 role="button"
@@ -112,7 +125,7 @@ const styles = $derived.by(() => {
                     </div>
                     <div
                       class="selector-item__text"
-                      class:selector-item__text--active={!context.discoverHandler.activated && context.categoriesHandler.selectedCategoryId === subcategory.id}
+                      class:selector-item__text--active={context.categoriesHandler.selectedCategoryId === subcategory.id}
                       onclick={() => on.categorySelected(subcategory.id)}
                       onkeydown={() => {}}
                       role="button"
@@ -161,7 +174,6 @@ 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--brand-color: var(--media-center-menu--brand-color, #00b8d8);
   background: var(--_media-center-menu--background-color);
   height: 100%;
   min-height: 100%;
@@ -213,19 +225,19 @@ const styles = $derived.by(() => {
 .media-center-menu__section-title {
   font-size: 1.125rem;
   line-height: 1.75rem;
-  font-weight: 600;
+  font-weight: 500;
   color: #ffffff;
 }
 .media-center-menu__tree {
   display: flex;
   flex-direction: column;
   flex: 1;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 .media-center-menu__tree-item {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 .media-center-menu__popular-streams-section {
   display: flex;
@@ -247,7 +259,6 @@ const styles = $derived.by(() => {
   user-select: none;
   height: 2.25rem;
   --_selector-item--text--font-size: 0.9375rem;
-  --_selector-item--text--font-weight: 600;
   --_selector-item--image--size: 1.5rem;
 }
 .selector-item :global([contenteditable]) {
@@ -257,7 +268,6 @@ const styles = $derived.by(() => {
   height: 2.125rem;
   padding-left: 1.25rem;
   --_selector-item--text--font-size: 0.875rem;
-  --_selector-item--text--font-weight: 500;
   --_selector-item--image--size: 1.375rem;
 }
 .selector-item__value {
@@ -281,7 +291,7 @@ const styles = $derived.by(() => {
   max-width: 100%;
   color: #ffffff;
   font-size: var(--_selector-item--text--font-size);
-  font-weight: var(--_selector-item--text--font-weight);
+  font-weight: 400;
   text-align: left;
   text-overflow: ellipsis;
   width: 100%;
@@ -290,7 +300,8 @@ const styles = $derived.by(() => {
   transition: text-shadow 120ms ease;
 }
 .selector-item__text:hover, .selector-item__text--active {
-  text-shadow: 0.001em 0 0 currentColor, -0.001em 0 0 currentColor, 0 0.001em 0 currentColor, 0 -0.001em 0 currentColor;
+  font-weight: 600;
+  letter-spacing: -0.5px;
 }
 .selector-item__collapser {
   --icon--color: #ffffff;
@@ -313,9 +324,6 @@ const styles = $derived.by(() => {
   height: 3.5rem;
   min-height: 3.5rem;
   max-height: 3.5rem;
-  --image--rounded--inner--border-width: 1px;
-  --image--rounded--outer--border-color: var(--_media-center-menu--brand-color);
-  --image--rounded--outer--border-width: 2px;
 }
 .media-center-target__info {
   display: flex;

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

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

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.d.ts

@@ -4,7 +4,7 @@ export declare class PopularStreamsPanelHandler {
     private readonly config;
     private _state;
     private _streams;
-    constructor(config: IMediaCenterConfig | null);
+    constructor(config: IMediaCenterConfig);
     get streamSectionItems(): StreamPlayerModel[];
     init: () => Promise<void>;
 }

package/dist/media-center/media-center/menu/popular-streams-panel-handler.svelte.js

@@ -9,9 +9,6 @@ export class PopularStreamsPanelHandler {
         return this._streams;
     }
     init = async () => {
-        if (!this.config) {
-            return;
-        }
         if (this._state === 'not-initialized') {
             this._state = 'loading';
             try {