fix: capture save thumbnail on videoEnd instead of sceneChange

Previously thumbnail was captured during sceneChange (before video starts
playing), so readyState was low and capture was skipped. Now capture on
videoEnd when frame is guaranteed visible, store in lastThumbnail, and
reuse for both auto-save (slot 0) and manual save.
This commit is contained in:
2026-06-07 21:11:18 +08:00
parent b6eb3c3959
commit bb657b3547

View File

@@ -8,6 +8,7 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
const engine = new Engine()
const saveSystem = new SaveSystem()
const store = useGameStore()
let lastThumbnail: string | undefined
if (import.meta.env.DEV) {
;(window as any).__sm = engine.stateManager
@@ -42,7 +43,21 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
store.clearTimer()
})
engine.on('videoEnd', () => {})
engine.on('videoEnd', () => {
try {
const video = engine.videoManager.getActiveVideoElement()
if (video && video.readyState >= 2) {
const canvas = document.createElement('canvas')
canvas.width = 320
canvas.height = 180
const ctx = canvas.getContext('2d')
if (ctx) {
ctx.drawImage(video, 0, 0, 320, 180)
lastThumbnail = canvas.toDataURL('image/jpeg', 0.6)
}
}
} catch { /* ignore */ }
})
engine.on('gameEnd', () => {
store.setGameEnded(true)
@@ -92,29 +107,13 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
const state = engine.stateManager
const currentScene = store.currentScene
// Capture thumbnail from active video
let thumbnail: string | undefined
try {
const video = engine.videoManager.getActiveVideoElement()
if (video && video.readyState >= 2) {
const canvas = document.createElement('canvas')
canvas.width = 320
canvas.height = 180
const ctx = canvas.getContext('2d')
if (ctx) {
ctx.drawImage(video, 0, 0, 320, 180)
thumbnail = canvas.toDataURL('image/jpeg', 0.6)
}
}
} catch { /* ignore canvas errors */ }
await saveSystem.save(slot, {
timestamp: Date.now(),
currentScene: currentScene?.id ?? '',
variables: state.variables,
flags: [...state.flags],
history: state.history,
thumbnail,
thumbnail: lastThumbnail,
})
await refreshSaves()
}