From 8c0d895cacbd728b43790cbbb10fb9c120e610cd Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Wed, 25 Apr 2018 23:09:00 -0400
Subject: [PATCH 01/11] Camera costume upload functionality. Needs UI and code
 cleanup.

---
 src/components/camera-modal/camera-modal.css | 118 ++++
 src/components/camera-modal/camera-modal.jsx |  88 +++
 src/components/camera-modal/icon--back.svg   |  16 +
 src/containers/camera-modal.jsx              |  89 +++
 src/containers/costume-tab.jsx               |  31 +-
 src/containers/stage.jsx                     |   4 +-
 src/lib/camera.js                            | 654 +++++++++++++++++++
 src/lib/file-uploader.js                     |   3 +-
 src/reducers/modals.js                       |  11 +
 9 files changed, 1010 insertions(+), 4 deletions(-)
 create mode 100644 src/components/camera-modal/camera-modal.css
 create mode 100644 src/components/camera-modal/camera-modal.jsx
 create mode 100644 src/components/camera-modal/icon--back.svg
 create mode 100644 src/containers/camera-modal.jsx
 create mode 100644 src/lib/camera.js

diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
new file mode 100644
index 000000000..c86e7f0ca
--- /dev/null
+++ b/src/components/camera-modal/camera-modal.css
@@ -0,0 +1,118 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-content {
+    width: 600px;
+}
+
+.body {
+    background: $ui-white;
+    padding: 1.5rem 2.25rem;
+}
+
+.visualization-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+.camera-feed-container {
+    background: $ui-primary;
+    border: 1px solid $ui-black-transparent;
+    border-radius: 5px;
+    padding: 3px;
+
+}
+
+.camera-feed-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 480px;
+    height: 360px;
+    position: relative;
+}
+
+.canvas {
+    width: 480px;
+    height: 380px;
+}
+
+.help-text {
+    margin: 10px auto 0;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: rgb(167, 170, 181);
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.capture-text {
+    color: $motion-primary;
+}
+
+.main-button-row {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 15px;
+}
+
+.main-button-row button {
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.25rem;
+    background: transparent;
+    border: none;
+}
+
+.main-button-row button:disabled {
+    opacity: 0.25;
+}
+
+.main-button-row button:active, .main-button-row button:focus {
+    outline: none;
+}
+
+.button-row {
+    font-weight: bolder;
+    text-align: right;
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-row button {
+    padding: 0.75rem 1rem;
+    border-radius: 0.25rem;
+    background: white;
+    border: 1px solid $ui-black-transparent;
+    font-weight: 600;
+    font-size: 0.85rem;
+    color: $motion-primary;
+}
+
+.button-row button.ok-button {
+    background: $motion-primary;
+    border: $motion-primary;
+    color: white;
+}
+
+.button-row button + button {
+    margin-left: 0.5rem;
+}
+
+.main-button {
+    text-align: center;
+}
+
+.capture-button {
+    overflow: visible;
+}
+
+.capture-button-circle {
+    fill: $motion-primary;
+    /* opacity: 0.25; */
+    stroke: $motion-tertiary;
+}
+
+.capture-button-circle-outline {
+    fill: $ui-black-transparent;
+    opacity: 0.25;
+    transition: 0.1s;
+}
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
new file mode 100644
index 000000000..c39070c6a
--- /dev/null
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Box from '../box/box.jsx';
+import Modal from '../modal/modal.jsx';
+import styles from './camera-modal.css';
+import backIcon from './icon--back.svg';
+
+const CameraModal = props => (
+    <Modal
+        className={styles.modalContent}
+        contentLabel={'Take a Picture'}
+        onRequestClose={props.onCancel}
+    >
+        <Box className={styles.body}>
+            <Box className={styles.visualizationContainer}>
+                <Box className={styles.cameraFeedContainer}>
+                    <canvas
+                        className={styles.canvas}
+                        // height and (below) width of the actual image
+                        height="720"
+                        ref={props.canvasRef}
+                        width="960"
+                    />
+                </Box>
+            </Box>
+            {props.capture ?
+                <Box className={styles.buttonRow}>
+                    <button
+                        className={styles.cancelButton}
+                        onClick={props.onBack}
+                    >
+                        <img
+                            draggable={false}
+                            src={backIcon}
+                        /> Re-take
+                    </button>
+                    <button
+                        className={styles.okButton}
+                        onClick={props.onSubmit}
+                    > Save
+                    </button>
+                </Box> :
+                <Box className={styles.mainButtonRow}>
+                    <button
+                        className={styles.mainButton}
+                        onClick={props.onCapture}
+                    >
+                        <svg
+                            className={styles.captureButton}
+                            height="52"
+                            width="52"
+                        >
+                            <circle
+                                className={styles.captureButtonCircle}
+                                cx="26"
+                                cy="26"
+                                r="25"
+                            />
+                            <circle
+                                className={styles.captureButtonCircleOutline}
+                                cx="26"
+                                cy="26"
+                                r="27"
+                            />
+                        </svg>
+                        <div className={styles.helpText}>
+                            <span className={styles.captureText}>
+                                {'Take Photo'}
+                            </span>
+                        </div>
+                    </button>
+                </Box>
+            }
+        </Box>
+    </Modal>
+);
+
+CameraModal.propTypes = {
+    canvasRef: PropTypes.func.isRequired,
+    capture: PropTypes.instanceOf(ImageData),
+    onBack: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onCapture: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired
+    // videoRef: PropTypes.func.isRequired
+};
+
+export default CameraModal;
diff --git a/src/components/camera-modal/icon--back.svg b/src/components/camera-modal/icon--back.svg
new file mode 100644
index 000000000..47d09bc7f
--- /dev/null
+++ b/src/components/camera-modal/icon--back.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="8px" viewBox="0 0 18 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>re-record</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop---1280x720" transform="translate(-446.000000, -454.000000)" fill="#4C97FF">
+            <g id="Step-4---Playing-Trim" transform="translate(0.000000, 42.000000)">
+                <g id="Re-record" transform="translate(434.000000, 400.000000)">
+                    <path d="M23.6951773,18.0886272 L20.5085204,21.2806841 C20.2691162,21.5146883 19.9451104,21.6466907 19.6085044,21.6466907 C19.2730984,21.6466907 18.9490926,21.5146883 18.7084883,21.2806841 L15.5230315,18.0886272 C15.157025,17.7226207 15.049023,17.1766109 15.2470266,16.7026025 C15.4450301,16.228594 15.9010382,15.9225886 16.4170474,15.9225886 L17.5630679,15.9225886 C17.5330673,15.6465836 17.455066,15.3345781 17.3230636,15.0045722 C17.2816629,14.9085705 17.2390621,14.8125688 17.1910612,14.716567 C17.1250601,14.6085651 17.1316602,14.5785646 17.0410586,14.4465622 C16.897056,14.2305584 16.7650536,14.0685555 16.6084509,13.8825522 C16.2910452,13.5405461 15.9070383,13.2465408 15.4990311,13.030537 C15.0850237,12.8145331 14.653016,12.6825308 14.2690091,12.6105295 C13.8910024,12.5445283 13.5429962,12.5385282 13.3389925,12.5385282 C13.2369907,12.5325281 13.1049884,12.5565285 13.0389872,12.5625286 C12.9669859,12.5685287 12.9249852,12.5745288 12.9249852,12.5745288 C12.4989776,12.6165296 12.1149707,12.304524 12.07297,11.8785164 C12.0369693,11.51851 12.2469731,11.1945042 12.5649787,11.0745021 C12.5649787,11.0745021 12.6069795,11.0565018 12.6729807,11.0325013 C12.750982,11.0085009 12.8229833,10.9665001 12.9909863,10.9184993 C13.3269923,10.8164975 13.7529999,10.7084955 14.3110099,10.6544946 C14.8630197,10.6064937 15.5290316,10.6184939 16.2316441,10.7624965 C16.9330566,10.9124992 17.6710698,11.1945042 18.355082,11.6025115 C18.6790878,11.8125152 19.027094,12.0585196 19.2970988,12.2985239 C19.417101,12.3885255 19.6211046,12.5925292 19.7411067,12.7185314 C19.8791092,12.862534 20.0051114,13.0065365 20.1317137,13.1565392 C20.6171224,13.7565499 20.9771288,14.4045615 21.211133,14.992572 C21.3491354,15.328578 21.4451371,15.6465836 21.5171384,15.9225886 L22.8011613,15.9225886 C23.3171705,15.9225886 23.7731787,16.228594 23.9711822,16.7026025 C24.1691857,17.1766109 24.0611838,17.7226207 23.6951773,18.0886272" id="re-record" transform="translate(18.068963, 16.137926) scale(-1, 1) rotate(-45.000000) translate(-18.068963, -16.137926) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/containers/camera-modal.jsx b/src/containers/camera-modal.jsx
new file mode 100644
index 000000000..1b7a5de9e
--- /dev/null
+++ b/src/containers/camera-modal.jsx
@@ -0,0 +1,89 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+
+import CameraModalComponent from '../components/camera-modal/camera-modal.jsx';
+import {ModalVideoProvider} from '../lib/camera.js';
+
+import {
+    closeCameraCapture
+} from '../reducers/modals';
+
+class CameraModal extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleCapture',
+            // 'setVideoInput',
+            'handleSubmit',
+            'handleCancel',
+            'setCanvas'
+            // 'enableVideo'
+        ]);
+
+        this.video = null;
+        this.videoDevice = null;
+
+        this.state = {
+            capture: null
+        };
+    }
+    componentWillUnmount () {
+        // const videoDevice = this.props.vm.runtime.ioDevices.video;
+        // videoDevice.disableVideo();
+        this.videoDevice.disableVideo();
+        // this.video = null;
+    }
+    handleCapture () {
+        const capture = this.videoDevice.takeSnapshot();
+        this.setState({capture: capture});
+    }
+    setCanvas (canvas) {
+        this.canvas = canvas;
+        if (this.canvas) {
+            this.videoDevice = new ModalVideoProvider(this.canvas);
+            this.videoDevice.enableVideo();
+        }
+    }
+    handleSubmit () {
+        if (!this.state.capture) return;
+        this.props.onNewCostume(this.state.capture);
+        this.props.onClose();
+    }
+    handleCancel () {
+        this.props.onClose();
+    }
+    render () {
+        return (
+            <CameraModalComponent
+                // vm={this.props.vm}
+                // onBack={this.handleBack}
+                canvasRef={this.setCanvas}
+                capture={this.state.capture}
+                // videoRef={this.setVideoInput}
+                onCancel={this.handleCancel}
+                onCapture={this.handleCapture}
+                onSubmit={this.handleSubmit}
+            />
+        );
+    }
+}
+
+CameraModal.propTypes = {
+    onClose: PropTypes.func,
+    onNewCostume: PropTypes.func
+};
+
+const mapStateToProps = () => ({});
+
+const mapDispatchToProps = dispatch => ({
+    onClose: () => {
+        dispatch(closeCameraCapture());
+    }
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(CameraModal);
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 6042ceaaa..5146a4f74 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -8,12 +8,15 @@ import AssetPanel from '../components/asset-panel/asset-panel.jsx';
 import PaintEditorWrapper from './paint-editor-wrapper.jsx';
 import CostumeLibrary from './costume-library.jsx';
 import BackdropLibrary from './backdrop-library.jsx';
+import CameraModal from './camera-modal.jsx';
 import {connect} from 'react-redux';
 import {handleFileUpload, costumeUpload} from '../lib/file-uploader.js';
 
 import {
+    closeCameraCapture,
     closeCostumeLibrary,
     closeBackdropLibrary,
+    openCameraCapture,
     openCostumeLibrary,
     openBackdropLibrary
 } from '../reducers/modals';
@@ -79,6 +82,7 @@ class CostumeTab extends React.Component {
             'handleSurpriseBackdrop',
             'handleFileUploadClick',
             'handleCostumeUpload',
+            'handleCameraBuffer',
             'setFileInput'
         ]);
         const {
@@ -180,6 +184,10 @@ class CostumeTab extends React.Component {
             costumeUpload(buffer, fileType, fileName, storage, this.handleNewCostume);
         });
     }
+    handleCameraBuffer (buffer) {
+        const storage = this.props.vm.runtime.storage;
+        costumeUpload(buffer, 'image/png', 'costume1', storage, this.handleNewCostume);
+    }
     handleFileUploadClick () {
         this.fileInput.click();
     }
@@ -194,11 +202,14 @@ class CostumeTab extends React.Component {
     render () {
         const {
             intl,
+            onNewCostumeFromCameraClick,
             onNewLibraryBackdropClick,
             onNewLibraryCostumeClick,
             backdropLibraryVisible,
+            cameraModalVisible,
             costumeLibraryVisible,
             onRequestCloseBackdropLibrary,
+            onRequestCloseCameraModal,
             onRequestCloseCostumeLibrary,
             editingTarget,
             sprites,
@@ -234,7 +245,8 @@ class CostumeTab extends React.Component {
                     },
                     {
                         title: intl.formatMessage(messages.addCameraCostumeMsg),
-                        img: cameraIcon
+                        img: cameraIcon,
+                        onClick: onNewCostumeFromCameraClick
                     },
                     {
                         title: intl.formatMessage(addFileMessage),
@@ -280,6 +292,13 @@ class CostumeTab extends React.Component {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
+                {cameraModalVisible ? (
+                    <CameraModal
+                        vm={vm}
+                        onClose={onRequestCloseCameraModal}
+                        onNewCostume={this.handleCameraBuffer}
+                    />
+                ) : null}
             </AssetPanel>
         );
     }
@@ -287,12 +306,15 @@ class CostumeTab extends React.Component {
 
 CostumeTab.propTypes = {
     backdropLibraryVisible: PropTypes.bool,
+    cameraModalVisible: PropTypes.bool,
     costumeLibraryVisible: PropTypes.bool,
     editingTarget: PropTypes.string,
     intl: intlShape,
+    onNewCostumeFromCameraClick: PropTypes.func.isRequired,
     onNewLibraryBackdropClick: PropTypes.func.isRequired,
     onNewLibraryCostumeClick: PropTypes.func.isRequired,
     onRequestCloseBackdropLibrary: PropTypes.func.isRequired,
+    onRequestCloseCameraModal: PropTypes.func.isRequired,
     onRequestCloseCostumeLibrary: PropTypes.func.isRequired,
     sprites: PropTypes.shape({
         id: PropTypes.shape({
@@ -315,6 +337,7 @@ const mapStateToProps = state => ({
     editingTarget: state.targets.editingTarget,
     sprites: state.targets.sprites,
     stage: state.targets.stage,
+    cameraModalVisible: state.modals.cameraCapture,
     costumeLibraryVisible: state.modals.costumeLibrary,
     backdropLibraryVisible: state.modals.backdropLibrary
 });
@@ -328,11 +351,17 @@ const mapDispatchToProps = dispatch => ({
         e.preventDefault();
         dispatch(openCostumeLibrary());
     },
+    onNewCostumeFromCameraClick: () => {
+        dispatch(openCameraCapture());
+    },
     onRequestCloseBackdropLibrary: () => {
         dispatch(closeBackdropLibrary());
     },
     onRequestCloseCostumeLibrary: () => {
         dispatch(closeCostumeLibrary());
+    },
+    onRequestCloseCameraModal: () => {
+        dispatch(closeCameraCapture());
     }
 });
 
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 96fdf71a6..e6918fdd2 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -6,7 +6,7 @@ import VM from 'scratch-vm';
 import {connect} from 'react-redux';
 
 import {getEventXY} from '../lib/touch-utils';
-import VideoProvider from '../lib/video/video-provider';
+import {stageVideoProvider} from '../lib/camera';
 
 import StageComponent from '../components/stage/stage.jsx';
 
@@ -58,7 +58,7 @@ class Stage extends React.Component {
         this.renderer = new Renderer(this.canvas);
         this.props.vm.attachRenderer(this.renderer);
         this.props.vm.runtime.addListener('QUESTION', this.questionListener);
-        this.props.vm.setVideoProvider(new VideoProvider());
+        this.props.vm.setVideoProvider(stageVideoProvider(this.props.vm.runtime));
     }
     shouldComponentUpdate (nextProps, nextState) {
         return this.props.width !== nextProps.width ||
diff --git a/src/lib/camera.js b/src/lib/camera.js
new file mode 100644
index 000000000..981ee972d
--- /dev/null
+++ b/src/lib/camera.js
@@ -0,0 +1,654 @@
+import getUserMedia from 'get-user-media-promise';
+import log from './log.js';
+
+class StageVideoProvider {
+    constructor (runtime) {
+        /**
+         * Reference to the owning Runtime.
+         * @type{!Runtime}
+         */
+        this.runtime = runtime;
+
+        /**
+         * Default value for mirrored frames.
+         * @type boolean
+         */
+        this.mirror = true;
+
+        /**
+         * Cache frames for this many ms.
+         * @type number
+         */
+        this._frameCacheTimeout = 16;
+
+        /**
+         * DOM Video element
+         * @private
+         */
+        this._video = null;
+
+        /**
+         * Usermedia stream track
+         * @private
+         */
+        this._track = null;
+
+        /**
+         * Stores some canvas/frame data per resolution/mirror states
+         */
+        this._workspace = [];
+
+        /**
+         * Id representing a Scratch Renderer skin the video is rendered to for
+         * previewing.
+         * @type {number}
+         */
+        this._skinId = -1;
+
+        /**
+         * The Scratch Renderer Skin object.
+         * @type {Skin}
+         */
+        this._skin = null;
+
+        /**
+         * Id for a drawable using the video's skin that will render as a video
+         * preview.
+         * @type {Drawable}
+         */
+        this._drawable = -1;
+
+        /**
+         * Store the last state of the video transparency ghost effect
+         * @type {number}
+         */
+        this._ghost = 0;
+    }
+
+    static get FORMAT_IMAGE_DATA () {
+        return 'image-data';
+    }
+
+    static get FORMAT_CANVAS () {
+        return 'canvas';
+    }
+
+    /**
+     * Dimensions the video stream is analyzed at after its rendered to the
+     * sample canvas.
+     * @type {Array.<number>}
+     */
+    static get DIMENSIONS () {
+        return [480, 360];
+    }
+
+    /**
+     * Order preview drawable is inserted at in the renderer.
+     * @type {number}
+     */
+    static get ORDER () {
+        return 1;
+    }
+
+    /**
+     * Request video be enabled.  Sets up video, creates video skin and enables preview.
+     *
+     * ioDevices.video.requestVideo()
+     *
+     * @return {Promise.<Video>} resolves a promise to this IO device when video is ready.
+     */
+    enableVideo () {
+        this.enabled = true;
+        return this._setupVideo();
+    }
+
+    /**
+     * Disable video stream (turn video off)
+     */
+    disableVideo () {
+        this.enabled = false;
+        // If we have begun a setup process, call _teardown after it completes
+        if (this._singleSetup) {
+            this._singleSetup
+                .then(this._teardown.bind(this))
+                .catch(err => this.onError(err));
+        }
+    }
+
+    /**
+     * async part of disableVideo
+     * @private
+     */
+    _teardown () {
+        // we might be asked to re-enable before _teardown is called, just ignore it.
+        if (this.enabled === false) {
+            this._disablePreview();
+            this._singleSetup = null;
+            // by clearing refs to video and track, we should lose our hold over the camera
+            this._video = null;
+            if (this._track) {
+                this._track.stop();
+            }
+            this._track = null;
+        }
+    }
+
+    /**
+     * Return frame data from the video feed in a specified dimensions, format, and mirroring.
+     *
+     * @param {object} frameInfo A descriptor of the frame you would like to receive.
+     * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
+     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to the global
+     *                                   mirror state (ioDevices.video.mirror)
+     * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
+     * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
+     *                                        the cacheTimeout.  Defaults to 16ms.
+     *
+     * @return {ArrayBuffer|Canvas|string|null} Frame data in requested format, null when errors.
+     */
+    getFrame ({
+        dimensions = StageVideoProvider.DIMENSIONS,
+        mirror = this.mirror,
+        format = StageVideoProvider.FORMAT_IMAGE_DATA,
+        cacheTimeout = this._frameCacheTimeout
+    }) {
+        if (!this.videoReady) {
+            return null;
+        }
+        const [width, height] = dimensions;
+        const workspace = this._getWorkspace({dimensions, mirror: Boolean(mirror)});
+        const {videoWidth, videoHeight} = this._video;
+        const {canvas, context, lastUpdate, cacheData} = workspace;
+        const now = Date.now();
+
+        // if the canvas hasn't been updated...
+        if (lastUpdate + cacheTimeout < now) {
+
+            if (mirror) {
+                context.scale(-1, 1);
+                context.translate(width * -1, 0);
+            }
+
+            context.drawImage(this._video,
+                // source x, y, width, height
+                0, 0, videoWidth, videoHeight,
+                // dest x, y, width, height
+                0, 0, width, height
+            );
+
+            context.resetTransform();
+            workspace.lastUpdate = now;
+        }
+
+        // each data type has it's own data cache, but the canvas is the same
+        if (!cacheData[format]) {
+            cacheData[format] = {lastUpdate: 0};
+        }
+        const formatCache = cacheData[format];
+
+        if (formatCache.lastUpdate + cacheTimeout < now) {
+            if (format === StageVideoProvider.FORMAT_IMAGE_DATA) {
+                formatCache.lastData = context.getImageData(0, 0, width, height);
+            } else if (format === StageVideoProvider.FORMAT_CANVAS) {
+                // this will never change
+                formatCache.lastUpdate = Infinity;
+                formatCache.lastData = canvas;
+            } else {
+                log.error(`video io error - unimplemented format ${format}`);
+                // cache the null result forever, don't log about it again..
+                formatCache.lastUpdate = Infinity;
+                formatCache.lastData = null;
+            }
+
+            // rather than set to now, this data is as stale as it's canvas is
+            formatCache.lastUpdate = Math.max(workspace.lastUpdate, formatCache.lastUpdate);
+        }
+
+        return formatCache.lastData;
+    }
+
+    /**
+     * Set the preview ghost effect
+     * @param {number} ghost from 0 (visible) to 100 (invisible) - ghost effect
+     */
+    setPreviewGhost (ghost) {
+        this._ghost = ghost;
+        if (this._drawable) {
+            this.runtime.renderer.updateDrawableProperties(this._drawable, {ghost});
+        }
+    }
+
+    /**
+     * Method called when an error happens.  Default implementation is just to log error.
+     *
+     * @abstract
+     * @param {Error} error An error object from getUserMedia or other source of error.
+     */
+    onError (error) {
+        log.error('Unhandled video io device error', error);
+    }
+
+    /**
+     * Create a video stream.
+     * Should probably be moved to -render or somewhere similar later
+     * @private
+     * @return {Promise} When video has been received, rejected if video is not received
+     */
+    _setupVideo () {
+        // We cache the result of this setup so that we can only ever have a single
+        // video/getUserMedia request happen at a time.
+        if (this._singleSetup) {
+            return this._singleSetup;
+        }
+
+        this._singleSetup = getUserMedia({ // navigator.mediaDevices.getUserMedia({
+            audio: false,
+            video: {
+                width: {min: 480, ideal: 640},
+                height: {min: 360, ideal: 480}
+            }
+        })
+            .then(stream => {
+                this._video = document.createElement('video');
+                // Use the new srcObject API, falling back to createObjectURL
+                try {
+                    this._video.srcObject = stream;
+                } catch (error) {
+                    this._video.src = window.URL.createObjectURL(stream);
+                }
+                // Hint to the stream that it should load. A standard way to do this
+                // is add the video tag to the DOM. Since this extension wants to
+                // hide the video tag and instead render a sample of the stream into
+                // the webgl rendered Scratch canvas, another hint like this one is
+                // needed.
+                this._video.play(); // Needed for Safari/Firefox, Chrome auto-plays.
+                this._track = stream.getTracks()[0];
+                this._setupPreview();
+                return this;
+            })
+            .catch(error => {
+                this._singleSetup = null;
+                this.onError(error);
+            });
+
+        return this._singleSetup;
+    }
+
+    _disablePreview () {
+        if (this._skin) {
+            this._skin.clear();
+            this.runtime.renderer.updateDrawableProperties(this._drawable, {visible: false});
+        }
+        this._renderPreviewFrame = null;
+    }
+
+    _setupPreview () {
+        const {renderer} = this.runtime;
+        if (!renderer) return;
+
+        if (this._skinId === -1 && this._skin === null && this._drawable === -1) {
+            this._skinId = renderer.createPenSkin();
+            this._skin = renderer._allSkins[this._skinId];
+            this._drawable = renderer.createDrawable();
+            renderer.setDrawableOrder(
+                this._drawable,
+                StageVideoProvider.ORDER
+            );
+            renderer.updateDrawableProperties(this._drawable, {
+                skinId: this._skinId
+            });
+        }
+
+        // if we haven't already created and started a preview frame render loop, do so
+        if (!this._renderPreviewFrame) {
+            renderer.updateDrawableProperties(this._drawable, {
+                ghost: this._ghost,
+                visible: true
+            });
+
+            this._renderPreviewFrame = () => {
+                clearTimeout(this._renderPreviewTimeout);
+                if (!this._renderPreviewFrame) {
+                    return;
+                }
+
+                this._renderPreviewTimeout = setTimeout(this._renderPreviewFrame, this.runtime.currentStepTime);
+
+                const canvas = this.getFrame({format: StageVideoProvider.FORMAT_CANVAS});
+
+                if (!canvas) {
+                    this._skin.clear();
+                    return;
+                }
+
+                const xOffset = StageVideoProvider.DIMENSIONS[0] / -2;
+                const yOffset = StageVideoProvider.DIMENSIONS[1] / 2;
+                this._skin.drawStamp(canvas, xOffset, yOffset);
+                this.runtime.requestRedraw();
+            };
+
+            this._renderPreviewFrame();
+        }
+    }
+
+    get videoReady () {
+        if (!this.enabled) {
+            return false;
+        }
+        if (!this._video) {
+            return false;
+        }
+        if (!this._track) {
+            return false;
+        }
+        const {videoWidth, videoHeight} = this._video;
+        if (typeof videoWidth !== 'number' || typeof videoHeight !== 'number') {
+            return false;
+        }
+        if (videoWidth === 0 || videoHeight === 0) {
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * get an internal workspace for canvas/context/caches
+     * this uses some document stuff to create a canvas and what not, probably needs abstraction
+     * into the renderer layer?
+     * @private
+     * @return {object} A workspace for canvas/data storage.  Internal format not documented intentionally
+     */
+    _getWorkspace ({dimensions, mirror}) {
+        let workspace = this._workspace.find(space => (
+            space.dimensions.join('-') === dimensions.join('-') &&
+            space.mirror === mirror
+        ));
+        if (!workspace) {
+            workspace = {
+                dimensions,
+                mirror,
+                canvas: document.createElement('canvas'),
+                lastUpdate: 0,
+                cacheData: {}
+            };
+            workspace.canvas.width = dimensions[0];
+            workspace.canvas.height = dimensions[1];
+            workspace.context = workspace.canvas.getContext('2d');
+            this._workspace.push(workspace);
+        }
+        return workspace;
+    }
+}
+
+class ModalVideoProvider {
+    constructor (canvas) {
+        /**
+         * Captured image data
+         */
+        this._capture = null;
+
+        /**
+         * Cache frames for this many ms.
+         * @type number
+         */
+        this._frameCacheTimeout = 16;
+
+        this._canvas = canvas;
+
+        this._video = null;
+
+        // this._workspace = [];
+
+        /**
+         * Usermedia stream track
+         * @private
+         */
+        this._track = null;
+    }
+
+    static get FORMAT_IMAGE_DATA () {
+        return 'image-data';
+    }
+
+    static get FORMAT_CANVAS () {
+        return 'canvas';
+    }
+
+    /**
+     * Dimensions the video stream is analyzed at after its rendered to the
+     * sample canvas.
+     * @type {Array.<number>}
+     */
+    static get DIMENSIONS () {
+        return [480, 360];
+    }
+
+    setVideo (video) {
+        this._video = video;
+    }
+
+    get videoReady () {
+        // if (!this.enabled) {
+        //     return false;
+        // }
+        if (!this._video) {
+            return false;
+        }
+        if (!this._track) {
+            return false;
+        }
+        const {videoWidth, videoHeight} = this._video;
+        if (typeof videoWidth !== 'number' || typeof videoHeight !== 'number') {
+            return false;
+        }
+        if (videoWidth === 0 || videoHeight === 0) {
+            return false;
+        }
+        return true;
+    }
+
+    enableVideo () {
+        const thisContext = this;
+        this._video = this._video ? this._video : document.createElement('video');
+        // TODO possibly make common function for this
+        getUserMedia({
+            audio: false,
+            video: true
+        })
+            .then(userMediaStream => {
+                try {
+                    thisContext._video.srcObject = userMediaStream;
+                } catch (e) {
+                    thisContext._video.src = window.URL.createObjectURL(userMediaStream);
+                }
+                thisContext._track = userMediaStream.getTracks()[0];
+
+                const width = 960; // abstract this out
+                const height = 720;
+
+                const ctx = thisContext._canvas.getContext('2d');
+
+                ctx.scale(-1, 1);
+                ctx.translate(width * -1, 0);
+
+                thisContext._videoFeedInterval = setInterval(() => ctx.drawImage(thisContext._video,
+                    // source x, y, width, height
+                    0, 0, thisContext._video.videoWidth, thisContext._video.videoHeight,
+                    // dest x, y, width, height
+                    0, 0, width, height
+                ), thisContext._frameCacheTimeout);
+
+                // The following also works...
+                // thisContext._videoFeedInterval = setInterval(
+                //     () => this.getFrame({format: ModalVideoProvider.FORMAT_CANVAS}),
+                //     thisContext._frameCacheTimeout);
+
+
+                // thisContext._setupPreview();
+            })
+            .catch(e => {
+                log.warn(e); // TODO make common function for this
+            });
+    }
+
+    // _setupPreview () {
+    //
+    //     // if we haven't already created and started a preview frame render loop, do so
+    //     if (!this._renderPreviewFrame) {
+    //
+    //         this._renderPreviewFrame = () => {
+    //             clearTimeout(this._renderPreviewTimeout);
+    //             if (!this._renderPreviewFrame) {
+    //                 return;
+    //             }
+    //
+    //             this._renderPreviewTimeout = setTimeout(this._renderPreviewFrame, this._frameCacheTimeout);
+    //
+    //             const canvas = this.getFrame({format: ModalVideoProvider.FORMAT_CANVAS});
+    //
+    //             if (!canvas) {
+    //                 // this._skin.clear();
+    //                 return;
+    //             }
+    //
+    //             // const xOffset = ModalVideoProvider.DIMENSIONS[0] / -2;
+    //             // const yOffset = ModalVideoProvider.DIMENSIONS[1] / 2;
+    //             // this._skin.drawStamp(canvas, xOffset, yOffset);
+    //             // this.runtime.requestRedraw();
+    //         };
+    //
+    //         this._renderPreviewFrame();
+    //     }
+    // }
+
+    takeSnapshot () {
+        clearInterval(this._videoFeedInterval);
+
+        // clearTimeout(this._renderPreviewTimeout);
+
+        return this._canvas.toDataURL('image/png');
+    }
+
+    getSnapshot () {
+        return this._capture;
+    }
+
+    /**
+     * get an internal workspace for canvas/context/caches
+     * this uses some document stuff to create a canvas and what not, probably needs abstraction
+     * into the renderer layer?
+     * @private
+     * @return {object} A workspace for canvas/data storage.  Internal format not documented intentionally
+     */
+    // _getWorkspace ({dimensions, mirror}) {
+    //     let workspace = this._workspace.find(space => (
+    //         space.dimensions.join('-') === dimensions.join('-') &&
+    //         space.mirror === mirror
+    //     ));
+    //     if (!workspace) {
+    //         workspace = {
+    //             dimensions,
+    //             mirror,
+    //             canvas: this._canvas, // document.createElement('canvas'),
+    //             lastUpdate: 0,
+    //             cacheData: {}
+    //         };
+    //         workspace.canvas.width = dimensions[0];
+    //         workspace.canvas.height = dimensions[1];
+    //         workspace.context = workspace.canvas.getContext('2d');
+    //         this._workspace.push(workspace);
+    //     }
+    //     return workspace;
+    // }
+
+    /**
+     * Return frame data from the video feed in a specified dimensions, format, and mirroring.
+     *
+     * @param {object} frameInfo A descriptor of the frame you would like to receive.
+     * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
+     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to the global
+     *                                   mirror state (ioDevices.video.mirror)
+     * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
+     * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
+     *                                        the cacheTimeout.  Defaults to 16ms.
+     *
+     * @return {ArrayBuffer|Canvas|string|null} Frame data in requested format, null when errors.
+     */
+    // getFrame ({
+    //     dimensions = ModalVideoProvider.DIMENSIONS,
+    //     mirror = this.mirror,
+    //     format = ModalVideoProvider.FORMAT_IMAGE_DATA,
+    //     cacheTimeout = this._frameCacheTimeout
+    // }) {
+    //     if (!this.videoReady) {
+    //         return null;
+    //     }
+    //     const [width, height] = dimensions;
+    //     const workspace = this._getWorkspace({dimensions, mirror: Boolean(mirror)});
+    //     const {videoWidth, videoHeight} = this._video;
+    //     const {canvas, context, lastUpdate, cacheData} = workspace;
+    //     const now = Date.now();
+    //
+    //     // if the canvas hasn't been updated...
+    //     if (lastUpdate + cacheTimeout < now) {
+    //
+    //         if (mirror) {
+    //             context.scale(-1, 1);
+    //             context.translate(width * -1, 0);
+    //         }
+    //
+    //         context.drawImage(this._video,
+    //             // source x, y, width, height
+    //             0, 0, videoWidth, videoHeight,
+    //             // dest x, y, width, height
+    //             0, 0, width, height
+    //         );
+    //
+    //         context.resetTransform();
+    //         workspace.lastUpdate = now;
+    //     }
+    //
+    //     // each data type has it's own data cache, but the canvas is the same
+    //     if (!cacheData[format]) {
+    //         cacheData[format] = {lastUpdate: 0};
+    //     }
+    //     const formatCache = cacheData[format];
+    //
+    //     if (formatCache.lastUpdate + cacheTimeout < now) {
+    //         if (format === ModalVideoProvider.FORMAT_IMAGE_DATA) {
+    //             formatCache.lastData = context.getImageData(0, 0, width, height);
+    //         } else if (format === ModalVideoProvider.FORMAT_CANVAS) {
+    //             // this will never change
+    //             formatCache.lastUpdate = Infinity;
+    //             formatCache.lastData = canvas;
+    //         } else {
+    //             log.error(`video io error - unimplemented format ${format}`);
+    //             // cache the null result forever, don't log about it again..
+    //             formatCache.lastUpdate = Infinity;
+    //             formatCache.lastData = null;
+    //         }
+    //
+    //         // rather than set to now, this data is as stale as it's canvas is
+    //         formatCache.lastUpdate = Math.max(workspace.lastUpdate, formatCache.lastUpdate);
+    //     }
+    //
+    //     return formatCache.lastData;
+    // }
+
+    disableVideo () {
+        if (this._video) {
+            if (this._track) this._track.stop();
+            this._video.pause();
+            this._video.srcObject = null;
+        }
+    }
+}
+
+const stageVideoProvider = function (runtime) {
+    return new StageVideoProvider(runtime);
+};
+
+export {
+    stageVideoProvider,
+    ModalVideoProvider
+};
diff --git a/src/lib/file-uploader.js b/src/lib/file-uploader.js
index 040a026b2..ca4ce8773 100644
--- a/src/lib/file-uploader.js
+++ b/src/lib/file-uploader.js
@@ -77,7 +77,8 @@ const cacheAsset = function (storage, fileName, assetType, dataFormat, data) {
 
 /**
  * Handles loading a costume or a backdrop using the provided, context-relevant information.
- * @param {ArrayBuffer} fileData The costume data to load
+ * @param {ArrayBuffer | string} fileData The costume data to load (this can be an image url
+ * iff the image is a bitmap)
  * @param {string} fileType The MIME type of this file
  * @param {string} costumeName The user-readable name to use for the costume.
  * @param {ScratchStorage} storage The ScratchStorage instance to cache the costume data
diff --git a/src/reducers/modals.js b/src/reducers/modals.js
index 481c44f29..c373ce796 100644
--- a/src/reducers/modals.js
+++ b/src/reducers/modals.js
@@ -4,6 +4,7 @@ const OPEN_MODAL = 'scratch-gui/modals/OPEN_MODAL';
 const CLOSE_MODAL = 'scratch-gui/modals/CLOSE_MODAL';
 
 const MODAL_BACKDROP_LIBRARY = 'backdropLibrary';
+const MODAL_CAMERA_CAPTURE = 'cameraCapture';
 const MODAL_COSTUME_LIBRARY = 'costumeLibrary';
 const MODAL_EXTENSION_LIBRARY = 'extensionLibrary';
 const MODAL_IMPORT_INFO = 'importInfo';
@@ -18,6 +19,7 @@ const MODAL_TIPS_LIBRARY = 'tipsLibrary';
 
 const initialState = {
     [MODAL_BACKDROP_LIBRARY]: false,
+    [MODAL_CAMERA_CAPTURE]: false,
     [MODAL_COSTUME_LIBRARY]: false,
     [MODAL_EXTENSION_LIBRARY]: false,
     [MODAL_IMPORT_INFO]: false,
@@ -60,6 +62,10 @@ const openBackdropLibrary = function () {
     analytics.pageview('/libraries/backdrops');
     return openModal(MODAL_BACKDROP_LIBRARY);
 };
+const openCameraCapture = function () {
+    analytics.pageview('/modals/camera');
+    return openModal(MODAL_CAMERA_CAPTURE);
+};
 const openCostumeLibrary = function () {
     analytics.pageview('/libraries/costumes');
     return openModal(MODAL_COSTUME_LIBRARY);
@@ -99,6 +105,9 @@ const openTipsLibrary = function () {
 const closeBackdropLibrary = function () {
     return closeModal(MODAL_BACKDROP_LIBRARY);
 };
+const closeCameraCapture = function () {
+    return closeModal(MODAL_CAMERA_CAPTURE);
+};
 const closeCostumeLibrary = function () {
     return closeModal(MODAL_COSTUME_LIBRARY);
 };
@@ -129,6 +138,7 @@ const closeTipsLibrary = function () {
 export {
     reducer as default,
     openBackdropLibrary,
+    openCameraCapture,
     openCostumeLibrary,
     openExtensionLibrary,
     openImportInfo,
@@ -139,6 +149,7 @@ export {
     openSoundRecorder,
     openTipsLibrary,
     closeBackdropLibrary,
+    closeCameraCapture,
     closeCostumeLibrary,
     closeExtensionLibrary,
     closeImportInfo,

From 4b562afac0871aa493ccf6c947244b68dbdc8c48 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Thu, 26 Apr 2018 12:49:59 -0400
Subject: [PATCH 02/11] Re-take a picture, single media stream, some more
 styling.

---
 src/components/camera-modal/camera-modal.css |  57 +++++++-
 src/components/camera-modal/camera-modal.jsx |  38 ++----
 src/containers/camera-modal.jsx              |  12 +-
 src/lib/camera.js                            | 135 +++++++------------
 4 files changed, 123 insertions(+), 119 deletions(-)

diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index c86e7f0ca..886fc756f 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -1,6 +1,8 @@
 @import "../../css/colors.css";
 @import "../../css/units.css";
 
+$main-button-size: 2.75rem;
+
 .modal-content {
     width: 600px;
 }
@@ -30,11 +32,12 @@
     width: 480px;
     height: 360px;
     position: relative;
+    border-radius: 1px solid $ui-black-transparent;
 }
 
 .canvas {
     width: 480px;
-    height: 380px;
+    height: 360px;
 }
 
 .help-text {
@@ -43,6 +46,7 @@
     color: rgb(167, 170, 181);
     font-size: 0.95rem;
     font-weight: 500;
+    text-align: center;
 }
 
 .capture-text {
@@ -55,26 +59,65 @@
     margin-top: 15px;
 }
 
-.main-button-row button {
+/* Action Menu */
+.main-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background: $motion-primary;
+    outline: none;
+    border: none;
+    transition: background-color 0.2s;
+
+    border-radius: 100%;
+    width: $main-button-size;
+    height: $main-button-size;
+    box-shadow: 0 0 0 4px $motion-transparent;
+    z-index: 20; /* TODO reorder layout to prevent z-index need */
+    transition: transform, box-shadow 0.5s;
+}
+
+.main-button:hover {
+    background: $pen-primary;
+
+    /* transform: scale(1.1); */
+    box-shadow: 0 0 0 6px $motion-transparent;
+}
+
+.main-icon {
+    width: calc($main-button-size - 1rem);
+    height: calc($main-button-size - 1rem);
+}
+
+
+/* Action Menu */
+
+
+
+/* .main-button-row button {
     padding: 0.5rem 0.75rem;
     border-radius: 0.25rem;
     background: transparent;
     border: none;
-}
+} */
 
-.main-button-row button:disabled {
+/* .main-button-row button:disabled {
     opacity: 0.25;
 }
 
 .main-button-row button:active, .main-button-row button:focus {
     outline: none;
-}
+} */
 
 .button-row {
     font-weight: bolder;
     text-align: right;
     display: flex;
     justify-content: space-between;
+    margin-top: 20px;
 }
 
 .button-row button {
@@ -97,9 +140,9 @@
     margin-left: 0.5rem;
 }
 
-.main-button {
+/* .main-button {
     text-align: center;
-}
+} */
 
 .capture-button {
     overflow: visible;
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index c39070c6a..d996dcbd5 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -2,8 +2,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Box from '../box/box.jsx';
 import Modal from '../modal/modal.jsx';
+import classNames from 'classnames';
 import styles from './camera-modal.css';
 import backIcon from './icon--back.svg';
+import cameraIcon from '../action-menu/icon--camera.svg';
 
 const CameraModal = props => (
     <Modal
@@ -45,30 +47,18 @@ const CameraModal = props => (
                         className={styles.mainButton}
                         onClick={props.onCapture}
                     >
-                        <svg
-                            className={styles.captureButton}
-                            height="52"
-                            width="52"
-                        >
-                            <circle
-                                className={styles.captureButtonCircle}
-                                cx="26"
-                                cy="26"
-                                r="25"
-                            />
-                            <circle
-                                className={styles.captureButtonCircleOutline}
-                                cx="26"
-                                cy="26"
-                                r="27"
-                            />
-                        </svg>
-                        <div className={styles.helpText}>
-                            <span className={styles.captureText}>
-                                {'Take Photo'}
-                            </span>
-                        </div>
+                        <img
+                            className={styles.mainIcon}
+                            draggable={false}
+                            src={cameraIcon}
+                        />
                     </button>
+                    <div className={styles.helpText}>
+                        <span className={styles.captureText}>
+                            {'Take Photo'}
+                        </span>
+                    </div>
+
                 </Box>
             }
         </Box>
@@ -77,7 +67,7 @@ const CameraModal = props => (
 
 CameraModal.propTypes = {
     canvasRef: PropTypes.func.isRequired,
-    capture: PropTypes.instanceOf(ImageData),
+    capture: PropTypes.string,
     onBack: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     onCapture: PropTypes.func.isRequired,
diff --git a/src/containers/camera-modal.jsx b/src/containers/camera-modal.jsx
index 1b7a5de9e..e5cf3fe59 100644
--- a/src/containers/camera-modal.jsx
+++ b/src/containers/camera-modal.jsx
@@ -14,10 +14,10 @@ class CameraModal extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleCapture',
-            // 'setVideoInput',
-            'handleSubmit',
+            'handleBack',
             'handleCancel',
+            'handleCapture',
+            'handleSubmit',
             'setCanvas'
             // 'enableVideo'
         ]);
@@ -35,6 +35,10 @@ class CameraModal extends React.Component {
         this.videoDevice.disableVideo();
         // this.video = null;
     }
+    handleBack () {
+        this.setState({capture: null});
+        this.videoDevice.clearSnapshot();
+    }
     handleCapture () {
         const capture = this.videoDevice.takeSnapshot();
         this.setState({capture: capture});
@@ -58,10 +62,10 @@ class CameraModal extends React.Component {
         return (
             <CameraModalComponent
                 // vm={this.props.vm}
-                // onBack={this.handleBack}
                 canvasRef={this.setCanvas}
                 capture={this.state.capture}
                 // videoRef={this.setVideoInput}
+                onBack={this.handleBack}
                 onCancel={this.handleCancel}
                 onCapture={this.handleCapture}
                 onSubmit={this.handleSubmit}
diff --git a/src/lib/camera.js b/src/lib/camera.js
index 981ee972d..4b6a08e7a 100644
--- a/src/lib/camera.js
+++ b/src/lib/camera.js
@@ -1,6 +1,29 @@
 import getUserMedia from 'get-user-media-promise';
 import log from './log.js';
 
+const requestStack = [];
+// Single Setup For All Video Streams
+const requestVideoStream = videoDesc => {
+    let streamPromise;
+    if (requestStack.length === 0) {
+        streamPromise = getUserMedia({
+            audio: false,
+            video: videoDesc
+        });
+        requestStack.push(streamPromise);
+    } else if (requestStack.length > 0) {
+        streamPromise = requestStack[0];
+        requestStack.push(true);
+    }
+    return streamPromise;
+};
+
+const requestDisableCheck = () => {
+    requestStack.pop();
+    if (requestStack.length > 0) return false;
+    return true;
+};
+
 class StageVideoProvider {
     constructor (runtime) {
         /**
@@ -122,11 +145,12 @@ class StageVideoProvider {
     _teardown () {
         // we might be asked to re-enable before _teardown is called, just ignore it.
         if (this.enabled === false) {
+            const disableTrack = requestDisableCheck();
             this._disablePreview();
             this._singleSetup = null;
             // by clearing refs to video and track, we should lose our hold over the camera
             this._video = null;
-            if (this._track) {
+            if (this._track && disableTrack) {
                 this._track.stop();
             }
             this._track = null;
@@ -241,12 +265,9 @@ class StageVideoProvider {
             return this._singleSetup;
         }
 
-        this._singleSetup = getUserMedia({ // navigator.mediaDevices.getUserMedia({
-            audio: false,
-            video: {
-                width: {min: 480, ideal: 640},
-                height: {min: 360, ideal: 480}
-            }
+        this._singleSetup = requestVideoStream({ // navigator.mediaDevices.getUserMedia({
+            width: {min: 480, ideal: 640},
+            height: {min: 360, ideal: 480}
         })
             .then(stream => {
                 this._video = document.createElement('video');
@@ -385,7 +406,6 @@ class ModalVideoProvider {
         /**
          * Captured image data
          */
-        this._capture = null;
 
         /**
          * Cache frames for this many ms.
@@ -406,13 +426,6 @@ class ModalVideoProvider {
         this._track = null;
     }
 
-    static get FORMAT_IMAGE_DATA () {
-        return 'image-data';
-    }
-
-    static get FORMAT_CANVAS () {
-        return 'canvas';
-    }
 
     /**
      * Dimensions the video stream is analyzed at after its rendered to the
@@ -427,34 +440,12 @@ class ModalVideoProvider {
         this._video = video;
     }
 
-    get videoReady () {
-        // if (!this.enabled) {
-        //     return false;
-        // }
-        if (!this._video) {
-            return false;
-        }
-        if (!this._track) {
-            return false;
-        }
-        const {videoWidth, videoHeight} = this._video;
-        if (typeof videoWidth !== 'number' || typeof videoHeight !== 'number') {
-            return false;
-        }
-        if (videoWidth === 0 || videoHeight === 0) {
-            return false;
-        }
-        return true;
-    }
 
     enableVideo () {
         const thisContext = this;
         this._video = this._video ? this._video : document.createElement('video');
         // TODO possibly make common function for this
-        getUserMedia({
-            audio: false,
-            video: true
-        })
+        requestVideoStream(true)
             .then(userMediaStream => {
                 try {
                     thisContext._video.srcObject = userMediaStream;
@@ -463,20 +454,15 @@ class ModalVideoProvider {
                 }
                 thisContext._track = userMediaStream.getTracks()[0];
 
-                const width = 960; // abstract this out
-                const height = 720;
+                thisContext._width = 960; // abstract this out
+                thisContext._height = 720;
 
-                const ctx = thisContext._canvas.getContext('2d');
+                const ctx = this._canvas.getContext('2d');
 
                 ctx.scale(-1, 1);
-                ctx.translate(width * -1, 0);
+                ctx.translate(thisContext._width * -1, 0);
 
-                thisContext._videoFeedInterval = setInterval(() => ctx.drawImage(thisContext._video,
-                    // source x, y, width, height
-                    0, 0, thisContext._video.videoWidth, thisContext._video.videoHeight,
-                    // dest x, y, width, height
-                    0, 0, width, height
-                ), thisContext._frameCacheTimeout);
+                thisContext._drawFrames();
 
                 // The following also works...
                 // thisContext._videoFeedInterval = setInterval(
@@ -487,50 +473,27 @@ class ModalVideoProvider {
                 // thisContext._setupPreview();
             })
             .catch(e => {
-                log.warn(e); // TODO make common function for this
+                log.warn(e);
             });
     }
 
-    // _setupPreview () {
-    //
-    //     // if we haven't already created and started a preview frame render loop, do so
-    //     if (!this._renderPreviewFrame) {
-    //
-    //         this._renderPreviewFrame = () => {
-    //             clearTimeout(this._renderPreviewTimeout);
-    //             if (!this._renderPreviewFrame) {
-    //                 return;
-    //             }
-    //
-    //             this._renderPreviewTimeout = setTimeout(this._renderPreviewFrame, this._frameCacheTimeout);
-    //
-    //             const canvas = this.getFrame({format: ModalVideoProvider.FORMAT_CANVAS});
-    //
-    //             if (!canvas) {
-    //                 // this._skin.clear();
-    //                 return;
-    //             }
-    //
-    //             // const xOffset = ModalVideoProvider.DIMENSIONS[0] / -2;
-    //             // const yOffset = ModalVideoProvider.DIMENSIONS[1] / 2;
-    //             // this._skin.drawStamp(canvas, xOffset, yOffset);
-    //             // this.runtime.requestRedraw();
-    //         };
-    //
-    //         this._renderPreviewFrame();
-    //     }
-    // }
+    _drawFrames () {
+        this._videoFeedInterval = setInterval(() =>
+            this._canvas.getContext('2d').drawImage(this._video,
+                // source x, y, width, height
+                0, 0, this._video.videoWidth, this._video.videoHeight,
+                // dest x, y, width, height
+                0, 0, this._width, this._height
+            ), this._frameCacheTimeout);
+    }
 
     takeSnapshot () {
         clearInterval(this._videoFeedInterval);
-
-        // clearTimeout(this._renderPreviewTimeout);
-
         return this._canvas.toDataURL('image/png');
     }
 
-    getSnapshot () {
-        return this._capture;
+    clearSnapshot () {
+        this._drawFrames();
     }
 
     /**
@@ -636,8 +599,12 @@ class ModalVideoProvider {
     // }
 
     disableVideo () {
+        // Don't need to do anything with this check,
+        // but we do want to pop our use of the stream off the stack
+        const disableTrack = requestDisableCheck();
+
         if (this._video) {
-            if (this._track) this._track.stop();
+            if (this._track && disableTrack) this._track.stop();
             this._video.pause();
             this._video.srcObject = null;
         }

From a7a30929b4c0de4976e1cf2e821eb71a86413893 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Thu, 26 Apr 2018 13:52:04 -0400
Subject: [PATCH 03/11] Fix lint error.

---
 src/components/camera-modal/camera-modal.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index d996dcbd5..a09011206 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Box from '../box/box.jsx';
 import Modal from '../modal/modal.jsx';
-import classNames from 'classnames';
 import styles from './camera-modal.css';
 import backIcon from './icon--back.svg';
 import cameraIcon from '../action-menu/icon--camera.svg';

From 5d8787236142a1d750cde2a9b79fec8dbab4ecc0 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Thu, 26 Apr 2018 19:13:09 -0400
Subject: [PATCH 04/11] Move runtime/renderer related code back into the vm io
 device. Refactor ModalVideoManager to use the video provider.

---
 src/containers/camera-modal.jsx |   4 +-
 src/containers/stage.jsx        |   4 +-
 src/lib/camera.js               | 342 +++++---------------------------
 3 files changed, 53 insertions(+), 297 deletions(-)

diff --git a/src/containers/camera-modal.jsx b/src/containers/camera-modal.jsx
index e5cf3fe59..cfc4284aa 100644
--- a/src/containers/camera-modal.jsx
+++ b/src/containers/camera-modal.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 
 import CameraModalComponent from '../components/camera-modal/camera-modal.jsx';
-import {ModalVideoProvider} from '../lib/camera.js';
+import {ModalVideoManager} from '../lib/camera.js';
 
 import {
     closeCameraCapture
@@ -46,7 +46,7 @@ class CameraModal extends React.Component {
     setCanvas (canvas) {
         this.canvas = canvas;
         if (this.canvas) {
-            this.videoDevice = new ModalVideoProvider(this.canvas);
+            this.videoDevice = new ModalVideoManager(this.canvas);
             this.videoDevice.enableVideo();
         }
     }
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index e6918fdd2..7e543617a 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -6,7 +6,7 @@ import VM from 'scratch-vm';
 import {connect} from 'react-redux';
 
 import {getEventXY} from '../lib/touch-utils';
-import {stageVideoProvider} from '../lib/camera';
+import {VideoProvider} from '../lib/camera';
 
 import StageComponent from '../components/stage/stage.jsx';
 
@@ -58,7 +58,7 @@ class Stage extends React.Component {
         this.renderer = new Renderer(this.canvas);
         this.props.vm.attachRenderer(this.renderer);
         this.props.vm.runtime.addListener('QUESTION', this.questionListener);
-        this.props.vm.setVideoProvider(stageVideoProvider(this.props.vm.runtime));
+        this.props.vm.setVideoProvider(new VideoProvider());
     }
     shouldComponentUpdate (nextProps, nextState) {
         return this.props.width !== nextProps.width ||
diff --git a/src/lib/camera.js b/src/lib/camera.js
index 4b6a08e7a..339d59dc2 100644
--- a/src/lib/camera.js
+++ b/src/lib/camera.js
@@ -1,8 +1,14 @@
 import getUserMedia from 'get-user-media-promise';
 import log from './log.js';
 
+// Single Setup For All Video Streams used by the GUI
+// While VideoProvider uses a private _singleSetup
+// property to ensure that each instance of a VideoProvider
+// use the same setup, this ensures that all instances
+// of VideoProviders use a single stream. This way, closing a camera modal
+// does not affect the video on the stage, and a program running and disabling
+// video on the stage will not affect the camera modal's video.
 const requestStack = [];
-// Single Setup For All Video Streams
 const requestVideoStream = videoDesc => {
     let streamPromise;
     if (requestStack.length === 0) {
@@ -24,14 +30,11 @@ const requestDisableCheck = () => {
     return true;
 };
 
-class StageVideoProvider {
-    constructor (runtime) {
-        /**
-         * Reference to the owning Runtime.
-         * @type{!Runtime}
-         */
-        this.runtime = runtime;
-
+/**
+ * Video Manager for video extensions.
+ */
+class VideoProvider {
+    constructor () {
         /**
          * Default value for mirrored frames.
          * @type boolean
@@ -60,32 +63,6 @@ class StageVideoProvider {
          * Stores some canvas/frame data per resolution/mirror states
          */
         this._workspace = [];
-
-        /**
-         * Id representing a Scratch Renderer skin the video is rendered to for
-         * previewing.
-         * @type {number}
-         */
-        this._skinId = -1;
-
-        /**
-         * The Scratch Renderer Skin object.
-         * @type {Skin}
-         */
-        this._skin = null;
-
-        /**
-         * Id for a drawable using the video's skin that will render as a video
-         * preview.
-         * @type {Drawable}
-         */
-        this._drawable = -1;
-
-        /**
-         * Store the last state of the video transparency ghost effect
-         * @type {number}
-         */
-        this._ghost = 0;
     }
 
     static get FORMAT_IMAGE_DATA () {
@@ -113,6 +90,13 @@ class StageVideoProvider {
         return 1;
     }
 
+    /**
+     * Get the HTML video element containing the stream
+     */
+    get video () {
+        return this._video;
+    }
+
     /**
      * Request video be enabled.  Sets up video, creates video skin and enables preview.
      *
@@ -146,7 +130,6 @@ class StageVideoProvider {
         // we might be asked to re-enable before _teardown is called, just ignore it.
         if (this.enabled === false) {
             const disableTrack = requestDisableCheck();
-            this._disablePreview();
             this._singleSetup = null;
             // by clearing refs to video and track, we should lose our hold over the camera
             this._video = null;
@@ -171,9 +154,9 @@ class StageVideoProvider {
      * @return {ArrayBuffer|Canvas|string|null} Frame data in requested format, null when errors.
      */
     getFrame ({
-        dimensions = StageVideoProvider.DIMENSIONS,
+        dimensions = VideoProvider.DIMENSIONS,
         mirror = this.mirror,
-        format = StageVideoProvider.FORMAT_IMAGE_DATA,
+        format = VideoProvider.FORMAT_IMAGE_DATA,
         cacheTimeout = this._frameCacheTimeout
     }) {
         if (!this.videoReady) {
@@ -211,9 +194,9 @@ class StageVideoProvider {
         const formatCache = cacheData[format];
 
         if (formatCache.lastUpdate + cacheTimeout < now) {
-            if (format === StageVideoProvider.FORMAT_IMAGE_DATA) {
+            if (format === VideoProvider.FORMAT_IMAGE_DATA) {
                 formatCache.lastData = context.getImageData(0, 0, width, height);
-            } else if (format === StageVideoProvider.FORMAT_CANVAS) {
+            } else if (format === VideoProvider.FORMAT_CANVAS) {
                 // this will never change
                 formatCache.lastUpdate = Infinity;
                 formatCache.lastData = canvas;
@@ -231,17 +214,6 @@ class StageVideoProvider {
         return formatCache.lastData;
     }
 
-    /**
-     * Set the preview ghost effect
-     * @param {number} ghost from 0 (visible) to 100 (invisible) - ghost effect
-     */
-    setPreviewGhost (ghost) {
-        this._ghost = ghost;
-        if (this._drawable) {
-            this.runtime.renderer.updateDrawableProperties(this._drawable, {ghost});
-        }
-    }
-
     /**
      * Method called when an error happens.  Default implementation is just to log error.
      *
@@ -265,7 +237,7 @@ class StageVideoProvider {
             return this._singleSetup;
         }
 
-        this._singleSetup = requestVideoStream({ // navigator.mediaDevices.getUserMedia({
+        this._singleSetup = requestVideoStream({
             width: {min: 480, ideal: 640},
             height: {min: 360, ideal: 480}
         })
@@ -284,7 +256,6 @@ class StageVideoProvider {
                 // needed.
                 this._video.play(); // Needed for Safari/Firefox, Chrome auto-plays.
                 this._track = stream.getTracks()[0];
-                this._setupPreview();
                 return this;
             })
             .catch(error => {
@@ -295,63 +266,6 @@ class StageVideoProvider {
         return this._singleSetup;
     }
 
-    _disablePreview () {
-        if (this._skin) {
-            this._skin.clear();
-            this.runtime.renderer.updateDrawableProperties(this._drawable, {visible: false});
-        }
-        this._renderPreviewFrame = null;
-    }
-
-    _setupPreview () {
-        const {renderer} = this.runtime;
-        if (!renderer) return;
-
-        if (this._skinId === -1 && this._skin === null && this._drawable === -1) {
-            this._skinId = renderer.createPenSkin();
-            this._skin = renderer._allSkins[this._skinId];
-            this._drawable = renderer.createDrawable();
-            renderer.setDrawableOrder(
-                this._drawable,
-                StageVideoProvider.ORDER
-            );
-            renderer.updateDrawableProperties(this._drawable, {
-                skinId: this._skinId
-            });
-        }
-
-        // if we haven't already created and started a preview frame render loop, do so
-        if (!this._renderPreviewFrame) {
-            renderer.updateDrawableProperties(this._drawable, {
-                ghost: this._ghost,
-                visible: true
-            });
-
-            this._renderPreviewFrame = () => {
-                clearTimeout(this._renderPreviewTimeout);
-                if (!this._renderPreviewFrame) {
-                    return;
-                }
-
-                this._renderPreviewTimeout = setTimeout(this._renderPreviewFrame, this.runtime.currentStepTime);
-
-                const canvas = this.getFrame({format: StageVideoProvider.FORMAT_CANVAS});
-
-                if (!canvas) {
-                    this._skin.clear();
-                    return;
-                }
-
-                const xOffset = StageVideoProvider.DIMENSIONS[0] / -2;
-                const yOffset = StageVideoProvider.DIMENSIONS[1] / 2;
-                this._skin.drawStamp(canvas, xOffset, yOffset);
-                this.runtime.requestRedraw();
-            };
-
-            this._renderPreviewFrame();
-        }
-    }
-
     get videoReady () {
         if (!this.enabled) {
             return false;
@@ -401,90 +315,46 @@ class StageVideoProvider {
     }
 }
 
-class ModalVideoProvider {
+/**
+ * Video Manager for Camera Modal
+ */
+class ModalVideoManager {
     constructor (canvas) {
+        this._videoProvider = new VideoProvider();
         /**
-         * Captured image data
-         */
-
-        /**
-         * Cache frames for this many ms.
+         * Frame update interval
          * @type number
          */
-        this._frameCacheTimeout = 16;
+        this._frameTimeout = 16;
 
         this._canvas = canvas;
+        // These values are double the stage dimensions so that the resulting
+        // image does not have to get sized down to accomodate double resolution
+        this._canvasWidth = 960; // Double Stage Width
+        this._canvasHeight = 720; // Double Stage Height
 
-        this._video = null;
-
-        // this._workspace = [];
-
-        /**
-         * Usermedia stream track
-         * @private
-         */
-        this._track = null;
     }
 
-
-    /**
-     * Dimensions the video stream is analyzed at after its rendered to the
-     * sample canvas.
-     * @type {Array.<number>}
-     */
-    static get DIMENSIONS () {
-        return [480, 360];
-    }
-
-    setVideo (video) {
-        this._video = video;
-    }
-
-
     enableVideo () {
-        const thisContext = this;
-        this._video = this._video ? this._video : document.createElement('video');
-        // TODO possibly make common function for this
-        requestVideoStream(true)
-            .then(userMediaStream => {
-                try {
-                    thisContext._video.srcObject = userMediaStream;
-                } catch (e) {
-                    thisContext._video.src = window.URL.createObjectURL(userMediaStream);
-                }
-                thisContext._track = userMediaStream.getTracks()[0];
+        this._videoProvider.enableVideo().then(() => {
 
-                thisContext._width = 960; // abstract this out
-                thisContext._height = 720;
+            const ctx = this._canvas.getContext('2d');
+            ctx.scale(-1, 1);
+            ctx.translate(this._canvasWidth * -1, 0);
 
-                const ctx = this._canvas.getContext('2d');
-
-                ctx.scale(-1, 1);
-                ctx.translate(thisContext._width * -1, 0);
-
-                thisContext._drawFrames();
-
-                // The following also works...
-                // thisContext._videoFeedInterval = setInterval(
-                //     () => this.getFrame({format: ModalVideoProvider.FORMAT_CANVAS}),
-                //     thisContext._frameCacheTimeout);
-
-
-                // thisContext._setupPreview();
-            })
-            .catch(e => {
-                log.warn(e);
-            });
+            this._drawFrames();
+        });
     }
 
     _drawFrames () {
+        const video = this._videoProvider.video;
         this._videoFeedInterval = setInterval(() =>
-            this._canvas.getContext('2d').drawImage(this._video,
+            this._canvas.getContext('2d').drawImage(video,
                 // source x, y, width, height
-                0, 0, this._video.videoWidth, this._video.videoHeight,
+                0, 0, video.videoWidth, video.videoHeight,
                 // dest x, y, width, height
-                0, 0, this._width, this._height
-            ), this._frameCacheTimeout);
+                0, 0, this._canvasWidth, this._canvasHeight
+            ), this._frameTimeout);
     }
 
     takeSnapshot () {
@@ -496,126 +366,12 @@ class ModalVideoProvider {
         this._drawFrames();
     }
 
-    /**
-     * get an internal workspace for canvas/context/caches
-     * this uses some document stuff to create a canvas and what not, probably needs abstraction
-     * into the renderer layer?
-     * @private
-     * @return {object} A workspace for canvas/data storage.  Internal format not documented intentionally
-     */
-    // _getWorkspace ({dimensions, mirror}) {
-    //     let workspace = this._workspace.find(space => (
-    //         space.dimensions.join('-') === dimensions.join('-') &&
-    //         space.mirror === mirror
-    //     ));
-    //     if (!workspace) {
-    //         workspace = {
-    //             dimensions,
-    //             mirror,
-    //             canvas: this._canvas, // document.createElement('canvas'),
-    //             lastUpdate: 0,
-    //             cacheData: {}
-    //         };
-    //         workspace.canvas.width = dimensions[0];
-    //         workspace.canvas.height = dimensions[1];
-    //         workspace.context = workspace.canvas.getContext('2d');
-    //         this._workspace.push(workspace);
-    //     }
-    //     return workspace;
-    // }
-
-    /**
-     * Return frame data from the video feed in a specified dimensions, format, and mirroring.
-     *
-     * @param {object} frameInfo A descriptor of the frame you would like to receive.
-     * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
-     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to the global
-     *                                   mirror state (ioDevices.video.mirror)
-     * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
-     * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
-     *                                        the cacheTimeout.  Defaults to 16ms.
-     *
-     * @return {ArrayBuffer|Canvas|string|null} Frame data in requested format, null when errors.
-     */
-    // getFrame ({
-    //     dimensions = ModalVideoProvider.DIMENSIONS,
-    //     mirror = this.mirror,
-    //     format = ModalVideoProvider.FORMAT_IMAGE_DATA,
-    //     cacheTimeout = this._frameCacheTimeout
-    // }) {
-    //     if (!this.videoReady) {
-    //         return null;
-    //     }
-    //     const [width, height] = dimensions;
-    //     const workspace = this._getWorkspace({dimensions, mirror: Boolean(mirror)});
-    //     const {videoWidth, videoHeight} = this._video;
-    //     const {canvas, context, lastUpdate, cacheData} = workspace;
-    //     const now = Date.now();
-    //
-    //     // if the canvas hasn't been updated...
-    //     if (lastUpdate + cacheTimeout < now) {
-    //
-    //         if (mirror) {
-    //             context.scale(-1, 1);
-    //             context.translate(width * -1, 0);
-    //         }
-    //
-    //         context.drawImage(this._video,
-    //             // source x, y, width, height
-    //             0, 0, videoWidth, videoHeight,
-    //             // dest x, y, width, height
-    //             0, 0, width, height
-    //         );
-    //
-    //         context.resetTransform();
-    //         workspace.lastUpdate = now;
-    //     }
-    //
-    //     // each data type has it's own data cache, but the canvas is the same
-    //     if (!cacheData[format]) {
-    //         cacheData[format] = {lastUpdate: 0};
-    //     }
-    //     const formatCache = cacheData[format];
-    //
-    //     if (formatCache.lastUpdate + cacheTimeout < now) {
-    //         if (format === ModalVideoProvider.FORMAT_IMAGE_DATA) {
-    //             formatCache.lastData = context.getImageData(0, 0, width, height);
-    //         } else if (format === ModalVideoProvider.FORMAT_CANVAS) {
-    //             // this will never change
-    //             formatCache.lastUpdate = Infinity;
-    //             formatCache.lastData = canvas;
-    //         } else {
-    //             log.error(`video io error - unimplemented format ${format}`);
-    //             // cache the null result forever, don't log about it again..
-    //             formatCache.lastUpdate = Infinity;
-    //             formatCache.lastData = null;
-    //         }
-    //
-    //         // rather than set to now, this data is as stale as it's canvas is
-    //         formatCache.lastUpdate = Math.max(workspace.lastUpdate, formatCache.lastUpdate);
-    //     }
-    //
-    //     return formatCache.lastData;
-    // }
-
     disableVideo () {
-        // Don't need to do anything with this check,
-        // but we do want to pop our use of the stream off the stack
-        const disableTrack = requestDisableCheck();
-
-        if (this._video) {
-            if (this._track && disableTrack) this._track.stop();
-            this._video.pause();
-            this._video.srcObject = null;
-        }
+        this._videoProvider.disableVideo();
     }
 }
 
-const stageVideoProvider = function (runtime) {
-    return new StageVideoProvider(runtime);
-};
-
 export {
-    stageVideoProvider,
-    ModalVideoProvider
+    VideoProvider,
+    ModalVideoManager
 };

From 3c23749e42aa6b4ddae9a1ae7716416e470a023d Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Sun, 29 Apr 2018 23:07:05 -0400
Subject: [PATCH 05/11] Add more UI states (e.g. differentiating between no
 access, permission granted but video not loaded, video loaded). CSS cleanup.

---
 src/components/camera-modal/camera-modal.css  | 100 ++++++----------
 src/components/camera-modal/camera-modal.jsx  |  42 ++++---
 src/containers/camera-modal.jsx               |  24 +++-
 src/containers/stage.jsx                      |   2 +-
 src/lib/video/video-provider.js               |   7 +-
 .../video-provider.js~HEAD}                   | 108 ++----------------
 6 files changed, 99 insertions(+), 184 deletions(-)
 rename src/lib/{camera.js => video/video-provider.js~HEAD} (74%)

diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index 886fc756f..a8d668ae7 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -4,42 +4,48 @@
 $main-button-size: 2.75rem;
 
 .modal-content {
-    width: 600px;
+    width: 552px;
 }
 
 .body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     background: $ui-white;
     padding: 1.5rem 2.25rem;
 }
 
-.visualization-container {
-    display: flex;
-    justify-content: space-around;
-}
-
-.camera-feed-container {
-    background: $ui-primary;
-    border: 1px solid $ui-black-transparent;
-    border-radius: 5px;
-    padding: 3px;
-
-}
-
 .camera-feed-container {
     display: flex;
     justify-content: space-around;
     align-items: center;
+
+    background: $ui-primary;
+    border: 1px solid $ui-black-transparent;
+    border-radius: 4px;
+    padding: 3px;
+
     width: 480px;
     height: 360px;
     position: relative;
-    border-radius: 1px solid $ui-black-transparent;
+    overflow: hidden;
 }
 
 .canvas {
+    position: absolute;
     width: 480px;
     height: 360px;
 }
 
+.loading-text {
+    position: absolute;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: $text-primary-transparent;
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-align: center;
+}
+
 .help-text {
     margin: 10px auto 0;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -53,10 +59,18 @@ $main-button-size: 2.75rem;
     color: $motion-primary;
 }
 
+.disabled-text {
+    color: $text-primary;
+    opacity: 0.25;
+}
+
 .main-button-row {
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: space-around;
     margin-top: 15px;
+    width: 100%;
 }
 
 /* Action Menu */
@@ -76,48 +90,32 @@ $main-button-size: 2.75rem;
     width: $main-button-size;
     height: $main-button-size;
     box-shadow: 0 0 0 4px $motion-transparent;
-    z-index: 20; /* TODO reorder layout to prevent z-index need */
-    transition: transform, box-shadow 0.5s;
 }
 
 .main-button:hover {
     background: $pen-primary;
-
-    /* transform: scale(1.1); */
     box-shadow: 0 0 0 6px $motion-transparent;
 }
 
+.main-button:disabled {
+    background: $text-primary;
+    border-color: $ui-black-transparent;
+    box-shadow: none;
+    opacity: 0.25;
+}
+
 .main-icon {
     width: calc($main-button-size - 1rem);
     height: calc($main-button-size - 1rem);
 }
 
-
-/* Action Menu */
-
-
-
-/* .main-button-row button {
-    padding: 0.5rem 0.75rem;
-    border-radius: 0.25rem;
-    background: transparent;
-    border: none;
-} */
-
-/* .main-button-row button:disabled {
-    opacity: 0.25;
-}
-
-.main-button-row button:active, .main-button-row button:focus {
-    outline: none;
-} */
-
 .button-row {
     font-weight: bolder;
     text-align: right;
     display: flex;
     justify-content: space-between;
     margin-top: 20px;
+    width: 480px;
 }
 
 .button-row button {
@@ -135,27 +133,3 @@ $main-button-size: 2.75rem;
     border: $motion-primary;
     color: white;
 }
-
-.button-row button + button {
-    margin-left: 0.5rem;
-}
-
-/* .main-button {
-    text-align: center;
-} */
-
-.capture-button {
-    overflow: visible;
-}
-
-.capture-button-circle {
-    fill: $motion-primary;
-    /* opacity: 0.25; */
-    stroke: $motion-tertiary;
-}
-
-.capture-button-circle-outline {
-    fill: $ui-black-transparent;
-    opacity: 0.25;
-    transition: 0.1s;
-}
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index a09011206..b3f93853b 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -13,21 +13,27 @@ const CameraModal = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
-            <Box className={styles.visualizationContainer}>
-                <Box className={styles.cameraFeedContainer}>
-                    <canvas
-                        className={styles.canvas}
-                        // height and (below) width of the actual image
-                        height="720"
-                        ref={props.canvasRef}
-                        width="960"
-                    />
-                </Box>
+            <Box className={styles.cameraFeedContainer}>
+                <div className={styles.loadingText}>
+                    {props.access ? 'Loading camera...' :
+                        '↖️ \u00A0We need your permission to use your microphone'}
+                </div>
+                <canvas
+                    className={styles.canvas}
+                    // height and (below) width of the actual image
+                    // double stage dimensions to avoid the need for
+                    // resizing the captured image when importing costume
+                    // to accommodate double resolution bitmaps
+                    height="720"
+                    ref={props.canvasRef}
+                    width="960"
+                />
             </Box>
             {props.capture ?
                 <Box className={styles.buttonRow}>
                     <button
                         className={styles.cancelButton}
+                        key="retake-button"
                         onClick={props.onBack}
                     >
                         <img
@@ -44,6 +50,8 @@ const CameraModal = props => (
                 <Box className={styles.mainButtonRow}>
                     <button
                         className={styles.mainButton}
+                        disabled={!props.loaded}
+                        key="capture-button"
                         onClick={props.onCapture}
                     >
                         <img
@@ -53,9 +61,14 @@ const CameraModal = props => (
                         />
                     </button>
                     <div className={styles.helpText}>
-                        <span className={styles.captureText}>
-                            {'Take Photo'}
-                        </span>
+                        {props.access ?
+                            <span className={props.loaded ? styles.captureText : styles.disabledText}>
+                                {props.loaded ? 'Take Photo' : 'Loading...'}
+                            </span> :
+                            <span className={styles.disabledText}>
+                                {'Enable Camera'}
+                            </span>
+                        }
                     </div>
 
                 </Box>
@@ -65,13 +78,14 @@ const CameraModal = props => (
 );
 
 CameraModal.propTypes = {
+    access: PropTypes.bool,
     canvasRef: PropTypes.func.isRequired,
     capture: PropTypes.string,
+    loaded: PropTypes.bool,
     onBack: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     onCapture: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired
-    // videoRef: PropTypes.func.isRequired
 };
 
 export default CameraModal;
diff --git a/src/containers/camera-modal.jsx b/src/containers/camera-modal.jsx
index cfc4284aa..68fb411ee 100644
--- a/src/containers/camera-modal.jsx
+++ b/src/containers/camera-modal.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 
 import CameraModalComponent from '../components/camera-modal/camera-modal.jsx';
-import {ModalVideoManager} from '../lib/camera.js';
+import ModalVideoManager from '../lib/video/modal-video-manager.js';
 
 import {
     closeCameraCapture
@@ -14,9 +14,11 @@ class CameraModal extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
+            'handleAccess',
             'handleBack',
             'handleCancel',
             'handleCapture',
+            'handleLoaded',
             'handleSubmit',
             'setCanvas'
             // 'enableVideo'
@@ -26,7 +28,9 @@ class CameraModal extends React.Component {
         this.videoDevice = null;
 
         this.state = {
-            capture: null
+            capture: null,
+            access: false,
+            loaded: false
         };
     }
     componentWillUnmount () {
@@ -35,19 +39,27 @@ class CameraModal extends React.Component {
         this.videoDevice.disableVideo();
         // this.video = null;
     }
+    handleAccess () {
+        this.setState({access: true});
+    }
+    handleLoaded () {
+        this.setState({loaded: true});
+    }
     handleBack () {
         this.setState({capture: null});
         this.videoDevice.clearSnapshot();
     }
     handleCapture () {
-        const capture = this.videoDevice.takeSnapshot();
-        this.setState({capture: capture});
+        if (this.state.loaded) {
+            const capture = this.videoDevice.takeSnapshot();
+            this.setState({capture: capture});
+        }
     }
     setCanvas (canvas) {
         this.canvas = canvas;
         if (this.canvas) {
             this.videoDevice = new ModalVideoManager(this.canvas);
-            this.videoDevice.enableVideo();
+            this.videoDevice.enableVideo(this.handleAccess, this.handleLoaded);
         }
     }
     handleSubmit () {
@@ -62,8 +74,10 @@ class CameraModal extends React.Component {
         return (
             <CameraModalComponent
                 // vm={this.props.vm}
+                access={this.state.access}
                 canvasRef={this.setCanvas}
                 capture={this.state.capture}
+                loaded={this.state.loaded}
                 // videoRef={this.setVideoInput}
                 onBack={this.handleBack}
                 onCancel={this.handleCancel}
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 7e543617a..96fdf71a6 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -6,7 +6,7 @@ import VM from 'scratch-vm';
 import {connect} from 'react-redux';
 
 import {getEventXY} from '../lib/touch-utils';
-import {VideoProvider} from '../lib/camera';
+import VideoProvider from '../lib/video/video-provider';
 
 import StageComponent from '../components/stage/stage.jsx';
 
diff --git a/src/lib/video/video-provider.js b/src/lib/video/video-provider.js
index dffe4716f..84b69e72e 100644
--- a/src/lib/video/video-provider.js
+++ b/src/lib/video/video-provider.js
@@ -71,7 +71,9 @@ class VideoProvider {
     /**
      * Request video be enabled.  Sets up video, creates video skin and enables preview.
      *
-     * @return {Promise.<Video>} resolves a promise to this video provider when video is ready.
+     * ioDevices.video.requestVideo()
+     *
+     * @return {Promise.<Video>} resolves a promise to this IO device when video is ready.
      */
     enableVideo () {
         this.enabled = true;
@@ -114,7 +116,8 @@ class VideoProvider {
      *
      * @param {object} frameInfo A descriptor of the frame you would like to receive.
      * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
-     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to true
+     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to the global
+     *                                   mirror state (ioDevices.video.mirror)
      * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
      * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
      *                                        the cacheTimeout.  Defaults to 16ms.
diff --git a/src/lib/camera.js b/src/lib/video/video-provider.js~HEAD
similarity index 74%
rename from src/lib/camera.js
rename to src/lib/video/video-provider.js~HEAD
index 339d59dc2..dffe4716f 100644
--- a/src/lib/camera.js
+++ b/src/lib/video/video-provider.js~HEAD
@@ -1,34 +1,5 @@
-import getUserMedia from 'get-user-media-promise';
-import log from './log.js';
-
-// Single Setup For All Video Streams used by the GUI
-// While VideoProvider uses a private _singleSetup
-// property to ensure that each instance of a VideoProvider
-// use the same setup, this ensures that all instances
-// of VideoProviders use a single stream. This way, closing a camera modal
-// does not affect the video on the stage, and a program running and disabling
-// video on the stage will not affect the camera modal's video.
-const requestStack = [];
-const requestVideoStream = videoDesc => {
-    let streamPromise;
-    if (requestStack.length === 0) {
-        streamPromise = getUserMedia({
-            audio: false,
-            video: videoDesc
-        });
-        requestStack.push(streamPromise);
-    } else if (requestStack.length > 0) {
-        streamPromise = requestStack[0];
-        requestStack.push(true);
-    }
-    return streamPromise;
-};
-
-const requestDisableCheck = () => {
-    requestStack.pop();
-    if (requestStack.length > 0) return false;
-    return true;
-};
+import {requestVideoStream, requestDisableVideo} from './camera.js';
+import log from '../log.js';
 
 /**
  * Video Manager for video extensions.
@@ -100,9 +71,7 @@ class VideoProvider {
     /**
      * Request video be enabled.  Sets up video, creates video skin and enables preview.
      *
-     * ioDevices.video.requestVideo()
-     *
-     * @return {Promise.<Video>} resolves a promise to this IO device when video is ready.
+     * @return {Promise.<Video>} resolves a promise to this video provider when video is ready.
      */
     enableVideo () {
         this.enabled = true;
@@ -129,7 +98,7 @@ class VideoProvider {
     _teardown () {
         // we might be asked to re-enable before _teardown is called, just ignore it.
         if (this.enabled === false) {
-            const disableTrack = requestDisableCheck();
+            const disableTrack = requestDisableVideo();
             this._singleSetup = null;
             // by clearing refs to video and track, we should lose our hold over the camera
             this._video = null;
@@ -145,8 +114,7 @@ class VideoProvider {
      *
      * @param {object} frameInfo A descriptor of the frame you would like to receive.
      * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
-     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to the global
-     *                                   mirror state (ioDevices.video.mirror)
+     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to true
      * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
      * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
      *                                        the cacheTimeout.  Defaults to 16ms.
@@ -183,7 +151,8 @@ class VideoProvider {
                 0, 0, width, height
             );
 
-            context.resetTransform();
+            // context.resetTransform() doesn't work on Edge but the following should
+            context.setTransform(1, 0, 0, 1, 0, 0);
             workspace.lastUpdate = now;
         }
 
@@ -226,7 +195,6 @@ class VideoProvider {
 
     /**
      * Create a video stream.
-     * Should probably be moved to -render or somewhere similar later
      * @private
      * @return {Promise} When video has been received, rejected if video is not received
      */
@@ -243,6 +211,7 @@ class VideoProvider {
         })
             .then(stream => {
                 this._video = document.createElement('video');
+
                 // Use the new srcObject API, falling back to createObjectURL
                 try {
                     this._video.srcObject = stream;
@@ -315,63 +284,4 @@ class VideoProvider {
     }
 }
 
-/**
- * Video Manager for Camera Modal
- */
-class ModalVideoManager {
-    constructor (canvas) {
-        this._videoProvider = new VideoProvider();
-        /**
-         * Frame update interval
-         * @type number
-         */
-        this._frameTimeout = 16;
-
-        this._canvas = canvas;
-        // These values are double the stage dimensions so that the resulting
-        // image does not have to get sized down to accomodate double resolution
-        this._canvasWidth = 960; // Double Stage Width
-        this._canvasHeight = 720; // Double Stage Height
-
-    }
-
-    enableVideo () {
-        this._videoProvider.enableVideo().then(() => {
-
-            const ctx = this._canvas.getContext('2d');
-            ctx.scale(-1, 1);
-            ctx.translate(this._canvasWidth * -1, 0);
-
-            this._drawFrames();
-        });
-    }
-
-    _drawFrames () {
-        const video = this._videoProvider.video;
-        this._videoFeedInterval = setInterval(() =>
-            this._canvas.getContext('2d').drawImage(video,
-                // source x, y, width, height
-                0, 0, video.videoWidth, video.videoHeight,
-                // dest x, y, width, height
-                0, 0, this._canvasWidth, this._canvasHeight
-            ), this._frameTimeout);
-    }
-
-    takeSnapshot () {
-        clearInterval(this._videoFeedInterval);
-        return this._canvas.toDataURL('image/png');
-    }
-
-    clearSnapshot () {
-        this._drawFrames();
-    }
-
-    disableVideo () {
-        this._videoProvider.disableVideo();
-    }
-}
-
-export {
-    VideoProvider,
-    ModalVideoManager
-};
+export default VideoProvider;

From 6f41d8a92e4595423fa5a83dd106c205a2488b2c Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Mon, 30 Apr 2018 14:15:44 -0400
Subject: [PATCH 06/11] Rename camera upload option in action menu.

---
 src/containers/costume-tab.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 5146a4f74..abe0cc801 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -63,7 +63,7 @@ const messages = defineMessages({
         id: 'gui.costumeTab.addFileCostume'
     },
     addCameraCostumeMsg: {
-        defaultMessage: 'Coming Soon',
+        defaultMessage: 'Camera',
         description: 'Button to use the camera to create a costume costume in the editor tab',
         id: 'gui.costumeTab.addCameraCostume'
     }

From 598ca8af94d9e4203ba1e57bfc7e16c440f382a0 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Mon, 30 Apr 2018 18:01:32 -0400
Subject: [PATCH 07/11] Remove unnecessary prop.

---
 src/containers/costume-tab.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index abe0cc801..f9d55188c 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -294,7 +294,6 @@ class CostumeTab extends React.Component {
                 ) : null}
                 {cameraModalVisible ? (
                     <CameraModal
-                        vm={vm}
                         onClose={onRequestCloseCameraModal}
                         onNewCostume={this.handleCameraBuffer}
                     />

From 421d4d0e9ac3a9b5d87e49fa4a3837bff33b1c7c Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Mon, 30 Apr 2018 22:42:16 -0400
Subject: [PATCH 08/11] Localization support in camera modal and some code
 cleanup.

---
 src/components/camera-modal/camera-modal.jsx | 65 +++++++++++++++++---
 src/containers/camera-modal.jsx              |  6 --
 src/containers/costume-tab.jsx               |  2 +-
 3 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index b3f93853b..f9411be11 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -1,22 +1,66 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import Box from '../box/box.jsx';
 import Modal from '../modal/modal.jsx';
 import styles from './camera-modal.css';
 import backIcon from './icon--back.svg';
 import cameraIcon from '../action-menu/icon--camera.svg';
 
-const CameraModal = props => (
+const messages = defineMessages({
+    cameraModalTitle: {
+        defaultMessage: 'Take a Photo',
+        description: 'Title for prompt to take a picture (to add as a new costume).',
+        id: 'gui.cameraModal.cameraModalTitle'
+    },
+    loadingCameraMessage: {
+        defaultMessage: 'Loading Camera...',
+        description: 'Notification to the user that the camera is loading',
+        id: 'gui.cameraModal.loadingCameraMessage'
+    },
+    permissionRequest: {
+        defaultMessage: 'We need your permission to use your camera',
+        description: 'Notification to the user that the app needs camera access',
+        id: 'gui.cameraModal.permissionRequest'
+    },
+    retakePhoto: {
+        defaultMessage: 'Retake Photo',
+        description: 'A button that allows the user to take the picture again, replacing the old one',
+        id: 'gui.cameraModal.retakePhoto'
+    },
+    save: {
+        defaultMessage: 'Save',
+        description: 'A button that allows the user to save the photo they took as a costume',
+        id: 'gui.cameraModal.save'
+    },
+    takePhotoButton: {
+        defaultMessage: 'Take Photo',
+        description: 'A button to take a photo',
+        id: 'gui.cameraModal.takePhoto'
+    },
+    loadingCaption: {
+        defaultMessage: 'Loading...',
+        description: 'A caption for a disabled button while the video from the camera is still loading',
+        id: 'gui.cameraModal.loadingCaption'
+    },
+    enableCameraCaption: {
+        defaultMessage: 'Enable Camera',
+        description: 'A caption for a disabled button prompting the user to enable camera access',
+        id: 'gui.cameraModal.enableCameraCaption'
+    }
+});
+
+const CameraModal = ({intl, ...props}) => (
     <Modal
         className={styles.modalContent}
-        contentLabel={'Take a Picture'}
+        contentLabel={intl.formatMessage(messages.cameraModalTitle)}
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
             <Box className={styles.cameraFeedContainer}>
                 <div className={styles.loadingText}>
-                    {props.access ? 'Loading camera...' :
-                        '↖️ \u00A0We need your permission to use your microphone'}
+                    {props.access ? intl.formatMessage(messages.loadingCameraMessage) :
+                        `↖️ \u00A0${intl.formatMessage(messages.permissionRequest)}`}
                 </div>
                 <canvas
                     className={styles.canvas}
@@ -39,12 +83,12 @@ const CameraModal = props => (
                         <img
                             draggable={false}
                             src={backIcon}
-                        /> Re-take
+                        /> {intl.formatMessage(messages.retakePhoto)}
                     </button>
                     <button
                         className={styles.okButton}
                         onClick={props.onSubmit}
-                    > Save
+                    > {intl.formatMessage(messages.save)}
                     </button>
                 </Box> :
                 <Box className={styles.mainButtonRow}>
@@ -63,10 +107,12 @@ const CameraModal = props => (
                     <div className={styles.helpText}>
                         {props.access ?
                             <span className={props.loaded ? styles.captureText : styles.disabledText}>
-                                {props.loaded ? 'Take Photo' : 'Loading...'}
+                                {props.loaded ?
+                                    intl.formatMessage(messages.takePhotoButton) :
+                                    intl.formatMessage(messages.loadingCaption)}
                             </span> :
                             <span className={styles.disabledText}>
-                                {'Enable Camera'}
+                                {intl.formatMessage(messages.enableCameraCaption)}
                             </span>
                         }
                     </div>
@@ -81,6 +127,7 @@ CameraModal.propTypes = {
     access: PropTypes.bool,
     canvasRef: PropTypes.func.isRequired,
     capture: PropTypes.string,
+    intl: intlShape.isRequired,
     loaded: PropTypes.bool,
     onBack: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
@@ -88,4 +135,4 @@ CameraModal.propTypes = {
     onSubmit: PropTypes.func.isRequired
 };
 
-export default CameraModal;
+export default injectIntl(CameraModal);
diff --git a/src/containers/camera-modal.jsx b/src/containers/camera-modal.jsx
index 68fb411ee..0641b3c61 100644
--- a/src/containers/camera-modal.jsx
+++ b/src/containers/camera-modal.jsx
@@ -21,7 +21,6 @@ class CameraModal extends React.Component {
             'handleLoaded',
             'handleSubmit',
             'setCanvas'
-            // 'enableVideo'
         ]);
 
         this.video = null;
@@ -34,10 +33,7 @@ class CameraModal extends React.Component {
         };
     }
     componentWillUnmount () {
-        // const videoDevice = this.props.vm.runtime.ioDevices.video;
-        // videoDevice.disableVideo();
         this.videoDevice.disableVideo();
-        // this.video = null;
     }
     handleAccess () {
         this.setState({access: true});
@@ -73,12 +69,10 @@ class CameraModal extends React.Component {
     render () {
         return (
             <CameraModalComponent
-                // vm={this.props.vm}
                 access={this.state.access}
                 canvasRef={this.setCanvas}
                 capture={this.state.capture}
                 loaded={this.state.loaded}
-                // videoRef={this.setVideoInput}
                 onBack={this.handleBack}
                 onCancel={this.handleCancel}
                 onCapture={this.handleCapture}
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index f9d55188c..641d77380 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -252,7 +252,7 @@ class CostumeTab extends React.Component {
                         title: intl.formatMessage(addFileMessage),
                         img: fileUploadIcon,
                         onClick: this.handleFileUploadClick,
-                        fileAccept: '.svg, .png, .jpg, .jpeg', // coming soon
+                        fileAccept: '.svg, .png, .jpg, .jpeg',
                         fileChange: this.handleCostumeUpload,
                         fileInput: this.setFileInput
                     },

From 254726d9ff4239120ba09298e1002d324f4ad428 Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Mon, 30 Apr 2018 22:59:09 -0400
Subject: [PATCH 09/11] Cleanup

---
 src/lib/video/video-provider.js      |   7 +-
 src/lib/video/video-provider.js~HEAD | 287 ---------------------------
 2 files changed, 2 insertions(+), 292 deletions(-)
 delete mode 100644 src/lib/video/video-provider.js~HEAD

diff --git a/src/lib/video/video-provider.js b/src/lib/video/video-provider.js
index 84b69e72e..dffe4716f 100644
--- a/src/lib/video/video-provider.js
+++ b/src/lib/video/video-provider.js
@@ -71,9 +71,7 @@ class VideoProvider {
     /**
      * Request video be enabled.  Sets up video, creates video skin and enables preview.
      *
-     * ioDevices.video.requestVideo()
-     *
-     * @return {Promise.<Video>} resolves a promise to this IO device when video is ready.
+     * @return {Promise.<Video>} resolves a promise to this video provider when video is ready.
      */
     enableVideo () {
         this.enabled = true;
@@ -116,8 +114,7 @@ class VideoProvider {
      *
      * @param {object} frameInfo A descriptor of the frame you would like to receive.
      * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
-     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to the global
-     *                                   mirror state (ioDevices.video.mirror)
+     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to true
      * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
      * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
      *                                        the cacheTimeout.  Defaults to 16ms.
diff --git a/src/lib/video/video-provider.js~HEAD b/src/lib/video/video-provider.js~HEAD
deleted file mode 100644
index dffe4716f..000000000
--- a/src/lib/video/video-provider.js~HEAD
+++ /dev/null
@@ -1,287 +0,0 @@
-import {requestVideoStream, requestDisableVideo} from './camera.js';
-import log from '../log.js';
-
-/**
- * Video Manager for video extensions.
- */
-class VideoProvider {
-    constructor () {
-        /**
-         * Default value for mirrored frames.
-         * @type boolean
-         */
-        this.mirror = true;
-
-        /**
-         * Cache frames for this many ms.
-         * @type number
-         */
-        this._frameCacheTimeout = 16;
-
-        /**
-         * DOM Video element
-         * @private
-         */
-        this._video = null;
-
-        /**
-         * Usermedia stream track
-         * @private
-         */
-        this._track = null;
-
-        /**
-         * Stores some canvas/frame data per resolution/mirror states
-         */
-        this._workspace = [];
-    }
-
-    static get FORMAT_IMAGE_DATA () {
-        return 'image-data';
-    }
-
-    static get FORMAT_CANVAS () {
-        return 'canvas';
-    }
-
-    /**
-     * Dimensions the video stream is analyzed at after its rendered to the
-     * sample canvas.
-     * @type {Array.<number>}
-     */
-    static get DIMENSIONS () {
-        return [480, 360];
-    }
-
-    /**
-     * Order preview drawable is inserted at in the renderer.
-     * @type {number}
-     */
-    static get ORDER () {
-        return 1;
-    }
-
-    /**
-     * Get the HTML video element containing the stream
-     */
-    get video () {
-        return this._video;
-    }
-
-    /**
-     * Request video be enabled.  Sets up video, creates video skin and enables preview.
-     *
-     * @return {Promise.<Video>} resolves a promise to this video provider when video is ready.
-     */
-    enableVideo () {
-        this.enabled = true;
-        return this._setupVideo();
-    }
-
-    /**
-     * Disable video stream (turn video off)
-     */
-    disableVideo () {
-        this.enabled = false;
-        // If we have begun a setup process, call _teardown after it completes
-        if (this._singleSetup) {
-            this._singleSetup
-                .then(this._teardown.bind(this))
-                .catch(err => this.onError(err));
-        }
-    }
-
-    /**
-     * async part of disableVideo
-     * @private
-     */
-    _teardown () {
-        // we might be asked to re-enable before _teardown is called, just ignore it.
-        if (this.enabled === false) {
-            const disableTrack = requestDisableVideo();
-            this._singleSetup = null;
-            // by clearing refs to video and track, we should lose our hold over the camera
-            this._video = null;
-            if (this._track && disableTrack) {
-                this._track.stop();
-            }
-            this._track = null;
-        }
-    }
-
-    /**
-     * Return frame data from the video feed in a specified dimensions, format, and mirroring.
-     *
-     * @param {object} frameInfo A descriptor of the frame you would like to receive.
-     * @param {Array.<number>} frameInfo.dimensions [width, height] array of numbers.  Defaults to [480,360]
-     * @param {boolean} frameInfo.mirror If you specificly want a mirror/non-mirror frame, defaults to true
-     * @param {string} frameInfo.format Requested video format, available formats are 'image-data' and 'canvas'.
-     * @param {number} frameInfo.cacheTimeout Will reuse previous image data if the time since capture is less than
-     *                                        the cacheTimeout.  Defaults to 16ms.
-     *
-     * @return {ArrayBuffer|Canvas|string|null} Frame data in requested format, null when errors.
-     */
-    getFrame ({
-        dimensions = VideoProvider.DIMENSIONS,
-        mirror = this.mirror,
-        format = VideoProvider.FORMAT_IMAGE_DATA,
-        cacheTimeout = this._frameCacheTimeout
-    }) {
-        if (!this.videoReady) {
-            return null;
-        }
-        const [width, height] = dimensions;
-        const workspace = this._getWorkspace({dimensions, mirror: Boolean(mirror)});
-        const {videoWidth, videoHeight} = this._video;
-        const {canvas, context, lastUpdate, cacheData} = workspace;
-        const now = Date.now();
-
-        // if the canvas hasn't been updated...
-        if (lastUpdate + cacheTimeout < now) {
-
-            if (mirror) {
-                context.scale(-1, 1);
-                context.translate(width * -1, 0);
-            }
-
-            context.drawImage(this._video,
-                // source x, y, width, height
-                0, 0, videoWidth, videoHeight,
-                // dest x, y, width, height
-                0, 0, width, height
-            );
-
-            // context.resetTransform() doesn't work on Edge but the following should
-            context.setTransform(1, 0, 0, 1, 0, 0);
-            workspace.lastUpdate = now;
-        }
-
-        // each data type has it's own data cache, but the canvas is the same
-        if (!cacheData[format]) {
-            cacheData[format] = {lastUpdate: 0};
-        }
-        const formatCache = cacheData[format];
-
-        if (formatCache.lastUpdate + cacheTimeout < now) {
-            if (format === VideoProvider.FORMAT_IMAGE_DATA) {
-                formatCache.lastData = context.getImageData(0, 0, width, height);
-            } else if (format === VideoProvider.FORMAT_CANVAS) {
-                // this will never change
-                formatCache.lastUpdate = Infinity;
-                formatCache.lastData = canvas;
-            } else {
-                log.error(`video io error - unimplemented format ${format}`);
-                // cache the null result forever, don't log about it again..
-                formatCache.lastUpdate = Infinity;
-                formatCache.lastData = null;
-            }
-
-            // rather than set to now, this data is as stale as it's canvas is
-            formatCache.lastUpdate = Math.max(workspace.lastUpdate, formatCache.lastUpdate);
-        }
-
-        return formatCache.lastData;
-    }
-
-    /**
-     * Method called when an error happens.  Default implementation is just to log error.
-     *
-     * @abstract
-     * @param {Error} error An error object from getUserMedia or other source of error.
-     */
-    onError (error) {
-        log.error('Unhandled video io device error', error);
-    }
-
-    /**
-     * Create a video stream.
-     * @private
-     * @return {Promise} When video has been received, rejected if video is not received
-     */
-    _setupVideo () {
-        // We cache the result of this setup so that we can only ever have a single
-        // video/getUserMedia request happen at a time.
-        if (this._singleSetup) {
-            return this._singleSetup;
-        }
-
-        this._singleSetup = requestVideoStream({
-            width: {min: 480, ideal: 640},
-            height: {min: 360, ideal: 480}
-        })
-            .then(stream => {
-                this._video = document.createElement('video');
-
-                // Use the new srcObject API, falling back to createObjectURL
-                try {
-                    this._video.srcObject = stream;
-                } catch (error) {
-                    this._video.src = window.URL.createObjectURL(stream);
-                }
-                // Hint to the stream that it should load. A standard way to do this
-                // is add the video tag to the DOM. Since this extension wants to
-                // hide the video tag and instead render a sample of the stream into
-                // the webgl rendered Scratch canvas, another hint like this one is
-                // needed.
-                this._video.play(); // Needed for Safari/Firefox, Chrome auto-plays.
-                this._track = stream.getTracks()[0];
-                return this;
-            })
-            .catch(error => {
-                this._singleSetup = null;
-                this.onError(error);
-            });
-
-        return this._singleSetup;
-    }
-
-    get videoReady () {
-        if (!this.enabled) {
-            return false;
-        }
-        if (!this._video) {
-            return false;
-        }
-        if (!this._track) {
-            return false;
-        }
-        const {videoWidth, videoHeight} = this._video;
-        if (typeof videoWidth !== 'number' || typeof videoHeight !== 'number') {
-            return false;
-        }
-        if (videoWidth === 0 || videoHeight === 0) {
-            return false;
-        }
-        return true;
-    }
-
-    /**
-     * get an internal workspace for canvas/context/caches
-     * this uses some document stuff to create a canvas and what not, probably needs abstraction
-     * into the renderer layer?
-     * @private
-     * @return {object} A workspace for canvas/data storage.  Internal format not documented intentionally
-     */
-    _getWorkspace ({dimensions, mirror}) {
-        let workspace = this._workspace.find(space => (
-            space.dimensions.join('-') === dimensions.join('-') &&
-            space.mirror === mirror
-        ));
-        if (!workspace) {
-            workspace = {
-                dimensions,
-                mirror,
-                canvas: document.createElement('canvas'),
-                lastUpdate: 0,
-                cacheData: {}
-            };
-            workspace.canvas.width = dimensions[0];
-            workspace.canvas.height = dimensions[1];
-            workspace.context = workspace.canvas.getContext('2d');
-            this._workspace.push(workspace);
-        }
-        return workspace;
-    }
-}
-
-export default VideoProvider;

From 16621261b534b6a3cea56dcdfd14e27bc2dbf001 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 1 May 2018 10:30:26 -0400
Subject: [PATCH 10/11] Add 'flash' to differentiate video from photo mode

---
 src/components/camera-modal/camera-modal.css | 21 ++++++++++++++++++--
 src/components/camera-modal/camera-modal.jsx |  3 +++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index a8d668ae7..c6200c14e 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -121,7 +121,7 @@ $main-button-size: 2.75rem;
 .button-row button {
     padding: 0.75rem 1rem;
     border-radius: 0.25rem;
-    background: white;
+    background: $ui-white;
     border: 1px solid $ui-black-transparent;
     font-weight: 600;
     font-size: 0.85rem;
@@ -131,5 +131,22 @@ $main-button-size: 2.75rem;
 .button-row button.ok-button {
     background: $motion-primary;
     border: $motion-primary;
-    color: white;
+    color: $ui-white;
+}
+
+@keyframes flash {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+.flash-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $ui-white;
+    animation-name: flash;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards; /* Leave at 0 opacity after animation */
 }
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index f9411be11..f115a6f8a 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -72,6 +72,9 @@ const CameraModal = ({intl, ...props}) => (
                     ref={props.canvasRef}
                     width="960"
                 />
+                {props.capture ? (
+                    <div className={styles.flashOverlay} />
+                ) : null}
             </Box>
             {props.capture ?
                 <Box className={styles.buttonRow}>

From 0bd6227173867bdd992828329f36ae4b8f1c4798 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 1 May 2018 10:37:22 -0400
Subject: [PATCH 11/11] Fix nits

---
 src/components/camera-modal/camera-modal.css | 3 ++-
 src/containers/camera-modal.jsx              | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index c6200c14e..5f631e41b 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -49,7 +49,7 @@ $main-button-size: 2.75rem;
 .help-text {
     margin: 10px auto 0;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: rgb(167, 170, 181);
+    color: $text-primary-transparent;
     font-size: 0.95rem;
     font-weight: 500;
     text-align: center;
@@ -126,6 +126,7 @@ $main-button-size: 2.75rem;
     font-weight: 600;
     font-size: 0.85rem;
     color: $motion-primary;
+    cursor: pointer;
 }
 
 .button-row button.ok-button {
diff --git a/src/containers/camera-modal.jsx b/src/containers/camera-modal.jsx
index 0641b3c61..c55b0ee45 100644
--- a/src/containers/camera-modal.jsx
+++ b/src/containers/camera-modal.jsx
@@ -33,7 +33,9 @@ class CameraModal extends React.Component {
         };
     }
     componentWillUnmount () {
-        this.videoDevice.disableVideo();
+        if (this.videoDevice) {
+            this.videoDevice.disableVideo();
+        }
     }
     handleAccess () {
         this.setState({access: true});