fix(player): manage focus when default audio layout transitions

vidstack · Jan 25, 2024 · 87340eb · 87340eb
1 parent 1d32867
commit 87340eb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/react/src/components/layouts/default/audio-layout.tsx b/packages/react/src/components/layouts/default/audio-layout.tsx
@@ -190,6 +190,12 @@ function DefaultAudioTitle() {
     $chapterTitle = $isContinued ? chapterTitle : '',
     isTransitionActive = useTransitionActive(rootEl);
 
+  React.useEffect(() => {
+    if (isTransitionActive && document.activeElement === document.body) {
+      media.player.el?.focus();
+    }
+  }, []);
+
   const onResize = React.useCallback(() => {
     const el = rootEl,
       isOverflowing = !!el && !isTransitionActive && el.clientWidth < el.children[0]!.clientWidth;

diff --git a/packages/vidstack/src/core/keyboard/controller.ts b/packages/vidstack/src/core/keyboard/controller.ts
@@ -22,7 +22,8 @@ export const MEDIA_KEY_SHORTCUTS: MediaKeyShortcuts = {
 
 const MODIFIER_KEYS = new Set(['Shift', 'Alt', 'Meta', 'Control']),
   BUTTON_SELECTORS = 'button, [role="button"]',
-  IGNORE_SELECTORS = 'input, textarea, select, [contenteditable], [role^="menuitem"]';
+  IGNORE_SELECTORS =
+    'input, textarea, select, [contenteditable], [role^="menuitem"], [role="timer"]';
 
 export class MediaKeyboardController extends MediaPlayerController {
   constructor(private _media: MediaContext) {

diff --git a/packages/vidstack/src/elements/define/layouts/default/audio-layout.ts b/packages/vidstack/src/elements/define/layouts/default/audio-layout.ts
@@ -3,7 +3,6 @@ import { ref } from 'lit-html/directives/ref.js';
 import { effect, signal } from 'maverick.js';
 import { toggleClass } from 'maverick.js/std';
 
-import { watchCueTextChange } from '../../../..';
 import { useDefaultLayoutContext } from '../../../../components/layouts/default/context';
 import { i18n } from '../../../../components/layouts/default/translations';
 import { useMediaContext, useMediaState } from '../../../../core/api/media-context';
@@ -67,6 +66,12 @@ function DefaultAudioTitle() {
       return `${i18n(translations, word)}: ${title()}`;
     };
 
+    effect(() => {
+      if ($isTransitionActive() && document.activeElement === document.body) {
+        media.player.el?.focus();
+      }
+    });
+
     function onResize() {
       const el = $ref(),
         isOverflowing =