add video mp4 support

Artem Burduk · Artem Burduk · commit 3e95d30487c1 · 2019-02-04T17:28:48.000+02:00
diff --git a/CachedVideo.js b/CachedVideo.js
@@ -0,0 +1,234 @@
+'use strict';
+
+const _ = require('lodash');
+const React = require('react');
+const ReactNative = require('react-native');
+
+const PropTypes = require('prop-types');
+
+const Video = require('react-native-video');
+
+const ImageCacheManagerOptionsPropTypes = require('./ImageCacheManagerOptionsPropTypes');
+
+const flattenStyle = ReactNative.StyleSheet.flatten;
+
+const ImageCacheManager = require('./ImageCacheManager');
+
+const {
+    View,
+    ImageBackground,
+    ActivityIndicator,
+    NetInfo,
+    Platform,
+    StyleSheet,
+} = ReactNative;
+
+const styles = StyleSheet.create({
+    image: {
+        backgroundColor: 'transparent'
+    },
+    loader: {
+        backgroundColor: 'transparent',
+    },
+    loaderPlaceholder: {
+        backgroundColor: 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+});
+
+function getImageProps(props) {
+    return _.omit(props, ['source', 'defaultSource', 'fallbackSource', 'LoadingIndicator', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage', 'resolveHeaders']);
+}
+
+const CACHED_IMAGE_REF = 'cachedImage';
+
+class CachedVideo extends React.Component {
+
+    static propTypes = {
+        renderImage: PropTypes.func.isRequired,
+        activityIndicatorProps: PropTypes.object.isRequired,
+
+        // ImageCacheManager options
+        ...ImageCacheManagerOptionsPropTypes,
+    };
+
+    static defaultProps = {
+            renderImage: props => (<Video imageStyle={props.style} ref={CACHED_IMAGE_REF} {...props} />),
+            activityIndicatorProps: {},
+    };
+
+    static contextTypes = {
+        getImageCacheManager: PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+        this._isMounted = false;
+        this.state = {
+            isCacheable: true,
+            cachedImagePath: null,
+            networkAvailable: true
+        };
+
+        this.getImageCacheManagerOptions = this.getImageCacheManagerOptions.bind(this);
+        this.getImageCacheManager = this.getImageCacheManager.bind(this);
+        this.safeSetState = this.safeSetState.bind(this);
+        this.handleConnectivityChange = this.handleConnectivityChange.bind(this);
+        this.processSource = this.processSource.bind(this);
+        this.renderLoader = this.renderLoader.bind(this);
+    }
+
+    componentWillMount() {
+        this._isMounted = true;
+        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
+        // initial
+        NetInfo.isConnected.fetch()
+            .then(isConnected => {
+                this.safeSetState({
+                    networkAvailable: isConnected
+                });
+            });
+
+        this.processSource(this.props.source);
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (!_.isEqual(this.props.source, nextProps.source)) {
+            this.processSource(nextProps.source);
+        }
+    }
+
+    setNativeProps(nativeProps) {
+        try {
+            this.refs[CACHED_IMAGE_REF].setNativeProps(nativeProps);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    getImageCacheManagerOptions() {
+        return _.pick(this.props, _.keys(ImageCacheManagerOptionsPropTypes));
+    }
+
+    getImageCacheManager() {
+        // try to get ImageCacheManager from context
+        if (this.context && this.context.getImageCacheManager) {
+            return this.context.getImageCacheManager();
+        }
+        // create a new one if context is not available
+        const options = this.getImageCacheManagerOptions();
+        return ImageCacheManager(options);
+    }
+
+    safeSetState(newState) {
+        if (!this._isMounted) {
+            return;
+        }
+        return this.setState(newState);
+    }
+
+    handleConnectivityChange(isConnected) {
+        this.safeSetState({
+            networkAvailable: isConnected
+        });
+    }
+
+    processSource(source) {
+        const url = _.get(source, ['uri'], null);
+        const options = this.getImageCacheManagerOptions();
+        const imageCacheManager = this.getImageCacheManager();
+
+        imageCacheManager.downloadAndCacheUrl(url, options)
+            .then(cachedImagePath => {
+                this.safeSetState({
+                    cachedImagePath
+                });
+            })
+            .catch(err => {
+                // console.warn(err);
+                this.safeSetState({
+                    cachedImagePath: null,
+                    isCacheable: false
+                });
+            });
+    }
+
+    render() {
+        if (this.state.isCacheable && !this.state.cachedImagePath) {
+            return this.renderLoader();
+        }
+        const props = getImageProps(this.props);
+        const style = this.props.style || styles.image;
+        const source = (this.state.isCacheable && this.state.cachedImagePath) ? {
+            uri: 'file://' + this.state.cachedImagePath
+        } : this.props.source;
+        if (this.props.fallbackSource && !this.state.cachedImagePath) {
+            return this.props.renderImage({
+                ...props,
+                key: `${props.key || source.uri}error`,
+                style,
+                source: this.props.fallbackSource
+            });
+        }
+        return this.props.renderImage({
+            ...props,
+            key: props.key || source.uri,
+            style,
+            source
+        });
+    }
+
+    renderLoader() {
+        const imageProps = getImageProps(this.props);
+        const imageStyle = [this.props.style, styles.loaderPlaceholder];
+
+        const activityIndicatorProps = _.omit(this.props.activityIndicatorProps, ['style']);
+        const activityIndicatorStyle = this.props.activityIndicatorProps.style || styles.loader;
+
+        const LoadingIndicator = this.props.loadingIndicator;
+
+        const source = this.props.defaultSource;
+
+        // if the imageStyle has borderRadius it will break the loading image view on android
+        // so we only show the ActivityIndicator
+        if (!source || (Platform.OS === 'android' && flattenStyle(imageStyle).borderRadius)) {
+            if (LoadingIndicator) {
+                return (
+                    <View style={[imageStyle, activityIndicatorStyle]}>
+                        <LoadingIndicator {...activityIndicatorProps} />
+                    </View>
+                );
+            }
+            return (
+                <ActivityIndicator
+                    {...activityIndicatorProps}
+                    style={[imageStyle, activityIndicatorStyle]}/>
+            );
+        }
+        // otherwise render an image with the defaultSource with the ActivityIndicator on top of it
+        return this.props.renderImage({
+            ...imageProps,
+            style: imageStyle,
+            key: source.uri,
+            source,
+            children: (
+                LoadingIndicator
+                    ? <View style={[imageStyle, activityIndicatorStyle]}>
+                    <LoadingIndicator {...activityIndicatorProps} />
+                </View>
+                    : <ActivityIndicator
+                    {...activityIndicatorProps}
+                    style={activityIndicatorStyle}/>
+            )
+        });
+    }
+
+}
+
+module.exports = CachedVideo;
diff --git a/index.js b/index.js
@@ -1,6 +1,7 @@
 'use strict';
 
 module.exports.CachedImage = require('./CachedImage');
+module.exports.CachedVideo = require('./CachedVideo');
 module.exports.ImageCacheProvider = require('./ImageCacheProvider');
 module.exports.ImageCacheManager = require('./ImageCacheManager');
 module.exports.ImageCachePreloader = require('./ImageCachePreloader');
diff --git a/package.json b/package.json
@@ -48,11 +48,12 @@
   "typings": "./index.d.ts",
   "dependencies": {
     "crypto-js": "3.1.9-1",
-    "lodash": "4.17.4",
+    "lodash": "^4.17.11",
     "prop-types": "15.5.10",
     "react-native-clcasher": "1.0.0",
     "react-native-fetch-blob": "0.10.8",
-    "url-parse": "1.1.9"
+    "react-native-video": "^4.3.1",
+    "url-parse": "^1.4.4"
   },
   "devDependencies": {
     "babel-jest": "^21.0.2",
@@ -61,7 +62,7 @@
     "jest": "^21.0.2",
     "jest-react-native": "^18.0.0",
     "react": "16.0.0-alpha.12",
-    "react-native": "^0.48.3",
+    "react-native": "^0.58.3",
     "react-test-renderer": "^15.6.1",
     "regenerator-runtime": "^0.11.0"
   }
diff --git a/utils/pathUtils.js b/utils/pathUtils.js
@@ -4,7 +4,7 @@ const _ = require('lodash');
 const URL = require('url-parse');
 const SHA1 = require("crypto-js/sha1");
 
-const defaultImageTypes = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'tiff', 'tif'];
+const defaultImageTypes = ['png', 'jpeg', 'jpg', 'gif', 'bmp', 'tiff', 'tif', 'mp4'];
 
 function serializeObjectKeys(obj) {
     return _(obj)
