mirror of
https://github.com/movie-web/movie-web.git
synced 2024-06-02 23:38:45 +02:00
| .. | ||
| atoms | ||
| base | ||
| display | ||
| hooks | ||
| internals | ||
| utils | ||
| index.tsx | ||
| Player.tsx | ||
| README.md | ||
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 separate 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