Merge pull request scratchfoundation#4567 from paulkaplan/project-thumbnailer

Add a way for GUI consumer to retrieve snapshots of the stage

Author: paulkaplan

src/lib/project-saver-hoc.jsx

@@ -47,6 +47,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
         constructor (props) {
             super(props);
             bindAll(this, [
+                'getProjectThumbnail',
                 'leavePageConfirm',
                 'tryToAutoSave'
             ]);
@@ -57,6 +58,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
                 // but then it'd be hard to turn this listening off in our tests
                 window.onbeforeunload = e => this.leavePageConfirm(e);
             }
+            this.props.onSetProjectThumbnailer(this.getProjectThumbnail);
         }
         componentDidUpdate (prevProps) {
             if (this.props.projectChanged && !prevProps.projectChanged) {
@@ -104,6 +106,8 @@ const ProjectSaverHOC = function (WrappedComponent) {
             // i.e. if another of this component has been mounted before this one gets unmounted
             // which happens when going from project to editor view.
             // window.onbeforeunload = undefined; // eslint-disable-line no-undefined
+            // Remove project thumbnailer function since the components are unmounting
+            this.props.onSetProjectThumbnailer(null);
         }
         leavePageConfirm (e) {
             if (this.props.projectChanged) {
@@ -282,20 +286,25 @@ const ProjectSaverHOC = function (WrappedComponent) {
          */
         storeProjectThumbnail (projectId) {
             try {
-                this.props.vm.postIOData('video', {forceTransparentPreview: true});
-                this.props.vm.renderer.requestSnapshot(dataURI => {
-                    this.props.vm.postIOData('video', {forceTransparentPreview: false});
-                    this.props.onUpdateProjectThumbnail(
-                        projectId, dataURItoBlob(dataURI));
+                this.getProjectThumbnail(dataURI => {
+                    this.props.onUpdateProjectThumbnail(projectId, dataURItoBlob(dataURI));
                 });
-                this.props.vm.renderer.draw();
             } 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.
             }
         }
 
+        getProjectThumbnail (callback) {
+            this.props.vm.postIOData('video', {forceTransparentPreview: true});
+            this.props.vm.renderer.requestSnapshot(dataURI => {
+                this.props.vm.postIOData('video', {forceTransparentPreview: false});
+                callback(dataURI);
+            });
+            this.props.vm.renderer.draw();
+        }
+
         render () {
             const {
                 /* eslint-disable no-unused-vars */
@@ -318,6 +327,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
                 onProjectError,
                 onRemixing,
                 onSetProjectUnchanged,
+                onSetProjectThumbnailer,
                 onShowAlert,
                 onShowCopySuccessAlert,
                 onShowRemixSuccessAlert,
@@ -378,7 +388,8 @@ const ProjectSaverHOC = function (WrappedComponent) {
     };
     ProjectSaverComponent.defaultProps = {
         autoSaveIntervalSecs: 120,
-        onRemixing: () => {}
+        onRemixing: () => {},
+        onSetProjectThumbnailer: () => {}
     };
     const mapStateToProps = (state, ownProps) => {
         const loadingState = state.scratchGui.projectState.loadingState;

test/unit/util/project-saver-hoc.test.jsx

@@ -439,4 +439,27 @@ describe('projectSaverHOC', () => {
         });
         expect(mockedOnRemixing).toHaveBeenCalledWith(false);
     });
+
+    test('uses onSetProjectThumbnailer on mount/unmount', () => {
+        const Component = () => <div />;
+        const WrappedComponent = projectSaverHOC(Component);
+        const setThumb = jest.fn();
+        const mounted = mount(
+            <WrappedComponent
+                store={store}
+                vm={vm}
+                onSetProjectThumbnailer={setThumb}
+            />
+        );
+        // Set project thumbnailer should be called on mount
+        expect(setThumb).toHaveBeenCalledTimes(1);
+
+        // And it should not pass that function on to wrapped element
+        expect(mounted.find(Component).props().onSetProjectThumbnailer).toBeUndefined();
+
+        // Unmounting should call it again with null
+        mounted.unmount();
+        expect(setThumb).toHaveBeenCalledTimes(2);
+        expect(setThumb.mock.calls[1][0]).toBe(null);
+    });
 });