Core Concepts

State Management

A guide on how to read, update, and subscribe to media state.

The useMediaState and useMediaStore hooks enable you to subscribe directly to specific media state changes, rather than listening to potentially multiple DOM events and binding it yourself.

You can omit the ref if you’re calling the hooks inside a player child component as the media context is available:

The useMediaState and useMediaStore hook will trigger re-renders. For some media state this may be too expensive or unnecessary. You can subscribe to state updates directly on the player instance to avoid triggering renders:

When inside a player child component you can get a player instance reference with useMediaPlayer:

The useMediaRemote hook creates and returns a MediaRemoteControl object. The returned class provides a simple facade for dispatching media request events. This can be used to request media playback to play/pause, change the current volume level, seek to a different time position, and other actions that change media state.

The example above shows that event triggers can be provided to all methods on the MediaRemoteControl class. Trigger events enable connecting media events back to their origin event. This can be useful when trying to understand how a media event was triggered, or when analyzing data such as the time difference between the request and when it was performed.