fix(player): restart keyboard display animations on key press

vidstack · Feb 17, 2024 · 2376735 · 2376735
1 parent 5f5d40a
commit 2376735
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/react/src/components/layouts/default/keyboard-action-display.tsx b/packages/react/src/components/layouts/default/keyboard-action-display.tsx
@@ -37,8 +37,13 @@ const DefaultVideoKeyboardActionDisplay = React.forwardRef<
 >(({ icons: Icons, translations, ...props }, forwardRef) => {
   const [visible, setVisible] = React.useState(false),
     [Icon, setIcon] = React.useState<any>(null),
+    [count, setCount] = React.useState(0),
     $lastKeyboardAction = useMediaState('lastKeyboardAction');
 
+  React.useEffect(() => {
+    setCount((n) => n + 1);
+  }, [$lastKeyboardAction]);
+
   const actionDataAttr = React.useMemo(() => {
     const action = $lastKeyboardAction?.action;
     return action && visible ? camelToKebabCase(action) : null;
@@ -76,13 +81,12 @@ const DefaultVideoKeyboardActionDisplay = React.forwardRef<
       className={className}
       data-action={actionDataAttr}
       ref={forwardRef as any}
-      key={$lastKeyboardAction}
     >
       <div className="vds-kb-text-wrapper">
         <div className="vds-kb-text">{$text}</div>
       </div>
       {Icon ? (
-        <div className="vds-kb-bezel" role="status" aria-label={$statusLabel}>
+        <div className="vds-kb-bezel" role="status" aria-label={$statusLabel} key={count}>
           <div className="vds-kb-icon">
             <Icon />
           </div>

diff --git a/packages/vidstack/src/elements/define/layouts/default/keyboard-action-display.ts b/packages/vidstack/src/elements/define/layouts/default/keyboard-action-display.ts
@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { keyed } from 'lit-html/directives/keyed.js';
 import { computed, effect, signal } from 'maverick.js';
 import { camelToKebabCase } from 'maverick.js/std';
 
@@ -55,7 +56,7 @@ export function DefaultVideoKeyboardActionDisplay() {
         <div class="vds-kb-text-wrapper">
           <div class="vds-kb-text">${$signal($text)}</div>
         </div>
-        ${$signal(Icon)}
+        ${$signal(() => keyed(lastKeyboardAction(), Icon()))}
       </div>
     `;
   });