haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[RN] Cache avatars and provide a default in case load fails 

Avatars are cached to the filesystem and loaded from there when requested again.
The cache is cleaned after a conference ends and on application startup
(defensive move).

In addition, implement a fully local avatar system, which is used as a fallback
when loading a remote avatar fails. It can also be forced using a prop.

The fully local avatars use a user icon as a mask and apply a background color
qhich is picked by hashing the URI passed to the avatar. If no URI is passed a
random color is chosen.

A grace period of 1 second is also implemented so a default local avatar will be
rendered if an Avatar component is mounted but has no URI. If a URI is specified
later on, it will be loaded and displayed. In case loading the remote avatar
fails, the locally generated one will be used.
This commit is contained in:
Saúl Ibarra Corretgé 2017-07-21 16:41:01 +02:00 committed by Lyubo Marinov
parent fe8ac0fff9
commit 122ebe48c7
11 changed files with 253 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
android/sdk/build.gradle
View File

@ -26,6 +26,7 @@ dependencies {
compile 'com.facebook.react:react-native:+'
compile project(':react-native-background-timer')
compile project(':react-native-fetch-blob')
compile project(':react-native-immersive')
compile project(':react-native-keep-awake')
compile project(':react-native-vector-icons')

4
android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetView.java
View File

@ -84,10 +84,10 @@ public class JitsiMeetView extends FrameLayout {
.addPackage(new com.oblador.vectoricons.VectorIconsPackage())
.addPackage(new com.ocetnik.timer.BackgroundTimerPackage())
.addPackage(new com.oney.WebRTCModule.WebRTCModulePackage())
.addPackage(new com.RNFetchBlob.RNFetchBlobPackage())
.addPackage(new com.rnimmersive.RNImmersivePackage())
.addPackage(new org.jitsi.meet.sdk.audiomode.AudioModePackage())
.addPackage(
new org.jitsi.meet.sdk.externalapi.ExternalAPIPackage())
.addPackage(new org.jitsi.meet.sdk.externalapi.ExternalAPIPackage())
.addPackage(new org.jitsi.meet.sdk.proximity.ProximityPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)

2
android/settings.gradle
View File

@ -3,6 +3,8 @@ rootProject.name = 'jitsi-meet'
include ':app', ':sdk'
include ':react-native-background-timer'
project(':react-native-background-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-background-timer/android')
include ':react-native-fetch-blob'
project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
include ':react-native-immersive'
project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
include ':react-native-keep-awake'

8
ios/Podfile
View File

@ -17,8 +17,12 @@ target 'JitsiMeet' do
]
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'react-native-background-timer', :path => '../node_modules/react-native-background-timer'
pod 'react-native-keep-awake', :path => '../node_modules/react-native-keep-awake'
pod 'react-native-background-timer',
:path => '../node_modules/react-native-background-timer'
pod 'react-native-fetch-blob',
:path => '../node_modules/react-native-fetch-blob'
pod 'react-native-keep-awake',
:path => '../node_modules/react-native-keep-awake'
pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
end

2
package.json
View File

@ -56,6 +56,8 @@
"react-i18next": "4.7.0",
"react-native": "0.42.3",
"react-native-background-timer": "1.1.0",
"react-native-fetch-blob": "0.10.6",
"react-native-img-cache": "1.4.0",
"react-native-immersive": "0.0.5",
"react-native-keep-awake": "2.0.4",
"react-native-locale-detector": "1.0.1",

1
react/features/app/components/App.native.js
View File

@ -8,6 +8,7 @@ import '../../mobile/audio-mode';
import '../../mobile/background';
import '../../mobile/external-api';
import '../../mobile/full-screen';
import '../../mobile/image-cache';
import '../../mobile/proximity';
import '../../mobile/wake-lock';

25
react/features/base/participants/components/Avatar.native.js
View File

@ -1,5 +1,8 @@
import React, { Component } from 'react';
import { Image } from 'react-native';
import { CustomCachedImage } from 'react-native-img-cache';
import AvatarImage from './AvatarImage';
/**
* Implements an avatar as a React Native/mobile {@link Component}.
@ -52,21 +55,16 @@ export default class Avatar extends Component {
* @returns {void}
*/
componentWillReceiveProps(nextProps) {
// uri
const prevURI = this.props && this.props.uri;
const nextURI = nextProps && nextProps.uri;
let nextState;
if (prevURI !== nextURI || !this.state) {
nextState = {
...nextState,
const nextState = {
/**
* The source of the {@link Image} which is the actual
* representation of this {@link Avatar}. As {@code Avatar}
* accepts a single URI and {@code Image} deals with a set of
* possibly multiple URIs, the state {@code source} was
* explicitly introduced in order to reduce unnecessary renders.
* representation of this {@link Avatar}. The state
* {@code source} was explicitly introduced in order to reduce
* unnecessary renders.
*
* @type {{
* uri: string
@ -76,9 +74,7 @@ export default class Avatar extends Component {
uri: nextURI
}
};
}
if (nextState) {
if (this.state) {
this.setState(nextState);
} else {
@ -100,10 +96,9 @@ export default class Avatar extends Component {
const { uri, ...props } = this.props;
return (
<Image
<CustomCachedImage
{ ...props }
// XXX Avatar is expected to display the whole image.
component = { AvatarImage }
resizeMode = 'contain'
source = { this.state.source } />
);

200
react/features/base/participants/components/AvatarImage.native.js Normal file
View File

@ -0,0 +1,200 @@
import React, { Component } from 'react';
import { Image, View } from 'react-native';
import { Platform } from '../../react';
/**
* The default avatar to be used, in case the requested URI is not available
* or fails to be loaded.
*
* This is an inline version of images/avatar2.png.
*
* @type {string}
*/
const DEFAULT_AVATAR = require('./defaultAvatar.png');
/**
* The amount of time to wait when the avatar URI is undefined before we start
* showing a default locally generated one. Note that since we have no URI, we
* have nothing we can cache, so the color will be random.
*
* @type {number}
*/
const UNDEFINED_AVATAR_TIMEOUT = 1000;
/**
* Implements an Image component wrapper, which returns a default image if the
* requested one fails to load. The default image background is chosen by
* hashing the URL of the image.
*/
export default class AvatarImage extends Component {
/**
* AvatarImage component's property types.
*
* @static
*/
static propTypes = {
/**
* If set to <tt>true</tt> it will not load the URL, but will use the
* default instead.
*/
forceDefault: React.PropTypes.bool,
/**
* The source the {@link Image}.
*/
source: React.PropTypes.object,
/**
* The optional style to add to the {@link Image} in order to customize
* its base look (and feel).
*/
style: React.PropTypes.object
};
/**
* Initializes new AvatarImage component.
*
* @param {Object} props - Component props.
*/
constructor(props) {
super(props);
this.state = {
failed: false,
showDefault: false
};
this.componentWillReceiveProps(props);
this._onError = this._onError.bind(this);
}
/**
* Notifies this mounted React Component that it will receive new props.
* If the URI is undefined, wait {@code UNDEFINED_AVATAR_TIMEOUT} ms and
* start showing a default locally generated avatar afterwards.
*
* Once a URI is passed, it will be rendered instead, except if loading it
* fails, in which case we fallback to a locally generated avatar again.
*
* @inheritdoc
* @param {Object} nextProps - The read-only React Component props that this
* instance will receive.
* @returns {void}
*/
componentWillReceiveProps(nextProps) {
const prevURI = this.props.source && this.props.source.uri;
const nextURI = nextProps.source && nextProps.source.uri;
if (typeof prevURI === 'undefined') {
clearTimeout(this._timeout);
if (typeof nextURI === 'undefined') {
this._timeout = setTimeout(() => {
this.setState({ showDefault: true });
}, UNDEFINED_AVATAR_TIMEOUT);
} else {
this.setState({ showDefault: nextProps.forceDefault });
}
}
}
/**
* Clear the timer just in case. See {@code componentWillReceiveProps} for
* details.
*
* @inheritdoc
*/
componentWillUnmount() {
clearTimeout(this._timeout);
}
/**
* Computes a hash over the URI and returns a HSL background color. We use
* 75% as lightness, for nice pastel style colors.
*
* @returns {string} - The HSL CSS property.
* @private
*/
_getBackgroundColor() {
const uri = this.props.source.uri;
let hash = 0;
// If we have no URI yet we have no data to hash from, so use a random
// value.
if (typeof uri === 'undefined') {
hash = Math.floor(Math.random() * 360);
} else {
/* eslint-disable no-bitwise */
for (let i = 0; i < uri.length; i++) {
hash = uri.charCodeAt(i) + ((hash << 5) - hash);
hash |= 0; // Convert to 32bit integer
}
/* eslint-enable no-bitwise */
}
return `hsl(${hash % 360}, 100%, 75%)`;
}
/**
* Error handler for image loading. When an image fails to load we'll mark
* it as failed and load the default URI instead.
*
* @private
* @returns {void}
*/
_onError() {
this.setState({ failed: true });
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
*/
render() {
// eslint-disable-next-line no-unused-vars
const { forceDefault, source, style, ...props } = this.props;
const { failed, showDefault } = this.state;
if (failed || showDefault) {
const coloredBackground = {
...style,
backgroundColor: this._getBackgroundColor(),
overflow: 'hidden'
};
let element = React.createElement(Image, {
...props,
source: DEFAULT_AVATAR,
style: Platform.OS === 'android' ? style : coloredBackground
});
if (Platform.OS === 'android') {
// Here we need to wrap the Image in a View because of a bug in
// React Native for Android:
// https://github.com/facebook/react-native/issues/3198
element = React.createElement(View,
{ style: coloredBackground }, element);
}
return element;
} else if (typeof source.uri === 'undefined') {
return null;
}
// We have a URI and it's time to render it.
return (
<Image
{ ...props }
onError = { this._onError }
source = { source }
style = { style } />
);
}
}

BIN
react/features/base/participants/components/defaultAvatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

1
react/features/mobile/image-cache/index.js Normal file
View File

@ -0,0 +1 @@
import './middleware';

28
react/features/mobile/image-cache/middleware.js Normal file
View File

@ -0,0 +1,28 @@
/* @flow */
import { ImageCache } from 'react-native-img-cache';
import { APP_WILL_MOUNT } from '../../app';
import { CONFERENCE_FAILED, CONFERENCE_LEFT } from '../../base/conference';
import { MiddlewareRegistry } from '../../base/redux';
/**
* Middleware that captures conference actions and application startup in order
* cleans up the image cache.
*
* @param {Store} store - Redux store.
* @returns {Function}
*/
// eslint-disable-next-line no-unused-vars
MiddlewareRegistry.register(store => next => action => {
switch (action.type) {
case APP_WILL_MOUNT:
case CONFERENCE_FAILED:
case CONFERENCE_LEFT:
ImageCache.get().clear();
break;
}
return next(action);
});