Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ENH: モーフィングUIの実装 #1030

Merged
merged 15 commits into from
Jan 16, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/AudioDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -502,9 +502,13 @@ export default defineComponent({
audioKey: props.activeAudioKey,
});
} catch (e) {
let msg: string | undefined;
if (e instanceof Error && e.message !== "") {
msg = e.message;
}
$q.dialog({
title: "再生に失敗しました",
message: "エンジンの再起動をお試しください。",
message: msg ?? "エンジンの再起動をお試しください。",
ok: {
label: "閉じる",
flat: true,
Expand Down
22 changes: 15 additions & 7 deletions src/components/Dialog.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,12 @@ export async function generateAndSaveOneAudioWithDialog({
}
break;
case "ENGINE_ERROR":
msg =
"エンジンのエラーによって失敗しました。エンジンの再起動をお試しください。";
if (result.errorMessage) {
msg = result.errorMessage;
} else {
msg =
"エンジンのエラーによって失敗しました。エンジンの再起動をお試しください。";
}
break;
}
quasarDialog({
Expand Down Expand Up @@ -83,7 +87,7 @@ export async function generateAndSaveAllAudioWithDialog({

const successArray: Array<string | undefined> = [];
const writeErrorArray: Array<WriteErrorTypeForSaveAllResultDialog> = [];
const engineErrorArray: Array<string | undefined> = [];
const engineErrorArray: Array<WriteErrorTypeForSaveAllResultDialog> = [];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

暫定的に既存の型をそのまま流用。
エラーダイアログを出す方針が確定したらWriteErrorEngineError両方で使える型名に変更するか新しく型を定義する。


if (result) {
for (const item of result) {
Expand All @@ -105,7 +109,7 @@ export async function generateAndSaveAllAudioWithDialog({
writeErrorArray.push({ path: path, message: msg });
break;
case "ENGINE_ERROR":
engineErrorArray.push(path);
engineErrorArray.push({ path: path, message: msg });
break;
}
}
Expand Down Expand Up @@ -154,15 +158,19 @@ export async function generateAndConnectAndSaveAudioWithDialog({
let msg = "";
switch (result.result) {
case "WRITE_ERROR":
if (result.errorMessage) {
if (result.errorMessage != undefined) {
msg = result.errorMessage;
} else {
msg = "何らかの理由で書き出しに失敗しました。ログを参照してください。";
}
break;
case "ENGINE_ERROR":
msg =
"エンジンのエラーによって失敗しました。エンジンの再起動をお試しください。";
if (result.errorMessage != undefined) {
msg = result.errorMessage;
} else {
msg =
"エンジンのエラーによって失敗しました。エンジンの再起動をお試しください。";
}
break;
}

Expand Down
5 changes: 3 additions & 2 deletions src/components/DictionaryManageDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -477,12 +477,12 @@ export default defineComponent({
audioItem,
});
if (!blob) {
blob = await createUILockAction(
const audioResult = await createUILockAction(
store.dispatch("GENERATE_AUDIO_FROM_AUDIO_ITEM", {
audioItem,
})
);
if (!blob) {
if (audioResult.result !== "SUCCESS") {
nowGenerating.value = false;
$q.dialog({
title: "生成に失敗しました",
Expand All @@ -495,6 +495,7 @@ export default defineComponent({
});
return;
}
blob = audioResult.blob;
}
nowGenerating.value = false;
nowPlaying.value = true;
Expand Down
8 changes: 6 additions & 2 deletions src/components/HeaderBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,14 @@ export default defineComponent({
const playContinuously = async () => {
try {
await store.dispatch("PLAY_CONTINUOUSLY_AUDIO");
} catch {
} catch (e) {
let msg: string | undefined;
if (e instanceof Error && e.message !== "") {
msg = e.message;
}
$q.dialog({
title: "再生に失敗しました",
message: "エンジンの再起動をお試しください。",
message: msg ?? "エンジンの再起動をお試しください。",
ok: {
label: "閉じる",
flat: true,
Expand Down
201 changes: 107 additions & 94 deletions src/components/SaveAllResultDialog.vue
Original file line number Diff line number Diff line change
@@ -1,94 +1,107 @@
<template>
<q-dialog persistent ref="dialogRef">
<!-- 仮デザイン -->
<q-layout container class="q-dialog-plugin bg-background">
<q-header>
<q-toolbar>
<q-toolbar-title class="text-display"
>音声書き出し結果</q-toolbar-title
>
</q-toolbar>
<q-space />
</q-header>
<q-page-container>
<q-page>
<q-list separator v-if="writeErrorArray.length > 0">
<div class="error">失敗(書き込みエラー):</div>
<q-item v-for="(value, index) in writeErrorArray" :key="index">
<q-item-section>
<q-item-label>{{ value.path }}</q-item-label>
<q-item-label>詳細:{{ value.message }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-list separator v-if="engineErrorArray.length > 0">
<div class="error">失敗(エンジンエラー):</div>
<q-item v-for="(value, index) in engineErrorArray" :key="index">
<q-item-section>
<q-item-label>{{ value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-list separator v-if="successArray.length > 0">
<div class="success">成功:</div>
<q-item v-for="(value, index) in successArray" :key="index">
<q-item-section>
<q-item-label>{{ value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-page>
</q-page-container>
<q-footer>
<q-toolbar>
<q-space />
<q-btn flat dense align="right" @click="close" label="閉じる" />
</q-toolbar>
</q-footer>
</q-layout>
</q-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useDialogPluginComponent } from "quasar";

export default defineComponent({
name: "SaveAllResultDialog",
props: {
successArray: Array,
writeErrorArray: Array,
engineErrorArray: Array,
},
emits: {
...useDialogPluginComponent.emits,
},
setup() {
const { dialogRef, onDialogOK } = useDialogPluginComponent();
const close = () => onDialogOK();
return {
dialogRef,
close,
};
},
});
</script>

<style scoped lang="scss">
@use '@/styles/colors' as colors;

.q-page-container {
margin-top: 1em;
}

.q-item {
border-bottom: solid 0.1rem colors.$primary;
}

.success {
color: green;
}
.error {
color: red;
}
</style>
<template>
<q-dialog persistent ref="dialogRef">
<!-- 仮デザイン -->
<q-layout container class="q-dialog-plugin bg-background">
<q-header>
<q-toolbar>
<q-toolbar-title class="text-display"
>音声書き出し結果</q-toolbar-title
>
</q-toolbar>
<q-space />
</q-header>
<q-page-container>
<q-page>
<q-list separator v-if="writeErrorArray.length > 0">
<div class="error">失敗(書き込みエラー):</div>
<q-item v-for="(value, index) in writeErrorArray" :key="index">
<q-item-section>
<q-item-label>{{ value.path }}</q-item-label>
<q-item-label>詳細:{{ value.message }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-list separator v-if="engineErrorArray.length > 0">
<div class="error">失敗(エンジンエラー):</div>
<q-item v-for="(value, index) in engineErrorArray" :key="index">
<q-item-section>
<q-item-label>{{ value.path }}</q-item-label>
<q-item-label v-if="value.message"
>詳細:{{ value.message }}</q-item-label
Comment on lines +27 to +30
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

すみません。
何故かcrlfの変換をかけてしまいました。

エンジンエラーの詳細を追加しました。

>
</q-item-section>
</q-item>
</q-list>
<q-list separator v-if="successArray.length > 0">
<div class="success">成功:</div>
<q-item v-for="(value, index) in successArray" :key="index">
<q-item-section>
<q-item-label>{{ value }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-page>
</q-page-container>
<q-footer>
<q-toolbar>
<q-space />
<q-btn flat dense align="right" @click="close" label="閉じる" />
</q-toolbar>
</q-footer>
</q-layout>
</q-dialog>
</template>

<script lang="ts">
import { WriteErrorTypeForSaveAllResultDialog } from "@/store/type";
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

型付けのためのインポート追加

import { useDialogPluginComponent } from "quasar";
import { defineComponent, PropType } from "vue";

export default defineComponent({
name: "SaveAllResultDialog",
props: {
successArray: {
type: Array as PropType<string | undefined[]>,
required: true,
},
writeErrorArray: {
type: Array as PropType<WriteErrorTypeForSaveAllResultDialog[]>,
required: true,
},
engineErrorArray: {
type: Array as PropType<WriteErrorTypeForSaveAllResultDialog[]>,
required: true,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

propsを型付け

},
emits: {
...useDialogPluginComponent.emits,
},
setup() {
const { dialogRef, onDialogOK } = useDialogPluginComponent();
const close = () => onDialogOK();
return {
dialogRef,
close,
};
},
});
</script>

<style scoped lang="scss">
@use '@/styles/colors' as colors;

.q-page-container {
margin-top: 1em;
}

.q-item {
border-bottom: solid 0.1rem colors.$primary;
}

.success {
color: green;
}
.error {
color: red;
}
</style>
Loading