ts-pattern
https://www.npmjs.com/package/ts-pattern/v/4.0.1
https://www.kimcoder.io/blog/ts-pattern
https://toss.tech/article/ts-pattern-usage
mermaid
stateDiagram-v2
[*] --> Initialized: 플레이어 마운트
%% 공통 플레이어 상태
state "공통 플레이어 상태" as PlayerState {
%% 재생 상태
state "재생 상태" as PlayState {
Playing --> Paused: 일시정지
Paused --> Playing: 재생
}
%% 볼륨 상태
state "볼륨 상태" as VolumeState {
Unmuted --> Muted: 음소거
Muted --> Unmuted: 음소거 해제
%% 볼륨 레벨
state "볼륨 레벨" as VolumeLevel {
[*] --> Normal
Normal --> Low: 볼륨 감소
Low --> Normal: 볼륨 증가
Normal --> High: 볼륨 증가
High --> Normal: 볼륨 감소
}
}
%% 화면 상태
state "화면 상태" as ScreenState {
Normal --> Fullscreen: 전체화면
Fullscreen --> Normal: 전체화면 종료
}
%% 라이브 스트림 상태
state "라이브 스트림 상태" as LiveState {
Live --> DVR: 뒤로 이동
DVR --> Live: 실시간으로 이동
}
%% 진행바 상태
state "진행바 상태" as Progress {
%% 시청 진행
state "시청 진행" as TimeProgress {
[*] --> Watching
Watching --> Seeking: 진행바 클릭/드래그
Seeking --> Watching: 시간 이동 완료
}
%% 버퍼링
state "버퍼링" as BufferState {
[*] --> Buffering
Buffering --> Buffered: 버퍼링 완료
Buffered --> Buffering: 추가 버퍼링 필요
}
}
}
%% 컨트롤 UI 상태
state "컨트롤 UI 상태" as ControlUI {
Visible --> Hidden: 마우스 멈춤 (3초)
Hidden --> Visible: 마우스 움직임
}
%% 전역 상태 연결
Initialized --> PlayerState: 초기화 완료
Initialized --> ControlUI: 초기 컨트롤 상태 설정
%% 노트: 키보드 컨트롤
note right of PlayerState
스페이스바: 재생/일시정지
F: 전체화면
좌/우 방향키: 앞/뒤로 이동
end note
Subscribe to Liboo.blog
Get the latest posts delivered right to your inbox