usePlayerChannel Hook
The usePlayerChannel hook provides a method of sharing data across nodes in the DOM which do not share a common ancestor.
This hook allows a number of components to communicate:
Components
Embedded Player Button
This component is embedded in the third party radio stations website and controls the Embedded Player being displayed as well as Play/Pause functionality.
Embedded Popup Controller
This component serves as the root of the core embedded player and initialises much of the functionality
Embedded Player
This component is the main controller for the Embedded Player, containing the Embedded Player UI, menus and player controls
Embedded Inline Advert
This component is embedded anywhere on the third party website and receives static adverts to display periodically.
Architecture
The inter-component communica
Inter-Component Communication
| Transmitter | Receiver | Message | Purpose |
|---|---|---|---|
| Button | Popup Controller | requestPopup | Requests the Embedded Player pops into view |
| Popup Controller | Button | confirmPopup | Confirms the Embedded Player is in a popped up view |
| Button | Player | sendPlayRequest | Requests that the Player toggles between Play and Pause |
| Player | Button | requestPlayAndBroadcast | Toggles the play/pause status of the player and sends a message to the Button to sync state |
| Player | Inline Advert | sendAdvert | On receiving a new Google Advert this sends the ad data to the inline advert component |
| Player | Inline Advert | sendCompanionAdvert | On receiving a new non-Google Ad this sends the ad data to the inline advert component |
Using the Broadcast Channel from outside the console
Below is a set functions assigned to the window object which can be used to interact with the player
getPlayState()
This function returns the current play state of the player: play, pause or
stop.
requestPopup(shouldPlay?:boolean = true)
This function sends a message to the Embedded Player requesting that it pops up into it's visible state - by default it will start playing automatically. This can be controlled with the shouldPlay parameter
requestPlay()
This function sends a message to the Embedded Player requesting that the stream plays. If the player is not popped up, this is the equivilant of calling requestPopup(true)
requestStop()
This function sends a message to the Embedded Player requesting that the stream stops or pauses depending on it's capabilities.
window.getPlayState();
window.requestPopup(); || window.requestPopup(true); || window.requestPopup(false);
window.requestPlay();
window.requestStop();