(/player) Task

[SoYoung210]

Desc

플레이어 영역과 interaction은 나중에 진행하고, 말풍선 마크업을 먼저 진행하겠습니다.

[SoYoung210]

플레이어

• 플레이어로 들어갈 때, 현재 timestamp 서버로 전달 (put)
• 플레어에서 벗어날 때 현재 진행 시간 서버로 전달 (put)

UI

• 재생: 타임라인을 재생한다.
  • 일시정지
• 타임라인: 1초마다 길어진다.
  • div의 width가 일정 길이만큼 늘어난다.
    • 일정 길이란? 1초 / 전체 시간 * 100 (%)
  • width: 1초 / 전체 시간%
  • javascript inline style로 제어
• 페이지를 벗어날 때, 현재 재생된 시간 전달
• 시간에 맞춰 알맞은 코멘트를 노출한다.
  • 하나의 코멘트는 여러 말풍선
  • 하나의 코멘트에 해당하는 시간을 노출
  • 하나의 코멘트에 해당하는 타입별로 말하는 이를 노출
  • 코멘트가 늘어날 때마다 useEffect에서 scrollToDown

Store

selector

• 현재 진행 시간 (number)
• 전체 러닝 타임 (number)
• 현재 재생 상태 (boolean)
• 코멘트(comment[])

interface Comment {
  kind: CommentKind
  contents: string
  time: number // 초 단위
}

action

• fetch / success / fail
• play
• pause
• (forward)
• (backward)

data

api (/movies/{id}/player)

• 제목
• Comment[]
• 현재 진행 시간 (저장된 값이 없다면 0)
• 전체 러닝 타임

initialState

• 현재 재생 상태: false

middleware (redux-observable)