From 32aa9878440ed470db4af048e144bd9e0153fa3e Mon Sep 17 00:00:00 2001 From: Haley Date: Mon, 17 Jun 2019 13:22:44 -0700 Subject: [PATCH 1/4] created auto-download feature --- package-lock.json | 41 ++++++++++++++++++++++-------- src/actions/index.js | 2 ++ src/components/Preview.js | 2 +- src/components/Sidebar.js | 19 +------------- src/components/SidebarButton.js | 3 --- src/containers/SidebarContainer.js | 3 +-- 6 files changed, 35 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 174dc95..1172aef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5508,7 +5508,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5526,11 +5527,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5543,15 +5546,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5654,7 +5660,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5664,6 +5671,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5676,17 +5684,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5703,6 +5714,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5775,7 +5787,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5785,6 +5798,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5860,7 +5874,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5890,6 +5905,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5907,6 +5923,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5945,11 +5962,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.2", - "bundled": true + "bundled": true, + "optional": true } } }, diff --git a/src/actions/index.js b/src/actions/index.js index 4e6e298..16ecc51 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -35,6 +35,7 @@ import { badSettingsInput } from '../lib/error-messages'; import { getBurstErrors, getSettingsErrors } from '../lib/input-helpers'; +import download from 'downloadjs'; const ERROR_DELAY = 3000; let nextFrameID = 0; @@ -214,6 +215,7 @@ export const generateGIF = (images, opts) => (dispatch, getState) => { dispatch(flashError(gifCreationProblem())); } else { dispatch(addGIF(data.image)); + download(data.image, 'gifsmos.gif', 'image/gif'); } }); }; diff --git a/src/components/Preview.js b/src/components/Preview.js index 485895a..3c900ac 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -89,7 +89,7 @@ class Preview extends Component { onClick={this.handleGenerateGIF} aria-label="generate gif" > - Generate GIF + Download GIF )} diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index a686b08..5c5fa24 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); } handleTogglePreview() { @@ -30,11 +28,6 @@ class Sidebar extends Component { togglePane(panes.SETTINGS); } - handleDownload() { - const { gifData } = this.props; - download(gifData, 'gifsmos.gif', 'image/gif'); - } - handleRequestFrame() { const { requestFrame, width, height, oversample } = this.props; const imageOpts = { @@ -46,7 +39,7 @@ class Sidebar extends Component { } render() { - const { reset, expandedPane, numFrames, gifData } = this.props; + const { reset, expandedPane, numFrames } = this.props; return (
@@ -75,16 +68,6 @@ class Sidebar extends Component { {!!numFrames && } - {!!gifData.length && ( - - )} -
{ const { images, settings, ui } = state; const { expandedPane } = ui; - const { gifData, frameIDs } = images; + const { frameIDs } = images; const { width, height, oversample } = settings.image; return { numFrames: frameIDs.length, expandedPane, - gifData, width, height, oversample From eeb50b6dceec3ff428d8dbe7873a610a4c93b7a0 Mon Sep 17 00:00:00 2001 From: Haley Date: Thu, 20 Jun 2019 14:01:37 -0700 Subject: [PATCH 2/4] removed download icon --- src/components/icons/download.svg | 1 - 1 file changed, 1 deletion(-) delete mode 100644 src/components/icons/download.svg diff --git a/src/components/icons/download.svg b/src/components/icons/download.svg deleted file mode 100644 index 0386a2d..0000000 --- a/src/components/icons/download.svg +++ /dev/null @@ -1 +0,0 @@ - From 1eddd31fb3544257a8295c8d317ec1f3101b1d31 Mon Sep 17 00:00:00 2001 From: Haley Date: Thu, 20 Jun 2019 16:15:10 -0700 Subject: [PATCH 3/4] edited code with merge conflicts --- src/actions/action-creators.test.js | 5 ++++- src/actions/index.js | 14 ++++++++------ src/components/GenerateGifForm.js | 2 +- src/components/Sidebar.js | 6 ------ 4 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/actions/action-creators.test.js b/src/actions/action-creators.test.js index cdd477b..c7fe429 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; + // dispatch action + 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 0a4a00a..5bdd765 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -46,7 +46,6 @@ import { getSettingsErrors, getSaveGraphErrors } from '../lib/input-helpers'; -import {} from '../lib/input-helpers'; const ERROR_DELAY = 3000; let nextFrameID = 0; @@ -232,10 +231,12 @@ 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; @@ -250,12 +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)); - download(data.image, gifFileName || 'gifsmos.gif', 'image/gif'); + downloadFn(data.image, gifFileName || 'gifsmos.gif', 'image/gif'); } }); }; diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js index 6b16cae..2858f30 100644 --- a/src/components/GenerateGifForm.js +++ b/src/components/GenerateGifForm.js @@ -58,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 0f529f4..c3816ba 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -11,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); } @@ -30,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 = { From 452b65ee8bbcb01803b2d1464cb476129f90ac2a Mon Sep 17 00:00:00 2001 From: Haley Date: Thu, 20 Jun 2019 16:34:11 -0700 Subject: [PATCH 4/4] removed comments --- src/actions/action-creators.test.js | 2 +- src/containers/SidebarContainer.js | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/actions/action-creators.test.js b/src/actions/action-creators.test.js index c7fe429..418baa6 100644 --- a/src/actions/action-creators.test.js +++ b/src/actions/action-creators.test.js @@ -260,7 +260,7 @@ describe('Action creators', () => { }; // download mock const download = () => null; - // dispatch action + store.dispatch(actions.generateGIF([], opts, gifshot, download)); expect(store.getActions()).toEqual(expectedActions); }); diff --git a/src/containers/SidebarContainer.js b/src/containers/SidebarContainer.js index 4ef04e6..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