b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2.2 KiB
2.2 KiB
재생 직후 라벨이 몇 초 뒤 나타나는 지연 — 증분 게시 + 현재구간 우선 계산
날짜: 2026-06-24
수정 파일: client/src/components/overlay/StationOverlay.tsx
증상
재생을 누르고 몇 초 뒤에야 화면 라벨(측점/POI)이 나타남. 재생 즉시 보이길 원함.
원인
startLabelPrecompute가 전 프레임 라벨을 청크(200프레임)로 사전계산하는데,
완성된 newMap을 모든 프레임 계산이 끝난 뒤에야 labelMapRef.current에 1회 게시.
→ 긴 영상은 전체 사전계산(수 초)이 끝날 때까지 RAF가 빈 맵을 조회 → 라벨 미표시.
또 항상 idx 0부터 계산해, 중간에서 재생(seek 후)하면 그 구간이 더 늦게 준비됨.
조치
- 현재 재생 프레임부터 순환 계산:
startIdx = currentFrameIdxRef.current에서 시작해(startIdx + processed) % total순서로 처리 → 화면에 보이는 구간을 가장 먼저 계산. - 첫 청크 후 즉시 게시(초기 로드 한정): 맵이 비어 있으면(
labelMapRef.current.size===0) 첫 200프레임(현재 구간)을 채우자마자labelMapRef.current = newMap게시 → 재생 즉시 라벨. 이후 같은 Map 에 추가만(삭제 없음) 하므로 나머지 구간이 깜빡임 없이 보강됨. - 재계산(파라미터 변경)은 기존 방식 유지: 기존 맵이 있으면 완료 시 한 번에 교체
(
livePublish=false) → 슬라이더 조정 중 기존 라벨이 사라지지 않음(깜빡임 방지).
const livePublish = labelMapRef.current.size === 0; // 초기 로드 여부
// 청크 후:
if (livePublish && !published) { labelMapRef.current = newMap; published = true; }
// 완료 시:
if (!livePublish) labelMapRef.current = newMap;
효과
- 초기 로드/재생: 첫 청크(≈수~수십 ms 계산, idle timeout 200ms 상한) 후 바로 라벨 표시.
- seek 후 재생: 그 위치부터 계산되어 즉시 표시.
- 파라미터 재계산: 종전처럼 완성 후 일괄 교체(무깜빡임).
검증
npm run build -w client(node20) tsc + vite build 통과.
소요 시간: 약 12분 Context 사용량: input ~215k / output ~5k tokens