From 8daf10e699f15bb9807ba672cfaa3b14cbc17362 Mon Sep 17 00:00:00 2001
From: Yuto Ashida <y-chan@y-chan.dev>
Date: Wed, 20 Sep 2023 01:21:29 +0900
Subject: [PATCH] =?UTF-8?q?[project-library-manage]=20=E3=83=A9=E3=82=A4?=
 =?UTF-8?q?=E3=83=96=E3=83=A9=E3=83=AA=E7=AE=A1=E7=90=86=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=E3=81=A7=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E7=94=BB?=
 =?UTF-8?q?=E5=83=8F=E5=8F=8A=E3=81=B3=E9=9F=B3=E5=A3=B0=E3=82=92=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=82=BF=E3=83=BC=E3=83=8D=E3=83=83=E3=83=88=E4=B8=8A?=
 =?UTF-8?q?=E3=81=AE=E3=82=82=E3=81=AE=E3=82=92=E8=AA=AD=E3=81=BF=E8=BE=BC?=
 =?UTF-8?q?=E3=82=81=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=80=81?=
 =?UTF-8?q?=E9=81=85=E5=BB=B6=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E3=81=AB?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=20(#1560)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 src/components/CharacterTryListenCard.vue |  3 ++
 src/components/LibraryManageDialog.vue    | 35 ++++++++++++++++++-----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue
index f78738b0f7..08e1abb92a 100644
--- 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
index ea59a93c62..1599710aa9 100644
--- 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,