From f29f1f81fb29669f431b495d388e31c612fd26f0 Mon Sep 17 00:00:00 2001 From: Segu-g Date: Sun, 27 Oct 2024 01:34:49 +0900 Subject: [PATCH 1/3] fix parameter onChange routine on slider --- src/components/Talk/AudioInfo.vue | 121 ++++++++++++++++-------------- 1 file changed, 65 insertions(+), 56 deletions(-) diff --git a/src/components/Talk/AudioInfo.vue b/src/components/Talk/AudioInfo.vue index b4501a8a59..1db2148af2 100644 --- a/src/components/Talk/AudioInfo.vue +++ b/src/components/Talk/AudioInfo.vue @@ -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"; @@ -341,11 +342,16 @@ const supportedFeatures = computed( .supportedFeatures) as EngineManifest["supportedFeatures"] | undefined, ); -// FIXME: slider.onChangeとhandleParameterChangeでstate変更が２経路になっているので統一する +type ParameterConfig = { + label: string; + sliderProps: Omit; + onChange: PreviewSliderHelperProps["onChange"]; + key: Parameter["key"]; +}; type Parameter = { label: string; slider: PreviewSliderHelper; - action: Parameters[0]["type"]; + onChange: PreviewSliderHelperProps["onChange"]; key: keyof Omit; }; const selectedAudioKeys = computed(() => @@ -353,10 +359,10 @@ const selectedAudioKeys = computed(() => ? store.getters.SELECTED_AUDIO_KEYS : [props.activeAudioKey], ); -const parameters = computed(() => [ +const parameterConfigs = computed(() => [ { label: "話速", - slider: previewSliderHelper({ + sliderProps: { modelValue: () => query.value?.speedScale ?? null, disable: () => uiLocked.value || supportedFeatures.value?.adjustSpeedScale === false, @@ -365,18 +371,17 @@ const parameters = computed(() => [ 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.dispatch("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, @@ -384,18 +389,17 @@ const parameters = computed(() => [ 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.dispatch("COMMAND_MULTI_SET_AUDIO_PITCH_SCALE", { + audioKeys: selectedAudioKeys.value, + pitchScale, + }), key: "pitchScale", }, { label: "抑揚", - slider: previewSliderHelper({ + sliderProps: { modelValue: () => query.value?.intonationScale ?? null, disable: () => uiLocked.value || @@ -405,18 +409,17 @@ const parameters = computed(() => [ 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.dispatch("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, @@ -425,18 +428,17 @@ const parameters = computed(() => [ 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.dispatch("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, @@ -444,18 +446,17 @@ const parameters = computed(() => [ 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.dispatch("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, @@ -463,16 +464,27 @@ const parameters = computed(() => [ 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.dispatch("COMMAND_MULTI_SET_AUDIO_POST_PHONEME_LENGTH", { + audioKeys: selectedAudioKeys.value, + postPhonemeLength, + }), key: "postPhonemeLength", }, ]); +const parameters = computed(() => + 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, @@ -484,10 +496,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); }; // モーフィング From c64fb4b88cf142b825786fc705ab03a5e3e78f22 Mon Sep 17 00:00:00 2001 From: Segu-g Date: Sun, 27 Oct 2024 01:52:39 +0900 Subject: [PATCH 2/3] replace dispatch to actions notation in AudioInfo.vue --- src/components/Talk/AudioInfo.vue | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Talk/AudioInfo.vue b/src/components/Talk/AudioInfo.vue index 1db2148af2..b277c8532c 100644 --- a/src/components/Talk/AudioInfo.vue +++ b/src/components/Talk/AudioInfo.vue @@ -373,7 +373,7 @@ const parameterConfigs = computed(() => [ scrollMinStep: SLIDER_PARAMETERS.SPEED.scrollMinStep, }, onChange: (speedScale: number) => - store.dispatch("COMMAND_MULTI_SET_AUDIO_SPEED_SCALE", { + store.actions.COMMAND_MULTI_SET_AUDIO_SPEED_SCALE({ audioKeys: selectedAudioKeys.value, speedScale, }), @@ -391,7 +391,7 @@ const parameterConfigs = computed(() => [ scrollStep: SLIDER_PARAMETERS.PITCH.scrollStep, }, onChange: (pitchScale: number) => - store.dispatch("COMMAND_MULTI_SET_AUDIO_PITCH_SCALE", { + store.actions.COMMAND_MULTI_SET_AUDIO_PITCH_SCALE({ audioKeys: selectedAudioKeys.value, pitchScale, }), @@ -411,7 +411,7 @@ const parameterConfigs = computed(() => [ scrollMinStep: SLIDER_PARAMETERS.INTONATION.scrollMinStep, }, onChange: (intonationScale: number) => - store.dispatch("COMMAND_MULTI_SET_AUDIO_INTONATION_SCALE", { + store.actions.COMMAND_MULTI_SET_AUDIO_INTONATION_SCALE({ audioKeys: selectedAudioKeys.value, intonationScale, }), @@ -430,7 +430,7 @@ const parameterConfigs = computed(() => [ scrollMinStep: SLIDER_PARAMETERS.VOLUME.scrollMinStep, }, onChange: (volumeScale: number) => - store.dispatch("COMMAND_MULTI_SET_AUDIO_VOLUME_SCALE", { + store.actions.COMMAND_MULTI_SET_AUDIO_VOLUME_SCALE({ audioKeys: selectedAudioKeys.value, volumeScale, }), @@ -448,7 +448,7 @@ const parameterConfigs = computed(() => [ scrollMinStep: SLIDER_PARAMETERS.PRE_PHONEME_LENGTH.scrollMinStep, }, onChange: (prePhonemeLength: number) => - store.dispatch("COMMAND_MULTI_SET_AUDIO_PRE_PHONEME_LENGTH", { + store.actions.COMMAND_MULTI_SET_AUDIO_PRE_PHONEME_LENGTH({ audioKeys: selectedAudioKeys.value, prePhonemeLength, }), @@ -466,7 +466,7 @@ const parameterConfigs = computed(() => [ scrollMinStep: SLIDER_PARAMETERS.POST_PHONEME_LENGTH.scrollMinStep, }, onChange: (postPhonemeLength: number) => - store.dispatch("COMMAND_MULTI_SET_AUDIO_POST_PHONEME_LENGTH", { + store.actions.COMMAND_MULTI_SET_AUDIO_POST_PHONEME_LENGTH({ audioKeys: selectedAudioKeys.value, postPhonemeLength, }), @@ -517,7 +517,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, }); @@ -597,7 +597,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, }); @@ -627,7 +627,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, @@ -704,7 +704,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, }); @@ -887,7 +887,7 @@ const addPreset = () => { closeAllDialog(); - return store.dispatch("ADD_PRESET", { + return store.actions.ADD_PRESET({ presetData: newPreset, }); }; @@ -902,13 +902,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, }); } From a3adcad128fafffa6e65950a293563fa95af43cd Mon Sep 17 00:00:00 2001 From: Hiroshiba Date: Tue, 29 Oct 2024 02:13:14 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Talk/AudioInfo.vue | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/src/components/Talk/AudioInfo.vue b/src/components/Talk/AudioInfo.vue index b277c8532c..4bc03b77a6 100644 --- a/src/components/Talk/AudioInfo.vue +++ b/src/components/Talk/AudioInfo.vue @@ -342,23 +342,21 @@ const supportedFeatures = computed( .supportedFeatures) as EngineManifest["supportedFeatures"] | undefined, ); -type ParameterConfig = { - label: string; - sliderProps: Omit; - onChange: PreviewSliderHelperProps["onChange"]; - key: Parameter["key"]; -}; -type Parameter = { - label: string; - slider: PreviewSliderHelper; - onChange: PreviewSliderHelperProps["onChange"]; - key: keyof Omit; -}; const selectedAudioKeys = computed(() => store.state.experimentalSetting.enableMultiSelect ? store.getters.SELECTED_AUDIO_KEYS : [props.activeAudioKey], ); + +type ParameterKey = keyof Omit; // NOTE: パラメーターの種類はPresetのキーと同じ + +/** パラメーターを制御するための元情報リスト */ +type ParameterConfig = { + label: string; + sliderProps: Omit; + onChange: PreviewSliderHelperProps["onChange"]; // NOTE: onChangeだけ使い回すので分離している + key: ParameterKey; +}; const parameterConfigs = computed(() => [ { label: "話速", @@ -473,6 +471,14 @@ const parameterConfigs = computed(() => [ key: "postPhonemeLength", }, ]); + +/** パラメーター制御用 */ +type Parameter = { + label: string; + slider: PreviewSliderHelper; + onChange: PreviewSliderHelperProps["onChange"]; + key: ParameterKey; +}; const parameters = computed(() => parameterConfigs.value.map((parameterConfig) => ({ label: parameterConfig.label,