diff --git a/package-lock.json b/package-lock.json index 9815140..04423b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1839,7 +1839,7 @@ }, "supports-color": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" } } @@ -2575,7 +2575,7 @@ "dependencies": { "resolve": { "version": "1.1.7", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", + "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz", "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=" } } @@ -4016,7 +4016,7 @@ }, "regexpu-core": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz", "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=", "requires": { "regenerate": "^1.2.1", @@ -4026,12 +4026,12 @@ }, "regjsgen": { "version": "0.2.0", - "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", + "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz", "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=" }, "regjsparser": { "version": "0.1.5", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", + "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz", "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=", "requires": { "jsesc": "~0.5.0" @@ -4488,7 +4488,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" } } @@ -9423,7 +9423,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, "mem": { @@ -9563,7 +9563,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" }, "mississippi": { @@ -9620,7 +9620,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "requires": { "minimist": "0.0.8" @@ -9628,7 +9628,7 @@ "dependencies": { "minimist": { "version": "0.0.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" } } @@ -9685,7 +9685,7 @@ }, "mute-stream": { "version": "0.0.7", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", + "resolved": "http://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=" }, "nan": { @@ -10043,7 +10043,7 @@ "dependencies": { "minimist": { "version": "0.0.10", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=" }, "wordwrap": { @@ -10090,7 +10090,7 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=" }, "os-locale": { @@ -10105,7 +10105,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=" }, "p-defer": { @@ -10222,7 +10222,7 @@ }, "path-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz", "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo=" }, "path-dirname": { @@ -10237,7 +10237,7 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-is-inside": { @@ -13807,7 +13807,7 @@ }, "pretty-bytes": { "version": "4.0.2", - "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", + "resolved": "http://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", "integrity": "sha1-sr+C5zUNZcbDOqlaqlpPYyf2HNk=" }, "pretty-error": { @@ -14395,7 +14395,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", @@ -14710,11 +14710,6 @@ "symbol-observable": "^1.2.0" } }, - "redux-devtools-extension": { - "version": "2.13.8", - "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz", - "integrity": "sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==" - }, "redux-mock-store": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/redux-mock-store/-/redux-mock-store-1.5.3.tgz", @@ -14961,7 +14956,7 @@ }, "require-uncached": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz", "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=", "requires": { "caller-path": "^0.1.0", @@ -15040,7 +15035,7 @@ }, "rgba-regex": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=" }, "rimraf": { @@ -15102,7 +15097,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "requires": { "ret": "~0.1.10" @@ -15650,7 +15645,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "requires": { "inherits": "^2.0.1", @@ -16027,7 +16022,7 @@ }, "sprintf-js": { "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, "sshpk": { @@ -16178,7 +16173,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "requires": { "safe-buffer": "~5.1.0" @@ -16196,7 +16191,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { "ansi-regex": "^2.0.0" @@ -16221,7 +16216,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" }, "strip-indent": { @@ -16361,7 +16356,7 @@ }, "table": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/table/-/table-4.0.3.tgz", + "resolved": "http://registry.npmjs.org/table/-/table-4.0.3.tgz", "integrity": "sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==", "requires": { "ajv": "^6.0.1", @@ -16519,7 +16514,7 @@ }, "through": { "version": "2.3.8", - "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", + "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=" }, "through2": { @@ -16617,7 +16612,7 @@ }, "topo": { "version": "2.0.2", - "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz", + "resolved": "http://registry.npmjs.org/topo/-/topo-2.0.2.tgz", "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=", "requires": { "hoek": "4.x.x" @@ -16658,7 +16653,7 @@ }, "tty-browserify": { "version": "0.0.0", - "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", + "resolved": "http://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=" }, "tunnel-agent": { @@ -17085,7 +17080,7 @@ }, "vm-browserify": { "version": "0.0.4", - "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", + "resolved": "http://registry.npmjs.org/vm-browserify/-/vm-browserify-0.0.4.tgz", "integrity": "sha1-XX6kW7755Kb/ZflUOOCofDV9WnM=", "requires": { "indexof": "0.0.1" @@ -17972,7 +17967,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "requires": { "string-width": "^1.0.1", @@ -17989,7 +17984,7 @@ }, "string-width": { "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", + "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "requires": { "code-point-at": "^1.0.0", @@ -18062,7 +18057,7 @@ }, "yargs": { "version": "11.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", + "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz", "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==", "requires": { "cliui": "^4.0.0", diff --git a/package.json b/package.json index 212831d..8079fd8 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "react-redux": "^6.0.0", "react-scripts": "2.1.2", "redux": "^4.0.1", - "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0" }, "scripts": { diff --git a/src/actions/action-creators.test.js b/src/actions/action-creators.test.js index cdd477b..418baa6 100644 --- a/src/actions/action-creators.test.js +++ b/src/actions/action-creators.test.js @@ -258,7 +258,10 @@ describe('Action creators', () => { return cb({ image: 'test' }); } }; - store.dispatch(actions.generateGIF([], opts, gifshot)); + // download mock + const download = () => null; + + store.dispatch(actions.generateGIF([], opts, gifshot, download)); expect(store.getActions()).toEqual(expectedActions); }); }); diff --git a/src/actions/index.js b/src/actions/index.js index ca6e557..5bdd765 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -40,12 +40,12 @@ import { badSettingsInput, badNameInput } from '../lib/error-messages'; +import download from 'downloadjs'; import { getBurstErrors, getSettingsErrors, getSaveGraphErrors } from '../lib/input-helpers'; -import {} from '../lib/input-helpers'; const ERROR_DELAY = 3000; let nextFrameID = 0; @@ -231,12 +231,15 @@ export const startAnimation = () => (dispatch, getState) => { // The gifshot library is loaded in index.html const gifshot = window.gifshot; -export const generateGIF = (images, opts, gifMaker = gifshot) => ( - dispatch, - getState -) => { +export const generateGIF = ( + images, + opts, + gifMaker = gifshot, + downloadFn = download +) => (dispatch, getState) => { // Have to check state interval and not opts because opts is in seconds const { interval } = getState().settings.image; + const { gifFileName } = getState().images; const settingsErrors = getSettingsErrors({ interval }); if (Object.keys(settingsErrors).length) { dispatch(flashError(badSettingsInput(settingsErrors))); @@ -248,11 +251,13 @@ export const generateGIF = (images, opts, gifMaker = gifshot) => ( ...opts, progressCallback: progress => dispatch(updateGIFProgress(progress)) }; + gifMaker.createGIF(gifshotArgs, data => { if (data.error) { dispatch(flashError(gifCreationProblem())); } else { dispatch(addGIF(data.image)); + downloadFn(data.image, gifFileName || 'gifsmos.gif', 'image/gif'); } }); }; diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js index 5378604..2858f30 100644 --- a/src/components/GenerateGifForm.js +++ b/src/components/GenerateGifForm.js @@ -21,11 +21,9 @@ class GenerateGifForm extends Component { case 'fontColor': this.props.updateTextColor(evt.target.value); break; - case 'name': this.props.updateGIFFileName(evt.target.value); break; - default: break; } @@ -60,7 +58,7 @@ class GenerateGifForm extends Component { aria-label="generate gif" type="submit" > - Generate! + Download GIF! ); diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index fdd3d20..c3816ba 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; -import download from 'downloadjs'; import SidebarButton from './SidebarButton'; import SidebarButtonWithBadge from './SidebarButtonWithBadge'; import panes from '../constants/pane-types'; @@ -12,7 +11,6 @@ class Sidebar extends Component { this.handleToggleBurst = this.handleToggleBurst.bind(this); this.handleToggleSettings = this.handleToggleSettings.bind(this); this.handleRequestFrame = this.handleRequestFrame.bind(this); - this.handleDownload = this.handleDownload.bind(this); this.handleToggleFiles = this.handleToggleFiles.bind(this); } @@ -31,11 +29,6 @@ class Sidebar extends Component { togglePane(panes.SETTINGS); } - handleDownload() { - const { gifData, gifFileName } = this.props; - download(gifData, gifFileName || 'gifsmos.gif', 'image/gif'); - } - handleRequestFrame() { const { requestFrame, width, height, oversample } = this.props; const imageOpts = { @@ -52,7 +45,7 @@ class Sidebar extends Component { } render() { - const { reset, expandedPane, numFrames, gifData } = this.props; + const { reset, expandedPane, numFrames } = this.props; return (
@@ -87,16 +80,6 @@ class Sidebar extends Component { {!!numFrames && } - {!!gifData.length && ( - - )} -
diff --git a/src/containers/SidebarContainer.js b/src/containers/SidebarContainer.js index b58be03..bf12ef4 100644 --- a/src/containers/SidebarContainer.js +++ b/src/containers/SidebarContainer.js @@ -5,14 +5,12 @@ import { requestFrame, togglePane, reset } from '../actions'; const mapStateToProps = (state, ownProps) => { const { images, settings, ui } = state; const { expandedPane } = ui; - const { gifData, frameIDs, gifFileName } = images; + const { frameIDs } = images; const { width, height, oversample } = settings.image; return { numFrames: frameIDs.length, expandedPane, - gifData, - gifFileName, width, height, oversample diff --git a/src/index.js b/src/index.js index da50e73..9605613 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; -import { composeWithDevTools } from 'redux-devtools-extension'; import { Provider } from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import rootReducer from './reducers'; @@ -11,10 +10,7 @@ import { togglePane } from './actions'; import greet from './lib/dev-greeting'; import './index.css'; -const store = createStore( - rootReducer, - composeWithDevTools(applyMiddleware(thunkMiddleware)) -); +const store = createStore(rootReducer, applyMiddleware(thunkMiddleware)); const closePane = () => store.dispatch(togglePane(panes.NONE));