Send snapshots from the renderer to be saved as project thumbnails

src/lib/data-uri-to-blob.js

+/**
+ * Utility to convert data URIs to blobs
+ * Adapted from https://stackoverflow.com/questions/12168909/blob-from-dataurl
+ * @param {string} dataURI the data uri to blobify
+ * @return {Blob} a blob representing the data uri
+ */
+export default function dataURItoBlob (dataURI) {
+    const byteString = atob(dataURI.split(',')[1]);
+    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+    const arrayBuffer = new ArrayBuffer(byteString.length);
+    const uintArray = new Uint8Array(arrayBuffer);
+    for (let i = 0; i < byteString.length; i++) {
+        uintArray[i] = byteString.charCodeAt(i);
+    }
+    const blob = new Blob([arrayBuffer], {type: mimeString});
+    return blob;
+}

src/lib/project-saver-hoc.jsx

@@ -6,6 +6,8 @@ import VM from 'scratch-vm';
 
 import log from '../lib/log';
 import storage from '../lib/storage';
+import dataURItoBlob from '../lib/data-uri-to-blob';
+
 import {
     showAlertWithTimeout,
     showStandardAlert
@@ -204,11 +206,36 @@ const ProjectSaverHOC = function (WrappedComponent) {
                     return response;
                 });
             })
+                .then(response => {
+                    const id = response.id.toString();
+                    if (id && this.props.onUpdateProjectThumbnail) {
+                        this.storeProjectThumbnail(id);
+                    }
+                })
                 .catch(err => {
                     log.error(err);
                     throw err; // pass the error up the chain
                 });
         }
+
+        /**
+         * Store a snapshot of the project once it has been saved/created.
+         * Needs to happen _after_ save because the project must have an ID.
+         * @param {!string} projectId - id of the project, must be defined.
+         */
+        storeProjectThumbnail (projectId) {
+            try {
+                this.props.vm.renderer.requestSnapshot(dataURI => {
+                    this.props.onUpdateProjectThumbnail(
+                        projectId, dataURItoBlob(dataURI));
+                });
+            } catch (e) {
+                log.error('Project thumbnail save error', e);
+                // This is intentionally fire/forget because a failure
+                // to save the thumbnail is not vitally important to the user.
+            }
+        }
+
         render () {
             const {
                 /* eslint-disable no-unused-vars */
@@ -233,6 +260,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
                 onShowSaveSuccessAlert,
                 onShowSavingAlert,
                 onUpdatedProject,
+                onUpdateProjectThumbnail,
                 reduxProjectId,
                 reduxProjectTitle,
                 setAutoSaveTimeoutId: setAutoSaveTimeoutIdProp,
@@ -270,6 +298,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
         onShowCreatingAlert: PropTypes.func,
         onShowSaveSuccessAlert: PropTypes.func,
         onShowSavingAlert: PropTypes.func,
+        onUpdateProjectThumbnail: PropTypes.func,
         onUpdatedProject: PropTypes.func,
         projectChanged: PropTypes.bool,
         reduxProjectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),