feat(frontend): create initial VideoPlayer

[keanu-a]

Description

Created initial VideoPlayer with controls using media-chrome. Using media-chrome will allow custom control bar on primitives. Will be customizing the <MediaTimeRange> in another issue/PR for comments.

Changes

• Created a useIsHydrated hook so Next knows when the page has finished hydration so it can run client side operations, for the case of this PR, rendering MediaController.

Notes

Hydration
Media Chrome's controls are custom elements that "upgrade" on the client. This means a mutation on the DOM which didn't exist in the server rendered HTML. Since the page is SSR, React/Next compares server HTML against first client render and makes sure the markup match.

• Created a <div> placeholder so theres identical markup on both server and client render
• One hydrated, the real player mounts and no longer compared against server html
• Placeholder also reserves video player space so no layout shift happens

This is why the useIsHydated hook was created which was built on useSyncExternalStore which returns

• False if on server or during hydration
• True if on client after hydration