Show hotkey hints. Use [] for speed control since it's easier to pr…

…ess, it's compatible with `mpv`, and also due to vidstack#1463
codonaft · Oct 7, 2024 · 98ecbf5 · 98ecbf5
1 parent e83cedc
commit 98ecbf5
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 27 deletions.
diff --git a/packages/vidstack/src/components/aria/announcer.ts b/packages/vidstack/src/components/aria/announcer.ts
@@ -67,12 +67,12 @@ export class MediaAnnouncer extends Component<
 
   #watchFullscreen() {
     const { fullscreen } = this.#media.$state;
-    this.#setLabel(fullscreen() ? 'Enter Fullscreen' : 'Exit Fullscreen');
+    this.#setLabel(fullscreen() ? 'Fullscreen' : 'Exit Fullscreen');
   }
 
   #watchPiP() {
     const { pictureInPicture } = this.#media.$state;
-    this.#setLabel(pictureInPicture() ? 'Enter PiP' : 'Exit PiP');
+    this.#setLabel(pictureInPicture() ? 'Picture-in-Picture' : 'Exit Picture-in-Picture');
   }
 
   #watchCaptions() {
@@ -167,8 +167,8 @@ export type MediaAnnouncerWord =
   | 'Pause'
   | 'Enter Fullscreen'
   | 'Exit Fullscreen'
-  | 'Enter PiP'
-  | 'Exit PiP'
+  | 'Picture-in-Picture'
+  | 'Exit Picture-in-Picture'
   | 'Closed-Captions On'
   | 'Closed-Captions Off'
   | 'Mute'

diff --git a/packages/vidstack/src/components/layouts/default/translations.ts b/packages/vidstack/src/components/layouts/default/translations.ts
@@ -21,10 +21,8 @@ export type DefaultLayoutWord =
   | 'Disconnected'
   | 'Display Background'
   | 'Download'
-  | 'Enter Fullscreen'
-  | 'Enter PiP'
   | 'Exit Fullscreen'
-  | 'Exit PiP'
+  | 'Exit Picture-in-Picture'
   | 'Font'
   | 'Family'
   | 'Fullscreen'
@@ -38,7 +36,7 @@ export type DefaultLayoutWord =
   | 'Pause'
   | 'Play'
   | 'Playback'
-  | 'PiP'
+  | 'Picture-in-Picture'
   | 'Quality'
   | 'Replay'
   | 'Reset'
@@ -65,6 +63,8 @@ export type DefaultLayoutTranslations = {
 export function i18n(
   translations: ReadSignal<Partial<DefaultLayoutTranslations> | null>,
   word: string,
+  hotkey?: string,
 ) {
-  return translations()?.[word] ?? word;
+  const hint = hotkey ? ` (⌨️ ${hotkey})` : '';
+  return (translations()?.[word] ?? word) + hint;
 }
diff --git a/packages/vidstack/src/core/api/player-props.ts b/packages/vidstack/src/core/api/player-props.ts
@@ -208,8 +208,8 @@ export interface MediaPlayerProps
    *  seekForward: ['l', 'L', 'ArrowRight'],
    *  volumeUp: 'ArrowUp',
    *  volumeDown: 'ArrowDown',
-   *  speedUp: '>',
-   *  slowDown: '<',
+   *  speedUp: ']',
+   *  slowDown: '[',
    *  // Callback.
    *  fooBar: {
    *    keys: ['k', 'Space'],

diff --git a/packages/vidstack/src/core/keyboard/controller.ts b/packages/vidstack/src/core/keyboard/controller.ts
@@ -16,8 +16,8 @@ export const MEDIA_KEY_SHORTCUTS: MediaKeyShortcuts = {
   seekForward: 'l L ArrowRight',
   volumeUp: 'ArrowUp',
   volumeDown: 'ArrowDown',
-  speedUp: '>',
-  slowDown: '<',
+  speedUp: ']',
+  slowDown: '[',
 };
 
 const MODIFIER_KEYS = new Set(['Shift', 'Alt', 'Meta', 'Ctrl']),

diff --git a/packages/vidstack/src/elements/define/layouts/default/ui/buttons.ts b/packages/vidstack/src/elements/define/layouts/default/ui/buttons.ts
@@ -59,8 +59,8 @@ export function DefaultGoogleCastButton({ tooltip }: { tooltip: TooltipPlacement
 
 export function DefaultPlayButton({ tooltip }: { tooltip: TooltipPlacement }) {
   const { translations } = useDefaultLayoutContext(),
-    $playText = $i18n(translations, 'Play'),
-    $pauseText = $i18n(translations, 'Pause');
+    $playText = $i18n(translations, 'Play', 'k'),
+    $pauseText = $i18n(translations, 'Pause', 'k');
   return html`
     <media-tooltip class="vds-play-tooltip vds-tooltip">
       <media-tooltip-trigger>
@@ -87,8 +87,8 @@ export function DefaultMuteButton({
   ref?: RefOrCallback;
 }) {
   const { translations } = useDefaultLayoutContext(),
-    $muteText = $i18n(translations, 'Mute'),
-    $unmuteText = $i18n(translations, 'Unmute');
+    $muteText = $i18n(translations, 'Mute', 'm'),
+    $unmuteText = $i18n(translations, 'Unmute', 'm');
   return html`
     <media-tooltip class="vds-mute-tooltip vds-tooltip">
       <media-tooltip-trigger>
@@ -110,8 +110,8 @@ export function DefaultMuteButton({
 
 export function DefaultCaptionButton({ tooltip }: { tooltip: TooltipPlacement }) {
   const { translations } = useDefaultLayoutContext(),
-    $ccOnText = $i18n(translations, 'Closed-Captions On'),
-    $ccOffText = $i18n(translations, 'Closed-Captions Off');
+    $ccOnText = $i18n(translations, 'Closed-Captions On', 'c'),
+    $ccOffText = $i18n(translations, 'Closed-Captions Off', 'c');
   return html`
     <media-tooltip class="vds-caption-tooltip vds-tooltip">
       <media-tooltip-trigger>
@@ -132,14 +132,14 @@ export function DefaultCaptionButton({ tooltip }: { tooltip: TooltipPlacement })
 
 export function DefaultPIPButton() {
   const { translations } = useDefaultLayoutContext(),
-    $enterText = $i18n(translations, 'Enter PiP'),
-    $exitText = $i18n(translations, 'Exit PiP');
+    $enterText = $i18n(translations, 'Picture-in-Picture', 'i'),
+    $exitText = $i18n(translations, 'Exit Picture-in-Picture', 'i');
   return html`
     <media-tooltip class="vds-pip-tooltip vds-tooltip">
       <media-tooltip-trigger>
         <media-pip-button
           class="vds-pip-button vds-button"
-          aria-label=${$i18n(translations, 'PiP')}
+          aria-label=${$i18n(translations, 'Picture-in-Picture')}
         >
           ${IconSlots(['pip-enter', 'pip-exit'])}
         </media-pip-button>
@@ -154,8 +154,8 @@ export function DefaultPIPButton() {
 
 export function DefaultFullscreenButton({ tooltip }: { tooltip: TooltipPlacement }) {
   const { translations } = useDefaultLayoutContext(),
-    $enterText = $i18n(translations, 'Enter Fullscreen'),
-    $exitText = $i18n(translations, 'Exit Fullscreen');
+    $enterText = $i18n(translations, 'Fullscreen', 'f'),
+    $exitText = $i18n(translations, 'Exit Fullscreen', 'f');
   return html`
     <media-tooltip class="vds-fullscreen-tooltip vds-tooltip">
       <media-tooltip-trigger>

diff --git a/packages/vidstack/src/elements/define/layouts/default/ui/menu/playback-menu.ts b/packages/vidstack/src/elements/define/layouts/default/ui/menu/playback-menu.ts
@@ -18,7 +18,7 @@ export function DefaultPlaybackMenu() {
     return html`
       <media-menu class="vds-playback-menu vds-menu">
         ${DefaultMenuButton({
-          label: () => i18n(translations, 'Speed'),
+          label: () => i18n(translations, 'Speed', '[, ]'),
           icon: 'menu-playback',
         })}
         <media-menu-items class="vds-menu-items">

diff --git a/packages/vidstack/src/elements/define/layouts/default/ui/utils.ts b/packages/vidstack/src/elements/define/layouts/default/ui/utils.ts
@@ -5,6 +5,10 @@ import {
 } from '../../../../../components/layouts/default/translations';
 import { $signal } from '../../../../lit/directives/signal';
 
-export function $i18n(translations: DefaultLayoutContext['translations'], word: DefaultLayoutWord) {
-  return $signal(() => i18n(translations, word));
+export function $i18n(
+  translations: DefaultLayoutContext['translations'],
+  word: DefaultLayoutWord,
+  hotkey?: string,
+) {
+  return $signal(() => i18n(translations, word, hotkey));
 }