Display

Gesture

This component enables actions to be performed on the media based on user gestures.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

The event property seen in the snippets above can be any valid DOM event type (e.g., touchstart, mouseleave, etc.). An event listener is attached to the given event type on the media provider, and when fired, it will trigger the action on the media provider.

In addition, any event can be prefixed with dbl (e.g., dblpointerup) to ensure it’s fired twice in succession (within 200ms) before the gesture action is triggered.

Any gesture can be prevented from triggering by calling event.preventDefault() on the will trigger event like so:

import { Gesture, type GestureProps } from "@vidstack/react";

<Gesture event="pointerup" action="toggle:paused" />
<Gesture event="dblpointerup" action="toggle:fullscreen" />