mediapicker - npm Package Compare versions

Comparing version 5.1.1 to 5.1.2

package.json

 {
   "name": "mediapicker",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "Library for handling file uploads",
@@ -5,0 +5,0 @@ "main": "./lib/mediapicker.js",

popup/src/components/views/editor/mainEditorView.js

@@ -5,2 +5,6 @@ import React from 'react';
 import {MainContainer} from './styles';
+import {couldNotLoadEditor} from './phrases';
+import {editorClose} from '../../../actions/editorClose';
+import {editorShowError} from '../../../actions/editorShowError';
+import {editorShowImage} from '../../../actions/editorShowImage';
 
@@ -18,11 +22,23 @@ let editorViewModule;
   componentDidMount() {
-    this._ensureEditorViewModuleLoaded();
+    this._ensureEditorViewModuleLoaded(this.props);
   }
 
-  componentWillReceiveProps() {
-    this._ensureEditorViewModuleLoaded();
+  componentWillReceiveProps(newProps) {
+    this._ensureEditorViewModuleLoaded(newProps);
   }
 
-  _ensureEditorViewModuleLoaded() {
-    if (!editorViewModule) {
+  _ensureEditorViewModuleLoaded(props) {
+    const {imageUrl, originalFile, dispatch} = props;
+
+    // Without '&& imageUrl' there will be a lot of frequent attempts to load the editor module:
+    // 
+    // 1) The module can fail to load due to connectivity problems.
+    // 2) It calls this._onEditorError.
+    // 3) It modifies the state of the app: adds error to editorData and removes imageUrl.
+    // 4) This leads to changes of MainEditorView properties and componentWillReceiveProps is called.
+    // 5) It calls _ensureEditorViewModuleLoaded which tries to reload the module, most probably unsuccessfully, go to step 2.
+    // Checking `&& imageUrl` helps because this becomes undefined after first loading failed.
+    //
+    // In other words, we try to load the editor module if we have something to dipslay (imageUrl is set).
+    if (!editorViewModule && imageUrl) {
       // With async-module-loader we perform:
@@ -40,5 +56,6 @@ //
         () => {
-          // TODO: show the error message to the user
-          // https://jira.atlassian.com/browse/FIL-4311
-          console.error('Could not load Editor View module');
+          const retryHandler = () => {
+            dispatch(editorShowImage(imageUrl, originalFile));
+          };
+          this._onEditorError(couldNotLoadEditor, retryHandler);
         }
@@ -91,7 +108,4 @@ );
 
-  _onEditorError(message) {
-    this.props.dispatch({
-      type: 'EDITOR_SHOW_ERROR',
-      error: {message}
-    });
+  _onEditorError(message, retryHandler) {
+    this.props.dispatch(editorShowError(message, retryHandler));
   }
@@ -101,12 +115,8 @@
     this.props.onSave(image);
-    this.props.dispatch({
-      type: 'EDITOR_CLOSE'
-    });
+    this.props.dispatch(editorClose());
   }
 
   _onCancel() {
-    this.props.dispatch({
-      type: 'EDITOR_CLOSE'
-    });
+    this.props.dispatch(editorClose());
   }
 }

popup/src/components/views/upload/upload.js

@@ -11,2 +11,4 @@ 'use strict';
 import {fileClick} from '../../../actions/fileClick';
+import {editorShowImage} from '../../../actions/editorShowImage';
+import {editRemoteImage} from '../../../actions/editRemoteImage';
 
@@ -148,2 +150,3 @@ import {menuEdit} from '../editor/phrases';
       const {progress, file} = item;
+      const {dataURI} = file;
 
@@ -159,12 +162,5 @@ const mediaType = isImage(file.metadata.mimeType) ? 'image' : 'unknown';
       const actions = [];
-      if (mediaType === 'image' && this._isWebGLAvailable) {
+      if (mediaType === 'image' && dataURI && this._isWebGLAvailable) {
         const editHandler = () => {
-          if (item.file && item.file.dataURI) {
-            const {id, name} = item.file.metadata;
-            this.props.dispatch({
-              type: 'EDITOR_SHOW_IMAGE',
-              imageUrl: item.file.dataURI,
-              originalFile: {id, name}
-            });
-          }
+          this.props.dispatch(editorShowImage(dataURI, metadata));
         };
@@ -184,3 +180,3 @@ actions.push(createEditCardAction(editHandler));
             selected={selected}
-            dataURI={file.dataURI}
+            dataURI={dataURI}
             onClick={onClick}
@@ -206,7 +202,3 @@ actions={actions}
     const editHandler = (mediaItem) => {
-      this.props.dispatch({
-        type: 'EDIT_REMOTE_IMAGE',
-        item: mediaItem,
-        collectionName: this.props.recentsCollection
-      });
+      this.props.dispatch(editRemoteImage(mediaItem, this.props.recentsCollection));
     }
@@ -213,0 +205,0 @@

popup/src/middleware/editRemoteImage.js

 import {fileToBase64} from '../tools/fileToBase64';
 import {couldNotLoadImage} from '../components/views/editor/phrases';
+import {editorShowError} from '../actions/editorShowError';
+import {editorShowImage} from '../actions/editorShowImage';
+import {editorShowLoading} from '../actions/editorShowLoading';
+import {EDIT_REMOTE_IMAGE} from '../actions/editRemoteImage';
 
@@ -23,13 +27,9 @@ // When we complete upload, we need to check if we can open the editor.
 export const editRemoteImage = fetcher => store => next => (action) => {
-  if (action.type === 'EDIT_REMOTE_IMAGE') {
+  if (action.type === EDIT_REMOTE_IMAGE) {
     const {item, collectionName} = action;
 
     if (item && item.details && item.details.id) {
-      const {id, name} = item.details;
+      store.dispatch(editorShowLoading(item.details));
+      const {id} = item.details;
 
-      store.dispatch({
-        type: 'EDITOR_SHOW_LOADING',
-        originalFile: {id, name}
-      });
-
       fetcher.getImage(id, collectionName)
@@ -39,6 +39,3 @@ .then(fileToBase64)
           if (continueRenderingEditor(id, store)) {
-            store.dispatch({
-              type: 'EDITOR_SHOW_IMAGE',
-              imageUrl: base64image
-            });
+            store.dispatch(editorShowImage(base64image));
           }
@@ -49,11 +46,5 @@ })
             console.error('Could not retrieve the image', error);
-            store.dispatch({
-              type: 'EDITOR_SHOW_ERROR',
-              error: {
-                message: couldNotLoadImage,
-                retryHandler: () => {
-                  store.dispatch(action);
-                }
-              }
-            });
+            const retryHandler = () => { store.dispatch(action); };
+
+            store.dispatch(editorShowError(couldNotLoadImage, retryHandler));
           }
@@ -60,0 +51,0 @@ });

popup/src/middleware/editRemoteImage.spec.js

@@ -1,5 +0,10 @@
-import {editRemoteImage} from './editRemoteImage';
 import {expect} from 'chai';
 import * as sinon from 'sinon';
 
+import {editRemoteImage} from './editRemoteImage';
+import {EDITOR_SHOW_IMAGE} from '../actions/editorShowImage';
+import {EDITOR_SHOW_LOADING} from '../actions/editorShowLoading';
+import {EDITOR_SHOW_ERROR} from '../actions/editorShowError';
+import {EDIT_REMOTE_IMAGE} from '../actions/editRemoteImage';
+
 describe('editRemoteImage', () => {
@@ -22,3 +27,3 @@ const fileId = 'some-id';
   it('should do nothing if item is not specified', () => {
-    const action = {type: 'EDIT_REMOTE_IMAGE'};
+    const action = {type: EDIT_REMOTE_IMAGE};
     const fetcher = {
@@ -38,3 +43,3 @@ getImage: () => { throw new Error('getImage() function should not be called'); }
   it('should do nothing if item details are not specified', () => {
-    const action = {type: 'EDIT_REMOTE_IMAGE', item: {}};
+    const action = {type: EDIT_REMOTE_IMAGE, item: {}};
     const fetcher = {
@@ -54,3 +59,3 @@ getImage: () => { throw new Error('getImage() function should not be called'); }
   it('should do nothing if item id is not specified', () => {
-    const action = {type: 'EDIT_REMOTE_IMAGE', item: {details: {}}};
+    const action = {type: EDIT_REMOTE_IMAGE, item: {details: {}}};
     const fetcher = {
@@ -71,3 +76,3 @@ getImage: () => { throw new Error('getImage() function should not be called'); }
     let storeCallCount = 0;
-    const action = {type: 'EDIT_REMOTE_IMAGE', item: {details: {id: fileId}}, collectionName};
+    const action = {type: EDIT_REMOTE_IMAGE, item: {details: {id: fileId}}, collectionName};
     const fetcher = {
@@ -85,5 +90,5 @@ getImage: (id, collection) => {
         if (currentCount === 0) {
-          expect(action.type).to.equal('EDITOR_SHOW_LOADING');
+          expect(action.type).to.equal(EDITOR_SHOW_LOADING);
         } else if (currentCount === 1) {
-          expect(action.type).to.equal('EDITOR_SHOW_ERROR');
+          expect(action.type).to.equal(EDITOR_SHOW_ERROR);
           done();
@@ -107,3 +112,3 @@ }
     let storeCallCount = 0;
-    const action = {type: 'EDIT_REMOTE_IMAGE', item: {details: {id: fileId}}, collectionName};
+    const action = {type: EDIT_REMOTE_IMAGE, item: {details: {id: fileId}}, collectionName};
     const fetcher = {
@@ -121,5 +126,5 @@ getImage: (id, collection) => {
         if (currentCount === 0) {
-          expect(action.type).to.equal('EDITOR_SHOW_LOADING');
+          expect(action.type).to.equal(EDITOR_SHOW_LOADING);
         } else if (currentCount === 1) {
-          expect(action.type).to.equal('EDITOR_SHOW_IMAGE');
+          expect(action.type).to.equal(EDITOR_SHOW_IMAGE);
           done();
@@ -126,0 +131,0 @@ }

popup/src/reducers/editorClose.js

@@ -0,3 +1,5 @@
+import {EDITOR_CLOSE} from '../actions/editorClose';
+
 export default function editorClose(state, action) {
-  if (action.type === 'EDITOR_CLOSE') {
+  if (action.type === EDITOR_CLOSE) {
     return {...state, editorData: undefined};
@@ -4,0 +6,0 @@ }

popup/src/reducers/editorClose.spec.js

@@ -1,4 +0,6 @@
-import editorClose from './editorClose';
 import {expect} from 'chai';
 
+import editorClose from './editorClose';
+import {EDITOR_CLOSE} from '../actions/editorClose';
+
 describe('editorClose() reducer', () => {
@@ -25,3 +27,3 @@ const stateBase = {
 
-    const newState = editorClose(oldState, {type: 'EDITOR_CLOSE'});
+    const newState = editorClose(oldState, {type: EDITOR_CLOSE});
     
@@ -28,0 +30,0 @@ expect(newState).to.deep.equal({

popup/src/reducers/editorShowError.js

@@ -0,3 +1,5 @@
+import {EDITOR_SHOW_ERROR} from '../actions/editorShowError';
+
 export default function editorShowError(state, action) {
-  if (action.type === 'EDITOR_SHOW_ERROR') {
+  if (action.type === EDITOR_SHOW_ERROR) {
     return {...state, editorData: {error: action.error}};
@@ -4,0 +6,0 @@ }

popup/src/reducers/editorShowError.spec.js

@@ -1,4 +0,6 @@
-import editorShowError from './editorShowError';
 import {expect} from 'chai';
 
+import editorShowError from './editorShowError';
+import {EDITOR_SHOW_ERROR} from '../actions/editorShowError';
+
 describe('editorShowError() reducer', () => {
@@ -28,3 +30,3 @@ const stateBase = {
     const newState = editorShowError(oldState, {
-      type: 'EDITOR_SHOW_ERROR',
+      type: EDITOR_SHOW_ERROR,
       error: newError
@@ -46,3 +48,3 @@ });
     const newState = editorShowError(oldState, {
-      type: 'EDITOR_SHOW_ERROR',
+      type: EDITOR_SHOW_ERROR,
       error: newError
@@ -49,0 +51,0 @@ });

popup/src/reducers/editorShowImage.js

@@ -0,3 +1,5 @@
+import {EDITOR_SHOW_IMAGE} from '../actions/editorShowImage';
+
 export default function editorShowImage(state, action) {
-  if (action.type === 'EDITOR_SHOW_IMAGE') {
+  if (action.type === EDITOR_SHOW_IMAGE) {
     const {imageUrl} = action;
@@ -4,0 +6,0 @@ const originalFile = action.originalFile || state.editorData.originalFile;

popup/src/reducers/editorShowImage.spec.js

@@ -1,4 +0,6 @@
-import editorShowImage from './editorShowImage';
 import {expect} from 'chai';
 
+import editorShowImage from './editorShowImage';
+import {EDITOR_SHOW_IMAGE} from '../actions/editorShowImage';
+
 describe('editorShowImage() reducer', () => {
@@ -30,3 +32,3 @@ const stateBase = {
     const newState = editorShowImage(oldState, {
-      type: 'EDITOR_SHOW_IMAGE',
+      type: EDITOR_SHOW_IMAGE,
       imageUrl: newImageUrl,
@@ -54,3 +56,3 @@ originalFile: newOriginalFile
     const newState = editorShowImage(oldState, {
-      type: 'EDITOR_SHOW_IMAGE',
+      type: EDITOR_SHOW_IMAGE,
       imageUrl: newImageUrl,
@@ -78,3 +80,3 @@ originalFile: newOriginalFile
     const newState = editorShowImage(oldState, {
-      type: 'EDITOR_SHOW_IMAGE',
+      type: EDITOR_SHOW_IMAGE,
       imageUrl: newImageUrl
@@ -81,0 +83,0 @@ });

popup/src/reducers/editorShowLoading.js

@@ -0,3 +1,5 @@
+import {EDITOR_SHOW_LOADING} from '../actions/editorShowLoading';
+
 export default function editorShowLoading(state, action) {
-  if (action.type === 'EDITOR_SHOW_LOADING') {
+  if (action.type === EDITOR_SHOW_LOADING) {
     return {...state, editorData: {originalFile: action.originalFile}};
@@ -4,0 +6,0 @@ }

popup/src/reducers/editorShowLoading.spec.js

@@ -1,4 +0,6 @@
-import editorShowLoading from './editorShowLoading';
 import {expect} from 'chai';
 
+import editorShowLoading from './editorShowLoading';
+import {EDITOR_SHOW_LOADING} from '../actions/editorShowLoading';
+
 describe('editorShowLoading() reducer', () => {
@@ -28,3 +30,3 @@ const stateBase = {
     const newState = editorShowLoading(oldState, {
-      type: 'EDITOR_SHOW_LOADING',
+      type: EDITOR_SHOW_LOADING,
       originalFile: newOriginalFile
@@ -48,3 +50,3 @@ });
     const newState = editorShowLoading(oldState, {
-      type: 'EDITOR_SHOW_LOADING',
+      type: EDITOR_SHOW_LOADING,
       originalFile: newOriginalFile
@@ -51,0 +53,0 @@ });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16460589

increased by0.09%

Number of package files

306

increased by3.38%

Lines of code

18428

increased by0.8%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes