smov/src/components/player
2023-10-20 16:31:35 +02:00
..
atoms fix double routing bug + positioning bottom for context menus mobile 2023-10-20 16:31:35 +02:00
base quality selection HLS, keyboard shortcuts, playback settings 2023-10-19 19:27:21 +02:00
display quality selection HLS, keyboard shortcuts, playback settings 2023-10-19 19:27:21 +02:00
hooks selected source shown correctly 2023-10-18 16:08:33 +02:00
internals refactored context menu links, + next episode button styling + mobile UI 2023-10-20 15:54:10 +02:00
utils Fix subtitles not showing up in safari, using a blob 2023-10-18 16:54:52 +02:00
index.tsx move video to old and setup new video structure 2023-07-23 15:00:08 +02:00
Player.tsx caption rendering is back! 2023-10-18 14:30:52 +02:00
README.md fundementals for video player rewrite 2023-09-30 20:57:00 +02:00

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