diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js
index 9e0b123704..283928a0c0 100644
--- a/app/javascript/flavours/glitch/actions/compose.js
+++ b/app/javascript/flavours/glitch/actions/compose.js
@@ -70,6 +70,7 @@ export const COMPOSE_UPLOAD_CHANGE_SUCCESS = 'COMPOSE_UPLOAD_UPDATE_SUCCESS'
export const COMPOSE_UPLOAD_CHANGE_FAIL = 'COMPOSE_UPLOAD_UPDATE_FAIL';
export const COMPOSE_DOODLE_SET = 'COMPOSE_DOODLE_SET';
+export const COMPOSE_TENOR_SET = 'COMPOSE_TENOR_SET';
export const COMPOSE_POLL_ADD = 'COMPOSE_POLL_ADD';
export const COMPOSE_POLL_REMOVE = 'COMPOSE_POLL_REMOVE';
@@ -297,7 +298,14 @@ export function doodleSet(options) {
};
}
-export function uploadCompose(files) {
+export function tenorSet(options) {
+ return {
+ type: COMPOSE_TENOR_SET,
+ options: options,
+ };
+}
+
+export function uploadCompose(files, alt = '') {
return function (dispatch, getState) {
const uploadLimit = 4;
const media = getState().getIn(['compose', 'media_attachments']);
@@ -323,6 +331,7 @@ export function uploadCompose(files) {
resizeImage(f).then(file => {
const data = new FormData();
data.append('file', file);
+ data.append('description', alt);
// Account for disparity in size of original image and resized data
total += file.size - f.size;
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx
index 98bba41198..f03da41bed 100644
--- a/app/javascript/flavours/glitch/features/compose/components/options.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx
@@ -137,6 +137,9 @@ class ComposerOptions extends ImmutablePureComponent {
onChangeContentType: PropTypes.func,
onTogglePoll: PropTypes.func,
onDoodleOpen: PropTypes.func,
+ onEmbedTenor: PropTypes.func,
+ onModalClose: PropTypes.func,
+ onModalOpen: PropTypes.func,
onToggleSpoiler: PropTypes.func,
onUpload: PropTypes.func,
contentType: PropTypes.string,
@@ -157,7 +160,7 @@ class ComposerOptions extends ImmutablePureComponent {
// Handles attachment clicks.
handleClickAttach = (name) => {
const { fileElement } = this;
- const { onDoodleOpen } = this.props;
+ const { onDoodleOpen, onEmbedTenor } = this.props;
// We switch over the name of the option.
switch (name) {
@@ -171,6 +174,11 @@ class ComposerOptions extends ImmutablePureComponent {
onDoodleOpen();
}
return;
+ case 'gif':
+ if (onEmbedTenor) {
+ onEmbedTenor();
+ }
+ return;
}
};
@@ -252,6 +260,11 @@ class ComposerOptions extends ImmutablePureComponent {
name: 'doodle',
text: formatMessage(messages.doodle),
},
+ {
+ icon: 'file-image-o',
+ name: 'gif',
+ text: formatMessage(messages.gif),
+ }
]}
onChange={this.handleClickAttach}
title={formatMessage(messages.attach)}
diff --git a/app/javascript/flavours/glitch/features/compose/containers/options_container.js b/app/javascript/flavours/glitch/features/compose/containers/options_container.js
index c44d3ce305..94e5fe20e2 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/options_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/options_container.js
@@ -6,7 +6,7 @@ import {
addPoll,
removePoll,
} from 'flavours/glitch/actions/compose';
-import { openModal } from 'flavours/glitch/actions/modal';
+import { openModal, closeModal } from 'flavours/glitch/actions/modal';
import Options from '../components/options';
@@ -51,6 +51,24 @@ const mapDispatchToProps = (dispatch) => ({
modalProps: { noEsc: true, noClose: true },
}));
},
+
+ onEmbedTenor() {
+ dispatch(openModal({
+ modalType: 'TENOR',
+ modalProps: { noEsc: true },
+ }));
+ },
+
+ onModalClose() {
+ dispatch(closeModal({
+ modalType: undefined,
+ ignoreFocus: false,
+ }));
+ },
+
+ onModalOpen(props) {
+ dispatch(openModal({ modalType: 'ACTIONS', modalProps: props }));
+ },
});
export default connect(mapStateToProps, mapDispatchToProps)(Options);
diff --git a/app/javascript/flavours/glitch/features/ui/components/gif_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/gif_modal.jsx
new file mode 100644
index 0000000000..0ab2800d90
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/gif_modal.jsx
@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, injectIntl } from 'react-intl';
+
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { connect } from 'react-redux';
+
+import Tenor from 'react-tenor';
+
+import { tenorSet, uploadCompose } from 'flavours/glitch/actions/compose';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+
+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
+ * @param opts
+ */
+ setOpt: (opts) => dispatch(tenorSet(opts)),
+ /**
+ * Submit GIF for upload
+ * @param file
+ * @param alt
+ */
+ 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 (
+
+
+
+
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'
+ />
+
+
+