複数エンジン対応：エンジンのアイコンをキャラアイコンの近くに表示するように (#942)

* Add: エンジンのアイコンをキャラアイコンの近くに表示するように * Change: StyleInfoにengineIdを持たせるように * Delete: 消し忘れを削除 * Change: アイコンだけ渡すように * Delete: 不要なtype assertionを削除
VOICEVOX · Sep 18, 2022 · 9511659 · 9511659
1 parent 9b4fb82
commit 9511659
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/src/components/AudioCell.vue b/src/components/AudioCell.vue
@@ -58,6 +58,22 @@
                       getDefaultStyle(characterInfo.metas.speakerUuid).iconPath
                     "
                   />
+                  <q-avatar
+                    class="engine-icon"
+                    rounded
+                    v-if="
+                      isMultipleEngine && characterInfo.metas.styles.length < 2
+                    "
+                  >
+                    <img
+                      :src="
+                        engineIcons[
+                          getDefaultStyle(characterInfo.metas.speakerUuid)
+                            .engineId
+                        ]
+                      "
+                    />
+                  </q-avatar>
                 </q-avatar>
                 <div>{{ characterInfo.metas.speakerName }}</div>
               </q-btn>
@@ -114,6 +130,20 @@
                               characterInfo.metas.styles[styleIndex].iconPath
                             "
                           />
+                          <q-avatar
+                            rounded
+                            class="engine-icon"
+                            v-if="isMultipleEngine"
+                          >
+                            <img
+                              :src="
+                                engineIcons[
+                                  characterInfo.metas.styles[styleIndex]
+                                    .engineId
+                                ]
+                              "
+                            />
+                          </q-avatar>
                         </q-avatar>
                         <q-item-section v-if="style.styleName"
                           >{{ characterInfo.metas.speakerName }} ({{
@@ -433,6 +463,18 @@ export default defineComponent({
       textfield.value.focus();
     };
 
+    // 複数エンジン
+    const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
+
+    const engineIcons = computed(() =>
+      Object.fromEntries(
+        store.state.engineIds.map((engineId) => [
+          engineId,
+          store.state.engineInfos[engineId].iconData,
+        ])
+      )
+    );
+
     return {
       userOrderedCharacterInfos,
       isInitializingSpeaker,
@@ -447,6 +489,8 @@ export default defineComponent({
       reassignSubMenuOpen,
       isActiveAudioCell,
       audioTextBuffer,
+      isMultipleEngine,
+      engineIcons,
       setAudioTextBuffer,
       pushAudioText,
       changeStyleId,
@@ -562,5 +606,16 @@ export default defineComponent({
   .opened-character-item {
     background-color: rgba(colors.$primary-rgb, 0.2);
   }
+  .engine-icon {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translate(50%, 50%);
+
+    :deep(img) {
+      width: 27.5% !important;
+      height: 27.5% !important;
+    }
+  }
 }
 </style>
diff --git a/src/store/audio.ts b/src/store/audio.ts
@@ -644,6 +644,7 @@ export const audioStore: VoiceVoxStoreOptions<
             styles[i] = {
               styleName: style.name,
               styleId: style.id,
+              engineId,
               iconPath: base64ToUrl(styleInfo.icon, "image/png"),
               voiceSamplePaths: voiceSamples,
             };

diff --git a/src/type/preload.ts b/src/type/preload.ts
@@ -106,6 +106,7 @@ export type StyleInfo = {
   styleName?: string;
   styleId: number;
   iconPath: string;
+  engineId: string;
   voiceSamplePaths: string[];
 };