diff --git a/Libraries/Pano/Prefetch.js b/Libraries/Pano/Prefetch.js index 83d9473f7..5e513533e 100644 --- a/Libraries/Pano/Prefetch.js +++ b/Libraries/Pano/Prefetch.js @@ -52,12 +52,30 @@ const Prefetch = createReactClass({ // Opaque type returned by require('./image.jpg') PropTypes.number, ]), + + /** + * Option onLoad callback called on success + **/ + onLoad: PropTypes.func, + + /** + * Option onLoadEnd callback called on success or failure + **/ + onLoadEnd: PropTypes.func, }, getDefaultProps: function() { return {}; }, + _onLoad: function() { + this.props.onLoad && this.props.onLoad(); + }, + + _onLoadEnd: function() { + this.props.onLoadEnd && this.props.onLoadEnd(); + }, + render: function() { const props = {...this.props} || {}; @@ -71,7 +89,7 @@ const Prefetch = createReactClass({ } return ( - + {this.props.children} ); diff --git a/ReactVR/js/Views/Prefetch.js b/ReactVR/js/Views/Prefetch.js index 3d7f08847..a5c281a32 100644 --- a/ReactVR/js/Views/Prefetch.js +++ b/ReactVR/js/Views/Prefetch.js @@ -52,6 +52,36 @@ export default class RCTPrefetch extends RCTBaseView { return; } + const onError = () => { + onLoadEnd(); + }; + + const onLoad = texture => { + // call onLoad in React + if (texture !== undefined) { + RCTPrefetch.addToCache(uri, texture); + this.UIManager._rnctx.callFunction('RCTEventEmitter', 'receiveEvent', [ + this.getTag(), + 'topLoad', + [], + ]); + } + + onLoadEnd(); + }; + + const onLoadEnd = () => { + // call onLoadEnd in React + this.UIManager._rnctx.callFunction('RCTEventEmitter', 'receiveEvent', [ + this.getTag(), + 'topLoadEnd', + [], + ]); + }; + + // No progress indication for now. + const onProgress = undefined; + if (Array.isArray(uri)) { // Cubemap, check proper format if (uri.length !== 6 || !uri[0].uri) { @@ -65,13 +95,13 @@ export default class RCTPrefetch extends RCTBaseView { const loader = new THREE.CubeTextureLoader(); loader.setCrossOrigin('Access-Control-Allow-Origin'); - loader.load(urls, texture => RCTPrefetch.addToCache(uri, texture), () => {}, () => {}); + loader.load(urls, onLoad, onProgress, onError); } else { // Panorama const url = RCTPrefetch.getUri(uri); const loader = new THREE.TextureLoader(); loader.setCrossOrigin('Access-Control-Allow-Origin'); - loader.load(url, texture => RCTPrefetch.addToCache(uri, texture), () => {}, () => {}); + loader.load(url, onLoad, onProgress, onError); } }