Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vuexのstoreの呼び出しをリテラル引数からDot記法へ: components/Talk/AudioInfo.vue #2326

Merged
merged 4 commits into from
Oct 28, 2024
Merged

vuexのstoreの呼び出しをリテラル引数からDot記法へ: components/Talk/AudioInfo.vue #2326

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f29f1f8
fix parameter onChange routine on slider
Segu-g Oct 26, 2024
c64fb4b
replace dispatch to actions notation in AudioInfo.vue
Segu-g Oct 26, 2024
2624572
Merge remote-tracking branch 'upstream/main' into feature/dot-notatio…
Segu-g Oct 26, 2024
a3adcad
コメント追加
Hiroshiba Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 83 additions & 68 deletions src/components/Talk/AudioInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,8 +311,9 @@ import {
Voice,
} from "@/type/preload";
import {
PreviewSliderHelper,
previewSliderHelper,
PreviewSliderHelper,
Props as PreviewSliderHelperProps,
} from "@/helpers/previewSliderHelper";
import { EngineManifest } from "@/openapi";
import { useDefaultPreset } from "@/composables/useDefaultPreset";
Expand Down Expand Up @@ -341,22 +342,25 @@ const supportedFeatures = computed(
.supportedFeatures) as EngineManifest["supportedFeatures"] | undefined,
);

// FIXME: slider.onChangeとhandleParameterChangeでstate変更が２経路になっているので統一する
type Parameter = {
label: string;
slider: PreviewSliderHelper;
action: Parameters<typeof store.dispatch>[0]["type"];
key: keyof Omit<Preset, "name" | "morphingInfo">;
};
const selectedAudioKeys = computed(() =>
store.state.experimentalSetting.enableMultiSelect
? store.getters.SELECTED_AUDIO_KEYS
: [props.activeAudioKey],
);
const parameters = computed<Parameter[]>(() => [

type ParameterKey = keyof Omit<Preset, "name" | "morphingInfo">; // NOTE: パラメーターの種類はPresetのキーと同じ

/** パラメーターを制御するための元情報リスト */
type ParameterConfig = {
label: string;
sliderProps: Omit<PreviewSliderHelperProps, "onChange">;
onChange: PreviewSliderHelperProps["onChange"]; // NOTE: onChangeだけ使い回すので分離している
key: ParameterKey;
};
const parameterConfigs = computed<ParameterConfig[]>(() => [
{
label: "話速",
slider: previewSliderHelper({
sliderProps: {
modelValue: () => query.value?.speedScale ?? null,
disable: () =>
uiLocked.value || supportedFeatures.value?.adjustSpeedScale === false,
Expand All @@ -365,37 +369,35 @@ const parameters = computed<Parameter[]>(() => [
step: SLIDER_PARAMETERS.SPEED.step,
scrollStep: SLIDER_PARAMETERS.SPEED.scrollStep,
scrollMinStep: SLIDER_PARAMETERS.SPEED.scrollMinStep,
onChange: (speedScale: number) =>
store.dispatch("COMMAND_MULTI_SET_AUDIO_SPEED_SCALE", {
audioKeys: selectedAudioKeys.value,
speedScale,
}),
}),
action: "COMMAND_MULTI_SET_AUDIO_SPEED_SCALE",
},
onChange: (speedScale: number) =>
store.actions.COMMAND_MULTI_SET_AUDIO_SPEED_SCALE({
audioKeys: selectedAudioKeys.value,
speedScale,
}),
key: "speedScale",
},
{
label: "音高",
slider: previewSliderHelper({
sliderProps: {
modelValue: () => query.value?.pitchScale ?? null,
disable: () =>
uiLocked.value || supportedFeatures.value?.adjustPitchScale === false,
max: SLIDER_PARAMETERS.PITCH.max,
min: SLIDER_PARAMETERS.PITCH.min,
step: SLIDER_PARAMETERS.PITCH.step,
scrollStep: SLIDER_PARAMETERS.PITCH.scrollStep,
onChange: (pitchScale: number) =>
store.dispatch("COMMAND_MULTI_SET_AUDIO_PITCH_SCALE", {
audioKeys: selectedAudioKeys.value,
pitchScale,
}),
}),
action: "COMMAND_MULTI_SET_AUDIO_PITCH_SCALE",
},
onChange: (pitchScale: number) =>
store.actions.COMMAND_MULTI_SET_AUDIO_PITCH_SCALE({
audioKeys: selectedAudioKeys.value,
pitchScale,
}),
key: "pitchScale",
},
{
label: "抑揚",
slider: previewSliderHelper({
sliderProps: {
modelValue: () => query.value?.intonationScale ?? null,
disable: () =>
uiLocked.value ||
Expand All @@ -405,18 +407,17 @@ const parameters = computed<Parameter[]>(() => [
step: SLIDER_PARAMETERS.INTONATION.step,
scrollStep: SLIDER_PARAMETERS.INTONATION.scrollStep,
scrollMinStep: SLIDER_PARAMETERS.INTONATION.scrollMinStep,
onChange: (intonationScale: number) =>
store.dispatch("COMMAND_MULTI_SET_AUDIO_INTONATION_SCALE", {
audioKeys: selectedAudioKeys.value,
intonationScale,
}),
}),
action: "COMMAND_MULTI_SET_AUDIO_INTONATION_SCALE",
},
onChange: (intonationScale: number) =>
store.actions.COMMAND_MULTI_SET_AUDIO_INTONATION_SCALE({
audioKeys: selectedAudioKeys.value,
intonationScale,
}),
key: "intonationScale",
},
{
label: "音量",
slider: previewSliderHelper({
sliderProps: {
modelValue: () => query.value?.volumeScale ?? null,
disable: () =>
uiLocked.value || supportedFeatures.value?.adjustVolumeScale === false,
Expand All @@ -425,54 +426,71 @@ const parameters = computed<Parameter[]>(() => [
step: SLIDER_PARAMETERS.VOLUME.step,
scrollStep: SLIDER_PARAMETERS.VOLUME.scrollStep,
scrollMinStep: SLIDER_PARAMETERS.VOLUME.scrollMinStep,
onChange: (volumeScale: number) =>
store.dispatch("COMMAND_MULTI_SET_AUDIO_VOLUME_SCALE", {
audioKeys: selectedAudioKeys.value,
volumeScale,
}),
}),
action: "COMMAND_MULTI_SET_AUDIO_VOLUME_SCALE",
},
onChange: (volumeScale: number) =>
store.actions.COMMAND_MULTI_SET_AUDIO_VOLUME_SCALE({
audioKeys: selectedAudioKeys.value,
volumeScale,
}),
key: "volumeScale",
},
{
label: "開始無音",
slider: previewSliderHelper({
sliderProps: {
modelValue: () => query.value?.prePhonemeLength ?? null,
disable: () => uiLocked.value,
max: SLIDER_PARAMETERS.PRE_PHONEME_LENGTH.max,
min: SLIDER_PARAMETERS.PRE_PHONEME_LENGTH.min,
step: SLIDER_PARAMETERS.PRE_PHONEME_LENGTH.step,
scrollStep: SLIDER_PARAMETERS.PRE_PHONEME_LENGTH.scrollStep,
scrollMinStep: SLIDER_PARAMETERS.PRE_PHONEME_LENGTH.scrollMinStep,
onChange: (prePhonemeLength: number) =>
store.dispatch("COMMAND_MULTI_SET_AUDIO_PRE_PHONEME_LENGTH", {
audioKeys: selectedAudioKeys.value,
prePhonemeLength,
}),
}),
action: "COMMAND_MULTI_SET_AUDIO_PRE_PHONEME_LENGTH",
},
onChange: (prePhonemeLength: number) =>
store.actions.COMMAND_MULTI_SET_AUDIO_PRE_PHONEME_LENGTH({
audioKeys: selectedAudioKeys.value,
prePhonemeLength,
}),
key: "prePhonemeLength",
},
{
label: "終了無音",
slider: previewSliderHelper({
sliderProps: {
modelValue: () => query.value?.postPhonemeLength ?? null,
disable: () => uiLocked.value,
max: SLIDER_PARAMETERS.POST_PHONEME_LENGTH.max,
min: SLIDER_PARAMETERS.POST_PHONEME_LENGTH.min,
step: SLIDER_PARAMETERS.POST_PHONEME_LENGTH.step,
scrollStep: SLIDER_PARAMETERS.POST_PHONEME_LENGTH.scrollStep,
scrollMinStep: SLIDER_PARAMETERS.POST_PHONEME_LENGTH.scrollMinStep,
onChange: (postPhonemeLength: number) =>
store.dispatch("COMMAND_MULTI_SET_AUDIO_POST_PHONEME_LENGTH", {
audioKeys: selectedAudioKeys.value,
postPhonemeLength,
}),
}),
action: "COMMAND_MULTI_SET_AUDIO_POST_PHONEME_LENGTH",
},
onChange: (postPhonemeLength: number) =>
store.actions.COMMAND_MULTI_SET_AUDIO_POST_PHONEME_LENGTH({
audioKeys: selectedAudioKeys.value,
postPhonemeLength,
}),
key: "postPhonemeLength",
},
]);

/** パラメーター制御用 */
type Parameter = {
label: string;
slider: PreviewSliderHelper;
onChange: PreviewSliderHelperProps["onChange"];
key: ParameterKey;
};
const parameters = computed<Parameter[]>(() =>
parameterConfigs.value.map((parameterConfig) => ({
label: parameterConfig.label,
slider: previewSliderHelper({
...parameterConfig.sliderProps,
onChange: parameterConfig.onChange,
}),
onChange: parameterConfig.onChange,
key: parameterConfig.key,
})),
);
Comment on lines +482 to +492
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

雰囲気これなくせそうな気がしますね！！
でparameterConfigsをparametersに改名して、あとは型を適当に合わせればきれいになりそう。

お忙しければ、なんか合図くれたらよしなにこっちでやっちゃおうと思います！


const handleParameterChange = (
parameter: Parameter,
inputValue: string | number | null,
Expand All @@ -484,10 +502,7 @@ const handleParameterChange = (
parameter.slider.qSliderProps.min.value,
parameter.slider.qSliderProps.max.value,
);
void store.dispatch(parameter.action, {
audioKeys: selectedAudioKeys.value,
[parameter.key]: value,
});
return parameter.onChange(value);
};

// モーフィング
Expand All @@ -508,7 +523,7 @@ const morphingTargetEngines = store.getters.MORPHING_SUPPORTED_ENGINES;
// モーフィング可能なターゲット一覧を取得
watchEffect(() => {
if (audioItem.value != undefined) {
void store.dispatch("LOAD_MORPHABLE_TARGETS", {
void store.actions.LOAD_MORPHABLE_TARGETS({
engineId: audioItem.value.voice.engineId,
baseStyleId: audioItem.value.voice.styleId,
});
Expand Down Expand Up @@ -588,7 +603,7 @@ const morphingTargetVoice = computed({
targetStyleId: voice.styleId,
}
: undefined;
void store.dispatch("COMMAND_MULTI_SET_MORPHING_INFO", {
void store.actions.COMMAND_MULTI_SET_MORPHING_INFO({
audioKeys: selectedAudioKeys.value,
morphingInfo,
});
Expand Down Expand Up @@ -618,7 +633,7 @@ const setMorphingRate = (rate: number) => {
if (info == undefined) {
throw new Error("audioItem.value.morphingInfo == undefined");
}
return store.dispatch("COMMAND_MULTI_SET_MORPHING_INFO", {
return store.actions.COMMAND_MULTI_SET_MORPHING_INFO({
audioKeys: selectedAudioKeys.value,
morphingInfo: {
rate,
Expand Down Expand Up @@ -695,7 +710,7 @@ type PresetSelectModelType = {

// プリセットの変更
const changePreset = (presetKey: PresetKey | undefined) =>
store.dispatch("COMMAND_MULTI_SET_AUDIO_PRESET", {
store.actions.COMMAND_MULTI_SET_AUDIO_PRESET({
audioKeys: selectedAudioKeys.value,
presetKey,
});
Expand Down Expand Up @@ -878,7 +893,7 @@ const addPreset = () => {

closeAllDialog();

return store.dispatch("ADD_PRESET", {
return store.actions.ADD_PRESET({
presetData: newPreset,
});
};
Expand All @@ -893,13 +908,13 @@ const updatePreset = async (fullApply: boolean) => {
const newPreset = createPresetData(title);
if (newPreset == undefined) return;

await store.dispatch("UPDATE_PRESET", {
await store.actions.UPDATE_PRESET({
presetData: newPreset,
presetKey: key,
});

if (fullApply) {
await store.dispatch("COMMAND_FULLY_APPLY_AUDIO_PRESET", {
await store.actions.COMMAND_FULLY_APPLY_AUDIO_PRESET({
presetKey: key,
});
}
Expand Down
Loading