Skip to content

Commit

Permalink
vuexのstoreの呼び出しをリテラル引数からDot記法へ: components/Talk/AudioInfo.vue (#2326)
Browse files Browse the repository at this point in the history 
Co-authored-by: Hiroshiba <[email protected]>
  • Loading branch information
@Segu-g @Hiroshiba
Segu-g and Hiroshiba authored Oct 28, 2024
1 parent da93c23 commit 2950073
Showing 1 changed file with 83 additions and 68 deletions.
151 changes: 83 additions & 68 deletions src/components/Talk/AudioInfo.vue
View file
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,
})),
);
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

0 comments on commit 2950073

Please sign in to comment.