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.

Sign up for GitHub

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] ライブラリ管理画面で表示される画像及び音声をインターネット上のものを読み込めるようにし、遅延読み込みにする #1560

Merged
merged 5 commits into from
Sep 19, 2023
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
42e9ece
lazy load downloadable library infos
y-chan Sep 17, 2023
301609a
add comments
y-chan Sep 17, 2023
150a7ab
remove vue3-lazyload, using html loading lazy
y-chan Sep 17, 2023
559f058
revert comment
y-chan Sep 17, 2023
c7f810c
improve comment why using lazy load
y-chan Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/components/CharacterTryListenCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@
"
>
<div class="character-item-inner">
<!-- ライブラリ管理機能により、インターネット上の画像を
読み込む場合があるため、loading="lazy"を使う。 -->
y-chan marked this conversation as resolved.
Show resolved Hide resolved
<img
loading="lazy"
:src="characterInfo.metas.styles[selectedStyleIndex || 0].iconPath"
:alt="characterInfo.metas.speakerName"
class="style-icon"
Expand Down
35 changes: 28 additions & 7 deletions src/components/LibraryManageDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,13 +259,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),
Comment on lines +278 to +280
Copy link
Member

Choose a reason for hiding this comment

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

今に始まった話じゃないですが、pathにURLやURIが入ってるの良くないですね･･･ 😇

metas: {
speakerUuid: SpeakerId(speaker.speaker.speakerUuid),
speakerName: speaker.speaker.name,
Expand All @@ -276,13 +288,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,
};
Expand Down Expand Up @@ -407,8 +423,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,
Expand Down