diff --git a/src/Player.js b/src/Player.js index 88c591d3..8e2e4c93 100644 --- a/src/Player.js +++ b/src/Player.js @@ -190,6 +190,11 @@ export default class Player extends Component { this.durationCheckTimeout = setTimeout(this.onDurationCheck, 100) } } + onLoaded = () => { + // Sometimes we know loading has stopped but onReady/onPlay are never called + // so this provides a way for players to avoid getting stuck + this.isLoading = false + } ref = player => { if (player) { this.player = player @@ -208,6 +213,7 @@ export default class Player extends Component { onPlay={this.onPlay} onPause={this.onPause} onEnded={this.onEnded} + onLoaded={this.onLoaded} /> ) } diff --git a/src/players/Facebook.js b/src/players/Facebook.js index d57e2859..c4c18521 100644 --- a/src/players/Facebook.js +++ b/src/players/Facebook.js @@ -27,6 +27,11 @@ export class Facebook extends Component { xfbml: true, version: 'v2.5' }) + FB.Event.subscribe('xfbml.render', msg => { + // Here we know the SDK has loaded, even if onReady/onPlay + // is not called due to a video that cannot be embedded + this.props.onLoaded() + }) FB.Event.subscribe('xfbml.ready', msg => { if (msg.type === 'video' && msg.id === this.playerID) { this.player = msg.instance diff --git a/test/players/Facebook.js b/test/players/Facebook.js index 7d1231f4..29e3f762 100644 --- a/test/players/Facebook.js +++ b/test/players/Facebook.js @@ -46,14 +46,16 @@ test('load()', async t => { init: () => null, Event: { subscribe: (event, fn) => { - fn({ - type: 'video', - id: 'mock-player-id', - instance: { - subscribe: () => null, - unmute: () => null - } - }) + if (event === 'xfbml.ready') { + fn({ + type: 'video', + id: 'mock-player-id', + instance: { + subscribe: () => null, + unmute: () => null + } + }) + } } } }