ツールバーのボタンをカスタマイズ可能にする

src/background.ts

@@ -23,6 +23,7 @@ import {
   SavingSetting,
   ThemeConf,
   StyleInfo,
+  ToolbarSetting,
 } from "./type/preload";
 
 import log from "electron-log";
@@ -138,12 +139,21 @@ const defaultHotkeySettings: HotkeySetting[] = [
   },
 ];
 
+const defaultToolbarButtonSetting: ToolbarSetting = [
+  "連続再生",
+  "停止",
+  "空白",
+  "元に戻す",
+  "やり直す",
+];
+
 // 設定ファイル
 const store = new Store<{
   useGpu: boolean;
   inheritAudioInfo: boolean;
   savingSetting: SavingSetting;
   hotkeySettings: HotkeySetting[];
+  toolbarSetting: ToolbarSetting;
   defaultStyleIds: DefaultStyleId[];
   currentTheme: string;
 }>({
@@ -200,6 +210,13 @@ const store = new Store<{
       },
       default: defaultHotkeySettings,
     },
+    toolbarSetting: {
+      type: "array",
+      items: {
+        type: "string",
+      },
+      default: defaultToolbarButtonSetting,
+    },
     defaultStyleIds: {
       type: "array",
       items: {
@@ -658,6 +675,13 @@ ipcMainHandle("SAVING_SETTING", (_, { newData }) => {
   return store.get("savingSetting");
 });
 
+ipcMainHandle("TOOLBAR_SETTING", (_, { newData }) => {
+  if (newData !== undefined) {
+    store.set("toolbarSetting", newData);
+  }
+  return store.get("toolbarSetting");
+});
+
 ipcMainHandle("HOTKEY_SETTINGS", (_, { newData }) => {
   if (newData !== undefined) {
     const hotkeySettings = store.get("hotkeySettings");
@@ -727,6 +751,10 @@ ipcMainHandle("GET_DEFAULT_HOTKEY_SETTINGS", () => {
   return defaultHotkeySettings;
 });
 
+ipcMainHandle("GET_DEFAULT_TOOLBAR_SETTING", () => {
+  return defaultToolbarButtonSetting;
+});
+
 // app callback
 app.on("web-contents-created", (e, contents) => {
   // リンククリック時はブラウザを開く

src/components/HeaderBar.vue

@@ -1,54 +1,44 @@
 <template>
   <q-header class="q-py-sm">
     <q-toolbar>
-      <q-btn
-        unelevated
-        color="background-light"
-        text-color="display-dark"
-        class="text-no-wrap text-bold q-mr-sm"
-        :disable="uiLocked"
-        @click="playContinuously"
-        >連続再生</q-btn
-      >
-      <q-btn
-        unelevated
-        color="background-light"
-        text-color="display-dark"
-        class="text-no-wrap text-bold q-mr-sm"
-        :disable="!nowPlayingContinuously"
-        @click="stopContinuously"
-        >停止</q-btn
-      >
-
-      <q-space />
-      <q-btn
-        unelevated
-        color="background-light"
-        text-color="display-dark"
-        class="text-no-wrap text-bold q-mr-sm"
-        :disable="!canUndo || uiLocked"
-        @click="undo"
-        >元に戻す</q-btn
-      >
-      <q-btn
-        unelevated
-        color="background-light"
-        text-color="display-dark"
-        class="text-no-wrap text-bold q-mr-sm"
-        :disable="!canRedo || uiLocked"
-        @click="redo"
-        >やり直す</q-btn
-      >
+      <template v-for="button in headerButtons" :key="button.text">
+        <q-space v-if="button.text === null" />
+        <q-btn
+          v-else
+          unelevated
+          color="background-light"
+          text-color="display-dark"
+          class="text-no-wrap text-bold q-mr-sm"
+          :disable="button.disable.value"
+          @click="button.click"
+          >{{ button.text }}</q-btn
+        >
+      </template>
     </q-toolbar>
   </q-header>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, ComputedRef } from "vue";
 import { useStore } from "@/store";
 import { useQuasar } from "quasar";
 import { setHotkeyFunctions } from "@/store/setting";
-import { HotkeyAction, HotkeyReturnType } from "@/type/preload";
+import {
+  HotkeyAction,
+  HotkeyReturnType,
+  ToolbarButtonsType,
+} from "@/type/preload";
+import SaveAllResultDialog from "@/components/SaveAllResultDialog.vue";
+
+type ButtonContent =
+  | {
+      text: ToolbarButtonsType;
+      click(): void;
+      disable: ComputedRef<boolean>;
+    }
+  | {
+      text: null;
+    };
 
 export default defineComponent({
   setup() {
@@ -61,6 +51,15 @@ export default defineComponent({
     const nowPlayingContinuously = computed(
       () => store.state.nowPlayingContinuously
     );
+    const activeAudioKey = computed(() => store.getters.ACTIVE_AUDIO_KEY);
+    const nowPlaying = computed(() =>
+      activeAudioKey.value
+        ? store.state.audioStates[activeAudioKey.value]?.nowPlaying
+        : false
+    );
+    const toolbarSetting = computed(() => store.state.toolbarSetting);
+
+    let continuouslyFlag = true;
 
     const undoRedoHotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
       // undo
@@ -93,7 +92,7 @@ export default defineComponent({
         () => {
           if (!uiLocked.value) {
             if (nowPlayingContinuously.value) {
-              stopContinuously();
+              stop();
             } else {
               playContinuously();
             }
@@ -110,9 +109,17 @@ export default defineComponent({
     const redo = () => {
       store.dispatch("REDO");
     };
-    const playContinuously = async () => {
+    const playAudio = async () => {
       try {
-        await store.dispatch("PLAY_CONTINUOUSLY_AUDIO");
+        if (continuouslyFlag) {
+          await store.dispatch("PLAY_CONTINUOUSLY_AUDIO");
+        } else if (activeAudioKey.value !== undefined) {
+          await store.dispatch("PLAY_AUDIO", {
+            audioKey: activeAudioKey.value,
+          });
+        } else {
+          throw Error();
+        }
       } catch {
         $q.dialog({
           title: "再生に失敗しました",
@@ -125,19 +132,100 @@ export default defineComponent({
         });
       }
     };
-    const stopContinuously = () => {
-      store.dispatch("STOP_CONTINUOUSLY_AUDIO");
+    const playContinuously = async () => {
+      continuouslyFlag = true;
+      await playAudio();
+    };
+    const play = async () => {
+      continuouslyFlag = false;
+      await playAudio();
+    };
+    const stop = () => {
+      if (continuouslyFlag) {
+        store.dispatch("STOP_CONTINUOUSLY_AUDIO");
+      } else if (activeAudioKey.value !== undefined) {
+        store.dispatch("STOP_AUDIO", { audioKey: activeAudioKey.value });
+      }
     };
+    const generateAndSaveAllAudio = async () => {
+      await store.dispatch("GENERATE_AND_SAVE_ALL_AUDIO_WITH_DIALOG", {
+        encoding: store.state.savingSetting.fileEncoding,
+        $q,
+        saveAllResultDialog: SaveAllResultDialog,
+      });
+    };
+    const generateAndSaveOneAudio = async () => {
+      await store.dispatch("GENERATE_AND_SAVE_AUDIO_WITH_DIALOG", {
+        audioKey: activeAudioKey.value as string,
+        $q,
+        encoding: store.state.savingSetting.fileEncoding,
+      });
+    };
+    const importTextFile = () => {
+      store.dispatch("COMMAND_IMPORT_FROM_FILE", {});
+    };
+
+    const usableButtons: ButtonContent[] = [
+      {
+        text: "連続再生",
+        click: playContinuously,
+        disable: uiLocked,
+      },
+      {
+        text: "再生",
+        click: play,
+        disable: computed(() => !activeAudioKey.value || uiLocked.value),
+      },
+      {
+        text: "停止",
+        click: stop,
+        disable: computed(
+          () => !nowPlayingContinuously.value && !nowPlaying.value
+        ),
+      },
+      {
+        text: "音声書き出し",
+        click: generateAndSaveAllAudio,
+        disable: uiLocked,
+      },
+      {
+        text: "一つだけ書き出し",
+        click: generateAndSaveOneAudio,
+        disable: computed(() => !activeAudioKey.value || uiLocked.value),
+      },
+      {
+        text: "元に戻す",
+        click: undo,
+        disable: computed(() => !canUndo.value || uiLocked.value),
+      },
+      {
+        text: "やり直す",
+        click: redo,
+        disable: computed(() => !canRedo.value || uiLocked.value),
+      },
+      {
+        text: "テキスト読み込み",
+        click: importTextFile,
+        disable: uiLocked,
+      },
+    ];
+
+    const searchButton = (button: ToolbarButtonsType): ButtonContent => {
+      if (button === "空白") {
+        return {
+          text: null,
+        };
+      } else {
+        return usableButtons.find((b) => b.text === button) as ButtonContent;
+      }
+    };
+
+    const headerButtons = computed(() =>
+      toolbarSetting.value.map(searchButton)
+    );
 
     return {
-      uiLocked,
-      canUndo,
-      canRedo,
-      nowPlayingContinuously,
-      undo,
-      redo,
-      playContinuously,
-      stopContinuously,
+      headerButtons,
     };
   },
 });