import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { useParams, useNavigate, Link } from 'react-router-dom'
import classes from '@/scss/operator/Operator.module.scss'
import { useConfig } from '@/state/config'
import { useLanguage } from '@/state/language'
import { useHeader } from '@/state/header'
import { useAppbar } from '@/state/appbar'
import VoiceElement from '@/component/voice'
import useInsight from '@/state/insight'
import { Player as SpinePlayer } from '@aklive2d/module'
import Border from '@/component/border'
import { useI18n } from '@/state/language'
import Switch from '@/component/switch'
import { atom, useAtom } from 'jotai'
import buildConfig from '!/config.json'
const musicMapping = buildConfig.music_mapping
const getVoiceFoler = (lang) => {
const folderObject = buildConfig.voice_folders
const voiceFolder =
folderObject.sub.find((e) => e.lang === lang) ||
folderObject.sub.find((e) => e.name === 'custom')
return `${folderObject.main}/${voiceFolder.name}`
}
const defaultSpineAnimationName = 'Idle'
const backgroundAtom = atom(buildConfig.default_background)
const getPartialName = (type, input) => {
let part
switch (type) {
case 'name':
part = 5
break
case 'skin':
part = 1
break
default:
return input
}
return input.replace(/^(.+)( )(ยท|\/)( )(.+)$/, `$${part}`)
}
const getTabName = (item, language) => {
if (item.type === 'operator') {
return 'operator'
} else {
return getPartialName('skin', item.codename[language])
}
}
export default function Operator() {
const navigate = useNavigate()
const { operators } = useConfig()
const { language } = useLanguage()
const { key } = useParams()
const { setTitle, setTabs, setHeaderIcon, setFastNavigation } = useHeader()
const { setExtraArea } = useAppbar()
const [config, setConfig] = useState(null)
// eslint-disable-next-line no-unused-vars
const _trackEvt = useInsight(`/${key}`)
const spineRef = useRef(null)
const [spineAnimationName, setSpineAnimationName] = useState(
defaultSpineAnimationName
)
const { i18n } = useI18n()
const [spinePlayer, setSpinePlayer] = useState(null)
const [voiceLang, _setVoiceLang] = useState(null)
const [currentBackground, setCurrentBackground] = useAtom(backgroundAtom)
const [voiceConfig, setVoiceConfig] = useState(null)
const [subtitleLang, setSubtitleLang] = useState(null)
const [hideSubtitle, setHideSubtitle] = useState(true)
const [subtitleObj, _setSubtitleObj] = useState(null)
const [currentVoiceId, setCurrentVoiceId] = useState(null)
const voiceLangRef = useRef(voiceLang)
const subtitleObjRef = useRef(subtitleObj)
const configRef = useRef(config)
const [voiceSrc, setVoiceSrc] = useState(null)
const [isVoicePlaying, _setIsVoicePlaying] = useState(false)
const isVoicePlayingRef = useRef(isVoicePlaying)
const setVoiceLang = (value) => {
voiceLangRef.current = value
_setVoiceLang(value)
}
const setSubtitleObj = (value) => {
subtitleObjRef.current = value
_setSubtitleObj(value)
}
const setIsVoicePlaying = (value) => {
isVoicePlayingRef.current = value
_setIsVoicePlaying(value)
}
useEffect(() => {
setExtraArea([])
setFastNavigation([])
}, [setExtraArea, setFastNavigation])
useEffect(() => {
const config = operators.find((item) => item.link === key)
if (config) {
setConfig(config)
configRef.current = config
setSpineAnimationName(defaultSpineAnimationName)
setHeaderIcon(config.type)
if (spineRef.current?.children.length > 0) {
spineRef.current?.removeChild(spineRef.current?.children[0])
}
fetch(`/${key}/assets/charword_table.json`)
.then((res) => res.json())
.then((data) => {
setVoiceConfig(data)
})
}
}, [key, operators, setHeaderIcon])
const coverToTab = useCallback(
(item, language) => {
const key = getTabName(item, language)
return {
key: key,
style: {
color: item.color,
},
onClick: (e, tab) => {
if (tab === key) return
navigate(`/${item.link}`)
},
}
},
[navigate]
)
const otherEntries = useMemo(() => {
if (!config || !language) return null
return operators
.filter(
(item) => item.id === config.id && item.link !== config.link
)
.map((item) => {
return coverToTab(item, language)
})
}, [config, language, operators, coverToTab])
useEffect(() => {
if (config) {
setTabs([coverToTab(config, language), ...otherEntries])
}
}, [config, key, coverToTab, setTabs, otherEntries, language])
useEffect(() => {
if (config) {
setTitle(getPartialName('name', config.codename[language]))
}
}, [config, language, key, setTitle])
useEffect(() => {
if (spineRef.current?.children.length === 0 && configRef.current) {
const playerConfig = {
atlasUrl: `./${key}/assets/${configRef.current.filename.replace(/#/g, '%23')}.atlas`,
animation: spineAnimationName,
premultipliedAlpha: true,
alpha: true,
backgroundColor: '#00000000',
viewport: {
debugRender: false,
padLeft: `${configRef.current.viewport_left}%`,
padRight: `${configRef.current.viewport_right}%`,
padTop: `${configRef.current.viewport_top}%`,
padBottom: `${configRef.current.viewport_bottom}%`,
x: 0,
y: 0,
},
showControls: false,
touch: false,
fps: 60,
defaultMix: 0.3,
success: (player) => {
if (
player.skeleton.data.animations
.map((e) => e.name)
.includes('Start')
) {
player.animationState.setAnimation(0, 'Start', false, 0)
player.animationState.addAnimation(0, 'Idle', true, 0)
}
let lastVoiceId = null
let currentVoiceId = null
player.canvas.onclick = () => {
if (!voiceLangRef.current) return
const voiceId = () => {
const keys = Object.keys(subtitleObjRef.current)
const id =
keys[Math.floor(Math.random() * keys.length)]
return id === lastVoiceId ? voiceId() : id
}
const id = voiceId()
currentVoiceId = id
setCurrentVoiceId(id)
setVoiceSrc(
`/${configRef.current.link}/assets/${getVoiceFoler(voiceLangRef.current)}/${id}.ogg`
)
lastVoiceId = currentVoiceId
}
},
}
if (configRef.current.use_json) {
playerConfig.jsonUrl = `./${key}/assets/${configRef.current.filename.replace(/#/g, '%23')}.json`
} else {
playerConfig.skelUrl = `./${key}/assets/${configRef.current.filename.replace(/#/g, '%23')}.skel`
}
setSpinePlayer(new SpinePlayer(spineRef.current, playerConfig))
}
}, [spineAnimationName, setSpinePlayer, spinePlayer, key])
useEffect(() => {
return () => {
if (spinePlayer) {
spinePlayer.dispose()
}
}
}, [spinePlayer])
useEffect(() => {
if (voiceConfig && voiceLang) {
let subtitleObj = voiceConfig.subtitleLangs[subtitleLang || 'zh-CN']
let subtitleKey = 'default'
if (subtitleObj[voiceLang]) {
subtitleKey = voiceLang
}
setSubtitleObj(subtitleObj[subtitleKey])
}
}, [subtitleLang, voiceConfig, voiceLang])
const handleAduioStateChange = useCallback((e, state) => {
switch (state) {
case 'play':
setIsVoicePlaying(true)
break
default:
setIsVoicePlaying(false)
break
}
}, [])
useEffect(() => {
if (subtitleLang) {
if (isVoicePlaying) {
setHideSubtitle(false)
} else {
const autoHide = () => {
if (isVoicePlayingRef.current) return
setHideSubtitle(true)
}
setTimeout(autoHide, 5 * 1000)
return () => {
clearTimeout(autoHide)
}
}
} else {
setHideSubtitle(true)
}
}, [subtitleLang, isVoicePlaying])
useEffect(() => {
if (voiceLang && isVoicePlaying) {
const audioUrl = `/assets/${getVoiceFoler(voiceLang)}/${currentVoiceId}.ogg`
if (
voiceSrc !==
window.location.href.replace(/\/$/g, '') + audioUrl
) {
setVoiceSrc(`/${config.link}${audioUrl}`)
}
}
}, [voiceLang, isVoicePlaying, currentVoiceId, config, voiceSrc])
const playAnimationVoice = useCallback(
(animation) => {
if (voiceLangRef.current) {
let id = null
if (animation === 'Idle') id = 'CN_011'
if (animation === 'Interact') id = 'CN_034'
if (animation === 'Special') id = 'CN_042'
if (id) {
setCurrentVoiceId(id)
setVoiceSrc(
`/${key}/assets/${getVoiceFoler(voiceLangRef.current)}/${id}.ogg`
)
}
}
},
[key]
)
useEffect(() => {
if (!voiceLang) {
setVoiceSrc(null)
}
}, [voiceLang])
const setSpineAnimation = useCallback(
(animation) => {
playAnimationVoice(animation)
const entry = spinePlayer.animationState.setAnimation(
0,
animation,
true
)
entry.mixDuration = 0.3
setSpineAnimationName(animation)
},
[playAnimationVoice, spinePlayer]
)
const spineSettings = [
{
name: 'animation',
options: [
{
name: 'idle',
onClick: () => setSpineAnimation('Idle'),
activeRule: () => {
return spineAnimationName === 'Idle'
},
},
{
name: 'interact',
onClick: () => setSpineAnimation('Interact'),
activeRule: () => {
return spineAnimationName === 'Interact'
},
},
{
name: 'special',
onClick: () => setSpineAnimation('Special'),
activeRule: () => {
return spineAnimationName === 'Special'
},
},
],
},
{
name: 'voice',
options:
(voiceConfig &&
Object.keys(voiceConfig?.voiceLangs['zh-CN']).map(
(item) => {
return {
name: i18n(item),
onClick: () => {
if (voiceLang !== item) {
setVoiceLang(item)
} else {
setVoiceLang(null)
}
if (!isVoicePlayingRef.current) {
playAnimationVoice(spineAnimationName)
}
},
activeRule: () => {
return voiceLang === item
},
}
}
)) ||
[],
},
{
name: 'subtitle',
options:
(voiceConfig &&
Object.keys(voiceConfig?.subtitleLangs).map((item) => {
return {
name: i18n(item),
onClick: () => {
if (subtitleLang !== item) {
setSubtitleLang(item)
} else {
setSubtitleLang(null)
}
},
activeRule: () => {
return subtitleLang === item
},
}
})) ||
[],
},
{
name: 'music',
el: ,
},
{
name: 'backgrounds',
options:
buildConfig.background_files.map((item) => {
return {
name: item,
onClick: () => {
setCurrentBackground(item)
},
activeRule: () => {
return currentBackground === item
},
}
}) || [],
},
]
if (!buildConfig.available_operators.includes(key)) {
throw new Error('Operator not found')
}
return (
{spineSettings.map((item) => {
if (item.el) {
return
}
if (item.options.length === 0) return null
return (
{item.options.map((option) => {
return (
option.onClick(e)
}
key={option.name}
>
)
})}
)
})}
{config?.workshopId && (
)}
{config && (
![{config?.codename[language]}]({`/${config.link}/assets/${config.logo}.png`})
)}
{currentVoiceId && subtitleObj && (
{subtitleObj[currentVoiceId]?.title}
{subtitleObj[currentVoiceId]?.text}
)}
)
}
function MusicElement() {
const [enableMusic, setEnableMusic] = useState(false)
const { i18n } = useI18n()
const musicIntroRef = useRef(null)
const musicLoopRef = useRef(null)
const [background] = useAtom(backgroundAtom)
useEffect(() => {
if (musicIntroRef.current && musicIntroRef.current) {
musicIntroRef.current.volume = 0.5
musicLoopRef.current.volume = 0.5
}
}, [musicIntroRef, musicLoopRef])
useEffect(() => {
if (!enableMusic || background) {
musicIntroRef.current.pause()
musicLoopRef.current.pause()
}
}, [enableMusic, background])
useEffect(() => {
if (background && enableMusic) {
const introOgg = musicMapping[background].intro
const intro = `./chen/assets/${buildConfig.music_folder}/${introOgg}`
const loop = `./chen/assets/${buildConfig.music_folder}/${musicMapping[background].loop}`
musicLoopRef.current.src = loop
if (introOgg) {
musicIntroRef.current.src = intro || loop
} else {
musicLoopRef.current.play()
}
}
}, [background, enableMusic])
const handleIntroTimeUpdate = useCallback(() => {
if (
musicIntroRef.current.currentTime >=
musicIntroRef.current.duration - 0.3
) {
musicIntroRef.current.pause()
musicLoopRef.current.play()
}
}, [])
const handleLoopTimeUpdate = useCallback(() => {
if (
musicLoopRef.current.currentTime >=
musicLoopRef.current.duration - 0.3
) {
musicLoopRef.current.currentTime = 0
musicLoopRef.current.play()
}
}, [])
return (
setEnableMusic(!enableMusic)}
>
)
}