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

mihar-22 · mihar-22 · commit 008141ded376 · 2024-06-08T01:26:14.000+10:00
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);
 }

Original file line number	Diff line number	Diff line change
`@@ -221,5 +221,5 @@ export interface DefaultLayoutIcons {`
`221`	`221`	`SeekButton: DefaultSeekButtonIcons;`
`222`	`222`	`DownloadButton?: DefaultDownloadButtonIcons;`
`223`	`223`	`Menu: DefaultMenuIcons;`
`224`		`- KeyboardDisplay?: DefaultKeyboardDisplayIcons;`
	`224`	`+ KeyboardDisplay?: Partial<DefaultKeyboardDisplayIcons>;`
`225`	`225`	`}`
Original file line number	Diff line number	Diff line change
`@@ -80,6 +80,10 @@`
`80`	`80`	`pointer-events: none;`
`81`	`81`	`}`
`82`	`82`
	`83`	`+.vds-kb-bezel:not(:has(svg)) {`
	`84`	`+ display: none !important;`
	`85`	`+}`
	`86`	`+`
`83`	`87`	`.light .vds-kb-bezel {`
`84`	`88`	`--default-bg: rgb(255 255 255 / 0.6);`
`85`	`89`	`}`