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

feat(packages): add hotkey bindings to preset skins (#1264)

Browse Source
This commit is contained in:
rahim
2026-04-07 19:46:44 -07:00
committed by GitHub
parent 2d702ba1dd
commit 9912a8e759
11 changed files with 137 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/html/src/define/audio/skin.ts
+16
View File
@@ -94,6 +94,22 @@ function getTemplateHTML() {
</div>
</media-tooltip-group>
</div>
<!-- Hotkeys -->
<media-hotkey keys="Space" action="togglePaused"></media-hotkey>
<media-hotkey keys="k" action="togglePaused"></media-hotkey>
<media-hotkey keys="m" action="toggleMuted"></media-hotkey>
<media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey>
<media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey>
<media-hotkey keys="l" action="seekStep" value="10"></media-hotkey>
<media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey>
<media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey>
<media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey>
<media-hotkey keys="0-9" action="seekToPercent"></media-hotkey>
<media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey>
<media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey>
<media-hotkey keys="Shift+>" action="speedUp"></media-hotkey>
<media-hotkey keys="Shift+<" action="speedDown"></media-hotkey>
</media-container>
`;
}
packages/html/src/define/audio/ui.ts
+1
View File
@@ -4,6 +4,7 @@
import './player';
import '../ui/error-dialog';
import '../ui/hotkey';
import '../ui/mute-button';
import '../ui/play-button';
import '../ui/playback-rate-button';
packages/html/src/define/video/skin.ts
+19
View File
@@ -130,6 +130,25 @@ function getTemplateHTML() {
</media-controls>
<div class="media-overlay"></div>
<!-- Hotkeys -->
<media-hotkey keys="Space" action="togglePaused"></media-hotkey>
<media-hotkey keys="k" action="togglePaused"></media-hotkey>
<media-hotkey keys="m" action="toggleMuted"></media-hotkey>
<media-hotkey keys="f" action="toggleFullscreen"></media-hotkey>
<media-hotkey keys="c" action="toggleSubtitles"></media-hotkey>
<media-hotkey keys="i" action="togglePiP"></media-hotkey>
<media-hotkey keys="ArrowRight" action="seekStep" value="5"></media-hotkey>
<media-hotkey keys="ArrowLeft" action="seekStep" value="-5"></media-hotkey>
<media-hotkey keys="l" action="seekStep" value="10"></media-hotkey>
<media-hotkey keys="j" action="seekStep" value="-10"></media-hotkey>
<media-hotkey keys="ArrowUp" action="volumeStep" value="0.05"></media-hotkey>
<media-hotkey keys="ArrowDown" action="volumeStep" value="-0.05"></media-hotkey>
<media-hotkey keys="0-9" action="seekToPercent"></media-hotkey>
<media-hotkey keys="Home" action="seekToPercent" value="0"></media-hotkey>
<media-hotkey keys="End" action="seekToPercent" value="100"></media-hotkey>
<media-hotkey keys="Shift+>" action="speedUp"></media-hotkey>
<media-hotkey keys="Shift+<" action="speedDown"></media-hotkey>
</media-container>
`;
}
packages/html/src/define/video/ui.ts
+1
View File
@@ -8,6 +8,7 @@ import '../ui/captions-button';
import '../ui/controls';
import '../ui/error-dialog';
import '../ui/fullscreen-button';
import '../ui/hotkey';
import '../ui/mute-button';
import '../ui/pip-button';
import '../ui/play-button';
packages/html/src/media/container-element.ts
+30
View File
@@ -1,3 +1,5 @@
import { listen } from '@videojs/utils/dom';
import { containerContext, playerContext } from '../player/context';
import { createContainerMixin } from '../store/container-mixin';
import { MediaElement } from '../ui/media-element';
@@ -6,4 +8,32 @@ const ContainerMixin = createContainerMixin({ playerContext, containerContext })
export class MediaContainerElement extends ContainerMixin(MediaElement) {
static readonly tagName = 'media-container';
#disconnect: AbortController | null = null;
override connectedCallback(): void {
super.connectedCallback();
// Make focusable so keyboard events reach hotkey listeners.
if (!this.hasAttribute('tabindex')) {
this.setAttribute('tabindex', '0');
}
this.#disconnect = new AbortController();
listen(this, 'pointerup', this.#onPointerUp, { signal: this.#disconnect.signal });
}
override disconnectedCallback(): void {
super.disconnectedCallback();
this.#disconnect?.abort();
this.#disconnect = null;
}
#onPointerUp = (): void => {
// If nothing inside the container has focus, grab it so keyboard
// events reach the hotkey coordinator's listener.
if (!this.contains(document.activeElement) || document.activeElement === document.body) {
this.focus({ preventScroll: true });
}
};
}
packages/html/src/ui/hotkey/hotkey-element.ts
+5 -1
View File
@@ -24,7 +24,11 @@ export class HotkeyElement extends MediaElement {
target: 'player' | 'document' = 'player';
readonly #player = new PlayerController(this, playerContext);
readonly #container = new ContextConsumer(this, { context: containerContext, subscribe: true });
readonly #container = new ContextConsumer(this, {
context: containerContext,
callback: () => this.requestUpdate(),
subscribe: true,
});
#cleanup: (() => void) | null = null;
override connectedCallback(): void {