fix(player): default audio layout menus not offset correctly

vidstack · Oct 2, 2023 · 1e212b8 · 1e212b8
1 parent 392ec6e
commit 1e212b8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 11 deletions.
diff --git a/packages/react/src/components/layouts/default/shared-layout.tsx b/packages/react/src/components/layouts/default/shared-layout.tsx
@@ -477,14 +477,21 @@ export { DefaultTimeInfo };
  * -----------------------------------------------------------------------------------------------*/
 
 function DefaultChaptersMenu({ tooltip, placement, portalClass }: DefaultMediaMenuProps) {
-  const { showMenuDelay, noModal, isSmallLayout, Icons } = React.useContext(DefaultLayoutContext),
+  const { showMenuDelay, noModal, isSmallLayout, Icons, menuGroup } =
+      React.useContext(DefaultLayoutContext),
     chaptersText = useDefaultLayoutLang('Chapters'),
     options = useChapterOptions(),
     disabled = !options.length,
-    { thumbnails } = React.useContext(DefaultLayoutContext);
+    { thumbnails } = React.useContext(DefaultLayoutContext),
+    $viewType = useMediaState('viewType'),
+    $offset = !isSmallLayout && menuGroup === 'bottom' && $viewType === 'video' ? 26 : 0;
 
   const Content = (
-    <MenuBase.Content className="vds-chapters-menu-items vds-menu-items" placement={placement}>
+    <MenuBase.Content
+      className="vds-chapters-menu-items vds-menu-items"
+      placement={placement}
+      offset={$offset}
+    >
       <MenuBase.RadioGroup
         className="vds-chapters-radio-group vds-radio-group"
         value={options.selectedValue}
@@ -544,11 +551,18 @@ export { DefaultChaptersMenu };
  * -----------------------------------------------------------------------------------------------*/
 
 function DefaultSettingsMenu({ tooltip, placement, portalClass }: DefaultMediaMenuProps) {
-  const { showMenuDelay, Icons, isSmallLayout, noModal } = React.useContext(DefaultLayoutContext),
-    settingsText = useDefaultLayoutLang('Settings');
+  const { showMenuDelay, Icons, isSmallLayout, menuGroup, noModal } =
+      React.useContext(DefaultLayoutContext),
+    settingsText = useDefaultLayoutLang('Settings'),
+    $viewType = useMediaState('viewType'),
+    $offset = !isSmallLayout && menuGroup === 'bottom' && $viewType === 'video' ? 26 : 0;
 
   const Content = (
-    <MenuBase.Content className="vds-settings-menu-items vds-menu-items" placement={placement}>
+    <MenuBase.Content
+      className="vds-settings-menu-items vds-menu-items"
+      placement={placement}
+      offset={$offset}
+    >
       <DefaultAudioSubmenu />
       <DefaultSpeedSubmenu />
       <DefaultQualitySubmenu />

diff --git a/packages/vidstack/src/elements/define/layouts/default/shared-layout.ts b/packages/vidstack/src/elements/define/layouts/default/shared-layout.ts
@@ -226,12 +226,15 @@ export function DefaultChaptersMenu({
   placement: MenuPlacement | ReadSignal<MenuPlacement | null>;
   tooltip: TooltipPlacement | ReadSignal<TooltipPlacement>;
 }) {
-  const { translations, smQueryList, thumbnails, menuContainer, noModal, menuGroup } =
+  const { viewType } = useMediaContext().$state,
+    { translations, smQueryList, thumbnails, menuContainer, noModal, menuGroup } =
       useDefaultLayoutContext(),
     $placement = computed(() =>
       noModal() ? unwrap(placement) : !smQueryList.matches ? unwrap(placement) : null,
     ),
-    $offset = computed(() => (!smQueryList.matches && menuGroup() === 'bottom' ? 26 : 0));
+    $offset = computed(() =>
+      !smQueryList.matches && menuGroup() === 'bottom' && viewType() === 'video' ? 26 : 0,
+    );
 
   const items = html`
     <media-menu-items
@@ -287,12 +290,14 @@ export function DefaultSettingsMenu({
   tooltip: TooltipPlacement | ReadSignal<TooltipPlacement>;
   placement: MenuPlacement | ReadSignal<MenuPlacement | null>;
 }) {
-  const { translations, smQueryList, menuContainer, noModal, menuGroup } =
-      useDefaultLayoutContext(),
+  const { viewType } = useMediaContext().$state,
+    { translations, smQueryList, menuContainer, noModal, menuGroup } = useDefaultLayoutContext(),
     $placement = computed(() =>
       noModal() ? unwrap(placement) : !smQueryList.matches ? unwrap(placement) : null,
     ),
-    $offset = computed(() => (!smQueryList.matches && menuGroup() === 'bottom' ? 26 : 0));
+    $offset = computed(() =>
+      !smQueryList.matches && menuGroup() === 'bottom' && viewType() === 'video' ? 26 : 0,
+    );
 
   const items = html`
     <media-menu-items