Add preload for specific time

kfiroo · Jul 18, 2017 · adeee0e · adeee0e
1 parent 4c5c8b2
commit adeee0e
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 97 deletions.
diff --git a/CachedImage.js b/CachedImage.js
@@ -11,7 +11,8 @@ const {
     ImageBackground,
     ActivityIndicator,
     NetInfo,
-    Platform
+    Platform,
+    Text,
 } = ReactNative;
 
 
@@ -34,7 +35,7 @@ const styles = StyleSheet.create({
 });
 
 function getImageProps(props) {
-    return _.omit(props, ['source', 'defaultSource', 'fallbackSource', 'LoadingIndicator', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage', 'resolveHeaders']);
+    return _.omit(props, ['source', 'defaultSource', 'fallbackSource', 'LoadingIndicator', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage']);
 }
 
 const CACHED_IMAGE_REF = 'cachedImage';
@@ -47,15 +48,13 @@ const CachedImage = React.createClass({
             React.PropTypes.bool,
             React.PropTypes.array
         ]).isRequired,
-        resolveHeaders: React.PropTypes.func
     },
 
     getDefaultProps() {
         return {
             renderImage: props => (<ImageBackground ref={CACHED_IMAGE_REF} {...props}/>),
             activityIndicatorProps: {},
             useQueryParamsInCacheKey: false,
-            resolveHeaders: () => Promise.resolve({})
         };
     },
 
@@ -72,7 +71,8 @@ const CachedImage = React.createClass({
         return {
             isCacheable: false,
             cachedImagePath: null,
-            networkAvailable: true
+            networkAvailable: true,
+            errorLoading: false,
         };
     },
 
@@ -117,20 +117,25 @@ const CachedImage = React.createClass({
     processSource(source) {
         const url = _.get(source, ['uri'], null);
         if (ImageCacheProvider.isCacheable(url)) {
-            const options = _.pick(this.props, ['useQueryParamsInCacheKey', 'cacheGroup']);
+            const options = _.pick(this.props, ['useQueryParamsInCacheKey', 'cacheGroup', 'source']);
             // try to get the image path from cache
             ImageCacheProvider.getCachedImagePath(url, options)
+                .then(ImageCacheProvider.isExpired)
                 // try to put the image in cache if
-                .catch(() => ImageCacheProvider.cacheImage(url, options, this.props.resolveHeaders))
+                .catch(() => ImageCacheProvider.cacheImage(url, options))
                 .then(cachedImagePath => {
+                    if(!cachedImagePath) {
+                        throw new Error('Failed to cache image')
+                    }
                     this.safeSetState({
                         cachedImagePath
                     });
                 })
                 .catch(err => {
                     this.safeSetState({
                         cachedImagePath: null,
-                        isCacheable: false
+                        isCacheable: false,
+                        errorLoading: true,
                     });
                 });
             this.safeSetState({
@@ -147,6 +152,9 @@ const CachedImage = React.createClass({
         if (this.state.isCacheable && !this.state.cachedImagePath) {
             return this.renderLoader();
         }
+        if( this.state.errorLoading ) {
+            return this.renderError();
+        }
         const props = getImageProps(this.props);
         const style = this.props.style || styles.image;
         const source = (this.state.isCacheable && this.state.cachedImagePath) ? {
@@ -211,6 +219,16 @@ const CachedImage = React.createClass({
                       style={activityIndicatorStyle}/>
             )
         });
+    },
+
+    renderError() {
+        const imageStyle = [this.props.style, styles.loaderPlaceholder];
+        const activityIndicatorStyle = this.props.activityIndicatorProps.style || styles.loader;
+        return (
+            <View style={[imageStyle, activityIndicatorStyle]}>
+                <Text>Error</Text>
+            </View>
+        );
     }
 });
 

diff --git a/CachedImageExample/android/app/src/main/AndroidManifest.xml b/CachedImageExample/android/app/src/main/AndroidManifest.xml
@@ -14,7 +14,6 @@
             android:targetSdkVersion="22"/>
 
     <application
-<<<<<<< ours
             android:name=".MainApplication"
             android:allowBackup="true"
             android:label="@string/app_name"
@@ -23,32 +22,16 @@
         <activity
                 android:name=".MainActivity"
                 android:label="@string/app_name"
-                android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
+                android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+                android:windowSoftInputMode="adjustResize"
+        >
             <intent-filter>
                 <action android:name="android.intent.action.MAIN"/>
                 <category android:name="android.intent.category.LAUNCHER"/>
                 <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
             </intent-filter>
         </activity>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
-=======
-      android:name=".MainApplication"
-      android:allowBackup="true"
-      android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:theme="@style/AppTheme">
-      <activity
-        android:name=".MainActivity"
-        android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-        android:windowSoftInputMode="adjustResize">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
->>>>>>> theirs
     </application>
 
 </manifest>
diff --git a/CachedImageExample/android/app/src/main/java/com/cachedimageexample/MainApplication.java b/CachedImageExample/android/app/src/main/java/com/cachedimageexample/MainApplication.java
@@ -7,11 +7,6 @@
 import com.facebook.react.ReactApplication;
 import com.RNFetchBlob.RNFetchBlobPackage;
 import com.facebook.react.ReactInstanceManager;
-=======
-import android.app.Application;
-
-import com.facebook.react.ReactApplication;
->>>>>>> theirs
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -43,13 +38,13 @@ protected List<ReactPackage> getPackages() {
     };
 
     @Override
-<<<<<<< ours
     public ReactNativeHost getReactNativeHost() {
         return mReactNativeHost;
-=======
+    }
+
+    @Override
     public boolean getUseDeveloperSupport() {
       return BuildConfig.DEBUG;
->>>>>>> theirs
     }
 
     @Override

diff --git a/CachedImageExample/index.js b/CachedImageExample/index.js
@@ -74,8 +74,16 @@ const CachedImageExample = React.createClass({
         };
     },
 
-    componentWillMount() {
-        ImageCacheProvider.cacheMultipleImages(images)
+    preloadImages() {
+        // Preload images
+        ImageCacheProvider.cacheMultipleImages(images, {
+            source: {
+                headers: {
+                    'Cache-Control': 'max-age=' + 5
+                },
+                cache: 'only-if-cached'
+            }
+        })
             .then(() => {
                 console.log('cacheMultipleImages Done');
             })
@@ -98,7 +106,13 @@ const CachedImageExample = React.createClass({
     renderRow(uri) {
         return (
             <CachedImage
-                source={{uri, cache: 'only-if-cached'}}
+                source={{
+                    uri,
+                    headers: {
+                        'Cache-Control': 'max-age=' + 5
+                    },
+                    cache: 'only-if-cached'
+                }}
                 defaultSource={loading}
                 style={styles.image}
             />
@@ -120,13 +134,28 @@ const CachedImageExample = React.createClass({
                         color="#2ce7cc"
                     />
                 </View>
-                <ListView
-                    dataSource={this.state.dataSource}
-                    renderRow={this.renderRow}
-                    initialListSize={1}
-                />
+                {this.state.start ? (
+                    <ListView
+                        dataSource={this.state.dataSource}
+                        renderRow={this.renderRow}
+                        initialListSize={1}
+                    />
+                ) : (
+                    <View>
+                        <Button
+                            onPress={() => this.preloadImages()}
+                            title="Preload and cache for 5 sec"
+                            color="#6f97e5"
+                        />
+                        <Button
+                            onPress={() => this.setState({start: true})}
+                            title="Render"
+                            color="#6f97e5"
+                        />
+                    </View>
+                )}
             </View>
-        );
+        )
     }
 });