From 97832e0eefd1983fc0777b4660fcef8b9fbc104f Mon Sep 17 00:00:00 2001
From: Lyubo Marinov <lmarinov@atlassian.com>
Date: Thu, 3 Aug 2017 12:43:04 -0500
Subject: [PATCH] [RN] Prefetch remote avatar images 1/2

---
 .../components/ParticipantView.native.js      |  5 +++
 .../features/mobile/image-cache/functions.js  | 31 +++++++++++++++++++
 react/features/mobile/image-cache/index.js    |  2 ++
 3 files changed, 38 insertions(+)
 create mode 100644 react/features/mobile/image-cache/functions.js

diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.js
index 8369b46306..a940541688 100644
--- a/react/features/base/participants/components/ParticipantView.native.js
+++ b/react/features/base/participants/components/ParticipantView.native.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { JitsiParticipantConnectionStatus } from '../../lib-jitsi-meet';
+import { prefetch } from '../../../mobile/image-cache';
 import {
     MEDIA_TYPE,
     shouldRenderVideoTrack,
@@ -209,6 +210,10 @@ function _mapStateToProps(state, ownProps) {
         // runtime which means that, if their old and new avatar URLs fail to
         // download, Avatar will change their automatically-generated colors.
         avatar || participant.local || (avatar = `#${participant.id}`);
+
+        // ParticipantView knows before Avatar that an avatar URL will be used
+        // so it's advisable to prefetch here.
+        avatar && prefetch({ uri: avatar });
     }
 
     return {
diff --git a/react/features/mobile/image-cache/functions.js b/react/features/mobile/image-cache/functions.js
new file mode 100644
index 0000000000..52e5188f24
--- /dev/null
+++ b/react/features/mobile/image-cache/functions.js
@@ -0,0 +1,31 @@
+import { ImageCache } from 'react-native-img-cache';
+
+/**
+ * Notifies about the successful download of an <tt>Image</tt> source. The name
+ * is inspired by <tt>Image</tt>. The downloaded <tt>Image</tt> source is not
+ * available because (1) I do not know how to get it from {@link ImageCache} and
+ * (2) we do not need it bellow. The function was explicitly introduced to cut
+ * down on unnecessary <tt>ImageCache</tt> <tt>observer</tt> instances.
+ *
+ * @private
+ * @returns {void}
+ */
+function _onLoad() {
+    // ImageCache requires an observer; otherwise, we do not need it because we
+    // merely want to initiate the download and do not care what happens with it
+    // afterwards.
+}
+
+/**
+ * Initiates the retrieval of a specific <tt>Image</tt> source (if it has not
+ * been initiated already). Due to limitations of {@link ImageCache}, the source
+ * may have at most one <tt>uri</tt>. The name is inspired by <tt>Image</tt>.
+ *
+ * @param {Object} source - The <tt>Image</tt> source with preferably exactly
+ * one <tt>uri</tt>.
+ * @public
+ * @returns {void}
+ */
+export function prefetch(source) {
+    ImageCache.get().on(source, /* observer */ _onLoad, /* immutable */ true);
+}
diff --git a/react/features/mobile/image-cache/index.js b/react/features/mobile/image-cache/index.js
index d436892893..e975ed0e86 100644
--- a/react/features/mobile/image-cache/index.js
+++ b/react/features/mobile/image-cache/index.js
@@ -1 +1,3 @@
+export * from './functions';
+
 import './middleware';