diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js
index 06f0d79874..50b73c1908 100644
--- a/app/javascript/flavours/glitch/actions/compose.js
+++ b/app/javascript/flavours/glitch/actions/compose.js
@@ -69,6 +69,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';
@@ -305,7 +306,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']);
@@ -332,6 +340,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/upload_button.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx
index ed2cbb04f2..5f3073d822 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_button.jsx
@@ -6,6 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
+import GifBoxIcon from '@/material-icons/400-24px/gif_box.svg?react';
import PhotoLibraryIcon from '@/material-icons/400-20px/photo_library.svg?react';
import BrushIcon from '@/material-icons/400-24px/brush.svg?react';
import UploadFileIcon from '@/material-icons/400-24px/upload_file.svg?react';
@@ -15,6 +16,7 @@ import { DropdownIconButton } from './dropdown_icon_button';
const messages = defineMessages({
upload: { id: 'upload_button.label', defaultMessage: 'Add images, a video or an audio file' },
doodle: { id: 'compose.attach.doodle', defaultMessage: 'Draw something' },
+ gif: { id: 'compose.attach.gif', defaultMessage: 'Upload GIF' },
});
const makeMapStateToProps = () => {
@@ -31,6 +33,9 @@ class UploadButton extends ImmutablePureComponent {
disabled: PropTypes.bool,
onSelectFile: PropTypes.func.isRequired,
onDoodleOpen: PropTypes.func.isRequired,
+ onEmbedTenor: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onModalOpen: PropTypes.func.isRequired,
style: PropTypes.object,
resetFileKey: PropTypes.number,
acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
@@ -46,8 +51,10 @@ class UploadButton extends ImmutablePureComponent {
handleSelect = (value) => {
if (value === 'upload') {
this.fileElement.click();
- } else {
+ } else if (value === 'doodle') {
this.props.onDoodleOpen();
+ } else if (value === 'gif') {
+ this.props.onEmbedTenor();
}
};
@@ -73,6 +80,12 @@ class UploadButton extends ImmutablePureComponent {
value: 'doodle',
text: intl.formatMessage(messages.doodle),
},
+ {
+ icon: 'gif-box',
+ iconComponent: GifBoxIcon,
+ value: 'gif',
+ text: intl.formatMessage(messages.gif),
+ },
];
return (
diff --git a/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
index 2082510f12..7243e007ea 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
@@ -1,7 +1,7 @@
import { connect } from 'react-redux';
import { uploadCompose } from '../../../actions/compose';
-import { openModal } from '../../../actions/modal';
+import { openModal, closeModal } from '../../../actions/modal';
import UploadButton from '../components/upload_button';
const mapStateToProps = state => ({
@@ -21,6 +21,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)(UploadButton);
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..247e4c1493
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/gif_modal.jsx
@@ -0,0 +1,109 @@
+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 CloseIcon from '@/material-icons/400-24px/close.svg?react';
+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 {Object} opts
+ */
+ setOpt: (opts) => dispatch(tenorSet(opts)),
+ /**
+ * Submit GIF for upload
+ * @param {File} file
+ * @param {string} 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'
+ />
+
+
+