Skip to content

Commit c831df8

Browse files
mihar-22mihar-22
committed
perf(player): use events controller
1 parent 972ecb8 commit c831df8

35 files changed

Lines changed: 312 additions & 283 deletions

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
44

55
## [unreleased]
66

7+
### 🏎️ Performance
8+
9+
#### Player
10+
11+
- use private class fields and methods ([e1f8bd5](https://github.com/vidstack/player/commit/e1f8bd5f6aa02eb61c67cce741122e2e71a9de19))
12+
- use events controller ([2a81ada](https://github.com/vidstack/player/commit/2a81ada293f284cd9793fdfc557febc46017687a))
13+
714
### 🐛 Bug Fixes
815

916
#### Player

‎packages/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@
3232
"media-captions": "^1.0.1"
3333
},
3434
"devDependencies": {
35-
"@maverick-js/cli": "0.42.0",
35+
"@maverick-js/cli": "0.43.1",
3636
"@types/fs-extra": "^11.0.1",
3737
"@types/react": "^18.0.0",
3838
"@types/react-dom": "^18.0.0",
3939
"@vitejs/plugin-react": "^4.2.0",
4040
"esbuild": "^0.23.0",
4141
"fs-extra": "^11.0.0",
42-
"maverick.js": "0.42.0",
42+
"maverick.js": "0.43.1",
4343
"media-icons": "^1.1.4",
4444
"react": "^18.0.0",
4545
"react-dom": "^18.0.0",

‎packages/react/src/hooks/use-active-text-cues.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export function useActiveTextCues(track: TextTrack | null): VTTCue[] {
1717
}
1818

1919
function onCuesChange() {
20-
setActiveCues(track!.activeCues as VTTCue[]);
20+
if (track) setActiveCues(track.activeCues as VTTCue[]);
2121
}
2222

2323
onCuesChange();

‎packages/react/src/hooks/use-dom.ts‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22

3-
import { animationFrameThrottle, createDisposalBin, listenEvent, setStyle } from 'maverick.js/std';
3+
import { animationFrameThrottle, EventsController, listenEvent, setStyle } from 'maverick.js/std';
44

55
export function useClassName(el: HTMLElement | null, className?: string) {
66
React.useEffect(() => {
@@ -34,14 +34,11 @@ export function useTransitionActive(el: Element | null) {
3434
React.useEffect(() => {
3535
if (!el) return;
3636

37-
const disposal = createDisposalBin();
37+
const events = new EventsController(el)
38+
.add('transitionstart', () => setIsActive(true))
39+
.add('transitionend', () => setIsActive(false));
3840

39-
disposal.add(
40-
listenEvent(el, 'transitionstart', () => setIsActive(true)),
41-
listenEvent(el, 'transitionend', () => setIsActive(false)),
42-
);
43-
44-
return () => disposal.empty();
41+
return () => events.abort();
4542
}, [el]);
4643

4744
return isActive;
@@ -53,14 +50,11 @@ export function useMouseEnter(el: Element | null) {
5350
React.useEffect(() => {
5451
if (!el) return;
5552

56-
const disposal = createDisposalBin();
57-
58-
disposal.add(
59-
listenEvent(el, 'mouseenter', () => setIsMouseEnter(true)),
60-
listenEvent(el, 'mouseleave', () => setIsMouseEnter(false)),
61-
);
53+
const events = new EventsController(el)
54+
.add('mouseenter', () => setIsMouseEnter(true))
55+
.add('mouseleave', () => setIsMouseEnter(false));
6256

63-
return () => disposal.empty();
57+
return () => events.abort();
6458
}, [el]);
6559

6660
return isMouseEnter;
@@ -72,14 +66,11 @@ export function useFocusIn(el: Element | null) {
7266
React.useEffect(() => {
7367
if (!el) return;
7468

75-
const disposal = createDisposalBin();
69+
const events = new EventsController(el)
70+
.add('focusin', () => setIsFocusIn(true))
71+
.add('focusout', () => setIsFocusIn(false));
7672

77-
disposal.add(
78-
listenEvent(el, 'focusin', () => setIsFocusIn(true)),
79-
listenEvent(el, 'focusout', () => setIsFocusIn(false)),
80-
);
81-
82-
return () => disposal.empty();
73+
return () => events.abort();
8374
}, [el]);
8475

8576
return isFocusIn;
@@ -122,6 +113,7 @@ export function useColorSchemePreference() {
122113
}
123114

124115
onChange();
116+
125117
return listenEvent(media, 'change', onChange);
126118
}, []);
127119

‎packages/react/src/hooks/use-slider-preview.ts‎

Lines changed: 23 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
import { effect, signal } from 'maverick.js';
4-
import { listenEvent } from 'maverick.js/std';
4+
import { EventsController, listenEvent } from 'maverick.js/std';
55
import { updateSliderPreviewPlacement, type SliderOrientation } from 'vidstack';
66

77
/**
@@ -29,43 +29,32 @@ export function useSliderPreview({
2929

3030
return effect(() => {
3131
if (!dragging()) {
32-
listenEvent(rootRef, 'pointerenter', () => {
33-
setIsVisible(true);
34-
previewRef?.setAttribute('data-visible', '');
35-
});
36-
37-
listenEvent(rootRef, 'pointerdown', (event) => {
38-
dragging.set(true);
39-
updatePointerValue(event);
40-
});
41-
42-
listenEvent(rootRef, 'pointerleave', () => {
43-
setIsVisible(false);
44-
previewRef?.removeAttribute('data-visible');
45-
});
46-
47-
listenEvent(rootRef, 'pointermove', (event) => {
48-
updatePointerValue(event);
49-
});
50-
51-
return;
32+
new EventsController(rootRef)
33+
.add('pointerenter', () => {
34+
setIsVisible(true);
35+
previewRef?.setAttribute('data-visible', '');
36+
})
37+
.add('pointerdown', (event) => {
38+
dragging.set(true);
39+
updatePointerValue(event);
40+
})
41+
.add('pointerleave', () => {
42+
setIsVisible(false);
43+
previewRef?.removeAttribute('data-visible');
44+
})
45+
.add('pointermove', updatePointerValue);
5246
}
5347

5448
previewRef?.setAttribute('data-dragging', '');
5549

56-
listenEvent(document, 'pointerup', (event) => {
57-
dragging.set(false);
58-
previewRef?.removeAttribute('data-dragging');
59-
updatePointerValue(event);
60-
});
61-
62-
listenEvent(document, 'pointermove', (event) => {
63-
updatePointerValue(event);
64-
});
65-
66-
listenEvent(document, 'touchmove', (e) => e.preventDefault(), {
67-
passive: false,
68-
});
50+
new EventsController(document)
51+
.add('pointerup', (event) => {
52+
dragging.set(false);
53+
previewRef?.removeAttribute('data-dragging');
54+
updatePointerValue(event);
55+
})
56+
.add('pointermove', updatePointerValue)
57+
.add('touchmove', (e) => e.preventDefault(), { passive: false });
6958
});
7059
}, [rootRef]);
7160

‎packages/react/src/hooks/use-text-cues.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22

3-
import { createDisposalBin, listenEvent } from 'maverick.js/std';
3+
import { EventsController } from 'maverick.js/std';
44
import type { VTTCue } from 'media-captions';
55
import type { TextTrack } from 'vidstack';
66

@@ -13,21 +13,19 @@ export function useTextCues(track: TextTrack | null): VTTCue[] {
1313
React.useEffect(() => {
1414
if (!track) return;
1515

16-
function onCuesChange(track: TextTrack) {
17-
setCues([...track.cues]);
16+
function onCuesChange() {
17+
if (track) setCues([...track.cues]);
1818
}
1919

20-
const disposal = createDisposalBin();
21-
disposal.add(
22-
listenEvent(track, 'add-cue', () => onCuesChange(track)),
23-
listenEvent(track, 'remove-cue', () => onCuesChange(track)),
24-
);
20+
const events = new EventsController(track)
21+
.add('add-cue', onCuesChange)
22+
.add('remove-cue', onCuesChange);
2523

26-
onCuesChange(track);
24+
onCuesChange();
2725

2826
return () => {
29-
disposal.empty();
3027
setCues([]);
28+
events.abort();
3129
};
3230
}, [track]);
3331

‎packages/vidstack/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
"unplugin": "^1.10.1"
4444
},
4545
"devDependencies": {
46-
"@maverick-js/cli": "0.42.0",
46+
"@maverick-js/cli": "0.43.1",
4747
"@open-wc/semantic-dom-diff": "^0.20.0",
4848
"@open-wc/testing-helpers": "^3.0.0",
4949
"@types/fs-extra": "^11.0.1",
@@ -60,7 +60,7 @@
6060
"jsdom": "^21.0.0",
6161
"just-debounce-it": "^3.2.0",
6262
"just-throttle": "^4.2.0",
63-
"maverick.js": "0.42.0",
63+
"maverick.js": "0.43.1",
6464
"media-icons": "^1.1.4",
6565
"postcss": "^8.4.0",
6666
"rimraf": "^3.0.0",

‎packages/vidstack/src/components/ui/buttons/toggle-button-controller.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,11 @@ export class ToggleButtonController extends ViewController<ToggleButtonControlle
5050
}
5151

5252
protected override onConnect(el: HTMLElement) {
53-
onPress(el, this.#onMaybePress.bind(this));
53+
const events = onPress(el, this.#onMaybePress.bind(this));
5454

5555
// Prevent these events too when toggle is disabled.
5656
for (const type of ['click', 'touchstart'] as const) {
57-
this.listen(type, this.#onInteraction.bind(this), {
57+
events.add(type, this.#onInteraction.bind(this), {
5858
passive: true,
5959
});
6060
}

‎packages/vidstack/src/components/ui/captions/captions-renderer.ts‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createDisposalBin, listenEvent } from 'maverick.js/std';
1+
import { EventsController } from 'maverick.js/std';
22
import type { CaptionsRenderer } from 'media-captions';
33

44
import type { TextRenderer } from '../../../core/tracks/text/render/text-renderer';
@@ -8,8 +8,8 @@ export class CaptionsTextRenderer implements TextRenderer {
88
readonly priority = 10;
99

1010
#track: TextTrack | null = null;
11-
#disposal = createDisposalBin();
1211
#renderer: CaptionsRenderer;
12+
#events?: EventsController<TextTrack>;
1313

1414
constructor(renderer: CaptionsRenderer) {
1515
this.#renderer = renderer;
@@ -24,33 +24,32 @@ export class CaptionsTextRenderer implements TextRenderer {
2424
}
2525

2626
detach(): void {
27-
this.#disposal.empty();
27+
this.#events?.abort();
28+
this.#events = undefined;
2829
this.#renderer.reset();
2930
this.#track = null;
3031
}
3132

3233
changeTrack(track: TextTrack | null): void {
3334
if (!track || this.#track === track) return;
3435

35-
this.#disposal.empty();
36+
this.#events?.abort();
37+
this.#events = new EventsController(track);
3638

3739
if (track.readyState < 2) {
3840
this.#renderer.reset();
39-
this.#disposal.add(
40-
listenEvent(track, 'load', () => this.#changeTrack(track), { once: true }),
41-
);
41+
this.#events.add('load', () => this.#changeTrack(track), { once: true });
4242
} else {
4343
this.#changeTrack(track);
4444
}
4545

46-
this.#disposal.add(
47-
listenEvent(track, 'add-cue', (event) => {
46+
this.#events
47+
.add('add-cue', (event) => {
4848
this.#renderer.addCue(event.detail);
49-
}),
50-
listenEvent(track, 'remove-cue', (event) => {
49+
})
50+
.add('remove-cue', (event) => {
5151
this.#renderer.removeCue(event.detail);
52-
}),
53-
);
52+
});
5453

5554
this.#track = track;
5655
}

‎packages/vidstack/src/components/ui/menu/menu-focus-controller.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { onDispose } from 'maverick.js';
2-
import { listenEvent, wasEnterKeyPressed } from 'maverick.js/std';
2+
import { EventsController, listenEvent, wasEnterKeyPressed } from 'maverick.js/std';
33

44
import { isElementParent, isHTMLElement } from '../../../utils/dom';
55
import { scrollIntoCenter } from '../../../utils/scroll';
@@ -59,8 +59,9 @@ export class MenuFocusController {
5959

6060
this.update();
6161

62-
listenEvent(this.#el, 'keyup', this.#onKeyUp.bind(this));
63-
listenEvent(this.#el, 'keydown', this.#onKeyDown.bind(this));
62+
new EventsController(this.#el)
63+
.add('keyup', this.#onKeyUp.bind(this))
64+
.add('keydown', this.#onKeyDown.bind(this));
6465

6566
onDispose(() => {
6667
this.#index = -1;

0 commit comments

Comments
 (0)