vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix localization on visualizer form

Browse Source
This commit is contained in:
jeffvli
2025-12-30 05:35:37 -08:00
parent 7d05e4536b
commit 3bf2c585b8
2 changed files with 67 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/i18n/locales/en.json
+15 -14
View File
@@ -1207,16 +1207,16 @@
"showScaleY": "Show Scale Y",
"options": {
"mode": {
"bars": "[0] Bars",
"circle": "[1] Circle",
"wave": "[2] Wave",
"rainbow": "[3] Rainbow",
"rings": "[4] Rings",
"mirror": "[5] Mirror",
"line": "[6] Line",
"particles": "[7] Particles",
"fullOctave": "[8] Full octave / 10 bands",
"outlineBars": "[10] Outline bars"
"0": "[0] Discrete Frequencies",
"1": "[1] 1/24th octave / 240 bands",
"2": "[2] 1/12th octave / 120 bands",
"3": "[3] 1/8th octave / 80 bands",
"4": "[4] 1/6th octave / 60 bands",
"5": "[5] 1/4th octave / 40 bands",
"6": "[6] 1/3rd octave / 30 bands",
"7": "[7] Half octave / 20 bands",
"8": "[8] Full octave / 10 bands",
"10": "[10] Line / Area graph"
},
"colorMode": {
"gradient": "Gradient",
@@ -1237,10 +1237,11 @@
"dualVertical": "Dual-Vertical"
},
"frequencyScale": {
"bark": "Bark",
"linear": "Linear",
"log": "Log",
"mel": "Mel"
"none": "None",
"bark": "Bark Scale",
"linear": "Linear Scale",
"log": "Log Scale",
"mel": "Mel Scale"
},
"weightingFilter": {
"none": "None",
src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx
+52 -101
View File
@@ -1,10 +1,10 @@
import { ConstructorOptions } from 'audiomotion-analyzer';
import butterchurnPresets from 'butterchurn-presets';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styles from './visualizer-settings-form.module.css';
import i18n from '/@/i18n/i18n';
import { useSettingsStoreActions, useVisualizerSettings } from '/@/renderer/store/settings.store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button';
@@ -24,41 +24,50 @@ import { Text } from '/@/shared/components/text/text';
import { Textarea } from '/@/shared/components/textarea/textarea';
import { toast } from '/@/shared/components/toast/toast';
const modeOptions: { label: string; value: ConstructorOptions['mode'] | string }[] = [
{ label: '[0] Bars', value: '0' },
{ label: '[1] Circle', value: '1' },
{ label: '[2] Wave', value: '2' },
{ label: '[3] Rainbow', value: '3' },
{ label: '[4] Rings', value: '4' },
{ label: '[5] Mirror', value: '5' },
{ label: '[6] Line', value: '6' },
{ label: '[7] Particles', value: '7' },
{ label: '[8] Full octave / 10 bands', value: '8' },
{ label: '[10] Outline bars', value: '10' },
const modeOptions: { label: string; value: string }[] = [
{ label: i18n.t('visualizer.options.mode.0') as string, value: '0' },
{ label: i18n.t('visualizer.options.mode.1') as string, value: '1' },
{ label: i18n.t('visualizer.options.mode.2') as string, value: '2' },
{ label: i18n.t('visualizer.options.mode.3') as string, value: '3' },
{ label: i18n.t('visualizer.options.mode.4') as string, value: '4' },
{ label: i18n.t('visualizer.options.mode.5') as string, value: '5' },
{ label: i18n.t('visualizer.options.mode.6') as string, value: '6' },
{ label: i18n.t('visualizer.options.mode.7') as string, value: '7' },
{ label: i18n.t('visualizer.options.mode.8') as string, value: '8' },
{ label: i18n.t('visualizer.options.mode.10') as string, value: '10' },
];
const colorModeOptions: { label: string; value: ConstructorOptions['colorMode'] }[] = [
{ label: 'Gradient', value: 'gradient' },
{ label: 'Bar-Index', value: 'bar-index' },
{ label: 'Bar-Level', value: 'bar-level' },
const colorModeOptions: { label: string; value: string }[] = [
{ label: i18n.t('visualizer.options.colorMode.gradient') as string, value: 'gradient' },
{ label: i18n.t('visualizer.options.colorMode.barIndex') as string, value: 'bar-index' },
{ label: i18n.t('visualizer.options.colorMode.barLevel') as string, value: 'bar-level' },
];
const gradientOptions: { label: string; value: ConstructorOptions['gradient'] }[] = [
{ label: 'Classic', value: 'classic' },
{ label: 'Prism', value: 'prism' },
{ label: 'Rainbow', value: 'rainbow' },
{ label: 'Steelblue', value: 'steelblue' },
{ label: 'Orangered', value: 'orangered' },
const gradientOptions: { label: string; value: string }[] = [
{ label: i18n.t('visualizer.options.gradient.classic') as string, value: 'classic' },
{ label: i18n.t('visualizer.options.gradient.prism') as string, value: 'prism' },
{ label: i18n.t('visualizer.options.gradient.rainbow') as string, value: 'rainbow' },
{ label: i18n.t('visualizer.options.gradient.steelblue') as string, value: 'steelblue' },
{ label: i18n.t('visualizer.options.gradient.orangered') as string, value: 'orangered' },
];
const channelLayoutOptions: { label: string; value: ConstructorOptions['channelLayout'] }[] = [
{ label: 'Single', value: 'single' },
{ label: 'Dual-Combined', value: 'dual-combined' },
{ label: 'Dual-Horizontal', value: 'dual-horizontal' },
{ label: 'Dual-Vertical', value: 'dual-vertical' },
const channelLayoutOptions: { label: string; value: string }[] = [
{ label: i18n.t('visualizer.options.channelLayout.single') as string, value: 'single' },
{
label: i18n.t('visualizer.options.channelLayout.dualCombined') as string,
value: 'dual-combined',
},
{
label: i18n.t('visualizer.options.channelLayout.dualHorizontal') as string,
value: 'dual-horizontal',
},
{
label: i18n.t('visualizer.options.channelLayout.dualVertical') as string,
value: 'dual-vertical',
},
];
const fftSizeOptions: { label: string; value: ConstructorOptions['fftSize'] | string }[] = [
const fftSizeOptions: { label: string; value: string }[] = [
{ label: '1024', value: '1024' },
{ label: '2048', value: '2048' },
{ label: '4096', value: '4096' },
@@ -67,20 +76,20 @@ const fftSizeOptions: { label: string; value: ConstructorOptions['fftSize'] | st
{ label: '32768', value: '32768' },
];
const frequencyScaleOptions: { label: string; value: ConstructorOptions['frequencyScale'] }[] = [
{ label: 'Bark', value: 'bark' },
{ label: 'Linear', value: 'linear' },
{ label: 'Log', value: 'log' },
{ label: 'Mel', value: 'mel' },
const frequencyScaleOptions: { label: string; value: string }[] = [
{ label: i18n.t('visualizer.options.frequencyScale.bark') as string, value: 'bark' },
{ label: i18n.t('visualizer.options.frequencyScale.linear') as string, value: 'linear' },
{ label: i18n.t('visualizer.options.frequencyScale.log') as string, value: 'log' },
{ label: i18n.t('visualizer.options.frequencyScale.mel') as string, value: 'mel' },
];
const weightingFilterOptions = [
{ label: 'None', value: '' },
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
{ label: 'C', value: 'C' },
{ label: 'D', value: 'D' },
{ label: 'Z', value: 'Z' },
{ label: i18n.t('visualizer.options.weightingFilter.none') as string, value: '' },
{ label: i18n.t('visualizer.options.weightingFilter.a') as string, value: 'A' },
{ label: i18n.t('visualizer.options.weightingFilter.b') as string, value: 'B' },
{ label: i18n.t('visualizer.options.weightingFilter.C') as string, value: 'C' },
{ label: i18n.t('visualizer.options.weightingFilter.D') as string, value: 'D' },
{ label: i18n.t('visualizer.options.weightingFilter.z') as string, value: 'Z' },
];
const minFreqOptions = [
@@ -845,34 +854,6 @@ const GeneralSettings = () => {
const isMode18Disabled = visualizer.audiomotionanalyzer.mode > 8;
const isMode10Disabled = visualizer.audiomotionanalyzer.mode !== 10;
const getModeKey = (value: string) => {
const modeMap: Record<string, string> = {
'0': 'bars',
'1': 'circle',
'2': 'wave',
'3': 'rainbow',
'4': 'rings',
'5': 'mirror',
'6': 'line',
'7': 'particles',
'8': 'fullOctave',
'10': 'outlineBars',
};
return modeMap[value] || 'bars';
};
const translatedModeOptions = useMemo(
() =>
modeOptions.map((option) => {
const value = option.value as string;
return {
label: t(`visualizer.options.mode.${getModeKey(value)}`),
value,
};
}),
[t],
);
const getChannelLayoutKey = (value: string) => {
const layoutMap: Record<string, string> = {
'dual-combined': 'dualCombined',
@@ -915,7 +896,7 @@ const GeneralSettings = () => {
<Stack>
<Group grow>
<VisualizerSelect
data={translatedModeOptions}
data={modeOptions}
defaultValue={visualizer.audiomotionanalyzer.mode.toString()}
label={t('visualizer.mode')}
onChange={(e) => updateProperty('mode', Number(e))}
@@ -1375,36 +1356,6 @@ const ColorSettings = () => {
const isGradientLeftDisabled = visualizer.audiomotionanalyzer.channelLayout === 'single';
const isGradientRightDisabled = visualizer.audiomotionanalyzer.channelLayout === 'single';
const getColorModeKey = (value: string) => {
const colorModeMap: Record<string, string> = {
'bar-index': 'barIndex',
'bar-level': 'barLevel',
gradient: 'gradient',
};
return colorModeMap[value] || 'gradient';
};
const translatedColorModeOptions = useMemo(
() =>
colorModeOptions.map((option) => {
const value = option.value || 'gradient';
return {
label: t(`visualizer.options.colorMode.${getColorModeKey(value)}`),
value: value as string,
};
}),
[t],
);
const translatedGradientOptions = useMemo(
() =>
gradientOptions.map((option) => ({
label: t(`visualizer.options.gradient.${option.value}`),
value: option.value as string,
})),
[t],
);
const allGradientOptions = useMemo(
() => [
{
@@ -1416,10 +1367,10 @@ const ColorSettings = () => {
},
{
group: t('visualizer.builtIn'),
items: translatedGradientOptions,
items: gradientOptions,
},
],
[t, translatedGradientOptions, visualizer.audiomotionanalyzer.customGradients],
[t, visualizer.audiomotionanalyzer.customGradients],
);
return (
@@ -1427,7 +1378,7 @@ const ColorSettings = () => {
<Stack>
<Group grow>
<VisualizerSelect
data={translatedColorModeOptions}
data={colorModeOptions}
defaultValue={visualizer.audiomotionanalyzer.colorMode}
label={t('visualizer.colorMode')}
onChange={(e) =>