Update hotkey hints

codonaft · Oct 31, 2024 · 75db199 · 75db199
1 parent 10e0838
commit 75db199
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/packages/vidstack/src/components/layouts/default/translations.ts b/packages/vidstack/src/components/layouts/default/translations.ts
@@ -68,7 +68,7 @@ export function i18n(
   hotkey?: string,
 ) {
   const { smallWhen } = useDefaultLayoutContext();
-  const hint = hotkey && !smallWhen() ? `(⌨️${hotkey}) ` : '';
+  const hint = hotkey && !smallWhen() ? `(${hotkey}) ` : '';
   //return hint + (translations()?.[word] ?? word);
   return hint + word;
 }
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/sliders/slider-value-element.ts b/packages/vidstack/src/elements/define/sliders/slider-value-element.ts
@@ -1,6 +1,7 @@
 import { effect } from 'maverick.js';
 import { BOOLEAN, Host, type Attributes } from 'maverick.js/element';
 
+import { useDefaultLayoutContext } from '../../../components/layouts/default/context';
 import { SliderValue, type SliderValueProps } from '../../../components/ui/sliders/slider-value';
 
 /**
@@ -37,7 +38,11 @@ export class MediaSliderValueElement extends Host(HTMLElement, SliderValue) {
 
   protected onConnect() {
     effect(() => {
-      this.textContent = this.getValueText();
+      const { smallWhen } = useDefaultLayoutContext();
+      const text = this.getValueText();
+      const hotkey = text.endsWith('%') ? '⇅' : '⇄';
+      const hint = hotkey && !smallWhen() ? `(${hotkey}) ` : '';
+      this.textContent = hint + text;
     });
   }
 }