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

[project-library-manage] 音声ライブラリ管理画面のモックを追加 #1453

Merged

Conversation

y-chan
Copy link
Member

@y-chan y-chan commented Aug 1, 2023

内容

題のとおりです。音声ライブラリ管理画面のモックを追加しました。
実際に音声ライブラリのインストールはできませんが、キャラ音声の試聴はできるようにしておきました。

関連 Issue

スクリーンショット・動画など

image

その他

動作確認に、音声ライブラリ管理機能を使えるようにしたSHAREVOXエンジンを使っています。
以下からダウンロードして使えます。
https://github.com/SHAREVOX/sharevox_engine/releases/tag/0.3.0-preview.1

@y-chan y-chan requested a review from a team as a code owner August 1, 2023 21:08
@y-chan y-chan requested review from Hiroshiba and removed request for a team August 1, 2023 21:08
Co-Authored-By: sevenc-nanashi <59691627+sevenc-nanashi@users.noreply.github.com>
@y-chan y-chan force-pushed the feat/library-mange-ui branch from e5470b9 to 962a3d9 Compare August 2, 2023 02:03
@Hiroshiba
Copy link
Member

おつです! ちょっと関連issueのとこに音声ライブラリのプロジェクトのリンクを貼っときました!

最近忙しいのとプルリクエストが多いのでちょっと見るのが遅れそうに感じています 🙇

@sevenc-nanashi さん
もしよければプルリクエストを見ていただいて、何か気になるところとかあればコメントとかお願いできるとかなり心強いです・・・!
この辺バグがありそうとか、こういう感じにすると良さそうとか・・・!

Copy link
Member

@sevenc-nanashi sevenc-nanashi left a comment

Choose a reason for hiding this comment

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

image
image

背景が置かれる場合を考えると、少しpaddingを足した方が良いように思います。
また、タイトルを横に置くと改行で読みづらいのでこんな感じのほうが良いような気がしました(デザインはよく分かっていませんが)

src/components/CharacterTryListenCard.vue Show resolved Hide resolved
src/components/LibraryManageDialog.vue Show resolved Hide resolved
src/components/LibraryManageDialog.vue Outdated Show resolved Hide resolved
src/components/LibraryManageDialog.vue Outdated Show resolved Hide resolved
src/components/LibraryManageDialog.vue Outdated Show resolved Hide resolved
src/components/LibraryManageDialog.vue Outdated Show resolved Hide resolved
Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

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

試聴できました!!!! 良いですねー!!!!!!

このプルリクエストのゴールとしてはどこにしましょうか?
デザインもしっかりしてからマージするか、一旦デザイン周りは後回しにペンディングしてタスクリストなどに追加しといて一旦マージするかなどの選択肢はありそうです!

とりあえず気になったところとしては @sevenc-nanashi さんがおっしゃっていたところと、あとキャラクターをクリックした時に左にキャラクター欄が出て来るので、最初から何もない空間、あるいは一番左上のキャラクターが表示されていた方がユーザーが驚かないかなと思いました!

Comment on lines +221 to +223
if (!installedLibrary) {
return false;
}
Copy link
Member

Choose a reason for hiding this comment

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

ここってこの条件はありえないという感じですよね。だったらエラーを握りつぶしてしまっていることになるので、throwのが適していると思います!
参考になる記事

Copy link
Member Author

Choose a reason for hiding this comment

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

ここの条件は握り潰しではなく、あり得る条件ですね。
「インストールされていないが、これからインストール予定のライブラリ」がlatestではないのは自明なので、この形は問題ないはずです。

Copy link
Member Author

Choose a reason for hiding this comment

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

コメントを追加してみました!どうでしょうか?

Copy link
Member

Choose a reason for hiding this comment

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

なるほどです! 良いと思います!

ただの気づきですが、状態(latest/installed/notIntalled)と可能なアクション(update/uninstall/install)があって、この2つを変換するだけの関数があると、その関数のテストが書けるんだなーと思いました。
今は状態からアクションの変換をtemplate内でやってるから、状態からレンダリングのテストを統合的に行うテストになるなーと。

src/store/type.ts Outdated Show resolved Hide resolved
Co-authored-by: Nanashi. <sevenc7c@sevenc7c.com>
@y-chan
Copy link
Member Author

y-chan commented Aug 4, 2023

デザイン、名無しさんが挙げられている形が一番すっきりしているように見えました...!

せっかくなのでこのPRでデザインまでやっちゃおうと思います...!

@y-chan
Copy link
Member Author

y-chan commented Aug 4, 2023

image

ひとまずこのような形になりました!(キャラ未選択時)
名無しさんが最初に指摘したキャラ試聴カードのpaddingやmarginが足りないはここでの利用に限った話ではない(元々このコンポーネントが使われていたキャラクター並び替えダイアログでも同様だった)ので、一旦このPRでは無視して別でPRを作りたいと思います。
キャラクター並び替えダイアログよりも余裕がなかったので、少なくともキャラクター並び替えダイアログと同等になるように修正しました

Copy link
Member

@sevenc-nanashi sevenc-nanashi left a comment

Choose a reason for hiding this comment

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

LGTM!

src/components/LibraryManageDialog.vue Outdated Show resolved Hide resolved
Co-authored-by: Nanashi. <sevenc7c@sevenc7c.com>
Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

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

LGTM!!!!

UI面に関して、今は横スクロールでいろんなキャラクターが表示されるようになっていますが、折り返して全キャラが表示されるようになってもいいかもと思いました。
ただ実際はもっともっと数が並ぶはずで、その時にどうなるかわからないので、今は一旦この形がベストなのかなと感じました!

キャラクター表示欄のところ、誰も選択されていない状態で無を表示することを提案しましたが、実際見てみるとさすがに何も表示されてないのはよくないのかもしれないとちょっと思いました。。。
最終的なデザインの調整で @y-chan さんの最初のプルリクエストの感じに戻させていただくかもしれません。すいません。。 🙇
(一番左上のキャラクターの自動選択が可能そうだったらそっちにしたみです)

@Hiroshiba Hiroshiba merged commit 0fecb29 into VOICEVOX:project-library-manage Aug 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants