Backdrop WIP

src/components/stage-selector/stage-selector.jsx

@@ -32,16 +32,19 @@ const messages = defineMessages({
     addBackdropFromFile: {
         id: 'gui.stageSelector.addBackdropFromFile',
         description: 'Button to add a stage in the target pane from file',
-        defaultMessage: 'Coming Soon'
+        defaultMessage: 'Upload Backdrop'
     }
 });
 
 const StageSelector = props => {
     const {
         backdropCount,
+        fileInputRef,
         intl,
         selected,
         url,
+        onBackdropFileUploadClick,
+        onBackdropFileUpload,
         onClick,
         onNewBackdropClick,
         onSurpriseBackdropClick,
@@ -81,7 +84,11 @@ const StageSelector = props => {
                 moreButtons={[
                     {
                         title: intl.formatMessage(messages.addBackdropFromFile),
-                        img: fileUploadIcon
+                        img: fileUploadIcon,
+                        onClick: onBackdropFileUploadClick,
+                        fileAccept: '.svg', // Bitmap coming soon
+                        fileChange: onBackdropFileUpload,
+                        fileInput: fileInputRef
                     }, {
                         title: intl.formatMessage(messages.addBackdropFromSurprise),
                         img: surpriseIcon,
@@ -102,7 +109,10 @@ const StageSelector = props => {
 
 StageSelector.propTypes = {
     backdropCount: PropTypes.number.isRequired,
+    fileInputRef: PropTypes.func,
     intl: intlShape.isRequired,
+    onBackdropFileUpload: PropTypes.func,
+    onBackdropFileUploadClick: PropTypes.func,
     onClick: PropTypes.func,
     onEmptyBackdropClick: PropTypes.func,
     onNewBackdropClick: PropTypes.func,

src/containers/costume-tab.jsx

@@ -193,12 +193,8 @@ class CostumeTab extends React.Component {
 
             const md5Ext = `${md5}.${costumeFormat}`;
 
-            // We don't have info about bitmapResolution or rotationCenter...
             const vmCostume = {
                 name: 'costume1',
-                // rotationCenterX: 0,
-                // rotationCenterY: 0,
-                // bitmapResolution: 1,
                 dataFormat: costumeFormat,
                 md5: `${md5Ext}`
             };

src/containers/stage-selector.jsx

@@ -18,7 +18,10 @@ class StageSelector extends React.Component {
             'handleClick',
             'handleSurpriseBackdrop',
             'handleEmptyBackdrop',
-            'addBackdropFromLibraryItem'
+            'addBackdropFromLibraryItem',
+            'handleFileUploadClick',
+            'handleBackdropUpload',
+            'setFileInput'
         ]);
     }
     addBackdropFromLibraryItem (item) {
@@ -32,7 +35,7 @@ class StageSelector extends React.Component {
         return this.props.vm.addBackdrop(item.md5, vmBackdrop);
     }
     handleClick (e) {
-        e.preventDefault();
+        // if (!this.fileInput || e.target !== this.fileInput) e.preventDefault();
         this.props.onSelect(this.props.id);
     }
     handleSurpriseBackdrop () {
@@ -51,6 +54,60 @@ class StageSelector extends React.Component {
             });
         }
     }
+    handleBackdropUpload (e) {
+        const thisFileInput = e.target;
+        let thisFile = null;
+        const reader = new FileReader();
+        reader.onload = () => {
+            // Reset the file input value now that we have everything we need
+            // so that the user can upload the same image multiple times
+            // if they choose
+            thisFileInput.value = null;
+            // Cache the image in storage
+            const backdropBuffer = reader.result;
+            const storage = this.props.vm.runtime.storage;
+            const fileType = thisFile.type; // check what the browser thinks this is
+            // Only handling png and svg right now
+            let backdropFormat = null;
+            let assetType = null;
+            if (fileType === 'image/svg+xml') {
+                backdropFormat = storage.DataFormat.SVG;
+                assetType = storage.AssetType.ImageVector;
+            } else if (fileType === 'image/jpeg') {
+                backdropFormat = storage.DataFormat.JPG;
+                assetType = storage.AssetType.ImageBitmap;
+            } else {
+                backdropFormat = storage.DataFormat.PNG;
+                assetType = storage.AssetType.ImageBitmap;
+            }
+
+            const md5 = storage.builtinHelper.cache(
+                assetType, backdropFormat, new Uint8Array(backdropBuffer));
+
+            const md5Ext = `${md5}.${backdropFormat}`;
+
+            const vmBackdrop = {
+                name: 'backdrop1',
+                dataFormat: backdropFormat,
+                md5: `${md5Ext}`
+            };
+
+            this.props.vm.addBackdrop(md5Ext, vmBackdrop);
+
+            this.props.onActivateTab(COSTUMES_TAB_INDEX);
+
+        };
+        if (thisFileInput.files) {
+            thisFile = thisFileInput.files[0];
+            reader.readAsArrayBuffer(thisFile);
+        }
+    }
+    handleFileUploadClick () {
+        this.fileInput.click();
+    }
+    setFileInput (input) {
+        this.fileInput = input;
+    }
     render () {
         const {
             /* eslint-disable no-unused-vars */
@@ -63,9 +120,13 @@ class StageSelector extends React.Component {
         } = this.props;
         return (
             <StageSelectorComponent
+                fileInputRef={this.setFileInput}
+                onBackdropFileUpload={this.handleBackdropUpload}
+                onBackdropFileUploadClick={this.handleFileUploadClick}
                 onClick={this.handleClick}
                 onEmptyBackdropClick={this.handleEmptyBackdrop}
                 onSurpriseBackdropClick={this.handleSurpriseBackdrop}
+
                 {...componentProps}
             />
         );