b23042andClaude Opus 4.8
78fc090360
- 클라이언트(React/Vite): Video.js 플레이어, 하단 스테이션바, POI/구조물 영상 오버레이, 카메라 파라미터 보정, 미니맵/RoutePanel - 서버(Express): Range 스트리밍, HLS 변환, 프레임 추출, tus 업로드, 주석 API - 최근 작업: 스테이션바 종점역 표출/양끝 정렬/미도착(재생불가) 표시, POI 라벨 '구분' 우선·컴팩트 팝업·겹침제외 토글·동일좌표 다중행, 진행방향(상/하) 우선 표출, 커서 배지 크기·픽셀 떨림 개선 Co-Authored-By: Claude Opus 4.8 (1M context) <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