Add onUnstarted youtube config option

Fixes cookpete/react-player#888
webmiraclepro · May 22, 2020 · 7654c1e · 7654c1e
1 parent e87248b
commit 7654c1e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git 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)<br />`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)<br />`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)<br />`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)<br />`version`: Facebook SDK version<br />`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
@@ -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
@@ -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
@@ -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
 }