perf(player): use events controller

vidstack · Aug 1, 2024 · c831df8 · c831df8
1 parent 972ecb8
commit c831df8
Show file tree

Hide file tree

Showing 35 changed files with 312 additions and 283 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 ## [unreleased]
 
+### 🏎️ Performance
+
+#### Player
+
+- use private class fields and methods ([e1f8bd5](https://github.com/vidstack/player/commit/e1f8bd5f6aa02eb61c67cce741122e2e71a9de19))
+- use events controller ([2a81ada](https://github.com/vidstack/player/commit/2a81ada293f284cd9793fdfc557febc46017687a))
+
 ### 🐛 Bug Fixes
 
 #### Player

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -32,14 +32,14 @@
     "media-captions": "^1.0.1"
   },
   "devDependencies": {
-    "@maverick-js/cli": "0.42.0",
+    "@maverick-js/cli": "0.43.1",
     "@types/fs-extra": "^11.0.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.2.0",
     "esbuild": "^0.23.0",
     "fs-extra": "^11.0.0",
-    "maverick.js": "0.42.0",
+    "maverick.js": "0.43.1",
     "media-icons": "^1.1.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

diff --git a/packages/react/src/hooks/use-active-text-cues.ts b/packages/react/src/hooks/use-active-text-cues.ts
@@ -17,7 +17,7 @@ export function useActiveTextCues(track: TextTrack | null): VTTCue[] {
     }
 
     function onCuesChange() {
-      setActiveCues(track!.activeCues as VTTCue[]);
+      if (track) setActiveCues(track.activeCues as VTTCue[]);
     }
 
     onCuesChange();

diff --git a/packages/react/src/hooks/use-dom.ts b/packages/react/src/hooks/use-dom.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { animationFrameThrottle, createDisposalBin, listenEvent, setStyle } from 'maverick.js/std';
+import { animationFrameThrottle, EventsController, listenEvent, setStyle } from 'maverick.js/std';
 
 export function useClassName(el: HTMLElement | null, className?: string) {
   React.useEffect(() => {
@@ -34,14 +34,11 @@ export function useTransitionActive(el: Element | null) {
   React.useEffect(() => {
     if (!el) return;
 
-    const disposal = createDisposalBin();
+    const events = new EventsController(el)
+      .add('transitionstart', () => setIsActive(true))
+      .add('transitionend', () => setIsActive(false));
 
-    disposal.add(
-      listenEvent(el, 'transitionstart', () => setIsActive(true)),
-      listenEvent(el, 'transitionend', () => setIsActive(false)),
-    );
-
-    return () => disposal.empty();
+    return () => events.abort();
   }, [el]);
 
   return isActive;
@@ -53,14 +50,11 @@ export function useMouseEnter(el: Element | null) {
   React.useEffect(() => {
     if (!el) return;
 
-    const disposal = createDisposalBin();
-
-    disposal.add(
-      listenEvent(el, 'mouseenter', () => setIsMouseEnter(true)),
-      listenEvent(el, 'mouseleave', () => setIsMouseEnter(false)),
-    );
+    const events = new EventsController(el)
+      .add('mouseenter', () => setIsMouseEnter(true))
+      .add('mouseleave', () => setIsMouseEnter(false));
 
-    return () => disposal.empty();
+    return () => events.abort();
   }, [el]);
 
   return isMouseEnter;
@@ -72,14 +66,11 @@ export function useFocusIn(el: Element | null) {
   React.useEffect(() => {
     if (!el) return;
 
-    const disposal = createDisposalBin();
+    const events = new EventsController(el)
+      .add('focusin', () => setIsFocusIn(true))
+      .add('focusout', () => setIsFocusIn(false));
 
-    disposal.add(
-      listenEvent(el, 'focusin', () => setIsFocusIn(true)),
-      listenEvent(el, 'focusout', () => setIsFocusIn(false)),
-    );
-
-    return () => disposal.empty();
+    return () => events.abort();
   }, [el]);
 
   return isFocusIn;
@@ -122,6 +113,7 @@ export function useColorSchemePreference() {
     }
 
     onChange();
+
     return listenEvent(media, 'change', onChange);
   }, []);
 

diff --git a/packages/react/src/hooks/use-slider-preview.ts b/packages/react/src/hooks/use-slider-preview.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { effect, signal } from 'maverick.js';
-import { listenEvent } from 'maverick.js/std';
+import { EventsController, listenEvent } from 'maverick.js/std';
 import { updateSliderPreviewPlacement, type SliderOrientation } from 'vidstack';
 
 /**
@@ -29,43 +29,32 @@ export function useSliderPreview({
 
     return effect(() => {
       if (!dragging()) {
-        listenEvent(rootRef, 'pointerenter', () => {
-          setIsVisible(true);
-          previewRef?.setAttribute('data-visible', '');
-        });
-
-        listenEvent(rootRef, 'pointerdown', (event) => {
-          dragging.set(true);
-          updatePointerValue(event);
-        });
-
-        listenEvent(rootRef, 'pointerleave', () => {
-          setIsVisible(false);
-          previewRef?.removeAttribute('data-visible');
-        });
-
-        listenEvent(rootRef, 'pointermove', (event) => {
-          updatePointerValue(event);
-        });
-
-        return;
+        new EventsController(rootRef)
+          .add('pointerenter', () => {
+            setIsVisible(true);
+            previewRef?.setAttribute('data-visible', '');
+          })
+          .add('pointerdown', (event) => {
+            dragging.set(true);
+            updatePointerValue(event);
+          })
+          .add('pointerleave', () => {
+            setIsVisible(false);
+            previewRef?.removeAttribute('data-visible');
+          })
+          .add('pointermove', updatePointerValue);
       }
 
       previewRef?.setAttribute('data-dragging', '');
 
-      listenEvent(document, 'pointerup', (event) => {
-        dragging.set(false);
-        previewRef?.removeAttribute('data-dragging');
-        updatePointerValue(event);
-      });
-
-      listenEvent(document, 'pointermove', (event) => {
-        updatePointerValue(event);
-      });
-
-      listenEvent(document, 'touchmove', (e) => e.preventDefault(), {
-        passive: false,
-      });
+      new EventsController(document)
+        .add('pointerup', (event) => {
+          dragging.set(false);
+          previewRef?.removeAttribute('data-dragging');
+          updatePointerValue(event);
+        })
+        .add('pointermove', updatePointerValue)
+        .add('touchmove', (e) => e.preventDefault(), { passive: false });
     });
   }, [rootRef]);
 

diff --git a/packages/react/src/hooks/use-text-cues.ts b/packages/react/src/hooks/use-text-cues.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { createDisposalBin, listenEvent } from 'maverick.js/std';
+import { EventsController } from 'maverick.js/std';
 import type { VTTCue } from 'media-captions';
 import type { TextTrack } from 'vidstack';
 
@@ -13,21 +13,19 @@ export function useTextCues(track: TextTrack | null): VTTCue[] {
   React.useEffect(() => {
     if (!track) return;
 
-    function onCuesChange(track: TextTrack) {
-      setCues([...track.cues]);
+    function onCuesChange() {
+      if (track) setCues([...track.cues]);
     }
 
-    const disposal = createDisposalBin();
-    disposal.add(
-      listenEvent(track, 'add-cue', () => onCuesChange(track)),
-      listenEvent(track, 'remove-cue', () => onCuesChange(track)),
-    );
+    const events = new EventsController(track)
+      .add('add-cue', onCuesChange)
+      .add('remove-cue', onCuesChange);
 
-    onCuesChange(track);
+    onCuesChange();
 
     return () => {
-      disposal.empty();
       setCues([]);
+      events.abort();
     };
   }, [track]);
 

diff --git a/packages/vidstack/package.json b/packages/vidstack/package.json
@@ -43,7 +43,7 @@
     "unplugin": "^1.10.1"
   },
   "devDependencies": {
-    "@maverick-js/cli": "0.42.0",
+    "@maverick-js/cli": "0.43.1",
     "@open-wc/semantic-dom-diff": "^0.20.0",
     "@open-wc/testing-helpers": "^3.0.0",
     "@types/fs-extra": "^11.0.1",
@@ -60,7 +60,7 @@
     "jsdom": "^21.0.0",
     "just-debounce-it": "^3.2.0",
     "just-throttle": "^4.2.0",
-    "maverick.js": "0.42.0",
+    "maverick.js": "0.43.1",
     "media-icons": "^1.1.4",
     "postcss": "^8.4.0",
     "rimraf": "^3.0.0",

diff --git a/packages/vidstack/src/components/ui/buttons/toggle-button-controller.ts b/packages/vidstack/src/components/ui/buttons/toggle-button-controller.ts
@@ -50,11 +50,11 @@ export class ToggleButtonController extends ViewController<ToggleButtonControlle
   }
 
   protected override onConnect(el: HTMLElement) {
-    onPress(el, this.#onMaybePress.bind(this));
+    const events = onPress(el, this.#onMaybePress.bind(this));
 
     // Prevent these events too when toggle is disabled.
     for (const type of ['click', 'touchstart'] as const) {
-      this.listen(type, this.#onInteraction.bind(this), {
+      events.add(type, this.#onInteraction.bind(this), {
         passive: true,
       });
     }

diff --git a/packages/vidstack/src/components/ui/captions/captions-renderer.ts b/packages/vidstack/src/components/ui/captions/captions-renderer.ts
@@ -1,4 +1,4 @@
-import { createDisposalBin, listenEvent } from 'maverick.js/std';
+import { EventsController } from 'maverick.js/std';
 import type { CaptionsRenderer } from 'media-captions';
 
 import type { TextRenderer } from '../../../core/tracks/text/render/text-renderer';
@@ -8,8 +8,8 @@ export class CaptionsTextRenderer implements TextRenderer {
   readonly priority = 10;
 
   #track: TextTrack | null = null;
-  #disposal = createDisposalBin();
   #renderer: CaptionsRenderer;
+  #events?: EventsController<TextTrack>;
 
   constructor(renderer: CaptionsRenderer) {
     this.#renderer = renderer;
@@ -24,33 +24,32 @@ export class CaptionsTextRenderer implements TextRenderer {
   }
 
   detach(): void {
-    this.#disposal.empty();
+    this.#events?.abort();
+    this.#events = undefined;
     this.#renderer.reset();
     this.#track = null;
   }
 
   changeTrack(track: TextTrack | null): void {
     if (!track || this.#track === track) return;
 
-    this.#disposal.empty();
+    this.#events?.abort();
+    this.#events = new EventsController(track);
 
     if (track.readyState < 2) {
       this.#renderer.reset();
-      this.#disposal.add(
-        listenEvent(track, 'load', () => this.#changeTrack(track), { once: true }),
-      );
+      this.#events.add('load', () => this.#changeTrack(track), { once: true });
     } else {
       this.#changeTrack(track);
     }
 
-    this.#disposal.add(
-      listenEvent(track, 'add-cue', (event) => {
+    this.#events
+      .add('add-cue', (event) => {
         this.#renderer.addCue(event.detail);
-      }),
-      listenEvent(track, 'remove-cue', (event) => {
+      })
+      .add('remove-cue', (event) => {
         this.#renderer.removeCue(event.detail);
-      }),
-    );
+      });
 
     this.#track = track;
   }

diff --git a/packages/vidstack/src/components/ui/menu/menu-focus-controller.ts b/packages/vidstack/src/components/ui/menu/menu-focus-controller.ts
@@ -1,5 +1,5 @@
 import { onDispose } from 'maverick.js';
-import { listenEvent, wasEnterKeyPressed } from 'maverick.js/std';
+import { EventsController, listenEvent, wasEnterKeyPressed } from 'maverick.js/std';
 
 import { isElementParent, isHTMLElement } from '../../../utils/dom';
 import { scrollIntoCenter } from '../../../utils/scroll';
@@ -59,8 +59,9 @@ export class MenuFocusController {
 
     this.update();
 
-    listenEvent(this.#el, 'keyup', this.#onKeyUp.bind(this));
-    listenEvent(this.#el, 'keydown', this.#onKeyDown.bind(this));
+    new EventsController(this.#el)
+      .add('keyup', this.#onKeyUp.bind(this))
+      .add('keydown', this.#onKeyDown.bind(this));
 
     onDispose(() => {
       this.#index = -1;

diff --git a/packages/vidstack/src/components/ui/menu/menu.ts b/packages/vidstack/src/components/ui/menu/menu.ts
@@ -15,6 +15,7 @@ import {
   animationFrameThrottle,
   ariaBool,
   DOMEvent,
+  EventsController,
   isKeyboardEvent,
   listenEvent,
   setAttribute,
@@ -448,8 +449,9 @@ export class Menu extends Component<MenuProps, {}, MenuEvents> {
   #addSubmenu(menu: Menu) {
     this.#submenus.add(menu);
 
-    listenEvent(menu, 'open', this.#onSubmenuOpenBind);
-    listenEvent(menu, 'close', this.#onSubmenuCloseBind);
+    new EventsController(menu)
+      .add('open', this.#onSubmenuOpenBind)
+      .add('close', this.#onSubmenuCloseBind);
 
     onDispose(this.#removeSubmenuBind);
   }

diff --git a/packages/vidstack/src/components/ui/menu/radio-groups/chapters-radio-group.ts b/packages/vidstack/src/components/ui/menu/radio-groups/chapters-radio-group.ts
@@ -8,7 +8,7 @@ import {
   signal,
   useContext,
 } from 'maverick.js';
-import { DOMEvent, isNumber, listenEvent, setStyle } from 'maverick.js/std';
+import { DOMEvent, EventsController, isNumber, listenEvent, setStyle } from 'maverick.js/std';
 import type { VTTCue } from 'media-captions';
 
 import { useMediaContext, type MediaContext } from '../../../../core/api/media-context';
@@ -113,8 +113,8 @@ export class ChaptersRadioGroup extends Component<
     const onCuesChange = this.#onCuesChange.bind(this, track);
 
     onCuesChange();
-    listenEvent(track, 'add-cue', onCuesChange);
-    listenEvent(track, 'remove-cue', onCuesChange);
+
+    new EventsController(track).add('add-cue', onCuesChange).add('remove-cue', onCuesChange);
 
     return () => {
       this.#cues.set([]);

diff --git a/packages/vidstack/src/components/ui/poster.ts b/packages/vidstack/src/components/ui/poster.ts
@@ -1,5 +1,5 @@
 import { Component, effect, State } from 'maverick.js';
-import { isNull, listenEvent, setAttribute } from 'maverick.js/std';
+import { EventsController, isNull, listenEvent, setAttribute } from 'maverick.js/std';
 
 import { useMediaContext, type MediaContext } from '../../core/api/media-context';
 import type { MediaCrossOrigin } from '../../core/api/types';
@@ -120,8 +120,9 @@ export class Poster extends Component<PosterProps, PosterState> {
     const img = this.$state.img();
     if (!img) return;
 
-    listenEvent(img, 'load', this.#onLoad.bind(this));
-    listenEvent(img, 'error', this.#onError.bind(this));
+    new EventsController(img)
+      .add('load', this.#onLoad.bind(this))
+      .add('error', this.#onError.bind(this));
 
     if (img.complete) this.#onLoad();
   }