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

src/components/Dialog.ts

@@ -23,11 +23,13 @@ export async function generateAndSaveOneAudioWithDialog({
   filePath?: string;
   encoding?: EncodingType;
 }): Promise<void> {
+  await dispatch("START_INDETERMINATE_PROGRESS");
   const result: SaveResultObject = await dispatch("GENERATE_AND_SAVE_AUDIO", {
     audioKey,
     filePath,
     encoding,
-  });
+  }).finally(() => dispatch("RESET_PROGRESS"));
+
   if (result.result === "SUCCESS" || result.result === "CANCELED") return;
   let msg = "";
   switch (result.result) {
@@ -65,13 +67,17 @@ export async function generateAndSaveAllAudioWithDialog({
   dirPath?: string;
   encoding?: EncodingType;
 }): Promise<void> {
+  await dispatch("START_AUDIO_ITEMS_PROGRESS");
   const result = await dispatch("GENERATE_AND_SAVE_ALL_AUDIO", {
     dirPath,
     encoding,
-  });
+    callback: () => dispatch("INCREMENT_PROGRESS"),
+  }).finally(() => dispatch("RESET_PROGRESS"));
+
   const successArray: Array<string | undefined> = [];
   const writeErrorArray: Array<WriteErrorTypeForSaveAllResultDialog> = [];
   const engineErrorArray: Array<string | undefined> = [];
+
   if (result) {
     for (const item of result) {
       let msg = "";
@@ -121,10 +127,12 @@ export async function generateAndConnectAndSaveAudioWithDialog({
   filePath?: string;
   encoding?: EncodingType;
 }): Promise<void> {
+  await dispatch("START_AUDIO_ITEMS_PROGRESS");
   const result = await dispatch("GENERATE_AND_CONNECT_AND_SAVE_AUDIO", {
     filePath,
     encoding,
-  });
+    callback: () => dispatch("INCREMENT_PROGRESS"),
+  }).finally(() => dispatch("RESET_PROGRESS"));
 
   if (
     result === undefined ||

src/components/ProgressDialog.vue

@@ -0,0 +1,108 @@
+<template>
+  <div v-if="isShowProgress" class="progress">
+    <div v-if="isDeterminate">
+      <q-circular-progress
+        show-value
+        :value="progress"
+        :min="0"
+        :max="1"
+        rounded
+        font-size="12px"
+        color="primary"
+        size="xl"
+        :thickness="0.3"
+      >
+        {{ formattedProgress }}%
+      </q-circular-progress>
+      <div class="q-mt-md">生成中です...</div>
+    </div>
+    <div v-if="!isDeterminate">
+      <q-circular-progress
+        indeterminate
+        color="primary"
+        rounded
+        :thickness="0.3"
+        size="xl"
+      />
+      <div class="q-mt-md">生成中です...</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { useStore } from "@/store";
+import { computed, defineComponent, onUnmounted, ref, watch } from "vue";
+
+export default defineComponent({
+  name: "ProgressDialog",
+
+  setup() {
+    const store = useStore();
+
+    const progress = computed(() => store.getters.PROGRESS);
+    const isShowProgress = ref<boolean>(false);
+    const isDeterminate = ref<boolean>(false);
+
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    const deferredProgressStart = () => {
+      // 3秒待ってから表示する
+      timeoutId = setTimeout(() => {
+        isShowProgress.value = true;
+      }, 3000);
+    };
+
+    watch(progress, (newValue, oldValue) => {
+      if (newValue === -1) {
+        // → 非表示
+        clearTimeout(timeoutId);
+        isShowProgress.value = false;
+      } else if (oldValue === -1 && newValue <= 1) {
+        // 非表示 → 処理中
+        deferredProgressStart();
+        isDeterminate.value = false;
+      } else if (oldValue !== -1 && 0 < newValue) {
+        // 処理中 → 処理中(0%より大きな値)
+        // 0 < value <= 1の間のみ進捗を%で表示する
+        isDeterminate.value = true;
+      }
+    });
+
+    onUnmounted(() => clearTimeout(timeoutId));
+
+    const formattedProgress = computed(() =>
+      (store.getters.PROGRESS * 100).toFixed()
+    );
+
+    return {
+      isShowProgress,
+      isDeterminate,
+      progress,
+      formattedProgress,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/colors' as colors;
+
+.progress {
+  background-color: rgba(colors.$display-rgb, 0.15);
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+
+  > div {
+    color: colors.$display;
+    background: colors.$surface;
+    width: 200px;
+    border-radius: 6px;
+    padding: 14px 48px;
+  }
+}
+</style>

src/store/audio.ts

@@ -1232,7 +1232,11 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     action: createUILockAction(
       async (
         { state, dispatch },
-        { dirPath, encoding }: { dirPath?: string; encoding?: EncodingType }
+        {
+          dirPath,
+          encoding,
+          callback,
+        }: { dirPath?: string; encoding?: EncodingType; callback?: () => void }
       ) => {
         if (state.savingSetting.fixedExportEnabled) {
           dirPath = state.savingSetting.fixedExportDir;
@@ -1249,6 +1253,9 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
               audioKey,
               filePath: path.join(_dirPath, name),
               encoding,
+            }).then((value) => {
+              callback?.();
+              return value;
             });
           });
           return Promise.all(promises);
@@ -1261,7 +1268,11 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     action: createUILockAction(
       async (
         { state, dispatch },
-        { filePath, encoding }: { filePath?: string; encoding?: EncodingType }
+        {
+          filePath,
+          encoding,
+          callback,
+        }: { filePath?: string; encoding?: EncodingType; callback?: () => void }
       ): Promise<SaveResultObject> => {
         const defaultFileName = buildProjectFileName(state, "wav");
 
@@ -1317,6 +1328,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
           let blob = await dispatch("GET_AUDIO_CACHE", { audioKey });
           if (!blob) {
             blob = await dispatch("GENERATE_AUDIO", { audioKey });
+            callback?.();
           }
           if (blob === null) {
             return { result: "ENGINE_ERROR", path: filePath };
@@ -1517,11 +1529,14 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
         // 音声用意
         let blob = await dispatch("GET_AUDIO_CACHE", { audioKey });
         if (!blob) {
+          dispatch("START_INDETERMINATE_PROGRESS");
           commit("SET_AUDIO_NOW_GENERATING", {
             audioKey,
             nowGenerating: true,
           });
-          blob = await dispatch("GENERATE_AUDIO", { audioKey });
+          blob = await dispatch("GENERATE_AUDIO", { audioKey }).finally(() =>
+            dispatch("RESET_PROGRESS")
+          );
           commit("SET_AUDIO_NOW_GENERATING", {
             audioKey,
             nowGenerating: false,

src/store/type.ts

@@ -365,13 +365,15 @@ export type AudioStoreTypes = {
     action(payload: {
       dirPath?: string;
       encoding?: EncodingType;
+      callback?: () => void;
     }): SaveResultObject[] | undefined;
   };
 
   GENERATE_AND_CONNECT_AND_SAVE_AUDIO: {
     action(payload: {
       filePath?: string;
       encoding?: EncodingType;
+      callback?: () => void;
     }): SaveResultObject | undefined;
   };
 
@@ -979,6 +981,8 @@ export type UiStoreState = {
   isMaximized: boolean;
   isPinned: boolean;
   isFullscreen: boolean;
+  progress: number;
+  progressCount: number;
 };
 
 export type UiStoreTypes = {
@@ -990,6 +994,10 @@ export type UiStoreTypes = {
     getter: boolean;
   };
 
+  PROGRESS: {
+    getter: number;
+  };
+
   ASYNC_UI_LOCK: {
     action(payload: { callback: () => Promise<void> }): void;
   };
@@ -1109,6 +1117,31 @@ export type UiStoreTypes = {
   RESTART_APP: {
     action(obj: { isSafeMode?: boolean }): void;
   };
+
+  START_PROGRESS: {
+    action(payload: { count: number }): void;
+  };
+
+  START_AUDIO_ITEMS_PROGRESS: {
+    action(): void;
+  };
+
+  START_INDETERMINATE_PROGRESS: {
+    action(): void;
+  };
+
+  INCREMENT_PROGRESS: {
+    action(): void;
+  };
+
+  SET_PROGRESS: {
+    mutation: { progress: number; count?: number };
+    action(payload: { progress: number; count?: number }): void;
+  };
+
+  RESET_PROGRESS: {
+    action(): void;
+  };
 };
 
 /*

src/store/ui.ts

@@ -44,6 +44,8 @@ export const uiStoreState: UiStoreState = {
   isMaximized: false,
   isPinned: false,
   isFullscreen: false,
+  progress: -1,
+  progressCount: 0,
 };
 
 export const uiStore = createPartialStore<UiStoreTypes>({
@@ -59,6 +61,12 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  PROGRESS: {
+    getter(state) {
+      return state.progress;
+    },
+  },
+
   ASYNC_UI_LOCK: {
     action: createUILockAction(
       async (_, { callback }: { callback: () => Promise<void> }) => {
@@ -322,4 +330,47 @@ export const uiStore = createPartialStore<UiStoreTypes>({
       window.electron.restartApp({ isSafeMode: !!isSafeMode });
     },
   },
+
+  START_PROGRESS: {
+    action({ dispatch }, { count }) {
+      dispatch("SET_PROGRESS", { progress: 0, count });
+    },
+  },
+
+  START_AUDIO_ITEMS_PROGRESS: {
+    action({ dispatch, state }) {
+      dispatch("START_PROGRESS", { count: state.audioKeys.length });
+    },
+  },
+
+  INCREMENT_PROGRESS: {
+    action({ dispatch, state }) {
+      const step = 1.0 / state.progressCount;
+      dispatch("SET_PROGRESS", { progress: state.progress + step });
+    },
+  },
+
+  START_INDETERMINATE_PROGRESS: {
+    action({ dispatch }) {
+      dispatch("SET_PROGRESS", { progress: 0 });
+    },
+  },
+
+  SET_PROGRESS: {
+    mutation(state, { progress, count }) {
+      state.progress = progress;
+      if (count != null) {
+        state.progressCount = count;
+      }
+    },
+    action({ commit }, { progress, count }) {
+      commit("SET_PROGRESS", { progress, count });
+    },
+  },
+
+  RESET_PROGRESS: {
+    action({ dispatch }) {
+      dispatch("SET_PROGRESS", { progress: -1 });
+    },
+  },
 });

src/views/EditorHome.vue

@@ -6,6 +6,8 @@
 
     <q-page-container>
       <q-page class="main-row-panes">
+        <progress-dialog />
+
         <!-- TODO: 複数エンジン対応 -->
         <div
           v-if="!isCompletedInitialStartup || allEngineState === 'STARTING'"
@@ -184,6 +186,7 @@ import AcceptRetrieveTelemetryDialog from "@/components/AcceptRetrieveTelemetryD
 import AcceptTermsDialog from "@/components/AcceptTermsDialog.vue";
 import DictionaryManageDialog from "@/components/DictionaryManageDialog.vue";
 import EngineManageDialog from "@/components/EngineManageDialog.vue";
+import ProgressDialog from "@/components/ProgressDialog.vue";
 import { AudioItem, EngineState } from "@/store/type";
 import { QResizeObserver, useQuasar } from "quasar";
 import path from "path";
@@ -215,6 +218,7 @@ export default defineComponent({
     AcceptTermsDialog,
     DictionaryManageDialog,
     EngineManageDialog,
+    ProgressDialog,
   },
 
   setup() {

tests/unit/store/Vuex.spec.ts

@@ -122,6 +122,8 @@ describe("store/vuex.js test", () => {
         confirmedTips: {
           tweakableSliderByScroll: false,
         },
+        progress: -1,
+        progressCount: 0,
       },
       getters: {
         ...uiStore.getters,