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
}
});