feat: 音声書き出し時にキャラクターごとの音声ライブラリ利用規約を案内する

src/components/Dialog/Dialog.ts

@@ -2,13 +2,15 @@ import { Dialog, Notify, Loading } from "quasar";
 import SaveAllResultDialog from "./SaveAllResultDialog.vue";
 import QuestionDialog from "./TextDialog/QuestionDialog.vue";
 import MessageDialog from "./TextDialog/MessageDialog.vue";
+import VoiceLibraryPolicyDialog from "./VoiceLibraryPolicyDialog.vue";
 import { DialogType } from "./TextDialog/common";
-import { AudioKey, ConfirmedTips } from "@/type/preload";
+import { ConfirmedTips, CharacterInfo, SpeakerId } from "@/type/preload";
 import {
   AllActions,
   SaveResultObject,
   SaveResult,
   ErrorTypeForSaveAllResultDialog,
+  TermConfirmedAudioKey,
 } from "@/store/type";
 import { DotNotationDispatch } from "@/store/vuex";
 import { withProgress } from "@/store/ui";
@@ -171,47 +173,46 @@ export const showQuestionDialog = async (options: QuestionDialogOptions) => {
 };
 
 export async function generateAndSaveOneAudioWithDialog({
-  audioKey,
+  termConfirmedAudioKey,
   actions,
   filePath,
   disableNotifyOnGenerate,
 }: {
-  audioKey: AudioKey;
+  termConfirmedAudioKey: TermConfirmedAudioKey;
   actions: DotNotationDispatch<AllActions>;
   filePath?: string;
   disableNotifyOnGenerate: boolean;
 }): Promise<void> {
   const result: SaveResultObject = await withProgress(
     actions.GENERATE_AND_SAVE_AUDIO({
-      audioKey,
+      termConfirmedAudioKey,
       filePath,
     }),
     actions,
   );
 
-  if (result == undefined) return;
   notifyResult(result, "audio", actions, disableNotifyOnGenerate);
 }
 
 export async function multiGenerateAndSaveAudioWithDialog({
-  audioKeys,
+  termConfirmedAudioKeys,
   actions,
   dirPath,
   disableNotifyOnGenerate,
 }: {
-  audioKeys: AudioKey[];
+  termConfirmedAudioKeys: TermConfirmedAudioKey[];
   actions: DotNotationDispatch<AllActions>;
   dirPath?: string;
   disableNotifyOnGenerate: boolean;
 }): Promise<void> {
   const result = await withProgress(
     actions.MULTI_GENERATE_AND_SAVE_AUDIO({
-      audioKeys,
+      termConfirmedAudioKeys,
       dirPath,
       callback: (finishedCount) =>
         actions.SET_PROGRESS_FROM_COUNT({
           finishedCount,
-          totalCount: audioKeys.length,
+          totalCount: termConfirmedAudioKeys.length,
         }),
     }),
     actions,
@@ -262,16 +263,19 @@ export async function multiGenerateAndSaveAudioWithDialog({
 }
 
 export async function generateAndConnectAndSaveAudioWithDialog({
+  termConfirmedAudioKeys,
   actions,
   filePath,
   disableNotifyOnGenerate,
 }: {
+  termConfirmedAudioKeys: TermConfirmedAudioKey[];
   actions: DotNotationDispatch<AllActions>;
   filePath?: string;
   disableNotifyOnGenerate: boolean;
 }): Promise<void> {
   const result = await withProgress(
     actions.GENERATE_AND_CONNECT_AND_SAVE_AUDIO({
+      termConfirmedAudioKeys,
       filePath,
       callback: (finishedCount, totalCount) =>
         actions.SET_PROGRESS_FROM_COUNT({ finishedCount, totalCount }),
@@ -298,6 +302,46 @@ export async function connectAndExportTextWithDialog({
   notifyResult(result, "text", actions, disableNotifyOnGenerate);
 }
 
+/**
+ * 音声ライブラリ利用規約ダイアログを表示する。
+ * 確認ボタンを押された場合は確認状況を保存する。
+ */
+export async function showVoiceLibraryPolicyDialog({
+  unconfirmedCharacterInfos,
+  currentConfirmedCharacterIds,
+  actions,
+}: {
+  unconfirmedCharacterInfos: CharacterInfo[];
+  currentConfirmedCharacterIds: SpeakerId[];
+  actions: DotNotationDispatch<AllActions>;
+}): Promise<"confirmed" | "canceled"> {
+  const { promise, resolve } = Promise.withResolvers<
+    "confirmed" | "canceled"
+  >();
+
+  Dialog.create({
+    component: VoiceLibraryPolicyDialog,
+    componentProps: {
+      characterPolicyInfos: unconfirmedCharacterInfos.map((info) => ({
+        id: info.metas.speakerUuid,
+        name: info.metas.speakerName,
+        policy: info.metas.policy,
+        portraitPath: info.portraitPath,
+      })),
+    },
+  })
+    .onOk((confirmedIds: SpeakerId[]) => {
+      void actions.SET_ROOT_MISC_SETTING({
+        key: "termConfirmedCharacterIds",
+        value: [...currentConfirmedCharacterIds, ...confirmedIds],
+      });
+      resolve("confirmed");
+    })
+    .onCancel(() => resolve("canceled"));
+
+  return promise;
+}
+
 // 書き出し成功時の通知を表示
 const showWriteSuccessNotify = ({
   mediaType,

src/components/Dialog/VoiceLibraryPolicyDialog.stories.ts

@@ -0,0 +1,97 @@
+import { userEvent, within, expect, fn } from "storybook/test";
+
+import { Meta, StoryObj } from "@storybook/vue3-vite";
+import VoiceLibraryPolicyDialog from "./VoiceLibraryPolicyDialog.vue";
+import { SpeakerId as toSpeakerId } from "@/type/preload";
+import { getPortraitUrl } from "@/mock/engineMock/characterResourceMock";
+import { uuid4 } from "@/helpers/random";
+
+const testCharacterAId = toSpeakerId(uuid4());
+const testCharacterBId = toSpeakerId(uuid4());
+const testCharacterCId = toSpeakerId(uuid4());
+
+const meta: Meta<typeof VoiceLibraryPolicyDialog> = {
+  component: VoiceLibraryPolicyDialog,
+  args: {
+    modelValue: false,
+    characterPolicyInfos: [
+      {
+        id: testCharacterAId,
+        name: "テストキャラクターA",
+        policy:
+          "markdownテスト。**太字**。\\\n改行。\\\n[リンク](https://example.com)",
+        portraitPath: getPortraitUrl(0),
+      },
+      {
+        id: testCharacterBId,
+        name: "テストキャラクターB",
+        policy: Array(50).fill("長いテキスト").join(""),
+        portraitPath: getPortraitUrl(1),
+      },
+    ],
+    onOk: fn(),
+    onHide: fn(),
+    "onUpdate:modelValue": fn(),
+  },
+  tags: ["!autodocs"], // ダイアログ系はautodocsのプレビューが正しく表示されないので無効化
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Opened: Story = {
+  name: "開いている",
+  args: {
+    modelValue: true,
+  },
+};
+
+export const LongUrl: Story = {
+  name: "極端に長いURL",
+  args: {
+    modelValue: true,
+    characterPolicyInfos: [
+      {
+        id: testCharacterCId,
+        name: "テストキャラクターC",
+        policy:
+          "極端に長いURLのテスト。https://example.com/very/long/path/to/some/policy/document/that/has/many/nested/directories/and/a/very/long/filename/with/query/parameters?param1=value1&param2=value2&param3=value3&param4=value4&param5=value5&param6=value6&param7=value7&param8=value8&param9=value9&param10=value10",
+        portraitPath: getPortraitUrl(2),
+      },
+    ],
+  },
+};
+
+export const Ok: Story = {
+  name: "確認ボタンを押す",
+  args: { ...Opened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const button = canvas.getByRole("button", { name: /確認して続行/ });
+    await userEvent.click(button);
+
+    await expect(args["onOk"]).toBeCalledWith([
+      testCharacterAId,
+      testCharacterBId,
+    ]);
+  },
+};
+
+export const Cancel: Story = {
+  name: "キャンセルボタンを押す",
+  args: { ...Opened.args },
+  play: async ({ args }) => {
+    const canvas = within(document.body); // ダイアログなので例外的にdocument.bodyを使う
+
+    const button = canvas.getByRole("button", { name: /キャンセル/ });
+    await userEvent.click(button);
+
+    await expect(args["onHide"]).toBeCalledWith();
+  },
+};
+
+export const Closed: Story = {
+  name: "閉じている",
+  tags: ["skip-screenshot"],
+};