[project-s] キャラクターメニューの調整

src/components/Sing/CharacterMenuButton.vue

@@ -1,6 +1,6 @@
 <template>
   <q-btn flat class="q-pa-none">
-    <slot />
+    <slot></slot>
     <q-menu
       class="character-menu"
       transition-show="none"
@@ -86,7 +86,9 @@
                 >
                   <q-list>
                     <q-item
-                      v-for="(style, styleIndex) in characterInfo.metas.styles"
+                      v-for="(style, styleIndex) in getSingingStyles(
+                        characterInfo
+                      )"
                       :key="styleIndex"
                       v-close-popup
                       clickable
@@ -104,27 +106,21 @@
                           no-spinner
                           no-transition
                           :ratio="1"
-                          :src="characterInfo.metas.styles[styleIndex].iconPath"
+                          :src="style.iconPath"
                         />
                         <q-avatar
                           v-if="isMultipleEngine"
                           rounded
                           class="engine-icon"
                         >
-                          <img
-                            :src="
-                              engineIcons[
-                                characterInfo.metas.styles[styleIndex].engineId
-                              ]
-                            "
-                          />
+                          <img :src="engineIcons[style.engineId]" />
                         </q-avatar>
                       </q-avatar>
-                      <q-item-section v-if="style.styleName"
-                        >{{ characterInfo.metas.speakerName }} ({{
-                          style.styleName
-                        }})</q-item-section
-                      >
+                      <q-item-section v-if="style.styleName">
+                        {{ characterInfo.metas.speakerName }} ({{
+                          getStyleDescription(style)
+                        }})
+                      </q-item-section>
                       <q-item-section v-else>{{
                         characterInfo.metas.speakerName
                       }}</q-item-section>
@@ -145,17 +141,28 @@ import { defineComponent, computed, ref } from "vue";
 import { debounce } from "quasar";
 import { useStore } from "@/store";
 import { base64ImageToUri } from "@/helpers/imageHelper";
-import { SpeakerId, StyleId } from "@/type/preload";
+import { CharacterInfo, SpeakerId, StyleId, StyleInfo } from "@/type/preload";
+import { getStyleDescription } from "@/sing/viewHelper";
 
 export default defineComponent({
   name: "CharacterMenuButton",
 
   setup() {
     const store = useStore();
 
-    const userOrderedCharacterInfos = computed(
-      () => store.getters.USER_ORDERED_CHARACTER_INFOS
-    );
+    const isSingingStyle = (styleInfo: StyleInfo) => {
+      return (
+        styleInfo.styleType === "humming" ||
+        styleInfo.styleType === "sing_teacher"
+      );
+    };
+
+    const userOrderedCharacterInfos = computed(() => {
+      return store.getters.USER_ORDERED_CHARACTER_INFOS?.filter(
+        (characterInfo) =>
+          characterInfo.metas.styles.some((value) => isSingingStyle(value))
+      );
+    });
 
     const subMenuOpenFlags = ref(
       [...Array(userOrderedCharacterInfos.value?.length)].map(() => false)
@@ -207,6 +214,12 @@ export default defineComponent({
       return defaultStyle;
     };
 
+    const getSingingStyles = (characterInfo: CharacterInfo) => {
+      return characterInfo.metas.styles.filter((value) =>
+        isSingingStyle(value)
+      );
+    };
+
     const selectedCharacterInfo = computed(() => {
       if (
         userOrderedCharacterInfos.value == undefined ||
@@ -250,6 +263,8 @@ export default defineComponent({
       reassignSubMenuOpen,
       changeStyleId,
       getDefaultStyle,
+      getSingingStyles,
+      getStyleDescription,
       selectedCharacterInfo,
       selectedSpeakerUuid,
       selectedStyleId,

src/components/Sing/ToolBar.vue

@@ -14,7 +14,7 @@
             {{ selectedCharacterName }}
           </div>
           <div class="character-style">
-            {{ selectedCharacterStyle }}
+            {{ selectedCharacterStyleDescription }}
           </div>
         </div>
         <q-icon
@@ -124,6 +124,7 @@ import {
   isValidBpm,
 } from "@/sing/domain";
 import CharacterMenuButton from "@/components/Sing/CharacterMenuButton.vue";
+import { getStyleDescription } from "@/sing/viewHelper";
 
 export default defineComponent({
   name: "SingToolBar",
@@ -150,13 +151,14 @@ export default defineComponent({
     const selectedCharacterName = computed(() => {
       return selectedCharacterInfo.value?.metas.speakerName;
     });
-    const selectedCharacterStyle = computed(() => {
-      return selectedCharacterInfo.value?.metas.styles.find((style) => {
+    const selectedCharacterStyleDescription = computed(() => {
+      const style = selectedCharacterInfo.value?.metas.styles.find((style) => {
         return (
           style.styleId === store.state.singer?.styleId &&
           style.engineId === store.state.singer?.engineId
         );
-      })?.styleName;
+      });
+      return style != undefined ? getStyleDescription(style) : "";
     });
     const selectedStyleIconPath = computed(() => {
       const styles = selectedCharacterInfo.value?.metas.styles;
@@ -328,7 +330,7 @@ export default defineComponent({
     return {
       uiLocked,
       selectedCharacterName,
-      selectedCharacterStyle,
+      selectedCharacterStyleDescription,
       selectedStyleIconPath,
       bpmInputBuffer,
       beatsInputBuffer,

src/sing/viewHelper.ts

@@ -1,3 +1,5 @@
+import { StyleInfo } from "@/type/preload";
+
 const BASE_X_PER_QUARTER_NOTE = 120;
 const BASE_Y_PER_SEMITONE = 30;
 
@@ -97,3 +99,20 @@ export const keyInfos = [...Array(128)]
     };
   })
   .reverse();
+
+export const getStyleDescription = (style: StyleInfo) => {
+  const description: string[] = [];
+  if (style.styleType === "talk") {
+    description.push("トーク");
+  } else if (style.styleType === "humming") {
+    description.push("ハミング");
+  } else if (style.styleType === "sing_teacher") {
+    description.push("歌");
+  } else {
+    throw new Error("Unknown style type.");
+  }
+  if (style.styleName != undefined) {
+    description.push(style.styleName);
+  }
+  return description.join("・");
+};

src/store/audio.ts

@@ -335,6 +335,7 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
           styles[i] = {
             styleName: style.name,
             styleId: StyleId(style.id),
+            styleType: style.type,
             engineId,
             iconPath: base64ImageToUri(styleInfo.icon),
             portraitPath:

src/type/preload.ts

@@ -253,9 +253,12 @@ export type AppInfos = {
   version: string;
 };
 
+export type StyleType = "talk" | "humming" | "sing_teacher";
+
 export type StyleInfo = {
   styleName?: string;
   styleId: StyleId;
+  styleType?: StyleType;
   iconPath: string;
   portraitPath: string | undefined;
   engineId: EngineId;