From 42e9eceaef765ace083b5ac98a73dd0a948da276 Mon Sep 17 00:00:00 2001 From: y-chan Date: Sun, 17 Sep 2023 14:05:04 +0900 Subject: [PATCH 1/5] lazy load downloadable library infos --- package-lock.json | 59 +++++++++++++++++++++++ package.json | 1 + src/components/CharacterTryListenCard.vue | 2 +- src/components/LibraryManageDialog.vue | 36 +++++++++++--- src/main.ts | 2 + 5 files changed, 91 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 40113557a2..275833d7a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "uuid": "9.0.0", "vue": "3.2.45", "vue-router": "4.0.8", + "vue3-lazyload": "0.3.8", "vuedraggable": "4.1.0", "vuex": "4.0.2", "zod": "3.20.2", @@ -14110,6 +14111,48 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/vue3-lazyload": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.3.8.tgz", + "integrity": "sha512-UiJHRT7mzry102WbhtrRgJh+f8Z8u4Z+H1RU4dvPmQeq7wFSDFxZB9iJOWGihH2FscXN/8rMGLDOQJAmjwqpCg==", + "dependencies": { + "vue-demi": "^0.12.5" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^2.0.0 || >=3.0.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, + "node_modules/vue3-lazyload/node_modules/vue-demi": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz", + "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vuedraggable": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", @@ -25343,6 +25386,22 @@ } } }, + "vue3-lazyload": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.3.8.tgz", + "integrity": "sha512-UiJHRT7mzry102WbhtrRgJh+f8Z8u4Z+H1RU4dvPmQeq7wFSDFxZB9iJOWGihH2FscXN/8rMGLDOQJAmjwqpCg==", + "requires": { + "vue-demi": "^0.12.5" + }, + "dependencies": { + "vue-demi": { + "version": "0.12.5", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz", + "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==", + "requires": {} + } + } + }, "vuedraggable": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", diff --git a/package.json b/package.json index 57e188649a..a1d886e9d1 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "uuid": "9.0.0", "vue": "3.2.45", "vue-router": "4.0.8", + "vue3-lazyload": "0.3.8", "vuedraggable": "4.1.0", "vuex": "4.0.2", "zod": "3.20.2", diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue index f78738b0f7..f6de9d8419 100644 --- a/src/components/CharacterTryListenCard.vue +++ b/src/components/CharacterTryListenCard.vue @@ -14,7 +14,7 @@ >
diff --git a/src/components/LibraryManageDialog.vue b/src/components/LibraryManageDialog.vue index d2e820bb47..d4e43f515a 100644 --- a/src/components/LibraryManageDialog.vue +++ b/src/components/LibraryManageDialog.vue @@ -36,7 +36,7 @@ :breakpoint="0" >
- +
@@ -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), metas: { speakerUuid: SpeakerId(speaker.speaker.speakerUuid), speakerName: speaker.speaker.name, @@ -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, }; @@ -407,8 +423,12 @@ 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]; + if (isValidHttpUrl(voiceSample)) { + audio.src = voiceSample; + } else { + audio.src = "data:audio/wav;base64," + voiceSample; + } audio.play(); playing.value = { speakerUuid, diff --git a/src/main.ts b/src/main.ts index 90039b663d..df625340f5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,6 +2,7 @@ import { createApp } from "vue"; import { createGtm } from "@gtm-support/vue-gtm"; import { Quasar, Dialog, Loading, Notify } from "quasar"; import iconSet from "quasar/icon-set/material-icons"; +import VueLazyLoad from "vue3-lazyload"; import App from "./App.vue"; import router from "./router"; import { store, storeKey } from "./store"; @@ -44,4 +45,5 @@ createApp(App) }) .use(ipcMessageReceiver, { store }) .use(markdownItPlugin) + .use(VueLazyLoad) .mount("#app"); From 301609aaebb77886ebed6782da834eac08d9f2f8 Mon Sep 17 00:00:00 2001 From: y-chan Date: Sun, 17 Sep 2023 14:23:28 +0900 Subject: [PATCH 2/5] add comments --- src/components/CharacterTryListenCard.vue | 2 ++ src/components/LibraryManageDialog.vue | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue index f6de9d8419..97afbe6ad3 100644 --- a/src/components/CharacterTryListenCard.vue +++ b/src/components/CharacterTryListenCard.vue @@ -13,6 +13,8 @@ " >
+
+
@@ -424,6 +425,7 @@ const play = ( const styleInfo = speaker.metas.styles.find((s) => s.styleId === styleId); if (!styleInfo) throw new Error("style not found"); const voiceSample = styleInfo.voiceSamplePaths[index]; + // インターネット上の音声はそのままsrcに設定する if (isValidHttpUrl(voiceSample)) { audio.src = voiceSample; } else { From 150a7ab0f45fd79d02ca71e826c9a65fac8321de Mon Sep 17 00:00:00 2001 From: y-chan Date: Sun, 17 Sep 2023 20:52:54 +0900 Subject: [PATCH 3/5] remove vue3-lazyload, using html loading lazy --- package-lock.json | 59 ----------------------- package.json | 1 - src/components/CharacterTryListenCard.vue | 5 +- src/components/LibraryManageDialog.vue | 3 +- src/main.ts | 2 - 5 files changed, 3 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index 275833d7a9..40113557a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,6 @@ "uuid": "9.0.0", "vue": "3.2.45", "vue-router": "4.0.8", - "vue3-lazyload": "0.3.8", "vuedraggable": "4.1.0", "vuex": "4.0.2", "zod": "3.20.2", @@ -14111,48 +14110,6 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, - "node_modules/vue3-lazyload": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.3.8.tgz", - "integrity": "sha512-UiJHRT7mzry102WbhtrRgJh+f8Z8u4Z+H1RU4dvPmQeq7wFSDFxZB9iJOWGihH2FscXN/8rMGLDOQJAmjwqpCg==", - "dependencies": { - "vue-demi": "^0.12.5" - }, - "peerDependencies": { - "@vue/composition-api": "^1.0.0-rc.1", - "vue": "^2.0.0 || >=3.0.0" - }, - "peerDependenciesMeta": { - "@vue/composition-api": { - "optional": true - } - } - }, - "node_modules/vue3-lazyload/node_modules/vue-demi": { - "version": "0.12.5", - "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz", - "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==", - "hasInstallScript": true, - "bin": { - "vue-demi-fix": "bin/vue-demi-fix.js", - "vue-demi-switch": "bin/vue-demi-switch.js" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - }, - "peerDependencies": { - "@vue/composition-api": "^1.0.0-rc.1", - "vue": "^3.0.0-0 || ^2.6.0" - }, - "peerDependenciesMeta": { - "@vue/composition-api": { - "optional": true - } - } - }, "node_modules/vuedraggable": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", @@ -25386,22 +25343,6 @@ } } }, - "vue3-lazyload": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/vue3-lazyload/-/vue3-lazyload-0.3.8.tgz", - "integrity": "sha512-UiJHRT7mzry102WbhtrRgJh+f8Z8u4Z+H1RU4dvPmQeq7wFSDFxZB9iJOWGihH2FscXN/8rMGLDOQJAmjwqpCg==", - "requires": { - "vue-demi": "^0.12.5" - }, - "dependencies": { - "vue-demi": { - "version": "0.12.5", - "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz", - "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==", - "requires": {} - } - } - }, "vuedraggable": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz", diff --git a/package.json b/package.json index a1d886e9d1..57e188649a 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "uuid": "9.0.0", "vue": "3.2.45", "vue-router": "4.0.8", - "vue3-lazyload": "0.3.8", "vuedraggable": "4.1.0", "vuex": "4.0.2", "zod": "3.20.2", diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue index 97afbe6ad3..71358cc90b 100644 --- a/src/components/CharacterTryListenCard.vue +++ b/src/components/CharacterTryListenCard.vue @@ -13,10 +13,9 @@ " >
- diff --git a/src/components/LibraryManageDialog.vue b/src/components/LibraryManageDialog.vue index 6f0d02ad28..951ce9faf2 100644 --- a/src/components/LibraryManageDialog.vue +++ b/src/components/LibraryManageDialog.vue @@ -36,8 +36,7 @@ :breakpoint="0" >
- - +
diff --git a/src/main.ts b/src/main.ts index df625340f5..90039b663d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,7 +2,6 @@ import { createApp } from "vue"; import { createGtm } from "@gtm-support/vue-gtm"; import { Quasar, Dialog, Loading, Notify } from "quasar"; import iconSet from "quasar/icon-set/material-icons"; -import VueLazyLoad from "vue3-lazyload"; import App from "./App.vue"; import router from "./router"; import { store, storeKey } from "./store"; @@ -45,5 +44,4 @@ createApp(App) }) .use(ipcMessageReceiver, { store }) .use(markdownItPlugin) - .use(VueLazyLoad) .mount("#app"); From 559f058e988bda5193ce122e92cfbcbdd224a5a6 Mon Sep 17 00:00:00 2001 From: y-chan Date: Sun, 17 Sep 2023 20:56:50 +0900 Subject: [PATCH 4/5] revert comment --- src/components/CharacterTryListenCard.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue index 71358cc90b..cba51ddc5d 100644 --- a/src/components/CharacterTryListenCard.vue +++ b/src/components/CharacterTryListenCard.vue @@ -13,6 +13,8 @@ " >
+ Date: Tue, 19 Sep 2023 17:45:09 +0900 Subject: [PATCH 5/5] improve comment why using lazy load Co-authored-by: Hiroshiba --- src/components/CharacterTryListenCard.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CharacterTryListenCard.vue b/src/components/CharacterTryListenCard.vue index cba51ddc5d..08e1abb92a 100644 --- a/src/components/CharacterTryListenCard.vue +++ b/src/components/CharacterTryListenCard.vue @@ -13,7 +13,7 @@ " >
-