# Video player component

Video player is quite a complex component, so here is a rundown of all the parts

# Composable parts
These parts can be used to build any shape of a video player.
 - `/atoms`- any ui element that controls the player. (Seekbar, Pause button, quality selection, etc)
 - `/base` - base components that are used to build a player. Like the main container

# internal parts
These parts are internally used, they aren't exported. Do not use them outside of player internals.

### `/display`
The display interface, abstraction on how to actually play the content (e.g Video element, chrome casting, etc)
 - It must be completely seperate from any react code
 - It must not interact with state, pass async data back with events

### `/internals`
Internal components that are always rendered on every player.
 - Only components that are always present on the player instance, they must never unmount

### `/utils`
miscellaneous logic, put anything that is unique to the video player internals.

### `/hooks`
Hooks only used for video player.
 - only exception is usePlayer, as its used outside of the player to control the player

### `~/src/stores/player`
State for the video player.
 - Only parts related to the video player may utilize the state