de7c95e273
- 비디오 플레이어 구조 분석 및 최적화 계획 문서 작성 - Modal 전환 기능 상세 분석 문서 작성 - MediaPlayer.v2.jsx 설계를 위한 필수 기능 정의
215 lines
5.7 KiB
Markdown
215 lines
5.7 KiB
Markdown
# 비디오 플레이어 분석 및 최적화 계획
|
|
|
|
**작성일**: 2025-11-10
|
|
**대상**: MediaPlayer.v2.jsx 설계
|
|
|
|
---
|
|
|
|
## 📊 현재 구조 분석
|
|
|
|
### 1. 발견된 파일들
|
|
|
|
| 파일 | 경로 | 라인 수 | 타입 |
|
|
|------|------|---------|------|
|
|
| VideoPlayer.js | `src/components/VideoPlayer/VideoPlayer.js` | 2,658 | Class Component |
|
|
| MediaPlayer.jsx | `src/components/VideoPlayer/MediaPlayer.jsx` | 2,595 | Class Component |
|
|
| MediaPanel.jsx | `src/views/MediaPanel/MediaPanel.jsx` | 415 | Function Component |
|
|
| PlayerPanel.jsx | `src/views/PlayerPanel/PlayerPanel.jsx` | 25,146+ | (파일 읽기 실패) |
|
|
|
|
### 2. 주요 문제점
|
|
|
|
#### 🔴 심각한 코드 비대화
|
|
```
|
|
VideoPlayer.js: 2,658 라인 (클래스 컴포넌트)
|
|
MediaPlayer.jsx: 2,595 라인 (거의 동일한 복사본)
|
|
PlayerPanel.jsx: 25,146+ 라인
|
|
```
|
|
|
|
#### 🔴 과도한 Enact 프레임워크 의존성
|
|
```javascript
|
|
// 7개 이상의 Decorator 래핑
|
|
ApiDecorator
|
|
I18nContextDecorator
|
|
Slottable
|
|
FloatingLayerDecorator
|
|
Skinnable
|
|
SpotlightContainerDecorator
|
|
Spottable, Touchable
|
|
```
|
|
|
|
#### 🔴 복잡한 상태 관리 (20+ 상태 변수)
|
|
```javascript
|
|
state = {
|
|
// 미디어 상태
|
|
currentTime, duration, paused, loading, error,
|
|
playbackRate, proportionLoaded, proportionPlayed,
|
|
|
|
// UI 상태
|
|
announce, feedbackVisible, feedbackAction,
|
|
mediaControlsVisible, mediaSliderVisible, miniFeedbackVisible,
|
|
titleVisible, infoVisible, bottomControlsRendered,
|
|
|
|
// 기타
|
|
sourceUnavailable, titleOffsetHeight, bottomOffsetHeight,
|
|
lastFocusedTarget, slider5WayPressed, thumbnailUrl
|
|
}
|
|
```
|
|
|
|
#### 🔴 메모리 점유 과다
|
|
|
|
**8개의 Job 인스턴스**:
|
|
- `autoCloseJob` - 자동 controls 숨김
|
|
- `hideTitleJob` - 타이틀 숨김
|
|
- `hideFeedbackJob` - 피드백 숨김
|
|
- `hideMiniFeedbackJob` - 미니 피드백 숨김
|
|
- `rewindJob` - 되감기 처리
|
|
- `announceJob` - 접근성 알림
|
|
- `renderBottomControl` - 하단 컨트롤 렌더링
|
|
- `slider5WayPressJob` - 슬라이더 5-way 입력
|
|
|
|
**다수의 이벤트 리스너**:
|
|
- `mousemove`, `touchmove`, `keydown`, `wheel`
|
|
- 복잡한 Spotlight 포커스 시스템
|
|
|
|
#### 🔴 불필요한 기능들 (MediaPanel에서 미사용)
|
|
```javascript
|
|
// PlayerOverlayQRCode (QR코드 표시)
|
|
// VideoOverlayWithPhoneNumber (전화번호 오버레이)
|
|
// ThemeIndicatorArrow (테마 인디케이터)
|
|
// FeedbackTooltip, MediaTitle (주석 처리됨)
|
|
// 복잡한 TabContainerV2 동기화
|
|
// Redux 통합 (updateVideoPlayState)
|
|
```
|
|
|
|
---
|
|
|
|
## 🔍 webOS 특정 기능 분석
|
|
|
|
### 필수 기능
|
|
|
|
#### 1. Spotlight 포커스 관리
|
|
```javascript
|
|
// 리모컨 5-way 네비게이션
|
|
SpotlightContainerDecorator
|
|
Spottable, Touchable
|
|
```
|
|
|
|
#### 2. Media 컴포넌트 (webOS 전용)
|
|
```javascript
|
|
videoComponent: window.PalmSystem ? Media : TReactPlayer
|
|
```
|
|
|
|
#### 3. playbackRate 네거티브 지원
|
|
```javascript
|
|
if (platform.webos) {
|
|
this.video.playbackRate = pbNumber; // 음수 지원 (되감기)
|
|
} else {
|
|
// 브라우저: 수동 되감기 구현
|
|
this.beginRewind();
|
|
}
|
|
```
|
|
|
|
### 제거 가능한 기능
|
|
|
|
- FloatingLayer 시스템
|
|
- 복잡한 announce/accessibility 시스템
|
|
- Marquee 애니메이션
|
|
- 다중 오버레이 시스템
|
|
- Job 기반 타이머 → `setTimeout`으로 대체 가능
|
|
|
|
---
|
|
|
|
## 📐 MediaPlayer.v2.jsx 초기 설계 (수정 전)
|
|
|
|
### 설계 원칙
|
|
```
|
|
1. 함수 컴포넌트 + React Hooks 사용
|
|
2. 상태 최소화 (5~7개만)
|
|
3. Enact 의존성 최소화 (Spotlight 기본만)
|
|
4. 직접 video element 제어
|
|
5. props 최소화 (15개 이하)
|
|
6. 단순한 controls UI
|
|
7. 메모리 효율성 우선
|
|
```
|
|
|
|
### 최소 상태 (6개)
|
|
```javascript
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
const [duration, setDuration] = useState(0);
|
|
const [paused, setPaused] = useState(true);
|
|
const [loading, setLoading] = useState(true);
|
|
const [controlsVisible, setControlsVisible] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
```
|
|
|
|
### 필수 Props (~12개)
|
|
```javascript
|
|
{
|
|
src, // 비디오 URL
|
|
type, // 비디오 타입
|
|
autoPlay, // 자동 재생
|
|
loop, // 반복 재생
|
|
disabled, // modal 상태
|
|
onEnded, // 종료 콜백
|
|
onError, // 에러 콜백
|
|
onBackButton, // 뒤로가기
|
|
thumbnailUrl, // 썸네일
|
|
panelInfo, // 패널 정보
|
|
spotlightId, // spotlight ID
|
|
videoComponent // Media or TReactPlayer
|
|
}
|
|
```
|
|
|
|
### 제거할 기능들
|
|
```
|
|
❌ QR코드 오버레이
|
|
❌ 전화번호 오버레이
|
|
❌ 테마 인디케이터
|
|
❌ 복잡한 피드백 시스템
|
|
❌ MediaSlider (seek bar)
|
|
❌ 자동 숨김/보임 Job 시스템
|
|
❌ Announce/Accessibility 복잡계
|
|
❌ FloatingLayer
|
|
❌ Redux 통합
|
|
❌ TabContainer 동기화
|
|
❌ 다중 overlay 시스템
|
|
❌ MediaTitle, infoComponents
|
|
❌ jumpBy, fastForward, rewind
|
|
❌ playbackRate 조정
|
|
```
|
|
|
|
---
|
|
|
|
## 📈 예상 개선 효과
|
|
|
|
| 항목 | 현재 | 개선 후 | 개선율 |
|
|
|------|------|---------|--------|
|
|
| **코드 라인** | 2,595 | ~500 | **80% 감소** |
|
|
| **상태 변수** | 20+ | 5~7 | **65% 감소** |
|
|
| **Props** | 70+ | ~12 | **83% 감소** |
|
|
| **타이머/Job** | 8 | 2~3 | **70% 감소** |
|
|
| **메모리 점유** | 높음 | 낮음 | **예상 50%+ 감소** |
|
|
| **렌더링 속도** | 느림 | 빠름 | **예상 2~3배 향상** |
|
|
|
|
---
|
|
|
|
## 🚨 중요 요구사항 추가
|
|
|
|
### Modal 모드 전환 기능 (필수)
|
|
|
|
사용자 피드백:
|
|
> "비디오 플레이어가 이렇게 복잡하게 된 데에는 다 이유가 있다.
|
|
> modal=true 모드에서 화면의 일부 크기로 재생이 되다가
|
|
> 그 화면 그대로 키워서 modal=false로 전체화면으로 비디오를 재생하는 부분이 있어야 한다."
|
|
|
|
**→ 이 기능은 반드시 유지되어야 함**
|
|
|
|
---
|
|
|
|
## 📝 다음 단계
|
|
|
|
1. Modal 전환 기능 상세 분석
|
|
2. 필수 기능 재정의
|
|
3. MediaPlayer.v2.jsx 재설계
|
|
4. 구현 우선순위 결정
|