From 2818520c8f6e4b384b408455f1ec2634c5aa9ea2 Mon Sep 17 00:00:00 2001
From: Lyubo Marinov <lmarinov@atlassian.com>
Date: Fri, 18 Aug 2017 14:54:25 -0500
Subject: [PATCH] [RN] Make react-native-img-cache optional at bundle time

---
 .../participants/components/Avatar.native.js  | 47 ++++++++++++-------
 .../features/mobile/image-cache/functions.js  |  2 +-
 .../features/mobile/image-cache/middleware.js |  2 +-
 .../image-cache/react-native-img-cache.no.js  | 16 +++++++
 4 files changed, 47 insertions(+), 20 deletions(-)
 create mode 100644 react/features/mobile/image-cache/react-native-img-cache.no.js

diff --git a/react/features/base/participants/components/Avatar.native.js b/react/features/base/participants/components/Avatar.native.js
index 68aeb2ead..6b1ac6b75 100644
--- a/react/features/base/participants/components/Avatar.native.js
+++ b/react/features/base/participants/components/Avatar.native.js
@@ -74,8 +74,9 @@ export default class Avatar extends Component {
         // uri
         const prevURI = this.props && this.props.uri;
         const nextURI = nextProps && nextProps.uri;
+        const assignState = !this.state;
 
-        if (prevURI !== nextURI || !this.state) {
+        if (prevURI !== nextURI || assignState) {
             const nextState = {
                 backgroundColor: this._getBackgroundColor(nextProps),
 
@@ -92,10 +93,10 @@ export default class Avatar extends Component {
                 source: _DEFAULT_SOURCE
             };
 
-            if (this.state) {
-                this.setState(nextState);
-            } else {
+            if (assignState) {
                 this.state = nextState;
+            } else {
+                this.setState(nextState);
             }
 
             // XXX @lyubomir: My logic for the character # bellow is as follows:
@@ -113,22 +114,32 @@ export default class Avatar extends Component {
             // an image retrieval action.
             if (nextURI && !nextURI.startsWith('#')) {
                 const nextSource = { uri: nextURI };
+                const observer = () => {
+                    this._unmounted || this.setState((prevState, props) => {
+                        if (props.uri === nextURI
+                                && (!prevState.source
+                                    || prevState.source.uri !== nextURI)) {
+                            return { source: nextSource };
+                        }
+
+                        return {};
+                    });
+                };
 
                 // Wait for the source/URI to load.
-                ImageCache.get().on(
-                    nextSource,
-                    /* observer */ () => {
-                        this._unmounted || this.setState((prevState, props) => {
-                            if (props.uri === nextURI
-                                    && (!prevState.source
-                                        || prevState.source.uri !== nextURI)) {
-                                return { source: nextSource };
-                            }
-
-                            return {};
-                        });
-                    },
-                    /* immutable */ true);
+                if (ImageCache) {
+                    ImageCache.get().on(
+                        nextSource,
+                        observer,
+                        /* immutable */ true);
+                } else if (assignState) {
+                    this.state = {
+                        ...this.state,
+                        source: nextSource
+                    };
+                } else {
+                    observer();
+                }
             }
         }
     }
diff --git a/react/features/mobile/image-cache/functions.js b/react/features/mobile/image-cache/functions.js
index 5da9e1fdb..6c8261966 100644
--- a/react/features/mobile/image-cache/functions.js
+++ b/react/features/mobile/image-cache/functions.js
@@ -27,5 +27,5 @@ function _onLoad() {
  * @returns {void}
  */
 export function prefetch(source) {
-    ImageCache.get().on(source, /* observer */ _onLoad, /* immutable */ true);
+    ImageCache && ImageCache.get().on(source, _onLoad, /* immutable */ true);
 }
diff --git a/react/features/mobile/image-cache/middleware.js b/react/features/mobile/image-cache/middleware.js
index 46cf35f42..73c965856 100644
--- a/react/features/mobile/image-cache/middleware.js
+++ b/react/features/mobile/image-cache/middleware.js
@@ -39,7 +39,7 @@ MiddlewareRegistry.register(({ getState }) => next => action => {
     case APP_WILL_MOUNT:
     case CONFERENCE_FAILED:
     case CONFERENCE_LEFT:
-        ImageCache.get().clear();
+        ImageCache && ImageCache.get().clear();
         break;
 
     case PARTICIPANT_ID_CHANGED:
diff --git a/react/features/mobile/image-cache/react-native-img-cache.no.js b/react/features/mobile/image-cache/react-native-img-cache.no.js
new file mode 100644
index 000000000..69a30afae
--- /dev/null
+++ b/react/features/mobile/image-cache/react-native-img-cache.no.js
@@ -0,0 +1,16 @@
+// XXX The third-party react-native modules react-native-fetch-blob utilizes the
+// same HTTP library as react-native i.e. okhttp. Unfortunately, that means that
+// the versions of okhttp on which react-native and react-native-fetch-blob
+// depend may have incompatible APIs. Such an incompatibility will be made
+// apparent at compile time and the developer doing the compilation may choose
+// to not compile react-native-fetch-blob's source code.
+
+// XXX The choice between the use of react-native-img-cache could've been done
+// at runtime based on whether NativeModules.RNFetchBlob is defined if only
+// react-native-fetch-blob would've completely protected itself. At the time of
+// this writing its source code appears to be attempting to protect itself from
+// missing native binaries but that protection is incomplete and there's a
+// TypeError.
+
+import { Image } from 'react-native';
+export { Image as CachedImage, undefined as ImageCache };