Add: ソングの書き出しダイアログを追加

src/backend/common/ConfigManager.ts

@@ -255,6 +255,13 @@ const migrations: [string, (store: Record<string, unknown>) => unknown][] = [
         delete experimentalSetting.shouldApplyDefaultPresetOnVoiceChanged;
       }
 
+      // 書き出しテンプレートから拡張子を削除
+      const savingSetting = config.savingSetting as { fileNamePattern: string };
+      savingSetting.fileNamePattern = savingSetting.fileNamePattern.replace(
+        ".wav",
+        "",
+      );
+
       return config;
     },
   ],

src/backend/electron/main.ts

@@ -584,7 +584,12 @@ registerIpcMainHandle<IpcMainHandle>({
       dialog.showSaveDialog(win, {
         title,
         defaultPath,
-        filters: [{ name: "Wave File", extensions: ["wav"] }],
+        filters: [
+          {
+            name: "WAVファイル",
+            extensions: ["wav"],
+          },
+        ],
         properties: ["createDirectory"],
       }),
     );
@@ -872,7 +877,10 @@ registerIpcMainHandle<IpcMainHandle>({
 
   WRITE_FILE: (_, { filePath, buffer }) => {
     try {
-      fs.writeFileSync(filePath, new DataView(buffer));
+      fs.writeFileSync(
+        filePath,
+        new DataView(buffer instanceof Uint8Array ? buffer.buffer : buffer),
+      );
       return success(undefined);
     } catch (e) {
       // throwだと`.code`の情報が消えるのでreturn

src/components/Dialog/AllDialog.vue

@@ -22,6 +22,7 @@
   <UpdateNotificationDialogContainer
     :canOpenDialog="canOpenNotificationDialog"
   />
+  <ExportSongAudioDialog v-model="isExportSongAudioDialogOpen" />
   <ImportSongProjectDialog v-model="isImportSongProjectDialogOpenComputed" />
 </template>
 
@@ -39,6 +40,7 @@ import DictionaryManageDialog from "@/components/Dialog/DictionaryManageDialog.v
 import EngineManageDialog from "@/components/Dialog/EngineManageDialog.vue";
 import UpdateNotificationDialogContainer from "@/components/Dialog/UpdateNotificationDialog/Container.vue";
 import ImportSongProjectDialog from "@/components/Dialog/ImportSongProjectDialog.vue";
+import ExportSongAudioDialog from "@/components/Dialog/ExportSongAudioDialog/Container.vue";
 import { useStore } from "@/store";
 import { filterCharacterInfosByStyleType } from "@/store/utility";
 
@@ -159,6 +161,15 @@ const canOpenNotificationDialog = computed(() => {
   );
 });
 
+// ソングのオーディオエクスポート時の設定ダイアログ
+const isExportSongAudioDialogOpen = computed({
+  get: () => store.state.isExportSongAudioDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isExportSongAudioDialogOpen: val,
+    }),
+});
+
 // ソングのプロジェクトファイルのインポート時の設定ダイアログ
 const isImportSongProjectDialogOpenComputed = computed({
   get: () => store.state.isImportSongProjectDialogOpen,

src/components/Dialog/Dialog.ts

@@ -10,7 +10,7 @@ import {
 import { DotNotationDispatch } from "@/store/vuex";
 import { withProgressDotNotation as withProgress } from "@/store/ui";
 
-type MediaType = "audio" | "text";
+export type MediaType = "audio" | "text";
 
 export type CommonDialogResult = "OK" | "CANCEL";
 export type CommonDialogOptions = {
@@ -160,18 +160,8 @@ export async function generateAndSaveOneAudioWithDialog({
     actions,
   );
 
-  if (result.result === "CANCELED") return;
-
-  if (result.result === "SUCCESS") {
-    if (disableNotifyOnGenerate) return;
-    // 書き出し成功時に通知をする
-    showWriteSuccessNotify({
-      mediaType: "audio",
-      actions,
-    });
-  } else {
-    showWriteErrorDialog({ mediaType: "audio", result, actions });
-  }
+  if (result == undefined) return;
+  notifyResult(result, "audio", actions, disableNotifyOnGenerate);
 }
 
 export async function multiGenerateAndSaveAudioWithDialog({
@@ -260,17 +250,8 @@ export async function generateAndConnectAndSaveAudioWithDialog({
     actions,
   );
 
-  if (result == undefined || result.result === "CANCELED") return;
-
-  if (result.result === "SUCCESS") {
-    if (disableNotifyOnGenerate) return;
-    showWriteSuccessNotify({
-      mediaType: "audio",
-      actions,
-    });
-  } else {
-    showWriteErrorDialog({ mediaType: "audio", result, actions });
-  }
+  if (result == undefined) return;
+  notifyResult(result, "audio", actions, disableNotifyOnGenerate);
 }
 
 export async function connectAndExportTextWithDialog({
@@ -285,18 +266,8 @@ export async function connectAndExportTextWithDialog({
   const result = await actions.CONNECT_AND_EXPORT_TEXT({
     filePath,
   });
-
-  if (result == undefined || result.result === "CANCELED") return;
-
-  if (result.result === "SUCCESS") {
-    if (disableNotifyOnGenerate) return;
-    showWriteSuccessNotify({
-      mediaType: "text",
-      actions,
-    });
-  } else {
-    showWriteErrorDialog({ mediaType: "text", result, actions });
-  }
+  if (!result) return;
+  notifyResult(result, "text", actions, disableNotifyOnGenerate);
 }
 
 // 書き出し成功時の通知を表示
@@ -352,6 +323,25 @@ const showWriteErrorDialog = ({
   }
 };
 
+/** 保存結果に応じてユーザーに通知する。キャンセルされた場合は何もしない。 */
+export const notifyResult = (
+  result: SaveResultObject,
+  mediaType: MediaType,
+  actions: DotNotationDispatch<AllActions>,
+  disableNotifyOnGenerate: boolean,
+) => {
+  if (result.result === "CANCELED") return;
+  if (result.result === "SUCCESS") {
+    if (disableNotifyOnGenerate) return;
+    showWriteSuccessNotify({
+      mediaType,
+      actions,
+    });
+  } else {
+    showWriteErrorDialog({ mediaType, result, actions });
+  }
+};
+
 const NOTIFY_TIMEOUT = 7000;
 
 export const showNotifyAndNotShowAgainButton = (

src/components/Dialog/ExportSongAudioDialog/BaseCell.vue

@@ -0,0 +1,41 @@
+<template>
+  <QCardActions :class="props.class">
+    <div>{{ title }}</div>
+    <div :aria-label="description">
+      <QIcon name="help_outline" size="sm" class="help-hover-icon">
+        <QTooltip
+          :delay="500"
+          anchor="center right"
+          self="center left"
+          transitionShow="jump-right"
+          transitionHide="jump-left"
+        >
+          {{ description }}
+        </QTooltip>
+      </QIcon>
+    </div>
+    <QSpace />
+    <slot />
+  </QCardActions>
+</template>
+
+<script setup lang="ts">
+export type Props = {
+  title: string;
+  description: string;
+  class?: unknown; // 型はquasarの定義を真似ている
+};
+
+const props = defineProps<Props>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/visually-hidden" as visually-hidden;
+@use "@/styles/colors" as colors;
+
+.help-hover-icon {
+  margin-left: 6px;
+  color: colors.$display;
+  opacity: 0.5;
+}
+</style>

src/components/Dialog/ExportSongAudioDialog/Container.vue

@@ -0,0 +1,36 @@
+<template>
+  <Presentation v-model="modelValue" @exportAudio="handleExportAudio" />
+</template>
+
+<script setup lang="ts">
+import { notifyResult } from "../Dialog";
+import Presentation, { ExportTarget } from "./Presentation.vue";
+import { useStore } from "@/store";
+import { SaveResultObject, SongExportSetting } from "@/store/type";
+
+defineOptions({
+  name: "ExportSongAudioDialog",
+});
+
+const modelValue = defineModel<boolean>();
+const store = useStore();
+
+const handleExportAudio = async (
+  target: ExportTarget,
+  setting: SongExportSetting,
+) => {
+  let result: SaveResultObject;
+  if (target === "master") {
+    result = await store.dispatch("EXPORT_AUDIO_FILE", { setting });
+  } else {
+    result = await store.dispatch("EXPORT_STEM_AUDIO_FILE", { setting });
+  }
+
+  notifyResult(
+    result,
+    "audio",
+    store.actions,
+    store.state.confirmedTips.notifyOnGenerate,
+  );
+};
+</script>