2017-11-02 17:38:04 +01:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'proptypes';
|
2017-11-02 17:33:13 +01:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { isWebUri } from 'valid-url';
|
|
|
|
import PouchDB from 'pouchdb';
|
|
|
|
// import createDebug from 'debug';
|
|
|
|
// const debug = createDebug('d3d:FileThumb');
|
|
|
|
|
|
|
|
class AuthImage extends React.Component {
|
2017-11-14 13:49:31 +01:00
|
|
|
static propTypes = {
|
|
|
|
dispatch: PropTypes.func,
|
|
|
|
src: PropTypes.string.isRequired,
|
|
|
|
token: PropTypes.string,
|
|
|
|
password: PropTypes.string
|
|
|
|
};
|
2017-11-02 17:41:11 +01:00
|
|
|
|
2017-11-14 13:49:31 +01:00
|
|
|
state = {
|
|
|
|
src: null
|
|
|
|
};
|
2017-11-02 17:41:11 +01:00
|
|
|
|
2017-11-02 17:33:13 +01:00
|
|
|
componentWillMount() {
|
|
|
|
const { src, token, password } = this.props;
|
|
|
|
|
|
|
|
if (src.startsWith('/') || src.startsWith('./')) {
|
|
|
|
this.setState({ src });
|
|
|
|
} else if (isWebUri(src)) {
|
|
|
|
if (token && password) {
|
|
|
|
const filteredSrc = src.replace(/:\/\/.+?@/, '://');
|
|
|
|
const headers = {
|
|
|
|
Authorization: `Basic ${btoa(`${token}:${password}`)}`
|
|
|
|
};
|
|
|
|
fetch(filteredSrc, { headers })
|
|
|
|
.then(response => response.blob())
|
|
|
|
.then(blob => this.setState({ src: URL.createObjectURL(blob) }));
|
|
|
|
} else {
|
|
|
|
this.setState({ src });
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
const [dbName, docName, attachmentName] = src.split('/');
|
|
|
|
const db = new PouchDB(dbName);
|
|
|
|
db.getAttachment(docName, attachmentName).then((blob) => {
|
|
|
|
this.setState({ src: URL.createObjectURL(blob) });
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
URL.revokeObjectURL(this.state.src);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
// filter props before passing them to img element
|
|
|
|
const props = { ...this.props };
|
|
|
|
delete props.dispatch;
|
|
|
|
delete props.token;
|
|
|
|
delete props.password;
|
|
|
|
delete props.src;
|
|
|
|
return (<img { ...props } src={this.state.src} />);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(state => ({
|
|
|
|
token: state.user.session.token,
|
|
|
|
password: state.user.session.password
|
|
|
|
}))(AuthImage);
|