[project-library-manage] ライブラリ管理画面で表示される画像及び音声をインターネット上のものを読み込めるようにし、…

…遅延読み込みにする (#1560) Co-authored-by: Hiroshiba <[email protected]>
VOICEVOX · Sep 19, 2023 · 8daf10e · 8daf10e
1 parent eca2d28
commit 8daf10e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue
@@ -13,7 +13,10 @@
     "
   >
     <div class="character-item-inner">
+      <!-- ライブラリ管理機能により、インターネット上の画像を大量に
+        読み込む場合があるため、loading="lazy"を使う。 -->
       <img
+        loading="lazy"
         :src="characterInfo.metas.styles[selectedStyleIndex || 0].iconPath"
         :alt="characterInfo.metas.speakerName"
         class="style-icon"

diff --git a/src/components/LibraryManageDialog.vue b/src/components/LibraryManageDialog.vue
@@ -260,13 +260,25 @@ const selectLibraryAndSpeaker = (
   selectedSpeakers.value[libraryId] = speakerId;
 };
 
+const isValidHttpUrl = (url: string): boolean => {
+  try {
+    const newUrl = new URL(url);
+    return newUrl.protocol === "http:" || newUrl.protocol === "https:";
+  } catch (e) {
+    return false;
+  }
+};
+
 const libraryInfoToCharacterInfos = (
   engineId: EngineId,
   libraryInfo: DownloadableLibrary | InstalledLibrary
 ): CharacterInfo[] => {
   return libraryInfo.speakers.map((speaker) => {
+    const portrait = speaker.speakerInfo.portrait;
     return {
-      portraitPath: base64ImageToUri(speaker.speakerInfo.portrait),
+      portraitPath: isValidHttpUrl(portrait)
+        ? portrait
+        : base64ImageToUri(portrait),
       metas: {
         speakerUuid: SpeakerId(speaker.speaker.speakerUuid),
         speakerName: speaker.speaker.name,
@@ -277,13 +289,17 @@ const libraryInfoToCharacterInfos = (
           if (styleInfo === undefined) {
             throw Error("styleInfo === undefined");
           }
+          let portraitPath = styleInfo.portrait;
+          if (portraitPath && !isValidHttpUrl(portraitPath)) {
+            portraitPath = base64ImageToUri(portraitPath);
+          }
           return {
             styleName: style.name,
             styleId: StyleId(style.id),
-            iconPath: base64ImageToUri(styleInfo.icon),
-            portraitPath: styleInfo.portrait
-              ? base64ImageToUri(styleInfo.portrait)
-              : undefined,
+            iconPath: isValidHttpUrl(styleInfo.icon)
+              ? styleInfo.icon
+              : base64ImageToUri(styleInfo.icon),
+            portraitPath,
             engineId,
             voiceSamplePaths: styleInfo.voiceSamples,
           };
@@ -408,8 +424,13 @@ const play = (
 
   const styleInfo = speaker.metas.styles.find((s) => s.styleId === styleId);
   if (!styleInfo) throw new Error("style not found");
-  const voiceSamples = styleInfo.voiceSamplePaths;
-  audio.src = "data:audio/wav;base64," + voiceSamples[index];
+  const voiceSample = styleInfo.voiceSamplePaths[index];
+  // インターネット上の音声はそのままsrcに設定する
+  if (isValidHttpUrl(voiceSample)) {
+    audio.src = voiceSample;
+  } else {
+    audio.src = "data:audio/wav;base64," + voiceSample;
+  }
   audio.play();
   playing.value = {
     speakerUuid,