diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 5a432c9..e0cde13 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -9,14 +9,10 @@ import StorageKeys from '../constants/Storage'; import CachingStorage from '../utils/CachingStorage'; import JellyfinValidator from '../utils/JellyfinValidator'; -// Loading component rendered in webview to avoid flash of white -const loading = () => ( - -); - export default class HomeScreen extends React.Component { state = { server: null, + isLoading: true, isVideoPlaying: false }; @@ -34,7 +30,7 @@ export default class HomeScreen extends React.Component { onNavigationChange(navigation) { const url = new Url(navigation.url); - console.debug('navigationChange', url); + console.debug('navigationChange', navigation, url); let { isVideoPlaying } = this.state; // Modal windows in the player also trigger hash changes @@ -89,53 +85,55 @@ export default class HomeScreen extends React.Component { } render() { - if (!this.state.server || !this.state.server.url) { - return loading(); - } + // Hide webview until loaded + const webviewStyle = this.state.isLoading ? styles.loading : styles.container; return ( - + {this.state.server && this.state.server.url && ( + { + // console.debug('message', state); + if (state.data === 'navigationStateChange') { + this.onNavigationChange(state); } - } + }} - history.pushState = wrap(history.pushState); - history.replaceState = wrap(history.replaceState); - window.addEventListener('popstate', function() { - window.ReactNativeWebView.postMessage('navigationStateChange'); - }); - })(); - - true; - `} - onMessage={({ nativeEvent: state }) => { - // console.debug('message', state); - if (state.data === 'navigationStateChange') { - this.onNavigationChange(state); - } - }} - - // Make scrolling feel faster - decelerationRate='normal' - // Display loading indicator - startInLoadingState={true} - renderLoading={loading} - // Media playback options to fix video player - allowsInlineMediaPlayback={true} - mediaPlaybackRequiresUserAction={false} - // Use WKWebView on iOS - useWebKit={true} - /> + // Make scrolling feel faster + decelerationRate='normal' + // Update state when loading is complete + onLoadEnd={() => { this.setState({ isLoading: false }) }} + // Media playback options to fix video player + allowsInlineMediaPlayback={true} + mediaPlaybackRequiresUserAction={false} + // Use WKWebView on iOS + useWebKit={true} + /> + )} + ); } } @@ -144,5 +142,10 @@ const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: Colors.backgroundColor + }, + loading: { + flex: 1, + backgroundColor: Colors.backgroundColor, + opacity: 0 } });