WIP: 初回起動時にトークとソングのどちらかを選択できるダイアログを表示する #2409
Conversation
|
🚀 プレビュー用ページを作成しました 🚀 更新時点でのコミットハッシュ： |
src/components/Dialog/AllDialog.vue
Outdated
| // 初期設定ダイアログ | ||
| const isSelectedEditorType = computed(() => store.state.openedEditor); | ||
| console.log(isSelectedEditorType.value); | ||
| const isInitialSettingsDialogOpenComputed = computed({ | ||
| get: () => store.state.isInitialSettingsDialogOpen, | ||
| set: (val) => { | ||
| if (isSelectedEditorType.value) { | ||
| void store.actions.SET_DIALOG_OPEN({ | ||
| isInitialSettingsDialogOpen: val, | ||
| }); | ||
| } | ||
| }, | ||
| }); |
There was a problem hiding this comment.
store.state.openedEditorから開いていたエディタを取得し、undefinedの時にSET_DIALOG_OPENでエディタを選択できるダイアログを表示するような処理にしている。
`openedEditor: EditorType | undefined; // undefinedのときはどのエディタを開くか定まっていない`
https://github.com/VOICEVOX/voicevox/blob/main/src/store/type.ts#L1857
There was a problem hiding this comment.
初回起動の動作確認はnpm run electron:serveを実行した際、store.state.openedEditorはundefinedとなり、このダイアログが開かれるのでそこで確認できます。
すでにどちらかのエディタを開き、再起動した際にこのダイアログが表示されないという挙動をどう確認しようかなと悩んでいます。
There was a problem hiding this comment.
ちょっと問題を把握できないのですがコメントまで！！
openedEditorは前回どっちのエディターが開かれていたかが入っています！
デフォルト値は今talkに設定されているので、これをデフォルトundefiendにする必要がありそうです。
こうすれば、config.jsonがない状態で起動すればこのダイアログが開かれて、1回エディタが開かれた後にもう一度起動すればダイアログが表示されないはず。
ちなみに開発環境の設定ファイルconfig.jsonはC:\Users\[ユーザー名]\AppData\Roaming\voicevox-devにあります。
なんですが、ちょっとこの辺のダイアログを開くかどうか周りとかが入り組んでいるので、こちらでちょこっと変更してプルリクエスト送ろうと思います！！
|
Error: Snapshot という部分でテストが失敗しているのですが、新しく追加する仕様では初期状態ではopendEditorが指定されていないためその部分で失敗してしまっているということなんだろうか？ |
|
指定されていないというより、デフォルトがなくなったからか |
|
e2eのテストは |
|
スナップショットの不一致ですね。READMEに書いてある通りに更新すればいいはず。 |
|
@sevenc-nanashi |
|
ダイアログ以外のメニューが消えてる問題が解決できない
|
|
エディタ選択時に背景のUIが出なくなってしまうからE2Eテストを通しようがない… 2025-03-20.212601.mp4 |
|
あー！！！ 何に迷っているのかわかった気がします･･･！！
これは正しい動作な気がします！！！ 少なくともソング・トークが選ばれてないので背景は表示しようがないはず。（どちらを表示するのが正解？） e2eテストでは、トークメイン画面にnavigateする関数をいじって「どちらに興味がありますか？」でトークを選択肢、ソングのときはソングを選択するようにすればOKだと思います！ 実際にe2eテスト側を変えてみました！ 先に ご連絡遅くなってしまってすみませんでした 🙇🙇🙇 |
|
@Hiroshiba コミットが作業ブランチからはやしてしまったので大量に積まれてしまってますが、cherry-pick？すればいい感じになるかなって思ってます |
|
あと、背景のUIが白くなっている状態のとき、アプリケーションウィンドウをデスクトップ画面で移動させることができないのですが、仕様的に大丈夫なのでしょうか？ |
|
おお、まさしくですね！！ ヘルプが必要なのか、ちょっとアップロードしてみただけなのか判断がつかず、コメントを後回しにしてしまっていました。。すみません！ 🙇 |
|
未選択時の背景、例えばボイボ色の背景にするだけでもいい感じなのかな～って思いました（少なくとも白一色よりはましになるはず...） |
それはたしかに大丈夫じゃないかもです･･･！ App.vueの が、これは適当に解決するとしんどくなりそうですね･･･。 このあたり @sevenc-nanashi さんが取り組んでくださっている↓のPRで少し変わる予定というのもあり、一旦このPRでは何もせず、TODOコメントを残しておくというのはどうでしょうか？ |
白背景だと寂しいですし、そうします！
わかりました！コメントしておきます！ |
|
こちらの変更に追従して現在の機能追加部分もリファクタします |
内容
Dialog/InitialSettingsDialog.vueとした関連 Issue
close #2011
スクリーンショット・動画など
仮で組んでみたダイアログのUI
CSSが分からないのでいい感じのUIを組めない
2024-12-13.22.24.04.mov
その他
TODO
src/store/type.tsのSetting Store Typesに選択済みor未選択を保存する（興味のあるエディタでもいい→デフォルトで開くエディタとして初期設定が可能）src/store/setting.tsのsettingStoreで選択済みor未選択について実装