You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.6 KiB
97 lines
3.6 KiB
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
import { connect } from 'react-redux';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import { giphySet, uploadCompose } from 'flavours/glitch/actions/compose';
|
|
import IconButton from 'flavours/glitch/components/icon_button';
|
|
import ReactGiphySearchbox from 'react-giphy-searchbox'
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
|
|
const messages = defineMessages({
|
|
search: { id: 'giphy.search', defaultMessage: 'Search for GIFs' },
|
|
error: { id: 'giphy.error', defaultMessage: 'Oops! Something went wrong. Please, try again.' },
|
|
loading: { id: 'giphy.loading', defaultMessage: 'Loading...'},
|
|
nomatches: { id: 'giphy.nomatches', defaultMessage: 'No matches found.' },
|
|
close: { id: 'settings.close', defaultMessage: 'Close' },
|
|
});
|
|
|
|
// Utility for converting base64 image to binary for upload
|
|
// https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f
|
|
function dataURLtoFile(dataurl, filename) {
|
|
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
|
|
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
|
|
while(n--){
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new File([u8arr], filename, { type: mime });
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
options: state.getIn(['compose', 'giphy']),
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
/** Set options in the redux store */
|
|
setOpt: (opts) => dispatch(giphySet(opts)),
|
|
/** Submit GIF for upload */
|
|
submit: (file) => dispatch(uploadCompose([file])),
|
|
});
|
|
|
|
export default @connect(mapStateToProps, mapDispatchToProps)
|
|
@injectIntl
|
|
class GIFModal extends ImmutablePureComponent {
|
|
|
|
static propTypes = {
|
|
intl: PropTypes.object.isRequired,
|
|
options: ImmutablePropTypes.map,
|
|
onClose: PropTypes.func.isRequired,
|
|
setOpt: PropTypes.func.isRequired,
|
|
submit: PropTypes.func.isRequired,
|
|
};
|
|
|
|
onDoneButton = (item) => {
|
|
const url = item["images"]["original"]["mp4"];
|
|
var modal = this;
|
|
fetch(url).then(function(response) {
|
|
return response.blob();
|
|
}).then(function(blob) {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(blob);
|
|
reader.onloadend = function() {
|
|
var dataUrl = reader.result;
|
|
const file = dataURLtoFile(dataUrl, 'giphy.mp4');
|
|
modal.props.submit(file);
|
|
modal.props.onClose(); // close dialog
|
|
};
|
|
});
|
|
};
|
|
|
|
render () {
|
|
|
|
const { intl } = this.props;
|
|
|
|
return (
|
|
<div className='modal-root__modal mute-modal'>
|
|
<div className='mute-modal__container'>
|
|
<IconButton title={intl.formatMessage(messages.close)} icon="close" size="16" onClick={this.props.onClose} style={{float: "right"}} /><br />
|
|
<ReactGiphySearchbox
|
|
apiKey="Id56al7DqONG4s5UiiKZZaZbegKNV1EC"
|
|
onSelect={item => this.onDoneButton(item)}
|
|
masonryConfig={[
|
|
{ columns: 2, imageWidth: 190, gutter: 5 },
|
|
{ mq: "700px", columns: 2, imageWidth: 210, gutter: 5 }
|
|
]}
|
|
autoFocus="true"
|
|
searchPlaceholder={intl.formatMessage(messages.search)}
|
|
messageError={intl.formatMessage(messages.error)}
|
|
messageLoading={intl.formatMessage(messages.loading)}
|
|
messageNoMatches={intl.formatMessage(messages.nomatches)}
|
|
wrapperClassName="giphy-modal__searchbox"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|
|
|