This repository has been archived by the owner on Apr 28, 2023. It is now read-only.
forked from glitch-soc/mastodon
-
Notifications
You must be signed in to change notification settings - Fork 5
/
gif_modal.js
98 lines (85 loc) · 3.48 KB
/
gif_modal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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 { tenorSet, uploadCompose } from 'flavours/glitch/actions/compose';
import IconButton from 'flavours/glitch/components/icon_button';
import Tenor from 'react-tenor';
import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
search: { id: 'tenor.search', defaultMessage: 'Search for GIFs' },
error: { id: 'tenor.error', defaultMessage: 'Oops! Something went wrong. Please, try again.' },
loading: { id: 'tenor.loading', defaultMessage: 'Loading...' },
nomatches: { id: 'tenor.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', 'tenor']),
});
const mapDispatchToProps = dispatch => ({
/** Set options in the redux store */
setOpt: (opts) => dispatch(tenorSet(opts)),
/** Submit GIF for upload */
submit: (file, alt) => dispatch(uploadCompose([file], alt)),
});
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 = (result) => {
const url = result.media[0].mp4.url;
const alt = result.content_description;
var modal = this;
// eslint-disable-next-line promise/catch-or-return
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, 'tenor.mp4');
modal.props.submit(file, alt);
modal.props.onClose(); // close dialog
};
});
};
render () {
const { intl } = this.props;
return (
<div className='modal-root__modal tenor-modal'>
<div className='tenor-modal__container'>
<IconButton title={intl.formatMessage(messages.close)} icon='close' size='16' onClick={this.props.onClose} style={{ float: 'right' }} />
<Tenor
token='FJBKNQSVF2DD'
// eslint-disable-next-line react/jsx-no-bind
onSelect={result => this.onDoneButton(result)}
autoFocus='true'
searchPlaceholder={intl.formatMessage(messages.search)}
messageError={intl.formatMessage(messages.error)}
messageLoading={intl.formatMessage(messages.loading)}
messageNoMatches={intl.formatMessage(messages.nomatches)}
contentFilter='off'
/>
<br /><img src='/tenor.svg' alt='Tenor logo' />
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(GIFModal));