zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-15 18:34:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile controls issues (#896)

Browse Source
This commit is contained in:
Wesley Luyten
2026-03-11 16:52:04 -05:00
committed by GitHub
parent 0de0c28123
commit b892cfc261
10 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/dom/store/features/controls.ts
+7 -4
View File
@@ -62,9 +62,10 @@ export const controlsFeature = definePlayerFeature({
function onPointerUp(event: PointerEvent) {
if (event.pointerType === 'touch' && Date.now() - pointerDownTime < TAP_THRESHOLD) {
if (get().controlsVisible) {
clearIdle();
set({ userActive: false, controlsVisible: computeVisible(false) });
// If the event target is in the controls don't set inactive because that sets pointer-events: none in CSS.
const isMediaOrContainer = [media, container].includes(event.target as HTMLElement);
if (get().controlsVisible && isMediaOrContainer) {
setInactive();
} else {
setActive();
}
@@ -90,7 +91,9 @@ export const controlsFeature = definePlayerFeature({
listen(container, 'pointerup', onPointerUp, { signal });
listen(container, 'keyup', setActive, { signal });
listen(container, 'focusin', setActive, { signal });
listen(container, 'pointerleave', setInactive, { signal });
// On touch devices pointerleave would fire after a pointerup event which hides the controls.
// https://w3c.github.io/pointerevents/#dfn-pointerup
listen(container, 'mouseleave', setInactive, { signal });
// Media event listeners for playback state changes.
listen(media, 'play', onPlaybackChange, { signal });
packages/core/src/dom/store/features/tests/controls.test.ts
+4 -4
View File
@@ -123,22 +123,22 @@ describe('controlsFeature', () => {
expect(store.state.userActive).toBe(true);
});
it('sets inactive immediately on pointerleave', () => {
it('sets inactive immediately on mouseleave', () => {
const video = createMockVideo({ paused: false });
const { store, container } = createPlayerStore(video);
container!.dispatchEvent(new Event('pointerleave'));
container!.dispatchEvent(new Event('mouseleave'));
flush();
expect(store.state.userActive).toBe(false);
expect(store.state.controlsVisible).toBe(false);
});
it('keeps controlsVisible true on pointerleave when paused', () => {
it('keeps controlsVisible true on mouseleave when paused', () => {
const video = createMockVideo({ paused: true });
const { store, container } = createPlayerStore(video);
container!.dispatchEvent(new Event('pointerleave'));
container!.dispatchEvent(new Event('mouseleave'));
flush();
expect(store.state.userActive).toBe(false);
packages/sandbox/templates/html-hls-video/main.ts
+1 -1
View File
@@ -23,7 +23,7 @@ function render() {
document.getElementById('root')!.innerHTML = html`
<video-player>
<${tag} class="w-full aspect-video max-w-4xl mx-auto">
<hls-video slot="media" src="${SOURCES[currentSource].url}"></hls-video>
<hls-video slot="media" src="${SOURCES[currentSource].url}" playsinline></hls-video>
</${tag}>
</video-player>
`;
packages/sandbox/templates/html-simple-hls-video/main.ts
+1 -1
View File
@@ -23,7 +23,7 @@ function render() {
document.getElementById('root')!.innerHTML = html`
<video-player>
<${tag} class="w-full aspect-video max-w-4xl mx-auto">
<simple-hls-video slot="media" src="${SOURCES[currentSource].url}"></simple-hls-video>
<simple-hls-video slot="media" src="${SOURCES[currentSource].url}" playsinline></simple-hls-video>
</${tag}>
</video-player>
`;
packages/sandbox/templates/html-video-tailwind/main.ts
+1 -1
View File
@@ -22,7 +22,7 @@ function render() {
document.getElementById('root')!.innerHTML = html`
<video-player>
<${tag} class="w-full aspect-video max-w-4xl mx-auto">
<video slot="media" src="${SOURCES[currentSource].url}"></video>
<video slot="media" src="${SOURCES[currentSource].url}" playsinline></video>
</${tag}>
</video-player>
`;
packages/sandbox/templates/html-video/main.ts
+1 -1
View File
@@ -22,7 +22,7 @@ function render() {
document.getElementById('root')!.innerHTML = html`
<video-player>
<${tag} class="w-full aspect-video max-w-4xl mx-auto">
<video slot="media" src="${SOURCES[currentSource].url}"></video>
<video slot="media" src="${SOURCES[currentSource].url}" playsinline></video>
</${tag}>
</video-player>
`;
packages/sandbox/templates/react-hls-video/main.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ function App() {
return (
<VideoProvider>
<VideoSkinComponent skin={skin} styling="css" className="w-full aspect-video max-w-4xl mx-auto">
<HlsVideo src={SOURCES[source].url} />
<HlsVideo src={SOURCES[source].url} playsInline />
</VideoSkinComponent>
</VideoProvider>
);
packages/sandbox/templates/react-simple-hls-video/main.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ function App() {
return (
<VideoProvider>
<VideoSkinComponent skin={skin} styling="css" className="w-full aspect-video max-w-4xl mx-auto">
<SimpleHlsVideo src={SOURCES[source].url} />
<SimpleHlsVideo src={SOURCES[source].url} playsInline />
</VideoSkinComponent>
</VideoProvider>
);
packages/sandbox/templates/react-video-tailwind/main.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ function App() {
return (
<VideoProvider>
<VideoSkinComponent skin={skin} styling="tailwind" className="w-full aspect-video max-w-4xl mx-auto">
<Video src={SOURCES[source].url} />
<Video src={SOURCES[source].url} playsInline />
</VideoSkinComponent>
</VideoProvider>
);
packages/sandbox/templates/react-video/main.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ function App() {
return (
<VideoProvider>
<VideoSkinComponent skin={skin} styling="css" className="w-full aspect-video max-w-4xl mx-auto">
<Video src={SOURCES[source].url} />
<Video src={SOURCES[source].url} playsInline />
</VideoSkinComponent>
</VideoProvider>
);