chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): removed portrait and add cache for image and audio

Browse Source
This commit is contained in:
Haoyu Xu
2023-02-27 23:19:19 -05:00
parent 0a320e1eb0
commit 7edc231e89
41 changed files with 127 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Version
View File

@@ -1 +1 @@
3.3.10
3.3.11

5
aklive2d.js
View File

@@ -120,10 +120,7 @@ async function main() {
const assetsProcessor = new AssetsProcessor(OPERATOR_NAME, OPERATOR_SHARE_FOLDER)
assetsProcessor.process(EXTRACTED_FOLDER).then((content) => {
write(JSON.stringify(content.landscape.assetsJson, null), path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, `assets.json`))
if (__config.operators[OPERATOR_NAME].portrait) {
write(JSON.stringify(content.portrait.assetsJson, null), path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, `assets_portrait.json`))
}
write(JSON.stringify(content.assetsJson, null), path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, `assets.json`))
})
const filesToCopy = [

1
config/_template.yaml
View File

@@ -11,4 +11,3 @@ color: rgba(14, 126, 239, 0.85)
codename:
zh-CN: 假日威龙陈
en-US: Ch'en/Chen the Holungday
portrait: null

1
config/chen.yaml
View File

@@ -11,4 +11,3 @@ color: rgba(14, 126, 239, 0.85)
codename:
zh-CN: 假日威龙陈
en-US: Ch'en/Chen the Holungday
portrait: null

1
config/chongyue.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(255, 133, 34)
codename:
zh-CN: 重岳
en-US: Chongyue
portrait: null

1
config/dusk.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(9, 212, 208)
codename:
zh-CN: 夕
en-US: Dusk
portrait: null

1
config/dusk_everything_is_a_miracle.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(78, 201, 187)
codename:
zh-CN: 染尘烟 · 夕
en-US: Everything is a Miracle / Dusk
portrait: dyn_portrait_char_2015_dusk_nian#7

1
config/gavial.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(29, 185, 53)
codename:
zh-CN: 百练嘉维尔
en-US: Gavial the Invincible
portrait: null

1
config/lee_trust_your_eyes.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(206, 0, 0)
codename:
zh-CN: 手到牌来 · 老鲤
en-US: Trust Your Eyes / Lee
portrait: dyn_portrait_char_322_lmlee_witch#3

1
config/ling.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(15, 206, 216)
codename:
zh-CN: 令
en-US: Ling
portrait: null

1
config/ling_it_does_wash_the_strings.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(37, 148, 197)
codename:
zh-CN: 濯缨 · 令
en-US: It Does Wash the Strings / Ling
portrait: dyn_portrait_char_2023_ling_nian#9

1
config/mizuki_summer_feast.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(156, 210, 246)
codename:
zh-CN: 夏日餮宴 · 水月
en-US: Summer Feast / Mizuki
portrait: null

1
config/nearl.yaml
View File

@@ -11,4 +11,3 @@ color: rgba(253, 236, 189, 0.95)
codename:
zh-CN: 耀骑士临光
en-US: Nearl the Radiant Knight
portrait: null

1
config/nearl_relight.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(141, 213, 228)
codename:
zh-CN: 复现荣光 · 耀骑士临光
en-US: Relight / Nearl
portrait: dyn_portrait_char_1014_nearl2_epoque#17

1
config/nian.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(255, 48, 0)
codename:
zh-CN: 年
en-US: Nian
portrait: null

1
config/nian_unfettered_freedom.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(187, 163, 106)
codename:
zh-CN: 乐逍遥 · 年
en-US: Unfettered Freedom / Nian
portrait: dyn_portrait_char_2014_nian_nian#4

1
config/passager_dream_in_a_moment.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(231, 166, 144)
codename:
zh-CN: 今昔须臾之梦 · 异客
en-US: Dream in a Moment / Passager
portrait: dyn_portrait_char_472_pasngr_epoque#17

1
config/phatom_focus.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(158, 2, 2)
codename:
zh-CN: 焦点 · 傀影
en-US: Focus / Phatom
portrait: null

1
config/pozemka_snowy_plains_in_words.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(145, 220, 253)
codename:
zh-CN: 字句中的雪原 · 鸿雪
en-US: Snowy Plains in Words / Позёмка
portrait: dyn_portrait_char_4055_bgsnow_wild#7

1
config/rosmontis.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(23, 210, 236)
codename:
zh-CN: 迷迭香
en-US: Rosmontis
portrait: null

1
config/rosmontis_become_anew.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(116, 177, 222)
codename:
zh-CN: 拥抱新生 · 迷迭香
en-US: Become Anew / Rosmontis
portrait: dyn_portrait_char_391_rosmon_epoque#17

1
config/skadi.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(226, 96, 96)
codename:
zh-CN: 浊心斯卡蒂
en-US: Skadi the Corrupting Heart
portrait: null

1
config/skadi_sublimation.yaml
View File

@@ -11,4 +11,3 @@ color: rgba(95, 116, 187, 0.74)
codename:
zh-CN: 升华 · 浊心斯卡蒂
en-US: Sublimation / Skadi the Corrupting Heart
portrait: dyn_portrait_char_1012_skadi2_boc#4

1
config/specter.yaml
View File

@@ -11,4 +11,3 @@ color: rgba(14, 124, 203, 0.86)
codename:
zh-CN: 归溟幽灵鲨
en-US: Specter the Unchained
portrait: null

1
config/surtr_colorful_wonderland.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(177, 226, 249)
codename:
zh-CN: 缤纷奇境 CW03 · 史尔特尔
en-US: Colorful Wonderland CW03 / Surtr
portrait: dyn_portrait_char_350_surtr_summer#9

1
config/texas_the_omertosa.yaml
View File

@@ -11,4 +11,3 @@ color: rgba(34, 37, 255, 0.9)
codename:
zh-CN: 缄默德克萨斯
en-US: Texas the Omertosa
portrait: null

1
config/w.yaml
View File

@@ -11,4 +11,3 @@ color: rgb(228, 54, 56)
codename:
zh-CN: W
en-US: W
portrait: null

1
config/w_wonder.yaml
View File

@@ -11,4 +11,3 @@ color: rgba(0, 0, 0, 0.83)
codename:
zh-CN: 恍惚 · W
en-US: Wonder / W
portrait: dyn_portrait_char_113_cqbw_epoque#7

2
directory/.env
View File

@@ -1,3 +1,3 @@
VITE_APP_TITLE=AKLive2D
VITE_VERSION=0.5.5
VITE_VERSION=0.5.7
VITE_APP_VOICE_URL=jp/CN_037.ogg

2
directory/Version
View File

@@ -1 +1 @@
0.5.6
0.5.8

6
directory/src/context/useHeaderContext.jsx
View File

@@ -16,7 +16,8 @@ export function HeaderProvider(props) {
i18n
} = useContext(LanguageContext)
const [tabs, setTabs] = useState(null)
const [currentTab, setCurrentTab] = useState(null)
const [currentTab, setCurrentTab] = useState([])
const [appbarExtraArea, setAppbarExtraArea] = useState([])
useEffect(() => {
let newTitle = key
@@ -31,7 +32,8 @@ export function HeaderProvider(props) {
<HeaderContext.Provider value={{
title, setTitle,
tabs, setTabs,
currentTab, setCurrentTab
currentTab, setCurrentTab,
appbarExtraArea, setAppbarExtraArea
}}>
{props.children}
</HeaderContext.Provider>

9
directory/src/db/index.js Normal file
View File

@@ -0,0 +1,9 @@
import Dexie from 'dexie';
const db = new Dexie('aklive2dDatabase');
db.version(2).stores({
image: '++key, blob',
voice: '++key, blob',
});
export default db;

4
directory/src/i18n.json
View File

@@ -51,10 +51,6 @@
"zh-CN": "语音",
"en-US": "Voice"
},
"live2d": {
"zh-CN": "Live2D",
"en-US": "Live2D"
},
"zh-CN": {
"zh-CN": "简体中文",
"en-US": "Chinese (Simplified)"

5
directory/src/routes/path/home.css
View File

@@ -87,11 +87,6 @@
background-color: var(--home-item-hover-background-color);
}
.home .item-group .item .item-img .live2d {
width: 100%;
height: 360px;
}
.home .item-group .item .item-info {
white-space: nowrap;
position: relative;

134
directory/src/routes/path/home.jsx
View File

@@ -2,11 +2,10 @@ import {
useState,
useEffect,
useContext,
useRef
useCallback
} from 'react'
import {
Link,
useOutletContext,
} from "react-router-dom";
import './home.css'
import { ConfigContext } from '@/context/useConfigContext';
@@ -16,16 +15,17 @@ import CharIcon from '@/component/char_icon';
import MainBorder from '@/component/main_border';
import useUmami from '@parcellab/react-use-umami';
import Switch from '@/component/switch';
import spine from '!/libs/spine-player';
import '!/libs/spine-player.css';
import db from '@/db';
const audioEl = new Audio()
export default function Home() {
const _trackEvt = useUmami('/')
const { setAppbarExtraArea } = useOutletContext()
const {
setTitle,
setTabs,
currentTab, setCurrentTab
currentTab, setCurrentTab,
setAppbarExtraArea
} = useContext(HeaderContext)
const { config } = useContext(ConfigContext)
const {
@@ -36,11 +36,6 @@ export default function Home() {
} = useContext(LanguageContext)
const [content, setContent] = useState([])
const [voiceOn, setVoiceOn] = useState(false)
const [live2dOn, setLive2dOn] = useState(false)
const [audioUrl, setAudioUrl] = useState('')
const audioEl = new Audio(audioUrl)
const live2dRefObject = useRef({})
const live2dSpineObject = useRef({})
useEffect(() => {
setTitle('dynamic_compile')
@@ -65,7 +60,6 @@ export default function Home() {
const toggleVoice = () => {
setVoiceOn(!voiceOn)
setAudioUrl('')
}
useEffect(() => {
@@ -77,82 +71,46 @@ export default function Home() {
on={voiceOn}
handleOnClick={() => toggleVoice()}
/>
// ), (
// <Switch
// key="live2d"
// text={i18n.key.live2d[language]}
// on={live2dOn}
// handleOnClick={() => setLive2dOn(!live2dOn)}
// />
)
])
}, [voiceOn, live2dOn])
}, [voiceOn, language])
const isShown = (type) => currentTab === 'all' || currentTab === type
const playVoice = (link) => {
if (!voiceOn) return
audioEl.src = `/${link}/assets/voice/${import.meta.env.VITE_APP_VOICE_URL}`
const playVoice = useCallback((blob) => {
const audioUrl = URL.createObjectURL(blob)
audioEl.src = audioUrl
let startPlayPromise = audioEl.play()
if (startPlayPromise !== undefined) {
startPlayPromise
.then(() => {
return
const audioEndedFunc = () => {
audioEl.removeEventListener('ended', audioEndedFunc)
URL.revokeObjectURL(audioUrl)
}
audioEl.addEventListener('ended', audioEndedFunc)
})
.catch(() => {
return
})
}
}
}, [])
const getLive2d = (link) => {
const reactEl = <section className="live2d" ref={ref => {
live2dRefObject.current[link] = ref
}}></section>
return reactEl
}
useEffect(() => {
if (live2dOn) {
Object.keys(live2dRefObject.current).forEach((link) => {
const ref = live2dRefObject.current[link]
if (ref) {
if (live2dSpineObject.current[link]) {
return
}
fetch(`/_assets/dyn_portrait_char_2014_nian_nian%234.json`)
.then((res) => res.json())
.then((data) => {
live2dSpineObject.current[link] = new spine.SpinePlayer(ref, {
skelUrl: `./assets/dyn_portrait_char_2014_nian_nian%234.skel`,
atlasUrl: `./assets/dyn_portrait_char_2014_nian_nian%234.atlas`,
rawDataURIs: data,
animation: "Idle",
premultipliedAlpha: true,
alpha: true,
backgroundColor: "#00000000",
viewport: {
debugRender: false,
padLeft: `0%`,
padRight: `0%`,
padTop: `0%`,
padBottom: `0%`,
x: 0,
y: 0,
},
showControls: false,
touch: false,
fps: 60,
defaultMix: 0,
success: function (widget) {
},
const loadVoice = (link) => {
if (!voiceOn) return
db.voice.get({ key: link }).then((v) => {
if (v === undefined) {
fetch(`/${link}/assets/voice/${import.meta.env.VITE_APP_VOICE_URL}`)
.then(res => res.blob())
.then(blob => {
db.voice.put({ key: link, blob: blob })
playVoice(blob)
})
})
}
})
}
}, [live2dOn])
} else {
playVoice(v.blob)
}
})
}
return (
<section className="home">
@@ -170,16 +128,15 @@ export default function Home() {
className="item"
key={item.link}
hidden={!isShown(item.type)}
onMouseEnter={(e) => playVoice(item.link)}
onMouseEnter={() => loadVoice(item.link)}
>
<section className="item-background-filler" />
<section className="item-outline" />
<section className="item-img">
{live2dOn && item.portrait !== null ? (
getLive2d(item.link)
) : (
<img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
)}
<ImageElement
item={item}
language={language}
/>
</section>
<section className="item-info">
<section className="item-title-container">
@@ -212,3 +169,24 @@ export default function Home() {
</section>
)
}
function ImageElement({ item, language }) {
const [blobUrl, setBlobUrl] = useState(null)
useEffect(() => {
db.image.get({ key: item.link }).then((v) => {
if (v === undefined) {
fetch(`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`)
.then(res => res.blob())
.then(blob => {
db.image.put({ key: item.link, blob: blob })
setBlobUrl(URL.createObjectURL(blob))
})
} else {
setBlobUrl(URL.createObjectURL(v.blob))
}
})
}, [item.link])
return blobUrl ? <img src={blobUrl} alt={item.codename[language]} /> : null
}

8
directory/src/routes/root.jsx
View File

@@ -30,12 +30,12 @@ export default function Root(props) {
const {
title,
tabs,
currentTab, setCurrentTab
currentTab, setCurrentTab,
appbarExtraArea
} = useContext(HeaderContext)
const [drawerDestinations, setDrawerDestinations] = useState(null)
const currentYear = new Date().getFullYear()
const [headerTabs, setHeaderTabs] = useState(null)
const [appbarExtraArea, setAppbarExtraArea] = useState(null)
const renderHeaderTabs = (tabs) => {
setHeaderTabs(tabs?.map((item) => {
@@ -157,7 +157,7 @@ export default function Root(props) {
}}
/>
</MainBorder>
<Outlet context={{setAppbarExtraArea}}/>
<Outlet />
</main>
<footer className='footer'>
<section className='links section'>
@@ -183,7 +183,7 @@ export default function Root(props) {
<span>Spine Runtimes © 2013 - 2019 Esoteric Software LLC</span>
<span>Assets © 2017 - {currentYear} Arknights/Hypergryph Co., Ltd</span>
<span>Source Code © 2021 - {currentYear} Halyul</span>
<span>Version: {import.meta.env.VITE_APP_VERSION}</span>
<span>Version: {import.meta.env.VITE_VERSION}</span>
</section>
</footer>
</>

5
libs/assets_processor.js
View File

@@ -36,10 +36,7 @@ export default class AssetsProcessor {
const croppedBuffer = await this.#alphaCompositer.crop(portraitBuffer, rect)
await write(croppedBuffer, path.join(this.#operatorSourceFolder, this.#operatorName, `${fallback_name}_portrait.png`))
return {
landscape: await this.#generateAssets(__config.operators[this.#operatorName].filename, extractedDir),
portrait: __config.operators[this.#operatorName].portrait ? await this.#generateAssets(__config.operators[this.#operatorName].portrait, extractedDir) : null
}
return await this.#generateAssets(__config.operators[this.#operatorName].filename, extractedDir)
}
async #generateAssets(filename, extractedDir) {

3
libs/directory.js
View File

@@ -28,8 +28,5 @@ export default function () {
writeSync(JSON.stringify(directoryJson, null), path.join(targetFolder, "directory.json"))
filesToCopy.forEach((key) => {
copy(path.join(sourceFolder, key, 'assets.json'), path.join(targetFolder, `${__config.operators[key].filename}.json`))
if (__config.operators[key].portrait) {
copy(path.join(sourceFolder, key, 'assets_portrait.json'), path.join(targetFolder, `${__config.operators[key].portrait}.json`))
}
})
}

3
package.json
View File

@@ -28,7 +28,8 @@
},
"dependencies": {
"@parcellab/react-use-umami": "^2.0.1",
"@react-hook/cache": "^1.1.1",
"dexie": "^3.2.3",
"dexie-react-hooks": "^1.1.1",
"dotenv": "^16.0.3",
"node-fetch": "^3.3.0",
"react": "^18.2.0",

44
pnpm-lock.yaml generated
View File

@@ -2,10 +2,11 @@ lockfileVersion: 5.4
specifiers:
'@parcellab/react-use-umami': ^2.0.1
'@react-hook/cache': ^1.1.1
'@types/react': ^18.0.28
'@types/react-dom': ^18.0.11
'@vitejs/plugin-react-swc': ^3.2.0
dexie: ^3.2.3
dexie-react-hooks: ^1.1.1
dotenv: ^16.0.3
node-fetch: ^3.3.0
react: ^18.2.0
@@ -19,7 +20,8 @@ specifiers:
dependencies:
'@parcellab/react-use-umami': 2.0.1_react@18.2.0
'@react-hook/cache': 1.1.1_react@18.2.0
dexie: 3.2.3
dexie-react-hooks: 1.1.1_oyoivydq6d62bcmmdhna6akh5q
dotenv: 16.0.3
node-fetch: 3.3.0
react: 18.2.0
@@ -244,23 +246,6 @@ packages:
react: 18.2.0
dev: false
/@react-hook/cache/1.1.1_react@18.2.0:
resolution: {integrity: sha512-FY0Bwvxsv9Gu6pUbVdNylh4jyWPtQRegQM9G6yVx3l2cYjbxzaJwEXticLfsRcciCbnk7iyZfJn6mZ4N4+q9qA==}
peerDependencies:
react: '>=16.8'
dependencies:
'@react-hook/latest': 1.0.3_react@18.2.0
react: 18.2.0
dev: false
/@react-hook/latest/1.0.3_react@18.2.0:
resolution: {integrity: sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==}
peerDependencies:
react: '>=16.8'
dependencies:
react: 18.2.0
dev: false
/@remix-run/router/1.3.2:
resolution: {integrity: sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==}
engines: {node: '>=14'}
@@ -375,7 +360,6 @@ packages:
/@types/prop-types/15.7.5:
resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
dev: true
/@types/react-dom/18.0.11:
resolution: {integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==}
@@ -389,11 +373,9 @@ packages:
'@types/prop-types': 15.7.5
'@types/scheduler': 0.16.2
csstype: 3.1.1
dev: true
/@types/scheduler/0.16.2:
resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
dev: true
/@vitejs/plugin-react-swc/3.2.0_vite@4.1.4:
resolution: {integrity: sha512-IcBoXL/mcH7JdQr/nfDlDwTdIaH8Rg7LpfQDF4nAht+juHWIuv6WhpKPCSfY4+zztAaB07qdBoFz1XCZsgo3pQ==}
@@ -455,7 +437,6 @@ packages:
/csstype/3.1.1:
resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
dev: true
/data-uri-to-buffer/4.0.1:
resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
@@ -479,6 +460,23 @@ packages:
engines: {node: '>=8'}
dev: false
/dexie-react-hooks/1.1.1_oyoivydq6d62bcmmdhna6akh5q:
resolution: {integrity: sha512-Cam5JP6PxHN564RvWEoe8cqLhosW0O4CAZ9XEVYeGHJBa6KEJlOpd9CUpV3kmU9dm2MrW97/lk7qkf1xpij7gA==}
peerDependencies:
'@types/react': '>=16'
dexie: '>=3.1.0-alpha.1 <5.0.0'
react: '>=16'
dependencies:
'@types/react': 18.0.28
dexie: 3.2.3
react: 18.2.0
dev: false
/dexie/3.2.3:
resolution: {integrity: sha512-iHayBd4UYryDCVUNa3PMsJMEnd8yjyh5p7a+RFeC8i8n476BC9wMhVvqiImq5zJZJf5Tuer+s4SSj+AA3x+ZbQ==}
engines: {node: '>=6.0'}
dev: false
/dotenv/16.0.3:
resolution: {integrity: sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==}
engines: {node: '>=12'}

1
vite.config.js
View File

@@ -161,7 +161,6 @@ class ViteRunner {
resolve: {
alias: {
'@': path.resolve(directoryDir, './src'),
'!': path.resolve(__projetRoot, './src'),
},
},
build: {