fix(player/react): speed normal label not using translations

closes #1021
vidstack · Nov 30, 2023 · 1b72abc · 1b72abc
1 parent 42d0730
commit 1b72abc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/react/src/components/layouts/default/shared-layout.tsx b/packages/react/src/components/layouts/default/shared-layout.tsx
@@ -722,7 +722,9 @@ function DefaultSpeedSubmenu() {
   const { Icons } = React.useContext(DefaultLayoutContext),
     label = useDefaultLayoutLang('Speed'),
     normalText = useDefaultLayoutLang('Normal'),
-    options = usePlaybackRateOptions(),
+    options = usePlaybackRateOptions({
+      normalLabel: normalText,
+    }),
     hint = options.selectedValue === '1' ? normalText : options.selectedValue + 'x';
   return (
     <MenuBase.Root className="vds-speed-menu vds-menu">

diff --git a/packages/react/src/hooks/options/use-playback-rate-options.ts b/packages/react/src/hooks/options/use-playback-rate-options.ts
@@ -3,13 +3,14 @@ import * as React from 'react';
 import { useReactContext, useSignal } from 'maverick.js/react';
 import { mediaContext } from 'vidstack';
 
-const DEFAULT_RATES = [0.25, 0.5, 0.75, { label: 'Normal', rate: 1 }, 1.25, 1.5, 1.75, 2];
+const DEFAULT_RATES = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
 
 /**
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-playback-rate-options}
  */
 export function usePlaybackRateOptions({
   rates = DEFAULT_RATES,
+  normalLabel = 'Normal',
 }: UsePlaybackRateOptions = {}): PlaybackRateOptions {
   const media = useReactContext(mediaContext)!,
     { playbackRate, canSetPlaybackRate } = media.$state;
@@ -19,7 +20,12 @@ export function usePlaybackRateOptions({
 
   return React.useMemo(() => {
     const options = rates.map<PlaybackRateOption>((opt) => {
-      const label = typeof opt === 'number' ? opt + 'x' : opt.label,
+      const label =
+          typeof opt === 'number'
+            ? opt === 1 && normalLabel
+              ? normalLabel
+              : opt + 'x'
+            : opt.label,
         rate = typeof opt === 'number' ? opt : opt.rate;
       return {
         label,
@@ -52,6 +58,7 @@ export function usePlaybackRateOptions({
 
 export interface UsePlaybackRateOptions {
   rates?: (number | { label: string; rate: number })[];
+  normalLabel?: string | null;
 }
 
 export type PlaybackRateOptions = PlaybackRateOption[] & {