fix(expertise): attend seeked avant de switcher la vidéo visible
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m25s

Le flash venait du fait que isReverse changeait immédiatement après
le seek (synchrone), mais le navigateur n'avait pas encore décodé
le frame cible. Maintenant on attend l'événement seeked du <video>
avant de changer isReverse, garantissant que le bon frame est affiché
au moment du switch.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-20 14:32:27 +01:00
parent ff5b0028f1
commit 7838342f96

View file

@ -84,43 +84,41 @@
} }
} }
/**
* Switch visuel entre les deux vidéos.
* Positionne la vidéo cible au bon frame AVANT de l'afficher
* pour éliminer les flashes.
*/
function switchToForward() {
if (!isReverse) return
// Positionner forward au bon frame avant de l'afficher
if (videoFwd) videoFwd.currentTime = currentFwdTime
isReverse = false
}
function switchToReverse() {
if (isReverse) return
// Positionner reverse au bon frame avant de l'afficher
const revPos = videoDuration - currentFwdTime
if (videoRev) videoRev.currentTime = revPos
isReverse = true
}
function playForward(targetTime) { function playForward(targetTime) {
fwdTarget = targetTime fwdTarget = targetTime
if (!isReverse) {
// Déjà sur forward : seek + play directement
if (videoFwd) videoFwd.currentTime = currentFwdTime if (videoFwd) videoFwd.currentTime = currentFwdTime
// Switcher visuellement, puis lancer la lecture
switchToForward()
videoFwd?.play().catch(() => {}) videoFwd?.play().catch(() => {})
return
}
// Changement de direction : seek forward, attendre seeked, puis switcher
if (videoFwd) videoFwd.currentTime = currentFwdTime
videoFwd?.addEventListener('seeked', () => {
isReverse = false // maintenant forward est au bon frame → on l'affiche
videoFwd?.play().catch(() => {})
}, { once: true })
} }
function playReverse(targetFwdPos) { function playReverse(targetFwdPos) {
// targetFwdPos = la position forward-équivalente où on veut arriver
// On la convertit en position dans la vidéo reverse
revTarget = videoDuration - Math.max(targetFwdPos, 0) revTarget = videoDuration - Math.max(targetFwdPos, 0)
const revStart = videoDuration - currentFwdTime const revStart = videoDuration - currentFwdTime
if (isReverse) {
// Déjà sur reverse : seek + play directement
if (videoRev) videoRev.currentTime = revStart if (videoRev) videoRev.currentTime = revStart
// Switcher visuellement, puis lancer la lecture
switchToReverse()
videoRev?.play().catch(() => {}) videoRev?.play().catch(() => {})
return
}
// Changement de direction : seek reverse, attendre seeked, puis switcher
if (videoRev) videoRev.currentTime = revStart
videoRev?.addEventListener('seeked', () => {
isReverse = true // maintenant reverse est au bon frame → on l'affiche
videoRev?.play().catch(() => {})
}, { once: true })
} }
// --- Navigate: move one item up or down (called by composable) --- // --- Navigate: move one item up or down (called by composable) ---
@ -322,7 +320,6 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
opacity: 0; opacity: 0;
transition: opacity 0.15s ease;
} }
.expertise-bg video.active { .expertise-bg video.active {