From 5780c049792995b172aa44978f8e5eb23aa88f8c Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Wed, 8 Jan 2025 21:33:01 +0800 Subject: [PATCH] Showcase refactor (#20) * refactor: update voice.js * refactor: update fallback.js * refactor: update music.js * refactor: update player.js * refactor: misc changes * feat: added background.js * feat: added logo.js * chore: update * refactor: port all changes * fix: fix WE issues * fix: code cleanup --- config/_project_json.yaml | 35 +- showcase/index.html | 2 +- .../components/{settings.css => aklive2d.css} | 2 +- showcase/src/components/aklive2d.js | 155 ++++ showcase/src/components/background.css | 23 + showcase/src/components/background.js | 235 +++++ showcase/src/components/event.js | 63 ++ showcase/src/components/fallback.js | 34 +- showcase/src/components/helper.js | 78 ++ showcase/src/components/insight.js | 33 + showcase/src/components/logo.css | 6 + showcase/src/components/logo.js | 351 +++++++ showcase/src/components/music.js | 326 +++++-- showcase/src/components/player.css | 2 +- showcase/src/components/player.js | 509 ++++++++-- showcase/src/components/settings.js | 870 ------------------ showcase/src/components/voice.css | 21 +- showcase/src/components/voice.js | 669 +++++++++----- showcase/src/index.css | 40 +- showcase/src/index.js | 40 +- showcase/src/libs/check_web_gl.js | 9 - showcase/src/libs/spine-player.js | 24 +- showcase/src/libs/wallpaper_engine.js | 284 +++--- 23 files changed, 2312 insertions(+), 1499 deletions(-) rename showcase/src/components/{settings.css => aklive2d.css} (87%) create mode 100644 showcase/src/components/aklive2d.js create mode 100644 showcase/src/components/background.css create mode 100644 showcase/src/components/background.js create mode 100644 showcase/src/components/event.js create mode 100644 showcase/src/components/helper.js create mode 100644 showcase/src/components/insight.js create mode 100644 showcase/src/components/logo.css create mode 100644 showcase/src/components/logo.js delete mode 100644 showcase/src/components/settings.js delete mode 100644 showcase/src/libs/check_web_gl.js diff --git a/config/_project_json.yaml b/config/_project_json.yaml index bcd7fb4..879f8a9 100644 --- a/config/_project_json.yaml +++ b/config/_project_json.yaml @@ -42,6 +42,7 @@ localization: ui_video_title:

📝 Video

ui_custom_video: Custom Video ui_video_volume: Volume + ui_misc_title:

💡 Misc

zh-chs: ui_notice_title:

📝 通知

ui_notice_set_fps: 在设置中设定FPS目标 @@ -84,6 +85,7 @@ localization: ui_video_title:

📹 视频

ui_custom_video: 自定义视频 ui_video_volume: 音量 + ui_misc_title:

💡 杂项

properties: - key: notice_title value: @@ -282,7 +284,7 @@ properties: value: false - key: custom_video value: - text: ui_video_music + text: ui_custom_video condition: video_title.value == true type: file fileType: video @@ -296,20 +298,6 @@ properties: fraction: false max: 100 min: 0 - - key: useStartAnimation - value: - text: ui_useStartAnimation_title - type: bool - value: true - - key: scale - value: - text: ui_scale - type: slider - value: 1 - fraction: true - max: 10 - min: 0 - step: 0.1 - key: position value: text: ui_position_title @@ -351,6 +339,23 @@ properties: fraction: false max: 100 min: -100 + - key: misc_title + value: + text: ui_misc_title + - key: useStartAnimation + value: + text: ui_useStartAnimation_title + type: bool + value: true + - key: scale + value: + text: ui_scale + type: slider + value: 1 + fraction: true + max: 10 + min: 0 + step: 0.1 - key: privacytitle value: text: ui_privacy_title diff --git a/showcase/index.html b/showcase/index.html index 86e1d30..4bdc4f1 100644 --- a/showcase/index.html +++ b/showcase/index.html @@ -12,7 +12,7 @@ defer > - +
diff --git a/showcase/src/components/settings.css b/showcase/src/components/aklive2d.css similarity index 87% rename from showcase/src/components/settings.css rename to showcase/src/components/aklive2d.css index 97508b6..16623d2 100644 --- a/showcase/src/components/settings.css +++ b/showcase/src/components/aklive2d.css @@ -1,4 +1,4 @@ -#settings { +#settings-box { position: fixed; left: 0; top: 0; diff --git a/showcase/src/components/aklive2d.js b/showcase/src/components/aklive2d.js new file mode 100644 index 0000000..20b4693 --- /dev/null +++ b/showcase/src/components/aklive2d.js @@ -0,0 +1,155 @@ +import Voice from "@/components/voice"; +import Fallback from "@/components/fallback"; +import Music from "@/components/music"; +import Player from "@/components/player"; +import Background from "@/components/background"; +import Logo from "@/components/logo"; +import Insight from "@/components/insight"; +import { + isWebGLSupported, + insertHTMLChild, + addEventListeners, + updateElementPosition, +} from "@/components/helper"; +import '@/components/aklive2d.css' + +export default class AKLive2D { + #el = document.createElement("div") + #appEl + #widgetEl + #queries = new URLSearchParams(window.location.search) + #voice = new Voice() + #music = new Music() + #player = new Player() + #background = new Background() + #logo = new Logo() + #insight = new Insight() + + constructor(appEl, widgetEl) { + document.title = import.meta.env.VITE_TITLE + console.log("All resources are extracted from Arknights. Github: https://gura.ch/aklive2d-gh") + + window.addEventListener("contextmenu", e => e.preventDefault()); + document.addEventListener("gesturestart", e => e.preventDefault()); + + this.#appEl = appEl + this.#widgetEl = widgetEl + } + + init() { + if (isWebGLSupported) { + this.#logo.init(this.#appEl); + this.#background.init(this.#appEl, this.#widgetEl); + this.#voice.init(this.#appEl, this.#widgetEl); + this.#music.init(this.#appEl); + this.#player.init(this.#widgetEl, this); + } else { + (new Fallback()).init(this.#widgetEl) + } + this.#el.id = "settings-box" + this.#el.hidden = true + this.#el.innerHTML = ` +
+ ${this.#logo.HTML} + ${this.#background.HTML} + ${this.#player.HTML} + ${this.#voice.HTML} + ${this.#music.HTML} +
+ + + +
+
+ ` + insertHTMLChild(this.#appEl, this.#el) + addEventListeners([ + { + event: "player-ready", handler: () => this.success() + }, + ...this.#logo.listeners, + ...this.#background.listeners, + ...this.#player.listeners, + ...this.#voice.listeners, + ...this.#music.listeners, + ...this.#insight.listeners, + { + id: "settings-reset", event: "click", handler: () => this.reset() + }, { + id: "settings-close", event: "click", handler: () => this.close() + }, { + id: "settings-to-directory", event: "click", handler: () => { + window.location.href = '/'; + } + } + ]) + } + + open() { + this.#el.hidden = false; + } + + close() { + this.#el.hidden = true; + } + + reset() { + this.#player.reset() + this.#background.reset() + this.#logo.reset() + this.#voice.reset() + } + + success() { + this.#music.link(this.#background) + this.#background.link(this.#music) + this.#voice.success() + this.#music.success() + this.#insight.success() + if (this.#queries.has("settings") || this.#queries.has("aklive2d") || import.meta.env.MODE === 'development') { + this.open() + } + this.#backCompatibility() + } + + #backCompatibility() { + window.voice = this.#voice + window.music = this.#music + window.settings = { + spinePlayer: this.#player.spine, + setFPS: this.#player.setFPS, + setLogoDisplay: this.#logo.setLogoDisplay, + setLogo: this.#logo.setLogo, + setLogoImage: this.#logo.setLogoImage, + resetLogoImage: this.#logo.resetLogoImage, + setLogoRatio: this.#logo.setLogoRatio, + setLogoOpacity: this.#logo.setLogoOpacity, + setBackgoundImage: this.#background.setBackgroundImage, + currentBackground: this.#background.currentBackground, + setDefaultBackground: this.#background.setDefaultBackground, + setBackground: this.#background.setBackground, + resetBackground: this.#background.resetBackground, + loadViewport: this.#player.loadViewport, + setScale: this.#player.setScale, + scale: this.#player.scale, + positionPadding: this.#player.positionPadding, + positionReset: this.#player.positionReset, + scaleReset: this.#player.scaleReset, + elementPosition: updateElementPosition, + logoPadding: this.#logo.logoPadding, + logoReset: this.#logo.logoReset, + useStartAnimation: this.#player.useStartAnimation, + open: this.open, + close: this.close, + reset: this.reset, + setMusicFromWE: this.#music.setMusicFromWE, + setMusic: this.#music.setMusic, + resetMusic: this.#music.resetMusic, + setVideo: this.#background.setVideo, + setVideoVolume: this.#background.setVideoVolume, + getVideoVolume: this.#background.getVideoVolume, + setVideoFromWE: this.#background.setVideoFromWE, + resetVideo: this.#background.resetVideo + } + } +} \ No newline at end of file diff --git a/showcase/src/components/background.css b/showcase/src/components/background.css new file mode 100644 index 0000000..a2c8250 --- /dev/null +++ b/showcase/src/components/background.css @@ -0,0 +1,23 @@ +#background-box { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + z-index: -2; +} + +#background-box #video-src { + min-width: 100%; + min-height: 100%; + width: auto; + height: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/showcase/src/components/background.js b/showcase/src/components/background.js new file mode 100644 index 0000000..45524ee --- /dev/null +++ b/showcase/src/components/background.js @@ -0,0 +1,235 @@ +import { + insertHTMLNodeBefore, + readFile, + updateHTMLOptions, + showRelatedHTML, + syncHTMLValue, +} from "@/components/helper"; +import "@/components/background.css" + +export default class Background { + #el = document.createElement("div") + #parentEl + #videoEl + #default = { + location: `${import.meta.env.BASE_URL}assets/${import.meta.env.VITE_BACKGROUND_FOLDER}/`, + image: "operator_bg.png" + } + #config = { + image: null + } + #musicObj + + init(el, widgetEl) { + this.#parentEl = el + this.#el.id = "background-box" + this.image = this.#default.location + this.#default.image + this.#el.innerHTML = ` +