fix(player/react): rename DefaultKeyboardActionDisplay to `DefaultK…

…eyboardDisplay`
vidstack · Feb 25, 2024 · 9d573f9 · 9d573f9
1 parent 82ec4a3
commit 9d573f9
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 86 deletions.
diff --git a/packages/react/src/components/layouts/default/index.ts b/packages/react/src/components/layouts/default/index.ts
@@ -11,10 +11,10 @@ export * from './icons';
 export * from './context';
 export * from './ui';
 export {
-  DefaultKeyboardActionDisplay,
+  DefaultKeyboardDisplay,
   DefaultKeyboardStatus,
-  type DefaultKeyboardActionDisplayProps,
-  type DefaultKeyboardActionDisplayWords,
-  type DefaultKeyboardActionDisplayTranslations,
+  type DefaultKeyboardDisplayProps,
+  type DefaultKeyboardDisplayWords,
+  type DefaultKeyboardDisplayTranslations,
   type DefaultKeyboardStatusProps,
 } from './keyboard-action-display';
diff --git a/packages/react/src/components/layouts/default/keyboard-action-display.tsx b/packages/react/src/components/layouts/default/keyboard-action-display.tsx
@@ -11,7 +11,7 @@ import { Primitive, type PrimitivePropsWithRef } from '../../primitives/nodes';
 import { i18n, useDefaultLayoutContext } from './context';
 import type { DefaultKeyboardActionIcons } from './icons';
 
-export type DefaultKeyboardActionDisplayWords =
+export type DefaultKeyboardDisplayWords =
   | 'Play'
   | 'Pause'
   | 'Enter Fullscreen'
@@ -25,79 +25,78 @@ export type DefaultKeyboardActionDisplayWords =
   | 'Seek Forward'
   | 'Seek Backward';
 
-export interface DefaultKeyboardActionDisplayTranslations
-  extends Pick<DefaultLayoutTranslations, DefaultKeyboardActionDisplayWords> {}
+export interface DefaultKeyboardDisplayTranslations
+  extends Pick<DefaultLayoutTranslations, DefaultKeyboardDisplayWords> {}
 
-export interface DefaultKeyboardActionDisplayProps
+export interface DefaultKeyboardDisplayProps
   extends Omit<PrimitivePropsWithRef<'div'>, 'disabled'> {
   icons?: DefaultKeyboardActionIcons;
-  translations?: Partial<DefaultKeyboardActionDisplayTranslations> | null;
+  translations?: Partial<DefaultKeyboardDisplayTranslations> | null;
 }
 
-const DefaultKeyboardActionDisplay = React.forwardRef<
-  HTMLElement,
-  DefaultKeyboardActionDisplayProps
->(({ 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;
-  }, [visible, $lastKeyboardAction]);
-
-  const className = React.useMemo(
-    () =>
-      `vds-kb-action${!visible ? ' hidden' : ''}${props.className ? ` ${props.className}` : ''}`,
-    [visible],
-  );
-
-  const $$text = createComputed(getText),
-    $text = useSignal($$text);
-
-  createEffect(() => {
-    const Icon = getIcon(Icons);
-    setIcon(() => Icon);
-  }, [Icons]);
-
-  React.useEffect(() => {
-    setVisible(!!$lastKeyboardAction);
-    const id = setTimeout(() => setVisible(false), 500);
-    return () => {
-      setVisible(false);
-      window.clearTimeout(id);
-    };
-  }, [$lastKeyboardAction]);
-
-  return (
-    <Primitive.div
-      {...props}
-      className={className}
-      data-action={actionDataAttr}
-      ref={forwardRef as any}
-    >
-      <div className="vds-kb-text-wrapper">
-        <div className="vds-kb-text">{$text}</div>
-      </div>
-      <DefaultKeyboardStatus className="vds-kb-bezel" key={count}>
-        {Icon ? (
-          <div className="vds-kb-icon">
-            <Icon />
-          </div>
-        ) : null}
-      </DefaultKeyboardStatus>
-    </Primitive.div>
-  );
-});
-
-DefaultKeyboardActionDisplay.displayName = 'DefaultKeyboardActionDisplay';
-export { DefaultKeyboardActionDisplay };
+const DefaultKeyboardDisplay = React.forwardRef<HTMLElement, DefaultKeyboardDisplayProps>(
+  ({ 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;
+    }, [visible, $lastKeyboardAction]);
+
+    const className = React.useMemo(
+      () =>
+        `vds-kb-action${!visible ? ' hidden' : ''}${props.className ? ` ${props.className}` : ''}`,
+      [visible],
+    );
+
+    const $$text = createComputed(getText),
+      $text = useSignal($$text);
+
+    createEffect(() => {
+      const Icon = getIcon(Icons);
+      setIcon(() => Icon);
+    }, [Icons]);
+
+    React.useEffect(() => {
+      setVisible(!!$lastKeyboardAction);
+      const id = setTimeout(() => setVisible(false), 500);
+      return () => {
+        setVisible(false);
+        window.clearTimeout(id);
+      };
+    }, [$lastKeyboardAction]);
+
+    return (
+      <Primitive.div
+        {...props}
+        className={className}
+        data-action={actionDataAttr}
+        ref={forwardRef as any}
+      >
+        <div className="vds-kb-text-wrapper">
+          <div className="vds-kb-text">{$text}</div>
+        </div>
+        <DefaultKeyboardStatus className="vds-kb-bezel" key={count}>
+          {Icon ? (
+            <div className="vds-kb-icon">
+              <Icon />
+            </div>
+          ) : null}
+        </DefaultKeyboardStatus>
+      </Primitive.div>
+    );
+  },
+);
+
+DefaultKeyboardDisplay.displayName = 'DefaultKeyboardDisplay';
+export { DefaultKeyboardDisplay };
 
 function getText() {
   const { $state } = useContext(mediaContext),
@@ -194,12 +193,12 @@ const DefaultKeyboardStatus = React.forwardRef<HTMLDivElement, DefaultKeyboardSt
 DefaultKeyboardStatus.displayName = 'DefaultKeyboardStatus';
 export { DefaultKeyboardStatus };
 
-function getStatusLabel(translations?: Partial<DefaultKeyboardActionDisplayTranslations>) {
+function getStatusLabel(translations?: Partial<DefaultKeyboardDisplayTranslations>) {
   const text = getStatusText(translations);
   return text ? i18n(translations, text) : null;
 }
 
-function getStatusText(translations?: Partial<DefaultKeyboardActionDisplayTranslations>): any {
+function getStatusText(translations?: Partial<DefaultKeyboardDisplayTranslations>): any {
   const { $state } = useContext(mediaContext),
     action = $state.lastKeyboardAction()?.action;
   switch (action) {

diff --git a/packages/react/src/components/layouts/default/video-layout.tsx b/packages/react/src/components/layouts/default/video-layout.tsx
@@ -9,7 +9,7 @@ import * as Spinner from '../../ui/spinner';
 import { Time } from '../../ui/time';
 import { useLayoutName } from '../utils';
 import { useDefaultLayoutContext } from './context';
-import { DefaultKeyboardActionDisplay, DefaultKeyboardStatus } from './keyboard-action-display';
+import { DefaultKeyboardDisplay, DefaultKeyboardStatus } from './keyboard-action-display';
 import { createDefaultMediaLayout, type DefaultLayoutProps } from './media-layout';
 import {
   DefaultAirPlayButton,
@@ -94,7 +94,7 @@ function DefaultVideoLargeLayout() {
   return (
     <>
       <DefaultVideoGestures />
-      <DefaultVideoKeyboardActionDisplay />
+      <DefaultVideoKeyboardDisplay />
       {slot(slots, 'bufferingIndicator', <DefaultBufferingIndicator />)}
       {slot(slots, 'captions', <DefaultCaptions />)}
       <Controls.Root className="vds-controls">
@@ -154,7 +154,7 @@ function DefaultVideoSmallLayout() {
   return (
     <>
       <DefaultVideoGestures />
-      <DefaultVideoKeyboardActionDisplay />
+      <DefaultVideoKeyboardDisplay />
       {slot(slots, 'bufferingIndicator', <DefaultBufferingIndicator />)}
       {slot(slots, 'captions', <DefaultCaptions />)}
       <Controls.Root className="vds-controls">
@@ -312,19 +312,19 @@ function DefaultVideoLoadLayout() {
 DefaultVideoLoadLayout.displayName = 'DefaultVideoLoadLayout';
 
 /* -------------------------------------------------------------------------------------------------
- * DefaultVideoKeyboardActionDisplay
+ * DefaultVideoKeyboardDisplay
  * -----------------------------------------------------------------------------------------------*/
 
-function DefaultVideoKeyboardActionDisplay() {
+function DefaultVideoKeyboardDisplay() {
   const { noKeyboardAnimations, icons, translations, userPrefersKeyboardAnimations } =
       useDefaultLayoutContext(),
     $userPrefersKeyboardAnimations = useSignal(userPrefersKeyboardAnimations),
     noAnimations = noKeyboardAnimations || !$userPrefersKeyboardAnimations;
   return noAnimations ? (
     <DefaultKeyboardStatus className="vds-sr-only" />
   ) : (
-    <DefaultKeyboardActionDisplay icons={icons.KeyboardAction} translations={translations} />
+    <DefaultKeyboardDisplay icons={icons.KeyboardAction} translations={translations} />
   );
 }
 
-DefaultVideoKeyboardActionDisplay.displayName = 'DefaultVideoKeyboardActionDisplay';
+DefaultVideoKeyboardDisplay.displayName = 'DefaultVideoKeyboardDisplay';
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
@@ -9,7 +9,7 @@ import { useMediaContext } from '../../../../core/api/media-context';
 import { createSlot } from '../../../../utils/dom';
 import { $signal } from '../../../lit/directives/signal';
 
-export function DefaultKeyboardActionDisplay() {
+export function DefaultKeyboardDisplay() {
   return $signal(() => {
     const visible = signal(false),
       media = useMediaContext(),

diff --git a/packages/vidstack/src/elements/define/layouts/default/video-layout.ts b/packages/vidstack/src/elements/define/layouts/default/video-layout.ts
@@ -4,7 +4,7 @@ import { computed } from 'maverick.js';
 import { useDefaultLayoutContext } from '../../../../components/layouts/default/context';
 import { useMediaState } from '../../../../core/api/media-context';
 import { $signal } from '../../../lit/directives/signal';
-import { DefaultKeyboardActionDisplay } from './keyboard-action-display';
+import { DefaultKeyboardDisplay } from './keyboard-action-display';
 import {
   DefaultAirPlayButton,
   DefaultCaptionButton,
@@ -27,7 +27,7 @@ export function DefaultVideoLayoutLarge() {
   return [
     DefaultVideoGestures(),
     DefaultBufferingIndicator(),
-    DefaultKeyboardActionDisplay(),
+    DefaultKeyboardDisplay(),
     DefaultCaptions(),
     html`<div class="vds-scrim"></div>`,
     html`
@@ -88,7 +88,7 @@ export function DefaultVideoLayoutSmall() {
     DefaultVideoGestures(),
     DefaultBufferingIndicator(),
     DefaultCaptions(),
-    DefaultKeyboardActionDisplay(),
+    DefaultKeyboardDisplay(),
     html`<div class="vds-scrim"></div>`,
     html`
       <media-controls class="vds-controls">