zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(react): rename MediaGesture and MediaHotkey to Gesture and Hotkey (#1374)

Browse Source
This commit is contained in:
rahim
2026-04-19 23:46:46 -07:00
committed by GitHub
parent 000c54e16a
commit 5e9a02c851
8 changed files with 81 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/design/ui/gesture.md
+9 -9
View File
@@ -34,20 +34,20 @@ The component accepts additional props as needed (e.g. `value` for seek offset,
```tsx
{/* Full surface gestures */}
<MediaGesture type="tap" action="togglePaused" />
<MediaGesture type="swipe" action="seek" axis="x" threshold={30} />
<Gesture type="tap" action="togglePaused" />
<Gesture type="swipe" action="seek" axis="x" threshold={30} />
{/* Regions */}
<MediaGesture type="doubletap" action="seek" value={-10} region="left" />
<MediaGesture type="doubletap" action="toggleFullscreen" region="center" />
<MediaGesture type="doubletap" action="seek" value={10} region="right" />
<Gesture type="doubletap" action="seek" value={-10} region="left" />
<Gesture type="doubletap" action="toggleFullscreen" region="center" />
<Gesture type="doubletap" action="seek" value={10} region="right" />
{/* Pointer filtering */}
<MediaGesture pointer="touch" type="tap" action="toggleControls" />
<MediaGesture pointer="mouse" type="tap" action="togglePaused" />
<Gesture pointer="touch" type="tap" action="toggleControls" />
<Gesture pointer="mouse" type="tap" action="togglePaused" />
{/* Callback region — full control over hit testing */}
<MediaGesture
<Gesture
type="doubletap"
action="seek"
value={-10}
@@ -83,7 +83,7 @@ When omitted, the gesture covers the full container surface. Full-surface gestur
In React, `region` also accepts a callback that receives the gesture state and returns `true` or `false`. This gives full programmatic control over hit testing for custom zones that don't fit the `left` / `center` / `right` model:
```tsx
<MediaGesture
<Gesture
type="swipe"
action="setVolume"
region={(state) => state.x > state.containerWidth / 2}
internal/design/ui/hotkey.md
+5 -5
View File
@@ -71,11 +71,11 @@ Each element declares one binding. To bind multiple keys to the same action, use
#### React
```tsx
<MediaHotkey keys="k" action="togglePaused" />
<MediaHotkey keys="ArrowRight" action="seekStep" value={5} />
<MediaHotkey keys="ArrowLeft" action="seekStep" value={-5} />
<MediaHotkey keys="ArrowUp" action="volumeStep" value={0.05} />
<MediaHotkey keys=">" action="speedUp" />
<Hotkey keys="k" action="togglePaused" />
<Hotkey keys="ArrowRight" action="seekStep" value={5} />
<Hotkey keys="ArrowLeft" action="seekStep" value={-5} />
<Hotkey keys="ArrowUp" action="volumeStep" value={0.05} />
<Hotkey keys=">" action="speedUp" />
```
`keys` (not `key`) avoids collision with React's reserved `key` prop.