音声書き出し時に進捗がわかるような表示をする

[Hiroshiba]

内容

大量のテキストを入力して一気に書き出すと画面が固まってしまいます。
何番目を書き出し中なのか進捗がわかるような表示があると良さそうに感じました。

Pros 良くなる点

安心できる

Cons 悪くなる点

実現方法

３秒くらい待ったら　何分の何　と画面中央に出始める、とか。
（すぐ出てすぐ消えるのは画面がちらつくので、３秒くらい待ってから表示する）

その他

ご要望の声 https://twitter.com/yataka_orbital/status/1499322333936627713

[Apple-Yuki]

内容

長めの音声データ（エディタで言うと複数行の会話）を一括出力するときに、画面がさわれなくなるだけではなく進捗バーが欲しい
こんなの。

あと、初期起動時にデータ取得してる際にもプログレスバーあれば親切かも？

#759 と同様な問題のため統合します。

内容

大量のテキストを入力して一気に書き出すと画面が固まってしまいます。 何番目を書き出し中なのか進捗がわかるような表示があると良さそうに感じました。

Pros 良くなる点

安心できる

Cons 悪くなる点

実現方法

３秒くらい待ったら　何分の何　と画面中央に出始める、とか。 （すぐ出てすぐ消えるのは画面がちらつくので、３秒くらい待ってから表示する）

その他

ご要望の声 https://twitter.com/yataka_orbital/status/1499322333936627713

Pros 良くなる点

出力進捗がわかるので固まったように見えなくはなる

Cons 悪くなる点

ないと思うけど、システム見直しというかフラグ管理的なものが必要になりそう。

実現方法

VOICEVOXで使ってる言語がわからないので詳しくは分かりませんが出るように処理すればいいと思う（願望）
また @Hiroshiba さんが言っている処理が必要かも？

[k-chop]

着手しようと思って調べていたのですが、
ElectronがOSのプログレスバー（↓こういうやつ）に対応していました。

https://www.electronjs.org/ja/docs/latest/tutorial/progress-bar

最終的にはメイン画面にダイアログで出すのがユーザーにとっても分かりやすく便利だと思うのですが、
いったんこれを使ってコスト低く実装してみてもよいでしょうか？

状況	プログレスバーの挙動
単体の音声生成中（再生ボタン押下/1つだけ書き出し）	上に貼った画像のような、とりあえず処理していることが分かるやつを出しておく。終了したら消す
音声書き出し	全体のうち何%終わってるかを計算して表示、終了したら消す
音声を繋げて書き出し	同上

[Hiroshiba]

なるほどです、OSのプログレスバー表示機能があるんですね！

実装するのは異論ないのですが、VOICEVOXでこれを実装しようとなると、background.ts・preload.ts・vuex store・UIの４箇所（UIはいらないかも？）に手を入れる必要があり、逆にこちらのほうが難しいかもと少し思いました･･･！

[k-chop]

ありがとうございます！では着手しようと思います 🙋

あ、electron側への追加は実質 win.setProgressBar() を呼ぶだけなので、型定義等も合わせて10行ほどです。

# type/preload.ts
+   setProgressBar(obj: { progress: number }): void;

# electron/preload.ts
+  setProgressBar: ({ progress }: { progress: number }) => {
+    ipcRendererInvoke("SET_PROGRESS_BAR", { progress });
+  },

# type/ipc.ts
+  SET_PROGRESS_BAR: {
+    args: [obj: { progress: number }];
+    return: void;
+  };

# background.ts
+ ipcMainHandle("SET_PROGRESS_BAR", (_, { progress }) => {
+   win.setProgressBar(progress);
+ });

この追加とstoreの実装（これはどちらの場合でも必要）さえあれば
UI側のコードは省けるのでコスト低いと判断した次第でした。UI側のコードが一番多くなるはず・・・

uiStoreに START_PROGRESS SET_PROGRESS RESET_PROGRESS 的なアクションを用意し、storeにprogress（0~100%）を持たせておいて、UI側実装するときもそれ見れば良いだけにしておきます。やってみて楽そうならUI側もやっちゃいますね。
あと各OSでの動作確認も忘れずやっときます 🙇

[Hiroshiba]

たしかに変更が必要な行数自体は少ないですね！！
ぜひよろしくお願いします…！

UI部分は既存コード読む必要があっていろいろ大変かもです。
難しそうであればProgres表示だけでも…！🙏（どちらでも大丈夫です！）

[k-chop]

UI側で実装できたので #1038 にPR出しました！

indeterminateな進捗表示は実はwindowsのみの対応だったようで、
macではただの100%表示になってしまいかなり違和感がありました。

なので結局OSプログレスバー表示は諦めてUI部分のみの実装になりました...