fix(player): add separate key up and down callbacks to shortcuts

vidstack · Feb 15, 2024 · b643602 · b643602
1 parent cfe2331
commit b643602
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/packages/vidstack/src/core/keyboard/controller.ts b/packages/vidstack/src/core/keyboard/controller.ts
@@ -74,7 +74,14 @@ export class MediaKeyboardController extends MediaPlayerController {
     let { method, value } = this._getMatchingMethod(event);
 
     if (!isString(value) && !isArray(value)) {
-      value?.callback(event, this._media.remote);
+      value?.onKeyUp?.({
+        event,
+        player: this._media.player,
+        remote: this._media.remote,
+      });
+
+      value?.callback?.(event, this._media.remote);
+
       return;
     }
 
@@ -118,7 +125,14 @@ export class MediaKeyboardController extends MediaPlayerController {
       isNumberPress = !event.metaKey && /^[0-9]$/.test(event.key);
 
     if (!isString(value) && !isArray(value) && !isNumberPress) {
-      value?.callback(event, this._media.remote);
+      value?.onKeyDown?.({
+        event,
+        player: this._media.player,
+        remote: this._media.remote,
+      });
+
+      value?.callback?.(event, this._media.remote);
+
       return;
     }
 

diff --git a/packages/vidstack/src/core/keyboard/types.ts b/packages/vidstack/src/core/keyboard/types.ts
@@ -1,3 +1,4 @@
+import type { MediaPlayer } from '../../components/player';
 import type { MediaRemoteControl } from '../state/remote-control';
 
 export type MediaKeyTarget = 'document' | 'player';
@@ -21,5 +22,19 @@ export type MediaKeyShortcut = MediaKeysCallback | string | string[] | null;
 
 export interface MediaKeysCallback {
   keys: string | string[];
-  callback(event: KeyboardEvent, remote: MediaRemoteControl): void;
+
+  /** @deprecated - use `onKeyUp` or `onKeyDown` */
+  callback?(event: KeyboardEvent, remote: MediaRemoteControl): void;
+
+  onKeyUp?(context: {
+    event: KeyboardEvent;
+    player: MediaPlayer;
+    remote: MediaRemoteControl;
+  }): void;
+
+  onKeyDown?(context: {
+    event: KeyboardEvent;
+    player: MediaPlayer;
+    remote: MediaRemoteControl;
+  }): void;
 }