feat: P1 core - seamless video switching, conditional branches, save/load
- VideoManager: A/B dual-buffered video with crossfade transitions and candidate preloading - Engine: condition-based choice filtering, ChoiceSystem timer, resumeScene for save/load - SceneManager: getCandidateUrls for preloading next scenes - SaveSystem: Dexie.js IndexedDB multi-slot save/load - ChoiceSystem: timed choices with countdown and auto-default on timeout - GamePlayer: dual video elements with crossfade CSS - ChoicePanel: timer progress bar and countdown text - SaveLoadMenu: save/load UI component - App.vue: menu trigger, dual video refs, save/load integration - gameStore: timer state, saves list - demo.json: conditional choice example (secret ending, requires trust >= 80) - ROADMAP: mark P1 as completed
This commit is contained in:
@@ -2,53 +2,134 @@ type VideoEndCallback = () => void
|
||||
type TimeUpdateCallback = (time: number) => void
|
||||
|
||||
export class VideoManager {
|
||||
private videoEl: HTMLVideoElement | null = null
|
||||
private elA: HTMLVideoElement | null = null
|
||||
private elB: HTMLVideoElement | null = null
|
||||
private activeSlot: 'A' | 'B' = 'A'
|
||||
private crossFadeMs = 300
|
||||
private onEndCallback: VideoEndCallback | null = null
|
||||
private onTimeCallback: TimeUpdateCallback | null = null
|
||||
private lastSrc: string = ''
|
||||
private currentSrc = ''
|
||||
private preloaded: Map<'A' | 'B', string> = new Map()
|
||||
private switching = false
|
||||
|
||||
attach(videoEl: HTMLVideoElement) {
|
||||
this.videoEl = videoEl
|
||||
videoEl.addEventListener('ended', this.handleEnded)
|
||||
videoEl.addEventListener('timeupdate', this.handleTimeUpdate)
|
||||
private get active(): HTMLVideoElement {
|
||||
return this.activeSlot === 'A' ? this.elA! : this.elB!
|
||||
}
|
||||
|
||||
private get inactive(): HTMLVideoElement {
|
||||
return this.activeSlot === 'A' ? this.elB! : this.elA!
|
||||
}
|
||||
|
||||
private get inactiveKey(): 'A' | 'B' {
|
||||
return this.activeSlot === 'A' ? 'B' : 'A'
|
||||
}
|
||||
|
||||
attach(elA: HTMLVideoElement, elB: HTMLVideoElement) {
|
||||
this.elA = elA
|
||||
this.elB = elB
|
||||
for (const el of [elA, elB]) {
|
||||
el.addEventListener('ended', this.handleEnded)
|
||||
el.addEventListener('timeupdate', this.handleTimeUpdate)
|
||||
el.style.position = 'absolute'
|
||||
el.style.inset = '0'
|
||||
el.style.width = '100%'
|
||||
el.style.height = '100%'
|
||||
el.style.objectFit = 'contain'
|
||||
el.style.transition = 'none'
|
||||
}
|
||||
elB.style.opacity = '0'
|
||||
}
|
||||
|
||||
detach() {
|
||||
if (!this.videoEl) return
|
||||
this.videoEl.removeEventListener('ended', this.handleEnded)
|
||||
this.videoEl.removeEventListener('timeupdate', this.handleTimeUpdate)
|
||||
this.videoEl = null
|
||||
for (const el of [this.elA, this.elB]) {
|
||||
if (!el) continue
|
||||
el.removeEventListener('ended', this.handleEnded)
|
||||
el.removeEventListener('timeupdate', this.handleTimeUpdate)
|
||||
el.pause()
|
||||
el.removeAttribute('src')
|
||||
}
|
||||
this.elA = null
|
||||
this.elB = null
|
||||
}
|
||||
|
||||
play(src: string) {
|
||||
if (!this.videoEl) return
|
||||
if (this.lastSrc !== src) {
|
||||
this.videoEl.src = src
|
||||
this.lastSrc = src
|
||||
if (this.videoEl.readyState >= 1) {
|
||||
this.videoEl.currentTime = 0
|
||||
this.videoEl.play().catch(() => {})
|
||||
} else {
|
||||
const onReady = () => {
|
||||
if (this.videoEl) {
|
||||
this.videoEl.currentTime = 0
|
||||
this.videoEl.play().catch(() => {})
|
||||
}
|
||||
}
|
||||
this.videoEl.addEventListener('loadedmetadata', onReady, { once: true })
|
||||
}
|
||||
} else {
|
||||
this.videoEl.currentTime = 0
|
||||
this.videoEl.play().catch(() => {})
|
||||
playInitial(src: string, preloadUrls: string[]) {
|
||||
if (!this.elA) return
|
||||
this.currentSrc = src
|
||||
this.activeSlot = 'A'
|
||||
this.preloaded.set('A', src)
|
||||
this.elA.src = src
|
||||
this.elA.style.opacity = '1'
|
||||
this.elB!.style.opacity = '0'
|
||||
|
||||
this.waitReady(this.elA).then(() => {
|
||||
this.elA!.currentTime = 0
|
||||
this.elA!.play().catch(() => {})
|
||||
})
|
||||
|
||||
if (preloadUrls.length > 0) {
|
||||
const next = preloadUrls[0]
|
||||
this.preloaded.set('B', next)
|
||||
this.elB!.src = next
|
||||
this.elB!.load()
|
||||
}
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.videoEl?.pause()
|
||||
switchTo(src: string, preloadUrls: string[]) {
|
||||
if (!this.elA || this.switching) return
|
||||
|
||||
const inKey = this.inactiveKey
|
||||
const alreadyPreloaded = this.preloaded.get(inKey)
|
||||
|
||||
if (alreadyPreloaded === src) {
|
||||
this.doCrossFade(src, preloadUrls)
|
||||
} else {
|
||||
this.preloaded.set(inKey, src)
|
||||
this.inactive.src = src
|
||||
this.waitReady(this.inactive).then(() => {
|
||||
this.doCrossFade(src, preloadUrls)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private doCrossFade(src: string, preloadUrls: string[]) {
|
||||
const active = this.active
|
||||
const inactive = this.inactive
|
||||
const inKey = this.inactiveKey
|
||||
|
||||
this.currentSrc = src
|
||||
this.switching = true
|
||||
|
||||
inactive.currentTime = 0
|
||||
inactive.play().catch(() => {})
|
||||
|
||||
active.style.transition = `opacity ${this.crossFadeMs}ms ease`
|
||||
inactive.style.transition = `opacity ${this.crossFadeMs}ms ease`
|
||||
active.style.opacity = '0'
|
||||
inactive.style.opacity = '1'
|
||||
|
||||
setTimeout(() => {
|
||||
active.pause()
|
||||
active.style.transition = 'none'
|
||||
inactive.style.transition = 'none'
|
||||
this.activeSlot = inKey
|
||||
this.preloaded.set(inKey, src)
|
||||
this.switching = false
|
||||
|
||||
if (preloadUrls.length > 0) {
|
||||
const nextInactive = this.inactive
|
||||
const nextKey = this.inactiveKey
|
||||
const candidate = preloadUrls[0]
|
||||
if (candidate !== src) {
|
||||
this.preloaded.set(nextKey, candidate)
|
||||
nextInactive.src = candidate
|
||||
nextInactive.load()
|
||||
}
|
||||
}
|
||||
}, this.crossFadeMs + 50)
|
||||
}
|
||||
|
||||
getCurrentTime(): number {
|
||||
return this.videoEl?.currentTime ?? 0
|
||||
return this.active?.currentTime ?? 0
|
||||
}
|
||||
|
||||
onEnd(cb: VideoEndCallback) {
|
||||
@@ -59,13 +140,21 @@ export class VideoManager {
|
||||
this.onTimeCallback = cb
|
||||
}
|
||||
|
||||
private waitReady(el: HTMLVideoElement): Promise<void> {
|
||||
if (el.readyState >= 2) return Promise.resolve()
|
||||
return new Promise((resolve) => {
|
||||
el.addEventListener('canplay', () => resolve(), { once: true })
|
||||
el.load()
|
||||
})
|
||||
}
|
||||
|
||||
private handleEnded = () => {
|
||||
this.onEndCallback?.()
|
||||
}
|
||||
|
||||
private handleTimeUpdate = () => {
|
||||
if (this.videoEl) {
|
||||
this.onTimeCallback?.(this.videoEl.currentTime)
|
||||
if (this.active) {
|
||||
this.onTimeCallback?.(this.active.currentTime)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user