Merge pull request #8 from TriPSs/improvements

Improvements

Author: TriPSs

.gitignore

@@ -61,3 +61,6 @@ coverage/
 
 # Cache
 cache/
+
+android/app/src/main/assets/index.android.bundle
+android/app/src/main/assets/index.android.bundle.meta

android/app/build.gradle

@@ -100,15 +100,15 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
+    compileSdkVersion 26
     buildToolsVersion "28.0.2"
 
     defaultConfig {
         applicationId "com.popcorn"
         minSdkVersion 16
-        targetSdkVersion 22
-        versionCode 6
-        versionName "v0.6.0"
+        targetSdkVersion 26
+        versionCode 7
+        versionName "v0.6.1"
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
@@ -168,6 +168,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-splash-screen')
     compile project(':react-native-languages')
     compile project(':update-react-native-app')
     compile project(':react-native-vector-icons')

android/app/src/main/assets/index.android.bundle

@@ -1,11 +1,20 @@
 package com.popcorn;
 
+import android.os.Bundle;
 import com.facebook.react.GoogleCastActivity;
 import android.content.Intent;
 import android.content.res.Configuration;
 
+import org.devio.rn.splashscreen.SplashScreen;
+
 public class MainActivity extends GoogleCastActivity {
 
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        SplashScreen.show(this, R.style.SplashTheme);
+        super.onCreate(savedInstanceState);
+    }
+
     /**
      * Returns the name of the main component registered from JavaScript.
      * This is used to schedule rendering of the component.

android/app/src/main/assets/index.android.bundle.meta

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.reactcommunity.rnlanguages.RNLanguagesPackage;
 import com.tripss.updaternapp.UpdateRNAppPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -33,6 +34,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new SplashScreenReactPackage(),
             new RNLanguagesPackage(),
             new UpdateRNAppPackage(),
             new VectorIconsPackage(),

android/app/src/main/java/com/popcorn/MainActivity.java

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item android:drawable="@color/background"/>
+
+    <item
+        android:width="100dp"
+        android:height="100dp"
+        android:drawable="@mipmap/logo"
+        android:gravity="center" />
+
+</layer-list>

android/app/src/main/java/com/popcorn/MainApplication.java

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:orientation="vertical" android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/splash">
+</LinearLayout>

android/app/src/main/res/drawable/splash.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="background">#17181b</color>
+</resources>

android/app/src/main/res/layout/launch_screen.xml

@@ -5,17 +5,20 @@
         <!-- Customize your theme here. -->
 
         <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
-        <item name="android:navigationBarColor">#17181b</item>
-
+        <item name="android:navigationBarColor">@color/background</item>
     </style>
 
+    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:statusBarColor">@color/background</item>
+        <item name="android:navigationBarColor">@color/background</item>
+    </style>
 
     <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
         <item name="android:textColor">#ffffff</item>
         <item name="android:textSize">18dp</item>
         <item name="android:fontFamily">sans-serif-light</item>
         <item name="android:gravity">center</item>
-        <item name="android:background">#17181b</item>
+        <item name="android:background">@color/background</item>
     </style>
 
 </resources>

android/app/src/main/res/mipmap/logo.png

@@ -1,4 +1,6 @@
 rootProject.name = 'popcorn'
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 include ':react-native-languages'
 project(':react-native-languages').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-languages/android')
 include ':update-react-native-app'

android/app/src/main/res/values/colors.xml

@@ -6,13 +6,13 @@ import { StyleSheet, BackHandler, View, ScrollView, StatusBar } from 'react-nati
 import * as Animatable from 'react-native-animatable'
 import Markdown from 'react-native-markdown-renderer'
 import { material } from 'react-native-typography'
+import SplashScreen from 'react-native-splash-screen'
 
 import i18n from 'modules/i18n'
 import colors from 'modules/colors'
 import Settings from 'modules/db/Settings'
 
 import Typography from '../Typography'
-import FullScreenLoading from '../FullScreenLoading'
 import Button from '../Button'
 
 export const styles = StyleSheet.create({
@@ -83,57 +83,69 @@ export default class CheckForUpdates extends React.Component {
   }
 
   state = {
-    accepted: false,
-    loading : true,
+    accepted : false,
+    animating: false,
+    loading  : true,
   }
 
   componentWillMount() {
     Settings.getItem(Settings.DISCLAIMER_ACCEPTED).then((accepted) => {
       this.setState({
         accepted: accepted && accepted === 'y',
         loading : false,
+      }, () => {
+        if (!accepted) {
+          SplashScreen.hide()
+        }
       })
     })
   }
 
+  handleAnimationEnd = () => {
+    this.setState({
+      animating: false,
+    })
+  }
+
   handleLeave = () => {
     BackHandler.exitApp()
   }
 
   handleAccept = () => {
-    Settings.setItem(Settings.DISCLAIMER_ACCEPTED, 'y')
-
     this.setState({
-      accepted: true,
+      accepted : true,
+      animating: true,
+    }, () => {
+      Settings.setItem(Settings.DISCLAIMER_ACCEPTED, 'y')
     })
   }
 
   render() {
     const { children } = this.props
-    const { accepted, loading } = this.state
-
-    if (accepted) {
-      return children
-    }
+    const { animating, accepted, loading } = this.state
 
     return (
-      <Animatable.View
-        animation={!accepted ? 'fadeIn' : 'fadeOut'}
-        duration={500}
-        style={styles.root}
-        useNativeDriver>
+      <React.Fragment>
+
+        {children}
 
-        <FullScreenLoading enabled={loading} />
+        {(!accepted || animating) && (
+          <Animatable.View
+            animation={!accepted ? 'fadeIn' : 'fadeOut'}
+            duration={500}
+            style={styles.root}
+            onAnimationEnd={this.handleAnimationEnd}
+            useNativeDriver>
 
-        <StatusBar backgroundColor={colors.BACKGROUND} animated />
+            <StatusBar backgroundColor={colors.BACKGROUND} animated translucent />
 
-        <Typography variant={'headline'} style={styles.title}>
-          {i18n.t('Terms of Service')}
-        </Typography>
+            <Typography variant={'headline'} style={styles.title}>
+              {i18n.t('Terms of Service')}
+            </Typography>
 
-        <ScrollView style={styles.bodyContainer}>
-          <Markdown style={mdStyle}>
-            {`## Your Acceptance
+            <ScrollView style={styles.bodyContainer}>
+              <Markdown style={mdStyle}>
+                {`## Your Acceptance
 By using the Popcorn Time app you signify your agreement to (1) these terms and conditions (the 'Terms of Service').
 
 ## Privacy Policy.
@@ -151,23 +163,25 @@ ALL MOVIES ARE NOT HOSTED ON ANY SERVER AND ARE STREAMED USING THE P2P BIT TORRE
 ## Ability to Accept Terms of Service
 By using Popcorn Time or accessing this site you affirm that you are either more than 18 years of age, or an emancipated minor, or possess legal parental or guardian consent, and are fully able and competent to enter into the terms, conditions, obligations, affirmations, representations, and warranties set forth in these Terms of Service, and to abide by and comply with these Terms of Service. In any case, you affirm that you are over the age of 13, as the Service is not intended for children under 13. If you are under 13 years of age, then please do not use the Service. There are lots of other great web sites for you. Talk to your parents about what sites are appropriate for you.
 `}
-          </Markdown>
-        </ScrollView>
-
-        <View style={styles.actions}>
-          <Button
-            onPress={this.handleLeave}>
-            {i18n.t('leave')}
-          </Button>
-
-          <Button
-            variant={'primary'}
-            onPress={this.handleAccept}>
-            {i18n.t('i accept')}
-          </Button>
-        </View>
-
-      </Animatable.View>
+              </Markdown>
+            </ScrollView>
+
+            <View style={styles.actions}>
+              <Button
+                onPress={this.handleLeave}>
+                {i18n.t('leave')}
+              </Button>
+
+              <Button
+                variant={'primary'}
+                onPress={this.handleAccept}>
+                {i18n.t('i accept')}
+              </Button>
+            </View>
+
+          </Animatable.View>
+        )}
+      </React.Fragment>
     )
   }
 }

android/app/src/main/res/values/styles.xml

@@ -6,5 +6,6 @@ import translations from './translations'
 i18n.locale = RNLanguages.language
 i18n.fallbacks = true
 i18n.translations = translations
+i18n.missingBehaviour = __DEV__ ? 'messages' : 'guess'
 
 export default i18n

android/settings.gradle

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
 import Orientation from 'react-native-orientation'
 import { Constants } from 'popcorn-sdk'
+import SplashScreen from 'react-native-splash-screen'
 
 import i18n from 'modules/i18n'
 import colors from 'modules/colors'
 
 import CardList from 'components/CardList'
 import MainCover from 'components/MainCover'
-import FullScreenLoading from 'components/FullScreenLoading'
 import ScrollViewWithStatusBar from 'components/ScrollViewWithStatusBar'
 
 const styles = StyleSheet.create({
@@ -36,10 +36,6 @@ export default class Home extends React.PureComponent {
     hasInternet: true,
   }
 
-  state = {
-    loading: true,
-  }
-
   componentDidMount() {
     const { getItems } = this.props
 
@@ -59,7 +55,9 @@ export default class Home extends React.PureComponent {
     navigation.navigate('Item', item)
   }
 
-  handleCoverLoaded = () => this.setState({ loading: false })
+  handleCoverLoaded = () => {
+    SplashScreen.hide()
+  }
 
   getMainCover = () => {
     const movies = this.getMovies(false)
@@ -93,13 +91,10 @@ export default class Home extends React.PureComponent {
 
   render() {
     const { isLoading, hasInternet } = this.props
-    const { loading } = this.state
 
     return (
       <View style={styles.root}>
 
-        <FullScreenLoading enabled={isLoading || loading} />
-
         {hasInternet && (
           <ScrollViewWithStatusBar>