Touch Zones
TouchZonesPlugin renders a transparent tap-zone overlay that intercepts touch events before they reach the video element.
Register it when you expect touch or hybrid pointer/touch input, typically on mobile browsers or touch-screen deployments.
It gives you double-tap to seek on the left and right edges, single-tap to toggle controls visibility, and centre double-tap to toggle fullscreen.
Plugin id
'touch-zones'
Import
import { TouchZonesPlugin } from '@nomercy-entertainment/nomercy-video-player/plugins';
import type { TouchZonesOptions } from '@nomercy-entertainment/nomercy-video-player/plugins';
What it does
The plugin mounts a 3-column x 6-row CSS grid overlay at z-index: 10, above the video element but below the DesktopUi controls overlay at z-index: 20.
Touch and click events on the zones are intercepted before they reach the video, but control buttons on the desktop-ui layer remain clickable above.
Layout
| Column | Content |
|---|---|
| Left third | Seek backward zone |
| Centre | Play/pause and fullscreen zone |
| Right third | Seek forward zone |
On mobile (detected via ontouchstart or navigator.maxTouchPoints), two extra zones appear in the centre column: rows 1-2 for volume up and rows 5-6 for volume down.
The play/pause zone compresses to rows 3-5 on mobile.
Tap behaviour
| Zone | Single tap | Double tap |
|---|---|---|
| Left | Hide controls (only if visible) | Seek backward seekSeconds |
| Right | Hide controls (only if visible) | Seek forward seekSeconds |
| Centre (desktop) | Toggle play/pause | Toggle fullscreen |
| Centre (mobile) | Toggle play/pause if controls shown | Toggle fullscreen |
| Volume up (mobile) | Hide controls (only if visible) | Volume up |
| Volume down (mobile) | Hide controls (only if visible) | Volume down |
Single-tap on the left and right zones only hides controls; it never shows them. When controls are hidden the container’s own touchstart event wakes them, not a zone tap. On desktop (non-touch), the centre single-tap always toggles play/pause regardless of controls visibility.
Seek feedback indicator
Each seek zone shows a floating circular indicator on double-tap containing a chevron icon and a cumulative label (for example +30s after three rapid taps).
The indicator collapses around one second after the last tap in a burst.
Rapid successive taps update the same element rather than stacking new ones.
CSS transitions on opacity and transform drive the show/hide animation with no JavaScript animation frames.
Options
| Option | Type | Default | Description |
|---|---|---|---|
doubleTapThreshold | number | 300 | Maximum milliseconds between taps for double-tap detection. |
doubleClickDelay | number | undefined | Deprecated. Use doubleTapThreshold. When both are set, doubleClickDelay takes precedence for backwards compatibility. |
seekSeconds | number | 10 | Seconds to seek on a double-tap. |
disableClickToPause | boolean | false | When true, single-tap on the centre zone never toggles playback. Mirror this on DesktopUiPlugin if you also use that plugin. |
Registration
import nmplayer from '@nomercy-entertainment/nomercy-video-player';
import {
DesktopUiPlugin,
TouchZonesPlugin,
} from '@nomercy-entertainment/nomercy-video-player/plugins';
const player = nmplayer('player')
.addPlugin(DesktopUiPlugin)
.addPlugin(TouchZonesPlugin, { seekSeconds: 10 })
.setup({
baseUrl: 'https://raw.githubusercontent.com/NoMercy-Entertainment/nomercy-media/master/Films',
playlist: [
{
title: 'Sintel',
url: '/Sintel.(2010)/Sintel.(2010).NoMercy.m3u8',
},
],
});
Register TouchZonesPlugin after DesktopUiPlugin so the z-index layering is correct.
Integration with DesktopUi
TouchZonesPlugin emits player.emit('activity', { active: false }) to tell DesktopUiPlugin to hide the controls overlay.
You do not need to wire this yourself; the two plugins coordinate via the shared activity event automatically.
This plugin only emits the hide direction (active: false).
The show direction (active: true) is triggered by the container’s own touchstart handler, not by this plugin.
If you use disableClickToPause: true on TouchZonesPlugin, pass the same option to DesktopUiPlugin.
Both plugins register their own click handlers (desktop-ui on the video element, touch-zones on the overlay zones) and each needs the switch independently.