@streamscloud/embeddable 10.1.2 → 12.0.0

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

@@ -7,214 +7,90 @@
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { horizontalWheelScroll } from '../../core/actions';
 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 { WithBackground } from '../../ui/with-background';
+import { DiscoverPanel } from './discover';
+import { MediaCenterHeader, MediaCenterFooter, MediaCenterHeaderMobile } from './header-footer';
+import { MediaCenterContext } from './media-center-context.svelte';
+import { Menu } from './menu';
+import { StreamsInCategoryPanel } from './streams-in-category';
 import { fade } from 'svelte/transition';
-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 handler = new MediaCenterHandler(config);
-const discoverHandler = new DiscoverPanelHandler(config);
-const streamsInCategoryHandler = new StreamsInCategoryPanelHandler(config);
-let mediaCenterMode = $state(playerProps.mode);
+let { config, modeProps, settings, closeOrchestrator } = $props();
+const context = new MediaCenterContext({
+    config,
+    closeOrchestrator,
+    settings,
+    on: {
+        initialized: (instance) => {
+            switch (modeProps.mode) {
+                case 'posts':
+                    instance.playPostsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onPostActivated: modeProps.props.onPostActivated
+                    });
+                    break;
+                case 'streams':
+                    instance.playStreamsFeed({
+                        dataProvider: modeProps.props.dataProvider,
+                        onStreamActivated: modeProps.props.onStreamActivated
+                    });
+                    break;
+                case 'discover':
+                    instance.activateDiscover({ categoryId: null });
+                    break;
+                default:
+                    Utils.assertUnreachable(modeProps);
+            }
+        },
+        failed: () => {
+            console.error('Media Center initialization failed');
+            closeOrchestrator.requestClose();
+        }
+    }
+});
 let 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);
 const selectCategory = (categoryId) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c;
-    const selectedCategoryData = handler.getCategoryData(categoryId);
-    if (!config || !selectedCategoryData) {
-        return;
-    }
-    hideMobileControlsPanel();
-    switch (mediaCenterMode) {
-        case 'posts':
-            if (handler.selectedCategoryId === categoryId) {
-                discoverHandler.deactivate();
+    switch (context.mediaCenterMode) {
+        case 'feed':
+            if (!context.feedPlayerProps) {
                 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)
-            };
-            discoverHandler.deactivate();
-            break;
-        case 'stream':
-            if (handler.selectedCategoryId === categoryId) {
-                discoverHandler.deactivate();
-                streamsInCategoryHandler.deactivate();
-                handler.selectedCategoryId = null;
-                return;
+            switch (context.feedPlayerProps.type) {
+                case 'posts':
+                    if (context.categoriesHandler.selectedCategoryId === categoryId) {
+                        return;
+                    }
+                    context.playPostsFeed({ filter: { categoryId } });
+                    break;
+                case 'streams':
+                    context.tryActivateStreamsInCategory(categoryId);
+                    return;
+                default:
+                    Utils.assertUnreachable(context.feedPlayerProps);
             }
-            handler.selectedCategoryId = categoryId;
-            discoverHandler.deactivate();
-            streamsInCategoryHandler.activate(selectedCategoryData);
+            break;
+        case 'discover':
+            context.activateDiscover({ categoryId });
             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'
-        });
+            Utils.assertUnreachable(context.mediaCenterMode);
     }
 });
 const activateSelectedShortVideoPlayer = (shortVideo) => {
-    var _a, _b;
-    if (!config) {
-        return;
-    }
-    mediaCenterMode = 'posts';
-    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)
-    };
-    handler.selectedCategoryId = null;
-    discoverHandler.deactivate();
-    streamsInCategoryHandler.deactivate();
+    context.playPostsFeed({ filter: { prefetchedItems: [shortVideo] } });
 };
 const activateSelectedStreamPlayer = (stream) => {
-    var _a, _b;
-    if (!config) {
-        return;
-    }
-    mediaCenterMode = 'stream';
-    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)
-    };
-    handler.selectedCategoryId = null;
-    discoverHandler.deactivate();
-    streamsInCategoryHandler.deactivate();
+    context.playStreamsFeed({ filter: { prefetchedStreams: [stream] } });
 };
 const activateSelectedStreamOfCategoryPlayer = (id, prefetchedStreams, categoryId) => {
-    var _a, _b;
-    if (!config) {
-        return;
-    }
-    mediaCenterMode = 'stream';
-    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)
-    };
-    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;
-};
-const hideMobileControlsPanel = () => {
-    mobileControlsPanelActive = false;
+    context.playStreamsFeed({ filter: { categoryId, prefetchedStreams, initialStreamId: id } });
 };
-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 onHeaderHeightChanged = (height) => {
+    headerHeight = height;
 };
 const onWidthAnchorMounted = (node) => {
     const resizeObserver = new ResizeObserver(() => {
@@ -227,113 +103,122 @@ const onWidthAnchorMounted = (node) => {
         }
     };
 };
+const swipeToOpen = (node) => {
+    let startX = 0;
+    let startY = 0;
+    let isTracking = false;
+    let hasOpened = false;
+    let threshold = 60;
+    const MIN_DISTANCE = 10;
+    function handleTouchStart(e) {
+        if (e.touches.length !== 1) {
+            return;
+        }
+        const touch = e.touches[0];
+        startX = touch.clientX;
+        startY = touch.clientY;
+        isTracking = true;
+        hasOpened = false;
+    }
+    function handleTouchMove(e) {
+        if (!isTracking || hasOpened) {
+            return;
+        }
+        const touch = e.touches[0];
+        const dx = touch.clientX - startX;
+        const dy = touch.clientY - startY;
+        if (Math.abs(dx) < MIN_DISTANCE && Math.abs(dy) < MIN_DISTANCE) {
+            return;
+        }
+        if (Math.abs(dy) > Math.abs(dx)) {
+            isTracking = false;
+            return;
+        }
+        if (dx < 0) {
+            isTracking = false;
+            return;
+        }
+        if (dx > threshold) {
+            hasOpened = true;
+            context.showMenu();
+        }
+    }
+    function handleTouchEnd() {
+        isTracking = false;
+    }
+    node.addEventListener('touchstart', handleTouchStart, { passive: true });
+    node.addEventListener('touchmove', handleTouchMove, { passive: true });
+    node.addEventListener('touchend', handleTouchEnd);
+    return {
+        destroy() {
+            node.removeEventListener('touchstart', handleTouchStart);
+            node.removeEventListener('touchmove', handleTouchMove);
+            node.removeEventListener('touchend', handleTouchEnd);
+        }
+    };
+};
 </script>
 
-{#if handler.initializing}
+{#if context.initializing}
   <Loading positionFixedCenter={true} timeout={600} />
+{:else if !context.initialized}
+  Not initialized placeholder
 {:else}
-  {#snippet controlsPanel()}
-    {#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>
-    {:else}
-      <div class="media-center-mobile-controls-trigger">
-        <PlayerButton icon={IconLineHorizontal3} on={{ click: showMobileControlsPanel }} />
-      </div>
-    {/if}
-  {/snippet}
-  {#if computedPlayerProps.mode === 'posts'}
-    <PostsPlayerView
-      {...computedPlayerProps.props}
-      mediaCenterData={{
-        controlsPanel: handler.categories.length ? controlsPanel : undefined,
-        playerLogo: handler.logo,
-        overlayIsActive: overlayActivated,
-        callbacks: { onHeaderHeightChanged, onExtraActionsForMobileControlsPanelDetermined }
-      }} />
-  {:else if computedPlayerProps.mode === 'stream'}
-    <StreamsPlayerView
-      {...computedPlayerProps.props}
-      mediaCenterData={{
-        controlsPanel: handler.categories.length ? controlsPanel : undefined,
-        playerLogo: handler.logo,
-        overlayIsActive: overlayActivated,
-        callbacks: { onHeaderHeightChanged, onExtraActionsForMobileControlsPanelDetermined }
-      }} />
-  {/if}
-  {#if discoverHandler.loading || streamsInCategoryHandler.loading}
-    <Loading positionFixedCenter={true} timeout={600} />
-  {/if}
+  <WithBackground {...context.backgroundWrapperProps}>
+    <div class="media-center" use:onWidthAnchorMounted>
+      {#if !isMobileView}
+        <MediaCenterHeader context={context} locale={settings?.locale} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+      {:else}
+        <MediaCenterHeaderMobile context={context} on={{ headerHeightChanged: onHeaderHeightChanged }} />
+      {/if}
 
-  {#if discoverHandler.active}
-    <div class="media-center-overlay" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-      <DiscoverPanel
-        handler={discoverHandler}
-        localization={localization}
-        on={{
-          shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
-          streamSelected: (stream) => activateSelectedStreamPlayer(stream)
-        }} />
-    </div>
-  {/if}
+      <div class="media-center__content-container">
+        {#if context.mediaCenterMode === 'feed' && context.feedPlayerProps}
+          <div class="media-center__content" class:media-center__content--faded={context.overlayIsActive} transition:fade={{ duration: 300 }}>
+            {#if context.feedPlayerProps.type === 'posts'}
+              <PostsPlayerView {...context.feedPlayerProps.props} />
+            {:else if context.feedPlayerProps.type === 'streams'}
+              <StreamsPlayerView {...context.feedPlayerProps.props} />
+            {/if}
+          </div>
+        {:else if context.mediaCenterMode === 'discover'}
+          <div class="media-center__content" transition:fade={{ duration: 300 }}>
+            <DiscoverPanel
+              context={context}
+              locale={settings?.locale}
+              on={{
+                shortVideoSelected: (shortVideo) => activateSelectedShortVideoPlayer(shortVideo),
+                streamSelected: (stream) => activateSelectedStreamPlayer(stream)
+              }} />
+          </div>
+        {/if}
+      </div>
+      {#if context.loading}
+        <Loading positionFixedCenter={true} timeout={600} />
+      {/if}
 
-  {#if streamsInCategoryHandler.active}
-    <div class="media-center-overlay" style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
-      <StreamsInCategoryPanel
-        handler={streamsInCategoryHandler}
-        on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
-    </div>
-  {/if}
+      {#if context.streamsInCategoryHandler.active}
+        <div class="media-center-overlay" class:media-center-overlay--mobile={isMobileView} style={`top:${headerHeight}px`} transition:fade={{ duration: 300 }}>
+          <StreamsInCategoryPanel
+            handler={context.streamsInCategoryHandler}
+            on={{ streamSelected: (id, categoryId, streams) => activateSelectedStreamOfCategoryPlayer(id, streams, categoryId) }} />
+        </div>
+      {/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 }} />
-      </div>
+      {#if context.menuActive}
+        <div class="menu-overlay" class:menu-overlay--mobile={isMobileView} onclick={context.hideMenu} onkeydown={() => {}} role="none">
+          <div class="menu-overlay__panel">
+            <Menu context={context} locale={settings?.locale} on={{ categorySelected: selectCategory, streamSelected: activateSelectedStreamPlayer }} />
+          </div>
+        </div>
+      {:else}
+        <div class="menu-swipe-area" use:swipeToOpen>&nbsp;</div>
+      {/if}
+      {#if isMobileView}
+        <MediaCenterFooter context={context} />
+      {/if}
     </div>
-  {/if}
-  <div class="media-center-width-anchor" use:onWidthAnchorMounted></div>
+  </WithBackground>
 {/if}
 
 <style>@keyframes fadeIn {
@@ -347,111 +232,32 @@ const onWidthAnchorMounted = (node) => {
     opacity: 1;
   }
 }
-.media-center-controls-panel {
+.media-center {
+  width: 100%;
+  min-width: 100%;
   max-width: 100%;
+  height: 100%;
+  min-height: 100%;
+  max-height: 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;
+  flex-direction: column;
   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 {
+.media-center__content-container {
+  flex: 1;
+  min-height: 0;
   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);
+.media-center__content {
   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;
+  inset: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
-.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__content--faded {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
 }
 
 .media-center-overlay {
@@ -484,28 +290,37 @@ 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%;
+}
+
+.menu-swipe-area {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1.875rem;
+  height: 100%;
+  z-index: 1;
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 576px) {
+  .menu-swipe-area {
+    display: block;
+  }
 }</style>