From 75db1993154a6ae9fd524505c9e6b498dae11b89 Mon Sep 17 00:00:00 2001
From: Alexander Lopatin <alopatindev@codonaft.com>
Date: Fri, 1 Nov 2024 06:14:26 +0800
Subject: [PATCH] Update hotkey hints

---
 .../src/components/layouts/default/translations.ts         | 2 +-
 .../define/layouts/default/ui/menu/playback-menu.ts        | 2 +-
 .../src/elements/define/sliders/slider-value-element.ts    | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/vidstack/src/components/layouts/default/translations.ts b/packages/vidstack/src/components/layouts/default/translations.ts
index be0132e1c..36d607973 100644
--- 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
index ccb981e97..0d458b9f9 100644
--- 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
index 6caff810c..5a47f17d4 100644
--- 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;
     });
   }
 }