@streamscloud/embeddable 10.1.2 → 11.0.0

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

@@ -7,214 +7,136 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { horizontalWheelScroll } from '../../core/actions';
+var _a;
 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 { Icon } from '../../ui/icon';
 import { Loading } from '../../ui/loading';
-import { PlayerButton } from '../../ui/player/button';
-import { default as DesktopCategoriesSelector } from './desktop-categories-selector.svelte';
-import { DiscoverPanelHandler } from './discover-panel-handler.svelte';
-import { default as DiscoverPanel } from './discover-panel.svelte';
-import { MediaCenterHandler } from './media-center-handler.svelte';
-import { MediaCenterLocalization } from './media-center-localization';
-import { default as MobileControlsPanel } from './mobile-controls-panel.svelte';
-import { makePostPlayerItemsProvider } from './post-player-provider-generator';
-import { StreamsInCategoryPanelHandler } from './streams-in-category-panel-handler.svelte';
-import { default as StreamsInCategoryPanel } from './streams-in-category-panel.svelte';
-import { makeStreamsPlayerDataProvider } from './streams-player-provider-generator';
-import IconLineHorizontal3 from '@fluentui/svg-icons/icons/line_horizontal_3_20_regular.svg?raw';
-import IconScreenSearch from '@fluentui/svg-icons/icons/screen_search_20_regular.svg?raw';
-import { tick } from 'svelte';
+import { DiscoverPanel } from './discover';
+import { MediaCenterHeader, MediaCenterFooter, MediaCenterHeaderMobile } from './header-footer';
+import { MediaCenterContext } from './media-center-context.svelte.js';
+import { Menu } from './menu';
+import { makePostPlayerItemsProvider, makeStreamsPlayerDataProvider } from './providers';
+import { StreamsInCategoryPanel } from './streams-in-category';
 import { fade } from 'svelte/transition';
-const SCROLL_MASK_OFFSET = 32;
 let { config, playerProps, locale = 'en' } = $props();
-const localization = $derived(new MediaCenterLocalization(locale));
-const commonPlayerSettings = {
-    playerSettings: playerProps.props.playerSettings,
-    on: playerProps.props.on
+const enhancedPlayerSettings = () => {
+    const playerSettings = playerProps.mode === 'discover' ? {} : Object.assign({}, playerProps.props.playerSettings);
+    playerSettings.playerColors = context.playerColors;
+    return playerSettings;
 };
-const handler = new MediaCenterHandler(config);
-const discoverHandler = new DiscoverPanelHandler(config);
-const streamsInCategoryHandler = new StreamsInCategoryPanelHandler(config);
-let mediaCenterMode = $state(playerProps.mode);
+const commonPlayerProps = () => {
+    return {
+        playerSettings: enhancedPlayerSettings(),
+        on: playerProps.mode !== 'discover' ? playerProps === null || playerProps === void 0 ? void 0 : playerProps.props.on : undefined
+    };
+};
+const mapToMediaCenterMode = (propsMode) => {
+    switch (propsMode) {
+        case 'posts':
+            return 'posts-feed';
+        case 'streams':
+            return 'streams-feed';
+        case 'discover':
+            return 'discover';
+        default:
+            return Utils.assertUnreachable(propsMode);
+    }
+};
+let mediaCenterMode = $state(mapToMediaCenterMode(playerProps.mode));
+const context = new MediaCenterContext({
+    config,
+    followingHandler: (_a = config === null || config === void 0 ? void 0 : config.handlers) === null || _a === void 0 ? void 0 : _a.categoriesFollowingHandler,
+    on: {
+        initialized: () => {
+            switch (mediaCenterMode) {
+                case 'posts-feed':
+                    context.activateFeed({ categoryId: null });
+                    break;
+                case 'streams-feed':
+                    context.activateFeed({ categoryId: null });
+                    break;
+                case 'discover':
+                    context.activateDiscover();
+                    break;
+                default:
+                    Utils.assertUnreachable(mediaCenterMode);
+            }
+        }
+    }
+});
 let headerHeight = $state(0);
 let computedPlayerProps = $state.raw(playerProps);
 let isMobileView = $state(false);
-const overlayActivated = $derived(discoverHandler.activated || streamsInCategoryHandler.activated);
-let mobileControlsPanelActive = $state(false);
-let extraMobileControlsPanelActions = $state.raw([]);
-let scrollAreaRef = $state(null);
+let closeFn = $state.raw(null);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c;
-    const selectedCategoryData = handler.getCategoryData(categoryId);
-    if (!config || !selectedCategoryData) {
+    var _a, _b;
+    if (!config) {
         return;
     }
-    hideMobileControlsPanel();
     switch (mediaCenterMode) {
-        case 'posts':
-            if (handler.selectedCategoryId === categoryId) {
-                discoverHandler.deactivate();
+        case 'posts-feed':
+            if (context.categoriesHandler.selectedCategoryId === categoryId) {
+                context.activateFeed();
                 return;
             }
-            handler.selectedCategoryId = categoryId;
             computedPlayerProps = {
                 mode: 'posts',
-                props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
+                props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, categoryId }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerProps())
             };
-            discoverHandler.deactivate();
+            context.activateFeed({ categoryId });
             break;
-        case 'stream':
-            if (handler.selectedCategoryId === categoryId) {
-                discoverHandler.deactivate();
-                streamsInCategoryHandler.deactivate();
-                handler.selectedCategoryId = null;
-                return;
-            }
-            handler.selectedCategoryId = categoryId;
-            discoverHandler.deactivate();
-            streamsInCategoryHandler.activate(selectedCategoryData);
+        case 'streams-feed':
+            context.tryActivateStreamsInCategory(categoryId);
+            break;
+        case 'discover':
+            console.warn('Apply category filter for discover mode is not implemented yet');
             break;
         default:
             Utils.assertUnreachable(mediaCenterMode);
     }
-    // Scroll to selected category if it's hidden
-    yield scrollToSelectedCategory((_c = selectedCategoryData.parentId) !== null && _c !== void 0 ? _c : selectedCategoryData.id);
-});
-/**
- * Scrolls the scroll area to make the selected category button visible
- * @param categoryId - ID of the selected category
- */
-const scrollToSelectedCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
-    if (!scrollAreaRef) {
-        return;
-    }
-    // Wait for DOM to update with the new active state
-    yield tick();
-    // Find the selected category button element
-    const selectedButton = scrollAreaRef.querySelector(`[id="${categoryId}"]`);
-    if (!selectedButton) {
-        return;
-    }
-    // Get scroll area and button dimensions
-    const scrollAreaRect = scrollAreaRef.getBoundingClientRect();
-    const buttonRect = selectedButton.getBoundingClientRect();
-    // Calculate button position relative to scroll area
-    const buttonLeftRelative = buttonRect.left - scrollAreaRect.left + scrollAreaRef.scrollLeft;
-    const buttonRightRelative = buttonLeftRelative + buttonRect.width;
-    // Calculate visible area boundaries (accounting for mask gradients)
-    const hasLeftMask = scrollAreaRef.scrollLeft > 0;
-    const hasRightMask = scrollAreaRef.scrollLeft < scrollAreaRef.scrollWidth - scrollAreaRect.width - 1;
-    const visibleLeft = scrollAreaRef.scrollLeft + (hasLeftMask ? SCROLL_MASK_OFFSET : 0);
-    const visibleRight = scrollAreaRef.scrollLeft + scrollAreaRect.width - (hasRightMask ? SCROLL_MASK_OFFSET : 0);
-    // Check if button is hidden or partially hidden
-    const isHiddenLeft = buttonLeftRelative < visibleLeft;
-    const isHiddenRight = buttonRightRelative > visibleRight;
-    if (isHiddenLeft) {
-        const targetScroll = buttonLeftRelative - SCROLL_MASK_OFFSET;
-        scrollAreaRef.scrollTo({
-            left: targetScroll,
-            behavior: 'smooth'
-        });
-    }
-    else if (isHiddenRight) {
-        const targetScroll = buttonRightRelative - scrollAreaRect.width + SCROLL_MASK_OFFSET;
-        scrollAreaRef.scrollTo({
-            left: targetScroll,
-            behavior: 'smooth'
-        });
-    }
 });
 const activateSelectedShortVideoPlayer = (shortVideo) => {
     var _a, _b;
     if (!config) {
         return;
     }
-    mediaCenterMode = 'posts';
+    mediaCenterMode = 'posts-feed';
     computedPlayerProps = {
         mode: 'posts',
-        props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerSettings)
+        props: Object.assign({ dataProvider: makePostPlayerItemsProvider({ config, prefetchedItems: [shortVideo] }), socialInteractionsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.socialInteractionsHandler, analyticsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.analyticsHandler }, commonPlayerProps())
     };
-    handler.selectedCategoryId = null;
-    discoverHandler.deactivate();
-    streamsInCategoryHandler.deactivate();
+    context.activateFeed({ categoryId: null });
 };
 const activateSelectedStreamPlayer = (stream) => {
     var _a, _b;
     if (!config) {
         return;
     }
-    mediaCenterMode = 'stream';
+    mediaCenterMode = 'streams-feed';
     computedPlayerProps = {
-        mode: 'stream',
-        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: [stream] }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
+        mode: 'streams',
+        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: [stream] }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerProps())
     };
-    handler.selectedCategoryId = null;
-    discoverHandler.deactivate();
-    streamsInCategoryHandler.deactivate();
+    context.activateFeed({ categoryId: null });
 };
 const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
     var _a, _b;
     if (!config) {
         return;
     }
-    mediaCenterMode = 'stream';
+    mediaCenterMode = 'streams-feed';
     computedPlayerProps = {
-        mode: 'stream',
-        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: prefetchedStreams, initialStreamId: id, categoryId }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerSettings)
+        mode: 'streams',
+        props: Object.assign({ dataProvider: makeStreamsPlayerDataProvider({ config, prefetchedStreams: prefetchedStreams, initialStreamId: id, categoryId }), analyticsHandler: (_a = config.handlers) === null || _a === void 0 ? void 0 : _a.analyticsHandler, postSocialInteractionsHandler: (_b = config.handlers) === null || _b === void 0 ? void 0 : _b.socialInteractionsHandler }, commonPlayerProps())
     };
-    handler.selectedCategoryId = null;
-    discoverHandler.deactivate();
-    streamsInCategoryHandler.deactivate();
-};
-const toggleDiscover = () => __awaiter(void 0, void 0, void 0, function* () {
-    hideMobileControlsPanel();
-    streamsInCategoryHandler.deactivate();
-    yield discoverHandler.toggle();
-});
-const handleExternalActionExecuted = () => {
-    hideMobileControlsPanel();
-    discoverHandler.deactivate();
-    streamsInCategoryHandler.deactivate();
-};
-const showMobileControlsPanel = () => {
-    mobileControlsPanelActive = true;
+    context.activateFeed();
 };
-const hideMobileControlsPanel = () => {
-    mobileControlsPanelActive = false;
+const onHeaderHeightChanged = (height) => {
+    headerHeight = height;
 };
-const handleScrollingAreaScroll = (e) => {
-    const target = e.target;
-    updateScrollShadows(target);
-};
-const updateScrollShadows = (scrollArea) => {
-    const { scrollLeft, scrollWidth, clientWidth } = scrollArea;
-    const scrollHasLeft = scrollLeft > 0;
-    const scrollHasRight = scrollLeft < scrollWidth - clientWidth - 1;
-    scrollArea.classList.toggle('has-left-mask', scrollHasLeft && !scrollHasRight);
-    scrollArea.classList.toggle('has-right-mask', scrollHasRight && !scrollHasLeft);
-    scrollArea.classList.toggle('has-both-masks', scrollHasRight && scrollHasLeft);
-};
-const onScrollMounted = (node) => {
-    scrollAreaRef = node;
-    scrollAreaRef.style.setProperty('--scroll-area--mask-offset', `${SCROLL_MASK_OFFSET}px`);
-    const scrollResizeObserver = new ResizeObserver(() => {
-        updateScrollShadows(node);
-    });
-    scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.observe(node);
-    return {
-        destroy: () => {
-            scrollResizeObserver === null || scrollResizeObserver === void 0 ? void 0 : scrollResizeObserver.disconnect();
-        }
-    };
-};
-const onHeaderHeightChanged = (data) => {
-    headerHeight = data.height;
-};
-const onExtraActionsForMobileControlsPanelDetermined = (actions) => {
-    extraMobileControlsPanelActions = actions;
+const handlePlayerInitialized = (data) => {
+    closeFn = data.closePlayerFn;
 };
 const onWidthAnchorMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
@@ -229,82 +151,49 @@ const onWidthAnchorMounted = (node) => {
 };
 </script>
 
-{#if handler.initializing}
+{#if context.initializing}
   <Loading positionFixedCenter={true} timeout={600} />
 {:else}
-  {#snippet controlsPanel()}
+  {#snippet mobileFooter()}
+    <MediaCenterFooter context={context} />
+  {/snippet}
+  {#snippet header()}
     {#if !isMobileView}
-      <div class="media-center-controls-panel">
-        <DesktopCategoriesSelector
-          handler={handler}
-          followingHandler={config?.handlers?.categoriesFollowingHandler}
-          on={{ categorySelected: selectCategory }} />
-        <button
-          type="button"
-          class="media-center-controls-panel__button"
-          class:media-center-controls-panel__button--active={discoverHandler.activated}
-          onclick={toggleDiscover}>
-          <span class="media-center-controls-panel__button-icon" class:media-center-controls-panel__button-icon--active={discoverHandler.activated}>
-            <Icon src={IconScreenSearch} />
-          </span>
-          <span class="media-center-controls-panel__button-value">
-            {localization.discoverButton}
-          </span>
-        </button>
-        <div class="media-center-controls-panel__scroll-area" use:onScrollMounted use:horizontalWheelScroll onscroll={handleScrollingAreaScroll}>
-          {#each handler.categories as category (category.id)}
-            <button
-              type="button"
-              id={category.id}
-              class="media-center-controls-panel__button"
-              class:media-center-controls-panel__button--active={!discoverHandler.activated && handler.controlsPanelSelectedCategory?.id === category.id}
-              data-child-name={(!discoverHandler.activated &&
-                handler.controlsPanelSelectedCategory?.id === category.id &&
-                handler.controlsPanelSelectedCategory?.childName) ||
-                undefined}
-              title={category.name}
-              onclick={() => selectCategory(category.id)}>
-              <span class="media-center-controls-panel__button-value">
-                {category.name}
-              </span>
-            </button>
-          {/each}
-        </div>
-      </div>
+      <MediaCenterHeader context={context} closeFn={closeFn} locale={locale} on={{ headerHeightChanged: onHeaderHeightChanged }} />
     {:else}
-      <div class="media-center-mobile-controls-trigger">
-        <PlayerButton icon={IconLineHorizontal3} on={{ click: showMobileControlsPanel }} />
-      </div>
+      <MediaCenterHeaderMobile context={context} closeFn={closeFn} on={{ headerHeightChanged: onHeaderHeightChanged }} />
     {/if}
   {/snippet}
   {#if computedPlayerProps.mode === 'posts'}
     <PostsPlayerView
       {...computedPlayerProps.props}
+      playerSettings={enhancedPlayerSettings()}
       mediaCenterData={{
-        controlsPanel: handler.categories.length ? controlsPanel : undefined,
-        playerLogo: handler.logo,
-        overlayIsActive: overlayActivated,
-        callbacks: { onHeaderHeightChanged, onExtraActionsForMobileControlsPanelDetermined }
+        header: context.mediaCenterEffective ? header : undefined,
+        mobileFooter: isMobileView ? mobileFooter : undefined,
+        overlayIsActive: context.overlayIsActive,
+        callbacks: { onPlayerInitialized: handlePlayerInitialized }
       }} />
-  {:else if computedPlayerProps.mode === 'stream'}
+  {:else if computedPlayerProps.mode === 'streams'}
     <StreamsPlayerView
       {...computedPlayerProps.props}
+      playerSettings={enhancedPlayerSettings()}
       mediaCenterData={{
-        controlsPanel: handler.categories.length ? controlsPanel : undefined,
-        playerLogo: handler.logo,
-        overlayIsActive: overlayActivated,
-        callbacks: { onHeaderHeightChanged, onExtraActionsForMobileControlsPanelDetermined }
+        header: context.mediaCenterEffective ? header : undefined,
+        mobileFooter: isMobileView ? mobileFooter : undefined,
+        overlayIsActive: context.overlayIsActive,
+        callbacks: { onPlayerInitialized: handlePlayerInitialized }
       }} />
   {/if}
-  {#if discoverHandler.loading || streamsInCategoryHandler.loading}
+  {#if context.loading}
     <Loading positionFixedCenter={true} timeout={600} />
   {/if}
 
-  {#if discoverHandler.active}
-    <div class="media-center-overlay" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
+  {#if context.discoverHandler.active}
+    <div class="media-center-overlay" class:media-center-overlay--mobile={isMobileView} style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
       <DiscoverPanel
-        handler={discoverHandler}
-        localization={localization}
+        context={context}
+        locale={locale}
         on={{
           shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
           streamSelected: (stream) => activateSelectedStreamPlayer(stream)
@@ -312,24 +201,18 @@ const onWidthAnchorMounted = (node) => {
     </div>
   {/if}
 
-  {#if streamsInCategoryHandler.active}
-    <div class="media-center-overlay" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
+  {#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={streamsInCategoryHandler}
+        handler={context.streamsInCategoryHandler}
         on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
     </div>
   {/if}
 
-  {#if mobileControlsPanelActive && isMobileView}
-    <div class="mobile-controls-panel-overlay" onclick={hideMobileControlsPanel} onkeydown={() => {}} role="none">
-      <div class="mobile-controls-panel-overlay__panel">
-        <MobileControlsPanel
-          mediaCenterHandler={handler}
-          discoverHandler={discoverHandler}
-          followingHandler={config?.handlers?.categoriesFollowingHandler}
-          localization={localization}
-          extraActions={extraMobileControlsPanelActions}
-          on={{ categorySelected: selectCategory, toggleDiscover, externalActionExecuted: handleExternalActionExecuted }} />
+  {#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={locale} on={{ categorySelected: selectCategory, streamSelected: activateSelectedStreamPlayer }} />
       </div>
     </div>
   {/if}
@@ -347,113 +230,6 @@ const onWidthAnchorMounted = (node) => {
     opacity: 1;
   }
 }
-.media-center-controls-panel {
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  pointer-events: auto;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .media-center-controls-panel {
-    display: none;
-  }
-}
-.media-center-controls-panel__scroll-area {
-  pointer-events: auto;
-  position: relative;
-  flex: 1 1 auto;
-  max-width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: nowrap;
-  mask-image: none;
-  scrollbar-width: none;
-  padding: 0.5rem 0.625rem;
-  padding-left: 0;
-  --_scroll-area--mask-offset--left: var(--scroll-area--mask-offset);
-  --_scroll-area--mask-offset--right: calc(100% - var(--scroll-area--mask-offset));
-}
-:global(.media-center-controls-panel__scroll-area.has-left-mask) {
-  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--left), rgb(0, 0, 0) 100%);
-}
-:global(.media-center-controls-panel__scroll-area.has-right-mask) {
-  mask-image: linear-gradient(to right, rgb(0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--right), rgba(0, 0, 0, 0) 100%);
-}
-:global(.media-center-controls-panel__scroll-area.has-both-masks) {
-  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgb(0, 0, 0) var(--_scroll-area--mask-offset--left), rgb(0, 0, 0) var(--_scroll-area--mask-offset--right), rgba(0, 0, 0, 0) 100%);
-}
-.media-center-controls-panel__button {
-  position: relative;
-  pointer-events: auto;
-  padding: 0.5rem 1.5rem;
-  display: flex;
-  gap: 0.375rem;
-  justify-content: center;
-  align-items: center;
-  max-width: 9.375rem;
-  flex: 0 0 auto;
-  min-width: auto;
-  width: auto;
-  white-space: nowrap;
-  border-radius: 0.875rem;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: #f2f2f2;
-  transition: background 0.3s ease-in-out;
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.media-center-controls-panel__button :global([contenteditable]) {
-  user-select: text;
-}
-.media-center-controls-panel__button--active {
-  background-color: rgba(255, 255, 255, 0.9);
-  color: #000000;
-}
-.media-center-controls-panel__button:hover:not(.media-center-controls-panel__button--active) {
-  background-color: rgba(0, 0, 0, 0.9);
-}
-.media-center-controls-panel__button[data-child-name]:not([data-child-name=""])::after {
-  content: attr(data-child-name);
-  position: absolute;
-  right: -0.625rem;
-  top: 100%;
-  transform: translateY(-50%);
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0.25rem 0.625rem;
-  font-size: 0.5rem;
-  line-height: 1;
-  border-radius: 100vw;
-  background-color: #1f2937;
-  color: #ffffff;
-  pointer-events: none;
-}
-.media-center-controls-panel__button-icon {
-  --icon--size: 1.0625rem;
-  --icon--color: #ffffff;
-  line-height: 0;
-}
-.media-center-controls-panel__button-icon--active {
-  --icon--color: #000000;
-}
-.media-center-controls-panel__button-value {
-  font-size: 0.875rem;
-  line-height: 1.0625rem;
-  text-overflow: ellipsis;
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-}
-
 .media-center-overlay {
   position: absolute;
   inset: 0;
@@ -484,28 +260,21 @@ const onWidthAnchorMounted = (node) => {
     scrollbar-width: thin;
   }
 }
-@media (max-width: 576px) {
-  .media-center-overlay {
-    top: 5rem !important;
-  }
-}
-
-.media-center-mobile-controls-trigger {
-  position: absolute;
-  top: 0.9375rem;
-  left: 0.625rem;
-  z-index: 1;
-}
 
-.mobile-controls-panel-overlay {
+.menu-overlay {
   display: block;
   position: absolute;
   inset: 0;
+  right: auto;
   container-type: inline-size;
   z-index: 1;
 }
-.mobile-controls-panel-overlay__panel {
-  width: 80%;
+.menu-overlay--mobile {
+  right: 0;
+  bottom: 6.25rem;
+}
+.menu-overlay__panel {
+  width: 17.5rem;
   height: 100%;
   max-height: 100%;
 }</style>

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

@@ -6,8 +6,10 @@ type PlayerProps = {
     mode: 'posts';
     props: PostPlayerProps;
 } | {
-    mode: 'stream';
+    mode: 'streams';
     props: StreamsPlayerProps;
+} | {
+    mode: 'discover';
 };
 type Props = {
     config: IMediaCenterConfig | null;

package/dist/media-center/media-center/{discover-panel-handler.svelte.d.ts → discover/discover-panel-handler.svelte.d.ts}

@@ -1,8 +1,8 @@
-import type { TrackingParams } from '../../marketing-tracking';
-import type { IMediaCenterConfig } from '..';
-import type { PostPlayerModel } from '../../posts/posts-player';
-import type { ProductCardModel } from '../../products/product-card';
-import type { StreamPlayerModel } from '../../streams/streams-player';
+import type { TrackingParams } from '../../../marketing-tracking';
+import type { IMediaCenterConfig } from '../../config/types';
+import type { PostPlayerModel } from '../../../posts/posts-player/types';
+import type { ProductCardModel } from '../../../products/product-card';
+import type { StreamPlayerModel } from '../../../streams/streams-player/types';
 export declare class DiscoverPanelHandler {
     private readonly config;
     private _activated;
@@ -18,7 +18,6 @@ export declare class DiscoverPanelHandler {
     get loading(): boolean;
     activate: () => Promise<void>;
     deactivate: () => void;
-    toggle: () => Promise<void>;
     private _uniqueById;
 }
 type ShortVideoSectionItemType = {

package/dist/media-center/media-center/{discover-panel-handler.svelte.js → discover/discover-panel-handler.svelte.js}

@@ -1,4 +1,4 @@
-import { PostType } from '../../core/enums';
+import { PostType } from '../../../core/enums';
 export class DiscoverPanelHandler {
     config;
     _activated = $state(false);
@@ -80,13 +80,6 @@ export class DiscoverPanelHandler {
     deactivate = () => {
         this._activated = false;
     };
-    toggle = async () => {
-        if (this._activated) {
-            this.deactivate();
-            return;
-        }
-        await this.activate();
-    };
     _uniqueById = (arr) => {
         const seen = new Set();
         const res = [];

package/dist/media-center/media-center/discover/discover-panel-localization.d.ts

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