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>
42 lines
2.2 KiB
Markdown
42 lines
2.2 KiB
Markdown
# 재생 직후 라벨이 몇 초 뒤 나타나는 지연 — 증분 게시 + 현재구간 우선 계산
|
|
|
|
**날짜**: 2026-06-24
|
|
**수정 파일**: `client/src/components/overlay/StationOverlay.tsx`
|
|
|
|
## 증상
|
|
재생을 누르고 **몇 초 뒤에야** 화면 라벨(측점/POI)이 나타남. 재생 즉시 보이길 원함.
|
|
|
|
## 원인
|
|
`startLabelPrecompute`가 전 프레임 라벨을 청크(200프레임)로 사전계산하는데,
|
|
완성된 `newMap`을 **모든 프레임 계산이 끝난 뒤에야** `labelMapRef.current`에 1회 게시.
|
|
→ 긴 영상은 전체 사전계산(수 초)이 끝날 때까지 RAF가 빈 맵을 조회 → 라벨 미표시.
|
|
또 항상 idx 0부터 계산해, 중간에서 재생(seek 후)하면 그 구간이 더 늦게 준비됨.
|
|
|
|
## 조치
|
|
1. **현재 재생 프레임부터 순환 계산**: `startIdx = currentFrameIdxRef.current` 에서 시작해
|
|
`(startIdx + processed) % total` 순서로 처리 → 화면에 보이는 구간을 가장 먼저 계산.
|
|
2. **첫 청크 후 즉시 게시**(초기 로드 한정): 맵이 비어 있으면(`labelMapRef.current.size===0`)
|
|
첫 200프레임(현재 구간)을 채우자마자 `labelMapRef.current = newMap` 게시 → 재생 즉시 라벨.
|
|
이후 같은 Map 에 **추가만**(삭제 없음) 하므로 나머지 구간이 깜빡임 없이 보강됨.
|
|
3. **재계산(파라미터 변경)은 기존 방식 유지**: 기존 맵이 있으면 완료 시 한 번에 교체
|
|
(`livePublish=false`) → 슬라이더 조정 중 기존 라벨이 사라지지 않음(깜빡임 방지).
|
|
|
|
```ts
|
|
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
|