fix(player): keyboard display should not show empty icons

vidstack · Jun 7, 2024 · 008141d · 008141d
1 parent 4b0e109
commit 008141d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/packages/react/src/components/layouts/default/icons.tsx b/packages/react/src/components/layouts/default/icons.tsx
@@ -221,5 +221,5 @@ export interface DefaultLayoutIcons {
   SeekButton: DefaultSeekButtonIcons;
   DownloadButton?: DefaultDownloadButtonIcons;
   Menu: DefaultMenuIcons;
-  KeyboardDisplay?: DefaultKeyboardDisplayIcons;
+  KeyboardDisplay?: Partial<DefaultKeyboardDisplayIcons>;
 }
diff --git a/packages/react/src/components/layouts/default/ui/keyboard-display.tsx b/packages/react/src/components/layouts/default/ui/keyboard-display.tsx
@@ -12,7 +12,7 @@ import type { DefaultKeyboardDisplayIcons } from '../icons';
 
 export interface DefaultKeyboardDisplayProps
   extends Omit<PrimitivePropsWithRef<'div'>, 'disabled'> {
-  icons: DefaultKeyboardDisplayIcons;
+  icons: Partial<DefaultKeyboardDisplayIcons>;
 }
 
 const DefaultKeyboardDisplay = React.forwardRef<HTMLElement, DefaultKeyboardDisplayProps>(
@@ -54,7 +54,7 @@ const DefaultKeyboardDisplay = React.forwardRef<HTMLElement, DefaultKeyboardDisp
       };
     }, [$lastKeyboardAction]);
 
-    return (
+    return Icon ? (
       <Primitive.div
         {...props}
         className={className}
@@ -65,14 +65,12 @@ const DefaultKeyboardDisplay = React.forwardRef<HTMLElement, DefaultKeyboardDisp
           <div className="vds-kb-text">{$text}</div>
         </div>
         <div className="vds-kb-bezel" key={count}>
-          {Icon ? (
-            <div className="vds-kb-icon">
-              <Icon />
-            </div>
-          ) : null}
+          <div className="vds-kb-icon">
+            <Icon />
+          </div>
         </div>
       </Primitive.div>
-    );
+    ) : null;
   },
 );
 
@@ -98,7 +96,7 @@ function getVolumeText(volume: number, gain: number) {
   return `${Math.round(volume * gain * 100)}%`;
 }
 
-function getIcon(Icons: DefaultKeyboardDisplayIcons) {
+function getIcon(Icons: Partial<DefaultKeyboardDisplayIcons>) {
   const { $state } = useContext(mediaContext),
     action = $state.lastKeyboardAction()?.action;
   switch (action) {

diff --git a/packages/react/src/providers/remotion/ui/context.tsx b/packages/react/src/providers/remotion/ui/context.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { noop } from 'maverick.js/std';
 import {
   Internals,
   type CompositionManagerContext,
@@ -59,6 +60,7 @@ export function RemotionContextProvider({
       unregisterFolder: () => undefined,
       registerComposition: () => undefined,
       unregisterComposition: () => undefined,
+      updateCompositionDefaultProps: noop,
       currentCompositionMetadata: null,
       setCurrentCompositionMetadata: () => undefined,
       canvasContent: { type: 'composition', compositionId: REMOTION_PROVIDER_ID },

diff --git a/packages/vidstack/styles/player/default/keyboard.css b/packages/vidstack/styles/player/default/keyboard.css
@@ -80,6 +80,10 @@
   pointer-events: none;
 }
 
+.vds-kb-bezel:not(:has(svg)) {
+  display: none !important;
+}
+
 .light .vds-kb-bezel {
   --default-bg: rgb(255 255 255 / 0.6);
 }