fix(player): watch menu button hint part changes

closes #1102
vidstack · Feb 15, 2024 · a17239a · a17239a
1 parent 9bfa26e
commit a17239a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/packages/vidstack/mangle.json b/packages/vidstack/mangle.json
@@ -776,5 +776,7 @@
   "_saveLang": "tn",
   "_selectTracks": "un",
   "_watchSwipeGesture": "xn",
-  "_appendSource": "yn"
+  "_appendSource": "yn",
+  "_hintEl": "zn",
+  "_watchHintEl": "An"
 }
diff --git a/packages/vidstack/src/components/provider/provider.ts b/packages/vidstack/src/components/provider/provider.ts
@@ -59,15 +59,15 @@ export class MediaProvider extends Component<MediaProviderProps, MediaProviderSt
     const resize = new ResizeObserver(animationFrameThrottle(this._onResize.bind(this)));
     resize.observe(el);
 
-    const mutation = new MutationObserver(this._onMutation.bind(this));
-    mutation.observe(el, { attributes: true, childList: true });
+    const mutations = new MutationObserver(this._onMutation.bind(this));
+    mutations.observe(el, { attributes: true, childList: true });
 
     this._onResize();
     this._onMutation();
 
     onDispose(() => {
       resize.disconnect();
-      mutation.disconnect();
+      mutations.disconnect();
     });
   }
 

diff --git a/packages/vidstack/src/components/ui/menu/menu-button.ts b/packages/vidstack/src/components/ui/menu/menu-button.ts
@@ -1,4 +1,4 @@
-import { Component, effect, prop, useContext } from 'maverick.js';
+import { Component, effect, onDispose, prop, signal, useContext } from 'maverick.js';
 import { DOMEvent } from 'maverick.js/std';
 
 import { FocusVisibleController } from '../../../foundation/observers/focus-visible';
@@ -20,6 +20,7 @@ export class MenuButton extends Component<MenuButtonProps, {}, MenuButtonEvents>
   };
 
   private _menu!: MenuContext;
+  private _hintEl = signal<HTMLElement | null>(null);
 
   @prop
   get expanded() {
@@ -42,13 +43,12 @@ export class MenuButton extends Component<MenuButtonProps, {}, MenuButtonEvents>
   }
 
   protected override onConnect(el: HTMLElement) {
-    const hint = Array.from(el.querySelectorAll('[data-part="hint"]')).pop();
-    if (hint) {
-      effect(() => {
-        const text = this._menu._hint();
-        if (text) hint.textContent = text;
-      });
-    }
+    effect(this._watchHintEl.bind(this));
+
+    this._onMutation();
+    const mutations = new MutationObserver(this._onMutation.bind(this));
+    mutations.observe(el, { attributeFilter: ['data-part'], childList: true, subtree: true });
+    onDispose(() => mutations.disconnect());
 
     onPress(el, (trigger) => {
       this.dispatch('select', { trigger });
@@ -58,6 +58,20 @@ export class MenuButton extends Component<MenuButtonProps, {}, MenuButtonEvents>
   private _watchDisabled() {
     this._menu._disableMenuButton(this.$props.disabled());
   }
+
+  private _watchHintEl() {
+    const el = this._hintEl();
+    if (!el) return;
+    effect(() => {
+      const text = this._menu._hint();
+      if (text) el.textContent = text;
+    });
+  }
+
+  private _onMutation() {
+    const hintEl = this.el?.querySelector<HTMLElement>('[data-part="hint"]');
+    this._hintEl.set(hintEl ?? null);
+  }
 }
 
 export interface MenuButtonProps {