diff --git a/README.md b/README.md index f019eb9..20402a4 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,7 @@ Settings for each player live under different keys: Key | Options --- | ------- -`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player) +`youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)
`onUnstarted`: Called when state changes to `unstarted` (usually when video fails to autoplay) `facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)
`version`: Facebook SDK version
`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid)) `soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params) `vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed) diff --git a/index.d.ts b/index.d.ts index 0e8832a..703fb3a 100644 --- a/index.d.ts +++ b/index.d.ts @@ -20,6 +20,7 @@ export interface SoundCloudConfig { export interface YouTubeConfig { playerVars?: Object; embedOptions?: Object; + onUnstarted?(): void; } export interface FacebookConfig { diff --git a/src/players/YouTube.js b/src/players/YouTube.js index 612f14a..af67324 100644 --- a/src/players/YouTube.js +++ b/src/players/YouTube.js @@ -85,9 +85,11 @@ export default class YouTube extends Component { }, onError) } - onStateChange = ({ data }) => { - const { onPlay, onPause, onBuffer, onBufferEnd, onEnded, onReady, loop, config: { playerVars } } = this.props - const { PLAYING, PAUSED, BUFFERING, ENDED, CUED } = window[SDK_GLOBAL].PlayerState + onStateChange = (event) => { + const { data } = event + const { onPlay, onPause, onBuffer, onBufferEnd, onEnded, onReady, loop, config: { playerVars, onUnstarted } } = this.props + const { UNSTARTED, PLAYING, PAUSED, BUFFERING, ENDED, CUED } = window[SDK_GLOBAL].PlayerState + if (data === UNSTARTED) onUnstarted() if (data === PLAYING) { onPlay() onBufferEnd() diff --git a/src/props.js b/src/props.js index 1cdd47e..e313273 100644 --- a/src/props.js +++ b/src/props.js @@ -29,7 +29,8 @@ export const propTypes = { }), youtube: shape({ playerVars: object, - embedOptions: object + embedOptions: object, + onUnstarted: func }), facebook: shape({ appId: string, @@ -82,6 +83,8 @@ export const propTypes = { onDisablePIP: func } +const noop = () => {} + export const defaultProps = { playing: false, loop: false, @@ -117,7 +120,8 @@ export const defaultProps = { iv_load_policy: 3, modestbranding: 1 }, - embedOptions: {} + embedOptions: {}, + onUnstarted: noop }, facebook: { appId: '1309697205772819', @@ -165,17 +169,17 @@ export const defaultProps = { options: {} } }, - onReady: function () {}, - onStart: function () {}, - onPlay: function () {}, - onPause: function () {}, - onBuffer: function () {}, - onBufferEnd: function () {}, - onEnded: function () {}, - onError: function () {}, - onDuration: function () {}, - onSeek: function () {}, - onProgress: function () {}, - onEnablePIP: function () {}, - onDisablePIP: function () {} + onReady: noop, + onStart: noop, + onPlay: noop, + onPause: noop, + onBuffer: noop, + onBufferEnd: noop, + onEnded: noop, + onError: noop, + onDuration: noop, + onSeek: noop, + onProgress: noop, + onEnablePIP: noop, + onDisablePIP: noop }